create-ailk 0.19.1 → 0.20.0

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

@@ -0,0 +1,226 @@
+/**
+ * /[locale]/account/privacy — User settings › Privacy (#8438 D14, NEW).
+ *
+ * RSC, outside the account layout's SignedInShell (#8430), in the member's
+ * settings frame (D7) — standalone, the Admin's shape. In DOM order:
+ *
+ *   1. account-privacy-summary — one line with a link to the site's
+ *      privacy policy.
+ *   2. account-privacy-cookies — the current cookie-banner choice, read
+ *      from the request's OWN `ailk-consent` cookie (never the ledger —
+ *      the cookie stays the operative switch, C3), and a Change link
+ *      (moved here from Notifications, #8438 D15) to
+ *      `/privacy#cookie-settings`.
+ *   3. account-privacy-consents — one `ConsentSwitchList` row per
+ *      `area: "data"` purpose, or the "no other data-use consents" line.
+ *   4. account-privacy-agreements — a read-only `AgreementList` of every
+ *      agreement (`service_terms`, `account_terms`, …), or "None yet".
+ *   5. account-deletion — moved unchanged from General (#8438 D16).
+ *
+ * Sections 3 and 4 read `GET /v1/member/consents`; a failed read shows one
+ * line in their place and sections 1, 2 and 5 still render (D14).
+ */
+
+import { member } from "@working-theory/api-client";
+import {
+  AccountSettingsFrame,
+  AccountSettingsPane,
+  AgreementList,
+  ConsentSwitchList,
+} from "@working-theory/templates/account";
+import { localeHref } from "@working-theory/ui";
+import { Heading, Link, Text } from "@working-theory/ui/primitives";
+import type { Metadata } from "next";
+import { cookies } from "next/headers";
+import { getTranslations } from "next-intl/server";
+import type { ReactElement } from "react";
+
+import { accountSession } from "../account-data";
+import { DeletionRequest } from "../general/deletion-request";
+import { loadProfileSource } from "../general/profile-source";
+import { memberSettingsFrame, type Translate } from "../settings-frame";
+
+import { setConsentAction } from "./actions";
+
+/** The cookie banner's own choice cookie (`layout.tsx`'s `CONSENT_COOKIE_NAME`, #5557). */
+const CONSENT_COOKIE_NAME = "ailk-consent";
+
+interface Props {
+  params: Promise<{ locale: string }>;
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "account" });
+  return { title: t("settings.privacy.title"), description: t("settings.privacy.lead") };
+}
+
+export default async function AccountPrivacyPage({ params }: Props): Promise<ReactElement> {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "account" });
+  const session = await accountSession(locale);
+  const frame = memberSettingsFrame(locale, t as unknown as Translate, "privacy");
+
+  // Unreachable behind the (authed) gate; a session that expired between
+  // the layout and the page renders the pane's title alone.
+  if (!session) {
+    return (
+      <AccountSettingsFrame {...frame} name="">
+        <AccountSettingsPane
+          id="account-settings-privacy"
+          title={t("settings.privacy.title")}
+          lead={t("settings.privacy.lead")}
+        >
+          {null}
+        </AccountSettingsPane>
+      </AccountSettingsFrame>
+    );
+  }
+
+  const { ctx } = session;
+  const name = ctx.user.name || ctx.user.email;
+  const source = await loadProfileSource(ctx);
+
+  let cookieChoice: "accepted" | "declined" | null;
+  try {
+    const value = (await cookies()).get(CONSENT_COOKIE_NAME)?.value;
+    cookieChoice = value === "accepted" || value === "declined" ? value : null;
+  } catch {
+    cookieChoice = null;
+  }
+
+  let dataRows: { id: string; label: string; description?: string; granted: boolean; dateLine?: string }[] = [];
+  let agreementRows: { id: string; statement: string; version: number; acceptedLine?: string }[] = [];
+  let consentsAvailable = true;
+  try {
+    const res = await member.consents(ctx.init, { locale });
+    if (res.ok) {
+      dataRows = res.body.purposes
+        .filter((purpose) => purpose.area === "data")
+        .map((purpose) => ({
+          id: purpose.id,
+          label: purpose.statement,
+          granted: purpose.effective,
+          ...(purpose.description ? { description: purpose.description } : {}),
+          ...(purpose.state
+            ? {
+                dateLine: purpose.state.granted
+                  ? t("settings.privacy.given", { date: formatDate(purpose.state.at, locale) })
+                  : t("settings.privacy.withdrawn", { date: formatDate(purpose.state.at, locale) }),
+              }
+            : {}),
+        }));
+      agreementRows = res.body.purposes
+        .filter((purpose) => purpose.kind === "agreement")
+        .map((purpose) => ({
+          id: purpose.id,
+          statement: purpose.statement,
+          version: purpose.policyVersion,
+          ...(purpose.state?.granted
+            ? { acceptedLine: t("settings.privacy.accepted", { date: formatDate(purpose.state.at, locale) }) }
+            : {}),
+        }));
+    } else {
+      consentsAvailable = false;
+    }
+  } catch {
+    consentsAvailable = false;
+  }
+
+  return (
+    <AccountSettingsFrame {...frame} name={name}>
+      <AccountSettingsPane
+        id="account-settings-privacy"
+        title={t("settings.privacy.title")}
+        lead={t("settings.privacy.lead")}
+      >
+        <div data-testid="account-privacy-summary" className="flex flex-wrap items-baseline gap-1">
+          <Text as="span" variant="body-sm">
+            {t("settings.privacy.summary")}
+          </Text>
+          <Link href={localeHref(locale, "/privacy")} data-testid="account-privacy-policy">
+            {t("settings.privacy.policyLink")}
+          </Link>
+        </div>
+
+        <div data-testid="account-privacy-cookies" className="flex flex-col gap-1">
+          <Heading level={2} visual={4} className="!text-body-sm !font-medium">
+            {t("settings.privacy.cookiesTitle")}
+          </Heading>
+          <div className="flex flex-wrap items-baseline gap-3">
+            <Text as="span" variant="body-sm" tone="muted">
+              {cookieChoice === "accepted"
+                ? t("settings.privacy.cookiesAccepted")
+                : cookieChoice === "declined"
+                  ? t("settings.privacy.cookiesDeclined")
+                  : t("settings.privacy.cookiesUnset")}
+            </Text>
+            <Link
+              href={localeHref(locale, "/privacy#cookie-settings")}
+              className="inline-flex min-h-6 items-center"
+              data-testid="account-cookie-settings"
+            >
+              {t("settings.privacy.cookiesChange")}
+            </Link>
+          </div>
+        </div>
+
+        {consentsAvailable ? (
+          <>
+            <div data-testid="account-privacy-consents" className="flex flex-col gap-2">
+              <Heading level={2} visual={4} className="!text-body-sm !font-medium">
+                {t("settings.privacy.consentsTitle")}
+              </Heading>
+              <ConsentSwitchList
+                rows={dataRows}
+                onChange={setConsentAction}
+                emptyLine={t("settings.privacy.consentsEmpty")}
+                testIdPrefix="account-privacy-data-consent"
+              />
+            </div>
+
+            <div data-testid="account-privacy-agreements" className="flex flex-col gap-2">
+              <Heading level={2} visual={4} className="!text-body-sm !font-medium">
+                {t("settings.privacy.agreementsTitle")}
+              </Heading>
+              <AgreementList
+                rows={agreementRows}
+                notAcceptedLine={t("settings.privacy.agreementsEmpty")}
+                emptyLine={t("settings.privacy.agreementsEmpty")}
+                testIdPrefix="account-privacy-agreement"
+              />
+            </div>
+          </>
+        ) : (
+          <span data-testid="account-privacy-unavailable">
+            <Text as="p" variant="body-sm" tone="muted">
+              {t("settings.privacy.unavailable")}
+            </Text>
+          </span>
+        )}
+
+        <div data-testid="account-deletion">
+          <DeletionRequest
+            via={source.via}
+            supportHref={localeHref(locale, "/account/support")}
+            labels={{
+              lead: t("settings.privacy.deletionLead"),
+              action: t("settings.privacy.deletion"),
+              sentSite: t("settings.privacy.deletionSentSite"),
+              sentHub: t("settings.privacy.deletionSentHub"),
+              unverified: t("settings.privacy.deletionUnverified"),
+              unavailable: t("settings.privacy.deletionUnavailable"),
+              error: t("settings.privacy.deletionError"),
+              viaSupport: t("settings.privacy.deletionViaSupport"),
+              supportLink: t("settings.privacy.deletionSupportLink"),
+            }}
+          />
+        </div>
+      </AccountSettingsPane>
+    </AccountSettingsFrame>
+  );
+}
+
+function formatDate(iso: string, locale: string): string {
+  return new Intl.DateTimeFormat(locale, { dateStyle: "medium" }).format(new Date(iso));
+}

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

@@ -25,7 +25,7 @@
 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
@@ -36,12 +36,14 @@ 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) — each one a
- * route that renders outside the account shell (#8430, #8441). */
+/** 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;
 

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)