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/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/);
+  });
+});