@apteva/apteva-kit 0.1.105 → 0.1.107

package/dist/index.js

@@ -1442,10 +1442,15 @@ function Table({ widget, onAction }) {
 
 function Form({ widget, onAction }) {
   const { title, fields } = widget.props;
+  const fileInputRefs = _react.useRef.call(void 0, {});
   const [formData, setFormData] = _react.useState.call(void 0, () => {
     const initial = {};
     fields.forEach((field) => {
-      initial[field.name] = _nullishCoalesce(field.defaultValue, () => ( (field.type === "checkbox" ? false : "")));
+      if (field.type === "file") {
+        initial[field.name] = [];
+      } else {
+        initial[field.name] = _nullishCoalesce(field.defaultValue, () => ( (field.type === "checkbox" ? false : "")));
+      }
     });
     return initial;
   });
@@ -1524,11 +1529,75 @@ function Form({ widget, onAction }) {
           ),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "!text-neutral-700 dark:!text-neutral-300", children: field.label })
         ] });
+      case "file": {
+        const files = formData[field.name] || [];
+        return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "space-y-2", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "input",
+            {
+              ref: (el) => {
+                fileInputRefs.current[field.name] = el;
+              },
+              type: "file",
+              name: field.name,
+              multiple: _nullishCoalesce(field.multiple, () => ( true)),
+              accept: field.accept,
+              onChange: (e) => {
+                const newFiles = Array.from(e.target.files || []);
+                if (field.multiple !== false) {
+                  handleChange(field.name, [...files, ...newFiles]);
+                } else {
+                  handleChange(field.name, newFiles);
+                }
+                if (fileInputRefs.current[field.name]) {
+                  fileInputRefs.current[field.name].value = "";
+                }
+              },
+              className: "hidden"
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "button",
+            {
+              type: "button",
+              onClick: () => _optionalChain([fileInputRefs, 'access', _23 => _23.current, 'access', _24 => _24[field.name], 'optionalAccess', _25 => _25.click, 'call', _26 => _26()]),
+              className: "w-full px-3 py-3 rounded-lg border-2 border-dashed transition-colors cursor-pointer border-neutral-300 dark:border-neutral-600 bg-neutral-50 dark:bg-neutral-800 !text-neutral-500 dark:!text-neutral-400 hover:border-blue-400 hover:!text-blue-500 !text-sm",
+              children: field.placeholder || "Click to add files"
+            }
+          ),
+          files.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ul", { className: "space-y-1", children: files.map((file, idx) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            "li",
+            {
+              className: "flex items-center justify-between px-2 py-1.5 rounded-lg bg-neutral-50 dark:bg-neutral-800 !text-sm",
+              children: [
+                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "!text-neutral-700 dark:!text-neutral-300 truncate mr-2", children: [
+                  file.name,
+                  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "!text-neutral-400 ml-1", children: [
+                    "(",
+                    (file.size / 1024).toFixed(0),
+                    " KB)"
+                  ] })
+                ] }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => handleChange(field.name, files.filter((_, i) => i !== idx)),
+                    className: "!text-neutral-400 hover:!text-red-500 transition-colors flex-shrink-0",
+                    children: "\u2715"
+                  }
+                )
+              ]
+            },
+            `${file.name}-${idx}`
+          )) })
+        ] });
+      }
       default:
         return null;
     }
   };
-  const submitAction = _optionalChain([widget, 'access', _23 => _23.actions, 'optionalAccess', _24 => _24.find, 'call', _25 => _25((a) => a.type === "submit")]) || _optionalChain([widget, 'access', _26 => _26.actions, 'optionalAccess', _27 => _27[0]]);
+  const submitAction = _optionalChain([widget, 'access', _27 => _27.actions, 'optionalAccess', _28 => _28.find, 'call', _29 => _29((a) => a.type === "submit")]) || _optionalChain([widget, 'access', _30 => _30.actions, 'optionalAccess', _31 => _31[0]]);
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { onSubmit: handleSubmit, className: "border border-neutral-200 dark:border-neutral-700 rounded-xl bg-white dark:bg-neutral-900 overflow-hidden", children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "p-4", children: [
       title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "!text-lg font-semibold !text-neutral-900 dark:!text-white mb-4", children: title }),
@@ -1588,7 +1657,7 @@ function StepIcon({ type, status }) {
   if (type === "recurring" || type === "repeat") {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: iconClass, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) });
   }
-  if (type === "agent" || _optionalChain([type, 'optionalAccess', _28 => _28.startsWith, 'call', _29 => _29("@")])) {
+  if (type === "agent" || _optionalChain([type, 'optionalAccess', _32 => _32.startsWith, 'call', _33 => _33("@")])) {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: iconClass, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" }) });
   }
   if (type === "email" || type === "mail") {
@@ -1684,7 +1753,7 @@ function getStepColorClass(step, stepType) {
   if (stepType === "time" || stepType === "schedule" || stepType === "clock") {
     return STEP_COLOR_CLASSES.blue;
   }
-  if (stepType === "agent" || _optionalChain([stepType, 'optionalAccess', _30 => _30.startsWith, 'call', _31 => _31("@")])) {
+  if (stepType === "agent" || _optionalChain([stepType, 'optionalAccess', _34 => _34.startsWith, 'call', _35 => _35("@")])) {
     return STEP_COLOR_CLASSES.purple;
   }
   if (stepType === "email" || stepType === "slack" || stepType === "message" || stepType === "notification") {
@@ -1785,9 +1854,10 @@ var trendIcons = {
   flat: { symbol: "\u2192", color: "text-neutral-400" }
 };
 function Kpi({ widget, onAction }) {
-  const { label = "", value = "", change, trend } = widget.props || {};
+  const { title, label = "", value = "", change, trend } = widget.props || {};
   const trendInfo = trend ? trendIcons[trend] : null;
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "border border-neutral-200 dark:border-neutral-700 rounded-xl bg-white dark:bg-neutral-900 p-5", children: [
+    title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "!text-base font-semibold !text-neutral-900 dark:!text-white mb-3", children: title }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "!text-sm font-medium !text-neutral-500 dark:!text-neutral-400 mb-1", children: label }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-end gap-2", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "!text-2xl font-bold !text-neutral-900 dark:!text-white", children: value }),
@@ -1800,7 +1870,7 @@ function Kpi({ widget, onAction }) {
     widget.actions && widget.actions.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex gap-2 mt-3 pt-3 border-t border-neutral-200 dark:border-neutral-700", children: widget.actions.map((action, idx) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "button",
       {
-        onClick: () => _optionalChain([onAction, 'optionalCall', _32 => _32({
+        onClick: () => _optionalChain([onAction, 'optionalCall', _36 => _36({
           type: action.type,
           payload: action.payload,
           widgetId: widget.id,
@@ -1912,6 +1982,121 @@ function Spacer({ widget }) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: heightClasses[height] || heightClasses.md });
 }
 
+// src/components/Widgets/widget-library/LiveView.tsx
+
+
+function LiveView({ widget }) {
+  const { src, title, height, aspectRatio = "16/9", allowFullscreen = true, sandbox, allow, refreshInterval, showToolbar = true } = widget.props;
+  const iframeRef = _react.useRef.call(void 0, null);
+  const [isLoading, setIsLoading] = _react.useState.call(void 0, true);
+  const [hasError, setHasError] = _react.useState.call(void 0, false);
+  const [refreshKey, setRefreshKey] = _react.useState.call(void 0, 0);
+  const handleRefresh = _react.useCallback.call(void 0, () => {
+    setIsLoading(true);
+    setHasError(false);
+    setRefreshKey((k) => k + 1);
+  }, []);
+  const handleFullscreen = _react.useCallback.call(void 0, () => {
+    _optionalChain([iframeRef, 'access', _37 => _37.current, 'optionalAccess', _38 => _38.requestFullscreen, 'optionalCall', _39 => _39()]);
+  }, []);
+  const handleOpenExternal = _react.useCallback.call(void 0, () => {
+    window.open(src, "_blank", "noopener,noreferrer");
+  }, [src]);
+  _react.useEffect.call(void 0, () => {
+    if (!refreshInterval || refreshInterval <= 0) return;
+    const interval = setInterval(handleRefresh, refreshInterval * 1e3);
+    return () => clearInterval(interval);
+  }, [refreshInterval, handleRefresh]);
+  const aspectMap = { "16/9": "56.25%", "4/3": "75%", "1/1": "100%" };
+  const useFixedHeight = !!height;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "rounded-xl overflow-hidden border border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-900", children: [
+    showToolbar && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center justify-between px-3 py-2 bg-neutral-100 dark:bg-neutral-800 border-b border-neutral-200 dark:border-neutral-700", children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2 min-w-0", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn(
+          "w-2 h-2 rounded-full flex-shrink-0",
+          hasError ? "bg-red-500" : isLoading ? "bg-amber-500 animate-pulse" : "bg-emerald-500"
+        ) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-sm font-medium text-neutral-700 dark:text-neutral-300 truncate", children: title || "Live View" })
+      ] }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-1 flex-shrink-0", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "button",
+          {
+            onClick: handleRefresh,
+            className: "p-1.5 rounded-md text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors",
+            title: "Refresh",
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-3.5 h-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) })
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "button",
+          {
+            onClick: handleOpenExternal,
+            className: "p-1.5 rounded-md text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors",
+            title: "Open in new tab",
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-3.5 h-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" }) })
+          }
+        ),
+        allowFullscreen && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "button",
+          {
+            onClick: handleFullscreen,
+            className: "p-1.5 rounded-md text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors",
+            title: "Fullscreen",
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-3.5 h-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 4h-4m4 0l-5-5" }) })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "div",
+      {
+        className: "relative bg-white dark:bg-neutral-950",
+        style: useFixedHeight ? { height } : { paddingBottom: aspectMap[aspectRatio] || aspectMap["16/9"] },
+        children: [
+          isLoading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "absolute inset-0 flex items-center justify-center bg-neutral-100 dark:bg-neutral-900 z-10", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col items-center gap-2", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-6 h-6 border-2 border-neutral-300 dark:border-neutral-600 border-t-blue-500 rounded-full animate-spin" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-xs text-neutral-500", children: "Loading..." })
+          ] }) }),
+          hasError && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "absolute inset-0 flex items-center justify-center bg-neutral-100 dark:bg-neutral-900 z-10", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col items-center gap-2 text-center px-4", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-8 h-8 text-neutral-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" }) }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-sm text-neutral-500", children: "Failed to load" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "button",
+              {
+                onClick: handleRefresh,
+                className: "text-xs text-blue-500 hover:text-blue-600 underline",
+                children: "Try again"
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "iframe",
+            {
+              ref: iframeRef,
+              src,
+              title: title || "Live View",
+              className: cn(
+                "border-0 bg-white dark:bg-neutral-950",
+                useFixedHeight ? "w-full h-full" : "absolute inset-0 w-full h-full"
+              ),
+              allowFullScreen: allowFullscreen,
+              sandbox,
+              allow,
+              onLoad: () => setIsLoading(false),
+              onError: () => {
+                setIsLoading(false);
+                setHasError(true);
+              }
+            },
+            refreshKey
+          )
+        ]
+      }
+    )
+  ] });
+}
+
 // src/components/Widgets/WidgetRenderer.tsx
 
 function WidgetRenderer({ widget, onAction }) {
@@ -1939,6 +2124,8 @@ function WidgetRenderer({ widget, onAction }) {
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, TextBlock, { widget });
       case "spacer":
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Spacer, { widget });
+      case "live_view":
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, LiveView, { widget });
       default:
         return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "p-4 border border-yellow-300 bg-yellow-50 rounded-lg", children: [
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "text-sm text-yellow-800", children: [
@@ -1965,7 +2152,7 @@ function Widgets({
 }) {
   _react.useEffect.call(void 0, () => {
     widgets.forEach((widget) => {
-      _optionalChain([onWidgetMount, 'optionalCall', _33 => _33(widget.id)]);
+      _optionalChain([onWidgetMount, 'optionalCall', _40 => _40(widget.id)]);
     });
   }, [widgets, onWidgetMount]);
   const layoutClasses = {
@@ -2239,7 +2426,21 @@ function MarkdownContent({ content, className = "" }) {
 
 // src/components/Chat/ToolCall.tsx
 
-function ToolCall({ name, status, isReceiving = false, inputLength = 0, streamOutput }) {
+function ToolCall({ name, status, isReceiving = false, inputLength = 0, streamOutput, variant = "card" }) {
+  if (variant === "inline") {
+    const statusText = status === "preparing" ? `${name} preparing...` : status === "running" ? streamOutput ? `${name} \xB7 ${streamOutput}` : `${name}...` : status === "error" ? `${name} failed` : name;
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-tool-inline", children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-tool-inline-line" }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-tool-inline-content", children: [
+        status === "running" || status === "preparing" ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { className: "apteva-tool-inline-icon apteva-tool-icon-spin", width: "14", height: "14", fill: "none", viewBox: "0 0 24 24", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { className: "apteva-tool-spinner-track", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { className: "apteva-tool-spinner-fill", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+        ] }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "apteva-tool-inline-icon", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M13 2L3 14h9l-1 8 10-12h-9l1-8z", fill: "currentColor" }) }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "apteva-tool-inline-text", children: statusText })
+      ] }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-tool-inline-line" })
+    ] });
+  }
   if (status === "preparing") {
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-tool-card apteva-tool-card-preparing", children: [
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { className: "apteva-tool-icon apteva-tool-icon-spin", fill: "none", viewBox: "0 0 24 24", children: [
@@ -2287,12 +2488,82 @@ function ToolCall({ name, status, isReceiving = false, inputLength = 0, streamOu
   ] });
 }
 
+// src/components/Chat/ToolCallGroup.tsx
+
+
+function ToolCallGroup({ tools }) {
+  const completed = tools.filter((t) => t.status === "completed").length;
+  const errored = tools.filter((t) => t.status === "error").length;
+  const running = tools.filter((t) => t.status === "running").length;
+  const preparing = tools.filter((t) => t.status === "preparing").length;
+  const total = tools.length;
+  const allDone = completed + errored === total;
+  const [expanded, setExpanded] = _react.useState.call(void 0, false);
+  const isExpanded = allDone ? expanded : true;
+  const activeStreamTool = tools.find((t) => t.status === "running" && t.streamOutput);
+  const statusText = allDone ? `Used ${total} tools` : `Using ${total} tools${completed > 0 ? ` \xB7 ${completed}/${total} done` : ""}`;
+  const cardClass = allDone ? errored > 0 ? "apteva-tool-group apteva-tool-group-error" : "apteva-tool-group apteva-tool-group-completed" : "apteva-tool-group apteva-tool-group-running";
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: cardClass, children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "button",
+      {
+        className: "apteva-tool-group-header",
+        onClick: () => setExpanded(!expanded),
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-tool-group-header-left", children: [
+            allDone ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "apteva-tool-group-icon", width: "14", height: "14", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { className: "apteva-tool-group-icon apteva-tool-icon-spin", width: "14", height: "14", fill: "none", viewBox: "0 0 24 24", children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "circle", { className: "apteva-tool-spinner-track", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { className: "apteva-tool-spinner-fill", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+            ] }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "apteva-tool-group-status", children: statusText })
+          ] }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "svg",
+            {
+              className: `apteva-tool-group-chevron ${isExpanded ? "apteva-tool-group-chevron-open" : ""}`,
+              width: "14",
+              height: "14",
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
+            }
+          )
+        ]
+      }
+    ),
+    !isExpanded && activeStreamTool && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-tool-group-stream", children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "apteva-tool-group-stream-name", children: [
+        activeStreamTool.name,
+        ":"
+      ] }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "apteva-tool-group-stream-text", children: activeStreamTool.streamOutput })
+    ] }),
+    isExpanded && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-tool-group-list", children: tools.map((tool) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-tool-group-item", children: [
+      tool.status === "completed" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "apteva-tool-group-item-icon apteva-tool-group-item-done", width: "12", height: "12", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M5 13l4 4L19 7" }) }) : tool.status === "error" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "apteva-tool-group-item-icon apteva-tool-group-item-error", width: "12", height: "12", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M6 18L18 6M6 6l12 12" }) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-tool-group-item-icon apteva-tool-group-item-spinner" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "apteva-tool-group-item-name", children: tool.name }),
+      tool.streamOutput && tool.status === "running" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "apteva-tool-group-item-stream", children: tool.streamOutput })
+    ] }, tool.id)) })
+  ] });
+}
+
+// src/components/Chat/PersistentWidgetRef.tsx
+
+function PersistentWidgetRef({ widget }) {
+  const title = widget.props.title || widget.type.replace(/_/g, " ");
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2 px-3 py-2 rounded-lg bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 text-sm", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-2 h-2 rounded-full bg-emerald-500 animate-pulse flex-shrink-0" }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-neutral-600 dark:text-neutral-400 capitalize", children: title }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-neutral-400 dark:text-neutral-500 text-xs ml-auto", children: "pinned above" })
+  ] });
+}
+
 // src/components/Chat/Message.tsx
 
-function Message({ message, onAction, enableWidgets, onWidgetRender }) {
+function Message({ message, onAction, enableWidgets, onWidgetRender, persistentWidgetIds, toolCallStyle = "card" }) {
   const isUser = message.role === "user";
-  const contentSegments = _optionalChain([message, 'access', _34 => _34.metadata, 'optionalAccess', _35 => _35.content_segments]);
-  const isStreaming = _optionalChain([message, 'access', _36 => _36.metadata, 'optionalAccess', _37 => _37.isStreaming]) === true;
+  const contentSegments = _optionalChain([message, 'access', _41 => _41.metadata, 'optionalAccess', _42 => _42.content_segments]);
+  const isStreaming = _optionalChain([message, 'access', _43 => _43.metadata, 'optionalAccess', _44 => _44.isStreaming]) === true;
   const hasContent = message.content || contentSegments && contentSegments.length > 0;
   const reportedWidgetsRef = _react.useRef.call(void 0, /* @__PURE__ */ new Set());
   const parsedWidgets = _react.useMemo.call(void 0, () => {
@@ -2372,7 +2643,7 @@ function Message({ message, onAction, enableWidgets, onWidgetRender }) {
     }
     return elements.length > 0 ? elements : null;
   };
-  const attachments = _optionalChain([message, 'access', _38 => _38.metadata, 'optionalAccess', _39 => _39.attachments]) || [];
+  const attachments = _optionalChain([message, 'access', _45 => _45.metadata, 'optionalAccess', _46 => _46.attachments]) || [];
   const hasAttachments = attachments.length > 0;
   const renderAttachments = () => {
     if (!hasAttachments) return null;
@@ -2468,36 +2739,102 @@ function Message({ message, onAction, enableWidgets, onWidgetRender }) {
     if (!contentSegments || contentSegments.length === 0) {
       return null;
     }
-    const elements = [];
+    const groups = [];
+    let currentToolRun = [];
+    const flushToolRun = () => {
+      if (currentToolRun.length > 0) {
+        groups.push({ type: "tools", tools: [...currentToolRun] });
+        currentToolRun = [];
+      }
+    };
     contentSegments.forEach((segment, index) => {
-      if (segment.type === "text" && segment.content) {
-        const textElements = renderTextSegmentWithWidgets(segment.content, `seg-${index}`);
+      if (segment.type === "tool") {
+        currentToolRun.push(segment);
+      } else {
+        flushToolRun();
+        if (segment.type === "text" && segment.content) {
+          groups.push({ type: "text", content: segment.content, index });
+        }
+      }
+    });
+    flushToolRun();
+    const elements = [];
+    groups.forEach((group, groupIndex) => {
+      if (group.type === "text") {
+        const textElements = renderTextSegmentWithWidgets(group.content, `seg-${group.index}`);
         if (Array.isArray(textElements)) {
           elements.push(...textElements);
         } else {
           elements.push(textElements);
         }
-      } else if (segment.type === "tool") {
-        elements.push(
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-tool-call-standalone", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            ToolCall,
-            {
-              name: segment.name,
-              status: segment.status || (segment.result !== void 0 ? "completed" : "running"),
-              isReceiving: segment.isReceiving,
-              inputLength: segment.inputLength,
-              streamOutput: segment.streamOutput
+      } else if (group.type === "tools") {
+        if (toolCallStyle === "inline") {
+          group.tools.forEach((segment) => {
+            if (segment.type === "tool") {
+              elements.push(
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-tool-call-standalone", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  ToolCall,
+                  {
+                    name: segment.name,
+                    status: segment.status || (segment.result !== void 0 ? "completed" : "running"),
+                    isReceiving: segment.isReceiving,
+                    inputLength: segment.inputLength,
+                    streamOutput: segment.streamOutput,
+                    variant: "inline"
+                  }
+                ) }, segment.id)
+              );
             }
-          ) }, segment.id)
-        );
+          });
+        } else if (group.tools.length >= 3) {
+          const toolData = group.tools.map((t) => {
+            const tool = t;
+            return {
+              id: tool.id,
+              name: tool.name,
+              status: tool.status || (tool.result !== void 0 ? "completed" : "running"),
+              isReceiving: tool.isReceiving,
+              streamOutput: tool.streamOutput
+            };
+          });
+          elements.push(
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-tool-call-standalone", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ToolCallGroup, { tools: toolData }) }, `tool-group-${groupIndex}`)
+          );
+        } else {
+          group.tools.forEach((segment) => {
+            if (segment.type === "tool") {
+              elements.push(
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-tool-call-standalone", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  ToolCall,
+                  {
+                    name: segment.name,
+                    status: segment.status || (segment.result !== void 0 ? "completed" : "running"),
+                    isReceiving: segment.isReceiving,
+                    inputLength: segment.inputLength,
+                    streamOutput: segment.streamOutput
+                  }
+                ) }, segment.id)
+              );
+            }
+          });
+        }
       }
     });
     return elements;
   };
+  const renderMessageWidgets = () => {
+    if (!message.widgets || message.widgets.length === 0) return null;
+    const inlineWidgets = message.widgets.filter((w) => !_optionalChain([persistentWidgetIds, 'optionalAccess', _47 => _47.has, 'call', _48 => _48(w.id)]));
+    const persistentRefs = message.widgets.filter((w) => _optionalChain([persistentWidgetIds, 'optionalAccess', _49 => _49.has, 'call', _50 => _50(w.id)]));
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+      persistentRefs.map((w) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PersistentWidgetRef, { widget: w }) }, `ref-${w.id}`)),
+      inlineWidgets.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Widgets, { widgets: inlineWidgets, onAction, layout: "stack" }) })
+    ] });
+  };
   if (!isUser && (contentSegments && contentSegments.length > 0)) {
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-message-segmented", children: [
       renderSegmentedContent(),
-      message.widgets && message.widgets.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Widgets, { widgets: message.widgets, onAction, layout: "stack" }) }),
+      renderMessageWidgets(),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-message-timestamp apteva-message-timestamp-assistant", suppressHydrationWarning: true, children: message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) })
     ] });
   }
@@ -2505,7 +2842,7 @@ function Message({ message, onAction, enableWidgets, onWidgetRender }) {
   if (!isUser && enableWidgets && widgetContent) {
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-message-segmented", children: [
       widgetContent,
-      message.widgets && message.widgets.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Widgets, { widgets: message.widgets, onAction, layout: "stack" }) }),
+      renderMessageWidgets(),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-message-timestamp apteva-message-timestamp-assistant", suppressHydrationWarning: true, children: message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) })
     ] });
   }
@@ -2525,7 +2862,7 @@ function Message({ message, onAction, enableWidgets, onWidgetRender }) {
       ),
       children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: isUser ? "apteva-message-content-user" : "apteva-message-content-assistant", children: renderContent() }),
-        message.widgets && message.widgets.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Widgets, { widgets: message.widgets, onAction, layout: "stack" }) }),
+        renderMessageWidgets(),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("apteva-message-timestamp", isUser ? "apteva-message-timestamp-user" : "apteva-message-timestamp-assistant"), suppressHydrationWarning: true, children: message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) })
       ]
     }
@@ -2687,7 +3024,9 @@ function MessageList({
   chatVariant,
   onPromptClick,
   enableWidgets,
-  onWidgetRender
+  onWidgetRender,
+  persistentWidgetIds,
+  toolCallStyle
 }) {
   const listRef = _react.useRef.call(void 0, null);
   const isNearBottomRef = _react.useRef.call(void 0, true);
@@ -2719,7 +3058,7 @@ function MessageList({
       onPromptClick: onPromptClick || (() => {
       })
     }
-  ) : messages.map((message) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: message.role === "user" ? "apteva-message-row-user" : "apteva-message-row-assistant", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Message, { message, onAction, enableWidgets, onWidgetRender }) }, message.id)) });
+  ) : messages.map((message) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: message.role === "user" ? "apteva-message-row-user" : "apteva-message-row-assistant", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Message, { message, onAction, enableWidgets, onWidgetRender, persistentWidgetIds, toolCallStyle }) }, message.id)) });
 }
 
 // src/components/Chat/Composer.tsx
@@ -2793,7 +3132,7 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
         setFileError(errors.join(", "));
         setTimeout(() => setFileError(null), 5e3);
       }
-      _optionalChain([onFileUpload, 'optionalCall', _40 => _40(e.target.files)]);
+      _optionalChain([onFileUpload, 'optionalCall', _51 => _51(e.target.files)]);
       setShowMenu(false);
       e.target.value = "";
     }
@@ -2865,15 +3204,15 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
                 {
                   className: "apteva-composer-menu fixed bg-neutral-800 dark:bg-neutral-800 rounded-xl shadow-lg overflow-hidden z-[9999] min-w-[200px]",
                   style: {
-                    left: _nullishCoalesce(_optionalChain([menuButtonRef, 'access', _41 => _41.current, 'optionalAccess', _42 => _42.getBoundingClientRect, 'call', _43 => _43(), 'access', _44 => _44.left]), () => ( 0)),
-                    bottom: window.innerHeight - (_nullishCoalesce(_optionalChain([menuButtonRef, 'access', _45 => _45.current, 'optionalAccess', _46 => _46.getBoundingClientRect, 'call', _47 => _47(), 'access', _48 => _48.top]), () => ( 0))) + 8
+                    left: _nullishCoalesce(_optionalChain([menuButtonRef, 'access', _52 => _52.current, 'optionalAccess', _53 => _53.getBoundingClientRect, 'call', _54 => _54(), 'access', _55 => _55.left]), () => ( 0)),
+                    bottom: window.innerHeight - (_nullishCoalesce(_optionalChain([menuButtonRef, 'access', _56 => _56.current, 'optionalAccess', _57 => _57.getBoundingClientRect, 'call', _58 => _58(), 'access', _59 => _59.top]), () => ( 0))) + 8
                   },
                   children: [
                     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
                       "button",
                       {
                         onClick: () => {
-                          _optionalChain([fileInputRef, 'access', _49 => _49.current, 'optionalAccess', _50 => _50.click, 'call', _51 => _51()]);
+                          _optionalChain([fileInputRef, 'access', _60 => _60.current, 'optionalAccess', _61 => _61.click, 'call', _62 => _62()]);
                           setShowMenu(false);
                         },
                         className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-neutral-700 dark:hover:bg-neutral-700 transition-colors !text-white text-left",
@@ -2994,8 +3333,8 @@ function CommandComposer({
     }
   };
   const handleNewCommand = () => {
-    _optionalChain([onReset, 'optionalCall', _52 => _52()]);
-    _optionalChain([inputRef, 'access', _53 => _53.current, 'optionalAccess', _54 => _54.focus, 'call', _55 => _55()]);
+    _optionalChain([onReset, 'optionalCall', _63 => _63()]);
+    _optionalChain([inputRef, 'access', _64 => _64.current, 'optionalAccess', _65 => _65.focus, 'call', _66 => _66()]);
   };
   const handleInputChange = (value) => {
     setInput(value);
@@ -3109,15 +3448,15 @@ function CommandComposer({
                   {
                     className: "apteva-composer-menu fixed bg-neutral-800 dark:bg-neutral-800 rounded-xl shadow-lg overflow-hidden z-[9999] min-w-[200px]",
                     style: {
-                      left: _nullishCoalesce(_optionalChain([menuButtonRef, 'access', _56 => _56.current, 'optionalAccess', _57 => _57.getBoundingClientRect, 'call', _58 => _58(), 'access', _59 => _59.left]), () => ( 0)),
-                      top: (_nullishCoalesce(_optionalChain([menuButtonRef, 'access', _60 => _60.current, 'optionalAccess', _61 => _61.getBoundingClientRect, 'call', _62 => _62(), 'access', _63 => _63.bottom]), () => ( 0))) + 8
+                      left: _nullishCoalesce(_optionalChain([menuButtonRef, 'access', _67 => _67.current, 'optionalAccess', _68 => _68.getBoundingClientRect, 'call', _69 => _69(), 'access', _70 => _70.left]), () => ( 0)),
+                      top: (_nullishCoalesce(_optionalChain([menuButtonRef, 'access', _71 => _71.current, 'optionalAccess', _72 => _72.getBoundingClientRect, 'call', _73 => _73(), 'access', _74 => _74.bottom]), () => ( 0))) + 8
                     },
                     children: [
                       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
                         "button",
                         {
                           onClick: () => {
-                            _optionalChain([fileInputRef, 'access', _64 => _64.current, 'optionalAccess', _65 => _65.click, 'call', _66 => _66()]);
+                            _optionalChain([fileInputRef, 'access', _75 => _75.current, 'optionalAccess', _76 => _76.click, 'call', _77 => _77()]);
                             setShowMenu(false);
                           },
                           className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-neutral-700 dark:hover:bg-neutral-700 transition-colors !text-white text-left",
@@ -3270,8 +3609,8 @@ var AptevaClient = class {
   constructor(config) {
     __publicField(this, "config");
     this.config = {
-      apiUrl: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _67 => _67.apiUrl]), () => ( "")),
-      apiKey: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _68 => _68.apiKey]), () => ( ""))
+      apiUrl: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _78 => _78.apiUrl]), () => ( "")),
+      apiKey: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _79 => _79.apiKey]), () => ( ""))
     };
   }
   /**
@@ -3348,7 +3687,7 @@ var AptevaClient = class {
         const error = await response.json().catch(() => ({ error: "Request failed" }));
         throw new Error(error.error || `Request failed with status ${response.status}`);
       }
-      const reader = _optionalChain([response, 'access', _69 => _69.body, 'optionalAccess', _70 => _70.getReader, 'call', _71 => _71()]);
+      const reader = _optionalChain([response, 'access', _80 => _80.body, 'optionalAccess', _81 => _81.getReader, 'call', _82 => _82()]);
       if (!reader) {
         throw new Error("Response body is not readable");
       }
@@ -3366,7 +3705,7 @@ var AptevaClient = class {
           if (line.startsWith("data: ")) {
             const data = line.slice(6);
             if (data === "[DONE]") {
-              _optionalChain([onComplete, 'optionalCall', _72 => _72(threadId)]);
+              _optionalChain([onComplete, 'optionalCall', _83 => _83(threadId)]);
               return;
             }
             try {
@@ -3381,10 +3720,10 @@ var AptevaClient = class {
           }
         }
       }
-      _optionalChain([onComplete, 'optionalCall', _73 => _73(threadId)]);
+      _optionalChain([onComplete, 'optionalCall', _84 => _84(threadId)]);
     } catch (error) {
       const err = error instanceof Error ? error : new Error("Unknown error");
-      _optionalChain([onError, 'optionalCall', _74 => _74(err)]);
+      _optionalChain([onError, 'optionalCall', _85 => _85(err)]);
       throw err;
     }
   }
@@ -3448,6 +3787,41 @@ var AptevaClient = class {
 };
 var aptevaClient = new AptevaClient();
 
+// src/components/Chat/PersistentWidgetPanel.tsx
+
+
+function PersistentWidgetPanel({ widgets, onAction }) {
+  const [collapsed, setCollapsed] = _react.useState.call(void 0, false);
+  if (widgets.length === 0) return null;
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-persistent-panel border-b border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-900", children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center justify-between px-3 py-1.5", children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider", children: "Live" })
+      ] }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "button",
+        {
+          onClick: () => setCollapsed((c) => !c),
+          className: "p-1 rounded text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300 hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors",
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "svg",
+            {
+              className: cn("w-3.5 h-3.5 transition-transform", collapsed && "rotate-180"),
+              fill: "none",
+              viewBox: "0 0 24 24",
+              stroke: "currentColor",
+              strokeWidth: 2,
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
+            }
+          )
+        }
+      )
+    ] }),
+    !collapsed && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "px-3 pb-3 flex flex-col gap-3", children: widgets.map((widget) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, WidgetRenderer, { widget, onAction }, widget.id)) })
+  ] });
+}
+
 // src/components/Chat/Chat.tsx
 
 var Chat = _react.forwardRef.call(void 0, function Chat2({
@@ -3490,6 +3864,8 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
   showHeader = true,
   headerTitle = "Chat",
   onHeaderBack,
+  // Tool call display
+  toolCallStyle = "card",
   // Widget detection
   enableWidgets = false,
   availableWidgets,
@@ -3515,6 +3891,30 @@ var Chat = _react.forwardRef.call(void 0, function Chat2({
   const [internalPlanMode, setInternalPlanMode] = _react.useState.call(void 0, planMode);
   const [showSettingsMenu, setShowSettingsMenu] = _react.useState.call(void 0, false);
   const fileInputRef = _react.useRef.call(void 0, null);
+  const [persistentWidgets, setPersistentWidgets] = _react.useState.call(void 0, /* @__PURE__ */ new Map());
+  const updatePersistentWidgets = _react.useCallback.call(void 0, (msgs) => {
+    setPersistentWidgets((prev) => {
+      const next = new Map(prev);
+      let changed = false;
+      for (const msg of msgs) {
+        if (!msg.widgets) continue;
+        for (const w of msg.widgets) {
+          if (!w.persistent) continue;
+          const existing = next.get(w.id);
+          if (!existing || existing !== w) {
+            next.set(w.id, w);
+            changed = true;
+          }
+        }
+      }
+      return changed ? next : prev;
+    });
+  }, []);
+  _react.useEffect.call(void 0, () => {
+    updatePersistentWidgets(messages);
+  }, [messages, updatePersistentWidgets]);
+  const persistentWidgetList = _react.useMemo.call(void 0, () => Array.from(persistentWidgets.values()), [persistentWidgets]);
+  const persistentWidgetIds = _react.useMemo.call(void 0, () => new Set(persistentWidgets.keys()), [persistentWidgets]);
   const handleSendMessageRef = _react.useRef.call(void 0, null);
   _react.useImperativeHandle.call(void 0, ref, () => ({
     sendMessage: async (text) => {
@@ -3546,7 +3946,7 @@ ${widgetContext}` : widgetContext;
   }, [apiUrl, apiKey]);
   _react.useEffect.call(void 0, () => {
     if (threadId) {
-      _optionalChain([onThreadChange, 'optionalCall', _75 => _75(threadId)]);
+      _optionalChain([onThreadChange, 'optionalCall', _86 => _86(threadId)]);
     }
   }, [threadId, onThreadChange]);
   _react.useEffect.call(void 0, () => {
@@ -3564,7 +3964,7 @@ ${widgetContext}` : widgetContext;
   }, [showSettingsMenu]);
   const handleModeChange = (newMode) => {
     setMode(newMode);
-    _optionalChain([onModeChange, 'optionalCall', _76 => _76(newMode)]);
+    _optionalChain([onModeChange, 'optionalCall', _87 => _87(newMode)]);
     if (newMode === "command") {
       setCommandState("idle");
       setCommandResult(null);
@@ -3589,7 +3989,7 @@ ${widgetContext}` : widgetContext;
         metadata: hasFiles ? { attachments } : void 0
       };
       setMessages((prev) => [...prev, userMessage]);
-      _optionalChain([onMessageSent, 'optionalCall', _77 => _77(userMessage)]);
+      _optionalChain([onMessageSent, 'optionalCall', _88 => _88(userMessage)]);
     }
     setIsLoading(true);
     try {
@@ -3657,7 +4057,7 @@ ${widgetContext}` : widgetContext;
                   responseThreadId = chunk.thread_id;
                   if (!currentThreadId) {
                     setCurrentThreadId(chunk.thread_id);
-                    _optionalChain([onThreadChange, 'optionalCall', _78 => _78(chunk.thread_id)]);
+                    _optionalChain([onThreadChange, 'optionalCall', _89 => _89(chunk.thread_id)]);
                   }
                 }
                 break;
@@ -3689,7 +4089,7 @@ ${widgetContext}` : widgetContext;
                   contentSegments.push({ type: "tool", id: chunk.tool_id, name: displayName, status: "preparing" });
                   toolInputBuffers[chunk.tool_id] = "";
                   setChatToolName(displayName);
-                  _optionalChain([onToolCall, 'optionalCall', _79 => _79(chunk.tool_name, chunk.tool_id)]);
+                  _optionalChain([onToolCall, 'optionalCall', _90 => _90(chunk.tool_name, chunk.tool_id)]);
                   updateMessage();
                 }
                 break;
@@ -3749,7 +4149,7 @@ ${widgetContext}` : widgetContext;
                     toolSegment.result = chunk.content;
                     toolSegment.status = "completed";
                     toolSegment.isReceiving = false;
-                    _optionalChain([onToolResult, 'optionalCall', _80 => _80(toolSegment.name, chunk.content)]);
+                    _optionalChain([onToolResult, 'optionalCall', _91 => _91(toolSegment.name, chunk.content)]);
                   }
                   setChatToolName(null);
                   updateMessage();
@@ -3793,7 +4193,7 @@ ${widgetContext}` : widgetContext;
             });
             if (threadId2 && threadId2 !== currentThreadId) {
               setCurrentThreadId(threadId2);
-              _optionalChain([onThreadChange, 'optionalCall', _81 => _81(threadId2)]);
+              _optionalChain([onThreadChange, 'optionalCall', _92 => _92(threadId2)]);
             }
             setIsLoading(false);
             setCurrentRequestId(null);
@@ -3817,7 +4217,7 @@ ${widgetContext}` : widgetContext;
             setIsLoading(false);
             setCurrentRequestId(null);
             setChatToolName(null);
-            _optionalChain([onError, 'optionalCall', _82 => _82(error)]);
+            _optionalChain([onError, 'optionalCall', _93 => _93(error)]);
           }
         );
       }
@@ -3830,7 +4230,7 @@ ${widgetContext}` : widgetContext;
         metadata: { error: true }
       };
       setMessages((prev) => [...prev, errorMessage]);
-      _optionalChain([onError, 'optionalCall', _83 => _83(error instanceof Error ? error : new Error("Unknown error"))]);
+      _optionalChain([onError, 'optionalCall', _94 => _94(error instanceof Error ? error : new Error("Unknown error"))]);
     } finally {
       setIsLoading(false);
     }
@@ -3876,7 +4276,7 @@ ${planningInstruction}` : planningInstruction;
           const error = err instanceof Error ? err : new Error("Failed to generate plan");
           setCommandError(error);
           setCommandState("error");
-          _optionalChain([onError, 'optionalCall', _84 => _84(error)]);
+          _optionalChain([onError, 'optionalCall', _95 => _95(error)]);
         }
       }
       return;
@@ -3909,12 +4309,12 @@ ${planningInstruction}` : planningInstruction;
               setCommandResult(result);
               setCommandState("success");
               setProgress(100);
-              _optionalChain([onComplete, 'optionalCall', _85 => _85(result)]);
+              _optionalChain([onComplete, 'optionalCall', _96 => _96(result)]);
             },
             (error) => {
               setCommandError(error);
               setCommandState("error");
-              _optionalChain([onError, 'optionalCall', _86 => _86(error)]);
+              _optionalChain([onError, 'optionalCall', _97 => _97(error)]);
             }
           );
         } else {
@@ -3927,7 +4327,7 @@ ${planningInstruction}` : planningInstruction;
           setCommandResult(result);
           setCommandState("success");
           setProgress(100);
-          _optionalChain([onComplete, 'optionalCall', _87 => _87(result)]);
+          _optionalChain([onComplete, 'optionalCall', _98 => _98(result)]);
         }
       } else {
         const commandInstruction = `CRITICAL COMMAND MODE: Maximum 10 words per response. Execute the command immediately. Make reasonable assumptions based on context. Use sensible defaults for missing details. DO NOT ask questions unless something is truly impossible without user input (e.g., missing required password). State what you're doing or the result. Examples: "Analyzing customer data from last quarter..." or "Created 5 new database entries successfully" or "Search complete: found 12 matching results". NO greetings, NO filler words, NO clarification requests. Action/result only.`;
@@ -3957,16 +4357,16 @@ ${commandInstruction}` : commandInstruction;
                 const displayName = chunk.tool_display_name || chunk.tool_name;
                 lastToolName = chunk.tool_name;
                 setCurrentToolName(displayName);
-                _optionalChain([onToolCall, 'optionalCall', _88 => _88(chunk.tool_name, chunk.tool_id || "")]);
+                _optionalChain([onToolCall, 'optionalCall', _99 => _99(chunk.tool_name, chunk.tool_id || "")]);
                 accumulatedContent = "";
                 setStreamedContent("");
               } else if (chunk.type === "tool_result") {
-                _optionalChain([onToolResult, 'optionalCall', _89 => _89(lastToolName, chunk.content)]);
+                _optionalChain([onToolResult, 'optionalCall', _100 => _100(lastToolName, chunk.content)]);
                 setCurrentToolName(null);
               } else if (chunk.type === "thread_id" && chunk.thread_id) {
                 if (!currentThreadId) {
                   setCurrentThreadId(chunk.thread_id);
-                  _optionalChain([onThreadChange, 'optionalCall', _90 => _90(chunk.thread_id)]);
+                  _optionalChain([onThreadChange, 'optionalCall', _101 => _101(chunk.thread_id)]);
                 }
               } else if (chunk.type === "request_id" && chunk.request_id) {
                 setCurrentRequestId(chunk.request_id);
@@ -3982,13 +4382,13 @@ ${commandInstruction}` : commandInstruction;
               setCommandState("success");
               setProgress(100);
               setCurrentRequestId(null);
-              _optionalChain([onComplete, 'optionalCall', _91 => _91(result)]);
+              _optionalChain([onComplete, 'optionalCall', _102 => _102(result)]);
             },
             (error) => {
               setCommandError(error);
               setCommandState("error");
               setCurrentRequestId(null);
-              _optionalChain([onError, 'optionalCall', _92 => _92(error)]);
+              _optionalChain([onError, 'optionalCall', _103 => _103(error)]);
             }
           );
         } else {
@@ -4008,14 +4408,14 @@ ${commandInstruction}` : commandInstruction;
           setCommandResult(result);
           setCommandState("success");
           setProgress(100);
-          _optionalChain([onComplete, 'optionalCall', _93 => _93(result)]);
+          _optionalChain([onComplete, 'optionalCall', _104 => _104(result)]);
         }
       }
     } catch (err) {
       const error = err instanceof Error ? err : new Error("Unknown error");
       setCommandError(error);
       setCommandState("error");
-      _optionalChain([onError, 'optionalCall', _94 => _94(error)]);
+      _optionalChain([onError, 'optionalCall', _105 => _105(error)]);
     }
   };
   const resetCommand = () => {
@@ -4074,6 +4474,7 @@ ${planToExecute}`;
       ] })
     ] }) }),
     mode === "chat" && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+      persistentWidgetList.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PersistentWidgetPanel, { widgets: persistentWidgetList, onAction }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         MessageList,
         {
@@ -4087,7 +4488,9 @@ ${planToExecute}`;
           chatVariant: variant,
           onPromptClick: (prompt) => handleSendMessage(prompt),
           enableWidgets,
-          onWidgetRender
+          onWidgetRender,
+          persistentWidgetIds,
+          toolCallStyle
         }
       ),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -4111,8 +4514,8 @@ ${planToExecute}`;
           executeCommand(text, files);
         },
         state: commandState,
-        response: _optionalChain([commandResult, 'optionalAccess', _95 => _95.data, 'optionalAccess', _96 => _96.summary]) || _optionalChain([commandResult, 'optionalAccess', _97 => _97.message]),
-        error: _optionalChain([commandError, 'optionalAccess', _98 => _98.message]),
+        response: _optionalChain([commandResult, 'optionalAccess', _106 => _106.data, 'optionalAccess', _107 => _107.summary]) || _optionalChain([commandResult, 'optionalAccess', _108 => _108.message]),
+        error: _optionalChain([commandError, 'optionalAccess', _109 => _109.message]),
         plan,
         streamedContent,
         toolName: currentToolName,
@@ -4280,13 +4683,13 @@ ${planningInstruction}` : planningInstruction;
             const error2 = err instanceof Error ? err : new Error("Failed to generate plan");
             setError(error2);
             setState("error");
-            _optionalChain([onError, 'optionalCall', _99 => _99(error2)]);
+            _optionalChain([onError, 'optionalCall', _110 => _110(error2)]);
           });
         } catch (err) {
           const error2 = err instanceof Error ? err : new Error("Failed to generate plan");
           setError(error2);
           setState("error");
-          _optionalChain([onError, 'optionalCall', _100 => _100(error2)]);
+          _optionalChain([onError, 'optionalCall', _111 => _111(error2)]);
         }
       }
       return;
@@ -4297,7 +4700,7 @@ ${planningInstruction}` : planningInstruction;
     setStreamedContent("");
     setCommand("");
     setUploadedFiles([]);
-    _optionalChain([onStart, 'optionalCall', _101 => _101()]);
+    _optionalChain([onStart, 'optionalCall', _112 => _112()]);
     try {
       if (useMock) {
         if (enableStreaming) {
@@ -4308,16 +4711,16 @@ ${planningInstruction}` : planningInstruction;
               if (chunk.type === "token" && chunk.content) {
                 accumulatedContent += chunk.content;
                 setStreamedContent(accumulatedContent);
-                _optionalChain([onChunk, 'optionalCall', _102 => _102(chunk.content)]);
+                _optionalChain([onChunk, 'optionalCall', _113 => _113(chunk.content)]);
                 const estimatedProgress = Math.min(Math.round(accumulatedContent.length / 10), 90);
                 setProgress(estimatedProgress);
-                _optionalChain([onProgress, 'optionalCall', _103 => _103(estimatedProgress)]);
+                _optionalChain([onProgress, 'optionalCall', _114 => _114(estimatedProgress)]);
               } else if (chunk.type === "widget" && chunk.widget) {
                 const widget = chunk.widget;
                 setResult((prev) => ({
                   success: true,
-                  data: _optionalChain([prev, 'optionalAccess', _104 => _104.data]) || {},
-                  widgets: [..._optionalChain([prev, 'optionalAccess', _105 => _105.widgets]) || [], widget],
+                  data: _optionalChain([prev, 'optionalAccess', _115 => _115.data]) || {},
+                  widgets: [..._optionalChain([prev, 'optionalAccess', _116 => _116.widgets]) || [], widget],
                   message: accumulatedContent || "Command executed successfully"
                 }));
               }
@@ -4337,19 +4740,19 @@ ${planningInstruction}` : planningInstruction;
               setResult(result2);
               setState("success");
               setProgress(100);
-              _optionalChain([onComplete, 'optionalCall', _106 => _106(result2)]);
+              _optionalChain([onComplete, 'optionalCall', _117 => _117(result2)]);
             },
             (error2) => {
               setError(error2);
               setState("error");
-              _optionalChain([onError, 'optionalCall', _107 => _107(error2)]);
+              _optionalChain([onError, 'optionalCall', _118 => _118(error2)]);
             }
           );
         } else {
           const progressInterval = setInterval(() => {
             setProgress((prev) => {
               const next = Math.min(prev + 10, 90);
-              _optionalChain([onProgress, 'optionalCall', _108 => _108(next)]);
+              _optionalChain([onProgress, 'optionalCall', _119 => _119(next)]);
               return next;
             });
           }, 200);
@@ -4373,7 +4776,7 @@ ${planningInstruction}` : planningInstruction;
           setResult(result2);
           setState("success");
           setProgress(100);
-          _optionalChain([onComplete, 'optionalCall', _109 => _109(result2)]);
+          _optionalChain([onComplete, 'optionalCall', _120 => _120(result2)]);
         }
       } else {
         if (enableStreaming) {
@@ -4419,16 +4822,16 @@ ${commandInstruction}` : commandInstruction;
               if (chunk.type === "token" && chunk.content) {
                 accumulatedContent += chunk.content;
                 setStreamedContent(accumulatedContent);
-                _optionalChain([onChunk, 'optionalCall', _110 => _110(chunk.content)]);
+                _optionalChain([onChunk, 'optionalCall', _121 => _121(chunk.content)]);
                 const estimatedProgress = Math.min(Math.round(accumulatedContent.length / 10), 90);
                 setProgress(estimatedProgress);
-                _optionalChain([onProgress, 'optionalCall', _111 => _111(estimatedProgress)]);
+                _optionalChain([onProgress, 'optionalCall', _122 => _122(estimatedProgress)]);
               } else if (chunk.type === "widget" && chunk.widget) {
                 const widget = chunk.widget;
                 setResult((prev) => ({
                   success: true,
-                  data: _optionalChain([prev, 'optionalAccess', _112 => _112.data]) || {},
-                  widgets: [..._optionalChain([prev, 'optionalAccess', _113 => _113.widgets]) || [], widget],
+                  data: _optionalChain([prev, 'optionalAccess', _123 => _123.data]) || {},
+                  widgets: [..._optionalChain([prev, 'optionalAccess', _124 => _124.widgets]) || [], widget],
                   message: accumulatedContent || "Command executed successfully"
                 }));
               }
@@ -4448,20 +4851,20 @@ ${commandInstruction}` : commandInstruction;
               setResult(result2);
               setState("success");
               setProgress(100);
-              _optionalChain([onComplete, 'optionalCall', _114 => _114(result2)]);
+              _optionalChain([onComplete, 'optionalCall', _125 => _125(result2)]);
             },
             (error2) => {
               const err = error2 instanceof Error ? error2 : new Error("Unknown error");
               setError(err);
               setState("error");
-              _optionalChain([onError, 'optionalCall', _115 => _115(err)]);
+              _optionalChain([onError, 'optionalCall', _126 => _126(err)]);
             }
           );
         } else {
           const progressInterval = setInterval(() => {
             setProgress((prev) => {
               const next = Math.min(prev + 10, 90);
-              _optionalChain([onProgress, 'optionalCall', _116 => _116(next)]);
+              _optionalChain([onProgress, 'optionalCall', _127 => _127(next)]);
               return next;
             });
           }, 200);
@@ -4517,14 +4920,14 @@ ${commandInstruction}` : commandInstruction;
           setResult(result2);
           setState("success");
           setProgress(100);
-          _optionalChain([onComplete, 'optionalCall', _117 => _117(result2)]);
+          _optionalChain([onComplete, 'optionalCall', _128 => _128(result2)]);
         }
       }
     } catch (err) {
       const error2 = err instanceof Error ? err : new Error("Unknown error");
       setError(error2);
       setState("error");
-      _optionalChain([onError, 'optionalCall', _118 => _118(error2)]);
+      _optionalChain([onError, 'optionalCall', _129 => _129(error2)]);
     }
   };
   const resetCommand = () => {
@@ -4557,14 +4960,14 @@ ${planToExecute}`;
   };
   const handleFileSelect = async (e) => {
     if (e.target.files && e.target.files.length > 0) {
-      _optionalChain([onFileUpload, 'optionalCall', _119 => _119(e.target.files)]);
+      _optionalChain([onFileUpload, 'optionalCall', _130 => _130(e.target.files)]);
       const files = [];
       for (let i = 0; i < e.target.files.length; i++) {
         const file = e.target.files[i];
         const reader = new FileReader();
         await new Promise((resolve) => {
           reader.onload = (event) => {
-            if (_optionalChain([event, 'access', _120 => _120.target, 'optionalAccess', _121 => _121.result])) {
+            if (_optionalChain([event, 'access', _131 => _131.target, 'optionalAccess', _132 => _132.result])) {
               const fullDataUrl = event.target.result;
               const base64Data = fullDataUrl.split(",")[1];
               if (file.type.startsWith("image/")) {
@@ -4658,7 +5061,7 @@ ${planToExecute}`;
               enableFileUpload && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 "button",
                 {
-                  onClick: () => _optionalChain([fileInputRef, 'access', _122 => _122.current, 'optionalAccess', _123 => _123.click, 'call', _124 => _124()]),
+                  onClick: () => _optionalChain([fileInputRef, 'access', _133 => _133.current, 'optionalAccess', _134 => _134.click, 'call', _135 => _135()]),
                   className: "w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 !text-neutral-500 dark:!text-neutral-500 hover:bg-neutral-100 dark:hover:bg-neutral-800",
                   title: "Attach file",
                   children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M8.4 2.8L4.4 6.8C3.736 7.464 3.736 8.536 4.4 9.2C5.064 9.864 6.136 9.864 6.8 9.2L11.6 4.4C12.704 3.296 12.704 1.504 11.6 0.4C10.496 -0.704 8.704 -0.704 7.6 0.4L2.8 5.2C1.256 6.744 1.256 9.256 2.8 10.8C4.344 12.344 6.856 12.344 8.4 10.8L12.4 6.8", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round", transform: "translate(1.6, 2.4)" }) })
@@ -4877,7 +5280,7 @@ ${planToExecute}`;
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-5 h-5 text-red-600 mt-0.5 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
               /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "text-sm font-semibold text-red-800 dark:text-red-400", children: "Error" }),
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-red-700 dark:text-red-300 text-sm mt-1", children: _optionalChain([error, 'optionalAccess', _125 => _125.message]) })
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-red-700 dark:text-red-300 text-sm mt-1", children: _optionalChain([error, 'optionalAccess', _136 => _136.message]) })
               ] })
             ] }) }),
             allowInput && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -4905,7 +5308,7 @@ ${planToExecute}`;
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-green-700 dark:text-green-300 text-sm", children: "Command executed successfully" })
               ] })
             ] }),
-            _optionalChain([result, 'access', _126 => _126.data, 'optionalAccess', _127 => _127.summary]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-neutral-700 dark:text-neutral-300 text-sm leading-relaxed whitespace-pre-line", children: result.data.summary }),
+            _optionalChain([result, 'access', _137 => _137.data, 'optionalAccess', _138 => _138.summary]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-neutral-700 dark:text-neutral-300 text-sm leading-relaxed whitespace-pre-line", children: result.data.summary }),
             result.widgets && result.widgets.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "space-y-3", children: result.widgets.map((widget) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               WidgetRenderer,
               {
@@ -4956,7 +5359,7 @@ ${planToExecute}`;
             enableFileUpload && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "button",
               {
-                onClick: () => _optionalChain([fileInputRef, 'access', _128 => _128.current, 'optionalAccess', _129 => _129.click, 'call', _130 => _130()]),
+                onClick: () => _optionalChain([fileInputRef, 'access', _139 => _139.current, 'optionalAccess', _140 => _140.click, 'call', _141 => _141()]),
                 className: "w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 !text-neutral-500 dark:!text-neutral-500 hover:bg-neutral-100 dark:hover:bg-neutral-800",
                 title: "Attach file",
                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M8.4 2.8L4.4 6.8C3.736 7.464 3.736 8.536 4.4 9.2C5.064 9.864 6.136 9.864 6.8 9.2L11.6 4.4C12.704 3.296 12.704 1.504 11.6 0.4C10.496 -0.704 8.704 -0.704 7.6 0.4L2.8 5.2C1.256 6.744 1.256 9.256 2.8 10.8C4.344 12.344 6.856 12.344 8.4 10.8L12.4 6.8", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round", transform: "translate(1.6, 2.4)" }) })
@@ -5142,25 +5545,25 @@ function Prompt({
     const newValue = e.target.value;
     if (!maxLength || newValue.length <= maxLength) {
       setValue(newValue);
-      _optionalChain([onChange, 'optionalCall', _131 => _131(newValue)]);
+      _optionalChain([onChange, 'optionalCall', _142 => _142(newValue)]);
     }
   };
   const handleSubmit = async () => {
     if (value.length < minLength) return;
-    _optionalChain([onSubmit, 'optionalCall', _132 => _132(value)]);
+    _optionalChain([onSubmit, 'optionalCall', _143 => _143(value)]);
     setIsLoading(true);
     try {
       if (useMock) {
         await new Promise((resolve) => setTimeout(resolve, 1500));
         const mockResult = `Enhanced version: ${value} [AI-generated content]`;
-        _optionalChain([onResult, 'optionalCall', _133 => _133(mockResult)]);
+        _optionalChain([onResult, 'optionalCall', _144 => _144(mockResult)]);
         setValue("");
       } else {
         const response = await aptevaClient.chat({
           agent_id: agentId,
           message: value
         });
-        _optionalChain([onResult, 'optionalCall', _134 => _134(response.message)]);
+        _optionalChain([onResult, 'optionalCall', _145 => _145(response.message)]);
         setValue("");
       }
     } catch (error) {
@@ -5255,7 +5658,7 @@ function Stream({
   }, [autoStart]);
   const startStreaming = async () => {
     setIsStreaming(true);
-    _optionalChain([onStart, 'optionalCall', _135 => _135()]);
+    _optionalChain([onStart, 'optionalCall', _146 => _146()]);
     try {
       if (useMock) {
         const mockText = "This is a simulated streaming response from the AI agent. In a real implementation, this would stream data from your backend API. The text appears word by word to simulate the streaming effect. You can customize the typing speed and styling based on your needs.";
@@ -5263,13 +5666,13 @@ function Stream({
           mockText,
           (chunk) => {
             setText((prev) => prev + chunk);
-            _optionalChain([onChunk, 'optionalCall', _136 => _136(chunk)]);
+            _optionalChain([onChunk, 'optionalCall', _147 => _147(chunk)]);
           },
           typingSpeed
         );
         setIsComplete(true);
         setIsStreaming(false);
-        _optionalChain([onComplete, 'optionalCall', _137 => _137(text + mockText)]);
+        _optionalChain([onComplete, 'optionalCall', _148 => _148(text + mockText)]);
       } else {
         let accumulatedText = "";
         await aptevaClient.chatStream(
@@ -5282,24 +5685,24 @@ function Stream({
             if (chunk.type === "token" && chunk.content) {
               accumulatedText += chunk.content;
               setText(accumulatedText);
-              _optionalChain([onChunk, 'optionalCall', _138 => _138(chunk.content)]);
+              _optionalChain([onChunk, 'optionalCall', _149 => _149(chunk.content)]);
             }
           },
           () => {
             setIsComplete(true);
             setIsStreaming(false);
-            _optionalChain([onComplete, 'optionalCall', _139 => _139(accumulatedText)]);
+            _optionalChain([onComplete, 'optionalCall', _150 => _150(accumulatedText)]);
           },
           (error) => {
             const err = error instanceof Error ? error : new Error("Streaming error");
-            _optionalChain([onError, 'optionalCall', _140 => _140(err)]);
+            _optionalChain([onError, 'optionalCall', _151 => _151(err)]);
             setIsStreaming(false);
           }
         );
       }
     } catch (error) {
       const err = error instanceof Error ? error : new Error("Streaming error");
-      _optionalChain([onError, 'optionalCall', _141 => _141(err)]);
+      _optionalChain([onError, 'optionalCall', _152 => _152(err)]);
       setIsStreaming(false);
     }
   };
@@ -5391,7 +5794,7 @@ function ThreadList({
 }) {
   const [searchQuery, setSearchQuery] = _react.useState.call(void 0, "");
   const filteredThreads = threads.filter(
-    (thread) => thread.title.toLowerCase().includes(searchQuery.toLowerCase()) || _optionalChain([thread, 'access', _142 => _142.preview, 'optionalAccess', _143 => _143.toLowerCase, 'call', _144 => _144(), 'access', _145 => _145.includes, 'call', _146 => _146(searchQuery.toLowerCase())])
+    (thread) => thread.title.toLowerCase().includes(searchQuery.toLowerCase()) || _optionalChain([thread, 'access', _153 => _153.preview, 'optionalAccess', _154 => _154.toLowerCase, 'call', _155 => _155(), 'access', _156 => _156.includes, 'call', _157 => _157(searchQuery.toLowerCase())])
   );
   const groupedThreads = groupBy === "date" ? groupThreadsByDate(filteredThreads) : { All: filteredThreads };
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col h-full", children: [
@@ -5413,8 +5816,8 @@ function ThreadList({
           {
             thread,
             isActive: thread.id === currentThreadId,
-            onSelect: () => _optionalChain([onThreadSelect, 'optionalCall', _147 => _147(thread.id)]),
-            onDelete: () => _optionalChain([onThreadDelete, 'optionalCall', _148 => _148(thread.id)])
+            onSelect: () => _optionalChain([onThreadSelect, 'optionalCall', _158 => _158(thread.id)]),
+            onDelete: () => _optionalChain([onThreadDelete, 'optionalCall', _159 => _159(thread.id)])
           },
           thread.id
         ))
@@ -5476,7 +5879,7 @@ function Threads({
       threads.slice(0, 5).map((thread) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "button",
         {
-          onClick: () => _optionalChain([onThreadSelect, 'optionalCall', _149 => _149(thread.id)]),
+          onClick: () => _optionalChain([onThreadSelect, 'optionalCall', _160 => _160(thread.id)]),
           className: cn(
             "px-4 py-2 whitespace-nowrap font-medium transition-colors",
             thread.id === currentThreadId ? "border-b-2 border-apteva-500 text-apteva-500" : "text-neutral-600 hover:text-neutral-900"
@@ -5661,7 +6064,7 @@ function TabsLayout({ node, renderNode }) {
 var STRUCTURAL_KEYS = /* @__PURE__ */ new Set(["type", "id", "layout", "props", "children", "actions", "metadata", "isStreaming"]);
 function normalizeNode(n) {
   let node = { ...n };
-  if (node.type === "widget" && _optionalChain([node, 'access', _150 => _150.props, 'optionalAccess', _151 => _151.widget])) {
+  if (node.type === "widget" && _optionalChain([node, 'access', _161 => _161.props, 'optionalAccess', _162 => _162.widget])) {
     node.type = node.props.widget;
     const { widget: _, ...rest } = node.props;
     node.props = rest;
@@ -5799,10 +6202,10 @@ function AutoInterface({
   ].filter(Boolean).join("\n\n");
   const updateInterface = _react.useCallback.call(void 0, (newSpec) => {
     setInterfaceSpec(newSpec);
-    _optionalChain([onInterfaceChange, 'optionalCall', _152 => _152(newSpec)]);
+    _optionalChain([onInterfaceChange, 'optionalCall', _163 => _163(newSpec)]);
   }, [onInterfaceChange]);
   const handleAction = _react.useCallback.call(void 0, (action) => {
-    _optionalChain([onAction, 'optionalCall', _153 => _153(action)]);
+    _optionalChain([onAction, 'optionalCall', _164 => _164(action)]);
     if (chatRef.current) {
       chatRef.current.sendMessage(
         `[Action: ${action.type} on widget ${action.widgetId || "unknown"}. Payload: ${JSON.stringify(action.payload)}]`
@@ -5810,7 +6213,7 @@ function AutoInterface({
     }
   }, [onAction]);
   const handleMessageComplete = _react.useCallback.call(void 0, (result) => {
-    if (!_optionalChain([result, 'optionalAccess', _154 => _154.data])) return;
+    if (!_optionalChain([result, 'optionalAccess', _165 => _165.data])) return;
     const text = typeof result.data === "string" ? result.data : result.data.message || "";
     console.log("[AutoInterface] Chat message complete, text (" + text.length + " chars):", text.substring(0, 300));
     const parsed = parseInterfaceFromText(text);
@@ -5850,7 +6253,7 @@ function AutoInterface({
     }).catch((err) => {
       if (cancelled) return;
       console.error("[AutoInterface] Initial generation failed:", err);
-      _optionalChain([onError, 'optionalCall', _155 => _155(err instanceof Error ? err : new Error(String(err)))]);
+      _optionalChain([onError, 'optionalCall', _166 => _166(err instanceof Error ? err : new Error(String(err)))]);
       setIsGenerating(false);
     });
     return () => {
@@ -6016,7 +6419,7 @@ function useInterfaceAI({
   }
   const sendMessage = _react.useCallback.call(void 0, async (message) => {
     accumulatedTextRef.current = "";
-    _optionalChain([onStreamStart, 'optionalCall', _156 => _156()]);
+    _optionalChain([onStreamStart, 'optionalCall', _167 => _167()]);
     const systemPrompt = [
       generateInterfaceContext(),
       context || ""
@@ -6039,27 +6442,27 @@ function useInterfaceAI({
             accumulatedTextRef.current += chunk.content || "";
             const parsed = parseInterfaceFromText(accumulatedTextRef.current);
             if (parsed) {
-              _optionalChain([onInterface, 'optionalCall', _157 => _157(parsed)]);
+              _optionalChain([onInterface, 'optionalCall', _168 => _168(parsed)]);
             }
             const updates = parseUpdatesFromText(accumulatedTextRef.current);
             if (updates.length > 0) {
-              _optionalChain([onUpdates, 'optionalCall', _158 => _158(updates)]);
+              _optionalChain([onUpdates, 'optionalCall', _169 => _169(updates)]);
             }
           }
         },
         // onComplete
         () => {
-          _optionalChain([onStreamEnd, 'optionalCall', _159 => _159()]);
+          _optionalChain([onStreamEnd, 'optionalCall', _170 => _170()]);
         },
         // onError
         (error) => {
-          _optionalChain([onError, 'optionalCall', _160 => _160(error)]);
-          _optionalChain([onStreamEnd, 'optionalCall', _161 => _161()]);
+          _optionalChain([onError, 'optionalCall', _171 => _171(error)]);
+          _optionalChain([onStreamEnd, 'optionalCall', _172 => _172()]);
         }
       );
     } catch (error) {
-      _optionalChain([onError, 'optionalCall', _162 => _162(error instanceof Error ? error : new Error("Unknown error"))]);
-      _optionalChain([onStreamEnd, 'optionalCall', _163 => _163()]);
+      _optionalChain([onError, 'optionalCall', _173 => _173(error instanceof Error ? error : new Error("Unknown error"))]);
+      _optionalChain([onStreamEnd, 'optionalCall', _174 => _174()]);
     }
   }, [agentId, context, onInterface, onUpdates, onError, onStreamStart, onStreamEnd]);
   return {
@@ -6103,5 +6506,7 @@ function useInterfaceAI({
 
 
 
-exports.AptevaClient = AptevaClient; exports.AutoInterface = AutoInterface; exports.Button = Button; exports.Card = Card; exports.Chat = Chat; exports.Command = Command; exports.InterfaceRenderer = InterfaceRenderer; exports.InterfaceSkeleton = InterfaceSkeleton; exports.Kpi = Kpi; exports.LayoutRenderer = LayoutRenderer; exports.List = List; exports.Prompt = Prompt; exports.Spacer = Spacer; exports.Stream = Stream; exports.TextBlock = TextBlock; exports.Threads = Threads; exports.Widgets = Widgets; exports.applyUpdate = applyUpdate; exports.applyUpdates = applyUpdates; exports.aptevaClient = aptevaClient; exports.cn = cn; exports.containsInterface = containsInterface; exports.convertApiMessages = convertApiMessages; exports.findNode = findNode; exports.generateCompactInterfaceContext = generateCompactInterfaceContext; exports.generateInterfaceContext = generateInterfaceContext; exports.getThemeScript = getThemeScript; exports.mockMessages = mockMessages; exports.mockThreads = mockThreads; exports.mockWidgets = mockWidgets; exports.parseInterfaceFromText = parseInterfaceFromText; exports.parseUpdatesFromText = parseUpdatesFromText; exports.stripInterface = stripInterface; exports.useInterfaceAI = useInterfaceAI; exports.useInterfaceState = useInterfaceState;
+
+
+exports.AptevaClient = AptevaClient; exports.AutoInterface = AutoInterface; exports.Button = Button; exports.Card = Card; exports.Chat = Chat; exports.Command = Command; exports.InterfaceRenderer = InterfaceRenderer; exports.InterfaceSkeleton = InterfaceSkeleton; exports.Kpi = Kpi; exports.LayoutRenderer = LayoutRenderer; exports.List = List; exports.LiveView = LiveView; exports.PersistentWidgetPanel = PersistentWidgetPanel; exports.Prompt = Prompt; exports.Spacer = Spacer; exports.Stream = Stream; exports.TextBlock = TextBlock; exports.Threads = Threads; exports.Widgets = Widgets; exports.applyUpdate = applyUpdate; exports.applyUpdates = applyUpdates; exports.aptevaClient = aptevaClient; exports.cn = cn; exports.containsInterface = containsInterface; exports.convertApiMessages = convertApiMessages; exports.findNode = findNode; exports.generateCompactInterfaceContext = generateCompactInterfaceContext; exports.generateInterfaceContext = generateInterfaceContext; exports.getThemeScript = getThemeScript; exports.mockMessages = mockMessages; exports.mockThreads = mockThreads; exports.mockWidgets = mockWidgets; exports.parseInterfaceFromText = parseInterfaceFromText; exports.parseUpdatesFromText = parseUpdatesFromText; exports.stripInterface = stripInterface; exports.useInterfaceAI = useInterfaceAI; exports.useInterfaceState = useInterfaceState;
 //# sourceMappingURL=index.js.map