phase-7: motion, an installable app, and a capture that survives no signal

GSAP carries the counter roll-ups, the bandeja card physics, the dialog
transitions and the three success moments FLOWS.md allows. Every one of
them checks prefers-reduced-motion first and does nothing when it is set.

boneyard and canvas-ui are not what SPEC.md's stack table says they are:
on npm the names belong to two abandoned projects that do neither job.
The skeletons were already ours; the two canvas spots are now sixty lines
each with no dependency. DECISIONS.md records the substitution.

The app installs, keeps a scan taken with no network in IndexedDB and
sends it when there is one, falls back to a page that explains itself,
and can push a deadline notice. Reading the log of what is queued is the
source of truth, so the notice clears when the capture actually lands.

The CSP now allows scripts by per-request nonce rather than by
'unsafe-inline'. That forced /offline to render per request: a
prerendered page carries a build-time nonce no live policy matches, so
its scripts were blocked and it never hydrated.

Two crashes fixed on the way. web-push throws on a VAPID subject that is
not https: or mailto:, and the code handed it APP_PUBLIC_URL, so any
machine with push keys died at boot; a misconfigured optional channel now
switches itself off and says why. And a subscription the push service
answers 410 for is deleted rather than retried forever.

Lighthouse on the production build: accessibility 100, best practices 96,
SEO 100, performance 73. The performance number is not trustworthy on
this machine and DECISIONS.md says why; total blocking time did fall from
17.6s to 1.7s once the hero canvas stopped drawing at full resolution
every frame and the landing page stopped importing GSAP.

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

apps/web/proxy.ts

@@ -1,10 +1,74 @@
 import createMiddleware from 'next-intl/middleware';
+import { type NextRequest, NextResponse } from 'next/server';
 import { routing } from './src/i18n/routing';
 
-export default createMiddleware(routing);
+const intl = createMiddleware(routing);
+
+// React reconstructs server stacks with eval in development and never in production.
+const DEV = process.env.NODE_ENV === 'development';
+
+/**
+ * Security headers (SPEC.md section 14). Everything is served from one origin: the app
+ * proxies `/api`, next/font self hosts the typeface and there is no third party script
+ * anywhere, so the policy names `'self'` and stops.
+ *
+ * Scripts are allowed by nonce rather than by `'unsafe-inline'`. A fresh nonce per request
+ * means an injected `<script>` cannot guess its way in, and `'strict-dynamic'` lets the one
+ * nonced bootstrap load the chunks it needs without listing them.
+ */
+function policy(nonce: string): string {
+  return [
+    "default-src 'self'",
+    // 'wasm-unsafe-eval' is the QR decoder: zxing runs as WebAssembly, self hosted.
+    `script-src 'self' 'nonce-${nonce}' 'strict-dynamic' 'wasm-unsafe-eval'${DEV ? " 'unsafe-eval'" : ''}`,
+    // Styles stay inline-allowed: Tailwind ships a stylesheet, but React writes inline
+    // style attributes for things like a dragged card, and those are not noncable.
+    "style-src 'self' 'unsafe-inline'",
+    "img-src 'self' data: blob:",
+    "font-src 'self'",
+    // The dev server pushes updates over a websocket to the same origin.
+    `connect-src 'self'${DEV ? ' ws:' : ''}`,
+    "worker-src 'self' blob:",
+    "object-src 'none'",
+    "base-uri 'self'",
+    "form-action 'self'",
+    "frame-ancestors 'none'",
+    'upgrade-insecure-requests',
+  ].join('; ');
+}
+
+const STATIC_HEADERS: Record<string, string> = {
+  'x-content-type-options': 'nosniff',
+  'referrer-policy': 'strict-origin-when-cross-origin',
+  // The scanner needs the camera; nothing else needs anything.
+  'permissions-policy': 'camera=(self), microphone=(), geolocation=(), payment=()',
+};
+
+export default function proxy(request: NextRequest) {
+  const nonce = crypto.randomUUID();
+  const csp = policy(nonce);
+
+  // Next reads the nonce off the request headers and stamps it on the scripts it renders.
+  // Setting them on the incoming request is what carries them through next-intl's rewrite.
+  request.headers.set('x-nonce', nonce);
+  request.headers.set('content-security-policy', csp);
+
+  /**
+   * `/offline` is one page for every language: the service worker caches exactly one URL,
+   * so locale routing must leave it alone. It still gets the headers.
+   */
+  const response =
+    request.nextUrl.pathname === '/offline'
+      ? NextResponse.next({ request: { headers: request.headers } })
+      : intl(request);
+
+  response.headers.set('content-security-policy', csp);
+  for (const [key, value] of Object.entries(STATIC_HEADERS)) response.headers.set(key, value);
+  return response;
+}
 
 export const config = {
-  // Everything except /api (forwarded to the API by the rewrite), Next internals and
-  // static files. Locale routing must not touch API requests.
+  // Everything except /api (forwarded to the API by the route handler), Next internals and
+  // static files.
   matcher: ['/((?!api|healthz|_next|_vercel|.*\\..*).*)'],
 };