create-ailk 0.24.0 → 0.26.0

package/templates/apps/web/app/[locale]/(auth)/sign-up/sign-up-card.tsx

@@ -1,4 +1,4 @@
-"use client"; // Better Auth's client calls (signUp.email / signIn.social) + error state
+"use client"; // Better Auth's client calls (signUp.email / signIn.social / $fetch) + error state
 
 /**
  * SignUpCard — the /sign-up page's client island (#5963).
@@ -13,7 +13,10 @@
  * documented posture the sign-in island already carries for its password
  * path. The page only renders this island at all when `isSignUpOpen()`.
  *
- * The brand mark is the shell's: no `logo` is passed, or it would render twice.
+ * The one card (#9662): the page hands in the site's mark (`logo`), the
+ * "Already have an account? Sign in" line (`prospect`, in place of AuthCard's
+ * footer cross-link) and the Terms + Privacy acknowledgement (`footnote`).
+ * The heading stands alone — no subhead unless the card is inert.
  *
  * Error surface: `AuthCard`'s `errors` prop is per-field, so a failed provider
  * launch lands on `errors.email` (the social row sits inside the password form
@@ -37,6 +40,14 @@
  * `additionalData`, which Better Auth keeps in the OAuth state for the
  * callback. The server writes the grants with the user
  * (`lib/sign-up-agreements.ts`); no cookie carries them.
+ *
+ * #9667 D6 — the magic-link method. With the email sign-in link on, the card
+ * is AuthCard's one-field "Send me a magic link" body, gated the same way.
+ * The request goes through the shared client's `$fetch`, never the
+ * `magicLinkClient()` plugin (for the reason `sign-in-card.tsx` records), with
+ * the agreements and locale in its `metadata` — which is what makes it a
+ * sign-up request. The server binds them to the token and creates the account
+ * on verify. The sent state never says whether the address had an account.
  */
 
 import {
@@ -47,7 +58,13 @@ import {
 } from "@working-theory/ui/blocks";
 import { Alert, AlertDescription } from "@working-theory/ui/primitives";
 import { SIGN_UP_AGREEMENTS_FIELD } from "@working-theory/validation";
-import { useState, type MouseEvent, type ReactElement, type ReactNode } from "react";
+import {
+  useRef,
+  useState,
+  type MouseEvent,
+  type ReactElement,
+  type ReactNode,
+} from "react";
 
 import { authClient, useAuthCardFlow } from "../use-auth-card-flow";
 
@@ -62,17 +79,35 @@ export interface SignUpAgreement {
   statement: string;
 }
 
+/** Translated copy for the magic-link sign-up (#9667 D6). */
+export interface SignUpLinkLabels {
+  sentHeading: string;
+  sentSubhead: string;
+  sentBody: string;
+  /** The sent state's "Back to sign up" link. */
+  back: string;
+  /** Any failed request other than a rate limit or the agreements. */
+  failed: string;
+  /** A 429 from Better Auth's per-IP limit. */
+  rateLimited: string;
+}
+
 export interface SignUpCardProps {
   /** The site's mark, centred in the card at 48px (#8790 D3). */
   logo?: ReactNode;
   /** Active OAuth providers, exactly as auth-env reports them. */
   providers: SignUpProvider[];
-  /** "password" when the email provider is active; otherwise "sso". */
-  method: "sso" | "password";
+  /**
+   * "magic-link" when the email sign-in link is active, else "password" when
+   * the email provider is, otherwise "sso".
+   */
+  method: "sso" | "password" | "magic-link";
   /** Post-sign-up path. */
   next: string;
-  /** Href for the footer's "Sign in" cross-link. */
-  signInHref: string;
+  /** The "Already have an account? Sign in" line to /sign-in (#9662). */
+  prospect: { prompt: string; linkLabel: string; href: string };
+  /** The acknowledgement sentence(s) at the card's foot (#9662). */
+  footnote: ReactNode;
   /** Translated AuthCard labels (resolved server-side by the page). */
   labels: AuthCardLabels;
   /** Subhead shown when no provider is configured. */
@@ -92,6 +127,12 @@ export interface SignUpCardProps {
   agreementsLegend: string;
   /** The page's locale, sent with the agreements (the statements' language). */
   locale: string;
+  /** Where a failed link lands (`/sign-up`); Better Auth appends `?error`. */
+  errorCallbackURL?: string;
+  /** Fixed copy for a failed link (`?error=` mapped by the page), shown above the card. */
+  linkNotice?: string;
+  /** The magic-link method's copy; required when `method` is "magic-link". */
+  linkLabels?: SignUpLinkLabels;
 }
 
 /** The server's body key for the ticked ids — also the group's control name. */
@@ -112,7 +153,8 @@ export function SignUpCard({
   providers,
   method,
   next,
-  signInHref,
+  prospect,
+  footnote,
   labels,
   notConfiguredSubhead,
   errorLabels,
@@ -121,6 +163,9 @@ export function SignUpCard({
   agreementsLegend,
   logo,
   locale,
+  errorCallbackURL,
+  linkNotice,
+  linkLabels,
 }: SignUpCardProps): ReactElement {
   const { errors, providerError, launchProvider, submitPassword } =
     useAuthCardFlow(next, {
@@ -135,6 +180,11 @@ export function SignUpCard({
   const [agreementsError, setAgreementsError] = useState<string | undefined>(
     undefined,
   );
+  const [linkSent, setLinkSent] = useState(false);
+  const [linkError, setLinkError] = useState<string | undefined>(undefined);
+  // One request at a time: a double-click would spend two of the per-IP
+  // sends and mint two live tokens (as sign-in-card.tsx).
+  const linkPending = useRef(false);
   const allAgreed = requiredAgreementIds.every((id) => ticked.has(id));
   // What the server checks and records (D10): the ticked ids, in the order shown.
   const agreed = (): { agreements: string[]; locale: string } => ({
@@ -201,8 +251,72 @@ export function SignUpCard({
     );
   };
 
+  const requestSignUpLink = async (email: string): Promise<void> => {
+    if (!allAgreed || linkPending.current) return;
+    linkPending.current = true;
+    setAgreementsError(undefined);
+    setLinkError(undefined);
+    try {
+      const { error } = await authClient.$fetch("/sign-in/magic-link", {
+        method: "POST",
+        body: {
+          email,
+          // As the password submit: Better Auth wants a name on a new user.
+          name: email,
+          callbackURL: next,
+          errorCallbackURL,
+          metadata: agreed(),
+        },
+      });
+      if (!error) {
+        setLinkSent(true);
+        return;
+      }
+      if (errorCode({ error }) === AGREEMENTS_REQUIRED) {
+        setAgreementsError(errorLabels.agreementsRequired);
+      } else {
+        setLinkError(
+          error.status === 429 ? linkLabels?.rateLimited : linkLabels?.failed,
+        );
+      }
+    } catch {
+      setLinkError(linkLabels?.failed);
+    } finally {
+      linkPending.current = false;
+    }
+  };
+
+  if (method === "magic-link" && linkSent && linkLabels) {
+    // No `sentTo`: both a new and a taken address get a link, and the state
+    // must not say which.
+    return (
+      <div className="flex flex-col gap-4" data-testid="sign-up-page">
+        <AuthCard
+          {...(logo !== undefined ? { logo } : {})}
+          intent="sent"
+          footer="cross-link"
+          // "Back to sign up": this page, where a failed link also lands.
+          {...(errorCallbackURL !== undefined
+            ? { signInHref: errorCallbackURL }
+            : {})}
+          labels={{
+            sentHeading: linkLabels.sentHeading,
+            sentSubhead: linkLabels.sentSubhead,
+            sentBody: linkLabels.sentBody,
+            backToSignIn: linkLabels.back,
+          }}
+        />
+      </div>
+    );
+  }
+
   return (
     <div className="flex flex-col gap-4" data-testid="sign-up-page">
+      {linkNotice ? (
+        <Alert variant="error" data-testid="sign-up-link-notice">
+          <AlertDescription>{linkNotice}</AlertDescription>
+        </Alert>
+      ) : null}
       {method === "sso" && providerError ? (
         <Alert variant="error" data-testid="sign-up-provider-error">
           <AlertDescription>{providerError}</AlertDescription>
@@ -217,11 +331,17 @@ export function SignUpCard({
           {...(logo !== undefined ? { logo } : {})}
           intent="sign-up"
           method={method}
-          signInHref={signInHref}
-          {...(notConfigured ? { subhead: notConfiguredSubhead } : {})}
+          footer="none"
+          subhead={notConfigured ? notConfiguredSubhead : ""}
+          prospect={prospect}
+          footnote={footnote}
           providers={providerButtons}
-          onSubmit={handleSubmit}
-          errors={errors}
+          onSubmit={
+            method === "magic-link"
+              ? (data) => void requestSignUpLink(data.email)
+              : handleSubmit
+          }
+          errors={linkError ? { ...errors, email: linkError } : errors}
           labels={labels}
         />
       </div>

package/templates/apps/web/app/[locale]/(authed)/__tests__/gate.test.tsx

@@ -19,6 +19,9 @@
  *   9. On an account path (#7430) the gate speaks to members — the
  *      `account.gate` copy, never `waitlistDashboard.gate` — and its
  *      not-configured headline is a real heading element.
+ *  10. The member gate renders the one card (#9662): `/sign-in`'s card with
+ *      the site's mark, the toggle line to /sign-up and the Terms + Privacy
+ *      acknowledgement.
  */
 import { readFileSync } from "node:fs";
 import { join } from "node:path";
@@ -407,13 +410,62 @@ describe("AuthedLayout — the signed-out gate on an account path (#7430)", () =
     await renderSignedOutLayout();
     expect(gateNamespaces()).toContain("account.gate");
     expect(gateNamespaces()).not.toContain("waitlistDashboard.gate");
-    expect(screen.getByTestId("auth-panel-provider-google")).toBeInTheDocument();
+    expect(screen.getByTestId("auth-sso-google")).toBeInTheDocument();
     expect(screen.getByTestId("sign-in-gate-link")).toHaveAttribute(
       "href",
       "/sign-in?next=%2Faccount",
     );
   });
 
+  // A client component's props cross the RSC boundary: React refuses a
+  // function there, so the card's copy must arrive as plain data (#9662 —
+  // the 500 a function-valued `backTo` once caused here).
+  it.each([
+    ["Google", false],
+    ["Google + the email link", true],
+  ] as const)("hands SignInGate no function in its card props (%s)", async (_name, withEmailLink) => {
+    configureGoogle();
+    if (withEmailLink) configureEmailLink();
+    mockGetSession.mockResolvedValue(null);
+    const element = (await AuthedLayout({
+      params: Promise.resolve({ locale: "en" }),
+      children: <div />,
+    })) as React.ReactElement<{ card?: { text: Record<string, unknown> } }>;
+    const text = element.props.card?.text;
+    expect(text).toBeDefined();
+    const functions = Object.entries(text ?? {}).filter(
+      ([, value]) => typeof value === "function",
+    );
+    expect(functions).toEqual([]);
+  });
+
+  it.each([
+    ["Google", false],
+    ["Google + the email link", true],
+  ] as const)("renders the one card with %s: the mark, the toggle line and the acknowledgement (#9662)", async (_name, withEmailLink) => {
+    configureGoogle();
+    if (withEmailLink) configureEmailLink();
+    await renderSignedOutLayout();
+    expect(screen.getByTestId("sign-in-page")).toBeInTheDocument();
+    expect(screen.queryByTestId("auth-panel-card")).not.toBeInTheDocument();
+    expect(screen.getByTestId("auth-card-logo")).toBeInTheDocument();
+    expect(screen.getByTestId("auth-card-prospect-link")).toHaveAttribute(
+      "href",
+      "/sign-up",
+    );
+    const footnote = screen.getByTestId("auth-card-footnote");
+    expect(footnote.querySelector('a[href="/terms"]')).not.toBeNull();
+    expect(footnote.querySelector('a[href="/privacy"]')).not.toBeNull();
+    if (withEmailLink) {
+      expect(screen.getByTestId("auth-submit")).toHaveTextContent(
+        "copy:emailLinkSubmit",
+      );
+      expect(screen.getByTestId("auth-social-google")).toBeInTheDocument();
+    } else {
+      expect(screen.queryByTestId("auth-email")).not.toBeInTheDocument();
+    }
+  });
+
   it("renders the not-configured headline as a real heading, not a <p>", async () => {
     await renderSignedOutLayout();
     expect(gateNamespaces()).toContain("account.gate");

package/templates/apps/web/app/[locale]/(authed)/account/__tests__/billing.test.tsx

@@ -10,6 +10,9 @@
  *       button; (d) a 500 or a throw shows the error row, never "no
  *       subscription"; (e) a contributed billing section renders after every
  *       one of these; (f) the read asks for `include: "billing"`.
+ *   #9401 AC-9 (spec docs/specs/9401-show-a-buyer-s-ailk-spec.md D7): a
+ *   section the site adds to `siteBillingSections` renders after the
+ *   modules' `accountBillingSections`, each under its `ctx.t(title)`.
  *   #8217 AC-1 (spec docs/specs/8217-spoke-billing-spoke-checkout-reads-spec.md
  *   D10, D11): `openBillingPortal()` mints the portal through
  *   `billingPortalUrl()` — the hub's route, once, with the cookie init — and
@@ -81,6 +84,7 @@ jest.mock("next/navigation", () => ({
 import type { AccountBillingSection } from "@working-theory/templates/account";
 
 import { accountBillingSections } from "../../../../../lib/account-config";
+import { siteBillingSections } from "../../../../../lib/site-contributions";
 import { openBillingPortal } from "../actions";
 
 // The Billing route's own page, loaded with `import()`: architecture.yaml bans
@@ -276,6 +280,40 @@ describe("AC-2 (e) — contributed billing sections render after the base conten
   });
 });
 
+describe("#9401 AC-9 — a site's own section renders after the modules' (D7)", () => {
+  const moduleSection: AccountBillingSection = {
+    id: "module",
+    title: "settings.billing.currentPlan",
+    render: () => <p data-testid="module-body">Module</p>,
+  };
+  const siteSection: AccountBillingSection = {
+    id: "site",
+    title: "settings.billing.title",
+    render: () => <p data-testid="site-body">Site</p>,
+  };
+
+  beforeAll(() => {
+    accountBillingSections.push(moduleSection);
+    siteBillingSections.push(siteSection);
+  });
+
+  afterAll(() => {
+    accountBillingSections.splice(accountBillingSections.indexOf(moduleSection), 1);
+    siteBillingSections.splice(siteBillingSections.indexOf(siteSection), 1);
+  });
+
+  it("renders the module's section, then the site's, each under its translated title", async () => {
+    await renderPage();
+    const contributed = screen.getByTestId("account-settings-module");
+    const site = screen.getByTestId("account-settings-site");
+    expect(within(contributed).getByTestId("module-body")).toBeInTheDocument();
+    expect(within(site).getByTestId("site-body")).toBeInTheDocument();
+    expect(within(contributed).getByRole("heading", { level: 2 })).toHaveTextContent("Current plan");
+    expect(within(site).getByRole("heading", { level: 2 })).toHaveTextContent("Billing");
+    expect(contributed.compareDocumentPosition(site) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+  });
+});
+
 describe("#8217 AC-1 — the single site's Manage billing (D10, D11)", () => {
   const PORTAL_URL = "https://billing.stripe.com/p/session/test_single_site";
 

package/templates/apps/web/app/[locale]/(authed)/account/billing/page.tsx

@@ -19,7 +19,8 @@
  *
  * After any of the three, one plain line when some of the member's billing
  * is on a Stripe account this spoke's key cannot read (#8217 D12), then
- * each section a module contributes (`accountBillingSections`, #8231 D4).
+ * each section a module contributes (`accountBillingSections`, #8231 D4),
+ * then each section the site adds (`siteBillingSections`, #9401 D7).
  */
 
 import { AccountSettingsFrame, AccountSettingsPane, CurrentPlanCard } from "@working-theory/templates/account";
@@ -29,6 +30,7 @@ import { getTranslations } from "next-intl/server";
 import type { ReactElement } from "react";
 
 import { accountBillingSections } from "../../../../../lib/account-config";
+import { siteBillingSections } from "../../../../../lib/site-contributions";
 import { accountSession } from "../account-data";
 import { openBillingPortal } from "../actions";
 import { type BillingState, loadBilling } from "../billing-source";
@@ -161,7 +163,7 @@ export default async function AccountBillingPage({ params }: Props): Promise<Rea
           </div>
         ) : null}
 
-        {accountBillingSections.map((section) => (
+        {[...accountBillingSections, ...siteBillingSections].map((section) => (
           <SettingsSection key={section.id} id={section.id} title={ctx.t(section.title)}>
             {section.render(ctx)}
           </SettingsSection>

package/templates/apps/web/app/[locale]/(authed)/sign-in-gate.tsx

@@ -20,18 +20,23 @@
  * current pathname (via `usePathname()`) so a successful social sign-in
  * lands back on the exact dashboard page the visitor requested.
  *
- * Email sign-in link (#7435 § D9): when the layout passes `emailLink`, the
- * gate renders `/sign-in`'s own `SignInCard` — the same providers plus "Email
- * me a sign-in link" — in place of `AuthPanel`, whose email + password form
- * has no submit wiring and would otherwise sit inert beside the new field.
- * Without the prop every render is what it was before.
+ * Email sign-in link (#7435 § D9): when the layout passes `card` with
+ * `emailLink`, the gate renders `/sign-in`'s own `SignInCard` — the same
+ * providers plus "Send me a magic link" — in place of `AuthPanel`, whose
+ * email + password form has no submit wiring and would otherwise sit inert
+ * beside the new field. Without the prop every render is what it was before.
+ *
+ * The one card (#9662): on the member `/account` gate the layout passes
+ * `card` whenever a method is on, with the site's mark, the "Don't have an
+ * account? Sign up" line and the Terms + Privacy acknowledgement, so the gate
+ * renders the same card `/sign-in` does.
  */
 
 import { EmptyState, Link } from "@working-theory/ui/primitives";
 import { AuthPanel, type AuthPanelProvider } from "@working-theory/ui/sections";
 import { createAuthClient } from "better-auth/react";
 import { usePathname } from "next/navigation";
-import type { ReactElement } from "react";
+import type { ReactElement, ReactNode } from "react";
 
 import { SignInCard } from "../(auth)/sign-in/sign-in-card";
 import type { SignInCardText } from "../(auth)/sign-in/sign-in-text";
@@ -52,17 +57,25 @@ export interface SignInGateProps {
   /** The active social providers, resolved server-side by the layout (#7419). */
   providers: AuthPanelProvider[];
   /**
-   * Present iff the email sign-in link is on (#7435) — the sign-in card's
-   * copy, resolved server-side by the layout.
+   * Renders `SignInCard` in place of `AuthPanel` — present when the email
+   * sign-in link is on (#7435) or on the member gate (#9662). The card's copy,
+   * mark, prospect line and footnote are resolved server-side by the layout.
    */
-  emailLink?: { text: SignInCardText };
+  card?: {
+    text: SignInCardText;
+    /** Offer "Send me a magic link" — the email sign-in link is on. */
+    emailLink: boolean;
+    logo?: ReactNode;
+    prospect?: { prompt: string; linkLabel: string; href: string };
+    footnote?: ReactNode;
+  };
 }
 
 export function SignInGate({
   labels,
   signInPath,
   providers,
-  emailLink,
+  card,
 }: SignInGateProps): ReactElement {
   const pathname = usePathname();
   const signInHref = `${signInPath}?next=${encodeURIComponent(pathname)}`;
@@ -79,25 +92,35 @@ export function SignInGate({
     </Link>
   );
 
-  if (emailLink) {
-    const { text } = emailLink;
+  if (card) {
+    const { text } = card;
     return (
       <div
         className="flex min-h-screen flex-col items-center justify-center gap-4 py-section"
         data-testid="sign-in-gate"
       >
-        <SignInCard
-          providers={providers}
-          method="sso"
-          next={pathname}
-          labels={text.labels}
-          notConfiguredSubhead={text.notConfiguredSubhead}
-          errorLabels={text.errorLabels}
-          emailLink
-          errorCallbackURL={signInHref}
-          signInHref={signInHref}
-          emailLinkLabels={text.emailLinkLabels}
-        />
+        {/* AuthShell's 400px column: the cap sits on the wrapper, never on the card (AuthShell.tsx). */}
+        <div className="w-full max-w-100">
+          <SignInCard
+            providers={providers}
+            method="sso"
+            next={pathname}
+            labels={text.labels}
+            notConfiguredSubhead={text.notConfiguredSubhead}
+            errorLabels={text.errorLabels}
+            emailLink={card.emailLink}
+            errorCallbackURL={signInHref}
+            signInHref={signInHref}
+            emailLinkLabels={text.emailLinkLabels}
+            {...(card.logo !== undefined ? { logo: card.logo } : {})}
+            {...(card.prospect !== undefined
+              ? { prospect: card.prospect }
+              : {})}
+            {...(card.footnote !== undefined
+              ? { footnote: card.footnote }
+              : {})}
+          />
+        </div>
         {signInLink}
       </div>
     );

package/templates/apps/web/app/[locale]/(authed)/signed-out-gate.generated.tsx

@@ -11,9 +11,11 @@ import { readLocales } from "@working-theory/web-i18n";
 import { getTranslations } from "next-intl/server";
 import type { ReactElement } from "react";
 
+import { legalFootnote } from "../(auth)/legal-footnote";
 import { resolveSignInCardText } from "../(auth)/sign-in/sign-in-text";
 import { getActiveProviderIds } from "../../../lib/auth-env";
 import { isAccountPath } from "../../../lib/auth-routes";
+import { siteLogo } from "../../../lib/site-logo";
 
 import { SignInGate } from "./sign-in-gate";
 
@@ -39,9 +41,7 @@ export async function SignedOutGate({
     namespace: isAccount ? "account.gate" : "waitlistDashboard.gate",
   });
   const active = getActiveProviderIds();
-  const emailLink = active.includes("magic-link")
-    ? { text: await resolveSignInCardText(locale) }
-    : undefined;
+  const emailLink = active.includes("magic-link");
   const providers = active.filter((id): id is AuthPanelProvider =>
     (SUPPORTED_PROVIDERS as readonly string[]).includes(id),
   );
@@ -75,6 +75,25 @@ export async function SignedOutGate({
     );
   }
 
+  // The sign-in card: with the email link on, and on the member gate, which
+  // also wears the one card's frame — the mark, the toggle line to /sign-up
+  // and the Terms + Privacy acknowledgement (#9662).
+  const text =
+    emailLink || isAccount ? await resolveSignInCardText(locale) : undefined;
+  const card = text
+    ? {
+        text,
+        emailLink,
+        ...(isAccount
+          ? {
+              logo: siteLogo(),
+              prospect: { ...text.prospect, href: localeHref(locale, "/sign-up") },
+              footnote: legalFootnote(locale, text.acknowledgement),
+            }
+          : {}),
+      }
+    : undefined;
+
   return (
     <SignInGate
       labels={{
@@ -84,7 +103,7 @@ export async function SignedOutGate({
       }}
       signInPath={signInPath}
       providers={providers}
-      {...(emailLink ? { emailLink } : {})}
+      {...(card ? { card } : {})}
     />
   );
 }

package/templates/apps/web/app/[locale]/contact/intake-analytics.ts

@@ -5,7 +5,7 @@
  * ConversationalIntakeWrapper (#4534, epic #4521's integration leg).
  *
  * `recordIntakeTurn` fires `track()` (`@working-theory/analytics/server`,
- * the same fire-and-forget helper `apps/api/src/routes/leads/index.ts`
+ * the same fire-and-forget helper `packages/api/src/routes/leads/index.ts`
  * already uses for "lead-captured") once per conversation turn, tagged with
  * the turn index and the engine status as of that turn. A session's last
  * "intake-turn-abandonment" event with `status: "in_progress"` marks the

package/templates/apps/web/app/[locale]/flows/[slug]/__tests__/magnet-page.test.tsx

@@ -86,6 +86,7 @@ jest.mock("../../../contact/site-contact-email", () => ({
   readSiteContactEmail: () => "hello@example.com",
 }));
 
+import { TOPOLOGY } from "../../../../../lib/topology.generated";
 import {
   magnetLandingMetadata,
   magnetStartMetadata,
@@ -361,7 +362,15 @@ describe("the read tells a hub that is not configured from one that is down (#92
     await expect(readMagnet("growth")).resolves.toEqual({ kind: "not-configured" });
   });
 
-  it.each(ORIGIN_NAMES)("with %s set, a 5xx or a throw is unavailable", async (name) => {
+  // #9480 — the browser-facing name is read through the topology seam
+  // (#7874 D12). The committed seam is the hub render; #8060 — a spoke render
+  // reads no NEXT_PUBLIC_AILK_API_URL, so a spoke scaffold leaves that row out.
+  const CONFIGURED_BY =
+    TOPOLOGY === "hub"
+      ? ORIGIN_NAMES
+      : ORIGIN_NAMES.filter((name) => name !== "NEXT_PUBLIC_AILK_API_URL");
+
+  it.each(CONFIGURED_BY)("with %s set, a 5xx or a throw is unavailable", async (name) => {
     process.env[name] = "https://hub.example";
     mockGet.mockResolvedValue({ ok: false, status: 503, body: null });
     await expect(readMagnet("growth")).resolves.toEqual({ kind: "unavailable" });
@@ -378,6 +387,18 @@ describe("the read tells a hub that is not configured from one that is down (#92
     await expect(readMagnet("growth")).resolves.toEqual({ kind: "not-configured" });
   });
 
+  it("on a spoke (the seam's spoke render), NEXT_PUBLIC_AILK_API_URL alone is not-configured", async () => {
+    process.env.NEXT_PUBLIC_AILK_API_URL = "https://hub.example";
+    mockGet.mockResolvedValue({ ok: false, status: 503, body: null });
+    await jest.isolateModulesAsync(async () => {
+      jest.doMock("../../../../../lib/api-origin.generated", () => ({
+        browserApiOrigin: (): string | undefined => undefined,
+      }));
+      const spoke = await import("../magnet-page");
+      await expect(spoke.readMagnet("growth")).resolves.toEqual({ kind: "not-configured" });
+    });
+  });
+
   it("with no API origin, a 404 is still absent and a served flow still ok", async () => {
     mockGet.mockResolvedValue({ ok: false, status: 404, body: null });
     await expect(readMagnet("growth")).resolves.toEqual({ kind: "absent" });

package/templates/apps/web/app/[locale]/flows/[slug]/magnet-page.tsx

@@ -51,6 +51,7 @@ import { notFound, redirect } from "next/navigation";
 import { getTranslations } from "next-intl/server";
 import type { ReactElement } from "react";
 
+import { browserApiOrigin } from "../../../../lib/api-origin.generated";
 import { readSiteContactEmail } from "../../contact/site-contact-email";
 
 import { FlowStepperClient } from "./FlowStepperClient";
@@ -74,13 +75,16 @@ const magnetReads = new Map<string, { at: number; read: Promise<MagnetRead> }>()
 
 /**
  * Whether an API origin is configured: the three names `getApiBase()` in
- * packages/api-client/src/http.ts reads, in step with it (as `/pricing`
- * checks them). Without one that function answers `localhost:3001`.
+ * packages/api-client/src/http.ts reads, in step with it on a hub. Without one
+ * that function answers `localhost:3001`. The browser-facing origin comes from
+ * the topology seam (#7874 D12), which a spoke renders with no env read, so a
+ * spoke passes its own `env:check` (#9480). A spoke diverges on purpose: the
+ * browser-facing name set on one at runtime counts as no origin here.
  */
 function apiOriginConfigured(): boolean {
   return Boolean(
     process.env.AILK_API_URL ||
-    process.env.NEXT_PUBLIC_AILK_API_URL ||
+    browserApiOrigin() ||
     process.env.NEXT_PUBLIC_API_URL,
   );
 }