@apteva/apteva-kit 0.1.105 → 0.1.107

package/dist/index.mjs

@@ -4,13 +4,13 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
 // src/components/Chat/Chat.tsx
-import { useState as useState6, useEffect as useEffect6, useRef as useRef7, useMemo as useMemo2, forwardRef, useImperativeHandle } from "react";
+import { useState as useState9, useEffect as useEffect7, useRef as useRef9, useMemo as useMemo2, useCallback as useCallback2, forwardRef, useImperativeHandle } from "react";
 
 // src/components/Chat/MessageList.tsx
-import { useEffect as useEffect5, useRef as useRef4 } from "react";
+import { useEffect as useEffect6, useRef as useRef6 } from "react";
 
 // src/components/Chat/Message.tsx
-import { useEffect as useEffect4, useRef as useRef3, useMemo } from "react";
+import { useEffect as useEffect5, useRef as useRef5, useMemo } from "react";
 
 // src/utils/cn.ts
 import { clsx } from "clsx";
@@ -1139,7 +1139,7 @@ function convertApiMessages(apiMessages) {
 }
 
 // src/components/Widgets/Widgets.tsx
-import { useEffect as useEffect3 } from "react";
+import { useEffect as useEffect4 } from "react";
 
 // src/components/Widgets/widget-library/Card.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -1438,14 +1438,19 @@ function Table({ widget, onAction }) {
 }
 
 // src/components/Widgets/widget-library/Form.tsx
-import { useState as useState3 } from "react";
+import { useState as useState3, useRef as useRef3 } from "react";
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function Form({ widget, onAction }) {
   const { title, fields } = widget.props;
+  const fileInputRefs = useRef3({});
   const [formData, setFormData] = useState3(() => {
     const initial = {};
     fields.forEach((field) => {
-      initial[field.name] = field.defaultValue ?? (field.type === "checkbox" ? false : "");
+      if (field.type === "file") {
+        initial[field.name] = [];
+      } else {
+        initial[field.name] = field.defaultValue ?? (field.type === "checkbox" ? false : "");
+      }
     });
     return initial;
   });
@@ -1524,6 +1529,70 @@ function Form({ widget, onAction }) {
           ),
           /* @__PURE__ */ jsx6("span", { className: "!text-neutral-700 dark:!text-neutral-300", children: field.label })
         ] });
+      case "file": {
+        const files = formData[field.name] || [];
+        return /* @__PURE__ */ jsxs4("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx6(
+            "input",
+            {
+              ref: (el) => {
+                fileInputRefs.current[field.name] = el;
+              },
+              type: "file",
+              name: field.name,
+              multiple: 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__ */ jsx6(
+            "button",
+            {
+              type: "button",
+              onClick: () => fileInputRefs.current[field.name]?.click(),
+              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__ */ jsx6("ul", { className: "space-y-1", children: files.map((file, idx) => /* @__PURE__ */ jsxs4(
+            "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__ */ jsxs4("span", { className: "!text-neutral-700 dark:!text-neutral-300 truncate mr-2", children: [
+                  file.name,
+                  /* @__PURE__ */ jsxs4("span", { className: "!text-neutral-400 ml-1", children: [
+                    "(",
+                    (file.size / 1024).toFixed(0),
+                    " KB)"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx6(
+                  "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;
     }
@@ -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__ */ jsxs7("div", { className: "border border-neutral-200 dark:border-neutral-700 rounded-xl bg-white dark:bg-neutral-900 p-5", children: [
+    title && /* @__PURE__ */ jsx9("h3", { className: "!text-base font-semibold !text-neutral-900 dark:!text-white mb-3", children: title }),
     /* @__PURE__ */ jsx9("div", { className: "!text-sm font-medium !text-neutral-500 dark:!text-neutral-400 mb-1", children: label }),
     /* @__PURE__ */ jsxs7("div", { className: "flex items-end gap-2", children: [
       /* @__PURE__ */ jsx9("div", { className: "!text-2xl font-bold !text-neutral-900 dark:!text-white", children: value }),
@@ -1912,48 +1982,165 @@ function Spacer({ widget }) {
   return /* @__PURE__ */ jsx11("div", { className: heightClasses[height] || heightClasses.md });
 }
 
-// src/components/Widgets/WidgetRenderer.tsx
+// src/components/Widgets/widget-library/LiveView.tsx
+import { useState as useState4, useCallback, useRef as useRef4, useEffect as useEffect3 } from "react";
 import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+function LiveView({ widget }) {
+  const { src, title, height, aspectRatio = "16/9", allowFullscreen = true, sandbox, allow, refreshInterval, showToolbar = true } = widget.props;
+  const iframeRef = useRef4(null);
+  const [isLoading, setIsLoading] = useState4(true);
+  const [hasError, setHasError] = useState4(false);
+  const [refreshKey, setRefreshKey] = useState4(0);
+  const handleRefresh = useCallback(() => {
+    setIsLoading(true);
+    setHasError(false);
+    setRefreshKey((k) => k + 1);
+  }, []);
+  const handleFullscreen = useCallback(() => {
+    iframeRef.current?.requestFullscreen?.();
+  }, []);
+  const handleOpenExternal = useCallback(() => {
+    window.open(src, "_blank", "noopener,noreferrer");
+  }, [src]);
+  useEffect3(() => {
+    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__ */ jsxs8("div", { className: "rounded-xl overflow-hidden border border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-900", children: [
+    showToolbar && /* @__PURE__ */ jsxs8("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__ */ jsxs8("div", { className: "flex items-center gap-2 min-w-0", children: [
+        /* @__PURE__ */ jsx12("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__ */ jsx12("span", { className: "text-sm font-medium text-neutral-700 dark:text-neutral-300 truncate", children: title || "Live View" })
+      ] }),
+      /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-1 flex-shrink-0", children: [
+        /* @__PURE__ */ jsx12(
+          "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__ */ jsx12("svg", { className: "w-3.5 h-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx12("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__ */ jsx12(
+          "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__ */ jsx12("svg", { className: "w-3.5 h-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx12("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__ */ jsx12(
+          "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__ */ jsx12("svg", { className: "w-3.5 h-3.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx12("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__ */ jsxs8(
+      "div",
+      {
+        className: "relative bg-white dark:bg-neutral-950",
+        style: useFixedHeight ? { height } : { paddingBottom: aspectMap[aspectRatio] || aspectMap["16/9"] },
+        children: [
+          isLoading && /* @__PURE__ */ jsx12("div", { className: "absolute inset-0 flex items-center justify-center bg-neutral-100 dark:bg-neutral-900 z-10", children: /* @__PURE__ */ jsxs8("div", { className: "flex flex-col items-center gap-2", children: [
+            /* @__PURE__ */ jsx12("div", { className: "w-6 h-6 border-2 border-neutral-300 dark:border-neutral-600 border-t-blue-500 rounded-full animate-spin" }),
+            /* @__PURE__ */ jsx12("span", { className: "text-xs text-neutral-500", children: "Loading..." })
+          ] }) }),
+          hasError && /* @__PURE__ */ jsx12("div", { className: "absolute inset-0 flex items-center justify-center bg-neutral-100 dark:bg-neutral-900 z-10", children: /* @__PURE__ */ jsxs8("div", { className: "flex flex-col items-center gap-2 text-center px-4", children: [
+            /* @__PURE__ */ jsx12("svg", { className: "w-8 h-8 text-neutral-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: /* @__PURE__ */ jsx12("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__ */ jsx12("span", { className: "text-sm text-neutral-500", children: "Failed to load" }),
+            /* @__PURE__ */ jsx12(
+              "button",
+              {
+                onClick: handleRefresh,
+                className: "text-xs text-blue-500 hover:text-blue-600 underline",
+                children: "Try again"
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsx12(
+            "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
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
 function WidgetRenderer({ widget, onAction }) {
   const renderWidget = () => {
     switch (widget.type) {
       case "card":
-        return /* @__PURE__ */ jsx12(Card, { widget, onAction });
+        return /* @__PURE__ */ jsx13(Card, { widget, onAction });
       case "list":
-        return /* @__PURE__ */ jsx12(List, { widget, onAction });
+        return /* @__PURE__ */ jsx13(List, { widget, onAction });
       case "button":
-        return /* @__PURE__ */ jsx12(Button, { widget, onAction });
+        return /* @__PURE__ */ jsx13(Button, { widget, onAction });
       case "button_group":
-        return /* @__PURE__ */ jsx12(ButtonGroup, { widget, onAction });
+        return /* @__PURE__ */ jsx13(ButtonGroup, { widget, onAction });
       case "table":
-        return /* @__PURE__ */ jsx12(Table, { widget, onAction });
+        return /* @__PURE__ */ jsx13(Table, { widget, onAction });
       case "form":
-        return /* @__PURE__ */ jsx12(Form, { widget, onAction });
+        return /* @__PURE__ */ jsx13(Form, { widget, onAction });
       case "image":
-        return /* @__PURE__ */ jsx12(Image, { widget });
+        return /* @__PURE__ */ jsx13(Image, { widget });
       case "flow":
-        return /* @__PURE__ */ jsx12(Flow, { widget });
+        return /* @__PURE__ */ jsx13(Flow, { widget });
       case "kpi":
-        return /* @__PURE__ */ jsx12(Kpi, { widget, onAction });
+        return /* @__PURE__ */ jsx13(Kpi, { widget, onAction });
       case "text_block":
-        return /* @__PURE__ */ jsx12(TextBlock, { widget });
+        return /* @__PURE__ */ jsx13(TextBlock, { widget });
       case "spacer":
-        return /* @__PURE__ */ jsx12(Spacer, { widget });
+        return /* @__PURE__ */ jsx13(Spacer, { widget });
+      case "live_view":
+        return /* @__PURE__ */ jsx13(LiveView, { widget });
       default:
-        return /* @__PURE__ */ jsxs8("div", { className: "p-4 border border-yellow-300 bg-yellow-50 rounded-lg", children: [
-          /* @__PURE__ */ jsxs8("p", { className: "text-sm text-yellow-800", children: [
+        return /* @__PURE__ */ jsxs9("div", { className: "p-4 border border-yellow-300 bg-yellow-50 rounded-lg", children: [
+          /* @__PURE__ */ jsxs9("p", { className: "text-sm text-yellow-800", children: [
             "Unknown widget type: ",
             widget.type
           ] }),
-          /* @__PURE__ */ jsx12("pre", { className: "text-xs mt-2 overflow-auto", children: JSON.stringify(widget, null, 2) })
+          /* @__PURE__ */ jsx13("pre", { className: "text-xs mt-2 overflow-auto", children: JSON.stringify(widget, null, 2) })
         ] });
     }
   };
-  return /* @__PURE__ */ jsx12("div", { className: "apteva-widget", children: renderWidget() });
+  return /* @__PURE__ */ jsx13("div", { className: "apteva-widget", children: renderWidget() });
 }
 
 // src/components/Widgets/Widgets.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 function Widgets({
   widgets,
   onAction,
@@ -1963,7 +2150,7 @@ function Widgets({
   columns = 3,
   className
 }) {
-  useEffect3(() => {
+  useEffect4(() => {
     widgets.forEach((widget) => {
       onWidgetMount?.(widget.id);
     });
@@ -1978,85 +2165,85 @@ function Widgets({
     normal: "gap-4",
     loose: "gap-6"
   };
-  return /* @__PURE__ */ jsx13("div", { className: cn(layoutClasses[layout], spacingClasses[spacing], className), children: widgets.map((widget) => /* @__PURE__ */ jsx13(WidgetRenderer, { widget, onAction }, widget.id)) });
+  return /* @__PURE__ */ jsx14("div", { className: cn(layoutClasses[layout], spacingClasses[spacing], className), children: widgets.map((widget) => /* @__PURE__ */ jsx14(WidgetRenderer, { widget, onAction }, widget.id)) });
 }
 
 // src/components/Widgets/WidgetSkeleton.tsx
-import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 function WidgetSkeleton({ type, className }) {
   switch (type) {
     case "card":
-      return /* @__PURE__ */ jsx14("div", { className: cn("apteva-widget-skeleton animate-pulse rounded-lg border border-neutral-200 dark:border-neutral-800 overflow-hidden", className), children: /* @__PURE__ */ jsxs9("div", { className: "p-4 space-y-3", children: [
-        /* @__PURE__ */ jsx14("div", { className: "h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-3/4" }),
-        /* @__PURE__ */ jsx14("div", { className: "h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-full" }),
-        /* @__PURE__ */ jsx14("div", { className: "h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-5/6" })
+      return /* @__PURE__ */ jsx15("div", { className: cn("apteva-widget-skeleton animate-pulse rounded-lg border border-neutral-200 dark:border-neutral-800 overflow-hidden", className), children: /* @__PURE__ */ jsxs10("div", { className: "p-4 space-y-3", children: [
+        /* @__PURE__ */ jsx15("div", { className: "h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-3/4" }),
+        /* @__PURE__ */ jsx15("div", { className: "h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-full" }),
+        /* @__PURE__ */ jsx15("div", { className: "h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-5/6" })
       ] }) });
     case "list":
-      return /* @__PURE__ */ jsx14("div", { className: cn("apteva-widget-skeleton animate-pulse space-y-2", className), children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-3 p-3 rounded-lg border border-neutral-200 dark:border-neutral-800", children: [
-        /* @__PURE__ */ jsx14("div", { className: "w-10 h-10 bg-neutral-200 dark:bg-neutral-700 rounded-full flex-shrink-0" }),
-        /* @__PURE__ */ jsxs9("div", { className: "flex-1 space-y-2", children: [
-          /* @__PURE__ */ jsx14("div", { className: "h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-1/2" }),
-          /* @__PURE__ */ jsx14("div", { className: "h-2 bg-neutral-200 dark:bg-neutral-700 rounded w-3/4" })
+      return /* @__PURE__ */ jsx15("div", { className: cn("apteva-widget-skeleton animate-pulse space-y-2", className), children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-3 p-3 rounded-lg border border-neutral-200 dark:border-neutral-800", children: [
+        /* @__PURE__ */ jsx15("div", { className: "w-10 h-10 bg-neutral-200 dark:bg-neutral-700 rounded-full flex-shrink-0" }),
+        /* @__PURE__ */ jsxs10("div", { className: "flex-1 space-y-2", children: [
+          /* @__PURE__ */ jsx15("div", { className: "h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-1/2" }),
+          /* @__PURE__ */ jsx15("div", { className: "h-2 bg-neutral-200 dark:bg-neutral-700 rounded w-3/4" })
         ] })
       ] }, i)) });
     case "button_group":
-      return /* @__PURE__ */ jsxs9("div", { className: cn("apteva-widget-skeleton animate-pulse flex gap-2", className), children: [
-        /* @__PURE__ */ jsx14("div", { className: "h-9 bg-neutral-200 dark:bg-neutral-700 rounded-lg w-20" }),
-        /* @__PURE__ */ jsx14("div", { className: "h-9 bg-neutral-200 dark:bg-neutral-700 rounded-lg w-20" }),
-        /* @__PURE__ */ jsx14("div", { className: "h-9 bg-neutral-200 dark:bg-neutral-700 rounded-lg w-20" })
+      return /* @__PURE__ */ jsxs10("div", { className: cn("apteva-widget-skeleton animate-pulse flex gap-2", className), children: [
+        /* @__PURE__ */ jsx15("div", { className: "h-9 bg-neutral-200 dark:bg-neutral-700 rounded-lg w-20" }),
+        /* @__PURE__ */ jsx15("div", { className: "h-9 bg-neutral-200 dark:bg-neutral-700 rounded-lg w-20" }),
+        /* @__PURE__ */ jsx15("div", { className: "h-9 bg-neutral-200 dark:bg-neutral-700 rounded-lg w-20" })
       ] });
     case "form":
-      return /* @__PURE__ */ jsxs9("div", { className: cn("apteva-widget-skeleton animate-pulse rounded-lg border border-neutral-200 dark:border-neutral-800 p-4 space-y-4", className), children: [
-        /* @__PURE__ */ jsx14("div", { className: "h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-1/3" }),
-        /* @__PURE__ */ jsxs9("div", { className: "space-y-3", children: [
-          /* @__PURE__ */ jsx14("div", { className: "h-10 bg-neutral-200 dark:bg-neutral-700 rounded" }),
-          /* @__PURE__ */ jsx14("div", { className: "h-10 bg-neutral-200 dark:bg-neutral-700 rounded" })
+      return /* @__PURE__ */ jsxs10("div", { className: cn("apteva-widget-skeleton animate-pulse rounded-lg border border-neutral-200 dark:border-neutral-800 p-4 space-y-4", className), children: [
+        /* @__PURE__ */ jsx15("div", { className: "h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-1/3" }),
+        /* @__PURE__ */ jsxs10("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsx15("div", { className: "h-10 bg-neutral-200 dark:bg-neutral-700 rounded" }),
+          /* @__PURE__ */ jsx15("div", { className: "h-10 bg-neutral-200 dark:bg-neutral-700 rounded" })
         ] }),
-        /* @__PURE__ */ jsx14("div", { className: "h-9 bg-neutral-200 dark:bg-neutral-700 rounded w-24" })
+        /* @__PURE__ */ jsx15("div", { className: "h-9 bg-neutral-200 dark:bg-neutral-700 rounded w-24" })
       ] });
     case "chart":
-      return /* @__PURE__ */ jsxs9("div", { className: cn("apteva-widget-skeleton animate-pulse rounded-lg border border-neutral-200 dark:border-neutral-800 p-4", className), children: [
-        /* @__PURE__ */ jsx14("div", { className: "h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-1/4 mb-4" }),
-        /* @__PURE__ */ jsxs9("div", { className: "flex items-end gap-2 h-32", children: [
-          /* @__PURE__ */ jsx14("div", { className: "flex-1 bg-neutral-200 dark:bg-neutral-700 rounded-t h-1/2" }),
-          /* @__PURE__ */ jsx14("div", { className: "flex-1 bg-neutral-200 dark:bg-neutral-700 rounded-t h-3/4" }),
-          /* @__PURE__ */ jsx14("div", { className: "flex-1 bg-neutral-200 dark:bg-neutral-700 rounded-t h-1/3" }),
-          /* @__PURE__ */ jsx14("div", { className: "flex-1 bg-neutral-200 dark:bg-neutral-700 rounded-t h-full" }),
-          /* @__PURE__ */ jsx14("div", { className: "flex-1 bg-neutral-200 dark:bg-neutral-700 rounded-t h-2/3" })
+      return /* @__PURE__ */ jsxs10("div", { className: cn("apteva-widget-skeleton animate-pulse rounded-lg border border-neutral-200 dark:border-neutral-800 p-4", className), children: [
+        /* @__PURE__ */ jsx15("div", { className: "h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-1/4 mb-4" }),
+        /* @__PURE__ */ jsxs10("div", { className: "flex items-end gap-2 h-32", children: [
+          /* @__PURE__ */ jsx15("div", { className: "flex-1 bg-neutral-200 dark:bg-neutral-700 rounded-t h-1/2" }),
+          /* @__PURE__ */ jsx15("div", { className: "flex-1 bg-neutral-200 dark:bg-neutral-700 rounded-t h-3/4" }),
+          /* @__PURE__ */ jsx15("div", { className: "flex-1 bg-neutral-200 dark:bg-neutral-700 rounded-t h-1/3" }),
+          /* @__PURE__ */ jsx15("div", { className: "flex-1 bg-neutral-200 dark:bg-neutral-700 rounded-t h-full" }),
+          /* @__PURE__ */ jsx15("div", { className: "flex-1 bg-neutral-200 dark:bg-neutral-700 rounded-t h-2/3" })
         ] })
       ] });
     case "image":
-      return /* @__PURE__ */ jsx14("div", { className: cn("apteva-widget-skeleton animate-pulse", className), children: /* @__PURE__ */ jsx14("div", { className: "aspect-video bg-neutral-200 dark:bg-neutral-700 rounded-lg" }) });
+      return /* @__PURE__ */ jsx15("div", { className: cn("apteva-widget-skeleton animate-pulse", className), children: /* @__PURE__ */ jsx15("div", { className: "aspect-video bg-neutral-200 dark:bg-neutral-700 rounded-lg" }) });
     case "gallery":
-      return /* @__PURE__ */ jsx14("div", { className: cn("apteva-widget-skeleton animate-pulse grid grid-cols-3 gap-2", className), children: [1, 2, 3].map((i) => /* @__PURE__ */ jsx14("div", { className: "aspect-square bg-neutral-200 dark:bg-neutral-700 rounded-lg" }, i)) });
+      return /* @__PURE__ */ jsx15("div", { className: cn("apteva-widget-skeleton animate-pulse grid grid-cols-3 gap-2", className), children: [1, 2, 3].map((i) => /* @__PURE__ */ jsx15("div", { className: "aspect-square bg-neutral-200 dark:bg-neutral-700 rounded-lg" }, i)) });
     case "map":
-      return /* @__PURE__ */ jsx14("div", { className: cn("apteva-widget-skeleton animate-pulse", className), children: /* @__PURE__ */ jsx14("div", { className: "h-48 bg-neutral-200 dark:bg-neutral-700 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsxs9("svg", { className: "w-8 h-8 text-neutral-400 dark:text-neutral-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: [
-        /* @__PURE__ */ jsx14("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" }),
-        /* @__PURE__ */ jsx14("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z" })
+      return /* @__PURE__ */ jsx15("div", { className: cn("apteva-widget-skeleton animate-pulse", className), children: /* @__PURE__ */ jsx15("div", { className: "h-48 bg-neutral-200 dark:bg-neutral-700 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsxs10("svg", { className: "w-8 h-8 text-neutral-400 dark:text-neutral-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: [
+        /* @__PURE__ */ jsx15("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" }),
+        /* @__PURE__ */ jsx15("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z" })
       ] }) }) });
     case "table":
-      return /* @__PURE__ */ jsxs9("div", { className: cn("apteva-widget-skeleton animate-pulse rounded-lg border border-neutral-200 dark:border-neutral-800 overflow-hidden", className), children: [
-        /* @__PURE__ */ jsxs9("div", { className: "flex bg-neutral-100 dark:bg-neutral-800 border-b border-neutral-200 dark:border-neutral-700", children: [
-          /* @__PURE__ */ jsx14("div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ jsx14("div", { className: "h-3 bg-neutral-300 dark:bg-neutral-600 rounded w-16" }) }),
-          /* @__PURE__ */ jsx14("div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ jsx14("div", { className: "h-3 bg-neutral-300 dark:bg-neutral-600 rounded w-20" }) }),
-          /* @__PURE__ */ jsx14("div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ jsx14("div", { className: "h-3 bg-neutral-300 dark:bg-neutral-600 rounded w-14" }) })
+      return /* @__PURE__ */ jsxs10("div", { className: cn("apteva-widget-skeleton animate-pulse rounded-lg border border-neutral-200 dark:border-neutral-800 overflow-hidden", className), children: [
+        /* @__PURE__ */ jsxs10("div", { className: "flex bg-neutral-100 dark:bg-neutral-800 border-b border-neutral-200 dark:border-neutral-700", children: [
+          /* @__PURE__ */ jsx15("div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ jsx15("div", { className: "h-3 bg-neutral-300 dark:bg-neutral-600 rounded w-16" }) }),
+          /* @__PURE__ */ jsx15("div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ jsx15("div", { className: "h-3 bg-neutral-300 dark:bg-neutral-600 rounded w-20" }) }),
+          /* @__PURE__ */ jsx15("div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ jsx15("div", { className: "h-3 bg-neutral-300 dark:bg-neutral-600 rounded w-14" }) })
         ] }),
-        [1, 2, 3].map((i) => /* @__PURE__ */ jsxs9("div", { className: "flex border-b border-neutral-200 dark:border-neutral-800 last:border-b-0", children: [
-          /* @__PURE__ */ jsx14("div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ jsx14("div", { className: "h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-24" }) }),
-          /* @__PURE__ */ jsx14("div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ jsx14("div", { className: "h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-16" }) }),
-          /* @__PURE__ */ jsx14("div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ jsx14("div", { className: "h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-20" }) })
+        [1, 2, 3].map((i) => /* @__PURE__ */ jsxs10("div", { className: "flex border-b border-neutral-200 dark:border-neutral-800 last:border-b-0", children: [
+          /* @__PURE__ */ jsx15("div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ jsx15("div", { className: "h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-24" }) }),
+          /* @__PURE__ */ jsx15("div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ jsx15("div", { className: "h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-16" }) }),
+          /* @__PURE__ */ jsx15("div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ jsx15("div", { className: "h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-20" }) })
         ] }, i))
       ] });
     default:
-      return /* @__PURE__ */ jsxs9("div", { className: cn("apteva-widget-skeleton animate-pulse rounded-lg border border-neutral-200 dark:border-neutral-800 p-4", className), children: [
-        /* @__PURE__ */ jsx14("div", { className: "h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-1/2 mb-2" }),
-        /* @__PURE__ */ jsx14("div", { className: "h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-full" })
+      return /* @__PURE__ */ jsxs10("div", { className: cn("apteva-widget-skeleton animate-pulse rounded-lg border border-neutral-200 dark:border-neutral-800 p-4", className), children: [
+        /* @__PURE__ */ jsx15("div", { className: "h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-1/2 mb-2" }),
+        /* @__PURE__ */ jsx15("div", { className: "h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-full" })
       ] });
   }
 }
 
 // src/components/Chat/MarkdownContent.tsx
-import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 function isImageUrl(url) {
   const imageExtensions = /\.(jpg|jpeg|png|gif|webp|svg|bmp|ico)(\?.*)?$/i;
   return imageExtensions.test(url);
@@ -2075,7 +2262,7 @@ function parseInlineMarkdown(text, keyPrefix = "") {
       const alt = match[1] || "";
       const src = match[2];
       result.push(
-        /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx16(
           "img",
           {
             src,
@@ -2090,7 +2277,7 @@ function parseInlineMarkdown(text, keyPrefix = "") {
       const href = match[4];
       if (isImageUrl(href)) {
         result.push(
-          /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx16(
             "img",
             {
               src: href,
@@ -2102,7 +2289,7 @@ function parseInlineMarkdown(text, keyPrefix = "") {
         );
       } else {
         result.push(
-          /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx16(
             "a",
             {
               href,
@@ -2116,10 +2303,10 @@ function parseInlineMarkdown(text, keyPrefix = "") {
         );
       }
     } else if (match[5] !== void 0) {
-      result.push(/* @__PURE__ */ jsx15("strong", { children: match[6] }, `${keyPrefix}b${key++}`));
+      result.push(/* @__PURE__ */ jsx16("strong", { children: match[6] }, `${keyPrefix}b${key++}`));
     } else if (match[7] !== void 0) {
       result.push(
-        /* @__PURE__ */ jsx15("code", { className: "apteva-md-inline-code", children: match[7] }, `${keyPrefix}code${key++}`)
+        /* @__PURE__ */ jsx16("code", { className: "apteva-md-inline-code", children: match[7] }, `${keyPrefix}code${key++}`)
       );
     }
     lastIndex = match.index + match[0].length;
@@ -2139,7 +2326,7 @@ function parseMarkdown(content) {
     const h2Match = line.match(/^##\s+(.*)$/);
     if (h2Match) {
       result.push(
-        /* @__PURE__ */ jsx15("h2", { className: "apteva-md-h2", children: parseInlineMarkdown(h2Match[1], `${key}`) }, `h2${key++}`)
+        /* @__PURE__ */ jsx16("h2", { className: "apteva-md-h2", children: parseInlineMarkdown(h2Match[1], `${key}`) }, `h2${key++}`)
       );
       i++;
       continue;
@@ -2147,7 +2334,7 @@ function parseMarkdown(content) {
     const h3Match = line.match(/^###\s+(.*)$/);
     if (h3Match) {
       result.push(
-        /* @__PURE__ */ jsx15("h3", { className: "apteva-md-h3", children: parseInlineMarkdown(h3Match[1], `${key}`) }, `h3${key++}`)
+        /* @__PURE__ */ jsx16("h3", { className: "apteva-md-h3", children: parseInlineMarkdown(h3Match[1], `${key}`) }, `h3${key++}`)
       );
       i++;
       continue;
@@ -2160,7 +2347,7 @@ function parseMarkdown(content) {
         const itemMatch = lines[i].match(/^(\s*)([-*+])\s+(.*)$/);
         if (itemMatch && itemMatch[1].length === indent) {
           listItems.push(
-            /* @__PURE__ */ jsx15("li", { className: "apteva-md-li", children: parseInlineMarkdown(itemMatch[3], `${key}`) }, `li${key++}`)
+            /* @__PURE__ */ jsx16("li", { className: "apteva-md-li", children: parseInlineMarkdown(itemMatch[3], `${key}`) }, `li${key++}`)
           );
           i++;
         } else {
@@ -2168,7 +2355,7 @@ function parseMarkdown(content) {
         }
       }
       result.push(
-        /* @__PURE__ */ jsx15("ul", { className: "apteva-md-ul", children: listItems }, `ul${key++}`)
+        /* @__PURE__ */ jsx16("ul", { className: "apteva-md-ul", children: listItems }, `ul${key++}`)
       );
       continue;
     }
@@ -2180,7 +2367,7 @@ function parseMarkdown(content) {
         const itemMatch = lines[i].match(/^(\s*)(\d+)\.\s+(.*)$/);
         if (itemMatch && itemMatch[1].length === indent) {
           listItems.push(
-            /* @__PURE__ */ jsx15("li", { className: "apteva-md-li", children: parseInlineMarkdown(itemMatch[3], `${key}`) }, `li${key++}`)
+            /* @__PURE__ */ jsx16("li", { className: "apteva-md-li", children: parseInlineMarkdown(itemMatch[3], `${key}`) }, `li${key++}`)
           );
           i++;
         } else {
@@ -2188,7 +2375,7 @@ function parseMarkdown(content) {
         }
       }
       result.push(
-        /* @__PURE__ */ jsx15("ol", { className: "apteva-md-ol", children: listItems }, `ol${key++}`)
+        /* @__PURE__ */ jsx16("ol", { className: "apteva-md-ol", children: listItems }, `ol${key++}`)
       );
       continue;
     }
@@ -2211,19 +2398,19 @@ function parseMarkdown(content) {
           }
         }
         result.push(
-          /* @__PURE__ */ jsx15("div", { className: "apteva-md-table-wrapper", children: /* @__PURE__ */ jsxs10("table", { className: "apteva-md-table", children: [
-            /* @__PURE__ */ jsx15("thead", { children: /* @__PURE__ */ jsx15("tr", { children: headerCells.map((cell, idx) => /* @__PURE__ */ jsx15("th", { className: "apteva-md-th", children: parseInlineMarkdown(cell, `th${key}${idx}`) }, `th${idx}`)) }) }),
-            /* @__PURE__ */ jsx15("tbody", { children: bodyRows.map((row, rowIdx) => /* @__PURE__ */ jsx15("tr", { children: row.map((cell, cellIdx) => /* @__PURE__ */ jsx15("td", { className: "apteva-md-td", children: parseInlineMarkdown(cell, `td${key}${rowIdx}${cellIdx}`) }, `td${cellIdx}`)) }, `tr${rowIdx}`)) })
+          /* @__PURE__ */ jsx16("div", { className: "apteva-md-table-wrapper", children: /* @__PURE__ */ jsxs11("table", { className: "apteva-md-table", children: [
+            /* @__PURE__ */ jsx16("thead", { children: /* @__PURE__ */ jsx16("tr", { children: headerCells.map((cell, idx) => /* @__PURE__ */ jsx16("th", { className: "apteva-md-th", children: parseInlineMarkdown(cell, `th${key}${idx}`) }, `th${idx}`)) }) }),
+            /* @__PURE__ */ jsx16("tbody", { children: bodyRows.map((row, rowIdx) => /* @__PURE__ */ jsx16("tr", { children: row.map((cell, cellIdx) => /* @__PURE__ */ jsx16("td", { className: "apteva-md-td", children: parseInlineMarkdown(cell, `td${key}${rowIdx}${cellIdx}`) }, `td${cellIdx}`)) }, `tr${rowIdx}`)) })
           ] }) }, `table-wrapper${key++}`)
         );
         continue;
       }
     }
     if (line === "") {
-      result.push(/* @__PURE__ */ jsx15("br", {}, `br${key++}`));
+      result.push(/* @__PURE__ */ jsx16("br", {}, `br${key++}`));
     } else {
       result.push(
-        /* @__PURE__ */ jsxs10("span", { children: [
+        /* @__PURE__ */ jsxs11("span", { children: [
           parseInlineMarkdown(line, `${key}`),
           i < lines.length - 1 ? "\n" : ""
         ] }, `p${key++}`)
@@ -2234,67 +2421,151 @@ function parseMarkdown(content) {
   return result;
 }
 function MarkdownContent({ content, className = "" }) {
-  return /* @__PURE__ */ jsx15("div", { className: `apteva-md ${className}`, children: parseMarkdown(content) });
+  return /* @__PURE__ */ jsx16("div", { className: `apteva-md ${className}`, children: parseMarkdown(content) });
 }
 
 // src/components/Chat/ToolCall.tsx
-import { Fragment as Fragment2, jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
-function ToolCall({ name, status, isReceiving = false, inputLength = 0, streamOutput }) {
+import { Fragment as Fragment2, jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+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__ */ jsxs12("div", { className: "apteva-tool-inline", children: [
+      /* @__PURE__ */ jsx17("div", { className: "apteva-tool-inline-line" }),
+      /* @__PURE__ */ jsxs12("div", { className: "apteva-tool-inline-content", children: [
+        status === "running" || status === "preparing" ? /* @__PURE__ */ jsxs12("svg", { className: "apteva-tool-inline-icon apteva-tool-icon-spin", width: "14", height: "14", fill: "none", viewBox: "0 0 24 24", children: [
+          /* @__PURE__ */ jsx17("circle", { className: "apteva-tool-spinner-track", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+          /* @__PURE__ */ jsx17("path", { className: "apteva-tool-spinner-fill", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+        ] }) : /* @__PURE__ */ jsx17("svg", { className: "apteva-tool-inline-icon", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx17("path", { d: "M13 2L3 14h9l-1 8 10-12h-9l1-8z", fill: "currentColor" }) }),
+        /* @__PURE__ */ jsx17("span", { className: "apteva-tool-inline-text", children: statusText })
+      ] }),
+      /* @__PURE__ */ jsx17("div", { className: "apteva-tool-inline-line" })
+    ] });
+  }
   if (status === "preparing") {
-    return /* @__PURE__ */ jsxs11("div", { className: "apteva-tool-card apteva-tool-card-preparing", children: [
-      /* @__PURE__ */ jsxs11("svg", { className: "apteva-tool-icon apteva-tool-icon-spin", fill: "none", viewBox: "0 0 24 24", children: [
-        /* @__PURE__ */ jsx16("circle", { className: "apteva-tool-spinner-track", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-        /* @__PURE__ */ jsx16("path", { className: "apteva-tool-spinner-fill", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+    return /* @__PURE__ */ jsxs12("div", { className: "apteva-tool-card apteva-tool-card-preparing", children: [
+      /* @__PURE__ */ jsxs12("svg", { className: "apteva-tool-icon apteva-tool-icon-spin", fill: "none", viewBox: "0 0 24 24", children: [
+        /* @__PURE__ */ jsx17("circle", { className: "apteva-tool-spinner-track", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+        /* @__PURE__ */ jsx17("path", { className: "apteva-tool-spinner-fill", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
       ] }),
-      /* @__PURE__ */ jsxs11("span", { className: "apteva-tool-label", children: [
-        /* @__PURE__ */ jsx16("strong", { children: name }),
-        /* @__PURE__ */ jsx16("span", { className: "apteva-tool-status-text", children: " preparing..." })
+      /* @__PURE__ */ jsxs12("span", { className: "apteva-tool-label", children: [
+        /* @__PURE__ */ jsx17("strong", { children: name }),
+        /* @__PURE__ */ jsx17("span", { className: "apteva-tool-status-text", children: " preparing..." })
       ] })
     ] });
   }
   if (status === "running") {
-    return /* @__PURE__ */ jsxs11("div", { className: "apteva-tool-card apteva-tool-card-running", children: [
-      /* @__PURE__ */ jsxs11("svg", { className: "apteva-tool-icon apteva-tool-icon-spin", fill: "none", viewBox: "0 0 24 24", children: [
-        /* @__PURE__ */ jsx16("circle", { className: "apteva-tool-spinner-track", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-        /* @__PURE__ */ jsx16("path", { className: "apteva-tool-spinner-fill", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+    return /* @__PURE__ */ jsxs12("div", { className: "apteva-tool-card apteva-tool-card-running", children: [
+      /* @__PURE__ */ jsxs12("svg", { className: "apteva-tool-icon apteva-tool-icon-spin", fill: "none", viewBox: "0 0 24 24", children: [
+        /* @__PURE__ */ jsx17("circle", { className: "apteva-tool-spinner-track", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+        /* @__PURE__ */ jsx17("path", { className: "apteva-tool-spinner-fill", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
       ] }),
-      /* @__PURE__ */ jsxs11("span", { className: "apteva-tool-label", children: [
-        /* @__PURE__ */ jsx16("strong", { children: name }),
-        streamOutput ? /* @__PURE__ */ jsx16("span", { className: "apteva-tool-stream-separator", children: " \xB7 " }) : null,
-        streamOutput ? /* @__PURE__ */ jsx16("span", { className: "apteva-tool-stream-output", children: streamOutput }) : /* @__PURE__ */ jsxs11(Fragment2, { children: [
-          /* @__PURE__ */ jsx16("span", { className: "apteva-tool-status-text", children: " running" }),
-          /* @__PURE__ */ jsxs11("span", { className: "apteva-tool-dots", children: [
-            /* @__PURE__ */ jsx16("span", { children: "." }),
-            /* @__PURE__ */ jsx16("span", { children: "." }),
-            /* @__PURE__ */ jsx16("span", { children: "." })
+      /* @__PURE__ */ jsxs12("span", { className: "apteva-tool-label", children: [
+        /* @__PURE__ */ jsx17("strong", { children: name }),
+        streamOutput ? /* @__PURE__ */ jsx17("span", { className: "apteva-tool-stream-separator", children: " \xB7 " }) : null,
+        streamOutput ? /* @__PURE__ */ jsx17("span", { className: "apteva-tool-stream-output", children: streamOutput }) : /* @__PURE__ */ jsxs12(Fragment2, { children: [
+          /* @__PURE__ */ jsx17("span", { className: "apteva-tool-status-text", children: " running" }),
+          /* @__PURE__ */ jsxs12("span", { className: "apteva-tool-dots", children: [
+            /* @__PURE__ */ jsx17("span", { children: "." }),
+            /* @__PURE__ */ jsx17("span", { children: "." }),
+            /* @__PURE__ */ jsx17("span", { children: "." })
           ] })
         ] })
       ] })
     ] });
   }
   if (status === "completed") {
-    return /* @__PURE__ */ jsxs11("div", { className: "apteva-tool-card apteva-tool-card-completed", children: [
-      /* @__PURE__ */ jsx16("svg", { className: "apteva-tool-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx16("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
-      /* @__PURE__ */ jsx16("span", { className: "apteva-tool-label", children: name })
+    return /* @__PURE__ */ jsxs12("div", { className: "apteva-tool-card apteva-tool-card-completed", children: [
+      /* @__PURE__ */ jsx17("svg", { className: "apteva-tool-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx17("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
+      /* @__PURE__ */ jsx17("span", { className: "apteva-tool-label", children: name })
     ] });
   }
-  return /* @__PURE__ */ jsxs11("div", { className: "apteva-tool-card apteva-tool-card-error", children: [
-    /* @__PURE__ */ jsx16("svg", { className: "apteva-tool-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx16("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }),
-    /* @__PURE__ */ jsxs11("span", { className: "apteva-tool-label", children: [
+  return /* @__PURE__ */ jsxs12("div", { className: "apteva-tool-card apteva-tool-card-error", children: [
+    /* @__PURE__ */ jsx17("svg", { className: "apteva-tool-icon", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx17("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }),
+    /* @__PURE__ */ jsxs12("span", { className: "apteva-tool-label", children: [
       name,
       " failed"
     ] })
   ] });
 }
 
+// src/components/Chat/ToolCallGroup.tsx
+import { useState as useState5 } from "react";
+import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+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] = useState5(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__ */ jsxs13("div", { className: cardClass, children: [
+    /* @__PURE__ */ jsxs13(
+      "button",
+      {
+        className: "apteva-tool-group-header",
+        onClick: () => setExpanded(!expanded),
+        children: [
+          /* @__PURE__ */ jsxs13("div", { className: "apteva-tool-group-header-left", children: [
+            allDone ? /* @__PURE__ */ jsx18("svg", { className: "apteva-tool-group-icon", width: "14", height: "14", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx18("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }) : /* @__PURE__ */ jsxs13("svg", { className: "apteva-tool-group-icon apteva-tool-icon-spin", width: "14", height: "14", fill: "none", viewBox: "0 0 24 24", children: [
+              /* @__PURE__ */ jsx18("circle", { className: "apteva-tool-spinner-track", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+              /* @__PURE__ */ jsx18("path", { className: "apteva-tool-spinner-fill", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })
+            ] }),
+            /* @__PURE__ */ jsx18("span", { className: "apteva-tool-group-status", children: statusText })
+          ] }),
+          /* @__PURE__ */ jsx18(
+            "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__ */ jsx18("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
+            }
+          )
+        ]
+      }
+    ),
+    !isExpanded && activeStreamTool && /* @__PURE__ */ jsxs13("div", { className: "apteva-tool-group-stream", children: [
+      /* @__PURE__ */ jsxs13("span", { className: "apteva-tool-group-stream-name", children: [
+        activeStreamTool.name,
+        ":"
+      ] }),
+      /* @__PURE__ */ jsx18("span", { className: "apteva-tool-group-stream-text", children: activeStreamTool.streamOutput })
+    ] }),
+    isExpanded && /* @__PURE__ */ jsx18("div", { className: "apteva-tool-group-list", children: tools.map((tool) => /* @__PURE__ */ jsxs13("div", { className: "apteva-tool-group-item", children: [
+      tool.status === "completed" ? /* @__PURE__ */ jsx18("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__ */ jsx18("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M5 13l4 4L19 7" }) }) : tool.status === "error" ? /* @__PURE__ */ jsx18("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__ */ jsx18("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 3, d: "M6 18L18 6M6 6l12 12" }) }) : /* @__PURE__ */ jsx18("div", { className: "apteva-tool-group-item-icon apteva-tool-group-item-spinner" }),
+      /* @__PURE__ */ jsx18("span", { className: "apteva-tool-group-item-name", children: tool.name }),
+      tool.streamOutput && tool.status === "running" && /* @__PURE__ */ jsx18("span", { className: "apteva-tool-group-item-stream", children: tool.streamOutput })
+    ] }, tool.id)) })
+  ] });
+}
+
+// src/components/Chat/PersistentWidgetRef.tsx
+import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
+function PersistentWidgetRef({ widget }) {
+  const title = widget.props.title || widget.type.replace(/_/g, " ");
+  return /* @__PURE__ */ jsxs14("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__ */ jsx19("div", { className: "w-2 h-2 rounded-full bg-emerald-500 animate-pulse flex-shrink-0" }),
+    /* @__PURE__ */ jsx19("span", { className: "text-neutral-600 dark:text-neutral-400 capitalize", children: title }),
+    /* @__PURE__ */ jsx19("span", { className: "text-neutral-400 dark:text-neutral-500 text-xs ml-auto", children: "pinned above" })
+  ] });
+}
+
 // src/components/Chat/Message.tsx
-import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
-function Message({ message, onAction, enableWidgets, onWidgetRender }) {
+import { Fragment as Fragment3, jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
+function Message({ message, onAction, enableWidgets, onWidgetRender, persistentWidgetIds, toolCallStyle = "card" }) {
   const isUser = message.role === "user";
   const contentSegments = message.metadata?.content_segments;
   const isStreaming = message.metadata?.isStreaming === true;
   const hasContent = message.content || contentSegments && contentSegments.length > 0;
-  const reportedWidgetsRef = useRef3(/* @__PURE__ */ new Set());
+  const reportedWidgetsRef = useRef5(/* @__PURE__ */ new Set());
   const parsedWidgets = useMemo(() => {
     if (!enableWidgets || isUser || !message.content) {
       return [];
@@ -2302,7 +2573,7 @@ function Message({ message, onAction, enableWidgets, onWidgetRender }) {
     const parsed = parseWidgetsFromText(message.content);
     return parsed.segments.filter((seg) => seg.type === "widget" && !!seg.widget).map((seg) => seg.widget);
   }, [enableWidgets, isUser, message.content]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (onWidgetRender && message.widgets) {
       for (const widget of message.widgets) {
         if (!reportedWidgetsRef.current.has(widget.id)) {
@@ -2312,7 +2583,7 @@ function Message({ message, onAction, enableWidgets, onWidgetRender }) {
       }
     }
   }, [message.widgets, onWidgetRender]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (onWidgetRender && parsedWidgets.length > 0) {
       for (const widget of parsedWidgets) {
         if (!reportedWidgetsRef.current.has(widget.id)) {
@@ -2324,14 +2595,14 @@ function Message({ message, onAction, enableWidgets, onWidgetRender }) {
   }, [parsedWidgets, onWidgetRender]);
   const renderTextContent = (text) => {
     if (!enableWidgets || isUser) {
-      return /* @__PURE__ */ jsx17(MarkdownContent, { content: text });
+      return /* @__PURE__ */ jsx20(MarkdownContent, { content: text });
     }
     const parsed = parseWidgetsFromText(text);
     const cleanedText = parsed.segments.filter((seg) => seg.type === "text" && seg.content).map((seg) => seg.content).join("");
     if (!cleanedText.trim()) {
       return null;
     }
-    return /* @__PURE__ */ jsx17(MarkdownContent, { content: cleanedText });
+    return /* @__PURE__ */ jsx20(MarkdownContent, { content: cleanedText });
   };
   const renderContentWithWidgets = () => {
     if (!enableWidgets || isUser || !message.content) {
@@ -2346,28 +2617,28 @@ function Message({ message, onAction, enableWidgets, onWidgetRender }) {
       } else if (segment.type === "widget" && segment.widget) {
         if (textBuffer.trim()) {
           elements.push(
-            /* @__PURE__ */ jsx17("div", { className: "apteva-message-bubble apteva-message-assistant", children: /* @__PURE__ */ jsx17("div", { className: "apteva-message-content-assistant", children: /* @__PURE__ */ jsx17(MarkdownContent, { content: textBuffer }) }) }, `text-${index}`)
+            /* @__PURE__ */ jsx20("div", { className: "apteva-message-bubble apteva-message-assistant", children: /* @__PURE__ */ jsx20("div", { className: "apteva-message-content-assistant", children: /* @__PURE__ */ jsx20(MarkdownContent, { content: textBuffer }) }) }, `text-${index}`)
           );
           textBuffer = "";
         }
         elements.push(
-          /* @__PURE__ */ jsx17("div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ jsx17(WidgetRenderer, { widget: segment.widget, onAction }) }, `widget-${index}`)
+          /* @__PURE__ */ jsx20("div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ jsx20(WidgetRenderer, { widget: segment.widget, onAction }) }, `widget-${index}`)
         );
       } else if (segment.type === "widget_pending" && segment.pendingType) {
         if (textBuffer.trim()) {
           elements.push(
-            /* @__PURE__ */ jsx17("div", { className: "apteva-message-bubble apteva-message-assistant", children: /* @__PURE__ */ jsx17("div", { className: "apteva-message-content-assistant", children: /* @__PURE__ */ jsx17(MarkdownContent, { content: textBuffer }) }) }, `text-${index}`)
+            /* @__PURE__ */ jsx20("div", { className: "apteva-message-bubble apteva-message-assistant", children: /* @__PURE__ */ jsx20("div", { className: "apteva-message-content-assistant", children: /* @__PURE__ */ jsx20(MarkdownContent, { content: textBuffer }) }) }, `text-${index}`)
           );
           textBuffer = "";
         }
         elements.push(
-          /* @__PURE__ */ jsx17("div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ jsx17(WidgetSkeleton, { type: segment.pendingType }) }, `pending-${index}`)
+          /* @__PURE__ */ jsx20("div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ jsx20(WidgetSkeleton, { type: segment.pendingType }) }, `pending-${index}`)
         );
       }
     });
     if (textBuffer.trim()) {
       elements.push(
-        /* @__PURE__ */ jsx17("div", { className: "apteva-message-bubble apteva-message-assistant", children: /* @__PURE__ */ jsx17("div", { className: "apteva-message-content-assistant", children: /* @__PURE__ */ jsx17(MarkdownContent, { content: textBuffer }) }) }, "text-final")
+        /* @__PURE__ */ jsx20("div", { className: "apteva-message-bubble apteva-message-assistant", children: /* @__PURE__ */ jsx20("div", { className: "apteva-message-content-assistant", children: /* @__PURE__ */ jsx20(MarkdownContent, { content: textBuffer }) }) }, "text-final")
       );
     }
     return elements.length > 0 ? elements : null;
@@ -2376,11 +2647,11 @@ function Message({ message, onAction, enableWidgets, onWidgetRender }) {
   const hasAttachments = attachments.length > 0;
   const renderAttachments = () => {
     if (!hasAttachments) return null;
-    return /* @__PURE__ */ jsx17("div", { className: "apteva-message-attachments flex flex-wrap gap-2 mb-2 justify-end", children: attachments.map((att, index) => {
+    return /* @__PURE__ */ jsx20("div", { className: "apteva-message-attachments flex flex-wrap gap-2 mb-2 justify-end", children: attachments.map((att, index) => {
       const isImage = att.type.startsWith("image/");
       const isPdf = att.type === "application/pdf";
       if (isImage && att.preview) {
-        return /* @__PURE__ */ jsx17("div", { className: "apteva-attachment-image relative rounded-lg overflow-hidden shadow-sm", children: /* @__PURE__ */ jsx17(
+        return /* @__PURE__ */ jsx20("div", { className: "apteva-attachment-image relative rounded-lg overflow-hidden shadow-sm", children: /* @__PURE__ */ jsx20(
           "img",
           {
             src: att.preview,
@@ -2389,15 +2660,15 @@ function Message({ message, onAction, enableWidgets, onWidgetRender }) {
           }
         ) }, index);
       }
-      return /* @__PURE__ */ jsxs12(
+      return /* @__PURE__ */ jsxs15(
         "div",
         {
           className: "apteva-attachment-doc flex items-center gap-3 px-4 py-3 bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-xl shadow-sm",
           children: [
-            /* @__PURE__ */ jsx17("div", { className: "w-10 h-10 flex items-center justify-center bg-red-100 dark:bg-red-900/30 rounded-lg text-red-600 dark:text-red-400", children: isPdf ? /* @__PURE__ */ jsx17("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx17("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) }) : /* @__PURE__ */ jsx17("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx17("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) }) }),
-            /* @__PURE__ */ jsxs12("div", { className: "flex flex-col min-w-0", children: [
-              /* @__PURE__ */ jsx17("span", { className: "text-sm font-medium text-neutral-800 dark:text-neutral-200 truncate max-w-[180px]", children: att.name }),
-              /* @__PURE__ */ jsxs12("span", { className: "text-xs text-neutral-500 dark:text-neutral-400", children: [
+            /* @__PURE__ */ jsx20("div", { className: "w-10 h-10 flex items-center justify-center bg-red-100 dark:bg-red-900/30 rounded-lg text-red-600 dark:text-red-400", children: isPdf ? /* @__PURE__ */ jsx20("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx20("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) }) : /* @__PURE__ */ jsx20("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx20("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) }) }),
+            /* @__PURE__ */ jsxs15("div", { className: "flex flex-col min-w-0", children: [
+              /* @__PURE__ */ jsx20("span", { className: "text-sm font-medium text-neutral-800 dark:text-neutral-200 truncate max-w-[180px]", children: att.name }),
+              /* @__PURE__ */ jsxs15("span", { className: "text-xs text-neutral-500 dark:text-neutral-400", children: [
                 isPdf ? "PDF" : "Document",
                 " \xB7 ",
                 formatFileSize(att.size)
@@ -2411,13 +2682,13 @@ function Message({ message, onAction, enableWidgets, onWidgetRender }) {
   };
   const renderContent = () => {
     if (isUser) {
-      return /* @__PURE__ */ jsx17("div", { className: "apteva-message-text", children: message.content });
+      return /* @__PURE__ */ jsx20("div", { className: "apteva-message-text", children: message.content });
     }
     if (isStreaming && !hasContent) {
-      return /* @__PURE__ */ jsxs12("div", { className: "apteva-typing-indicator", children: [
-        /* @__PURE__ */ jsx17("span", {}),
-        /* @__PURE__ */ jsx17("span", {}),
-        /* @__PURE__ */ jsx17("span", {})
+      return /* @__PURE__ */ jsxs15("div", { className: "apteva-typing-indicator", children: [
+        /* @__PURE__ */ jsx20("span", {}),
+        /* @__PURE__ */ jsx20("span", {}),
+        /* @__PURE__ */ jsx20("span", {})
       ] });
     }
     if (contentSegments && contentSegments.length > 0) {
@@ -2427,7 +2698,7 @@ function Message({ message, onAction, enableWidgets, onWidgetRender }) {
   };
   const renderTextSegmentWithWidgets = (text, keyPrefix) => {
     if (!enableWidgets) {
-      return /* @__PURE__ */ jsx17("div", { className: "apteva-message-bubble apteva-message-assistant", children: /* @__PURE__ */ jsx17("div", { className: "apteva-message-content-assistant", children: /* @__PURE__ */ jsx17(MarkdownContent, { content: text }) }) }, keyPrefix);
+      return /* @__PURE__ */ jsx20("div", { className: "apteva-message-bubble apteva-message-assistant", children: /* @__PURE__ */ jsx20("div", { className: "apteva-message-content-assistant", children: /* @__PURE__ */ jsx20(MarkdownContent, { content: text }) }) }, keyPrefix);
     }
     const parsed = parseWidgetsFromText(text);
     const elements = [];
@@ -2438,28 +2709,28 @@ function Message({ message, onAction, enableWidgets, onWidgetRender }) {
       } else if (seg.type === "widget" && seg.widget) {
         if (textBuffer.trim()) {
           elements.push(
-            /* @__PURE__ */ jsx17("div", { className: "apteva-message-bubble apteva-message-assistant", children: /* @__PURE__ */ jsx17("div", { className: "apteva-message-content-assistant", children: /* @__PURE__ */ jsx17(MarkdownContent, { content: textBuffer }) }) }, `${keyPrefix}-text-${idx}`)
+            /* @__PURE__ */ jsx20("div", { className: "apteva-message-bubble apteva-message-assistant", children: /* @__PURE__ */ jsx20("div", { className: "apteva-message-content-assistant", children: /* @__PURE__ */ jsx20(MarkdownContent, { content: textBuffer }) }) }, `${keyPrefix}-text-${idx}`)
           );
           textBuffer = "";
         }
         elements.push(
-          /* @__PURE__ */ jsx17("div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ jsx17(WidgetRenderer, { widget: seg.widget, onAction }) }, `${keyPrefix}-widget-${idx}`)
+          /* @__PURE__ */ jsx20("div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ jsx20(WidgetRenderer, { widget: seg.widget, onAction }) }, `${keyPrefix}-widget-${idx}`)
         );
       } else if (seg.type === "widget_pending" && seg.pendingType) {
         if (textBuffer.trim()) {
           elements.push(
-            /* @__PURE__ */ jsx17("div", { className: "apteva-message-bubble apteva-message-assistant", children: /* @__PURE__ */ jsx17("div", { className: "apteva-message-content-assistant", children: /* @__PURE__ */ jsx17(MarkdownContent, { content: textBuffer }) }) }, `${keyPrefix}-text-${idx}`)
+            /* @__PURE__ */ jsx20("div", { className: "apteva-message-bubble apteva-message-assistant", children: /* @__PURE__ */ jsx20("div", { className: "apteva-message-content-assistant", children: /* @__PURE__ */ jsx20(MarkdownContent, { content: textBuffer }) }) }, `${keyPrefix}-text-${idx}`)
           );
           textBuffer = "";
         }
         elements.push(
-          /* @__PURE__ */ jsx17("div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ jsx17(WidgetSkeleton, { type: seg.pendingType }) }, `${keyPrefix}-pending-${idx}`)
+          /* @__PURE__ */ jsx20("div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ jsx20(WidgetSkeleton, { type: seg.pendingType }) }, `${keyPrefix}-pending-${idx}`)
         );
       }
     });
     if (textBuffer.trim()) {
       elements.push(
-        /* @__PURE__ */ jsx17("div", { className: "apteva-message-bubble apteva-message-assistant", children: /* @__PURE__ */ jsx17("div", { className: "apteva-message-content-assistant", children: /* @__PURE__ */ jsx17(MarkdownContent, { content: textBuffer }) }) }, `${keyPrefix}-text-final`)
+        /* @__PURE__ */ jsx20("div", { className: "apteva-message-bubble apteva-message-assistant", children: /* @__PURE__ */ jsx20("div", { className: "apteva-message-content-assistant", children: /* @__PURE__ */ jsx20(MarkdownContent, { content: textBuffer }) }) }, `${keyPrefix}-text-final`)
       );
     }
     return elements;
@@ -2468,55 +2739,121 @@ 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__ */ jsx17("div", { className: "apteva-tool-call-standalone", children: /* @__PURE__ */ jsx17(
-            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__ */ jsx20("div", { className: "apteva-tool-call-standalone", children: /* @__PURE__ */ jsx20(
+                  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__ */ jsx20("div", { className: "apteva-tool-call-standalone", children: /* @__PURE__ */ jsx20(ToolCallGroup, { tools: toolData }) }, `tool-group-${groupIndex}`)
+          );
+        } else {
+          group.tools.forEach((segment) => {
+            if (segment.type === "tool") {
+              elements.push(
+                /* @__PURE__ */ jsx20("div", { className: "apteva-tool-call-standalone", children: /* @__PURE__ */ jsx20(
+                  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) => !persistentWidgetIds?.has(w.id));
+    const persistentRefs = message.widgets.filter((w) => persistentWidgetIds?.has(w.id));
+    return /* @__PURE__ */ jsxs15(Fragment3, { children: [
+      persistentRefs.map((w) => /* @__PURE__ */ jsx20("div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ jsx20(PersistentWidgetRef, { widget: w }) }, `ref-${w.id}`)),
+      inlineWidgets.length > 0 && /* @__PURE__ */ jsx20("div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ jsx20(Widgets, { widgets: inlineWidgets, onAction, layout: "stack" }) })
+    ] });
+  };
   if (!isUser && (contentSegments && contentSegments.length > 0)) {
-    return /* @__PURE__ */ jsxs12("div", { className: "apteva-message-segmented", children: [
+    return /* @__PURE__ */ jsxs15("div", { className: "apteva-message-segmented", children: [
       renderSegmentedContent(),
-      message.widgets && message.widgets.length > 0 && /* @__PURE__ */ jsx17("div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ jsx17(Widgets, { widgets: message.widgets, onAction, layout: "stack" }) }),
-      /* @__PURE__ */ jsx17("div", { className: "apteva-message-timestamp apteva-message-timestamp-assistant", suppressHydrationWarning: true, children: message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) })
+      renderMessageWidgets(),
+      /* @__PURE__ */ jsx20("div", { className: "apteva-message-timestamp apteva-message-timestamp-assistant", suppressHydrationWarning: true, children: message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) })
     ] });
   }
   const widgetContent = renderContentWithWidgets();
   if (!isUser && enableWidgets && widgetContent) {
-    return /* @__PURE__ */ jsxs12("div", { className: "apteva-message-segmented", children: [
+    return /* @__PURE__ */ jsxs15("div", { className: "apteva-message-segmented", children: [
       widgetContent,
-      message.widgets && message.widgets.length > 0 && /* @__PURE__ */ jsx17("div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ jsx17(Widgets, { widgets: message.widgets, onAction, layout: "stack" }) }),
-      /* @__PURE__ */ jsx17("div", { className: "apteva-message-timestamp apteva-message-timestamp-assistant", suppressHydrationWarning: true, children: message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) })
+      renderMessageWidgets(),
+      /* @__PURE__ */ jsx20("div", { className: "apteva-message-timestamp apteva-message-timestamp-assistant", suppressHydrationWarning: true, children: message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) })
     ] });
   }
   if (isUser && hasAttachments) {
-    return /* @__PURE__ */ jsxs12("div", { className: "apteva-message-segmented apteva-message-user-with-attachments flex flex-col items-end", children: [
+    return /* @__PURE__ */ jsxs15("div", { className: "apteva-message-segmented apteva-message-user-with-attachments flex flex-col items-end", children: [
       renderAttachments(),
-      message.content && /* @__PURE__ */ jsx17("div", { className: "apteva-message-bubble apteva-message-user", children: /* @__PURE__ */ jsx17("div", { className: "apteva-message-content-user", children: /* @__PURE__ */ jsx17("div", { className: "apteva-message-text", children: message.content }) }) }),
-      /* @__PURE__ */ jsx17("div", { className: "apteva-message-timestamp apteva-message-timestamp-user", suppressHydrationWarning: true, children: message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) })
+      message.content && /* @__PURE__ */ jsx20("div", { className: "apteva-message-bubble apteva-message-user", children: /* @__PURE__ */ jsx20("div", { className: "apteva-message-content-user", children: /* @__PURE__ */ jsx20("div", { className: "apteva-message-text", children: message.content }) }) }),
+      /* @__PURE__ */ jsx20("div", { className: "apteva-message-timestamp apteva-message-timestamp-user", suppressHydrationWarning: true, children: message.timestamp.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) })
     ] });
   }
-  return /* @__PURE__ */ jsxs12(
+  return /* @__PURE__ */ jsxs15(
     "div",
     {
       className: cn(
@@ -2524,17 +2861,17 @@ function Message({ message, onAction, enableWidgets, onWidgetRender }) {
         isUser ? "apteva-message-user" : "apteva-message-assistant"
       ),
       children: [
-        /* @__PURE__ */ jsx17("div", { className: isUser ? "apteva-message-content-user" : "apteva-message-content-assistant", children: renderContent() }),
-        message.widgets && message.widgets.length > 0 && /* @__PURE__ */ jsx17("div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ jsx17(Widgets, { widgets: message.widgets, onAction, layout: "stack" }) }),
-        /* @__PURE__ */ jsx17("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" }) })
+        /* @__PURE__ */ jsx20("div", { className: isUser ? "apteva-message-content-user" : "apteva-message-content-assistant", children: renderContent() }),
+        renderMessageWidgets(),
+        /* @__PURE__ */ jsx20("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" }) })
       ]
     }
   );
 }
 
 // src/components/Chat/WelcomeScreen.tsx
-import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
-var DefaultIcon = () => /* @__PURE__ */ jsx18("svg", { className: "w-12 h-12 sm:w-16 sm:h-16", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx18(
+import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
+var DefaultIcon = () => /* @__PURE__ */ jsx21("svg", { className: "w-12 h-12 sm:w-16 sm:h-16", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx21(
   "path",
   {
     strokeLinecap: "round",
@@ -2543,7 +2880,7 @@ var DefaultIcon = () => /* @__PURE__ */ jsx18("svg", { className: "w-12 h-12 sm:
     d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
   }
 ) });
-var ArrowIcon = () => /* @__PURE__ */ jsx18("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx18("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 7l5 5m0 0l-5 5m5-5H6" }) });
+var ArrowIcon = () => /* @__PURE__ */ jsx21("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx21("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 7l5 5m0 0l-5 5m5-5H6" }) });
 function WelcomeScreen({
   title,
   subtitle,
@@ -2559,18 +2896,18 @@ function WelcomeScreen({
   const hasPrompts = normalizedPrompts.length > 0;
   const hasHeader = title || subtitle || icon;
   if (!hasHeader && !hasPrompts) {
-    return /* @__PURE__ */ jsx18("div", { className: "flex items-center justify-center h-full !text-neutral-500 dark:!text-neutral-400", children: /* @__PURE__ */ jsxs13("div", { className: "text-center space-y-2", children: [
-      /* @__PURE__ */ jsx18("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx18(DefaultIcon, {}) }),
-      /* @__PURE__ */ jsx18("p", { className: "text-sm", children: "No messages yet. Start a conversation!" })
+    return /* @__PURE__ */ jsx21("div", { className: "flex items-center justify-center h-full !text-neutral-500 dark:!text-neutral-400", children: /* @__PURE__ */ jsxs16("div", { className: "text-center space-y-2", children: [
+      /* @__PURE__ */ jsx21("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx21(DefaultIcon, {}) }),
+      /* @__PURE__ */ jsx21("p", { className: "text-sm", children: "No messages yet. Start a conversation!" })
     ] }) });
   }
   if (variant === "minimal") {
-    return /* @__PURE__ */ jsxs13("div", { className: "flex flex-col h-full px-4 py-4", children: [
-      hasHeader && /* @__PURE__ */ jsxs13("div", { className: "mb-4", children: [
-        title && /* @__PURE__ */ jsx18("h2", { className: "text-lg font-semibold !text-neutral-900 dark:!text-white", children: title }),
-        subtitle && /* @__PURE__ */ jsx18("p", { className: "text-sm !text-neutral-500 dark:!text-neutral-400 mt-1", children: subtitle })
+    return /* @__PURE__ */ jsxs16("div", { className: "flex flex-col h-full px-4 py-4", children: [
+      hasHeader && /* @__PURE__ */ jsxs16("div", { className: "mb-4", children: [
+        title && /* @__PURE__ */ jsx21("h2", { className: "text-lg font-semibold !text-neutral-900 dark:!text-white", children: title }),
+        subtitle && /* @__PURE__ */ jsx21("p", { className: "text-sm !text-neutral-500 dark:!text-neutral-400 mt-1", children: subtitle })
       ] }),
-      hasPrompts && /* @__PURE__ */ jsx18("div", { className: "flex-1 space-y-2", children: normalizedPrompts.map((prompt, index) => /* @__PURE__ */ jsx18(
+      hasPrompts && /* @__PURE__ */ jsx21("div", { className: "flex-1 space-y-2", children: normalizedPrompts.map((prompt, index) => /* @__PURE__ */ jsx21(
         "button",
         {
           onClick: () => onPromptClick(prompt.text),
@@ -2583,11 +2920,11 @@ function WelcomeScreen({
             "transition-all duration-200",
             "group"
           ),
-          children: /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ jsx18("div", { className: "flex-shrink-0 !text-neutral-400 dark:!text-neutral-500 group-hover:!text-blue-500 dark:group-hover:!text-blue-400 transition-colors", children: prompt.icon || /* @__PURE__ */ jsx18(ArrowIcon, {}) }),
-            /* @__PURE__ */ jsxs13("div", { className: "flex-1 min-w-0", children: [
-              /* @__PURE__ */ jsx18("p", { className: "text-sm font-medium !text-neutral-900 dark:!text-white truncate", children: prompt.text }),
-              prompt.description && /* @__PURE__ */ jsx18("p", { className: "text-xs !text-neutral-500 dark:!text-neutral-400 mt-0.5 truncate", children: prompt.description })
+          children: /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx21("div", { className: "flex-shrink-0 !text-neutral-400 dark:!text-neutral-500 group-hover:!text-blue-500 dark:group-hover:!text-blue-400 transition-colors", children: prompt.icon || /* @__PURE__ */ jsx21(ArrowIcon, {}) }),
+            /* @__PURE__ */ jsxs16("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsx21("p", { className: "text-sm font-medium !text-neutral-900 dark:!text-white truncate", children: prompt.text }),
+              prompt.description && /* @__PURE__ */ jsx21("p", { className: "text-xs !text-neutral-500 dark:!text-neutral-400 mt-0.5 truncate", children: prompt.description })
             ] })
           ] })
         },
@@ -2595,14 +2932,14 @@ function WelcomeScreen({
       )) })
     ] });
   }
-  return /* @__PURE__ */ jsxs13("div", { className: "flex flex-col items-center justify-center h-full px-4 py-6 sm:py-8", children: [
-    /* @__PURE__ */ jsxs13("div", { className: "text-center mb-6 sm:mb-8 max-w-md", children: [
-      /* @__PURE__ */ jsx18("div", { className: "mb-4 !text-neutral-400 dark:!text-neutral-500 flex justify-center", children: icon || /* @__PURE__ */ jsx18(DefaultIcon, {}) }),
-      title && /* @__PURE__ */ jsx18("h1", { className: "text-xl sm:text-2xl font-semibold !text-neutral-900 dark:!text-white mb-2", children: title }),
-      subtitle && /* @__PURE__ */ jsx18("p", { className: "text-sm sm:text-base !text-neutral-500 dark:!text-neutral-400", children: subtitle })
+  return /* @__PURE__ */ jsxs16("div", { className: "flex flex-col items-center justify-center h-full px-4 py-6 sm:py-8", children: [
+    /* @__PURE__ */ jsxs16("div", { className: "text-center mb-6 sm:mb-8 max-w-md", children: [
+      /* @__PURE__ */ jsx21("div", { className: "mb-4 !text-neutral-400 dark:!text-neutral-500 flex justify-center", children: icon || /* @__PURE__ */ jsx21(DefaultIcon, {}) }),
+      title && /* @__PURE__ */ jsx21("h1", { className: "text-xl sm:text-2xl font-semibold !text-neutral-900 dark:!text-white mb-2", children: title }),
+      subtitle && /* @__PURE__ */ jsx21("p", { className: "text-sm sm:text-base !text-neutral-500 dark:!text-neutral-400", children: subtitle })
     ] }),
-    hasPrompts && /* @__PURE__ */ jsxs13("div", { className: "w-full max-w-2xl", children: [
-      /* @__PURE__ */ jsx18("div", { className: "sm:hidden space-y-2", children: normalizedPrompts.map((prompt, index) => /* @__PURE__ */ jsx18(
+    hasPrompts && /* @__PURE__ */ jsxs16("div", { className: "w-full max-w-2xl", children: [
+      /* @__PURE__ */ jsx21("div", { className: "sm:hidden space-y-2", children: normalizedPrompts.map((prompt, index) => /* @__PURE__ */ jsx21(
         "button",
         {
           onClick: () => onPromptClick(prompt.text),
@@ -2617,20 +2954,20 @@ function WelcomeScreen({
             "shadow-sm hover:shadow",
             "group"
           ),
-          children: /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ jsx18("div", { className: "flex-shrink-0 w-8 h-8 rounded-lg bg-neutral-100 dark:bg-neutral-700 flex items-center justify-center !text-neutral-500 dark:!text-neutral-400 group-hover:bg-blue-100 dark:group-hover:bg-blue-900/30 group-hover:!text-blue-600 dark:group-hover:!text-blue-400 transition-colors", children: prompt.icon || /* @__PURE__ */ jsx18(ArrowIcon, {}) }),
-            /* @__PURE__ */ jsxs13("div", { className: "flex-1 min-w-0", children: [
-              /* @__PURE__ */ jsx18("p", { className: "text-sm font-medium !text-neutral-900 dark:!text-white", children: prompt.text }),
-              prompt.description && /* @__PURE__ */ jsx18("p", { className: "text-xs !text-neutral-500 dark:!text-neutral-400 mt-0.5 line-clamp-1", children: prompt.description })
+          children: /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsx21("div", { className: "flex-shrink-0 w-8 h-8 rounded-lg bg-neutral-100 dark:bg-neutral-700 flex items-center justify-center !text-neutral-500 dark:!text-neutral-400 group-hover:bg-blue-100 dark:group-hover:bg-blue-900/30 group-hover:!text-blue-600 dark:group-hover:!text-blue-400 transition-colors", children: prompt.icon || /* @__PURE__ */ jsx21(ArrowIcon, {}) }),
+            /* @__PURE__ */ jsxs16("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsx21("p", { className: "text-sm font-medium !text-neutral-900 dark:!text-white", children: prompt.text }),
+              prompt.description && /* @__PURE__ */ jsx21("p", { className: "text-xs !text-neutral-500 dark:!text-neutral-400 mt-0.5 line-clamp-1", children: prompt.description })
             ] }),
-            /* @__PURE__ */ jsx18(
+            /* @__PURE__ */ jsx21(
               "svg",
               {
                 className: "w-4 h-4 !text-neutral-400 group-hover:!text-blue-500 transition-colors flex-shrink-0",
                 fill: "none",
                 stroke: "currentColor",
                 viewBox: "0 0 24 24",
-                children: /* @__PURE__ */ jsx18(
+                children: /* @__PURE__ */ jsx21(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -2645,7 +2982,7 @@ function WelcomeScreen({
         },
         index
       )) }),
-      /* @__PURE__ */ jsx18("div", { className: "hidden sm:grid sm:grid-cols-2 gap-3", children: normalizedPrompts.map((prompt, index) => /* @__PURE__ */ jsx18(
+      /* @__PURE__ */ jsx21("div", { className: "hidden sm:grid sm:grid-cols-2 gap-3", children: normalizedPrompts.map((prompt, index) => /* @__PURE__ */ jsx21(
         "button",
         {
           onClick: () => onPromptClick(prompt.text),
@@ -2660,11 +2997,11 @@ function WelcomeScreen({
             "transition-all duration-200",
             "group"
           ),
-          children: /* @__PURE__ */ jsxs13("div", { className: "flex items-start gap-3", children: [
-            /* @__PURE__ */ jsx18("div", { className: "flex-shrink-0 w-9 h-9 rounded-lg bg-neutral-100 dark:bg-neutral-700 flex items-center justify-center !text-neutral-500 dark:!text-neutral-400 group-hover:bg-blue-100 dark:group-hover:bg-blue-900/30 group-hover:!text-blue-600 dark:group-hover:!text-blue-400 transition-colors", children: prompt.icon || /* @__PURE__ */ jsx18(ArrowIcon, {}) }),
-            /* @__PURE__ */ jsxs13("div", { className: "flex-1 min-w-0", children: [
-              /* @__PURE__ */ jsx18("p", { className: "text-sm font-medium !text-neutral-900 dark:!text-white leading-snug", children: prompt.text }),
-              prompt.description && /* @__PURE__ */ jsx18("p", { className: "text-xs !text-neutral-500 dark:!text-neutral-400 mt-1 line-clamp-2", children: prompt.description })
+          children: /* @__PURE__ */ jsxs16("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ jsx21("div", { className: "flex-shrink-0 w-9 h-9 rounded-lg bg-neutral-100 dark:bg-neutral-700 flex items-center justify-center !text-neutral-500 dark:!text-neutral-400 group-hover:bg-blue-100 dark:group-hover:bg-blue-900/30 group-hover:!text-blue-600 dark:group-hover:!text-blue-400 transition-colors", children: prompt.icon || /* @__PURE__ */ jsx21(ArrowIcon, {}) }),
+            /* @__PURE__ */ jsxs16("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsx21("p", { className: "text-sm font-medium !text-neutral-900 dark:!text-white leading-snug", children: prompt.text }),
+              prompt.description && /* @__PURE__ */ jsx21("p", { className: "text-xs !text-neutral-500 dark:!text-neutral-400 mt-1 line-clamp-2", children: prompt.description })
             ] })
           ] })
         },
@@ -2675,7 +3012,7 @@ function WelcomeScreen({
 }
 
 // src/components/Chat/MessageList.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 function MessageList({
   messages,
   onAction,
@@ -2687,18 +3024,20 @@ function MessageList({
   chatVariant,
   onPromptClick,
   enableWidgets,
-  onWidgetRender
+  onWidgetRender,
+  persistentWidgetIds,
+  toolCallStyle
 }) {
-  const listRef = useRef4(null);
-  const isNearBottomRef = useRef4(true);
-  const lastScrollHeightRef = useRef4(0);
+  const listRef = useRef6(null);
+  const isNearBottomRef = useRef6(true);
+  const lastScrollHeightRef = useRef6(0);
   const handleScroll = () => {
     if (listRef.current) {
       const { scrollTop, scrollHeight, clientHeight } = listRef.current;
       isNearBottomRef.current = scrollHeight - scrollTop - clientHeight < 100;
     }
   };
-  useEffect5(() => {
+  useEffect6(() => {
     if (listRef.current && isNearBottomRef.current) {
       const currentScrollHeight = listRef.current.scrollHeight;
       if (currentScrollHeight !== lastScrollHeightRef.current) {
@@ -2707,7 +3046,7 @@ function MessageList({
       }
     }
   }, [messages]);
-  return /* @__PURE__ */ jsx19("div", { ref: listRef, className: "apteva-message-list apteva-scrollbar-hidden", onScroll: handleScroll, children: messages.length === 0 ? /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx22("div", { ref: listRef, className: "apteva-message-list apteva-scrollbar-hidden", onScroll: handleScroll, children: messages.length === 0 ? /* @__PURE__ */ jsx22(
     WelcomeScreen,
     {
       title: welcomeTitle,
@@ -2719,21 +3058,21 @@ function MessageList({
       onPromptClick: onPromptClick || (() => {
       })
     }
-  ) : messages.map((message) => /* @__PURE__ */ jsx19("div", { className: message.role === "user" ? "apteva-message-row-user" : "apteva-message-row-assistant", children: /* @__PURE__ */ jsx19(Message, { message, onAction, enableWidgets, onWidgetRender }) }, message.id)) });
+  ) : messages.map((message) => /* @__PURE__ */ jsx22("div", { className: message.role === "user" ? "apteva-message-row-user" : "apteva-message-row-assistant", children: /* @__PURE__ */ jsx22(Message, { message, onAction, enableWidgets, onWidgetRender, persistentWidgetIds, toolCallStyle }) }, message.id)) });
 }
 
 // src/components/Chat/Composer.tsx
-import { useState as useState4, useRef as useRef5 } from "react";
-import { Fragment as Fragment3, jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+import { useState as useState6, useRef as useRef7 } from "react";
+import { Fragment as Fragment4, jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
 function Composer({ onSendMessage, placeholder = "Type a message...", disabled = false, isLoading = false, onStop, onFileUpload, onSwitchMode }) {
-  const [text, setText] = useState4("");
-  const [showMenu, setShowMenu] = useState4(false);
-  const [pendingFiles, setPendingFiles] = useState4([]);
-  const [fileError, setFileError] = useState4(null);
-  const [isMultiLine, setIsMultiLine] = useState4(false);
-  const textareaRef = useRef5(null);
-  const fileInputRef = useRef5(null);
-  const menuButtonRef = useRef5(null);
+  const [text, setText] = useState6("");
+  const [showMenu, setShowMenu] = useState6(false);
+  const [pendingFiles, setPendingFiles] = useState6([]);
+  const [fileError, setFileError] = useState6(null);
+  const [isMultiLine, setIsMultiLine] = useState6(false);
+  const textareaRef = useRef7(null);
+  const fileInputRef = useRef7(null);
+  const menuButtonRef = useRef7(null);
   const handleKeyDown = (e) => {
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
@@ -2809,35 +3148,35 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
   };
   const getFileIcon = (mimeType) => {
     if (mimeType.startsWith("image/")) {
-      return /* @__PURE__ */ jsx20("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx20("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) });
+      return /* @__PURE__ */ jsx23("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx23("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) });
     }
     if (mimeType === "application/pdf") {
-      return /* @__PURE__ */ jsx20("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx20("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) });
+      return /* @__PURE__ */ jsx23("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx23("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) });
     }
-    return /* @__PURE__ */ jsx20("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx20("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) });
+    return /* @__PURE__ */ jsx23("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx23("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) });
   };
-  return /* @__PURE__ */ jsxs14("div", { className: "px-4 py-3 relative", children: [
-    fileError && /* @__PURE__ */ jsx20("div", { className: "apteva-file-error", children: /* @__PURE__ */ jsxs14("div", { className: "apteva-file-error-content", children: [
-      /* @__PURE__ */ jsx20("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx20("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
-      /* @__PURE__ */ jsx20("span", { children: fileError })
+  return /* @__PURE__ */ jsxs17("div", { className: "px-4 py-3 relative", children: [
+    fileError && /* @__PURE__ */ jsx23("div", { className: "apteva-file-error", children: /* @__PURE__ */ jsxs17("div", { className: "apteva-file-error-content", children: [
+      /* @__PURE__ */ jsx23("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx23("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+      /* @__PURE__ */ jsx23("span", { children: fileError })
     ] }) }),
-    pendingFiles.length > 0 && /* @__PURE__ */ jsx20("div", { className: "apteva-file-preview", children: pendingFiles.map((pf, index) => /* @__PURE__ */ jsxs14("div", { className: "apteva-file-item", children: [
-      pf.preview ? /* @__PURE__ */ jsx20("img", { src: pf.preview, alt: pf.file.name, className: "apteva-file-thumb" }) : /* @__PURE__ */ jsx20("div", { className: "apteva-file-icon", children: getFileIcon(pf.file.type) }),
-      /* @__PURE__ */ jsxs14("div", { className: "apteva-file-info", children: [
-        /* @__PURE__ */ jsx20("span", { className: "apteva-file-name", children: pf.file.name }),
-        /* @__PURE__ */ jsx20("span", { className: "apteva-file-size", children: formatFileSize(pf.file.size) })
+    pendingFiles.length > 0 && /* @__PURE__ */ jsx23("div", { className: "apteva-file-preview", children: pendingFiles.map((pf, index) => /* @__PURE__ */ jsxs17("div", { className: "apteva-file-item", children: [
+      pf.preview ? /* @__PURE__ */ jsx23("img", { src: pf.preview, alt: pf.file.name, className: "apteva-file-thumb" }) : /* @__PURE__ */ jsx23("div", { className: "apteva-file-icon", children: getFileIcon(pf.file.type) }),
+      /* @__PURE__ */ jsxs17("div", { className: "apteva-file-info", children: [
+        /* @__PURE__ */ jsx23("span", { className: "apteva-file-name", children: pf.file.name }),
+        /* @__PURE__ */ jsx23("span", { className: "apteva-file-size", children: formatFileSize(pf.file.size) })
       ] }),
-      /* @__PURE__ */ jsx20(
+      /* @__PURE__ */ jsx23(
         "button",
         {
           onClick: () => removeFile(index),
           className: "apteva-file-remove",
           title: "Remove file",
-          children: /* @__PURE__ */ jsx20("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx20("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+          children: /* @__PURE__ */ jsx23("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx23("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
         }
       )
     ] }, index)) }),
-    /* @__PURE__ */ jsxs14(
+    /* @__PURE__ */ jsxs17(
       "div",
       {
         className: "apteva-composer",
@@ -2847,20 +3186,20 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
           alignItems: "end"
         },
         children: [
-          /* @__PURE__ */ jsxs14("div", { className: "relative flex-shrink-0 self-end", style: { gridArea: "plus" }, children: [
-            /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsxs17("div", { className: "relative flex-shrink-0 self-end", style: { gridArea: "plus" }, children: [
+            /* @__PURE__ */ jsx23(
               "button",
               {
                 ref: menuButtonRef,
                 onClick: () => setShowMenu(!showMenu),
                 className: "apteva-composer-menu-btn w-8 h-8 rounded-lg flex items-center justify-center transition-all !text-neutral-700 dark:!text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800",
                 title: "More options",
-                children: /* @__PURE__ */ jsx20("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx20("path", { d: "M10 5v10M5 10h10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                children: /* @__PURE__ */ jsx23("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx23("path", { d: "M10 5v10M5 10h10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
               }
             ),
-            showMenu && /* @__PURE__ */ jsxs14(Fragment3, { children: [
-              /* @__PURE__ */ jsx20("div", { className: "fixed inset-0 z-[9998]", onClick: () => setShowMenu(false) }),
-              /* @__PURE__ */ jsxs14(
+            showMenu && /* @__PURE__ */ jsxs17(Fragment4, { children: [
+              /* @__PURE__ */ jsx23("div", { className: "fixed inset-0 z-[9998]", onClick: () => setShowMenu(false) }),
+              /* @__PURE__ */ jsxs17(
                 "div",
                 {
                   className: "apteva-composer-menu fixed bg-neutral-800 dark:bg-neutral-800 rounded-xl shadow-lg overflow-hidden z-[9999] min-w-[200px]",
@@ -2869,7 +3208,7 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
                     bottom: window.innerHeight - (menuButtonRef.current?.getBoundingClientRect().top ?? 0) + 8
                   },
                   children: [
-                    /* @__PURE__ */ jsxs14(
+                    /* @__PURE__ */ jsxs17(
                       "button",
                       {
                         onClick: () => {
@@ -2878,12 +3217,12 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
                         },
                         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",
                         children: [
-                          /* @__PURE__ */ jsx20("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx20("path", { d: "M10.5 3.5L5.5 8.5C4.67157 9.32843 4.67157 10.6716 5.5 11.5C6.32843 12.3284 7.67157 12.3284 8.5 11.5L14.5 5.5C15.8807 4.11929 15.8807 1.88071 14.5 0.5C13.1193 -0.880711 10.8807 -0.880711 9.5 0.5L3.5 6.5C1.56846 8.43154 1.56846 11.5685 3.5 13.5C5.43154 15.4315 8.56846 15.4315 10.5 13.5L15.5 8.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", transform: "translate(2, 3)" }) }),
-                          /* @__PURE__ */ jsx20("span", { className: "!text-sm font-medium", children: "Add photos & files" })
+                          /* @__PURE__ */ jsx23("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx23("path", { d: "M10.5 3.5L5.5 8.5C4.67157 9.32843 4.67157 10.6716 5.5 11.5C6.32843 12.3284 7.67157 12.3284 8.5 11.5L14.5 5.5C15.8807 4.11929 15.8807 1.88071 14.5 0.5C13.1193 -0.880711 10.8807 -0.880711 9.5 0.5L3.5 6.5C1.56846 8.43154 1.56846 11.5685 3.5 13.5C5.43154 15.4315 8.56846 15.4315 10.5 13.5L15.5 8.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", transform: "translate(2, 3)" }) }),
+                          /* @__PURE__ */ jsx23("span", { className: "!text-sm font-medium", children: "Add photos & files" })
                         ]
                       }
                     ),
-                    onSwitchMode && /* @__PURE__ */ jsxs14(
+                    onSwitchMode && /* @__PURE__ */ jsxs17(
                       "button",
                       {
                         onClick: () => {
@@ -2892,8 +3231,8 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
                         },
                         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 border-t border-neutral-700 dark:border-neutral-700",
                         children: [
-                          /* @__PURE__ */ jsx20("svg", { className: "w-4.5 h-4.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx20("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 10V3L4 14h7v7l9-11h-7z" }) }),
-                          /* @__PURE__ */ jsx20("span", { className: "!text-sm font-medium", children: "Switch to command mode" })
+                          /* @__PURE__ */ jsx23("svg", { className: "w-4.5 h-4.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx23("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 10V3L4 14h7v7l9-11h-7z" }) }),
+                          /* @__PURE__ */ jsx23("span", { className: "!text-sm font-medium", children: "Switch to command mode" })
                         ]
                       }
                     )
@@ -2902,7 +3241,7 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsx23(
             "textarea",
             {
               ref: textareaRef,
@@ -2916,28 +3255,28 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
               rows: 1
             }
           ),
-          /* @__PURE__ */ jsx20("div", { className: "self-end", style: { gridArea: "send" }, children: isLoading && onStop ? /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsx23("div", { className: "self-end", style: { gridArea: "send" }, children: isLoading && onStop ? /* @__PURE__ */ jsx23(
             "button",
             {
               onClick: onStop,
               className: "apteva-composer-stop-btn",
               title: "Stop generation",
-              children: /* @__PURE__ */ jsx20("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx20("rect", { x: "2", y: "2", width: "10", height: "10", rx: "1", fill: "currentColor" }) })
+              children: /* @__PURE__ */ jsx23("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx23("rect", { x: "2", y: "2", width: "10", height: "10", rx: "1", fill: "currentColor" }) })
             }
-          ) : /* @__PURE__ */ jsx20(
+          ) : /* @__PURE__ */ jsx23(
             "button",
             {
               onClick: handleSend,
               disabled: !text.trim() && pendingFiles.length === 0 || disabled,
               className: "apteva-composer-send-btn w-8 h-8 rounded-lg flex items-center justify-center font-bold transition-all flex-shrink-0 border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 !text-neutral-700 dark:!text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-700 disabled:opacity-30 disabled:cursor-not-allowed !text-lg",
               title: "Send message",
-              children: /* @__PURE__ */ jsx20("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx20("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+              children: /* @__PURE__ */ jsx23("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx23("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
             }
           ) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx20(
+    /* @__PURE__ */ jsx23(
       "input",
       {
         ref: fileInputRef,
@@ -2952,8 +3291,8 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
 }
 
 // src/components/Chat/CommandComposer.tsx
-import { useState as useState5, useRef as useRef6 } from "react";
-import { Fragment as Fragment4, jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+import { useState as useState7, useRef as useRef8 } from "react";
+import { Fragment as Fragment5, jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
 function CommandComposer({
   onExecute,
   state,
@@ -2970,13 +3309,13 @@ function CommandComposer({
   placeholder = "Enter your command...",
   disabled = false
 }) {
-  const [input, setInput] = useState5("");
-  const [pendingFiles, setPendingFiles] = useState5([]);
-  const [fileError, setFileError] = useState5(null);
-  const [showMenu, setShowMenu] = useState5(false);
-  const inputRef = useRef6(null);
-  const fileInputRef = useRef6(null);
-  const menuButtonRef = useRef6(null);
+  const [input, setInput] = useState7("");
+  const [pendingFiles, setPendingFiles] = useState7([]);
+  const [fileError, setFileError] = useState7(null);
+  const [showMenu, setShowMenu] = useState7(false);
+  const inputRef = useRef8(null);
+  const fileInputRef = useRef8(null);
+  const menuButtonRef = useRef8(null);
   const handleSubmit = () => {
     const hasText = input.trim();
     const hasFiles = pendingFiles.length > 0;
@@ -3043,12 +3382,12 @@ function CommandComposer({
   };
   const getFileIcon = (mimeType) => {
     if (mimeType.startsWith("image/")) {
-      return /* @__PURE__ */ jsx21("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx21("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) });
+      return /* @__PURE__ */ jsx24("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx24("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) });
     }
     if (mimeType === "application/pdf") {
-      return /* @__PURE__ */ jsx21("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx21("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) });
+      return /* @__PURE__ */ jsx24("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx24("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" }) });
     }
-    return /* @__PURE__ */ jsx21("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx21("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) });
+    return /* @__PURE__ */ jsx24("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx24("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) });
   };
   const getDisplayContent = () => {
     if (state === "loading") {
@@ -3073,12 +3412,12 @@ function CommandComposer({
   };
   const isShowingResult = state !== "idle";
   const { text: displayContent, isToolCall } = getDisplayContent();
-  return /* @__PURE__ */ jsxs15("div", { className: "w-full relative", children: [
-    fileError && /* @__PURE__ */ jsx21("div", { className: "apteva-file-error", style: { top: "-3rem", bottom: "auto" }, children: /* @__PURE__ */ jsxs15("div", { className: "apteva-file-error-content", children: [
-      /* @__PURE__ */ jsx21("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx21("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
-      /* @__PURE__ */ jsx21("span", { children: fileError })
+  return /* @__PURE__ */ jsxs18("div", { className: "w-full relative", children: [
+    fileError && /* @__PURE__ */ jsx24("div", { className: "apteva-file-error", style: { top: "-3rem", bottom: "auto" }, children: /* @__PURE__ */ jsxs18("div", { className: "apteva-file-error-content", children: [
+      /* @__PURE__ */ jsx24("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx24("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+      /* @__PURE__ */ jsx24("span", { children: fileError })
     ] }) }),
-    /* @__PURE__ */ jsxs15(
+    /* @__PURE__ */ jsxs18(
       "div",
       {
         className: cn(
@@ -3090,21 +3429,21 @@ function CommandComposer({
           state === "error" && "border-red-400 dark:border-red-500"
         ),
         children: [
-          /* @__PURE__ */ jsxs15("div", { className: "w-8 h-8 flex items-center justify-center flex-shrink-0", children: [
-            state === "idle" && /* @__PURE__ */ jsxs15("div", { className: "relative", children: [
-              /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsxs18("div", { className: "w-8 h-8 flex items-center justify-center flex-shrink-0", children: [
+            state === "idle" && /* @__PURE__ */ jsxs18("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx24(
                 "button",
                 {
                   ref: menuButtonRef,
                   onClick: () => setShowMenu(!showMenu),
                   className: "apteva-composer-menu-btn w-8 h-8 rounded-lg flex items-center justify-center transition-all !text-neutral-500 dark:!text-neutral-400 hover:!text-neutral-700 dark:hover:!text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-800",
                   title: "More options",
-                  children: /* @__PURE__ */ jsx21("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx21("path", { d: "M10 5v10M5 10h10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                  children: /* @__PURE__ */ jsx24("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx24("path", { d: "M10 5v10M5 10h10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
                 }
               ),
-              showMenu && /* @__PURE__ */ jsxs15(Fragment4, { children: [
-                /* @__PURE__ */ jsx21("div", { className: "fixed inset-0 z-[9998]", onClick: () => setShowMenu(false) }),
-                /* @__PURE__ */ jsxs15(
+              showMenu && /* @__PURE__ */ jsxs18(Fragment5, { children: [
+                /* @__PURE__ */ jsx24("div", { className: "fixed inset-0 z-[9998]", onClick: () => setShowMenu(false) }),
+                /* @__PURE__ */ jsxs18(
                   "div",
                   {
                     className: "apteva-composer-menu fixed bg-neutral-800 dark:bg-neutral-800 rounded-xl shadow-lg overflow-hidden z-[9999] min-w-[200px]",
@@ -3113,7 +3452,7 @@ function CommandComposer({
                       top: (menuButtonRef.current?.getBoundingClientRect().bottom ?? 0) + 8
                     },
                     children: [
-                      /* @__PURE__ */ jsxs15(
+                      /* @__PURE__ */ jsxs18(
                         "button",
                         {
                           onClick: () => {
@@ -3122,12 +3461,12 @@ function CommandComposer({
                           },
                           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",
                           children: [
-                            /* @__PURE__ */ jsx21("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx21("path", { d: "M10.5 3.5L5.5 8.5C4.67157 9.32843 4.67157 10.6716 5.5 11.5C6.32843 12.3284 7.67157 12.3284 8.5 11.5L14.5 5.5C15.8807 4.11929 15.8807 1.88071 14.5 0.5C13.1193 -0.880711 10.8807 -0.880711 9.5 0.5L3.5 6.5C1.56846 8.43154 1.56846 11.5685 3.5 13.5C5.43154 15.4315 8.56846 15.4315 10.5 13.5L15.5 8.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", transform: "translate(2, 3)" }) }),
-                            /* @__PURE__ */ jsx21("span", { className: "!text-sm font-medium", children: "Add photos & files" })
+                            /* @__PURE__ */ jsx24("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx24("path", { d: "M10.5 3.5L5.5 8.5C4.67157 9.32843 4.67157 10.6716 5.5 11.5C6.32843 12.3284 7.67157 12.3284 8.5 11.5L14.5 5.5C15.8807 4.11929 15.8807 1.88071 14.5 0.5C13.1193 -0.880711 10.8807 -0.880711 9.5 0.5L3.5 6.5C1.56846 8.43154 1.56846 11.5685 3.5 13.5C5.43154 15.4315 8.56846 15.4315 10.5 13.5L15.5 8.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", transform: "translate(2, 3)" }) }),
+                            /* @__PURE__ */ jsx24("span", { className: "!text-sm font-medium", children: "Add photos & files" })
                           ]
                         }
                       ),
-                      onExpand && /* @__PURE__ */ jsxs15(
+                      onExpand && /* @__PURE__ */ jsxs18(
                         "button",
                         {
                           onClick: () => {
@@ -3136,8 +3475,8 @@ function CommandComposer({
                           },
                           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 border-t border-neutral-700 dark:border-neutral-700",
                           children: [
-                            /* @__PURE__ */ jsx21("svg", { className: "w-4.5 h-4.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx21("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" }) }),
-                            /* @__PURE__ */ jsx21("span", { className: "!text-sm font-medium", children: "Expand to chat" })
+                            /* @__PURE__ */ jsx24("svg", { className: "w-4.5 h-4.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx24("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" }) }),
+                            /* @__PURE__ */ jsx24("span", { className: "!text-sm font-medium", children: "Expand to chat" })
                           ]
                         }
                       )
@@ -3146,22 +3485,22 @@ function CommandComposer({
                 )
               ] })
             ] }),
-            state === "loading" && !toolName && /* @__PURE__ */ jsx21("div", { className: "w-4 h-4 border-2 border-blue-200 border-t-blue-500 rounded-full animate-spin" }),
-            state === "loading" && toolName && /* @__PURE__ */ jsx21("div", { className: "w-2 h-2 rounded-full bg-blue-500 animate-pulse" })
+            state === "loading" && !toolName && /* @__PURE__ */ jsx24("div", { className: "w-4 h-4 border-2 border-blue-200 border-t-blue-500 rounded-full animate-spin" }),
+            state === "loading" && toolName && /* @__PURE__ */ jsx24("div", { className: "w-2 h-2 rounded-full bg-blue-500 animate-pulse" })
           ] }),
-          pendingFiles.length > 0 && state === "idle" && /* @__PURE__ */ jsx21("div", { className: "apteva-file-badges", children: pendingFiles.map((pf, index) => /* @__PURE__ */ jsxs15("div", { className: "apteva-file-badge", title: pf.file.name, children: [
-            pf.preview ? /* @__PURE__ */ jsx21("img", { src: pf.preview, alt: pf.file.name, className: "apteva-file-badge-img" }) : /* @__PURE__ */ jsx21("span", { className: "apteva-file-badge-icon", children: getFileIcon(pf.file.type) }),
-            /* @__PURE__ */ jsx21(
+          pendingFiles.length > 0 && state === "idle" && /* @__PURE__ */ jsx24("div", { className: "apteva-file-badges", children: pendingFiles.map((pf, index) => /* @__PURE__ */ jsxs18("div", { className: "apteva-file-badge", title: pf.file.name, children: [
+            pf.preview ? /* @__PURE__ */ jsx24("img", { src: pf.preview, alt: pf.file.name, className: "apteva-file-badge-img" }) : /* @__PURE__ */ jsx24("span", { className: "apteva-file-badge-icon", children: getFileIcon(pf.file.type) }),
+            /* @__PURE__ */ jsx24(
               "button",
               {
                 onClick: () => removeFile(index),
                 className: "apteva-file-badge-remove",
                 title: "Remove",
-                children: /* @__PURE__ */ jsx21("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx21("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                children: /* @__PURE__ */ jsx24("svg", { fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx24("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
               }
             )
           ] }, index)) }),
-          state === "idle" ? /* @__PURE__ */ jsx21(
+          state === "idle" ? /* @__PURE__ */ jsx24(
             "textarea",
             {
               ref: inputRef,
@@ -3179,7 +3518,7 @@ function CommandComposer({
               ),
               style: { minHeight: "24px", maxHeight: "120px" }
             }
-          ) : /* @__PURE__ */ jsx21(
+          ) : /* @__PURE__ */ jsx24(
             "div",
             {
               className: cn(
@@ -3190,14 +3529,14 @@ function CommandComposer({
                 state === "error" && "!text-red-600 dark:!text-red-400",
                 state === "plan-pending" && "!text-amber-700 dark:!text-amber-300"
               ),
-              children: isToolCall ? /* @__PURE__ */ jsxs15(Fragment4, { children: [
-                /* @__PURE__ */ jsx21("span", { className: "font-mono", children: displayContent }),
-                /* @__PURE__ */ jsx21("span", { className: "text-neutral-400 dark:text-neutral-500", children: "Running..." })
+              children: isToolCall ? /* @__PURE__ */ jsxs18(Fragment5, { children: [
+                /* @__PURE__ */ jsx24("span", { className: "font-mono", children: displayContent }),
+                /* @__PURE__ */ jsx24("span", { className: "text-neutral-400 dark:text-neutral-500", children: "Running..." })
               ] }) : displayContent
             }
           ),
-          /* @__PURE__ */ jsx21("div", { className: "w-8 h-8 flex items-center justify-center flex-shrink-0", children: state === "plan-pending" ? /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-1", children: [
-            /* @__PURE__ */ jsx21(
+          /* @__PURE__ */ jsx24("div", { className: "w-8 h-8 flex items-center justify-center flex-shrink-0", children: state === "plan-pending" ? /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx24(
               "button",
               {
                 onClick: onApprove,
@@ -3205,7 +3544,7 @@ function CommandComposer({
                 children: "Approve"
               }
             ),
-            /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsx24(
               "button",
               {
                 onClick: onReject,
@@ -3213,26 +3552,26 @@ function CommandComposer({
                 children: "Modify"
               }
             )
-          ] }) : /* @__PURE__ */ jsxs15(Fragment4, { children: [
-            state === "loading" && onStop && /* @__PURE__ */ jsx21(
+          ] }) : /* @__PURE__ */ jsxs18(Fragment5, { children: [
+            state === "loading" && onStop && /* @__PURE__ */ jsx24(
               "button",
               {
                 onClick: onStop,
                 className: "apteva-composer-stop-btn",
                 title: "Stop generation",
-                children: /* @__PURE__ */ jsx21("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx21("rect", { x: "2", y: "2", width: "10", height: "10", rx: "1", fill: "currentColor" }) })
+                children: /* @__PURE__ */ jsx24("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx24("rect", { x: "2", y: "2", width: "10", height: "10", rx: "1", fill: "currentColor" }) })
               }
             ),
-            (state === "success" || state === "error") && /* @__PURE__ */ jsx21(
+            (state === "success" || state === "error") && /* @__PURE__ */ jsx24(
               "button",
               {
                 onClick: handleNewCommand,
                 className: "w-8 h-8 rounded-lg flex items-center justify-center !text-neutral-400 hover:!text-neutral-600 dark:hover:!text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors",
                 title: "New command",
-                children: /* @__PURE__ */ jsx21("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx21("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                children: /* @__PURE__ */ jsx24("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx24("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
               }
             ),
-            state === "idle" && /* @__PURE__ */ jsx21(
+            state === "idle" && /* @__PURE__ */ jsx24(
               "button",
               {
                 onClick: handleSubmit,
@@ -3244,14 +3583,14 @@ function CommandComposer({
                   input.trim() || pendingFiles.length > 0 ? "bg-neutral-900 dark:bg-white !text-white dark:!text-neutral-900 border-neutral-900 dark:border-white" : "bg-white dark:bg-neutral-800 !text-neutral-400"
                 ),
                 title: "Execute command",
-                children: /* @__PURE__ */ jsx21("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx21("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 12h14M12 5l7 7-7 7" }) })
+                children: /* @__PURE__ */ jsx24("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx24("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 12h14M12 5l7 7-7 7" }) })
               }
             )
           ] }) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsx24(
       "input",
       {
         ref: fileInputRef,
@@ -3448,8 +3787,43 @@ var AptevaClient = class {
 };
 var aptevaClient = new AptevaClient();
 
+// src/components/Chat/PersistentWidgetPanel.tsx
+import { useState as useState8 } from "react";
+import { jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
+function PersistentWidgetPanel({ widgets, onAction }) {
+  const [collapsed, setCollapsed] = useState8(false);
+  if (widgets.length === 0) return null;
+  return /* @__PURE__ */ jsxs19("div", { className: "apteva-persistent-panel border-b border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-900", children: [
+    /* @__PURE__ */ jsxs19("div", { className: "flex items-center justify-between px-3 py-1.5", children: [
+      /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx25("div", { className: "w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" }),
+        /* @__PURE__ */ jsx25("span", { className: "text-xs font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider", children: "Live" })
+      ] }),
+      /* @__PURE__ */ jsx25(
+        "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__ */ jsx25(
+            "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__ */ jsx25("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
+            }
+          )
+        }
+      )
+    ] }),
+    !collapsed && /* @__PURE__ */ jsx25("div", { className: "px-3 pb-3 flex flex-col gap-3", children: widgets.map((widget) => /* @__PURE__ */ jsx25(WidgetRenderer, { widget, onAction }, widget.id)) })
+  ] });
+}
+
 // src/components/Chat/Chat.tsx
-import { Fragment as Fragment5, jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
 var Chat = forwardRef(function Chat2({
   agentId,
   threadId,
@@ -3490,6 +3864,8 @@ var Chat = forwardRef(function Chat2({
   showHeader = true,
   headerTitle = "Chat",
   onHeaderBack,
+  // Tool call display
+  toolCallStyle = "card",
   // Widget detection
   enableWidgets = false,
   availableWidgets,
@@ -3497,25 +3873,49 @@ var Chat = forwardRef(function Chat2({
   onWidgetRender,
   className
 }, ref) {
-  const [messages, setMessages] = useState6(initialMessages);
-  const [isLoading, setIsLoading] = useState6(false);
-  const [currentThreadId, setCurrentThreadId] = useState6(threadId || null);
-  const [mode, setMode] = useState6(initialMode);
-  const [chatToolName, setChatToolName] = useState6(null);
-  const [commandState, setCommandState] = useState6("idle");
-  const [commandResult, setCommandResult] = useState6(null);
-  const [commandError, setCommandError] = useState6(null);
-  const [progress, setProgress] = useState6(0);
-  const [commandInput, setCommandInput] = useState6("");
-  const [streamedContent, setStreamedContent] = useState6("");
-  const [currentToolName, setCurrentToolName] = useState6(null);
-  const [currentRequestId, setCurrentRequestId] = useState6(null);
-  const [plan, setPlan] = useState6("");
-  const [pendingCommand, setPendingCommand] = useState6("");
-  const [internalPlanMode, setInternalPlanMode] = useState6(planMode);
-  const [showSettingsMenu, setShowSettingsMenu] = useState6(false);
-  const fileInputRef = useRef7(null);
-  const handleSendMessageRef = useRef7(null);
+  const [messages, setMessages] = useState9(initialMessages);
+  const [isLoading, setIsLoading] = useState9(false);
+  const [currentThreadId, setCurrentThreadId] = useState9(threadId || null);
+  const [mode, setMode] = useState9(initialMode);
+  const [chatToolName, setChatToolName] = useState9(null);
+  const [commandState, setCommandState] = useState9("idle");
+  const [commandResult, setCommandResult] = useState9(null);
+  const [commandError, setCommandError] = useState9(null);
+  const [progress, setProgress] = useState9(0);
+  const [commandInput, setCommandInput] = useState9("");
+  const [streamedContent, setStreamedContent] = useState9("");
+  const [currentToolName, setCurrentToolName] = useState9(null);
+  const [currentRequestId, setCurrentRequestId] = useState9(null);
+  const [plan, setPlan] = useState9("");
+  const [pendingCommand, setPendingCommand] = useState9("");
+  const [internalPlanMode, setInternalPlanMode] = useState9(planMode);
+  const [showSettingsMenu, setShowSettingsMenu] = useState9(false);
+  const fileInputRef = useRef9(null);
+  const [persistentWidgets, setPersistentWidgets] = useState9(/* @__PURE__ */ new Map());
+  const updatePersistentWidgets = useCallback2((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;
+    });
+  }, []);
+  useEffect7(() => {
+    updatePersistentWidgets(messages);
+  }, [messages, updatePersistentWidgets]);
+  const persistentWidgetList = useMemo2(() => Array.from(persistentWidgets.values()), [persistentWidgets]);
+  const persistentWidgetIds = useMemo2(() => new Set(persistentWidgets.keys()), [persistentWidgets]);
+  const handleSendMessageRef = useRef9(null);
   useImperativeHandle(ref, () => ({
     sendMessage: async (text) => {
       if (handleSendMessageRef.current) {
@@ -3536,7 +3936,7 @@ var Chat = forwardRef(function Chat2({
     return context ? `${context}
 ${widgetContext}` : widgetContext;
   }, [context, enableWidgets, availableWidgets, compactWidgetContext]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (apiUrl || apiKey) {
       aptevaClient.configure({
         ...apiUrl && { apiUrl },
@@ -3544,15 +3944,15 @@ ${widgetContext}` : widgetContext;
       });
     }
   }, [apiUrl, apiKey]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (threadId) {
       onThreadChange?.(threadId);
     }
   }, [threadId, onThreadChange]);
-  useEffect6(() => {
+  useEffect7(() => {
     setInternalPlanMode(planMode);
   }, [planMode]);
-  useEffect6(() => {
+  useEffect7(() => {
     const handleClickOutside = (event) => {
       const target = event.target;
       if (showSettingsMenu && !target.closest(".settings-menu-container")) {
@@ -4062,19 +4462,20 @@ ${planToExecute}`;
     setCurrentRequestId(null);
   };
   const isCompact = commandVariant === "compact";
-  return /* @__PURE__ */ jsxs16("div", { className: cn("apteva-chat flex flex-col h-full", variant !== "default" && `apteva-chat-${variant}`, className), children: [
-    showHeader && mode === "chat" && /* @__PURE__ */ jsx22("div", { className: "apteva-chat-header px-4 py-3", children: /* @__PURE__ */ jsxs16("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
-      onHeaderBack && /* @__PURE__ */ jsx22("button", { onClick: onHeaderBack, className: "apteva-chat-back", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx22("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx22("path", { d: "M10 12L6 8l4-4" }) }) }),
-      /* @__PURE__ */ jsxs16("div", { children: [
-        /* @__PURE__ */ jsx22("div", { className: "apteva-chat-title", children: headerTitle }),
-        /* @__PURE__ */ jsx22("div", { className: cn(
+  return /* @__PURE__ */ jsxs20("div", { className: cn("apteva-chat flex flex-col h-full", variant !== "default" && `apteva-chat-${variant}`, className), children: [
+    showHeader && mode === "chat" && /* @__PURE__ */ jsx26("div", { className: "apteva-chat-header px-4 py-3", children: /* @__PURE__ */ jsxs20("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
+      onHeaderBack && /* @__PURE__ */ jsx26("button", { onClick: onHeaderBack, className: "apteva-chat-back", style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx26("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx26("path", { d: "M10 12L6 8l4-4" }) }) }),
+      /* @__PURE__ */ jsxs20("div", { children: [
+        /* @__PURE__ */ jsx26("div", { className: "apteva-chat-title", children: headerTitle }),
+        /* @__PURE__ */ jsx26("div", { className: cn(
           "apteva-chat-status",
           isLoading ? chatToolName ? "apteva-chat-status-tool" : "apteva-chat-status-thinking" : "apteva-chat-status-ready"
         ), children: isLoading ? chatToolName ? `Using ${chatToolName}...` : "Thinking..." : "Ready" })
       ] })
     ] }) }),
-    mode === "chat" && /* @__PURE__ */ jsxs16(Fragment5, { children: [
-      /* @__PURE__ */ jsx22(
+    mode === "chat" && /* @__PURE__ */ jsxs20(Fragment6, { children: [
+      persistentWidgetList.length > 0 && /* @__PURE__ */ jsx26(PersistentWidgetPanel, { widgets: persistentWidgetList, onAction }),
+      /* @__PURE__ */ jsx26(
         MessageList,
         {
           messages,
@@ -4087,10 +4488,12 @@ ${planToExecute}`;
           chatVariant: variant,
           onPromptClick: (prompt) => handleSendMessage(prompt),
           enableWidgets,
-          onWidgetRender
+          onWidgetRender,
+          persistentWidgetIds,
+          toolCallStyle
         }
       ),
-      /* @__PURE__ */ jsx22(
+      /* @__PURE__ */ jsx26(
         Composer,
         {
           onSendMessage: handleSendMessage,
@@ -4103,7 +4506,7 @@ ${planToExecute}`;
         }
       )
     ] }),
-    mode === "command" && /* @__PURE__ */ jsx22("div", { className: "w-full", children: /* @__PURE__ */ jsx22(
+    mode === "command" && /* @__PURE__ */ jsx26("div", { className: "w-full", children: /* @__PURE__ */ jsx26(
       CommandComposer,
       {
         onExecute: (text, files) => {
@@ -4124,7 +4527,7 @@ ${planToExecute}`;
         placeholder: placeholder || "Enter your command..."
       }
     ) }),
-    /* @__PURE__ */ jsx22("style", { dangerouslySetInnerHTML: {
+    /* @__PURE__ */ jsx26("style", { dangerouslySetInnerHTML: {
       __html: `
           @keyframes pulse-border {
             0%, 100% { border-color: rgb(59, 130, 246); }
@@ -4142,12 +4545,12 @@ ${planToExecute}`;
 });
 
 // src/components/Chat/CommandOutput.tsx
-import { useState as useState7 } from "react";
-import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
+import { useState as useState10 } from "react";
+import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
 
 // src/components/Command/Command.tsx
-import React, { useState as useState8, useEffect as useEffect7 } from "react";
-import { Fragment as Fragment6, jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
+import React, { useState as useState11, useEffect as useEffect8 } from "react";
+import { Fragment as Fragment7, jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
 function Command({
   agentId,
   command: initialCommand,
@@ -4174,28 +4577,28 @@ function Command({
   resultRenderer,
   className
 }) {
-  const [state, setState] = useState8("idle");
-  const [result, setResult] = useState8(null);
-  const [error, setError] = useState8(null);
-  const [progress, setProgress] = useState8(0);
-  const [command, setCommand] = useState8(initialCommand || "");
-  const [streamedContent, setStreamedContent] = useState8("");
-  const [plan, setPlan] = useState8("");
-  const [pendingCommand, setPendingCommand] = useState8("");
-  const [showPlanDetails, setShowPlanDetails] = useState8(false);
-  const [uploadedFiles, setUploadedFiles] = useState8([]);
-  const [showSettingsMenu, setShowSettingsMenu] = useState8(false);
-  const [internalPlanMode, setInternalPlanMode] = useState8(planMode);
+  const [state, setState] = useState11("idle");
+  const [result, setResult] = useState11(null);
+  const [error, setError] = useState11(null);
+  const [progress, setProgress] = useState11(0);
+  const [command, setCommand] = useState11(initialCommand || "");
+  const [streamedContent, setStreamedContent] = useState11("");
+  const [plan, setPlan] = useState11("");
+  const [pendingCommand, setPendingCommand] = useState11("");
+  const [showPlanDetails, setShowPlanDetails] = useState11(false);
+  const [uploadedFiles, setUploadedFiles] = useState11([]);
+  const [showSettingsMenu, setShowSettingsMenu] = useState11(false);
+  const [internalPlanMode, setInternalPlanMode] = useState11(planMode);
   const fileInputRef = React.useRef(null);
-  useEffect7(() => {
+  useEffect8(() => {
     if (autoExecute && state === "idle" && command) {
       executeCommand();
     }
   }, [autoExecute]);
-  useEffect7(() => {
+  useEffect8(() => {
     setInternalPlanMode(planMode);
   }, [planMode]);
-  useEffect7(() => {
+  useEffect8(() => {
     const handleClickOutside = (event) => {
       const target = event.target;
       if (showSettingsMenu && !target.closest(".settings-menu-container")) {
@@ -4597,7 +5000,7 @@ ${planToExecute}`;
     setUploadedFiles((prev) => prev.filter((_, i) => i !== index));
   };
   const isCompact = variant === "compact";
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs22(
     "div",
     {
       className: cn(
@@ -4612,9 +5015,9 @@ ${planToExecute}`;
       ),
       style: { minHeight: isCompact ? "auto" : "180px" },
       children: [
-        /* @__PURE__ */ jsxs18("div", { className: cn("flex-1 flex", isCompact ? "flex-row items-center p-3 gap-3" : "flex-col p-4"), children: [
-          state === "idle" && allowInput && !isCompact && /* @__PURE__ */ jsxs18(Fragment6, { children: [
-            /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsxs22("div", { className: cn("flex-1 flex", isCompact ? "flex-row items-center p-3 gap-3" : "flex-col p-4"), children: [
+          state === "idle" && allowInput && !isCompact && /* @__PURE__ */ jsxs22(Fragment7, { children: [
+            /* @__PURE__ */ jsx28(
               "textarea",
               {
                 value: command,
@@ -4630,42 +5033,42 @@ ${planToExecute}`;
                 rows: 6
               }
             ),
-            uploadedFiles.length > 0 && /* @__PURE__ */ jsx24("div", { className: "flex flex-wrap gap-2 mt-2", children: uploadedFiles.map((file, index) => /* @__PURE__ */ jsxs18("div", { className: "relative group", children: [
-              file.type === "image" ? /* @__PURE__ */ jsx24(
+            uploadedFiles.length > 0 && /* @__PURE__ */ jsx28("div", { className: "flex flex-wrap gap-2 mt-2", children: uploadedFiles.map((file, index) => /* @__PURE__ */ jsxs22("div", { className: "relative group", children: [
+              file.type === "image" ? /* @__PURE__ */ jsx28(
                 "img",
                 {
                   src: file.preview,
                   alt: file.name,
                   className: "w-20 h-20 object-cover rounded-lg border-2 border-neutral-300 dark:border-neutral-600"
                 }
-              ) : /* @__PURE__ */ jsxs18("div", { className: "w-20 h-20 flex flex-col items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-neutral-50 dark:bg-neutral-800", children: [
-                /* @__PURE__ */ jsx24("svg", { className: "w-8 h-8 text-neutral-500 dark:text-neutral-400", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx24("path", { fillRule: "evenodd", d: "M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z", clipRule: "evenodd" }) }),
-                /* @__PURE__ */ jsx24("span", { className: "text-[8px] text-neutral-500 dark:text-neutral-400 mt-1 px-1 truncate max-w-full", children: file.name.length > 12 ? file.name.slice(0, 12) + "..." : file.name })
+              ) : /* @__PURE__ */ jsxs22("div", { className: "w-20 h-20 flex flex-col items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-neutral-50 dark:bg-neutral-800", children: [
+                /* @__PURE__ */ jsx28("svg", { className: "w-8 h-8 text-neutral-500 dark:text-neutral-400", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx28("path", { fillRule: "evenodd", d: "M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z", clipRule: "evenodd" }) }),
+                /* @__PURE__ */ jsx28("span", { className: "text-[8px] text-neutral-500 dark:text-neutral-400 mt-1 px-1 truncate max-w-full", children: file.name.length > 12 ? file.name.slice(0, 12) + "..." : file.name })
               ] }),
-              /* @__PURE__ */ jsx24(
+              /* @__PURE__ */ jsx28(
                 "button",
                 {
                   onClick: () => removeFile(index),
                   className: "absolute -top-2 -right-2 w-6 h-6 bg-red-500 hover:bg-red-600 text-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity",
                   title: `Remove ${file.type}`,
-                  children: /* @__PURE__ */ jsx24("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx24("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                  children: /* @__PURE__ */ jsx28("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx28("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
                 }
               )
             ] }, index)) })
           ] }),
-          state === "idle" && allowInput && isCompact && /* @__PURE__ */ jsxs18(Fragment6, { children: [
-            /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-0.5 flex-shrink-0", children: [
-              enableFileUpload && /* @__PURE__ */ jsx24(
+          state === "idle" && allowInput && isCompact && /* @__PURE__ */ jsxs22(Fragment7, { children: [
+            /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-0.5 flex-shrink-0", children: [
+              enableFileUpload && /* @__PURE__ */ jsx28(
                 "button",
                 {
                   onClick: () => fileInputRef.current?.click(),
                   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__ */ jsx24("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx24("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)" }) })
+                  children: /* @__PURE__ */ jsx28("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx28("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)" }) })
                 }
               ),
-              planMode && /* @__PURE__ */ jsxs18("div", { className: "relative settings-menu-container", children: [
-                /* @__PURE__ */ jsx24(
+              planMode && /* @__PURE__ */ jsxs22("div", { className: "relative settings-menu-container", children: [
+                /* @__PURE__ */ jsx28(
                   "button",
                   {
                     onClick: () => setShowSettingsMenu(!showSettingsMenu),
@@ -4674,28 +5077,28 @@ ${planToExecute}`;
                       internalPlanMode ? "!text-blue-600 dark:!text-blue-400" : "!text-neutral-500 dark:!text-neutral-500"
                     ),
                     title: "Settings",
-                    children: /* @__PURE__ */ jsxs18("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                      /* @__PURE__ */ jsx24("line", { x1: "4", y1: "21", x2: "4", y2: "14" }),
-                      /* @__PURE__ */ jsx24("line", { x1: "4", y1: "10", x2: "4", y2: "3" }),
-                      /* @__PURE__ */ jsx24("line", { x1: "12", y1: "21", x2: "12", y2: "12" }),
-                      /* @__PURE__ */ jsx24("line", { x1: "12", y1: "8", x2: "12", y2: "3" }),
-                      /* @__PURE__ */ jsx24("line", { x1: "20", y1: "21", x2: "20", y2: "16" }),
-                      /* @__PURE__ */ jsx24("line", { x1: "20", y1: "12", x2: "20", y2: "3" }),
-                      /* @__PURE__ */ jsx24("line", { x1: "1", y1: "14", x2: "7", y2: "14" }),
-                      /* @__PURE__ */ jsx24("line", { x1: "9", y1: "8", x2: "15", y2: "8" }),
-                      /* @__PURE__ */ jsx24("line", { x1: "17", y1: "16", x2: "23", y2: "16" })
+                    children: /* @__PURE__ */ jsxs22("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                      /* @__PURE__ */ jsx28("line", { x1: "4", y1: "21", x2: "4", y2: "14" }),
+                      /* @__PURE__ */ jsx28("line", { x1: "4", y1: "10", x2: "4", y2: "3" }),
+                      /* @__PURE__ */ jsx28("line", { x1: "12", y1: "21", x2: "12", y2: "12" }),
+                      /* @__PURE__ */ jsx28("line", { x1: "12", y1: "8", x2: "12", y2: "3" }),
+                      /* @__PURE__ */ jsx28("line", { x1: "20", y1: "21", x2: "20", y2: "16" }),
+                      /* @__PURE__ */ jsx28("line", { x1: "20", y1: "12", x2: "20", y2: "3" }),
+                      /* @__PURE__ */ jsx28("line", { x1: "1", y1: "14", x2: "7", y2: "14" }),
+                      /* @__PURE__ */ jsx28("line", { x1: "9", y1: "8", x2: "15", y2: "8" }),
+                      /* @__PURE__ */ jsx28("line", { x1: "17", y1: "16", x2: "23", y2: "16" })
                     ] })
                   }
                 ),
-                showSettingsMenu && /* @__PURE__ */ jsx24("div", { className: "absolute top-10 left-0 z-50 w-56 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow-lg p-2.5 settings-menu-container", children: /* @__PURE__ */ jsxs18("label", { className: "flex items-center justify-between cursor-pointer group", children: [
-                  /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsx24("svg", { className: "w-3.5 h-3.5 text-neutral-500 dark:text-neutral-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx24("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" }) }),
-                    /* @__PURE__ */ jsxs18("div", { children: [
-                      /* @__PURE__ */ jsx24("div", { className: "text-xs font-medium text-neutral-700 dark:text-neutral-300", children: "Plan Mode" }),
-                      /* @__PURE__ */ jsx24("div", { className: "text-[10px] text-neutral-500 dark:text-neutral-400", children: "Review first" })
+                showSettingsMenu && /* @__PURE__ */ jsx28("div", { className: "absolute top-10 left-0 z-50 w-56 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow-lg p-2.5 settings-menu-container", children: /* @__PURE__ */ jsxs22("label", { className: "flex items-center justify-between cursor-pointer group", children: [
+                  /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx28("svg", { className: "w-3.5 h-3.5 text-neutral-500 dark:text-neutral-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx28("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" }) }),
+                    /* @__PURE__ */ jsxs22("div", { children: [
+                      /* @__PURE__ */ jsx28("div", { className: "text-xs font-medium text-neutral-700 dark:text-neutral-300", children: "Plan Mode" }),
+                      /* @__PURE__ */ jsx28("div", { className: "text-[10px] text-neutral-500 dark:text-neutral-400", children: "Review first" })
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsx24(
+                  /* @__PURE__ */ jsx28(
                     "button",
                     {
                       onClick: (e) => {
@@ -4707,7 +5110,7 @@ ${planToExecute}`;
                         internalPlanMode ? "bg-blue-600" : "bg-neutral-300 dark:bg-neutral-600"
                       ),
                       type: "button",
-                      children: /* @__PURE__ */ jsx24(
+                      children: /* @__PURE__ */ jsx28(
                         "span",
                         {
                           className: cn(
@@ -4721,26 +5124,26 @@ ${planToExecute}`;
                 ] }) })
               ] })
             ] }),
-            uploadedFiles.length > 0 && /* @__PURE__ */ jsx24("div", { className: "flex gap-1 flex-shrink-0", children: uploadedFiles.map((file, index) => /* @__PURE__ */ jsxs18("div", { className: "relative group", children: [
-              file.type === "image" ? /* @__PURE__ */ jsx24(
+            uploadedFiles.length > 0 && /* @__PURE__ */ jsx28("div", { className: "flex gap-1 flex-shrink-0", children: uploadedFiles.map((file, index) => /* @__PURE__ */ jsxs22("div", { className: "relative group", children: [
+              file.type === "image" ? /* @__PURE__ */ jsx28(
                 "img",
                 {
                   src: file.preview,
                   alt: file.name,
                   className: "w-8 h-8 object-cover rounded border border-neutral-300 dark:border-neutral-600"
                 }
-              ) : /* @__PURE__ */ jsx24("div", { className: "w-8 h-8 flex items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 bg-neutral-50 dark:bg-neutral-800", title: file.name, children: /* @__PURE__ */ jsx24("svg", { className: "w-4 h-4 text-neutral-500 dark:text-neutral-400", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx24("path", { fillRule: "evenodd", d: "M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z", clipRule: "evenodd" }) }) }),
-              /* @__PURE__ */ jsx24(
+              ) : /* @__PURE__ */ jsx28("div", { className: "w-8 h-8 flex items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 bg-neutral-50 dark:bg-neutral-800", title: file.name, children: /* @__PURE__ */ jsx28("svg", { className: "w-4 h-4 text-neutral-500 dark:text-neutral-400", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx28("path", { fillRule: "evenodd", d: "M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z", clipRule: "evenodd" }) }) }),
+              /* @__PURE__ */ jsx28(
                 "button",
                 {
                   onClick: () => removeFile(index),
                   className: "absolute -top-1 -right-1 w-4 h-4 bg-red-500 hover:bg-red-600 text-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity",
                   title: "Remove",
-                  children: /* @__PURE__ */ jsx24("svg", { className: "w-2.5 h-2.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ jsx24("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) })
+                  children: /* @__PURE__ */ jsx28("svg", { className: "w-2.5 h-2.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3, children: /* @__PURE__ */ jsx28("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) })
                 }
               )
             ] }, index)) }),
-            /* @__PURE__ */ jsx24(
+            /* @__PURE__ */ jsx28(
               "input",
               {
                 type: "text",
@@ -4756,7 +5159,7 @@ ${planToExecute}`;
                 className: "flex-1 bg-transparent border-none focus:outline-none !text-neutral-900 dark:!text-neutral-100 placeholder-neutral-400 dark:placeholder-neutral-500 py-1"
               }
             ),
-            /* @__PURE__ */ jsx24(
+            /* @__PURE__ */ jsx28(
               "button",
               {
                 onClick: () => executeCommand(),
@@ -4772,33 +5175,33 @@ ${planToExecute}`;
                   !command.trim() && "border-neutral-200 dark:border-neutral-700 !text-neutral-400 dark:!text-neutral-600"
                 ),
                 title: "Execute",
-                children: /* @__PURE__ */ jsx24("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx24("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                children: /* @__PURE__ */ jsx28("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx28("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
               }
             )
           ] }),
-          state === "loading" && !isCompact && /* @__PURE__ */ jsxs18("div", { className: "flex-1 flex flex-col items-center justify-center space-y-4 py-8", children: [
-            /* @__PURE__ */ jsx24("div", { className: "w-6 h-6 border-2 border-neutral-300 border-t-blue-500 rounded-full animate-spin" }),
-            /* @__PURE__ */ jsx24("div", { className: "text-neutral-600 dark:text-neutral-400 text-sm text-center max-w-md", children: enableStreaming && streamedContent ? streamedContent : loadingText }),
-            showProgress && /* @__PURE__ */ jsxs18("div", { className: "w-full max-w-sm", children: [
-              /* @__PURE__ */ jsx24("div", { className: "w-full bg-neutral-200 dark:bg-neutral-700 rounded-full h-1.5", children: /* @__PURE__ */ jsx24(
+          state === "loading" && !isCompact && /* @__PURE__ */ jsxs22("div", { className: "flex-1 flex flex-col items-center justify-center space-y-4 py-8", children: [
+            /* @__PURE__ */ jsx28("div", { className: "w-6 h-6 border-2 border-neutral-300 border-t-blue-500 rounded-full animate-spin" }),
+            /* @__PURE__ */ jsx28("div", { className: "text-neutral-600 dark:text-neutral-400 text-sm text-center max-w-md", children: enableStreaming && streamedContent ? streamedContent : loadingText }),
+            showProgress && /* @__PURE__ */ jsxs22("div", { className: "w-full max-w-sm", children: [
+              /* @__PURE__ */ jsx28("div", { className: "w-full bg-neutral-200 dark:bg-neutral-700 rounded-full h-1.5", children: /* @__PURE__ */ jsx28(
                 "div",
                 {
                   className: "bg-blue-500 h-1.5 rounded-full transition-all duration-300",
                   style: { width: `${progress}%` }
                 }
               ) }),
-              /* @__PURE__ */ jsxs18("p", { className: "text-xs text-neutral-500 mt-2 text-center", children: [
+              /* @__PURE__ */ jsxs22("p", { className: "text-xs text-neutral-500 mt-2 text-center", children: [
                 progress,
                 "%"
               ] })
             ] })
           ] }),
-          state === "loading" && isCompact && /* @__PURE__ */ jsxs18(Fragment6, { children: [
-            /* @__PURE__ */ jsxs18("div", { className: "flex-1 flex items-center gap-3 py-1", children: [
-              /* @__PURE__ */ jsx24("div", { className: "w-4 h-4 border-2 border-neutral-300 border-t-blue-500 rounded-full animate-spin" }),
-              /* @__PURE__ */ jsx24("div", { className: "text-neutral-600 dark:text-neutral-400 text-sm truncate", children: enableStreaming && streamedContent ? streamedContent : loadingText })
+          state === "loading" && isCompact && /* @__PURE__ */ jsxs22(Fragment7, { children: [
+            /* @__PURE__ */ jsxs22("div", { className: "flex-1 flex items-center gap-3 py-1", children: [
+              /* @__PURE__ */ jsx28("div", { className: "w-4 h-4 border-2 border-neutral-300 border-t-blue-500 rounded-full animate-spin" }),
+              /* @__PURE__ */ jsx28("div", { className: "text-neutral-600 dark:text-neutral-400 text-sm truncate", children: enableStreaming && streamedContent ? streamedContent : loadingText })
             ] }),
-            /* @__PURE__ */ jsx24(
+            /* @__PURE__ */ jsx28(
               "button",
               {
                 disabled: true,
@@ -4810,20 +5213,20 @@ ${planToExecute}`;
                   "!text-lg",
                   "opacity-30 cursor-not-allowed"
                 ),
-                children: /* @__PURE__ */ jsx24("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx24("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                children: /* @__PURE__ */ jsx28("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx28("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
               }
             )
           ] }),
-          state === "plan-pending" && !isCompact && /* @__PURE__ */ jsx24("div", { className: "flex-1 flex flex-col", children: /* @__PURE__ */ jsxs18("div", { className: "mb-4 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg", children: [
-            /* @__PURE__ */ jsxs18("div", { className: "flex items-start gap-2 mb-3", children: [
-              /* @__PURE__ */ jsx24("svg", { className: "w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx24("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" }) }),
-              /* @__PURE__ */ jsxs18("div", { className: "flex-1", children: [
-                /* @__PURE__ */ jsx24("h3", { className: "text-sm font-semibold text-blue-800 dark:text-blue-300 mb-1", children: "Proposed Plan" }),
-                /* @__PURE__ */ jsx24("div", { className: "text-blue-700 dark:text-blue-300 text-sm whitespace-pre-line leading-relaxed", children: plan })
+          state === "plan-pending" && !isCompact && /* @__PURE__ */ jsx28("div", { className: "flex-1 flex flex-col", children: /* @__PURE__ */ jsxs22("div", { className: "mb-4 p-4 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg", children: [
+            /* @__PURE__ */ jsxs22("div", { className: "flex items-start gap-2 mb-3", children: [
+              /* @__PURE__ */ jsx28("svg", { className: "w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx28("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" }) }),
+              /* @__PURE__ */ jsxs22("div", { className: "flex-1", children: [
+                /* @__PURE__ */ jsx28("h3", { className: "text-sm font-semibold text-blue-800 dark:text-blue-300 mb-1", children: "Proposed Plan" }),
+                /* @__PURE__ */ jsx28("div", { className: "text-blue-700 dark:text-blue-300 text-sm whitespace-pre-line leading-relaxed", children: plan })
               ] })
             ] }),
-            /* @__PURE__ */ jsxs18("div", { className: "flex gap-2 mt-4", children: [
-              /* @__PURE__ */ jsx24(
+            /* @__PURE__ */ jsxs22("div", { className: "flex gap-2 mt-4", children: [
+              /* @__PURE__ */ jsx28(
                 "button",
                 {
                   onClick: approvePlan,
@@ -4831,7 +5234,7 @@ ${planToExecute}`;
                   children: "Approve & Execute"
                 }
               ),
-              /* @__PURE__ */ jsx24(
+              /* @__PURE__ */ jsx28(
                 "button",
                 {
                   onClick: rejectPlan,
@@ -4841,20 +5244,20 @@ ${planToExecute}`;
               )
             ] })
           ] }) }),
-          state === "plan-pending" && isCompact && /* @__PURE__ */ jsxs18(Fragment6, { children: [
-            /* @__PURE__ */ jsxs18(
+          state === "plan-pending" && isCompact && /* @__PURE__ */ jsxs22(Fragment7, { children: [
+            /* @__PURE__ */ jsxs22(
               "button",
               {
                 onClick: () => setShowPlanDetails(true),
                 className: "flex-1 flex items-center gap-2 px-3 py-2 bg-blue-50 dark:bg-blue-900/30 hover:bg-blue-100 dark:hover:bg-blue-900/40 border border-blue-200 dark:border-blue-800 rounded-lg transition-colors",
                 children: [
-                  /* @__PURE__ */ jsx24("svg", { className: "w-4 h-4 text-blue-600 dark:text-blue-400 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx24("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" }) }),
-                  /* @__PURE__ */ jsx24("span", { className: "text-sm font-medium text-blue-700 dark:text-blue-300 truncate flex-1", children: "View Execution Plan" })
+                  /* @__PURE__ */ jsx28("svg", { className: "w-4 h-4 text-blue-600 dark:text-blue-400 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx28("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" }) }),
+                  /* @__PURE__ */ jsx28("span", { className: "text-sm font-medium text-blue-700 dark:text-blue-300 truncate flex-1", children: "View Execution Plan" })
                 ]
               }
             ),
-            /* @__PURE__ */ jsxs18("div", { className: "flex gap-2 flex-shrink-0", children: [
-              /* @__PURE__ */ jsx24(
+            /* @__PURE__ */ jsxs22("div", { className: "flex gap-2 flex-shrink-0", children: [
+              /* @__PURE__ */ jsx28(
                 "button",
                 {
                   onClick: approvePlan,
@@ -4862,7 +5265,7 @@ ${planToExecute}`;
                   children: "Approve"
                 }
               ),
-              /* @__PURE__ */ jsx24(
+              /* @__PURE__ */ jsx28(
                 "button",
                 {
                   onClick: rejectPlan,
@@ -4872,15 +5275,15 @@ ${planToExecute}`;
               )
             ] })
           ] }),
-          state === "error" && /* @__PURE__ */ jsxs18("div", { className: "flex-1 flex flex-col", children: [
-            /* @__PURE__ */ jsx24("div", { className: "mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg", children: /* @__PURE__ */ jsxs18("div", { className: "flex items-start gap-2", children: [
-              /* @__PURE__ */ jsx24("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__ */ jsx24("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
-              /* @__PURE__ */ jsxs18("div", { children: [
-                /* @__PURE__ */ jsx24("h3", { className: "text-sm font-semibold text-red-800 dark:text-red-400", children: "Error" }),
-                /* @__PURE__ */ jsx24("p", { className: "text-red-700 dark:text-red-300 text-sm mt-1", children: error?.message })
+          state === "error" && /* @__PURE__ */ jsxs22("div", { className: "flex-1 flex flex-col", children: [
+            /* @__PURE__ */ jsx28("div", { className: "mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg", children: /* @__PURE__ */ jsxs22("div", { className: "flex items-start gap-2", children: [
+              /* @__PURE__ */ jsx28("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__ */ jsx28("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+              /* @__PURE__ */ jsxs22("div", { children: [
+                /* @__PURE__ */ jsx28("h3", { className: "text-sm font-semibold text-red-800 dark:text-red-400", children: "Error" }),
+                /* @__PURE__ */ jsx28("p", { className: "text-red-700 dark:text-red-300 text-sm mt-1", children: error?.message })
               ] })
             ] }) }),
-            allowInput && /* @__PURE__ */ jsx24(
+            allowInput && /* @__PURE__ */ jsx28(
               "textarea",
               {
                 value: command,
@@ -4897,16 +5300,16 @@ ${planToExecute}`;
               }
             )
           ] }),
-          state === "success" && result && !isCompact && /* @__PURE__ */ jsx24("div", { className: "flex-1 overflow-auto", children: resultRenderer ? resultRenderer(result.data) : /* @__PURE__ */ jsxs18("div", { className: "space-y-4", children: [
-            /* @__PURE__ */ jsxs18("div", { className: "flex items-start gap-3 p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg", children: [
-              /* @__PURE__ */ jsx24("svg", { className: "w-5 h-5 text-green-600 mt-0.5 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx24("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
-              /* @__PURE__ */ jsxs18("div", { className: "flex-1", children: [
-                /* @__PURE__ */ jsx24("h3", { className: "text-sm font-semibold text-green-800 dark:text-green-400 mb-1", children: "Success" }),
-                /* @__PURE__ */ jsx24("p", { className: "text-green-700 dark:text-green-300 text-sm", children: "Command executed successfully" })
+          state === "success" && result && !isCompact && /* @__PURE__ */ jsx28("div", { className: "flex-1 overflow-auto", children: resultRenderer ? resultRenderer(result.data) : /* @__PURE__ */ jsxs22("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ jsxs22("div", { className: "flex items-start gap-3 p-3 bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg", children: [
+              /* @__PURE__ */ jsx28("svg", { className: "w-5 h-5 text-green-600 mt-0.5 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx28("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+              /* @__PURE__ */ jsxs22("div", { className: "flex-1", children: [
+                /* @__PURE__ */ jsx28("h3", { className: "text-sm font-semibold text-green-800 dark:text-green-400 mb-1", children: "Success" }),
+                /* @__PURE__ */ jsx28("p", { className: "text-green-700 dark:text-green-300 text-sm", children: "Command executed successfully" })
               ] })
             ] }),
-            result.data?.summary && /* @__PURE__ */ jsx24("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__ */ jsx24("div", { className: "space-y-3", children: result.widgets.map((widget) => /* @__PURE__ */ jsx24(
+            result.data?.summary && /* @__PURE__ */ jsx28("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__ */ jsx28("div", { className: "space-y-3", children: result.widgets.map((widget) => /* @__PURE__ */ jsx28(
               WidgetRenderer,
               {
                 widget,
@@ -4915,8 +5318,8 @@ ${planToExecute}`;
               widget.id
             )) })
           ] }) }),
-          state === "success" && result && isCompact && /* @__PURE__ */ jsxs18(Fragment6, { children: [
-            /* @__PURE__ */ jsxs18(
+          state === "success" && result && isCompact && /* @__PURE__ */ jsxs22(Fragment7, { children: [
+            /* @__PURE__ */ jsxs22(
               "div",
               {
                 className: "flex-1 flex items-center gap-2 py-1 cursor-text min-w-0",
@@ -4925,12 +5328,12 @@ ${planToExecute}`;
                   setResult(null);
                 },
                 children: [
-                  /* @__PURE__ */ jsx24("svg", { className: "w-4 h-4 text-green-600 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx24("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
-                  /* @__PURE__ */ jsx24("div", { className: "text-green-700 dark:text-green-300 text-sm truncate flex-1 min-w-0", children: resultRenderer ? resultRenderer(result.data) : result.message || "Command executed successfully" })
+                  /* @__PURE__ */ jsx28("svg", { className: "w-4 h-4 text-green-600 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx28("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+                  /* @__PURE__ */ jsx28("div", { className: "text-green-700 dark:text-green-300 text-sm truncate flex-1 min-w-0", children: resultRenderer ? resultRenderer(result.data) : result.message || "Command executed successfully" })
                 ]
               }
             ),
-            /* @__PURE__ */ jsx24(
+            /* @__PURE__ */ jsx28(
               "button",
               {
                 onClick: () => {
@@ -4946,24 +5349,24 @@ ${planToExecute}`;
                   "!text-lg"
                 ),
                 title: "New command",
-                children: /* @__PURE__ */ jsx24("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx24("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                children: /* @__PURE__ */ jsx28("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx28("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
               }
             )
           ] })
         ] }),
-        !isCompact && /* @__PURE__ */ jsxs18("div", { className: "p-3 flex items-center justify-between gap-2", children: [
-          /* @__PURE__ */ jsx24("div", { className: "flex items-center gap-1", children: state === "idle" && allowInput && /* @__PURE__ */ jsxs18(Fragment6, { children: [
-            enableFileUpload && /* @__PURE__ */ jsx24(
+        !isCompact && /* @__PURE__ */ jsxs22("div", { className: "p-3 flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsx28("div", { className: "flex items-center gap-1", children: state === "idle" && allowInput && /* @__PURE__ */ jsxs22(Fragment7, { children: [
+            enableFileUpload && /* @__PURE__ */ jsx28(
               "button",
               {
                 onClick: () => fileInputRef.current?.click(),
                 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__ */ jsx24("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx24("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)" }) })
+                children: /* @__PURE__ */ jsx28("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx28("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)" }) })
               }
             ),
-            planMode && /* @__PURE__ */ jsxs18("div", { className: "relative settings-menu-container", children: [
-              /* @__PURE__ */ jsx24(
+            planMode && /* @__PURE__ */ jsxs22("div", { className: "relative settings-menu-container", children: [
+              /* @__PURE__ */ jsx28(
                 "button",
                 {
                   onClick: () => setShowSettingsMenu(!showSettingsMenu),
@@ -4972,28 +5375,28 @@ ${planToExecute}`;
                     internalPlanMode ? "!text-blue-600 dark:!text-blue-400" : "!text-neutral-500 dark:!text-neutral-500"
                   ),
                   title: "Settings",
-                  children: /* @__PURE__ */ jsxs18("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                    /* @__PURE__ */ jsx24("line", { x1: "4", y1: "21", x2: "4", y2: "14" }),
-                    /* @__PURE__ */ jsx24("line", { x1: "4", y1: "10", x2: "4", y2: "3" }),
-                    /* @__PURE__ */ jsx24("line", { x1: "12", y1: "21", x2: "12", y2: "12" }),
-                    /* @__PURE__ */ jsx24("line", { x1: "12", y1: "8", x2: "12", y2: "3" }),
-                    /* @__PURE__ */ jsx24("line", { x1: "20", y1: "21", x2: "20", y2: "16" }),
-                    /* @__PURE__ */ jsx24("line", { x1: "20", y1: "12", x2: "20", y2: "3" }),
-                    /* @__PURE__ */ jsx24("line", { x1: "1", y1: "14", x2: "7", y2: "14" }),
-                    /* @__PURE__ */ jsx24("line", { x1: "9", y1: "8", x2: "15", y2: "8" }),
-                    /* @__PURE__ */ jsx24("line", { x1: "17", y1: "16", x2: "23", y2: "16" })
+                  children: /* @__PURE__ */ jsxs22("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                    /* @__PURE__ */ jsx28("line", { x1: "4", y1: "21", x2: "4", y2: "14" }),
+                    /* @__PURE__ */ jsx28("line", { x1: "4", y1: "10", x2: "4", y2: "3" }),
+                    /* @__PURE__ */ jsx28("line", { x1: "12", y1: "21", x2: "12", y2: "12" }),
+                    /* @__PURE__ */ jsx28("line", { x1: "12", y1: "8", x2: "12", y2: "3" }),
+                    /* @__PURE__ */ jsx28("line", { x1: "20", y1: "21", x2: "20", y2: "16" }),
+                    /* @__PURE__ */ jsx28("line", { x1: "20", y1: "12", x2: "20", y2: "3" }),
+                    /* @__PURE__ */ jsx28("line", { x1: "1", y1: "14", x2: "7", y2: "14" }),
+                    /* @__PURE__ */ jsx28("line", { x1: "9", y1: "8", x2: "15", y2: "8" }),
+                    /* @__PURE__ */ jsx28("line", { x1: "17", y1: "16", x2: "23", y2: "16" })
                   ] })
                 }
               ),
-              showSettingsMenu && /* @__PURE__ */ jsx24("div", { className: "absolute top-10 left-0 z-50 w-64 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow-lg p-3 settings-menu-container", children: /* @__PURE__ */ jsxs18("label", { className: "flex items-center justify-between cursor-pointer group", children: [
-                /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx24("svg", { className: "w-4 h-4 text-neutral-500 dark:text-neutral-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx24("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" }) }),
-                  /* @__PURE__ */ jsxs18("div", { children: [
-                    /* @__PURE__ */ jsx24("div", { className: "text-sm font-medium text-neutral-700 dark:text-neutral-300", children: "Plan Mode" }),
-                    /* @__PURE__ */ jsx24("div", { className: "text-xs text-neutral-500 dark:text-neutral-400", children: "Review before executing" })
+              showSettingsMenu && /* @__PURE__ */ jsx28("div", { className: "absolute top-10 left-0 z-50 w-64 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow-lg p-3 settings-menu-container", children: /* @__PURE__ */ jsxs22("label", { className: "flex items-center justify-between cursor-pointer group", children: [
+                /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx28("svg", { className: "w-4 h-4 text-neutral-500 dark:text-neutral-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx28("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" }) }),
+                  /* @__PURE__ */ jsxs22("div", { children: [
+                    /* @__PURE__ */ jsx28("div", { className: "text-sm font-medium text-neutral-700 dark:text-neutral-300", children: "Plan Mode" }),
+                    /* @__PURE__ */ jsx28("div", { className: "text-xs text-neutral-500 dark:text-neutral-400", children: "Review before executing" })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsx24(
+                /* @__PURE__ */ jsx28(
                   "button",
                   {
                     onClick: (e) => {
@@ -5005,7 +5408,7 @@ ${planToExecute}`;
                       internalPlanMode ? "bg-blue-600" : "bg-neutral-300 dark:bg-neutral-600"
                     ),
                     type: "button",
-                    children: /* @__PURE__ */ jsx24(
+                    children: /* @__PURE__ */ jsx28(
                       "span",
                       {
                         className: cn(
@@ -5019,9 +5422,9 @@ ${planToExecute}`;
               ] }) })
             ] })
           ] }) }),
-          !(state === "idle" && allowInput) && /* @__PURE__ */ jsx24("div", {}),
-          /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2", children: [
-            (state === "success" || state === "error") && allowInput && /* @__PURE__ */ jsx24(
+          !(state === "idle" && allowInput) && /* @__PURE__ */ jsx28("div", {}),
+          /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2", children: [
+            (state === "success" || state === "error") && allowInput && /* @__PURE__ */ jsx28(
               "button",
               {
                 onClick: resetCommand,
@@ -5029,7 +5432,7 @@ ${planToExecute}`;
                 children: "Reset"
               }
             ),
-            (state === "idle" || state === "error") && /* @__PURE__ */ jsx24(
+            (state === "idle" || state === "error") && /* @__PURE__ */ jsx28(
               "button",
               {
                 onClick: () => executeCommand(),
@@ -5045,29 +5448,29 @@ ${planToExecute}`;
                   !command.trim() && "border-neutral-200 dark:border-neutral-700 !text-neutral-400 dark:!text-neutral-600"
                 ),
                 title: state === "error" ? "Retry" : "Execute",
-                children: state === "error" ? /* @__PURE__ */ jsx24("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx24("path", { d: "M13 8C13 10.7614 10.7614 13 8 13C5.23858 13 3 10.7614 3 8C3 5.23858 5.23858 3 8 3C9.65685 3 11.1257 3.82818 12 5.09091M12 3V5.09091M12 5.09091H9.81818", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) : /* @__PURE__ */ jsx24("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx24("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                children: state === "error" ? /* @__PURE__ */ jsx28("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx28("path", { d: "M13 8C13 10.7614 10.7614 13 8 13C5.23858 13 3 10.7614 3 8C3 5.23858 5.23858 3 8 3C9.65685 3 11.1257 3.82818 12 5.09091M12 3V5.09091M12 5.09091H9.81818", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) : /* @__PURE__ */ jsx28("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx28("path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
               }
             )
           ] })
         ] }),
-        showPlanDetails && isCompact && state === "plan-pending" && /* @__PURE__ */ jsx24("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4", onClick: () => setShowPlanDetails(false), children: /* @__PURE__ */ jsxs18("div", { className: "bg-white dark:bg-neutral-900 rounded-2xl shadow-2xl max-w-2xl w-full max-h-[80vh] overflow-hidden", onClick: (e) => e.stopPropagation(), children: [
-          /* @__PURE__ */ jsxs18("div", { className: "flex items-center justify-between p-6 border-b border-neutral-200 dark:border-neutral-700", children: [
-            /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-3", children: [
-              /* @__PURE__ */ jsx24("svg", { className: "w-6 h-6 text-blue-600 dark:text-blue-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx24("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" }) }),
-              /* @__PURE__ */ jsx24("h2", { className: "text-xl font-semibold text-neutral-900 dark:text-white", children: "Proposed Execution Plan" })
+        showPlanDetails && isCompact && state === "plan-pending" && /* @__PURE__ */ jsx28("div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4", onClick: () => setShowPlanDetails(false), children: /* @__PURE__ */ jsxs22("div", { className: "bg-white dark:bg-neutral-900 rounded-2xl shadow-2xl max-w-2xl w-full max-h-[80vh] overflow-hidden", onClick: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ jsxs22("div", { className: "flex items-center justify-between p-6 border-b border-neutral-200 dark:border-neutral-700", children: [
+            /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsx28("svg", { className: "w-6 h-6 text-blue-600 dark:text-blue-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx28("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" }) }),
+              /* @__PURE__ */ jsx28("h2", { className: "text-xl font-semibold text-neutral-900 dark:text-white", children: "Proposed Execution Plan" })
             ] }),
-            /* @__PURE__ */ jsx24(
+            /* @__PURE__ */ jsx28(
               "button",
               {
                 onClick: () => setShowPlanDetails(false),
                 className: "text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors",
-                children: /* @__PURE__ */ jsx24("svg", { className: "w-6 h-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx24("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                children: /* @__PURE__ */ jsx28("svg", { className: "w-6 h-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx28("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
               }
             )
           ] }),
-          /* @__PURE__ */ jsx24("div", { className: "p-6 overflow-y-auto max-h-[calc(80vh-180px)]", children: /* @__PURE__ */ jsx24("div", { className: "prose prose-sm dark:prose-invert max-w-none", children: /* @__PURE__ */ jsx24("div", { className: "text-neutral-700 dark:text-neutral-300 whitespace-pre-line leading-relaxed", children: plan }) }) }),
-          /* @__PURE__ */ jsxs18("div", { className: "flex items-center justify-end gap-3 p-6 border-t border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-800/50", children: [
-            /* @__PURE__ */ jsx24(
+          /* @__PURE__ */ jsx28("div", { className: "p-6 overflow-y-auto max-h-[calc(80vh-180px)]", children: /* @__PURE__ */ jsx28("div", { className: "prose prose-sm dark:prose-invert max-w-none", children: /* @__PURE__ */ jsx28("div", { className: "text-neutral-700 dark:text-neutral-300 whitespace-pre-line leading-relaxed", children: plan }) }) }),
+          /* @__PURE__ */ jsxs22("div", { className: "flex items-center justify-end gap-3 p-6 border-t border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-800/50", children: [
+            /* @__PURE__ */ jsx28(
               "button",
               {
                 onClick: rejectPlan,
@@ -5075,7 +5478,7 @@ ${planToExecute}`;
                 children: "Modify Command"
               }
             ),
-            /* @__PURE__ */ jsx24(
+            /* @__PURE__ */ jsx28(
               "button",
               {
                 onClick: approvePlan,
@@ -5085,7 +5488,7 @@ ${planToExecute}`;
             )
           ] })
         ] }) }),
-        /* @__PURE__ */ jsx24(
+        /* @__PURE__ */ jsx28(
           "input",
           {
             ref: fileInputRef,
@@ -5096,7 +5499,7 @@ ${planToExecute}`;
             accept: "image/*,application/pdf,.doc,.docx,.txt"
           }
         ),
-        /* @__PURE__ */ jsx24("style", { dangerouslySetInnerHTML: {
+        /* @__PURE__ */ jsx28("style", { dangerouslySetInnerHTML: {
           __html: `
           @keyframes pulse-border {
             0%, 100% {
@@ -5117,8 +5520,8 @@ ${planToExecute}`;
 }
 
 // src/components/Prompt/Prompt.tsx
-import { useState as useState9 } from "react";
-import { jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
+import { useState as useState12 } from "react";
+import { jsx as jsx29, jsxs as jsxs23 } from "react/jsx-runtime";
 function Prompt({
   agentId,
   placeholder = "Enter your prompt...",
@@ -5135,9 +5538,9 @@ function Prompt({
   showSuggestions = false,
   className
 }) {
-  const [value, setValue] = useState9(initialValue);
-  const [isLoading, setIsLoading] = useState9(false);
-  const [suggestions] = useState9(["Plan a trip", "Write a description", "Analyze data"]);
+  const [value, setValue] = useState12(initialValue);
+  const [isLoading, setIsLoading] = useState12(false);
+  const [suggestions] = useState12(["Plan a trip", "Write a description", "Analyze data"]);
   const handleChange = (e) => {
     const newValue = e.target.value;
     if (!maxLength || newValue.length <= maxLength) {
@@ -5180,9 +5583,9 @@ function Prompt({
       handleSubmit();
     }
   };
-  return /* @__PURE__ */ jsxs19("div", { className: cn("space-y-2", className), children: [
-    /* @__PURE__ */ jsxs19("div", { className: "flex gap-2", children: [
-      /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsxs23("div", { className: cn("space-y-2", className), children: [
+    /* @__PURE__ */ jsxs23("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsx29(
         "input",
         {
           type: "text",
@@ -5195,7 +5598,7 @@ function Prompt({
           className: "flex-1 px-4 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-apteva-500 dark:bg-neutral-800 dark:border-neutral-600 dark:text-white"
         }
       ),
-      submitOn === "button" && /* @__PURE__ */ jsx25(
+      submitOn === "button" && /* @__PURE__ */ jsx29(
         "button",
         {
           onClick: handleSubmit,
@@ -5205,13 +5608,13 @@ function Prompt({
         }
       )
     ] }),
-    maxLength && /* @__PURE__ */ jsxs19("p", { className: "text-xs text-neutral-500", children: [
+    maxLength && /* @__PURE__ */ jsxs23("p", { className: "text-xs text-neutral-500", children: [
       value.length,
       " / ",
       maxLength,
       " characters"
     ] }),
-    showSuggestions && !value && /* @__PURE__ */ jsx25("div", { className: "flex flex-wrap gap-2", children: suggestions.map((suggestion, idx) => /* @__PURE__ */ jsx25(
+    showSuggestions && !value && /* @__PURE__ */ jsx29("div", { className: "flex flex-wrap gap-2", children: suggestions.map((suggestion, idx) => /* @__PURE__ */ jsx29(
       "button",
       {
         onClick: () => setValue(suggestion),
@@ -5220,16 +5623,16 @@ function Prompt({
       },
       idx
     )) }),
-    isLoading && /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2 text-sm text-neutral-500", children: [
-      /* @__PURE__ */ jsx25("div", { className: "w-4 h-4 border-2 border-apteva-500 border-t-transparent rounded-full animate-spin" }),
-      /* @__PURE__ */ jsx25("span", { children: "AI is processing your request..." })
+    isLoading && /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2 text-sm text-neutral-500", children: [
+      /* @__PURE__ */ jsx29("div", { className: "w-4 h-4 border-2 border-apteva-500 border-t-transparent rounded-full animate-spin" }),
+      /* @__PURE__ */ jsx29("span", { children: "AI is processing your request..." })
     ] })
   ] });
 }
 
 // src/components/Stream/Stream.tsx
-import { useState as useState10, useEffect as useEffect8 } from "react";
-import { jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
+import { useState as useState13, useEffect as useEffect9 } from "react";
+import { jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
 function Stream({
   agentId,
   prompt,
@@ -5245,10 +5648,10 @@ function Stream({
   typingSpeed = 30,
   className
 }) {
-  const [text, setText] = useState10("");
-  const [isStreaming, setIsStreaming] = useState10(false);
-  const [isComplete, setIsComplete] = useState10(false);
-  useEffect8(() => {
+  const [text, setText] = useState13("");
+  const [isStreaming, setIsStreaming] = useState13(false);
+  const [isComplete, setIsComplete] = useState13(false);
+  useEffect9(() => {
     if (autoStart && !isStreaming && !isComplete) {
       startStreaming();
     }
@@ -5309,7 +5712,7 @@ function Stream({
     plain: "text-neutral-900 dark:text-neutral-100"
   };
   if (!isStreaming && !isComplete) {
-    return /* @__PURE__ */ jsx26("div", { className: cn("p-4", className), children: /* @__PURE__ */ jsx26(
+    return /* @__PURE__ */ jsx30("div", { className: cn("p-4", className), children: /* @__PURE__ */ jsx30(
       "button",
       {
         onClick: startStreaming,
@@ -5318,19 +5721,19 @@ function Stream({
       }
     ) });
   }
-  return /* @__PURE__ */ jsxs20("div", { className: cn(variantClasses[variant], className), children: [
+  return /* @__PURE__ */ jsxs24("div", { className: cn(variantClasses[variant], className), children: [
     text,
-    isStreaming && showCursor && /* @__PURE__ */ jsx26("span", { className: "apteva-stream-cursor" })
+    isStreaming && showCursor && /* @__PURE__ */ jsx30("span", { className: "apteva-stream-cursor" })
   ] });
 }
 
 // src/components/Threads/ThreadList.tsx
-import { useState as useState11 } from "react";
+import { useState as useState14 } from "react";
 
 // src/components/Threads/ThreadItem.tsx
-import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
 function ThreadItem({ thread, isActive = false, onSelect, onDelete }) {
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs25(
     "div",
     {
       className: cn("apteva-thread-item", {
@@ -5338,19 +5741,19 @@ function ThreadItem({ thread, isActive = false, onSelect, onDelete }) {
       }),
       onClick: onSelect,
       children: [
-        /* @__PURE__ */ jsxs21("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ jsx27("h4", { className: "font-semibold text-neutral-900 dark:text-white truncate", children: thread.title }),
-          thread.preview && /* @__PURE__ */ jsx27("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 truncate", children: thread.preview }),
-          /* @__PURE__ */ jsxs21("div", { className: "flex items-center gap-2 mt-1 text-xs text-neutral-500", children: [
-            /* @__PURE__ */ jsxs21("span", { children: [
+        /* @__PURE__ */ jsxs25("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx31("h4", { className: "font-semibold text-neutral-900 dark:text-white truncate", children: thread.title }),
+          thread.preview && /* @__PURE__ */ jsx31("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 truncate", children: thread.preview }),
+          /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-2 mt-1 text-xs text-neutral-500", children: [
+            /* @__PURE__ */ jsxs25("span", { children: [
               thread.messageCount,
               " messages"
             ] }),
-            /* @__PURE__ */ jsx27("span", { children: "\u2022" }),
-            /* @__PURE__ */ jsx27("span", { children: formatRelativeTime(thread.updatedAt) })
+            /* @__PURE__ */ jsx31("span", { children: "\u2022" }),
+            /* @__PURE__ */ jsx31("span", { children: formatRelativeTime(thread.updatedAt) })
           ] })
         ] }),
-        onDelete && /* @__PURE__ */ jsx27(
+        onDelete && /* @__PURE__ */ jsx31(
           "button",
           {
             onClick: (e) => {
@@ -5380,7 +5783,7 @@ function formatRelativeTime(date) {
 }
 
 // src/components/Threads/ThreadList.tsx
-import { jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs26 } from "react/jsx-runtime";
 function ThreadList({
   threads,
   currentThreadId,
@@ -5389,13 +5792,13 @@ function ThreadList({
   showSearch = false,
   groupBy = "none"
 }) {
-  const [searchQuery, setSearchQuery] = useState11("");
+  const [searchQuery, setSearchQuery] = useState14("");
   const filteredThreads = threads.filter(
     (thread) => thread.title.toLowerCase().includes(searchQuery.toLowerCase()) || thread.preview?.toLowerCase().includes(searchQuery.toLowerCase())
   );
   const groupedThreads = groupBy === "date" ? groupThreadsByDate(filteredThreads) : { All: filteredThreads };
-  return /* @__PURE__ */ jsxs22("div", { className: "flex flex-col h-full", children: [
-    showSearch && /* @__PURE__ */ jsx28("div", { className: "p-3 border-b border-neutral-200 dark:border-neutral-700", children: /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsxs26("div", { className: "flex flex-col h-full", children: [
+    showSearch && /* @__PURE__ */ jsx32("div", { className: "p-3 border-b border-neutral-200 dark:border-neutral-700", children: /* @__PURE__ */ jsx32(
       "input",
       {
         type: "text",
@@ -5405,10 +5808,10 @@ function ThreadList({
         className: "w-full px-3 py-2 text-sm border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-apteva-500 dark:bg-neutral-800 dark:border-neutral-600 dark:text-white"
       }
     ) }),
-    /* @__PURE__ */ jsxs22("div", { className: "flex-1 overflow-y-auto", children: [
-      Object.entries(groupedThreads).map(([group, groupThreads]) => /* @__PURE__ */ jsxs22("div", { children: [
-        groupBy !== "none" && /* @__PURE__ */ jsx28("div", { className: "px-3 py-2 text-xs font-semibold text-neutral-500 uppercase", children: group }),
-        groupThreads.map((thread) => /* @__PURE__ */ jsx28(
+    /* @__PURE__ */ jsxs26("div", { className: "flex-1 overflow-y-auto", children: [
+      Object.entries(groupedThreads).map(([group, groupThreads]) => /* @__PURE__ */ jsxs26("div", { children: [
+        groupBy !== "none" && /* @__PURE__ */ jsx32("div", { className: "px-3 py-2 text-xs font-semibold text-neutral-500 uppercase", children: group }),
+        groupThreads.map((thread) => /* @__PURE__ */ jsx32(
           ThreadItem,
           {
             thread,
@@ -5419,9 +5822,9 @@ function ThreadList({
           thread.id
         ))
       ] }, group)),
-      filteredThreads.length === 0 && /* @__PURE__ */ jsxs22("div", { className: "p-8 text-center text-neutral-500", children: [
-        /* @__PURE__ */ jsx28("svg", { className: "w-10 h-10 mx-auto mb-2 opacity-50", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx28("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" }) }),
-        /* @__PURE__ */ jsx28("p", { children: "No conversations found" })
+      filteredThreads.length === 0 && /* @__PURE__ */ jsxs26("div", { className: "p-8 text-center text-neutral-500", children: [
+        /* @__PURE__ */ jsx32("svg", { className: "w-10 h-10 mx-auto mb-2 opacity-50", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx32("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" }) }),
+        /* @__PURE__ */ jsx32("p", { children: "No conversations found" })
       ] })
     ] })
   ] });
@@ -5453,7 +5856,7 @@ function groupThreadsByDate(threads) {
 }
 
 // src/components/Threads/Threads.tsx
-import { jsx as jsx29, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs27 } from "react/jsx-runtime";
 function Threads({
   threads,
   currentThreadId,
@@ -5472,8 +5875,8 @@ function Threads({
     tabs: "flex gap-2 border-b border-neutral-200 dark:border-neutral-700 overflow-x-auto"
   };
   if (variant === "tabs") {
-    return /* @__PURE__ */ jsxs23("div", { className: cn(variantClasses[variant], className), children: [
-      threads.slice(0, 5).map((thread) => /* @__PURE__ */ jsx29(
+    return /* @__PURE__ */ jsxs27("div", { className: cn(variantClasses[variant], className), children: [
+      threads.slice(0, 5).map((thread) => /* @__PURE__ */ jsx33(
         "button",
         {
           onClick: () => onThreadSelect?.(thread.id),
@@ -5485,7 +5888,7 @@ function Threads({
         },
         thread.id
       )),
-      showNewButton && onNewThread && /* @__PURE__ */ jsx29(
+      showNewButton && onNewThread && /* @__PURE__ */ jsx33(
         "button",
         {
           onClick: onNewThread,
@@ -5495,8 +5898,8 @@ function Threads({
       )
     ] });
   }
-  return /* @__PURE__ */ jsxs23("div", { className: cn(variantClasses[variant], "flex flex-col", className), children: [
-    showNewButton && onNewThread && /* @__PURE__ */ jsx29("div", { className: "p-3 border-b border-neutral-200 dark:border-neutral-700", children: /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsxs27("div", { className: cn(variantClasses[variant], "flex flex-col", className), children: [
+    showNewButton && onNewThread && /* @__PURE__ */ jsx33("div", { className: "p-3 border-b border-neutral-200 dark:border-neutral-700", children: /* @__PURE__ */ jsx33(
       "button",
       {
         onClick: onNewThread,
@@ -5504,7 +5907,7 @@ function Threads({
         children: "+ New Conversation"
       }
     ) }),
-    /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx33(
       ThreadList,
       {
         threads,
@@ -5519,11 +5922,11 @@ function Threads({
 }
 
 // src/components/AutoInterface/AutoInterface.tsx
-import { useState as useState13, useRef as useRef8, useCallback, useEffect as useEffect9 } from "react";
+import { useState as useState16, useRef as useRef10, useCallback as useCallback3, useEffect as useEffect10 } from "react";
 
 // src/components/AutoInterface/LayoutRenderer.tsx
-import { useState as useState12 } from "react";
-import { Fragment as Fragment7, jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
+import { useState as useState15 } from "react";
+import { Fragment as Fragment8, jsx as jsx34, jsxs as jsxs28 } from "react/jsx-runtime";
 var gapClasses = {
   none: "gap-0",
   sm: "gap-2",
@@ -5547,27 +5950,27 @@ function LayoutRenderer({ node, onAction, renderNode }) {
   const children = node.children || [];
   switch (node.layout) {
     case "page":
-      return /* @__PURE__ */ jsx30(PageLayout, { node, renderNode });
+      return /* @__PURE__ */ jsx34(PageLayout, { node, renderNode });
     case "row":
-      return /* @__PURE__ */ jsx30(RowLayout, { node, renderNode });
+      return /* @__PURE__ */ jsx34(RowLayout, { node, renderNode });
     case "columns":
-      return /* @__PURE__ */ jsx30(ColumnsLayout, { node, renderNode });
+      return /* @__PURE__ */ jsx34(ColumnsLayout, { node, renderNode });
     case "stack":
-      return /* @__PURE__ */ jsx30(StackLayout, { node, renderNode });
+      return /* @__PURE__ */ jsx34(StackLayout, { node, renderNode });
     case "sidebar":
-      return /* @__PURE__ */ jsx30(SidebarLayout, { node, renderNode });
+      return /* @__PURE__ */ jsx34(SidebarLayout, { node, renderNode });
     case "tabs":
-      return /* @__PURE__ */ jsx30(TabsLayout, { node, renderNode });
+      return /* @__PURE__ */ jsx34(TabsLayout, { node, renderNode });
     default:
-      return /* @__PURE__ */ jsx30("div", { className: "space-y-4", children: children.map((child) => /* @__PURE__ */ jsx30("div", { children: renderNode(child) }, child.id)) });
+      return /* @__PURE__ */ jsx34("div", { className: "space-y-4", children: children.map((child) => /* @__PURE__ */ jsx34("div", { children: renderNode(child) }, child.id)) });
   }
 }
 function PageLayout({ node, renderNode }) {
   const { title, padding = "md", maxWidth = "xl" } = node.props || {};
   const children = node.children || [];
-  return /* @__PURE__ */ jsxs24("div", { className: cn("w-full mx-auto", paddingClasses[padding], maxWidthClasses[maxWidth]), children: [
-    title && /* @__PURE__ */ jsx30("h1", { className: "!text-2xl font-bold !text-neutral-900 dark:!text-white mb-6", children: title }),
-    /* @__PURE__ */ jsx30("div", { className: "space-y-6", children: children.map((child) => /* @__PURE__ */ jsx30("div", { children: renderNode(child) }, child.id)) })
+  return /* @__PURE__ */ jsxs28("div", { className: cn("w-full mx-auto", paddingClasses[padding], maxWidthClasses[maxWidth]), children: [
+    title && /* @__PURE__ */ jsx34("h1", { className: "!text-2xl font-bold !text-neutral-900 dark:!text-white mb-6", children: title }),
+    /* @__PURE__ */ jsx34("div", { className: "space-y-6", children: children.map((child) => /* @__PURE__ */ jsx34("div", { children: renderNode(child) }, child.id)) })
   ] });
 }
 function RowLayout({ node, renderNode }) {
@@ -5580,12 +5983,12 @@ function RowLayout({ node, renderNode }) {
     end: "items-end",
     stretch: "items-stretch"
   };
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx34(
     "div",
     {
       className: cn("grid", gapClasses[gap], alignClasses[align]),
       style: { gridTemplateColumns: templateColumns },
-      children: children.map((child) => /* @__PURE__ */ jsx30("div", { children: renderNode(child) }, child.id))
+      children: children.map((child) => /* @__PURE__ */ jsx34("div", { children: renderNode(child) }, child.id))
     }
   );
 }
@@ -5593,12 +5996,12 @@ function ColumnsLayout({ node, renderNode }) {
   const { count, gap = "md" } = node.props || {};
   const children = node.children || [];
   const colCount = count || children.length;
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx34(
     "div",
     {
       className: cn("grid", gapClasses[gap]),
       style: { gridTemplateColumns: `repeat(${colCount}, 1fr)` },
-      children: children.map((child) => /* @__PURE__ */ jsx30("div", { children: renderNode(child) }, child.id))
+      children: children.map((child) => /* @__PURE__ */ jsx34("div", { children: renderNode(child) }, child.id))
     }
   );
 }
@@ -5611,14 +6014,14 @@ function StackLayout({ node, renderNode }) {
     right: "items-end",
     stretch: "items-stretch"
   };
-  return /* @__PURE__ */ jsx30("div", { className: cn("flex flex-col", gapClasses[gap], alignClasses[align]), children: children.map((child) => /* @__PURE__ */ jsx30("div", { children: renderNode(child) }, child.id)) });
+  return /* @__PURE__ */ jsx34("div", { className: cn("flex flex-col", gapClasses[gap], alignClasses[align]), children: children.map((child) => /* @__PURE__ */ jsx34("div", { children: renderNode(child) }, child.id)) });
 }
 function SidebarLayout({ node, renderNode }) {
   const { side = "left", width = "280px" } = node.props || {};
   const children = node.children || [];
   const [sidebarChild, ...mainChildren] = side === "left" ? children : [...children].reverse();
   if (!sidebarChild) return null;
-  const sidebar = /* @__PURE__ */ jsx30(
+  const sidebar = /* @__PURE__ */ jsx34(
     "div",
     {
       className: "flex-shrink-0 overflow-y-auto border-neutral-200 dark:border-neutral-700",
@@ -5626,11 +6029,11 @@ function SidebarLayout({ node, renderNode }) {
       children: renderNode(sidebarChild)
     }
   );
-  const main = /* @__PURE__ */ jsx30("div", { className: "flex-1 overflow-y-auto min-w-0", children: mainChildren.map((child) => /* @__PURE__ */ jsx30("div", { children: renderNode(child) }, child.id)) });
-  return /* @__PURE__ */ jsx30("div", { className: "flex h-full gap-4", children: side === "left" ? /* @__PURE__ */ jsxs24(Fragment7, { children: [
+  const main = /* @__PURE__ */ jsx34("div", { className: "flex-1 overflow-y-auto min-w-0", children: mainChildren.map((child) => /* @__PURE__ */ jsx34("div", { children: renderNode(child) }, child.id)) });
+  return /* @__PURE__ */ jsx34("div", { className: "flex h-full gap-4", children: side === "left" ? /* @__PURE__ */ jsxs28(Fragment8, { children: [
     sidebar,
     main
-  ] }) : /* @__PURE__ */ jsxs24(Fragment7, { children: [
+  ] }) : /* @__PURE__ */ jsxs28(Fragment8, { children: [
     main,
     sidebar
   ] }) });
@@ -5638,9 +6041,9 @@ function SidebarLayout({ node, renderNode }) {
 function TabsLayout({ node, renderNode }) {
   const { labels = [], defaultTab = 0 } = node.props || {};
   const children = node.children || [];
-  const [activeTab, setActiveTab] = useState12(defaultTab);
-  return /* @__PURE__ */ jsxs24("div", { children: [
-    /* @__PURE__ */ jsx30("div", { className: "flex border-b border-neutral-200 dark:border-neutral-700 mb-4", children: labels.map((label, idx) => /* @__PURE__ */ jsx30(
+  const [activeTab, setActiveTab] = useState15(defaultTab);
+  return /* @__PURE__ */ jsxs28("div", { children: [
+    /* @__PURE__ */ jsx34("div", { className: "flex border-b border-neutral-200 dark:border-neutral-700 mb-4", children: labels.map((label, idx) => /* @__PURE__ */ jsx34(
       "button",
       {
         onClick: () => setActiveTab(idx),
@@ -5657,7 +6060,7 @@ function TabsLayout({ node, renderNode }) {
 }
 
 // src/components/AutoInterface/InterfaceRenderer.tsx
-import { Fragment as Fragment8, jsx as jsx31 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx35 } from "react/jsx-runtime";
 var STRUCTURAL_KEYS = /* @__PURE__ */ new Set(["type", "id", "layout", "props", "children", "actions", "metadata", "isStreaming"]);
 function normalizeNode(n) {
   let node = { ...n };
@@ -5687,7 +6090,7 @@ function InterfaceRenderer({ node, onAction }) {
   const renderNode = (rawNode) => {
     const n = normalizeNode(rawNode);
     if (n.type === "layout" && n.layout) {
-      return /* @__PURE__ */ jsx31(
+      return /* @__PURE__ */ jsx35(
         LayoutRenderer,
         {
           node: n,
@@ -5697,7 +6100,7 @@ function InterfaceRenderer({ node, onAction }) {
         n.id
       );
     }
-    return /* @__PURE__ */ jsx31(
+    return /* @__PURE__ */ jsx35(
       WidgetRenderer,
       {
         widget: {
@@ -5713,33 +6116,33 @@ function InterfaceRenderer({ node, onAction }) {
       n.id
     );
   };
-  return /* @__PURE__ */ jsx31(Fragment8, { children: renderNode(node) });
+  return /* @__PURE__ */ jsx35(Fragment9, { children: renderNode(node) });
 }
 
 // src/components/AutoInterface/InterfaceSkeleton.tsx
-import { jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs29 } from "react/jsx-runtime";
 function InterfaceSkeleton({ className }) {
-  return /* @__PURE__ */ jsxs25("div", { className: cn("animate-pulse space-y-6 p-6", className), children: [
-    /* @__PURE__ */ jsx32("div", { className: "h-7 bg-neutral-200 dark:bg-neutral-700 rounded w-1/3" }),
-    /* @__PURE__ */ jsx32("div", { className: "grid grid-cols-4 gap-4", children: [1, 2, 3, 4].map((i) => /* @__PURE__ */ jsxs25("div", { className: "border border-neutral-200 dark:border-neutral-700 rounded-xl p-5 space-y-2", children: [
-      /* @__PURE__ */ jsx32("div", { className: "h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-2/3" }),
-      /* @__PURE__ */ jsx32("div", { className: "h-8 bg-neutral-200 dark:bg-neutral-700 rounded w-1/2" })
+  return /* @__PURE__ */ jsxs29("div", { className: cn("animate-pulse space-y-6 p-6", className), children: [
+    /* @__PURE__ */ jsx36("div", { className: "h-7 bg-neutral-200 dark:bg-neutral-700 rounded w-1/3" }),
+    /* @__PURE__ */ jsx36("div", { className: "grid grid-cols-4 gap-4", children: [1, 2, 3, 4].map((i) => /* @__PURE__ */ jsxs29("div", { className: "border border-neutral-200 dark:border-neutral-700 rounded-xl p-5 space-y-2", children: [
+      /* @__PURE__ */ jsx36("div", { className: "h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-2/3" }),
+      /* @__PURE__ */ jsx36("div", { className: "h-8 bg-neutral-200 dark:bg-neutral-700 rounded w-1/2" })
     ] }, i)) }),
-    /* @__PURE__ */ jsxs25("div", { className: "grid grid-cols-3 gap-4", children: [
-      /* @__PURE__ */ jsxs25("div", { className: "col-span-2 border border-neutral-200 dark:border-neutral-700 rounded-xl p-5 space-y-3", children: [
-        /* @__PURE__ */ jsx32("div", { className: "h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-1/4" }),
-        /* @__PURE__ */ jsx32("div", { className: "h-40 bg-neutral-200 dark:bg-neutral-700 rounded" })
+    /* @__PURE__ */ jsxs29("div", { className: "grid grid-cols-3 gap-4", children: [
+      /* @__PURE__ */ jsxs29("div", { className: "col-span-2 border border-neutral-200 dark:border-neutral-700 rounded-xl p-5 space-y-3", children: [
+        /* @__PURE__ */ jsx36("div", { className: "h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-1/4" }),
+        /* @__PURE__ */ jsx36("div", { className: "h-40 bg-neutral-200 dark:bg-neutral-700 rounded" })
       ] }),
-      /* @__PURE__ */ jsxs25("div", { className: "border border-neutral-200 dark:border-neutral-700 rounded-xl p-5 space-y-3", children: [
-        /* @__PURE__ */ jsx32("div", { className: "h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-1/2" }),
-        [1, 2, 3].map((i) => /* @__PURE__ */ jsx32("div", { className: "h-10 bg-neutral-200 dark:bg-neutral-700 rounded" }, i))
+      /* @__PURE__ */ jsxs29("div", { className: "border border-neutral-200 dark:border-neutral-700 rounded-xl p-5 space-y-3", children: [
+        /* @__PURE__ */ jsx36("div", { className: "h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-1/2" }),
+        [1, 2, 3].map((i) => /* @__PURE__ */ jsx36("div", { className: "h-10 bg-neutral-200 dark:bg-neutral-700 rounded" }, i))
       ] })
     ] })
   ] });
 }
 
 // src/components/AutoInterface/AutoInterface.tsx
-import { jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs30 } from "react/jsx-runtime";
 async function generateInitialInterface(apiUrl, apiKey, agentId, prompt) {
   const systemContext = generateCompactInterfaceContext();
   const message = `${systemContext}
@@ -5789,19 +6192,19 @@ function AutoInterface({
   theme,
   className
 }) {
-  const [interfaceSpec, setInterfaceSpec] = useState13(initialInterface || null);
-  const [isGenerating, setIsGenerating] = useState13(false);
-  const [chatCollapsed, setChatCollapsed] = useState13(false);
-  const chatRef = useRef8(null);
+  const [interfaceSpec, setInterfaceSpec] = useState16(initialInterface || null);
+  const [isGenerating, setIsGenerating] = useState16(false);
+  const [chatCollapsed, setChatCollapsed] = useState16(false);
+  const chatRef = useRef10(null);
   const systemContext = [
     generateInterfaceContext(),
     context || ""
   ].filter(Boolean).join("\n\n");
-  const updateInterface = useCallback((newSpec) => {
+  const updateInterface = useCallback3((newSpec) => {
     setInterfaceSpec(newSpec);
     onInterfaceChange?.(newSpec);
   }, [onInterfaceChange]);
-  const handleAction = useCallback((action) => {
+  const handleAction = useCallback3((action) => {
     onAction?.(action);
     if (chatRef.current) {
       chatRef.current.sendMessage(
@@ -5809,7 +6212,7 @@ function AutoInterface({
       );
     }
   }, [onAction]);
-  const handleMessageComplete = useCallback((result) => {
+  const handleMessageComplete = useCallback3((result) => {
     if (!result?.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));
@@ -5830,7 +6233,7 @@ function AutoInterface({
     }
     setIsGenerating(false);
   }, [interfaceSpec, updateInterface]);
-  useEffect9(() => {
+  useEffect10(() => {
     if (!initialPrompt || initialInterface || useMock) return;
     if (!apiUrl) return;
     let cancelled = false;
@@ -5859,17 +6262,17 @@ function AutoInterface({
   }, [initialPrompt]);
   const hasInterface = interfaceSpec !== null;
   const showSkeleton = isGenerating && !hasInterface;
-  return /* @__PURE__ */ jsxs26("div", { className: cn(
+  return /* @__PURE__ */ jsxs30("div", { className: cn(
     "flex h-full bg-neutral-50 dark:bg-black",
     chatPosition === "bottom" ? "flex-col" : "flex-row",
     className
   ), children: [
-    /* @__PURE__ */ jsxs26("div", { className: cn(
+    /* @__PURE__ */ jsxs30("div", { className: cn(
       "flex-1 overflow-y-auto min-w-0",
       hasInterface || showSkeleton ? "" : "hidden"
     ), children: [
-      showSkeleton && /* @__PURE__ */ jsx33(InterfaceSkeleton, {}),
-      hasInterface && interfaceSpec && /* @__PURE__ */ jsx33("div", { className: "p-4", children: /* @__PURE__ */ jsx33(
+      showSkeleton && /* @__PURE__ */ jsx37(InterfaceSkeleton, {}),
+      hasInterface && interfaceSpec && /* @__PURE__ */ jsx37("div", { className: "p-4", children: /* @__PURE__ */ jsx37(
         InterfaceRenderer,
         {
           node: interfaceSpec.root,
@@ -5877,16 +6280,16 @@ function AutoInterface({
         }
       ) })
     ] }),
-    chatCollapsible && hasInterface && chatPosition === "right" && /* @__PURE__ */ jsx33(
+    chatCollapsible && hasInterface && chatPosition === "right" && /* @__PURE__ */ jsx37(
       "button",
       {
         onClick: () => setChatCollapsed(!chatCollapsed),
         className: "flex-shrink-0 w-6 flex items-center justify-center border-l border-neutral-200 dark:border-neutral-700 bg-neutral-100 dark:bg-neutral-800 hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors",
         title: chatCollapsed ? "Show chat" : "Hide chat",
-        children: /* @__PURE__ */ jsx33("span", { className: "!text-xs !text-neutral-500 dark:!text-neutral-400", children: chatCollapsed ? "\u25C0" : "\u25B6" })
+        children: /* @__PURE__ */ jsx37("span", { className: "!text-xs !text-neutral-500 dark:!text-neutral-400", children: chatCollapsed ? "\u25C0" : "\u25B6" })
       }
     ),
-    /* @__PURE__ */ jsx33(
+    /* @__PURE__ */ jsx37(
       "div",
       {
         className: cn(
@@ -5897,7 +6300,7 @@ function AutoInterface({
           !hasInterface && !showSkeleton && "flex-1"
         ),
         style: hasInterface || showSkeleton ? chatPosition === "right" ? { width: chatWidth } : { height: "300px" } : void 0,
-        children: /* @__PURE__ */ jsx33(
+        children: /* @__PURE__ */ jsx37(
           Chat,
           {
             ref: chatRef,
@@ -5955,29 +6358,29 @@ function getThemeScript() {
 }
 
 // src/hooks/useInterfaceState.ts
-import { useState as useState14, useCallback as useCallback2 } from "react";
+import { useState as useState17, useCallback as useCallback4 } from "react";
 function useInterfaceState(initialSpec) {
-  const [spec, setSpec] = useState14(initialSpec || null);
-  const [isStreaming, setIsStreaming] = useState14(false);
-  const setInterface = useCallback2((newSpec) => {
+  const [spec, setSpec] = useState17(initialSpec || null);
+  const [isStreaming, setIsStreaming] = useState17(false);
+  const setInterface = useCallback4((newSpec) => {
     setSpec(newSpec);
   }, []);
-  const clearInterface = useCallback2(() => {
+  const clearInterface = useCallback4(() => {
     setSpec(null);
   }, []);
-  const applyInterfaceUpdate = useCallback2((update) => {
+  const applyInterfaceUpdate = useCallback4((update) => {
     setSpec((prev) => {
       if (!prev) return prev;
       return applyUpdate(prev, update);
     });
   }, []);
-  const applyInterfaceUpdates = useCallback2((updates) => {
+  const applyInterfaceUpdates = useCallback4((updates) => {
     setSpec((prev) => {
       if (!prev) return prev;
       return applyUpdates(prev, updates);
     });
   }, []);
-  const getNode = useCallback2((id) => {
+  const getNode = useCallback4((id) => {
     if (!spec) return null;
     return findNode(spec.root, id);
   }, [spec]);
@@ -5994,7 +6397,7 @@ function useInterfaceState(initialSpec) {
 }
 
 // src/hooks/useInterfaceAI.ts
-import { useCallback as useCallback3, useRef as useRef9 } from "react";
+import { useCallback as useCallback5, useRef as useRef11 } from "react";
 function useInterfaceAI({
   agentId,
   apiUrl,
@@ -6006,15 +6409,15 @@ function useInterfaceAI({
   onStreamStart,
   onStreamEnd
 }) {
-  const threadIdRef = useRef9(null);
-  const accumulatedTextRef = useRef9("");
+  const threadIdRef = useRef11(null);
+  const accumulatedTextRef = useRef11("");
   if (apiUrl || apiKey) {
     aptevaClient.configure({
       ...apiUrl && { apiUrl },
       ...apiKey && { apiKey }
     });
   }
-  const sendMessage = useCallback3(async (message) => {
+  const sendMessage = useCallback5(async (message) => {
     accumulatedTextRef.current = "";
     onStreamStart?.();
     const systemPrompt = [
@@ -6079,6 +6482,8 @@ export {
   Kpi,
   LayoutRenderer,
   List,
+  LiveView,
+  PersistentWidgetPanel,
   Prompt,
   Spacer,
   Stream,