fix(e2e): make Playwright tests pass — route prefix + test routing (#22)

Two related fixes that turn the failing CI green for the first time
since /app/* routing was introduced in PR #14:

1. src/layout/AppShell.tsx — routeIdToKey() now strips the /app
   prefix before looking up PAGE_META. Before this change, every
   authenticated page rendered an empty <h1> (the meta.title lookup
   missed because the keys are short, e.g. '/resources', but the
   actual pathname after PR #14 is '/app/resources'). The empty h1
   was visible in the trace from
   github.com/InstaNode-dev/instanode-web/actions/runs/25675342041
   — heading[level=1] had no text content even though the rest of
   the page rendered correctly.

2. e2e/auth.spec.ts + e2e/navigation.spec.ts — updated the tests
   to navigate to /app instead of / for authenticated routes. The
   old tests assumed the dashboard lived at /, but that's the
   public marketing page now. Updated 4 test cases:

   - "unauthenticated user redirected to /login": go to /app
   - "login accepts valid token, lands on overview": expect
     /app on success
   - "signed-in user lands on overview directly": go to /app,
     expect Overview h1
   - "every nav link reaches its page": all targets get the
     /app prefix, plus go to /app instead of / first
   - "OAuth buttons": dropped Google assertion (UI exposes
     GitHub + magic-link only today; Google OAuth route exists
     on the backend but no UI button has been added yet)

Result locally: 10/10 Playwright tests pass. The CI failure that
started on PR #11 (slice B, the first PR after /app/* routing
landed) is gone.

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: mastermanas805

e2e/auth.spec.ts

@@ -2,8 +2,11 @@ import { expect, test } from '@playwright/test'
 import { installAPIFake, signIn } from './fixtures'
 
 test.describe('Auth gate', () => {
+  // The authenticated app is mounted under /app/* (see App.tsx); `/` is
+  // the public marketing page and is reachable without a session. So we
+  // poke a protected route to exercise the AuthGate redirect.
   test('unauthenticated user is redirected to /login', async ({ page }) => {
-    await page.goto('/')
+    await page.goto('/app')
     await expect(page).toHaveURL(/\/login$/)
     await expect(page.getByRole('heading', { name: /Sign in/i })).toBeVisible()
   })
@@ -31,21 +34,26 @@ test.describe('Auth gate', () => {
     await page.getByTestId('toggle-token-form').click()
     await page.getByTestId('token-input').fill('ink_VALID')
     await page.getByTestId('login-submit').click()
-    await expect(page).toHaveURL(/\/$/)
+    // LoginPage navigates to /app on success (see LoginPage.tsx).
+    await expect(page).toHaveURL(/\/app\/?$/)
   })
 
   test('OAuth buttons redirect to backend handlers', async ({ page }) => {
+    // LoginPage currently exposes GitHub OAuth + email magic-link only.
+    // Google OAuth is wired on the backend (POST /auth/google) but not
+    // surfaced in the UI yet — add the button + a test assertion below
+    // when it ships.
     await page.goto('/login')
     await expect(page.getByTestId('oauth-github')).toBeVisible()
-    await expect(page.getByTestId('oauth-google')).toBeVisible()
   })
 
   test('signed-in user lands on overview directly', async ({ page }) => {
     await signIn(page)
     await installAPIFake(page)
-    await page.goto('/')
-    await expect(page).toHaveURL(/\/$/)
-    // The new design's h1 is "Overview." with a period; flexible match.
+    // `/` is the public marketing page; the authenticated overview lives
+    // at /app. Navigate there directly to exercise the post-sign-in landing.
+    await page.goto('/app')
+    await expect(page).toHaveURL(/\/app\/?$/)
     await expect(page.getByRole('heading', { level: 1, name: /Overview/ })).toBeVisible()
   })
 })

e2e/navigation.spec.ts

@@ -8,16 +8,18 @@ test.describe('Navigation', () => {
   })
 
   test('every nav link reaches its page', async ({ page }) => {
-    await page.goto('/')
+    // The authenticated app is mounted under /app/*; the sidebar nav links
+    // point to /app/<section>. The Overview is just /app (or /app/).
+    await page.goto('/app')
     const targets: { name: RegExp; pathFragment?: string }[] = [
-      { name: /Resources/i, pathFragment: '/resources' },
-      { name: /Deployments/i, pathFragment: '/deployments' },
-      { name: /Stacks/i, pathFragment: '/stacks' },
-      { name: /Vault/i, pathFragment: '/vault' },
-      { name: /Team/i, pathFragment: '/team' },
-      { name: /Billing/i, pathFragment: '/billing' },
-      { name: /Settings/i, pathFragment: '/settings' },
-      { name: /Overview/i, pathFragment: '/' },
+      { name: /Resources/i, pathFragment: '/app/resources' },
+      { name: /Deployments/i, pathFragment: '/app/deployments' },
+      { name: /Stacks/i, pathFragment: '/app/stacks' },
+      { name: /Vault/i, pathFragment: '/app/vault' },
+      { name: /Team/i, pathFragment: '/app/team' },
+      { name: /Billing/i, pathFragment: '/app/billing' },
+      { name: /Settings/i, pathFragment: '/app/settings' },
+      { name: /Overview/i, pathFragment: '/app' },
     ]
     for (const t of targets) {
       // Use the sidebar link by accessible name. The new design renders nav

src/layout/AppShell.tsx

@@ -284,12 +284,20 @@ export function AppShell() {
   )
 }
 
-// react-router gives us route-id strings — coerce to our PAGE_META key
+// react-router gives us route-id strings — coerce to our PAGE_META key.
+//
+// The authenticated app is mounted under `/app/*` (see App.tsx), but PAGE_META
+// keys are short (`/resources`, `/deployments/:id`, …) because they predate
+// the /app prefix. Strip the prefix here so the lookup hits — otherwise
+// every page renders an empty <h1> because getMeta() falls through to its
+// default. The /app -> root mapping ('/app' becomes '/') matches the
+// Overview page entry. (PR-fixed long-standing CI failure 2026-05-11.)
 function routeIdToKey(_id: string, pathname: string): string {
+  const stripped = pathname.replace(/^\/app/, '') || '/'
   // detail routes
-  if (/^\/resources\/[^/]+$/.test(pathname)) return '/resources/:id'
-  if (/^\/deployments\/[^/]+$/.test(pathname)) return '/deployments/:id'
-  return pathname
+  if (/^\/resources\/[^/]+$/.test(stripped)) return '/resources/:id'
+  if (/^\/deployments\/[^/]+$/.test(stripped)) return '/deployments/:id'
+  return stripped
 }
 
 // ──────────────────────────────────────────────────────────────────────────