Run 2: Input and Validation

GEN-MEDIA-0001 scenarios 0002.FS (Input Detection and Routing), 0003.FS (Accepted Formats and Size Limits), and 0004.FS (URL Scheme and Reachability Validation). All stories compose ImageDropZone in focused context.

Entry Criteria

#	Criterion	Verification Command	Expected Output
1	On branch jmpicnic/uc-stories with Run 1 checkpoint commit	git -C <worktree> log --oneline -1 --grep='Run 1 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	Use-case mock data exists	test -f <worktree>/src/use-cases/general-behaviors/entity-media/_shared/mock-data.ts	Exit 0
4	Directory structure exists	test -d <worktree>/src/use-cases/general-behaviors/entity-media/set-entity-image	Exit 0

Artifact Specifications

Artifact	Path	Format	Description
3 scenario descriptions	set-entity-image/0002-input-detection/description.mdx, 0003-formats-and-size/description.mdx, 0004-url-validation/description.mdx	MDX	One per scenario
8 input stories	set-entity-image/0002-input-detection/*.stories.tsx	TypeScript	One per input method + error cases
4 format stories	set-entity-image/0003-formats-and-size/*.stories.tsx	TypeScript	Accepted/rejected formats, size limits
4 URL stories	set-entity-image/0004-url-validation/*.stories.tsx	TypeScript	URL validation scenarios

Task List

#	Task	Persona	Depends On	Status	Acceptance Criteria
2.1	Create scenario directories: 0002-input-detection/, 0003-formats-and-size/, 0004-url-validation/	fe	—	Pending	Directories exist under set-entity-image/
2.2	Create 0002-input-detection/description.mdx	fe	2.1	Pending	MDX renders
2.3	Create 0003-formats-and-size/description.mdx	fe	2.1	Pending	MDX renders
2.4	Create 0004-url-validation/description.mdx	fe	2.1	Pending	MDX renders
2.5	0002-input-detection/file-pick.stories.tsx — file selection via OS dialog	fe	2.2	Pending	Story renders, play function simulates file input, playground exposes format controls
2.6	0002-input-detection/drag-and-drop.stories.tsx — drag-over states	fe	2.2	Pending	Story shows idle, drag-over highlight, drop-accepted
2.7	0002-input-detection/clipboard-image.stories.tsx — paste image blob	fe	2.2	Pending	Story simulates paste, shows data: URI preview routing
2.8	0002-input-detection/clipboard-html.stories.tsx — paste HTML with URL	fe	2.2	Pending	Story extracts URL from HTML markup
2.9	0002-input-detection/url-entry.stories.tsx — HTTPS URL text entry	fe	2.2	Pending	Story shows URL detection, validation, reachability
2.10	0002-input-detection/camera-capture.stories.tsx — camera affordance	fe	2.2	Pending	Story demonstrates camera routing
2.11	0002-input-detection/unrecognized.stories.tsx — non-image text error	fe	2.2	Pending	Story shows inline error message, retry
2.12	0002-input-detection/data-uri.stories.tsx — data:/blob: URI handling	fe	2.2	Pending	Story shows decode + routing or error
2.13	0003-formats-and-size/accepted.stories.tsx — JPEG/PNG/WebP/HEIC	fe	2.3	Pending	Story renders accepted format, playground toggles format
2.14	0003-formats-and-size/rejected.stories.tsx — BMP/SVG rejection	fe	2.3	Pending	Story shows plain-language error
2.15	0003-formats-and-size/limit-exceeded.stories.tsx — oversized file	fe	2.3	Pending	Story shows compression attempt then error
2.16	0003-formats-and-size/auto-compressed.stories.tsx — successful compression	fe	2.3	Pending	Story shows optimization message
2.17	0004-url-validation/valid-https.stories.tsx — valid URL success	fe	2.4	Pending	Story passes validation, playground exposes URL input
2.18	0004-url-validation/rejected-scheme.stories.tsx — http/javascript/file rejection	fe	2.4	Pending	Story shows scheme error message
2.19	0004-url-validation/unreachable.stories.tsx — 404/timeout	fe	2.4	Pending	Story shows unreachable error message
2.20	0004-url-validation/wrong-content-type.stories.tsx — non-image content	fe	2.4	Pending	Story shows content-type error message
2.21	Wave gate: lint, tsc, build-storybook, test, VRT	fe	2.5–2.20	Pending	All checks pass
2.22	Quality review of all new files	qr	2.21	Pending	No anti-patterns, consistent style, description.mdx in every scenario dir

Internal Dependency Graph

2.1 (scenario dirs)
 ├─► 2.2–2.4 (3 description.mdx, parallelizable)
 │
 ▼
2.5–2.20 (16 stories, parallelizable within each scenario)
 │
 ▼
2.21 (wave gate)
 │
 ▼
2.22 (quality review)

All 16 story tasks are parallelizable. All share mock data from Run 1.

Exit Criteria

#	Criterion	Verification Command	Expected Output
1	3 scenario directories exist	ls -d <set-dir>/0002-* <set-dir>/0003-* <set-dir>/0004-* 2>/dev/null | wc -l	3
2	3 scenario description.mdx files	find <set-dir> -path '*/000[234]-*/description.mdx' | wc -l	3
3	8 input story files	find <set-dir>/0002-input-detection -name '*.stories.tsx' | wc -l	8
4	4 format/size story files	find <set-dir>/0003-formats-and-size -name '*.stories.tsx' | wc -l	4
5	4 URL story files	find <set-dir>/0004-url-validation -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-input-stories

Implement Storybook use case stories for GEN-MEDIA-0001 scenarios 0002.FS, 0003.FS, and 0004.FS in the ux-prototype repository. Working directory: <worktree-path>.

Read the specification — sections “0002.FS — Input Detection and Routing”, “0003.FS — Accepted Formats and Size Limits”, “0004.FS — URL Scheme and Reachability Validation”.

All stories compose ImageDropZone in focused context (not full-app). Use mock data from _shared/mock-data.ts. Follow the pattern established by Run 1 view stories. Each story needs a primary export with play function and either a Playground export or per-input-mode named exports.

Quality Reviewer — qr-input-stories

Review all new input-*, formats-*, size-*, and url-* story files. Verify: canary-only imports, mock data usage, play function coverage, error message text matches specification, sidebar title conventions.

Handoff

Artifacts Consumed (from previous runs)

Artifact	Source Run	Path
Use-case mock data	Run 1	src/use-cases/general-behaviors/entity-media/_shared/mock-data.ts
Directory structure	Run 1	src/use-cases/general-behaviors/entity-media/set-entity-image/

Artifacts Produced (for subsequent runs)

Artifact	Consumer Run	Path
16 story files	Runs 3, 4 (pattern reference)	set-entity-image/input-*, formats-*, size-*, url-*