# Build the "Prompt enhancer" pattern: `PromptEnhancer`

## 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
The system rewrites a thin prompt into a fuller one and shows the rewrite before running it.

Use it when: Products whose users under-specify, especially image, video and research generation.

## What to build
A control that rewrites a short prompt into a fuller one and shows the rewrite as editable text before anything runs. It lists what was added and keeps the original one click away, so a person chooses which version to run. It renders under or inside a prompt composer.

### Props
- `original`: string, the prompt as the person typed it.
- `enhanced?`: string and `onEnhancedChange(text: string)`, the suggested rewrite, editable and controlled.
- `additions?`: Array<{ label: string; text: string }>, what the rewrite added, e.g. { label: "Timeframe", text: "Q3" }.
- `status`: "idle" | "enhancing" | "review" | "error".
- `onEnhance()`: asks for a rewrite. The component never rewrites on its own or before the person asks.
- `onRun(prompt: string, which: "original" | "enhanced")`: runs the chosen version. The component never runs the prompt itself.
- `onDiscard()`: closes the rewrite and returns to the original.

### States it must render
- Idle: the composer with an Enhance button beside Run as typed.
- Enhancing: a busy indicator on Enhance; the original stays visible and editable.
- Review: the rewrite in an editable text area marked as AI-written and "Not run yet", the original text shown inline (struck through where replaced) and a list of additions as chips.
- Edited: once the person changes the rewrite, its marker changes to "Edited by you".
- Error: enhancement failed; the original is untouched and can still run.

### Interactions
- Run rewrite calls `onRun(enhanced, "enhanced")`; Keep mine calls `onRun(original, "original")`; both are equal-weight buttons.
- Selecting an addition chip highlights its words in the rewrite; a remove control on the chip deletes that addition from the text.
- Discard calls `onDiscard` and restores the composer to the original exactly.

### Edge cases
- The rewrite changes meaning (adds a constraint the person did not ask for): additions must list every change so nothing is silent.
- The person edits the original while a rewrite is pending: mark the rewrite as out of date and offer to enhance again.
- An empty or one-word prompt: Enhance may ask a clarifying question instead of guessing; render it as a question with an answer field.
- After a run, the result should be labelled with which version produced it; expose `which` in `onRun` for that.

## Must avoid
Silently rewriting intent, so the user cannot tell whether the miss was theirs or the enhancer's.

## Engineering constraint
Show the enhanced prompt as editable text and keep the original for comparison and retry.

## Accessibility
- The rewrite text area is labelled "Suggested rewrite, not run yet"; announce when it is ready.
- Struck-through original text is also exposed as text ("replaced: …") so the change is not visual only.

## House rules
- Real `<button>`/`<input>` elements, full keyboard use, visible focus; announce status changes with `aria-live="polite"`; respect `prefers-reduced-motion`.
- All user-facing text comes from props (or a `labels` prop) so it can be translated.
- One consistent accent marks anything the AI made or is doing; amber means "needs a person", red means risky, green means done. Never rely on colour alone.
- Fits a 360 px wide container without horizontal scrolling.

## Acceptance checks
- [ ] Every state above can be rendered by passing props, with no internal fake data.
- [ ] Every interaction and edge case above behaves as described.
- [ ] Nothing in "Must avoid" can happen with this component.

## Deliver
1. The component file with its exported prop types.
2. A short usage example that renders each state.