create-ailk 0.19.0 → 0.20.0

package/templates/apps/web/app/[locale]/(authed)/account/settings-frame.tsx

@@ -4,21 +4,28 @@
  *
  * `memberSettingsFrame` supplies the member's half of the shared
  * `AccountSettingsFrame` (@working-theory/templates/account, spec 8339 D2):
- * `standalone: false` (the member area already renders inside AppShell's
- * own `<main>`), Back to the Inbox, and the four tabs in the reference's
- * order. Every member settings page calls it and renders the result through
- * `AccountSettingsFrame` (General, via the shared `AccountSettings`) or
- * directly (Security, Notifications, Billing).
+ * `standalone: true` — the Admin's shape, full height and flush, because the
+ * account layout renders these routes outside its AppShell (#8430) — Back to
+ * the Inbox, and the tabs of `SETTINGS_ROUTES`. Every member settings page
+ * calls it and renders the result through `AccountSettingsFrame` (General,
+ * via the shared `AccountSettings`) or directly (Security, Notifications,
+ * Billing).
  *
  * `SettingsSection` stays as it is: contributed sections
  * (`accountSettingsSections`, `accountBillingSections`) still use it, as do
  * General's and Billing's own trailing content.
+ *
+ * #8441 — `SETTINGS_ROUTES` is the ONE place the settings routes are named:
+ * the tabs here and `isSettingsPath` (which `account-frame.tsx` takes these
+ * routes out of its shell with) both read it, so a tab added here is a tab
+ * that renders outside the shell — never a second `<main>` nested in the
+ * shell's. Adding a tab is one line here (plus its page and message).
  */
 
 import type { AccountSettingsFrameProps, AccountSettingsTab } from "@working-theory/templates/account";
 import { localeHref } from "@working-theory/ui";
 import { Heading, Icon, Text } from "@working-theory/ui/primitives";
-import { Bell, CreditCard, ShieldCheck, UserRound } from "lucide-react";
+import { Bell, CreditCard, Lock, ShieldCheck, UserRound } from "lucide-react";
 import type { ReactElement, ReactNode } from "react";
 
 /** The `next-intl` translator General/Security/Notifications/Billing each
@@ -29,42 +36,45 @@ import type { ReactElement, ReactNode } from "react";
  * own `t` with `as unknown as Translate`. */
 export type Translate = (key: string, values?: Record<string, unknown>) => string;
 
+/** User settings' tabs, in the reference's order (#8339 D7; #8438 D14 adds
+ * Privacy before Billing) — each one a route that renders outside the
+ * account shell (#8430, #8441). */
+export const SETTINGS_ROUTES = [
+  { key: "general", path: "/account/general", titleKey: "settings.general.title", icon: UserRound },
+  { key: "security", path: "/account/security", titleKey: "settings.security.title", icon: ShieldCheck },
+  { key: "notifications", path: "/account/notifications", titleKey: "settings.notifications.title", icon: Bell },
+  { key: "privacy", path: "/account/privacy", titleKey: "settings.privacy.title", icon: Lock },
+  { key: "billing", path: "/account/billing", titleKey: "settings.billing.title", icon: CreditCard },
+] as const;
+
+export type SettingsTabKey = (typeof SETTINGS_ROUTES)[number]["key"];
+
+/** Whether `pathname` is one of `SETTINGS_ROUTES`: the request locale's
+ * `/<locale>` prefix removed, then the rest compared whole — so a sub-route
+ * (`/account/billing/history`) is not a settings route unless it is listed. */
+export function isSettingsPath(pathname: string, locale: string): boolean {
+  const prefix = `/${locale}`;
+  const bare =
+    pathname === prefix || pathname.startsWith(`${prefix}/`) ? pathname.slice(prefix.length) : pathname;
+  return SETTINGS_ROUTES.some(({ path }) => path === bare);
+}
+
 /** The member's half of `AccountSettingsFrameProps` — every settings page's
  * `frame` prop, less `name` (the caller's own session) and `children`. */
 export function memberSettingsFrame(
   locale: string,
   t: Translate,
-  active: "general" | "security" | "notifications" | "billing",
+  active: SettingsTabKey,
 ): Omit<AccountSettingsFrameProps, "name" | "children"> {
-  const tabs: readonly AccountSettingsTab[] = [
-    {
-      key: "general",
-      label: t("settings.general.title"),
-      href: localeHref(locale, "/account/general"),
-      icon: <Icon icon={UserRound} size="sm" decorative className="shrink-0" />,
-    },
-    {
-      key: "security",
-      label: t("settings.security.title"),
-      href: localeHref(locale, "/account/security"),
-      icon: <Icon icon={ShieldCheck} size="sm" decorative className="shrink-0" />,
-    },
-    {
-      key: "notifications",
-      label: t("settings.notifications.title"),
-      href: localeHref(locale, "/account/notifications"),
-      icon: <Icon icon={Bell} size="sm" decorative className="shrink-0" />,
-    },
-    {
-      key: "billing",
-      label: t("settings.billing.title"),
-      href: localeHref(locale, "/account/billing"),
-      icon: <Icon icon={CreditCard} size="sm" decorative className="shrink-0" />,
-    },
-  ];
+  const tabs: readonly AccountSettingsTab[] = SETTINGS_ROUTES.map(({ key, path, titleKey, icon }) => ({
+    key,
+    label: t(titleKey),
+    href: localeHref(locale, path),
+    icon: <Icon icon={icon} size="sm" decorative className="shrink-0" />,
+  }));
 
   return {
-    standalone: false,
+    standalone: true,
     back: { label: t("settings.back"), href: localeHref(locale, "/account") },
     railLabel: t("settings.title"),
     accountLabel: t("settings.account"),

package/templates/apps/web/app/[locale]/(authed)/account/sign-in-method.ts

@@ -1,6 +1,6 @@
 /**
  * account/sign-in-method.ts (server code) — how a member signs in, for User settings ›
- * General's Sign-in section (#8232, spec
+ * Security's sign-in block (#8232, spec
  * docs/specs/8232-member-settings-account-general-and-spec.md D7).
  *
  * One of the account tree's TWO topology seams (roadmap D1; the other is

package/templates/apps/web/app/[locale]/consent-banner.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+/**
+ * ConsentBanner — a thin client wrapper around `Banner` (#8438 D12).
+ *
+ * `layout.tsx` (a Server Component) cannot pass `acceptCookiesAction` /
+ * `declineCookiesAction` straight into `Banner`'s `onAccept`/`onReject`
+ * props: those are plain functions, not JSX, and a function crossing the
+ * RSC → Client boundary as a PROP (rather than being called from inside
+ * client code) is the exact class of crash `signed-in-nav-rsc-boundary.
+ * test.tsx` guards against (#7402's `renderFlowTrigger` idiom next door
+ * solves the same problem the same way). This component is itself
+ * "use client" and imports the two Server Actions directly, so nothing
+ * callable crosses from the server — only the serializable props below do.
+ */
+
+import { Banner, type BannerProps } from "@working-theory/ui/chrome";
+import type { ReactElement } from "react";
+
+import { acceptCookiesAction, declineCookiesAction } from "./consent.actions";
+
+export function ConsentBanner(
+  props: Omit<BannerProps, "onAccept" | "onReject">,
+): ReactElement {
+  return (
+    <Banner
+      {...props}
+      onAccept={() => void acceptCookiesAction()}
+      onReject={() => void declineCookiesAction()}
+    />
+  );
+}

package/templates/apps/web/app/[locale]/consent.actions.ts

@@ -0,0 +1,71 @@
+"use server";
+
+/**
+ * acceptCookiesAction / declineCookiesAction — the cookie banner's two
+ * Server Actions (#8438 D12, spec
+ * docs/specs/8438-consent-registry-and-ledger-step-spec.md).
+ *
+ * Bound to Banner's `onAccept`/`onReject` in `layout.tsx`. Each ensures the
+ * visitor id (`consent-visitor.ts`), then calls `consent.recordCookieChoice`
+ * through `@working-theory/api-client` with the site's own spoke key (added
+ * by `http.ts`) and the visitor-forward headers a spoke attaches today.
+ *
+ * Neither ever throws to the client — Banner's `onAccept`/`onReject` are
+ * plain `() => void`, and the banner island already hides itself locally;
+ * a failed write here is logged and nothing more. Neither writes
+ * `ailk-consent` — the island owns that cookie, unchanged (C3).
+ */
+
+import { consent, visitorForwardHeaders } from "@working-theory/api-client";
+import { cookies, headers } from "next/headers";
+import { getLocale } from "next-intl/server";
+
+import { ensureConsentVisitor } from "../../lib/consent-visitor";
+
+async function recordChoice(choice: "accepted" | "declined"): Promise<void> {
+  try {
+    const cookieStore = await cookies();
+    const visitorId = ensureConsentVisitor(cookieStore);
+
+    let locale = "en";
+    try {
+      locale = await getLocale();
+    } catch {
+      // No request-scoped locale (e.g. outside next-intl's pipeline) — "en".
+    }
+
+    let init: { headers: Record<string, string> } | undefined;
+    try {
+      const forwarded = visitorForwardHeaders(
+        await headers(),
+        process.env.AILK_VISITOR_FORWARD_KEY,
+      );
+      if (forwarded) init = { headers: forwarded };
+    } catch {
+      // No request scope to read — record with no forwarding headers.
+    }
+
+    const body = { visitorId, choice, locale };
+    const res = init
+      ? await consent.recordCookieChoice(body, init)
+      : await consent.recordCookieChoice(body);
+    if (!res.ok) {
+      console.error("[consent.actions] record cookie choice refused", {
+        outcome: res.status,
+      });
+    }
+  } catch (err) {
+    // Never attach the visitor id or any request detail to the log line.
+    console.error("[consent.actions] record cookie choice failed", {
+      outcome: err instanceof Error ? err.name : "unknown",
+    });
+  }
+}
+
+export async function acceptCookiesAction(): Promise<void> {
+  await recordChoice("accepted");
+}
+
+export async function declineCookiesAction(): Promise<void> {
+  await recordChoice("declined");
+}

package/templates/apps/web/app/[locale]/contact/contact.actions.ts

@@ -48,7 +48,9 @@
 import { leads, visitorForwardHeaders } from "@working-theory/api-client";
 import { LEAD_CAPTURE_HONEYPOT, type LeadCaptureFormState } from "@working-theory/ui";
 import { submitLeadInputSchema } from "@working-theory/validation";
-import { headers } from "next/headers";
+import { cookies, headers } from "next/headers";
+
+import { consentVisitorHeader, readConsentVisitor } from "../../../lib/consent-visitor";
 
 const GENERIC_ERROR = "Something went wrong, please try again.";
 
@@ -151,6 +153,16 @@ export async function captureLeadAction(
     // No request scope to read — submit without forwarding.
   }
 
+  // #8438 D12 — the banner's visitor id, so a later form submit links its
+  // cookie choices to the client record this submit creates or resolves
+  // (D11). Absent or invalid → no header, exactly as before this unit.
+  try {
+    const visitorId = readConsentVisitor(await cookies());
+    if (visitorId) init = { headers: { ...(init?.headers ?? {}), ...consentVisitorHeader(visitorId) } };
+  } catch {
+    // No request scope to read — submit with no visitor-link header.
+  }
+
   try {
     const res = init ? await leads.submit(body, init) : await leads.submit(body);
     if (!res.ok) {

package/templates/apps/web/app/[locale]/flows/[slug]/flow.actions.ts

@@ -35,7 +35,9 @@ import {
   flowSlugSchema,
   submitFlowStepInputSchema,
 } from "@working-theory/validation";
-import { headers } from "next/headers";
+import { cookies, headers } from "next/headers";
+
+import { consentVisitorHeader, readConsentVisitor } from "../../../../lib/consent-visitor";
 
 /**
  * Reads the visitor's real IP from THIS action's own incoming request —
@@ -60,6 +62,22 @@ async function resolveVisitorIpInit(): Promise<
   }
 }
 
+/**
+ * #8438 D12 — the banner's visitor id, so a magnet's step submit links its
+ * cookie choices to the Person lead-routing resolves (D11). `undefined`
+ * with no request scope, no cookie, or an invalid value.
+ */
+async function resolveConsentVisitorHeader(): Promise<
+  Record<string, string> | undefined
+> {
+  try {
+    const visitorId = readConsentVisitor(await cookies());
+    return visitorId ? consentVisitorHeader(visitorId) : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
 export async function submitFlowStepAction(
   slug: string,
   payload: {
@@ -102,12 +120,16 @@ export async function submitFlowStepAction(
       ...(locale !== undefined ? { locale } : {}),
     };
     const visitorIpInit = await resolveVisitorIpInit();
+    const consentVisitor = await resolveConsentVisitorHeader();
+    const mergedHeaders = { ...(visitorIpInit?.headers ?? {}), ...(consentVisitor ?? {}) };
+    const stepInit =
+      Object.keys(mergedHeaders).length > 0 ? { headers: mergedHeaders } : undefined;
     // Two call shapes, not one call + a conditional spread: this keeps the
     // call at EXACTLY 2 args when there's no header to forward (never an
     // explicit `undefined` 3rd arg) — collapsing it into a spread-args form
     // would silently change call arity for every existing caller/test.
-    const res = visitorIpInit
-      ? await flows.submitStep(parsedSlug.data, stepPayload, visitorIpInit)
+    const res = stepInit
+      ? await flows.submitStep(parsedSlug.data, stepPayload, stepInit)
       : await flows.submitStep(parsedSlug.data, stepPayload);
     if (!res.ok) {
       if (res.status === 400) {

package/templates/apps/web/app/[locale]/layout.tsx

@@ -37,6 +37,11 @@ import {
   type NavAction,
   type NavActionFlow,
 } from "@working-theory/ui/chrome";
+import {
+  cookiePurpose,
+  resolveConsentStatement,
+  SITE_CONSENT_CONFIG_DEFAULTS,
+} from "@working-theory/validation";
 import {
   buildHreflangAlternates,
   getStealthRobots,
@@ -82,6 +87,7 @@ import {
 } from "../../lib/topology.generated";
 import { resolveBaseUrl } from "../../src/lib/routes";
 
+import { ConsentBanner } from "./consent-banner";
 import { readSiteContactLines } from "./contact/site-contact-lines";
 
 /**
@@ -362,6 +368,15 @@ export default async function LocaleLayout({
   // scaffold's messages file; the Banner below is UI-only — OSS ships no
   // enforcement, the callbacks are the hook for @working-theory/consent.
   const tConsent = await getTranslations({ locale, namespace: "consent" });
+  // #8438 C4/D12 — the banner's body is read FROM the registry, not a
+  // hard-coded string: the `analytics_cookies` purpose's statement, so the
+  // text the visitor reads and the text the ledger logs are one string by
+  // construction. No site carries its own registry row yet (C1), so this
+  // always reads the platform default — wiring a per-site row is a follow-up.
+  const consentCookiePurpose = cookiePurpose(SITE_CONSENT_CONFIG_DEFAULTS);
+  const consentBannerStatement = consentCookiePurpose
+    ? resolveConsentStatement(consentCookiePurpose, locale).statement
+    : "";
 
   // Right-side action cluster (#4984). Signed out → the auth pair: an
   // outline-strong "Sign in" → /sign-in beside a primary "Sign up" → /sign-up
@@ -868,7 +883,7 @@ export default async function LocaleLayout({
            * control (D2) instead of a hard server-side hide.
            */}
           {isAccountRoute ? null : (
-            <Banner
+            <ConsentBanner
               variant="info"
               placement="bottom"
               consentCookieName={CONSENT_COOKIE_NAME}
@@ -876,7 +891,7 @@ export default async function LocaleLayout({
               title={tConsent("title")}
               message={
                 <>
-                  {tConsent("body")}{" "}
+                  {consentBannerStatement}{" "}
                   <Link
                     href={localeHref(locale, "/privacy")}
                     variant="unstyled"
@@ -891,6 +906,12 @@ export default async function LocaleLayout({
               acceptLabel={tConsent("acceptLabel")}
               secondaryAction={{ label: tConsent("rejectLabel") }}
               rejectLabel={tConsent("rejectLabel")}
+              // #8438 D12 — each banner choice is logged against the
+              // visitor id through the one write path, `consent.actions.ts`,
+              // which `ConsentBanner` calls itself (never a function passed
+              // across the RSC boundary); the browser cookie
+              // (`CONSENT_COOKIE_NAME`) stays the operative switch the
+              // island itself still writes (C3).
               locale={locale}
               // #7742 D5 — the minimal chrome's consent bar: the page ground,
               // a hairline, no shadow.

package/templates/apps/web/app/[locale]/newsletter/newsletter.actions.ts

@@ -22,7 +22,9 @@
 import { leads, visitorForwardHeaders } from "@working-theory/api-client";
 import { LEAD_CAPTURE_HONEYPOT, type LeadCaptureFormState } from "@working-theory/ui";
 import { subscribeNewsletterInputSchema } from "@working-theory/validation";
-import { headers } from "next/headers";
+import { cookies, headers } from "next/headers";
+
+import { consentVisitorHeader, readConsentVisitor } from "../../../lib/consent-visitor";
 
 const GENERIC_ERROR = "Something went wrong, please try again.";
 
@@ -58,6 +60,15 @@ export async function subscribeNewsletterAction(
     // No request scope to read — subscribe without forwarding.
   }
 
+  // #8438 D12 — the banner's visitor id, so a later subscribe links its
+  // cookie choices to the client record. Absent or invalid → no header.
+  try {
+    const visitorId = readConsentVisitor(await cookies());
+    if (visitorId) init = { headers: { ...(init?.headers ?? {}), ...consentVisitorHeader(visitorId) } };
+  } catch {
+    // No request scope to read — subscribe with no visitor-link header.
+  }
+
   try {
     const res = init
       ? await leads.subscribe(body, init)

package/templates/apps/web/app/[locale]/unsubscribe/__tests__/unsubscribe-rsc-boundary.test.tsx

@@ -0,0 +1,209 @@
+/**
+ * @jest-environment node
+ * @jest-environment-options {"customExportConditions": ["react-server", "node", "require", "default"]}
+ */
+// /[locale]/unsubscribe → real RSC render regression test (#8438 D17, the
+// #7402 class).
+//
+// The create-ailk scaffold matrix's `organization-product · Free` leg answered
+// `GET /unsubscribe` with a 500: `page.tsx` (a Server Component) handed
+// `UnsubscribeButton` ("use client") a `labels.done` FUNCTION, and React
+// refuses to serialize a function into the Flight payload ("Functions cannot
+// be passed directly to Client Components"). `unsubscribe.test.tsx` renders
+// the island in the same jsdom process, so it never crosses the boundary and
+// stayed green while the real page crashed.
+//
+// This suite runs the page through React's own Flight serializer — the same
+// `react-server-dom-webpack` server Next uses — under the `react-server`
+// export condition, with every `"use client"` module in the render graph
+// replaced by a real client reference, exactly as
+// `apps/web/__tests__/signed-in-nav-rsc-boundary.test.tsx` does for the
+// layout. A function crossing any server→client edge throws the production
+// error here.
+
+import fs from "node:fs";
+import path from "node:path";
+import { Writable } from "node:stream";
+
+import type { ReactElement, ReactNode } from "react";
+
+// Next's compiled Flight server ships no types; it is the renderer Next itself runs.
+const flight =
+  require("next/dist/compiled/react-server-dom-webpack/server.node") as {
+    createClientModuleProxy: (moduleId: string) => Record<string, unknown>;
+    renderToPipeableStream: (
+      model: ReactNode,
+      manifest: unknown,
+      options: { onError: (error: unknown) => void },
+    ) => { pipe: (destination: Writable) => void };
+  };
+
+// ── The "use client" boundary ────────────────────────────────────────────────
+
+const REPO_ROOT = path.resolve(__dirname, "../../../../../..");
+
+/** This app and every workspace package its imports can resolve into. */
+const WORKSPACE_DIRS = [
+  path.join(REPO_ROOT, "apps/web"),
+  // `packages-paid` is absent from the public tree the strip derives.
+  ...["packages", "packages-paid"]
+    .map((dir) => path.join(REPO_ROOT, dir))
+    .filter((dir) => fs.existsSync(dir))
+    .flatMap((dir) => fs.readdirSync(dir).map((pkg) => path.join(dir, pkg))),
+];
+
+/** A file's directive prologue opens with "use client" (comments may precede it). */
+const USE_CLIENT = /^(?:\s|\/\/[^\n]*\n|\/\*[\s\S]*?\*\/)*["']use client["']/;
+
+/**
+ * Every source module that marks itself `"use client"` in the trees jest maps
+ * this app's imports onto: the app itself and the workspace packages' `src/`.
+ */
+function clientModules(): string[] {
+  const roots = WORKSPACE_DIRS.map((dir) =>
+    dir.endsWith(path.join("apps", "web")) ? dir : path.join(dir, "src"),
+  );
+  const found: string[] = [];
+  const walk = (dir: string): void => {
+    if (!fs.existsSync(dir)) return;
+    for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+      if (["node_modules", ".next", "__tests__", "dist"].includes(entry.name))
+        continue;
+      const full = path.join(dir, entry.name);
+      if (entry.isDirectory()) walk(full);
+      else if (
+        /\.tsx?$/.test(entry.name) &&
+        !/\.(stories|test)\.tsx?$/.test(entry.name)
+      ) {
+        if (USE_CLIENT.test(fs.readFileSync(full, "utf8"))) found.push(full);
+      }
+    }
+  };
+  roots.forEach(walk);
+  return found;
+}
+
+/**
+ * The installed `@working-theory/*` packages' built `dist/` trees — the shape a
+ * create-ailk scaffold runs this test in (#8557). There jest maps nothing onto
+ * `src/`: `@working-theory/ui` is a tarball under `node_modules`, and its
+ * Radix-backed primitives carry the directive in their built files. Unmocked,
+ * they load as server code under the `react-server` condition and throw
+ * (`React.createContext is not a function`). In the monorepo the symlinked
+ * workspace package's `dist/` (when built) is walked too; those files are never
+ * reached, since jest maps the imports onto `src/`, so the extra mocks are inert.
+ */
+function installedClientModules(): string[] {
+  const scope = path.join(REPO_ROOT, "apps/web/node_modules/@working-theory");
+  if (!fs.existsSync(scope)) return [];
+  const found: string[] = [];
+  const walk = (dir: string): void => {
+    for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+      const full = path.join(dir, entry.name);
+      if (entry.isDirectory()) walk(full);
+      else if (/\.(?:m|c)?js$/.test(entry.name)) {
+        if (USE_CLIENT.test(fs.readFileSync(full, "utf8"))) found.push(full);
+      }
+    }
+  };
+  for (const pkg of fs.readdirSync(scope)) {
+    let dist: string;
+    try {
+      dist = path.join(fs.realpathSync(path.join(scope, pkg)), "dist");
+    } catch {
+      continue;
+    }
+    if (fs.existsSync(dist)) walk(dist);
+  }
+  return found;
+}
+
+for (const file of [...clientModules(), ...installedClientModules()]) {
+  jest.doMock(file, () => flight.createClientModuleProxy(file));
+}
+// Third-party client entries the primitives barrel reaches (`next/image` via
+// `Image.tsx`). pnpm can link a physically distinct `next` per workspace, so
+// each entry is mocked at every copy a workspace resolves.
+for (const specifier of ["next/link", "next/image", "next/script"]) {
+  const copies = new Set<string>();
+  for (const dir of WORKSPACE_DIRS) {
+    try {
+      copies.add(require.resolve(specifier, { paths: [dir] }));
+    } catch {
+      // This workspace does not depend on `next`.
+    }
+  }
+  for (const file of copies) {
+    jest.doMock(file, () => flight.createClientModuleProxy(specifier));
+  }
+}
+// `next-intl` is path-independent: jest.config.cjs maps every copy onto one stub.
+jest.doMock("next-intl", () => flight.createClientModuleProxy("next-intl"));
+
+// ── Render ───────────────────────────────────────────────────────────────────
+
+/** Any client-reference id resolves to a chunk-less manifest entry. */
+const CLIENT_MANIFEST = new Proxy(
+  {},
+  { get: (_target, id) => ({ id: String(id), chunks: [], name: "*" }) },
+);
+
+interface FlightResult {
+  errors: string[];
+  payload: string;
+}
+
+/** Serialize the unsubscribe page to a Flight payload, collecting render errors. */
+async function renderPageToFlight(
+  token: string | undefined,
+): Promise<FlightResult> {
+  // Required, not imported: an `import` would be hoisted above the doMock calls.
+  const { default: UnsubscribePage } = require("../page") as {
+    default: (props: {
+      params: Promise<{ locale: string }>;
+      searchParams: Promise<{ t?: string }>;
+    }) => Promise<ReactElement>;
+  };
+
+  const errors: string[] = [];
+  const chunks: string[] = [];
+  await new Promise<void>((resolve, reject) => {
+    const destination = new Writable({
+      write(chunk: Buffer, _encoding, done) {
+        chunks.push(chunk.toString());
+        done();
+      },
+      final(done) {
+        done();
+        resolve();
+      },
+    });
+    destination.on("error", reject);
+    flight
+      .renderToPipeableStream(
+        <UnsubscribePage
+          params={Promise.resolve({ locale: "en" })}
+          searchParams={Promise.resolve(
+            token === undefined ? {} : { t: token },
+          )}
+        />,
+        CLIENT_MANIFEST,
+        { onError: (error) => void errors.push(String(error)) },
+      )
+      .pipe(destination);
+  });
+  return { errors, payload: chunks.join("") };
+}
+
+describe("/[locale]/unsubscribe crosses the RSC → client boundary cleanly", () => {
+  it("serializes with a token: nothing callable is handed to the island", async () => {
+    const { errors, payload } = await renderPageToFlight("tok_1");
+    expect(errors).toEqual([]);
+    expect(payload).toContain("unsubscribe-page");
+  });
+
+  it("serializes with no token", async () => {
+    const { errors } = await renderPageToFlight(undefined);
+    expect(errors).toEqual([]);
+  });
+});