affectUI › Components › Agents

Agent Recap

What the agents did while you were away – the night as a small chart with a peak per event, then a board of what needs you, what failed and what's done, acted on right on the card.

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

When to use

The first thing people see when they come back to agents that kept working – in the morning, after a meeting, after a weekend
A catch-up where the few things that need a decision come first and can be decided right there
Showing that the agents were busy without making people read every step

When not to use

A live feed of what agents are doing right now – use Agent Monitor or Agent Lanes
A full log with undo for every change – use Agent Ledger
Decisions without the rest of the night – use Decision Inbox

Usage

import { AgentRecap, type RecapEvent } from "@/components/ui/agent-recap";

const events: RecapEvent[] = [
  { id: "refund", kind: "needs", at: "2026-10-30T02:14", title: "Refund $240 to Acme Corp",
    detail: "Over the $200 auto-approve limit", action: "Approve", doneLabel: "Approved" },
  { id: "sync", kind: "failed", at: "2026-10-30T03:02", title: "Contact sync to the CRM",
    detail: "Token expired after 1,284 of 3,900 contacts" },
  { id: "tickets", kind: "done", at: "2026-10-29T19:05", title: "Answered support tickets", count: 38 },
];

export function Morning() {
  return <AgentRecap events={events} since={lastSeenAt} onAction={(e, a) => handle(e, a)} />;
}

Props

Name	Type	Default	Description
`events`	`RecapEvent[]`		{ id, at, kind, title, detail?, logo?, count?, action?, doneLabel? } – everything that happened, any order
`kind`	`"needs" \| "failed" \| "done"`		Per event – needs you (with its action), failed (with Retry) or done
`since / until`	`Date \| string \| number`		When the person left, and now – the chart runs between them; until defaults to the time it renders
`onAction`	`(event, action: "primary" \| "review") => void \| Promise`		The main action (Approve, Retry …) or Review. Return a promise and the row shows it working until it settles – a rejected one puts the row back
`onUndo / onRedo`	`(event) => void`		Undo on a card that was acted on or on something an agent did (a done card), and Redo after that
`limit`	`number`	`3`	Cards per lane at most – every lane keeps room for this many, so the three stay the same height however full they are
`replay`	`number`	`1800`	How long the night replays when it opens, in ms – 0 shows everything at once
`title`	`string`	`"While you were away"`	Heading
`locale`	`string`		For the times and counts
`className`	`string`		Extra class on the root

Keyboard

Tab: Moves through the actions card by card – Review, then the main action (or Undo / Redo)
Enter / Space: Runs the focused action; focus then moves to Undo, and back to the action after Undo

Accessibility

A section named by its heading; each lane has a heading with its count – of everything in it, also beyond the limit
Every button says what it does to which task – "Approve: Refund $240 to Acme Corp" – so a screen reader never hears three bare Approves
When an action finishes, a polite live region says so – "Approved: Refund $240 to Acme Corp" – and focus moves to Undo, so it never drops to the page
Focusing anything in a card lights up its dot on the chart, the same as pointing at it; the chart itself is decorative and hidden from screen readers – everything on it is in the cards
Every time is a <time> with the full date; empty lanes say so in words

Responsive

Every card is the same height and ends in the same line – a state tag (Done, Fixed, Approved) and the buttons – so acting on one never moves anything
Under 640px the three lanes stack
Dark mode built in: switches when an ancestor (usually <html>) has the class dark or data-theme="dark"

Requirements

React 19

Decision Inbox – Open decisions with two quick answers each – answered ones confirm and fold away
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
Agent Ledger – Everything an agent changed in your systems, each change with an undo – before and after per row, and pointing at Undo shows what builds on it: what would be undone too, and what can't be taken back
Notification Stack – Notice cards stacked behind each other – dismiss the front one to reveal the next