feat(M13 chunk 13): reduced-motion + WebGL gate tri-state

Closes chunk 13. Replaces the chunk-1 placeholder gate copy
("once Chunk 13 lands…") with the spec's tri-state behaviour:
full / 2D-svg / debug-text.

Reduced-motion (PowerPoint mode):
- Autoplay disabled (useSceneRunner gets autoplay: false).
- Each scene renders at t = 1 (completion frame).
- 4-second setTimeout auto-advances to the next scene; Step in
  PlaybackControls cancels the pending advance and arms a new one
  for the next scene.
- No auto-advance past the last scene (guarded).
- All logic in CinematicViz; useSceneRunner stays untouched.
- canvas root gets data-reduced-motion="true|false" for tests.

WebGL 2 unavailable:
- Informational notice only — every M13 primitive is already SVG
  (chunk-1 locked "no Three.js" decision), so there's no actual
  3D rendering to fall back from.
- Copy matches the spec literal: "3D camera moves are unavailable;
  the visualization is rendering in 2D mode."
- The viz continues rendering normally (no blocking like the M12
  chunk-8 binary disable).

Tri-state precedence:
- WebGL gate notice wins when both apply (more critical info).
- The reduced-motion BEHAVIOR (t=1 pin + auto-advance) still runs
  underneath, even when the WebGL notice covers the message.
- data-gate-mode attribute ("webgl" | "reduced-motion") on the
  notice for test assertions.

9 new Vitest tests in CinematicViz-gates.test.tsx:
- No notice when both gates pass.
- Reduced-motion: notice copy + t=1 pin + canvas data attribute.
- WebGL-missing: notice copy + viz still renders + data-reduced-
  motion=false (WebGL alone doesn't freeze t).
- Both active: WebGL precedence + reduced-motion behavior still
  applies.

Uses vi.resetModules() + vi.doMock + dynamic import to override
the global useWebGL2Support / useReducedMotion mocks per-suite.

The chunk-1 a11y test (webgl-fallback.test.tsx) was updated to
match the new spec copy — its comment block explicitly anticipated
this change.

Full suite: 93 files / 933 tests pass; tsc --noEmit clean.

phase1.md: chunk-13 checkbox [x], status row "chunks 1-13 done",
decisions block (10 bullets) landed.

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

Author: CyberSecDef

docs/phase1.md

@@ -27,7 +27,7 @@ This document breaks Phase 1 into 15 milestones (M1–M15). Each milestone lists
 | M10 | GIF Export | M8 | 6 days | ✅ Complete | |
 | M11 | Thread Sharing | M9 | 3 days | ✅ Done | |
 | M12 | Accessibility + Polish | M11 | 5 days | ✅ Done | |
-| M13 | Cinematic Inference Visualization | M12 | 12 days | 🟡 In progress (chunks 1–12 done) | Replaces the M8 live viz with a 20-scene narrative |
+| M13 | Cinematic Inference Visualization | M12 | 12 days | 🟡 In progress (chunks 1–13 done) | Replaces the M8 live viz with a 20-scene narrative |
 | M14 | Deployment | M13 | 5 days | ⚪ Not started | |
 | M15 | Launch Prep | M14 | 5 days | ⚪ Not started | |
 | | **Total** | | **~80 engineer-days** | | |
@@ -1042,7 +1042,7 @@ Bonus M12 work beyond the SPEC's two exit criteria:
   - VectorStrip cell count clamped to 64 (down from 128) on the degraded path
   Document the degrade triggers + restoration condition (`< 18 FPS for 2s → degrade; > 24 FPS for 5s → restore`) inline + in the M13 retrospective.
 
-- [ ] **Chunk 13 — Reduced-motion + WebGL gate adaptation.** The M12 chunk-8 gate disabled the M8 Viz + Embeddings tabs entirely when WebGL 2 is missing or reduced-motion is set. The new cinematic viz can degrade more gracefully:
+- [x] **Chunk 13 — Reduced-motion + WebGL gate adaptation.** The M12 chunk-8 gate disabled the M8 Viz + Embeddings tabs entirely when WebGL 2 is missing or reduced-motion is set. The new cinematic viz can degrade more gracefully:
   - **Reduced-motion**: scenes still display, but as static frames. The user advances scene-by-scene via the chunk-11 Step button (or auto-advances on a slow 4-second-per-scene timer). No camera moves, no particle trails, no continuous animations. Equivalent of "PowerPoint mode."
   - **WebGL 2 unavailable**: fall back to the SVG variants of every primitive. The 2D Debug-tab fallback from M12 chunk 8 remains as the absolute-last-resort path. New `webgl-unsupported-notice` copy explains: "3D camera moves are unavailable; the visualization is rendering in 2D mode."
   Replaces the M12 chunk-8 binary disable/fallback with a tri-state (full / 2D-svg / debug-text).
@@ -1066,6 +1066,19 @@ Bonus M12 work beyond the SPEC's two exit criteria:
 - **Real run continues independently.** The M6 streaming pipeline + the M8 `useRunStream` hook keep doing exactly what they do. The chat bubble subscribes to the same WebSocket events and displays tokens as they arrive. Scenes 18-20 use the same event timeline to drive the autoregressive-loop pacing, but the viz lagging behind is expected + acceptable.
 - **WebSocket → Scene coupling.** Scenes 5-17 fire once per *generated* token. The current `RunEvent` schema (M6) emits one `token.received` per token; the SceneRunner subscribes + advances. For the input tokens (the prompt), the runner enters Scenes 0-4 at submit time without waiting for the WebSocket.
 
+**Decisions (chunk 13):** (Reduced-motion + WebGL gate tri-state.)
+- **Reduced-motion = PowerPoint mode.** Each scene renders at `t = 1` (completion frame). Autoplay disabled, scene runner doesn't tick through t. 4-second `setTimeout` auto-advances to the next scene; Step button in PlaybackControls always works as a manual override. Once the runner reaches the last scene, no auto-advance (the timer guards `sceneIndex >= totalScenes - 1`).
+- **`t = 1` is the chosen pin.** Each scene's last frame is its most informative static view — Scene 5 shows the embedding strips (post-detach), Scene 16 shows the chosen bar pulse, Scene 20 shows the EOS flourish. `t = 0.5` was considered but most scenes have peak content mid-window only briefly; the completion frame stays maximally informative.
+- **All reduced-motion logic lives in `CinematicViz`, not in `useSceneRunner`.** The hook is untouched: we pass `autoplay: false`, override the rendered `t`, and run a sibling `setTimeout` for the 4s advance. Keeps the runner pure (it still drives t for non-reduced-motion paths), and the reduced-motion behaviour is one cohesive 15-line block in CinematicViz with clear comments.
+- **WebGL 2 gate = informational only.** The chunk-1 decisions block locked "All 5 primitives are SVG/HTML/CSS — no Three.js" — every M13 scene already renders via SVG. There's no 3D scene to fall back from. The notice exists because the spec calls for it, but functionally the viz behaves identically with WebGL2 missing. The copy explains this honestly: "3D camera moves are unavailable; the visualization is rendering in 2D mode."
+- **Tri-state precedence: WebGL gate wins over reduced-motion when both apply.** The WebGL notice is the more critical info (different rendering pipeline), reduced-motion is a comfort/accessibility mode. Only one notice surface; the more informative one shows. The reduced-motion *behaviour* (t = 1 pin + auto-advance) still applies underneath even when the WebGL notice covers the visible message.
+- **`data-gate-mode` attribute on the notice (`webgl` / `reduced-motion`).** Lets tests assert which gate fired without parsing the human-readable copy. Pattern matches the chunk-12 FpsCounter's `data-degraded`.
+- **`data-reduced-motion="true|false"` on the canvas root.** Sister assertion to the gate notice — confirms the t-pin behaviour is active regardless of which notice (if any) is visible. Used by the chunk-13 tests to verify the "both gates" case.
+- **Gate-notice tests use dynamic import + `vi.doMock`.** The global setup defaults `useWebGL2Support` to true and `useReducedMotion` to false (via the matchMedia stub). Chunk-13 suites override per-suite via `vi.doMock + vi.resetModules() + dynamic await import('@/Components/Viz/CinematicViz')`. The `vi.resetModules()` call in beforeEach is required — without it the first test in each suite inherits the already-loaded module from before the mock applied. Documented inline.
+- **The chunk-1 a11y test (`webgl-fallback.test.tsx`) was updated to match the chunk-13 copy.** Its comment block explicitly anticipated this change ("Chunk 13 evolves the gate into the tri-state… for now we just assert that the notice renders"). Updated to assert the new spec literals + `data-gate-mode="webgl"` rather than the chunk-1 "WebGL 2.0" placeholder copy.
+- **No behavioural change for ParticleTrail/etc.** ParticleTrail already gates its animation via `motion-safe:` (chunk 2) which respects `prefers-reduced-motion` natively. The chunk-12 degraded-mode hook handles FPS-driven trims. Chunk 13's contribution is the scene-runner-level t-pin + auto-advance, not per-component animation overrides — those existed already and continue to fire.
+- **Auto-advance is per scene, not per token.** Spec says "auto-advances on a slow 4-second-per-scene timer" — chunk 13 uses a fresh `setTimeout(controls.nextScene, 4000)` per scene-change, cleared on unmount or sceneIndex change. Any manual `setScene()` call (PipelineProgressBar click, PlaybackControls Step) cancels the pending advance and arms a new one for the new scene.
+
 **Decisions (chunk 12):** (Performance hardening + degraded-mode state machine.)
 - **State machine in `useFpsTracker`, transport via `PerformanceModeContext`.** Hook drives the RAF loop + hysteresis; context flows `{ fps, degraded }` to ~13 scene/component callsites. Same pattern as chunk 11b's `VectorInspection`. Mounting the hook in `CinematicViz` keeps a single global tracker; per-component subscribers stay declarative.
 - **Hysteresis thresholds match the spec literal:** `< 18 FPS for 2s → degrade; > 24 FPS for 5s → restore`. Asymmetric on purpose — degrade fast, restore slow. The 6-point gap between thresholds (18 vs 24) prevents oscillation when the actual FPS sits around the boundary. Exported as `FPS_TRACKER_CONFIG` for tests + decision-block citation.

resources/js/Components/Viz/CinematicViz.tsx

@@ -116,16 +116,48 @@ export default function CinematicViz({
         [prompt, model?.architecture_type, model?.layers, model?.vocab_size],
     );
 
+    // M13 chunk 13: in reduced-motion mode the scene runner does NOT
+    // autoplay through the t-axis. Scenes render at t=1 (completion
+    // frame) and a slow 4-second timer auto-advances to the next
+    // scene. PlaybackControls' Step button still works on top of
+    // this — manual advance is always available.
     const { state, controls } = useSceneRunner({
         scenes,
         initialState,
-        autoplay: prompt !== null && prompt !== undefined,
+        autoplay: !reducedMotion && prompt !== null && prompt !== undefined,
     });
 
+    // 4-second auto-advance for reduced-motion. Step in the chunk-11
+    // PlaybackControls (or any other setScene call) resets the timer.
+    useEffect(() => {
+        if (!reducedMotion || !prompt) return;
+        if (state.sceneIndex >= state.totalScenes - 1) return; // pinned at last scene
+        const timer = setTimeout(() => controls.nextScene(), 4000);
+        return () => clearTimeout(timer);
+    }, [reducedMotion, prompt, state.sceneIndex, state.totalScenes, controls]);
+
+    // Effective t for scene render: reduced-motion freezes at 1
+    // (the completion frame); the runner's actual t still ticks
+    // (used for the auto-advance scheduling) but the scene's
+    // render function never sees it.
+    const renderT = reducedMotion ? 1 : state.t;
+
+    // M13 chunk 13: tri-state gate notice.
+    //   webgl2Supported=false → SVG fallback notice (the M13 viz is
+    //                            already all-SVG, so this is purely
+    //                            informational: 3D camera moves
+    //                            wouldn't have been visible anyway).
+    //   reducedMotion=true    → PowerPoint mode notice.
+    //   Both true             → WebGL notice wins (more critical).
     const gateMessage = !webgl2Supported
-        ? 'WebGL 2.0 is unavailable in this browser. The visualization will render in 2D-only mode once Chunk 13 lands.'
+        ? '3D camera moves are unavailable; the visualization is rendering in 2D mode.'
+        : reducedMotion
+          ? 'Reduced-motion is set. Scenes display as static completion frames; advance via Step or wait 4 seconds.'
+          : null;
+    const gateTestId = !webgl2Supported
+        ? 'cinematic-viz-gate-webgl'
         : reducedMotion
-          ? 'Reduced-motion is set. The visualization will play scene-by-scene without continuous animation once Chunk 13 lands.'
+          ? 'cinematic-viz-gate-reduced-motion'
           : null;
 
     const idle = !prompt;
@@ -279,11 +311,15 @@ export default function CinematicViz({
 
                                 <NumericalValuesPanel />
 
-                                {gateMessage && (
+                                {gateMessage && gateTestId && (
                                     <div
                                         className="absolute top-2 left-2 z-10 max-w-md rounded-md border border-amber-900/50 bg-amber-950/40 px-3 py-2 text-[11px] text-amber-200"
                                         role="note"
                                         data-testid="cinematic-viz-gate-notice"
+                                        data-gate-mode={gateTestId.replace(
+                                            'cinematic-viz-gate-',
+                                            '',
+                                        )}
                                     >
                                         {gateMessage}
                                     </div>
@@ -310,9 +346,10 @@ export default function CinematicViz({
                                         className="flex h-full min-h-[400px] flex-col"
                                         data-testid="cinematic-viz-canvas"
                                         data-scene-id={state.sceneId}
-                                        data-scene-t={state.t.toFixed(3)}
+                                        data-scene-t={renderT.toFixed(3)}
+                                        data-reduced-motion={reducedMotion ? 'true' : 'false'}
                                     >
-                                        {activeScene.render(state.t, state.pipelineState)}
+                                        {activeScene.render(renderT, state.pipelineState)}
                                     </div>
                                 ) : (
                                     // Prompt present but the scene at this index isn't

resources/js/__tests__/Components/Viz/CinematicViz-gates.test.tsx

@@ -0,0 +1,138 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import CinematicViz from '@/Components/Viz/CinematicViz';
+import type { PipelineState, Scene } from '@/Components/Viz/Scene';
+
+/*
+ * Tests for the M13 chunk-13 tri-state gate notices:
+ *   - full mode (no gate notice)
+ *   - reduced-motion (PowerPoint mode + 4s auto-advance)
+ *   - WebGL 2 unavailable (informational notice; viz still renders)
+ *
+ * Hook mocks are scoped per-suite via vi.mock so other CinematicViz
+ * tests (which default to webgl=true / reduced=false) stay unaffected.
+ */
+
+const tCaptureScene: Scene<PipelineState, PipelineState> = {
+    id: 'prompt-entry',
+    durationMs: 500,
+    render: (t, input) => (
+        <div data-testid="captured-render" data-t={t.toFixed(3)}>
+            Got prompt: {input.promptText ?? '(none)'}
+        </div>
+    ),
+    transform: (input) => input,
+};
+
+describe('<CinematicViz /> chunk-13 gates — defaults', () => {
+    it('renders no gate notice when both gates pass', () => {
+        render(<CinematicViz events={[]} prompt="hello" />);
+        expect(screen.queryByTestId('cinematic-viz-gate-notice')).not.toBeInTheDocument();
+    });
+});
+
+describe('<CinematicViz /> chunk-13 gates — reduced-motion', () => {
+    beforeEach(() => {
+        vi.resetModules();
+        vi.doMock('@/hooks/useReducedMotion', () => ({
+            useReducedMotion: () => true,
+        }));
+    });
+
+    afterEach(() => {
+        vi.doUnmock('@/hooks/useReducedMotion');
+        vi.resetModules();
+    });
+
+    it('shows the reduced-motion notice with the chunk-13 copy', async () => {
+        const { default: CinematicVizReloaded } = await import('@/Components/Viz/CinematicViz');
+        render(<CinematicVizReloaded events={[]} prompt="hello" />);
+        const notice = screen.getByTestId('cinematic-viz-gate-notice');
+        expect(notice.getAttribute('data-gate-mode')).toBe('reduced-motion');
+        expect(notice.textContent).toMatch(/Reduced-motion is set/i);
+        expect(notice.textContent).toMatch(/static completion frames/i);
+        expect(notice.textContent).toMatch(/advance via Step or wait 4 seconds/i);
+    });
+
+    it('renders the scene at t=1 (completion frame)', async () => {
+        const { default: CinematicVizReloaded } = await import('@/Components/Viz/CinematicViz');
+        render(<CinematicVizReloaded events={[]} prompt="hello" scenes={[tCaptureScene]} />);
+        const rendered = screen.getByTestId('captured-render');
+        expect(rendered.getAttribute('data-t')).toBe('1.000');
+    });
+
+    it('canvas carries data-reduced-motion="true"', async () => {
+        const { default: CinematicVizReloaded } = await import('@/Components/Viz/CinematicViz');
+        render(<CinematicVizReloaded events={[]} prompt="hello" scenes={[tCaptureScene]} />);
+        const canvas = screen.getByTestId('cinematic-viz-canvas');
+        expect(canvas.getAttribute('data-reduced-motion')).toBe('true');
+    });
+});
+
+describe('<CinematicViz /> chunk-13 gates — WebGL 2 unavailable', () => {
+    beforeEach(() => {
+        vi.resetModules();
+        vi.doMock('@/hooks/useWebGL2Support', () => ({
+            useWebGL2Support: () => false,
+        }));
+    });
+
+    afterEach(() => {
+        vi.doUnmock('@/hooks/useWebGL2Support');
+        vi.resetModules();
+    });
+
+    it('shows the WebGL-unsupported notice with the chunk-13 spec copy', async () => {
+        const { default: CinematicVizReloaded } = await import('@/Components/Viz/CinematicViz');
+        render(<CinematicVizReloaded events={[]} prompt="hello" />);
+        const notice = screen.getByTestId('cinematic-viz-gate-notice');
+        expect(notice.getAttribute('data-gate-mode')).toBe('webgl');
+        expect(notice.textContent).toMatch(/3D camera moves are unavailable/i);
+        expect(notice.textContent).toMatch(/rendering in 2D mode/i);
+    });
+
+    it('viz still renders (does NOT block like the M12 binary disable)', async () => {
+        const { default: CinematicVizReloaded } = await import('@/Components/Viz/CinematicViz');
+        render(<CinematicVizReloaded events={[]} prompt="hello" scenes={[tCaptureScene]} />);
+        expect(screen.getByTestId('captured-render')).toBeInTheDocument();
+    });
+
+    it('canvas carries data-reduced-motion="false" (WebGL gate alone does not freeze t)', async () => {
+        const { default: CinematicVizReloaded } = await import('@/Components/Viz/CinematicViz');
+        render(<CinematicVizReloaded events={[]} prompt="hello" scenes={[tCaptureScene]} />);
+        const canvas = screen.getByTestId('cinematic-viz-canvas');
+        expect(canvas.getAttribute('data-reduced-motion')).toBe('false');
+    });
+});
+
+describe('<CinematicViz /> chunk-13 gates — both gates active', () => {
+    beforeEach(() => {
+        vi.resetModules();
+        vi.doMock('@/hooks/useReducedMotion', () => ({
+            useReducedMotion: () => true,
+        }));
+        vi.doMock('@/hooks/useWebGL2Support', () => ({
+            useWebGL2Support: () => false,
+        }));
+    });
+
+    afterEach(() => {
+        vi.doUnmock('@/hooks/useReducedMotion');
+        vi.doUnmock('@/hooks/useWebGL2Support');
+        vi.resetModules();
+    });
+
+    it('WebGL notice takes precedence over the reduced-motion notice', async () => {
+        const { default: CinematicVizReloaded } = await import('@/Components/Viz/CinematicViz');
+        render(<CinematicVizReloaded events={[]} prompt="hello" />);
+        const notice = screen.getByTestId('cinematic-viz-gate-notice');
+        expect(notice.getAttribute('data-gate-mode')).toBe('webgl');
+    });
+
+    it('reduced-motion behavior (t=1 pin) still applies regardless of which notice shows', async () => {
+        const { default: CinematicVizReloaded } = await import('@/Components/Viz/CinematicViz');
+        render(<CinematicVizReloaded events={[]} prompt="hello" scenes={[tCaptureScene]} />);
+        const rendered = screen.getByTestId('captured-render');
+        expect(rendered.getAttribute('data-t')).toBe('1.000');
+    });
+});