TakeoverBar
StableA full-width bar that says who is in control: you, or the assistant.
Also known as take control, pause agent, human takeover
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Take over, then give it back
The agent is working
const [state, setState] = useState<TakeoverState>("agent-working");
<TakeoverBar
state={state}
step="Entering your card number on the checkout page"
onTakeOver={() => setState("you-control")}
onResume={() => setState("agent-working")}
onHandBack={() => setState("agent-working")}
/>Press Take over to pause the assistant. Resume or Hand back lets it continue. The second button shows the watch state.
When to use it
Makes control of a shared screen obvious, so the assistant never acts while the person thinks they are in charge. It offers the matching way to change control, so people can step in and hand back without stopping the run.
Made of: State icon · Status sentence · Step you are watching (watch mode) · Actions: Take over, Resume, Hand back
Use it for
- Above a screen or browser the assistant is operating, so people can take over at any time.
- Pausing the assistant while the person does a step themselves.
- Asking the person to watch one sensitive step, such as a payment.
Not for
- A question the assistant needs answered: use AgentQuestionCard.
- Approving one action: use PermissionPrompt.
- A run going on in the background: use BackgroundRunChip.
Do and avoid
This step needs you to watch
The agent will wait while you watch: Paying for the room
The agent is working
Do
- Keep the bar visible for the whole run so it is always clear who is in charge.
- Use the watch state only for steps that really need a person, such as payment or sign-in.
- Say what the assistant is not doing while you have control.
- Keep the buttons plain: Take over, Resume, Hand back.
Avoid
- Do not use amber for the working or you-control states.
- Do not let the assistant keep acting while the bar says you have control.
- Do not hide Take over in a menu.
- Do not collect passwords or card numbers through the assistant.
On a phone
- The text and the buttons wrap onto two lines on a narrow screen, with the buttons on the right of the second line.
- The buttons keep their size and have a 44px tap area on a touch screen.
- Nothing depends on hover, and the status text is announced when control changes hands.
Seen in products
- ChatGPT agent: takeover for credentials and payment, and watch mode on sensitive sites such as email and banking.
- Chrome auto browse: a Take over task button, a Check your task button and a marker on the active tab.
- Devin: an interactive browser and shell for direct takeover, with advice to say what you changed when you hand back.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| staterequired | "you-control" | "agent-working" | "supervise" | none | Who is in control. Decides the text and the actions. |
| step | string | none | The step to watch. Shown in the supervise state. |
| onTakeOver | () => void | none | Fires from Take over, in the working and supervise states. |
| onResume | () => void | none | Fires from Resume. The agent continues from where it paused. |
| onHandBack | () => void | none | Fires from Hand back, in the you-control state. |
| labels | TakeoverBarLabels | none | Overrides visible text: youControl, youControlHint, agentWorking, supervise, superviseHint(step), takeOver, resume, handBack. |
| className | string | none | Extra classes on the root. |
"Show code under the preview gives the code for the example on the stage."
In Figma
In Figma, one TakeoverBar switches all of this from its properties panel, across 3 variants. Each property sets the React prop beside it, so design and code use the same names.
| Figma property | React | Values |
|---|---|---|
| Status | state | You-control, Agent-working, Supervise |
Tokens
Change one of these and every part that uses it follows.
--surface--line--attention-soft--attention-fg--radius-card
Built in
- Screen readers say the status sentence when the state changes.
- The icon is hidden from screen readers because the sentence says the same thing.
- The watch state is shown by an eye icon and words, not by color alone.
- All actions are real buttons, and they wrap on narrow screens.
- After Take over, Resume or Hand back, keyboard focus moves to the first button of the new state.
What you need to do
- Keep one bar on the page and change its state, instead of swapping in a new bar, so the change is announced.
- Pass step in watch mode, so people hear which step to watch.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide