@agent-native/toolkit 0.201.1-nightly-20261005213104 → 0.201.1

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"
+    />
+  );
+}

package/src/app/settings/deferred-builder-connect-popover.tsx

@@ -1,3 +1,5 @@
+import { useT } from "@agent-native/core/client/i18n";
+import { Button } from "@agent-native/toolkit/ui/button";
 import { cloneElement, lazy, Suspense } from "react";
 
 import { LazyChunkErrorBoundary } from "../shared/LazyChunkErrorBoundary.js";
@@ -15,6 +17,50 @@ export { LazyChunkRetryFallback } from "../shared/LazyChunkRetryFallback.js";
 export function DeferredBuilderConnectPopover(
   props: BuilderConnectPopoverProps,
 ) {
+  const t = useT();
+  if (
+    props.flow.statusResolved === true &&
+    props.flow.agentNativeProvisioningEnabled !== true
+  ) {
+    // Keep OAuth in the trusted click and avoid loading popover UI for sign-in-only flows.
+    const trigger = cloneElement(props.children, {
+      "aria-busy": undefined,
+      onClick: (event) => {
+        if (props.flow.connecting) {
+          event.preventDefault();
+          event.stopPropagation();
+          return;
+        }
+        props.children.props.onClick?.(event);
+        props.onTriggerClick?.(event);
+        if (event.defaultPrevented) return;
+        if (props.onConnect) props.onConnect(false);
+        else props.flow.start({ provisionAccount: false });
+      },
+    });
+    const cancelAction =
+      props.flow.connecting && props.flow.cancel ? (
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="shrink-0"
+          onClick={props.flow.cancel}
+        >
+          {t("common.cancel")}
+        </Button>
+      ) : null;
+
+    return cancelAction ? (
+      <span className="inline-flex max-w-full items-center gap-2">
+        <span className="contents">{trigger}</span>
+        {cancelAction}
+      </span>
+    ) : (
+      <span className="contents">{trigger}</span>
+    );
+  }
+
   return (
     <LazyChunkErrorBoundary fallback={<LazyChunkRetryFallback />}>
       <Suspense

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

@@ -85,14 +85,11 @@ vi.mock("@agent-native/core/client/oauth-popup", () => ({
 }));
 
 vi.mock("../deferred-builder-connect-popover.js", () => ({
-  // The real popover asks whether to create an account, then calls onConnect.
   DeferredBuilderConnectPopover: ({
     children,
-    onConnect,
   }: {
     children: React.ReactElement<{ onClick?: () => void }>;
-    onConnect?: (provisionAccount: boolean) => void;
-  }) => React.cloneElement(children, { onClick: () => onConnect?.(false) }),
+  }) => React.cloneElement(children, { onClick: () => {} }),
 }));
 
 vi.mock("../shell/context.js", () => ({
@@ -388,15 +385,9 @@ describe("ModelSettingsPage", () => {
     expect(buttons(row("provider-personal-builder"))).toEqual([
       "Use Builder.io",
     ]);
-    act(() => {
-      (
-        row("provider-personal-builder").querySelector("button") as HTMLElement
-      ).click();
-    });
-    expect(state.builder.start).toHaveBeenCalledWith({
-      provisionAccount: false,
-      scope: "personal",
-    });
+    expect(
+      row("provider-personal-builder").querySelector("button")?.disabled,
+    ).toBe(false);
     expect(row("provider-personal-anthropic").textContent).toContain(
       "••••1234 · 2 models",
     );
@@ -669,17 +660,10 @@ describe("ModelSettingsPage", () => {
     expect(
       document.querySelector('[data-testid="provider-dialog"]'),
     ).not.toBeNull();
-    act(() => {
-      (
-        [...empty.querySelectorAll("button")].find(
-          (button) => button.textContent === "Use Builder.io",
-        ) as HTMLElement
-      ).click();
-    });
-    expect(state.builder.start).toHaveBeenCalledWith({
-      provisionAccount: false,
-      scope: "org",
-    });
+    const builderButton = [...empty.querySelectorAll("button")].find(
+      (button) => button.textContent === "Use Builder.io",
+    );
+    expect(builderButton?.disabled).toBe(false);
   });
 
   it("tells a restricted member with no provider to ask an admin", async () => {

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

@@ -265,6 +265,11 @@ describe("useBuilderStatus", () => {
 
     expect(fetchMock).toHaveBeenCalledWith(
       "/_agent-native/connection-status/builder",
+      expect.objectContaining({
+        headers: {
+          "x-agent-native-preview-origin": "http://localhost:3000",
+        },
+      }),
     );
   });
 

package/src/app/settings/useBuilderStatus.ts

@@ -127,6 +127,11 @@ export function useBuilderStatus({
     try {
       const res = await fetch(
         agentNativePath("/_agent-native/connection-status/builder"),
+        {
+          headers: {
+            "x-agent-native-preview-origin": window.location.origin,
+          },
+        },
       );
       if (!res.ok) {
         keepLastGoodStatus(`Builder status unavailable (${res.status})`);
@@ -926,6 +931,9 @@ export function useBuilderConnectFlow(
           );
         }
         const r = await fetch(statusUrl.href, {
+          headers: {
+            "x-agent-native-preview-origin": window.location.origin,
+          },
           signal: signal ?? ownController?.signal,
         });
         if (!r.ok) return null;

package/src/app/styles/agent-native.spec.ts

@@ -261,34 +261,31 @@ describe("agent-native shell surface tokens", () => {
       /\.agent-sidebar-panel\[data-agent-sidebar-animation="drawer"\][\s\S]*?box-shadow: var\(--agent-kit-drawer-elevation\);/s,
     );
     expect(tokens).toMatch(
-      /\.dark\s*\{[\s\S]*?--agent-kit-shadow-color: var\(--background\);[\s\S]*?--agent-kit-drawer-elevation:/s,
+      /:is\(\.dark, :root\[data-theme="dark"\]:not\(\.light\)\)\s*\{[\s\S]*?--agent-kit-shadow-color: var\(--background\);[\s\S]*?--agent-kit-drawer-elevation:/s,
     );
     expect(css).not.toContain("hsl(var(--foreground) / 0.07)");
     expect(css).not.toContain("hsl(var(--foreground) / 0.12)");
     expect(css).not.toContain("hsl(var(--agent-shadow)");
     expect(tokens).toContain("--agent-kit-shadow-color: var(--foreground);");
     expect(tokens).toMatch(
-      /\.dark\s*\{[\s\S]*?--agent-kit-shadow-color: var\(--background\);[\s\S]*?--agent-kit-composer-elevation:[\s\S]*?hsl\(var\(--agent-kit-shadow-color\) \/ 0\.22\)/s,
+      /:is\(\.dark, :root\[data-theme="dark"\]:not\(\.light\)\)\s*\{[\s\S]*?--agent-kit-shadow-color: var\(--background\);[\s\S]*?--agent-kit-composer-elevation:[\s\S]*?hsl\(var\(--agent-kit-shadow-color\) \/ 0\.22\)/s,
     );
     expect(css).toMatch(
       /::view-transition-old\(agent-native-sidebar-drawer\),\s*::view-transition-new\(agent-native-sidebar-drawer\)[\s\S]*?height: 100%;/s,
     );
   });
 
-  it("gives the light composer a quiet boundary without a dark-mode highlight", () => {
+  it("gives the composer a quiet boundary in both themes", () => {
     const tokens = readFileSync(
       new URL("./tokens/agent-kit.css", import.meta.url),
       { encoding: "utf8" },
     );
 
     expect(tokens).toMatch(
-      /:root\s*\{[\s\S]*?--agent-kit-composer-border-opacity: 0\.82;[\s\S]*?--agent-kit-composer-focus-border-opacity: 1;/s,
+      /:root\s*\{[\s\S]*?--agent-kit-composer-border-mix: 82%;[\s\S]*?--agent-kit-composer-focus-border-mix: 100%;[\s\S]*?--agent-kit-composer-border-color: color-mix\([\s\S]*?--agent-kit-composer-focus-border-color: color-mix\(/s,
     );
     expect(tokens).toMatch(
-      /\.dark\s*\{[\s\S]*?--agent-kit-composer-border-opacity: 0;[\s\S]*?--agent-kit-composer-focus-border-opacity: 0;/s,
-    );
-    expect(tokens).toMatch(
-      /\.dark\s*\{[\s\S]*?--agent-kit-composer-border-color: transparent;[\s\S]*?--agent-kit-composer-focus-border-color: transparent;/s,
+      /:is\(\.dark, :root\[data-theme="dark"\]:not\(\.light\)\)\s*\{[\s\S]*?--agent-kit-composer-border-mix: 40%;[\s\S]*?--agent-kit-composer-focus-border-mix: 65%;[\s\S]*?--agent-kit-composer-border-color: color-mix\([\s\S]*?--agent-kit-composer-focus-border-color: color-mix\(/s,
     );
   });