fix(website): verify stage against matching production replay

Author: blove

.github/workflows/ci.yml

@@ -679,23 +679,29 @@ jobs:
       # Spec §8: scroll-craft's own harness walks the homepage's pinned stage
       # act and fails on dead scroll outside the declared hold and on cues that
       # never peak. The Nx build lands in dist/apps/website with a rewritten
-      # next.config, which only `nx serve --configuration=production` can
-      # start, and the serve's own build dependency is the one build here:
-      # it runs with --skip-nx-cache (the earlier e2e builds wrote no cache
-      # entry either) so it emits dist rather than restoring it. The content
+      # next.config, which `nx serve --configuration=production` starts.
+      # Rebuild explicitly with the paired stage origin: serve reuses the
+      # prior output, whose public-copy build points at production. The content
       # symlink, which mirrors playwright.config.ts's production mode, is
       # added only after the server answers, so it lands on the dist the
       # build has finished writing rather than on one it is about to replace.
       - name: Stage scroll verification (scroll-craft harness)
         env:
           GROWTH_FORM_POLICY: growth_v1
           SCROLLCRAFT_CHROME: /usr/bin/google-chrome
+          NEXT_PUBLIC_STAGE_DEMO_ORIGIN: http://localhost:4200
         run: |
           command -v ffmpeg > /dev/null || (sudo apt-get update && sudo apt-get install -y ffmpeg)
+          # Verify this commit's recording, not the older production demo.
+          (npx nx serve examples-chat-angular --configuration=production --port=4200 > /tmp/stage-demo.log 2>&1 &)
+          for i in $(seq 1 60); do curl -sf http://localhost:4200/stage > /dev/null && break; sleep 2; done
+          curl -sf http://localhost:4200/stage > /dev/null || { cat /tmp/stage-demo.log; exit 1; }
+          npx nx build website --configuration=production --skip-nx-cache
           (npx nx serve website --configuration=production --port=4308 --skip-nx-cache > /tmp/next-start.log 2>&1 &)
           for i in $(seq 1 60); do curl -sf http://127.0.0.1:4308/ > /dev/null && break; sleep 2; done
           curl -sf http://127.0.0.1:4308/ > /dev/null || { cat /tmp/next-start.log; exit 1; }
           ln -sfn ../../../apps/website/content dist/apps/website/content
+          STAGE_LIVE_FRAME=true BASE_URL=http://127.0.0.1:4308 npx playwright test apps/website/e2e/home-stage.spec.ts --config apps/website/playwright.config.ts
           node apps/website/e2e/scroll-craft/verify-home.mjs --url http://127.0.0.1:4308 --out dist/stage-shots
       - name: Upload stage contact sheets
         if: always()

apps/website/src/components/landing/use-stage-publisher.ts

@@ -16,7 +16,7 @@ import {
 export type { StageMilestone } from '../../lib/stage-beats';
 
 export const STAGE_DEMO_ORIGIN = new URL(
-  process.env['NEXT_PUBLIC_STAGE_DEMO_ORIGIN'] || 'https://demo.threadplane.ai'
+  process.env.NEXT_PUBLIC_STAGE_DEMO_ORIGIN || 'https://demo.threadplane.ai'
 ).origin;
 export const STAGE_DEMO_URL = `${STAGE_DEMO_ORIGIN}/stage?t=0`;
 export const STAGE_MESSAGE_TYPE = 'tplane-stage';

scripts/ci-workflow.spec.mjs

@@ -78,6 +78,15 @@ function readNamedStep(job, name) {
 }
 
 describe('CI workflow', () => {
+  it('verifies stage scrolling and interaction against the matching local replay build', async () => {
+    const workflow = await readFile('.github/workflows/ci.yml', 'utf8');
+    const step = readNamedStep(readJobBlock(workflow, 'website-e2e'), 'Stage scroll verification (scroll-craft harness)');
+    assert.match(step, /NEXT_PUBLIC_STAGE_DEMO_ORIGIN: http:\/\/localhost:4200/);
+    assert.match(step, /nx serve examples-chat-angular --configuration=production --port=4200/);
+    assert.match(step, /nx build website --configuration=production --skip-nx-cache/);
+    assert.match(step, /STAGE_LIVE_FRAME=true BASE_URL=http:\/\/127\.0\.0\.1:4308/);
+    assert.match(step, /scroll-craft\/verify-home\.mjs/);
+  });
   it('scopes every vercel promote to the team that owns the deployment', async () => {
     const workflow = await readFile('.github/workflows/ci.yml', 'utf8');
     const promotes = workflow