@apteva/apteva-kit 0.1.15 → 0.1.17

package/dist/index.mjs

@@ -1062,6 +1062,7 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
   const [fileError, setFileError] = useState(null);
   const textareaRef = useRef2(null);
   const fileInputRef = useRef2(null);
+  const menuButtonRef = useRef2(null);
   const handleKeyDown = (e) => {
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
@@ -1139,39 +1140,6 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
       /* @__PURE__ */ jsx12("svg", { className: "w-4 h-4 flex-shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
       /* @__PURE__ */ jsx12("span", { children: fileError })
     ] }) }),
-    showMenu && /* @__PURE__ */ jsxs8(Fragment, { children: [
-      /* @__PURE__ */ jsx12("div", { className: "fixed inset-0 z-10", onClick: () => setShowMenu(false) }),
-      /* @__PURE__ */ jsxs8("div", { className: "absolute bottom-full left-4 mb-2 bg-gray-800 dark:bg-gray-700 rounded-xl shadow-lg overflow-hidden z-20 min-w-[240px]", children: [
-        /* @__PURE__ */ jsxs8(
-          "button",
-          {
-            onClick: () => {
-              fileInputRef.current?.click();
-              setShowMenu(false);
-            },
-            className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-700 dark:hover:bg-gray-600 transition-colors !text-white text-left",
-            children: [
-              /* @__PURE__ */ jsx12("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx12("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__ */ jsx12("span", { className: "!text-sm font-medium", children: "Add photos & files" })
-            ]
-          }
-        ),
-        onSwitchMode && /* @__PURE__ */ jsxs8(
-          "button",
-          {
-            onClick: () => {
-              onSwitchMode();
-              setShowMenu(false);
-            },
-            className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-700 dark:hover:bg-gray-600 transition-colors !text-white text-left border-t border-gray-700 dark:border-gray-600",
-            children: [
-              /* @__PURE__ */ jsx12("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 10V3L4 14h7v7l9-11h-7z" }) }),
-              /* @__PURE__ */ jsx12("span", { className: "!text-sm font-medium", children: "Switch to command mode" })
-            ]
-          }
-        )
-      ] })
-    ] }),
     pendingFiles.length > 0 && /* @__PURE__ */ jsx12("div", { className: "mb-2 flex flex-wrap gap-2", children: pendingFiles.map((pf, index) => /* @__PURE__ */ jsxs8(
       "div",
       {
@@ -1195,16 +1163,62 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
       },
       index
     )) }),
-    /* @__PURE__ */ jsxs8("div", { className: "relative border-2 border-gray-300 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-900 transition-all duration-300 flex items-center px-3 py-2 gap-3", children: [
-      /* @__PURE__ */ jsx12(
-        "button",
-        {
-          onClick: () => setShowMenu(!showMenu),
-          className: "w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 !text-gray-700 dark:!text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800",
-          title: "More options",
-          children: /* @__PURE__ */ jsx12("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx12("path", { d: "M10 5v10M5 10h10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
-        }
-      ),
+    /* @__PURE__ */ jsxs8("div", { className: "apteva-composer relative border-2 border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 transition-all duration-300 flex items-center px-3 py-2 gap-3", children: [
+      /* @__PURE__ */ jsxs8("div", { className: "relative flex-shrink-0", children: [
+        /* @__PURE__ */ jsx12(
+          "button",
+          {
+            ref: menuButtonRef,
+            onClick: () => setShowMenu(!showMenu),
+            className: "w-8 h-8 rounded-lg flex items-center justify-center transition-all !text-gray-700 dark:!text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800",
+            title: "More options",
+            children: /* @__PURE__ */ jsx12("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx12("path", { d: "M10 5v10M5 10h10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+          }
+        ),
+        showMenu && /* @__PURE__ */ jsxs8(Fragment, { children: [
+          /* @__PURE__ */ jsx12("div", { className: "fixed inset-0 z-[9998]", onClick: () => setShowMenu(false) }),
+          /* @__PURE__ */ jsxs8(
+            "div",
+            {
+              className: "fixed bg-gray-800 dark:bg-gray-700 rounded-xl shadow-lg overflow-hidden z-[9999] min-w-[200px]",
+              style: {
+                left: menuButtonRef.current?.getBoundingClientRect().left ?? 0,
+                top: (menuButtonRef.current?.getBoundingClientRect().bottom ?? 0) + 8
+              },
+              children: [
+                /* @__PURE__ */ jsxs8(
+                  "button",
+                  {
+                    onClick: () => {
+                      fileInputRef.current?.click();
+                      setShowMenu(false);
+                    },
+                    className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-700 dark:hover:bg-gray-600 transition-colors !text-white text-left",
+                    children: [
+                      /* @__PURE__ */ jsx12("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx12("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__ */ jsx12("span", { className: "!text-sm font-medium", children: "Add photos & files" })
+                    ]
+                  }
+                ),
+                onSwitchMode && /* @__PURE__ */ jsxs8(
+                  "button",
+                  {
+                    onClick: () => {
+                      onSwitchMode();
+                      setShowMenu(false);
+                    },
+                    className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-700 dark:hover:bg-gray-600 transition-colors !text-white text-left border-t border-gray-700 dark:border-gray-600",
+                    children: [
+                      /* @__PURE__ */ jsx12("svg", { className: "w-4.5 h-4.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx12("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 10V3L4 14h7v7l9-11h-7z" }) }),
+                      /* @__PURE__ */ jsx12("span", { className: "!text-sm font-medium", children: "Switch to command mode" })
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ] })
+      ] }),
       /* @__PURE__ */ jsx12(
         "textarea",
         {
@@ -1370,76 +1384,11 @@ function CommandComposer({
       /* @__PURE__ */ jsx13("svg", { className: "w-3 h-3 flex-shrink-0", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
       /* @__PURE__ */ jsx13("span", { children: fileError })
     ] }) }),
-    showMenu && /* @__PURE__ */ jsxs9(Fragment2, { children: [
-      /* @__PURE__ */ jsx13("div", { className: "fixed inset-0 z-[9998]", onClick: () => setShowMenu(false) }),
-      /* @__PURE__ */ jsxs9(
-        "div",
-        {
-          className: "fixed bg-gray-800 dark:bg-gray-700 rounded-xl shadow-lg overflow-hidden z-[9999] min-w-[200px]",
-          style: {
-            bottom: "auto",
-            left: menuButtonRef.current?.getBoundingClientRect().left ?? 0,
-            top: (menuButtonRef.current?.getBoundingClientRect().top ?? 0) - 8,
-            transform: "translateY(-100%)"
-          },
-          children: [
-            /* @__PURE__ */ jsxs9(
-              "button",
-              {
-                onClick: () => {
-                  fileInputRef.current?.click();
-                  setShowMenu(false);
-                },
-                className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-700 dark:hover:bg-gray-600 transition-colors !text-white text-left",
-                children: [
-                  /* @__PURE__ */ jsx13("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx13("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__ */ jsx13("span", { className: "!text-sm font-medium", children: "Add photos & files" })
-                ]
-              }
-            ),
-            onExpand && /* @__PURE__ */ jsxs9(
-              "button",
-              {
-                onClick: () => {
-                  onExpand();
-                  setShowMenu(false);
-                },
-                className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-700 dark:hover:bg-gray-600 transition-colors !text-white text-left border-t border-gray-700 dark:border-gray-600",
-                children: [
-                  /* @__PURE__ */ jsx13("svg", { className: "w-4.5 h-4.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("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__ */ jsx13("span", { className: "!text-sm font-medium", children: "Expand to chat" })
-                ]
-              }
-            )
-          ]
-        }
-      )
-    ] }),
-    pendingFiles.length > 0 && state === "idle" && /* @__PURE__ */ jsx13("div", { className: "mb-2 flex flex-wrap gap-2", children: pendingFiles.map((pf, index) => /* @__PURE__ */ jsxs9(
-      "div",
-      {
-        className: "relative group flex items-center gap-2 px-2 py-1.5 bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg",
-        children: [
-          pf.preview ? /* @__PURE__ */ jsx13("img", { src: pf.preview, alt: pf.file.name, className: "w-6 h-6 object-cover rounded" }) : /* @__PURE__ */ jsx13("div", { className: "w-6 h-6 flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded !text-gray-500 dark:!text-gray-400", children: getFileIcon(pf.file.type) }),
-          /* @__PURE__ */ jsx13("span", { className: "text-xs font-medium !text-gray-700 dark:!text-gray-300 truncate max-w-[100px]", children: pf.file.name }),
-          /* @__PURE__ */ jsx13(
-            "button",
-            {
-              onClick: () => removeFile(index),
-              className: "w-4 h-4 bg-gray-500 hover:bg-red-500 text-white rounded-full flex items-center justify-center",
-              title: "Remove file",
-              children: /* @__PURE__ */ jsx13("svg", { className: "w-2.5 h-2.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
-            }
-          )
-        ]
-      },
-      index
-    )) }),
     /* @__PURE__ */ jsxs9(
       "div",
       {
         className: cn(
-          "flex items-center gap-2 px-3 py-2 border-2 rounded-2xl bg-white dark:bg-gray-900 transition-all duration-200",
+          "apteva-composer flex items-center gap-2 px-3 py-2 border-2 bg-white dark:bg-gray-900 transition-all duration-200",
           state === "idle" && "border-gray-200 dark:border-gray-700",
           state === "loading" && "border-blue-400 dark:border-blue-500",
           state === "plan-pending" && "border-amber-400 dark:border-amber-500",
@@ -1447,18 +1396,85 @@ function CommandComposer({
           state === "error" && "border-red-400 dark:border-red-500"
         ),
         children: [
-          state === "idle" && /* @__PURE__ */ jsx13(
-            "button",
+          /* @__PURE__ */ jsxs9("div", { className: "w-8 h-8 flex items-center justify-center flex-shrink-0", children: [
+            state === "idle" && /* @__PURE__ */ jsxs9("div", { className: "relative", children: [
+              /* @__PURE__ */ jsx13(
+                "button",
+                {
+                  ref: menuButtonRef,
+                  onClick: () => setShowMenu(!showMenu),
+                  className: "w-8 h-8 rounded-lg flex items-center justify-center transition-all !text-gray-500 dark:!text-gray-400 hover:!text-gray-700 dark:hover:!text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800",
+                  title: "More options",
+                  children: /* @__PURE__ */ jsx13("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx13("path", { d: "M10 5v10M5 10h10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                }
+              ),
+              showMenu && /* @__PURE__ */ jsxs9(Fragment2, { children: [
+                /* @__PURE__ */ jsx13("div", { className: "fixed inset-0 z-[9998]", onClick: () => setShowMenu(false) }),
+                /* @__PURE__ */ jsxs9(
+                  "div",
+                  {
+                    className: "fixed bg-gray-800 dark:bg-gray-700 rounded-xl shadow-lg overflow-hidden z-[9999] min-w-[200px]",
+                    style: {
+                      left: menuButtonRef.current?.getBoundingClientRect().left ?? 0,
+                      top: (menuButtonRef.current?.getBoundingClientRect().bottom ?? 0) + 8
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs9(
+                        "button",
+                        {
+                          onClick: () => {
+                            fileInputRef.current?.click();
+                            setShowMenu(false);
+                          },
+                          className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-700 dark:hover:bg-gray-600 transition-colors !text-white text-left",
+                          children: [
+                            /* @__PURE__ */ jsx13("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx13("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__ */ jsx13("span", { className: "!text-sm font-medium", children: "Add photos & files" })
+                          ]
+                        }
+                      ),
+                      onExpand && /* @__PURE__ */ jsxs9(
+                        "button",
+                        {
+                          onClick: () => {
+                            onExpand();
+                            setShowMenu(false);
+                          },
+                          className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-700 dark:hover:bg-gray-600 transition-colors !text-white text-left border-t border-gray-700 dark:border-gray-600",
+                          children: [
+                            /* @__PURE__ */ jsx13("svg", { className: "w-4.5 h-4.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("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__ */ jsx13("span", { className: "!text-sm font-medium", children: "Expand to chat" })
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                )
+              ] })
+            ] }),
+            state === "loading" && !toolName && /* @__PURE__ */ jsx13("div", { className: "w-4 h-4 border-2 border-blue-200 border-t-blue-500 rounded-full animate-spin" }),
+            state === "loading" && toolName && /* @__PURE__ */ jsx13("div", { className: "w-2 h-2 rounded-full bg-blue-500 animate-pulse" })
+          ] }),
+          pendingFiles.length > 0 && state === "idle" && /* @__PURE__ */ jsx13("div", { className: "flex items-center gap-1 flex-shrink-0", children: pendingFiles.map((pf, index) => /* @__PURE__ */ jsxs9(
+            "div",
             {
-              ref: menuButtonRef,
-              onClick: () => setShowMenu(!showMenu),
-              className: "w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 !text-gray-500 dark:!text-gray-400 hover:!text-gray-700 dark:hover:!text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800",
-              title: "More options",
-              children: /* @__PURE__ */ jsx13("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx13("path", { d: "M10 5v10M5 10h10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
-            }
-          ),
-          state === "loading" && !toolName && /* @__PURE__ */ jsx13("div", { className: "w-4 h-4 border-2 border-blue-200 border-t-blue-500 rounded-full animate-spin flex-shrink-0" }),
-          state === "loading" && toolName && /* @__PURE__ */ jsx13("div", { className: "w-2 h-2 rounded-full bg-blue-500 animate-pulse flex-shrink-0" }),
+              className: "relative group flex items-center justify-center w-6 h-6 bg-gray-100 dark:bg-gray-800 rounded overflow-hidden",
+              title: pf.file.name,
+              children: [
+                pf.preview ? /* @__PURE__ */ jsx13("img", { src: pf.preview, alt: pf.file.name, className: "w-6 h-6 object-cover" }) : /* @__PURE__ */ jsx13("span", { className: "text-xs !text-gray-500 dark:!text-gray-400", children: getFileIcon(pf.file.type) }),
+                /* @__PURE__ */ jsx13(
+                  "button",
+                  {
+                    onClick: () => removeFile(index),
+                    className: "absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 flex items-center justify-center transition-opacity",
+                    title: "Remove",
+                    children: /* @__PURE__ */ jsx13("svg", { className: "w-3 h-3 text-white", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
+                  }
+                )
+              ]
+            },
+            index
+          )) }),
           state === "idle" ? /* @__PURE__ */ jsx13(
             "textarea",
             {
@@ -1466,7 +1482,7 @@ function CommandComposer({
               value: input,
               onChange: (e) => handleInputChange(e.target.value),
               onKeyDown: handleKeyDown,
-              placeholder,
+              placeholder: pendingFiles.length > 0 ? "Add a message..." : placeholder,
               disabled,
               rows: 1,
               className: cn(
@@ -1494,25 +1510,24 @@ function CommandComposer({
               ] }) : displayContent
             }
           ),
-          /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-1 flex-shrink-0", children: [
-            state === "plan-pending" && /* @__PURE__ */ jsxs9(Fragment2, { children: [
-              /* @__PURE__ */ jsx13(
-                "button",
-                {
-                  onClick: onApprove,
-                  className: "px-2 py-1 bg-amber-500 text-white rounded-lg hover:bg-amber-600 transition-colors text-xs font-medium",
-                  children: "Approve"
-                }
-              ),
-              /* @__PURE__ */ jsx13(
-                "button",
-                {
-                  onClick: onReject,
-                  className: "px-2 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors text-xs font-medium",
-                  children: "Modify"
-                }
-              )
-            ] }),
+          /* @__PURE__ */ jsx13("div", { className: "w-8 h-8 flex items-center justify-center flex-shrink-0", children: state === "plan-pending" ? /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx13(
+              "button",
+              {
+                onClick: onApprove,
+                className: "px-2 py-1 bg-amber-500 text-white rounded-lg hover:bg-amber-600 transition-colors text-xs font-medium",
+                children: "Approve"
+              }
+            ),
+            /* @__PURE__ */ jsx13(
+              "button",
+              {
+                onClick: onReject,
+                className: "px-2 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors text-xs font-medium",
+                children: "Modify"
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxs9(Fragment2, { children: [
             (state === "success" || state === "error") && /* @__PURE__ */ jsx13(
               "button",
               {
@@ -1537,32 +1552,10 @@ function CommandComposer({
                 children: /* @__PURE__ */ jsx13("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx13("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 12h14M12 5l7 7-7 7" }) })
               }
             )
-          ] })
+          ] }) })
         ]
       }
     ),
-    state === "success" && response?.includes("weather") && /* @__PURE__ */ jsx13("div", { className: "mt-3 p-3 bg-gradient-to-r from-blue-50 to-cyan-50 dark:from-blue-900/20 dark:to-cyan-900/20 border border-blue-200 dark:border-blue-800 rounded-xl", children: /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ jsx13("div", { className: "text-3xl", children: "\u2600\uFE0F" }),
-      /* @__PURE__ */ jsxs9("div", { className: "flex-1", children: [
-        /* @__PURE__ */ jsx13("div", { className: "text-sm font-medium text-gray-900 dark:text-white", children: "Paris, France" }),
-        /* @__PURE__ */ jsx13("div", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Sunny, 22\xB0C" })
-      ] }),
-      /* @__PURE__ */ jsx13("button", { className: "px-3 py-1 text-xs bg-blue-500 text-white rounded-lg hover:bg-blue-600", children: "Details" })
-    ] }) }),
-    state === "success" && response?.includes("trip") && /* @__PURE__ */ jsxs9("div", { className: "mt-3 p-3 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm", children: [
-      /* @__PURE__ */ jsx13("img", { src: "https://images.unsplash.com/photo-1502602898657-3e91760cbb34?w=400&h=150&fit=crop", alt: "Paris", className: "w-full h-24 object-cover rounded-lg mb-2" }),
-      /* @__PURE__ */ jsx13("div", { className: "text-sm font-medium text-gray-900 dark:text-white", children: "Paris Weekend Getaway" }),
-      /* @__PURE__ */ jsx13("div", { className: "text-xs text-gray-500 dark:text-gray-400 mb-2", children: "3 days \xB7 $850" }),
-      /* @__PURE__ */ jsxs9("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsx13("button", { className: "flex-1 px-2 py-1 text-xs bg-blue-500 text-white rounded-lg hover:bg-blue-600", children: "Book" }),
-        /* @__PURE__ */ jsx13("button", { className: "flex-1 px-2 py-1 text-xs bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600", children: "Details" })
-      ] })
-    ] }),
-    state === "success" && response?.includes("task") && /* @__PURE__ */ jsx13("div", { className: "mt-3 border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden", children: ["Review PR #123", "Update documentation", "Fix login bug"].map((task, i) => /* @__PURE__ */ jsxs9("div", { className: `flex items-center gap-2 px-3 py-2 ${i > 0 ? "border-t border-gray-100 dark:border-gray-800" : ""}`, children: [
-      /* @__PURE__ */ jsx13("div", { className: `w-2 h-2 rounded-full ${i === 0 ? "bg-green-500" : i === 1 ? "bg-yellow-500" : "bg-red-500"}` }),
-      /* @__PURE__ */ jsx13("span", { className: "flex-1 text-sm text-gray-700 dark:text-gray-300", children: task }),
-      /* @__PURE__ */ jsx13("button", { className: "text-xs text-blue-500 hover:text-blue-600", children: "View" })
-    ] }, i)) }),
     /* @__PURE__ */ jsx13(
       "input",
       {
@@ -1775,6 +1768,7 @@ function Chat({
   onFileUpload,
   onComplete,
   onError,
+  onToolResult,
   // UI
   placeholder,
   showHeader = true,
@@ -1942,6 +1936,7 @@ function Chat({
                   const toolSegment = contentSegments.find((s) => s.type === "tool" && s.id === chunk.tool_id);
                   if (toolSegment) {
                     toolSegment.result = chunk.content;
+                    onToolResult?.(toolSegment.name, chunk.content);
                   }
                   updateMessage();
                 }
@@ -2122,6 +2117,7 @@ ${commandInstruction}` : commandInstruction;
         const messagePayload = files && files.length > 0 ? await buildMessageWithAttachments(currentCommand, files) : currentCommand;
         if (enableStreaming) {
           let accumulatedContent = "";
+          let lastToolName = "";
           await aptevaClient.chatStream(
             {
               agent_id: agentId,
@@ -2138,10 +2134,12 @@ ${commandInstruction}` : commandInstruction;
                 const estimatedProgress = Math.min(Math.round(accumulatedContent.length / 10), 90);
                 setProgress(estimatedProgress);
               } else if (chunk.type === "tool_call" && chunk.tool_name) {
+                lastToolName = chunk.tool_name;
                 setCurrentToolName(chunk.tool_name);
                 accumulatedContent = "";
                 setStreamedContent("");
               } else if (chunk.type === "tool_result") {
+                onToolResult?.(lastToolName, chunk.content);
                 setCurrentToolName(null);
               } else if (chunk.type === "thread_id" && chunk.thread_id) {
                 if (!currentThreadId) {
@@ -2278,6 +2276,9 @@ ${planToExecute}`;
           .animate-pulse-border {
             animation: pulse-border 2s ease-in-out infinite;
           }
+          .apteva-composer {
+            border-radius: var(--apteva-border-radius, 1rem) !important;
+          }
         `
     } })
   ] });