ns-ui

Approval Inline Diff

Human-in-the-loop tool-call approval row: every argument is editable inline with an old→new diff, and deciding collapses the row irreversibly into a one-line receipt.

Use when a human reviews and can edit an agent's proposed tool-call arguments before a one-shot, irreversible approve/deny — pick confirm-hold-ink instead for a bare press-and-hold confirm with no payload to inspect or change.

Install

npx shadcn add https://design.helpmarq.com/r/approval-inline-diff.json
  • approval
  • review
  • agent
  • form
  • diff
  • confirmation
  • accessibility

ns-ui / approval-inline-diff — tool-call approval

Awaiting your review

deploy-agent wants to run a shell command — someone already caught the target and walked it back to staging. Edit any argument before you decide; the change is recorded, not silently applied.

execute_shell

requested by deploy-agent

pending
changed fromnpm run deploy --env=prodtonpm run deploy --env=staging

Recent decisions

send_email

requested by outreach-agent

pending
Denied·send_email·you·2:09:27 PMpayload
toolsend_email
decided byyou
tofinance@acme.co
subjectQ3 invoice — final notice

Denied by you at 2:09:27 PM

update_dns_record

requested by infra-agent

pending
Approved·update_dns_record·you·1:33:04 PMpayload
toolupdate_dns_record
decided byyou
zoneacme.co
recordA status.acme.co
new value203.0.113.42

Approved by you at 1:33:04 PM

Props

PropTypeDefaultDescription
toolNamestring—the tool being called, e.g. "execute_shell"
requestedBy?string—the agent/identity that proposed the call
fieldsAssayField[]——
initialValues?Record<string, string>—seed one or more fields as already edited, keyed by field.key — the diff renders immediately instead of waiting for the human to type
approverName?string—recorded on the receipt as the decider — default "you"
onDecision?(decision: AssayDecision, fields: AssayField[]) => void——
initialDecision?AssayDecision—pre-seed as already decided (e.g. rendering decision history)
className?string——
Back to the catalog