@ai-matrx/chat 0.5.0 → 0.5.3

package/dist/agents/components/debug/StreamDebugPanel.js

@@ -1,4 +1,5 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useClipboard } from "@ai-matrx/kit/clipboard";
 import { toast } from "../../../host/notify.js";
 import { Chip, Button, DisclosureHeader } from "@ai-matrx/design-system/controls";
@@ -47,7 +48,7 @@ import { ErrorAlchemyMenu } from "../../../host/ui-slots.js";
 import { humanizeIdentifier } from "@ai-matrx/kit/text-case";
 const DEBUG_PANEL_SHELL = "flex flex-col flex-1 min-h-0 h-full w-full bg-background text-foreground";
 function DebugTabScroll({ children }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col flex-1 min-h-0 h-full" }, /* @__PURE__ */ React.createElement(ScrollArea, { className: "flex-1 min-h-0" }, children));
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col flex-1 min-h-0 h-full", children: /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1 min-h-0", children }) });
 }
 function useCopy() {
   const { copyText } = useClipboard({
@@ -67,7 +68,7 @@ function CopyBtn({
   className
 }) {
   const { copied, copy } = useCopy();
-  return /* @__PURE__ */ React.createElement(Button, { variant: "quiet", icon: copied === id ? /* @__PURE__ */ React.createElement(Check, null) : /* @__PURE__ */ React.createElement(Copy, null), glyphTone: copied === id ? "success" : void 0, "aria-label": "Copy", onClick: (e) => {
+  return /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: copied === id ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Copy, {}), glyphTone: copied === id ? "success" : void 0, "aria-label": "Copy", onClick: (e) => {
     e.stopPropagation();
     copy(text, id);
   }, className });
@@ -83,26 +84,26 @@ function TimelineCopyChip({
   const { copied, copy } = useCopy();
   const done = copied === id;
   const Leading = LeadingIcon ?? Copy;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     Chip,
     {
       asChild: true,
       className: "shrink-0",
       tone: done ? "success" : tone,
-      icon: done ? /* @__PURE__ */ React.createElement(Check, null) : /* @__PURE__ */ React.createElement(Leading, null),
+      icon: done ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Leading, {}),
       label,
-      title: tooltip
-    },
-    /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: (e) => {
-          e.stopPropagation();
-          copy(text, id);
+      title: tooltip,
+      children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: (e) => {
+            e.stopPropagation();
+            copy(text, id);
+          }
         }
-      }
-    )
+      )
+    }
   );
 }
 function JsonView({
@@ -116,18 +117,31 @@ function JsonView({
   if (data === null || data === void 0) return null;
   const isSimple = typeof data === "string" || typeof data === "number" || typeof data === "boolean";
   if (isSimple) {
-    return /* @__PURE__ */ React.createElement("span", { className: "inline-flex items-center gap-1 text-[10px]" }, label && /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground" }, label, ":"), /* @__PURE__ */ React.createElement("code", { className: "text-foreground/80 bg-muted/50 px-1 rounded max-w-[300px] truncate inline-block" }, String(data)), /* @__PURE__ */ React.createElement(CopyBtn, { text: String(data), id }));
+    return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 text-[10px]", children: [
+      label && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+        label,
+        ":"
+      ] }),
+      /* @__PURE__ */ jsx("code", { className: "text-foreground/80 bg-muted/50 px-1 rounded max-w-[300px] truncate inline-block", children: String(data) }),
+      /* @__PURE__ */ jsx(CopyBtn, { text: String(data), id })
+    ] });
   }
-  return /* @__PURE__ */ React.createElement("div", { className: "text-[10px]" }, /* @__PURE__ */ React.createElement(
-    DisclosureHeader,
-    {
-      className: "w-full",
-      open,
-      onClick: () => setOpen(!open),
-      title: label ?? "Value",
-      meta: !open ? json.length > 100 ? `${json.length} chars` : json.slice(0, 60) : void 0
-    }
-  ), open && /* @__PURE__ */ React.createElement("div", { className: "relative mt-0.5 ml-2" }, /* @__PURE__ */ React.createElement(CopyBtn, { text: json, id, className: "absolute top-0 right-0" }), /* @__PURE__ */ React.createElement("pre", { className: "bg-muted/30 border border-border/50 rounded p-1 text-[9px] overflow-x-auto whitespace-pre-wrap break-all max-h-[300px] overflow-y-auto font-mono" }, json)));
+  return /* @__PURE__ */ jsxs("div", { className: "text-[10px]", children: [
+    /* @__PURE__ */ jsx(
+      DisclosureHeader,
+      {
+        className: "w-full",
+        open,
+        onClick: () => setOpen(!open),
+        title: label ?? "Value",
+        meta: !open ? json.length > 100 ? `${json.length} chars` : json.slice(0, 60) : void 0
+      }
+    ),
+    open && /* @__PURE__ */ jsxs("div", { className: "relative mt-0.5 ml-2", children: [
+      /* @__PURE__ */ jsx(CopyBtn, { text: json, id, className: "absolute top-0 right-0" }),
+      /* @__PURE__ */ jsx("pre", { className: "bg-muted/30 border border-border/50 rounded p-1 text-[9px] overflow-x-auto whitespace-pre-wrap break-all max-h-[300px] overflow-y-auto font-mono", children: json })
+    ] })
+  ] });
 }
 const EVENT_COLORS = {
   chunk: "bg-blue-500/20 text-blue-400 border-blue-500/30",
@@ -150,24 +164,24 @@ const EVENT_COLORS = {
   context_analysis: "bg-slate-500/20 text-slate-400 border-slate-500/30"
 };
 const EVENT_ICONS = {
-  chunk: /* @__PURE__ */ React.createElement(FileText, { className: "h-2.5 w-2.5" }),
-  reasoning_chunk: /* @__PURE__ */ React.createElement(Brain, { className: "h-2.5 w-2.5" }),
-  phase: /* @__PURE__ */ React.createElement(Activity, { className: "h-2.5 w-2.5" }),
-  init: /* @__PURE__ */ React.createElement(Zap, { className: "h-2.5 w-2.5" }),
-  warning: /* @__PURE__ */ React.createElement(ShieldAlert, { className: "h-2.5 w-2.5" }),
-  info: /* @__PURE__ */ React.createElement(Info, { className: "h-2.5 w-2.5" }),
-  data: /* @__PURE__ */ React.createElement(Database, { className: "h-2.5 w-2.5" }),
-  completion: /* @__PURE__ */ React.createElement(BarChart3, { className: "h-2.5 w-2.5" }),
-  error: /* @__PURE__ */ React.createElement(AlertTriangle, { className: "h-2.5 w-2.5" }),
-  tool_event: /* @__PURE__ */ React.createElement(Wrench, { className: "h-2.5 w-2.5" }),
-  heartbeat: /* @__PURE__ */ React.createElement(Heart, { className: "h-2.5 w-2.5" }),
-  end: /* @__PURE__ */ React.createElement(Square, { className: "h-2.5 w-2.5" }),
-  render_block: /* @__PURE__ */ React.createElement(Layers, { className: "h-2.5 w-2.5" }),
-  record_reserved: /* @__PURE__ */ React.createElement(BookmarkPlus, { className: "h-2.5 w-2.5" }),
-  record_update: /* @__PURE__ */ React.createElement(RefreshCw, { className: "h-2.5 w-2.5" }),
-  resource_changed: /* @__PURE__ */ React.createElement(FilePlus2, { className: "h-2.5 w-2.5" }),
-  structured_output: /* @__PURE__ */ React.createElement(ListChecks, { className: "h-2.5 w-2.5" }),
-  context_analysis: /* @__PURE__ */ React.createElement(ScanSearch, { className: "h-2.5 w-2.5" })
+  chunk: /* @__PURE__ */ jsx(FileText, { className: "h-2.5 w-2.5" }),
+  reasoning_chunk: /* @__PURE__ */ jsx(Brain, { className: "h-2.5 w-2.5" }),
+  phase: /* @__PURE__ */ jsx(Activity, { className: "h-2.5 w-2.5" }),
+  init: /* @__PURE__ */ jsx(Zap, { className: "h-2.5 w-2.5" }),
+  warning: /* @__PURE__ */ jsx(ShieldAlert, { className: "h-2.5 w-2.5" }),
+  info: /* @__PURE__ */ jsx(Info, { className: "h-2.5 w-2.5" }),
+  data: /* @__PURE__ */ jsx(Database, { className: "h-2.5 w-2.5" }),
+  completion: /* @__PURE__ */ jsx(BarChart3, { className: "h-2.5 w-2.5" }),
+  error: /* @__PURE__ */ jsx(AlertTriangle, { className: "h-2.5 w-2.5" }),
+  tool_event: /* @__PURE__ */ jsx(Wrench, { className: "h-2.5 w-2.5" }),
+  heartbeat: /* @__PURE__ */ jsx(Heart, { className: "h-2.5 w-2.5" }),
+  end: /* @__PURE__ */ jsx(Square, { className: "h-2.5 w-2.5" }),
+  render_block: /* @__PURE__ */ jsx(Layers, { className: "h-2.5 w-2.5" }),
+  record_reserved: /* @__PURE__ */ jsx(BookmarkPlus, { className: "h-2.5 w-2.5" }),
+  record_update: /* @__PURE__ */ jsx(RefreshCw, { className: "h-2.5 w-2.5" }),
+  resource_changed: /* @__PURE__ */ jsx(FilePlus2, { className: "h-2.5 w-2.5" }),
+  structured_output: /* @__PURE__ */ jsx(ListChecks, { className: "h-2.5 w-2.5" }),
+  context_analysis: /* @__PURE__ */ jsx(ScanSearch, { className: "h-2.5 w-2.5" })
 };
 const STATUS_COLORS = {
   pending: "bg-gray-500/20 text-gray-400",
@@ -191,62 +205,124 @@ function StatusBar({
   request,
   instanceStatus
 }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 flex-wrap px-2 py-1.5 border-b border-border/50 bg-muted/20" }, /* @__PURE__ */ React.createElement("span", { className: "text-[10px] text-muted-foreground font-mono" }, "REQ"), /* @__PURE__ */ React.createElement(
-    Badge,
-    {
-      variant: "outline",
-      className: cn(
-        "text-[10px] px-1.5 py-0 h-5 font-mono",
-        STATUS_COLORS[request.status] ?? ""
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap px-2 py-1.5 border-b border-border/50 bg-muted/20", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground font-mono", children: "REQ" }),
+    /* @__PURE__ */ jsx(
+      Badge,
+      {
+        variant: "outline",
+        className: cn(
+          "text-[10px] px-1.5 py-0 h-5 font-mono",
+          STATUS_COLORS[request.status] ?? ""
+        ),
+        children: request.status
+      }
+    ),
+    instanceStatus && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground font-mono", children: "INST" }),
+      /* @__PURE__ */ jsx(
+        Badge,
+        {
+          variant: "outline",
+          className: cn(
+            "text-[10px] px-1.5 py-0 h-5 font-mono",
+            INSTANCE_STATUS_COLORS[instanceStatus] ?? ""
+          ),
+          children: instanceStatus
+        }
       )
-    },
-    request.status
-  ), instanceStatus && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: "text-[10px] text-muted-foreground font-mono" }, "INST"), /* @__PURE__ */ React.createElement(
-    Badge,
-    {
-      variant: "outline",
-      className: cn(
-        "text-[10px] px-1.5 py-0 h-5 font-mono",
-        INSTANCE_STATUS_COLORS[instanceStatus] ?? ""
+    ] }),
+    request.currentPhase && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: "|" }),
+      /* @__PURE__ */ jsx(
+        Badge,
+        {
+          variant: "outline",
+          className: "text-[10px] px-1.5 py-0 h-5 bg-yellow-500/10 text-yellow-400",
+          children: request.currentPhase
+        }
       )
-    },
-    instanceStatus
-  )), request.currentPhase && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: "text-[10px] text-muted-foreground" }, "|"), /* @__PURE__ */ React.createElement(
-    Badge,
-    {
-      variant: "outline",
-      className: "text-[10px] px-1.5 py-0 h-5 bg-yellow-500/10 text-yellow-400"
-    },
-    request.currentPhase
-  )), request.error && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: "text-[10px] text-muted-foreground" }, "|"), /* @__PURE__ */ React.createElement(
-    Badge,
-    {
-      variant: "destructive",
-      className: "text-[10px] px-1.5 py-0 h-5 max-w-[60ch] truncate",
-      title: [
-        `error_type: ${request.error.error_type}`,
-        request.error.code ? `code: ${request.error.code}` : null,
-        `message: ${request.error.message}`,
-        request.error.user_message ? `user_message: ${request.error.user_message}` : null
-      ].filter(Boolean).join("\n")
-    },
-    `ERR [${request.error.error_type}${request.error.code ? `:${request.error.code}` : ""}]: ${request.error.message}`.slice(0, 80)
-  )), request.conversationId && /* @__PURE__ */ React.createElement("span", { className: "text-[10px] text-muted-foreground font-mono ml-auto flex items-center gap-0.5" }, "conv:", /* @__PURE__ */ React.createElement(
-    EntityRef,
-    {
-      token: "conversation",
-      id: request.conversationId,
-      name: request.conversationId,
-      showIcon: false
-    },
-    request.conversationId.slice(0, 8),
-    "..."
-  ), /* @__PURE__ */ React.createElement(CopyBtn, { text: request.conversationId, id: "conv-id" })));
+    ] }),
+    request.error && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: "|" }),
+      /* @__PURE__ */ jsx(
+        Badge,
+        {
+          variant: "destructive",
+          className: "text-[10px] px-1.5 py-0 h-5 max-w-[60ch] truncate",
+          title: [
+            `error_type: ${request.error.error_type}`,
+            request.error.code ? `code: ${request.error.code}` : null,
+            `message: ${request.error.message}`,
+            request.error.user_message ? `user_message: ${request.error.user_message}` : null
+          ].filter(Boolean).join("\n"),
+          children: `ERR [${request.error.error_type}${request.error.code ? `:${request.error.code}` : ""}]: ${request.error.message}`.slice(0, 80)
+        }
+      )
+    ] }),
+    request.conversationId && /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-muted-foreground font-mono ml-auto flex items-center gap-0.5", children: [
+      "conv:",
+      /* @__PURE__ */ jsxs(
+        EntityRef,
+        {
+          token: "conversation",
+          id: request.conversationId,
+          name: request.conversationId,
+          showIcon: false,
+          children: [
+            request.conversationId.slice(0, 8),
+            "..."
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(CopyBtn, { text: request.conversationId, id: "conv-id" })
+    ] })
+  ] });
 }
 function MetricsBar({ metrics }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 flex-wrap px-2 py-1 border-b border-border/50 bg-muted/10 text-[10px]" }, /* @__PURE__ */ React.createElement("span", { className: "flex items-center gap-0.5 text-muted-foreground" }, /* @__PURE__ */ React.createElement(Clock, { className: "h-3 w-3" }), " TTFT:"), /* @__PURE__ */ React.createElement("span", { className: "font-mono text-foreground/80" }, formatDurationMs(metrics.ttftMs, { style: "compact" })), /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground/40" }, "|"), /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground" }, "Stream:"), /* @__PURE__ */ React.createElement("span", { className: "font-mono text-foreground/80" }, formatDurationMs(metrics.streamDurationMs, { style: "compact" })), /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground/40" }, "|"), /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground" }, "Total:"), /* @__PURE__ */ React.createElement("span", { className: "font-mono text-foreground/80" }, formatDurationMs(metrics.totalClientDurationMs, {
-    style: "compact"
-  })), /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground/40" }, "|"), /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground" }, "Events:"), /* @__PURE__ */ React.createElement("span", { className: "font-mono text-foreground/80" }, metrics.totalEvents), /* @__PURE__ */ React.createElement("span", { className: "text-[9px] text-muted-foreground/60" }, "(chunk:", metrics.chunkEvents, metrics.reasoningChunkEvents > 0 && ` reason:${metrics.reasoningChunkEvents}`, " ", "phase:", metrics.phaseEvents, metrics.initEvents > 0 && ` init:${metrics.initEvents}`, metrics.completionEvents > 0 && ` comp:${metrics.completionEvents}`, metrics.warningEvents > 0 && ` warn:${metrics.warningEvents}`, metrics.infoEvents > 0 && ` info:${metrics.infoEvents}`, " tool:", metrics.toolEvents, " data:", metrics.dataEvents, " block:", metrics.renderBlockEvents, metrics.recordReservedEvents > 0 && ` reserved:${metrics.recordReservedEvents}`, metrics.recordUpdateEvents > 0 && ` updated:${metrics.recordUpdateEvents}`, metrics.resourceChangedEvents > 0 && ` fs:${metrics.resourceChangedEvents}`, " ", "other:", metrics.otherEvents, ")"));
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 flex-wrap px-2 py-1 border-b border-border/50 bg-muted/10 text-[10px]", children: [
+    /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-0.5 text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(Clock, { className: "h-3 w-3" }),
+      " TTFT:"
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "font-mono text-foreground/80", children: formatDurationMs(metrics.ttftMs, { style: "compact" }) }),
+    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/40", children: "|" }),
+    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Stream:" }),
+    /* @__PURE__ */ jsx("span", { className: "font-mono text-foreground/80", children: formatDurationMs(metrics.streamDurationMs, { style: "compact" }) }),
+    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/40", children: "|" }),
+    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Total:" }),
+    /* @__PURE__ */ jsx("span", { className: "font-mono text-foreground/80", children: formatDurationMs(metrics.totalClientDurationMs, {
+      style: "compact"
+    }) }),
+    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/40", children: "|" }),
+    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Events:" }),
+    /* @__PURE__ */ jsx("span", { className: "font-mono text-foreground/80", children: metrics.totalEvents }),
+    /* @__PURE__ */ jsxs("span", { className: "text-[9px] text-muted-foreground/60", children: [
+      "(chunk:",
+      metrics.chunkEvents,
+      metrics.reasoningChunkEvents > 0 && ` reason:${metrics.reasoningChunkEvents}`,
+      " ",
+      "phase:",
+      metrics.phaseEvents,
+      metrics.initEvents > 0 && ` init:${metrics.initEvents}`,
+      metrics.completionEvents > 0 && ` comp:${metrics.completionEvents}`,
+      metrics.warningEvents > 0 && ` warn:${metrics.warningEvents}`,
+      metrics.infoEvents > 0 && ` info:${metrics.infoEvents}`,
+      " tool:",
+      metrics.toolEvents,
+      " data:",
+      metrics.dataEvents,
+      " block:",
+      metrics.renderBlockEvents,
+      metrics.recordReservedEvents > 0 && ` reserved:${metrics.recordReservedEvents}`,
+      metrics.recordUpdateEvents > 0 && ` updated:${metrics.recordUpdateEvents}`,
+      metrics.resourceChangedEvents > 0 && ` fs:${metrics.resourceChangedEvents}`,
+      " ",
+      "other:",
+      metrics.otherEvents,
+      ")"
+    ] })
+  ] });
 }
 function getTimelineColor(kind) {
   const map = {
@@ -294,9 +370,9 @@ function getTimelineIcon(kind) {
     record_update: EVENT_ICONS.record_update,
     resource_changed: EVENT_ICONS.resource_changed,
     structured_output: EVENT_ICONS.structured_output,
-    unknown: /* @__PURE__ */ React.createElement(AlertTriangle, { className: "h-2.5 w-2.5" })
+    unknown: /* @__PURE__ */ jsx(AlertTriangle, { className: "h-2.5 w-2.5" })
   };
-  return map[kind] ?? /* @__PURE__ */ React.createElement(CircleDot, { className: "h-2.5 w-2.5" });
+  return map[kind] ?? /* @__PURE__ */ jsx(CircleDot, { className: "h-2.5 w-2.5" });
 }
 function timelineSummary(entry, renderBlocks, renderBlockOrder, reasoningChunks) {
   switch (entry.kind) {
@@ -419,59 +495,74 @@ function TimelineRow({
     renderBlockOrder,
     reasoningChunks
   );
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
         "border-b border-border/20 hover:bg-muted/20 transition-colors",
         expanded && "bg-muted/10"
-      )
-    },
-    /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        role: "button",
-        tabIndex: 0,
-        onClick: () => setLocalExpanded(!localExpanded),
-        onKeyDown: (e) => e.key === "Enter" || e.key === " " ? setLocalExpanded(!localExpanded) : void 0,
-        className: "w-full flex items-center gap-1.5 px-2 py-1 text-left cursor-pointer"
-      },
-      /* @__PURE__ */ React.createElement("span", { className: "text-[10px] font-mono text-muted-foreground/60 w-7 shrink-0 text-right" }, entry.seq),
-      /* @__PURE__ */ React.createElement("span", { className: "text-[10px] font-mono text-muted-foreground/80 w-16 shrink-0 text-right" }, relativeMs.toFixed(0), "ms"),
-      /* @__PURE__ */ React.createElement(
-        Badge,
-        {
-          variant: "outline",
-          className: cn(
-            "text-[10px] px-1.5 py-0 h-5 gap-0.5 shrink-0 border",
-            colorClass
-          )
-        },
-        icon,
-        humanizeIdentifier(entry.kind)
-      ),
-      entry.kind === "tool_event" && /* @__PURE__ */ React.createElement(
-        Badge,
-        {
-          variant: "outline",
-          className: cn(
-            "text-[10px] px-1.5 py-0 h-5 shrink-0 border",
-            colorClass
-          )
-        },
-        entry.data.event
       ),
-      /* @__PURE__ */ React.createElement("span", { className: "flex-1 text-[10px] text-muted-foreground/60 truncate font-mono" }, summary),
-      /* @__PURE__ */ React.createElement(CopyBtn, { text: json, id: `tl-${entry.seq}` }),
-      expanded ? /* @__PURE__ */ React.createElement(ChevronDown, { className: "h-3 w-3 text-muted-foreground shrink-0" }) : /* @__PURE__ */ React.createElement(ChevronRight, { className: "h-3 w-3 text-muted-foreground shrink-0" })
-    ),
-    expanded && /* @__PURE__ */ React.createElement("div", { className: "px-1.5 pb-1 ml-[90px]" }, entry.kind === "text_end" && /* @__PURE__ */ React.createElement("div", { className: "mb-1" }, /* @__PURE__ */ React.createElement("pre", { className: "text-[9px] font-mono bg-muted/30 border border-border/50 rounded p-1 whitespace-pre-wrap break-all max-h-[200px] overflow-y-auto" }, renderBlockOrder.slice(entry.blockStartIndex, entry.blockEndIndex).map((id) => renderBlocks[id]?.content ?? "").join("")), /* @__PURE__ */ React.createElement(
-      CopyBtn,
-      {
-        text: renderBlockOrder.slice(entry.blockStartIndex, entry.blockEndIndex).map((id) => renderBlocks[id]?.content ?? "").join(""),
-        id: `tl-text-${entry.seq}`
-      }
-    )), /* @__PURE__ */ React.createElement(JsonView, { data: entry, id: `tl-data-${entry.seq}` }))
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "button",
+            tabIndex: 0,
+            onClick: () => setLocalExpanded(!localExpanded),
+            onKeyDown: (e) => e.key === "Enter" || e.key === " " ? setLocalExpanded(!localExpanded) : void 0,
+            className: "w-full flex items-center gap-1.5 px-2 py-1 text-left cursor-pointer",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] font-mono text-muted-foreground/60 w-7 shrink-0 text-right", children: entry.seq }),
+              /* @__PURE__ */ jsxs("span", { className: "text-[10px] font-mono text-muted-foreground/80 w-16 shrink-0 text-right", children: [
+                relativeMs.toFixed(0),
+                "ms"
+              ] }),
+              /* @__PURE__ */ jsxs(
+                Badge,
+                {
+                  variant: "outline",
+                  className: cn(
+                    "text-[10px] px-1.5 py-0 h-5 gap-0.5 shrink-0 border",
+                    colorClass
+                  ),
+                  children: [
+                    icon,
+                    humanizeIdentifier(entry.kind)
+                  ]
+                }
+              ),
+              entry.kind === "tool_event" && /* @__PURE__ */ jsx(
+                Badge,
+                {
+                  variant: "outline",
+                  className: cn(
+                    "text-[10px] px-1.5 py-0 h-5 shrink-0 border",
+                    colorClass
+                  ),
+                  children: entry.data.event
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "flex-1 text-[10px] text-muted-foreground/60 truncate font-mono", children: summary }),
+              /* @__PURE__ */ jsx(CopyBtn, { text: json, id: `tl-${entry.seq}` }),
+              expanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-3 w-3 text-muted-foreground shrink-0" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3 text-muted-foreground shrink-0" })
+            ]
+          }
+        ),
+        expanded && /* @__PURE__ */ jsxs("div", { className: "px-1.5 pb-1 ml-[90px]", children: [
+          entry.kind === "text_end" && /* @__PURE__ */ jsxs("div", { className: "mb-1", children: [
+            /* @__PURE__ */ jsx("pre", { className: "text-[9px] font-mono bg-muted/30 border border-border/50 rounded p-1 whitespace-pre-wrap break-all max-h-[200px] overflow-y-auto", children: renderBlockOrder.slice(entry.blockStartIndex, entry.blockEndIndex).map((id) => renderBlocks[id]?.content ?? "").join("") }),
+            /* @__PURE__ */ jsx(
+              CopyBtn,
+              {
+                text: renderBlockOrder.slice(entry.blockStartIndex, entry.blockEndIndex).map((id) => renderBlocks[id]?.content ?? "").join(""),
+                id: `tl-text-${entry.seq}`
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(JsonView, { data: entry, id: `tl-data-${entry.seq}` })
+        ] })
+      ]
+    }
   );
 }
 function ToolLifecycleRow({ tool }) {
@@ -483,45 +574,66 @@ function ToolLifecycleRow({ tool }) {
     completed: "bg-green-500/20 text-green-400",
     error: "bg-red-500/20 text-red-400"
   };
-  return /* @__PURE__ */ React.createElement("div", { className: "border-b border-border/20 px-1.5 py-0.5" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1 flex-wrap" }, /* @__PURE__ */ React.createElement(
-    Badge,
-    {
-      variant: "outline",
-      className: cn(
-        "text-[9px] px-1 py-0 h-4",
-        statusColor[tool.status] ?? ""
+  return /* @__PURE__ */ jsxs("div", { className: "border-b border-border/20 px-1.5 py-0.5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 flex-wrap", children: [
+      /* @__PURE__ */ jsx(
+        Badge,
+        {
+          variant: "outline",
+          className: cn(
+            "text-[9px] px-1 py-0 h-4",
+            statusColor[tool.status] ?? ""
+          ),
+          children: tool.status
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium text-foreground/80", children: humanizeIdentifier(tool.toolName) }),
+      /* @__PURE__ */ jsx("span", { className: "text-[8px] font-mono text-muted-foreground/60", children: tool.callId.slice(0, 12) }),
+      tool.isDelegated && /* @__PURE__ */ jsx(
+        Badge,
+        {
+          variant: "outline",
+          className: "text-[8px] px-0.5 py-0 h-3 bg-orange-500/10 text-orange-400",
+          children: "delegated"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        CopyBtn,
+        {
+          text: JSON.stringify(tool, null, 2),
+          id: `tool-${tool.callId}`,
+          className: "ml-auto"
+        }
       )
-    },
-    tool.status
-  ), /* @__PURE__ */ React.createElement("span", { className: "text-[10px] font-medium text-foreground/80" }, humanizeIdentifier(tool.toolName)), /* @__PURE__ */ React.createElement("span", { className: "text-[8px] font-mono text-muted-foreground/60" }, tool.callId.slice(0, 12)), tool.isDelegated && /* @__PURE__ */ React.createElement(
-    Badge,
-    {
-      variant: "outline",
-      className: "text-[8px] px-0.5 py-0 h-3 bg-orange-500/10 text-orange-400"
-    },
-    "delegated"
-  ), /* @__PURE__ */ React.createElement(
-    CopyBtn,
-    {
-      text: JSON.stringify(tool, null, 2),
-      id: `tool-${tool.callId}`,
-      className: "ml-auto"
-    }
-  )), tool.latestMessage && /* @__PURE__ */ React.createElement("p", { className: "text-[9px] text-muted-foreground ml-2 mt-0.5" }, tool.latestMessage), tool.arguments && Object.keys(tool.arguments).length > 0 && /* @__PURE__ */ React.createElement(
-    JsonView,
-    {
-      data: tool.arguments,
-      label: "args",
-      id: `tool-args-${tool.callId}`
-    }
-  ), tool.result !== null && /* @__PURE__ */ React.createElement(
-    JsonView,
-    {
-      data: tool.result,
-      label: "result",
-      id: `tool-result-${tool.callId}`
-    }
-  ), tool.resultPreview && /* @__PURE__ */ React.createElement("div", { className: "text-[9px] text-muted-foreground ml-2" }, "Preview: ", tool.resultPreview), tool.errorMessage && /* @__PURE__ */ React.createElement("div", { className: "text-[9px] text-red-400 ml-2" }, tool.errorType, ": ", tool.errorMessage, /* @__PURE__ */ React.createElement(ErrorAlchemyMenu, { error: tool.errorType })));
+    ] }),
+    tool.latestMessage && /* @__PURE__ */ jsx("p", { className: "text-[9px] text-muted-foreground ml-2 mt-0.5", children: tool.latestMessage }),
+    tool.arguments && Object.keys(tool.arguments).length > 0 && /* @__PURE__ */ jsx(
+      JsonView,
+      {
+        data: tool.arguments,
+        label: "args",
+        id: `tool-args-${tool.callId}`
+      }
+    ),
+    tool.result !== null && /* @__PURE__ */ jsx(
+      JsonView,
+      {
+        data: tool.result,
+        label: "result",
+        id: `tool-result-${tool.callId}`
+      }
+    ),
+    tool.resultPreview && /* @__PURE__ */ jsxs("div", { className: "text-[9px] text-muted-foreground ml-2", children: [
+      "Preview: ",
+      tool.resultPreview
+    ] }),
+    tool.errorMessage && /* @__PURE__ */ jsxs("div", { className: "text-[9px] text-red-400 ml-2", children: [
+      tool.errorType,
+      ": ",
+      tool.errorMessage,
+      /* @__PURE__ */ jsx(ErrorAlchemyMenu, { error: tool.errorType })
+    ] })
+  ] });
 }
 function ContentBlockRow({ block }) {
   const statusColor = {
@@ -529,48 +641,67 @@ function ContentBlockRow({ block }) {
     complete: "bg-green-500/20 text-green-400",
     error: "bg-red-500/20 text-red-400"
   };
-  return /* @__PURE__ */ React.createElement("div", { className: "border-b border-border/20 px-1.5 py-0.5" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ React.createElement(
-    Badge,
-    {
-      variant: "outline",
-      className: cn(
-        "text-[9px] px-1 py-0 h-4",
-        statusColor[block.status] ?? ""
+  return /* @__PURE__ */ jsxs("div", { className: "border-b border-border/20 px-1.5 py-0.5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx(
+        Badge,
+        {
+          variant: "outline",
+          className: cn(
+            "text-[9px] px-1 py-0 h-4",
+            statusColor[block.status] ?? ""
+          ),
+          children: block.status
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium text-foreground/80", children: block.type }),
+      /* @__PURE__ */ jsxs("span", { className: "text-[8px] font-mono text-muted-foreground/60", children: [
+        "#",
+        block.blockIndex,
+        " ",
+        block.blockId.slice(0, 12)
+      ] }),
+      /* @__PURE__ */ jsx(
+        CopyBtn,
+        {
+          text: JSON.stringify(block, null, 2),
+          id: `block-${block.blockId}`,
+          className: "ml-auto"
+        }
       )
-    },
-    block.status
-  ), /* @__PURE__ */ React.createElement("span", { className: "text-[10px] font-medium text-foreground/80" }, block.type), /* @__PURE__ */ React.createElement("span", { className: "text-[8px] font-mono text-muted-foreground/60" }, "#", block.blockIndex, " ", block.blockId.slice(0, 12)), /* @__PURE__ */ React.createElement(
-    CopyBtn,
-    {
-      text: JSON.stringify(block, null, 2),
-      id: `block-${block.blockId}`,
-      className: "ml-auto"
-    }
-  )), block.content && /* @__PURE__ */ React.createElement("pre", { className: "text-[9px] text-muted-foreground ml-2 mt-0.5 whitespace-pre-wrap break-all max-h-[100px] overflow-y-auto font-mono" }, block.content), block.data && /* @__PURE__ */ React.createElement(
-    JsonView,
-    {
-      data: block.data,
-      label: "data",
-      id: `block-data-${block.blockId}`
-    }
-  ), block.metadata && /* @__PURE__ */ React.createElement(
-    JsonView,
-    {
-      data: block.metadata,
-      label: "meta",
-      id: `block-meta-${block.blockId}`
-    }
-  ));
+    ] }),
+    block.content && /* @__PURE__ */ jsx("pre", { className: "text-[9px] text-muted-foreground ml-2 mt-0.5 whitespace-pre-wrap break-all max-h-[100px] overflow-y-auto font-mono", children: block.content }),
+    block.data && /* @__PURE__ */ jsx(
+      JsonView,
+      {
+        data: block.data,
+        label: "data",
+        id: `block-data-${block.blockId}`
+      }
+    ),
+    block.metadata && /* @__PURE__ */ jsx(
+      JsonView,
+      {
+        data: block.metadata,
+        label: "meta",
+        id: `block-meta-${block.blockId}`
+      }
+    )
+  ] });
 }
 function PhaseHistoryRow({ phase, idx }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "border-b border-border/20 px-1.5 py-0.5 flex items-center gap-1" }, /* @__PURE__ */ React.createElement("span", { className: "text-[9px] font-mono text-muted-foreground/60 w-4 text-right" }, idx + 1), /* @__PURE__ */ React.createElement(
-    Badge,
-    {
-      variant: "outline",
-      className: "text-[9px] px-1 py-0 h-4 bg-yellow-500/10 text-yellow-400"
-    },
-    phase
-  ), /* @__PURE__ */ React.createElement(CopyBtn, { text: phase, id: `phase-${idx}`, className: "ml-auto" }));
+  return /* @__PURE__ */ jsxs("div", { className: "border-b border-border/20 px-1.5 py-0.5 flex items-center gap-1", children: [
+    /* @__PURE__ */ jsx("span", { className: "text-[9px] font-mono text-muted-foreground/60 w-4 text-right", children: idx + 1 }),
+    /* @__PURE__ */ jsx(
+      Badge,
+      {
+        variant: "outline",
+        className: "text-[9px] px-1 py-0 h-4 bg-yellow-500/10 text-yellow-400",
+        children: phase
+      }
+    ),
+    /* @__PURE__ */ jsx(CopyBtn, { text: phase, id: `phase-${idx}`, className: "ml-auto" })
+  ] });
 }
 const ALL_TIMELINE_KINDS = [
   "text_start",
@@ -598,25 +729,30 @@ function TimelineFilterBar({
   onToggle,
   counts
 }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1 flex-wrap px-2 py-1 border-b border-border/50 shrink-0" }, /* @__PURE__ */ React.createElement(Filter, { className: "h-3.5 w-3.5 text-muted-foreground mr-0.5" }), ALL_TIMELINE_KINDS.map((kind) => {
-    const active = activeFilters.has(kind);
-    const count = counts[kind] ?? 0;
-    return /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        key: kind,
-        type: "button",
-        onClick: () => onToggle(kind),
-        className: cn(
-          "inline-flex items-center gap-0.5 text-[10px] px-1.5 py-0 h-5 rounded border transition-colors",
-          active ? getTimelineColor(kind) : "bg-muted/20 text-muted-foreground/40 border-transparent hover:border-border/50"
-        )
-      },
-      getTimelineIcon(kind),
-      kind.replace("_", " "),
-      count > 0 && /* @__PURE__ */ React.createElement("span", { className: "font-mono ml-0.5" }, count)
-    );
-  }));
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 flex-wrap px-2 py-1 border-b border-border/50 shrink-0", children: [
+    /* @__PURE__ */ jsx(Filter, { className: "h-3.5 w-3.5 text-muted-foreground mr-0.5" }),
+    ALL_TIMELINE_KINDS.map((kind) => {
+      const active = activeFilters.has(kind);
+      const count = counts[kind] ?? 0;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => onToggle(kind),
+          className: cn(
+            "inline-flex items-center gap-0.5 text-[10px] px-1.5 py-0 h-5 rounded border transition-colors",
+            active ? getTimelineColor(kind) : "bg-muted/20 text-muted-foreground/40 border-transparent hover:border-border/50"
+          ),
+          children: [
+            getTimelineIcon(kind),
+            kind.replace("_", " "),
+            count > 0 && /* @__PURE__ */ jsx("span", { className: "font-mono ml-0.5", children: count })
+          ]
+        },
+        kind
+      );
+    })
+  ] });
 }
 function TimelineTab({ request }) {
   const [filters, setFilters] = useState(
@@ -657,259 +793,469 @@ function TimelineTab({ request }) {
     }
     prevLengthRef.current = filtered.length;
   }, [filtered.length, autoScroll]);
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col flex-1 min-h-0 h-full" }, /* @__PURE__ */ React.createElement(
-    TimelineFilterBar,
-    {
-      activeFilters: filters,
-      onToggle: toggleFilter,
-      counts
-    }
-  ), /* @__PURE__ */ React.createElement("div", { className: "flex shrink-0 items-center gap-1.5 px-2 py-1 border-b border-border/30 text-[10px] text-muted-foreground flex-wrap" }, /* @__PURE__ */ React.createElement("span", null, filtered.length, " of ", request.timeline.length, " entries"), request.isTextStreaming && /* @__PURE__ */ React.createElement(
-    Badge,
-    {
-      variant: "outline",
-      className: "text-[9px] px-1.5 py-0 h-4 bg-blue-500/10 text-blue-400 animate-pulse"
-    },
-    "STREAMING TEXT"
-  ), /* @__PURE__ */ React.createElement(
-    Chip,
-    {
-      asChild: true,
-      className: "ml-auto",
-      pressed: allExpanded,
-      tone: "violet",
-      label: allExpanded ? "collapse all" : "expand all"
-    },
-    /* @__PURE__ */ React.createElement("button", { type: "button", onClick: () => setAllExpanded(!allExpanded) })
-  ), /* @__PURE__ */ React.createElement(
-    Chip,
-    {
-      asChild: true,
-      pressed: autoScroll,
-      tone: "blue",
-      label: `auto-scroll ${autoScroll ? "ON" : "OFF"}`
-    },
-    /* @__PURE__ */ React.createElement("button", { type: "button", onClick: () => setAutoScroll(!autoScroll) })
-  ), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1 shrink-0 flex-wrap border-l border-border/40 pl-1.5 ml-1" }, /* @__PURE__ */ React.createElement(
-    TimelineCopyChip,
-    {
-      id: "full-timeline-proj",
-      label: "all \xB7 tl",
-      tooltip: "Copy full timeline (projection only \u2014 TimelineEntry[])",
-      LeadingIcon: FileText,
-      tone: "sky",
-      text: JSON.stringify(request.timeline, null, 2)
-    }
-  ), /* @__PURE__ */ React.createElement(
-    TimelineCopyChip,
-    {
-      id: "full-timeline-paired",
-      label: "all \xB7 +raw",
-      tooltip: "Copy full timeline with paired raw stream rows per timestamp (where available)",
-      LeadingIcon: Layers,
-      tone: "sky",
-      text: JSON.stringify(
-        timelineWithRawPairs(request.timeline),
-        null,
-        2
-      )
-    }
-  ), /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      "aria-hidden": true,
-      className: "w-px h-4 shrink-0 bg-border/45 self-center"
-    }
-  ), /* @__PURE__ */ React.createElement(
-    TimelineCopyChip,
-    {
-      id: "filtered-timeline-proj",
-      label: "view \xB7 tl",
-      tooltip: "Copy filtered/visible timeline projection only (TimelineEntry[])",
-      LeadingIcon: FileText,
-      tone: "violet",
-      text: JSON.stringify(filtered, null, 2)
-    }
-  ), /* @__PURE__ */ React.createElement(
-    TimelineCopyChip,
-    {
-      id: "filtered-timeline-paired",
-      label: "view \xB7 +raw",
-      tooltip: "Copy filtered timeline rows paired with matching raw stream events",
-      LeadingIcon: Layers,
-      tone: "violet",
-      text: JSON.stringify(timelineWithRawPairs(filtered), null, 2)
-    }
-  ), /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      "aria-hidden": true,
-      className: "w-px h-4 shrink-0 bg-border/45 self-center"
-    }
-  ), /* @__PURE__ */ React.createElement(
-    TimelineCopyChip,
-    {
-      id: "all-raw-events",
-      label: "raw \xB7 dump",
-      tooltip: "Copy full rawEvents array (unedited stream capture)",
-      LeadingIcon: Radio,
-      tone: "cyan",
-      text: JSON.stringify(request.rawEvents, null, 2)
-    }
-  ))), /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      ref: scrollRef,
-      className: "flex-1 overflow-y-auto overflow-x-hidden min-h-0 pb-2"
-    },
-    filtered.map((entry, idx) => /* @__PURE__ */ React.createElement(
-      TimelineRow,
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 min-h-0 h-full", children: [
+    /* @__PURE__ */ jsx(
+      TimelineFilterBar,
       {
-        key: `${entry.seq}-${idx}`,
-        entry,
-        baseTime,
-        renderBlocks: request.renderBlocks,
-        renderBlockOrder: request.renderBlockOrder,
-        reasoningChunks: request.reasoningChunks,
-        forceExpanded: allExpanded,
-        rawEvent: rawByTimestamp.get(entry.timestamp)
+        activeFilters: filters,
+        onToggle: toggleFilter,
+        counts
       }
-    )),
-    filtered.length === 0 && /* @__PURE__ */ React.createElement("div", { className: "text-[11px] text-muted-foreground/60 text-center py-4" }, request.timeline.length === 0 ? "No events yet \u2014 waiting for stream..." : "No entries match current filters")
-  ));
-}
-function ToolsTab({ request }) {
-  const tools = Object.values(request.toolLifecycle);
-  return /* @__PURE__ */ React.createElement(DebugTabScroll, null, tools.length === 0 && /* @__PURE__ */ React.createElement("div", { className: "text-[10px] text-muted-foreground/60 text-center py-4" }, "No tool events"), tools.map((tool) => /* @__PURE__ */ React.createElement(ToolLifecycleRow, { key: tool.callId, tool })), request.pendingToolCalls.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "px-1.5 py-1 border-t border-border/30" }, /* @__PURE__ */ React.createElement("span", { className: "text-[9px] text-muted-foreground font-medium" }, "Pending Tool Calls (", request.pendingToolCalls.length, ")"), request.pendingToolCalls.map((tc) => /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      key: tc.callId,
-      className: "flex items-center gap-1 ml-2 text-[9px]"
-    },
-    /* @__PURE__ */ React.createElement(
-      Badge,
-      {
-        variant: "outline",
-        className: cn(
-          "text-[8px] px-0.5 py-0 h-3",
-          tc.resolved ? "bg-green-500/10 text-green-400" : "bg-orange-500/10 text-orange-400"
-        )
-      },
-      tc.resolved ? "resolved" : "pending"
     ),
-    /* @__PURE__ */ React.createElement("span", { className: "font-mono text-muted-foreground/60" }, tc.callId.slice(0, 12)),
-    /* @__PURE__ */ React.createElement("span", { className: "text-foreground/80" }, humanizeIdentifier(tc.toolName)),
-    /* @__PURE__ */ React.createElement(
-      CopyBtn,
+    /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1.5 px-2 py-1 border-b border-border/30 text-[10px] text-muted-foreground flex-wrap", children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        filtered.length,
+        " of ",
+        request.timeline.length,
+        " entries"
+      ] }),
+      request.isTextStreaming && /* @__PURE__ */ jsx(
+        Badge,
+        {
+          variant: "outline",
+          className: "text-[9px] px-1.5 py-0 h-4 bg-blue-500/10 text-blue-400 animate-pulse",
+          children: "STREAMING TEXT"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Chip,
+        {
+          asChild: true,
+          className: "ml-auto",
+          pressed: allExpanded,
+          tone: "violet",
+          label: allExpanded ? "collapse all" : "expand all",
+          children: /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setAllExpanded(!allExpanded) })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Chip,
+        {
+          asChild: true,
+          pressed: autoScroll,
+          tone: "blue",
+          label: `auto-scroll ${autoScroll ? "ON" : "OFF"}`,
+          children: /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setAutoScroll(!autoScroll) })
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0 flex-wrap border-l border-border/40 pl-1.5 ml-1", children: [
+        /* @__PURE__ */ jsx(
+          TimelineCopyChip,
+          {
+            id: "full-timeline-proj",
+            label: "all \xB7 tl",
+            tooltip: "Copy full timeline (projection only \u2014 TimelineEntry[])",
+            LeadingIcon: FileText,
+            tone: "sky",
+            text: JSON.stringify(request.timeline, null, 2)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TimelineCopyChip,
+          {
+            id: "full-timeline-paired",
+            label: "all \xB7 +raw",
+            tooltip: "Copy full timeline with paired raw stream rows per timestamp (where available)",
+            LeadingIcon: Layers,
+            tone: "sky",
+            text: JSON.stringify(
+              timelineWithRawPairs(request.timeline),
+              null,
+              2
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "w-px h-4 shrink-0 bg-border/45 self-center"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TimelineCopyChip,
+          {
+            id: "filtered-timeline-proj",
+            label: "view \xB7 tl",
+            tooltip: "Copy filtered/visible timeline projection only (TimelineEntry[])",
+            LeadingIcon: FileText,
+            tone: "violet",
+            text: JSON.stringify(filtered, null, 2)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TimelineCopyChip,
+          {
+            id: "filtered-timeline-paired",
+            label: "view \xB7 +raw",
+            tooltip: "Copy filtered timeline rows paired with matching raw stream events",
+            LeadingIcon: Layers,
+            tone: "violet",
+            text: JSON.stringify(timelineWithRawPairs(filtered), null, 2)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "w-px h-4 shrink-0 bg-border/45 self-center"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          TimelineCopyChip,
+          {
+            id: "all-raw-events",
+            label: "raw \xB7 dump",
+            tooltip: "Copy full rawEvents array (unedited stream capture)",
+            LeadingIcon: Radio,
+            tone: "cyan",
+            text: JSON.stringify(request.rawEvents, null, 2)
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
       {
-        text: JSON.stringify(tc, null, 2),
-        id: `ptc-${tc.callId}`
+        ref: scrollRef,
+        className: "flex-1 overflow-y-auto overflow-x-hidden min-h-0 pb-2",
+        children: [
+          filtered.map((entry, idx) => /* @__PURE__ */ jsx(
+            TimelineRow,
+            {
+              entry,
+              baseTime,
+              renderBlocks: request.renderBlocks,
+              renderBlockOrder: request.renderBlockOrder,
+              reasoningChunks: request.reasoningChunks,
+              forceExpanded: allExpanded,
+              rawEvent: rawByTimestamp.get(entry.timestamp)
+            },
+            `${entry.seq}-${idx}`
+          )),
+          filtered.length === 0 && /* @__PURE__ */ jsx("div", { className: "text-[11px] text-muted-foreground/60 text-center py-4", children: request.timeline.length === 0 ? "No events yet \u2014 waiting for stream..." : "No entries match current filters" })
+        ]
       }
     )
-  ))));
+  ] });
+}
+function ToolsTab({ request }) {
+  const tools = Object.values(request.toolLifecycle);
+  return /* @__PURE__ */ jsxs(DebugTabScroll, { children: [
+    tools.length === 0 && /* @__PURE__ */ jsx("div", { className: "text-[10px] text-muted-foreground/60 text-center py-4", children: "No tool events" }),
+    tools.map((tool) => /* @__PURE__ */ jsx(ToolLifecycleRow, { tool }, tool.callId)),
+    request.pendingToolCalls.length > 0 && /* @__PURE__ */ jsxs("div", { className: "px-1.5 py-1 border-t border-border/30", children: [
+      /* @__PURE__ */ jsxs("span", { className: "text-[9px] text-muted-foreground font-medium", children: [
+        "Pending Tool Calls (",
+        request.pendingToolCalls.length,
+        ")"
+      ] }),
+      request.pendingToolCalls.map((tc) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-center gap-1 ml-2 text-[9px]",
+          children: [
+            /* @__PURE__ */ jsx(
+              Badge,
+              {
+                variant: "outline",
+                className: cn(
+                  "text-[8px] px-0.5 py-0 h-3",
+                  tc.resolved ? "bg-green-500/10 text-green-400" : "bg-orange-500/10 text-orange-400"
+                ),
+                children: tc.resolved ? "resolved" : "pending"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "font-mono text-muted-foreground/60", children: tc.callId.slice(0, 12) }),
+            /* @__PURE__ */ jsx("span", { className: "text-foreground/80", children: humanizeIdentifier(tc.toolName) }),
+            /* @__PURE__ */ jsx(
+              CopyBtn,
+              {
+                text: JSON.stringify(tc, null, 2),
+                id: `ptc-${tc.callId}`
+              }
+            )
+          ]
+        },
+        tc.callId
+      ))
+    ] })
+  ] });
 }
 function StatusTab({ request }) {
-  return /* @__PURE__ */ React.createElement(DebugTabScroll, null, /* @__PURE__ */ React.createElement("div", { className: "px-1.5 py-1 border-b border-border/30" }, /* @__PURE__ */ React.createElement("span", { className: "text-[9px] text-muted-foreground font-medium" }, "Current Phase"), request.currentPhase ? /* @__PURE__ */ React.createElement("div", { className: "ml-2" }, /* @__PURE__ */ React.createElement(
-    Badge,
-    {
-      variant: "outline",
-      className: "text-[9px] px-1 py-0 h-4 bg-yellow-500/10 text-yellow-400"
-    },
-    request.currentPhase
-  )) : /* @__PURE__ */ React.createElement("div", { className: "text-[9px] text-muted-foreground/50 ml-2" }, "No phase updates received")), /* @__PURE__ */ React.createElement("div", { className: "px-1.5 py-0.5" }, /* @__PURE__ */ React.createElement("span", { className: "text-[9px] text-muted-foreground font-medium" }, "History (", request.phaseHistory.length, ")")), request.phaseHistory.length === 0 && /* @__PURE__ */ React.createElement("div", { className: "text-[10px] text-muted-foreground/60 text-center py-4" }, "No phase updates"), request.phaseHistory.map((phase, idx) => /* @__PURE__ */ React.createElement(PhaseHistoryRow, { key: idx, phase, idx })));
+  return /* @__PURE__ */ jsxs(DebugTabScroll, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "px-1.5 py-1 border-b border-border/30", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-[9px] text-muted-foreground font-medium", children: "Current Phase" }),
+      request.currentPhase ? /* @__PURE__ */ jsx("div", { className: "ml-2", children: /* @__PURE__ */ jsx(
+        Badge,
+        {
+          variant: "outline",
+          className: "text-[9px] px-1 py-0 h-4 bg-yellow-500/10 text-yellow-400",
+          children: request.currentPhase
+        }
+      ) }) : /* @__PURE__ */ jsx("div", { className: "text-[9px] text-muted-foreground/50 ml-2", children: "No phase updates received" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "px-1.5 py-0.5", children: /* @__PURE__ */ jsxs("span", { className: "text-[9px] text-muted-foreground font-medium", children: [
+      "History (",
+      request.phaseHistory.length,
+      ")"
+    ] }) }),
+    request.phaseHistory.length === 0 && /* @__PURE__ */ jsx("div", { className: "text-[10px] text-muted-foreground/60 text-center py-4", children: "No phase updates" }),
+    request.phaseHistory.map((phase, idx) => /* @__PURE__ */ jsx(PhaseHistoryRow, { phase, idx }, idx))
+  ] });
 }
 function BlocksTab({ request }) {
   const blocks = request.renderBlockOrder.map((id) => request.renderBlocks[id]).filter(Boolean);
-  return /* @__PURE__ */ React.createElement(DebugTabScroll, null, blocks.length === 0 && /* @__PURE__ */ React.createElement("div", { className: "text-[10px] text-muted-foreground/60 text-center py-4" }, "No content blocks"), blocks.map((block) => /* @__PURE__ */ React.createElement(ContentBlockRow, { key: block.blockId, block })));
+  return /* @__PURE__ */ jsxs(DebugTabScroll, { children: [
+    blocks.length === 0 && /* @__PURE__ */ jsx("div", { className: "text-[10px] text-muted-foreground/60 text-center py-4", children: "No content blocks" }),
+    blocks.map((block) => /* @__PURE__ */ jsx(ContentBlockRow, { block }, block.blockId))
+  ] });
 }
 function TextTab({ request }) {
   const text = request.renderBlockOrder.map((id) => request.renderBlocks[id]?.content ?? "").join("\n");
   const reasoning = request.reasoningChunks.length > 0 ? request.reasoningChunks.join("") : request.accumulatedReasoning;
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col flex-1 min-h-0 h-full" }, /* @__PURE__ */ React.createElement("div", { className: "flex shrink-0 items-center gap-1 px-1.5 py-0.5 border-b border-border/30 text-[9px] text-muted-foreground" }, /* @__PURE__ */ React.createElement("span", null, request.chunkCount, " chunks"), /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground/40" }, "|"), /* @__PURE__ */ React.createElement("span", null, new TextEncoder().encode(text).length, " bytes"), request.reasoningChunks.length > 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground/40" }, "|"), /* @__PURE__ */ React.createElement("span", { className: "text-violet-400" }, request.reasoningChunks.length, " reasoning chunks")), /* @__PURE__ */ React.createElement(CopyBtn, { text, id: "full-text", className: "ml-auto" })), reasoning && /* @__PURE__ */ React.createElement("div", { className: "border-b border-border/30" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1 px-1.5 py-0.5 text-[9px] text-violet-400/80 bg-violet-500/5" }, /* @__PURE__ */ React.createElement(Brain, { className: "h-2.5 w-2.5" }), /* @__PURE__ */ React.createElement("span", null, "Reasoning (", request.reasoningChunks.length, " chunks)"), /* @__PURE__ */ React.createElement(CopyBtn, { text: reasoning, id: "full-reasoning", className: "ml-auto" })), /* @__PURE__ */ React.createElement("pre", { className: "text-[10px] font-mono whitespace-pre-wrap break-all p-1.5 text-violet-400/70 max-h-40 overflow-y-auto" }, reasoning)), /* @__PURE__ */ React.createElement(ScrollArea, { className: "flex-1 min-h-0" }, /* @__PURE__ */ React.createElement("pre", { className: "text-[10px] font-mono whitespace-pre-wrap break-all p-1.5 text-foreground/80" }, text || /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground/40 italic" }, "No text yet..."))));
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 min-h-0 h-full", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1 px-1.5 py-0.5 border-b border-border/30 text-[9px] text-muted-foreground", children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        request.chunkCount,
+        " chunks"
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/40", children: "|" }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        new TextEncoder().encode(text).length,
+        " bytes"
+      ] }),
+      request.reasoningChunks.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/40", children: "|" }),
+        /* @__PURE__ */ jsxs("span", { className: "text-violet-400", children: [
+          request.reasoningChunks.length,
+          " reasoning chunks"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(CopyBtn, { text, id: "full-text", className: "ml-auto" })
+    ] }),
+    reasoning && /* @__PURE__ */ jsxs("div", { className: "border-b border-border/30", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 px-1.5 py-0.5 text-[9px] text-violet-400/80 bg-violet-500/5", children: [
+        /* @__PURE__ */ jsx(Brain, { className: "h-2.5 w-2.5" }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          "Reasoning (",
+          request.reasoningChunks.length,
+          " chunks)"
+        ] }),
+        /* @__PURE__ */ jsx(CopyBtn, { text: reasoning, id: "full-reasoning", className: "ml-auto" })
+      ] }),
+      /* @__PURE__ */ jsx("pre", { className: "text-[10px] font-mono whitespace-pre-wrap break-all p-1.5 text-violet-400/70 max-h-40 overflow-y-auto", children: reasoning })
+    ] }),
+    /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsx("pre", { className: "text-[10px] font-mono whitespace-pre-wrap break-all p-1.5 text-foreground/80", children: text || /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/40 italic", children: "No text yet..." }) }) })
+  ] });
 }
 function DataTab({ request }) {
-  return /* @__PURE__ */ React.createElement(DebugTabScroll, null, /* @__PURE__ */ React.createElement("div", { className: "px-1.5 py-0.5 border-b border-border/30 text-[9px] text-muted-foreground" }, request.dataPayloads.length, " data payloads", /* @__PURE__ */ React.createElement(
-    CopyBtn,
-    {
-      text: JSON.stringify(request.dataPayloads, null, 2),
-      id: "all-data",
-      className: "ml-1"
-    }
-  )), request.dataPayloads.length === 0 && /* @__PURE__ */ React.createElement("div", { className: "text-[10px] text-muted-foreground/60 text-center py-4" }, "No data events"), request.dataPayloads.map((payload, idx) => /* @__PURE__ */ React.createElement("div", { key: idx, className: "border-b border-border/20 px-1.5 py-0.5" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ React.createElement("span", { className: "text-[9px] font-mono text-muted-foreground/60" }, idx + 1), /* @__PURE__ */ React.createElement(
-    CopyBtn,
-    {
-      text: JSON.stringify(payload, null, 2),
-      id: `data-${idx}`
-    }
-  )), /* @__PURE__ */ React.createElement(JsonView, { data: payload, id: `data-body-${idx}` }))));
+  return /* @__PURE__ */ jsxs(DebugTabScroll, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "px-1.5 py-0.5 border-b border-border/30 text-[9px] text-muted-foreground", children: [
+      request.dataPayloads.length,
+      " data payloads",
+      /* @__PURE__ */ jsx(
+        CopyBtn,
+        {
+          text: JSON.stringify(request.dataPayloads, null, 2),
+          id: "all-data",
+          className: "ml-1"
+        }
+      )
+    ] }),
+    request.dataPayloads.length === 0 && /* @__PURE__ */ jsx("div", { className: "text-[10px] text-muted-foreground/60 text-center py-4", children: "No data events" }),
+    request.dataPayloads.map((payload, idx) => /* @__PURE__ */ jsxs("div", { className: "border-b border-border/20 px-1.5 py-0.5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-[9px] font-mono text-muted-foreground/60", children: idx + 1 }),
+        /* @__PURE__ */ jsx(
+          CopyBtn,
+          {
+            text: JSON.stringify(payload, null, 2),
+            id: `data-${idx}`
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(JsonView, { data: payload, id: `data-body-${idx}` })
+    ] }, idx))
+  ] });
 }
 function CompletionTab({ request }) {
-  return /* @__PURE__ */ React.createElement(DebugTabScroll, null, request.completion ? /* @__PURE__ */ React.createElement("div", { className: "p-1.5" }, /* @__PURE__ */ React.createElement(
-    JsonView,
-    {
-      data: request.completion,
-      label: "Completion",
-      id: "completion"
-    }
-  )) : /* @__PURE__ */ React.createElement("div", { className: "text-[10px] text-muted-foreground/60 text-center py-4" }, "No completion event received"), request.clientMetrics && /* @__PURE__ */ React.createElement("div", { className: "p-1.5 border-t border-border/30" }, /* @__PURE__ */ React.createElement("span", { className: "text-[9px] text-muted-foreground font-medium" }, "Client Metrics"), /* @__PURE__ */ React.createElement(JsonView, { data: request.clientMetrics, id: "client-metrics" })), request.warnings.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "p-1.5 border-t border-border/30" }, /* @__PURE__ */ React.createElement("span", { className: "text-[9px] text-muted-foreground font-medium" }, "Warnings (", request.warnings.length, ")"), /* @__PURE__ */ React.createElement(JsonView, { data: request.warnings, id: "warnings" })), request.infoEvents.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "p-1.5 border-t border-border/30" }, /* @__PURE__ */ React.createElement("span", { className: "text-[9px] text-muted-foreground font-medium" }, "Info Events (", request.infoEvents.length, ")"), /* @__PURE__ */ React.createElement(JsonView, { data: request.infoEvents, id: "info-events" })), Object.keys(request.reservations).length > 0 && /* @__PURE__ */ React.createElement("div", { className: "p-1.5 border-t border-border/30" }, /* @__PURE__ */ React.createElement("span", { className: "text-[9px] text-muted-foreground font-medium" }, "Record Reservations (", Object.keys(request.reservations).length, ")"), /* @__PURE__ */ React.createElement(JsonView, { data: request.reservations, id: "reservations" })), Object.keys(request.completedOperations).length > 0 && /* @__PURE__ */ React.createElement("div", { className: "p-1.5 border-t border-border/30" }, /* @__PURE__ */ React.createElement("div", { className: "text-[10px] text-sky-400 font-medium flex items-center gap-1" }, /* @__PURE__ */ React.createElement(Zap, { className: "h-2.5 w-2.5" }), " Completed Operations (", Object.keys(request.completedOperations).length, ")"), /* @__PURE__ */ React.createElement(JsonView, { data: request.completedOperations, id: "completed-ops" })));
+  return /* @__PURE__ */ jsxs(DebugTabScroll, { children: [
+    request.completion ? /* @__PURE__ */ jsx("div", { className: "p-1.5", children: /* @__PURE__ */ jsx(
+      JsonView,
+      {
+        data: request.completion,
+        label: "Completion",
+        id: "completion"
+      }
+    ) }) : /* @__PURE__ */ jsx("div", { className: "text-[10px] text-muted-foreground/60 text-center py-4", children: "No completion event received" }),
+    request.clientMetrics && /* @__PURE__ */ jsxs("div", { className: "p-1.5 border-t border-border/30", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-[9px] text-muted-foreground font-medium", children: "Client Metrics" }),
+      /* @__PURE__ */ jsx(JsonView, { data: request.clientMetrics, id: "client-metrics" })
+    ] }),
+    request.warnings.length > 0 && /* @__PURE__ */ jsxs("div", { className: "p-1.5 border-t border-border/30", children: [
+      /* @__PURE__ */ jsxs("span", { className: "text-[9px] text-muted-foreground font-medium", children: [
+        "Warnings (",
+        request.warnings.length,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsx(JsonView, { data: request.warnings, id: "warnings" })
+    ] }),
+    request.infoEvents.length > 0 && /* @__PURE__ */ jsxs("div", { className: "p-1.5 border-t border-border/30", children: [
+      /* @__PURE__ */ jsxs("span", { className: "text-[9px] text-muted-foreground font-medium", children: [
+        "Info Events (",
+        request.infoEvents.length,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsx(JsonView, { data: request.infoEvents, id: "info-events" })
+    ] }),
+    Object.keys(request.reservations).length > 0 && /* @__PURE__ */ jsxs("div", { className: "p-1.5 border-t border-border/30", children: [
+      /* @__PURE__ */ jsxs("span", { className: "text-[9px] text-muted-foreground font-medium", children: [
+        "Record Reservations (",
+        Object.keys(request.reservations).length,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsx(JsonView, { data: request.reservations, id: "reservations" })
+    ] }),
+    Object.keys(request.completedOperations).length > 0 && /* @__PURE__ */ jsxs("div", { className: "p-1.5 border-t border-border/30", children: [
+      /* @__PURE__ */ jsxs("div", { className: "text-[10px] text-sky-400 font-medium flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx(Zap, { className: "h-2.5 w-2.5" }),
+        " Completed Operations (",
+        Object.keys(request.completedOperations).length,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsx(JsonView, { data: request.completedOperations, id: "completed-ops" })
+    ] })
+  ] });
 }
 function StateSnapshotTab({
   request,
   instanceStatus
 }) {
-  return /* @__PURE__ */ React.createElement(DebugTabScroll, null, /* @__PURE__ */ React.createElement("div", { className: "p-1.5 space-y-1" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1 text-[9px]" }, /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground font-medium w-24 shrink-0" }, "requestId:"), /* @__PURE__ */ React.createElement("code", { className: "font-mono text-foreground/80" }, request.requestId), /* @__PURE__ */ React.createElement(CopyBtn, { text: request.requestId, id: "req-id" })), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1 text-[9px]" }, /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground font-medium w-24 shrink-0" }, "conversationId:"), /* @__PURE__ */ React.createElement(
-    EntityRef,
-    {
-      token: "conversation",
-      id: request.conversationId,
-      name: request.conversationId,
-      showIcon: false,
-      wrap: true,
-      className: "min-w-0 font-mono text-foreground/80"
-    }
-  ), /* @__PURE__ */ React.createElement(CopyBtn, { text: request.conversationId, id: "conv-id-state" })), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1 text-[9px]" }, /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground font-medium w-24 shrink-0" }, "request.status:"), /* @__PURE__ */ React.createElement(
-    Badge,
-    {
-      variant: "outline",
-      className: cn(
-        "text-[9px] px-1 py-0 h-4",
-        STATUS_COLORS[request.status] ?? ""
+  return /* @__PURE__ */ jsx(DebugTabScroll, { children: /* @__PURE__ */ jsxs("div", { className: "p-1.5 space-y-1", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-[9px]", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-medium w-24 shrink-0", children: "requestId:" }),
+      /* @__PURE__ */ jsx("code", { className: "font-mono text-foreground/80", children: request.requestId }),
+      /* @__PURE__ */ jsx(CopyBtn, { text: request.requestId, id: "req-id" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-[9px]", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-medium w-24 shrink-0", children: "conversationId:" }),
+      /* @__PURE__ */ jsx(
+        EntityRef,
+        {
+          token: "conversation",
+          id: request.conversationId,
+          name: request.conversationId,
+          showIcon: false,
+          wrap: true,
+          className: "min-w-0 font-mono text-foreground/80"
+        }
+      ),
+      /* @__PURE__ */ jsx(CopyBtn, { text: request.conversationId, id: "conv-id-state" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-[9px]", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-medium w-24 shrink-0", children: "request.status:" }),
+      /* @__PURE__ */ jsx(
+        Badge,
+        {
+          variant: "outline",
+          className: cn(
+            "text-[9px] px-1 py-0 h-4",
+            STATUS_COLORS[request.status] ?? ""
+          ),
+          children: request.status
+        }
       )
-    },
-    request.status
-  )), instanceStatus && /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1 text-[9px]" }, /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground font-medium w-24 shrink-0" }, "instance.status:"), /* @__PURE__ */ React.createElement(
-    Badge,
-    {
-      variant: "outline",
-      className: cn(
-        "text-[9px] px-1 py-0 h-4",
-        INSTANCE_STATUS_COLORS[instanceStatus] ?? ""
+    ] }),
+    instanceStatus && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-[9px]", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-medium w-24 shrink-0", children: "instance.status:" }),
+      /* @__PURE__ */ jsx(
+        Badge,
+        {
+          variant: "outline",
+          className: cn(
+            "text-[9px] px-1 py-0 h-4",
+            INSTANCE_STATUS_COLORS[instanceStatus] ?? ""
+          ),
+          children: instanceStatus
+        }
       )
-    },
-    instanceStatus
-  )), /* @__PURE__ */ React.createElement("div", { className: "flex items-start gap-1 text-[9px]" }, /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground font-medium w-24 shrink-0" }, "error:"), request.error ? /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React.createElement(
-    JsonView,
-    {
-      data: request.error,
-      id: "request-error-payload",
-      defaultExpanded: true
-    }
-  )) : /* @__PURE__ */ React.createElement("code", { className: "font-mono text-foreground/80" }, "null")), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1 text-[9px]" }, /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground font-medium w-24 shrink-0" }, "startedAt:"), /* @__PURE__ */ React.createElement("code", { className: "font-mono text-foreground/80" }, request.startedAt)), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1 text-[9px]" }, /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground font-medium w-24 shrink-0" }, "firstChunkAt:"), /* @__PURE__ */ React.createElement("code", { className: "font-mono text-foreground/80" }, request.firstChunkAt ?? "null")), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1 text-[9px]" }, /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground font-medium w-24 shrink-0" }, "completedAt:"), /* @__PURE__ */ React.createElement("code", { className: "font-mono text-foreground/80" }, request.completedAt ?? "null")), /* @__PURE__ */ React.createElement("div", { className: "border-t border-border/30 pt-1 mt-1" }, /* @__PURE__ */ React.createElement("span", { className: "text-[9px] text-muted-foreground font-medium" }, "Counts"), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-2 gap-x-3 gap-y-0.5 ml-2 text-[9px] mt-0.5" }, /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground" }, "chunkCount:"), /* @__PURE__ */ React.createElement("span", { className: "font-mono" }, request.chunkCount), /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground" }, "reasoningChunks:"), /* @__PURE__ */ React.createElement("span", { className: "font-mono" }, request.reasoningChunks.length), /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground" }, "phaseHistory:"), /* @__PURE__ */ React.createElement("span", { className: "font-mono" }, request.phaseHistory.length), /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground" }, "activeOperations:"), /* @__PURE__ */ React.createElement("span", { className: "font-mono" }, Object.keys(request.activeOperations).length), /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground" }, "completedOperations:"), /* @__PURE__ */ React.createElement("span", { className: "font-mono" }, Object.keys(request.completedOperations).length), /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground" }, "renderBlocks:"), /* @__PURE__ */ React.createElement("span", { className: "font-mono" }, request.renderBlockOrder.length), /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground" }, "toolLifecycle:"), /* @__PURE__ */ React.createElement("span", { className: "font-mono" }, Object.keys(request.toolLifecycle).length), /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground" }, "pendingToolCalls:"), /* @__PURE__ */ React.createElement("span", { className: "font-mono" }, request.pendingToolCalls.length), /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground" }, "dataPayloads:"), /* @__PURE__ */ React.createElement("span", { className: "font-mono" }, request.dataPayloads.length), /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground" }, "timeline:"), /* @__PURE__ */ React.createElement("span", { className: "font-mono" }, request.timeline.length), /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground" }, "warnings:"), /* @__PURE__ */ React.createElement("span", { className: "font-mono" }, request.warnings.length), /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground" }, "infoEvents:"), /* @__PURE__ */ React.createElement("span", { className: "font-mono" }, request.infoEvents.length), /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground" }, "reservations:"), /* @__PURE__ */ React.createElement("span", { className: "font-mono" }, Object.keys(request.reservations).length))), /* @__PURE__ */ React.createElement("div", { className: "border-t border-border/30 pt-1 mt-1" }, /* @__PURE__ */ React.createElement("span", { className: "text-[9px] text-muted-foreground font-medium" }, "Full State Dump"), /* @__PURE__ */ React.createElement(
-    CopyBtn,
-    {
-      text: JSON.stringify(request, null, 2),
-      id: "full-dump",
-      className: "ml-1"
-    }
-  ), /* @__PURE__ */ React.createElement(
-    JsonView,
-    {
-      data: request,
-      label: "ActiveRequest",
-      id: "full-state",
-      defaultExpanded: false
-    }
-  ))));
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1 text-[9px]", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-medium w-24 shrink-0", children: "error:" }),
+      request.error ? /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx(
+        JsonView,
+        {
+          data: request.error,
+          id: "request-error-payload",
+          defaultExpanded: true
+        }
+      ) }) : /* @__PURE__ */ jsx("code", { className: "font-mono text-foreground/80", children: "null" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-[9px]", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-medium w-24 shrink-0", children: "startedAt:" }),
+      /* @__PURE__ */ jsx("code", { className: "font-mono text-foreground/80", children: request.startedAt })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-[9px]", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-medium w-24 shrink-0", children: "firstChunkAt:" }),
+      /* @__PURE__ */ jsx("code", { className: "font-mono text-foreground/80", children: request.firstChunkAt ?? "null" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-[9px]", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-medium w-24 shrink-0", children: "completedAt:" }),
+      /* @__PURE__ */ jsx("code", { className: "font-mono text-foreground/80", children: request.completedAt ?? "null" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "border-t border-border/30 pt-1 mt-1", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-[9px] text-muted-foreground font-medium", children: "Counts" }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-x-3 gap-y-0.5 ml-2 text-[9px] mt-0.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "chunkCount:" }),
+        /* @__PURE__ */ jsx("span", { className: "font-mono", children: request.chunkCount }),
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "reasoningChunks:" }),
+        /* @__PURE__ */ jsx("span", { className: "font-mono", children: request.reasoningChunks.length }),
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "phaseHistory:" }),
+        /* @__PURE__ */ jsx("span", { className: "font-mono", children: request.phaseHistory.length }),
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "activeOperations:" }),
+        /* @__PURE__ */ jsx("span", { className: "font-mono", children: Object.keys(request.activeOperations).length }),
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "completedOperations:" }),
+        /* @__PURE__ */ jsx("span", { className: "font-mono", children: Object.keys(request.completedOperations).length }),
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "renderBlocks:" }),
+        /* @__PURE__ */ jsx("span", { className: "font-mono", children: request.renderBlockOrder.length }),
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "toolLifecycle:" }),
+        /* @__PURE__ */ jsx("span", { className: "font-mono", children: Object.keys(request.toolLifecycle).length }),
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "pendingToolCalls:" }),
+        /* @__PURE__ */ jsx("span", { className: "font-mono", children: request.pendingToolCalls.length }),
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "dataPayloads:" }),
+        /* @__PURE__ */ jsx("span", { className: "font-mono", children: request.dataPayloads.length }),
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "timeline:" }),
+        /* @__PURE__ */ jsx("span", { className: "font-mono", children: request.timeline.length }),
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "warnings:" }),
+        /* @__PURE__ */ jsx("span", { className: "font-mono", children: request.warnings.length }),
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "infoEvents:" }),
+        /* @__PURE__ */ jsx("span", { className: "font-mono", children: request.infoEvents.length }),
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "reservations:" }),
+        /* @__PURE__ */ jsx("span", { className: "font-mono", children: Object.keys(request.reservations).length })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "border-t border-border/30 pt-1 mt-1", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-[9px] text-muted-foreground font-medium", children: "Full State Dump" }),
+      /* @__PURE__ */ jsx(
+        CopyBtn,
+        {
+          text: JSON.stringify(request, null, 2),
+          id: "full-dump",
+          className: "ml-1"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        JsonView,
+        {
+          data: request,
+          label: "ActiveRequest",
+          id: "full-state",
+          defaultExpanded: false
+        }
+      )
+    ] })
+  ] }) });
 }
 function RawEventsTab({ request }) {
   const rawEvents = request.rawEvents ?? [];
@@ -931,106 +1277,130 @@ function RawEventsTab({ request }) {
     });
   };
   if (rawEvents.length === 0) {
-    return /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center h-full text-muted-foreground text-xs" }, "No raw events captured yet");
+    return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full text-muted-foreground text-xs", children: "No raw events captured yet" });
   }
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col flex-1 min-h-0 h-full" }, /* @__PURE__ */ React.createElement("div", { className: "flex shrink-0 items-center gap-1 px-2 py-1 border-b border-border/30 bg-muted/10 flex-wrap" }, /* @__PURE__ */ React.createElement("span", { className: "text-[9px] text-muted-foreground font-medium mr-1" }, rawEvents.length, " events"), /* @__PURE__ */ React.createElement(Chip, { asChild: true, pressed: !filterType, label: "All" }, /* @__PURE__ */ React.createElement("button", { type: "button", onClick: () => setFilterType(null) })), eventTypes.map((type) => /* @__PURE__ */ React.createElement(
-    Chip,
-    {
-      key: type,
-      asChild: true,
-      pressed: filterType === type,
-      label: `${type} (${rawEvents.filter((e) => e.eventType === type).length})`
-    },
-    /* @__PURE__ */ React.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: () => setFilterType(filterType === type ? null : type)
-      }
-    )
-  )), /* @__PURE__ */ React.createElement(
-    CopyBtn,
-    {
-      text: JSON.stringify(rawEvents, null, 2),
-      id: "raw-all",
-      className: "ml-auto"
-    }
-  )), /* @__PURE__ */ React.createElement(ScrollArea, { className: "flex-1 min-h-0", ref: scrollRef }, /* @__PURE__ */ React.createElement("div", { className: "divide-y divide-border/20" }, filtered.map((evt) => {
-    const isExpanded = expandedIdx.has(evt.idx);
-    const colorClass = EVENT_COLORS[evt.eventType] ?? "bg-gray-500/20 text-gray-400 border-gray-500/30";
-    const icon = EVENT_ICONS[evt.eventType] ?? /* @__PURE__ */ React.createElement(AlertTriangle, { className: "h-2.5 w-2.5" });
-    const dataPreview = (() => {
-      if (evt.data === null || evt.data === void 0) return "null";
-      if (typeof evt.data === "object") {
-        const d = evt.data;
-        if (evt.eventType === "structured_output") {
-          const schema = d.schema_name ? `schema: ${d.schema_name}` : "";
-          const items = Array.isArray(
-            d.data?.items
-          ) ? `${d.data.items.length} item(s)` : "";
-          const ok = d.success ? "success" : "failed";
-          return [ok, schema, items].filter(Boolean).join(" \xB7 ");
-        }
-        if (d.event) return `event: ${d.event}`;
-        if (d.text !== void 0)
-          return `text: "${String(d.text).slice(0, 40)}..."`;
-        if (d.status) return `status: ${d.status}`;
-        if (d.tool_name) return `tool: ${d.tool_name}`;
-        const keys = Object.keys(d);
-        return keys.length <= 4 ? keys.join(", ") : `${keys.slice(0, 3).join(", ")} +${keys.length - 3}`;
-      }
-      return String(evt.data).slice(0, 60);
-    })();
-    return /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        key: evt.idx,
-        className: cn(
-          "px-2 py-0.5 cursor-pointer hover:bg-muted/20 transition-colors",
-          isExpanded && "bg-muted/10"
-        ),
-        onClick: () => toggleExpanded(evt.idx)
-      },
-      /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1.5 min-h-[18px]" }, /* @__PURE__ */ React.createElement("span", { className: "text-[9px] text-muted-foreground/60 font-mono w-4 text-right flex-shrink-0" }, evt.idx), /* @__PURE__ */ React.createElement(
-        Badge,
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 min-h-0 h-full", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1 px-2 py-1 border-b border-border/30 bg-muted/10 flex-wrap", children: [
+      /* @__PURE__ */ jsxs("span", { className: "text-[9px] text-muted-foreground font-medium mr-1", children: [
+        rawEvents.length,
+        " events"
+      ] }),
+      /* @__PURE__ */ jsx(Chip, { asChild: true, pressed: !filterType, label: "All", children: /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setFilterType(null) }) }),
+      eventTypes.map((type) => /* @__PURE__ */ jsx(
+        Chip,
         {
-          variant: "outline",
-          className: cn(
-            "px-1 py-0 text-[8px] leading-[14px] h-[14px] inline-flex items-center gap-0.5 font-mono border rounded-sm flex-shrink-0",
-            colorClass
+          asChild: true,
+          pressed: filterType === type,
+          label: `${type} (${rawEvents.filter((e) => e.eventType === type).length})`,
+          children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => setFilterType(filterType === type ? null : type)
+            }
           )
         },
-        icon,
-        evt.eventType
-      ), /* @__PURE__ */ React.createElement("span", { className: "text-[9px] text-muted-foreground/60 font-mono flex-shrink-0" }, evt.timestamp.toFixed(0), "ms"), !isExpanded && /* @__PURE__ */ React.createElement("span", { className: "text-[9px] text-muted-foreground truncate" }, dataPreview), /* @__PURE__ */ React.createElement(
+        type
+      )),
+      /* @__PURE__ */ jsx(
         CopyBtn,
         {
-          text: JSON.stringify(evt, null, 2),
-          id: `raw-${evt.idx}`,
-          className: "ml-auto flex-shrink-0"
+          text: JSON.stringify(rawEvents, null, 2),
+          id: "raw-all",
+          className: "ml-auto"
         }
-      )),
-      isExpanded && /* @__PURE__ */ React.createElement("div", { className: "ml-5 mt-0.5 mb-1" }, /* @__PURE__ */ React.createElement(
-        JsonView,
-        {
-          data: evt.data,
-          label: "data",
-          id: `raw-data-${evt.idx}`
+      )
+    ] }),
+    /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1 min-h-0", ref: scrollRef, children: /* @__PURE__ */ jsx("div", { className: "divide-y divide-border/20", children: filtered.map((evt) => {
+      const isExpanded = expandedIdx.has(evt.idx);
+      const colorClass = EVENT_COLORS[evt.eventType] ?? "bg-gray-500/20 text-gray-400 border-gray-500/30";
+      const icon = EVENT_ICONS[evt.eventType] ?? /* @__PURE__ */ jsx(AlertTriangle, { className: "h-2.5 w-2.5" });
+      const dataPreview = (() => {
+        if (evt.data === null || evt.data === void 0) return "null";
+        if (typeof evt.data === "object") {
+          const d = evt.data;
+          if (evt.eventType === "structured_output") {
+            const schema = d.schema_name ? `schema: ${d.schema_name}` : "";
+            const items = Array.isArray(
+              d.data?.items
+            ) ? `${d.data.items.length} item(s)` : "";
+            const ok = d.success ? "success" : "failed";
+            return [ok, schema, items].filter(Boolean).join(" \xB7 ");
+          }
+          if (d.event) return `event: ${d.event}`;
+          if (d.text !== void 0)
+            return `text: "${String(d.text).slice(0, 40)}..."`;
+          if (d.status) return `status: ${d.status}`;
+          if (d.tool_name) return `tool: ${d.tool_name}`;
+          const keys = Object.keys(d);
+          return keys.length <= 4 ? keys.join(", ") : `${keys.slice(0, 3).join(", ")} +${keys.length - 3}`;
         }
-      ))
-    );
-  }))));
+        return String(evt.data).slice(0, 60);
+      })();
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "px-2 py-0.5 cursor-pointer hover:bg-muted/20 transition-colors",
+            isExpanded && "bg-muted/10"
+          ),
+          onClick: () => toggleExpanded(evt.idx),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 min-h-[18px]", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[9px] text-muted-foreground/60 font-mono w-4 text-right flex-shrink-0", children: evt.idx }),
+              /* @__PURE__ */ jsxs(
+                Badge,
+                {
+                  variant: "outline",
+                  className: cn(
+                    "px-1 py-0 text-[8px] leading-[14px] h-[14px] inline-flex items-center gap-0.5 font-mono border rounded-sm flex-shrink-0",
+                    colorClass
+                  ),
+                  children: [
+                    icon,
+                    evt.eventType
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { className: "text-[9px] text-muted-foreground/60 font-mono flex-shrink-0", children: [
+                evt.timestamp.toFixed(0),
+                "ms"
+              ] }),
+              !isExpanded && /* @__PURE__ */ jsx("span", { className: "text-[9px] text-muted-foreground truncate", children: dataPreview }),
+              /* @__PURE__ */ jsx(
+                CopyBtn,
+                {
+                  text: JSON.stringify(evt, null, 2),
+                  id: `raw-${evt.idx}`,
+                  className: "ml-auto flex-shrink-0"
+                }
+              )
+            ] }),
+            isExpanded && /* @__PURE__ */ jsx("div", { className: "ml-5 mt-0.5 mb-1", children: /* @__PURE__ */ jsx(
+              JsonView,
+              {
+                data: evt.data,
+                label: "data",
+                id: `raw-data-${evt.idx}`
+              }
+            ) })
+          ]
+        },
+        evt.idx
+      );
+    }) }) })
+  ] });
 }
 const TAB_DEFS = [
-  { id: "events", label: "Timeline", icon: /* @__PURE__ */ React.createElement(Zap, { className: "h-3 w-3" }) },
-  { id: "raw", label: "Raw", icon: /* @__PURE__ */ React.createElement(Radio, { className: "h-3 w-3" }) },
-  { id: "text", label: "Text", icon: /* @__PURE__ */ React.createElement(FileText, { className: "h-3 w-3" }) },
-  { id: "tools", label: "Tools", icon: /* @__PURE__ */ React.createElement(Wrench, { className: "h-3 w-3" }) },
-  { id: "status", label: "Status", icon: /* @__PURE__ */ React.createElement(Activity, { className: "h-3 w-3" }) },
-  { id: "blocks", label: "Blocks", icon: /* @__PURE__ */ React.createElement(Layers, { className: "h-3 w-3" }) },
-  { id: "data", label: "Data", icon: /* @__PURE__ */ React.createElement(Database, { className: "h-3 w-3" }) },
-  { id: "completion", label: "Stats", icon: /* @__PURE__ */ React.createElement(BarChart3, { className: "h-3 w-3" }) },
-  { id: "state", label: "State", icon: /* @__PURE__ */ React.createElement(CircleDot, { className: "h-3 w-3" }) }
+  { id: "events", label: "Timeline", icon: /* @__PURE__ */ jsx(Zap, { className: "h-3 w-3" }) },
+  { id: "raw", label: "Raw", icon: /* @__PURE__ */ jsx(Radio, { className: "h-3 w-3" }) },
+  { id: "text", label: "Text", icon: /* @__PURE__ */ jsx(FileText, { className: "h-3 w-3" }) },
+  { id: "tools", label: "Tools", icon: /* @__PURE__ */ jsx(Wrench, { className: "h-3 w-3" }) },
+  { id: "status", label: "Status", icon: /* @__PURE__ */ jsx(Activity, { className: "h-3 w-3" }) },
+  { id: "blocks", label: "Blocks", icon: /* @__PURE__ */ jsx(Layers, { className: "h-3 w-3" }) },
+  { id: "data", label: "Data", icon: /* @__PURE__ */ jsx(Database, { className: "h-3 w-3" }) },
+  { id: "completion", label: "Stats", icon: /* @__PURE__ */ jsx(BarChart3, { className: "h-3 w-3" }) },
+  { id: "state", label: "State", icon: /* @__PURE__ */ jsx(CircleDot, { className: "h-3 w-3" }) }
 ];
 function InstanceDebugView({
   conversationId,
@@ -1052,12 +1422,43 @@ function InstanceDebugView({
     (state) => selectedRequestId ? state.activeRequests.byRequestId[selectedRequestId] : void 0
   );
   if (!request) {
-    return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col items-center justify-center h-full text-[11px] text-muted-foreground/60 p-4 gap-1" }, /* @__PURE__ */ React.createElement("span", null, "No active request for this instance. Run the agent to begin debugging."), requestIds.length === 0 && /* @__PURE__ */ React.createElement("span", { className: "text-[10px]" }, "(0 requests found)"));
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center h-full text-[11px] text-muted-foreground/60 p-4 gap-1", children: [
+      /* @__PURE__ */ jsx("span", { children: "No active request for this instance. Run the agent to begin debugging." }),
+      requestIds.length === 0 && /* @__PURE__ */ jsx("span", { className: "text-[10px]", children: "(0 requests found)" })
+    ] });
   }
   if (hideChrome) {
-    return /* @__PURE__ */ React.createElement(TimelineTab, { request });
+    return /* @__PURE__ */ jsx(TimelineTab, { request });
   }
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col flex-1 min-h-0 h-full" }, /* @__PURE__ */ React.createElement("div", { className: "shrink-0" }, /* @__PURE__ */ React.createElement(StatusBar, { request, instanceStatus }), request.clientMetrics && /* @__PURE__ */ React.createElement(MetricsBar, { metrics: request.clientMetrics })), requestIds.length > 1 && /* @__PURE__ */ React.createElement("div", { className: "flex shrink-0 items-center gap-1.5 px-2 py-1 border-b border-border/30 text-[10px]" }, /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground font-medium" }, "Request:"), requestIds.map((id, idx) => /* @__PURE__ */ React.createElement(Chip, { key: id, asChild: true, pressed: idx === effectiveIdx, label: `#${idx + 1}` }, /* @__PURE__ */ React.createElement("button", { type: "button", onClick: () => setSelectedRequestIdx(idx) }))), /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground/60 text-[9px] ml-auto" }, requestIds.length, " total")), /* @__PURE__ */ React.createElement("div", { className: "flex shrink-0 border-b border-border/50 bg-muted/10 overflow-x-auto scrollbar-none" }, TAB_DEFS.map((tab) => /* @__PURE__ */ React.createElement(Button, { variant: "quiet", pressed: !!(activeTab === tab.id), key: tab.id, onClick: () => setActiveTab(tab.id) }, tab.icon, tab.label))), /* @__PURE__ */ React.createElement("div", { className: "flex flex-1 min-h-0 flex-col overflow-hidden" }, activeTab === "events" && /* @__PURE__ */ React.createElement(TimelineTab, { request }), activeTab === "raw" && /* @__PURE__ */ React.createElement(RawEventsTab, { request }), activeTab === "text" && /* @__PURE__ */ React.createElement(TextTab, { request }), activeTab === "tools" && /* @__PURE__ */ React.createElement(ToolsTab, { request }), activeTab === "status" && /* @__PURE__ */ React.createElement(StatusTab, { request }), activeTab === "blocks" && /* @__PURE__ */ React.createElement(BlocksTab, { request }), activeTab === "data" && /* @__PURE__ */ React.createElement(DataTab, { request }), activeTab === "completion" && /* @__PURE__ */ React.createElement(CompletionTab, { request }), activeTab === "state" && /* @__PURE__ */ React.createElement(StateSnapshotTab, { request, instanceStatus })));
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 min-h-0 h-full", children: [
+    /* @__PURE__ */ jsxs("div", { className: "shrink-0", children: [
+      /* @__PURE__ */ jsx(StatusBar, { request, instanceStatus }),
+      request.clientMetrics && /* @__PURE__ */ jsx(MetricsBar, { metrics: request.clientMetrics })
+    ] }),
+    requestIds.length > 1 && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1.5 px-2 py-1 border-b border-border/30 text-[10px]", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-muted-foreground font-medium", children: "Request:" }),
+      requestIds.map((id, idx) => /* @__PURE__ */ jsx(Chip, { asChild: true, pressed: idx === effectiveIdx, label: `#${idx + 1}`, children: /* @__PURE__ */ jsx("button", { type: "button", onClick: () => setSelectedRequestIdx(idx) }) }, id)),
+      /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground/60 text-[9px] ml-auto", children: [
+        requestIds.length,
+        " total"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex shrink-0 border-b border-border/50 bg-muted/10 overflow-x-auto scrollbar-none", children: TAB_DEFS.map((tab) => /* @__PURE__ */ jsxs(Button, { variant: "quiet", pressed: !!(activeTab === tab.id), onClick: () => setActiveTab(tab.id), children: [
+      tab.icon,
+      tab.label
+    ] }, tab.id)) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 min-h-0 flex-col overflow-hidden", children: [
+      activeTab === "events" && /* @__PURE__ */ jsx(TimelineTab, { request }),
+      activeTab === "raw" && /* @__PURE__ */ jsx(RawEventsTab, { request }),
+      activeTab === "text" && /* @__PURE__ */ jsx(TextTab, { request }),
+      activeTab === "tools" && /* @__PURE__ */ jsx(ToolsTab, { request }),
+      activeTab === "status" && /* @__PURE__ */ jsx(StatusTab, { request }),
+      activeTab === "blocks" && /* @__PURE__ */ jsx(BlocksTab, { request }),
+      activeTab === "data" && /* @__PURE__ */ jsx(DataTab, { request }),
+      activeTab === "completion" && /* @__PURE__ */ jsx(CompletionTab, { request }),
+      activeTab === "state" && /* @__PURE__ */ jsx(StateSnapshotTab, { request, instanceStatus })
+    ] })
+  ] });
 }
 function StreamDebugPanel({
   conversationId,
@@ -1079,26 +1480,26 @@ function StreamDebugPanel({
     shallowEqual
   );
   if (hideChrome) {
-    return /* @__PURE__ */ React.createElement("div", { className: cn(DEBUG_PANEL_SHELL, className) }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx("div", { className: cn(DEBUG_PANEL_SHELL, className), children: /* @__PURE__ */ jsx(
       InstanceDebugView,
       {
         conversationId,
         hideChrome: true,
         requestIdOverride
       }
-    ));
+    ) });
   }
   if (allInstanceIds.length <= 1) {
-    return /* @__PURE__ */ React.createElement("div", { className: cn(DEBUG_PANEL_SHELL, className) }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx("div", { className: cn(DEBUG_PANEL_SHELL, className), children: /* @__PURE__ */ jsx(
       InstanceDebugView,
       {
         conversationId,
         hideChrome: false,
         requestIdOverride
       }
-    ));
+    ) });
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     MultiInstanceDebugPanel,
     {
       activeInstanceId: conversationId,
@@ -1116,23 +1517,29 @@ function MultiInstanceDebugPanel({
 }) {
   const [selectedInstanceId, setSelectedInstanceId] = useState(activeInstanceId);
   const effectiveInstanceId = allInstanceIds.includes(selectedInstanceId) ? selectedInstanceId : allInstanceIds[allInstanceIds.length - 1] ?? activeInstanceId;
-  return /* @__PURE__ */ React.createElement("div", { className: cn(DEBUG_PANEL_SHELL, className) }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-0 border-b border-border bg-muted/20 overflow-x-auto scrollbar-none shrink-0" }, /* @__PURE__ */ React.createElement("span", { className: "text-[9px] text-muted-foreground font-medium px-2 py-1.5 whitespace-nowrap border-r border-border/50 shrink-0" }, "INSTANCE"), allInstanceIds.map((id, idx) => /* @__PURE__ */ React.createElement(
-    InstanceTab,
-    {
-      key: id,
-      conversationId: id,
-      idx,
-      isActive: id === effectiveInstanceId,
-      onSelect: () => setSelectedInstanceId(id)
-    }
-  ))), /* @__PURE__ */ React.createElement("div", { className: "flex flex-1 min-h-0 flex-col overflow-hidden" }, /* @__PURE__ */ React.createElement(
-    InstanceDebugView,
-    {
-      conversationId: effectiveInstanceId,
-      hideChrome: false,
-      requestIdOverride: effectiveInstanceId === activeInstanceId ? requestIdOverride : void 0
-    }
-  )));
+  return /* @__PURE__ */ jsxs("div", { className: cn(DEBUG_PANEL_SHELL, className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0 border-b border-border bg-muted/20 overflow-x-auto scrollbar-none shrink-0", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-[9px] text-muted-foreground font-medium px-2 py-1.5 whitespace-nowrap border-r border-border/50 shrink-0", children: "INSTANCE" }),
+      allInstanceIds.map((id, idx) => /* @__PURE__ */ jsx(
+        InstanceTab,
+        {
+          conversationId: id,
+          idx,
+          isActive: id === effectiveInstanceId,
+          onSelect: () => setSelectedInstanceId(id)
+        },
+        id
+      ))
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-1 min-h-0 flex-col overflow-hidden", children: /* @__PURE__ */ jsx(
+      InstanceDebugView,
+      {
+        conversationId: effectiveInstanceId,
+        hideChrome: false,
+        requestIdOverride: effectiveInstanceId === activeInstanceId ? requestIdOverride : void 0
+      }
+    ) })
+  ] });
 }
 function InstanceTab({
   conversationId,
@@ -1147,7 +1554,7 @@ function InstanceTab({
     selectConversationRequestCount(conversationId)
   );
   const statusDot = status ? INSTANCE_STATUS_COLORS[status] ?? "bg-gray-500/20 text-gray-400" : "";
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
@@ -1155,19 +1562,27 @@ function InstanceTab({
       className: cn(
         "inline-flex items-center gap-1 px-2.5 py-1.5 text-[10px] whitespace-nowrap border-b-2 border-r border-border/30 transition-colors cursor-pointer font-mono",
         isActive ? "border-b-primary text-primary-ink bg-primary/5" : "border-b-transparent text-muted-foreground hover:text-foreground hover:bg-muted/20"
-      )
-    },
-    /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground/60" }, "#", idx + 1),
-    /* @__PURE__ */ React.createElement("span", { className: "max-w-[80px] truncate" }, conversationId.slice(0, 8)),
-    status && /* @__PURE__ */ React.createElement(
-      Badge,
-      {
-        variant: "outline",
-        className: cn("text-[8px] px-1 py-0 h-3.5 border-0", statusDot)
-      },
-      status
-    ),
-    requestCount > 0 && /* @__PURE__ */ React.createElement("span", { className: "text-[9px] text-muted-foreground/60" }, requestCount, "req")
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground/60", children: [
+          "#",
+          idx + 1
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "max-w-[80px] truncate", children: conversationId.slice(0, 8) }),
+        status && /* @__PURE__ */ jsx(
+          Badge,
+          {
+            variant: "outline",
+            className: cn("text-[8px] px-1 py-0 h-3.5 border-0", statusDot),
+            children: status
+          }
+        ),
+        requestCount > 0 && /* @__PURE__ */ jsxs("span", { className: "text-[9px] text-muted-foreground/60", children: [
+          requestCount,
+          "req"
+        ] })
+      ]
+    }
   );
 }
 var StreamDebugPanel_default = StreamDebugPanel;