affectUI › Components › Agents

Agent Inbox

All your background agent tasks in one calm list – live clocks and status tags, filter tabs with rolling counts, rows that unfold to the last steps with Approve, Reject, Retry or Open, and glide to their new place.

Part of affectUI Pro. Install: npx shadcn@latest add https://www.affectui.com/r/agent-inbox.json · Import from @/components/ui/agent-inbox

When to use

  • Agent products where several tasks run in the background and people come back to see what finished, what failed and what waits for them
  • A home screen or dashboard that collects approvals from many runs in one calm board, instead of one modal per agent
  • Job queues in general – imports, syncs, evaluations – where each job has a short description, a short history and one next step

When not to use

  • One single approval in the flow of a chat – use Approval Card
  • The plan of one run, step by step – use Agent Plan; for a single tool call use Tool Call Card
  • Hundreds of jobs – the board is for a few dozen at most; page or search a bigger queue in a table

Usage

import { AgentInbox } from "@/components/ui/agent-inbox";

export function Tasks() {
  return (
    <AgentInbox
      tasks={[
        {
          id: "migrate",
          title: "Migrate users table",
          description: "Split users into accounts and profiles. The dry run on staging passed.",
          agent: "Opus 5.5",
          status: "waiting",
          startedAt: Date.now() - 6 * 60_000,
          tools: 14,
          sources: 9,
          steps: [
            { label: "Dry run on staging – no errors", time: "2m ago" },
            { label: "Wants to run it on production", time: "1m ago" },
          ],
        },
        { id: "notes", title: "Release notes v2.4", agent: "Sonnet 5.5", status: "running", startedAt: Date.now() - 80_000 },
        { id: "digest", title: "Weekly metrics digest", agent: "Haiku 5.5", status: "done", elapsed: 252_000 },
      ]}
    />
  );
}

Props

NameTypeDefaultDescription
tasksAgentTask[]{ id, title, description?, agent, status, startedAt?, elapsed?, tools?, sources?, steps? } – status is "running", "waiting", "done" or "failed"; steps are { label, time? }, oldest first
onApprove(task: AgentTask) => voidApprove on a waiting task. Without it the task turns running inside the board
onReject(task: AgentTask) => voidReject on a waiting task. Without it the task turns failed
onRetry(task: AgentTask) => voidRetry on a failed task. Without it the task runs again and its clock starts over
onOpen(task: AgentTask) => voidShows an Open button on running and done tasks
titlestring"Agent inbox"Heading on the left of the bar, after "Agents /"
action{ label: string; onClick: () => void }A button in the bar next to the layout switch, e.g. New task
view"board" | "list"Controlled layout
defaultView"board" | "list""board"Starting layout when uncontrolled
onViewChange(view: AgentInboxView) => voidCalled when Board or List is picked
classNamestringExtra class on the root

Keyboard

  • Tab: Through the layout switch, the cards and the buttons inside an open card
  • Enter / Space: Opens or closes a card, presses Approve, Reject, Retry or Open
  • Esc: Closes the open card and puts focus back on it

Accessibility

  • Each column is a labeled section; each card is a button with aria-expanded, and a closed card's details are inert
  • Board / List is a radio group
  • A polite live region says how many tasks need you and how many run

Responsive

  • Three columns from about 620px; narrower containers always get the list and hide the switch – it works down to 300px
  • Touch screens: taller cards and buttons
  • Dark mode built in: switches when an ancestor (usually <html>) has the class dark or data-theme="dark"

Requirements

  • React 19

Related

  • Approval Card – An agent asks before it acts – risk badge, preview, Approve and Deny with shortcuts, a pausing countdown, and a smooth morph into a resolved row
  • Agent Plan – An agent's step-by-step plan to review before it runs – rename, drag to reorder, remove or add steps, then watch each one run with live timers and retry from a failed step
  • Tool Call Card – An agent's tool call in one line – live timer, status and summary, folds open to highlighted arguments and result with copy, retry on errors and a group that sums them up
  • Decision Inbox – Open decisions with two quick answers each – answered ones confirm and fold away

Guides