@apteva/apteva-kit 0.1.110 → 0.1.112

package/dist/index.js

@@ -1439,7 +1439,273 @@ function Table({ widget, onAction }) {
 
 // src/components/Widgets/widget-library/Form.tsx
 
-
+var _reactdom = require('react-dom');
+
+function PortalDropdown({
+  anchorRef,
+  open,
+  onClose,
+  width,
+  children
+}) {
+  const dropdownRef = _react.useRef.call(void 0, null);
+  const [pos, setPos] = _react.useState.call(void 0, { top: 0, left: 0, width: 0 });
+  _react.useEffect.call(void 0, () => {
+    if (!open || !anchorRef.current) return;
+    const update = () => {
+      const rect = anchorRef.current.getBoundingClientRect();
+      setPos({
+        top: rect.bottom + window.scrollY + 4,
+        left: rect.left + window.scrollX,
+        width: rect.width
+      });
+    };
+    update();
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+    };
+  }, [open, anchorRef]);
+  _react.useEffect.call(void 0, () => {
+    if (!open) return;
+    const handler = (e) => {
+      const target = e.target;
+      if (dropdownRef.current && !dropdownRef.current.contains(target) && anchorRef.current && !anchorRef.current.contains(target)) {
+        onClose();
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open, onClose, anchorRef]);
+  _react.useEffect.call(void 0, () => {
+    if (!open) return;
+    const handler = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [open, onClose]);
+  if (!open) return null;
+  return _reactdom.createPortal.call(void 0, 
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        ref: dropdownRef,
+        className: "apteva-widget",
+        style: {
+          position: "absolute",
+          top: pos.top,
+          left: pos.left,
+          width: width === "match" ? pos.width : void 0,
+          zIndex: 99999
+        },
+        children
+      }
+    ),
+    document.body
+  );
+}
+function CustomSelect({
+  name,
+  value,
+  options,
+  placeholder,
+  required,
+  onChange
+}) {
+  const [open, setOpen] = _react.useState.call(void 0, false);
+  const triggerRef = _react.useRef.call(void 0, null);
+  const selected = _optionalChain([options, 'optionalAccess', _18 => _18.find, 'call', _19 => _19((o) => o.value === value)]);
+  const close = _react.useCallback.call(void 0, () => setOpen(false), []);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-select relative", children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "select",
+      {
+        name,
+        value,
+        required,
+        onChange: () => {
+        },
+        tabIndex: -1,
+        className: "absolute inset-0 opacity-0 pointer-events-none",
+        "aria-hidden": true,
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: "" }),
+          _optionalChain([options, 'optionalAccess', _20 => _20.map, 'call', _21 => _21((o) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: o.value, children: o.label }, o.value))])
+        ]
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        onClick: () => setOpen(!open),
+        className: "apteva-select-trigger w-full flex items-center justify-between px-3 py-2 rounded-lg border transition-colors text-left",
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: selected ? "apteva-select-value" : "apteva-select-placeholder", children: selected ? selected.label : placeholder || "Select..." }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "svg",
+            {
+              className: `apteva-select-chevron w-4 h-4 flex-shrink-0 transition-transform ${open ? "rotate-180" : ""}`,
+              fill: "none",
+              stroke: "currentColor",
+              viewBox: "0 0 24 24",
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PortalDropdown, { anchorRef: triggerRef, open, onClose: close, width: "match", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-select-dropdown rounded-lg border shadow-lg overflow-hidden", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "max-h-48 overflow-y-auto py-1", children: [
+      _optionalChain([options, 'optionalAccess', _22 => _22.map, 'call', _23 => _23((opt) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            onChange(opt.value);
+            close();
+          },
+          className: `apteva-select-option w-full text-left px-3 py-2 text-sm transition-colors ${opt.value === value ? "apteva-select-option-active" : ""}`,
+          children: opt.label
+        },
+        opt.value
+      ))]),
+      (!options || options.length === 0) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "px-3 py-2 text-sm apteva-select-placeholder", children: "No options" })
+    ] }) }) })
+  ] });
+}
+function CustomDatePicker({
+  name,
+  value,
+  placeholder,
+  required,
+  onChange
+}) {
+  const [open, setOpen] = _react.useState.call(void 0, false);
+  const triggerRef = _react.useRef.call(void 0, null);
+  const close = _react.useCallback.call(void 0, () => setOpen(false), []);
+  const parseDate = (v) => {
+    if (v) {
+      const [y, m, d] = v.split("-").map(Number);
+      return { year: y, month: m - 1, day: d };
+    }
+    const now = /* @__PURE__ */ new Date();
+    return { year: now.getFullYear(), month: now.getMonth(), day: 0 };
+  };
+  const parsed = parseDate(value);
+  const [viewYear, setViewYear] = _react.useState.call(void 0, parsed.year);
+  const [viewMonth, setViewMonth] = _react.useState.call(void 0, parsed.month);
+  _react.useEffect.call(void 0, () => {
+    if (value) {
+      const p = parseDate(value);
+      setViewYear(p.year);
+      setViewMonth(p.month);
+    }
+  }, [value]);
+  const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
+  const firstDayOfWeek = new Date(viewYear, viewMonth, 1).getDay();
+  const startOffset = (firstDayOfWeek + 6) % 7;
+  const prevMonth = () => {
+    if (viewMonth === 0) {
+      setViewMonth(11);
+      setViewYear(viewYear - 1);
+    } else setViewMonth(viewMonth - 1);
+  };
+  const nextMonth = () => {
+    if (viewMonth === 11) {
+      setViewMonth(0);
+      setViewYear(viewYear + 1);
+    } else setViewMonth(viewMonth + 1);
+  };
+  const selectDay = (day) => {
+    const m = String(viewMonth + 1).padStart(2, "0");
+    const d = String(day).padStart(2, "0");
+    onChange(`${viewYear}-${m}-${d}`);
+    close();
+  };
+  const formatDisplay = (v) => {
+    if (!v) return "";
+    const [y, m, d] = v.split("-");
+    return `${d}/${m}/${y}`;
+  };
+  const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+  const dayLabels = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
+  const isSelected = (day) => {
+    if (!value) return false;
+    const p = parseDate(value);
+    return p.year === viewYear && p.month === viewMonth && p.day === day;
+  };
+  const isToday = (day) => {
+    const now = /* @__PURE__ */ new Date();
+    return now.getFullYear() === viewYear && now.getMonth() === viewMonth && now.getDate() === day;
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-datepicker relative", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "input",
+      {
+        type: "text",
+        name,
+        value,
+        required,
+        onChange: () => {
+        },
+        tabIndex: -1,
+        className: "absolute inset-0 opacity-0 pointer-events-none",
+        "aria-hidden": true
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        onClick: () => setOpen(!open),
+        className: "apteva-datepicker-trigger w-full flex items-center justify-between px-3 py-2 rounded-lg border transition-colors text-left",
+        children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: value ? "apteva-datepicker-value" : "apteva-select-placeholder", children: value ? formatDisplay(value) : placeholder || "Select date..." }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "apteva-select-chevron w-4 h-4 flex-shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PortalDropdown, { anchorRef: triggerRef, open, onClose: close, width: "auto", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-datepicker-dropdown rounded-lg border shadow-lg overflow-hidden", children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-datepicker-header flex items-center justify-between px-3 py-2", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { type: "button", onClick: prevMonth, className: "apteva-datepicker-nav p-1 rounded transition-colors", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) }),
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "apteva-datepicker-title text-sm font-semibold", children: [
+          monthNames[viewMonth],
+          " ",
+          viewYear
+        ] }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "button", { type: "button", onClick: nextMonth, className: "apteva-datepicker-nav p-1 rounded transition-colors", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) }) })
+      ] }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "grid grid-cols-7 px-2", children: dayLabels.map((d) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-datepicker-daylabel text-center text-xs font-medium py-1", children: d }, d)) }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "grid grid-cols-7 px-2 pb-2", children: [
+        Array.from({ length: startOffset }).map((_, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", {}, `empty-${i}`)),
+        Array.from({ length: daysInMonth }).map((_, i) => {
+          const day = i + 1;
+          const sel = isSelected(day);
+          const today = isToday(day);
+          return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "button",
+            {
+              type: "button",
+              onClick: () => selectDay(day),
+              className: [
+                "apteva-datepicker-day text-center text-sm py-1 rounded transition-colors",
+                sel ? "apteva-datepicker-day-selected" : "",
+                today && !sel ? "apteva-datepicker-day-today" : ""
+              ].join(" "),
+              children: day
+            },
+            day
+          );
+        })
+      ] })
+    ] }) })
+  ] });
+}
 function Form({ widget, onAction }) {
   const { title, fields } = widget.props;
   const fileInputRefs = _react.useRef.call(void 0, {});
@@ -1454,12 +1720,12 @@ function Form({ widget, onAction }) {
     });
     return initial;
   });
-  const handleChange = (name, value) => {
+  const handleChange = _react.useCallback.call(void 0, (name, value) => {
     setFormData((prev) => ({ ...prev, [name]: value }));
-  };
+  }, []);
   const handleSubmit = (e) => {
     e.preventDefault();
-    if (_optionalChain([widget, 'access', _18 => _18.actions, 'optionalAccess', _19 => _19[0]]) && onAction) {
+    if (_optionalChain([widget, 'access', _24 => _24.actions, 'optionalAccess', _25 => _25[0]]) && onAction) {
       onAction({
         type: widget.actions[0].type,
         payload: { ...widget.actions[0].payload, formData },
@@ -1469,12 +1735,11 @@ function Form({ widget, onAction }) {
     }
   };
   const renderField = (field) => {
-    const baseInputClass = "w-full px-3 py-2 rounded-lg border transition-colors border-neutral-200 dark:border-neutral-600 bg-neutral-50 dark:bg-neutral-800 !text-neutral-900 dark:!text-neutral-100 placeholder-neutral-400 dark:placeholder-neutral-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent";
+    const baseInputClass = "apteva-input w-full px-3 py-2 rounded-lg border transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent";
     switch (field.type) {
       case "text":
       case "password":
       case "number":
-      case "date":
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "input",
           {
@@ -1487,6 +1752,17 @@ function Form({ widget, onAction }) {
             className: baseInputClass
           }
         );
+      case "date":
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          CustomDatePicker,
+          {
+            name: field.name,
+            value: formData[field.name] || "",
+            placeholder: field.placeholder,
+            required: field.required,
+            onChange: (v) => handleChange(field.name, v)
+          }
+        );
       case "textarea":
         return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "textarea",
@@ -1501,22 +1777,19 @@ function Form({ widget, onAction }) {
           }
         );
       case "select":
-        return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-          "select",
+        return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          CustomSelect,
           {
             name: field.name,
             value: formData[field.name] || "",
-            onChange: (e) => handleChange(field.name, e.target.value),
+            options: field.options,
+            placeholder: field.placeholder,
             required: field.required,
-            className: baseInputClass,
-            children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: "", children: field.placeholder || "Select..." }),
-              _optionalChain([field, 'access', _20 => _20.options, 'optionalAccess', _21 => _21.map, 'call', _22 => _22((opt) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "option", { value: opt.value, children: opt.label }, opt.value))])
-            ]
+            onChange: (v) => handleChange(field.name, v)
           }
         );
       case "checkbox":
-        return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { className: "flex items-center gap-2 cursor-pointer", children: [
+        return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { className: "apteva-checkbox flex items-center gap-2 cursor-pointer", children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             "input",
             {
@@ -1524,10 +1797,10 @@ function Form({ widget, onAction }) {
               name: field.name,
               checked: formData[field.name] || false,
               onChange: (e) => handleChange(field.name, e.target.checked),
-              className: "w-4 h-4 rounded border-neutral-300 dark:border-neutral-600 text-blue-500 focus:ring-blue-500"
+              className: "w-4 h-4 rounded"
             }
           ),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "!text-neutral-700 dark:!text-neutral-300", children: field.label })
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: field.label })
         ] });
       case "file": {
         const files = formData[field.name] || [];
@@ -1560,19 +1833,19 @@ function Form({ widget, onAction }) {
             "button",
             {
               type: "button",
-              onClick: () => _optionalChain([fileInputRefs, 'access', _23 => _23.current, 'access', _24 => _24[field.name], 'optionalAccess', _25 => _25.click, 'call', _26 => _26()]),
-              className: "apteva-file-drop 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",
+              onClick: () => _optionalChain([fileInputRefs, 'access', _26 => _26.current, 'access', _27 => _27[field.name], 'optionalAccess', _28 => _28.click, 'call', _29 => _29()]),
+              className: "apteva-file-drop w-full px-3 py-3 rounded-lg border-2 border-dashed transition-colors cursor-pointer !text-sm",
               children: field.placeholder || "Click to add files"
             }
           ),
           files.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "ul", { className: "space-y-1", children: files.map((file, idx) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
             "li",
             {
-              className: "apteva-file-item-row flex items-center justify-between px-2 py-1.5 rounded-lg bg-neutral-50 dark:bg-neutral-800 !text-sm",
+              className: "apteva-file-item-row flex items-center justify-between px-2 py-1.5 rounded-lg !text-sm",
               children: [
-                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "!text-neutral-700 dark:!text-neutral-300 truncate mr-2", children: [
+                /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "truncate mr-2", children: [
                   file.name,
-                  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "!text-neutral-400 ml-1", children: [
+                  /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { className: "ml-1", style: { opacity: 0.6 }, children: [
                     "(",
                     (file.size / 1024).toFixed(0),
                     " KB)"
@@ -1583,7 +1856,7 @@ function Form({ widget, onAction }) {
                   {
                     type: "button",
                     onClick: () => handleChange(field.name, files.filter((_, i) => i !== idx)),
-                    className: "apteva-file-remove-btn !text-neutral-400 hover:!text-red-500 transition-colors flex-shrink-0",
+                    className: "apteva-file-remove-btn transition-colors flex-shrink-0",
                     children: "\u2715"
                   }
                 )
@@ -1597,14 +1870,14 @@ function Form({ widget, onAction }) {
         return null;
     }
   };
-  const submitAction = _optionalChain([widget, 'access', _27 => _27.actions, 'optionalAccess', _28 => _28.find, 'call', _29 => _29((a) => a.type === "submit")]) || _optionalChain([widget, 'access', _30 => _30.actions, 'optionalAccess', _31 => _31[0]]);
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { onSubmit: handleSubmit, className: "border border-neutral-200 dark:border-neutral-700 rounded-xl bg-white dark:bg-neutral-900 overflow-hidden", children: [
+  const submitAction = _optionalChain([widget, 'access', _30 => _30.actions, 'optionalAccess', _31 => _31.find, 'call', _32 => _32((a) => a.type === "submit")]) || _optionalChain([widget, 'access', _33 => _33.actions, 'optionalAccess', _34 => _34[0]]);
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "form", { onSubmit: handleSubmit, className: "border rounded-xl overflow-hidden", children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "p-4", children: [
-      title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "!text-lg font-semibold !text-neutral-900 dark:!text-white mb-4", children: title }),
+      title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "!text-lg font-semibold mb-4", children: title }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "space-y-3", children: fields.map((field) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: field.type === "checkbox" ? "" : "space-y-1", children: [
-        field.type !== "checkbox" && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { className: "block !text-sm font-medium !text-neutral-600 dark:!text-neutral-400", children: [
+        field.type !== "checkbox" && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { className: "apteva-field-label block !text-sm font-medium", children: [
           field.label,
-          field.required && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-red-500 ml-1", children: "*" })
+          field.required && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { style: { color: "var(--aw-danger)" }, className: "ml-1", children: "*" })
         ] }),
         renderField(field)
       ] }, field.name)) })
@@ -1613,7 +1886,7 @@ function Form({ widget, onAction }) {
       "button",
       {
         type: "submit",
-        className: "px-3 py-1.5 !text-sm rounded-lg font-medium transition-colors bg-blue-500 !text-white hover:bg-blue-600",
+        className: "px-3 py-1.5 !text-sm rounded-lg font-medium transition-colors",
         children: submitAction.label || "Submit"
       }
     ) })
@@ -1657,7 +1930,7 @@ function StepIcon({ type, status }) {
   if (type === "recurring" || type === "repeat") {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: iconClass, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) });
   }
-  if (type === "agent" || _optionalChain([type, 'optionalAccess', _32 => _32.startsWith, 'call', _33 => _33("@")])) {
+  if (type === "agent" || _optionalChain([type, 'optionalAccess', _35 => _35.startsWith, 'call', _36 => _36("@")])) {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: iconClass, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" }) });
   }
   if (type === "email" || type === "mail") {
@@ -1753,7 +2026,7 @@ function getStepColorClass(step, stepType) {
   if (stepType === "time" || stepType === "schedule" || stepType === "clock") {
     return STEP_COLOR_CLASSES.blue;
   }
-  if (stepType === "agent" || _optionalChain([stepType, 'optionalAccess', _34 => _34.startsWith, 'call', _35 => _35("@")])) {
+  if (stepType === "agent" || _optionalChain([stepType, 'optionalAccess', _37 => _37.startsWith, 'call', _38 => _38("@")])) {
     return STEP_COLOR_CLASSES.purple;
   }
   if (stepType === "email" || stepType === "slack" || stepType === "message" || stepType === "notification") {
@@ -1870,7 +2143,7 @@ function Kpi({ widget, onAction }) {
     widget.actions && widget.actions.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex gap-2 mt-3 pt-3 border-t border-neutral-200 dark:border-neutral-700", children: widget.actions.map((action, idx) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "button",
       {
-        onClick: () => _optionalChain([onAction, 'optionalCall', _36 => _36({
+        onClick: () => _optionalChain([onAction, 'optionalCall', _39 => _39({
           type: action.type,
           payload: action.payload,
           widgetId: widget.id,
@@ -1997,7 +2270,7 @@ function LiveView({ widget }) {
     setRefreshKey((k) => k + 1);
   }, []);
   const handleFullscreen = _react.useCallback.call(void 0, () => {
-    _optionalChain([iframeRef, 'access', _37 => _37.current, 'optionalAccess', _38 => _38.requestFullscreen, 'optionalCall', _39 => _39()]);
+    _optionalChain([iframeRef, 'access', _40 => _40.current, 'optionalAccess', _41 => _41.requestFullscreen, 'optionalCall', _42 => _42()]);
   }, []);
   const handleOpenExternal = _react.useCallback.call(void 0, () => {
     window.open(src, "_blank", "noopener,noreferrer");
@@ -2152,7 +2425,7 @@ function Widgets({
 }) {
   _react.useEffect.call(void 0, () => {
     widgets.forEach((widget) => {
-      _optionalChain([onWidgetMount, 'optionalCall', _40 => _40(widget.id)]);
+      _optionalChain([onWidgetMount, 'optionalCall', _43 => _43(widget.id)]);
     });
   }, [widgets, onWidgetMount]);
   const layoutClasses = {
@@ -2563,8 +2836,8 @@ function PersistentWidgetRef({ widget }) {
 
 function Message({ message, onAction, enableWidgets, onWidgetRender, persistentWidgetIds, toolCallStyle = "card" }) {
   const isUser = message.role === "user";
-  const contentSegments = _optionalChain([message, 'access', _41 => _41.metadata, 'optionalAccess', _42 => _42.content_segments]);
-  const isStreaming = _optionalChain([message, 'access', _43 => _43.metadata, 'optionalAccess', _44 => _44.isStreaming]) === true;
+  const contentSegments = _optionalChain([message, 'access', _44 => _44.metadata, 'optionalAccess', _45 => _45.content_segments]);
+  const isStreaming = _optionalChain([message, 'access', _46 => _46.metadata, 'optionalAccess', _47 => _47.isStreaming]) === true;
   const hasContent = message.content || contentSegments && contentSegments.length > 0;
   const reportedWidgetsRef = _react.useRef.call(void 0, /* @__PURE__ */ new Set());
   const parsedWidgets = _react.useMemo.call(void 0, () => {
@@ -2644,7 +2917,7 @@ function Message({ message, onAction, enableWidgets, onWidgetRender, persistentW
     }
     return elements.length > 0 ? elements : null;
   };
-  const attachments = _optionalChain([message, 'access', _45 => _45.metadata, 'optionalAccess', _46 => _46.attachments]) || [];
+  const attachments = _optionalChain([message, 'access', _48 => _48.metadata, 'optionalAccess', _49 => _49.attachments]) || [];
   const hasAttachments = attachments.length > 0;
   const renderAttachments = () => {
     if (!hasAttachments) return null;
@@ -2825,8 +3098,8 @@ function Message({ message, onAction, enableWidgets, onWidgetRender, persistentW
   };
   const renderMessageWidgets = () => {
     if (!message.widgets || message.widgets.length === 0) return null;
-    const inlineWidgets = message.widgets.filter((w) => !_optionalChain([persistentWidgetIds, 'optionalAccess', _47 => _47.has, 'call', _48 => _48(w.id)]));
-    const persistentRefs = message.widgets.filter((w) => _optionalChain([persistentWidgetIds, 'optionalAccess', _49 => _49.has, 'call', _50 => _50(w.id)]));
+    const inlineWidgets = message.widgets.filter((w) => !_optionalChain([persistentWidgetIds, 'optionalAccess', _50 => _50.has, 'call', _51 => _51(w.id)]));
+    const persistentRefs = message.widgets.filter((w) => _optionalChain([persistentWidgetIds, 'optionalAccess', _52 => _52.has, 'call', _53 => _53(w.id)]));
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
       persistentRefs.map((w) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, PersistentWidgetRef, { widget: w }) }, `ref-${w.id}`)),
       inlineWidgets.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "apteva-widget-standalone", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Widgets, { widgets: inlineWidgets, onAction, layout: "stack" }) })
@@ -3133,7 +3406,7 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
         setFileError(errors.join(", "));
         setTimeout(() => setFileError(null), 5e3);
       }
-      _optionalChain([onFileUpload, 'optionalCall', _51 => _51(e.target.files)]);
+      _optionalChain([onFileUpload, 'optionalCall', _54 => _54(e.target.files)]);
       setShowMenu(false);
       e.target.value = "";
     }
@@ -3205,15 +3478,15 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
                 {
                   className: "apteva-composer-menu fixed bg-neutral-800 dark:bg-neutral-800 rounded-xl shadow-lg overflow-hidden z-[9999] min-w-[200px]",
                   style: {
-                    left: _nullishCoalesce(_optionalChain([menuButtonRef, 'access', _52 => _52.current, 'optionalAccess', _53 => _53.getBoundingClientRect, 'call', _54 => _54(), 'access', _55 => _55.left]), () => ( 0)),
-                    bottom: window.innerHeight - (_nullishCoalesce(_optionalChain([menuButtonRef, 'access', _56 => _56.current, 'optionalAccess', _57 => _57.getBoundingClientRect, 'call', _58 => _58(), 'access', _59 => _59.top]), () => ( 0))) + 8
+                    left: _nullishCoalesce(_optionalChain([menuButtonRef, 'access', _55 => _55.current, 'optionalAccess', _56 => _56.getBoundingClientRect, 'call', _57 => _57(), 'access', _58 => _58.left]), () => ( 0)),
+                    bottom: window.innerHeight - (_nullishCoalesce(_optionalChain([menuButtonRef, 'access', _59 => _59.current, 'optionalAccess', _60 => _60.getBoundingClientRect, 'call', _61 => _61(), 'access', _62 => _62.top]), () => ( 0))) + 8
                   },
                   children: [
                     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
                       "button",
                       {
                         onClick: () => {
-                          _optionalChain([fileInputRef, 'access', _60 => _60.current, 'optionalAccess', _61 => _61.click, 'call', _62 => _62()]);
+                          _optionalChain([fileInputRef, 'access', _63 => _63.current, 'optionalAccess', _64 => _64.click, 'call', _65 => _65()]);
                           setShowMenu(false);
                         },
                         className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-neutral-700 dark:hover:bg-neutral-700 transition-colors !text-white text-left",
@@ -3334,8 +3607,8 @@ function CommandComposer({
     }
   };
   const handleNewCommand = () => {
-    _optionalChain([onReset, 'optionalCall', _63 => _63()]);
-    _optionalChain([inputRef, 'access', _64 => _64.current, 'optionalAccess', _65 => _65.focus, 'call', _66 => _66()]);
+    _optionalChain([onReset, 'optionalCall', _66 => _66()]);
+    _optionalChain([inputRef, 'access', _67 => _67.current, 'optionalAccess', _68 => _68.focus, 'call', _69 => _69()]);
   };
   const handleInputChange = (value) => {
     setInput(value);
@@ -3449,15 +3722,15 @@ function CommandComposer({
                   {
                     className: "apteva-composer-menu fixed bg-neutral-800 dark:bg-neutral-800 rounded-xl shadow-lg overflow-hidden z-[9999] min-w-[200px]",
                     style: {
-                      left: _nullishCoalesce(_optionalChain([menuButtonRef, 'access', _67 => _67.current, 'optionalAccess', _68 => _68.getBoundingClientRect, 'call', _69 => _69(), 'access', _70 => _70.left]), () => ( 0)),
-                      top: (_nullishCoalesce(_optionalChain([menuButtonRef, 'access', _71 => _71.current, 'optionalAccess', _72 => _72.getBoundingClientRect, 'call', _73 => _73(), 'access', _74 => _74.bottom]), () => ( 0))) + 8
+                      left: _nullishCoalesce(_optionalChain([menuButtonRef, 'access', _70 => _70.current, 'optionalAccess', _71 => _71.getBoundingClientRect, 'call', _72 => _72(), 'access', _73 => _73.left]), () => ( 0)),
+                      top: (_nullishCoalesce(_optionalChain([menuButtonRef, 'access', _74 => _74.current, 'optionalAccess', _75 => _75.getBoundingClientRect, 'call', _76 => _76(), 'access', _77 => _77.bottom]), () => ( 0))) + 8
                     },
                     children: [
                       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
                         "button",
                         {
                           onClick: () => {
-                            _optionalChain([fileInputRef, 'access', _75 => _75.current, 'optionalAccess', _76 => _76.click, 'call', _77 => _77()]);
+                            _optionalChain([fileInputRef, 'access', _78 => _78.current, 'optionalAccess', _79 => _79.click, 'call', _80 => _80()]);
                             setShowMenu(false);
                           },
                           className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-neutral-700 dark:hover:bg-neutral-700 transition-colors !text-white text-left",
@@ -3610,8 +3883,8 @@ var AptevaClient = class {
   constructor(config) {
     __publicField(this, "config");
     this.config = {
-      apiUrl: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _78 => _78.apiUrl]), () => ( "")),
-      apiKey: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _79 => _79.apiKey]), () => ( ""))
+      apiUrl: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _81 => _81.apiUrl]), () => ( "")),
+      apiKey: _nullishCoalesce(_optionalChain([config, 'optionalAccess', _82 => _82.apiKey]), () => ( ""))
     };
   }
   /**
@@ -3688,7 +3961,7 @@ var AptevaClient = class {
         const error = await response.json().catch(() => ({ error: "Request failed" }));
         throw new Error(error.error || `Request failed with status ${response.status}`);
       }
-      const reader = _optionalChain([response, 'access', _80 => _80.body, 'optionalAccess', _81 => _81.getReader, 'call', _82 => _82()]);
+      const reader = _optionalChain([response, 'access', _83 => _83.body, 'optionalAccess', _84 => _84.getReader, 'call', _85 => _85()]);
       if (!reader) {
         throw new Error("Response body is not readable");
       }
@@ -3706,7 +3979,7 @@ var AptevaClient = class {
           if (line.startsWith("data: ")) {
             const data = line.slice(6);
             if (data === "[DONE]") {
-              _optionalChain([onComplete, 'optionalCall', _83 => _83(threadId)]);
+              _optionalChain([onComplete, 'optionalCall', _86 => _86(threadId)]);
               return;
             }
             try {
@@ -3721,10 +3994,10 @@ var AptevaClient = class {
           }
         }
       }
-      _optionalChain([onComplete, 'optionalCall', _84 => _84(threadId)]);
+      _optionalChain([onComplete, 'optionalCall', _87 => _87(threadId)]);
     } catch (error) {
       const err = error instanceof Error ? error : new Error("Unknown error");
-      _optionalChain([onError, 'optionalCall', _85 => _85(err)]);
+      _optionalChain([onError, 'optionalCall', _88 => _88(err)]);
       throw err;
     }
   }
@@ -3947,7 +4220,7 @@ ${widgetContext}` : widgetContext;
   }, [apiUrl, apiKey]);
   _react.useEffect.call(void 0, () => {
     if (threadId) {
-      _optionalChain([onThreadChange, 'optionalCall', _86 => _86(threadId)]);
+      _optionalChain([onThreadChange, 'optionalCall', _89 => _89(threadId)]);
     }
   }, [threadId, onThreadChange]);
   _react.useEffect.call(void 0, () => {
@@ -3965,7 +4238,7 @@ ${widgetContext}` : widgetContext;
   }, [showSettingsMenu]);
   const handleModeChange = (newMode) => {
     setMode(newMode);
-    _optionalChain([onModeChange, 'optionalCall', _87 => _87(newMode)]);
+    _optionalChain([onModeChange, 'optionalCall', _90 => _90(newMode)]);
     if (newMode === "command") {
       setCommandState("idle");
       setCommandResult(null);
@@ -3974,8 +4247,8 @@ ${widgetContext}` : widgetContext;
   };
   const defaultPlaceholder = mode === "chat" ? "Type a message..." : "Enter your command...";
   const handleWidgetAction = _react.useCallback.call(void 0, (action) => {
-    _optionalChain([onAction, 'optionalCall', _88 => _88(action)]);
-    if (action.type === "submit" && _optionalChain([action, 'access', _89 => _89.payload, 'optionalAccess', _90 => _90.formData])) {
+    _optionalChain([onAction, 'optionalCall', _91 => _91(action)]);
+    if (action.type === "submit" && _optionalChain([action, 'access', _92 => _92.payload, 'optionalAccess', _93 => _93.formData])) {
       const formData = action.payload.formData;
       const lines = [];
       for (const [key, value] of Object.entries(formData)) {
@@ -4014,7 +4287,7 @@ ${widgetContext}` : widgetContext;
         metadata: hasFiles ? { attachments } : void 0
       };
       setMessages((prev) => [...prev, userMessage]);
-      _optionalChain([onMessageSent, 'optionalCall', _91 => _91(userMessage)]);
+      _optionalChain([onMessageSent, 'optionalCall', _94 => _94(userMessage)]);
     }
     setIsLoading(true);
     try {
@@ -4082,7 +4355,7 @@ ${widgetContext}` : widgetContext;
                   responseThreadId = chunk.thread_id;
                   if (!currentThreadId) {
                     setCurrentThreadId(chunk.thread_id);
-                    _optionalChain([onThreadChange, 'optionalCall', _92 => _92(chunk.thread_id)]);
+                    _optionalChain([onThreadChange, 'optionalCall', _95 => _95(chunk.thread_id)]);
                   }
                 }
                 break;
@@ -4114,7 +4387,7 @@ ${widgetContext}` : widgetContext;
                   contentSegments.push({ type: "tool", id: chunk.tool_id, name: displayName, status: "preparing" });
                   toolInputBuffers[chunk.tool_id] = "";
                   setChatToolName(displayName);
-                  _optionalChain([onToolCall, 'optionalCall', _93 => _93(chunk.tool_name, chunk.tool_id)]);
+                  _optionalChain([onToolCall, 'optionalCall', _96 => _96(chunk.tool_name, chunk.tool_id)]);
                   updateMessage();
                 }
                 break;
@@ -4174,7 +4447,7 @@ ${widgetContext}` : widgetContext;
                     toolSegment.result = chunk.content;
                     toolSegment.status = "completed";
                     toolSegment.isReceiving = false;
-                    _optionalChain([onToolResult, 'optionalCall', _94 => _94(toolSegment.name, chunk.content)]);
+                    _optionalChain([onToolResult, 'optionalCall', _97 => _97(toolSegment.name, chunk.content)]);
                   }
                   setChatToolName(null);
                   updateMessage();
@@ -4218,7 +4491,7 @@ ${widgetContext}` : widgetContext;
             });
             if (threadId2 && threadId2 !== currentThreadId) {
               setCurrentThreadId(threadId2);
-              _optionalChain([onThreadChange, 'optionalCall', _95 => _95(threadId2)]);
+              _optionalChain([onThreadChange, 'optionalCall', _98 => _98(threadId2)]);
             }
             setIsLoading(false);
             setCurrentRequestId(null);
@@ -4242,7 +4515,7 @@ ${widgetContext}` : widgetContext;
             setIsLoading(false);
             setCurrentRequestId(null);
             setChatToolName(null);
-            _optionalChain([onError, 'optionalCall', _96 => _96(error)]);
+            _optionalChain([onError, 'optionalCall', _99 => _99(error)]);
           }
         );
       }
@@ -4255,7 +4528,7 @@ ${widgetContext}` : widgetContext;
         metadata: { error: true }
       };
       setMessages((prev) => [...prev, errorMessage]);
-      _optionalChain([onError, 'optionalCall', _97 => _97(error instanceof Error ? error : new Error("Unknown error"))]);
+      _optionalChain([onError, 'optionalCall', _100 => _100(error instanceof Error ? error : new Error("Unknown error"))]);
     } finally {
       setIsLoading(false);
     }
@@ -4301,7 +4574,7 @@ ${planningInstruction}` : planningInstruction;
           const error = err instanceof Error ? err : new Error("Failed to generate plan");
           setCommandError(error);
           setCommandState("error");
-          _optionalChain([onError, 'optionalCall', _98 => _98(error)]);
+          _optionalChain([onError, 'optionalCall', _101 => _101(error)]);
         }
       }
       return;
@@ -4334,12 +4607,12 @@ ${planningInstruction}` : planningInstruction;
               setCommandResult(result);
               setCommandState("success");
               setProgress(100);
-              _optionalChain([onComplete, 'optionalCall', _99 => _99(result)]);
+              _optionalChain([onComplete, 'optionalCall', _102 => _102(result)]);
             },
             (error) => {
               setCommandError(error);
               setCommandState("error");
-              _optionalChain([onError, 'optionalCall', _100 => _100(error)]);
+              _optionalChain([onError, 'optionalCall', _103 => _103(error)]);
             }
           );
         } else {
@@ -4352,7 +4625,7 @@ ${planningInstruction}` : planningInstruction;
           setCommandResult(result);
           setCommandState("success");
           setProgress(100);
-          _optionalChain([onComplete, 'optionalCall', _101 => _101(result)]);
+          _optionalChain([onComplete, 'optionalCall', _104 => _104(result)]);
         }
       } else {
         const commandInstruction = `CRITICAL COMMAND MODE: Maximum 10 words per response. Execute the command immediately. Make reasonable assumptions based on context. Use sensible defaults for missing details. DO NOT ask questions unless something is truly impossible without user input (e.g., missing required password). State what you're doing or the result. Examples: "Analyzing customer data from last quarter..." or "Created 5 new database entries successfully" or "Search complete: found 12 matching results". NO greetings, NO filler words, NO clarification requests. Action/result only.`;
@@ -4382,16 +4655,16 @@ ${commandInstruction}` : commandInstruction;
                 const displayName = chunk.tool_display_name || chunk.tool_name;
                 lastToolName = chunk.tool_name;
                 setCurrentToolName(displayName);
-                _optionalChain([onToolCall, 'optionalCall', _102 => _102(chunk.tool_name, chunk.tool_id || "")]);
+                _optionalChain([onToolCall, 'optionalCall', _105 => _105(chunk.tool_name, chunk.tool_id || "")]);
                 accumulatedContent = "";
                 setStreamedContent("");
               } else if (chunk.type === "tool_result") {
-                _optionalChain([onToolResult, 'optionalCall', _103 => _103(lastToolName, chunk.content)]);
+                _optionalChain([onToolResult, 'optionalCall', _106 => _106(lastToolName, chunk.content)]);
                 setCurrentToolName(null);
               } else if (chunk.type === "thread_id" && chunk.thread_id) {
                 if (!currentThreadId) {
                   setCurrentThreadId(chunk.thread_id);
-                  _optionalChain([onThreadChange, 'optionalCall', _104 => _104(chunk.thread_id)]);
+                  _optionalChain([onThreadChange, 'optionalCall', _107 => _107(chunk.thread_id)]);
                 }
               } else if (chunk.type === "request_id" && chunk.request_id) {
                 setCurrentRequestId(chunk.request_id);
@@ -4407,13 +4680,13 @@ ${commandInstruction}` : commandInstruction;
               setCommandState("success");
               setProgress(100);
               setCurrentRequestId(null);
-              _optionalChain([onComplete, 'optionalCall', _105 => _105(result)]);
+              _optionalChain([onComplete, 'optionalCall', _108 => _108(result)]);
             },
             (error) => {
               setCommandError(error);
               setCommandState("error");
               setCurrentRequestId(null);
-              _optionalChain([onError, 'optionalCall', _106 => _106(error)]);
+              _optionalChain([onError, 'optionalCall', _109 => _109(error)]);
             }
           );
         } else {
@@ -4433,14 +4706,14 @@ ${commandInstruction}` : commandInstruction;
           setCommandResult(result);
           setCommandState("success");
           setProgress(100);
-          _optionalChain([onComplete, 'optionalCall', _107 => _107(result)]);
+          _optionalChain([onComplete, 'optionalCall', _110 => _110(result)]);
         }
       }
     } catch (err) {
       const error = err instanceof Error ? err : new Error("Unknown error");
       setCommandError(error);
       setCommandState("error");
-      _optionalChain([onError, 'optionalCall', _108 => _108(error)]);
+      _optionalChain([onError, 'optionalCall', _111 => _111(error)]);
     }
   };
   const resetCommand = () => {
@@ -4539,8 +4812,8 @@ ${planToExecute}`;
           executeCommand(text, files);
         },
         state: commandState,
-        response: _optionalChain([commandResult, 'optionalAccess', _109 => _109.data, 'optionalAccess', _110 => _110.summary]) || _optionalChain([commandResult, 'optionalAccess', _111 => _111.message]),
-        error: _optionalChain([commandError, 'optionalAccess', _112 => _112.message]),
+        response: _optionalChain([commandResult, 'optionalAccess', _112 => _112.data, 'optionalAccess', _113 => _113.summary]) || _optionalChain([commandResult, 'optionalAccess', _114 => _114.message]),
+        error: _optionalChain([commandError, 'optionalAccess', _115 => _115.message]),
         plan,
         streamedContent,
         toolName: currentToolName,
@@ -4708,13 +4981,13 @@ ${planningInstruction}` : planningInstruction;
             const error2 = err instanceof Error ? err : new Error("Failed to generate plan");
             setError(error2);
             setState("error");
-            _optionalChain([onError, 'optionalCall', _113 => _113(error2)]);
+            _optionalChain([onError, 'optionalCall', _116 => _116(error2)]);
           });
         } catch (err) {
           const error2 = err instanceof Error ? err : new Error("Failed to generate plan");
           setError(error2);
           setState("error");
-          _optionalChain([onError, 'optionalCall', _114 => _114(error2)]);
+          _optionalChain([onError, 'optionalCall', _117 => _117(error2)]);
         }
       }
       return;
@@ -4725,7 +4998,7 @@ ${planningInstruction}` : planningInstruction;
     setStreamedContent("");
     setCommand("");
     setUploadedFiles([]);
-    _optionalChain([onStart, 'optionalCall', _115 => _115()]);
+    _optionalChain([onStart, 'optionalCall', _118 => _118()]);
     try {
       if (useMock) {
         if (enableStreaming) {
@@ -4736,16 +5009,16 @@ ${planningInstruction}` : planningInstruction;
               if (chunk.type === "token" && chunk.content) {
                 accumulatedContent += chunk.content;
                 setStreamedContent(accumulatedContent);
-                _optionalChain([onChunk, 'optionalCall', _116 => _116(chunk.content)]);
+                _optionalChain([onChunk, 'optionalCall', _119 => _119(chunk.content)]);
                 const estimatedProgress = Math.min(Math.round(accumulatedContent.length / 10), 90);
                 setProgress(estimatedProgress);
-                _optionalChain([onProgress, 'optionalCall', _117 => _117(estimatedProgress)]);
+                _optionalChain([onProgress, 'optionalCall', _120 => _120(estimatedProgress)]);
               } else if (chunk.type === "widget" && chunk.widget) {
                 const widget = chunk.widget;
                 setResult((prev) => ({
                   success: true,
-                  data: _optionalChain([prev, 'optionalAccess', _118 => _118.data]) || {},
-                  widgets: [..._optionalChain([prev, 'optionalAccess', _119 => _119.widgets]) || [], widget],
+                  data: _optionalChain([prev, 'optionalAccess', _121 => _121.data]) || {},
+                  widgets: [..._optionalChain([prev, 'optionalAccess', _122 => _122.widgets]) || [], widget],
                   message: accumulatedContent || "Command executed successfully"
                 }));
               }
@@ -4765,19 +5038,19 @@ ${planningInstruction}` : planningInstruction;
               setResult(result2);
               setState("success");
               setProgress(100);
-              _optionalChain([onComplete, 'optionalCall', _120 => _120(result2)]);
+              _optionalChain([onComplete, 'optionalCall', _123 => _123(result2)]);
             },
             (error2) => {
               setError(error2);
               setState("error");
-              _optionalChain([onError, 'optionalCall', _121 => _121(error2)]);
+              _optionalChain([onError, 'optionalCall', _124 => _124(error2)]);
             }
           );
         } else {
           const progressInterval = setInterval(() => {
             setProgress((prev) => {
               const next = Math.min(prev + 10, 90);
-              _optionalChain([onProgress, 'optionalCall', _122 => _122(next)]);
+              _optionalChain([onProgress, 'optionalCall', _125 => _125(next)]);
               return next;
             });
           }, 200);
@@ -4801,7 +5074,7 @@ ${planningInstruction}` : planningInstruction;
           setResult(result2);
           setState("success");
           setProgress(100);
-          _optionalChain([onComplete, 'optionalCall', _123 => _123(result2)]);
+          _optionalChain([onComplete, 'optionalCall', _126 => _126(result2)]);
         }
       } else {
         if (enableStreaming) {
@@ -4847,16 +5120,16 @@ ${commandInstruction}` : commandInstruction;
               if (chunk.type === "token" && chunk.content) {
                 accumulatedContent += chunk.content;
                 setStreamedContent(accumulatedContent);
-                _optionalChain([onChunk, 'optionalCall', _124 => _124(chunk.content)]);
+                _optionalChain([onChunk, 'optionalCall', _127 => _127(chunk.content)]);
                 const estimatedProgress = Math.min(Math.round(accumulatedContent.length / 10), 90);
                 setProgress(estimatedProgress);
-                _optionalChain([onProgress, 'optionalCall', _125 => _125(estimatedProgress)]);
+                _optionalChain([onProgress, 'optionalCall', _128 => _128(estimatedProgress)]);
               } else if (chunk.type === "widget" && chunk.widget) {
                 const widget = chunk.widget;
                 setResult((prev) => ({
                   success: true,
-                  data: _optionalChain([prev, 'optionalAccess', _126 => _126.data]) || {},
-                  widgets: [..._optionalChain([prev, 'optionalAccess', _127 => _127.widgets]) || [], widget],
+                  data: _optionalChain([prev, 'optionalAccess', _129 => _129.data]) || {},
+                  widgets: [..._optionalChain([prev, 'optionalAccess', _130 => _130.widgets]) || [], widget],
                   message: accumulatedContent || "Command executed successfully"
                 }));
               }
@@ -4876,20 +5149,20 @@ ${commandInstruction}` : commandInstruction;
               setResult(result2);
               setState("success");
               setProgress(100);
-              _optionalChain([onComplete, 'optionalCall', _128 => _128(result2)]);
+              _optionalChain([onComplete, 'optionalCall', _131 => _131(result2)]);
             },
             (error2) => {
               const err = error2 instanceof Error ? error2 : new Error("Unknown error");
               setError(err);
               setState("error");
-              _optionalChain([onError, 'optionalCall', _129 => _129(err)]);
+              _optionalChain([onError, 'optionalCall', _132 => _132(err)]);
             }
           );
         } else {
           const progressInterval = setInterval(() => {
             setProgress((prev) => {
               const next = Math.min(prev + 10, 90);
-              _optionalChain([onProgress, 'optionalCall', _130 => _130(next)]);
+              _optionalChain([onProgress, 'optionalCall', _133 => _133(next)]);
               return next;
             });
           }, 200);
@@ -4945,14 +5218,14 @@ ${commandInstruction}` : commandInstruction;
           setResult(result2);
           setState("success");
           setProgress(100);
-          _optionalChain([onComplete, 'optionalCall', _131 => _131(result2)]);
+          _optionalChain([onComplete, 'optionalCall', _134 => _134(result2)]);
         }
       }
     } catch (err) {
       const error2 = err instanceof Error ? err : new Error("Unknown error");
       setError(error2);
       setState("error");
-      _optionalChain([onError, 'optionalCall', _132 => _132(error2)]);
+      _optionalChain([onError, 'optionalCall', _135 => _135(error2)]);
     }
   };
   const resetCommand = () => {
@@ -4985,14 +5258,14 @@ ${planToExecute}`;
   };
   const handleFileSelect = async (e) => {
     if (e.target.files && e.target.files.length > 0) {
-      _optionalChain([onFileUpload, 'optionalCall', _133 => _133(e.target.files)]);
+      _optionalChain([onFileUpload, 'optionalCall', _136 => _136(e.target.files)]);
       const files = [];
       for (let i = 0; i < e.target.files.length; i++) {
         const file = e.target.files[i];
         const reader = new FileReader();
         await new Promise((resolve) => {
           reader.onload = (event) => {
-            if (_optionalChain([event, 'access', _134 => _134.target, 'optionalAccess', _135 => _135.result])) {
+            if (_optionalChain([event, 'access', _137 => _137.target, 'optionalAccess', _138 => _138.result])) {
               const fullDataUrl = event.target.result;
               const base64Data = fullDataUrl.split(",")[1];
               if (file.type.startsWith("image/")) {
@@ -5086,7 +5359,7 @@ ${planToExecute}`;
               enableFileUpload && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 "button",
                 {
-                  onClick: () => _optionalChain([fileInputRef, 'access', _136 => _136.current, 'optionalAccess', _137 => _137.click, 'call', _138 => _138()]),
+                  onClick: () => _optionalChain([fileInputRef, 'access', _139 => _139.current, 'optionalAccess', _140 => _140.click, 'call', _141 => _141()]),
                   className: "w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 !text-neutral-500 dark:!text-neutral-500 hover:bg-neutral-100 dark:hover:bg-neutral-800",
                   title: "Attach file",
                   children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M8.4 2.8L4.4 6.8C3.736 7.464 3.736 8.536 4.4 9.2C5.064 9.864 6.136 9.864 6.8 9.2L11.6 4.4C12.704 3.296 12.704 1.504 11.6 0.4C10.496 -0.704 8.704 -0.704 7.6 0.4L2.8 5.2C1.256 6.744 1.256 9.256 2.8 10.8C4.344 12.344 6.856 12.344 8.4 10.8L12.4 6.8", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round", transform: "translate(1.6, 2.4)" }) })
@@ -5305,7 +5578,7 @@ ${planToExecute}`;
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-5 h-5 text-red-600 mt-0.5 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
               /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "text-sm font-semibold text-red-800 dark:text-red-400", children: "Error" }),
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-red-700 dark:text-red-300 text-sm mt-1", children: _optionalChain([error, 'optionalAccess', _139 => _139.message]) })
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-red-700 dark:text-red-300 text-sm mt-1", children: _optionalChain([error, 'optionalAccess', _142 => _142.message]) })
               ] })
             ] }) }),
             allowInput && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -5333,7 +5606,7 @@ ${planToExecute}`;
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-green-700 dark:text-green-300 text-sm", children: "Command executed successfully" })
               ] })
             ] }),
-            _optionalChain([result, 'access', _140 => _140.data, 'optionalAccess', _141 => _141.summary]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-neutral-700 dark:text-neutral-300 text-sm leading-relaxed whitespace-pre-line", children: result.data.summary }),
+            _optionalChain([result, 'access', _143 => _143.data, 'optionalAccess', _144 => _144.summary]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-neutral-700 dark:text-neutral-300 text-sm leading-relaxed whitespace-pre-line", children: result.data.summary }),
             result.widgets && result.widgets.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "space-y-3", children: result.widgets.map((widget) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               WidgetRenderer,
               {
@@ -5384,7 +5657,7 @@ ${planToExecute}`;
             enableFileUpload && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "button",
               {
-                onClick: () => _optionalChain([fileInputRef, 'access', _142 => _142.current, 'optionalAccess', _143 => _143.click, 'call', _144 => _144()]),
+                onClick: () => _optionalChain([fileInputRef, 'access', _145 => _145.current, 'optionalAccess', _146 => _146.click, 'call', _147 => _147()]),
                 className: "w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 !text-neutral-500 dark:!text-neutral-500 hover:bg-neutral-100 dark:hover:bg-neutral-800",
                 title: "Attach file",
                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M8.4 2.8L4.4 6.8C3.736 7.464 3.736 8.536 4.4 9.2C5.064 9.864 6.136 9.864 6.8 9.2L11.6 4.4C12.704 3.296 12.704 1.504 11.6 0.4C10.496 -0.704 8.704 -0.704 7.6 0.4L2.8 5.2C1.256 6.744 1.256 9.256 2.8 10.8C4.344 12.344 6.856 12.344 8.4 10.8L12.4 6.8", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round", transform: "translate(1.6, 2.4)" }) })
@@ -5570,25 +5843,25 @@ function Prompt({
     const newValue = e.target.value;
     if (!maxLength || newValue.length <= maxLength) {
       setValue(newValue);
-      _optionalChain([onChange, 'optionalCall', _145 => _145(newValue)]);
+      _optionalChain([onChange, 'optionalCall', _148 => _148(newValue)]);
     }
   };
   const handleSubmit = async () => {
     if (value.length < minLength) return;
-    _optionalChain([onSubmit, 'optionalCall', _146 => _146(value)]);
+    _optionalChain([onSubmit, 'optionalCall', _149 => _149(value)]);
     setIsLoading(true);
     try {
       if (useMock) {
         await new Promise((resolve) => setTimeout(resolve, 1500));
         const mockResult = `Enhanced version: ${value} [AI-generated content]`;
-        _optionalChain([onResult, 'optionalCall', _147 => _147(mockResult)]);
+        _optionalChain([onResult, 'optionalCall', _150 => _150(mockResult)]);
         setValue("");
       } else {
         const response = await aptevaClient.chat({
           agent_id: agentId,
           message: value
         });
-        _optionalChain([onResult, 'optionalCall', _148 => _148(response.message)]);
+        _optionalChain([onResult, 'optionalCall', _151 => _151(response.message)]);
         setValue("");
       }
     } catch (error) {
@@ -5683,7 +5956,7 @@ function Stream({
   }, [autoStart]);
   const startStreaming = async () => {
     setIsStreaming(true);
-    _optionalChain([onStart, 'optionalCall', _149 => _149()]);
+    _optionalChain([onStart, 'optionalCall', _152 => _152()]);
     try {
       if (useMock) {
         const mockText = "This is a simulated streaming response from the AI agent. In a real implementation, this would stream data from your backend API. The text appears word by word to simulate the streaming effect. You can customize the typing speed and styling based on your needs.";
@@ -5691,13 +5964,13 @@ function Stream({
           mockText,
           (chunk) => {
             setText((prev) => prev + chunk);
-            _optionalChain([onChunk, 'optionalCall', _150 => _150(chunk)]);
+            _optionalChain([onChunk, 'optionalCall', _153 => _153(chunk)]);
           },
           typingSpeed
         );
         setIsComplete(true);
         setIsStreaming(false);
-        _optionalChain([onComplete, 'optionalCall', _151 => _151(text + mockText)]);
+        _optionalChain([onComplete, 'optionalCall', _154 => _154(text + mockText)]);
       } else {
         let accumulatedText = "";
         await aptevaClient.chatStream(
@@ -5710,24 +5983,24 @@ function Stream({
             if (chunk.type === "token" && chunk.content) {
               accumulatedText += chunk.content;
               setText(accumulatedText);
-              _optionalChain([onChunk, 'optionalCall', _152 => _152(chunk.content)]);
+              _optionalChain([onChunk, 'optionalCall', _155 => _155(chunk.content)]);
             }
           },
           () => {
             setIsComplete(true);
             setIsStreaming(false);
-            _optionalChain([onComplete, 'optionalCall', _153 => _153(accumulatedText)]);
+            _optionalChain([onComplete, 'optionalCall', _156 => _156(accumulatedText)]);
           },
           (error) => {
             const err = error instanceof Error ? error : new Error("Streaming error");
-            _optionalChain([onError, 'optionalCall', _154 => _154(err)]);
+            _optionalChain([onError, 'optionalCall', _157 => _157(err)]);
             setIsStreaming(false);
           }
         );
       }
     } catch (error) {
       const err = error instanceof Error ? error : new Error("Streaming error");
-      _optionalChain([onError, 'optionalCall', _155 => _155(err)]);
+      _optionalChain([onError, 'optionalCall', _158 => _158(err)]);
       setIsStreaming(false);
     }
   };
@@ -5819,7 +6092,7 @@ function ThreadList({
 }) {
   const [searchQuery, setSearchQuery] = _react.useState.call(void 0, "");
   const filteredThreads = threads.filter(
-    (thread) => thread.title.toLowerCase().includes(searchQuery.toLowerCase()) || _optionalChain([thread, 'access', _156 => _156.preview, 'optionalAccess', _157 => _157.toLowerCase, 'call', _158 => _158(), 'access', _159 => _159.includes, 'call', _160 => _160(searchQuery.toLowerCase())])
+    (thread) => thread.title.toLowerCase().includes(searchQuery.toLowerCase()) || _optionalChain([thread, 'access', _159 => _159.preview, 'optionalAccess', _160 => _160.toLowerCase, 'call', _161 => _161(), 'access', _162 => _162.includes, 'call', _163 => _163(searchQuery.toLowerCase())])
   );
   const groupedThreads = groupBy === "date" ? groupThreadsByDate(filteredThreads) : { All: filteredThreads };
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col h-full", children: [
@@ -5841,8 +6114,8 @@ function ThreadList({
           {
             thread,
             isActive: thread.id === currentThreadId,
-            onSelect: () => _optionalChain([onThreadSelect, 'optionalCall', _161 => _161(thread.id)]),
-            onDelete: () => _optionalChain([onThreadDelete, 'optionalCall', _162 => _162(thread.id)])
+            onSelect: () => _optionalChain([onThreadSelect, 'optionalCall', _164 => _164(thread.id)]),
+            onDelete: () => _optionalChain([onThreadDelete, 'optionalCall', _165 => _165(thread.id)])
           },
           thread.id
         ))
@@ -5904,7 +6177,7 @@ function Threads({
       threads.slice(0, 5).map((thread) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "button",
         {
-          onClick: () => _optionalChain([onThreadSelect, 'optionalCall', _163 => _163(thread.id)]),
+          onClick: () => _optionalChain([onThreadSelect, 'optionalCall', _166 => _166(thread.id)]),
           className: cn(
             "px-4 py-2 whitespace-nowrap font-medium transition-colors",
             thread.id === currentThreadId ? "border-b-2 border-apteva-500 text-apteva-500" : "text-neutral-600 hover:text-neutral-900"
@@ -6089,7 +6362,7 @@ function TabsLayout({ node, renderNode }) {
 var STRUCTURAL_KEYS = /* @__PURE__ */ new Set(["type", "id", "layout", "props", "children", "actions", "metadata", "isStreaming"]);
 function normalizeNode(n) {
   let node = { ...n };
-  if (node.type === "widget" && _optionalChain([node, 'access', _164 => _164.props, 'optionalAccess', _165 => _165.widget])) {
+  if (node.type === "widget" && _optionalChain([node, 'access', _167 => _167.props, 'optionalAccess', _168 => _168.widget])) {
     node.type = node.props.widget;
     const { widget: _, ...rest } = node.props;
     node.props = rest;
@@ -6227,10 +6500,10 @@ function AutoInterface({
   ].filter(Boolean).join("\n\n");
   const updateInterface = _react.useCallback.call(void 0, (newSpec) => {
     setInterfaceSpec(newSpec);
-    _optionalChain([onInterfaceChange, 'optionalCall', _166 => _166(newSpec)]);
+    _optionalChain([onInterfaceChange, 'optionalCall', _169 => _169(newSpec)]);
   }, [onInterfaceChange]);
   const handleAction = _react.useCallback.call(void 0, (action) => {
-    _optionalChain([onAction, 'optionalCall', _167 => _167(action)]);
+    _optionalChain([onAction, 'optionalCall', _170 => _170(action)]);
     if (chatRef.current) {
       chatRef.current.sendMessage(
         `[Action: ${action.type} on widget ${action.widgetId || "unknown"}. Payload: ${JSON.stringify(action.payload)}]`
@@ -6238,7 +6511,7 @@ function AutoInterface({
     }
   }, [onAction]);
   const handleMessageComplete = _react.useCallback.call(void 0, (result) => {
-    if (!_optionalChain([result, 'optionalAccess', _168 => _168.data])) return;
+    if (!_optionalChain([result, 'optionalAccess', _171 => _171.data])) return;
     const text = typeof result.data === "string" ? result.data : result.data.message || "";
     console.log("[AutoInterface] Chat message complete, text (" + text.length + " chars):", text.substring(0, 300));
     const parsed = parseInterfaceFromText(text);
@@ -6278,7 +6551,7 @@ function AutoInterface({
     }).catch((err) => {
       if (cancelled) return;
       console.error("[AutoInterface] Initial generation failed:", err);
-      _optionalChain([onError, 'optionalCall', _169 => _169(err instanceof Error ? err : new Error(String(err)))]);
+      _optionalChain([onError, 'optionalCall', _172 => _172(err instanceof Error ? err : new Error(String(err)))]);
       setIsGenerating(false);
     });
     return () => {
@@ -6444,7 +6717,7 @@ function useInterfaceAI({
   }
   const sendMessage = _react.useCallback.call(void 0, async (message) => {
     accumulatedTextRef.current = "";
-    _optionalChain([onStreamStart, 'optionalCall', _170 => _170()]);
+    _optionalChain([onStreamStart, 'optionalCall', _173 => _173()]);
     const systemPrompt = [
       generateInterfaceContext(),
       context || ""
@@ -6467,27 +6740,27 @@ function useInterfaceAI({
             accumulatedTextRef.current += chunk.content || "";
             const parsed = parseInterfaceFromText(accumulatedTextRef.current);
             if (parsed) {
-              _optionalChain([onInterface, 'optionalCall', _171 => _171(parsed)]);
+              _optionalChain([onInterface, 'optionalCall', _174 => _174(parsed)]);
             }
             const updates = parseUpdatesFromText(accumulatedTextRef.current);
             if (updates.length > 0) {
-              _optionalChain([onUpdates, 'optionalCall', _172 => _172(updates)]);
+              _optionalChain([onUpdates, 'optionalCall', _175 => _175(updates)]);
             }
           }
         },
         // onComplete
         () => {
-          _optionalChain([onStreamEnd, 'optionalCall', _173 => _173()]);
+          _optionalChain([onStreamEnd, 'optionalCall', _176 => _176()]);
         },
         // onError
         (error) => {
-          _optionalChain([onError, 'optionalCall', _174 => _174(error)]);
-          _optionalChain([onStreamEnd, 'optionalCall', _175 => _175()]);
+          _optionalChain([onError, 'optionalCall', _177 => _177(error)]);
+          _optionalChain([onStreamEnd, 'optionalCall', _178 => _178()]);
         }
       );
     } catch (error) {
-      _optionalChain([onError, 'optionalCall', _176 => _176(error instanceof Error ? error : new Error("Unknown error"))]);
-      _optionalChain([onStreamEnd, 'optionalCall', _177 => _177()]);
+      _optionalChain([onError, 'optionalCall', _179 => _179(error instanceof Error ? error : new Error("Unknown error"))]);
+      _optionalChain([onStreamEnd, 'optionalCall', _180 => _180()]);
     }
   }, [agentId, context, onInterface, onUpdates, onError, onStreamStart, onStreamEnd]);
   return {