feat(prepare): WS4 Prepare integration

[jdpigeon]

Implements docs/superpowers/plans/2026-09-25-ws4-prepare-integration.md. The approved Prepare screens (#276) are now the real Design screen for Faces/Houses, Stroop, Visual Search and Multitasking. Custom and Imported keep their own authoring flows.

What changed

• Per-experiment data (experiments/<name>/prepare.ts): keys, stimuli and the trial timeline. flowFromStructure builds the timeline from the real loops, never params.nbTrials. The timelines read Faces/Houses 6/120, Stroop 8/96, Visual Search 8/80. Multitasking reads 3 practice blocks, then 3 recorded blocks, with no study-wide total. PrepareSteps/fixtures.ts re-exports these modules, so Storybook shows what runs.
• experiments/__tests__/prepareContent.test.ts compares each diagram with its real study. It checks every key the study accepts, and runs each loop's before:prepare hook to count trials. For Multitasking it also checks that each rule's key is the one initTasks scores as correct.
• DesignComponent renders PrepareSteps whenever the experiment has prepare data. The EEG switch and Customize are now in the step's action row (Ruling 2). The unused Protocol condition cards and their data were removed: the condition_* fields and multiConditionShape/Dots.png. The Shape image showed diamond → n, but the task scores diamond → b.
• One preview label. PreviewButtonComponent now uses PreviewLabel, so Custom, Imported and Collect all show the same "PREVIEW · not recording" status.
• Preview box. The running preview fills the free height (at least 420px) and draws the participant screen at zoom: 0.55. The whole first screen, keys and Space line included, shows without scrolling at both sizes. See "Deviations" below.
• Workspaces already on disk need no migration: Prepare data comes from type at render time.

Verification

• npm run typecheck: 0 errors.
• npm run lint: 0 errors. 121 warnings, all already on main; the two in touched files are old lines.
• npm test: 60 files, 319 passed, 1 skipped.
• node tests/electron-smoke.mjs: PASS.

Rule A: Electron app, both sizes

For every step at both 1366×768 and 1280×720:

• the primary action is on screen (bottom edge at y=759 and y=711);
• the app shell never scrolls;
• the document never scrolls.

Step	Content scroll inside the step, 1366×768 / 1280×720
Overview (all 4)	0 / 0
Background: Faces/Houses (Sacks stand-in)	632 / 680 px (internal; action row sticky)
Background: Stroop	31 / 79 px (internal)
Background: Multitasking	114 / 162 px (internal)
Background: Visual Search	0 / 0
Protocol (all 4)	0 / 0
Preview stopped / finished	0 / 0
Preview running (all 4)	0 / 0; the participant screen's main scrolls 0 px

Storybook (PreviewRunningFull, PreviewRunningFull720) gives the same numbers. Their play functions assert that neither the participant screen nor the page scrolls.

Electron playtest (Fixture headset)

Screenshots are in /tmp/ws4-integration/. The full checklist is in the agent report.

Checklist (✓ = exercised in the Electron window):

1. ✓ Faces/Houses: gold step pill; Overview → Background → Protocol; face → 1, house → 9; timeline reads 6 practice / 120 recorded.
2. ✓ Stroop: keys r/g/b/y with ink-colored words; timeline reads 8 / 96.
3. ✓ Visual Search: b/n with the orange-T examples; timeline reads 8 / 80.
4. ✓ Multitasking: Top: diamond/rectangle and Bottom: 2/3 dots on b/n; the block timeline has no study-wide total.
5. ✓ Preview: PreviewLabel sits beside Stop preview, the participant screen shows whole, and one practice trial was stepped into. Run & record → appears after a preview and goes to /collect. The Collect preview shows the same label (Fixture headset connected).
6. ✓ Custom (Experiment Builder) and Imported (a hand-written jsPsych workspace) still open their own tab flows. Imported's preview shows the shared label.
7. ✓ Keyboard: Tab reaches the step pills, then the action row, then the EEG switch (visible focus ring), then Customize.

Deviations from the plan

• Preview box (Ruling 4). min-h-[420px] growing with content made the page scroll for all four experiments. Measured page overflow was 70–385 px, because at the 800px column width a participant screen is 550–750 px tall. The box now fills the free height (at least 420px), and the participant screen is drawn at zoom: 0.55 in an absolute inset-0 stage.
• Tests adjusted to the real UI, none weakened:
  • The PreviewButton label renders "Preview" uppercased by CSS, so the test matches 'Preview'.
  • The Run & record test has to preview (isPreviewing true, then false) before Run & record can appear.
  • The Design test's first case opens Protocol before looking for Face/House and the 6/120 counts, since Overview has no diagram.
  • The walk test clicks "Try the experiment" twice (Protocol → Preview, then start), stops the preview, and asserts that Run & record goes to /collect.
  • Added an EEG-toggle test.
• The Task 1 test also compares each diagram with its real study, not only the literal values.
• SACKS_STAND_IN moved into Faces/Houses' prepare.ts as mediaFallback, so Design no longer checks type === N170. P02 Background now uses Stroop, to keep the video-link variant in Storybook.
• SecondaryNavComponent lost its now-unused onCustomize. Its docstring says it serves Custom, Imported and Analyze.
• Response rows are keyed by label, because Multitasking uses each key twice.