create-ailk 0.19.0 → 0.19.1

package/templates/apps/web/app/[locale]/(authed)/account/__tests__/account-frame-sign-out.test.tsx

@@ -0,0 +1,175 @@
+/**
+ * Log out in AccountFrame (#8465).
+ *
+ * A spoke that signs in through its hub holds its session in the sealed
+ * hub-session cookie, which only `POST /api/hub-session/sign-out` clears
+ * (and which also revokes the hub credential); Better Auth's `signOut()` hits
+ * a route that spoke does not serve. The server layout hands the seam's
+ * `SIGN_OUT_ENDPOINT` down as `signOutEndpoint`:
+ *
+ *   - with an endpoint, Log out POSTs it (same-origin), never calls Better
+ *     Auth, and lands on the sign-in page once the answer is 2xx;
+ *   - a refused or failed sign-out (403 on an Origin mismatch, 5xx, a
+ *     rejected fetch) stays on the page, shows the translated error, and
+ *     navigates nowhere — the cookie is still valid (#8467 review addendum);
+ *   - without an endpoint (a hub or a single site) it calls Better Auth and
+ *     routes home, as before.
+ */
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import type { ReactNode } from "react";
+
+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: () => "/account",
+  useSearchParams: () => new URLSearchParams(""),
+}));
+
+jest.mock("@working-theory/templates/shells", () => ({
+  __esModule: true,
+  SignedInShell: ({
+    onSignOut,
+    children,
+  }: {
+    onSignOut: () => void;
+    children: ReactNode;
+  }) => (
+    <div>
+      <button type="button" data-testid="sign-out" onClick={onSignOut} />
+      {children}
+    </div>
+  ),
+}));
+
+jest.mock("@working-theory/templates/account", () => ({
+  __esModule: true,
+  ForYouPanel: () => null,
+  PhoneTabProvider: ({ children }: { children: ReactNode }) => children,
+  useForYouDismissed: () => [new Set<string>(), jest.fn()],
+}));
+
+import { AccountFrame, type AccountFrameProps } from "../account-frame";
+
+const ENDPOINT = "/api/hub-session/sign-out";
+const FAILED = "We couldn't log you out. You're still signed in; try again.";
+const mockFetch = jest.fn();
+
+function renderFrame(extra: Partial<AccountFrameProps> = {}): void {
+  render(
+    <AccountFrame
+      locale="en"
+      user={{ name: "Ada", email: "ada@example.com" }}
+      logo={null}
+      helpItems={[]}
+      // eslint-disable-next-line no-restricted-syntax -- partial fixture: the suite exercises only the sign-out form, so the full forYou/labels shapes are not built
+      forYou={{ items: [] } as unknown as AccountFrameProps["forYou"]}
+      labels={
+        // eslint-disable-next-line no-restricted-syntax -- partial fixture (see forYou above)
+        {
+          home: "Home",
+          signOutFailed: FAILED,
+        } as unknown as AccountFrameProps["labels"]
+      }
+      {...extra}
+    >
+      <p>page</p>
+    </AccountFrame>,
+  );
+}
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  globalThis.fetch = mockFetch.mockResolvedValue({ ok: true, status: 204 });
+});
+
+describe("AccountFrame Log out — a spoke that signs in through its hub", () => {
+  it("POSTs the hub sign-out endpoint, never Better Auth, then lands on the sign-in page and refreshes", async () => {
+    renderFrame({ signOutEndpoint: ENDPOINT, signInHref: "/account" });
+    fireEvent.click(screen.getByTestId("sign-out"));
+    await waitFor(() => expect(mockPush).toHaveBeenCalledWith("/account"));
+    expect(mockFetch).toHaveBeenCalledWith(ENDPOINT, {
+      method: "POST",
+      credentials: "same-origin",
+    });
+    expect(mockSignOut).not.toHaveBeenCalled();
+    expect(mockRefresh).toHaveBeenCalledTimes(1);
+    expect(
+      screen.queryByTestId("account-sign-out-error"),
+    ).not.toBeInTheDocument();
+  });
+
+  it("falls back to the site home when no sign-in href is given", async () => {
+    renderFrame({ signOutEndpoint: ENDPOINT });
+    fireEvent.click(screen.getByTestId("sign-out"));
+    await waitFor(() => expect(mockPush).toHaveBeenCalledWith("/"));
+  });
+
+  it.each([
+    ["a 403 (Origin mismatch)", { ok: false, status: 403 }],
+    ["a 500", { ok: false, status: 500 }],
+    ["a 404", { ok: false, status: 404 }],
+  ])(
+    "%s stays on the page with the error and routes nowhere",
+    async (_label, response) => {
+      mockFetch.mockResolvedValue(response);
+      renderFrame({ signOutEndpoint: ENDPOINT, signInHref: "/account" });
+      fireEvent.click(screen.getByTestId("sign-out"));
+      expect(
+        await screen.findByTestId("account-sign-out-error"),
+      ).toHaveTextContent(FAILED);
+      expect(mockPush).not.toHaveBeenCalled();
+      expect(mockRefresh).not.toHaveBeenCalled();
+      expect(mockSignOut).not.toHaveBeenCalled();
+    },
+  );
+
+  it("a rejected request stays on the page with the error and routes nowhere", async () => {
+    mockFetch.mockRejectedValue(new TypeError("network down"));
+    renderFrame({ signOutEndpoint: ENDPOINT, signInHref: "/account" });
+    fireEvent.click(screen.getByTestId("sign-out"));
+    expect(
+      await screen.findByTestId("account-sign-out-error"),
+    ).toHaveTextContent(FAILED);
+    expect(mockPush).not.toHaveBeenCalled();
+    expect(mockRefresh).not.toHaveBeenCalled();
+  });
+
+  it("a retry that succeeds clears the error and lands on the sign-in page", async () => {
+    mockFetch.mockResolvedValueOnce({ ok: false, status: 500 });
+    renderFrame({ signOutEndpoint: ENDPOINT, signInHref: "/account" });
+    fireEvent.click(screen.getByTestId("sign-out"));
+    await screen.findByTestId("account-sign-out-error");
+    fireEvent.click(screen.getByTestId("sign-out"));
+    await waitFor(() => expect(mockPush).toHaveBeenCalledWith("/account"));
+    expect(
+      screen.queryByTestId("account-sign-out-error"),
+    ).not.toBeInTheDocument();
+  });
+});
+
+describe("AccountFrame Log out — a hub or a single site", () => {
+  it.each([
+    ["absent", {}],
+    ["null", { signOutEndpoint: null }],
+  ])(
+    "with the endpoint %s calls Better Auth, then routes home and refreshes",
+    async (_label, extra) => {
+      renderFrame(extra);
+      fireEvent.click(screen.getByTestId("sign-out"));
+      await waitFor(() => expect(mockPush).toHaveBeenCalledWith("/"));
+      expect(mockSignOut).toHaveBeenCalledTimes(1);
+      expect(mockFetch).not.toHaveBeenCalled();
+      expect(mockRefresh).toHaveBeenCalledTimes(1);
+    },
+  );
+});

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

@@ -131,8 +131,22 @@ describe("the frame (D7)", () => {
   });
 });
 
+describe("the standalone shape (#8430)", () => {
+  it("takes the screen as the Admin's settings do: the rail column and the pane are the page's own landmarks", async () => {
+    await renderPage();
+    const settings = screen.getByTestId("account-settings");
+    expect(settings).toHaveClass("min-h-screen");
+    const column = within(settings).getByRole("complementary");
+    expect(column.firstElementChild).toBe(screen.getByTestId("account-settings-back"));
+    expect(column).toContainElement(screen.getByTestId("account-settings-rail"));
+    expect(within(settings).getByRole("main")).toContainElement(
+      screen.getByRole("heading", { level: 1 }),
+    );
+  });
+});
+
 describe("AC-5 — Billing as the current-plan card (D8)", () => {
-  it("(a) shows the plan, the status, the card and Manage in Stripe under the Current plan heading", async () => {
+  it("(a) shows the plan, the status, the card and Manage billing under the Current plan heading", async () => {
     await renderPage();
     expect(screen.getByText("Current plan")).toBeInTheDocument();
     const card = screen.getByTestId("account-billing-card");
@@ -141,7 +155,7 @@ describe("AC-5 — Billing as the current-plan card (D8)", () => {
     expect(within(card).getByTestId("account-billing-payment")).toHaveTextContent(
       "visa ending in 4242, expires 04/2027",
     );
-    expect(screen.getByTestId("account-billing-manage")).toHaveTextContent("Manage in Stripe");
+    expect(screen.getByTestId("account-billing-manage")).toHaveTextContent("Manage billing");
     expect(screen.queryByTestId("account-billing-none")).not.toBeInTheDocument();
     expect(screen.queryByTestId("account-billing-unreadable")).not.toBeInTheDocument();
   });
@@ -262,7 +276,7 @@ describe("AC-2 (e) — contributed billing sections render after the base conten
   });
 });
 
-describe("#8217 AC-1 — the single site's Manage in Stripe (D10, D11)", () => {
+describe("#8217 AC-1 — the single site's Manage billing (D10, D11)", () => {
   const PORTAL_URL = "https://billing.stripe.com/p/session/test_single_site";
 
   it("mints the portal once through the hub's route with the cookie init, then redirects there", async () => {

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

@@ -71,6 +71,8 @@ jest.mock("../../../../../auth", () => ({
 const mockPieces = jest.fn();
 const mockUpdateProfile = jest.fn();
 const mockRequestDeletion = jest.fn();
+const mockContact = jest.fn();
+const mockUpdateContact = jest.fn();
 const mockHubMe = jest.fn();
 const mockLeadsSubmit = jest.fn();
 jest.mock("@working-theory/api-client", () => ({
@@ -83,6 +85,8 @@ jest.mock("@working-theory/api-client", () => ({
     pieces: (...args: unknown[]) => mockPieces(...args),
     updateProfile: (...args: unknown[]) => mockUpdateProfile(...args),
     requestDeletion: (...args: unknown[]) => mockRequestDeletion(...args),
+    contact: (...args: unknown[]) => mockContact(...args),
+    updateContact: (...args: unknown[]) => mockUpdateContact(...args),
   },
   hubSignIn: { me: (...args: unknown[]) => mockHubMe(...args) },
   visitorForwardHeaders: () => null,
@@ -120,6 +124,7 @@ import type { AccountSettingsSection } from "@working-theory/templates/account";
 import { accountSettingsSections } from "../../../../../lib/account-config";
 import { seal } from "../../../../../lib/hub-session/seal";
 import { BillingAnchor } from "../general/billing-anchor";
+import { saveContact } from "../general/contact-actions";
 import Page from "../general/page";
 import { requestAccountDeletion, saveProfile } from "../profile-actions";
 
@@ -179,6 +184,8 @@ beforeEach(() => {
   mockPieces.mockReset().mockResolvedValue(ok([]));
   mockUpdateProfile.mockReset().mockResolvedValue(ok({ name: "Ada King", image: PHOTO }));
   mockRequestDeletion.mockReset().mockResolvedValue(ok({ sentTo: "site-operator" }));
+  mockContact.mockReset().mockResolvedValue(ok({ contact: null }));
+  mockUpdateContact.mockReset().mockResolvedValue(ok({ contact: null }));
   mockHubMe.mockReset();
   mockLeadsSubmit.mockReset();
   mockUpdateUser.mockReset().mockResolvedValue({ data: { status: true }, error: null });
@@ -296,6 +303,20 @@ describe("AC-1 — the frame (D2, D7)", () => {
   });
 });
 
+describe("the standalone shape (#8430)", () => {
+  it("takes the screen as the Admin's settings do: the rail column and the pane are the page's own landmarks", async () => {
+    await renderPage();
+    const settings = screen.getByTestId("account-settings");
+    expect(settings).toHaveClass("min-h-screen");
+    const column = within(settings).getByRole("complementary");
+    expect(column.firstElementChild).toBe(screen.getByTestId("account-settings-back"));
+    expect(column).toContainElement(screen.getByTestId("account-settings-rail"));
+    expect(within(settings).getByRole("main")).toContainElement(
+      screen.getByRole("heading", { level: 1 }),
+    );
+  });
+});
+
 // ── 2. The profile form on the member path (AC-3) ─────────────────────────────
 
 describe("AC-3 — name and photo through the member API (D4, D8)", () => {
@@ -482,6 +503,141 @@ describe("AC-3 — a single site with no member API (a 404 from the pieces read)
   });
 });
 
+// ── #8435 D13 (AC-6) — the contact details on this site ───────────────────────
+
+describe("AC-6 — the contact details (#8435 D13)", () => {
+  const CONTACT = {
+    givenName: "Ada",
+    familyName: "Lovelace",
+    telephone: "+442071234567",
+    address: {
+      addressLine1: "1 Analytical Way",
+      addressLine2: null,
+      city: "London",
+      region: "LDN",
+      postalCode: "N1 1AA",
+      country: "GB",
+    },
+    companyName: "Engines Ltd",
+    jobTitle: "Countess",
+  };
+
+  it("with the member API, renders the contact section seeded from member.contact", async () => {
+    mockContact.mockResolvedValue(ok({ contact: CONTACT }));
+    await renderPage();
+    const section = screen.getByTestId("account-contact-section");
+    expect(mockContact).toHaveBeenCalledWith(COOKIE_INIT);
+    expect(within(section).getByTestId("account-contact-given-name")).toHaveValue("Ada");
+    expect(within(section).getByTestId("account-contact-company")).toHaveValue("Engines Ltd");
+    expect(within(section).getByTestId("field-addressLine1")).toHaveValue("1 Analytical Way");
+    // The profile form's single "Save changes" button stays unique.
+    expect(screen.getAllByRole("button", { name: "Save changes" })).toHaveLength(1);
+    expect(within(section).getByTestId("account-contact-save")).toHaveTextContent("Save contact details");
+  });
+
+  it("with no confirmed contact yet, the form starts blank", async () => {
+    await renderPage();
+    expect(screen.getByTestId("account-contact-given-name")).toHaveValue("");
+  });
+
+  it("a failed read renders the section's unavailable line, not the form", async () => {
+    mockContact.mockResolvedValue(refusal(503, "tenant_unresolved"));
+    await renderPage();
+    expect(screen.queryByTestId("account-contact-form")).not.toBeInTheDocument();
+    expect(screen.getByTestId("account-contact-unavailable")).toHaveTextContent(
+      "Contact details aren't available on this site right now.",
+    );
+  });
+
+  it("a read that throws is the same unavailable line", async () => {
+    mockContact.mockRejectedValue(new Error("down"));
+    await renderPage();
+    expect(screen.getByTestId("account-contact-unavailable")).toBeInTheDocument();
+  });
+
+  it("with no member API (a 404 from the pieces read) the section does not render", async () => {
+    mockPieces.mockResolvedValue(refusal(404, "not_found"));
+    await renderPage();
+    expect(screen.queryByTestId("account-contact-section")).not.toBeInTheDocument();
+    expect(mockContact).not.toHaveBeenCalled();
+  });
+
+  it("saving posts all six keys through saveContact and answers Saved", async () => {
+    mockContact.mockResolvedValue(ok({ contact: CONTACT }));
+    await renderPage();
+    fireEvent.change(screen.getByTestId("account-contact-company"), { target: { value: "Acme" } });
+    await act(async () => {
+      fireEvent.submit(screen.getByTestId("account-contact-form"));
+    });
+    await waitFor(() => expect(mockUpdateContact).toHaveBeenCalledTimes(1));
+    expect(mockUpdateContact).toHaveBeenCalledWith(
+      {
+        givenName: "Ada",
+        familyName: "Lovelace",
+        telephone: "+442071234567",
+        address: CONTACT.address,
+        companyName: "Acme",
+        jobTitle: "Countess",
+      },
+      COOKIE_INIT,
+    );
+    expect(await screen.findByTestId("account-contact-message")).toHaveTextContent("Saved.");
+  });
+
+  it("a refused telephone shows its own line and keeps the fields as typed", async () => {
+    mockUpdateContact.mockResolvedValue(refusal(400, "telephone_invalid"));
+    await renderPage();
+    fireEvent.change(screen.getByTestId("account-contact-company"), { target: { value: "Acme" } });
+    await act(async () => {
+      fireEvent.submit(screen.getByTestId("account-contact-form"));
+    });
+    expect(await screen.findByTestId("account-contact-message")).toHaveTextContent(
+      "Enter the phone number with its country code.",
+    );
+    expect(screen.getByTestId("account-contact-company")).toHaveValue("Acme");
+  });
+});
+
+describe("AC-6 — saveContact (#8435 D13)", () => {
+  const BODY = {
+    givenName: "Ada",
+    familyName: null,
+    telephone: null,
+    address: null,
+    companyName: null,
+    jobTitle: null,
+  };
+
+  it("calls member.updateContact with forwardedCookieInit()'s init", async () => {
+    mockHeaders.mockResolvedValue(new Headers({ origin: "https://site.example.com" }));
+    await expect(saveContact(BODY)).resolves.toEqual({ ok: true });
+    expect(mockUpdateContact).toHaveBeenCalledWith(BODY, {
+      headers: { cookie: "session=abc", origin: "https://site.example.com" },
+    });
+  });
+
+  it.each([
+    [refusal(400, "telephone_invalid"), "telephone"],
+    [refusal(400, "invalid_input"), "invalid"],
+    [refusal(403, "email_unverified"), "unverified"],
+    [refusal(404, "not_found"), "unavailable"],
+    [refusal(409, "contact_unavailable"), "unavailable"],
+    [refusal(503, "tenant_unresolved"), "unavailable"],
+    [refusal(500, "internal_error"), "failed"],
+  ])("maps %j to %s", async (res, reason) => {
+    mockUpdateContact.mockResolvedValue(res);
+    await expect(saveContact(BODY)).resolves.toEqual({ ok: false, reason });
+  });
+
+  it("a throw is failed, and a non-object body makes no call", async () => {
+    mockUpdateContact.mockRejectedValue(new Error("down"));
+    await expect(saveContact(BODY)).resolves.toEqual({ ok: false, reason: "failed" });
+    mockUpdateContact.mockClear();
+    await expect(saveContact(null as never)).resolves.toEqual({ ok: false, reason: "invalid" });
+    expect(mockUpdateContact).not.toHaveBeenCalled();
+  });
+});
+
 // ── 4. The deletion request (AC-4) ────────────────────────────────────────────
 
 describe("AC-4 — Request account deletion through the member API (D5)", () => {

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

@@ -25,11 +25,16 @@
  *     there is no subscription without reading `subscription.me`.
  *   - #8217 AC-1 (spec docs/specs/8217-spoke-billing-spoke-checkout-reads-spec.md
  *     D10–D12): Billing reads the seam's `loadSpokeBilling` — the plan, the
- *     card and Manage in Stripe for a subscription; the plain none line with
+ *     card and Manage billing for a subscription; the plain none line with
  *     no button for none or a spoke without the action (`null`); the
  *     unreadable line; the error row for a failed read — and never calls
  *     `subscription.me` or `member.billing` itself. `openBillingPortal`
  *     redirects to the loader's portal URL, and to nothing without one.
+ *   - #8431 AC-4 (spec docs/specs/8431-account-security-tab-human-sign-spec.md
+ *     D1–D3): Security says the hub manages sign-in and links to the hub's
+ *     own Security page, offers no password control and never reads the
+ *     seam's accounts; Log out POSTs the spoke's sign-out endpoint, never
+ *     Better Auth, and lands on `/account` only when it succeeded.
  */
 import { mkdtempSync, rmSync, writeFileSync } from "node:fs";
 import { tmpdir } from "node:os";
@@ -73,6 +78,7 @@ jest.mock("next/headers", () => ({
 
 const mockReadSession = jest.fn();
 const mockLoadSpokeBilling = jest.fn();
+const mockReadOwnAccounts = jest.fn();
 // eslint-disable-next-line no-restricted-syntax -- #507: the seam is generated per build (#7894 D8); its `signIn: "hub"` render is the boundary under test, and no env or HTTP surface selects it.
 jest.mock("../../../../../lib/topology.generated", () => ({
   __esModule: true,
@@ -86,6 +92,8 @@ jest.mock("../../../../../lib/topology.generated", () => ({
   registerSiteStores: () => Promise.resolve(),
   // #8217 D7 — the billing render's loader; `null` is a spoke without the action.
   loadSpokeBilling: (...args: unknown[]) => mockLoadSpokeBilling(...args),
+  // #8431 D2a — a spoke has no local accounts; Security must never ask.
+  readOwnAccounts: (...args: unknown[]) => mockReadOwnAccounts(...args),
 }));
 
 const mockLeadsSubmit = jest.fn();
@@ -126,18 +134,20 @@ jest.mock("@working-theory/api-client", () => ({
 }));
 
 const mockUpdateUser = jest.fn();
+const mockSignOut = jest.fn();
 jest.mock("better-auth/react", () => ({
   __esModule: true,
   createAuthClient: () => ({
-    signOut: jest.fn(),
+    signOut: (...args: unknown[]) => mockSignOut(...args),
     updateUser: (...args: unknown[]) => mockUpdateUser(...args),
   }),
 }));
 
 const mockRedirect = jest.fn();
+const mockPush = jest.fn();
 jest.mock("next/navigation", () => ({
   __esModule: true,
-  useRouter: () => ({ push: jest.fn(), refresh: jest.fn(), replace: jest.fn() }),
+  useRouter: () => ({ push: mockPush, refresh: jest.fn(), replace: jest.fn() }),
   usePathname: () => "/account/general",
   redirect: (...args: unknown[]) => mockRedirect(...args),
 }));
@@ -196,6 +206,9 @@ beforeEach(() => {
   mockRedirect.mockReset();
   mockCookieSet.mockReset();
   mockUpdateUser.mockReset();
+  mockReadOwnAccounts.mockReset().mockResolvedValue(null);
+  mockSignOut.mockReset();
+  mockPush.mockReset();
 });
 
 afterEach(() => {
@@ -247,15 +260,6 @@ describe("AC-5 — General and Billing on a hub-mode spoke (#8232)", () => {
       expect(document.querySelector(`a[href^="${HUB}"]`)).toBeNull();
     });
 
-    it("the Security tab's sign-in line reads the hub, by the same name read (D7, moved from General)", async () => {
-      const { default: SecurityPage } = await import("../security/page");
-      render(await SecurityPage({ params: Promise.resolve({ locale: "en" }) }));
-      expect(screen.getByTestId("account-signin-method")).toHaveTextContent(
-        "You sign in through hub.example.com.",
-      );
-      expect(document.querySelector(`a[href^="${HUB}"]`)).toBeNull();
-    });
-
     it("saves the name through member.updateProfile with the Bearer credential, then re-seals the session", async () => {
       mockUpdateProfile.mockResolvedValue({ ok: true, body: { name: "Ada King", image: null } });
       mockHubMe.mockResolvedValue({ ok: true, body: { user: { ...USER, name: "Ada King" }, billingCustomerId: null } });
@@ -326,6 +330,77 @@ describe("AC-5 — General and Billing on a hub-mode spoke (#8232)", () => {
   });
 });
 
+describe("#8431 AC-4 — Security on a hub-mode spoke", () => {
+  const realFetch = Object.getOwnPropertyDescriptor(globalThis, "fetch");
+  const mockFetch = jest.fn();
+
+  beforeEach(() => {
+    mockFetch.mockReset();
+    Object.defineProperty(globalThis, "fetch", { value: mockFetch, writable: true, configurable: true });
+  });
+
+  afterEach(() => {
+    if (realFetch) Object.defineProperty(globalThis, "fetch", realFetch);
+    else Reflect.deleteProperty(globalThis, "fetch");
+  });
+
+  async function renderSecurity(): Promise<void> {
+    const { default: SecurityPage } = await import("../security/page");
+    render(await SecurityPage({ params: Promise.resolve({ locale: "en" }) }));
+  }
+
+  it("says the hub manages sign-in and links to the hub's Security page — no password control", async () => {
+    await renderSecurity();
+    expect(screen.getByTestId("account-security-hub").textContent).toBe(
+      "Your sign-in is managed at hub.example.com.",
+    );
+    const links = screen.getAllByTestId("account-security-hub-link");
+    expect(links).toHaveLength(1);
+    expect(links[0]).toHaveAttribute("href", `${HUB}/account/security`);
+    expect(screen.getByTestId("account-security-log-out")).toBeInTheDocument();
+    expect(screen.queryByTestId("account-security-password")).not.toBeInTheDocument();
+    expect(screen.queryByTestId("account-security-sentence")).not.toBeInTheDocument();
+    expect(screen.queryByText(/other devices/i)).toBeNull();
+    expect(mockReadOwnAccounts).not.toHaveBeenCalled();
+  });
+
+  it("with the hub config absent says 'our main site' and links nowhere", async () => {
+    delete process.env.AILK_HUB_CLIENT_SECRET;
+    await renderSecurity();
+    expect(screen.getByTestId("account-security-hub").textContent).toBe(
+      "Your sign-in is managed by our main site.",
+    );
+    expect(screen.queryByTestId("account-security-hub-link")).not.toBeInTheDocument();
+    expect(screen.getByTestId("account-security-log-out")).toBeInTheDocument();
+  });
+
+  it("Log out POSTs the spoke's sign-out endpoint, never Better Auth, and on a 204 lands on /account", async () => {
+    mockFetch.mockResolvedValue({ ok: true, status: 204 });
+    await renderSecurity();
+    await act(async () => {
+      fireEvent.click(screen.getByTestId("account-security-log-out"));
+    });
+    expect(mockFetch).toHaveBeenCalledTimes(1);
+    expect(mockFetch).toHaveBeenCalledWith("/api/hub-session/sign-out", {
+      method: "POST",
+      credentials: "same-origin",
+    });
+    expect(mockSignOut).not.toHaveBeenCalled();
+    expect(mockPush).toHaveBeenCalledWith("/account");
+  });
+
+  it("a refused sign-out (403) navigates nowhere and shows the error", async () => {
+    mockFetch.mockResolvedValue({ ok: false, status: 403 });
+    await renderSecurity();
+    await act(async () => {
+      fireEvent.click(screen.getByTestId("account-security-log-out"));
+    });
+    expect(mockPush).not.toHaveBeenCalled();
+    expect(mockSignOut).not.toHaveBeenCalled();
+    expect(screen.getByTestId("account-security-log-out-error")).toBeInTheDocument();
+  });
+});
+
 describe("#8217 AC-1 — Billing on a hub-mode spoke reads the seam's spoke billing (D10–D12)", () => {
   const VISA = { brand: "visa", last4: "4242", expMonth: 4, expYear: 2030 };
   const PORTAL_URL = "https://billing.stripe.com/p/session/test_fake";
@@ -347,7 +422,7 @@ describe("#8217 AC-1 — Billing on a hub-mode spoke reads the seam's spoke bill
     expect(mockMemberBilling).not.toHaveBeenCalled();
   });
 
-  it("a subscription renders the plan, the card and Manage in Stripe", async () => {
+  it("a subscription renders the plan, the card and Manage billing", async () => {
     mockLoadSpokeBilling.mockResolvedValue(
       stub({ kind: "subscription", status: "active", planName: "Pro", paymentMethod: VISA, unreadable: false }),
     );
@@ -356,7 +431,7 @@ describe("#8217 AC-1 — Billing on a hub-mode spoke reads the seam's spoke bill
     expect(card).toHaveTextContent("Pro");
     expect(card).toHaveTextContent("Active");
     expect(card).toHaveTextContent("visa ending in 4242, expires 04/2030");
-    expect(screen.getByTestId("account-billing-manage")).toHaveTextContent("Manage in Stripe");
+    expect(screen.getByTestId("account-billing-manage")).toHaveTextContent("Manage billing");
     expect(screen.queryByTestId("account-billing-none")).not.toBeInTheDocument();
     expect(screen.queryByTestId("account-billing-unreadable")).not.toBeInTheDocument();
   });