CatchUpSummary
StableA "While you were away" summary shown when you come back to a run.
Also known as re-entry recap, catch up summary, welcome back, while you were away
Install with npm install @tattva/ui (setup), or copy the code from the kit in Downloads.
After two hours away
Finished
- Found 6 flights under $400
- Saved your passport details to the form
Needs you
- Choose which hotel to book for Friday
- Approve the $48 baggage fee
What changed
- 4 files edited
- 2 emails drafted
- 31 pages visited
<CatchUpSummary
awayFor="2 hours"
finished={["Found 6 flights under $400", "Saved your passport details to the form"]}
needsYou={[{ id: "n1", text: "Choose which hotel to book for Friday", actionLabel: "Choose", onAction: openHotels }]}
changes={[{ label: "files edited", count: 4 }, { label: "pages visited", count: 31 }]}
onShowLog={openLog}
/>Press a Needs you button or Show full log. Press the header to fold the card.
When to use it
Catches people up after a break: how long they were away, what finished, what needs them now and what changed. What needs action comes before the counts, and the full log is one press away.
Made of: Header with time away · Fold button · Finished list · Needs you list with actions · Counts of what changed · Show full log
Use it for
- When someone returns to a run that kept working while they were gone.
- Putting the actions that wait on the person at the top of a run.
- Summing up changes as counts, with a way into the full log.
Not for
- Waiting items from many runs at once: use ApprovalInbox.
- The full record of every action: use ActionLog.
- A section that people open and close, with no recap: use Collapsible.
Do and avoid
Finished
- Found flights
- Sorted 32 invoices
Needs you
- Approve the hotel payment
What changed
- 4 Files edited
Finished
- Opened the trip folder
- Read 3 emails
- Searched flights
- Compared 4 flights
- Saved the dates
- Listed hotels
- Checked bag rules
- Sorted 32 invoices
Needs you
- Approve the hotel payment
Do
- Show it once, when the person returns, not on every visit.
- Put what needs the person above what changed.
- Use counts for changes and keep the detail in the full log.
- Write each line as a short sentence a friend would say.
Avoid
- Do not show the whole log here.
- Do not use amber for finished work.
- Do not hide the actions behind the fold.
- Do not show it if nothing happened. Say nothing.
On a phone
- The whole header is one button across the card that opens and closes the recap. On a touch screen its tap area is at least 44px tall.
- Items needing you wrap so the action button drops under the text on a narrow screen.
- The change counts wrap onto as many rows as they need.
Seen in products
- Claude Code agent view: when you attach to a session, it posts a recap of what happened while you were away.
- Teardown notes list CatchUpSummary, what happened while you were away, as a missing part.
- Chrome auto browse, Manus and cloud agents assume you are away, which is why a return summary matters.
Properties
| Prop | Type | Default | Description |
|---|---|---|---|
| awayForrequired | string | none | How long the person was away, such as 2 hours. |
| finished | string[] | [] | What finished while away. |
| needsYou | RecapNeed[] | [] | Items waiting on the person: { id, text, actionLabel, onAction? }. |
| changes | RecapChange[] | [] | Counts of what changed: { label, count }. |
| onShowLog | () => void | none | Opens the full log. The button is hidden when omitted. |
| defaultOpen | boolean | true | Whether the card starts open. |
| labels | CatchUpSummaryLabels | none | Overrides heading, away(time), section titles, empty lines and showLog. |
| headingLevel | 2 | 3 | 4 | 5 | 6 | 3 | Level of the part's own heading, so it fits the page outline. |
| className | string | none | Extra classes on the root. |
"Show code under the preview gives the code for the example on the stage."
In Figma
In Figma, one CatchUpSummary switches all of this from its properties panel, across 2 variants. Each property sets the React prop beside it, so design and code use the same names.
| Figma property | React | Values |
|---|---|---|
| Default open | defaultOpen | On or off |
Tokens
Change one of these and every part that uses it follows.
--attention--surface--line--sunken--radius-card
Built in
- The header is a button that says whether the card is open or closed.
- The card is a region named by its header, with a heading for each part, so screen readers can jump between them.
- Rows that need you have a dot and words, not color alone.
- The fold arrow turns without animation when people turn off motion in their system settings.
What you need to do
- Write action labels that make sense alone, such as "Pick a hotel", because the buttons are named only by them.
- Set headingLevel so the header fits your page outline. It is 3 unless you change it; the inner headings sit one level below.
Built toward WCAG 2.2 AA and checked automatically; no independent audit yet. Read the accessibility guide