AI Agent Action Approval Card — Free HTML CSS JS Snippet

As AI agents move from answering questions to actually taking actions — sending emails, deleting files, making purchases, modifying records — the interface pattern that gates those actions becomes one of the most consequential pieces of UI a product can ship. Get it wrong and users either lose trust because an agent did something unexpected, or they lose the benefit of automation because every action requires a full manual redo. This snippet implements the pattern correctly: a card that shows exactly what the agent is about to do, in concrete and specific terms, and requires an explicit human decision — Approve, Deny, or Edit first — before anything irreversible actually executes.

Specific and previewable, never vague

The single biggest failure mode in agentic-action UI is a confirmation dialog that says something like "AI wants to take an action, continue?" with no detail about what that action actually is. A vague confirmation trains users to click through without reading, which defeats the entire purpose of a human-in-the-loop gate — the approval becomes theater rather than a real checkpoint. This card instead renders a genuine preview: a .preview-list breaking the proposed email down into its actual To, Subject, and Body fields, with the real recipient addresses and real drafted subject line visible before any decision is made. For a file-deletion agent, the equivalent would list the 12 actual filenames rather than saying "delete some files" — the underlying principle is the same regardless of the action type: a user must be able to verify the specific, concrete consequences of approval, not just trust a label.

Two distinct rejection paths, not one

Most approval UIs offer only "confirm" and "cancel," which forces a false binary — either accept the AI's draft exactly as-is, or discard the whole thing and start over. This card separates those into btn-deny ("Deny," which cancels the action entirely) and btn-edit ("Edit first," which signals intent to modify the draft before anything sends). Giving users a middle path between full acceptance and full rejection substantially increases how often people actually engage critically with an agent's proposal, rather than defaulting to whichever button requires the least friction. In this demo both secondary actions currently route to the same denied-state UI for simplicity, but in a real implementation "Edit first" would reopen the draft in an editable view rather than terminating the flow.

The confirmation state closes the loop

Once btn-approve is clicked, the button disables immediately (btnApprove.disabled = true) to prevent a double-send from a second click, the title updates to "Sending email…" as an in-progress signal, and after a brief simulated delay the card transitions to a distinct .result-state.approved view with a checkmark and the explicit text "Action completed — email sent to 3 recipients." This closing confirmation matters as much as the initial preview: a user who approved an action needs unambiguous proof that it actually happened and exactly what happened, not silence or an assumption that everything went fine. The hideActionUI() function removes the now-irrelevant preview and buttons so the card's final state reads cleanly as a completed record rather than a stale form.

Why this matters for 2026 AI-native UX

The core discipline of 2026 AI-native product design is that agentic actions must be transparent, specific, and gated behind explicit human control before anything irreversible happens — never silently auto-executed based on an inferred intent. As agents gain the ability to actually act on a user's behalf rather than just suggest, the interface separating "the agent proposed this" from "this actually happened" is the single most important trust mechanism a product has. A well-built approval card like this one is not friction added on top of AI capability; it is the thing that makes delegating real, consequential actions to an agent something a user can do with confidence rather than anxiety.