fix(dashboard): /app SSG shell + IncidentsPage + Stat series prop + ResourceDetailPage gap placeholder (#54)

Closes P3 persona-walkthrough bugs:
1. /app 404 — prerender now emits dist/app/index.html so GH Pages serves the auth-gated entry path with HTTP 200; React Router takes over in-browser
2. Hardcoded sparkline data in Stat — replaced synth series with required series?: number[] prop; all 6 callers pass undefined pending real wiring
3. /incidents dead link — new IncidentsPage with empty-state by default; fetches /api/v1/incidents and treats 404 as []
4. ResourceDetailPage status="gap" placeholder — removed; replaced with Coming-in-Pro mailto CTA

422 passed | 3 skipped (+5 new tests). 21 Playwright tests pass (+3 new).

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

Author: mastermanas805

e2e/persona-bugs.spec.ts

@@ -0,0 +1,77 @@
+/* persona-bugs.spec.ts — coverage for the four P3 (Pro founder) persona
+ * regressions found on 2026-05-13.
+ *
+ * Bug 1 — instanode.dev/app returned 404. The SPA shell now ships at
+ *         dist/app/index.html so GH Pages serves the entry path with
+ *         HTTP 200 and the React Router takes over. We verify the route
+ *         loads cleanly in dev (no 404, response is 200, AuthGate is
+ *         reachable).
+ *
+ * Bug 3 — /incidents link from /status was dead. The new IncidentsPage
+ *         renders an empty-state ("No active incidents") when the
+ *         /api/v1/incidents endpoint is missing.
+ */
+
+import { expect, test, type Route } from '@playwright/test'
+
+test.describe('P3 persona bug fixes', () => {
+  // Bug 1: /app must not 404.
+  test('GET /app responds 200 and mounts the SPA (no 404)', async ({ page }) => {
+    // The Vite dev server returns the SPA shell for any route via the
+    // middleware mode. A pre-fix regression would either 404 here (in
+    // production this surfaced via GH Pages) or render an empty page
+    // with no <div id="root"> mount.
+    const response = await page.goto('/app')
+    expect(response).not.toBeNull()
+    // dev server may return 200 directly; in any case the SPA must mount.
+    expect(response!.status()).toBeLessThan(400)
+
+    // SPA root mount node must be present (the build pipeline now writes
+    // this template to dist/app/index.html, so GH Pages serves it too).
+    await expect(page.locator('#root')).toBeAttached()
+
+    // With no auth token, AuthGate redirects to /login — that's fine,
+    // it means the SPA booted and reacted to the route. The opposite
+    // failure mode (regression) is a static 404 page with no router.
+    await page.waitForURL(/\/(login|app).*$/)
+  })
+
+  // Bug 3: /incidents must render (empty-state by default).
+  test('GET /incidents renders "No active incidents" empty state', async ({ page }) => {
+    // The page calls fetchIncidents() → GET /api/v1/incidents on mount.
+    // That endpoint doesn't exist on the agent API yet; in MOCKED mode
+    // (default in this repo) page.route lets us stub it. We return 404
+    // because that's what the live API does today, and the page should
+    // tolerate it and render the empty state.
+    await page.route('**/api/v1/incidents', (route: Route) =>
+      route.fulfill({
+        status: 404,
+        contentType: 'application/json',
+        body: JSON.stringify({ ok: false, error: 'not_found' }),
+      }),
+    )
+
+    const response = await page.goto('/incidents')
+    expect(response).not.toBeNull()
+    expect(response!.status()).toBeLessThan(400)
+
+    // The page renders the empty-state — the literal "No active incidents"
+    // headline plus a mailto for reporting.
+    await expect(page.getByTestId('incidents-empty')).toBeVisible()
+    await expect(
+      page.getByTestId('incidents-empty').getByText(/no active incidents/i),
+    ).toBeVisible()
+    // Report-an-incident link in the empty state.
+    await expect(
+      page.getByRole('link', { name: /report an incident/i }).first(),
+    ).toBeVisible()
+  })
+
+  // Sanity check: /status footer link still points at /incidents.
+  test('GET /status footer "Incident log" link targets /incidents', async ({ page }) => {
+    await page.goto('/status')
+    const link = page.getByRole('link', { name: /incident log/i })
+    await expect(link).toBeVisible()
+    expect(await link.getAttribute('href')).toBe('/incidents')
+  })
+})

scripts/prerender.mjs

@@ -65,6 +65,7 @@ async function loadRoutes() {
     '/pricing',
     '/for-agents',
     '/status',
+    '/incidents',
     '/docs',
     '/blog',
     '/use-cases',
@@ -133,6 +134,33 @@ async function main() {
     written++
   }
 
+  // Step 4.5: emit empty SPA shells for every authenticated /app/* entry.
+  //
+  // P3 founder persona caught instanode.dev/app returning 404 on 2026-05-13.
+  // Cause: the GH Pages SPA pattern (cp dist/index.html dist/404.html)
+  // serves 404.html with HTTP status 404 for any path that doesn't have a
+  // matching file under dist/. For SEO routes (/pricing, /blog/...) we
+  // emit dist/<route>/index.html via SSG above, which fixes the status to
+  // 200 for crawlers. The /app/* tree is intentionally NOT SSG'd (it needs
+  // localStorage, would crash in renderToString, and has no SEO value
+  // anyway because it's auth-gated). But the entry path /app must still
+  // return 200 so a customer who types instanode.dev/app into a browser
+  // sees the SPA boot, not a 404 page.
+  //
+  // Fix: write the unrendered SPA template (the same one Vite emits as
+  // dist/index.html before our prerender step overwrites it for the
+  // homepage) to dist/app/index.html. The file has an empty
+  // <div id="root"></div>; React Router mounts in the browser, sees URL
+  // /app, runs through AuthGate, and either renders the overview or
+  // redirects to /login. Status 200 either way.
+  //
+  // The dist/index.html template variable above still has the unrendered
+  // SPA shell because we read it BEFORE the homepage was overwritten.
+  const appShellPath = resolve(DIST, 'app', 'index.html')
+  await mkdir(dirname(appShellPath), { recursive: true })
+  await writeFile(appShellPath, template, 'utf-8')
+  console.log('prerender: wrote dist/app/index.html SPA shell (P3 fix)')
+
   // Step 5: copy /llms.txt from the content repo to dist root. The
   // llms.txt convention (https://llmstxt.org) expects the file at the
   // domain root.

src/App.tsx

@@ -37,6 +37,9 @@ const ForAgentsPage = lazy(() =>
 const StatusPage = lazy(() =>
   import('./pages/StatusPage').then((m) => ({ default: m.StatusPage })),
 )
+const IncidentsPage = lazy(() =>
+  import('./pages/IncidentsPage').then((m) => ({ default: m.IncidentsPage })),
+)
 const BlogPage = lazy(() =>
   import('./pages/BlogPage').then((m) => ({ default: m.BlogPage })),
 )
@@ -187,6 +190,7 @@ export function AppRoutes() {
         <Route path="/pricing" element={<PricingPage />} />
         <Route path="/for-agents" element={<ForAgentsPage />} />
         <Route path="/status" element={<StatusPage />} />
+        <Route path="/incidents" element={<IncidentsPage />} />
         <Route path="/blog" element={<BlogPage />} />
         <Route path="/blog/:slug" element={<BlogPostPage />} />
         <Route path="/docs" element={<DocsPage />} />

src/entry-server.tsx

@@ -37,6 +37,7 @@ import { MarketingPage } from './pages/MarketingPage'
 import { PricingPage } from './pages/PricingPage'
 import { ForAgentsPage } from './pages/ForAgentsPage'
 import { StatusPage } from './pages/StatusPage'
+import { IncidentsPage } from './pages/IncidentsPage'
 import { BlogPage } from './pages/BlogPage'
 import { BlogPostPage } from './pages/BlogPostPage'
 import { DocsPage } from './pages/DocsPage'
@@ -54,6 +55,7 @@ function SSRRoutes() {
       <Route path="/pricing" element={<PricingPage />} />
       <Route path="/for-agents" element={<ForAgentsPage />} />
       <Route path="/status" element={<StatusPage />} />
+      <Route path="/incidents" element={<IncidentsPage />} />
       <Route path="/blog" element={<BlogPage />} />
       <Route path="/blog/:slug" element={<BlogPostPage />} />
       <Route path="/docs" element={<DocsPage />} />