@agent-native/toolkit 0.198.4 → 0.198.6

package/src/app/agentkit/react/styles.css

@@ -984,6 +984,15 @@ body:has(> [data-agent-native-composer-popover="true"]) > .fixed.inset-0 {
   opacity: 1;
 }
 
+.agentkit-message .agentkit-message-actions[data-streaming="true"],
+.agentkit-message:hover .agentkit-message-actions[data-streaming="true"],
+.agentkit-message:focus-within
+  .agentkit-message-actions[data-streaming="true"] {
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
 @media (hover: none), (any-pointer: coarse) {
   .agentkit-message-actions[data-role="user"] {
     opacity: 1;
@@ -1133,11 +1142,11 @@ body:has(> [data-agent-native-composer-popover="true"]) > .fixed.inset-0 {
 }
 
 .agentkit-activities-summary {
-  display: grid;
+  display: flex;
   inline-size: fit-content;
   max-inline-size: 100%;
-  justify-items: start;
-  gap: 0.125rem;
+  align-items: center;
+  gap: 0.375rem;
 }
 
 .agentkit-activities {
@@ -1263,6 +1272,12 @@ body:has(> [data-agent-native-composer-popover="true"]) > .fixed.inset-0 {
   gap: 0.375rem;
 }
 
+.agentkit-activities-summary-content {
+  display: grid;
+  min-inline-size: 0;
+  gap: 0.125rem;
+}
+
 .agentkit-activities-current {
   display: flex;
   align-items: center;
@@ -1280,20 +1295,6 @@ body:has(> [data-agent-native-composer-popover="true"]) > .fixed.inset-0 {
   white-space: nowrap;
 }
 
-.agentkit-activities-current[data-running="true"]
-  .agentkit-activities-current-label {
-  color: transparent;
-  background: linear-gradient(
-    90deg,
-    var(--agentkit-text),
-    color-mix(in srgb, var(--agentkit-text) 32%, transparent),
-    var(--agentkit-text)
-  );
-  background-size: 200% 100%;
-  background-clip: text;
-  animation: agentkit-shimmer 1.8s linear infinite;
-}
-
 .agentkit-summary-chevron,
 .agentkit-disclosure-icon {
   transition:
@@ -1301,16 +1302,24 @@ body:has(> [data-agent-native-composer-popover="true"]) > .fixed.inset-0 {
     transform 160ms ease;
 }
 
-.agentkit-activities-summary .agentkit-summary-chevron {
+.agentkit-activities-summary > .agentkit-summary-chevron {
   opacity: 0;
 }
 
-.agentkit-activities-summary:hover .agentkit-summary-chevron,
-.agentkit-activities-summary:focus-visible .agentkit-summary-chevron,
-.agentkit-activities[open] .agentkit-summary-chevron {
+.agentkit-activities[data-expandable="true"]
+  .agentkit-activities-summary:hover
+  > .agentkit-summary-chevron,
+.agentkit-activities[data-expandable="true"]
+  .agentkit-activities-summary:focus-visible
+  > .agentkit-summary-chevron,
+.agentkit-activities[data-expandable="true"][open] .agentkit-summary-chevron {
   opacity: 1;
 }
 
+.agentkit-activities[data-expandable="false"] .agentkit-activities-summary {
+  cursor: default;
+}
+
 .agentkit-activities-static {
   display: grid;
   min-inline-size: 0;
@@ -1346,7 +1355,10 @@ body:has(> [data-agent-native-composer-popover="true"]) > .fixed.inset-0 {
 
 .agentkit-activities-list {
   display: grid;
+  max-block-size: 15.625rem;
   gap: 0.5rem;
+  overflow: auto;
+  overscroll-behavior: contain;
   padding-block-start: 0.25rem;
 }
 
@@ -1384,7 +1396,9 @@ body:has(> [data-agent-native-composer-popover="true"]) > .fixed.inset-0 {
 
 @media (hover: none) {
   .agentkit-message-actions[data-role="user"],
-  .agentkit-activities-summary .agentkit-summary-chevron {
+  .agentkit-activities[data-expandable="true"]
+    .agentkit-activities-summary
+    .agentkit-summary-chevron {
     opacity: 1;
   }
 }
@@ -1844,8 +1858,6 @@ button.agentkit-object {
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .agentkit-activities-current[data-running="true"]
-    .agentkit-activities-current-label,
   .agentkit-activity-item[data-status="running"] .agentkit-activity-label,
   .agentkit-agent[data-status="working"] .agentkit-agent-name,
   .agentkit-reasoning[data-active="true"] .agentkit-reasoning-label {

package/src/app/chat/AgentKitAssistantChat.spec.tsx

@@ -794,13 +794,51 @@ describe("AgentKitAssistantChat host behavior", () => {
     ];
     await mount(baseProps());
 
+    const thinking = container.querySelector('[role="status"]');
+    expect(thinking?.textContent).toBe("agentChat.status.thinking");
+    expect(thinking?.classList.contains("agent-thinking-indicator")).toBe(true);
+    expect(
+      thinking?.querySelector(".agent-thinking-indicator__text"),
+    ).not.toBeNull();
     expect(chatMocks.composerProps.disabled).toBe(false);
     expect(chatMocks.composerProps.submissionDisabled).toBe(true);
+    expect(chatMocks.composerProps.announcePendingSubmission).toBe(false);
     expect(container.querySelector('[role="status"]')?.textContent).toBe(
       "agentChat.status.thinking",
     );
   });
 
+  it("does not duplicate Thinking after the run becomes active", async () => {
+    chatMocks.history = { isSubmissionInFlight: true };
+    chatMocks.thread.activeRunIds = ["run-active"];
+    chatMocks.thread.messages = [
+      {
+        id: "user-pending",
+        role: "user",
+        parts: [{ type: "text", text: "Summarize my inbox" }],
+        metadata: {},
+      },
+    ];
+    await mount(baseProps());
+
+    expect(container.querySelector(".agent-thinking-indicator")).toBeNull();
+  });
+
+  it("keeps the pending announcement when the transcript has no visible user message", async () => {
+    chatMocks.history = { isSubmissionInFlight: true };
+    chatMocks.thread.messages = [
+      {
+        id: "assistant-last",
+        role: "assistant",
+        parts: [{ type: "text", text: "Earlier response" }],
+      },
+    ];
+    await mount(baseProps());
+
+    expect(chatMocks.composerProps.announcePendingSubmission).toBe(true);
+    expect(container.querySelector('[role="status"]')).toBeNull();
+  });
+
   it("gives JS callers a migration error for the removed createAdapter prop", async () => {
     const errors: Error[] = [];
     container = document.createElement("div");
@@ -957,7 +995,6 @@ describe("AgentKitAssistantChat host behavior", () => {
             .querySelector<HTMLElement>("[contenteditable]")
             ?.getAttribute("contenteditable"),
         ).toBe("true");
-
         await act(async () => composer.setText("Next draft"));
         await act(async () => started.resolve({ runId: "run-latency" }));
 
@@ -1007,6 +1044,28 @@ describe("AgentKitAssistantChat host behavior", () => {
     },
   );
 
+  it("disables host suggestions while async submission is pending", async () => {
+    const suggestion = seedFollowup();
+    await mount(baseProps());
+    const chips = () =>
+      [...container.querySelectorAll("button")].filter(
+        (button) => button.textContent === suggestion.label,
+      );
+    expect(chips().length).toBeGreaterThan(0);
+    expect(chips().some((button) => button.disabled)).toBe(false);
+
+    await act(async () => {
+      chatMocks.composerProps.onSubmissionPendingChange(true);
+    });
+
+    expect(chips().every((button) => button.disabled)).toBe(true);
+
+    await act(async () => {
+      chatMocks.composerProps.onSubmissionPendingChange(false);
+    });
+    expect(chips().every((button) => !button.disabled)).toBe(true);
+  });
+
   it.each([undefined, "context-chips", "after-composer", "hidden"] as const)(
     "preserves initial starters with the real composer (placement: %s)",
     async (suggestionPlacement) => {

package/src/app/chat/AgentKitAssistantChat.tsx

@@ -511,6 +511,9 @@ interface AgentKitSurfaceContextValue {
   setupBouncePulse: number;
   bounceSetupCard: () => void;
   isSubmissionInFlight: boolean;
+  composerSubmissionPending: boolean;
+  onComposerSubmissionPendingChange: (pending: boolean) => void;
+  isThinkingVisibleInTranscript: boolean;
   contextItems: AgentChatContextItem[];
   suggestions: AgentSuggestionInput[];
   showSuggestions: boolean;
@@ -1149,6 +1152,8 @@ const AgentKitAssistantChatBody = forwardRef<
   const isRestoring =
     history?.isRestoring === true || props.threadRestore.status === "loading";
   const isSubmissionInFlight = history?.isSubmissionInFlight === true;
+  const [composerSubmissionPending, setComposerSubmissionPending] =
+    useState(false);
   const [authError, setAuthError] = useState<{
     sessionExpired?: boolean;
   } | null>(null);
@@ -1295,6 +1300,11 @@ const AgentKitAssistantChatBody = forwardRef<
     [thread.messages],
   );
   const isRunning = hasActiveAgentRuns(thread);
+  const lastMessage = thread.messages.at(-1);
+  const isThinkingVisibleInTranscript =
+    (isRunning || isSubmissionInFlight) &&
+    lastMessage?.role === "user" &&
+    lastMessage.metadata?.hideUserMessage !== true;
   const isThreadRunning = useCallback(
     () => hasActiveAgentRuns(controller.getThread(threadId)),
     [controller, threadId],
@@ -2597,13 +2607,14 @@ const AgentKitAssistantChatBody = forwardRef<
   );
   const submitSuggestion = useCallback(
     (suggestion: AgentSuggestionInput) => {
+      if (composerSubmissionPending) return;
       const handler = suggestionSubmitRef.current;
       if (!handler || handler.threadId !== threadId) return;
       void handler.submit(suggestion).catch((error) => {
         dispatchSetupRequiredEvent(error, props.tabId, threadId);
       });
     },
-    [props.tabId, threadId],
+    [composerSubmissionPending, props.tabId, threadId],
   );
   const retryDeferredSubmission = useCallback(async () => {
     if (!deferredProviderSubmissionFailureId) return;
@@ -2783,6 +2794,9 @@ const AgentKitAssistantChatBody = forwardRef<
     setupBouncePulse,
     bounceSetupCard,
     isSubmissionInFlight,
+    composerSubmissionPending,
+    onComposerSubmissionPendingChange: setComposerSubmissionPending,
+    isThinkingVisibleInTranscript,
     contextItems,
     voiceTranscriptMessages,
     selectionLength,
@@ -2967,7 +2981,8 @@ function AgentKitEmptyState({ threadId }: { threadId: string }) {
                     disabled={
                       !surface.canChat ||
                       surface.props.composerDisabled ||
-                      surface.props.composerSubmissionDisabled
+                      surface.props.composerSubmissionDisabled ||
+                      surface.composerSubmissionPending
                     }
                     onClick={() => surface.submitSuggestion(suggestion)}
                     className="w-full rounded-xl border border-border/70 bg-card/60 px-3 py-2.5 text-left text-[13px] text-muted-foreground shadow-sm transition-colors hover:border-border hover:bg-card hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
@@ -3067,7 +3082,8 @@ function AgentKitTranscript({ children, threadId }: AgentKitRegionRenderProps) {
   );
   const lastMessage = thread.messages.at(-1);
   const showThinking =
-    (surface.isRunning || surface.isSubmissionInFlight) &&
+    surface.isSubmissionInFlight &&
+    !surface.isRunning &&
     lastMessage?.role === "user" &&
     lastMessage.metadata?.hideUserMessage !== true;
   const pendingVoiceMessages = surface.voiceTranscriptMessages.filter(
@@ -3090,7 +3106,8 @@ function AgentKitTranscript({ children, threadId }: AgentKitRegionRenderProps) {
           !surface.canChat ||
           surface.props.composerDisabled ||
           surface.props.composerSubmissionDisabled ||
-          surface.isSubmissionInFlight
+          surface.isSubmissionInFlight ||
+          surface.composerSubmissionPending
         }
         onSelect={surface.submitSuggestion}
         className="agentkit-host-suggestions"
@@ -3248,11 +3265,13 @@ function AgentKitTranscript({ children, threadId }: AgentKitRegionRenderProps) {
       ))}
       {showThinking ? (
         <div
+          className="agent-thinking-indicator"
           role="status"
           aria-live="polite"
-          className="px-3 py-2 text-sm text-muted-foreground"
         >
-          {t("agentChat.status.thinking")}
+          <span className="agent-thinking-indicator__text">
+            {t("agentChat.status.thinking")}
+          </span>
         </div>
       ) : null}
       {guided.questions?.length ? (
@@ -3395,6 +3414,9 @@ function AgentKitComposerSurface({
   isRunning,
   isRestoring,
   isSubmissionInFlight,
+  composerSubmissionPending,
+  onComposerSubmissionPendingChange,
+  isThinkingVisibleInTranscript,
   hasRenderedMessages,
   threadRestore,
   suggestions,
@@ -3430,6 +3452,9 @@ function AgentKitComposerSurface({
   isRunning: boolean;
   isRestoring: boolean;
   isSubmissionInFlight: boolean;
+  composerSubmissionPending: boolean;
+  onComposerSubmissionPendingChange: (pending: boolean) => void;
+  isThinkingVisibleInTranscript: boolean;
   hasRenderedMessages: boolean;
   setupBouncePulse: number;
   bounceSetupCard: () => void;
@@ -3675,7 +3700,8 @@ function AgentKitComposerSurface({
             !canChat ||
             props.composerDisabled ||
             props.composerSubmissionDisabled ||
-            isSubmissionInFlight
+            isSubmissionInFlight ||
+            composerSubmissionPending
           }
           onSelect={submitSuggestion}
           className="agentkit-home-suggestions"
@@ -3749,6 +3775,8 @@ function AgentKitComposerSurface({
           requireAgentEngine={false}
           onTextChange={onTextChange}
           onBeforeSubmit={onBeforeSubmit}
+          announcePendingSubmission={!isThinkingVisibleInTranscript}
+          onSubmissionPendingChange={onComposerSubmissionPendingChange}
           contextItems={visibleContextItems}
           contextMenuItems={composerContext?.menuItems}
           onRemoveContextItem={(key) => {
@@ -3892,7 +3920,8 @@ function AgentKitComposerSurface({
             !canChat ||
             props.composerDisabled ||
             props.composerSubmissionDisabled ||
-            isSubmissionInFlight
+            isSubmissionInFlight ||
+            composerSubmissionPending
           }
           onSelect={submitSuggestion}
           className="agentkit-home-suggestions"
@@ -4040,11 +4069,13 @@ function AgentKitTool({ value, active }: AgentKitRenderProps<AgentToolCall>) {
   const metadata = value.metadata ?? {};
   const input = asRecord(value.input) ?? {};
   const output =
-    typeof value.output === "string"
-      ? value.output
-      : value.output === undefined
-        ? undefined
-        : JSON.stringify(value.output);
+    value.status === "failed" && value.error?.message
+      ? value.error.message
+      : typeof value.output === "string"
+        ? value.output
+        : value.output === undefined
+          ? undefined
+          : JSON.stringify(value.output);
   return (
     <ChatRunningContext.Provider
       value={active === true || value.status === "running"}
@@ -4058,8 +4089,8 @@ function AgentKitTool({ value, active }: AgentKitRenderProps<AgentToolCall>) {
           args={input}
           argsText={JSON.stringify(input)}
           result={output}
+          isError={value.status === "failed"}
           isRunning={value.status === "running"}
-          outcome={value.status === "failed" ? "unknown" : undefined}
           structuredMeta={metadata}
           mcpApp={asRecord(metadata.mcpApp) as never}
           chatUI={asRecord(metadata.chatUI) as never}

package/src/app/chat/AgentPanel.overlay.spec.tsx

@@ -160,6 +160,7 @@ describe("AgentPanel sibling overlay handoff", () => {
     container.remove();
     document.body.innerHTML = "";
     window.requestAnimationFrame = requestAnimationFrame;
+    vi.useRealTimers();
     vi.unstubAllGlobals();
   });
 
@@ -216,6 +217,7 @@ describe("AgentPanel sibling overlay handoff", () => {
 
   it("keeps All chats open after the menu restores focus", async () => {
     const focusRestorePrevented = vi.fn();
+    vi.useFakeTimers();
 
     await act(async () => {
       root.render(
@@ -249,8 +251,19 @@ describe("AgentPanel sibling overlay handoff", () => {
         );
     });
 
-    await act(async () => {
-      await new Promise<void>((resolve) => setTimeout(resolve, 0));
+    expect(
+      document.body.querySelector('[data-testid="history-content"]'),
+    ).toBeNull();
+
+    act(() => {
+      vi.advanceTimersByTime(99);
+    });
+    expect(
+      document.body.querySelector('[data-testid="history-content"]'),
+    ).toBeNull();
+
+    act(() => {
+      vi.advanceTimersByTime(1);
     });
 
     expect(focusRestorePrevented).toHaveBeenCalledWith(true);
@@ -261,6 +274,7 @@ describe("AgentPanel sibling overlay handoff", () => {
 
   it("opens the share popover after clicking Share in the overflow menu", async () => {
     const focusRestorePrevented = vi.fn();
+    vi.useFakeTimers();
 
     await act(async () => {
       root.render(
@@ -296,9 +310,19 @@ describe("AgentPanel sibling overlay handoff", () => {
     });
 
     expect(frames).toHaveLength(0);
+    expect(
+      document.body.querySelector('[data-testid="share-content"]'),
+    ).toBeNull();
 
-    await act(async () => {
-      await new Promise<void>((resolve) => setTimeout(resolve, 0));
+    act(() => {
+      vi.advanceTimersByTime(99);
+    });
+    expect(
+      document.body.querySelector('[data-testid="share-content"]'),
+    ).toBeNull();
+
+    act(() => {
+      vi.advanceTimersByTime(1);
     });
 
     expect(focusRestorePrevented).toHaveBeenCalledWith(true);