Decision inbox
Everything agents are waiting on you for, in one queue: what they want to do, why, and what happens if you say yes.
Loading preview…
Install
- 1
Run this command in your Tailwind CSS project. It adds
components/ai/decision-inbox-queue.tsxand installs its dependencies.$ npx shadcn@latest add https://gradientdeck.com/ai-components/r/decision-inbox-queue.json
Usage & API
Example
import { AgentMark } from "@/components/ai/decision-inbox-queue"
<AgentMark
agent={agent}
/>Props AgentMark
| Prop | Type & description | Required |
|---|---|---|
agent | DecisionAgent | Required |
size | "sm" | "md" | Optional |
muted | boolean | Optional |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
The queue is a workspace screen with a list and a detail pane. Filters are All, High risk, and a soon bucket for decisions inside the minute window you pass. An agent filter can narrow the list further. Rows can be checked, and a bar then offers Decline or Approve for the selection. If any checked row is high risk, a confirm step says so and asks you to approve all anyway. The open decision shows why it is asking, the impact, and editable fields. Approve as is, Approve with changes, and Decline sit at the bottom. A note field asks why you changed it. Previous and Next move through the list. Approval rules in the preview state things like a refund ceiling and a deadline after which an unanswered request expires. Empty selection says to pick one from the list.
Example
import { AgentMark } from "@/components/ai/decision-inbox-card"
<AgentMark
agent={agent}
/>Props AgentMark
| Prop | Type & description | Required |
|---|---|---|
agent | CardAgent | Required |
size | "sm" | "md" | Optional |
Dependencies
- React
- Tailwind CSS
- motion
- lucide-react
Implementation notes
The card is one article labeled as a decision from the agent. It shows the title, the reason, an If you approve list, a risk chip and an expiry. Approve and Decline are the main actions. Ask a question opens a field addressed to that agent, sent with Enter, cancelled with Escape. After a choice the card becomes a one-line receipt, Approved or Declined by the person named, with Undo until the undo window ends. Then the time replaces Undo, and a follow-up line can say the agent is running or finished. A reply count can sit with the ask control.
Choosing a layout
Use the queue when someone triages many pending actions across agents, especially when some are high risk or about to expire, and when a batch of low-risk ones should go through together. Use the card when the decision arrives inside the conversation that raised it, and the person may want to ask a question before answering.
Runs from every agent, including ones that are not waiting, belong in the agent inbox. A single drafted email or a single tool payload that should be edited field by field belongs in edit before run. The decision inbox is the yes-or-no, with the reason and the impact beside it. A form the agent built to collect missing facts is the generative form, which is a different pause.
Can one approval cover several decisions?
In the queue, yes. Checked rows get one Decline or one Approve. High-risk rows in that selection ask for a second confirmation before the batch is approved. The card is a single decision and has no checkbox.
What is the undo window on the card?
After Approve or Decline the receipt shows Undo until undoMs elapses, five seconds unless you change it. When the timer finishes, onCommit runs and Undo is replaced by the time of the decision. The queue's undo is a separate callback on one id, not that timer.