@supyagent/sdk 0.1.37 → 0.1.39

package/dist/react.cjs

@@ -37,6 +37,7 @@ __export(react_exports, {
   CalendlyFormatter: () => CalendlyFormatter,
   CollapsibleResult: () => CollapsibleResult,
   ComputeFormatter: () => ComputeFormatter,
+  ContextIndicator: () => ContextIndicator,
   DiscordFormatter: () => DiscordFormatter,
   DocsFormatter: () => DocsFormatter,
   DriveFileFormatter: () => DriveFileFormatter,
@@ -59,6 +60,7 @@ __export(react_exports, {
   SlackMessageFormatter: () => SlackMessageFormatter,
   SlidesFormatter: () => SlidesFormatter,
   StripeFormatter: () => StripeFormatter,
+  SummaryMessage: () => SummaryMessage,
   SupyagentToolAction: () => SupyagentToolAction,
   SupyagentToolCall: () => SupyagentToolCall,
   SupyagentToolResult: () => SupyagentToolResult,
@@ -77,6 +79,7 @@ __export(react_exports, {
   getProviderLabel: () => getProviderLabel,
   getSummary: () => getSummary,
   humanizeToolName: () => humanizeToolName,
+  isContextSummary: () => isContextSummary,
   maybeNormalize: () => maybeNormalize,
   normalizeMicrosoftCalendar: () => normalizeMicrosoftCalendar,
   normalizeMicrosoftDrive: () => normalizeMicrosoftDrive,
@@ -3530,10 +3533,107 @@ function ToolInput({ args }) {
   }) });
 }
 
-// src/ui/tool-action.tsx
+// src/ui/context-indicator.tsx
+var import_jsx_runtime35 = require("react/jsx-runtime");
+function ContextIndicator({
+  messages,
+  maxTokens = 128e3,
+  className
+}) {
+  const lastContext = findLastContextMetadata(messages);
+  if (!lastContext) return null;
+  const ratio = Math.min(lastContext.usageRatio ?? 0, 1);
+  const percent = Math.round(ratio * 100);
+  const totalTokens = lastContext.totalTokens ?? 0;
+  const color = ratio < 0.5 ? "bg-emerald-500" : ratio < 0.75 ? "bg-yellow-500" : ratio < 0.9 ? "bg-orange-500" : "bg-red-500";
+  const label = formatTokens(totalTokens);
+  const maxLabel = formatTokens(maxTokens);
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    "div",
+    {
+      className,
+      title: `Context: ${label} / ${maxLabel} tokens (${percent}%)`,
+      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "h-1.5 w-16 rounded-full bg-muted overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          "div",
+          {
+            className: `h-full rounded-full transition-all duration-500 ${color}`,
+            style: { width: `${percent}%` }
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "tabular-nums", children: [
+          percent,
+          "%"
+        ] })
+      ] })
+    }
+  );
+}
+function findLastContextMetadata(messages) {
+  for (let i = messages.length - 1; i >= 0; i--) {
+    const meta = messages[i].metadata;
+    if (meta?.context) return meta.context;
+  }
+  return null;
+}
+function formatTokens(n) {
+  if (n >= 1e6) return `${(n / 1e6).toFixed(1)}M`;
+  if (n >= 1e3) return `${(n / 1e3).toFixed(1)}k`;
+  return `${n}`;
+}
+
+// src/ui/summary-message.tsx
 var import_react3 = require("react");
+var import_jsx_runtime36 = require("react/jsx-runtime");
+function SummaryMessage({ message, className }) {
+  const [expanded, setExpanded] = (0, import_react3.useState)(false);
+  const meta = message.metadata;
+  const summaryText = message.parts.find((p) => p.type === "text");
+  const messageCount = meta?.messagesSummarized ?? 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+    "div",
+    {
+      className: `rounded-lg border border-dashed border-border bg-muted/30 px-4 py-3 ${className ?? ""}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+          "button",
+          {
+            type: "button",
+            onClick: () => setExpanded(!expanded),
+            className: "flex w-full items-center gap-2 text-left text-xs text-muted-foreground hover:text-foreground transition-colors",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                "svg",
+                {
+                  className: `h-3 w-3 shrink-0 transition-transform ${expanded ? "rotate-90" : ""}`,
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  strokeWidth: 2,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "font-medium", children: [
+                "Context summarized",
+                messageCount > 0 && ` (${messageCount} messages)`
+              ] })
+            ]
+          }
+        ),
+        expanded && summaryText?.text && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "mt-2 border-t border-border pt-2 text-sm text-muted-foreground whitespace-pre-wrap", children: summaryText.text })
+      ]
+    }
+  );
+}
+function isContextSummary(message) {
+  const meta = message.metadata;
+  return meta?.type === "context-summary";
+}
+
+// src/ui/tool-action.tsx
+var import_react4 = require("react");
 var import_lucide_react32 = require("lucide-react");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var BADGE_STYLES2 = {
   default: "bg-muted text-muted-foreground",
   success: "bg-green-500/10 text-green-500",
@@ -3541,7 +3641,7 @@ var BADGE_STYLES2 = {
   warning: "bg-yellow-500/10 text-yellow-600"
 };
 function SupyagentToolAction({ part, defaultExpanded = false }) {
-  const [expanded, setExpanded] = (0, import_react3.useState)(defaultExpanded);
+  const [expanded, setExpanded] = (0, import_react4.useState)(defaultExpanded);
   const toolName = extractToolName(part);
   const state = extractState(part);
   const args = extractArgs(part);
@@ -3566,59 +3666,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_runtime35.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.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_runtime37.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_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_runtime37.jsxs)("div", { className: "relative shrink-0", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ProviderIcon, { toolName, className: "h-4 w-4 text-muted-foreground" }),
+                isStreaming && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react32.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", 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 })
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-xs text-muted-foreground", children: providerLabel }),
+              /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-sm text-foreground", children: actionLabel }),
+              summary && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_jsx_runtime37.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-muted-foreground text-xs", children: "\xB7" }),
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-sm text-muted-foreground flex-1 truncate", children: summary.text })
               ] }),
-              !summary && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "flex-1" }),
-              summary?.badge && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+              !summary && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "flex-1" }),
+              summary?.badge && /* @__PURE__ */ (0, import_jsx_runtime37.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_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" }),
+              isDone && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react32.Check, { className: "h-3.5 w-3.5 text-green-500 shrink-0" }),
+              isError && /* @__PURE__ */ (0, import_jsx_runtime37.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_runtime37.jsx)(import_lucide_react32.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 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" }))
+              isStreaming && /* @__PURE__ */ (0, import_jsx_runtime37.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_runtime37.jsx)(import_lucide_react32.ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground shrink-0" }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react32.ChevronRight, { className: "h-3.5 w-3.5 text-muted-foreground shrink-0" }))
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           "div",
           {
             className: "grid transition-[grid-template-rows] duration-200 ease-out",
             style: { gridTemplateRows: expanded ? "1fr" : "0fr" },
-            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 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime37.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_runtime37.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground mb-1.5", children: "Input" }),
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ToolInput, { args })
               ] }),
-              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 && /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "text-[10px] font-medium uppercase tracking-wider text-muted-foreground mb-1.5", children: "Output" }),
                 formatterOutput
               ] })
             ] }) })
@@ -3630,9 +3730,9 @@ function SupyagentToolAction({ part, defaultExpanded = false }) {
 }
 
 // src/ui/tool-call.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 var import_lucide_react33 = require("lucide-react");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function extractToolName2(part) {
   if (part.type.startsWith("tool-") && part.type !== "tool-invocation") {
     return part.type.slice(5);
@@ -3651,7 +3751,7 @@ function extractArgs2(part) {
   return part.input || part.args || part.toolInvocation?.args;
 }
 function SupyagentToolCall({ part }) {
-  const [expanded, setExpanded] = (0, import_react4.useState)(false);
+  const [expanded, setExpanded] = (0, import_react5.useState)(false);
   const toolName = extractToolName2(part);
   const state = extractState2(part);
   const args = extractArgs2(part);
@@ -3661,39 +3761,39 @@ function SupyagentToolCall({ part }) {
   const isStreaming = state === "input-streaming";
   const isError = state === "output-error";
   const isDone = state === "output-available";
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.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_runtime36.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime38.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_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_runtime38.jsxs)("div", { className: "relative", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ProviderIcon, { toolName, className: "h-4 w-4 text-muted-foreground" }),
+                isStreaming && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react33.Loader2, { className: "absolute -top-1 -right-1 h-3 w-3 text-primary animate-spin" })
               ] }),
-              /* @__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" }),
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "text-xs text-muted-foreground", children: providerLabel }),
+              /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "text-sm text-foreground flex-1", children: actionLabel }),
+              isDone && /* @__PURE__ */ (0, import_jsx_runtime38.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_runtime38.jsx)(import_lucide_react33.Check, { className: "h-3 w-3" }),
                 "Completed"
               ] }),
-              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" }),
+              isError && /* @__PURE__ */ (0, import_jsx_runtime38.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_runtime38.jsx)(import_lucide_react33.AlertCircle, { className: "h-3 w-3" }),
                 "Error"
               ] }),
-              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" }))
+              isStreaming && /* @__PURE__ */ (0, import_jsx_runtime38.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_runtime38.jsx)(import_lucide_react33.ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground" }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react33.ChevronRight, { className: "h-3.5 w-3.5 text-muted-foreground" }))
             ]
           }
         ),
-        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) }) })
+        expanded && args && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "border-t border-border px-3 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("pre", { className: "text-xs text-muted-foreground overflow-x-auto", children: JSON.stringify(args, null, 2) }) })
       ]
     }
   );
@@ -3706,6 +3806,7 @@ function SupyagentToolCall({ part }) {
   CalendlyFormatter,
   CollapsibleResult,
   ComputeFormatter,
+  ContextIndicator,
   DiscordFormatter,
   DocsFormatter,
   DriveFileFormatter,
@@ -3728,6 +3829,7 @@ function SupyagentToolCall({ part }) {
   SlackMessageFormatter,
   SlidesFormatter,
   StripeFormatter,
+  SummaryMessage,
   SupyagentToolAction,
   SupyagentToolCall,
   SupyagentToolResult,
@@ -3746,6 +3848,7 @@ function SupyagentToolCall({ part }) {
   getProviderLabel,
   getSummary,
   humanizeToolName,
+  isContextSummary,
   maybeNormalize,
   normalizeMicrosoftCalendar,
   normalizeMicrosoftDrive,