ApprovalStep

Agent chat · src/components/ApprovalStep/ApprovalStep.tsx

The agent has stopped and is asking before it does something.

Approve and Reject are both real buttons of the same size. Reject is not a link, not smaller, and not hidden behind the detail - a person who wants to say no should not have to look for how.

detail carries the exact thing that will happen, because "run a command" is not a question anybody can answer responsibly. onAlways is separate from Approve so that widening permission is always a deliberate second act, never a side effect of saying yes once.

Import

import { ApprovalStep } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
title	React.ReactNode	What is being asked for, as a question a person can answer.
description	React.ReactNode	What will happen if approved. Concretely - which file, which account, what cost.
detail	React.ReactNode	The exact command, diff or payload.
approveLabel	React.ReactNode
rejectLabel	React.ReactNode
alwaysLabel	React.ReactNode
className	string
onApprove	() => void
onReject	() => void
onAlways	() => void	Offers to stop asking for this kind of action. Omit it and every instance is asked.