@agent-native/toolkit 0.198.5 → 0.198.6

package/dist/ui/sonner.js

@@ -3,7 +3,7 @@ import { useTheme } from "next-themes";
 import { Toaster as Sonner } from "sonner";
 import { cn } from "../utils.js";
 const toastWidthClasses = "group-[.toaster]:!w-[var(--width)] group-[.toaster]:!min-w-[min(20rem,calc(100vw_-_2rem))] group-[.toaster]:!max-w-[var(--width)] group-[.toaster]:!gap-3 group-[.toaster]:!break-normal";
-const toastContentClasses = "group-[.toast]:!min-w-[min(16rem,calc(100vw_-_14rem))] group-[.toast]:!flex-1 group-[.toast]:!basis-auto group-[.toast]:break-words";
+const toastContentClasses = "group-[.toast]:!min-w-0 group-[.toast]:!flex-1 group-[.toast]:!basis-auto group-[.toast]:break-words";
 const toastButtonClasses = "group-[.toast]:!shrink-0 group-[.toast]:!whitespace-nowrap";
 const Toaster = ({ className, toastOptions, ...props }) => {
     const { theme = "system" } = useTheme();

package/dist/ui/sonner.js.map

@@ -1 +1 @@
-{"version":3,"file":"sonner.js","sourceRoot":"","sources":["../../src/ui/sonner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,QAAQ,CAAC;AAE3C,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAIjC,MAAM,iBAAiB,GACrB,0LAA0L,CAAC;AAC7L,MAAM,mBAAmB,GACvB,qIAAqI,CAAC;AACxI,MAAM,kBAAkB,GACtB,4DAA4D,CAAC;AAE/D,MAAM,OAAO,GAAG,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,KAAK,EAAgB,EAAE,EAAE;IACtE,MAAM,EAAE,KAAK,GAAG,QAAQ,EAAE,GAAG,QAAQ,EAAE,CAAC;IACxC,MAAM,UAAU,GAAG,YAAY,EAAE,UAAU,CAAC;IAE5C,OAAO,CACL,KAAC,MAAM,IACL,KAAK,EAAE,KAA8B,EACrC,SAAS,EAAE,EAAE,CACX,uDAAuD,EACvD,SAAS,CACV,EACD,YAAY,EAAE;YACZ,GAAG,YAAY;YACf,UAAU,EAAE;gBACV,GAAG,UAAU;gBACb,KAAK,EAAE,EAAE,CACP,iBAAiB,EACjB,uIAAuI,EACvI,UAAU,EAAE,KAAK,CAClB;gBACD,KAAK,EAAE,EAAE,CAAC,4BAA4B,EAAE,UAAU,EAAE,KAAK,CAAC;gBAC1D,WAAW,EAAE,EAAE,CACb,iEAAiE,EACjE,UAAU,EAAE,WAAW,CACxB;gBACD,OAAO,EAAE,EAAE,CAAC,mBAAmB,EAAE,UAAU,EAAE,OAAO,CAAC;gBACrD,YAAY,EAAE,EAAE,CACd,kBAAkB,EAClB,kEAAkE,EAClE,UAAU,EAAE,YAAY,CACzB;gBACD,YAAY,EAAE,EAAE,CACd,kBAAkB,EAClB,8DAA8D,EAC9D,UAAU,EAAE,YAAY,CACzB;aACF;SACF,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"sonner.js","sourceRoot":"","sources":["../../src/ui/sonner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,QAAQ,CAAC;AAE3C,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAIjC,MAAM,iBAAiB,GACrB,0LAA0L,CAAC;AAC7L,MAAM,mBAAmB,GACvB,sGAAsG,CAAC;AACzG,MAAM,kBAAkB,GACtB,4DAA4D,CAAC;AAE/D,MAAM,OAAO,GAAG,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,KAAK,EAAgB,EAAE,EAAE;IACtE,MAAM,EAAE,KAAK,GAAG,QAAQ,EAAE,GAAG,QAAQ,EAAE,CAAC;IACxC,MAAM,UAAU,GAAG,YAAY,EAAE,UAAU,CAAC;IAE5C,OAAO,CACL,KAAC,MAAM,IACL,KAAK,EAAE,KAA8B,EACrC,SAAS,EAAE,EAAE,CACX,uDAAuD,EACvD,SAAS,CACV,EACD,YAAY,EAAE;YACZ,GAAG,YAAY;YACf,UAAU,EAAE;gBACV,GAAG,UAAU;gBACb,KAAK,EAAE,EAAE,CACP,iBAAiB,EACjB,uIAAuI,EACvI,UAAU,EAAE,KAAK,CAClB;gBACD,KAAK,EAAE,EAAE,CAAC,4BAA4B,EAAE,UAAU,EAAE,KAAK,CAAC;gBAC1D,WAAW,EAAE,EAAE,CACb,iEAAiE,EACjE,UAAU,EAAE,WAAW,CACxB;gBACD,OAAO,EAAE,EAAE,CAAC,mBAAmB,EAAE,UAAU,EAAE,OAAO,CAAC;gBACrD,YAAY,EAAE,EAAE,CACd,kBAAkB,EAClB,kEAAkE,EAClE,UAAU,EAAE,YAAY,CACzB;gBACD,YAAY,EAAE,EAAE,CACd,kBAAkB,EAClB,8DAA8D,EAC9D,UAAU,EAAE,YAAY,CACzB;aACF;SACF,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/toolkit",
-  "version": "0.198.5",
+  "version": "0.198.6",
   "description": "Reusable app-building UI and helpers for Agent-Native apps.",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {
@@ -665,7 +665,7 @@
     "y-protocols": "^1.0.7",
     "yjs": "^13.6.33",
     "zod": "^4.3.6",
-    "@agent-native/agentkit": "^0.198.5"
+    "@agent-native/agentkit": "^0.198.6"
   },
   "devDependencies": {
     "@excalidraw/excalidraw": "0.18.1",
@@ -686,7 +686,7 @@
     "typescript-7": "npm:typescript@^7.0.2",
     "vite": "8.1.0",
     "vitest": "^4.1.5",
-    "@agent-native/core": "^0.198.5"
+    "@agent-native/core": "^0.198.6"
   },
   "peerDependencies": {
     "@agent-native/core": ">=0.196.0",

package/src/app/agentkit/react/components.tsx

@@ -763,7 +763,23 @@ function RepeatedActivityCluster({
   );
 }
 
+function formatToolDiagnostic(value: unknown): string | undefined {
+  if (value === undefined) return undefined;
+  if (typeof value === "string") return value || undefined;
+  try {
+    return JSON.stringify(value, null, 2) ?? String(value);
+  } catch {
+    return String(value);
+  }
+}
+
 function toolToActivity(tool: AgentToolCall): AgentActivity {
+  const failed = tool.status === "failed";
+  const errorMessage = failed
+    ? ((tool.error?.message?.trim() ? tool.error.message : undefined) ??
+      formatToolDiagnostic(tool.output) ??
+      formatToolDiagnostic(tool.error?.details))
+    : undefined;
   return {
     id: tool.id,
     kind: inferAgentActivityKind(tool.name),
@@ -774,12 +790,17 @@ function toolToActivity(tool: AgentToolCall): AgentActivity {
         : tool.status === "running"
           ? "running"
           : tool.status,
-    detail:
-      typeof tool.output === "string"
+    detail: failed
+      ? undefined
+      : typeof tool.output === "string"
         ? tool.output
         : typeof tool.input === "string"
           ? tool.input
           : undefined,
+    summary:
+      failed && errorMessage
+        ? [{ type: "text", text: errorMessage }]
+        : undefined,
   };
 }
 
@@ -904,11 +925,13 @@ export function AgentActivityGroup({
   afterSequence,
   throughSequence,
   excludeAgentActivities = false,
+  isCurrentSegment = true,
 }: {
   runId?: RunId;
   afterSequence?: number;
   throughSequence?: number;
   excludeAgentActivities?: boolean;
+  isCurrentSegment?: boolean;
 }) {
   const { threadId, slots, registry, labels } = useAgentKit();
   const thread = useAgentThread();
@@ -1011,7 +1034,7 @@ export function AgentActivityGroup({
   const activityItems = items.filter(
     (activity) => !durableToolResultIds.has(activity.id),
   );
-  const latestActivity = activityItems.reduce<AgentActivity | undefined>(
+  const latestRunningActivity = items.reduce<AgentActivity | undefined>(
     (current, activity) => {
       if (activity.status !== "running") return current;
       if (!current) return activity;
@@ -1046,38 +1069,37 @@ export function AgentActivityGroup({
     Number.isFinite(startedAt) && Number.isFinite(completedAt)
       ? Math.max(0, completedAt - startedAt)
       : undefined;
+  const hasTerminalRunEvent = runEvents.some(
+    (event) =>
+      event.runId === runId &&
+      (event.type === "run.completed" ||
+        event.type === "run.failed" ||
+        event.type === "run.cancelled"),
+  );
   const activelyWorking =
-    throughSequence === undefined &&
-    (run === undefined ? running : run.status === "running");
-  const currentActivity = activelyWorking ? latestActivity : undefined;
-  const visiblyRunning =
-    throughSequence === undefined && activelyWorking && running;
-  const [elapsedAt, setElapsedAt] = useState<number>();
-  useEffect(() => {
-    if (!activelyWorking || !Number.isFinite(startedAt)) return;
-    const update = () => setElapsedAt(Date.now());
-    update();
-    const interval = globalThis.setInterval(update, 1_000);
-    return () => globalThis.clearInterval(interval);
-  }, [activelyWorking, startedAt]);
-  const activeDurationMs =
-    activelyWorking && elapsedAt !== undefined && Number.isFinite(startedAt)
-      ? Math.max(0, elapsedAt - startedAt)
-      : undefined;
+    isCurrentSegment &&
+    (run ? run.status === "running" : running && !hasTerminalRunEvent);
   const completedRunSummary =
-    throughSequence !== undefined ||
-    (items.length > 0 && !running) ||
-    runEvents.some(
-      (event) =>
-        event.runId === runId &&
-        (event.type === "run.completed" ||
-          event.type === "run.failed" ||
-          event.type === "run.cancelled"),
-    ) ||
-    (afterSequence === undefined &&
-      run !== undefined &&
-      ["completed", "failed", "cancelled"].includes(run.status));
-  if (items.length === 0) return null;
+    !activelyWorking &&
+    (throughSequence !== undefined ||
+      (items.length > 0 && !running) ||
+      hasTerminalRunEvent ||
+      (afterSequence === undefined &&
+        run !== undefined &&
+        ["completed", "failed", "cancelled"].includes(run.status)));
+  if (items.length === 0 && !activelyWorking) return null;
+  const currentActivity = activelyWorking
+    ? (latestRunningActivity ?? {
+        id: `thinking:${runId ?? thread.id}`,
+        kind: "model",
+        label: labels.reasoning,
+        status: "running",
+      })
+    : undefined;
+  const currentActivityLabel =
+    currentActivity?.label === "Contacting model"
+      ? labels.reasoning
+      : currentActivity?.label;
   const displayGroups = new Map<ActivityBucket, AgentActivity[][]>(
     ACTIVITY_BUCKET_ORDER.map((bucket) => [bucket, []]),
   );
@@ -1114,7 +1136,9 @@ export function AgentActivityGroup({
     }
   }
   const hasExpandableActivity = ACTIVITY_BUCKET_ORDER.some(
-    (bucket) => displayGroups.get(bucket)!.length > 0,
+    (bucket) =>
+      (!completedRunSummary || bucket !== "thinking") &&
+      displayGroups.get(bucket)!.length > 0,
   );
   const activityBucketLabels = {
     thinking: "Thinking",
@@ -1130,34 +1154,15 @@ export function AgentActivityGroup({
       second: labels.durationSecondShort,
     });
   const summaryLabel = activelyWorking
-    ? activeDurationMs !== undefined && activeDurationMs >= 1_000
-      ? labels.workingFor.replace(
-          "{{duration}}",
-          formatDuration(activeDurationMs),
-        )
-      : labels.working
+    ? ""
     : completedRunSummary
       ? durationMs !== undefined && durationMs >= 1_000
         ? labels.workedFor.replace("{{duration}}", formatDuration(durationMs))
         : labels.worked
       : labels.activities;
+  const visiblyRunning = activelyWorking;
   return (
     <>
-      {items
-        .filter((activity) => activity.status === "failed")
-        .map((activity) => (
-          <div key={activity.id} className="agentkit-run-failure" role="alert">
-            <IconAlertCircle aria-hidden="true" className="agentkit-icon" />
-            <div className="agentkit-run-failure-copy">
-              <strong>{activity.label}</strong>
-              <span>
-                {toolMap.get(activity.id)?.error?.message ??
-                  activity.detail ??
-                  labels.error}
-              </span>
-            </div>
-          </div>
-        ))}
       {durableToolResults.length ? (
         <div data-agentkit-tool-results="true">
           {durableToolResults.map(({ tool, Renderer }) => (
@@ -1165,10 +1170,11 @@ export function AgentActivityGroup({
           ))}
         </div>
       ) : null}
-      {hasExpandableActivity ? (
+      {hasExpandableActivity || activelyWorking ? (
         <AgentWorkDisclosure
           label={summaryLabel}
           running={visiblyRunning}
+          expandable={hasExpandableActivity}
           current={
             currentActivity ? (
               <span
@@ -1182,8 +1188,8 @@ export function AgentActivityGroup({
                   threadId={threadId}
                   compact
                 />
-                <span className="agentkit-activities-current-label">
-                  {currentActivity.label}
+                <span className="agentkit-activities-current-label agent-running-shimmer">
+                  {currentActivityLabel}
                 </span>
               </span>
             ) : null
@@ -1191,6 +1197,7 @@ export function AgentActivityGroup({
         >
           <div className="agentkit-activities-list">
             {ACTIVITY_BUCKET_ORDER.map((bucket) => {
+              if (completedRunSummary && bucket === "thinking") return null;
               const groups = displayGroups.get(bucket)!;
               if (groups.length === 0) return null;
               return (
@@ -1262,7 +1269,9 @@ export function AgentActivityGroup({
         </AgentWorkDisclosure>
       ) : (
         <div className="agentkit-activities-static">
-          <span className="agentkit-activities-label">{summaryLabel}</span>
+          {summaryLabel ? (
+            <span className="agentkit-activities-label">{summaryLabel}</span>
+          ) : null}
           {currentActivity ? (
             <span
               className="agentkit-activities-current"
@@ -1275,8 +1284,8 @@ export function AgentActivityGroup({
                 threadId={threadId}
                 compact
               />
-              <span className="agentkit-activities-current-label">
-                {currentActivity.label}
+              <span className="agentkit-activities-current-label agent-running-shimmer">
+                {currentActivityLabel}
               </span>
             </span>
           ) : null}
@@ -1289,11 +1298,13 @@ export function AgentActivityGroup({
 function AgentWorkDisclosure({
   label,
   running,
+  expandable = true,
   current,
   children,
 }: {
   label: string;
   running?: boolean;
+  expandable?: boolean;
   current?: ReactNode;
   children: ReactNode;
 }) {
@@ -1302,23 +1313,30 @@ function AgentWorkDisclosure({
     <details
       className="agentkit-activities"
       data-running={running ? "true" : undefined}
+      data-expandable={expandable ? "true" : "false"}
       open={open}
     >
       <summary
         className="agentkit-activities-summary"
+        aria-disabled={!expandable}
         onClick={(event) => {
           event.preventDefault();
+          if (!expandable) return;
           setOpen((value) => !value);
         }}
       >
-        <span className="agentkit-activities-heading">
-          <span className="agentkit-activities-label">{label}</span>
-          <IconChevronRight
-            aria-hidden="true"
-            className="agentkit-icon agentkit-summary-chevron"
-          />
+        <span className="agentkit-activities-summary-content">
+          {label ? (
+            <span className="agentkit-activities-heading">
+              <span className="agentkit-activities-label">{label}</span>
+            </span>
+          ) : null}
+          {current}
         </span>
-        {current}
+        <IconChevronRight
+          aria-hidden="true"
+          className="agentkit-icon agentkit-summary-chevron"
+        />
       </summary>
       {children}
     </details>
@@ -1359,9 +1377,7 @@ const ACTIVITY_BUCKET_ORDER: ActivityBucket[] = [
 ];
 
 function activityBucketForKind(kind: string): ActivityBucket {
-  if (kind === "reasoning" || kind === "model" || kind === "status") {
-    return "thinking";
-  }
+  if (kind === "reasoning") return "thinking";
   if (kind === "search" || kind === "read") return "research";
   if (
     kind === "write" ||
@@ -2451,6 +2467,9 @@ export function AgentMessageActions({
     () => resolveAgentMessageRequestId(message, thread.events),
     [message, thread.events],
   );
+  const hasMessageMenuActions = Boolean(
+    requestId || (forkingCapability.visible && onThreadForked),
+  );
   const runId = useMemo(
     () => resolveAgentMessageRunId(message, thread.events),
     [message, thread.events],
@@ -2569,7 +2588,11 @@ export function AgentMessageActions({
     forkAction.error ??
     regenerateAction.error;
   return (
-    <div className="agentkit-message-actions" data-role={message.role}>
+    <div
+      className="agentkit-message-actions"
+      data-role={message.role}
+      data-streaming={message.status === "streaming" ? "true" : undefined}
+    >
       {message.role === "assistant" ? (
         <>
           <div className="agentkit-message-actions-leading">
@@ -2752,63 +2775,67 @@ export function AgentMessageActions({
                 threadId={threadId}
               />
             ) : null}
-            <Menu
-              open={actionsMenuOpen}
-              onOpenChange={(open) => {
-                setActionsMenuOpen(open);
-                if (!open) setRequestIdCopied(false);
-              }}
-              placement="bottom"
-              align="end"
-              className="agentkit-message-menu w-48"
-              trigger={
-                <IconButton
-                  label={labels.messageActions}
-                  icon={<IconDotsVertical aria-hidden="true" />}
-                  size="compact"
-                  aria-expanded={actionsMenuOpen}
-                  title={labels.messageActions}
-                />
-              }
-              items={[
-                {
-                  id: "copy-request-id",
-                  label: requestIdCopied
-                    ? labels.copied
-                    : requestId
-                      ? labels.copyRequestId
-                      : labels.requestIdUnavailable,
-                  icon: requestIdCopied ? (
-                    <IconCircleCheck size={14} aria-hidden="true" />
-                  ) : (
-                    <IconId size={14} aria-hidden="true" />
-                  ),
-                  disabled: !requestId || requestIdAction.pending,
-                },
-                ...(forkingCapability.visible && onThreadForked
-                  ? [
-                      {
-                        id: "fork-chat",
-                        label: (
-                          <span title={forkingCapability.reason}>
-                            {labels.fork}
-                          </span>
-                        ),
-                        icon: <IconGitBranch size={14} aria-hidden="true" />,
-                        disabled:
-                          !forkingCapability.enabled || forkAction.pending,
-                      },
-                    ]
-                  : []),
-              ]}
-              onAction={(id) => {
-                if (id === "copy-request-id") {
-                  void requestIdAction.execute().catch(() => undefined);
-                } else if (id === "fork-chat") {
-                  void forkAction.execute().catch(() => undefined);
+            {hasMessageMenuActions ? (
+              <Menu
+                open={actionsMenuOpen}
+                onOpenChange={(open) => {
+                  setActionsMenuOpen(open);
+                  if (!open) setRequestIdCopied(false);
+                }}
+                placement="bottom"
+                align="end"
+                className="agentkit-message-menu w-48"
+                trigger={
+                  <IconButton
+                    label={labels.messageActions}
+                    icon={<IconDotsVertical aria-hidden="true" />}
+                    size="compact"
+                    aria-expanded={actionsMenuOpen}
+                    title={labels.messageActions}
+                  />
                 }
-              }}
-            />
+                items={[
+                  ...(requestId
+                    ? [
+                        {
+                          id: "copy-request-id",
+                          label: requestIdCopied
+                            ? labels.copied
+                            : labels.copyRequestId,
+                          icon: requestIdCopied ? (
+                            <IconCircleCheck size={14} aria-hidden="true" />
+                          ) : (
+                            <IconId size={14} aria-hidden="true" />
+                          ),
+                          disabled: requestIdAction.pending,
+                        },
+                      ]
+                    : []),
+                  ...(forkingCapability.visible && onThreadForked
+                    ? [
+                        {
+                          id: "fork-chat",
+                          label: (
+                            <span title={forkingCapability.reason}>
+                              {labels.fork}
+                            </span>
+                          ),
+                          icon: <IconGitBranch size={14} aria-hidden="true" />,
+                          disabled:
+                            !forkingCapability.enabled || forkAction.pending,
+                        },
+                      ]
+                    : []),
+                ]}
+                onAction={(id) => {
+                  if (id === "copy-request-id") {
+                    void requestIdAction.execute().catch(() => undefined);
+                  } else if (id === "fork-chat") {
+                    void forkAction.execute().catch(() => undefined);
+                  }
+                }}
+              />
+            ) : null}
           </div>
         </>
       ) : (
@@ -4215,6 +4242,7 @@ export function AgentKitChat({
         afterSequence={afterSequence}
         throughSequence={throughSequence}
         excludeAgentActivities
+        isCurrentSegment={throughSequence === undefined}
       />
     </AgentKitSurfaceBoundary>
   );