Activity

Show safe user-facing progress for agent work, jobs, and background tasks.

Keep activity rows in your LiveView assigns or streams, then render the visible rows. The component owns the progress chrome; your app owns the agent, job, or workflow events.

Agent Activity

Read request now

Reading the request.

    <.activity>
  <:item :for={event <- @activity_events} id={event.id} status={event.status}>
    <div class="flex min-w-0 items-center justify-between gap-3">
      <span class="min-w-0 truncate text-sm font-medium text-foreground">
        {event.title}
      </span>
      <span :if={event.meta} class="shrink-0 text-xs text-muted-foreground">
        {event.meta}
      </span>
    </div>
    <p class="mt-1 text-sm leading-6 text-muted-foreground">{event.detail}</p>
  </:item>
</.activity>
  

Customization

Use the :item slot for most rows. Add a root :marker slot when every streamed row should use custom marker chrome.

Custom Markers

Search docs now

Finding the right examples.

    <.activity>
  <:marker :let={item}>
    <span class={custom_marker_class(item[:status])}>
      <.icon
        name={custom_marker_icon(item[:status])}
        class={custom_marker_icon_class(item[:status])}
      />
    </span>
  </:marker>

  <:item :for={event <- @custom_events} id={event.id} status={event.status}>
    <div class="flex min-w-0 items-center justify-between gap-3">
      <span class="min-w-0 truncate text-sm font-medium text-foreground">
        {event.title}
      </span>
      <span :if={event.meta} class="shrink-0 text-xs text-muted-foreground">
        {event.meta}
      </span>
    </div>
    <p class="mt-1 text-sm leading-6 text-muted-foreground">{event.detail}</p>
  </:item>
</.activity>
  

Compact

Set compact for side panels, popovers, and dense job surfaces where the same status list needs less vertical space.

Compact

Queued export now

    <.activity compact>
  <:item :for={event <- @compact_events} id={event.id} status={event.status}>
    <div class="flex min-w-0 items-center justify-between gap-3">
      <span class="min-w-0 truncate font-medium">{event.title}</span>
      <span :if={event.meta} class="shrink-0 text-xs text-muted-foreground">
        {event.meta}
      </span>
    </div>
  </:item>
</.activity>
  

Notes

Activity is a status list, not a transcript. Keep private reasoning out of the rows and show safe progress such as searches, jobs, and verification steps.
Keep the visible rows in assigns or LiveView streams. Inserted rows fade in with CSS, and the animation is disabled when reduced motion is requested.
The root list gets a default aria-label="Activity". Pass your own label only when the surrounding page needs a more specific name.
Reach for activity_item/1 only when one row needs markup that cannot fit the shared :item and :marker slots.