Takeover banner

The agent is controlling the browser, with Take over, Pause and Stop, and the reverse: You are in control, with Hand back.

Markdown

On this page

The agent drives, you pause it or take over, then hand back.

Installation

$ pnpm dlx shadcn@latest add https://chatcn.dev/r/takeover-banner.json

Usage

tsx

import { TakeoverBanner } from "@/components/ui/chatcn/takeover-banner"

<TakeoverBanner
  mode={mode}
  target="linear.app/harbor-goods"
  onTakeOver={() => setMode("user")}
  onPause={() => setMode("paused")}
  onResume={() => setMode("agent")}
  onStop={stop}
  onHandBack={() => setMode("agent")}
/>

While the agent drives, the banner inverts: in a monochrome interface, ink on paper is the loudest signal there is, and this is the moment that deserves it.

Examples

Every state

Agent in control, paused, you in control, and the floating pill.

Props

Prop	Type	Notes
`mode`	`agent \| paused \| user`
`agentName`	`string`	Default The agent
`target`	`ReactNode`	Site being controlled, in mono
`title`, `description`	`ReactNode`	Replace the default copy
`onTakeOver`, `onPause`, `onResume`, `onStop`, `onHandBack`	`() => void`	Each shows its button in the right mode
`variant`	`bar \| floating`	Floating is a pill for the top of a live view

Accessibility

The banner is a region named Browser control. Its main line is a polite live region, so a change of control is announced.
On narrow screens Pause and Stop keep their names for screen readers when the labels hide.

Motion

The surface inverts over 200 ms and the icon swaps with a 150 ms blur crossfade. Nothing moves; under reduced motion the change is instant.