ApprovalInbox
StableOne list of everything across your runs that is waiting for you.
Also known as needs you inbox, approval inbox, action required, pending approvals
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
Four things are waiting
Waiting for you
4Needs you now2
- Trip planQuestion
Pick a hotel for Friday night
Waiting 12 min
- Invoice cleanupApproval
Delete 12 old invoices
Waiting 3 min
Needs you soon1
- Weekly reportFailed
Could not open the sales spreadsheet
Waiting 1 hour
When you have time1
- Shop product pagesReady for review
18 new descriptions are ready to read
Waiting Yesterday
<ApprovalInbox
items={[
{ id: "1", run: "Trip plan", kind: "question", urgency: "now", need: "Pick a hotel for Friday night", waited: "12 min", actionLabel: "Answer" },
{ id: "3", run: "Weekly report", kind: "failure", urgency: "soon", need: "Could not open the sales spreadsheet", waited: "1 hour", actionLabel: "Fix" },
{ id: "4", run: "Shop product pages", kind: "review", urgency: "later", need: "18 new descriptions are ready to read", waited: "Yesterday", actionLabel: "Open" },
]}
onAction={(item) => openItem(item.id)}
/>Press an action to handle an item. It leaves the list.
When to use it
One place for everything, across all runs, that is waiting on a person, sorted by how soon it needs them. Each row has one clear action, so people can clear the list quickly, even on a phone.
Made of: Title and count · Group heading (Needs you now, soon, when you have time) · Row: run name, type label, what is needed, wait time · Action button · Empty message
Use it for
- A home screen or side panel that collects questions, approvals, failures and finished work from many runs.
- A phone view where people sort out what waits on them.
- Saying plainly that nothing is waiting.
Not for
- Every task, including ones that need nothing from the person: use AgentSessionList.
- A single question inside a run: use AgentQuestionCard.
- A catch-up when someone returns to one run: use CatchUpSummary.
Do and avoid
Waiting for you
2Needs you now1
- Trip planApproval
Approve the hotel payment
Waiting 12 min
Needs you soon1
- InvoicesQuestion
Pick a due date format
Waiting 1 h
Waiting for you
3Needs you now1
- Trip planApproval
Approve the hotel payment
Waiting 12 min
When you have time2
- InvoicesReady for review
Finished, all good
Waiting 2 h
- PhotosReady for review
Finished, all good
Waiting 3 h
Do
- Sort by how urgent it is, then by how long it has waited.
- Give each row one clear action.
- Show the run name so people know where the item came from.
- Use plain wait times such as 12 min or Yesterday.
Avoid
- Do not put finished-and-fine runs here. Only things that need a person.
- Do not mark every group amber.
- Do not hide the wait time.
- Do not add extra actions to rows. Open the details instead.
On a phone
- The card has 16px padding on a phone and 20px from 640px wide.
- Each row wraps so the action button drops under the text, and long run names are cut with an ellipsis.
- Action buttons keep their size and have a 44px tap area on a touch screen.
Seen in products
- Claude Code agent view: one list of sessions grouped Needs input, Working and Completed, with notifications when a session needs input.
- Elion library: names an agent inbox as the fix for chat being the only place everything lands.
- Microsoft: agents move between foreground and background, and their status stays visible.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| itemsrequired | InboxItem[] | none | Waiting items: { id, run, kind, urgency, need, waited, actionLabel }. kind is question, approval, failure or review. urgency is now, soon or later. |
| onAction | (item: InboxItem) => void | none | Fires from the row button. |
| labels | ApprovalInboxLabels | none | Overrides title, group names, type names, waiting(time), emptyTitle and emptyBody. |
| headingLevel | 2 | 3 | 4 | 2 | Level of the title. Group headings use the next level. |
| className | string | none | Extra classes on the root. |
"Show code under the preview gives the code for the example on the stage."
States
States this part has beyond its default look. Build each one your screen can reach. States set by a property are in the Code tab.
- empty
- With no items, a compact cleared message replaces the list and the count badge is hidden.
- urgent
- Items with urgency now get an attention border and a primary action button; later groups use quieter styling.
- failure
- An item with kind failure shows a red kind badge.
- focus
- Each action button shows a focus ring on keyboard focus.
Tokens
Change one of these and every part that uses it follows.
--attention--surface--line--radius-card
Built in
- The inbox is a region named by its title, with real headings for the title and each group.
- Each group is a list, so screen readers say how many items it holds.
- Each button's name includes the run and what is needed, so the buttons do not all sound the same.
- The type of item is written in words, not only shown by an icon or color.
- Rows wrap on narrow screens.
What you need to do
- Set headingLevel so the title fits the headings around it.
- Keep actionLabel short, such as Answer or Review. The run and the need are added to the button name for screen readers.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide