create-ailk 0.18.0 → 0.19.1

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

@@ -1,367 +1,26 @@
 /**
- * /[locale]/account/settings — User settings (#7430, spec 7423 U4 · D10,
- * D10a; DESIGN.md §5.12a's section content).
+ * /[locale]/account/settings — redirects to User settings › General (#8232,
+ * spec docs/specs/8232-member-settings-account-general-and-spec.md D8).
  *
- * RSC, inside the account layout's SignedInShell with the rail visible
- * (D10a — a member's rail has one row, so a separate no-rail frame would add
- * a step for nothing). One page of anchored sections — the For-you items
- * link to `#general` and `#billing`:
+ * Settings is four tabs since #8339 — General · Security · Notifications ·
+ * Billing — and this one-page, anchored route (#7430) only forwards. A URL
+ * fragment never reaches the server, so `#billing` cannot be redirected
+ * here: the browser carries it across this redirect, and General's
+ * `BillingAnchor` sends it on to Billing; `#general` lands on General as it
+ * is. The hub's authorize step still sends an unverified person here
+ * (`VERIFY_EMAIL_PATH`), and this redirect carries them on.
  *
- *   - General — color mode (only when the site's theme defines more than
- *     one mode), the email read-only, and the name the member sets and edits
- *     (an accepted applicant arrives with none, #7418).
- *   - Security — the sign-in methods this site has configured; a Password
- *     row only when the password method is on.
- *   - Notifications — a note until a preference store exists.
- *   - Privacy — the cookie settings (`/privacy#cookie-settings`, since the
- *     account area carries no consent Banner, D4) and "Request account
- *     deletion", which files a Support request of kind `deletion`.
- *   - Billing — only when `subscription.me()` answers a status or an
- *     available portal; absent on `status: null` + no portal, and on any
- *     401/403/404 (the commerce-disabled build answers 404).
- *   - Then any section a module contributes (`accountSettingsSections`).
- *
- * On a spoke that signs in through its hub (`SIGN_IN_PROVIDER === "hub"`,
- * #7894 D10) the account belongs to the hub: the name is a read-only row,
- * Security says sign-in happens on the hub, and both the name edit and the
- * deletion request are a link to the hub's own account settings — so a
- * request about a hub account never lands in this spoke's inbox
- * (SEC-7894-11). Billing is absent there because its read answers 404.
- *
- * No Credentials, Scope, Organizations or Credits section: those are an
- * agent's or an operator's (§5.12a), never a member's.
+ * The directory keeps the one file General reuses unchanged: `theme-modes.ts`.
  */
 
-import { subscription, type SubscriptionMeResponse } from "@working-theory/api-client";
 import { localeHref } from "@working-theory/ui";
-import { DescriptionList } from "@working-theory/ui/blocks";
-import { Button, Heading, Link, Text } from "@working-theory/ui/primitives";
-import type { Metadata } from "next";
-import { getTranslations } from "next-intl/server";
-import type { ReactElement, ReactNode } from "react";
-
-import { accountSettingsSections } from "../../../../../lib/account-config";
-import { getActiveProviderIds } from "../../../../../lib/auth-env";
-import { hubSessionConfig } from "../../../../../lib/hub-session/config";
-import { SIGN_IN_PROVIDER } from "../../../../../lib/topology.generated";
-import { accountSession, logReadFailure } from "../account-data";
-import { openBillingPortal } from "../actions";
-
-import { ColorModeSetting } from "./color-mode";
-import { DeletionRequest } from "./deletion-request";
-import { NameForm } from "./name-form";
-import { siteThemeModeCount } from "./theme-modes";
+import { redirect } from "next/navigation";
 
 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.title"), description: t("settings.lead") };
-}
-
-/** The section role DESIGN.md §5.12 names: a title, a muted subtitle, then the fields. */
-function Section({
-  id,
-  title,
-  lead,
-  children,
-}: {
-  id: string;
-  title: string;
-  lead?: string;
-  children: ReactNode;
-}): ReactElement {
-  return (
-    <section
-      id={id}
-      aria-labelledby={`${id}-title`}
-      className="flex scroll-mt-8 flex-col gap-4 border-t border-(--color-border) pt-8"
-      data-testid={`account-settings-${id}`}
-    >
-      <div>
-        <Heading level={2} visual={4} id={`${id}-title`}>
-          {title}
-        </Heading>
-        {lead ? (
-          <Text as="p" variant="body-sm" tone="muted" className="mt-1">
-            {lead}
-          </Text>
-        ) : null}
-      </div>
-      {children}
-    </section>
-  );
-}
-
-/** The sign-in methods this deployment has configured, as message keys. */
-const METHOD_KEYS: Record<string, string> = {
-  google: "settings.security.google",
-  github: "settings.security.github",
-  "magic-link": "settings.security.magicLink",
-  email: "settings.security.password",
-};
-
-/** The hub's own account settings page, on a spoke that signs in through it. */
-function hubSettingsHref(): string | null {
-  const config = hubSessionConfig();
-  return config === null ? null : new URL("/account/settings", config.hubOrigin).toString();
-}
-
-/** A link to the hub's account settings, in place of a control that would act on the spoke. */
-function HubSettingsLink({
-  href,
-  label,
-  testId,
-}: {
-  href: string;
-  label: string;
-  testId: string;
-}): ReactElement {
-  return (
-    <div>
-      <Link href={href} className="inline-flex min-h-6 items-center" data-testid={testId}>
-        {label}
-      </Link>
-    </div>
-  );
-}
-
-/** The statuses with a message key; any other renders as the API sent it. */
-const KNOWN_STATUSES: ReadonlySet<string> = new Set(["trialing", "active", "past_due", "canceled"]);
-
-/**
- * Billing's read: `null` on any non-2xx — 401/403/404 by D10 — and a failed
- * read leaves the section out rather than failing the whole page. A failure
- * other than those three is logged, so it is not silent to the operator.
- */
-async function readSubscription(
-  init: { headers: Record<string, string> },
-): Promise<SubscriptionMeResponse | null> {
-  try {
-    const res = await subscription.me(init);
-    if (res.ok) return res.body;
-    if (![401, 403, 404].includes(res.status)) {
-      console.error(`[account] read failed source=billing status=${res.status}`);
-    }
-    return null;
-  } catch (err) {
-    logReadFailure("billing", err);
-    return null;
-  }
-}
-
-export default async function AccountSettingsPage({ params }: Props): Promise<ReactElement> {
+export default async function AccountSettingsPage({ params }: Props): Promise<never> {
   const { locale } = await params;
-  const t = await getTranslations({ locale, namespace: "account" });
-  const session = await accountSession(locale);
-
-  // Unreachable behind the (authed) gate; a session that expired between
-  // the layout and the page renders the heading alone.
-  if (!session) {
-    return (
-      <div className="max-w-3xl py-8" data-testid="account-settings">
-        <Heading level={1} visual={2}>
-          {t("settings.title")}
-        </Heading>
-      </div>
-    );
-  }
-
-  const { ctx } = session;
-  const sub = await readSubscription(ctx.init);
-  const showBilling = sub !== null && (sub.status !== null || sub.portalAvailable);
-  const methods = getActiveProviderIds().filter((id) => id in METHOD_KEYS);
-  const viaHub = SIGN_IN_PROVIDER === "hub";
-  const hubHref = viaHub ? hubSettingsHref() : null;
-
-  return (
-    <div className="flex max-w-3xl flex-col gap-8 py-8" data-testid="account-settings">
-      <div>
-        <Heading level={1} visual={2}>
-          {t("settings.title")}
-        </Heading>
-        <Text as="p" variant="body-sm" tone="muted" className="mt-block-tight">
-          {t("settings.lead")}
-        </Text>
-      </div>
-
-      <Section id="general" title={t("settings.general.title")} lead={t("settings.general.lead")}>
-        {siteThemeModeCount() > 1 ? (
-          <div className="flex flex-col items-start gap-2">
-            <Text as="p" variant="body-sm" className="font-medium">
-              {t("settings.general.colorMode")}
-            </Text>
-            <ColorModeSetting
-              labels={{
-                title: t("settings.general.colorMode"),
-                light: t("settings.general.light"),
-                auto: t("settings.general.auto"),
-                dark: t("settings.general.dark"),
-              }}
-            />
-          </div>
-        ) : null}
-        <DescriptionList
-          items={[
-            {
-              label: t("settings.general.email"),
-              value: ctx.user.email,
-              "data-testid": "account-settings-email",
-            },
-            ...(viaHub && ctx.user.name
-              ? [
-                  {
-                    label: t("settings.general.name"),
-                    value: ctx.user.name,
-                    "data-testid": "account-settings-name",
-                  },
-                ]
-              : []),
-          ]}
-        />
-        {viaHub ? (
-          hubHref !== null ? (
-            <HubSettingsLink
-              href={hubHref}
-              label={t("settings.general.manageOnHub")}
-              testId="account-settings-manage-on-hub"
-            />
-          ) : null
-        ) : (
-          <NameForm
-            initialName={ctx.user.name ?? ""}
-            labels={{
-              name: t("settings.general.name"),
-              placeholder: t("settings.general.namePlaceholder"),
-              save: t("settings.general.save"),
-              saving: t("settings.general.saving"),
-              saved: t("settings.general.saved"),
-              unsaved: t("settings.general.unsaved"),
-              clean: t("settings.general.clean"),
-              required: t("settings.general.nameRequired"),
-              error: t("settings.general.saveError"),
-            }}
-          />
-        )}
-      </Section>
-
-      <Section id="security" title={t("settings.security.title")} lead={t("settings.security.lead")}>
-        {viaHub ? (
-          <Text as="p" variant="body-sm" tone="muted">
-            {t("settings.security.viaHub")}
-          </Text>
-        ) : methods.length > 0 ? (
-          <div className="flex flex-col gap-2">
-            <Text as="p" variant="body-sm" className="font-medium">
-              {t("settings.security.methods")}
-            </Text>
-            <DescriptionList
-              items={methods.map((id) => ({
-                label: ctx.t(METHOD_KEYS[id]!),
-                value: t("settings.security.available"),
-                "data-testid": `account-signin-${id}`,
-              }))}
-            />
-          </div>
-        ) : (
-          <Text as="p" variant="body-sm" tone="muted">
-            {t("settings.security.none")}
-          </Text>
-        )}
-      </Section>
-
-      <Section
-        id="notifications"
-        title={t("settings.notifications.title")}
-        lead={t("settings.notifications.lead")}
-      >
-        <Text as="p" variant="body-sm" tone="muted">
-          {t("settings.notifications.placeholder")}
-        </Text>
-      </Section>
-
-      <Section id="privacy" title={t("settings.privacy.title")} lead={t("settings.privacy.lead")}>
-        <div>
-          <Link
-            href={localeHref(locale, "/privacy#cookie-settings")}
-            className="inline-flex min-h-6 items-center"
-            data-testid="account-cookie-settings"
-          >
-            {t("settings.privacy.cookies")}
-          </Link>
-        </div>
-        {viaHub ? (
-          hubHref !== null ? (
-            <HubSettingsLink
-              href={hubHref}
-              label={t("settings.general.manageOnHub")}
-              testId="account-privacy-manage-on-hub"
-            />
-          ) : null
-        ) : (
-          <div className="flex flex-col gap-2">
-            <Text as="p" variant="body-sm" tone="muted">
-              {t("settings.privacy.deletionLead")}
-            </Text>
-            <DeletionRequest
-              labels={{
-                action: t("settings.privacy.deletion"),
-                subject: t("settings.privacy.deletionSubject"),
-                message: t("settings.privacy.deletionMessage"),
-                sent: t("settings.privacy.deletionSent"),
-                error: t("settings.privacy.deletionError"),
-              }}
-            />
-          </div>
-        )}
-      </Section>
-
-      {showBilling ? (
-        <Section id="billing" title={t("settings.billing.title")} lead={t("settings.billing.lead")}>
-          {sub.status !== null || sub.accessRevokesAt ? (
-            <DescriptionList
-              items={[
-                ...(sub.status !== null
-                  ? [
-                      {
-                        label: t("settings.billing.status"),
-                        value: KNOWN_STATUSES.has(sub.status)
-                          ? ctx.t(`settings.billing.statuses.${sub.status}`)
-                          : sub.status,
-                      },
-                    ]
-                  : []),
-                ...(sub.accessRevokesAt
-                  ? [
-                      {
-                        label: t("settings.billing.accessRevokesAt"),
-                        value: new Intl.DateTimeFormat(locale, { dateStyle: "medium" }).format(
-                          new Date(sub.accessRevokesAt),
-                        ),
-                      },
-                    ]
-                  : []),
-              ]}
-            />
-          ) : null}
-          {sub.portalAvailable ? (
-            <form action={openBillingPortal}>
-              <Button type="submit" variant="secondary" data-testid="account-billing-manage">
-                {t("settings.billing.manage")}
-              </Button>
-            </form>
-          ) : null}
-        </Section>
-      ) : null}
-
-      {accountSettingsSections.map((section) => (
-        <Section key={section.id} id={section.id} title={ctx.t(section.title)}>
-          {section.render(ctx)}
-        </Section>
-      ))}
-    </div>
-  );
+  redirect(localeHref(locale, "/account/general"));
 }

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

@@ -0,0 +1,116 @@
+/**
+ * settings-frame.tsx — User settings' four tabs, General · Security ·
+ * Notifications · Billing (#8339 D7; builds on #8232 D1).
+ *
+ * `memberSettingsFrame` supplies the member's half of the shared
+ * `AccountSettingsFrame` (@working-theory/templates/account, spec 8339 D2):
+ * `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 type { ReactElement, ReactNode } from "react";
+
+/** The `next-intl` translator General/Security/Notifications/Billing each
+ * hold. Widened from `getTranslations`'s own literal-key-checked type (the
+ * `AccountTranslate` idiom, `account-data.ts`) — a settings page's own
+ * string keys are static, but the function is shared across four route
+ * files with four different generic instantiations. Call sites cast their
+ * 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). */
+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: "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: SettingsTabKey,
+): Omit<AccountSettingsFrameProps, "name" | "children"> {
+  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: true,
+    back: { label: t("settings.back"), href: localeHref(locale, "/account") },
+    railLabel: t("settings.title"),
+    accountLabel: t("settings.account"),
+    tabs,
+    active,
+  };
+}
+
+/** The section role DESIGN.md §5.12 names: a title, a muted subtitle, then the fields. */
+export function SettingsSection({
+  id,
+  title,
+  lead,
+  children,
+}: {
+  id: string;
+  title: string;
+  lead?: string;
+  children: ReactNode;
+}): ReactElement {
+  return (
+    <section
+      id={id}
+      aria-labelledby={`${id}-title`}
+      className="flex scroll-mt-8 flex-col gap-4 border-t border-(--color-border) pt-8"
+      data-testid={`account-settings-${id}`}
+    >
+      <div>
+        <Heading level={2} visual={4} id={`${id}-title`}>
+          {title}
+        </Heading>
+        {lead ? (
+          <Text as="p" variant="body-sm" tone="muted" className="mt-1">
+            {lead}
+          </Text>
+        ) : null}
+      </div>
+      {children}
+    </section>
+  );
+}

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

@@ -0,0 +1,37 @@
+/**
+ * account/sign-in-method.ts (server code) — how a member signs in, for User settings ›
+ * 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
+ * `billing-source.ts`): no other file under the account tree tests
+ * `SIGN_IN_PROVIDER`, `TOPOLOGY` or `SIGN_IN_ENABLED`.
+ *
+ *   - A spoke that signs in through its hub (`SIGN_IN_PROVIDER === "hub"`,
+ *     #7894) answers `hub`, with the hub's host when it is configured.
+ *   - Any other site answers `site`, with the sign-in methods this deployment
+ *     has configured. Better Auth's session does not say which one this
+ *     member used, so the list is the deployment's (C7).
+ */
+
+import { getActiveProviderIds } from "../../../../lib/auth-env";
+import { hubSessionConfig } from "../../../../lib/hub-session/config";
+import { SIGN_IN_PROVIDER } from "../../../../lib/topology.generated";
+
+/** The sign-in methods General names, in the order it lists them. */
+export const SIGN_IN_METHODS = ["google", "github", "magic-link", "email"] as const;
+
+export type SignInMethodId = (typeof SIGN_IN_METHODS)[number];
+
+export type SignInMethod =
+  | { kind: "hub"; hubHost: string | null }
+  | { kind: "site"; methods: SignInMethodId[] };
+
+export function signInMethod(): SignInMethod {
+  if (SIGN_IN_PROVIDER === "hub") {
+    const config = hubSessionConfig();
+    return { kind: "hub", hubHost: config === null ? null : new URL(config.hubOrigin).host };
+  }
+  const active = new Set(getActiveProviderIds());
+  return { kind: "site", methods: SIGN_IN_METHODS.filter((id) => active.has(id)) };
+}

package/templates/apps/web/app/[locale]/(authed)/account/support-actions.ts

@@ -4,9 +4,12 @@
  * account/support-actions.ts — the account area's Support request action.
  *
  * `submitSupportRequest` (#7430, spec 7423 D11) — files a Support request
- * (and, from User settings › Privacy, an account-deletion request) as a
- * contact lead: `POST /v1/leads/submit` with `source: "web"`, the session's
- * email and the payload `{ kind, subject, message }`. No `siteId` — the
+ * as a contact lead: `POST /v1/leads/submit` with `source: "web"`, the
+ * session's email and the payload `{ kind: "support", subject, message }`.
+ * Every request it files is `support`, whatever is posted (#8232 D12): an
+ * account-deletion request goes through `member.requestDeletion`
+ * (`profile-actions.ts`), which files it with the deployment that holds the
+ * account, so this action needs no topology test (SEC-7894-11). No `siteId` — the
  * route resolves the tenant server-side and ignores a posted one (#6203).
  * The request lands in the admin Inbox as a message. Not a `*Action`-suffixed
  * export in a `*.actions.ts` file: lead capture already has its MCP twin
@@ -21,7 +24,7 @@
 import { leads, visitorForwardHeaders } from "@working-theory/api-client";
 import { headers } from "next/headers";
 
-import { SIGN_IN_PROVIDER, readSession } from "../../../../lib/topology.generated";
+import { readSession } from "../../../../lib/topology.generated";
 
 /** PII-safe error identity for logs (the `checkout.actions.ts` idiom: `err.name` only). */
 function errorName(err: unknown): string {
@@ -53,7 +56,7 @@ function isNotConfigured(res: { status: number; body: unknown }): boolean {
 }
 
 /**
- * Files the signed-in member's Support (or deletion) request. The email is
+ * Files the signed-in member's Support request. The email is
  * the session's own — never a form field — so a request always names the
  * person who sent it.
  */
@@ -61,10 +64,6 @@ export async function submitSupportRequest(
   _prev: SupportRequestState,
   formData: FormData,
 ): Promise<SupportRequestState> {
-  // A hub sign-in spoke's account belongs to the hub, whose own settings take
-  // a deletion request (#7894 D10, SEC-7894-11): here it can only be support.
-  const kind =
-    field(formData, "kind") === "deletion" && SIGN_IN_PROVIDER !== "hub" ? "deletion" : "support";
   const subject = field(formData, "subject");
   const message = field(formData, "message");
   if (!subject || !message || subject.length > MAX_SUBJECT || message.length > MAX_MESSAGE) {
@@ -79,7 +78,7 @@ export async function submitSupportRequest(
     const body = {
       source: "web",
       email: session.user.email,
-      payload: { kind, subject, message },
+      payload: { kind: "support", subject, message },
     };
     // #7394 — a spoke counts the request against the visitor's own budget.
     const forwarded = visitorForwardHeaders(

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

@@ -27,6 +27,7 @@ import "../globals.css";
 
 import { Telemetry, VerificationMeta } from "@working-theory/analytics";
 import { MarketingShell } from "@working-theory/templates/shells";
+import { themeToShellCss } from "@working-theory/theme";
 import { Link, isRtl, localeHref } from "@working-theory/ui";
 import { BRAND_PATHS, LocaleSwitcherNav } from "@working-theory/ui/blocks";
 import {
@@ -58,7 +59,11 @@ import { assertEnabledLocale } from "../../lib/locale-guard";
 import { footerColumns, navItems } from "../../lib/nav-config";
 import { getOgImageUrl } from "../../lib/og";
 import { backLinkHref } from "../../lib/profile-back-link";
-import { COPYRIGHT_HOLDER, SITE_NAME } from "../../lib/site-brand";
+import {
+  COPYRIGHT_HOLDER,
+  SITE_DESCRIPTION,
+  SITE_NAME,
+} from "../../lib/site-brand";
 import { siteChrome, type SiteChrome } from "../../lib/site-chrome";
 import { siteLogo } from "../../lib/site-logo";
 // Registers the `_site.mdx` identity with page-renderer at module load, so
@@ -126,6 +131,11 @@ const NAV_CLIENT_ACTION_FLOW: NavActionFlow["flow"] = {
   action: "#",
 };
 
+// The member account shell's token reset (#8337 D3) — a package constant
+// (no site, request or user input), computed once at module scope and
+// emitted only on account routes, after `theme-vars`, below.
+const SHELL_CSS = themeToShellCss();
+
 // ── Theme helpers ────────────────────────────────────────────────────────────
 
 /**
@@ -214,10 +224,10 @@ export async function generateMetadata(): Promise<Metadata> {
 
   return {
     title: SITE_NAME,
-    description: "AX-first OSS template — API + MCP as canonical surfaces.",
+    description: SITE_DESCRIPTION,
     openGraph: {
       title: SITE_NAME,
-      description: "AX-first OSS template — API + MCP as canonical surfaces.",
+      description: SITE_DESCRIPTION,
       type: "website",
       url: baseUrl,
       images: [ogImageUrl],
@@ -225,7 +235,7 @@ export async function generateMetadata(): Promise<Metadata> {
     twitter: {
       card: "summary_large_image",
       title: SITE_NAME,
-      description: "AX-first OSS template — API + MCP as canonical surfaces.",
+      description: SITE_DESCRIPTION,
       images: [ogImageUrl],
     },
     ...getStealthRobots(),
@@ -617,6 +627,15 @@ export default async function LocaleLayout({
           data-ailk="theme-vars"
           dangerouslySetInnerHTML={{ __html: themeHead.css }}
         />
+        {/* The member account shell's token reset (#8337 D3) — account
+            routes only, after theme-vars, so :has([data-ailk-shell])'s
+            higher specificity wins whatever a browser's :has() support. */}
+        {isAccountRoute ? (
+          <style
+            data-ailk="shell-vars"
+            dangerouslySetInnerHTML={{ __html: SHELL_CSS }}
+          />
+        ) : null}
         {/* Favicons — single brand mark (theme-independent), PNG fallbacks, ICO legacy */}
         <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
         <link