realtime pattern
Activity log
Auditable timeline of who-did-what across the project.
When to use it
Project settings → Activity. Compliance / debugging.
- See last N actions
- Filter by actor and action
- Each row links to source
Layout regions
- header
- main
- toolbar
- Actor + action + date range filters
- timeline
States
- default
- Events listed
- empty
- No events for filter
- loading
- Loading more
Example
<Container><Toolbar /><Timeline>{events.map((e) => <TimelineItem key={e.id} title={renderEvent(e)} time={e.createdAt} />)}</Timeline></Container>The full Activity log pattern specifies 2 exact microcopy strings, 1 motion spec, 4 composition rules — all gated behind the full recipe. Get the full recipe.