@ai-matrx/chat 0.1.77 → 0.2.0

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

@@ -0,0 +1,1587 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Chip, Button, DisclosureHeader } from "@ai-matrx/design-system/controls";
+import { formatDurationMs } from "@ai-matrx/kit/format";
+import React, { useState, useRef, useEffect, useMemo } from "react";
+import { shallowEqual } from "react-redux";
+import { useAppSelector, useAppDispatch } from "../../../store/hooks.js";
+import { setDebugSession } from "../../redux/execution-system/conversations/conversations.slice.js";
+import {
+  selectConversationRequestCount,
+  selectConversationRequestIds
+} from "../../redux/execution-system/active-requests/active-requests.selectors.js";
+import { cn } from "@ai-matrx/design-system";
+import { EntityRef } from "../../../host/ui-slots.js";
+import { ScrollArea } from "@ai-matrx/design-system";
+import { Badge } from "@ai-matrx/design-system";
+import {
+  Copy,
+  Check,
+  Filter,
+  ChevronDown,
+  ChevronRight,
+  Clock,
+  Zap,
+  AlertTriangle,
+  CircleDot,
+  FileText,
+  Wrench,
+  Database,
+  Radio,
+  Heart,
+  Square,
+  Layers,
+  Activity,
+  BarChart3,
+  Brain,
+  Info,
+  ShieldAlert,
+  BookmarkPlus,
+  RefreshCw,
+  FilePlus2,
+  ListChecks,
+  ScanSearch
+} from "lucide-react";
+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__ */ 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 [copied, setCopied] = useState(null);
+  const copy = (text, id) => {
+    navigator.clipboard.writeText(text);
+    setCopied(id);
+    setTimeout(() => setCopied(null), 1500);
+  };
+  return { copied, copy };
+}
+function CopyBtn({
+  text,
+  id,
+  className
+}) {
+  const { copied, copy } = useCopy();
+  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 });
+}
+function TimelineCopyChip({
+  id,
+  text,
+  label,
+  tooltip,
+  tone,
+  LeadingIcon
+}) {
+  const { copied, copy } = useCopy();
+  const done = copied === id;
+  const Leading = LeadingIcon ?? Copy;
+  return /* @__PURE__ */ jsx(
+    Chip,
+    {
+      asChild: true,
+      className: "shrink-0",
+      tone: done ? "success" : tone,
+      icon: done ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Leading, {}),
+      label,
+      title: tooltip,
+      children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: (e) => {
+            e.stopPropagation();
+            copy(text, id);
+          }
+        }
+      )
+    }
+  );
+}
+function JsonView({
+  data,
+  label,
+  id,
+  defaultExpanded = true
+}) {
+  const [open, setOpen] = useState(defaultExpanded);
+  const json = JSON.stringify(data, null, 2);
+  if (data === null || data === void 0) return null;
+  const isSimple = typeof data === "string" || typeof data === "number" || typeof data === "boolean";
+  if (isSimple) {
+    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__ */ 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",
+  reasoning_chunk: "bg-violet-500/20 text-violet-400 border-violet-500/30",
+  phase: "bg-yellow-500/20 text-yellow-400 border-yellow-500/30",
+  init: "bg-sky-500/20 text-sky-400 border-sky-500/30",
+  warning: "bg-amber-500/20 text-amber-400 border-amber-500/30",
+  info: "bg-sky-500/20 text-sky-400 border-sky-500/30",
+  data: "bg-purple-500/20 text-purple-400 border-purple-500/30",
+  completion: "bg-green-500/20 text-green-400 border-green-500/30",
+  error: "bg-red-500/20 text-red-400 border-red-500/30",
+  tool_event: "bg-orange-500/20 text-orange-400 border-orange-500/30",
+  heartbeat: "bg-gray-500/20 text-gray-400 border-gray-500/30",
+  end: "bg-emerald-500/20 text-emerald-400 border-emerald-500/30",
+  render_block: "bg-pink-500/20 text-pink-400 border-pink-500/30",
+  record_reserved: "bg-teal-500/20 text-teal-400 border-teal-500/30",
+  record_update: "bg-teal-500/20 text-teal-400 border-teal-500/30",
+  resource_changed: "bg-fuchsia-500/20 text-fuchsia-400 border-fuchsia-500/30",
+  structured_output: "bg-lime-500/20 text-lime-400 border-lime-500/30",
+  context_analysis: "bg-slate-500/20 text-slate-400 border-slate-500/30"
+};
+const EVENT_ICONS = {
+  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",
+  connecting: "bg-yellow-500/20 text-yellow-400",
+  streaming: "bg-blue-500/20 text-blue-400",
+  "awaiting-tools": "bg-orange-500/20 text-orange-400",
+  complete: "bg-green-500/20 text-green-400",
+  error: "bg-red-500/20 text-red-400",
+  timeout: "bg-red-500/20 text-red-400"
+};
+const INSTANCE_STATUS_COLORS = {
+  draft: "bg-gray-500/20 text-gray-400",
+  ready: "bg-cyan-500/20 text-cyan-400",
+  running: "bg-yellow-500/20 text-yellow-400",
+  streaming: "bg-blue-500/20 text-blue-400",
+  paused: "bg-orange-500/20 text-orange-400",
+  complete: "bg-green-500/20 text-green-400",
+  error: "bg-red-500/20 text-red-400"
+};
+function StatusBar({
+  request,
+  instanceStatus
+}) {
+  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.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
+        }
+      )
+    ] }),
+    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__ */ 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 = {
+    text_start: EVENT_COLORS.chunk,
+    text_end: EVENT_COLORS.chunk,
+    reasoning_start: EVENT_COLORS.reasoning_chunk,
+    reasoning_end: EVENT_COLORS.reasoning_chunk,
+    phase: EVENT_COLORS.phase,
+    init: EVENT_COLORS.init,
+    warning: EVENT_COLORS.warning,
+    info: EVENT_COLORS.info,
+    tool_event: EVENT_COLORS.tool_event,
+    render_block: EVENT_COLORS.render_block,
+    data: EVENT_COLORS.data,
+    completion: EVENT_COLORS.completion,
+    error: EVENT_COLORS.error,
+    end: EVENT_COLORS.end,
+    heartbeat: EVENT_COLORS.heartbeat,
+    record_reserved: EVENT_COLORS.record_reserved,
+    record_update: EVENT_COLORS.record_update,
+    resource_changed: EVENT_COLORS.resource_changed,
+    structured_output: EVENT_COLORS.structured_output,
+    unknown: "bg-red-600/30 text-red-300 border-red-500/50 font-semibold"
+  };
+  return map[kind] ?? "bg-gray-500/20 text-gray-400 border-gray-500/30";
+}
+function getTimelineIcon(kind) {
+  const map = {
+    text_start: EVENT_ICONS.chunk,
+    text_end: EVENT_ICONS.chunk,
+    reasoning_start: EVENT_ICONS.reasoning_chunk,
+    reasoning_end: EVENT_ICONS.reasoning_chunk,
+    phase: EVENT_ICONS.phase,
+    init: EVENT_ICONS.init,
+    warning: EVENT_ICONS.warning,
+    info: EVENT_ICONS.info,
+    tool_event: EVENT_ICONS.tool_event,
+    render_block: EVENT_ICONS.render_block,
+    data: EVENT_ICONS.data,
+    completion: EVENT_ICONS.completion,
+    error: EVENT_ICONS.error,
+    end: EVENT_ICONS.end,
+    heartbeat: EVENT_ICONS.heartbeat,
+    record_reserved: EVENT_ICONS.record_reserved,
+    record_update: EVENT_ICONS.record_update,
+    resource_changed: EVENT_ICONS.resource_changed,
+    structured_output: EVENT_ICONS.structured_output,
+    unknown: /* @__PURE__ */ jsx(AlertTriangle, { 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) {
+    case "text_start":
+      return `text streaming started (block idx ${entry.blockStartIndex})`;
+    case "text_end": {
+      const blockSlice = renderBlockOrder.slice(entry.blockStartIndex, entry.blockEndIndex).map((id) => renderBlocks[id]?.content ?? "").join("");
+      const preview = blockSlice.length > 80 ? blockSlice.slice(0, 80) + "..." : blockSlice;
+      return `${entry.blockCount} blocks: "${preview}"`;
+    }
+    case "reasoning_start":
+      return `reasoning started (chunk idx ${entry.chunkStartIndex})`;
+    case "reasoning_end": {
+      const rSlice = (reasoningChunks ?? []).slice(entry.chunkStartIndex, entry.chunkEndIndex).join("");
+      const rPreview = rSlice.length > 80 ? rSlice.slice(0, 80) + "..." : rSlice;
+      return `${entry.chunkCount} reasoning chunks: "${rPreview}"`;
+    }
+    case "phase":
+      return `Phase \u2192 ${entry.data.phase}`;
+    case "init":
+      return `Init: ${entry.data.operation} (${entry.data.operation_id.slice(0, 8)}\u2026)`;
+    case "warning": {
+      const w = entry.data;
+      const recoverableTag = w.recoverable === false ? " UNRECOVERABLE" : "";
+      const level = w.level ?? "medium";
+      const messages = [];
+      messages.push(w.system_message);
+      if (w.user_message) messages.push(`(user: ${w.user_message})`);
+      return `[${w.code}] ${level}${recoverableTag}: ${messages.join(" ")}`;
+    }
+    case "info": {
+      const i = entry.data;
+      const messages = [];
+      messages.push(i.system_message);
+      if (i.user_message) messages.push(`(user: ${i.user_message})`);
+      const base = `[${i.code}] ${messages.join(" ")}`;
+      if (i.metadata && Object.keys(i.metadata).length > 0) {
+        return `${base} \xB7 ${JSON.stringify(i.metadata).slice(0, 60)}`;
+      }
+      return base;
+    }
+    case "tool_event":
+      return `${entry.data.event} \u2014 ${entry.data.tool_name} (${entry.data.call_id.slice(0, 8)})`;
+    case "render_block":
+      return `${entry.data.type} [${entry.data.status}] ${entry.data.blockId.slice(0, 8)}`;
+    case "data":
+      return JSON.stringify(entry.data).slice(0, 80);
+    case "completion":
+      return `Completion: ${entry.data.operation} \u2192 ${entry.data.status} (${entry.data.operation_id.slice(0, 8)}\u2026)`;
+    case "error": {
+      const e = entry.data;
+      const codePart = e.code ? ` [${e.code}]` : "";
+      const sys = e.message;
+      const usr = e.user_message ? ` \xB7 user: ${e.user_message}` : "";
+      return `ERR [${e.error_type}]${codePart}: ${sys.slice(0, 80)}${usr.slice(0, 80)}`;
+    }
+    case "end":
+      return entry.data.reason ?? "stream ended";
+    case "heartbeat":
+      return entry.data.timestamp != null ? `heartbeat @ ${entry.data.timestamp}` : "heartbeat";
+    case "record_reserved": {
+      const r = entry.data;
+      const short = `${r.record_id.slice(0, 8)}\u2026`;
+      if (r.table === "message") {
+        const role = r.metadata?.role ?? "?";
+        const pos = r.metadata?.position ?? "?";
+        return `message reserved [${role} #${pos}]: ${short}`;
+      }
+      if (r.table === "request") {
+        const iter = r.metadata?.iteration ?? "?";
+        return `request reserved [iter ${iter}]: ${short}`;
+      }
+      if (r.table === "tool_call") {
+        const tool = r.metadata?.tool_name ?? "?";
+        const iter = r.metadata?.iteration ?? "?";
+        return `tool_call reserved [${tool}, iter ${iter}]: ${short}`;
+      }
+      return `${r.table} reserved: ${short} [${r.db_project}]`;
+    }
+    case "record_update":
+      return `${entry.data.table} \u2192 ${entry.data.status}: ${entry.data.record_id.slice(0, 8)}\u2026`;
+    case "resource_changed": {
+      const r = entry.data;
+      const short = r.resource_id.length > 48 ? `\u2026${r.resource_id.slice(-44)}` : r.resource_id;
+      const tag = r.sandbox_id ? `sandbox ${r.sandbox_id.slice(0, 6)}\u2026` : "global";
+      return `${r.kind} ${r.action} [${tag}]: ${short}`;
+    }
+    case "structured_output": {
+      const so = entry.data;
+      const status = so.success ? "success" : `failed: ${so.reason ?? "unknown reason"}`;
+      const schema = so.schema_name ? ` [${so.schema_name}]` : "";
+      const count = so.match_count != null ? ` \xB7 ${so.match_count} match(es)` : "";
+      return `${status}${schema}${count}`;
+    }
+    case "unknown":
+      return `UNRECOGNIZED (${entry.originalEvent}): ${JSON.stringify(entry.rawData).slice(0, 100)}`;
+    default:
+      return "";
+  }
+}
+function TimelineRow({
+  entry,
+  baseTime,
+  renderBlocks,
+  renderBlockOrder,
+  reasoningChunks,
+  forceExpanded = false,
+  rawEvent
+}) {
+  const [localExpanded, setLocalExpanded] = useState(false);
+  const expanded = forceExpanded || localExpanded;
+  const relativeMs = entry.timestamp - baseTime;
+  const colorClass = getTimelineColor(entry.kind);
+  const icon = getTimelineIcon(entry.kind);
+  const copyPayload = rawEvent ? { timeline: entry, raw: rawEvent } : entry;
+  const json = JSON.stringify(copyPayload, null, 2);
+  const summary = timelineSummary(
+    entry,
+    renderBlocks,
+    renderBlockOrder,
+    reasoningChunks
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "border-b border-border/20 hover:bg-muted/20 transition-colors",
+        expanded && "bg-muted/10"
+      ),
+      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 }) {
+  const statusColor = {
+    started: "bg-yellow-500/20 text-yellow-400",
+    progress: "bg-blue-500/20 text-blue-400",
+    step: "bg-cyan-500/20 text-cyan-400",
+    result_preview: "bg-purple-500/20 text-purple-400",
+    completed: "bg-green-500/20 text-green-400",
+    error: "bg-red-500/20 text-red-400"
+  };
+  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.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 = {
+    streaming: "bg-blue-500/20 text-blue-400",
+    complete: "bg-green-500/20 text-green-400",
+    error: "bg-red-500/20 text-red-400"
+  };
+  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.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__ */ 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",
+  "text_end",
+  "reasoning_start",
+  "reasoning_end",
+  "phase",
+  "init",
+  "warning",
+  "info",
+  "tool_event",
+  "render_block",
+  "data",
+  "completion",
+  "error",
+  "end",
+  "heartbeat",
+  "record_reserved",
+  "record_update",
+  "resource_changed",
+  "unknown"
+];
+function TimelineFilterBar({
+  activeFilters,
+  onToggle,
+  counts
+}) {
+  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(
+    new Set(ALL_TIMELINE_KINDS)
+  );
+  const scrollRef = useRef(null);
+  const [autoScroll, setAutoScroll] = useState(true);
+  const [allExpanded, setAllExpanded] = useState(false);
+  const prevLengthRef = useRef(0);
+  const counts = {};
+  for (const entry of request.timeline) {
+    counts[entry.kind] = (counts[entry.kind] ?? 0) + 1;
+  }
+  const rawByTimestamp = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const raw of request.rawEvents) {
+      map.set(raw.timestamp, raw);
+    }
+    return map;
+  }, [request.rawEvents]);
+  const filtered = request.timeline.filter((e) => filters.has(e.kind));
+  const baseTime = request.timeline.length > 0 ? request.timeline[0].timestamp : 0;
+  const timelineWithRawPairs = (entries) => entries.map((entry) => {
+    const raw = rawByTimestamp.get(entry.timestamp);
+    return raw ? { timeline: entry, raw } : entry;
+  });
+  const toggleFilter = (kind) => {
+    setFilters((prev) => {
+      const next = new Set(prev);
+      if (next.has(kind)) next.delete(kind);
+      else next.add(kind);
+      return next;
+    });
+  };
+  useEffect(() => {
+    if (autoScroll && filtered.length > prevLengthRef.current && scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+    prevLengthRef.current = filtered.length;
+  }, [filtered.length, autoScroll]);
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col flex-1 min-h-0 h-full", children: [
+    /* @__PURE__ */ jsx(
+      TimelineFilterBar,
+      {
+        activeFilters: filters,
+        onToggle: toggleFilter,
+        counts
+      }
+    ),
+    /* @__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",
+      {
+        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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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__ */ 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
+        }
+      )
+    ] }),
+    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
+        }
+      )
+    ] }),
+    /* @__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 ?? [];
+  const [expandedIdx, setExpandedIdx] = useState(/* @__PURE__ */ new Set());
+  const [filterType, setFilterType] = useState(null);
+  const scrollRef = useRef(null);
+  const eventTypes = React.useMemo(() => {
+    const types = /* @__PURE__ */ new Set();
+    for (const e of rawEvents) types.add(e.eventType);
+    return Array.from(types).sort();
+  }, [rawEvents]);
+  const filtered = filterType ? rawEvents.filter((e) => e.eventType === filterType) : rawEvents;
+  const toggleExpanded = (idx) => {
+    setExpandedIdx((prev) => {
+      const next = new Set(prev);
+      if (next.has(idx)) next.delete(idx);
+      else next.add(idx);
+      return next;
+    });
+  };
+  if (rawEvents.length === 0) {
+    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__ */ 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,
+        {
+          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)
+            }
+          )
+        },
+        type
+      )),
+      /* @__PURE__ */ jsx(
+        CopyBtn,
+        {
+          text: JSON.stringify(rawEvents, null, 2),
+          id: "raw-all",
+          className: "ml-auto"
+        }
+      )
+    ] }),
+    /* @__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__ */ 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,
+  hideChrome,
+  requestIdOverride
+}) {
+  const [activeTab, setActiveTab] = useState("events");
+  const instanceStatus = useAppSelector(
+    (state) => state.conversations.byConversationId[conversationId]?.status
+  );
+  const requestIds = useAppSelector(
+    selectConversationRequestIds(conversationId)
+  );
+  const [selectedRequestIdx, setSelectedRequestIdx] = useState(-1);
+  const effectiveIdx = selectedRequestIdx === -1 ? requestIds.length - 1 : selectedRequestIdx;
+  const derivedRequestId = requestIds[effectiveIdx];
+  const selectedRequestId = requestIdOverride ?? derivedRequestId;
+  const request = useAppSelector(
+    (state) => selectedRequestId ? state.activeRequests.byRequestId[selectedRequestId] : void 0
+  );
+  if (!request) {
+    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__ */ jsx(TimelineTab, { request });
+  }
+  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,
+  className,
+  hideChrome = false,
+  requestIdOverride
+}) {
+  const dispatch = useAppDispatch();
+  const debugSessionActive = useAppSelector(
+    (state) => state.conversations.debugSessionActive
+  );
+  useEffect(() => {
+    if (!debugSessionActive) {
+      dispatch(setDebugSession(true));
+    }
+  }, [dispatch, debugSessionActive]);
+  const allInstanceIds = useAppSelector(
+    (state) => state.conversations.allConversationIds,
+    shallowEqual
+  );
+  if (hideChrome) {
+    return /* @__PURE__ */ jsx("div", { className: cn(DEBUG_PANEL_SHELL, className), children: /* @__PURE__ */ jsx(
+      InstanceDebugView,
+      {
+        conversationId,
+        hideChrome: true,
+        requestIdOverride
+      }
+    ) });
+  }
+  if (allInstanceIds.length <= 1) {
+    return /* @__PURE__ */ jsx("div", { className: cn(DEBUG_PANEL_SHELL, className), children: /* @__PURE__ */ jsx(
+      InstanceDebugView,
+      {
+        conversationId,
+        hideChrome: false,
+        requestIdOverride
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(
+    MultiInstanceDebugPanel,
+    {
+      activeInstanceId: conversationId,
+      allInstanceIds,
+      className,
+      requestIdOverride
+    }
+  );
+}
+function MultiInstanceDebugPanel({
+  activeInstanceId,
+  allInstanceIds,
+  className,
+  requestIdOverride
+}) {
+  const [selectedInstanceId, setSelectedInstanceId] = useState(activeInstanceId);
+  const effectiveInstanceId = allInstanceIds.includes(selectedInstanceId) ? selectedInstanceId : allInstanceIds[allInstanceIds.length - 1] ?? activeInstanceId;
+  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,
+  idx,
+  isActive,
+  onSelect
+}) {
+  const status = useAppSelector(
+    (state) => state.conversations.byConversationId[conversationId]?.status
+  );
+  const requestCount = useAppSelector(
+    selectConversationRequestCount(conversationId)
+  );
+  const statusDot = status ? INSTANCE_STATUS_COLORS[status] ?? "bg-gray-500/20 text-gray-400" : "";
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: onSelect,
+      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"
+      ),
+      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;
+export {
+  StreamDebugPanel,
+  StreamDebugPanel_default as default
+};