Run 3: Preview and Confirm

GEN-MEDIA-0001 scenarios 0005.FS (Preview and Crop) and 0006.FS (Confirm and Persist). Stories compose ImagePreviewEditor, ImageComparisonLayout, CopyrightAcknowledgment, and ImageUploadDialog.

Entry Criteria

#	Criterion	Verification Command	Expected Output
1	On branch jmpicnic/uc-stories with Run 2 checkpoint commit	git -C <worktree> log --oneline -1 --grep='Run 2 complete'	Commit hash
2	Branch up-to-date with base	git -C <worktree> fetch origin jmpicnic/item-image-upload-components && git -C <worktree> merge-base --is-ancestor origin/jmpicnic/item-image-upload-components HEAD	Exit 0
3	Input stories exist (pattern reference)	find <worktree>/src/use-cases/general-behaviors/entity-media/set-entity-image/0002-input-detection -name '*.stories.tsx' | wc -l	8

Artifact Specifications

Artifact	Path	Format	Description
Set Entity Image UC description	set-entity-image/description.mdx	MDX	Use case description with scenarios table
2 scenario descriptions	set-entity-image/0005-preview-and-crop/description.mdx, 0006-confirm-and-persist/description.mdx	MDX	One per scenario
6 preview stories	set-entity-image/0005-preview-and-crop/*.stories.tsx	TypeScript	Preview, comparison, edit ops, states
4 confirm stories	set-entity-image/0006-confirm-and-persist/*.stories.tsx	TypeScript	Copyright ack, confirm, cancel

Task List

#	Task	Persona	Depends On	Status	Acceptance Criteria
3.1	Create set-entity-image/description.mdx with full scenarios table	fe	—	Pending	MDX renders, lists all 7 scenarios with status
3.2	Create scenario directories: 0005-preview-and-crop/, 0006-confirm-and-persist/	fe	—	Pending	Directories exist
3.3	Create 0005-preview-and-crop/description.mdx	fe	3.2	Pending	MDX renders
3.4	Create 0006-confirm-and-persist/description.mdx	fe	3.2	Pending	MDX renders
3.5	0005-preview-and-crop/new-image.stories.tsx — 1:1 preview, no comparison	fe	3.3	Pending	Story renders preview, playground exposes aspectRatio
3.6	0005-preview-and-crop/comparison-desktop.stories.tsx — side-by-side	fe	3.3	Pending	Story shows existing + new layout
3.7	0005-preview-and-crop/comparison-mobile.stories.tsx — tabbed layout	fe	3.3	Pending	Story renders at mobile viewport with tabs
3.8	0005-preview-and-crop/crop-zoom-rotate.stories.tsx — edit operations	fe	3.3	Pending	Play function exercises crop, zoom, rotate, pan, reset
3.9	0005-preview-and-crop/url-loading.stories.tsx — shimmer + timeout	fe	3.3	Pending	Story shows loading then loaded/timeout states
3.10	0005-preview-and-crop/interaction-states.stories.tsx — 5-state playground	fe	3.3	Pending	Controls toggle View, EmptyImage, ProvidedImage, FailedValidation, Warn
3.11	0006-confirm-and-persist/copyright-acknowledgment.stories.tsx — checkbox + disabled confirm	fe	3.4	Pending	Confirm disabled until acknowledged, playground controls
3.12	0006-confirm-and-persist/managed-upload.stories.tsx — upload progress + success	fe	3.4	Pending	Play function confirms, shows progress, grid/form updates
3.13	0006-confirm-and-persist/external-url.stories.tsx — URL stored as-is	fe	3.4	Pending	Story confirms URL, entity display updates
3.14	0006-confirm-and-persist/cancel-no-change.stories.tsx — cancel aborts upload	fe	3.4	Pending	Story cancels, entity unchanged
3.15	Wave gate: lint, tsc, build-storybook, test, VRT	fe	3.5–3.14	Pending	All checks pass
3.16	Quality review of all new files	qr	3.15	Pending	No anti-patterns, consistent style, description.mdx in every scenario dir

Internal Dependency Graph

3.1 (UC description.mdx)  3.2 (scenario dirs)
                            ├─► 3.3 (0005 description.mdx)
                            └─► 3.4 (0006 description.mdx)
                                 │
                                 ▼
                     3.5–3.14 (10 stories, parallelizable)
                                 │
                                 ▼
                     3.15 (wave gate)
                                 │
                                 ▼
                     3.16 (quality review)

Exit Criteria

#	Criterion	Verification Command	Expected Output
1	Set Entity Image description.mdx exists	test -f <set-dir>/description.mdx	Exit 0
2	2 scenario directories exist	ls -d <set-dir>/0005-* <set-dir>/0006-* 2>/dev/null | wc -l	2
3	2 scenario description.mdx files	find <set-dir> -path '*/000[56]-*/description.mdx' | wc -l	2
4	6 preview story files	find <set-dir>/0005-preview-and-crop -name '*.stories.tsx' | wc -l	6
5	4 confirm story files	find <set-dir>/0006-confirm-and-persist -name '*.stories.tsx' | wc -l	4
6	Lint passes	npm run lint --prefix <ux-prototype>	Exit 0
7	TypeScript compiles	npx tsc --noEmit --project <ux-prototype>	Exit 0
8	Storybook builds	npm run build-storybook --prefix <ux-prototype>	Exit 0
9	Unit tests pass	npm run test --prefix <ux-prototype>	Exit 0
10	VRT baselines current	npx playwright test --project=vrt --prefix <ux-prototype>	Exit 0
11	Rebased onto base branch	git -C <worktree> fetch origin jmpicnic/item-image-upload-components && git -C <worktree> rebase origin/jmpicnic/item-image-upload-components	Exit 0, no conflicts
12	Post-rebase checks pass (lint, tsc, build, test)	Re-run criteria 6–10 after rebase	All pass

Agent Prompt Templates

Front-End Engineer — fe-preview-stories

Implement Storybook use case stories for GEN-MEDIA-0001 scenarios 0005.FS and 0006.FS. Working directory: <worktree-path>.

Read the specification — sections “0005.FS — Preview and Crop” and “0006.FS — Confirm and Persist”.

These stories compose ImagePreviewEditor, ImageComparisonLayout, CopyrightAcknowledgment, and ImageUploadDialog in focused context. Use mockUpload and mockUploadSlow from _shared/mock-data.ts. Follow patterns established by Run 1 and Run 2 stories.

Quality Reviewer — qr-preview-stories

Review all new preview-*, edit-*, interaction-states, copyright-*, confirm-*, and cancel-* story files. Verify: canary-only imports, mock data usage, play function coverage, interaction state completeness, sidebar title conventions.

Handoff

Artifacts Consumed (from previous runs)

Artifact	Source Run	Path
Use-case mock data	Run 1	_shared/mock-data.ts
Input story patterns	Run 2	set-entity-image/input-*

Artifacts Produced (for subsequent runs)

Artifact	Consumer Run	Path
Set Entity Image MDX	Run 4 (referenced by entity-media.mdx)	set-entity-image/set-entity-image.mdx
Preview/confirm stories	Run 4 (pattern reference for end-to-end)	set-entity-image/preview-*, confirm-*