# Build the "Correction memory" pattern: `RuleCapturePrompt`

## 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 durable rule captured from a correction: never do that again, always use this term.

Use it when: Repeat workflows where the same correction is otherwise made daily.

## What to build
A prompt that appears after a person corrects the AI, proposing to turn that correction into a standing rule written in plain, editable text with a clear scope. Nothing is remembered unless the person confirms, and saved rules can be listed, edited and deleted. It renders inline under the corrected output, with a companion list for managing rules.

### Props
- `correction`: { before: string; after: string }, what the person changed.
- `proposedRule`: { text: string; scope: string }, the agent's suggested wording, e.g. "Always write 'refund window', not 'return period'", and scope, e.g. "Billing replies".
- `scopeOptions`: Array<{ id: string; label: string }>, e.g. this reply only, this workflow, everyone on the team.
- `status`: "proposing" | "editing" | "saving" | "saved" | "declined", controlled.
- `rules?`: Array<{ id: string; text: string; scope: string; createdAt: Date; appliedCount?: number }>, existing rules for the management list.
- `onSave(rule: { text: string; scope: string })`, `onDecline()`, `onEditRule(id, text)` and `onDeleteRule(id)`: callbacks. The component never stores a rule itself.

### States it must render
- Proposing: "Remember this for next time?" with the before and after, the rule text and scope, and Save rule / Just this once.
- Editing: the rule text and scope become editable with a preview of how it reads.
- Saved: "Rule saved: applies to Billing replies" with Undo and a link to all rules.
- Declined: "Kept to this reply only"; the prompt closes and nothing is stored.
- Rules list: each rule as text with scope, when it was added and how often it applied, with Edit and Delete; empty list says "No saved rules".

### Interactions
- Save calls `onSave` with the possibly edited text and scope; Just this once calls `onDecline`.
- Ignoring the prompt (navigating away) counts as declined; no rule is inferred.
- Undo after saving calls `onDeleteRule` for the new rule.
- Delete in the list asks for inline confirmation.

### Edge cases
- A proposed rule broader than the correction (e.g. a single word change generalised to a style rule): default scope to the narrowest option.
- A new rule that conflicts with an existing one: show both and ask which to keep before saving.
- Duplicate rule: offer to update the existing one instead of adding another.
- Empty rule text after editing: Save is disabled.

## Must avoid
Silently learning from a one-off correction and generalising it into behaviour nobody asked for.

## Engineering constraint
Store rules as reviewable text the user can edit and delete; never infer them without confirmation.

## Accessibility
- The prompt is a labelled region announced politely when it appears; it does not steal focus from the editor.
- Scope options are a radio group; the saved confirmation is announced.

## 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.