@agent-native/toolkit 0.216.0 → 0.217.0

package/dist/app/shared/ConsentBanner.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getConsentChoice, resolveConsentRegion, setConsentChoice, shouldShowConsentBanner, subscribeConsent, } from "@agent-native/core/client/consent";
+import { useT } from "@agent-native/core/client/i18n";
+import { Button } from "@agent-native/toolkit/ui/button";
+import { Label } from "@agent-native/toolkit/ui/label";
+import { Switch } from "@agent-native/toolkit/ui/switch";
+import { useEffect, useState, useSyncExternalStore } from "react";
+const DEFAULT_PRIVACY_POLICY_HREF = "https://www.agent-native.com/privacy";
+/**
+ * The cookie banner for visitors in the consent region. Renders nothing
+ * elsewhere, and nothing once the visitor has chosen, until
+ * `openConsentSettings()` reopens it.
+ */
+export function ConsentBanner({ privacyPolicyHref = DEFAULT_PRIVACY_POLICY_HREF, }) {
+    const t = useT();
+    const open = useSyncExternalStore(subscribeConsent, shouldShowConsentBanner, () => false);
+    const [managing, setManaging] = useState(false);
+    const [performance, setPerformance] = useState(false);
+    const [targeting, setTargeting] = useState(false);
+    useEffect(() => {
+        void resolveConsentRegion();
+    }, []);
+    useEffect(() => {
+        if (!open)
+            return;
+        const stored = getConsentChoice();
+        setPerformance(stored?.performance ?? false);
+        setTargeting(stored?.targeting ?? false);
+        setManaging(false);
+    }, [open]);
+    if (!open)
+        return null;
+    return (_jsxs("section", { role: "region", "aria-label": t("consentBanner.label"), "data-agent-native-consent-banner": true, className: "fixed bottom-4 left-4 z-[100] flex w-[min(420px,calc(100vw-2rem))] flex-col gap-3 rounded-lg border bg-popover p-4 text-sm text-popover-foreground shadow-lg", children: [_jsxs("p", { className: "m-0 leading-relaxed", children: [t("consentBanner.message"), " ", _jsx("a", { href: privacyPolicyHref, target: "_blank", rel: "noreferrer", className: "underline underline-offset-2", children: t("consentBanner.privacyPolicy") })] }), managing ? (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx(Label, { htmlFor: "an-consent-necessary", children: t("consentBanner.necessary") }), _jsx(Switch, { id: "an-consent-necessary", checked: true, disabled: true })] }), _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx(Label, { htmlFor: "an-consent-performance", children: t("consentBanner.performance") }), _jsx(Switch, { id: "an-consent-performance", checked: performance, onCheckedChange: setPerformance })] }), _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsx(Label, { htmlFor: "an-consent-targeting", children: t("consentBanner.targeting") }), _jsx(Switch, { id: "an-consent-targeting", checked: targeting, onCheckedChange: setTargeting })] })] })) : null, _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", className: "flex-1", onClick: () => setConsentChoice({ performance: false, targeting: false }), children: t("consentBanner.rejectAll") }), _jsx(Button, { variant: "outline", size: "sm", className: "flex-1", onClick: () => setConsentChoice({ performance: true, targeting: true }), children: t("consentBanner.acceptAll") }), managing ? (_jsx(Button, { variant: "outline", size: "sm", className: "flex-1", onClick: () => setConsentChoice({ performance, targeting }), children: t("consentBanner.save") })) : (_jsx(Button, { variant: "ghost", size: "sm", className: "flex-1", onClick: () => setManaging(true), children: t("consentBanner.manage") }))] })] }));
+}
+//# sourceMappingURL=ConsentBanner.js.map

package/dist/app/shared/ConsentBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConsentBanner.js","sourceRoot":"","sources":["../../../src/app/shared/ConsentBanner.tsx"],"names":[],"mappings":"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"}

package/dist/ui/sonner.d.ts

@@ -1,5 +1,5 @@
-import { Toaster as Sonner } from "sonner";
+import { toast as sonnerToast, Toaster as Sonner } from "sonner";
 type ToasterProps = React.ComponentProps<typeof Sonner>;
 declare const Toaster: ({ className, toastOptions, ...props }: ToasterProps) => import("react").JSX.Element;
-export { Toaster };
+export { Toaster, sonnerToast };
 //# sourceMappingURL=sonner.d.ts.map

package/dist/ui/sonner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sonner.d.ts","sourceRoot":"","sources":["../../src/ui/sonner.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,QAAQ,CAAC;AAI3C,KAAK,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;AASxD,QAAA,MAAM,OAAO,0CAA2C,YAAY,gCAyCnE,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"sonner.d.ts","sourceRoot":"","sources":["../../src/ui/sonner.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,QAAQ,CAAC;AAIjE,KAAK,YAAY,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC;AASxD,QAAA,MAAM,OAAO,0CAA2C,YAAY,gCAyCnE,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/ui/sonner.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useTheme } from "next-themes";
-import { Toaster as Sonner } from "sonner";
+import { toast as sonnerToast, Toaster as Sonner } from "sonner";
 import { cn } from "../utils.js";
 const toastWidthClasses = "group-[.toaster]:!w-[var(--width)] group-[.toaster]:!min-w-[min(20rem,calc(100vw_-_2rem))] group-[.toaster]:!max-w-[var(--width)] group-[.toaster]:!gap-3 group-[.toaster]:!break-normal";
 const toastContentClasses = "group-[.toast]:!min-w-0 group-[.toast]:!flex-1 group-[.toast]:!basis-auto group-[.toast]:break-words";
@@ -21,5 +21,5 @@ const Toaster = ({ className, toastOptions, ...props }) => {
             },
         }, ...props }));
 };
-export { Toaster };
+export { Toaster, sonnerToast };
 //# sourceMappingURL=sonner.js.map

package/dist/ui/sonner.js.map

@@ -1 +1 @@
-{"version":3,"file":"sonner.js","sourceRoot":"","sources":["../../src/ui/sonner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,QAAQ,CAAC;AAE3C,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAIjC,MAAM,iBAAiB,GACrB,0LAA0L,CAAC;AAC7L,MAAM,mBAAmB,GACvB,sGAAsG,CAAC;AACzG,MAAM,kBAAkB,GACtB,4DAA4D,CAAC;AAE/D,MAAM,OAAO,GAAG,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,KAAK,EAAgB,EAAE,EAAE;IACtE,MAAM,EAAE,KAAK,GAAG,QAAQ,EAAE,GAAG,QAAQ,EAAE,CAAC;IACxC,MAAM,UAAU,GAAG,YAAY,EAAE,UAAU,CAAC;IAE5C,OAAO,CACL,KAAC,MAAM,IACL,KAAK,EAAE,KAA8B,EACrC,SAAS,EAAE,EAAE,CACX,uDAAuD,EACvD,SAAS,CACV,EACD,YAAY,EAAE;YACZ,GAAG,YAAY;YACf,UAAU,EAAE;gBACV,GAAG,UAAU;gBACb,KAAK,EAAE,EAAE,CACP,iBAAiB,EACjB,uIAAuI,EACvI,UAAU,EAAE,KAAK,CAClB;gBACD,KAAK,EAAE,EAAE,CAAC,4BAA4B,EAAE,UAAU,EAAE,KAAK,CAAC;gBAC1D,WAAW,EAAE,EAAE,CACb,iEAAiE,EACjE,UAAU,EAAE,WAAW,CACxB;gBACD,OAAO,EAAE,EAAE,CAAC,mBAAmB,EAAE,UAAU,EAAE,OAAO,CAAC;gBACrD,YAAY,EAAE,EAAE,CACd,kBAAkB,EAClB,kEAAkE,EAClE,UAAU,EAAE,YAAY,CACzB;gBACD,YAAY,EAAE,EAAE,CACd,kBAAkB,EAClB,8DAA8D,EAC9D,UAAU,EAAE,YAAY,CACzB;aACF;SACF,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,CAAC"}
+{"version":3,"file":"sonner.js","sourceRoot":"","sources":["../../src/ui/sonner.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,KAAK,IAAI,WAAW,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEjE,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAIjC,MAAM,iBAAiB,GACrB,0LAA0L,CAAC;AAC7L,MAAM,mBAAmB,GACvB,sGAAsG,CAAC;AACzG,MAAM,kBAAkB,GACtB,4DAA4D,CAAC;AAE/D,MAAM,OAAO,GAAG,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,KAAK,EAAgB,EAAE,EAAE;IACtE,MAAM,EAAE,KAAK,GAAG,QAAQ,EAAE,GAAG,QAAQ,EAAE,CAAC;IACxC,MAAM,UAAU,GAAG,YAAY,EAAE,UAAU,CAAC;IAE5C,OAAO,CACL,KAAC,MAAM,IACL,KAAK,EAAE,KAA8B,EACrC,SAAS,EAAE,EAAE,CACX,uDAAuD,EACvD,SAAS,CACV,EACD,YAAY,EAAE;YACZ,GAAG,YAAY;YACf,UAAU,EAAE;gBACV,GAAG,UAAU;gBACb,KAAK,EAAE,EAAE,CACP,iBAAiB,EACjB,uIAAuI,EACvI,UAAU,EAAE,KAAK,CAClB;gBACD,KAAK,EAAE,EAAE,CAAC,4BAA4B,EAAE,UAAU,EAAE,KAAK,CAAC;gBAC1D,WAAW,EAAE,EAAE,CACb,iEAAiE,EACjE,UAAU,EAAE,WAAW,CACxB;gBACD,OAAO,EAAE,EAAE,CAAC,mBAAmB,EAAE,UAAU,EAAE,OAAO,CAAC;gBACrD,YAAY,EAAE,EAAE,CACd,kBAAkB,EAClB,kEAAkE,EAClE,UAAU,EAAE,YAAY,CACzB;gBACD,YAAY,EAAE,EAAE,CACd,kBAAkB,EAClB,8DAA8D,EAC9D,UAAU,EAAE,YAAY,CACzB;aACF;SACF,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/toolkit",
-  "version": "0.216.0",
+  "version": "0.217.0",
   "description": "Reusable app-building UI and helpers for Agent-Native apps.",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {
@@ -678,7 +678,7 @@
     "y-protocols": "^1.0.7",
     "yjs": "^13.6.33",
     "zod": "^4.3.6",
-    "@agent-native/agentkit": "^0.216.0"
+    "@agent-native/agentkit": "^0.217.0"
   },
   "devDependencies": {
     "@excalidraw/excalidraw": "0.18.1",
@@ -702,7 +702,7 @@
     "typescript-7": "npm:typescript@^7.0.2",
     "vite": "8.1.0",
     "vitest": "^4.1.5",
-    "@agent-native/core": "^0.216.0"
+    "@agent-native/core": "^0.217.0"
   },
   "peerDependencies": {
     "@agent-native/core": ">=0.205.1",

package/src/app/auth/AuthPage.interaction.spec.tsx

@@ -247,6 +247,80 @@ describe("AuthPage interactions", () => {
     }
   });
 
+  it("stores no visitor id on the sign-in page before analytics consent", async () => {
+    const originalHref = window.location.href;
+    const sendBeacon = vi.fn(() => true);
+    Object.defineProperty(navigator, "sendBeacon", {
+      value: sendBeacon,
+      configurable: true,
+    });
+    window.happyDOM.setURL("https://clips.agent-native.com/signup");
+    // Earlier renders in this file already settled the region.
+    Reflect.deleteProperty(
+      globalThis,
+      Symbol.for("agent-native.client.consent"),
+    );
+    window.localStorage.removeItem("agent-native.anonymous_id");
+    document.cookie = "an_aid=; path=/; max-age=0";
+    window.sessionStorage.setItem("an_consent_region", "consent");
+    (
+      window as Window & { __AGENT_NATIVE_CONFIG__?: Record<string, string> }
+    ).__AGENT_NATIVE_CONFIG__ = {
+      agentNativeAnalyticsPublicKey: "anpk_test",
+      agentNativeAnalyticsEndpoint: "https://analytics.agent-native.com/track",
+    };
+
+    try {
+      await act(async () => {
+        root.render(
+          <AuthPage
+            {...propsFromHtml(
+              getOnboardingHtml({
+                requestHost: "clips.agent-native.com",
+                requestPath: "/signup",
+              }),
+            )}
+            initialView="signup"
+          />,
+        );
+        await Promise.resolve();
+      });
+
+      const email = container.querySelector<HTMLInputElement>("#s-email");
+      await act(async () => {
+        Object.getOwnPropertyDescriptor(
+          HTMLInputElement.prototype,
+          "value",
+        )!.set!.call(email, "person@example.com");
+        email!.dispatchEvent(new Event("input", { bubbles: true }));
+      });
+
+      expect(sendBeacon).toHaveBeenCalled();
+      for (const [, body] of sendBeacon.mock.calls as unknown as [
+        string,
+        string,
+      ][]) {
+        const sent = JSON.parse(body);
+        expect(sent.anonymousId).toBeUndefined();
+        expect(sent.properties.analytics_consent).toBe("withheld");
+      }
+      expect(window.localStorage.getItem("agent-native.anonymous_id")).toBe(
+        null,
+      );
+      expect(document.cookie).not.toMatch(/an_aid=[^;]/);
+    } finally {
+      delete (window as Window & { __AGENT_NATIVE_CONFIG__?: unknown })
+        .__AGENT_NATIVE_CONFIG__;
+      window.sessionStorage.removeItem("an_consent_region");
+      Reflect.deleteProperty(
+        globalThis,
+        Symbol.for("agent-native.client.consent"),
+      );
+      Reflect.deleteProperty(navigator, "sendBeacon");
+      window.happyDOM.setURL(originalHref);
+    }
+  });
+
   it("sends a beta app's sign-up events to beta Analytics", async () => {
     const originalHref = window.location.href;
     const sendBeacon = vi.fn(() => true);

package/src/app/auth/AuthPage.tsx

@@ -2,6 +2,7 @@
 
 import {
   captureAttribution,
+  getAnalyticsAnonymousId,
   getAnalyticsSessionId,
 } from "@agent-native/core/client/analytics";
 import { frameworkRoutePrefix } from "@agent-native/core/client/api-path";
@@ -12,6 +13,7 @@ import {
   normalizeOAuthReturnPath,
   shouldRetryAuthSessionProbe,
 } from "@agent-native/core/client/auth/auth-page-helpers";
+import { whenConsentDecided } from "@agent-native/core/client/consent";
 import { openOAuthPopup } from "@agent-native/core/client/oauth-popup";
 import { navigateForSession } from "@agent-native/core/client/use-session";
 import { normalizeLocaleCode } from "@agent-native/core/localization/shared";
@@ -65,7 +67,6 @@ type AuthRequestResult = {
 const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
 const TAB_STORAGE_KEY = "an.onboarding.tab";
 const PENDING_SIGNUP_EMAIL_STORAGE_KEY = "an.onboarding.pendingSignupEmail";
-const ANALYTICS_ANONYMOUS_ID_KEY = "agent-native.anonymous_id";
 const GOOGLE_AUTH_URL_PATH = "/_agent-native/google/auth-url";
 const BUILDER_DESKTOP_RETURN_ORIGIN = "http://127.0.0.1:8080";
 const useIsomorphicLayoutEffect =
@@ -261,15 +262,6 @@ async function requestJson(
   return { response, data, readable };
 }
 
-function generateAnonymousId(): string {
-  try {
-    if (typeof crypto.randomUUID === "function") return crypto.randomUUID();
-  } catch {
-    // coercion-ok: the browser fallback remains usable when crypto is unavailable.
-  }
-  return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
-}
-
 function trackAuth(
   app: string,
   name: string,
@@ -298,9 +290,8 @@ function trackAuth(
       }
     ).__AGENT_NATIVE_CONFIG__;
     if (!config?.agentNativeAnalyticsPublicKey) return;
-    const anonymousId = readStorage(ANALYTICS_ANONYMOUS_ID_KEY);
-    if (!anonymousId) return;
     const sessionId = getAnalyticsSessionId();
+    const timestamp = new Date().toISOString();
     const endpoint = resolveLaneEndpoint(
       config.agentNativeAnalyticsEndpoint ??
         "https://analytics.agent-native.com/track",
@@ -313,23 +304,33 @@ function trackAuth(
     }> = [{ name, properties: legacyProperties }];
     const canonical = canonicalTrackingEvent(name, legacyProperties);
     if (canonical) events.push(canonical);
-    for (const event of events) {
-      const body = JSON.stringify({
-        publicKey: config.agentNativeAnalyticsPublicKey,
-        event: event.name,
-        properties: event.properties,
-        anonymousId,
-        sessionId,
-        timestamp: new Date().toISOString(),
-      });
-      if (navigator.sendBeacon?.(endpoint, body)) continue;
-      void fetch(endpoint, {
-        method: "POST",
-        body,
-        keepalive: true,
-        headers: { "Content-Type": "text/plain;charset=UTF-8" },
-      }).catch(() => undefined);
-    }
+    const publicKey = config.agentNativeAnalyticsPublicKey;
+    // The visitor id waits for analytics consent, as in the app bundle.
+    whenConsentDecided((decided) => {
+      const anonymousId = decided ? getAnalyticsAnonymousId() : undefined;
+      for (const event of events) {
+        const body = JSON.stringify({
+          publicKey,
+          event: event.name,
+          properties: anonymousId
+            ? event.properties
+            : {
+                ...event.properties,
+                analytics_consent: decided ? "withheld" : "unknown",
+              },
+          anonymousId,
+          sessionId,
+          timestamp,
+        });
+        if (navigator.sendBeacon?.(endpoint, body)) continue;
+        void fetch(endpoint, {
+          method: "POST",
+          body,
+          keepalive: true,
+          headers: { "Content-Type": "text/plain;charset=UTF-8" },
+        }).catch(() => undefined);
+      }
+    });
   } catch {
     // coercion-ok: analytics is best effort and cannot block authentication.
   }
@@ -1036,16 +1037,8 @@ export function AuthPage(props: AuthPageProps) {
   }, [apiPath, redirectToSignedInApp, runtimeBasePathResolved, view]);
 
   React.useEffect(() => {
-    let anonymousId = readStorage(ANALYTICS_ANONYMOUS_ID_KEY);
-    if (!/^[A-Za-z0-9_-]{1,128}$/.test(anonymousId)) {
-      anonymousId = generateAnonymousId();
-      writeStorage(ANALYTICS_ANONYMOUS_ID_KEY, anonymousId);
-    }
-    try {
-      document.cookie = `an_aid=${encodeURIComponent(anonymousId)}; path=/; max-age=2592000; SameSite=Lax`;
-    } catch {
-      // coercion-ok: attribution cookies are optional for authentication.
-    }
+    // Stores `an_aid` only with analytics consent, and asks for the region.
+    getAnalyticsAnonymousId();
     // Capture is once per page load, so it must wait for a workspace's
     // inferred base path or `landing_path` falls back to the wrong home.
     if (runtimeBasePathResolved) {

package/src/app/onboarding/GettingStartedCard.tsx

@@ -0,0 +1,203 @@
+import { useOnboardingChecklist } from "@agent-native/core/client/onboarding/use-onboarding-checklist";
+import { IconCheck, IconChevronDown, IconChevronUp } from "@tabler/icons-react";
+import type { ComponentType, ReactNode } from "react";
+
+import { Button } from "../../ui/button.js";
+import { Progress } from "../../ui/progress.js";
+import { Skeleton } from "../../ui/skeleton.js";
+import { cn } from "../../utils.js";
+
+export interface GettingStartedLabels {
+  title: string;
+  progress: (completeCount: number, totalCount: number) => string;
+  /** Read by screen readers on a finished row; the check mark is decorative. */
+  completed: string;
+  collapse: string;
+  expand: string;
+  loadError: string;
+  retry: string;
+}
+
+export interface GettingStartedLinkProps {
+  to: string;
+  className?: string;
+  children: ReactNode;
+}
+
+function NativeLink({ to, className, children }: GettingStartedLinkProps) {
+  return (
+    <a href={to} className={className}>
+      {children}
+    </a>
+  );
+}
+
+export interface GettingStartedCardProps {
+  /** Name the steps were registered under with `registerOnboardingStep({ checklist })`. */
+  checklist: string;
+  labels: GettingStartedLabels;
+  /** Localized row titles by step id; a step without one shows its registered title. */
+  stepTitles?: Record<string, string>;
+  /** Router link for in-app rows so a click keeps the SPA and Cmd/Ctrl-click opens a tab. */
+  LinkComponent?: ComponentType<GettingStartedLinkProps>;
+  /** Number of rows to reserve while the first answer loads. */
+  expectedSteps?: number;
+  className?: string;
+}
+
+/**
+ * Progress checklist pinned to the app sidebar. Each app registers its own
+ * steps on the onboarding registry; the card only renders what the server
+ * derived. It renders nothing once every step is done.
+ */
+export function GettingStartedCard({
+  checklist,
+  labels,
+  stepTitles,
+  LinkComponent = NativeLink,
+  expectedSteps = 6,
+  className,
+}: GettingStartedCardProps) {
+  const {
+    steps,
+    completeCount,
+    totalCount,
+    dismissed,
+    collapsed,
+    status,
+    refresh,
+    setCollapsed,
+  } = useOnboardingChecklist(checklist);
+
+  const frame = cn(
+    "overflow-hidden rounded-[14px] border border-border bg-card text-card-foreground shadow-sm",
+    className,
+  );
+
+  if (status === "loading") {
+    return (
+      <div className={frame} aria-hidden>
+        <div className="space-y-3 px-4 py-3">
+          <Skeleton className="h-5 w-32" />
+          <Skeleton className="h-1.5 w-full rounded-full" />
+        </div>
+        <div className="border-t border-border">
+          {Array.from({ length: expectedSteps }, (_, index) => (
+            <div key={index} className="flex min-h-12 items-center gap-3 px-4">
+              <Skeleton className="size-4 rounded-full" />
+              <Skeleton className="h-3.5 w-28" />
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (status === "error") {
+    return (
+      <div
+        role="alert"
+        className={cn(
+          frame,
+          "flex items-center justify-between gap-2 px-4 py-3",
+        )}
+      >
+        <span className="text-[13px] text-muted-foreground">
+          {labels.loadError}
+        </span>
+        <Button
+          type="button"
+          variant="outline"
+          size="xs"
+          onClick={() => void refresh()}
+        >
+          {labels.retry}
+        </Button>
+      </div>
+    );
+  }
+
+  if (dismissed || totalCount === 0 || completeCount === totalCount) {
+    return null;
+  }
+
+  const progressText = labels.progress(completeCount, totalCount);
+  const ToggleIcon = collapsed ? IconChevronUp : IconChevronDown;
+
+  return (
+    <section className={frame} aria-label={labels.title}>
+      <div className="space-y-3 px-4 py-3">
+        <div className="flex items-center justify-between gap-2">
+          <h2 className="text-base font-semibold leading-5">{labels.title}</h2>
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="size-6"
+            aria-label={collapsed ? labels.expand : labels.collapse}
+            aria-expanded={!collapsed}
+            onClick={() => void setCollapsed(!collapsed)}
+          >
+            <ToggleIcon className="size-4" />
+          </Button>
+        </div>
+        <Progress
+          value={(completeCount / totalCount) * 100}
+          className="h-1.5 bg-muted"
+          aria-label={progressText}
+        />
+      </div>
+      {collapsed ? null : (
+        <ul className="border-t border-border">
+          {steps.map((step) => {
+            const rowClass =
+              "flex min-h-12 items-center gap-3 px-4 text-[13px]";
+            const content = (
+              <>
+                <span
+                  aria-hidden
+                  className={cn(
+                    "flex size-4 shrink-0 items-center justify-center rounded-full border",
+                    step.complete
+                      ? "border-primary bg-primary text-primary-foreground"
+                      : "border-muted-foreground/60",
+                  )}
+                >
+                  {step.complete ? <IconCheck className="size-3" /> : null}
+                </span>
+                <span
+                  className={cn(
+                    "min-w-0 flex-1 truncate",
+                    step.complete && "text-muted-foreground",
+                  )}
+                >
+                  {stepTitles?.[step.id] ?? step.title}
+                </span>
+                {step.complete ? (
+                  <span className="sr-only">{labels.completed}</span>
+                ) : null}
+              </>
+            );
+            return (
+              <li key={step.id}>
+                {step.href ? (
+                  <LinkComponent
+                    to={step.href}
+                    className={cn(
+                      rowClass,
+                      "hover:bg-accent/60 focus-visible:bg-accent/60 focus-visible:outline-none",
+                    )}
+                  >
+                    {content}
+                  </LinkComponent>
+                ) : (
+                  <div className={rowClass}>{content}</div>
+                )}
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </section>
+  );
+}

package/src/app/onboarding/index.ts

@@ -1,4 +1,5 @@
 export * from "./FirstRunOnboarding.js";
+export * from "./GettingStartedCard.js";
 export * from "./NewWorkspaceAppFlow.js";
 export * from "./OnboardingBanner.js";
 export * from "./OnboardingPanel.js";

package/src/app/providers/AppProviders.tsx

@@ -39,6 +39,7 @@ import {
   type AppShellSkeletonLayout,
 } from "../shared/AppShellSkeleton.js";
 import { ClientOnly } from "../shared/ClientOnly.js";
+import { ConsentBanner } from "../shared/ConsentBanner.js";
 import { EnvironmentBadge } from "../shared/EnvironmentBadge.js";
 import { RouteTransitionIndicator } from "../shared/RouteTransitionIndicator.js";
 import { RuntimeConfigNotice } from "../shared/RuntimeConfigNotice.js";
@@ -436,12 +437,17 @@ function ProvidersInner({
   settingsShortcut: boolean;
   children: React.ReactNode;
 }) {
+  // The banner reads the app's locale, so it sits inside the same provider.
   const localizedChildren =
     i18n === false ? (
-      children
+      <>
+        {children}
+        {ownsDocument ? <ConsentBanner /> : null}
+      </>
     ) : (
       <AgentNativeI18nProvider {...(i18n ?? {})}>
         {children}
+        {ownsDocument ? <ConsentBanner /> : null}
       </AgentNativeI18nProvider>
     );
 

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

@@ -148,6 +148,7 @@ vi.mock("@agent-native/core/client/i18n", () => ({
       "settings.privacyDeletionDescription":
         "This records a deletion request; it does not delete data immediately. An administrator will verify your identity and complete the request under the deployment's retention and legal obligations.",
       "settings.privacyDocsLink": "Read privacy and data rights",
+      "consentBanner.cookieSettings": "Cookie settings",
       "common.cancel": "Cancel",
       "agentChat.auth.logOut": "Log out",
     }[key] ??
@@ -155,6 +156,11 @@ vi.mock("@agent-native/core/client/i18n", () => ({
     key,
 }));
 
+const openConsentSettingsMock = vi.hoisted(() => vi.fn());
+vi.mock("@agent-native/core/client/consent", () => ({
+  openConsentSettings: openConsentSettingsMock,
+}));
+
 vi.mock("./SchedulingTimezoneField.js", () => ({
   SchedulingTimezoneField: () => <div data-testid="timezone" />,
 }));
@@ -454,4 +460,29 @@ describe("AccountSettingsForm name editing", () => {
       requestType: "deletion",
     });
   });
+
+  it("reopens the cookie banner from Privacy & data", async () => {
+    await act(async () => {
+      root.render(
+        <TooltipProvider>
+          <AccountSettingsForm />
+        </TooltipProvider>,
+      );
+    });
+    act(() => {
+      Array.from(
+        container.querySelectorAll<HTMLButtonElement>("#privacy-data button"),
+      )
+        .find((button) => button.textContent?.trim() === "Manage")
+        ?.click();
+    });
+
+    act(() => {
+      Array.from(document.querySelectorAll<HTMLButtonElement>("button"))
+        .find((button) => button.textContent?.trim() === "Cookie settings")
+        ?.click();
+    });
+
+    expect(openConsentSettingsMock).toHaveBeenCalledTimes(1);
+  });
 });

package/src/app/settings/AccountSettingsCard.tsx

@@ -1,3 +1,4 @@
+import { openConsentSettings } from "@agent-native/core/client/consent";
 import {
   useActionMutation,
   useActionQuery,
@@ -579,6 +580,13 @@ function PrivacySettings() {
                   {t("settings.privacyRequestError")}
                 </p>
               )}
+              <button
+                type="button"
+                onClick={openConsentSettings}
+                className="block text-xs font-medium text-muted-foreground underline-offset-4 hover:text-foreground hover:underline"
+              >
+                {t("consentBanner.cookieSettings")}
+              </button>
               <a
                 href={docsUrl("privacy-and-data-rights")}
                 target="_blank"

package/src/app/settings/index.ts

@@ -73,6 +73,7 @@ export {
   type SettingsGroupProps,
   type SettingsRowProps,
 } from "./SettingsRow.js";
+export { ThemeFamilySettings } from "./account/ThemeFamilySettings.js";
 export {
   SettingsSection,
   SettingsSurfaceProvider,