@agent-native/toolkit 0.198.4 → 0.198.6

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>
         </>
       ) : (
@@ -3054,6 +3081,7 @@ export interface AgentKitComposerProps extends Omit<
     | "extraActionButton"
     | "onSubmit"
     | "onBeforeSubmit"
+    | "onSubmissionPendingChange"
     | "onAttachmentError"
     | "interceptBuildRequestsForBuilder"
     | "planModeDisabled"
@@ -3068,6 +3096,8 @@ export interface AgentKitComposerProps extends Omit<
   composerRef?: { current: TiptapComposerHandle | null };
   threadId?: string;
   className?: string;
+  /** The host transcript renders its own accessible submission status. */
+  announcePendingSubmission?: boolean;
   queueWhileRunning?: boolean;
   showModelSelector?: boolean;
   /** Controlled execution mode for agent-native act/plan workflows. */
@@ -3087,6 +3117,7 @@ function hasActiveRuns(thread: AgentThreadState): boolean {
 export function AgentKitComposer({
   threadId: requestedThreadId,
   className,
+  announcePendingSubmission = true,
   queueWhileRunning = true,
   showModelSelector = true,
   slashCommands,
@@ -3135,6 +3166,7 @@ export function AgentKitComposer({
   extraActionButton,
   onSubmit: onSubmitOverride,
   onBeforeSubmit,
+  onSubmissionPendingChange,
   onAttachmentError,
   interceptBuildRequestsForBuilder,
   planModeDisabled,
@@ -3191,6 +3223,15 @@ export function AgentKitComposer({
     threadId,
   );
   const submissionBlocked = Boolean(submissionDisabled) || command.pending;
+  const [submissionPending, setSubmissionPending] = useState(false);
+  const handleSubmissionPendingChange = useCallback(
+    (pending: boolean) => {
+      setSubmissionPending(pending);
+      onSubmissionPendingChange?.(pending);
+    },
+    [onSubmissionPendingChange],
+  );
+  const suggestionSubmitBlocked = submissionBlocked || submissionPending;
   const localComposerRef = useRef<TiptapComposerHandle>(null);
   const composerRef = hostComposerRef ?? localComposerRef;
   const selectedSuggestionRef = useRef<
@@ -3513,7 +3554,7 @@ export function AgentKitComposer({
   ) => {
     if (
       disabled ||
-      submissionBlocked ||
+      suggestionSubmitBlocked ||
       !suggestionsCapability.enabled ||
       selectedSuggestionRef.current ||
       !isCurrentAgentSuggestion(controller.getThread(threadId), suggestion)
@@ -3536,6 +3577,15 @@ export function AgentKitComposer({
   const suggestions = selectAgentSuggestions(thread);
   return (
     <div className={`agentkit-composer-stack ${className ?? ""}`}>
+      {announcePendingSubmission && submissionPending ? (
+        <span
+          className="agentkit-visually-hidden"
+          role="status"
+          aria-live="polite"
+        >
+          {labels.activityBuckets?.thinking ?? "Thinking"}
+        </span>
+      ) : null}
       {queueCapability.visible ? (
         Queue ? (
           <Queue
@@ -3611,14 +3661,14 @@ export function AgentKitComposer({
           <Suggestions
             suggestions={suggestions}
             threadId={threadId}
-            pending={submissionBlocked}
+            pending={suggestionSubmitBlocked}
             onSelect={selectSuggestion}
           />
         ) : (
           <AgentSuggestionBar
             suggestions={suggestions.map((suggestion) => ({
               ...suggestion,
-              disabled: submissionBlocked || Boolean(disabled),
+              disabled: suggestionSubmitBlocked || Boolean(disabled),
             }))}
             ariaLabel={labels.suggestions}
             onSelect={selectSuggestion}
@@ -3646,7 +3696,6 @@ export function AgentKitComposer({
         imageModelMenu={imageModelMenu}
         autoFocus={autoFocus}
         composerRef={composerRef}
-        submitting={command.pending}
         willQueue={active && queueWhileRunning && canQueue}
         showModelSelector={showModelSelector && canSelectModel}
         availableModels={availableModels}
@@ -3669,8 +3718,11 @@ export function AgentKitComposer({
         initialTextKey={composerInitialTextKey}
         onTextChange={onTextChange}
         extraActionButton={extraActionButton}
+        sendButtonDisabled={submissionPending}
         onBeforeSubmit={onBeforeSubmit}
+        onSubmissionPendingChange={handleSubmissionPendingChange}
         getSubmitFailureDraftScope={getSubmitFailureDraftScope}
+        clearOnSubmitImmediately
         onAttachmentError={reportAttachmentError}
         interceptBuildRequestsForBuilder={interceptBuildRequestsForBuilder}
         planModeDisabled={planModeDisabled}
@@ -4190,6 +4242,7 @@ export function AgentKitChat({
         afterSequence={afterSequence}
         throughSequence={throughSequence}
         excludeAgentActivities
+        isCurrentSegment={throughSequence === undefined}
       />
     </AgentKitSurfaceBoundary>
   );

package/src/app/agentkit/react/composer-context.spec.tsx

@@ -317,6 +317,7 @@ describe("AgentKit composer context submission", () => {
       expect(capture.props).toMatchObject({
         contextItems: source,
         contextMenuItems,
+        clearOnSubmitImmediately: true,
         onRemoveContextItem,
         onInspectContextItem,
         onRetryContextItem,
@@ -332,6 +333,7 @@ describe("AgentKit composer context submission", () => {
       ];
       let pending: void | Promise<void>;
       await act(async () => {
+        capture.props!.onSubmissionPendingChange?.(true);
         pending = capture.props!.onSubmit("Review", [], references, {
           contextItems: source,
           composerModeContext: "Use scheduling tools for this request.",
@@ -341,6 +343,9 @@ describe("AgentKit composer context submission", () => {
       expect(beforeSend).toHaveBeenCalledOnce();
       expect(runtime.startRun).not.toHaveBeenCalled();
       expect(runtime.queueMessage).not.toHaveBeenCalled();
+      expect(container.querySelector('[role="status"]')?.textContent).toBe(
+        "Thinking",
+      );
       expect(Object.isFrozen(saved)).toBe(true);
       expect(Object.isFrozen(saved!.contextItems![0])).toBe(true);
       expect(Object.isFrozen(saved!.references[0].metadata)).toBe(true);
@@ -349,7 +354,9 @@ describe("AgentKit composer context submission", () => {
       await act(async () => {
         release();
         await pending;
+        capture.props!.onSubmissionPendingChange?.(false);
       });
+      expect(container.querySelector('[role="status"]')).toBeNull();
       const input =
         intent === "queued"
           ? runtime.queueMessage.mock.calls[0][0]