# Build the "Mid-stream takeover" pattern: `TakeoverControl`

## 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 human takes the controls without cancelling the run, then hands back.

Use it when: Live sessions and pair-work agents where intervention windows are seconds long.

## What to build
A control bar and field-level authorship markers for a surface an agent is operating, such as a form, browser or document. It shows who is driving, lets a person take control instantly without cancelling the run, keeps everything the agent already did, and hands back with the person's edits. It renders above the shared workspace.

### Props
- `driver`: "agent" | "human" | "handing-back" | "resumed", controlled by the parent.
- `activity?`: string, what the agent is doing now, e.g. "Filling Reason".
- `fields`: Array<{ id: string; label: string; author: "agent" | "human" | "empty"; partial?: boolean }>, who last wrote each field.
- `pausedAt?`: { fieldId?: string; at: Date }, where the agent stopped when control was taken.
- `changes`: Array<{ fieldId: string; from: string; to: string }>, edits the person made since taking control.
- `finalStepNote`: string, who commits, e.g. "The agent won't submit on its own".
- `log?`: Array<{ who: "agent" | "human"; text: string; at: Date }>, a session timeline.
- `onTakeControl()`, `onHandBack(changes)` and `onResetField?(fieldId)`: callbacks. The component never pauses or resumes the agent itself.

### States it must render
- Agent driving: an accent bar "The agent is filling this form" with the current activity and Take control.
- In control: "You're in control. The agent paused at Reason. The 3 fields it filled stay as they are."; fields show who filled them.
- Editing: fields the person changes are marked "edited by you" with the earlier value available.
- Handing back: a summary of the person's changes and "The agent will continue from your edits".
- Resumed: the agent continues; human-edited fields stay marked and the timeline records the handover both ways.
- Nothing filled yet: taking control says so instead of implying work was kept.

### Interactions
- Take control is one click (and a documented shortcut); the bar switches to In control at once while `onTakeControl` fires.
- Hand back calls `onHandBack` with `changes`; with no changes it says the agent will continue where it paused.
- Reset on a human-edited field calls `onResetField` to restore the agent's value.

### Edge cases
- Takeover mid-typing: the half-typed value stays, marked `partial`, never cleared.
- After hand-back, fields with `author` "human" show "kept: edited by you"; the component flags any later agent write to them as a conflict rather than hiding it.
- The person takes control again during resume: allowed immediately, with no second confirmation.
- The final commit stays with the person when `finalStepNote` says so; the submit control is never triggered by the agent's state.

## Must avoid
Takeover that discards everything the agent had built, punishing the user for intervening.

## Engineering constraint
Checkpoint state before yielding control; the agent must resume from the human's edits, not its own.

## Accessibility
- Announce driver changes in a polite live region; on takeover move focus to the field where the agent paused.
- Authorship markers are text ("edited by you"), not only colour.

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