The agent stops and asks before it acts
A human-in-the-loop checkpoint: a question, some context, and option buttons to decide. The card stays deliberately quiet while it waits, one tone behind a regular border, because the question itself is the signal. Once answered, the buttons give way to a read-out of the decision, green for an approval and red for a refusal.
The question
A title that asks, one line of context, and the choices left to right. Mark the recommended option primary so there is a default to reach for.
The agent wants to write to src/routes/checkout.ts.
With a tool call
The detail slot holds whatever the decision covers. The intended pairing is a pending tool call, so the person can open the arguments before answering.
Review the call, then decide.
{
"path": "src/routes/checkout.ts",
"bytes": 2048
}Deciding
The card is fully controlled: it reports the choice and the consumer renders it back. Pick an option to see the answered state, where the buttons give way to the decision made, worded in the past tense and coloured by what it records.
The agent wants to write to src/routes/checkout.ts.
Destructive options
A destructive approval takes tone: "destructive", which renders the destructive button. The card itself stays quiet either way, because the state is still the same: waiting on a person.
This removes the generated fixtures and cannot be undone.
Inside another panel
With bare, the card drops its own fill, border and corners and keeps only its padding and layout, so it reads as the panel it sits in, with one border. AI button's request panel is the host it exists for.
// From the npm package
import { InterruptCard } from 'rift-ds/components/InterruptCard/InterruptCard';
// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/interrupt-card.json