@supyagent/sdk 0.1.23 → 0.1.25

package/dist/react.cjs

@@ -66,6 +66,7 @@ __export(react_exports, {
   ToolInput: () => ToolInput,
   TwilioFormatter: () => TwilioFormatter,
   TwitterFormatter: () => TwitterFormatter,
+  ViewImageFormatter: () => ViewImageFormatter,
   WhatsAppFormatter: () => WhatsAppFormatter,
   extractArgs: () => extractArgs,
   extractResult: () => extractResult,
@@ -213,6 +214,8 @@ function getFormatterType(toolName) {
       return "whatsapp";
     case "browser":
       return "browser";
+    case "viewImage":
+      return "viewImage";
     case "db":
       return "compute";
     case "files":
@@ -283,7 +286,8 @@ var ICON_MAP = {
   onedrive: import_lucide_react.HardDrive,
   telegram: import_lucide_react.Send,
   whatsapp: import_lucide_react.MessageCircle,
-  browser: import_lucide_react.Globe
+  browser: import_lucide_react.Globe,
+  viewImage: import_lucide_react.Image
 };
 function ProviderIcon({ toolName, className = "h-4 w-4" }) {
   const provider = getProviderFromToolName(toolName);
@@ -735,6 +739,20 @@ function getBrowserSummary(data, toolName) {
   }
   return { text: humanizeToolName(toolName) };
 }
+function getViewImageSummary(data) {
+  if (typeof data === "object" && data !== null) {
+    const d = data;
+    if (d.url && typeof d.url === "string") {
+      try {
+        const hostname = new URL(d.url).hostname.replace("www.", "");
+        return { text: `Image from ${hostname}` };
+      } catch {
+        return { text: "Image displayed" };
+      }
+    }
+  }
+  return { text: "Image displayed" };
+}
 function getBashSummary(data) {
   if (typeof data !== "object" || data === null) return { text: "Command executed" };
   const d = data;
@@ -779,6 +797,7 @@ var SUMMARY_MAP = {
   video: getVideoSummary,
   whatsapp: getWhatsappSummary,
   browser: getBrowserSummary,
+  viewImage: getViewImageSummary,
   bash: getBashSummary,
   generic: getGenericSummary
 };
@@ -3248,17 +3267,52 @@ function BrowserFormatter({ data }) {
   ] });
 }
 
-// src/ui/formatters/generic.tsx
+// src/ui/formatters/view-image.tsx
+var import_lucide_react31 = require("lucide-react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
+function isViewImageData(data) {
+  return typeof data === "object" && data !== null && "url" in data;
+}
+function getDomain3(url) {
+  try {
+    return new URL(url).hostname.replace("www.", "");
+  } catch {
+    return url;
+  }
+}
+function ViewImageFormatter({ data }) {
+  if (!isViewImageData(data) || !data.url) {
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("pre", { className: "rounded-lg border border-border bg-background p-3 text-xs text-foreground overflow-x-auto max-h-96 overflow-y-auto", children: JSON.stringify(data, null, 2) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "space-y-2", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "rounded-lg border border-border bg-background overflow-hidden", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-2 px-3 py-1.5 bg-muted border-b border-border", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react31.Image, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-xs text-muted-foreground flex-1 truncate", children: getDomain3(data.url) }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("a", { href: data.url, target: "_blank", rel: "noopener noreferrer", className: "shrink-0 text-muted-foreground hover:text-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_lucide_react31.ExternalLink, { className: "h-3.5 w-3.5" }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "p-2", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      "img",
+      {
+        src: data.url,
+        alt: "Viewed image",
+        className: "w-full rounded border border-border",
+        loading: "lazy"
+      }
+    ) })
+  ] }) });
+}
+
+// src/ui/formatters/generic.tsx
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function GenericFormatter({ data }) {
   if (data === null || data === void 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-sm text-muted-foreground italic", children: "No data returned" });
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-sm text-muted-foreground italic", children: "No data returned" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("pre", { className: "rounded-lg border border-border bg-background p-3 text-xs text-foreground overflow-x-auto max-h-96 overflow-y-auto", children: JSON.stringify(data, null, 2) });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("pre", { className: "rounded-lg border border-border bg-background p-3 text-xs text-foreground overflow-x-auto max-h-96 overflow-y-auto", children: JSON.stringify(data, null, 2) });
 }
 
 // src/ui/tool-result.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function extractToolName(part) {
   if (part.type.startsWith("tool-") && part.type !== "tool-invocation") {
     return part.type.slice(5);
@@ -3311,63 +3365,65 @@ function maybeNormalize(toolName, formatterType, data) {
 function renderFormatter(formatterType, data) {
   switch (formatterType) {
     case "email":
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(EmailFormatter, { data });
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(EmailFormatter, { data });
     case "calendar":
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CalendarEventFormatter, { data });
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CalendarEventFormatter, { data });
     case "slack":
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SlackMessageFormatter, { data });
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SlackMessageFormatter, { data });
     case "github":
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(GithubFormatter, { data });
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(GithubFormatter, { data });
     case "drive":
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DriveFileFormatter, { data });
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DriveFileFormatter, { data });
     case "search":
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SearchFormatter, { data });
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SearchFormatter, { data });
     case "docs":
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DocsFormatter, { data });
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DocsFormatter, { data });
     case "sheets":
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SheetsFormatter, { data });
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SheetsFormatter, { data });
     case "slides":
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SlidesFormatter, { data });
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SlidesFormatter, { data });
     case "hubspot":
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(HubspotFormatter, { data });
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(HubspotFormatter, { data });
     case "linear":
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(LinearFormatter, { data });
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(LinearFormatter, { data });
     case "pipedrive":
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(PipedriveFormatter, { data });
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(PipedriveFormatter, { data });
     case "compute":
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ComputeFormatter, { data });
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ComputeFormatter, { data });
     case "resend":
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ResendFormatter, { data });
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ResendFormatter, { data });
     case "inbox":
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(InboxFormatter, { data });
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(InboxFormatter, { data });
     case "discord":
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(DiscordFormatter, { data });
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(DiscordFormatter, { data });
     case "notion":
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(NotionFormatter, { data });
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(NotionFormatter, { data });
     case "twitter":
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TwitterFormatter, { data });
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TwitterFormatter, { data });
     case "telegram":
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TelegramFormatter, { data });
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TelegramFormatter, { data });
     case "stripe":
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(StripeFormatter, { data });
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(StripeFormatter, { data });
     case "jira":
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(JiraFormatter, { data });
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(JiraFormatter, { data });
     case "salesforce":
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SalesforceFormatter, { data });
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SalesforceFormatter, { data });
     case "brevo":
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(BrevoFormatter, { data });
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(BrevoFormatter, { data });
     case "calendly":
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CalendlyFormatter, { data });
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CalendlyFormatter, { data });
     case "twilio":
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(TwilioFormatter, { data });
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TwilioFormatter, { data });
     case "linkedin":
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(LinkedInFormatter, { data });
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(LinkedInFormatter, { data });
     case "whatsapp":
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(WhatsAppFormatter, { data });
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(WhatsAppFormatter, { data });
     case "browser":
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(BrowserFormatter, { data });
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(BrowserFormatter, { data });
+    case "viewImage":
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(ViewImageFormatter, { data });
     default:
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(GenericFormatter, { data });
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(GenericFormatter, { data });
   }
 }
 function SupyagentToolResult({ part }) {
@@ -3382,7 +3438,7 @@ function SupyagentToolResult({ part }) {
   const formatterType = getFormatterType(toolName);
   const data = maybeNormalize(toolName, formatterType, result);
   const summary = getSummary(formatterType, data, toolName);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     CollapsibleResult,
     {
       toolName,
@@ -3395,7 +3451,7 @@ function SupyagentToolResult({ part }) {
 
 // src/ui/tool-input.tsx
 var import_react2 = __toESM(require("react"), 1);
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function formatValue(value) {
   if (value === null || value === void 0) {
     return { text: "null", muted: true };
@@ -3429,19 +3485,19 @@ function formatValue(value) {
 }
 function ToolInput({ args }) {
   if (!args || Object.keys(args).length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-sm", children: Object.entries(args).map(([key, value]) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-sm", children: Object.entries(args).map(([key, value]) => {
     const formatted = formatValue(value);
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react2.default.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-muted-foreground select-none", children: key }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: formatted.muted ? "text-muted-foreground" : "text-foreground", children: formatted.text })
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react2.default.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-muted-foreground select-none", children: key }),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: formatted.muted ? "text-muted-foreground" : "text-foreground", children: formatted.text })
     ] }, key);
   }) });
 }
 
 // src/ui/tool-action.tsx
 var import_react3 = require("react");
-var import_lucide_react31 = require("lucide-react");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_lucide_react32 = require("lucide-react");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var BADGE_STYLES2 = {
   default: "bg-muted text-muted-foreground",
   success: "bg-green-500/10 text-green-500",
@@ -3474,59 +3530,59 @@ function SupyagentToolAction({ part, defaultExpanded = false }) {
   const hasArgs = args && Object.keys(args).length > 0;
   const hasExpandableContent = hasArgs || formatterOutput;
   const canExpand = !isStreaming && hasExpandableContent;
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
     "div",
     {
       className: "rounded-lg border border-border bg-card overflow-hidden",
       "data-state": isDone ? "done" : isError ? "error" : isStreaming ? "streaming" : "pending",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
           "button",
           {
             type: "button",
             onClick: () => canExpand && setExpanded(!expanded),
             className: `flex items-center gap-2 w-full px-3 py-2 text-left transition-colors ${canExpand ? "hover:bg-muted cursor-pointer" : "cursor-default"}`,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "relative shrink-0", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ProviderIcon, { toolName, className: "h-4 w-4 text-muted-foreground" }),
-                isStreaming && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react31.Loader2, { className: "absolute -top-1 -right-1 h-3 w-3 text-primary animate-spin" })
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "relative shrink-0", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ProviderIcon, { toolName, className: "h-4 w-4 text-muted-foreground" }),
+                isStreaming && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react32.Loader2, { className: "absolute -top-1 -right-1 h-3 w-3 text-primary animate-spin" })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-xs text-muted-foreground", children: providerLabel }),
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-sm text-foreground", children: actionLabel }),
-              summary && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-muted-foreground text-xs", children: "\xB7" }),
-                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-sm text-muted-foreground flex-1 truncate", children: summary.text })
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-xs text-muted-foreground", children: providerLabel }),
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-sm text-foreground", children: actionLabel }),
+              summary && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_jsx_runtime35.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-muted-foreground text-xs", children: "\xB7" }),
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-sm text-muted-foreground flex-1 truncate", children: summary.text })
               ] }),
-              !summary && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "flex-1" }),
-              summary?.badge && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+              !summary && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "flex-1" }),
+              summary?.badge && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
                 "span",
                 {
                   className: `inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium shrink-0 ${BADGE_STYLES2[summary.badge.variant || "default"]}`,
                   children: summary.badge.text
                 }
               ),
-              isDone && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react31.Check, { className: "h-3.5 w-3.5 text-green-500 shrink-0" }),
-              isError && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "inline-flex items-center gap-1 rounded-full bg-destructive/10 px-2 py-0.5 text-xs text-destructive shrink-0", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react31.AlertCircle, { className: "h-3 w-3" }),
+              isDone && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react32.Check, { className: "h-3.5 w-3.5 text-green-500 shrink-0" }),
+              isError && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "inline-flex items-center gap-1 rounded-full bg-destructive/10 px-2 py-0.5 text-xs text-destructive shrink-0", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react32.AlertCircle, { className: "h-3 w-3" }),
                 "Error"
               ] }),
-              isStreaming && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "inline-flex items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-xs text-primary animate-pulse shrink-0", children: "Calling..." }),
-              canExpand && (expanded ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react31.ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground shrink-0" }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react31.ChevronRight, { className: "h-3.5 w-3.5 text-muted-foreground shrink-0" }))
+              isStreaming && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "inline-flex items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-xs text-primary animate-pulse shrink-0", children: "Calling..." }),
+              canExpand && (expanded ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react32.ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground shrink-0" }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react32.ChevronRight, { className: "h-3.5 w-3.5 text-muted-foreground shrink-0" }))
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           "div",
           {
             className: "grid transition-[grid-template-rows] duration-200 ease-out",
             style: { gridTemplateRows: expanded ? "1fr" : "0fr" },
-            children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "border-t border-border px-3 py-2 space-y-3", children: [
-              args && Object.keys(args).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground mb-1.5", children: "Input" }),
-                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ToolInput, { args })
+            children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "border-t border-border px-3 py-2 space-y-3", children: [
+              args && Object.keys(args).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground mb-1.5", children: "Input" }),
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ToolInput, { args })
               ] }),
-              formatterOutput && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground mb-1.5", children: "Output" }),
+              formatterOutput && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground mb-1.5", children: "Output" }),
                 formatterOutput
               ] })
             ] }) })
@@ -3539,8 +3595,8 @@ function SupyagentToolAction({ part, defaultExpanded = false }) {
 
 // src/ui/tool-call.tsx
 var import_react4 = require("react");
-var import_lucide_react32 = require("lucide-react");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_lucide_react33 = require("lucide-react");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function extractToolName2(part) {
   if (part.type.startsWith("tool-") && part.type !== "tool-invocation") {
     return part.type.slice(5);
@@ -3569,39 +3625,39 @@ function SupyagentToolCall({ part }) {
   const isStreaming = state === "input-streaming";
   const isError = state === "output-error";
   const isDone = state === "output-available";
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
     "div",
     {
       className: "rounded-lg border border-border bg-card overflow-hidden",
       "data-state": isDone ? "done" : isError ? "error" : isStreaming ? "streaming" : "pending",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
           "button",
           {
             type: "button",
             onClick: () => args && setExpanded(!expanded),
             className: "flex items-center gap-2 w-full px-3 py-2 text-left hover:bg-muted transition-colors",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "relative", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ProviderIcon, { toolName, className: "h-4 w-4 text-muted-foreground" }),
-                isStreaming && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react32.Loader2, { className: "absolute -top-1 -right-1 h-3 w-3 text-primary animate-spin" })
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "relative", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ProviderIcon, { toolName, className: "h-4 w-4 text-muted-foreground" }),
+                isStreaming && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react33.Loader2, { className: "absolute -top-1 -right-1 h-3 w-3 text-primary animate-spin" })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-xs text-muted-foreground", children: providerLabel }),
-              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-sm text-foreground flex-1", children: actionLabel }),
-              isDone && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "inline-flex items-center gap-1 rounded-full bg-green-500/10 px-2 py-0.5 text-xs text-green-500", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react32.Check, { className: "h-3 w-3" }),
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-xs text-muted-foreground", children: providerLabel }),
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "text-sm text-foreground flex-1", children: actionLabel }),
+              isDone && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "inline-flex items-center gap-1 rounded-full bg-green-500/10 px-2 py-0.5 text-xs text-green-500", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react33.Check, { className: "h-3 w-3" }),
                 "Completed"
               ] }),
-              isError && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "inline-flex items-center gap-1 rounded-full bg-destructive/10 px-2 py-0.5 text-xs text-destructive", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react32.AlertCircle, { className: "h-3 w-3" }),
+              isError && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "inline-flex items-center gap-1 rounded-full bg-destructive/10 px-2 py-0.5 text-xs text-destructive", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react33.AlertCircle, { className: "h-3 w-3" }),
                 "Error"
               ] }),
-              isStreaming && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "inline-flex items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-xs text-primary animate-pulse", children: "Calling..." }),
-              args && (expanded ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react32.ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react32.ChevronRight, { className: "h-3.5 w-3.5 text-muted-foreground" }))
+              isStreaming && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "inline-flex items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-xs text-primary animate-pulse", children: "Calling..." }),
+              args && (expanded ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react33.ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_lucide_react33.ChevronRight, { className: "h-3.5 w-3.5 text-muted-foreground" }))
             ]
           }
         ),
-        expanded && args && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "border-t border-border px-3 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("pre", { className: "text-xs text-muted-foreground overflow-x-auto", children: JSON.stringify(args, null, 2) }) })
+        expanded && args && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "border-t border-border px-3 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("pre", { className: "text-xs text-muted-foreground overflow-x-auto", children: JSON.stringify(args, null, 2) }) })
       ]
     }
   );
@@ -3643,6 +3699,7 @@ function SupyagentToolCall({ part }) {
   ToolInput,
   TwilioFormatter,
   TwitterFormatter,
+  ViewImageFormatter,
   WhatsAppFormatter,
   extractArgs,
   extractResult,