PATTERN 04 / 04 The accountable layer

Human Review Gate

AI proposes; a named human decides. This gate holds an AI-suggested action until a person approves, edits, or rejects it — the human-in-the-loop control that turns automation into accountable automation.

01 / 04

Playground

Lower the confidence to see the low-confidence flag, then approve or reject.

Preview

Send refund of €240 to customer

The customer reported a duplicate charge on 28 June. The model matched two identical transactions and proposes refunding the second one.

AI confidence52% · low confidence

Low confidence — review this carefully before approving.

Controls

AI confidence52%

Require a reason to reject

Decision log

No decisions yet. Approve or reject the proposal.

02 / 04

Usage

import HumanReviewGate from './kit/HumanReviewGate';

<HumanReviewGate
  title="Send refund of €240 to customer"
  confidence={0.52}
  requireReasonOnReject
  onApprove={commitRefund}
  onReject={(reason) => logRejection(reason)}
  onEdit={openEditor}
>
  The model matched two identical charges and proposes refunding the second.
</HumanReviewGate>

03 / 04

Props

Prop	Type	Notes
title	string	What is being reviewed.
children	ReactNode	The AI-proposed output/action shown for review.
confidence	number (0–1)	Shown as a `meter`; low values are flagged.
lowConfidenceThreshold	number	Below this, the proposal is flagged. Default `0.6`.
requireReasonOnReject	boolean	Force a written reason. Default `true`.
onApprove / onReject / onEdit	callbacks	Wire to your real action. `onReject` receives the reason.

04 / 04

Confidence is a role="meter" with aria-valuetext, shown as a percentage and a bar — never colour alone.
Low confidence is flagged with an icon and the words “Low confidence — review carefully”.
The resolution is announced through a role="status" live region.
Reject-with-reason uses a properly labelled textarea; confirm is disabled until a reason is given.
Every action is a real, focusable button with a visible focus ring.