[Design] WS4 Prepare step stories

[jdpigeon]

Design pass for Workstream 4 per docs/uxr/2026-09-24-ws4-design-brief.md and plan §10.2 ("Experiment Prepare"), §11 WS4. Storybook fixtures only, no runtime wiring. Engineering integrates after approval.

Round 2 (product feedback)

Decisions applied

1. Local stepper, current step is gold. The current step is now a small gold-filled pill (bg-accent, ink text) with a white number bubble. It stays subordinate to the global bar: the global bar marks location with a 4px gold underline on a 64px bar with uppercase labels, while the local step is a pill at 13px in the secondary bar, aligned to the content column rather than the shell's left edge. Visited (teal check on brand-light) and upcoming (white, muted) are unchanged; gold did not clash with either, so the only change is the current step. Connectors stay teal up to the current step.
2. Centered layout. Overview, Background, Protocol and all Preview states use one centered column (max-w-[800px], 24px inner padding) with side whitespace. The local stepper and the sticky action row align to the same column, so the page reads as one column from top to bottom. The action row stays sticky and is visible in every story at both sizes.
3. Protocol redesign.
   • Removed the Faces/Houses condition cards, the pacing callout and the bottom key chips.
   • Added How participants respond: a static flowchart figure. Each example stimulus (fixture images: Face1.jpg, House1.jpg, the Search conditionOrangeT/conditionNoOrangeT images; Stroop draws the colored words) shows its label, then an arrow down to its keycap, with "Sees" / "Presses" row labels. Keycaps match the feat(design): WS5 participant screens + run outcome Storybook states #273 participant-screen look (ink outline, heavy bottom edge). It is a <figure>, has no hover or focus state, and ends with "Just a diagram. You can try it for real in Preview." That line is aimed at the playtester who pressed 1 on the old page.
   • What happens in this task is now a vertical timeline, generated from the typed flow input ({ label, count? }[]). Counted phases get a filled teal node and a bold count. Counts: Faces/Houses 6 practice / 120 recorded (params); Stroop 8 / 96 (stroop/experiment.ts: 8 templateParameters in 'Practice task', sample: { n: '96' } in 'Stroop task'); Visual Search 8 / 80 (search/utils.ts: constructTrials(1, …) / constructTrials(10, …), 8 trials per block).
   • One typed input, responses: { key, label, stimulus }[], drives both the diagram and the Preview key legend. It replaces expectedKeys, which had been derived from params.stimuli and gave Stroop and Search the wrong keys (1/9). Stroop now shows r/g/b/y (ink ≠ word, colors from stroop/experiment.ts). Search shows b/n. ProtocolStroop / ProtocolSearch render inside their own Stroop / Visual Search workspace in the shell.
   • Everything, including Stroop's long protocol copy, fits at 1280×720 with the primary action on screen (main content overflow 0).
4. One preview label. New src/renderer/components/PreviewLabel.tsx (+ PreviewLabel.stories.tsx). It uses RunBar's run-status vocabulary: glyph, bold uppercase label, muted detail. [eye] PREVIEW · not recording. The outline eye glyph is distinct from the red EEG dot and the square behavior-only glyph, and the status is always spelled out in words, never color alone. PreviewRunning drops the old "PREVIEW · Nothing is being recorded" card and shows PreviewLabel next to Stop preview in the action row. At integration, engineering will replace PreviewButtonComponent's inline PREVIEW · nothing is being recorded status with PreviewLabel, so the app has one preview label.
5. Removed the CustomDesign and ImportedConfigure stories, plus the CUSTOM/IMPORTED fixtures and the heading prop that only they used. Custom Prepare is an editable authoring flow (Overview = research question / hypothesis / methods; Conditions; Trials; Parameters; Instructions; Preview). Imported is Overview / Markers / Preview. Neither uses the built-in lesson steps, so each gets its own brief later.
6. Oliver Sacks stand-in now sits in Background's own column, in the slot where the video link or embed goes, as a 16:9 placeholder followed by transcript-length text. It uses an h2, not a second h1. The plain Background story keeps the real CNN link.

Also removed the unused modality prop and the step-transition wrapper.

Review agenda (Storybook → Domain/PrepareSteps, Domain/PreviewLabel)

1. Overview: does the gold pill read as "step in this lesson" next to the global gold underline?
2. Background and OliverSacksFallback: centered reading column; is the video slot the right size and position?
3. Protocol, ProtocolStroop, ProtocolSearch: the response diagram and vertical timeline. Is it explanatory enough, and does it read as non-interactive?
4. PreviewStopped, PreviewRunning, PreviewFinished: the PreviewLabel in the action row.
5. Domain/PreviewLabel: glyph choice (eye) vs RunBar's dot and square.
6. DirectCollect: unchanged behavior (nothing locked; Collect marked Next).

Open questions

1. Stroop's yellow is the task's own #ffe32a on white, so the example word is faint. The diagram draws it the way the task does; the label "Yellow ink" carries the meaning. Keep it that way?
2. Should the diagram's "Just a diagram. You can try it for real in Preview." stay, or is the figure framing enough?
3. PreviewRunning's experiment area is limited to the 800px column. Should the real participant screen get a wider area at integration?
4. Visual Search labels: "Orange T is there" / "No orange T". Are these OK, or should they reuse feat(design): WS5 participant screens + run outcome Storybook states #273's wording?
5. Stroop's protocol copy (from stroop/content_protocol.js) spells out the keys that the diagram now shows. Should the copy be shortened in a content pass?
6. Is the Oliver Sacks fallback copy acceptable as a placeholder, or is there approved text?

Integration notes

• Flow counts must come from each experiment's real loop structure, not params.nbTrials, which is stale for Stroop/Search.
• Replace PreviewButtonComponent's inline preview status with PreviewLabel (one preview label app-wide).

Constraints / deviations

• No runtime wiring; pure-props Storybook surfaces.
• No shared global CSS changed: app.global.css is untouched (keycaps reproduce the feat(design): WS5 participant screens + run outcome Storybook states #273 look with utilities). package.json and package-lock.json are untouched.
• OliverSacksFallback's main area scrolls internally (16:9 slot + transcript-length text); the document itself never scrolls and the sticky action row stays visible.

Verification

• npx tsc --noEmit clean.
• Every story was measured at 1366×768 and 1280×720 via the story iframe: 0 console errors, exactly one AppShell workflow bar, document scroll 0 (x and y), primary action inside the viewport, content column 800px. Main-area overflow is 0 for every story except OliverSacksFallback, which scrolls internally by 631/679px for its long reading content.
• Screenshots: /tmp/ws4-design/round2/

[jdpigeon]

Review fixes (Main):

• Oliver Sacks stand-in now lives inside Background (plan §6.1/§6.3 keep four steps), with an illustration placeholder, explanatory text and source line, and no remote link or player.
• Stop preview uses outline, not destructive (DESIGN.md: red is for deleting data).
• Step actions stick to the bottom of the step. PrepareSteps now bounds its height (h-full), so the sticky row works and the primary action is visible without scrolling on all 12 stories at 1366×768 and 1280×720 (measured).
• DirectCollect no longer nests a second AppShell. It shows Overview in a behavior-only workspace, with Collect marked Next and nothing locked.
• A stray playwright devDependency was removed before commit, and a global line-height change to .experiment-design-copy/-card-copy was reverted (it restyled live Design screens).