# Build the "Draft mode" pattern: `DraftCompare` ## Stack (edit this block to match your project) - React 18+ with TypeScript: one function component, typed props, no `any`. - Tailwind CSS, using your design system's tokens if you have them. - Presentational only: data comes in through props, decisions go out through callbacks. No fetching or global state inside. - If your codebase already has conventions (naming, shared components, tokens), follow them over this spec. ## What the pattern is for A cheap, fast, explicitly provisional pass for exploring before committing to a full-quality run. Use it when: Expensive generation — video, high-res images, deep research, large refactors. ## What to build A view for cheap, fast draft outputs that are unmistakably marked as provisional, with a single step to finalise a chosen draft at full quality. It lets a person compare a few directions before spending on the real run, and blocks drafts from being exported as if they were final. It renders in a generation or research workspace. ### Props - `drafts`: Array<{ id: string; title: string; summary: string; body: React.ReactNode; seed: string; limitations: string[] }>, where `limitations` lists what the cheap pass skipped, e.g. "Numbers not checked". - `selectedId`: string and `onSelect(id: string)`, controlled. - `draftCost?`: string, what the drafts cost, e.g. "3 drafts, 12 credits, 38 s". - `finalCost`: string, the cost of the full pass, e.g. "120 credits, about 2 min". - `finalPassIncludes?`: string[], what the full pass adds, e.g. "23 sources read in full". - `status`: "drafts" | "finalising" | "final" | "error", controlled by the parent. - `final?`: { body: React.ReactNode; fromDraftId: string; seed: string }, the full-quality result. - `onFinalise(draftId: string, seed: string)` and `onExport()`: callbacks. The component never generates or exports anything itself. ### States it must render - Drafts: draft cards each carry a persistent "Draft" badge, a provisional visual treatment (for example a hatched or tinted frame) and the limitations line "Fast pass from 6 sources. Numbers not checked. Not for sharing." - Draft selected: the chosen draft is shown larger with its gaps marked inline ("source?"), plus the Finalise button showing `finalCost` and what the full pass adds. - Finalising: draft choice is locked and progress reads "Finalising, reading 23 sources". - Final: the draft badge and treatment are removed, a line says "Finalised from draft B, same outline and seed", and Export becomes enabled. - Error: the draft remains, marked as draft, with Retry finalise. ### Interactions - Clicking a draft card selects it; arrow keys move between cards. - Finalise calls `onFinalise(draftId, seed)` so the full run keeps the draft's seed and outline. - Export is disabled while any draft is shown, with the reason "Drafts can't be exported" next to it; it calls `onExport` only in Final. ### Edge cases - Copying text out of a draft: copied content carries a "Draft" prefix or note, so it can't leave looking final. - Final output that differs noticeably from the draft outline: show "Changed from draft" markers rather than implying they match. - A single draft: skip the comparison layout but keep the badge and limitations. - Printing or screenshots: the draft badge stays visible in print styles. ## Must avoid Draft output that looks final, so users ship it without knowing they saw the cheap version. ## Engineering constraint Mark draft artifacts in metadata and carry the seed forward so the final run matches the draft. ## Accessibility - Draft cards form a `radiogroup`; each card's accessible name starts with "Draft:" so the provisional status is not only visual. - Announce the switch from draft to final, including which draft it came from. ## House rules - Real `