Tool Approval

#Installation & usage

Use one before an agent runs anything people would want to check first: sending an email, deleting rows, deploying, spending money. It sits in the conversation like a Tool Call, and once answered it becomes that call's quiet record.

import { ChatToolApproval } from '@youj/react'

<ChatToolApproval
  name="delete_rows"
  summary="Delete 1,204 rows from the orders table"
  reason="They are test orders older than 90 days."
  risk="high"
  args={{ table: 'orders', limit: 5000 }}
  scope="this project"
  onDecision={({ decision, scope, args }) => answer(call.id, decision, scope, args)}
/>

It is uncontrolled by default: it starts pending, and a decision resolves it to approved or denied (with approver and the time on the resolved line). To drive it yourself, pass status (pending, approved, denied, expired, running, done or failed) and resolution ({ by, at, reason }); it then stays as it is until you change it. error and duration fill in the failed and done states. An expired request is a state you set, since only your app knows when its time ran out.

risk is low, medium (the default) or high, shown as an icon and a word, and a pending high-risk card also draws its border in danger. scope adds Always allow for ‹scope›; without it there is no such button. onDecision receives { decision: 'allow' | 'deny', scope: 'once' | 'always', args }, where args are the arguments to run with: the originals, or the person's edits.

Arguments show as readable key/value rows. Values over about 140 characters, or with line breaks, fold behind Show more. Keys named like password, token, secret or api_key, and any key in sensitive, are masked until revealed and can't be edited.

Edit turns the editable arguments into fields. Each is parsed back to the type it had (a number must be a number, an object valid JSON), and validate(key, value, args) can refuse a value with a message. Errors appear under the field, and focus jumps to the first one. Escape cancels and returns focus to Edit. Pass editable={false} to hide it.

Pass autoFocus to move focus to the summary when a request appears. The summary is deliberately not a button: Enter on it allows once for low and medium risk, and is never bound on high risk, so a stray keypress can't approve a dangerous action.

#Description

#Code