feat: Phase 4 — responsive analysis pages + perf harness + god-component splits

Final phase of the UX modernization. Four conflict-free lanes.

Responsive (D4 — desktop+mobile 并重):
- 7 analysis pages made usable at 375px: grid-cols-4/5 → grid-cols-2 sm:*
  responsive variants; raw tables wrapped in overflow-x-auto; page overflow guards
- new e2e/responsive.spec.ts loops all 7 analysis routes at 375px asserting no
  horizontal scroll

Perf harness:
- playwright.config.ts gains an isolated `perf` project (testMatch /perf/), default
  chromium project excludes it (testIgnore)
- new e2e/perf.spec.ts: CDP Network.emulateNetworkConditions (Fast 3G) +
  PerformanceObserver LCP on /overview kpi-row + route-transition timing; numbers
  reported as a relative regression signal (dev-server, not a prod SLA), not gated

God-component splits (pure refactors, behavior-preserving):
- MonitoringDashboard 686 → 239 lines: extracted components/monitoring/* (StatsBar,
  OverviewTab, CaseStatsTab, DistrictStatsTab) + useMonitoringData hook; URL-granularity
  source-of-truth + drilldown reconcile kept in the orchestrator (no desync regression)
- AlertsDashboard 816 → 301 lines: extracted components/alerts/* (Toolbar, List,
  RiskPanel, MapPanel, DetailModal, …); role/privacy/grid-hide logic kept in the
  orchestrator — doctor-view privacy invariant (zero patient-point) still holds

Gates: tsc 0 · vitest 75 · functional e2e 37/37 (incl doctor-view privacy +
granularity + responsive) · build ok · perf project runs + reports

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/e2e/responsive.spec.ts

@@ -0,0 +1,135 @@
+/**
+ * Phase-4 responsive acceptance: every analysis page must be usable at 375px
+ * (the narrowest mobile viewport in D4) with NO horizontal scroll.
+ *
+ * Auth + backend mocking mirror e2e/user-flows.spec.ts (seedAuthAndMockApi):
+ * seed localStorage['cbpoa_token'] so the login gate is skipped, then mock all
+ * /api/** calls so the suite runs hermetically without a live :8000 backend.
+ */
+import { test, expect, Page } from '@playwright/test';
+import { TESTIDS } from '../src/utils/testids';
+
+// Each analysis route paired with its page-* mount testid.
+const ANALYSIS_PAGES: Array<{ route: string; testid: string }> = [
+  { route: '/analysis/trend', testid: TESTIDS.pageTrend },
+  { route: '/analysis/district', testid: TESTIDS.pageDistrict },
+  { route: '/analysis/insights', testid: TESTIDS.pageInsights },
+  { route: '/analysis/reports', testid: TESTIDS.pageReports },
+  { route: '/analysis/demographics', testid: TESTIDS.pageDemographics },
+  { route: '/analysis/disease', testid: TESTIDS.pageDisease },
+  { route: '/analysis/environment', testid: TESTIDS.pageEnvironment },
+];
+
+/** Seed auth token and mock all /api/** calls before each page load. */
+async function seedAuthAndMockApi(page: Page) {
+  await page.addInitScript(() => {
+    localStorage.setItem('cbpoa_token', 'e2e-test-token');
+  });
+
+  // Mock backend responses so the suite is hermetic — no live :8000 required.
+  // Each response must match the TypeScript interface shape; returning {} causes
+  // pages to throw when accessing expected array properties.
+  await page.route('/api/**', (route) => {
+    const url = route.request().url();
+
+    if (url.includes('/alerts')) {
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ alerts: [], total: 0 }),
+      });
+      return;
+    }
+
+    if (url.includes('/history/aggregated')) {
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ aggregations: [], total_records: 0 }),
+      });
+      return;
+    }
+
+    if (url.includes('/grids')) {
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ type: 'FeatureCollection', features: [] }),
+      });
+      return;
+    }
+
+    if (url.includes('/cases/demographics')) {
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          age_distribution: [],
+          gender_split: { male: { outpatient: 0, inpatient: 0 }, female: { outpatient: 0, inpatient: 0 } },
+          age_diagnosis_matrix: [],
+        }),
+      });
+      return;
+    }
+
+    if (url.includes('/cases/diagnosis-distribution') || url.includes('/cases/disease-seasonality')) {
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify([]),
+      });
+      return;
+    }
+
+    if (url.includes('/cases/districts') || url.includes('/districts')) {
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify([]),
+      });
+      return;
+    }
+
+    if (url.includes('/cases/trend') || url.includes('/cases')) {
+      route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ data: [], total: 0 }),
+      });
+      return;
+    }
+
+    // Default fallback — return a safe empty object.
+    route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({ data: [], items: [], total: 0 }),
+    });
+  });
+}
+
+test.describe('Responsive — analysis pages @375px', () => {
+  test.use({ viewport: { width: 375, height: 812 } });
+
+  test.beforeEach(async ({ page }) => {
+    await seedAuthAndMockApi(page);
+  });
+
+  for (const { route, testid } of ANALYSIS_PAGES) {
+    test(`${route} mounts and has no horizontal scroll at 375px`, async ({ page }) => {
+      await page.goto(route);
+
+      // Page must mount.
+      await expect(page.locator(`[data-testid="${testid}"]`)).toBeVisible();
+
+      // No horizontal overflow: scrollWidth must not exceed clientWidth (+1px slack
+      // for sub-pixel rounding).
+      const noHorizontalScroll = await page.evaluate(
+        () =>
+          document.documentElement.scrollWidth <=
+          document.documentElement.clientWidth + 1
+      );
+      expect(noHorizontalScroll, `${route} overflows horizontally at 375px`).toBe(true);
+    });
+  }
+});