@supyagent/sdk 0.1.23 → 0.1.25

package/dist/react.d.cts

@@ -21,7 +21,7 @@ declare function getProviderLabel(provider: string): string;
 /**
  * Determine which formatter to use based on tool name prefix.
  */
-type FormatterType = "email" | "calendar" | "slack" | "github" | "drive" | "search" | "docs" | "sheets" | "slides" | "hubspot" | "linear" | "pipedrive" | "compute" | "resend" | "inbox" | "discord" | "notion" | "twitter" | "telegram" | "stripe" | "jira" | "salesforce" | "brevo" | "calendly" | "twilio" | "linkedin" | "bash" | "image" | "audio" | "video" | "whatsapp" | "browser" | "generic";
+type FormatterType = "email" | "calendar" | "slack" | "github" | "drive" | "search" | "docs" | "sheets" | "slides" | "hubspot" | "linear" | "pipedrive" | "compute" | "resend" | "inbox" | "discord" | "notion" | "twitter" | "telegram" | "stripe" | "jira" | "salesforce" | "brevo" | "calendly" | "twilio" | "linkedin" | "bash" | "image" | "audio" | "video" | "whatsapp" | "browser" | "viewImage" | "generic";
 declare function getFormatterType(toolName: string): FormatterType;
 /**
  * Resolve a virtual tool name for rendering purposes.
@@ -277,4 +277,9 @@ interface BrowserFormatterProps {
 }
 declare function BrowserFormatter({ data }: BrowserFormatterProps): react_jsx_runtime.JSX.Element;
 
-export { BrevoFormatter, BrowserFormatter, CalendarEventFormatter, CalendlyFormatter, CollapsibleResult, type CollapsibleResultProps, ComputeFormatter, DiscordFormatter, DocsFormatter, DriveFileFormatter, EmailFormatter, type FormatterType, GenericFormatter, GithubFormatter, HubspotFormatter, InboxFormatter, JiraFormatter, LinearFormatter, LinkedInFormatter, NotionFormatter, PROVIDER_LABELS, PipedriveFormatter, ProviderIcon, ResendFormatter, SalesforceFormatter, SearchFormatter, SheetsFormatter, SlackMessageFormatter, SlidesFormatter, StripeFormatter, type SummaryResult, SupyagentToolAction, SupyagentToolCall, SupyagentToolResult, TelegramFormatter, ToolInput, type ToolResultPart, TwilioFormatter, TwitterFormatter, WhatsAppFormatter, extractArgs, extractResult, extractState, extractToolName, getFormatterType, getProviderFromToolName, getProviderLabel, getSummary, humanizeToolName, maybeNormalize, normalizeMicrosoftCalendar, normalizeMicrosoftDrive, normalizeMicrosoftMail, resolveToolName, unwrapSupyagentResult };
+interface ViewImageFormatterProps {
+    data: unknown;
+}
+declare function ViewImageFormatter({ data }: ViewImageFormatterProps): react_jsx_runtime.JSX.Element;
+
+export { BrevoFormatter, BrowserFormatter, CalendarEventFormatter, CalendlyFormatter, CollapsibleResult, type CollapsibleResultProps, ComputeFormatter, DiscordFormatter, DocsFormatter, DriveFileFormatter, EmailFormatter, type FormatterType, GenericFormatter, GithubFormatter, HubspotFormatter, InboxFormatter, JiraFormatter, LinearFormatter, LinkedInFormatter, NotionFormatter, PROVIDER_LABELS, PipedriveFormatter, ProviderIcon, ResendFormatter, SalesforceFormatter, SearchFormatter, SheetsFormatter, SlackMessageFormatter, SlidesFormatter, StripeFormatter, type SummaryResult, SupyagentToolAction, SupyagentToolCall, SupyagentToolResult, TelegramFormatter, ToolInput, type ToolResultPart, TwilioFormatter, TwitterFormatter, ViewImageFormatter, WhatsAppFormatter, extractArgs, extractResult, extractState, extractToolName, getFormatterType, getProviderFromToolName, getProviderLabel, getSummary, humanizeToolName, maybeNormalize, normalizeMicrosoftCalendar, normalizeMicrosoftDrive, normalizeMicrosoftMail, resolveToolName, unwrapSupyagentResult };

package/dist/react.d.ts

@@ -21,7 +21,7 @@ declare function getProviderLabel(provider: string): string;
 /**
  * Determine which formatter to use based on tool name prefix.
  */
-type FormatterType = "email" | "calendar" | "slack" | "github" | "drive" | "search" | "docs" | "sheets" | "slides" | "hubspot" | "linear" | "pipedrive" | "compute" | "resend" | "inbox" | "discord" | "notion" | "twitter" | "telegram" | "stripe" | "jira" | "salesforce" | "brevo" | "calendly" | "twilio" | "linkedin" | "bash" | "image" | "audio" | "video" | "whatsapp" | "browser" | "generic";
+type FormatterType = "email" | "calendar" | "slack" | "github" | "drive" | "search" | "docs" | "sheets" | "slides" | "hubspot" | "linear" | "pipedrive" | "compute" | "resend" | "inbox" | "discord" | "notion" | "twitter" | "telegram" | "stripe" | "jira" | "salesforce" | "brevo" | "calendly" | "twilio" | "linkedin" | "bash" | "image" | "audio" | "video" | "whatsapp" | "browser" | "viewImage" | "generic";
 declare function getFormatterType(toolName: string): FormatterType;
 /**
  * Resolve a virtual tool name for rendering purposes.
@@ -277,4 +277,9 @@ interface BrowserFormatterProps {
 }
 declare function BrowserFormatter({ data }: BrowserFormatterProps): react_jsx_runtime.JSX.Element;
 
-export { BrevoFormatter, BrowserFormatter, CalendarEventFormatter, CalendlyFormatter, CollapsibleResult, type CollapsibleResultProps, ComputeFormatter, DiscordFormatter, DocsFormatter, DriveFileFormatter, EmailFormatter, type FormatterType, GenericFormatter, GithubFormatter, HubspotFormatter, InboxFormatter, JiraFormatter, LinearFormatter, LinkedInFormatter, NotionFormatter, PROVIDER_LABELS, PipedriveFormatter, ProviderIcon, ResendFormatter, SalesforceFormatter, SearchFormatter, SheetsFormatter, SlackMessageFormatter, SlidesFormatter, StripeFormatter, type SummaryResult, SupyagentToolAction, SupyagentToolCall, SupyagentToolResult, TelegramFormatter, ToolInput, type ToolResultPart, TwilioFormatter, TwitterFormatter, WhatsAppFormatter, extractArgs, extractResult, extractState, extractToolName, getFormatterType, getProviderFromToolName, getProviderLabel, getSummary, humanizeToolName, maybeNormalize, normalizeMicrosoftCalendar, normalizeMicrosoftDrive, normalizeMicrosoftMail, resolveToolName, unwrapSupyagentResult };
+interface ViewImageFormatterProps {
+    data: unknown;
+}
+declare function ViewImageFormatter({ data }: ViewImageFormatterProps): react_jsx_runtime.JSX.Element;
+
+export { BrevoFormatter, BrowserFormatter, CalendarEventFormatter, CalendlyFormatter, CollapsibleResult, type CollapsibleResultProps, ComputeFormatter, DiscordFormatter, DocsFormatter, DriveFileFormatter, EmailFormatter, type FormatterType, GenericFormatter, GithubFormatter, HubspotFormatter, InboxFormatter, JiraFormatter, LinearFormatter, LinkedInFormatter, NotionFormatter, PROVIDER_LABELS, PipedriveFormatter, ProviderIcon, ResendFormatter, SalesforceFormatter, SearchFormatter, SheetsFormatter, SlackMessageFormatter, SlidesFormatter, StripeFormatter, type SummaryResult, SupyagentToolAction, SupyagentToolCall, SupyagentToolResult, TelegramFormatter, ToolInput, type ToolResultPart, TwilioFormatter, TwitterFormatter, ViewImageFormatter, WhatsAppFormatter, extractArgs, extractResult, extractState, extractToolName, getFormatterType, getProviderFromToolName, getProviderLabel, getSummary, humanizeToolName, maybeNormalize, normalizeMicrosoftCalendar, normalizeMicrosoftDrive, normalizeMicrosoftMail, resolveToolName, unwrapSupyagentResult };

package/dist/react.js

@@ -128,6 +128,8 @@ function getFormatterType(toolName) {
       return "whatsapp";
     case "browser":
       return "browser";
+    case "viewImage":
+      return "viewImage";
     case "db":
       return "compute";
     case "files":
@@ -190,7 +192,8 @@ import {
   MessageCircle,
   UserCircle,
   Monitor,
-  Globe
+  Globe,
+  Image
 } from "lucide-react";
 import { jsx } from "react/jsx-runtime";
 var ICON_MAP = {
@@ -224,7 +227,8 @@ var ICON_MAP = {
   onedrive: HardDrive,
   telegram: Send,
   whatsapp: MessageCircle,
-  browser: Globe
+  browser: Globe,
+  viewImage: Image
 };
 function ProviderIcon({ toolName, className = "h-4 w-4" }) {
   const provider = getProviderFromToolName(toolName);
@@ -676,6 +680,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;
@@ -720,6 +738,7 @@ var SUMMARY_MAP = {
   video: getVideoSummary,
   whatsapp: getWhatsappSummary,
   browser: getBrowserSummary,
+  viewImage: getViewImageSummary,
   bash: getBashSummary,
   generic: getGenericSummary
 };
@@ -1170,7 +1189,7 @@ function GithubFormatter({ data }) {
 }
 
 // src/ui/formatters/drive-file.tsx
-import { FileText as FileText2, Folder, Image, Film, FileSpreadsheet, ExternalLink, Users as UsersIcon } from "lucide-react";
+import { FileText as FileText2, Folder, Image as Image2, Film, FileSpreadsheet, ExternalLink, Users as UsersIcon } from "lucide-react";
 import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function isDriveFile(data) {
   return typeof data === "object" && data !== null && ("name" in data || "mimeType" in data);
@@ -1178,7 +1197,7 @@ function isDriveFile(data) {
 function getFileIcon(mimeType) {
   if (!mimeType) return FileText2;
   if (mimeType.includes("folder")) return Folder;
-  if (mimeType.includes("image")) return Image;
+  if (mimeType.includes("image")) return Image2;
   if (mimeType.includes("video")) return Film;
   if (mimeType.includes("spreadsheet") || mimeType.includes("excel")) return FileSpreadsheet;
   return FileText2;
@@ -3133,7 +3152,7 @@ function WhatsAppFormatter({ data }) {
 }
 
 // src/ui/formatters/browser.tsx
-import { Globe as Globe3, ExternalLink as ExternalLink8, FileText as FileText7, Image as Image2 } from "lucide-react";
+import { Globe as Globe3, ExternalLink as ExternalLink8, FileText as FileText7, Image as Image3 } from "lucide-react";
 import { jsx as jsx30, jsxs as jsxs29 } from "react/jsx-runtime";
 function isBrowserData(data) {
   if (typeof data !== "object" || data === null) return false;
@@ -3164,7 +3183,7 @@ function BrowserFormatter({ data }) {
     ] }) }),
     screenshotUrl && /* @__PURE__ */ jsxs29("div", { className: "rounded-lg border border-border bg-background overflow-hidden", children: [
       /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-1.5 px-3 py-1.5 bg-muted border-b border-border", children: [
-        /* @__PURE__ */ jsx30(Image2, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+        /* @__PURE__ */ jsx30(Image3, { className: "h-3.5 w-3.5 text-muted-foreground" }),
         /* @__PURE__ */ jsx30("span", { className: "text-xs text-muted-foreground", children: "Screenshot" })
       ] }),
       /* @__PURE__ */ jsx30("div", { className: "p-2", children: /* @__PURE__ */ jsx30(
@@ -3198,17 +3217,52 @@ function BrowserFormatter({ data }) {
   ] });
 }
 
+// src/ui/formatters/view-image.tsx
+import { Image as Image4, ExternalLink as ExternalLink9 } from "lucide-react";
+import { jsx as jsx31, jsxs as jsxs30 } from "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__ */ jsx31("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__ */ jsx31("div", { className: "space-y-2", children: /* @__PURE__ */ jsxs30("div", { className: "rounded-lg border border-border bg-background overflow-hidden", children: [
+    /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-2 px-3 py-1.5 bg-muted border-b border-border", children: [
+      /* @__PURE__ */ jsx31(Image4, { className: "h-3.5 w-3.5 text-muted-foreground" }),
+      /* @__PURE__ */ jsx31("span", { className: "text-xs text-muted-foreground flex-1 truncate", children: getDomain3(data.url) }),
+      /* @__PURE__ */ jsx31("a", { href: data.url, target: "_blank", rel: "noopener noreferrer", className: "shrink-0 text-muted-foreground hover:text-foreground", children: /* @__PURE__ */ jsx31(ExternalLink9, { className: "h-3.5 w-3.5" }) })
+    ] }),
+    /* @__PURE__ */ jsx31("div", { className: "p-2", children: /* @__PURE__ */ jsx31(
+      "img",
+      {
+        src: data.url,
+        alt: "Viewed image",
+        className: "w-full rounded border border-border",
+        loading: "lazy"
+      }
+    ) })
+  ] }) });
+}
+
 // src/ui/formatters/generic.tsx
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { jsx as jsx32 } from "react/jsx-runtime";
 function GenericFormatter({ data }) {
   if (data === null || data === void 0) {
-    return /* @__PURE__ */ jsx31("p", { className: "text-sm text-muted-foreground italic", children: "No data returned" });
+    return /* @__PURE__ */ jsx32("p", { className: "text-sm text-muted-foreground italic", children: "No data returned" });
   }
-  return /* @__PURE__ */ jsx31("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__ */ jsx32("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
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 function extractToolName(part) {
   if (part.type.startsWith("tool-") && part.type !== "tool-invocation") {
     return part.type.slice(5);
@@ -3261,63 +3315,65 @@ function maybeNormalize(toolName, formatterType, data) {
 function renderFormatter(formatterType, data) {
   switch (formatterType) {
     case "email":
-      return /* @__PURE__ */ jsx32(EmailFormatter, { data });
+      return /* @__PURE__ */ jsx33(EmailFormatter, { data });
     case "calendar":
-      return /* @__PURE__ */ jsx32(CalendarEventFormatter, { data });
+      return /* @__PURE__ */ jsx33(CalendarEventFormatter, { data });
     case "slack":
-      return /* @__PURE__ */ jsx32(SlackMessageFormatter, { data });
+      return /* @__PURE__ */ jsx33(SlackMessageFormatter, { data });
     case "github":
-      return /* @__PURE__ */ jsx32(GithubFormatter, { data });
+      return /* @__PURE__ */ jsx33(GithubFormatter, { data });
     case "drive":
-      return /* @__PURE__ */ jsx32(DriveFileFormatter, { data });
+      return /* @__PURE__ */ jsx33(DriveFileFormatter, { data });
     case "search":
-      return /* @__PURE__ */ jsx32(SearchFormatter, { data });
+      return /* @__PURE__ */ jsx33(SearchFormatter, { data });
     case "docs":
-      return /* @__PURE__ */ jsx32(DocsFormatter, { data });
+      return /* @__PURE__ */ jsx33(DocsFormatter, { data });
     case "sheets":
-      return /* @__PURE__ */ jsx32(SheetsFormatter, { data });
+      return /* @__PURE__ */ jsx33(SheetsFormatter, { data });
     case "slides":
-      return /* @__PURE__ */ jsx32(SlidesFormatter, { data });
+      return /* @__PURE__ */ jsx33(SlidesFormatter, { data });
     case "hubspot":
-      return /* @__PURE__ */ jsx32(HubspotFormatter, { data });
+      return /* @__PURE__ */ jsx33(HubspotFormatter, { data });
     case "linear":
-      return /* @__PURE__ */ jsx32(LinearFormatter, { data });
+      return /* @__PURE__ */ jsx33(LinearFormatter, { data });
     case "pipedrive":
-      return /* @__PURE__ */ jsx32(PipedriveFormatter, { data });
+      return /* @__PURE__ */ jsx33(PipedriveFormatter, { data });
     case "compute":
-      return /* @__PURE__ */ jsx32(ComputeFormatter, { data });
+      return /* @__PURE__ */ jsx33(ComputeFormatter, { data });
     case "resend":
-      return /* @__PURE__ */ jsx32(ResendFormatter, { data });
+      return /* @__PURE__ */ jsx33(ResendFormatter, { data });
     case "inbox":
-      return /* @__PURE__ */ jsx32(InboxFormatter, { data });
+      return /* @__PURE__ */ jsx33(InboxFormatter, { data });
     case "discord":
-      return /* @__PURE__ */ jsx32(DiscordFormatter, { data });
+      return /* @__PURE__ */ jsx33(DiscordFormatter, { data });
     case "notion":
-      return /* @__PURE__ */ jsx32(NotionFormatter, { data });
+      return /* @__PURE__ */ jsx33(NotionFormatter, { data });
     case "twitter":
-      return /* @__PURE__ */ jsx32(TwitterFormatter, { data });
+      return /* @__PURE__ */ jsx33(TwitterFormatter, { data });
     case "telegram":
-      return /* @__PURE__ */ jsx32(TelegramFormatter, { data });
+      return /* @__PURE__ */ jsx33(TelegramFormatter, { data });
     case "stripe":
-      return /* @__PURE__ */ jsx32(StripeFormatter, { data });
+      return /* @__PURE__ */ jsx33(StripeFormatter, { data });
     case "jira":
-      return /* @__PURE__ */ jsx32(JiraFormatter, { data });
+      return /* @__PURE__ */ jsx33(JiraFormatter, { data });
     case "salesforce":
-      return /* @__PURE__ */ jsx32(SalesforceFormatter, { data });
+      return /* @__PURE__ */ jsx33(SalesforceFormatter, { data });
     case "brevo":
-      return /* @__PURE__ */ jsx32(BrevoFormatter, { data });
+      return /* @__PURE__ */ jsx33(BrevoFormatter, { data });
     case "calendly":
-      return /* @__PURE__ */ jsx32(CalendlyFormatter, { data });
+      return /* @__PURE__ */ jsx33(CalendlyFormatter, { data });
     case "twilio":
-      return /* @__PURE__ */ jsx32(TwilioFormatter, { data });
+      return /* @__PURE__ */ jsx33(TwilioFormatter, { data });
     case "linkedin":
-      return /* @__PURE__ */ jsx32(LinkedInFormatter, { data });
+      return /* @__PURE__ */ jsx33(LinkedInFormatter, { data });
     case "whatsapp":
-      return /* @__PURE__ */ jsx32(WhatsAppFormatter, { data });
+      return /* @__PURE__ */ jsx33(WhatsAppFormatter, { data });
     case "browser":
-      return /* @__PURE__ */ jsx32(BrowserFormatter, { data });
+      return /* @__PURE__ */ jsx33(BrowserFormatter, { data });
+    case "viewImage":
+      return /* @__PURE__ */ jsx33(ViewImageFormatter, { data });
     default:
-      return /* @__PURE__ */ jsx32(GenericFormatter, { data });
+      return /* @__PURE__ */ jsx33(GenericFormatter, { data });
   }
 }
 function SupyagentToolResult({ part }) {
@@ -3332,7 +3388,7 @@ function SupyagentToolResult({ part }) {
   const formatterType = getFormatterType(toolName);
   const data = maybeNormalize(toolName, formatterType, result);
   const summary = getSummary(formatterType, data, toolName);
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(
     CollapsibleResult,
     {
       toolName,
@@ -3345,7 +3401,7 @@ function SupyagentToolResult({ part }) {
 
 // src/ui/tool-input.tsx
 import React2 from "react";
-import { jsx as jsx33, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs31 } from "react/jsx-runtime";
 function formatValue(value) {
   if (value === null || value === void 0) {
     return { text: "null", muted: true };
@@ -3379,11 +3435,11 @@ function formatValue(value) {
 }
 function ToolInput({ args }) {
   if (!args || Object.keys(args).length === 0) return null;
-  return /* @__PURE__ */ jsx33("div", { className: "grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-sm", children: Object.entries(args).map(([key, value]) => {
+  return /* @__PURE__ */ jsx34("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__ */ jsxs30(React2.Fragment, { children: [
-      /* @__PURE__ */ jsx33("span", { className: "text-muted-foreground select-none", children: key }),
-      /* @__PURE__ */ jsx33("span", { className: formatted.muted ? "text-muted-foreground" : "text-foreground", children: formatted.text })
+    return /* @__PURE__ */ jsxs31(React2.Fragment, { children: [
+      /* @__PURE__ */ jsx34("span", { className: "text-muted-foreground select-none", children: key }),
+      /* @__PURE__ */ jsx34("span", { className: formatted.muted ? "text-muted-foreground" : "text-foreground", children: formatted.text })
     ] }, key);
   }) });
 }
@@ -3391,7 +3447,7 @@ function ToolInput({ args }) {
 // src/ui/tool-action.tsx
 import { useState as useState2 } from "react";
 import { ChevronDown as ChevronDown2, ChevronRight as ChevronRight2, Check as Check3, AlertCircle, Loader2 } from "lucide-react";
-import { Fragment, jsx as jsx34, jsxs as jsxs31 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx35, jsxs as jsxs32 } from "react/jsx-runtime";
 var BADGE_STYLES2 = {
   default: "bg-muted text-muted-foreground",
   success: "bg-green-500/10 text-green-500",
@@ -3424,59 +3480,59 @@ function SupyagentToolAction({ part, defaultExpanded = false }) {
   const hasArgs = args && Object.keys(args).length > 0;
   const hasExpandableContent = hasArgs || formatterOutput;
   const canExpand = !isStreaming && hasExpandableContent;
-  return /* @__PURE__ */ jsxs31(
+  return /* @__PURE__ */ jsxs32(
     "div",
     {
       className: "rounded-lg border border-border bg-card overflow-hidden",
       "data-state": isDone ? "done" : isError ? "error" : isStreaming ? "streaming" : "pending",
       children: [
-        /* @__PURE__ */ jsxs31(
+        /* @__PURE__ */ jsxs32(
           "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__ */ jsxs31("div", { className: "relative shrink-0", children: [
-                /* @__PURE__ */ jsx34(ProviderIcon, { toolName, className: "h-4 w-4 text-muted-foreground" }),
-                isStreaming && /* @__PURE__ */ jsx34(Loader2, { className: "absolute -top-1 -right-1 h-3 w-3 text-primary animate-spin" })
+              /* @__PURE__ */ jsxs32("div", { className: "relative shrink-0", children: [
+                /* @__PURE__ */ jsx35(ProviderIcon, { toolName, className: "h-4 w-4 text-muted-foreground" }),
+                isStreaming && /* @__PURE__ */ jsx35(Loader2, { className: "absolute -top-1 -right-1 h-3 w-3 text-primary animate-spin" })
               ] }),
-              /* @__PURE__ */ jsx34("span", { className: "text-xs text-muted-foreground", children: providerLabel }),
-              /* @__PURE__ */ jsx34("span", { className: "text-sm text-foreground", children: actionLabel }),
-              summary && /* @__PURE__ */ jsxs31(Fragment, { children: [
-                /* @__PURE__ */ jsx34("span", { className: "text-muted-foreground text-xs", children: "\xB7" }),
-                /* @__PURE__ */ jsx34("span", { className: "text-sm text-muted-foreground flex-1 truncate", children: summary.text })
+              /* @__PURE__ */ jsx35("span", { className: "text-xs text-muted-foreground", children: providerLabel }),
+              /* @__PURE__ */ jsx35("span", { className: "text-sm text-foreground", children: actionLabel }),
+              summary && /* @__PURE__ */ jsxs32(Fragment, { children: [
+                /* @__PURE__ */ jsx35("span", { className: "text-muted-foreground text-xs", children: "\xB7" }),
+                /* @__PURE__ */ jsx35("span", { className: "text-sm text-muted-foreground flex-1 truncate", children: summary.text })
               ] }),
-              !summary && /* @__PURE__ */ jsx34("span", { className: "flex-1" }),
-              summary?.badge && /* @__PURE__ */ jsx34(
+              !summary && /* @__PURE__ */ jsx35("span", { className: "flex-1" }),
+              summary?.badge && /* @__PURE__ */ jsx35(
                 "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__ */ jsx34(Check3, { className: "h-3.5 w-3.5 text-green-500 shrink-0" }),
-              isError && /* @__PURE__ */ jsxs31("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__ */ jsx34(AlertCircle, { className: "h-3 w-3" }),
+              isDone && /* @__PURE__ */ jsx35(Check3, { className: "h-3.5 w-3.5 text-green-500 shrink-0" }),
+              isError && /* @__PURE__ */ jsxs32("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__ */ jsx35(AlertCircle, { className: "h-3 w-3" }),
                 "Error"
               ] }),
-              isStreaming && /* @__PURE__ */ jsx34("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__ */ jsx34(ChevronDown2, { className: "h-3.5 w-3.5 text-muted-foreground shrink-0" }) : /* @__PURE__ */ jsx34(ChevronRight2, { className: "h-3.5 w-3.5 text-muted-foreground shrink-0" }))
+              isStreaming && /* @__PURE__ */ jsx35("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__ */ jsx35(ChevronDown2, { className: "h-3.5 w-3.5 text-muted-foreground shrink-0" }) : /* @__PURE__ */ jsx35(ChevronRight2, { className: "h-3.5 w-3.5 text-muted-foreground shrink-0" }))
             ]
           }
         ),
-        /* @__PURE__ */ jsx34(
+        /* @__PURE__ */ jsx35(
           "div",
           {
             className: "grid transition-[grid-template-rows] duration-200 ease-out",
             style: { gridTemplateRows: expanded ? "1fr" : "0fr" },
-            children: /* @__PURE__ */ jsx34("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsxs31("div", { className: "border-t border-border px-3 py-2 space-y-3", children: [
-              args && Object.keys(args).length > 0 && /* @__PURE__ */ jsxs31("div", { children: [
-                /* @__PURE__ */ jsx34("p", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground mb-1.5", children: "Input" }),
-                /* @__PURE__ */ jsx34(ToolInput, { args })
+            children: /* @__PURE__ */ jsx35("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsxs32("div", { className: "border-t border-border px-3 py-2 space-y-3", children: [
+              args && Object.keys(args).length > 0 && /* @__PURE__ */ jsxs32("div", { children: [
+                /* @__PURE__ */ jsx35("p", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground mb-1.5", children: "Input" }),
+                /* @__PURE__ */ jsx35(ToolInput, { args })
               ] }),
-              formatterOutput && /* @__PURE__ */ jsxs31("div", { children: [
-                /* @__PURE__ */ jsx34("p", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground mb-1.5", children: "Output" }),
+              formatterOutput && /* @__PURE__ */ jsxs32("div", { children: [
+                /* @__PURE__ */ jsx35("p", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground mb-1.5", children: "Output" }),
                 formatterOutput
               ] })
             ] }) })
@@ -3490,7 +3546,7 @@ function SupyagentToolAction({ part, defaultExpanded = false }) {
 // src/ui/tool-call.tsx
 import { useState as useState3 } from "react";
 import { ChevronDown as ChevronDown3, ChevronRight as ChevronRight3, Check as Check4, AlertCircle as AlertCircle2, Loader2 as Loader22 } from "lucide-react";
-import { jsx as jsx35, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs33 } from "react/jsx-runtime";
 function extractToolName2(part) {
   if (part.type.startsWith("tool-") && part.type !== "tool-invocation") {
     return part.type.slice(5);
@@ -3519,39 +3575,39 @@ function SupyagentToolCall({ part }) {
   const isStreaming = state === "input-streaming";
   const isError = state === "output-error";
   const isDone = state === "output-available";
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs33(
     "div",
     {
       className: "rounded-lg border border-border bg-card overflow-hidden",
       "data-state": isDone ? "done" : isError ? "error" : isStreaming ? "streaming" : "pending",
       children: [
-        /* @__PURE__ */ jsxs32(
+        /* @__PURE__ */ jsxs33(
           "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__ */ jsxs32("div", { className: "relative", children: [
-                /* @__PURE__ */ jsx35(ProviderIcon, { toolName, className: "h-4 w-4 text-muted-foreground" }),
-                isStreaming && /* @__PURE__ */ jsx35(Loader22, { className: "absolute -top-1 -right-1 h-3 w-3 text-primary animate-spin" })
+              /* @__PURE__ */ jsxs33("div", { className: "relative", children: [
+                /* @__PURE__ */ jsx36(ProviderIcon, { toolName, className: "h-4 w-4 text-muted-foreground" }),
+                isStreaming && /* @__PURE__ */ jsx36(Loader22, { className: "absolute -top-1 -right-1 h-3 w-3 text-primary animate-spin" })
               ] }),
-              /* @__PURE__ */ jsx35("span", { className: "text-xs text-muted-foreground", children: providerLabel }),
-              /* @__PURE__ */ jsx35("span", { className: "text-sm text-foreground flex-1", children: actionLabel }),
-              isDone && /* @__PURE__ */ jsxs32("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__ */ jsx35(Check4, { className: "h-3 w-3" }),
+              /* @__PURE__ */ jsx36("span", { className: "text-xs text-muted-foreground", children: providerLabel }),
+              /* @__PURE__ */ jsx36("span", { className: "text-sm text-foreground flex-1", children: actionLabel }),
+              isDone && /* @__PURE__ */ jsxs33("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__ */ jsx36(Check4, { className: "h-3 w-3" }),
                 "Completed"
               ] }),
-              isError && /* @__PURE__ */ jsxs32("span", { className: "inline-flex items-center gap-1 rounded-full bg-destructive/10 px-2 py-0.5 text-xs text-destructive", children: [
-                /* @__PURE__ */ jsx35(AlertCircle2, { className: "h-3 w-3" }),
+              isError && /* @__PURE__ */ jsxs33("span", { className: "inline-flex items-center gap-1 rounded-full bg-destructive/10 px-2 py-0.5 text-xs text-destructive", children: [
+                /* @__PURE__ */ jsx36(AlertCircle2, { className: "h-3 w-3" }),
                 "Error"
               ] }),
-              isStreaming && /* @__PURE__ */ jsx35("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__ */ jsx35(ChevronDown3, { className: "h-3.5 w-3.5 text-muted-foreground" }) : /* @__PURE__ */ jsx35(ChevronRight3, { className: "h-3.5 w-3.5 text-muted-foreground" }))
+              isStreaming && /* @__PURE__ */ jsx36("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__ */ jsx36(ChevronDown3, { className: "h-3.5 w-3.5 text-muted-foreground" }) : /* @__PURE__ */ jsx36(ChevronRight3, { className: "h-3.5 w-3.5 text-muted-foreground" }))
             ]
           }
         ),
-        expanded && args && /* @__PURE__ */ jsx35("div", { className: "border-t border-border px-3 py-2", children: /* @__PURE__ */ jsx35("pre", { className: "text-xs text-muted-foreground overflow-x-auto", children: JSON.stringify(args, null, 2) }) })
+        expanded && args && /* @__PURE__ */ jsx36("div", { className: "border-t border-border px-3 py-2", children: /* @__PURE__ */ jsx36("pre", { className: "text-xs text-muted-foreground overflow-x-auto", children: JSON.stringify(args, null, 2) }) })
       ]
     }
   );
@@ -3592,6 +3648,7 @@ export {
   ToolInput,
   TwilioFormatter,
   TwitterFormatter,
+  ViewImageFormatter,
   WhatsAppFormatter,
   extractArgs,
   extractResult,