create-ailk 0.11.2 → 0.11.4

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

@@ -1,20 +1,30 @@
 /**
- * Tests for /[locale]/account — the respondent's own account page (#4984).
+ * Tests for /[locale]/account — the base account Inbox (#7430, spec 7423
+ * U4 · D6a, D9, D12; AC-7 as amended 2026-10-01).
  *
  * Covers:
- *   1. Results + Purchases both render from fixtures; a 404'd experiment key
- *      is skipped (no throw, no row); a non-skippable error rethrows.
- *   2. Empty states: no configured experiment keys + `[]` checkouts.
- *   3. Profile: name, email, verified / unverified badge copy.
- *   4. SidebarNav carries the three in-page anchors (Profile / Results / Purchases).
- *   5. Sign-out: `signOut()` then `router.push("/")`.
+ *   1. The D6a tabs Recents · Suggested · Scheduled · All, each with its
+ *      count (zeros included), Recents selected.
+ *   2. `result` and `purchase` rows sit under Recents and All, newest first,
+ *      each linking to its item page.
+ *   3. `email-unverified` and `payment-due` are For-you items (the phone
+ *      For you tab), never Inbox rows.
+ *   4. A member with no name gets an "Add your name" For-you item (needs-you,
+ *      an Open action) linking to User settings › General.
+ *   5. A failed read renders an error row with Retry — never an empty Inbox.
+ *   6. #7469 (DESIGN.md §2b as amended 2026-10-01) — the route is the
+ *      phone's two main tabs. The Inbox tab is the filter tabs and the list
+ *      only: no For-you stack, no bottom sheet, no large title. The For you
+ *      tab lists every For-you item in one inset card, and ✕ dismisses one.
+ *      At `md`+ only the Inbox panel shows (the aside holds For you).
  */
-import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
+import { fireEvent, render, screen, within } from "@testing-library/react";
 
 // The global setup mock resolves only top-level namespace keys against
-// en.json; this page reads nested keys (`nav.profile`, `profile.verified`, …)
-// via `t("nav.profile")` — a call shape real next-intl supports — so resolve
-// dotted namespaces AND dotted keys here against the same catalog.
+// en.json; the area reads nested keys (`inbox.tabs.recents`, …) — a call
+// shape real next-intl supports — so resolve dotted namespaces AND dotted
+// keys here against the same catalog. `{name}` placeholders are filled from
+// `values` the way next-intl does.
 jest.mock("next-intl/server", () => {
   const msgs: unknown = require("../../../../../messages/en.json");
   const dig = (obj: unknown, path: string): unknown =>
@@ -27,9 +37,12 @@ jest.mock("next-intl/server", () => {
     getTranslations: async (arg: string | { namespace?: string; locale?: string }) => {
       const ns = typeof arg === "string" ? arg : (arg.namespace ?? "");
       const messages = dig(msgs, ns);
-      return (key: string): string => {
+      return (key: string, values?: Record<string, unknown>): string => {
         const value = dig(messages, key);
-        return typeof value === "string" ? value : `${ns}.${key}`;
+        if (typeof value !== "string") return `${ns}.${key}`;
+        return value.replace(/\{(\w+)\}/g, (m, name: string) =>
+          values && name in values ? String(values[name]) : m,
+        );
       };
     },
   };
@@ -42,7 +55,7 @@ jest.mock("next/headers", () => ({
 }));
 
 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 profile fields can mock without standing up Prisma.
+// 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) } },
@@ -51,44 +64,33 @@ jest.mock("../../../../../auth", () => ({
 const mockSignupMe = jest.fn();
 const mockCheckoutsMe = jest.fn();
 const mockSubscriptionMe = jest.fn();
-const mockSubscriptionPortalSession = jest.fn();
 jest.mock("@working-theory/api-client", () => ({
   __esModule: true,
   waitlistSignups: { me: (...args: unknown[]) => mockSignupMe(...args) },
   flowCheckouts: { me: (...args: unknown[]) => mockCheckoutsMe(...args) },
-  subscription: {
-    me: (...args: unknown[]) => mockSubscriptionMe(...args),
-    portalSession: (...args: unknown[]) => mockSubscriptionPortalSession(...args),
-  },
-}));
-
-let mockExperimentKeys: string[] = [];
-// eslint-disable-next-line no-restricted-syntax -- #507: mock-internal rewrite pending; account-config.ts is the OSS template's (empty) experiment registry — a pure constant with no external boundary to mock instead, overridden here to exercise the populated path.
-jest.mock("../../../../../lib/account-config", () => ({
-  __esModule: true,
-  get accountExperimentKeys() {
-    return mockExperimentKeys;
-  },
+  subscription: { me: (...args: unknown[]) => mockSubscriptionMe(...args) },
 }));
 
-const mockSignOut = jest.fn();
-jest.mock("better-auth/react", () => ({
-  __esModule: true,
-  createAuthClient: () => ({ signOut: (...args: unknown[]) => mockSignOut(...args) }),
-}));
-
-const mockPush = jest.fn();
 const mockRefresh = jest.fn();
 jest.mock("next/navigation", () => ({
   __esModule: true,
-  useRouter: () => ({ push: mockPush, refresh: mockRefresh }),
-  usePathname: () => "/en/account",
+  useRouter: () => ({ push: jest.fn(), refresh: mockRefresh }),
+  usePathname: () => "/account",
 }));
 
+import { PhoneTabProvider } from "@working-theory/templates/account";
+
+import { accountExperimentKeys } from "../../../../../lib/account-config";
 import Page from "../page";
 
 const SESSION = {
-  user: { id: "user_1", name: "Ada", email: "ada@example.com", emailVerified: true },
+  user: {
+    id: "user_1",
+    name: "Ada",
+    email: "ada@example.com",
+    emailVerified: true,
+    createdAt: new Date("2026-09-01T00:00:00.000Z"),
+  },
 };
 
 const SIGNUP = {
@@ -101,244 +103,275 @@ const SIGNUP = {
   answers: { q3: null },
 };
 
-const NOT_FOUND = {
-  ok: false,
-  status: 404,
-  body: { error: { code: "signup_not_found", message: "Not found" } },
+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",
 };
 
-const CHECKOUTS = [
-  {
-    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",
-  },
-  {
-    id: "fc_open",
-    flowSlug: "founder-flow",
-    experimentKey: "ailk-founder-diagnostic",
-    offerKey: "starter",
-    status: "created",
-    amountMinor: 1900,
-    currency: "usd",
-    period: "monthly",
-    completedAt: null,
-    createdAt: "2026-09-05T08:00:00.000Z",
-  },
-];
+const NO_SUBSCRIPTION = {
+  ok: true,
+  body: { actionRequired: false, status: null, accessRevokesAt: null, portalAvailable: false },
+};
 
-async function renderPage(): Promise<void> {
-  const element = await Page({ params: Promise.resolve({ locale: "en" }) });
-  render(element);
+/** Renders the page on a phone tab — the frame's PhoneTabProvider. */
+async function renderPage(locale = "en", tab = "inbox"): Promise<void> {
+  const element = await Page({ params: Promise.resolve({ locale }) });
+  render(<PhoneTabProvider tab={tab}>{element}</PhoneTabProvider>);
 }
 
-beforeEach(() => {
-  mockGetSession.mockReset().mockResolvedValue(SESSION);
-  mockSignupMe.mockReset().mockImplementation(async (key: string) =>
-    key === SIGNUP.experimentKey ? { ok: true, body: SIGNUP } : NOT_FOUND,
-  );
-  mockCheckoutsMe.mockReset().mockResolvedValue({ ok: true, body: CHECKOUTS });
-  // Default: a healthy subscriber (no banner) — commerce-disabled builds
-  // read identically (a 404), covered explicitly below (D8).
-  mockSubscriptionMe.mockReset().mockResolvedValue({
+const UNVERIFIED_AND_PAST_DUE = (): void => {
+  mockGetSession.mockResolvedValue({
+    user: { ...SESSION.user, emailVerified: false },
+  });
+  mockSubscriptionMe.mockResolvedValue({
     ok: true,
-    body: { actionRequired: false, status: null, accessRevokesAt: null, portalAvailable: false },
+    body: { actionRequired: true, status: "past_due", accessRevokesAt: null, portalAvailable: true },
   });
-  mockSignOut.mockReset().mockResolvedValue(undefined);
-  mockPush.mockReset();
+};
+
+beforeEach(() => {
+  window.localStorage.clear();
+  accountExperimentKeys.length = 0;
+  mockGetSession.mockReset().mockResolvedValue(SESSION);
+  mockSignupMe.mockReset().mockResolvedValue({ ok: true, body: SIGNUP });
+  mockCheckoutsMe.mockReset().mockResolvedValue({ ok: true, body: [CHECKOUT] });
+  mockSubscriptionMe.mockReset().mockResolvedValue(NO_SUBSCRIPTION);
   mockRefresh.mockReset();
-  mockExperimentKeys = ["ailk-founder-diagnostic", "beta-cohort"];
 });
 
-describe("AccountPage — results + purchases", () => {
-  it("renders the signup for a configured key and skips a 404'd key", async () => {
-    await renderPage();
+afterAll(() => {
+  accountExperimentKeys.length = 0;
+});
 
-    const results = screen.getByTestId("account-results");
-    const row = within(results).getByTestId("account-result-ailk-founder-diagnostic");
-    expect(within(row).getByText("hot")).toBeInTheDocument();
-    expect(within(row).getByText("early_bird")).toBeInTheDocument();
-    expect(within(results).queryByTestId("account-result-beta-cohort")).not.toBeInTheDocument();
-    expect(within(results).queryByText("beta-cohort")).not.toBeInTheDocument();
-
-    // One read per configured key, each forwarding the caller's cookie.
-    expect(mockSignupMe).toHaveBeenCalledTimes(2);
-    expect(mockSignupMe).toHaveBeenCalledWith("ailk-founder-diagnostic", {
-      headers: { cookie: "session=abc" },
-    });
-    expect(mockSignupMe).toHaveBeenCalledWith("beta-cohort", {
-      headers: { cookie: "session=abc" },
-    });
+describe("the Inbox — D6a tabs (AC-7)", () => {
+  it("renders Recents · Suggested · Scheduled · All with counts, Recents selected", async () => {
+    accountExperimentKeys.push("ailk-founder-diagnostic");
+    await renderPage();
+    expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("Inbox");
+    const tabs = screen.getAllByRole("tab");
+    expect(tabs.map((tab) => tab.getAttribute("data-testid"))).toEqual([
+      "inbox-tab-recents",
+      "inbox-tab-suggested",
+      "inbox-tab-scheduled",
+      "inbox-tab-all",
+    ]);
+    expect(tabs.map((tab) => tab.textContent)).toEqual([
+      "Recents2",
+      "Suggested0",
+      "Scheduled0",
+      "All2",
+    ]);
+    expect(screen.getByTestId("inbox-tab-recents")).toHaveAttribute("aria-selected", "true");
   });
 
-  it("renders every checkout, newest-first order preserved, with a formatted amount", async () => {
+  it("result and purchase rows sit under Recents, newest first, each linking to its item page", async () => {
+    accountExperimentKeys.push("ailk-founder-diagnostic");
     await renderPage();
-
-    const purchases = screen.getByTestId("account-purchases");
-    const done = within(purchases).getByTestId("account-purchase-fc_done");
-    const open = within(purchases).getByTestId("account-purchase-fc_open");
-    expect(done).toBeInTheDocument();
-    expect(open).toBeInTheDocument();
-    expect(within(done).getByText("$49")).toBeInTheDocument();
-    expect(within(done).getByText("completed")).toBeInTheDocument();
-    expect(within(open).getByText("created")).toBeInTheDocument();
-    expect(mockCheckoutsMe).toHaveBeenCalledWith({ headers: { cookie: "session=abc" } });
+    const recents = screen.getByTestId("inbox-recents");
+    const rows = within(recents).getAllByTestId("inbox-recents-row");
+    expect(rows).toHaveLength(2);
+    // The purchase (Sep 4) is newer than the result (Sep 3).
+    expect(rows[0]).toHaveTextContent("pro");
+    expect(rows[1]).toHaveTextContent("ailk-founder-diagnostic");
+    expect(within(recents).getByText("pro").closest("a")).toHaveAttribute(
+      "href",
+      "/account/inbox/purchase/fc_done",
+    );
+    expect(
+      within(recents).getByText("ailk-founder-diagnostic").closest("a"),
+    ).toHaveAttribute("href", "/account/inbox/result/ailk-founder-diagnostic");
   });
 
-  it("rethrows a non-skippable signup error to the route error boundary", async () => {
-    mockSignupMe.mockResolvedValue({
-      ok: false,
-      status: 500,
-      body: { error: { code: "internal_error", message: "Boom" } },
-    });
-    await expect(Page({ params: Promise.resolve({ locale: "en" }) })).rejects.toThrow("Boom");
+  it("the same rows are in All; a non-default locale prefixes the item href", async () => {
+    await renderPage("fr");
+    fireEvent.mouseDown(screen.getByTestId("inbox-tab-all"));
+    const all = screen.getByTestId("inbox-all");
+    expect(within(all).getByText("pro").closest("a")).toHaveAttribute(
+      "href",
+      "/fr/account/inbox/purchase/fc_done",
+    );
   });
 
-  it("treats a 403 email_unverified checkouts read as no purchases, not an error", async () => {
-    mockCheckoutsMe.mockResolvedValue({
-      ok: false,
-      status: 403,
-      body: { error: { code: "email_unverified", message: "Verify first" } },
-    });
+  it("with no rows, every tab still renders and Recents shows the empty line", async () => {
+    mockCheckoutsMe.mockResolvedValue({ ok: true, body: [] });
     await renderPage();
-    expect(within(screen.getByTestId("account-purchases")).getByText("No purchases yet")).toBeInTheDocument();
+    expect(screen.getAllByRole("tab").map((tab) => tab.textContent)).toEqual([
+      "Recents0",
+      "Suggested0",
+      "Scheduled0",
+      "All0",
+    ]);
+    expect(screen.getByTestId("inbox-empty")).toHaveTextContent("Nothing here yet.");
   });
 });
 
-describe("AccountPage — empty states", () => {
-  it("renders both empty states with no configured keys and no checkouts", async () => {
-    mockExperimentKeys = [];
-    mockCheckoutsMe.mockResolvedValue({ ok: true, body: [] });
-    await renderPage();
+describe("For-you items, not Inbox rows (AC-7, D9 as amended)", () => {
+  it("email-unverified and payment-due are For you tab items, never Inbox rows", async () => {
+    UNVERIFIED_AND_PAST_DUE();
+    await renderPage("en", "for-you");
+    const forYou = screen.getByTestId("inbox-panel-for-you");
+    expect(within(forYou).getAllByTestId("for-you-item")).toHaveLength(2);
+    const list = screen.getByTestId("inbox-list");
+    expect(within(list).queryByText("Email not verified")).not.toBeInTheDocument();
+    expect(
+      within(list).queryByText("Your payment didn't go through"),
+    ).not.toBeInTheDocument();
+  });
 
-    expect(mockSignupMe).not.toHaveBeenCalled();
-    expect(within(screen.getByTestId("account-results")).getByText("No results yet")).toBeInTheDocument();
-    expect(within(screen.getByTestId("account-purchases")).getByText("No purchases yet")).toBeInTheDocument();
+  it("a member with no name sees 'Add your name' (needs-you, Open → User settings › General)", async () => {
+    mockGetSession.mockResolvedValue({ user: { ...SESSION.user, name: "" } });
+    await renderPage("en", "for-you");
+    const forYou = screen.getByTestId("inbox-panel-for-you");
+    const item = within(forYou).getByTestId("for-you-item");
+    expect(item).toHaveAttribute("data-item-id", "add-name");
+    expect(item).toHaveTextContent("Add your name");
+    // DESIGN.md §5.4c — the tag is icon + label.
+    expect(within(item).getByTestId("for-you-tag").querySelector("svg")).not.toBeNull();
+    expect(within(item).getByTestId("for-you-open")).toHaveAttribute(
+      "href",
+      "/account/settings#general",
+    );
   });
 });
 
-describe("AccountPage — profile", () => {
-  it("shows name, email, and the verified badge", async () => {
+describe("the phone Inbox tab (#7469, DESIGN.md §2b · §5.15)", () => {
+  it("holds the filter tabs and the list only — no For-you stack and no bottom sheet", async () => {
+    UNVERIFIED_AND_PAST_DUE();
     await renderPage();
-    const profile = screen.getByTestId("account-profile");
-    expect(within(profile).getByTestId("account-profile-name")).toHaveTextContent("Ada");
-    expect(within(profile).getByTestId("account-profile-email")).toHaveTextContent("ada@example.com");
-    expect(within(profile).getByTestId("account-email-status")).toHaveTextContent("Email verified");
+    const inbox = screen.getByTestId("inbox-panel-inbox");
+    expect(within(inbox).getByTestId("inbox-list")).toBeInTheDocument();
+    expect(screen.queryByTestId("for-you-stack")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("for-you-stack-count")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("for-you-sheet")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("inbox-for-you")).not.toBeInTheDocument();
   });
 
-  it("shows the unverified badge for an unverified session", async () => {
-    mockGetSession.mockResolvedValue({
-      user: { ...SESSION.user, emailVerified: false },
-    });
+  it("shows on the phone and at md+, while the For you panel stays hidden", async () => {
+    UNVERIFIED_AND_PAST_DUE();
     await renderPage();
-    expect(within(screen.getByTestId("account-profile")).getByTestId("account-email-status")).toHaveTextContent(
-      "Email not verified",
-    );
+    expect(screen.getByTestId("inbox-panel-inbox")).not.toHaveClass("hidden");
+    expect(screen.getByTestId("inbox-panel-inbox")).not.toHaveClass("md:hidden");
+    expect(screen.getByTestId("inbox-panel-for-you")).toHaveClass("hidden");
   });
-});
 
-describe("AccountPage — sidebar nav", () => {
-  it("renders the three in-page anchors with their labels", async () => {
+  it("the phone has no large title or lead — both stay at md+", async () => {
     await renderPage();
-    // AppShell may mount the rail twice (desktop rail + drawer) — assert on
-    // the first instance of each.
-    expect(screen.getAllByTestId("sidebar-nav-item-profile")[0]).toHaveTextContent("Profile");
-    expect(screen.getAllByTestId("sidebar-nav-item-results")[0]).toHaveTextContent("Results");
-    expect(screen.getAllByTestId("sidebar-nav-item-purchases")[0]).toHaveTextContent("Purchases");
-    expect(screen.getAllByTestId("sidebar-nav-item-results")[0]).toHaveAttribute(
-      "href",
-      "/account#results",
-    );
+    expect(screen.getByRole("heading", { level: 1 })).toHaveClass("max-md:sr-only");
+    expect(screen.getByRole("heading", { level: 1 })).not.toHaveClass("hidden");
+    expect(screen.getByText("What changed, and what's coming.")).toHaveClass("hidden", "md:block");
   });
-});
 
-describe("AccountPage — sign out", () => {
-  it("calls signOut, then pushes home and refreshes", async () => {
+  it("the list sits in a bordered card, inset by the canvas on every side", async () => {
+    accountExperimentKeys.push("ailk-founder-diagnostic");
     await renderPage();
-    fireEvent.click(screen.getByTestId("account-sign-out"));
-
-    await waitFor(() => expect(mockPush).toHaveBeenCalledWith("/"));
-    expect(mockSignOut).toHaveBeenCalledTimes(1);
-    expect(mockRefresh).toHaveBeenCalledTimes(1);
-    expect(mockSignOut.mock.invocationCallOrder[0]).toBeLessThan(mockPush.mock.invocationCallOrder[0]!);
+    // The shell's main slot insets the canvas (p-4 below md); the page adds
+    // no full-bleed escape, and the list is RowGroup's bordered box.
+    const page = screen.getByTestId("account-inbox");
+    expect(page.className).not.toMatch(/-mx-|w-screen/);
+    expect(screen.getByTestId("inbox-panel-inbox").className ?? "").not.toMatch(/-mx-|w-screen/);
   });
 });
 
-describe("AccountPage — subscription status banner (#6038)", () => {
-  it("renders the banner for a subscriber with actionRequired: true", async () => {
-    mockSubscriptionMe.mockResolvedValue({
-      ok: true,
-      body: { actionRequired: true, status: "past_due", accessRevokesAt: null, portalAvailable: true },
+describe("the phone For you tab (#7469, DESIGN.md §2b · §5.15)", () => {
+  it("lists every item with its type tag, title, Open or View, and ✕", async () => {
+    UNVERIFIED_AND_PAST_DUE();
+    mockGetSession.mockResolvedValue({
+      user: { ...SESSION.user, name: "", emailVerified: false },
     });
-    await renderPage();
-    expect(screen.getByTestId("subscription-status-banner")).toBeInTheDocument();
+    await renderPage("en", "for-you");
+    const panel = screen.getByTestId("inbox-panel-for-you");
+    // Phone-only: shown below md, hidden at md+ where the aside holds it.
+    expect(panel).toHaveClass("md:hidden");
+    expect(panel).not.toHaveClass("hidden");
+    // The Inbox panel is hidden on the phone but still shows at md+.
+    expect(screen.getByTestId("inbox-panel-inbox")).toHaveClass("hidden", "md:block");
+    const card = within(panel).getByTestId("for-you-list-card");
+    const items = within(card).getAllByTestId("for-you-item");
+    expect(items).toHaveLength(3);
+    for (const item of items) {
+      expect(within(item).getByTestId("for-you-tag")).toBeInTheDocument();
+      expect(
+        within(item).queryByTestId("for-you-open") ?? within(item).queryByTestId("for-you-view"),
+      ).not.toBeNull();
+      expect(within(item).getByTestId("for-you-dismiss")).toHaveAccessibleName(/^Dismiss/);
+    }
+    expect(within(panel).getByText("Add your name")).toBeInTheDocument();
+    expect(within(panel).getByText("Email not verified")).toBeInTheDocument();
+    expect(within(panel).getByText("Your payment didn't go through")).toBeInTheDocument();
   });
 
-  it("renders no banner for a healthy subscriber — AC-1", async () => {
-    mockSubscriptionMe.mockResolvedValue({
-      ok: true,
-      body: { actionRequired: false, status: null, accessRevokesAt: null, portalAvailable: true },
-    });
-    await renderPage();
-    expect(screen.queryByTestId("subscription-status-banner")).not.toBeInTheDocument();
+  it("✕ dismisses an item — it leaves the list", async () => {
+    UNVERIFIED_AND_PAST_DUE();
+    await renderPage("en", "for-you");
+    const panel = screen.getByTestId("inbox-panel-for-you");
+    const [first] = within(panel).getAllByTestId("for-you-item");
+    const id = first!.getAttribute("data-item-id");
+    fireEvent.click(within(first!).getByTestId("for-you-dismiss"));
+    const left = within(panel).getAllByTestId("for-you-item");
+    expect(left).toHaveLength(1);
+    expect(left.map((item) => item.getAttribute("data-item-id"))).not.toContain(id);
   });
 
-  it("clears once the recovery lands — AC-3, no dismissal consulted", async () => {
-    mockSubscriptionMe.mockResolvedValue({
-      ok: true,
-      body: { actionRequired: false, status: null, accessRevokesAt: null, portalAvailable: true },
-    });
-    await renderPage();
-    expect(screen.queryByTestId("subscription-status-banner")).not.toBeInTheDocument();
+  it("the For you tab keeps the page's h1 (visually hidden on the phone)", async () => {
+    await renderPage("en", "for-you");
+    const h1 = screen.getByRole("heading", { level: 1 });
+    expect(h1).toHaveTextContent("Inbox");
+    expect(screen.getByTestId("inbox-panel-inbox")).not.toContainElement(h1);
   });
 
-  it.each([401, 403, 404])(
-    "renders no banner and no throw on a %d read (AC-4, the existing SKIPPED_STATUSES constant)",
-    async (status) => {
-      mockSubscriptionMe.mockResolvedValue({
-        ok: false,
-        status,
-        body: { error: { code: "n/a", message: "n/a" } },
-      });
-      await renderPage();
-      expect(screen.getByTestId("account-page")).toBeInTheDocument();
-      expect(screen.queryByTestId("subscription-status-banner")).not.toBeInTheDocument();
-    },
-  );
-
-  it("rejects to the route error boundary on a 500 subscription read", async () => {
-    mockSubscriptionMe.mockResolvedValue({
-      ok: false,
-      status: 500,
-      body: { error: { code: "internal_error", message: "Boom" } },
-    });
-    await expect(Page({ params: Promise.resolve({ locale: "en" }) })).rejects.toThrow("Boom");
+  it("with nothing waiting the tab shows its empty line, not a blank page", async () => {
+    await renderPage("en", "for-you");
+    const panel = screen.getByTestId("inbox-panel-for-you");
+    expect(within(panel).queryByTestId("for-you-item")).not.toBeInTheDocument();
+    expect(within(panel).getByTestId("for-you-empty")).toHaveTextContent(
+      "Nothing here right now.",
+    );
   });
+});
 
-  it("renders the action slot when portalAvailable is true", async () => {
-    mockSubscriptionMe.mockResolvedValue({
-      ok: true,
-      body: { actionRequired: true, status: "past_due", accessRevokesAt: null, portalAvailable: true },
-    });
+describe("Hub unavailable (D12)", () => {
+  it("a failed read renders an error row with Retry, never an empty Inbox", async () => {
+    mockCheckoutsMe.mockResolvedValue({ ok: false, status: 500, body: {} });
     await renderPage();
-    const banner = screen.getByTestId("subscription-status-banner");
-    expect(within(banner).getByRole("button")).toBeInTheDocument();
+    expect(screen.getByTestId("inbox-error")).toHaveTextContent(
+      "We couldn't load everything in your Inbox.",
+    );
+    expect(screen.queryByTestId("inbox-empty")).not.toBeInTheDocument();
+    fireEvent.click(screen.getByTestId("inbox-retry"));
+    expect(mockRefresh).toHaveBeenCalledTimes(1);
   });
 
-  it("renders no action slot when portalAvailable is false — D3.0a", async () => {
-    mockSubscriptionMe.mockResolvedValue({
-      ok: true,
-      body: { actionRequired: true, status: "past_due", accessRevokesAt: null, portalAvailable: false },
-    });
+  it("a failed For-you read also shows the error row", async () => {
+    mockSubscriptionMe.mockResolvedValue({ ok: false, status: 502, body: {} });
     await renderPage();
-    const banner = screen.getByTestId("subscription-status-banner");
-    expect(within(banner).queryByRole("button")).not.toBeInTheDocument();
+    expect(
+      within(screen.getByTestId("inbox-panel-inbox")).getByTestId("inbox-error"),
+    ).toBeInTheDocument();
+  });
+
+  it("on the phone For you tab, a failed For-you read shows the error row above the list (#7469)", async () => {
+    mockSubscriptionMe.mockResolvedValue({ ok: false, status: 502, body: {} });
+    await renderPage("en", "for-you");
+    const panel = screen.getByTestId("inbox-panel-for-you");
+    expect(within(panel).getByTestId("inbox-error")).toHaveTextContent(
+      "We couldn't load everything in your Inbox.",
+    );
+    // Never a silently empty list (D12): the empty line gives way to the error row.
+    expect(within(panel).queryByTestId("for-you-empty")).not.toBeInTheDocument();
+  });
+
+  it("a failed Inbox-kind read leaves the For you tab without an error row", async () => {
+    mockCheckoutsMe.mockResolvedValue({ ok: false, status: 500, body: {} });
+    await renderPage("en", "for-you");
+    const panel = screen.getByTestId("inbox-panel-for-you");
+    expect(within(panel).queryByTestId("inbox-error")).not.toBeInTheDocument();
   });
 });