@agent-native/toolkit 0.208.0 → 0.209.0-nightly-20261014070126

package/src/app/chat/agentkit-chat/guided-questions.tsx

@@ -1097,6 +1097,35 @@ export type PendingQuestionRefetchResult =
   | { status: "none" }
   | { status: "error"; error: unknown };
 
+/**
+ * Window event dispatched once per human submit of a guided question card,
+ * only when the flow's `onSubmitMessage` resolves `{ delivered: true }`, so apps can
+ * observe answers (for example, which option was picked) without owning the
+ * flow.
+ */
+export const GUIDED_QUESTIONS_SUBMITTED_EVENT =
+  "agentNative.guidedQuestionsSubmitted";
+
+export interface GuidedQuestionsSubmittedDetail {
+  stateKey: string;
+  questions: GuidedQuestion[];
+  answers: GuidedQuestionAnswers;
+}
+
+function announceGuidedQuestionsSubmitted(
+  detail: GuidedQuestionsSubmittedDetail,
+): void {
+  // Listeners are observers; a throwing one must never block the submit.
+  try {
+    if (typeof window === "undefined") return;
+    window.dispatchEvent(
+      new CustomEvent(GUIDED_QUESTIONS_SUBMITTED_EVENT, { detail }),
+    );
+  } catch {
+    // coercion-ok: an observer failure must not affect delivering the answers.
+  }
+}
+
 function payloadBelongsToThread(
   payload: GuidedQuestionPayload,
   threadId: string | undefined,
@@ -1241,9 +1270,13 @@ export function useGuidedQuestionFlow({
   }, [queryClient, resolvedQueryKey, scopedKey, stateKey]);
 
   const sendAndClearOnDelivery = useCallback(
-    (send: () => void | Promise<{ delivered: boolean }>) => {
+    (
+      send: () => void | Promise<{ delivered: boolean }>,
+      onDelivered?: () => void,
+    ) => {
       if (submissionInFlightRef.current) return;
       const result = send();
+      // A synchronous send reports no delivery, so it is never announced.
       if (!result) {
         clear();
         return;
@@ -1252,7 +1285,9 @@ export function useGuidedQuestionFlow({
       setIsSubmitting(true);
       void result
         .then(({ delivered }) => {
-          if (delivered) clear();
+          if (!delivered) return;
+          onDelivered?.();
+          clear();
         })
         .catch((error) => {
           console.error("Guided question submission failed", error);
@@ -1276,6 +1311,12 @@ export function useGuidedQuestionFlow({
         return;
       }
       if (isSubmissionBlocked) return;
+      const announce = () =>
+        announceGuidedQuestionsSubmitted({
+          stateKey,
+          questions: visiblePayload?.questions ?? [],
+          answers,
+        });
       const formattedAnswers = formatGuidedAnswersForAgent(
         answers,
         visiblePayload?.questions,
@@ -1292,15 +1333,18 @@ export function useGuidedQuestionFlow({
         .filter(Boolean)
         .join("\n\n");
       if (onSubmitMessage) {
-        sendAndClearOnDelivery(() =>
-          onSubmitMessage({
-            answers,
-            formattedAnswers,
-            message: resolvedSubmitMessage,
-            context,
-          }),
+        sendAndClearOnDelivery(
+          () =>
+            onSubmitMessage({
+              answers,
+              formattedAnswers,
+              message: resolvedSubmitMessage,
+              context,
+            }),
+          announce,
         );
       } else {
+        // Fire-and-forget: there is no delivery signal to announce on.
         sendToAgentChat({
           message: resolvedSubmitMessage,
           context,
@@ -1315,6 +1359,7 @@ export function useGuidedQuestionFlow({
       onSubmitMessage,
       sendAndClearOnDelivery,
       isSubmissionBlocked,
+      stateKey,
       visiblePayload,
       submitMessage,
     ],

package/src/app/chat/agentkit-chat/index.ts

@@ -6,6 +6,7 @@ export {
 } from "./questions.js";
 export {
   askUserQuestion,
+  GUIDED_QUESTIONS_SUBMITTED_EVENT,
   formatGuidedAnswerValue,
   formatGuidedAnswersForAgent,
   getOtherGuidedAnswerText,
@@ -23,6 +24,7 @@ export {
   type GuidedQuestionOption,
   type GuidedQuestionPayload,
   type GuidedQuestionType,
+  type GuidedQuestionsSubmittedDetail,
   type UseGuidedQuestionFlowOptions,
 } from "./guided-questions.js";
 export { AgentKitActionWidget } from "./action-widget.js";

package/src/app/chat/chat/run-recovery.spec.tsx

@@ -1076,6 +1076,70 @@ describe("run recovery surfaces", () => {
     );
   });
 
+  it("keeps the setup card working when setup tracking throws", async () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    setupTelemetryMock.mockImplementation(() => {
+      throw new Error("tracker exploded");
+    });
+    const onConnected = vi.fn();
+    const router = createMemoryRouter(
+      [
+        {
+          path: "/home",
+          element: (
+            <AgentNativeI18nProvider
+              initialLocale="en-US"
+              initialPreference="en-US"
+              persistPreference={false}
+            >
+              <BuilderSetupCard onConnected={onConnected} />
+            </AgentNativeI18nProvider>
+          ),
+        },
+        { path: "/settings/keys", element: <SetupTrackingFlowProbe /> },
+      ],
+      { initialEntries: ["/home"] },
+    );
+
+    await act(async () => {
+      root.render(<RouterProvider router={router} />);
+    });
+    expect(container.querySelector(".agent-builder-setup-card")).not.toBeNull();
+
+    await act(async () => {
+      container
+        .querySelector<HTMLButtonElement>(
+          ".agent-builder-setup-card__builder-button",
+        )
+        ?.click();
+    });
+    await vi.waitFor(() =>
+      expect(builderConnectMock.onConnect).toBeTypeOf("function"),
+    );
+    await act(async () => builderConnectMock.onConnect?.(true));
+    await act(async () => {
+      await expect(
+        builderFlowMock.onConnected?.({ orgName: null }),
+      ).resolves.toBeUndefined();
+    });
+    expect(onConnected).toHaveBeenCalledTimes(1);
+
+    await act(async () => {
+      container
+        .querySelector<HTMLAnchorElement>('a[href="/settings/keys"]')
+        ?.click();
+      await Promise.resolve();
+    });
+    expect(router.state.location.pathname).toBe("/settings/keys");
+    expect(setupTelemetryMock.mock.calls.map(([name]) => name)).toEqual([
+      "integration_setup_exposed",
+      "integration_method_clicked",
+      "integration_method_outcome",
+      "integration_method_clicked",
+    ]);
+    expect(warn).toHaveBeenCalled();
+  });
+
   it("tracks Builder success only after a selected setup attempt is confirmed", async () => {
     const card = (
       <AgentNativeI18nProvider

package/src/app/chat/chat/run-recovery.tsx

@@ -82,14 +82,20 @@ function trackSetupFunnelEvent(
   action: SetupTelemetryAction,
   outcome: SetupTelemetryOutcome,
 ): void {
-  trackOnboardingEvent(eventName, {
-    flow: "chat_setup",
-    app_name: setupTelemetryAppName(),
-    step_id: "connect_ai",
-    method_id: methodId,
-    action,
-    outcome,
-  });
+  // Runs in the card's mount effect and ahead of the setup links' navigation,
+  // so a throw here would unmount the card or swallow the click.
+  try {
+    trackOnboardingEvent(eventName, {
+      flow: "chat_setup",
+      app_name: setupTelemetryAppName(),
+      step_id: "connect_ai",
+      method_id: methodId,
+      action,
+      outcome,
+    });
+  } catch (err) {
+    console.warn(`[connect-ai-setup] ${eventName} tracking failed:`, err);
+  }
 }
 
 type BuilderConnectTelemetryAttempt = {

package/src/app/sharing/ShareButton.spec.tsx

@@ -92,7 +92,7 @@ vi.mock("@agent-native/toolkit/ui/popover", () => {
         string,
         unknown
       >;
-      return String(props.className ?? "").includes("w-[min(460px,92vw)]");
+      return String(props.className ?? "").includes("w-[360px]");
     });
 
   return {
@@ -191,6 +191,15 @@ function setInputValue(
   });
 }
 
+// Radix tabs activate on mousedown, like a real pointer press.
+function pressTab(tab: HTMLElement) {
+  act(() => {
+    tab.dispatchEvent(
+      new MouseEvent("mousedown", { bubbles: true, button: 0 }),
+    );
+  });
+}
+
 describe("ShareButton", () => {
   let container: HTMLDivElement;
   let root: Root;
@@ -265,8 +274,8 @@ describe("ShareButton", () => {
     ) as HTMLInputElement;
     setInputValue(input, "first@example.com");
 
-    const add = Array.from(container.querySelectorAll("button")).find(
-      (button) => button.textContent === "Add",
+    const add = container.querySelector<HTMLButtonElement>(
+      'button[aria-label="Add"]',
     );
     if (!add) throw new Error("Add button not found");
 
@@ -323,8 +332,8 @@ describe("ShareButton", () => {
       'input[placeholder="Add people by email"]',
     ) as HTMLInputElement;
     setInputValue(input, "commenter@example.com");
-    const add = Array.from(container.querySelectorAll("button")).find(
-      (button) => button.textContent === "Add",
+    const add = container.querySelector<HTMLButtonElement>(
+      'button[aria-label="Add"]',
     );
     if (!add) throw new Error("Add button not found");
 
@@ -391,8 +400,8 @@ describe("ShareButton", () => {
     ) as HTMLTextAreaElement;
     setInputValue(message, "Here is the latest version.");
 
-    const add = Array.from(container.querySelectorAll("button")).find(
-      (button) => button.textContent === "Add",
+    const add = container.querySelector<HTMLButtonElement>(
+      'button[aria-label="Add"]',
     );
     if (!add) throw new Error("Add button not found");
     act(() => add.click());
@@ -406,6 +415,55 @@ describe("ShareButton", () => {
     );
   });
 
+  it("keeps the invite row compact with the role inside the field and an icon-only Add", async () => {
+    await act(async () => {
+      root.render(
+        <QueryClientProvider client={queryClient}>
+          <ShareButton resourceType="document" resourceId="doc-1" />
+        </QueryClientProvider>,
+      );
+    });
+
+    const input = container.querySelector<HTMLInputElement>(
+      'input[placeholder="Add people by email"]',
+    );
+    const field = input?.parentElement;
+    const role = container.querySelector('button[aria-label="Role"]');
+    const add = container.querySelector<HTMLButtonElement>(
+      'button[aria-label="Add"]',
+    );
+    expect(field?.contains(role ?? null)).toBe(true);
+    expect(field?.contains(add)).toBe(false);
+    expect(add?.textContent).toBe("");
+    expect(add?.querySelector("svg")).not.toBeNull();
+    expect(add?.getAttribute("title")).toBe("Add");
+    expect(add?.disabled).toBe(true);
+  });
+
+  it("renders the compact 360px popover and lets a host raise its layer", async () => {
+    await act(async () => {
+      root.render(
+        <QueryClientProvider client={queryClient}>
+          <ShareButton
+            resourceType="design"
+            resourceId="design-1"
+            popoverClassName="z-[100010]"
+          />
+        </QueryClientProvider>,
+      );
+    });
+
+    const popover = Array.from(
+      container.querySelectorAll<HTMLElement>(
+        "[data-agent-native-share-overlay]",
+      ),
+    ).find((node) => node.className.includes("w-[360px]"));
+    expect(popover).toBeDefined();
+    expect(popover?.className).toContain("z-[100010]");
+    expect(popover?.className).not.toContain("z-[2000]");
+    expect(popover?.className).not.toContain("460px");
+  });
+
   it("keeps a draft email when the share popover is closed and reopened", async () => {
     popoverTestState.simulateMounting = true;
 
@@ -954,31 +1012,68 @@ describe("ShareButton", () => {
       );
     });
 
-    expect(container.textContent).toContain("Share link");
-    expect(container.textContent).toContain("Export");
-    expect(container.textContent).toContain("Send to...");
-    expect(container.textContent).toContain("Context");
+    const tabs = Array.from(
+      container.querySelectorAll<HTMLButtonElement>('[role="tab"]'),
+    );
+    expect(tabs.map((tab) => tab.textContent)).toEqual([
+      "Share link",
+      "Export",
+      "Send to...",
+      "Context",
+    ]);
+    expect(tabs[0].getAttribute("aria-selected")).toBe("true");
+    expect(
+      container.querySelector('[role="tablist"]')?.getAttribute("aria-label"),
+    ).toBe("Share options");
     expect(container.textContent).not.toContain("Context body");
     expect(container.textContent).not.toContain("Export body");
-    for (const tab of container.querySelectorAll<HTMLButtonElement>(
-      '[role="tab"]',
-    )) {
-      expect(
-        document.getElementById(tab.getAttribute("aria-controls") ?? ""),
-      ).not.toBeNull();
-    }
-
-    const exportTab = Array.from(container.querySelectorAll("button")).find(
-      (button) => button.textContent === "Export",
-    );
-    if (!exportTab) throw new Error("Export tab not found");
+    expect(
+      container
+        .querySelector('[role="tabpanel"]')
+        ?.getAttribute("aria-labelledby"),
+    ).toBe(tabs[0].id);
 
-    act(() => {
-      exportTab.click();
-    });
+    pressTab(tabs[1]);
 
+    expect(tabs[1].getAttribute("aria-selected")).toBe("true");
     expect(container.textContent).toContain("Export body");
     expect(container.textContent).not.toContain("Send body");
+    expect(container.textContent).not.toContain("Add people by email");
+  });
+
+  it("draws every share tab, including app-owned ones, as an underline tab", async () => {
+    await act(async () => {
+      root.render(
+        <QueryClientProvider client={queryClient}>
+          <ShareButton
+            resourceType="design"
+            resourceId="design-1"
+            shareTabs={{
+              tabs: [
+                {
+                  value: "export",
+                  label: "Export",
+                  content: <div>Export body</div>,
+                },
+              ],
+            }}
+          />
+        </QueryClientProvider>,
+      );
+    });
+
+    const list = container.querySelector<HTMLElement>('[role="tablist"]');
+    expect(list?.className).toContain("bg-transparent");
+    expect(list?.className).not.toContain("bg-muted");
+    const tabs = Array.from(
+      container.querySelectorAll<HTMLElement>('[role="tab"]'),
+    );
+    expect(tabs).toHaveLength(2);
+    for (const tab of tabs) {
+      expect(tab.className).toContain("after:h-0.5");
+      expect(tab.className).toContain("data-[state=active]:bg-transparent");
+      expect(tab.className).not.toContain("shadow-sm");
+    }
   });
 
   it("renders the context tab when it is the only custom share tab", async () => {
@@ -1007,14 +1102,12 @@ describe("ShareButton", () => {
     expect(container.textContent).not.toContain("Context body");
     expect(container.querySelector('[role="tablist"]')).not.toBeNull();
 
-    const contextTab = Array.from(container.querySelectorAll("button")).find(
-      (button) => button.textContent === "Context",
-    );
+    const contextTab = Array.from(
+      container.querySelectorAll<HTMLElement>('[role="tab"]'),
+    ).find((tab) => tab.textContent === "Context");
     if (!contextTab) throw new Error("Context tab not found");
 
-    act(() => {
-      contextTab.click();
-    });
+    pressTab(contextTab);
 
     expect(container.textContent).toContain("Context body");
     const contextPanelId = contextTab.getAttribute("aria-controls");