@agent-native/toolkit 0.205.0 → 0.206.0-nightly-20261009011246

package/src/app/settings/api-keys/ApiKeyDialogs.tsx

@@ -1,6 +1,11 @@
 import { getAgentProviderOption } from "@agent-native/core/client/agent-provider-catalog";
 import { callAction, useActionQuery } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
+import {
+  requestCustomKeyOnboardingAbandonment,
+  trackCustomKeyOnboardingOutcome,
+  withCustomKeyOnboardingCredentialSave,
+} from "@agent-native/core/client/onboarding/use-onboarding";
 import { useOrg } from "@agent-native/core/client/org";
 import type { SecretRemovalPreview } from "@agent-native/core/secrets/usage";
 import { Alert, AlertDescription } from "@agent-native/toolkit/ui/alert";
@@ -83,9 +88,33 @@ export interface KeyValueDialogProps {
 
 /** Add key (Name, Value, Available to), or Replace value on a saved key. */
 export function KeyValueDialog(props: KeyValueDialogProps) {
+  const savePending = useRef(false);
+  const dismiss = () => {
+    if (savePending.current) {
+      requestCustomKeyOnboardingAbandonment();
+    } else {
+      trackCustomKeyOnboardingOutcome("credential_skipped");
+    }
+    props.onOpenChange(false);
+  };
+
   return (
-    <Dialog open={props.open} onOpenChange={props.onOpenChange}>
-      {props.open ? <KeyValueDialogContent {...props} /> : null}
+    <Dialog
+      open={props.open}
+      onOpenChange={(open) => {
+        if (open) props.onOpenChange(true);
+        else dismiss();
+      }}
+    >
+      {props.open ? (
+        <KeyValueDialogContent
+          {...props}
+          onDismiss={dismiss}
+          onSavingChange={(saving) => {
+            savePending.current = saving;
+          }}
+        />
+      ) : null}
     </Dialog>
   );
 }
@@ -114,11 +143,16 @@ function FormError({ message }: { message: string | null }) {
 
 function KeyValueDialogContent({
   onOpenChange,
+  onDismiss = () => onOpenChange(false),
+  onSavingChange,
   dialog,
   listing,
   orgName,
   onSaved,
-}: KeyValueDialogProps) {
+}: KeyValueDialogProps & {
+  onDismiss?: () => void;
+  onSavingChange?: (saving: boolean) => void;
+}) {
   const t = useT();
   const queryClient = useQueryClient();
   const mounted = useMounted();
@@ -175,14 +209,17 @@ function KeyValueDialogContent({
   const save = async () => {
     if (saving || !valid) return;
     setSaving(true);
+    onSavingChange?.(true);
     setError(null);
     try {
-      await saveApiKeyValue({
-        name: target.kind === "registered" ? target.key.name : target.name,
-        value: value.trim(),
-        registered: target.kind === "registered",
-        shared: isShared,
-      });
+      await withCustomKeyOnboardingCredentialSave(() =>
+        saveApiKeyValue({
+          name: target.kind === "registered" ? target.key.name : target.name,
+          value: value.trim(),
+          registered: target.kind === "registered",
+          shared: isShared,
+        }),
+      );
       void refreshKeys(queryClient);
       toast.success(replacing ? t(`${K}valueReplaced`) : t(`${K}keyAdded`));
       onSaved?.();
@@ -191,6 +228,7 @@ function KeyValueDialogContent({
       setError(err instanceof Error ? err.message : String(err));
     } finally {
       setSaving(false);
+      onSavingChange?.(false);
     }
   };
 
@@ -273,6 +311,9 @@ function KeyValueDialogContent({
             onChange={(event) => {
               setValue(event.target.value);
               setError(null);
+              if (event.target.value.trim()) {
+                trackCustomKeyOnboardingOutcome("credential_entry_started");
+              }
             }}
           />
           {docsUrl ? (
@@ -328,11 +369,7 @@ function KeyValueDialogContent({
         ) : null}
         <FormError message={error} />
         <DialogFooter className="gap-2 sm:space-x-0">
-          <Button
-            type="button"
-            variant="secondary"
-            onClick={() => onOpenChange(false)}
-          >
+          <Button type="button" variant="secondary" onClick={onDismiss}>
             {t(`${M}cancel`)}
           </Button>
           <Button type="submit" disabled={saving || !valid}>
@@ -366,10 +403,32 @@ export interface ServiceKeyDialogProps {
  * from Infrastructure. Reads the listing the dialog needs itself.
  */
 export function ServiceKeyDialog(props: ServiceKeyDialogProps) {
+  const savePending = useRef(false);
+  const dismiss = () => {
+    if (savePending.current) {
+      requestCustomKeyOnboardingAbandonment();
+    } else {
+      trackCustomKeyOnboardingOutcome("credential_skipped");
+    }
+    props.onOpenChange(false);
+  };
+
   return (
-    <Dialog open={props.open} onOpenChange={props.onOpenChange}>
+    <Dialog
+      open={props.open}
+      onOpenChange={(open) => {
+        if (open) props.onOpenChange(true);
+        else dismiss();
+      }}
+    >
       {props.open && props.keyName ? (
-        <ServiceKeyDialogContent {...props} />
+        <ServiceKeyDialogContent
+          {...props}
+          onDismiss={dismiss}
+          onSavingChange={(saving) => {
+            savePending.current = saving;
+          }}
+        />
       ) : null}
     </Dialog>
   );
@@ -380,7 +439,12 @@ function ServiceKeyDialogContent({
   keyName,
   mode,
   onSaved,
-}: ServiceKeyDialogProps) {
+  onDismiss = () => onOpenChange(false),
+  onSavingChange,
+}: ServiceKeyDialogProps & {
+  onDismiss?: () => void;
+  onSavingChange?: (saving: boolean) => void;
+}) {
   const t = useT();
   const org = useOrg();
   const listing = useActionQuery<ApiKeysListing>("list-api-keys" as never);
@@ -403,6 +467,8 @@ function ServiceKeyDialogContent({
         }
         listing={listing.data}
         orgName={org.data?.orgName ?? ""}
+        onDismiss={onDismiss}
+        onSavingChange={onSavingChange}
         {...(onSaved ? { onSaved } : {})}
       />
     );
@@ -451,11 +517,7 @@ function ServiceKeyDialogContent({
         </div>
       )}
       <DialogFooter className="gap-2 sm:space-x-0">
-        <Button
-          type="button"
-          variant="secondary"
-          onClick={() => onOpenChange(false)}
-        >
+        <Button type="button" variant="secondary" onClick={onDismiss}>
           {t(`${M}cancel`)}
         </Button>
         <Button type="button" disabled>

package/src/app/settings/api-keys/ApiKeysSettingsPage.spec.tsx

@@ -21,6 +21,22 @@ const clientMock = vi.hoisted(() => ({
   test: vi.fn(),
   notify: vi.fn(),
 }));
+const onboardingOutcomeMock = vi.hoisted(() => vi.fn());
+const onboardingAbandonmentRequestMock = vi.hoisted(() => vi.fn());
+const credentialSaveBoundaryMock = vi.hoisted(() => vi.fn());
+
+vi.mock("@agent-native/core/client/onboarding/use-onboarding", () => ({
+  requestCustomKeyOnboardingAbandonment: onboardingAbandonmentRequestMock,
+  trackCustomKeyOnboardingOutcome: onboardingOutcomeMock,
+  withCustomKeyOnboardingCredentialSave: async (
+    save: () => Promise<unknown>,
+  ) => {
+    credentialSaveBoundaryMock();
+    const result = await save();
+    onboardingOutcomeMock("credential_saved");
+    return result;
+  },
+}));
 
 vi.mock("@agent-native/core/client/hooks", () => ({
   getBrowserTabId: () => "test-tab",
@@ -88,7 +104,11 @@ vi.mock("@agent-native/core/client/i18n", () => ({
   }),
 }));
 
-import { DeleteKeyDialog, ServiceKeyDialog } from "./ApiKeyDialogs.js";
+import {
+  DeleteKeyDialog,
+  KeyValueDialog,
+  ServiceKeyDialog,
+} from "./ApiKeyDialogs.js";
 import ApiKeysSettingsPage from "./ApiKeysSettingsPage.js";
 
 function entry(overrides: Partial<ApiKeyEntry>): ApiKeyEntry {
@@ -176,6 +196,17 @@ function buttonByText(text: string, scope: ParentNode = document) {
   return button;
 }
 
+function pointerDown(element: Element | null | undefined) {
+  if (!element) throw new Error("Nothing to open");
+  element.dispatchEvent(
+    new PointerEvent("pointerdown", {
+      bubbles: true,
+      button: 0,
+      pointerType: "mouse",
+    }),
+  );
+}
+
 function typeInto(input: HTMLInputElement, value: string) {
   const setter = Object.getOwnPropertyDescriptor(
     HTMLInputElement.prototype,
@@ -199,6 +230,9 @@ describe("ApiKeysSettingsPage", () => {
     navigateMock.mockReset();
     clientMock.save.mockReset();
     clientMock.test.mockReset();
+    onboardingOutcomeMock.mockReset();
+    onboardingAbandonmentRequestMock.mockReset();
+    credentialSaveBoundaryMock.mockReset();
     window.history.replaceState(null, "", "/settings/api-keys");
     container = document.createElement("div");
     document.body.appendChild(container);
@@ -297,6 +331,32 @@ describe("ApiKeysSettingsPage", () => {
     });
   });
 
+  it("does not count testing an arbitrary saved key as onboarding validation", async () => {
+    state.listing = listing({ keys: [entry({ canTest: true })] });
+    clientMock.test.mockResolvedValue({ ok: true });
+    await render();
+
+    const keyRow = row("secrets:STRIPE_SECRET_KEY");
+    const menuTrigger = keyRow.querySelector(
+      '[aria-label="Manage STRIPE_SECRET_KEY"]',
+    );
+    await act(async () => pointerDown(menuTrigger));
+    const testItem = [...document.querySelectorAll('[role="menuitem"]')].find(
+      (item) => item.textContent?.trim() === "Test",
+    );
+    if (!testItem) throw new Error("No Test menu item");
+    await act(async () =>
+      testItem.dispatchEvent(new MouseEvent("click", { bubbles: true })),
+    );
+
+    await vi.waitFor(() =>
+      expect(clientMock.test).toHaveBeenCalledWith("STRIPE_SECRET_KEY"),
+    );
+    expect(onboardingOutcomeMock).not.toHaveBeenCalledWith(
+      "credential_validated",
+    );
+  });
+
   it("lists organization keys for admins", async () => {
     state.listing = listing({
       canManageOrg: true,
@@ -407,6 +467,93 @@ describe("ApiKeysSettingsPage", () => {
     expect(dialog.textContent).toContain("Get key");
   });
 
+  it("does not count saving a registered key as validation", async () => {
+    clientMock.save.mockResolvedValue(undefined);
+    await render();
+    const header = await renderHeader();
+    await act(async () => buttonByText("Add key", header).click());
+
+    const dialog = document.querySelector('[role="dialog"]') as HTMLElement;
+    const [name, value] = [
+      ...dialog.querySelectorAll("input"),
+    ] as HTMLInputElement[];
+    await act(async () => typeInto(name!, "git"));
+    await act(async () => buttonByText("GITHUB_TOKEN", dialog).click());
+    await act(async () => typeInto(value!, "fake-github-token"));
+    await act(async () => {
+      dialog
+        .querySelector("form")!
+        .dispatchEvent(
+          new Event("submit", { bubbles: true, cancelable: true }),
+        );
+    });
+
+    const outcomes = onboardingOutcomeMock.mock.calls.map(
+      ([outcome]) => outcome,
+    );
+    expect(outcomes).toContain("credential_saved");
+    expect(outcomes).not.toContain("credential_validated");
+  });
+
+  it("allows leaving a key dialog while preserving its pending save outcome", async () => {
+    let resolveSave!: () => void;
+    clientMock.save.mockReturnValue(
+      new Promise<void>((resolve) => {
+        resolveSave = resolve;
+      }),
+    );
+    const onOpenChange = vi.fn();
+    await act(async () => {
+      root.render(
+        <QueryClientProvider client={new QueryClient()}>
+          <KeyValueDialog
+            open
+            onOpenChange={onOpenChange}
+            dialog={{ mode: "add" }}
+            listing={listing()}
+            orgName="Acme"
+          />
+        </QueryClientProvider>,
+      );
+    });
+
+    const dialog = document.querySelector('[role="dialog"]') as HTMLElement;
+    const [name, value] = [
+      ...dialog.querySelectorAll("input"),
+    ] as HTMLInputElement[];
+    await act(async () => typeInto(name!, "CUSTOM_API_KEY"));
+    await act(async () => typeInto(value!, "fake-custom-value"));
+    await act(async () => {
+      dialog
+        .querySelector("form")!
+        .dispatchEvent(
+          new Event("submit", { bubbles: true, cancelable: true }),
+        );
+    });
+    expect(clientMock.save).toHaveBeenCalledWith({
+      name: "CUSTOM_API_KEY",
+      value: "fake-custom-value",
+      registered: false,
+      shared: false,
+    });
+
+    await act(async () => buttonByText("Close", dialog).click());
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+    expect(onboardingAbandonmentRequestMock).toHaveBeenCalledTimes(1);
+    expect(
+      onboardingOutcomeMock.mock.calls.map(([outcome]) => outcome),
+    ).not.toContain("credential_skipped");
+
+    await act(async () => resolveSave());
+    await vi.waitFor(() => expect(onOpenChange).toHaveBeenCalledWith(false));
+    const outcomes = onboardingOutcomeMock.mock.calls.map(
+      ([outcome]) => outcome,
+    );
+    expect(outcomes).toContain("credential_saved");
+    expect(outcomes).not.toContain("credential_skipped");
+    expect(credentialSaveBoundaryMock).toHaveBeenCalledTimes(1);
+  });
+
   it("opens Add key for a #secrets:KEY link to a key nobody saved", async () => {
     window.history.replaceState(
       null,
@@ -505,6 +652,9 @@ describe("DeleteKeyDialog", () => {
   beforeEach(() => {
     vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
     callActionMock.mockReset();
+    clientMock.save.mockReset();
+    onboardingOutcomeMock.mockReset();
+    credentialSaveBoundaryMock.mockReset();
     container = document.createElement("div");
     document.body.appendChild(container);
     root = createRoot(container);
@@ -617,6 +767,84 @@ describe("DeleteKeyDialog", () => {
     expect(onOpenChange).toHaveBeenCalledWith(false);
   });
 
+  it("records a service-key attempt as skipped when canceled", async () => {
+    state.listing = listing({ canManageOrg: true });
+    const onOpenChange = vi.fn();
+    await act(async () => {
+      root.render(
+        <QueryClientProvider client={new QueryClient()}>
+          <ServiceKeyDialog
+            open
+            onOpenChange={onOpenChange}
+            keyName="VOYAGE_API_KEY"
+            mode="add"
+          />
+        </QueryClientProvider>,
+      );
+    });
+
+    const dialog = document.querySelector('[role="dialog"]') as HTMLElement;
+    await act(async () => buttonByText("Cancel", dialog).click());
+
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+    expect(onboardingOutcomeMock).toHaveBeenCalledWith("credential_skipped");
+  });
+
+  it("allows leaving a service-key dialog while preserving its pending save outcome", async () => {
+    let resolveSave!: () => void;
+    clientMock.save.mockReturnValue(
+      new Promise<void>((resolve) => {
+        resolveSave = resolve;
+      }),
+    );
+    state.listing = listing({ canManageOrg: true });
+    const onOpenChange = vi.fn();
+    await act(async () => {
+      root.render(
+        <QueryClientProvider client={new QueryClient()}>
+          <ServiceKeyDialog
+            open
+            onOpenChange={onOpenChange}
+            keyName="VOYAGE_API_KEY"
+            mode="add"
+          />
+        </QueryClientProvider>,
+      );
+    });
+
+    const dialog = document.querySelector('[role="dialog"]') as HTMLElement;
+    const [, value] = [
+      ...dialog.querySelectorAll("input"),
+    ] as HTMLInputElement[];
+    await act(async () => typeInto(value!, "fake-voyage-value"));
+    await act(async () => {
+      dialog
+        .querySelector("form")!
+        .dispatchEvent(
+          new Event("submit", { bubbles: true, cancelable: true }),
+        );
+    });
+    await vi.waitFor(() => expect(clientMock.save).toHaveBeenCalled());
+
+    await act(async () => buttonByText("Close", dialog).click());
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+    expect(onboardingAbandonmentRequestMock).toHaveBeenCalledTimes(1);
+    expect(
+      onboardingOutcomeMock.mock.calls.map(([outcome]) => outcome),
+    ).not.toContain("credential_skipped");
+
+    await act(async () => {
+      resolveSave();
+      await vi.waitFor(() => expect(onOpenChange).toHaveBeenCalledWith(false));
+    });
+    const outcomes = onboardingOutcomeMock.mock.calls.map(
+      ([outcome]) => outcome,
+    );
+    expect(outcomes).toContain("credential_saved");
+    expect(outcomes).not.toContain("credential_skipped");
+    expect(credentialSaveBoundaryMock).toHaveBeenCalledTimes(1);
+  });
+
   it("replaces a service's saved organization key from Manage", async () => {
     state.listing = listing({
       canManageOrg: true,

package/src/app/settings/api-keys/ApiKeysSettingsPage.tsx

@@ -383,8 +383,9 @@ function KeyMenu({
   const t = useT();
   const test = async () => {
     const result = await testSavedApiKey(entry.name);
-    if (result.ok) toast.success(t(`${K}testPassed`));
-    else toast.error(result.error);
+    if (result.ok) {
+      toast.success(t(`${K}testPassed`));
+    } else toast.error(result.error);
   };
   return (
     <DropdownMenu>

package/src/app/settings/model/ModelSettingsPage.spec.tsx

@@ -3,6 +3,7 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import React, { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
+import { MemoryRouter, useLocation } from "react-router";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
 import englishMessages from "../../i18n/catalogs/en-US.js";
@@ -23,6 +24,7 @@ const state = vi.hoisted(() => ({
   modelsRefetch: vi.fn(),
   builder: {} as Record<string, unknown>,
   header: null as { action?: unknown } | null,
+  location: null as unknown,
   loop: {
     maxIterations: 400,
     defaultMaxIterations: 400,
@@ -150,6 +152,11 @@ vi.mock("@agent-native/core/client/i18n", () => ({
 
 import ModelSettingsPage from "./ModelSettingsPage.js";
 
+function LocationProbe() {
+  state.location = useLocation();
+  return null;
+}
+
 const PROVIDERS = [
   "openrouter",
   "ollama",
@@ -324,6 +331,8 @@ describe("ModelSettingsPage", () => {
     };
     state.builder = builderFlow();
     state.header = null;
+    state.location = null;
+    dialogProps.last = null;
     queryClient = new QueryClient();
     state.loop = { ...state.loop, canUpdate: true };
     callActionMock.mockReset();
@@ -331,6 +340,7 @@ describe("ModelSettingsPage", () => {
     popupMock.mockReset();
     navigateMock.mockReset();
     loopMock.save.mockReset();
+    window.history.replaceState(null, "", "/settings/model");
     container = document.createElement("div");
     document.body.appendChild(container);
     root = createRoot(container);
@@ -343,21 +353,77 @@ describe("ModelSettingsPage", () => {
     vi.unstubAllGlobals();
   });
 
-  async function render() {
+  async function render(locationState?: unknown) {
+    const entry = new URL(window.location.href);
     await act(async () => {
       root.render(
-        <QueryClientProvider client={queryClient}>
-          <ModelSettingsPage
-            pageId="model"
-            sub={null}
-            context={{} as never}
-            bridge={{} as never}
-          />
-        </QueryClientProvider>,
+        <MemoryRouter
+          initialEntries={[
+            {
+              pathname: entry.pathname,
+              search: entry.search,
+              hash: entry.hash,
+              state: locationState,
+            },
+          ]}
+        >
+          <LocationProbe />
+          <QueryClientProvider client={queryClient}>
+            <ModelSettingsPage
+              pageId="model"
+              sub={null}
+              context={{} as never}
+              bridge={{} as never}
+            />
+          </QueryClientProvider>
+        </MemoryRouter>,
       );
     });
   }
 
+  it("uses chat setup attribution for the first provider dialog opening only", async () => {
+    window.history.replaceState(null, "", "/settings/model?from=chat#llm");
+    state.listing = listing(
+      {},
+      {
+        anthropic: {
+          personal: { scope: "user", masked: "••••1234", updatedAt: 1 },
+        },
+      },
+    );
+    await render({
+      providerSetupTrackingFlow: "chat_setup",
+      returnTo: "/chat",
+    });
+
+    await act(async () => {
+      row("provider-personal-anthropic").querySelector("button")!.click();
+    });
+    expect(dialogProps.last).toMatchObject({
+      open: true,
+      trackingFlow: "chat_setup",
+    });
+    expect(state.location).toMatchObject({
+      pathname: "/settings/model",
+      search: "?from=chat",
+      hash: "#llm",
+      state: { returnTo: "/chat" },
+    });
+
+    await act(async () => {
+      (
+        dialogProps.last as { onOpenChange: (open: boolean) => void }
+      ).onOpenChange(false);
+    });
+    await act(async () => {
+      row("provider-personal-anthropic").querySelector("button")!.click();
+    });
+    expect(dialogProps.last).toMatchObject({
+      open: true,
+      trackingFlow: "settings",
+    });
+  });
+
   it("shows members organization providers read-only and their own as manageable", async () => {
     state.listing = listing(
       {},
@@ -709,6 +775,30 @@ describe("ModelSettingsPage", () => {
     expect(row("llm").textContent).not.toContain("Add a model provider");
   });
 
+  it("shows the current Builder model for a retired stored default", async () => {
+    state.listing = listing({
+      canManageOrg: true,
+      canUpdateDefault: true,
+      defaultModel: { engine: "builder", model: "claude-sonnet-5" },
+    });
+    state.models = {
+      providers: models().providers.map((provider) =>
+        provider.provider === "builder"
+          ? { ...provider, recommendedModels: ["claude-sonnet-5-5"] }
+          : provider,
+      ),
+    };
+    state.builder = builderFlow();
+    await render();
+
+    const defaultRow = row("default-model");
+    await vi.waitFor(() => {
+      expect(defaultRow.textContent).toContain(
+        "claude-sonnet-5-5 · Builder.io",
+      );
+    });
+  });
+
   it("offers a deployment-configured provider when there is no saved key or default", async () => {
     state.listing = listing(
       { canManageOrg: true, canUpdateDefault: true, defaultModel: null },