@cadraos/sdk 0.1.12 → 0.1.13

package/dist/chat/index.cjs

@@ -3,6 +3,7 @@
 var react = require('react');
 var fetchEventSource = require('@microsoft/fetch-event-source');
 var jsxRuntime = require('react/jsx-runtime');
+var reactDom = require('react-dom');
 var ReactMarkdown = require('react-markdown');
 var remarkGfm = require('remark-gfm');
 
@@ -4032,6 +4033,24 @@ function useFileAttachments(options) {
     console.log("[useFileAttachments] prepareForSubmit result:", aiUuids);
     return aiUuids;
   }, [onSubmitUpload, onError]);
+  const addExternalFile = react.useCallback(
+    (opts) => {
+      const category = opts.category || (opts.mimeType.startsWith("image/") ? "image" : "document");
+      const placeholderFile = new File([], opts.filename, { type: opts.mimeType });
+      const newAttachment = {
+        uuid: opts.uuid,
+        file: placeholderFile,
+        status: "ready",
+        progress: 100,
+        category,
+        previewUrl: opts.previewUrl,
+        hasThumbnail: category === "image",
+        actualSize: opts.size
+      };
+      setFiles((prev) => [...prev, newAttachment]);
+    },
+    []
+  );
   const clear = react.useCallback(() => {
     for (const file of filesRef.current) {
       if (file.previewUrl) {
@@ -4057,6 +4076,7 @@ function useFileAttachments(options) {
     files,
     dropZoneProps,
     removeFile,
+    addExternalFile,
     getReadyUuids,
     getReadyUrls,
     prepareForSubmit,
@@ -5772,23 +5792,45 @@ function ImageLightbox({
 }) {
   const currentImage = images[currentIndex];
   const hasMultiple = images.length > 1;
+  const [container, setContainer] = react.useState(null);
+  react.useEffect(() => {
+    const el = document.createElement("div");
+    el.id = "cadra-lightbox-root";
+    el.style.position = "fixed";
+    el.style.inset = "0";
+    el.style.zIndex = "999999";
+    el.style.pointerEvents = "auto";
+    document.body.appendChild(el);
+    setContainer(el);
+    return () => {
+      document.body.removeChild(el);
+    };
+  }, []);
+  const onCloseRef = react.useRef(onClose);
+  const onPrevRef = react.useRef(onPrev);
+  const onNextRef = react.useRef(onNext);
+  onCloseRef.current = onClose;
+  onPrevRef.current = onPrev;
+  onNextRef.current = onNext;
   react.useEffect(() => {
     function handleKeyDown(e) {
       switch (e.key) {
         case "Escape":
-          onClose();
+          e.preventDefault();
+          e.stopPropagation();
+          onCloseRef.current();
           break;
         case "ArrowLeft":
-          if (hasMultiple) onPrev();
+          if (hasMultiple) onPrevRef.current();
           break;
         case "ArrowRight":
-          if (hasMultiple) onNext();
+          if (hasMultiple) onNextRef.current();
           break;
       }
     }
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [onClose, onPrev, onNext, hasMultiple]);
+    document.addEventListener("keydown", handleKeyDown, true);
+    return () => document.removeEventListener("keydown", handleKeyDown, true);
+  }, [hasMultiple]);
   react.useEffect(() => {
     const originalOverflow = document.body.style.overflow;
     document.body.style.overflow = "hidden";
@@ -5796,97 +5838,143 @@ function ImageLightbox({
       document.body.style.overflow = originalOverflow;
     };
   }, []);
-  const handleDownload = react.useCallback(() => {
+  react.useEffect(() => {
+    if (!container) return;
+    function handleClick(e) {
+      const target = e.target;
+      if (target.dataset.lightboxBackdrop === "true") {
+        e.preventDefault();
+        e.stopPropagation();
+        onCloseRef.current();
+      }
+    }
+    container.addEventListener("click", handleClick, true);
+    return () => container.removeEventListener("click", handleClick, true);
+  }, [container]);
+  const handleDownload = react.useCallback(async () => {
     if (!currentImage) return;
-    const link = document.createElement("a");
-    link.href = currentImage.url;
-    link.download = currentImage.filename || `image-${currentIndex + 1}`;
-    link.target = "_blank";
-    link.rel = "noopener noreferrer";
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-  }, [currentImage, currentIndex]);
-  if (!currentImage) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: `fixed inset-0 z-50 flex items-center justify-center bg-black/80 ${className || ""}`,
-      onClick: onClose,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-0 left-0 right-0 flex items-center justify-between p-4 z-10", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-white text-sm", children: hasMultiple && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-            currentIndex + 1,
-            " / ",
-            images.length
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                onClick: (e) => {
-                  e.stopPropagation();
-                  handleDownload();
-                },
-                className: "p-2 rounded-full bg-black/50 hover:bg-black/70 text-white transition-colors",
-                "aria-label": "Download image",
-                children: /* @__PURE__ */ jsxRuntime.jsx(DownloadIcon, { className: "h-5 w-5" })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                onClick: (e) => {
-                  e.stopPropagation();
-                  onClose();
-                },
-                className: "p-2 rounded-full bg-black/50 hover:bg-black/70 text-white transition-colors",
-                "aria-label": "Close lightbox",
-                children: /* @__PURE__ */ jsxRuntime.jsx(XIcon, { className: "h-5 w-5" })
-              }
-            )
-          ] })
-        ] }),
-        hasMultiple && /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: (e) => {
-              e.stopPropagation();
-              onPrev();
-            },
-            className: "absolute left-4 top-1/2 -translate-y-1/2 p-2 rounded-full bg-black/50 hover:bg-black/70 text-white transition-colors z-10",
-            "aria-label": "Previous image",
-            children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, { className: "h-6 w-6" })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "img",
-          {
-            src: currentImage.url,
-            alt: currentImage.alt || `Image ${currentIndex + 1}`,
-            className: "max-w-[90vw] max-h-[85vh] object-contain",
-            onClick: (e) => e.stopPropagation()
-          }
-        ),
-        hasMultiple && /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: (e) => {
-              e.stopPropagation();
-              onNext();
-            },
-            className: "absolute right-4 top-1/2 -translate-y-1/2 p-2 rounded-full bg-black/50 hover:bg-black/70 text-white transition-colors z-10",
-            "aria-label": "Next image",
-            children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon, { className: "h-6 w-6" })
-          }
-        ),
-        currentImage.alt && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 left-0 right-0 p-4 text-center z-10", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-white text-sm bg-black/50 inline-block px-3 py-1 rounded-full", children: currentImage.alt }) })
-      ]
+    const filename = currentImage.filename || `image-${currentIndex + 1}`;
+    try {
+      const response = await fetch(currentImage.url);
+      const blob = await response.blob();
+      const blobUrl = URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = blobUrl;
+      link.download = filename;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      URL.revokeObjectURL(blobUrl);
+    } catch {
+      window.open(currentImage.url, "_blank");
     }
+  }, [currentImage, currentIndex]);
+  const handleClose = react.useCallback(() => {
+    onCloseRef.current();
+  }, []);
+  if (!currentImage || !container) return null;
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-lightbox-backdrop": "true",
+        className: `absolute inset-0 flex items-center justify-center bg-black/90 ${className || ""}`,
+        style: { cursor: "zoom-out" },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "absolute top-0 left-0 right-0 flex items-center justify-between p-4",
+              style: { zIndex: 10 },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-white text-sm", children: hasMultiple && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                  currentIndex + 1,
+                  " / ",
+                  images.length
+                ] }) }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        handleDownload();
+                      },
+                      className: "p-2 rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors",
+                      style: { cursor: "pointer", pointerEvents: "auto" },
+                      "aria-label": "Download image",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(DownloadIcon, { className: "h-5 w-5" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        handleClose();
+                      },
+                      className: "p-2 rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors",
+                      style: { cursor: "pointer", pointerEvents: "auto" },
+                      "aria-label": "Close lightbox",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(XIcon, { className: "h-5 w-5" })
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          hasMultiple && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                onPrev();
+              },
+              className: "absolute left-4 top-1/2 -translate-y-1/2 p-2 rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors",
+              style: { zIndex: 10, cursor: "pointer", pointerEvents: "auto" },
+              "aria-label": "Previous image",
+              children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, { className: "h-6 w-6" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: currentImage.url,
+              alt: currentImage.alt || `Image ${currentIndex + 1}`,
+              className: "max-w-[90vw] max-h-[85vh] object-contain select-none",
+              style: { cursor: "default", pointerEvents: "auto" },
+              draggable: false
+            }
+          ),
+          hasMultiple && /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (e) => {
+                e.stopPropagation();
+                onNext();
+              },
+              className: "absolute right-4 top-1/2 -translate-y-1/2 p-2 rounded-full bg-white/10 hover:bg-white/20 text-white transition-colors",
+              style: { zIndex: 10, cursor: "pointer", pointerEvents: "auto" },
+              "aria-label": "Next image",
+              children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon, { className: "h-6 w-6" })
+            }
+          ),
+          currentImage.alt && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "absolute bottom-0 left-0 right-0 p-4 text-center",
+              style: { zIndex: 10, pointerEvents: "none" },
+              children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-white text-sm bg-black/50 inline-block px-3 py-1 rounded-full", children: currentImage.alt })
+            }
+          )
+        ]
+      }
+    ),
+    container
   );
 }
 function cn7(...classes) {
@@ -5899,12 +5987,12 @@ function ImageWithLoading({ src, alt, className, onClick }) {
     "div",
     {
       className: cn7(
-        "relative overflow-hidden bg-gray-100 dark:bg-gray-800",
+        "relative overflow-hidden rounded-lg",
         className
       ),
       children: [
-        !isLoaded && !hasError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 animate-pulse bg-gray-200 dark:bg-gray-700" }),
-        hasError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center text-gray-400 dark:text-gray-500 text-sm", children: "Failed to load" }),
+        !isLoaded && !hasError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 animate-pulse bg-gray-200 dark:bg-gray-700 rounded-lg" }),
+        hasError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center text-gray-400 dark:text-gray-500 text-sm rounded-lg bg-gray-100 dark:bg-gray-800", children: "Failed to load" }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "img",
           {
@@ -5912,7 +6000,7 @@ function ImageWithLoading({ src, alt, className, onClick }) {
             alt,
             loading: "lazy",
             className: cn7(
-              "w-full h-auto max-h-[300px] object-contain transition-opacity duration-200",
+              "w-full h-auto max-h-[280px] object-cover rounded-lg shadow-sm transition-opacity duration-200",
               isLoaded ? "opacity-100" : "opacity-0"
             ),
             onLoad: () => setIsLoaded(true),
@@ -5969,7 +6057,7 @@ function ImageGallery({
           {
             type: "button",
             onClick: () => handleImageClick(image, index),
-            className: "block rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 hover:border-blue-400 dark:hover:border-blue-600 transition-colors text-left",
+            className: "block rounded-lg overflow-hidden transition-transform hover:scale-[1.02] text-left",
             children: /* @__PURE__ */ jsxRuntime.jsx(
               ImageWithLoading,
               {
@@ -6180,7 +6268,8 @@ var INTERNAL_TOOL_NAMES = /* @__PURE__ */ new Set([
   "check_task_status",
   "assign_task",
   "update_plan",
-  "check_delegations"
+  "check_delegations",
+  "activate_skill"
 ]);
 function isInternalTool(toolName) {
   if (!toolName) return false;
@@ -6199,6 +6288,15 @@ function cn10(...classes) {
 }
 function formatToolName(toolName) {
   if (!toolName) return toolName;
+  if (toolName.includes(".")) {
+    const segments = toolName.split(".");
+    const uniqueSegments = segments.filter(
+      (seg, idx) => idx === 0 || seg.toLowerCase().trim() !== segments[idx - 1]?.toLowerCase().trim()
+    );
+    const bestSegment = uniqueSegments[uniqueSegments.length - 1]?.trim() || toolName;
+    if (bestSegment.includes(" ")) return bestSegment;
+    return formatToolName(bestSegment);
+  }
   const prefixesToRemove = [
     "skills_api_",
     "tools_api_",
@@ -6303,6 +6401,7 @@ function ToolCallEntry({
   compact = false
 }) {
   const [isExpanded, setIsExpanded] = react.useState(false);
+  const [lightboxIndex, setLightboxIndex] = react.useState(null);
   const formattedName = react.useMemo(
     () => formatToolName(toolCall.name),
     [toolCall.name]
@@ -6311,6 +6410,14 @@ function ToolCallEntry({
     () => toolCall.status === "completed" && toolCall.result ? extractImagesFromResult2(toolCall.result) : [],
     [toolCall.status, toolCall.result]
   );
+  const lightboxImages = react.useMemo(
+    () => resultImages.map((img) => ({
+      url: img.url,
+      alt: img.alt || img.prompt,
+      filename: img.alt || img.prompt
+    })),
+    [resultImages]
+  );
   const hasImages = resultImages.length > 0;
   const statusIcon = react.useMemo(() => {
     switch (toolCall.status) {
@@ -6380,47 +6487,56 @@ function ToolCallEntry({
             ]
           }
         ),
-        hasImages && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-3 pb-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn10(
-          "grid gap-2",
-          resultImages.length === 1 ? "grid-cols-1" : "grid-cols-2"
-        ), children: resultImages.map((img, idx) => {
-          const altText = img.alt || img.prompt || `Generated image ${idx + 1}`;
-          const imageElement = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "img",
-              {
-                src: img.thumbnailUrl || img.url,
-                alt: altText,
-                className: "w-full h-auto max-h-[300px] object-contain bg-gray-50 dark:bg-gray-900",
-                loading: "lazy"
-              }
-            ),
-            img.prompt && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-1 text-xs text-gray-500 dark:text-gray-400 truncate bg-gray-50 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700", children: img.prompt })
-          ] });
-          if (onImageClick) {
+        hasImages && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 pb-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn10(
+            "grid gap-3",
+            resultImages.length === 1 ? "grid-cols-1 max-w-sm" : resultImages.length === 2 ? "grid-cols-2" : "grid-cols-2 sm:grid-cols-3"
+          ), children: resultImages.map((img, idx) => {
+            const altText = img.alt || img.prompt || `Generated image ${idx + 1}`;
+            const imageElement = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group relative", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  src: img.thumbnailUrl || img.url,
+                  alt: altText,
+                  className: "w-full h-auto max-h-[280px] object-cover rounded-lg shadow-sm",
+                  loading: "lazy"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-lg bg-black/0 group-hover:bg-black/10 dark:group-hover:bg-white/5 transition-colors" })
+            ] });
             return /* @__PURE__ */ jsxRuntime.jsx(
               "button",
               {
                 type: "button",
-                onClick: () => onImageClick({ url: img.url, alt: altText, filename: altText }),
-                className: "block rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 hover:border-blue-400 dark:hover:border-blue-600 transition-colors cursor-pointer text-left",
+                onClick: () => {
+                  if (onImageClick) {
+                    onImageClick({ url: img.url, alt: altText, filename: altText });
+                  } else {
+                    setLightboxIndex(idx);
+                  }
+                },
+                className: "block rounded-lg overflow-hidden cursor-pointer text-left transition-transform hover:scale-[1.02]",
                 children: imageElement
               },
               idx
             );
-          }
-          return /* @__PURE__ */ jsxRuntime.jsx(
-            "a",
+          }) }),
+          lightboxIndex !== null && !onImageClick && /* @__PURE__ */ jsxRuntime.jsx(
+            ImageLightbox,
             {
-              href: img.url,
-              target: "_blank",
-              rel: "noopener noreferrer",
-              className: "block rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 hover:border-blue-400 dark:hover:border-blue-600 transition-colors",
-              children: imageElement
-            },
-            idx
-          );
-        }) }) }),
+              images: lightboxImages,
+              currentIndex: lightboxIndex,
+              onClose: () => setLightboxIndex(null),
+              onPrev: () => setLightboxIndex(
+                (prev) => prev !== null ? (prev - 1 + lightboxImages.length) % lightboxImages.length : null
+              ),
+              onNext: () => setLightboxIndex(
+                (prev) => prev !== null ? (prev + 1) % lightboxImages.length : null
+              )
+            }
+          )
+        ] }),
         isExpanded && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-gray-200 dark:border-gray-700 px-3 py-2 space-y-2", children: [
           toolCall.args && Object.keys(toolCall.args).length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-medium text-gray-500 dark:text-gray-400 mb-1", children: "Input" }),
@@ -6442,11 +6558,168 @@ function ToolCallEntry({
 function cn11(...classes) {
   return classes.filter(Boolean).join(" ");
 }
+function normalizeToolNameForGrouping(name) {
+  const lastSegment = name.includes(".") ? name.split(".").pop() : name;
+  return lastSegment.toLowerCase().replace(/[^a-z0-9]/g, "");
+}
+function groupToolCalls(toolCalls) {
+  const byNormalizedName = /* @__PURE__ */ new Map();
+  const nameOrder = [];
+  for (const tc of toolCalls) {
+    const key = normalizeToolNameForGrouping(tc.name);
+    if (!byNormalizedName.has(key)) {
+      byNormalizedName.set(key, []);
+      nameOrder.push(key);
+    }
+    byNormalizedName.get(key).push(tc);
+  }
+  const groups = [];
+  for (const key of nameOrder) {
+    const calls = byNormalizedName.get(key);
+    if (calls.length === 1) {
+      groups.push({ type: "single", toolCall: calls[0] });
+    } else {
+      groups.push({ type: "group", name: calls[0].name, toolCalls: calls });
+    }
+  }
+  return groups;
+}
+function ToolCallList({ toolCalls, toolCallVerbosity, onImageClick, renderToolCall }) {
+  const visibleToolCalls = react.useMemo(() => {
+    if (toolCallVerbosity !== "compact") return toolCalls;
+    return toolCalls.filter((tc) => !isInternalTool(tc.name));
+  }, [toolCalls, toolCallVerbosity]);
+  const grouped = react.useMemo(() => groupToolCalls(visibleToolCalls), [visibleToolCalls]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: grouped.map((group) => {
+    if (group.type === "single") {
+      const toolCall = group.toolCall;
+      const defaultRender = () => /* @__PURE__ */ jsxRuntime.jsx(
+        ToolCallEntry,
+        {
+          toolCall,
+          onImageClick
+        },
+        toolCall.id
+      );
+      if (renderToolCall) {
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderToolCall(toolCall, defaultRender) }, toolCall.id);
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { children: defaultRender() }, toolCall.id);
+    }
+    const completed = group.toolCalls.filter((tc) => tc.status === "completed" || tc.status === "failed");
+    const running = group.toolCalls.filter((tc) => tc.status !== "completed" && tc.status !== "failed");
+    const allImages = completed.flatMap(
+      (tc) => tc.result ? extractImagesFromResult2(tc.result) : []
+    );
+    const hasImages = allImages.length > 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+      running.length > 0 && running[0] && /* @__PURE__ */ jsxRuntime.jsx(
+        ToolCallEntry,
+        {
+          toolCall: {
+            ...running[0],
+            name: running.length > 1 ? `${running[0].name} (${running.length})` : running[0].name
+          },
+          onImageClick
+        },
+        running[0].id
+      ),
+      completed.length > 0 && hasImages && /* @__PURE__ */ jsxRuntime.jsx(
+        GroupedImageGallery,
+        {
+          images: allImages,
+          completedCount: completed.length,
+          onImageClick
+        }
+      ),
+      completed.length > 0 && !hasImages && completed.map((tc) => {
+        const defaultRender = () => /* @__PURE__ */ jsxRuntime.jsx(ToolCallEntry, { toolCall: tc, onImageClick }, tc.id);
+        if (renderToolCall) {
+          return /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderToolCall(tc, defaultRender) }, tc.id);
+        }
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { children: defaultRender() }, tc.id);
+      })
+    ] }, `group-${group.name}-${group.toolCalls[0]?.id}`);
+  }) });
+}
+function GroupedImageGallery({
+  images,
+  completedCount,
+  onImageClick
+}) {
+  const [lightboxIndex, setLightboxIndex] = react.useState(null);
+  const lightboxImages = react.useMemo(
+    () => images.map((img) => ({
+      url: img.url,
+      alt: img.alt || img.prompt,
+      filename: img.alt || img.prompt
+    })),
+    [images]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400 px-1", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-4 w-4 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "h-4 w-4 text-green-500", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        completedCount,
+        " image",
+        completedCount !== 1 ? "s" : "",
+        " generated"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn11(
+      "grid gap-3",
+      images.length === 1 ? "grid-cols-1 max-w-sm" : images.length === 2 ? "grid-cols-2" : "grid-cols-2 sm:grid-cols-3"
+    ), children: images.map((img, idx) => {
+      const altText = img.alt || img.prompt || `Generated image ${idx + 1}`;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            if (onImageClick) {
+              onImageClick({ url: img.url, alt: altText, filename: altText });
+            } else {
+              setLightboxIndex(idx);
+            }
+          },
+          className: "block rounded-lg overflow-hidden cursor-pointer text-left transition-transform hover:scale-[1.02] group",
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: img.thumbnailUrl || img.url,
+                alt: altText,
+                className: "w-full h-auto max-h-[280px] object-cover rounded-lg shadow-sm",
+                loading: "lazy"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-lg bg-black/0 group-hover:bg-black/10 dark:group-hover:bg-white/5 transition-colors" })
+          ] })
+        },
+        `${img.url}-${idx}`
+      );
+    }) }),
+    lightboxIndex !== null && !onImageClick && /* @__PURE__ */ jsxRuntime.jsx(
+      ImageLightbox,
+      {
+        images: lightboxImages,
+        currentIndex: lightboxIndex,
+        onClose: () => setLightboxIndex(null),
+        onPrev: () => setLightboxIndex(
+          (prev) => prev !== null ? (prev - 1 + lightboxImages.length) % lightboxImages.length : null
+        ),
+        onNext: () => setLightboxIndex(
+          (prev) => prev !== null ? (prev + 1) % lightboxImages.length : null
+        )
+      }
+    )
+  ] });
+}
 function ChatMessage({
   message,
   enableMarkdown = true,
   showToolCalls = true,
-  toolCallVerbosity: _toolCallVerbosity,
+  toolCallVerbosity = "compact",
   className,
   markdownComponents,
   markdownUrlTransform,
@@ -6520,21 +6793,16 @@ function ChatMessage({
               ),
               showThinking && message.thinkingBlocks && message.thinkingBlocks.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(ThinkingBlockList, { blocks: message.thinkingBlocks }),
               showDelegation && message.delegationEvents && message.delegationEvents.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(DelegationProgressList, { events: message.delegationEvents }),
-              showToolCalls && message.toolCalls && message.toolCalls.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: message.toolCalls.map((toolCall) => {
-                const defaultRender = () => /* @__PURE__ */ jsxRuntime.jsx(
-                  ToolCallEntry,
-                  {
-                    toolCall,
-                    onImageClick
-                  },
-                  toolCall.id
-                );
-                if (renderToolCall) {
-                  return /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderToolCall(toolCall, defaultRender) }, toolCall.id);
+              showToolCalls && toolCallVerbosity !== "hidden" && message.toolCalls && message.toolCalls.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                ToolCallList,
+                {
+                  toolCalls: message.toolCalls,
+                  toolCallVerbosity,
+                  onImageClick,
+                  renderToolCall
                 }
-                return defaultRender();
-              }) }),
-              showImages && message.images && message.images.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+              ),
+              showImages && !showToolCalls && message.images && message.images.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
                 ImageGallery,
                 {
                   images: message.images,
@@ -6746,7 +7014,8 @@ function AgentChat({
   showImages = true,
   pollingInterval,
   pollingEnabled,
-  onDelegation
+  onDelegation,
+  onAttachmentsReady
 }) {
   const {
     messages,
@@ -6793,6 +7062,11 @@ function AgentChat({
       console.error("[AgentChat] Attachment error:", msg);
     }
   });
+  react.useEffect(() => {
+    if (enableAttachments && onAttachmentsReady) {
+      onAttachmentsReady({ addExternalFile: attachments.addExternalFile });
+    }
+  }, [enableAttachments, onAttachmentsReady, attachments.addExternalFile]);
   const handleSend = react.useCallback(
     async (content) => {
       if (enableAttachments && attachments.hasReadyFiles) {