create-ailk 0.11.2 → 0.11.4

package/templates/apps/web/app/[locale]/(auth)/sign-in/sign-in-text.ts

@@ -0,0 +1,57 @@
+/**
+ * The `SignInCard`'s translated copy, resolved on the server (#7435 § D9).
+ *
+ * One helper so `/sign-in` and the `(authed)` gate render the SAME labels from
+ * the same `signIn` keys — the gate composes `SignInCard` when the email
+ * sign-in link is on, and a second copy of this object would drift.
+ */
+
+import type { AuthCardLabels } from "@working-theory/ui/blocks";
+import { getTranslations } from "next-intl/server";
+
+import type { SignInEmailLinkLabels } from "./sign-in-card";
+
+export interface SignInCardText {
+  labels: AuthCardLabels;
+  notConfiguredSubhead: string;
+  errorLabels: { signInFailed: string; providerFailed: string };
+  emailLinkLabels: SignInEmailLinkLabels;
+  /** The notice for a link that failed verification (`?error=INVALID_TOKEN`). */
+  emailLinkExpired: string;
+}
+
+export async function resolveSignInCardText(
+  locale: string,
+): Promise<SignInCardText> {
+  const t = await getTranslations({ locale, namespace: "signIn" });
+  return {
+    labels: {
+      signInHeading: t("heading"),
+      signInSubhead: t("subhead"),
+      ssoPrefix: t("ssoPrefix"),
+      google: t("google"),
+      github: t("github"),
+      email: t("email"),
+      password: t("password"),
+      forgot: t("forgot"),
+      signInSubmit: t("submit"),
+      orContinue: t("orContinue"),
+      emailLinkSubmit: t("emailLinkSubmit"),
+      emailLinkDivider: t("emailLinkDivider"),
+    },
+    notConfiguredSubhead: t("notConfiguredSubhead"),
+    errorLabels: {
+      signInFailed: t("signInFailed"),
+      providerFailed: t("providerFailed"),
+    },
+    emailLinkLabels: {
+      sentHeading: t("emailLinkSentHeading"),
+      sentSubhead: t("emailLinkSentSubhead"),
+      sentBody: t("emailLinkSentBody"),
+      backToSignIn: t("emailLinkBack"),
+      failed: t("emailLinkFailed"),
+      rateLimited: t("emailLinkRateLimited"),
+    },
+    emailLinkExpired: t("emailLinkExpired"),
+  };
+}

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

@@ -9,17 +9,47 @@
  *   5. AILK_AUTH_REQUIRED has no effect on the guard (D9/AC7).
  *   6. SignInGate links to `/sign-in?next=<pathname>` in both the providers
  *      and the zero-provider branches (#4984).
+ *   7. The providers are resolved on the SERVER, from the real provider env,
+ *      by the layout and handed to the client gate as a prop — the gate reads
+ *      no env of its own (#7419: in the browser that env is always empty, so
+ *      the gate always claimed "Sign-in is not configured").
+ *   8. With the email sign-in link on (#7435 § D9), the gate composes the
+ *      sign-in card — Google + "Email me a sign-in link" — in place of
+ *      AuthPanel and its inert password form; off, it renders as before.
+ *   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.
  */
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+
 import { render, screen } from "@testing-library/react";
+import { getTranslations } from "next-intl/server";
+
+import en from "../../../../messages/en.json";
 
 jest.mock("next-intl/server", () => ({
   __esModule: true,
   getTranslations: jest.fn().mockResolvedValue((key: string) => `copy:${key}`),
 }));
 
+// The enabled locales `isAccountPath()` strips a prefix against — the same
+// mock the locale layout's suite uses (production reads the baked env var).
+jest.mock("@working-theory/web-i18n", () => ({
+  __esModule: true,
+  readLocales: jest.fn().mockReturnValue(["en"]),
+}));
+
+// The request's `x-pathname` (forwarded by middleware.ts) — unset by default,
+// the way a direct render with no middleware sees it.
+let mockRequestPathname: string | undefined;
 jest.mock("next/headers", () => ({
   __esModule: true,
-  headers: jest.fn().mockResolvedValue(new Headers()),
+  headers: jest.fn(async () => {
+    const h = new Headers();
+    if (mockRequestPathname) h.set("x-pathname", mockRequestPathname);
+    return h;
+  }),
 }));
 
 const mockGetSession = jest.fn();
@@ -31,13 +61,6 @@ jest.mock("../../../../auth", () => ({
   },
 }));
 
-const mockGetActiveProviderIds = jest.fn();
-// eslint-disable-next-line no-restricted-syntax -- #507: mock-internal rewrite pending; auth-env.ts is a pure env-introspection module with no external boundary to mock instead.
-jest.mock("../../../../lib/auth-env", () => ({
-  __esModule: true,
-  getActiveProviderIds: () => mockGetActiveProviderIds(),
-}));
-
 const mockUsePathname = jest.fn();
 jest.mock("next/navigation", () => ({
   __esModule: true,
@@ -53,11 +76,43 @@ jest.mock("better-auth/react", () => ({
 import AuthedLayout from "../layout";
 import { SignInGate } from "../sign-in-gate";
 
+// The provider env `lib/auth-env` reads. The layout tests drive it for real —
+// no mock of auth-env — so they exercise the server-side resolution end to end.
+const PROVIDER_ENV_KEYS = [
+  "GOOGLE_CLIENT_ID",
+  "GOOGLE_CLIENT_SECRET",
+  "GITHUB_CLIENT_ID",
+  "GITHUB_CLIENT_SECRET",
+  "AUTH_EMAIL_SERVER",
+  "AUTH_EMAIL_FROM",
+  // #7435 § D1 — the email sign-in link's four conjuncts.
+  "AUTH_EMAIL_WEBHOOK_SECRET",
+  "BETTER_AUTH_URL",
+  "BETTER_AUTH_SECRET",
+] as const;
+
+const ORIGINAL_ENV = process.env;
+
+beforeEach(() => {
+  process.env = { ...ORIGINAL_ENV };
+  for (const key of PROVIDER_ENV_KEYS) delete process.env[key];
+  mockRequestPathname = undefined;
+});
+
+afterAll(() => {
+  process.env = ORIGINAL_ENV;
+});
+
+function configureGoogle(): void {
+  process.env.GOOGLE_CLIENT_ID = "google-client-id";
+  process.env.GOOGLE_CLIENT_SECRET = "google-client-secret";
+}
+
 describe("AuthedLayout — the (authed) session guard", () => {
   beforeEach(() => {
     mockGetSession.mockReset();
-    mockGetActiveProviderIds.mockReset().mockReturnValue(["google"]);
     mockUsePathname.mockReset().mockReturnValue("/en/waitlist");
+    configureGoogle();
   });
 
   it("renders SignInGate when there is no session", async () => {
@@ -103,7 +158,6 @@ describe("AuthedLayout — the (authed) session guard", () => {
   });
 
   it("ignores AILK_AUTH_REQUIRED entirely — never read by the guard", async () => {
-    const original = process.env.AILK_AUTH_REQUIRED;
     process.env.AILK_AUTH_REQUIRED = "0";
     mockGetSession.mockResolvedValue(null);
     const element = await AuthedLayout({
@@ -112,7 +166,48 @@ describe("AuthedLayout — the (authed) session guard", () => {
     });
     render(element);
     expect(screen.getByTestId("sign-in-gate")).toBeInTheDocument();
-    process.env.AILK_AUTH_REQUIRED = original;
+  });
+
+  // ── #7419 — providers resolved server-side, from the real env ─────────────
+
+  it("renders the Google sign-in control when Google is configured server-side (#7419 AC-1)", async () => {
+    mockGetSession.mockResolvedValue(null);
+    const element = await AuthedLayout({
+      params: Promise.resolve({ locale: "en" }),
+      children: <div data-testid="dashboard-content" />,
+    });
+    render(element);
+    expect(screen.getByTestId("auth-panel-provider-google")).toBeInTheDocument();
+    expect(screen.queryByTestId("auth-panel-provider-github")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("sign-in-gate-empty")).not.toBeInTheDocument();
+  });
+
+  it("renders the not-configured EmptyState when no provider is configured (#7419 AC-2)", async () => {
+    for (const key of PROVIDER_ENV_KEYS) delete process.env[key];
+    mockGetSession.mockResolvedValue(null);
+    const element = await AuthedLayout({
+      params: Promise.resolve({ locale: "en" }),
+      children: <div data-testid="dashboard-content" />,
+    });
+    render(element);
+    expect(screen.getByTestId("sign-in-gate-empty")).toBeInTheDocument();
+    expect(screen.getByText("copy:emptyHeadline")).toBeInTheDocument();
+    expect(screen.queryByTestId("auth-panel-card")).not.toBeInTheDocument();
+  });
+
+  it("filters an unsupported provider id out before handing providers to the gate", async () => {
+    for (const key of PROVIDER_ENV_KEYS) delete process.env[key];
+    // "email" is reported by getActiveProviderIds but is not a supported
+    // AuthPanel provider (google | github) — treated as zero active providers.
+    process.env.AUTH_EMAIL_SERVER = "smtp://mail.example.test";
+    process.env.AUTH_EMAIL_FROM = "noreply@example.test";
+    mockGetSession.mockResolvedValue(null);
+    const element = await AuthedLayout({
+      params: Promise.resolve({ locale: "en" }),
+      children: <div data-testid="dashboard-content" />,
+    });
+    render(element);
+    expect(screen.getByTestId("sign-in-gate-empty")).toBeInTheDocument();
   });
 });
 
@@ -124,37 +219,59 @@ const GATE_LABELS = {
 
 describe("<SignInGate/> — the dashboard's own front door", () => {
   beforeEach(() => {
-    mockGetActiveProviderIds.mockReset().mockReturnValue(["google", "github"]);
     mockUsePathname.mockReset().mockReturnValue("/en/waitlist");
     mockSignInSocial.mockReset();
   });
 
-  it("renders AuthPanel with the active providers", () => {
-    render(<SignInGate labels={GATE_LABELS} signInPath="/sign-in" />);
+  it("renders AuthPanel with the providers it is given", () => {
+    render(
+      <SignInGate
+        labels={GATE_LABELS}
+        signInPath="/sign-in"
+        providers={["google", "github"]}
+      />,
+    );
     expect(screen.getByTestId("sign-in-gate")).toBeInTheDocument();
     expect(screen.getByTestId("auth-panel-card")).toBeInTheDocument();
+    expect(screen.getByTestId("auth-panel-provider-google")).toBeInTheDocument();
+    expect(screen.getByTestId("auth-panel-provider-github")).toBeInTheDocument();
+  });
+
+  // #7419 — the browser has no provider env. Every provider env var is unset
+  // here (the top-level beforeEach), exactly as in a browser bundle; the gate
+  // must still render the providers its server-rendered parent resolved.
+  it("renders the Google button from the prop with no provider env present (#7419)", () => {
+    render(
+      <SignInGate labels={GATE_LABELS} signInPath="/sign-in" providers={["google"]} />,
+    );
+    expect(screen.getByTestId("auth-panel-provider-google")).toBeInTheDocument();
+    expect(screen.queryByTestId("sign-in-gate-empty")).not.toBeInTheDocument();
+  });
+
+  it("starts a Google social sign-in back to the current page on click", () => {
+    render(
+      <SignInGate labels={GATE_LABELS} signInPath="/sign-in" providers={["google"]} />,
+    );
+    screen.getByTestId("auth-panel-provider-google").click();
+    expect(mockSignInSocial).toHaveBeenCalledWith({
+      provider: "google",
+      callbackURL: "/en/waitlist",
+    });
   });
 
   it("renders an EmptyState when no provider is active", () => {
-    mockGetActiveProviderIds.mockReturnValue([]);
-    render(<SignInGate labels={GATE_LABELS} signInPath="/sign-in" />);
+    render(<SignInGate labels={GATE_LABELS} signInPath="/sign-in" providers={[]} />);
     expect(screen.getByTestId("sign-in-gate-empty")).toBeInTheDocument();
     expect(screen.getByText("No providers")).toBeInTheDocument();
     expect(screen.queryByTestId("auth-panel-card")).not.toBeInTheDocument();
   });
 
-  it("filters an inactive/unsupported provider id out of the panel", () => {
-    mockGetActiveProviderIds.mockReturnValue(["email"]);
-    render(<SignInGate labels={GATE_LABELS} signInPath="/sign-in" />);
-    // "email" is reported by getActiveProviderIds but is not a supported
-    // AuthPanel provider (google | github) — treated as zero active providers.
-    expect(screen.getByTestId("sign-in-gate-empty")).toBeInTheDocument();
-  });
-
   // ── #4984 — the link to apps/web's own /sign-in page ──────────────────────
 
   it("links to /sign-in?next=<pathname> under the AuthPanel", () => {
-    render(<SignInGate labels={GATE_LABELS} signInPath="/sign-in" />);
+    render(
+      <SignInGate labels={GATE_LABELS} signInPath="/sign-in" providers={["google"]} />,
+    );
     const link = screen.getByTestId("sign-in-gate-link");
     expect(link).toHaveAttribute("href", "/sign-in?next=%2Fen%2Fwaitlist");
     expect(link).toHaveTextContent("Go to the sign-in page");
@@ -162,8 +279,7 @@ describe("<SignInGate/> — the dashboard's own front door", () => {
   });
 
   it("links to /sign-in?next=<pathname> in the zero-provider branch too", () => {
-    mockGetActiveProviderIds.mockReturnValue([]);
-    render(<SignInGate labels={GATE_LABELS} signInPath="/sign-in" />);
+    render(<SignInGate labels={GATE_LABELS} signInPath="/sign-in" providers={[]} />);
     expect(screen.getByTestId("sign-in-gate-empty")).toBeInTheDocument();
     expect(screen.getByTestId("sign-in-gate-link")).toHaveAttribute(
       "href",
@@ -173,10 +289,172 @@ describe("<SignInGate/> — the dashboard's own front door", () => {
 
   it("encodes the current pathname — /account round-trips as ?next=%2Faccount", () => {
     mockUsePathname.mockReturnValue("/account");
-    render(<SignInGate labels={GATE_LABELS} signInPath="/sign-in" />);
+    render(
+      <SignInGate labels={GATE_LABELS} signInPath="/sign-in" providers={["google"]} />,
+    );
+    expect(screen.getByTestId("sign-in-gate-link")).toHaveAttribute(
+      "href",
+      "/sign-in?next=%2Faccount",
+    );
+  });
+});
+
+// #7419 AC-3 — a "use client" module is bundled for the browser, where
+// server-only env reads silently come back empty. The gate must not reach for
+// provider env at all; its parent RSC resolves the providers and passes them.
+describe("sign-in-gate.tsx — no server env read in a client component (#7419)", () => {
+  const source = readFileSync(join(__dirname, "..", "sign-in-gate.tsx"), "utf8");
+
+  it("is a client component", () => {
+    expect(source.startsWith('"use client"')).toBe(true);
+  });
+
+  it("does not import lib/auth-env", () => {
+    expect(source).not.toMatch(/from\s+["'][^"']*lib\/auth-env["']/);
+    expect(source).not.toMatch(/require\(\s*["'][^"']*lib\/auth-env["']\s*\)/);
+  });
+
+  it("does not read process.env", () => {
+    expect(source).not.toMatch(/process\.env/);
+  });
+});
+
+// ── #7435 — the email sign-in link on the gate (AC-5, AC-4) ─────────────────
+
+function configureEmailLink(): void {
+  process.env.AUTH_EMAIL_WEBHOOK_SECRET = "webhook-secret";
+  process.env.AUTH_EMAIL_FROM = "noreply@example.test";
+  process.env.BETTER_AUTH_URL = "https://site.example";
+  process.env.BETTER_AUTH_SECRET = "a-real-secret";
+}
+
+async function renderSignedOutLayout(): Promise<void> {
+  mockGetSession.mockResolvedValue(null);
+  const element = await AuthedLayout({
+    params: Promise.resolve({ locale: "en" }),
+    children: <div data-testid="dashboard-content" />,
+  });
+  render(element);
+}
+
+describe("AuthedLayout — the email sign-in link (#7435)", () => {
+  beforeEach(() => {
+    mockGetSession.mockReset();
+    mockUsePathname.mockReset().mockReturnValue("/en/waitlist");
+  });
+
+  it("offers Google and 'Email me a sign-in link', with no AuthPanel password form", async () => {
+    configureGoogle();
+    configureEmailLink();
+    await renderSignedOutLayout();
+    expect(screen.getByTestId("sign-in-gate")).toBeInTheDocument();
+    expect(screen.getByTestId("auth-sso-google")).toBeInTheDocument();
+    expect(screen.getByTestId("auth-email-link-submit")).toHaveTextContent(
+      "copy:emailLinkSubmit",
+    );
+    expect(screen.queryByTestId("auth-panel-password")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("auth-panel-card")).not.toBeInTheDocument();
+    expect(screen.getByTestId("sign-in-gate-link")).toHaveAttribute(
+      "href",
+      "/sign-in?next=%2Fen%2Fwaitlist",
+    );
+  });
+
+  it("renders the email-link form, not the EmptyState, when it is the only method", async () => {
+    configureEmailLink();
+    await renderSignedOutLayout();
+    expect(screen.getByTestId("auth-email-link-form")).toBeInTheDocument();
+    expect(screen.queryByTestId("sign-in-gate-empty")).not.toBeInTheDocument();
+    expect(screen.getByTestId("sign-in-gate-link")).toBeInTheDocument();
+  });
+
+  it.each([
+    "AUTH_EMAIL_WEBHOOK_SECRET",
+    "AUTH_EMAIL_FROM",
+    "BETTER_AUTH_URL",
+    "BETTER_AUTH_SECRET",
+  ])("renders no email-link form when %s is unset (AC-4)", async (name) => {
+    configureGoogle();
+    configureEmailLink();
+    delete process.env[name];
+    await renderSignedOutLayout();
+    expect(screen.queryByTestId("auth-email-link-form")).not.toBeInTheDocument();
+    expect(screen.getByTestId("auth-panel-provider-google")).toBeInTheDocument();
+  });
+});
+
+// ── #7430 — the account area's gate speaks to members ──────────────────────
+
+function gateNamespaces(): unknown[] {
+  return jest
+    .mocked(getTranslations)
+    .mock.calls.map((call) => (call[0] as { namespace?: string }).namespace);
+}
+
+describe("AuthedLayout — the signed-out gate on an account path (#7430)", () => {
+  beforeEach(() => {
+    mockGetSession.mockReset();
+    jest.mocked(getTranslations).mockClear();
+    mockUsePathname.mockReset().mockReturnValue("/account");
+    mockRequestPathname = "/account";
+  });
+
+  it("reads the member-facing account.gate copy, never waitlistDashboard.gate", async () => {
+    configureGoogle();
+    await renderSignedOutLayout();
+    expect(gateNamespaces()).toContain("account.gate");
+    expect(gateNamespaces()).not.toContain("waitlistDashboard.gate");
+    expect(screen.getByTestId("auth-panel-provider-google")).toBeInTheDocument();
     expect(screen.getByTestId("sign-in-gate-link")).toHaveAttribute(
       "href",
       "/sign-in?next=%2Faccount",
     );
   });
+
+  it("renders the not-configured headline as a real heading, not a <p>", async () => {
+    await renderSignedOutLayout();
+    expect(gateNamespaces()).toContain("account.gate");
+    expect(screen.getByTestId("account-sign-in-gate")).toBeInTheDocument();
+    expect(screen.queryByTestId("sign-in-gate-empty")).not.toBeInTheDocument();
+    expect(
+      screen.getByRole("heading", { level: 1, name: "copy:emptyHeadline" }),
+    ).toBeInTheDocument();
+    expect(screen.getByText("copy:emptyDescription")).toBeInTheDocument();
+    // With no sign-in method on, /sign-in is a dead end that shows operator
+    // copy — the gate's one action goes back to the site instead.
+    expect(screen.queryByTestId("sign-in-gate-link")).not.toBeInTheDocument();
+    const home = screen.getByTestId("account-sign-in-gate-home");
+    expect(home).toHaveAttribute("href", "/");
+    expect(home).toHaveTextContent("copy:homeLink");
+    expect(screen.queryByTestId("dashboard-content")).not.toBeInTheDocument();
+  });
+
+  it("reads account.gate under a locale prefix and nested account paths too", async () => {
+    mockRequestPathname = "/en/account/settings";
+    await renderSignedOutLayout();
+    expect(gateNamespaces()).toContain("account.gate");
+    expect(screen.getByRole("heading", { level: 1 })).toBeInTheDocument();
+    expect(screen.getByTestId("account-sign-in-gate-home")).toHaveAttribute(
+      "href",
+      "/",
+    );
+  });
+
+  it("keeps waitlistDashboard.gate on an operator path", async () => {
+    mockRequestPathname = "/waitlist";
+    await renderSignedOutLayout();
+    expect(gateNamespaces()).toContain("waitlistDashboard.gate");
+    expect(gateNamespaces()).not.toContain("account.gate");
+    expect(screen.getByTestId("sign-in-gate-empty")).toBeInTheDocument();
+    expect(screen.queryByTestId("account-sign-in-gate")).not.toBeInTheDocument();
+  });
+
+  it("ships member copy — no operator language in en.json's account.gate", () => {
+    const copy = Object.values(en.account.gate).join(" ");
+    expect(copy).not.toMatch(/operator/i);
+    expect(en.account.gate.homeLink).toBeTruthy();
+    expect(en.account.gate.emptyHeadline).not.toBe(
+      en.waitlistDashboard.gate.emptyHeadline,
+    );
+  });
 });

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

@@ -0,0 +1,143 @@
+/**
+ * Tests for /[locale]/account/inbox/[kind]/[id] — one Inbox item (#7430,
+ * spec 7423 U4; D8's detail contract).
+ *
+ * Covers:
+ *   1. A known kind + id renders the shared `InboxItemFrame` through the
+ *      kind's own `renderDetail`: a back link to the Inbox, the kind as the
+ *      caption, the item's title as the `<h1>`, and the kind's fields.
+ *   2. An unknown kind, or an id the kind did not load, is a not-found —
+ *      never an empty frame.
+ *   3. A failed read renders an error with Retry (D12's posture).
+ */
+import { fireEvent, render, screen, within } from "@testing-library/react";
+
+jest.mock("next-intl/server", () => {
+  const msgs: unknown = require("../../../../../messages/en.json");
+  const dig = (obj: unknown, path: string): unknown =>
+    path.split(".").reduce<unknown>(
+      (acc, k) => (acc !== null && typeof acc === "object" ? (acc as Record<string, unknown>)[k] : undefined),
+      obj,
+    );
+  return {
+    __esModule: true,
+    getTranslations: async (arg: string | { namespace?: string; locale?: string }) => {
+      const ns = typeof arg === "string" ? arg : (arg.namespace ?? "");
+      const messages = dig(msgs, ns);
+      return (key: string, values?: Record<string, unknown>): string => {
+        const value = dig(messages, key);
+        if (typeof value !== "string") return `${ns}.${key}`;
+        return value.replace(/\{(\w+)\}/g, (m, name: string) =>
+          values && name in values ? String(values[name]) : m,
+        );
+      };
+    },
+  };
+});
+
+jest.mock("next/headers", () => ({
+  __esModule: true,
+  headers: jest.fn().mockResolvedValue(new Headers()),
+  cookies: jest.fn().mockResolvedValue({ toString: () => "session=abc" }),
+}));
+
+const mockGetSession = jest.fn();
+// eslint-disable-next-line no-restricted-syntax -- #507: mock-internal rewrite pending; auth.ts's lazy Better-Auth singleton has no HTTP/DB boundary a unit test of the session fields can mock without standing up Prisma.
+jest.mock("../../../../../auth", () => ({
+  __esModule: true,
+  auth: { api: { getSession: (...args: unknown[]) => mockGetSession(...args) } },
+}));
+
+const mockSignupMe = jest.fn();
+const mockCheckoutsMe = jest.fn();
+jest.mock("@working-theory/api-client", () => ({
+  __esModule: true,
+  waitlistSignups: { me: (...args: unknown[]) => mockSignupMe(...args) },
+  flowCheckouts: { me: (...args: unknown[]) => mockCheckoutsMe(...args) },
+  subscription: { me: jest.fn() },
+}));
+
+const mockNotFound = jest.fn(() => {
+  throw new Error("NEXT_NOT_FOUND");
+});
+const mockRefresh = jest.fn();
+jest.mock("next/navigation", () => ({
+  __esModule: true,
+  notFound: () => mockNotFound(),
+  useRouter: () => ({ push: jest.fn(), refresh: mockRefresh }),
+  usePathname: () => "/account/inbox/purchase/fc_done",
+}));
+
+import Page from "../inbox/[kind]/[id]/page";
+
+const SESSION = {
+  user: { id: "user_1", name: "Ada", email: "ada@example.com", emailVerified: true },
+};
+
+const CHECKOUT = {
+  id: "fc_done",
+  flowSlug: "founder-flow",
+  experimentKey: "ailk-founder-diagnostic",
+  offerKey: "pro",
+  status: "completed",
+  amountMinor: 4900,
+  currency: "usd",
+  period: "monthly",
+  completedAt: "2026-09-04T10:00:00.000Z",
+  createdAt: "2026-09-04T09:58:00.000Z",
+};
+
+beforeEach(() => {
+  mockGetSession.mockReset().mockResolvedValue(SESSION);
+  mockCheckoutsMe.mockReset().mockResolvedValue({ ok: true, body: [CHECKOUT] });
+  mockSignupMe.mockReset();
+  mockNotFound.mockClear();
+  mockRefresh.mockReset();
+});
+
+async function renderItem(kind: string, id: string, locale = "en"): Promise<void> {
+  const element = await Page({ params: Promise.resolve({ locale, kind, id }) });
+  render(element);
+}
+
+describe("one Inbox item", () => {
+  it("renders the kind's detail inside the shared item frame", async () => {
+    await renderItem("purchase", "fc_done");
+    expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("pro");
+    expect(screen.getByText("Inbox").closest("a")).toHaveAttribute("href", "/account");
+    expect(screen.getAllByText("My purchases").length).toBeGreaterThan(0);
+    const fields = screen.getByTestId("account-item-fields");
+    expect(within(fields).getByText("Amount")).toBeInTheDocument();
+    expect(within(fields).getByText("Period")).toBeInTheDocument();
+    expect(within(fields).getByText("monthly")).toBeInTheDocument();
+  });
+
+  it("decodes an encoded id segment", async () => {
+    mockCheckoutsMe.mockResolvedValue({ ok: true, body: [{ ...CHECKOUT, id: "fc done" }] });
+    await renderItem("purchase", "fc%20done");
+    expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("pro");
+  });
+
+  it("a non-default locale's back link returns to that locale's Inbox", async () => {
+    await renderItem("purchase", "fc_done", "fr");
+    expect(screen.getByText("Inbox").closest("a")).toHaveAttribute("href", "/fr/account");
+  });
+
+  it("an unknown kind is a not-found", async () => {
+    await expect(renderItem("nope", "fc_done")).rejects.toThrow("NEXT_NOT_FOUND");
+    expect(mockCheckoutsMe).not.toHaveBeenCalled();
+  });
+
+  it("an id the kind did not load is a not-found", async () => {
+    await expect(renderItem("purchase", "fc_other")).rejects.toThrow("NEXT_NOT_FOUND");
+  });
+
+  it("a failed read renders an error with Retry, not a not-found", async () => {
+    mockCheckoutsMe.mockResolvedValue({ ok: false, status: 500, body: {} });
+    await renderItem("purchase", "fc_done");
+    expect(mockNotFound).not.toHaveBeenCalled();
+    expect(screen.getByTestId("inbox-error")).toHaveTextContent("We couldn't load this item.");
+    fireEvent.click(screen.getByTestId("inbox-retry"));
+    expect(mockRefresh).toHaveBeenCalledTimes(1);
+  });
+});