@ai-matrx/chat 0.5.0 → 0.5.3

package/dist/agents/redux/execution-system/instance-ui-state/components/InstanceUIStateCore.js

@@ -1,8 +1,9 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useClipboard } from "@ai-matrx/kit/clipboard";
 import { toast } from "../../../../../host/notify.js";
 import { Badge, Button, Tile } from "@ai-matrx/design-system/controls";
-import React, { useState } from "react";
+import { useState } from "react";
 import { cn } from "@ai-matrx/design-system";
 import {
   Copy,
@@ -35,72 +36,87 @@ function useCopyText(text) {
 const LABEL_W = "w-52 min-w-[13rem]";
 function UuidField({ value, label }) {
   const { copied, copy } = useCopyText(value);
-  return /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-3 py-1 border-b border-border/40 last:border-0" }, /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      className: cn(
-        "text-xs text-muted-foreground shrink-0 text-right",
-        LABEL_W
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 py-1 border-b border-border/40 last:border-0", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "text-xs text-muted-foreground shrink-0 text-right",
+          LABEL_W
+        ),
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxs("span", { className: "flex-1 min-w-0 flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-[11px] font-mono text-foreground break-all", children: value }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "quiet",
+          icon: copied ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Copy, {}),
+          glyphTone: copied ? "success" : void 0,
+          onClick: copy,
+          title: "Copy UUID",
+          "aria-label": "Copy UUID",
+          className: "shrink-0"
+        }
       )
-    },
-    label
-  ), /* @__PURE__ */ React.createElement("span", { className: "flex-1 min-w-0 flex items-center gap-1.5" }, /* @__PURE__ */ React.createElement("span", { className: "text-[11px] font-mono text-foreground break-all" }, value), /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      variant: "quiet",
-      icon: copied ? /* @__PURE__ */ React.createElement(Check, null) : /* @__PURE__ */ React.createElement(Copy, null),
-      glyphTone: copied ? "success" : void 0,
-      onClick: copy,
-      title: "Copy UUID",
-      "aria-label": "Copy UUID",
-      className: "shrink-0"
-    }
-  )));
+    ] })
+  ] });
 }
 function KVRow({
   label,
   value,
   mono = false
 }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "flex items-baseline gap-3 py-1 border-b border-border/40 last:border-0" }, /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      className: cn(
-        "text-xs text-muted-foreground shrink-0 text-right",
-        LABEL_W
-      )
-    },
-    label
-  ), /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      className: cn(
-        "flex-1 min-w-0 text-sm text-foreground break-all",
-        mono && "font-mono text-xs"
-      )
-    },
-    value
-  ));
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-3 py-1 border-b border-border/40 last:border-0", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "text-xs text-muted-foreground shrink-0 text-right",
+          LABEL_W
+        ),
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "flex-1 min-w-0 text-sm text-foreground break-all",
+          mono && "font-mono text-xs"
+        ),
+        children: value
+      }
+    )
+  ] });
 }
 function BoolBadge({ value, label }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-3 py-1 border-b border-border/40 last:border-0" }, /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      className: cn(
-        "text-xs text-muted-foreground shrink-0 text-right",
-        LABEL_W
-      )
-    },
-    label
-  ), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1.5" }, /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      className: cn(
-        "h-2.5 w-2.5 rounded-full shrink-0",
-        value ? "bg-emerald-500" : "bg-muted-foreground/30"
-      )
-    }
-  ), /* @__PURE__ */ React.createElement("span", { className: "text-sm text-foreground" }, value ? "true" : "false")));
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 py-1 border-b border-border/40 last:border-0", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "text-xs text-muted-foreground shrink-0 text-right",
+          LABEL_W
+        ),
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn(
+            "h-2.5 w-2.5 rounded-full shrink-0",
+            value ? "bg-emerald-500" : "bg-muted-foreground/30"
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "text-sm text-foreground", children: value ? "true" : "false" })
+    ] })
+  ] });
 }
 function SectionHeader({
   title,
@@ -112,7 +128,7 @@ function SectionHeader({
   const { copied, copy } = useCopyText(copyValue ?? "");
   return (
     // div with role=button avoids nested <button> — copy button lives inside
-    /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ jsxs(
       "div",
       {
         role: "button",
@@ -121,26 +137,28 @@ function SectionHeader({
         onKeyDown: (e) => {
           if (e.key === "Enter" || e.key === " ") onToggle();
         },
-        className: "flex items-center gap-1.5 w-full px-2 py-1.5 text-left hover:bg-accent/40 transition-colors group cursor-pointer select-none"
-      },
-      open ? /* @__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" }),
-      /* @__PURE__ */ React.createElement("span", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground flex-1" }, title),
-      count !== void 0 && /* @__PURE__ */ React.createElement("span", { className: "text-[11px] text-muted-foreground/60 shrink-0 mr-1" }, count),
-      copyValue && /* @__PURE__ */ React.createElement(
-        Button,
-        {
-          variant: "quiet",
-          icon: copied ? /* @__PURE__ */ React.createElement(Check, null) : /* @__PURE__ */ React.createElement(Copy, null),
-          glyphTone: copied ? "success" : void 0,
-          onClick: (e) => {
-            e.stopPropagation();
-            copy();
-          },
-          title: "Copy section as JSON",
-          "aria-label": "Copy section as JSON",
-          className: "opacity-0 group-hover:opacity-100 shrink-0"
-        }
-      )
+        className: "flex items-center gap-1.5 w-full px-2 py-1.5 text-left hover:bg-accent/40 transition-colors group cursor-pointer select-none",
+        children: [
+          open ? /* @__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" }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground flex-1", children: title }),
+          count !== void 0 && /* @__PURE__ */ jsx("span", { className: "text-[11px] text-muted-foreground/60 shrink-0 mr-1", children: count }),
+          copyValue && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "quiet",
+              icon: copied ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Copy, {}),
+              glyphTone: copied ? "success" : void 0,
+              onClick: (e) => {
+                e.stopPropagation();
+                copy();
+              },
+              title: "Copy section as JSON",
+              "aria-label": "Copy section as JSON",
+              className: "opacity-0 group-hover:opacity-100 shrink-0"
+            }
+          )
+        ]
+      }
     )
   );
 }
@@ -149,62 +167,82 @@ function BuilderSettingsSection({
 }) {
   const [open, setOpen] = useState(true);
   const json = JSON.stringify(settings, null, 2);
-  return /* @__PURE__ */ React.createElement("div", { className: "border border-border rounded-sm overflow-hidden" }, /* @__PURE__ */ React.createElement(
-    SectionHeader,
-    {
-      title: "Builder Advanced Settings",
-      open,
-      onToggle: () => setOpen((v) => !v),
-      copyValue: json
-    }
-  ), open && /* @__PURE__ */ React.createElement("div", { className: "px-4 pb-2" }, /* @__PURE__ */ React.createElement(BoolBadge, { value: settings.debug, label: "debug" }), /* @__PURE__ */ React.createElement(BoolBadge, { value: settings.store, label: "store" }), /* @__PURE__ */ React.createElement(KVRow, { label: "maxIterations", value: String(settings.maxIterations) }), /* @__PURE__ */ React.createElement(
-    KVRow,
-    {
-      label: "maxRetriesPerIteration",
-      value: String(settings.maxRetriesPerIteration)
-    }
-  ), /* @__PURE__ */ React.createElement(
-    BoolBadge,
-    {
-      value: settings.useStructuredSystemInstruction,
-      label: "structuredSystemInstr"
-    }
-  ), settings.structuredInstruction != null && /* @__PURE__ */ React.createElement("div", { className: "flex items-start gap-3 py-1 border-b border-border/40 last:border-0" }, /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      className: cn(
-        "text-xs text-muted-foreground shrink-0 text-right pt-1",
-        LABEL_W
-      )
-    },
-    "structuredInstruction"
-  ), /* @__PURE__ */ React.createElement("pre", { className: "flex-1 min-w-0 text-xs font-mono text-foreground bg-muted/30 rounded px-2 py-1.5 overflow-x-auto" }, JSON.stringify(settings.structuredInstruction, null, 2)))));
+  return /* @__PURE__ */ jsxs("div", { className: "border border-border rounded-sm overflow-hidden", children: [
+    /* @__PURE__ */ jsx(
+      SectionHeader,
+      {
+        title: "Builder Advanced Settings",
+        open,
+        onToggle: () => setOpen((v) => !v),
+        copyValue: json
+      }
+    ),
+    open && /* @__PURE__ */ jsxs("div", { className: "px-4 pb-2", children: [
+      /* @__PURE__ */ jsx(BoolBadge, { value: settings.debug, label: "debug" }),
+      /* @__PURE__ */ jsx(BoolBadge, { value: settings.store, label: "store" }),
+      /* @__PURE__ */ jsx(KVRow, { label: "maxIterations", value: String(settings.maxIterations) }),
+      /* @__PURE__ */ jsx(
+        KVRow,
+        {
+          label: "maxRetriesPerIteration",
+          value: String(settings.maxRetriesPerIteration)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        BoolBadge,
+        {
+          value: settings.useStructuredSystemInstruction,
+          label: "structuredSystemInstr"
+        }
+      ),
+      settings.structuredInstruction != null && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 py-1 border-b border-border/40 last:border-0", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "text-xs text-muted-foreground shrink-0 text-right pt-1",
+              LABEL_W
+            ),
+            children: "structuredInstruction"
+          }
+        ),
+        /* @__PURE__ */ jsx("pre", { className: "flex-1 min-w-0 text-xs font-mono text-foreground bg-muted/30 rounded px-2 py-1.5 overflow-x-auto", children: JSON.stringify(settings.structuredInstruction, null, 2) })
+      ] })
+    ] })
+  ] });
 }
 function RawJsonSection({ data }) {
   const [open, setOpen] = useState(false);
   const json = JSON.stringify(data, null, 2);
   const { copied, copy } = useCopyText(json);
-  return /* @__PURE__ */ React.createElement("div", { className: "border border-border rounded-sm overflow-hidden" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1.5 px-2 py-1.5" }, /* @__PURE__ */ React.createElement(
-    Tile,
-    {
-      variant: "quiet",
-      icon: open ? /* @__PURE__ */ React.createElement(ChevronDown, null) : /* @__PURE__ */ React.createElement(ChevronRight, null),
-      title: "Raw JSON",
-      onClick: () => setOpen((v) => !v),
-      className: "flex-1"
-    }
-  ), /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      variant: "quiet",
-      icon: copied ? /* @__PURE__ */ React.createElement(Check, null) : /* @__PURE__ */ React.createElement(Copy, null),
-      glyphTone: copied ? "success" : void 0,
-      onClick: copy,
-      title: "Copy full JSON",
-      "aria-label": "Copy full JSON",
-      className: "shrink-0"
-    }
-  ), open ? /* @__PURE__ */ React.createElement(EyeOff, { className: "h-3.5 w-3.5 text-muted-foreground shrink-0" }) : /* @__PURE__ */ React.createElement(Eye, { className: "h-3.5 w-3.5 text-muted-foreground shrink-0" })), open && /* @__PURE__ */ React.createElement("pre", { className: "text-xs font-mono text-foreground bg-muted/30 px-3 py-2 overflow-x-auto border-t border-border/40" }, json));
+  return /* @__PURE__ */ jsxs("div", { className: "border border-border rounded-sm overflow-hidden", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 px-2 py-1.5", children: [
+      /* @__PURE__ */ jsx(
+        Tile,
+        {
+          variant: "quiet",
+          icon: open ? /* @__PURE__ */ jsx(ChevronDown, {}) : /* @__PURE__ */ jsx(ChevronRight, {}),
+          title: "Raw JSON",
+          onClick: () => setOpen((v) => !v),
+          className: "flex-1"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "quiet",
+          icon: copied ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Copy, {}),
+          glyphTone: copied ? "success" : void 0,
+          onClick: copy,
+          title: "Copy full JSON",
+          "aria-label": "Copy full JSON",
+          className: "shrink-0"
+        }
+      ),
+      open ? /* @__PURE__ */ jsx(EyeOff, { className: "h-3.5 w-3.5 text-muted-foreground shrink-0" }) : /* @__PURE__ */ jsx(Eye, { className: "h-3.5 w-3.5 text-muted-foreground shrink-0" })
+    ] }),
+    open && /* @__PURE__ */ jsx("pre", { className: "text-xs font-mono text-foreground bg-muted/30 px-3 py-2 overflow-x-auto border-t border-border/40", children: json })
+  ] });
 }
 function InstanceUIStateCore({
   conversationId,
@@ -218,203 +256,282 @@ function InstanceUIStateCore({
   const [behaviorOpen, setBehaviorOpen] = useState(true);
   const [contentOpen, setContentOpen] = useState(true);
   if (!state) {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       "div",
       {
         className: cn(
           "flex items-center justify-center py-8 text-sm text-muted-foreground",
           className
-        )
-      },
-      "No instance UI state for this conversation."
+        ),
+        children: "No instance UI state for this conversation."
+      }
     );
   }
   const instanceJson = JSON.stringify(state, null, 2);
-  return /* @__PURE__ */ React.createElement("div", { className: cn("flex flex-col min-h-0 h-full", className) }, /* @__PURE__ */ React.createElement("div", { className: "px-3 py-2 border-b border-border shrink-0 flex items-center justify-between gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-w-0" }, instanceTitle && /* @__PURE__ */ React.createElement("p", { className: "text-sm font-medium text-foreground truncate" }, instanceTitle), agentName && instanceTitle !== agentName && /* @__PURE__ */ React.createElement("p", { className: "text-xs text-muted-foreground truncate" }, agentName)), /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1 shrink-0" }, /* @__PURE__ */ React.createElement(
-    Badge,
-    {
-      className: "shrink-0",
-      tone: state.displayMode === "direct" ? "info" : "neutral"
-    },
-    state.displayMode
-  ), /* @__PURE__ */ React.createElement(CopyEntireButton, { json: instanceJson }))), /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-h-0 overflow-y-auto" }, /* @__PURE__ */ React.createElement("div", { className: "px-4 py-3 space-y-2" }, /* @__PURE__ */ React.createElement("div", { className: "border border-border rounded-sm overflow-hidden" }, /* @__PURE__ */ React.createElement("div", { className: "px-2 py-1.5 bg-muted/20" }, /* @__PURE__ */ React.createElement("span", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground" }, "Identity")), /* @__PURE__ */ React.createElement("div", { className: "px-4 pb-2" }, /* @__PURE__ */ React.createElement(UuidField, { value: state.conversationId, label: "conversationId" }), state.widgetHandleId && /* @__PURE__ */ React.createElement(
-    UuidField,
-    {
-      value: state.widgetHandleId,
-      label: "widgetHandleId"
-    }
-  ), state.expandedVariableId && /* @__PURE__ */ React.createElement(
-    UuidField,
-    {
-      value: state.expandedVariableId,
-      label: "expandedVariableId"
-    }
-  ))), /* @__PURE__ */ React.createElement("div", { className: "border border-border rounded-sm overflow-hidden" }, /* @__PURE__ */ React.createElement(
-    SectionHeader,
-    {
-      title: "Display & Mode",
-      open: displayOpen,
-      onToggle: () => setDisplayOpen((v) => !v),
-      copyValue: JSON.stringify(
-        {
-          displayMode: state.displayMode,
-          isExpanded: state.isExpanded,
-          variablesPanelStyle: state.variablesPanelStyle,
-          modeState: state.modeState
-        },
-        null,
-        2
-      )
-    }
-  ), displayOpen && /* @__PURE__ */ React.createElement("div", { className: "px-4 pb-2" }, /* @__PURE__ */ React.createElement(KVRow, { label: "displayMode", value: state.displayMode }), /* @__PURE__ */ React.createElement(BoolBadge, { value: state.isExpanded, label: "isExpanded" }), /* @__PURE__ */ React.createElement(
-    KVRow,
-    {
-      label: "variablesPanelStyle",
-      value: state.variablesPanelStyle
-    }
-  ), state.modeState && Object.keys(state.modeState).length > 0 && /* @__PURE__ */ React.createElement("div", { className: "flex items-start gap-3 py-1 border-b border-border/40 last:border-0" }, /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      className: cn(
-        "text-xs text-muted-foreground shrink-0 text-right pt-1",
-        LABEL_W
-      )
-    },
-    "modeState"
-  ), /* @__PURE__ */ React.createElement("pre", { className: "flex-1 min-w-0 text-xs font-mono text-foreground bg-muted/30 rounded px-2 py-1.5 overflow-x-auto" }, JSON.stringify(state.modeState, null, 2))))), /* @__PURE__ */ React.createElement("div", { className: "border border-border rounded-sm overflow-hidden" }, /* @__PURE__ */ React.createElement(
-    SectionHeader,
-    {
-      title: "Visibility",
-      open: visibilityOpen,
-      onToggle: () => setVisibilityOpen((v) => !v),
-      copyValue: JSON.stringify(
-        {
-          showVariablePanel: state.showVariablePanel,
-          showDefinitionMessages: state.showDefinitionMessages,
-          showDefinitionMessageContent: state.showDefinitionMessageContent,
-          hideReasoning: state.hideReasoning,
-          hideToolResults: state.hideToolResults,
-          hiddenMessageCount: state.hiddenMessageCount
-        },
-        null,
-        2
-      )
-    }
-  ), visibilityOpen && /* @__PURE__ */ React.createElement("div", { className: "px-4 pb-2" }, /* @__PURE__ */ React.createElement(
-    BoolBadge,
-    {
-      value: state.showVariablePanel,
-      label: "showVariablePanel"
-    }
-  ), /* @__PURE__ */ React.createElement(
-    BoolBadge,
-    {
-      value: state.showDefinitionMessages,
-      label: "showDefinitionMessages"
-    }
-  ), /* @__PURE__ */ React.createElement(
-    BoolBadge,
-    {
-      value: state.showDefinitionMessageContent,
-      label: "showDefinitionMessageContent"
-    }
-  ), /* @__PURE__ */ React.createElement(BoolBadge, { value: state.hideReasoning, label: "hideReasoning" }), /* @__PURE__ */ React.createElement(
-    BoolBadge,
-    {
-      value: state.hideToolResults,
-      label: "hideToolResults"
-    }
-  ), /* @__PURE__ */ React.createElement(
-    KVRow,
-    {
-      label: "hiddenMessageCount",
-      value: String(state.hiddenMessageCount)
-    }
-  ))), /* @__PURE__ */ React.createElement("div", { className: "border border-border rounded-sm overflow-hidden" }, /* @__PURE__ */ React.createElement(
-    SectionHeader,
-    {
-      title: "Behavior",
-      open: behaviorOpen,
-      onToggle: () => setBehaviorOpen((v) => !v),
-      copyValue: JSON.stringify(
-        {
-          autoRun: state.autoRun,
-          allowChat: state.allowChat,
-          submitOnEnter: state.submitOnEnter,
-          autoClearConversation: state.autoClearConversation,
-          reuseConversationId: state.reuseConversationId
-        },
-        null,
-        2
-      )
-    }
-  ), behaviorOpen && /* @__PURE__ */ React.createElement("div", { className: "px-4 pb-2" }, /* @__PURE__ */ React.createElement(BoolBadge, { value: state.autoRun, label: "autoRun" }), /* @__PURE__ */ React.createElement(BoolBadge, { value: state.allowChat, label: "allowChat" }), /* @__PURE__ */ React.createElement(BoolBadge, { value: state.submitOnEnter, label: "submitOnEnter" }), /* @__PURE__ */ React.createElement(
-    BoolBadge,
-    {
-      value: state.autoClearConversation,
-      label: "autoClearConversation"
-    }
-  ), /* @__PURE__ */ React.createElement(
-    BoolBadge,
-    {
-      value: state.reuseConversationId,
-      label: "reuseConversationId"
-    }
-  ))), /* @__PURE__ */ React.createElement("div", { className: "border border-border rounded-sm overflow-hidden" }, /* @__PURE__ */ React.createElement(
-    SectionHeader,
-    {
-      title: "Pre-Execution",
-      open: contentOpen,
-      onToggle: () => setContentOpen((v) => !v),
-      copyValue: JSON.stringify(
-        {
-          showPreExecutionGate: state.showPreExecutionGate,
-          preExecutionSatisfied: state.preExecutionSatisfied,
-          preExecutionMessage: state.preExecutionMessage
-        },
-        null,
-        2
-      )
-    }
-  ), contentOpen && /* @__PURE__ */ React.createElement("div", { className: "px-4 pb-2" }, /* @__PURE__ */ React.createElement(
-    BoolBadge,
-    {
-      value: state.showPreExecutionGate,
-      label: "showPreExecutionGate"
-    }
-  ), /* @__PURE__ */ React.createElement(
-    BoolBadge,
-    {
-      value: state.preExecutionSatisfied,
-      label: "preExecutionSatisfied"
-    }
-  ), state.preExecutionMessage != null ? /* @__PURE__ */ React.createElement(
-    KVRow,
-    {
-      label: "preExecutionMessage",
-      value: state.preExecutionMessage
-    }
-  ) : /* @__PURE__ */ React.createElement(
-    KVRow,
-    {
-      label: "preExecutionMessage",
-      value: /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground italic" }, "null")
-    }
-  ))), /* @__PURE__ */ React.createElement("div", { className: "border border-border rounded-sm overflow-hidden" }, /* @__PURE__ */ React.createElement("div", { className: "px-3 py-1.5 bg-muted/20 flex items-center justify-between" }, /* @__PURE__ */ React.createElement("span", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground" }, "Creator / Debug")), /* @__PURE__ */ React.createElement("div", { className: "px-4 pb-2" }, /* @__PURE__ */ React.createElement(BoolBadge, { value: state.isCreator, label: "isCreator" }), /* @__PURE__ */ React.createElement(
-    BoolBadge,
-    {
-      value: state.showCreatorDebug,
-      label: "showCreatorDebug"
-    }
-  ))), state.builderAdvancedSettings && /* @__PURE__ */ React.createElement(BuilderSettingsSection, { settings: state.builderAdvancedSettings }), state.jsonExtraction != null && /* @__PURE__ */ React.createElement("div", { className: "border border-border rounded-sm overflow-hidden" }, /* @__PURE__ */ React.createElement("div", { className: "px-2 py-1.5 bg-muted/20" }, /* @__PURE__ */ React.createElement("span", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground" }, "JSON Extraction")), /* @__PURE__ */ React.createElement("pre", { className: "text-xs font-mono text-foreground bg-muted/30 px-3 py-2 overflow-x-auto" }, JSON.stringify(state.jsonExtraction, null, 2))), state.originalText != null && /* @__PURE__ */ React.createElement("div", { className: "border border-border rounded-sm overflow-hidden" }, /* @__PURE__ */ React.createElement("div", { className: "px-2 py-1.5 bg-muted/20" }, /* @__PURE__ */ React.createElement("span", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground" }, "Original Text")), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-foreground px-3 py-2" }, state.originalText)), /* @__PURE__ */ React.createElement(RawJsonSection, { data: state }))));
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col min-h-0 h-full", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "px-3 py-2 border-b border-border shrink-0 flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+        instanceTitle && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground truncate", children: instanceTitle }),
+        agentName && instanceTitle !== agentName && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground truncate", children: agentName })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [
+        /* @__PURE__ */ jsx(
+          Badge,
+          {
+            className: "shrink-0",
+            tone: state.displayMode === "direct" ? "info" : "neutral",
+            children: state.displayMode
+          }
+        ),
+        /* @__PURE__ */ jsx(CopyEntireButton, { json: instanceJson })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "px-4 py-3 space-y-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "border border-border rounded-sm overflow-hidden", children: [
+        /* @__PURE__ */ jsx("div", { className: "px-2 py-1.5 bg-muted/20", children: /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "Identity" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "px-4 pb-2", children: [
+          /* @__PURE__ */ jsx(UuidField, { value: state.conversationId, label: "conversationId" }),
+          state.widgetHandleId && /* @__PURE__ */ jsx(
+            UuidField,
+            {
+              value: state.widgetHandleId,
+              label: "widgetHandleId"
+            }
+          ),
+          state.expandedVariableId && /* @__PURE__ */ jsx(
+            UuidField,
+            {
+              value: state.expandedVariableId,
+              label: "expandedVariableId"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "border border-border rounded-sm overflow-hidden", children: [
+        /* @__PURE__ */ jsx(
+          SectionHeader,
+          {
+            title: "Display & Mode",
+            open: displayOpen,
+            onToggle: () => setDisplayOpen((v) => !v),
+            copyValue: JSON.stringify(
+              {
+                displayMode: state.displayMode,
+                isExpanded: state.isExpanded,
+                variablesPanelStyle: state.variablesPanelStyle,
+                modeState: state.modeState
+              },
+              null,
+              2
+            )
+          }
+        ),
+        displayOpen && /* @__PURE__ */ jsxs("div", { className: "px-4 pb-2", children: [
+          /* @__PURE__ */ jsx(KVRow, { label: "displayMode", value: state.displayMode }),
+          /* @__PURE__ */ jsx(BoolBadge, { value: state.isExpanded, label: "isExpanded" }),
+          /* @__PURE__ */ jsx(
+            KVRow,
+            {
+              label: "variablesPanelStyle",
+              value: state.variablesPanelStyle
+            }
+          ),
+          state.modeState && Object.keys(state.modeState).length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 py-1 border-b border-border/40 last:border-0", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "text-xs text-muted-foreground shrink-0 text-right pt-1",
+                  LABEL_W
+                ),
+                children: "modeState"
+              }
+            ),
+            /* @__PURE__ */ jsx("pre", { className: "flex-1 min-w-0 text-xs font-mono text-foreground bg-muted/30 rounded px-2 py-1.5 overflow-x-auto", children: JSON.stringify(state.modeState, null, 2) })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "border border-border rounded-sm overflow-hidden", children: [
+        /* @__PURE__ */ jsx(
+          SectionHeader,
+          {
+            title: "Visibility",
+            open: visibilityOpen,
+            onToggle: () => setVisibilityOpen((v) => !v),
+            copyValue: JSON.stringify(
+              {
+                showVariablePanel: state.showVariablePanel,
+                showDefinitionMessages: state.showDefinitionMessages,
+                showDefinitionMessageContent: state.showDefinitionMessageContent,
+                hideReasoning: state.hideReasoning,
+                hideToolResults: state.hideToolResults,
+                hiddenMessageCount: state.hiddenMessageCount
+              },
+              null,
+              2
+            )
+          }
+        ),
+        visibilityOpen && /* @__PURE__ */ jsxs("div", { className: "px-4 pb-2", children: [
+          /* @__PURE__ */ jsx(
+            BoolBadge,
+            {
+              value: state.showVariablePanel,
+              label: "showVariablePanel"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            BoolBadge,
+            {
+              value: state.showDefinitionMessages,
+              label: "showDefinitionMessages"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            BoolBadge,
+            {
+              value: state.showDefinitionMessageContent,
+              label: "showDefinitionMessageContent"
+            }
+          ),
+          /* @__PURE__ */ jsx(BoolBadge, { value: state.hideReasoning, label: "hideReasoning" }),
+          /* @__PURE__ */ jsx(
+            BoolBadge,
+            {
+              value: state.hideToolResults,
+              label: "hideToolResults"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            KVRow,
+            {
+              label: "hiddenMessageCount",
+              value: String(state.hiddenMessageCount)
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "border border-border rounded-sm overflow-hidden", children: [
+        /* @__PURE__ */ jsx(
+          SectionHeader,
+          {
+            title: "Behavior",
+            open: behaviorOpen,
+            onToggle: () => setBehaviorOpen((v) => !v),
+            copyValue: JSON.stringify(
+              {
+                autoRun: state.autoRun,
+                allowChat: state.allowChat,
+                submitOnEnter: state.submitOnEnter,
+                autoClearConversation: state.autoClearConversation,
+                reuseConversationId: state.reuseConversationId
+              },
+              null,
+              2
+            )
+          }
+        ),
+        behaviorOpen && /* @__PURE__ */ jsxs("div", { className: "px-4 pb-2", children: [
+          /* @__PURE__ */ jsx(BoolBadge, { value: state.autoRun, label: "autoRun" }),
+          /* @__PURE__ */ jsx(BoolBadge, { value: state.allowChat, label: "allowChat" }),
+          /* @__PURE__ */ jsx(BoolBadge, { value: state.submitOnEnter, label: "submitOnEnter" }),
+          /* @__PURE__ */ jsx(
+            BoolBadge,
+            {
+              value: state.autoClearConversation,
+              label: "autoClearConversation"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            BoolBadge,
+            {
+              value: state.reuseConversationId,
+              label: "reuseConversationId"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "border border-border rounded-sm overflow-hidden", children: [
+        /* @__PURE__ */ jsx(
+          SectionHeader,
+          {
+            title: "Pre-Execution",
+            open: contentOpen,
+            onToggle: () => setContentOpen((v) => !v),
+            copyValue: JSON.stringify(
+              {
+                showPreExecutionGate: state.showPreExecutionGate,
+                preExecutionSatisfied: state.preExecutionSatisfied,
+                preExecutionMessage: state.preExecutionMessage
+              },
+              null,
+              2
+            )
+          }
+        ),
+        contentOpen && /* @__PURE__ */ jsxs("div", { className: "px-4 pb-2", children: [
+          /* @__PURE__ */ jsx(
+            BoolBadge,
+            {
+              value: state.showPreExecutionGate,
+              label: "showPreExecutionGate"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            BoolBadge,
+            {
+              value: state.preExecutionSatisfied,
+              label: "preExecutionSatisfied"
+            }
+          ),
+          state.preExecutionMessage != null ? /* @__PURE__ */ jsx(
+            KVRow,
+            {
+              label: "preExecutionMessage",
+              value: state.preExecutionMessage
+            }
+          ) : /* @__PURE__ */ jsx(
+            KVRow,
+            {
+              label: "preExecutionMessage",
+              value: /* @__PURE__ */ jsx("span", { className: "text-muted-foreground italic", children: "null" })
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "border border-border rounded-sm overflow-hidden", children: [
+        /* @__PURE__ */ jsx("div", { className: "px-3 py-1.5 bg-muted/20 flex items-center justify-between", children: /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "Creator / Debug" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "px-4 pb-2", children: [
+          /* @__PURE__ */ jsx(BoolBadge, { value: state.isCreator, label: "isCreator" }),
+          /* @__PURE__ */ jsx(
+            BoolBadge,
+            {
+              value: state.showCreatorDebug,
+              label: "showCreatorDebug"
+            }
+          )
+        ] })
+      ] }),
+      state.builderAdvancedSettings && /* @__PURE__ */ jsx(BuilderSettingsSection, { settings: state.builderAdvancedSettings }),
+      state.jsonExtraction != null && /* @__PURE__ */ jsxs("div", { className: "border border-border rounded-sm overflow-hidden", children: [
+        /* @__PURE__ */ jsx("div", { className: "px-2 py-1.5 bg-muted/20", children: /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "JSON Extraction" }) }),
+        /* @__PURE__ */ jsx("pre", { className: "text-xs font-mono text-foreground bg-muted/30 px-3 py-2 overflow-x-auto", children: JSON.stringify(state.jsonExtraction, null, 2) })
+      ] }),
+      state.originalText != null && /* @__PURE__ */ jsxs("div", { className: "border border-border rounded-sm overflow-hidden", children: [
+        /* @__PURE__ */ jsx("div", { className: "px-2 py-1.5 bg-muted/20", children: /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: "Original Text" }) }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground px-3 py-2", children: state.originalText })
+      ] }),
+      /* @__PURE__ */ jsx(RawJsonSection, { data: state })
+    ] }) })
+  ] });
 }
 function CopyEntireButton({ json }) {
   const { copied, copy } = useCopyText(json);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     Button,
     {
       variant: "quiet",
-      icon: copied ? /* @__PURE__ */ React.createElement(Check, null) : /* @__PURE__ */ React.createElement(Copy, null),
+      icon: copied ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Copy, {}),
       glyphTone: copied ? "success" : void 0,
       onClick: copy,
       title: "Copy full state as JSON",