@agent-native/toolkit 0.201.0 → 0.201.1

package/src/app/resources/McpConnectionSuggestion.tsx

@@ -44,32 +44,65 @@ export interface McpConnectionSuggestionProps {
 
 const DISMISSED_MCP_SUGGESTIONS_STORAGE_KEY =
   "agent-native:mcp-connection-suggestions-dismissed";
+const MCP_SUGGESTION_DISMISSAL_WINDOW_MS = 7 * 24 * 60 * 60 * 1000;
 
-function readDismissedMcpSuggestionIds(): string[] {
-  if (typeof window === "undefined") return [];
+function readDismissedMcpSuggestionTimestamps(
+  now = Date.now(),
+): Record<string, number> {
+  if (typeof window === "undefined") return {};
   try {
     const raw = window.localStorage.getItem(
       DISMISSED_MCP_SUGGESTIONS_STORAGE_KEY,
     );
-    if (!raw) return [];
+    if (!raw) return {};
     const parsed: unknown = JSON.parse(raw);
-    return Array.isArray(parsed)
-      ? parsed.filter((value): value is string => typeof value === "string")
-      : [];
+    if (Array.isArray(parsed)) {
+      const timestamps = Object.fromEntries(
+        parsed
+          .filter((id): id is string => typeof id === "string")
+          .map((id) => [id, now]),
+      ) as Record<string, number>;
+      try {
+        // Legacy IDs have no timestamp, so start their cooldown at migration.
+        window.localStorage.setItem(
+          DISMISSED_MCP_SUGGESTIONS_STORAGE_KEY,
+          JSON.stringify(timestamps),
+        );
+      } catch {
+        // coercion-ok: unavailable storage cannot persist the migration.
+      }
+      return timestamps;
+    }
+    if (!parsed || typeof parsed !== "object") {
+      return {};
+    }
+    const timestamps: Record<string, number> = {};
+    for (const [id, dismissedAt] of Object.entries(
+      parsed as Record<string, unknown>,
+    )) {
+      if (
+        typeof dismissedAt === "number" &&
+        Number.isFinite(dismissedAt) &&
+        dismissedAt <= now &&
+        now - dismissedAt < MCP_SUGGESTION_DISMISSAL_WINDOW_MS
+      ) {
+        timestamps[id] = dismissedAt;
+      }
+    }
+    return timestamps;
   } catch {
     // coercion-ok: unavailable browser storage means no persisted dismissals.
-    return [];
+    return {};
   }
 }
 
-function rememberMcpSuggestionDismissal(id: string): void {
+function rememberMcpSuggestionDismissal(id: string, dismissedAt: number): void {
   if (typeof window === "undefined") return;
   try {
-    const ids = readDismissedMcpSuggestionIds();
-    if (ids.includes(id)) return;
+    const timestamps = readDismissedMcpSuggestionTimestamps(dismissedAt);
     window.localStorage.setItem(
       DISMISSED_MCP_SUGGESTIONS_STORAGE_KEY,
-      JSON.stringify([...ids, id]),
+      JSON.stringify({ ...timestamps, [id]: dismissedAt }),
     );
   } catch {
     // coercion-ok: unavailable browser storage only skips persistence.
@@ -180,8 +213,8 @@ export function McpConnectionSuggestion({
   const [quickConnectIntegrationId, setQuickConnectIntegrationId] = useState<
     string | null
   >(null);
-  const [dismissedIds, setDismissedIds] = useState(
-    readDismissedMcpSuggestionIds,
+  const [dismissedAtById, setDismissedAtById] = useState(
+    readDismissedMcpSuggestionTimestamps,
   );
   const [connecting, setConnecting] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -230,11 +263,15 @@ export function McpConnectionSuggestion({
     (mcpServersQuery.data?.role === "owner" ||
       mcpServersQuery.data?.role === "admin"),
   );
+  const dismissedAt = integration ? dismissedAtById[integration.id] : undefined;
+  const dismissed =
+    dismissedAt !== undefined &&
+    Date.now() - dismissedAt < MCP_SUGGESTION_DISMISSAL_WINDOW_MS;
   const shouldSuggest =
     mcpServersQuery.isSuccess &&
     integration &&
     !connected &&
-    !dismissedIds.includes(integration.id) &&
+    !dismissed &&
     (Boolean(integrationId) ||
       variant === "composer" ||
       isMcpConnectionFailureText(text) ||
@@ -249,6 +286,18 @@ export function McpConnectionSuggestion({
     setConnecting(false);
   }, [integration?.id, integration?.logoUrl, variant]);
 
+  useEffect(() => {
+    if (!integration || dismissedAt === undefined) return;
+    const timeout = window.setTimeout(
+      () => setDismissedAtById(readDismissedMcpSuggestionTimestamps()),
+      Math.max(
+        0,
+        dismissedAt + MCP_SUGGESTION_DISMISSAL_WINDOW_MS - Date.now(),
+      ),
+    );
+    return () => window.clearTimeout(timeout);
+  }, [dismissedAt, integration?.id]);
+
   if (!shouldSuggest) return null;
 
   const connect = async () => {
@@ -314,12 +363,12 @@ export function McpConnectionSuggestion({
             if (connecting) return;
             setError(null);
             setConnecting(true);
-            setDismissedIds((current) =>
-              current.includes(integration.id)
-                ? current
-                : [...current, integration.id],
-            );
-            rememberMcpSuggestionDismissal(integration.id);
+            const dismissedAt = Date.now();
+            setDismissedAtById((current) => ({
+              ...current,
+              [integration.id]: dismissedAt,
+            }));
+            rememberMcpSuggestionDismissal(integration.id, dismissedAt);
             void Promise.resolve(onDismiss?.())
               .catch((cause: unknown) => {
                 setError(
@@ -372,11 +421,10 @@ export function McpConnectionSuggestion({
             : undefined
         }
         onCreated={() => {
-          setDismissedIds((current) =>
-            current.includes(integration.id)
-              ? current
-              : [...current, integration.id],
-          );
+          setDismissedAtById((current) => ({
+            ...current,
+            [integration.id]: Date.now(),
+          }));
           saveMcpConnectionResume(variant === "response" ? contextText : text);
           notifyMcpConnectionComplete();
           onConnected?.();

package/src/app/settings/BuilderConnectPopover.spec.tsx

@@ -1,15 +1,55 @@
 // @vitest-environment happy-dom
 
+import { TooltipProvider } from "@agent-native/toolkit/ui/tooltip";
 import React, { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
 vi.mock("@agent-native/core/client/i18n", () => ({
-  useT: () => (_key: string, options?: { defaultValue?: string }) =>
-    options?.defaultValue ?? _key,
+  useT:
+    () => (_key: string, options?: { defaultValue?: string; count?: number }) =>
+      (options?.defaultValue ?? _key).replace(
+        "{{count}}",
+        String(options?.count ?? ""),
+      ),
+}));
+
+vi.mock("@agent-native/core/client/onboarding/use-onboarding", () => ({
+  useOnboarding: () => ({
+    loading: false,
+    error: null,
+    profile: {
+      capabilities: [
+        {
+          id: "llm",
+          label: "AI model",
+          required: true,
+          builderIncluded: true,
+          service: "model",
+          keySummary: "Connect your own AI model",
+          why: "The agent uses a language model.",
+        },
+        {
+          id: "design-system-intelligence",
+          label: "Design system intelligence",
+          required: false,
+          builderIncluded: true,
+          service: "design-system-intelligence",
+        },
+        {
+          id: "background-agents",
+          label: "Background agents",
+          required: false,
+          builderIncluded: true,
+          service: "background-agents",
+        },
+      ],
+    },
+  }),
 }));
 
 import { BuilderConnectPopover } from "./BuilderConnectPopover.js";
+import { DeferredBuilderConnectPopover } from "./deferred-builder-connect-popover.js";
 
 let container: HTMLDivElement;
 let root: Root;
@@ -46,7 +86,7 @@ function click(element: HTMLElement) {
 }
 
 function render(node: React.ReactElement) {
-  act(() => root.render(node));
+  act(() => root.render(React.createElement(TooltipProvider, null, node)));
 }
 
 function trigger() {
@@ -57,6 +97,23 @@ function trigger() {
 }
 
 describe("BuilderConnectPopover before the status read resolves", () => {
+  it("starts the OAuth path from the original trigger click", () => {
+    const flow = {
+      connecting: false,
+      start: vi.fn(),
+      statusResolved: true,
+      agentNativeProvisioningEnabled: false,
+      accountExists: false,
+    };
+
+    render(
+      React.createElement(DeferredBuilderConnectPopover, { flow }, trigger()),
+    );
+    click(connectButton());
+
+    expect(flow.start).toHaveBeenCalledWith({ provisionAccount: false });
+  });
+
   it("uses existing-account sign-in when provisioning is unavailable", () => {
     const onConnect = vi.fn();
     const flow = {
@@ -182,6 +239,120 @@ describe("BuilderConnectPopover before the status read resolves", () => {
     expect(onConnect).toHaveBeenCalledWith(true);
   });
 
+  it("shows one sign-in action when Builder reports an existing account", () => {
+    const onConnect = vi.fn();
+    const flow = {
+      connecting: false,
+      start: vi.fn(),
+      statusResolved: true,
+      agentNativeProvisioningEnabled: true,
+      accountExists: true,
+    };
+
+    render(
+      React.createElement(
+        BuilderConnectPopover,
+        {
+          flow,
+          onConnect,
+          contentTestId: "consent",
+          primaryTestId: "create",
+          secondaryTestId: "sign-in",
+        },
+        trigger(),
+      ),
+    );
+    expect(document.querySelector("[data-testid='consent']")).toBeNull();
+    click(connectButton());
+
+    const consent = document.querySelector("[data-testid='consent']");
+    expect(consent?.textContent).toContain("builderActivateTitle");
+    expect(consent?.querySelector("p[role='status']")?.textContent).toBe(
+      "You already have a Builder.io account",
+    );
+    expect(consent?.textContent).toContain("Included free");
+    expect(consent?.textContent).not.toContain(
+      "Included free with a Builder.io account",
+    );
+    expect(consent?.textContent).toContain("60 monthly Agent Credits");
+    expect(consent?.textContent).toContain("+ 2 more services");
+    const services = consent?.querySelector<HTMLElement>(
+      "[data-testid='builder-included-services']",
+    );
+    const servicesToggle = services?.querySelector<HTMLButtonElement>(
+      "button[aria-expanded]",
+    );
+    expect(servicesToggle?.getAttribute("aria-expanded")).toBe("false");
+    expect(
+      Array.from(
+        servicesToggle?.querySelectorAll(":scope > span > span") ?? [],
+      ).map((line) => line.textContent),
+    ).toEqual([
+      "Included free",
+      "60 monthly Agent Credits",
+      "+ 2 more services",
+    ]);
+    expect(
+      consent?.querySelector<HTMLButtonElement>("[data-testid='create']")
+        ?.textContent,
+    ).toBe("agentChat.onboarding.builderSignInWithAccount");
+    expect(
+      consent?.querySelector<HTMLButtonElement>("[data-testid='sign-in']"),
+    ).toBeNull();
+    expect(
+      consent?.querySelector<HTMLButtonElement>("[data-testid='create'] svg"),
+    ).toBeNull();
+    expect(consent?.textContent).not.toContain("agentChat.auth.logIn");
+
+    click(servicesToggle!);
+    expect(servicesToggle?.getAttribute("aria-expanded")).toBe("true");
+    click(consent?.querySelector("[data-testid='create']") as HTMLElement);
+    expect(onConnect).toHaveBeenCalledWith(false);
+  });
+
+  it("reopens the same account choices when activation finds an existing account", () => {
+    const flow = {
+      connecting: false,
+      start: vi.fn(),
+      statusResolved: true,
+      agentNativeProvisioningEnabled: true,
+      accountExists: false,
+    };
+    const props = {
+      flow,
+      contentTestId: "consent",
+      primaryTestId: "create",
+      secondaryTestId: "sign-in",
+    };
+
+    render(React.createElement(BuilderConnectPopover, props, trigger()));
+    click(connectButton());
+    click(
+      document.querySelector(
+        "[data-testid='consent'] [data-testid='create']",
+      ) as HTMLElement,
+    );
+    expect(flow.start).toHaveBeenCalledWith({ provisionAccount: true });
+
+    render(
+      React.createElement(
+        BuilderConnectPopover,
+        { ...props, flow: { ...flow, accountExists: true } },
+        trigger(),
+      ),
+    );
+
+    const consent = document.querySelector("[data-testid='consent']");
+    expect(consent?.querySelector("p[role='status']")?.textContent).toBe(
+      "You already have a Builder.io account",
+    );
+    expect(consent?.querySelector("[data-testid='create']")).not.toBeNull();
+    expect(consent?.querySelector("[data-testid='sign-in']")).toBeNull();
+
+    click(consent?.querySelector("[data-testid='create']") as HTMLElement);
+    expect(flow.start).toHaveBeenLastCalledWith({ provisionAccount: false });
+  });
+
   it("stacks the create and sign-in buttons together with the terms below them", () => {
     const flow = {
       connecting: false,
@@ -225,9 +396,7 @@ describe("BuilderConnectPopover before the status read resolves", () => {
       p.querySelector("a"),
     );
     expect(create && signIn && terms).toBeTruthy();
-    expect(consent?.textContent).toContain(
-      "Included free with a Builder.io account",
-    );
+    expect(consent?.textContent).toContain("Included free");
     expect(consent?.textContent).toContain("60 monthly Agent Credits");
     expect(signIn?.parentElement).toBe(create?.parentElement);
     expect(create!.compareDocumentPosition(signIn!)).toBe(

package/src/app/settings/BuilderConnectPopover.tsx

@@ -1,4 +1,5 @@
 import { useT } from "@agent-native/core/client/i18n";
+import { useOnboarding } from "@agent-native/core/client/onboarding/use-onboarding";
 import { Button } from "@agent-native/toolkit/ui/button";
 import {
   Popover,
@@ -6,9 +7,12 @@ import {
   PopoverTrigger,
 } from "@agent-native/toolkit/ui/popover";
 import { Spinner } from "@agent-native/toolkit/ui/spinner";
-import { IconArrowRight } from "@tabler/icons-react";
 import React, { useEffect, useRef, useState } from "react";
 
+import {
+  BuilderIncludedBenefitsDisclosure,
+  getBuilderIncludedCapabilities,
+} from "../onboarding/BuilderIncludedServices.js";
 import type { BuilderConnectFlow } from "./useBuilderStatus.js";
 
 type BuilderConnectTrigger = React.ReactElement<{
@@ -19,13 +23,12 @@ type BuilderConnectTrigger = React.ReactElement<{
 
 export interface BuilderConnectPopoverProps {
   flow: Pick<BuilderConnectFlow, "connecting" | "start"> & {
+    accountExists?: boolean;
     cancel?: BuilderConnectFlow["cancel"];
     agentNativeProvisioningEnabled?: boolean;
-    accountExists?: boolean;
     retry?: () => boolean | void;
     statusResolved?: boolean;
     statusReadSettledCount?: number;
-    canConnect?: BuilderConnectFlow["canConnect"];
     provisionAccount?: boolean;
   };
   children: BuilderConnectTrigger;
@@ -49,30 +52,31 @@ export function BuilderConnectPopover({
 }: BuilderConnectPopoverProps) {
   const t = useT();
   const [open, setOpen] = useState(false);
+  const provisioningAttemptRef = useRef(false);
   const capabilityResolved = flow.statusResolved === true;
   const showPopover =
     (defaultProvisionAccount && !capabilityResolved) ||
     (capabilityResolved && flow.agentNativeProvisioningEnabled === true);
-  const accountExists = capabilityResolved && flow.accountExists;
-  const initiatedByThisTriggerRef = useRef(false);
   const [queuedClick, setQueuedClick] = useState<{ settledAt: number } | null>(
     null,
   );
   const settledCount = flow.statusReadSettledCount ?? 0;
 
   useEffect(() => {
-    if (accountExists && initiatedByThisTriggerRef.current) {
-      initiatedByThisTriggerRef.current = false;
+    if (flow.accountExists && provisioningAttemptRef.current) {
+      provisioningAttemptRef.current = false;
       setOpen(true);
+    } else if (!flow.connecting) {
+      provisioningAttemptRef.current = false;
     }
-  }, [accountExists]);
+  }, [flow.accountExists, flow.connecting]);
 
   const start = (provisionAccount?: boolean) => {
     const shouldProvision =
       provisionAccount ??
       (flow.agentNativeProvisioningEnabled === true &&
         (defaultProvisionAccount || flow.provisionAccount === true));
-    initiatedByThisTriggerRef.current = true;
+    if (shouldProvision) provisioningAttemptRef.current = true;
     setOpen(false);
     if (onConnect) {
       onConnect(shouldProvision);
@@ -139,11 +143,11 @@ export function BuilderConnectPopover({
   if (!showPopover) {
     return cancelAction ? (
       <span className="inline-flex max-w-full items-center gap-2">
-        {trigger}
+        <span className="contents">{trigger}</span>
         {cancelAction}
       </span>
     ) : (
-      trigger
+      <span className="contents">{trigger}</span>
     );
   }
 
@@ -151,60 +155,50 @@ export function BuilderConnectPopover({
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>{trigger}</PopoverTrigger>
       <PopoverContent
-        align="end"
-        side="bottom"
-        sideOffset={-40}
+        align="center"
+        side="right"
+        sideOffset={8}
         aria-labelledby="builder-connect-popover-title"
         data-testid={contentTestId}
-        className="z-[330] w-80 max-w-[calc(100vw-2rem)] p-3 text-left"
+        className="z-[330] max-h-[min(640px,calc(100dvh-2rem),var(--radix-popover-content-available-height))] w-80 max-w-[calc(100vw-2rem)] overflow-y-auto p-3 text-left"
       >
         <div className="space-y-2.5">
           <h2
             id="builder-connect-popover-title"
             className="text-sm font-semibold text-foreground"
           >
-            {accountExists
-              ? t("agentChat.onboarding.builderAccountExistsTitle")
-              : t("agentChat.onboarding.builderActivateTitle")}
+            {t("agentChat.onboarding.builderActivateTitle")}
           </h2>
-          <p className="text-xs leading-5 text-muted-foreground">
-            {accountExists
-              ? t("agentChat.onboarding.builderAccountExistsDescription")
-              : flow.canConnect?.org
-                ? t("agentChat.onboarding.builderOrgActivationDescription")
-                : t("agentChat.onboarding.builderActivationDescription")}
+          <p
+            role={flow.accountExists ? "status" : undefined}
+            className="text-xs leading-5 text-muted-foreground"
+          >
+            {flow.accountExists
+              ? t("agentChat.onboarding.builderAccountExistsTitle", {
+                  defaultValue: "You already have a Builder.io account",
+                })
+              : t("agentChat.onboarding.builderActivationDescription", {
+                  defaultValue:
+                    "Create or connect a Builder.io account in one click to get free credits.",
+                })}
           </p>
-          <div className="flex flex-col gap-1 rounded-[10px] bg-emerald-50 px-4 py-3 dark:bg-emerald-950/30">
-            <p className="text-[13px] font-semibold text-foreground">
-              {t("agentChat.onboarding.builderIncludedFreeWithAccount", {
-                defaultValue: "Included free with a Builder.io account",
-              })}
-            </p>
-            <p className="text-xs font-medium text-emerald-700 dark:text-emerald-400">
-              {t("agentChat.onboarding.builderMonthlyCredits", {
-                defaultValue: "60 monthly Agent Credits",
-              })}
-            </p>
-          </div>
+          <BuilderConnectIncludedServices />
           <div className="flex flex-col gap-2">
             <Button
               type="button"
               data-testid={primaryTestId}
               className="w-full"
-              onClick={() => start(accountExists ? false : true)}
+              onClick={() => start(!flow.accountExists)}
               disabled={flow.connecting}
             >
               {flow.connecting ? <Spinner aria-hidden /> : null}
-              {accountExists
-                ? t("agentChat.auth.logIn")
+              {flow.accountExists
+                ? t("agentChat.onboarding.builderSignInWithAccount")
                 : flow.connecting
                   ? t("agentChat.onboarding.builderActivating")
                   : t("agentChat.onboarding.builderCreateAndActivate")}
-              {!accountExists && !flow.connecting ? (
-                <IconArrowRight aria-hidden />
-              ) : null}
             </Button>
-            {!accountExists && (
+            {!flow.accountExists ? (
               <Button
                 type="button"
                 variant="secondary"
@@ -215,31 +209,29 @@ export function BuilderConnectPopover({
               >
                 {t("agentChat.onboarding.builderExistingAccount")}
               </Button>
-            )}
+            ) : null}
           </div>
-          {!accountExists && (
-            <p className="text-[11px] leading-4 text-muted-foreground">
-              {t("agentChat.onboarding.builderConsentPrefix")}{" "}
-              <a
-                href="https://www.builder.io/legal/terms"
-                target="_blank"
-                rel="noreferrer"
-                className="underline underline-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              >
-                {t("agentChat.onboarding.builderTerms")}
-              </a>{" "}
-              {t("agentChat.onboarding.builderConsentAnd")}{" "}
-              <a
-                href="https://www.builder.io/legal/privacy"
-                target="_blank"
-                rel="noreferrer"
-                className="underline underline-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              >
-                {t("agentChat.onboarding.builderPrivacy")}
-              </a>
-              .
-            </p>
-          )}
+          <p className="text-[11px] leading-4 text-muted-foreground">
+            {t("agentChat.onboarding.builderConsentPrefix")}{" "}
+            <a
+              href="https://www.builder.io/legal/terms"
+              target="_blank"
+              rel="noreferrer"
+              className="underline underline-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              {t("agentChat.onboarding.builderTerms")}
+            </a>{" "}
+            {t("agentChat.onboarding.builderConsentAnd")}{" "}
+            <a
+              href="https://www.builder.io/legal/privacy"
+              target="_blank"
+              rel="noreferrer"
+              className="underline underline-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              {t("agentChat.onboarding.builderPrivacy")}
+            </a>
+            .
+          </p>
         </div>
       </PopoverContent>
     </Popover>
@@ -254,3 +246,31 @@ export function BuilderConnectPopover({
     popover
   );
 }
+
+function BuilderConnectIncludedServices() {
+  const t = useT();
+  const { profile, loading, error } = useOnboarding();
+  const capabilities = profile
+    ? getBuilderIncludedCapabilities(profile.capabilities)
+    : [];
+
+  return (
+    <BuilderIncludedBenefitsDisclosure
+      capabilities={capabilities}
+      includedLabel={t("agentChat.onboarding.builderIncludedFree", {
+        defaultValue: "Included free",
+      })}
+      creditsLabel={t("agentChat.onboarding.builderMonthlyCredits", {
+        defaultValue: "60 monthly Agent Credits",
+      })}
+      loading={loading}
+      loadingLabel={t("agentChat.common.loading")}
+      error={
+        error || (!loading && !profile)
+          ? t("agentChat.common.chunkLoadFailed")
+          : null
+      }
+      testId="builder-included-services"
+    />
+  );
+}