@agent-native/toolkit 0.201.0 → 0.201.1

package/src/app/onboarding/BuilderIncludedServices.tsx

@@ -0,0 +1,263 @@
+import { useT } from "@agent-native/core/client/i18n";
+import type { OnboardingCapability } from "@agent-native/core/onboarding/types";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@agent-native/toolkit/ui/collapsible";
+import { Skeleton } from "@agent-native/toolkit/ui/skeleton";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@agent-native/toolkit/ui/tooltip";
+import {
+  IconCheck,
+  IconChevronDown,
+  IconInfoCircle,
+} from "@tabler/icons-react";
+
+type CapabilityTranslator = (
+  key: string,
+  options?: Record<string, unknown>,
+) => string;
+
+export function getBuilderIncludedCapabilities(
+  capabilities: OnboardingCapability[],
+) {
+  return capabilities.filter(
+    (capability) =>
+      capability.builderIncluded &&
+      (!!capability.service ||
+        capability.required ||
+        !!capability.suggested ||
+        !!capability.builderOnly),
+  );
+}
+
+function capabilityCopy(
+  t: CapabilityTranslator,
+  capability: OnboardingCapability,
+) {
+  return {
+    label: capability.labelKey
+      ? t(capability.labelKey, { defaultValue: capability.label })
+      : capability.label,
+    why: capability.whyKey
+      ? t(capability.whyKey, { defaultValue: capability.why })
+      : null,
+  };
+}
+
+export function CapabilityInfoButton({
+  label,
+  why,
+}: {
+  label: string;
+  why: string;
+}) {
+  const t = useT();
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          type="button"
+          aria-label={t("agentChat.onboarding.capability.about", {
+            defaultValue: "About {{label}}",
+            label,
+          })}
+          className="inline-flex size-4 items-center justify-center rounded-full text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          onClick={(event) => event.stopPropagation()}
+          onKeyDown={(event) => event.stopPropagation()}
+        >
+          <IconInfoCircle size={13} />
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="top" className="max-w-xs text-xs">
+        {why}
+      </TooltipContent>
+    </Tooltip>
+  );
+}
+
+function CapabilityRows({
+  capabilities,
+}: {
+  capabilities: OnboardingCapability[];
+}) {
+  const t = useT();
+
+  return (
+    <TooltipProvider>
+      {capabilities.map((capability) => {
+        const copy = capabilityCopy(t, capability);
+        return (
+          <div
+            key={capability.id}
+            className="flex items-center gap-2 rounded-md px-2 py-1"
+          >
+            <IconCheck
+              aria-hidden="true"
+              className="shrink-0 text-muted-foreground"
+              size={15}
+            />
+            <span className="text-xs text-foreground">{copy.label}</span>
+            {copy.why ? (
+              <CapabilityInfoButton label={copy.label} why={copy.why} />
+            ) : null}
+          </div>
+        );
+      })}
+    </TooltipProvider>
+  );
+}
+
+export function BuilderIncludedServices({
+  capabilities,
+  collapsible = false,
+  loading = false,
+  error,
+  testId,
+}: {
+  capabilities: OnboardingCapability[];
+  collapsible?: boolean;
+  loading?: boolean;
+  error?: string | null;
+  testId?: string;
+}) {
+  const t = useT();
+
+  if (!collapsible && capabilities.length === 0) return null;
+  if (collapsible && !loading && !error && capabilities.length === 0)
+    return null;
+
+  const content = loading ? (
+    <div className="grid gap-2 py-1" aria-label={t("agentChat.common.loading")}>
+      <Skeleton className="h-5 w-4/5" />
+      <Skeleton className="h-5 w-2/3" />
+      <Skeleton className="h-5 w-3/4" />
+    </div>
+  ) : error ? (
+    <p role="status" className="py-1 text-xs text-muted-foreground">
+      {error}
+    </p>
+  ) : (
+    <CapabilityRows capabilities={capabilities} />
+  );
+
+  if (collapsible) {
+    return (
+      <Collapsible
+        defaultOpen={false}
+        className="border-t border-border/60"
+        data-testid={testId}
+      >
+        <CollapsibleTrigger className="group flex w-full items-center justify-between gap-2 py-3 text-left text-sm font-medium text-muted-foreground outline-none hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring">
+          {t("agentChat.onboarding.builderIncludedServices", {
+            defaultValue: "Included services",
+          })}
+          <IconChevronDown
+            aria-hidden="true"
+            className="size-4 shrink-0 transition-transform group-data-[state=open]:rotate-180"
+          />
+        </CollapsibleTrigger>
+        <CollapsibleContent className="grid gap-1 pb-1">
+          {content}
+        </CollapsibleContent>
+      </Collapsible>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-1" data-testid={testId}>
+      <p className="text-sm text-muted-foreground/70">What&rsquo;s included</p>
+      <CapabilityRows capabilities={capabilities} />
+    </div>
+  );
+}
+
+export function BuilderIncludedBenefitsDisclosure({
+  capabilities,
+  includedLabel,
+  creditsLabel,
+  loading = false,
+  loadingLabel,
+  error,
+  testId,
+}: {
+  capabilities: OnboardingCapability[];
+  includedLabel: string;
+  creditsLabel: string;
+  loading?: boolean;
+  loadingLabel: string;
+  error?: string | null;
+  testId?: string;
+}) {
+  const t = useT();
+  const additionalServices = capabilities.filter(
+    (capability) => capability.id !== "llm" && capability.service !== "model",
+  );
+  const canExpand = loading || !!error || additionalServices.length > 0;
+  const serviceList = loading ? (
+    <div className="grid gap-2 py-1" aria-label={loadingLabel}>
+      <Skeleton className="h-5 w-4/5" />
+      <Skeleton className="h-5 w-2/3" />
+      <Skeleton className="h-5 w-3/4" />
+    </div>
+  ) : error ? (
+    <p role="status" className="py-1 text-xs text-muted-foreground">
+      {error}
+    </p>
+  ) : (
+    <CapabilityRows capabilities={additionalServices} />
+  );
+  const moreServicesLabel = t("agentChat.onboarding.builderMoreServices", {
+    defaultValue: "+ {{count}} more services",
+    count: additionalServices.length,
+  });
+
+  const summary = (
+    <span className="flex min-w-0 flex-1 flex-col gap-1">
+      <span className="text-[13px] font-semibold text-foreground">
+        {includedLabel}
+      </span>
+      <span className="text-xs font-medium text-emerald-700 dark:text-emerald-400">
+        {creditsLabel}
+      </span>
+      {additionalServices.length > 0 ? (
+        <span className="text-xs font-medium text-foreground dark:text-white">
+          {moreServicesLabel}
+        </span>
+      ) : null}
+    </span>
+  );
+
+  if (!canExpand) {
+    return (
+      <div className="rounded-[10px] bg-emerald-50 px-4 py-3 dark:bg-emerald-950/30">
+        {summary}
+      </div>
+    );
+  }
+
+  return (
+    <Collapsible
+      defaultOpen={false}
+      className="overflow-hidden rounded-[10px] bg-emerald-50 dark:bg-emerald-950/30"
+      data-testid={testId}
+    >
+      <CollapsibleTrigger className="group flex w-full items-start justify-between gap-3 px-4 py-3 text-left outline-none focus-visible:ring-2 focus-visible:ring-ring">
+        {summary}
+        <IconChevronDown
+          aria-hidden="true"
+          className="mt-0.5 size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-180"
+        />
+      </CollapsibleTrigger>
+      <CollapsibleContent className="border-0 bg-muted px-2 py-2">
+        {serviceList}
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}

package/src/app/onboarding/FirstRunOnboarding.spec.tsx

@@ -109,6 +109,7 @@ describe("FirstRunOnboarding", () => {
             required: true,
             builderIncluded: true,
             keySummary: "LLM provider key",
+            whyKey: "agentChat.onboarding.capability.llm.why",
             why: "Needed for chat",
           },
           {
@@ -844,7 +845,7 @@ describe("FirstRunOnboarding", () => {
     );
   });
 
-  it("lists the included Builder.io services from the app profile", () => {
+  it("shows included Builder.io services with descriptions in tooltips", () => {
     act(() => {
       root.render(
         <TooltipProvider>
@@ -862,9 +863,11 @@ describe("FirstRunOnboarding", () => {
     const builderCard = document.body
       .querySelector("[data-testid='first-run-builder-create-account']")
       ?.closest("section");
-    const included = [...(builderCard?.querySelectorAll("span") ?? [])].map(
-      (node) => node.textContent?.trim(),
+    const services = builderCard?.querySelector<HTMLElement>(
+      "[data-testid='first-run-builder-services']",
     );
+    expect(services?.querySelector("details, summary")).toBeNull();
+    const included = services?.textContent ?? "";
     // Every shared service, whether or not the app recommends it, plus the
     // app's own headline capability Builder.io covers.
     for (const service of [
@@ -878,6 +881,23 @@ describe("FirstRunOnboarding", () => {
     ]) {
       expect(included).toContain(service);
     }
+    expect(included).not.toContain("Needed for chat");
+    expect(included).not.toContain("Turns speech into text");
+    expect(
+      services?.querySelectorAll("button[aria-label^='About']").length,
+    ).toBe(1);
+    const manualCard = document.body
+      .querySelector("[data-testid='first-run-open-key-settings']")
+      ?.closest("section");
+    expect(builderCard?.textContent).not.toContain(
+      "Configure using Builder.io and use your account credits to power the app’s services.",
+    );
+    expect(manualCard?.textContent).not.toContain(
+      "Configure your own API keys and credentials to power the app’s services.",
+    );
+    expect(manualCard?.textContent).not.toContain("Design system intelligence");
+    expect(manualCard?.textContent).not.toContain("Background agents");
+    expect(manualCard?.querySelector("svg.tabler-icon-x")).toBeNull();
     // Not Builder.io capabilities, and no per-app extras.
     for (const missing of [
       "Connected agents",
@@ -886,11 +906,6 @@ describe("FirstRunOnboarding", () => {
     ]) {
       expect(document.body.textContent).not.toContain(missing);
     }
-    expect(
-      [...document.body.querySelectorAll("button")].find((button) =>
-        button.textContent?.trim().endsWith("more"),
-      ),
-    ).toBeUndefined();
   });
 
   it("does not ask Mail users to connect Gmail again in manual setup", () => {

package/src/app/onboarding/FirstRunOnboarding.tsx

@@ -28,20 +28,8 @@ import type {
 } from "@agent-native/core/onboarding/types";
 import { Badge } from "@agent-native/toolkit/ui/badge";
 import { Skeleton } from "@agent-native/toolkit/ui/skeleton";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@agent-native/toolkit/ui/tooltip";
 import { cn } from "@agent-native/toolkit/utils";
-import {
-  IconArrowRight,
-  IconCheck,
-  IconInfoCircle,
-  IconKey,
-  IconLoader2,
-  IconX,
-} from "@tabler/icons-react";
+import { IconArrowRight, IconKey, IconLoader2 } from "@tabler/icons-react";
 import React, {
   useCallback,
   useEffect,
@@ -52,6 +40,11 @@ import React, {
 import { useLocation } from "react-router";
 
 import { useBuilderConnectFlow } from "../settings/useBuilderStatus.js";
+import {
+  BuilderIncludedServices,
+  CapabilityInfoButton,
+  getBuilderIncludedCapabilities,
+} from "./BuilderIncludedServices.js";
 import {
   ONBOARDING_PRIMARY_BUTTON_CLASS,
   OnboardingStepLayout,
@@ -523,10 +516,8 @@ export function FirstRunOnboarding({
 
   // Every shared service Builder.io powers, the same list Infrastructure
   // shows, plus the app's own headline capabilities it covers.
-  const builderCapabilities = profile.capabilities.filter(
-    (capability) =>
-      capability.builderIncluded &&
-      (!!capability.service || isHeadlineCapability(capability)),
+  const builderCapabilities = getBuilderIncludedCapabilities(
+    profile.capabilities,
   );
   const handleBuilder = (provisionAccount = canActivateBuilderFreeCredits) => {
     if (previewMode) {
@@ -720,10 +711,6 @@ export function FirstRunOnboarding({
                       Recommended
                     </Badge>
                   </div>
-                  <p className="text-sm text-muted-foreground">
-                    Configure using Builder.io and use your account credits to
-                    power the app&rsquo;s services.
-                  </p>
                 </div>
                 <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">
@@ -733,40 +720,10 @@ export function FirstRunOnboarding({
                     {t("agentChat.onboarding.builderMonthlyCredits")}
                   </p>
                 </div>
-                <div className="flex flex-col gap-1">
-                  <p className="text-sm text-muted-foreground/70">
-                    What&rsquo;s included
-                  </p>
-                  {builderCapabilities.map((capability) => {
-                    const copy = getCapabilityCopy(t, capability);
-                    return (
-                      <div
-                        key={capability.id}
-                        className="flex items-center gap-2 rounded-md px-2 py-1"
-                      >
-                        <IconCheck
-                          className="shrink-0 text-muted-foreground"
-                          size={15}
-                        />
-                        <span className="flex-1 text-xs text-foreground">
-                          {copy.label}
-                        </span>
-                        {capability.builderOnly && (
-                          <CapabilityInfoButton
-                            why={copy.why}
-                            ariaLabel={t(
-                              "agentChat.onboarding.capability.about",
-                              {
-                                defaultValue: "About {{label}}",
-                                label: copy.label,
-                              },
-                            )}
-                          />
-                        )}
-                      </div>
-                    );
-                  })}
-                </div>
+                <BuilderIncludedServices
+                  capabilities={builderCapabilities}
+                  testId="first-run-builder-services"
+                />
                 <div className="flex flex-col gap-2">
                   {canActivateBuilderFreeCredits && (
                     <button
@@ -805,10 +762,6 @@ export function FirstRunOnboarding({
                   <h2 className="text-lg font-bold text-foreground">
                     Configure manually
                   </h2>
-                  <p className="text-sm text-muted-foreground">
-                    Configure your own API keys and credentials to power the
-                    app&rsquo;s services.
-                  </p>
                 </div>
                 <div className="flex flex-col gap-1 rounded-xl bg-muted px-4 py-3">
                   <p className="text-[13px] font-semibold text-foreground">
@@ -1148,11 +1101,11 @@ type CapabilityTranslator = (
 
 type CapabilityCopy = Pick<
   OnboardingCapability,
-  "id" | "required" | "suggested" | "builderOnly"
+  "id" | "required" | "suggested"
 > & {
   label: string;
   keySummary: string;
-  why: string;
+  why: string | null;
 };
 
 function getCapabilityCopy(
@@ -1163,7 +1116,6 @@ function getCapabilityCopy(
     id: capability.id,
     required: capability.required,
     suggested: capability.suggested,
-    builderOnly: capability.builderOnly,
     label: capability.labelKey
       ? t(capability.labelKey, { defaultValue: capability.label })
       : capability.label,
@@ -1172,7 +1124,7 @@ function getCapabilityCopy(
       : capability.keySummary,
     why: capability.whyKey
       ? t(capability.whyKey, { defaultValue: capability.why })
-      : capability.why,
+      : null,
   };
 }
 
@@ -1187,16 +1139,15 @@ function CapabilityList({
   const visibleCapabilities = useMemo(() => {
     const headline = capabilities.filter(
       (capability) =>
-        !capability.satisfiedBySignIn && isHeadlineCapability(capability),
+        !capability.satisfiedBySignIn &&
+        !capability.builderOnly &&
+        (capability.required || capability.suggested),
     );
     const required = headline.filter((capability) => capability.required);
     const suggested = headline.filter(
       (capability) => !capability.required && capability.suggested,
     );
-    const noManualPath = headline.filter(
-      (capability) => !capability.required && !capability.suggested,
-    );
-    return [...required, ...suggested, ...noManualPath];
+    return [...required, ...suggested];
   }, [capabilities]);
 
   return (
@@ -1216,24 +1167,7 @@ function CapabilityList({
   );
 }
 
-function isHeadlineCapability(capability: OnboardingCapability): boolean {
-  return (
-    capability.required || !!capability.suggested || !!capability.builderOnly
-  );
-}
-
 function CapabilityRow({ copy }: { copy: CapabilityCopy }) {
-  // Builder-only services have no bring-your-own path, so the manual list
-  // shows them crossed out with no Required/Recommended tag instead of
-  // mislabeling them "Optional".
-  if (copy.builderOnly) {
-    return (
-      <div className="flex items-center gap-2 rounded-md px-2 py-1">
-        <IconX className="shrink-0 text-muted-foreground" size={14} />
-        <span className="flex-1 text-xs text-foreground">{copy.label}</span>
-      </div>
-    );
-  }
   return (
     <div className="flex items-center gap-2 rounded-md px-2 py-1">
       <IconKey className="shrink-0 text-muted-foreground" size={14} />
@@ -1243,6 +1177,9 @@ function CapabilityRow({ copy }: { copy: CapabilityCopy }) {
       >
         {copy.keySummary}
       </span>
+      {copy.why ? (
+        <CapabilityInfoButton label={copy.label} why={copy.why} />
+      ) : null}
       <span className="shrink-0 text-xs text-muted-foreground">
         {copy.required ? "Required" : "Recommended"}
       </span>
@@ -1250,33 +1187,6 @@ function CapabilityRow({ copy }: { copy: CapabilityCopy }) {
   );
 }
 
-function CapabilityInfoButton({
-  why,
-  ariaLabel,
-}: {
-  why: string;
-  ariaLabel: string;
-}) {
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <button
-          type="button"
-          aria-label={ariaLabel}
-          className="inline-flex size-4 items-center justify-center rounded-full text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-          onClick={(event) => event.stopPropagation()}
-          onKeyDown={(event) => event.stopPropagation()}
-        >
-          <IconInfoCircle size={13} />
-        </button>
-      </TooltipTrigger>
-      <TooltipContent side="top" className="max-w-xs text-xs">
-        {why}
-      </TooltipContent>
-    </Tooltip>
-  );
-}
-
 function FirstRunCompletionError({
   message,
   onRetry,

package/src/app/resources/McpConnectionSuggestion.render.spec.tsx

@@ -117,6 +117,7 @@ describe("McpConnectionSuggestion render", () => {
     } else {
       Reflect.deleteProperty(window, "localStorage");
     }
+    vi.useRealTimers();
     vi.restoreAllMocks();
     vi.unstubAllGlobals();
   });
@@ -142,6 +143,57 @@ describe("McpConnectionSuggestion render", () => {
 
     act(() => (dismiss as HTMLButtonElement).click());
 
+    expect(container.querySelector("[data-mcp-connection-suggestion]")).toBe(
+      null,
+    );
+    const dismissals = JSON.parse(
+      window.localStorage.getItem(
+        "agent-native:mcp-connection-suggestions-dismissed",
+      ) ?? "{}",
+    ) as Record<string, number>;
+    expect(dismissals["test-integration"]).toEqual(expect.any(Number));
+
+    act(() => root.unmount());
+    root = createRoot(container);
+    renderSuggestion();
+    expect(container.querySelector("[data-mcp-connection-suggestion]")).toBe(
+      null,
+    );
+  });
+
+  it("shows a dismissed suggestion again after one week", () => {
+    vi.useFakeTimers();
+    const dismissedAt = new Date("2026-10-01T00:00:00.000Z").getTime();
+    vi.setSystemTime(dismissedAt);
+    window.localStorage.setItem(
+      "agent-native:mcp-connection-suggestions-dismissed",
+      JSON.stringify({ "test-integration": dismissedAt }),
+    );
+
+    renderSuggestion();
+
+    expect(container.querySelector("[data-mcp-connection-suggestion]")).toBe(
+      null,
+    );
+
+    act(() => vi.advanceTimersByTime(7 * 24 * 60 * 60 * 1000));
+
+    expect(
+      container.querySelector("[data-mcp-connection-suggestion]"),
+    ).not.toBeNull();
+  });
+
+  it("migrates existing dismissal IDs and preserves them across mounts", () => {
+    vi.useFakeTimers();
+    const dismissedAt = new Date("2026-10-01T00:00:00.000Z").getTime();
+    vi.setSystemTime(dismissedAt);
+    window.localStorage.setItem(
+      "agent-native:mcp-connection-suggestions-dismissed",
+      JSON.stringify(["test-integration"]),
+    );
+
+    renderSuggestion();
+
     expect(container.querySelector("[data-mcp-connection-suggestion]")).toBe(
       null,
     );
@@ -149,9 +201,9 @@ describe("McpConnectionSuggestion render", () => {
       JSON.parse(
         window.localStorage.getItem(
           "agent-native:mcp-connection-suggestions-dismissed",
-        ) ?? "[]",
+        ) ?? "{}",
       ),
-    ).toEqual(["test-integration"]);
+    ).toEqual({ "test-integration": dismissedAt });
 
     act(() => root.unmount());
     root = createRoot(container);