Give the shell one header, a skip link, and a cookie-aware first paint.

Breakpoint clones were still in the tab order, marketing always painted Log in, and at 430px the logo overlay covered Use cases and Learn.

Co-authored-by: Cursor <cursoragent@cursor.com>

tests/components/SkipToContent.test.tsx

@@ -0,0 +1,14 @@
+import "@testing-library/jest-dom/vitest";
+import { describe, expect, it } from "vitest";
+import SkipToContent from "../../app/components/navigation/SkipToContent";
+import { MAIN_CONTENT_ID } from "../../lib/mainContent";
+import { renderWithProviders as render, screen } from "../utils/test-utils";
+
+describe("SkipToContent", () => {
+  it("targets the main landmark", () => {
+    render(<SkipToContent />);
+    const link = screen.getByRole("link", { name: "Skip to content" });
+    expect(link).toHaveAttribute("href", `#${MAIN_CONTENT_ID}`);
+    expect(link).toHaveClass("skip-to-content");
+  });
+});

tests/components/Top.test.tsx

@@ -85,9 +85,7 @@ describe('Top "Create rule" button', () => {
 
     renderWithProviders(<Top folderTop={false} />);
 
-    // Top renders the Create Rule button at three breakpoints (xs/sm/md);
-    // any of them clicking the same handler is the point.
-    const [btn] = screen.getAllByRole("button", {
+    const btn = screen.getByRole("button", {
       name: /create a new rule/i,
     });
     await userEvent.click(btn);
@@ -112,7 +110,7 @@ describe('Top "Create rule" button', () => {
   it("uses filled invert for Create rule", () => {
     for (const folderTop of [false, true]) {
       const { unmount } = renderWithProviders(<Top folderTop={folderTop} />);
-      const [button] = screen.getAllByRole("button", {
+      const button = screen.getByRole("button", {
         name: /create a new rule/i,
       });
       expect(button.className).toContain(
@@ -125,3 +123,56 @@ describe('Top "Create rule" button', () => {
     }
   });
 });
+
+describe("Top header chrome", () => {
+  it("renders each nav control once, including display:none copies", () => {
+    for (const folderTop of [false, true]) {
+      const { unmount } = renderWithProviders(
+        <Top folderTop={folderTop} loggedIn />,
+      );
+      expect(
+        screen.getAllByRole("menuitem", {
+          name: /navigate to use cases page/i,
+          hidden: true,
+        }),
+      ).toHaveLength(1);
+      expect(
+        screen.getAllByRole("menuitem", {
+          name: /navigate to learn page/i,
+          hidden: true,
+        }),
+      ).toHaveLength(1);
+      expect(
+        screen.getAllByRole("menuitem", {
+          name: /go to your profile/i,
+          hidden: true,
+        }),
+      ).toHaveLength(1);
+      expect(
+        screen.getAllByRole("button", {
+          name: /create a new rule/i,
+          hidden: true,
+        }),
+      ).toHaveLength(1);
+      unmount();
+    }
+  });
+
+  it("shows Profile instead of Log in when signed in", () => {
+    renderWithProviders(<Top folderTop={false} loggedIn />);
+    expect(
+      screen.getByRole("menuitem", { name: /go to your profile/i }),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: /log in to your account/i }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("keeps the standard logo and nav in separate columns", () => {
+    renderWithProviders(<Top folderTop={false} loggedIn />);
+    const logo = document.querySelector("[data-top='logo']");
+    const nav = document.querySelector("[data-top='nav']");
+    expect(logo?.className).not.toMatch(/\bz-20\b/);
+    expect(nav?.className).not.toMatch(/\babsolute\b/);
+  });
+});

tests/components/TopWithPathname.test.tsx

@@ -0,0 +1,34 @@
+import { describe, expect, it, vi } from "vitest";
+import "@testing-library/jest-dom/vitest";
+import TopWithPathname from "../../app/components/navigation/Top/TopWithPathname";
+import { renderWithProviders, screen } from "../utils/test-utils";
+
+const { pushMock } = vi.hoisted(() => ({ pushMock: vi.fn() }));
+
+vi.mock("next/navigation", () => ({
+  useRouter: () => ({
+    push: pushMock,
+    replace: vi.fn(),
+    prefetch: vi.fn(),
+    back: vi.fn(),
+    forward: vi.fn(),
+    refresh: vi.fn(),
+  }),
+  usePathname: () => "/learn",
+}));
+
+vi.mock("../../lib/create/api", () => ({
+  fetchAuthSession: () => new Promise(() => {}),
+}));
+
+describe("TopWithPathname", () => {
+  it("renders Profile from the server session before /api/auth/session resolves", () => {
+    renderWithProviders(<TopWithPathname initialSignedIn />);
+    expect(
+      screen.getByRole("menuitem", { name: /go to your profile/i }),
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByRole("button", { name: /log in to your account/i }),
+    ).not.toBeInTheDocument();
+  });
+});