@ai-matrx/chat 0.5.0 → 0.5.3

package/dist/agents/components/agent-widgets/AgentFullModal.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useAppSelector } from "../../../store/hooks.js";
 import { selectInstanceDisplayTitle } from "../../redux/execution-system/instance-ui-state/instance-ui-state.selectors.js";
 import { Dialog, DialogContent } from "@ai-matrx/design-system";
@@ -14,7 +15,7 @@ function AgentFullModal({
     selectHasUnsentComposerDraft(conversationId)
   );
   useAgentShellAddress(conversationId, "modal-full");
-  return /* @__PURE__ */ React.createElement(Dialog, { open: true, onOpenChange: (open) => !open && onClose() }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(Dialog, { open: true, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ jsxs(
     DialogContent,
     {
       className: "max-w-3xl h-[85dvh] flex flex-col p-0 gap-0",
@@ -23,17 +24,19 @@ function AgentFullModal({
       },
       onInteractOutside: (e) => {
         if (hasUnsentDraft) e.preventDefault();
-      }
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between px-4 py-2 border-b border-border shrink-0" }, /* @__PURE__ */ React.createElement("span", { className: "text-sm font-medium text-foreground truncate" }, title ?? "Agent Execution")),
-    /* @__PURE__ */ React.createElement(
-      AgentRunner,
-      {
-        conversationId,
-        className: "flex-1 min-h-0 bg-background"
-      }
-    )
-  ));
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between px-4 py-2 border-b border-border shrink-0", children: /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground truncate", children: title ?? "Agent Execution" }) }),
+        /* @__PURE__ */ jsx(
+          AgentRunner,
+          {
+            conversationId,
+            className: "flex-1 min-h-0 bg-background"
+          }
+        )
+      ]
+    }
+  ) });
 }
 export {
   AgentFullModal

package/dist/agents/components/agent-widgets/AgentInlineOverlay.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect } from "react";
 import { Button } from "@ai-matrx/design-system/controls";
 import { X } from "lucide-react";
@@ -36,43 +37,50 @@ function AgentInlineOverlay({
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, [onClose, hasUnsentDraft]);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       role: "dialog",
       "aria-label": title ? `Agent result: ${title}` : "Agent result",
       "data-testid": "agent-inline-overlay",
-      className: "pointer-events-auto fixed top-1/3 left-1/2 -translate-x-1/2 z-50 w-[min(600px,calc(100vw-2rem))] h-[min(60dvh,560px)] bg-card border border-border rounded-lg shadow-2xl overflow-hidden flex flex-col"
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between gap-2 px-3 py-1.5 bg-muted/30 border-b border-border shrink-0" }, /* @__PURE__ */ React.createElement("span", { className: "text-xs font-medium text-muted-foreground truncate" }, title || "Agent Result"), /* @__PURE__ */ React.createElement(
-      Button,
-      {
-        icon: /* @__PURE__ */ React.createElement(X, null),
-        variant: "quiet",
-        className: "shrink-0",
-        "aria-label": "Close agent result",
-        onClick: onClose
-      }
-    )),
-    isBound ? /* @__PURE__ */ React.createElement(
-      AgentRunner,
-      {
-        conversationId,
-        compact: true,
-        className: "flex-1 min-h-0 bg-background"
-      }
-    ) : /* @__PURE__ */ React.createElement(
-      ErrorBox,
-      {
-        as: "div",
-        className: "flex-1 min-h-0 flex flex-col items-start justify-center gap-2 px-4 py-6 bg-background",
-        message: "This result window is not connected to a run.",
-        operation: "Show an agent result window",
-        origin: "chat/AgentInlineOverlay"
-      },
-      /* @__PURE__ */ React.createElement("p", { className: "text-sm font-medium text-foreground" }, "This result window is not connected to a run."),
-      /* @__PURE__ */ React.createElement("p", { className: "text-xs text-muted-foreground" }, "It may have finished; check your history or run it again")
-    )
+      className: "pointer-events-auto fixed top-1/3 left-1/2 -translate-x-1/2 z-50 w-[min(600px,calc(100vw-2rem))] h-[min(60dvh,560px)] bg-card border border-border rounded-lg shadow-2xl overflow-hidden flex flex-col",
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 px-3 py-1.5 bg-muted/30 border-b border-border shrink-0", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground truncate", children: title || "Agent Result" }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              icon: /* @__PURE__ */ jsx(X, {}),
+              variant: "quiet",
+              className: "shrink-0",
+              "aria-label": "Close agent result",
+              onClick: onClose
+            }
+          )
+        ] }),
+        isBound ? /* @__PURE__ */ jsx(
+          AgentRunner,
+          {
+            conversationId,
+            compact: true,
+            className: "flex-1 min-h-0 bg-background"
+          }
+        ) : /* @__PURE__ */ jsxs(
+          ErrorBox,
+          {
+            as: "div",
+            className: "flex-1 min-h-0 flex flex-col items-start justify-center gap-2 px-4 py-6 bg-background",
+            message: "This result window is not connected to a run.",
+            operation: "Show an agent result window",
+            origin: "chat/AgentInlineOverlay",
+            children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-foreground", children: "This result window is not connected to a run." }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "It may have finished; check your history or run it again" })
+            ]
+          }
+        )
+      ]
+    }
   );
 }
 export {

package/dist/agents/components/agent-widgets/AgentPanelOverlay.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from "react/jsx-runtime";
 import { useAppSelector } from "../../../store/hooks.js";
 import { selectInstanceDisplayTitle } from "../../redux/execution-system/instance-ui-state/instance-ui-state.selectors.js";
 import { selectHasUnsentComposerDraft } from "../../redux/execution-system/instance-user-input/unsent-draft.selectors.js";
@@ -14,7 +15,7 @@ function AgentPanelOverlay({
     selectHasUnsentComposerDraft(conversationId)
   );
   useAgentShellAddress(conversationId, "panel");
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     FloatingSheet,
     {
       isOpen: true,
@@ -28,15 +29,15 @@ function AgentPanelOverlay({
       holdsUnsentWork: hasUnsentDraft,
       showCloseButton: true,
       contentClassName: "p-0",
-      lockScroll: false
-    },
-    /* @__PURE__ */ React.createElement(
-      AgentRunner,
-      {
-        conversationId,
-        className: "h-full bg-background"
-      }
-    )
+      lockScroll: false,
+      children: /* @__PURE__ */ jsx(
+        AgentRunner,
+        {
+          conversationId,
+          className: "h-full bg-background"
+        }
+      )
+    }
   );
 }
 export {

package/dist/agents/components/agent-widgets/AgentSidebarOverlay.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from "react/jsx-runtime";
 import { useAppSelector } from "../../../store/hooks.js";
 import { selectInstanceDisplayTitle } from "../../redux/execution-system/instance-ui-state/instance-ui-state.selectors.js";
 import { selectHasUnsentComposerDraft } from "../../redux/execution-system/instance-user-input/unsent-draft.selectors.js";
@@ -14,7 +15,7 @@ function AgentSidebarOverlay({
     selectHasUnsentComposerDraft(conversationId)
   );
   useAgentShellAddress(conversationId, "sidebar");
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     FloatingSheet,
     {
       isOpen: true,
@@ -28,15 +29,15 @@ function AgentSidebarOverlay({
       holdsUnsentWork: hasUnsentDraft,
       showCloseButton: true,
       contentClassName: "p-0",
-      lockScroll: false
-    },
-    /* @__PURE__ */ React.createElement(
-      AgentRunner,
-      {
-        conversationId,
-        className: "h-full bg-background"
-      }
-    )
+      lockScroll: false,
+      children: /* @__PURE__ */ jsx(
+        AgentRunner,
+        {
+          conversationId,
+          className: "h-full bg-background"
+        }
+      )
+    }
   );
 }
 export {

package/dist/agents/components/agent-widgets/AgentToastOverlay.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useRef, useCallback } from "react";
 import { useAppSelector } from "../../../store/hooks.js";
 import { selectInstanceDisplayTitle } from "../../redux/execution-system/instance-ui-state/instance-ui-state.selectors.js";
@@ -53,7 +54,7 @@ function AgentToastOverlay({
     setTimeout(onClose, 300);
   }, [onClose]);
   if (expanded) {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       "div",
       {
         className: "fixed z-[200] transition-all duration-300 ease-out",
@@ -62,47 +63,58 @@ function AgentToastOverlay({
           right: "16px",
           transform: `translate(${position.x}px, ${position.y}px)`,
           zIndex: 200 + index
-        }
-      },
-      /* @__PURE__ */ React.createElement("div", { className: "w-[min(24rem,calc(100vw-2rem))] h-[min(420px,calc(100dvh-2rem))] bg-card border border-border rounded-xl shadow-2xl overflow-hidden flex flex-col animate-in fade-in-0 zoom-in-95 duration-200" }, /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: "flex items-center justify-between px-3 py-2 border-b border-border shrink-0 bg-muted/30 cursor-grab active:cursor-grabbing touch-none select-none",
-          onPointerDown: handlePointerDown,
-          onPointerMove: handlePointerMove,
-          onPointerUp: handlePointerUp
         },
-        /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 min-w-0" }, /* @__PURE__ */ React.createElement("div", { className: "p-0.5 rounded-full bg-primary/10 shrink-0" }, isExecuting ? /* @__PURE__ */ React.createElement(Loader2, { className: "w-3.5 h-3.5 text-primary animate-spin" }) : /* @__PURE__ */ React.createElement(Check, { className: "w-3.5 h-3.5 text-primary" })), /* @__PURE__ */ React.createElement("span", { className: "text-xs font-medium text-foreground truncate" }, title)),
-        /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-0.5 shrink-0", "data-no-drag": true }, /* @__PURE__ */ React.createElement(
-          Button,
-          {
-            variant: "ghost",
-            size: "icon",
-            className: "h-6 w-6",
-            onClick: () => setExpanded(false)
-          },
-          /* @__PURE__ */ React.createElement(Minimize2, { className: "w-3 h-3" })
-        ), /* @__PURE__ */ React.createElement(
-          Button,
-          {
-            variant: "ghost",
-            size: "icon",
-            className: "h-6 w-6",
-            onClick: handleDismiss
-          },
-          /* @__PURE__ */ React.createElement(X, { className: "w-3 h-3" })
-        ))
-      ), /* @__PURE__ */ React.createElement(
-        AgentRunner,
-        {
-          conversationId,
-          compact: true,
-          className: "flex-1 min-h-0 bg-background"
-        }
-      ))
+        children: /* @__PURE__ */ jsxs("div", { className: "w-[min(24rem,calc(100vw-2rem))] h-[min(420px,calc(100dvh-2rem))] bg-card border border-border rounded-xl shadow-2xl overflow-hidden flex flex-col animate-in fade-in-0 zoom-in-95 duration-200", children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex items-center justify-between px-3 py-2 border-b border-border shrink-0 bg-muted/30 cursor-grab active:cursor-grabbing touch-none select-none",
+              onPointerDown: handlePointerDown,
+              onPointerMove: handlePointerMove,
+              onPointerUp: handlePointerUp,
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
+                  /* @__PURE__ */ jsx("div", { className: "p-0.5 rounded-full bg-primary/10 shrink-0", children: isExecuting ? /* @__PURE__ */ jsx(Loader2, { className: "w-3.5 h-3.5 text-primary animate-spin" }) : /* @__PURE__ */ jsx(Check, { className: "w-3.5 h-3.5 text-primary" }) }),
+                  /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-foreground truncate", children: title })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 shrink-0", "data-no-drag": true, children: [
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "icon",
+                      className: "h-6 w-6",
+                      onClick: () => setExpanded(false),
+                      children: /* @__PURE__ */ jsx(Minimize2, { className: "w-3 h-3" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "icon",
+                      className: "h-6 w-6",
+                      onClick: handleDismiss,
+                      children: /* @__PURE__ */ jsx(X, { className: "w-3 h-3" })
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            AgentRunner,
+            {
+              conversationId,
+              compact: true,
+              className: "flex-1 min-h-0 bg-background"
+            }
+          )
+        ] })
+      }
     );
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       className: "fixed z-[200]",
@@ -111,57 +123,66 @@ function AgentToastOverlay({
         right: "16px",
         transform: `translate(${position.x}px, ${position.y}px)`,
         zIndex: 200 + index
-      }
-    },
-    /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: `
-          w-80 bg-card border border-border rounded-xl shadow-lg overflow-hidden
-          transition-all duration-300
-          ${isExiting ? "opacity-0 translate-x-[120%]" : "opacity-100 translate-x-0 animate-in slide-in-from-right-5 duration-300"}
-        `
       },
-      /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: "flex items-center justify-between px-3 py-2 border-b border-border bg-muted/30 cursor-grab active:cursor-grabbing touch-none select-none",
-          onPointerDown: handlePointerDown,
-          onPointerMove: handlePointerMove,
-          onPointerUp: handlePointerUp
-        },
-        /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 min-w-0" }, /* @__PURE__ */ React.createElement("div", { className: "p-0.5 rounded-full bg-primary/10 shrink-0" }, isExecuting ? /* @__PURE__ */ React.createElement(Loader2, { className: "w-3.5 h-3.5 text-primary animate-spin" }) : /* @__PURE__ */ React.createElement(Check, { className: "w-3.5 h-3.5 text-primary" })), /* @__PURE__ */ React.createElement("span", { className: "text-xs font-medium text-foreground truncate" }, title)),
-        /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-0.5 shrink-0", "data-no-drag": true }, /* @__PURE__ */ React.createElement(
-          Button,
-          {
-            variant: "ghost",
-            size: "icon",
-            className: "h-5 w-5",
-            onClick: (e) => {
-              e.stopPropagation();
-              handleDismiss();
-            }
-          },
-          /* @__PURE__ */ React.createElement(X, { className: "w-3 h-3" })
-        ))
-      ),
-      /* @__PURE__ */ React.createElement(
+      children: /* @__PURE__ */ jsxs(
         "div",
         {
-          className: "px-3 py-2.5 cursor-pointer hover:bg-muted/20 transition-colors",
-          onClick: () => setExpanded(true)
-        },
-        text ? /* @__PURE__ */ React.createElement(
-          AnswerTextPreview,
-          {
-            text,
-            streaming: isExecuting,
-            className: "text-xs text-foreground leading-relaxed line-clamp-3"
-          }
-        ) : /* @__PURE__ */ React.createElement("p", { className: "text-xs text-muted-foreground" }, isExecuting ? /* @__PURE__ */ React.createElement("span", { className: "animate-pulse" }, "Processing...") : "Waiting..."),
-        text && text.length > 120 && /* @__PURE__ */ React.createElement("span", { className: "text-[10px] text-primary mt-1 block" }, "Click to expand")
+          className: `
+          w-80 bg-card border border-border rounded-xl shadow-lg overflow-hidden
+          transition-all duration-300
+          ${isExiting ? "opacity-0 translate-x-[120%]" : "opacity-100 translate-x-0 animate-in slide-in-from-right-5 duration-300"}
+        `,
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "flex items-center justify-between px-3 py-2 border-b border-border bg-muted/30 cursor-grab active:cursor-grabbing touch-none select-none",
+                onPointerDown: handlePointerDown,
+                onPointerMove: handlePointerMove,
+                onPointerUp: handlePointerUp,
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
+                    /* @__PURE__ */ jsx("div", { className: "p-0.5 rounded-full bg-primary/10 shrink-0", children: isExecuting ? /* @__PURE__ */ jsx(Loader2, { className: "w-3.5 h-3.5 text-primary animate-spin" }) : /* @__PURE__ */ jsx(Check, { className: "w-3.5 h-3.5 text-primary" }) }),
+                    /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-foreground truncate", children: title })
+                  ] }),
+                  /* @__PURE__ */ jsx("div", { className: "flex items-center gap-0.5 shrink-0", "data-no-drag": true, children: /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "icon",
+                      className: "h-5 w-5",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        handleDismiss();
+                      },
+                      children: /* @__PURE__ */ jsx(X, { className: "w-3 h-3" })
+                    }
+                  ) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "px-3 py-2.5 cursor-pointer hover:bg-muted/20 transition-colors",
+                onClick: () => setExpanded(true),
+                children: [
+                  text ? /* @__PURE__ */ jsx(
+                    AnswerTextPreview,
+                    {
+                      text,
+                      streaming: isExecuting,
+                      className: "text-xs text-foreground leading-relaxed line-clamp-3"
+                    }
+                  ) : /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: isExecuting ? /* @__PURE__ */ jsx("span", { className: "animate-pulse", children: "Processing..." }) : "Waiting..." }),
+                  text && text.length > 120 && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-primary mt-1 block", children: "Click to expand" })
+                ]
+              }
+            )
+          ]
+        }
       )
-    )
+    }
   );
 }
 export {

package/dist/agents/components/agent-widgets/ChatCollapsible.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useRef, useCallback, useEffect } from "react";
 import { useAppSelector } from "../../../store/hooks.js";
 import { selectInstanceDisplayTitle } from "../../redux/execution-system/instance-ui-state/instance-ui-state.selectors.js";
@@ -86,54 +87,62 @@ function ChatCollapsible({
   const handlePointerUp = useCallback(() => {
     dragRef.current = null;
   }, []);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       ref: containerRef,
       className: "fixed z-50 bottom-4 right-4",
-      style: { transform: `translate(${position.x}px, ${position.y}px)` }
-    },
-    /* @__PURE__ */ React.createElement(
-      Collapsible,
-      {
-        open: isOpen,
-        onOpenChange: setIsOpen,
-        className: "w-[min(24rem,calc(100vw-2rem))] bg-card border border-border rounded-xl shadow-2xl overflow-hidden animate-in slide-in-from-right-5 duration-300"
-      },
-      /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: "flex items-center justify-between px-3 py-2 border-b border-border bg-muted/30 cursor-grab active:cursor-grabbing touch-none select-none",
-          onPointerDown: handlePointerDown,
-          onPointerMove: handlePointerMove,
-          onPointerUp: handlePointerUp
-        },
-        /* @__PURE__ */ React.createElement(CollapsibleTrigger, { asChild: true, "data-no-drag": true }, /* @__PURE__ */ React.createElement("button", { className: "flex items-center gap-2 min-w-0 hover:opacity-80 transition-opacity" }, /* @__PURE__ */ React.createElement("div", { className: "p-0 rounded-full bg-primary/10 shrink-0" }, isExecuting ? /* @__PURE__ */ React.createElement(Loader2, { className: "w-3.5 h-3.5 text-primary animate-spin" }) : /* @__PURE__ */ React.createElement(Webhook, { className: "w-3.5 h-3.5 text-primary" })), /* @__PURE__ */ React.createElement("span", { className: "text-xs font-medium text-foreground truncate" }, title), /* @__PURE__ */ React.createElement(
-          ChevronDown,
-          {
-            className: `h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`
-          }
-        ))),
-        onClose && /* @__PURE__ */ React.createElement("div", { className: "shrink-0", "data-no-drag": true }, /* @__PURE__ */ React.createElement(
-          Button,
-          {
-            variant: "ghost",
-            size: "icon",
-            className: "h-6 w-6",
-            onClick: onClose
-          },
-          /* @__PURE__ */ React.createElement(X, { className: "h-3.5 w-3.5" })
-        ))
-      ),
-      /* @__PURE__ */ React.createElement(CollapsibleContent, null, /* @__PURE__ */ React.createElement("div", { className: "h-[500px]" }, /* @__PURE__ */ React.createElement(
-        AgentRunner,
+      style: { transform: `translate(${position.x}px, ${position.y}px)` },
+      children: /* @__PURE__ */ jsxs(
+        Collapsible,
         {
-          conversationId,
-          compact: true,
-          className: "h-full bg-background"
+          open: isOpen,
+          onOpenChange: setIsOpen,
+          className: "w-[min(24rem,calc(100vw-2rem))] bg-card border border-border rounded-xl shadow-2xl overflow-hidden animate-in slide-in-from-right-5 duration-300",
+          children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "flex items-center justify-between px-3 py-2 border-b border-border bg-muted/30 cursor-grab active:cursor-grabbing touch-none select-none",
+                onPointerDown: handlePointerDown,
+                onPointerMove: handlePointerMove,
+                onPointerUp: handlePointerUp,
+                children: [
+                  /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, "data-no-drag": true, children: /* @__PURE__ */ jsxs("button", { className: "flex items-center gap-2 min-w-0 hover:opacity-80 transition-opacity", children: [
+                    /* @__PURE__ */ jsx("div", { className: "p-0 rounded-full bg-primary/10 shrink-0", children: isExecuting ? /* @__PURE__ */ jsx(Loader2, { className: "w-3.5 h-3.5 text-primary animate-spin" }) : /* @__PURE__ */ jsx(Webhook, { className: "w-3.5 h-3.5 text-primary" }) }),
+                    /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-foreground truncate", children: title }),
+                    /* @__PURE__ */ jsx(
+                      ChevronDown,
+                      {
+                        className: `h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform duration-200 ${isOpen ? "rotate-180" : ""}`
+                      }
+                    )
+                  ] }) }),
+                  onClose && /* @__PURE__ */ jsx("div", { className: "shrink-0", "data-no-drag": true, children: /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "icon",
+                      className: "h-6 w-6",
+                      onClick: onClose,
+                      children: /* @__PURE__ */ jsx(X, { className: "h-3.5 w-3.5" })
+                    }
+                  ) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", { className: "h-[500px]", children: /* @__PURE__ */ jsx(
+              AgentRunner,
+              {
+                conversationId,
+                compact: true,
+                className: "h-full bg-background"
+              }
+            ) }) })
+          ]
         }
-      )))
-    )
+      )
+    }
   );
 }
 export {