Modal dialog for approving or rejecting tool execution requests.

Uses Radix UI Dialog for accessibility including focus trap, Escape key handling, and proper ARIA attributes. Displays tool name, agent ID, and JSON-formatted arguments for user review.

Two-step rejection flow: first click shows a text input for optional reason, second click confirms rejection with the provided reason. Approve action executes immediately.

The dialog prevents outside clicks to ensure explicit user decision. Escape key triggers rejection without reason. During submission, all interactive elements are disabled and button labels change to “Processing…”.

Related types: ToolApprovalRequest, ApprovalDecision from @hexos/react-core

Example

<ToolApprovalDialog
  request={{
    toolCallId: '123',
    toolName: 'delete_file',
    agentId: 'main',
    args: { path: '/data/file.txt' }
  }}
  onApprove={() => approveExecution()}
  onReject={(reason) => rejectExecution(reason)}
  isSubmitting={isSubmitting}
/>

function ToolApprovalDialog(props: ToolApprovalDialogProps): React.ReactElement

Parameters

props