Overview
Draft Mode
Iterative draft history with quick revert and branch actions from prior drafts
draftsiterationhistory
Props
| Prop | Type | Default | Description |
|---|---|---|---|
drafts | DraftItem[] | required | Array of draft entries with id, number, optional label, optional preview, and optional createdAt |
activeDraftId | string | undefined | ID of the currently active draft |
onSelectDraft | (draftId: string) => void | required | Callback fired when a draft is selected |
onRevertToDraft | (draftId: string) => void | required | Callback fired to revert to a selected draft |
onBranchFromDraft | (draftId: string) => void | undefined | Optional callback to create a new branch from a draft |
title | string | "Draft Mode" | Optional heading for the draft history panel |
variant | "list" | "timeline" | "list" | Visual style for presenting draft history |
Docs
Draft Mode exposes an iterative version history of AI outputs so users can compare revisions, revert to an earlier draft, or branch from a previous point. It helps teams keep momentum without losing earlier thinking, especially when refinement cycles produce multiple valid options.
Variants
- Linear draft list — A straightforward ordered list of drafts with active state and quick revert actions.
- Timeline view — A chronological presentation that highlights progression across revision numbers.
- Draft with branching — Each draft supports creating a branch, combining revision history with alternative paths.
Use Cases
- Long-form writing where teams iterate through multiple rewrites
- Specification drafting with checkpoints before major edits
- Prompt engineering workflows that compare refinement passes
- Agent outputs that need approval before replacing prior versions
- Collaborative review where teammates reference specific draft numbers
Best Practices
- Show stable draft numbers so discussions can reference exact revisions.
- Keep active draft state obvious to avoid editing the wrong version.
- Provide one-click revert actions with clear confirmation.
- Include short previews so users can scan differences quickly.
- Pair with branching when multiple directions should continue in parallel.