Emerging

Mid-stream takeover

A human takes the controls without cancelling the run, then hands back.

MBilling consoleNew refund · Dana Ortiz · #4821 Milky is driving

M Milky is filling this form. You can take over at any point.

Invoice Amount

Refund to

Reason Note to customer

Milky won't submit on its own.

Session

Milky opened a new refund for #8822

Try it: While Milky fills in the refund, take control and switch the card to •••• 0932, then hand back. Nothing it built is lost, and it carries on from your edit.

In the wild

How one product ships this pattern. Click a screenshot to enlarge it.

Manus task view with a notice 'You can choose to take over the browser to complete the operation' and a Take control button above the message box — Manus
Mid-task, Manus offers a Take control button so you can operate its browser yourself, for example to log in, and then let it carry on.
Source: Manus Help Center ↗

When to use

Live sessions and pair-work agents where intervention windows are seconds long.

Seen in

Cursor interrupting an agent edit, Devin takeover, co-browsing support sessions.

For engineers

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

Build prompt

A neutral, component-only prompt for a coding agent. Edit the stack block or anything else to fit your project, then copy it.

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

Download this prompt as Markdown, or every prompt as JSON for an agent.

Critique checklist for human handoff

0 of 4 checked

These questions apply to every pattern in this family. Ticks are saved in this browser.

Does the human receive the full context, unprompted?
Is the wait between handoff and pickup visible?
Can the user force a human at any moment?
Can work return to the agent cleanly afterwards?