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
  • timeline

States

  • default
  • empty
  • loading

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.

Build the Activity log pattern in your project.