test(frontend): stand up Vitest baseline + wire into CI (TEST-1)

The Next.js app shipped with zero automated tests; CI ran lint + build only, so every piece of client logic (the API error humanizer, auth-session helpers, the quota meter, the tier-gate UI PR #6 changed) was unverified, and the four recent launch commits had no regression net.

Stood up Vitest + React Testing Library + jsdom (the one justified new dependency group for this PR) with a jsdom config (esbuild JSX, @/ alias) and a jest-dom setup whose type augmentation keeps the existing next-build type pass green over .test files. Added a 'npm test' script and a CI Test step between Lint and Build (reusing the same npm ci install). The FE-SEC-1 security headers were extracted to src/lib/securityHeaders.ts (byte-identical) so they can be asserted without loading the Sentry-wrapped next.config.

24 tests across 7 files cover the baseline plus the deferred component tests from earlier commits: humanizeApiError status/leak mapping; api request() 429 -> TierLimitExceededError + POST/credentials wiring (the CRITICAL-2 upgrade-CTA contract); auth-session redirect/cleanup helpers; the security-header set (FE-SEC-1/F4); the useAccessibleDialog Escape + focus-trap behaviour (A11Y-1/A11Y-2); TokenUsageMeter math + over-tone; and the AnalysisRunner premium tier gate (PR #6: a Free tap fires the upgrade CTA, a Pro tap flips the run mode).

Fixes: TEST-1

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: LEANDERANTONY

.github/workflows/ci.yml

@@ -71,6 +71,10 @@ jobs:
         working-directory: frontend
         run: npm run lint
 
+      - name: Test
+        working-directory: frontend
+        run: npm test
+
       - name: Build
         working-directory: frontend
         run: npm run build

frontend/next.config.ts

@@ -1,55 +1,14 @@
 import type { NextConfig } from "next";
 import { withSentryConfig } from "@sentry/nextjs";
 
+// Security response headers (review FE-SEC-1). Defined in src/lib/securityHeaders
+// so a unit test can import and assert them without loading this Sentry-wrapped
+// config. X-Frame-Options is enforcing; the CSP ships Report-Only (see that file).
+import { securityHeaders } from "./src/lib/securityHeaders";
+
 const apiRewriteTarget =
   process.env.API_REWRITE_TARGET ?? "http://127.0.0.1:8000";
 
-// Security response headers (review FE-SEC-1). The app shipped with NO
-// CSP / framing / HSTS / nosniff / referrer headers, leaving clickjacking
-// and zero XSS defense-in-depth on a surface that injects server-built
-// HTML into srcDoc iframes.
-//
-// X-Frame-Options is ENFORCING immediately (the app is never legitimately
-// framed). The CSP ships as Content-Security-Policy-Report-Only so a day
-// of real traffic reveals any origin this allowlist misses BEFORE it is
-// switched to enforcing — do NOT flip it to enforce in this change.
-const contentSecurityPolicyReportOnly = [
-  "default-src 'self'",
-  "base-uri 'self'",
-  "object-src 'none'",
-  "frame-ancestors 'none'",
-  // Next.js injects inline bootstrap scripts; 'unsafe-inline' is the
-  // pragmatic interim (a nonce-based policy is the tightening follow-up).
-  "script-src 'self' 'unsafe-inline' https://va.vercel-scripts.com",
-  "style-src 'self' 'unsafe-inline'",
-  "img-src 'self' data: blob: https:",
-  "font-src 'self' data:",
-  // PostHog (analytics + replay), Sentry (errors), Supabase (auth),
-  // Lemon Squeezy (checkout — "Coming soon"), Vercel (analytics). The
-  // backend API is same-origin via the /api rewrite, so 'self' covers it.
-  "connect-src 'self' https://eu.i.posthog.com https://eu-assets.i.posthog.com https://*.sentry.io https://*.supabase.co https://*.lemonsqueezy.com https://va.vercel-scripts.com https://vitals.vercel-insights.com",
-  "frame-src 'self' https://*.lemonsqueezy.com",
-  "worker-src 'self' blob:",
-  "form-action 'self'",
-].join("; ");
-
-const securityHeaders = [
-  // Enforcing immediately — defends against clickjacking now.
-  { key: "X-Frame-Options", value: "DENY" },
-  // Report-Only for now (see note above). Tighten + switch to enforcing
-  // in a follow-up once 48h of reports confirm the allowlist.
-  {
-    key: "Content-Security-Policy-Report-Only",
-    value: contentSecurityPolicyReportOnly,
-  },
-  {
-    key: "Strict-Transport-Security",
-    value: "max-age=63072000; includeSubDomains; preload",
-  },
-  { key: "X-Content-Type-Options", value: "nosniff" },
-  { key: "Referrer-Policy", value: "strict-origin-when-cross-origin" },
-];
-
 const nextConfig: NextConfig = {
   allowedDevOrigins: ["localhost", "127.0.0.1"],
   async headers() {