feat(docs): redesign navigation, footer and page shell

AGENTS.md

@@ -17,10 +17,12 @@ Vocs-powered documentation site for Tempo protocol. Use this guidance when creat
 
 ## Documentation IA and agent exports
 
-- `src/lib/docs-sections.ts` owns the section labels, landing routes, and route ownership; `vocs.config.ts` owns the sidebar within each section.
-- Primary sections: Get Started (`/get-started`), Accounts (`/docs/accounts`), Earn (`/docs/earn`), Routes (`/docs/routes`), Zones (`/docs/zones`), and Machine Payments (`/docs/agents`). Get Started also owns the SDK, CLI, and wallet CLI pages (`/docs/sdk`, `/docs/cli`, `/docs/wallet`) as its Tempo CLI and Tempo SDK sections.
-- Tempo EVM (`/docs/development`) covers wallets and signing keys, transactions, fees, TIP-20 Tokens, contracts, exchange, network details, nodes, protocol specifications, and changelog.
-- API reference (`/docs/api`) is its own top-nav link, matching Console's "API Docs" link. Partners (`/docs/partners`) contains third-party integrations. The old APIs & SDKs hub (`/docs/tools`) redirects to `/docs/sdk`.
+- `src/lib/docs-sections.ts` owns the section labels, landing routes, and route ownership, plus `docsResourceSectionIds`, the sections in the top bar's Resources menu; `vocs.config.ts` owns the sidebar within each section.
+- Top bar: the TEMPO DEVELOPERS lockup (Home), the products as plain links (Get started, Accounts, Earn, Routes, Zones, Machine Payments, Network), then Resources, the only menu (Guides, Partners, SDKs & CLI), search and Get API key, the one primary button. There is no second row. The sidebar lists only the current section's pages, and each product's sidebar ends with an API reference group that links its endpoint pages; the API reference itself keeps the full sidebar generated from the spec. Below 1200px the products move into the menu drawer (products, Resources, then the section's pages); the Vocs sidebar shows from 1080px. Each docs page opens with a header row: Section › Page breadcrumbs, Ask AI and Copy page. Docs pages end at Previous / Next with no footer; Home and Not found keep the full footer.
+- Sections: Get started (`/get-started`, onboarding plus the testnet faucet, network details, and Build with AI), Accounts (`/docs/accounts`), Earn (`/docs/earn`), Routes (`/docs/routes`), Zones (`/docs/zones`), Machine Payments (`/docs/agents`), Network (`/docs/development`, plus `/docs/guide/node`, `/docs/changelog`, and `/docs/protocol/upgrades`), API (`/docs/api`), SDKs & CLI (`/docs/sdk`, `/docs/cli`, `/docs/wallet`), Guides (`/docs/resources`) and Partners (`/docs/partners`).
+- Network merges the former Tempo EVM and Operate sections under the `developers` id. Its sidebar lists the Tempo EVM groups (wallets and signing keys, transactions, fees, TIP-20 Tokens, contracts, exchange, network details, and protocol specifications), then Run a node, then Changelog (network upgrades, node releases, and operator updates).
+- The header has no product switcher, agent popover, or sign-in link. Their links live in context: Tempo Wallet in the Accounts sidebar, the MPP spec in Machine Payments, the Explorer in Network, agent setup in Get started › Build with AI, and Console behind Get API key (it reads "Console" when signed in).
+- API reference matches Console's "API Docs" link. Partners contains third-party integrations. The old APIs & SDKs hub (`/docs/tools`) redirects to `/docs/sdk`.
 - Keep Earn and Routes beta notices and the Zones availability notice (live on Mainnet, set up with Tempo) on their overview pages. The earlier `/docs/guide/private-zones` sandbox is a separate integration.
 - `public/SKILL.md` is the canonical Tempo docs skill, published at `/SKILL.md`. The `tempoxyz/plugins` copy is generated from it by that repo's skill sync, so edit only `public/SKILL.md` here.
 - `src/lib/markdown-output-transform.ts` uses `src/lib/ai-docs.ts` to add section context before Vocs validates and writes Markdown exports. `SKILL.md` links to `public/SKILL.md`, the source Vite serves and copies. Never edit `dist` or `.vercel` copies by hand.

e2e/blog.test.ts

@@ -51,24 +51,34 @@ for (const width of [390, 1440]) {
     await expect(
       page.locator('header').getByRole('link', { name: 'Blog', exact: true, includeHidden: true }),
     ).toHaveCount(0)
-    await expect(
-      page
-        .locator('.docs-section-utilities')
-        .getByRole('link', { name: 'Blog', exact: true, includeHidden: true }),
-    ).toHaveCount(0)
     await expect(page.locator('#blog, .tempo-blog')).toHaveCount(0)
-    if (width < 1080) {
+    if (width < 1200) {
       await page.getByRole('button', { name: 'Open menu', exact: true }).click()
-      const menu = page.getByRole('dialog', { name: 'Documentation navigation', exact: true })
+      const menu = page.getByRole('dialog', { name: 'Tempo Developers menu', exact: true })
       await expect(menu).toBeVisible()
       await expect(
         menu.getByRole('link', { name: 'Blog', exact: true, includeHidden: true }),
       ).toHaveCount(0)
-      await expect(menu.getByRole('link', { name: 'Get Started', exact: true })).toBeVisible()
+      await expect(menu.getByRole('link', { name: 'Get started', exact: true })).toBeVisible()
     } else {
+      const products = page
+        .locator('header.docs-site-header')
+        .getByRole('navigation', { name: 'Products', exact: true })
+      await expect(products).toBeVisible()
+      await expect(products.getByRole('link')).toHaveText([
+        'Get started',
+        'Accounts',
+        'Earn',
+        'Routes',
+        'Zones',
+        'Machine Payments',
+        'Network',
+      ])
+      // Resources, the bar's only menu, opens outside the header.
+      await products.getByRole('button', { name: 'Resources', exact: true }).click()
       await expect(
-        page.getByRole('navigation', { name: 'Documentation sections', exact: true }),
-      ).toBeVisible()
+        page.getByRole('menu', { name: 'Resources', exact: true }).getByRole('menuitem'),
+      ).toHaveText(['Guides', 'Partners', 'SDKs & CLI'])
     }
   })
 }

e2e/developers-homepage.test.ts

@@ -16,8 +16,14 @@ test('serves the docs homepage directly at the root URL', async ({ page, request
   expect((await request.get('/', { maxRedirects: 0 })).status()).toBe(200)
   await page.goto('/')
   await expect(page).toHaveURL((url) => url.pathname === '/')
-  await expect(page.getByRole('heading', { level: 1, name: 'Documentation' })).toBeVisible()
-  await expect(page.getByRole('navigation', { name: 'Developer navigation' })).toBeVisible()
+  await expect(
+    page.getByRole('heading', { level: 1, name: 'Build stablecoin payments on Tempo' }),
+  ).toBeVisible()
+  await expect(
+    page
+      .locator('header.docs-site-header')
+      .getByRole('navigation', { name: 'Products', exact: true }),
+  ).toBeVisible()
 })
 
 test('keeps legacy docs queries and anchors when opening the new landing', async ({ page }) => {
@@ -40,7 +46,7 @@ test('serves getting started directly with its overview sidebar', async ({ page,
   ).toBeVisible()
   const sidebar = page.locator('[data-v-gutter-left] [data-v-sidebar-container]')
   await expect(sidebar).toBeVisible()
-  await expect(sidebar.getByRole('link', { name: 'Start building', exact: true })).toHaveAttribute(
+  await expect(sidebar.getByRole('link', { name: 'Build on Tempo', exact: true })).toHaveAttribute(
     'href',
     '/get-started',
   )
@@ -84,24 +90,30 @@ for (const entry of ['direct', 'client navigation'] as const) {
     } else {
       await page.goto('/docs/accounts')
       await page
-        .getByRole('navigation', { name: 'Documentation sections' })
-        .getByRole('link', { name: 'Get Started', exact: true })
+        .locator('header.docs-site-header')
+        .getByRole('navigation', { name: 'Products', exact: true })
+        .getByRole('link', { name: 'Get started', exact: true })
         .click()
       await page
         .locator('article[data-v-content]')
-        .getByRole('link', { name: 'interactive quickstart', exact: true })
+        .getByRole('link', { name: 'Send your first payment', exact: true })
         .click()
     }
 
     await expect(page).toHaveURL((url) => url.pathname === '/get-started/quickstart')
     await expect(page.locator('#try-a-payment')).toBeAttached()
     await expect(page.locator('h2#try-a-payment')).toBeVisible()
-    const pageTools = page.getByRole('navigation', { name: 'Page tools' })
-    await expect(pageTools).toHaveCount(1)
-    await expect(pageTools.getByRole('link', { name: 'View Markdown' })).toHaveAttribute(
-      'href',
-      '/assets/md/get-started/quickstart.md',
-    )
+    // One Copy page split button above the H1; its menu links the page's Markdown.
+    const pageActions = page.locator('.docs-page-actions')
+    await expect(pageActions).toHaveCount(1)
+    await expect(pageActions.getByRole('button', { name: 'Copy page', exact: true })).toBeVisible()
+    await pageActions.getByRole('button', { name: 'More page options', exact: true }).click()
+    const pageMenu = page.getByRole('menu', { name: 'More page options', exact: true })
+    await expect(
+      pageMenu.getByRole('menuitem', { name: 'View as Markdown', exact: true }),
+    ).toHaveAttribute('href', '/assets/md/get-started/quickstart.md')
+    await page.keyboard.press('Escape')
+    await expect(pageMenu).toHaveCount(0)
     const signIn = getDemoStep(page, 'Create an account, or use an existing one.').getByRole(
       'button',
       { name: 'Sign in', exact: true },
@@ -163,33 +175,40 @@ for (const entry of ['direct', 'client navigation'] as const) {
   }) => {
     await page.setViewportSize({ width: 1440, height: 1000 })
     const sidebar = page.locator('[data-v-gutter-left] [data-v-sidebar-container]')
-    const sections = page.getByRole('navigation', { name: 'Documentation sections' })
+    const products = page
+      .locator('header.docs-site-header')
+      .getByRole('navigation', { name: 'Products', exact: true })
 
     if (entry === 'direct') {
       expect((await request.get('/get-started/quickstart', { maxRedirects: 0 })).status()).toBe(200)
       await page.goto('/get-started/quickstart')
     } else {
       await page.goto('/docs/accounts')
-      await sections.getByRole('link', { name: 'Get Started', exact: true }).click()
+      // Get started opens its overview.
+      await products.getByRole('link', { name: 'Get started', exact: true }).click()
+      await expect(page).toHaveURL(/\/get-started\/?$/)
       await sidebar.getByRole('link', { name: 'Quickstart', exact: true }).click()
     }
 
     await expect(page).toHaveURL(/\/get-started\/quickstart\/?$/)
     await expect(
       page.getByRole('heading', { level: 1, name: 'Quickstart', exact: true }),
     ).toBeVisible()
-    await expect(page.getByRole('navigation', { name: 'Developer navigation' })).toBeVisible()
-    await expect(sections).toBeVisible()
-    await expect(sections.locator('[aria-current="page"]')).toHaveText('Get Started')
+    await expect(products).toBeVisible()
+    await expect(products.locator('[aria-current="page"]')).toHaveText('Get started')
+    await expect(products.getByRole('link', { name: 'Get started', exact: true })).toHaveAttribute(
+      'aria-current',
+      'page',
+    )
     await expect(sidebar).toBeVisible()
     await expect(sidebar.locator('a[data-active]')).toHaveAttribute(
       'href',
       '/get-started/quickstart',
     )
 
-    await sidebar.getByRole('link', { name: 'Start building', exact: true }).click()
+    await sidebar.getByRole('link', { name: 'Build on Tempo', exact: true }).click()
     await expect(page).toHaveURL(/\/get-started\/?$/)
-    await expect(sections).toBeVisible()
+    await expect(products.locator('[aria-current="page"]')).toHaveText('Get started')
     await expect(sidebar.locator('a[data-active]')).toHaveAttribute('href', '/get-started')
   })
 }