Team activityPro

An activity feed of prompts, runs and approvals across a team that never jumps while you read it.

Markdown

On this page

ProThe team's last day: runs and approvals arrive and wait behind a count while you read.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/team-activity

Usage

tsx

import { TeamActivity } from "@/components/ui/chatcn/pro/team-activity"

<TeamActivity
  events={[
    { id: "1", actor: ledger, kind: "run", verb: "ran", object: "Duplicate charge sweep", status: "done", detail: "1 m 48 s", at: Date.now() },
    { id: "2", actor: quill, kind: "approval", verb: "asked to send", object: "Refund email", status: "waiting", waitingOn: "Saoirse", at: earlier },
  ]}
/>

Each event is one sentence (who, the verb, and the thing in ink with a small kind glyph) with its status in words and a mark beside it: running in blue with a spinner, failed in red, waiting in amber with who it waits on. Events group by day with sticky headers and filter by kind. New events never shove the list while someone reads: if the list is scrolled or the pointer rests inside, they wait behind a count at the top until you click it or come back to the top. Pass now for stable server rendering of Today and Yesterday.

Examples

States

ProApprovals only, nothing yet, a filter with nothing, loading and error.

Props

Prop	Type	Notes
`events`	`{ id, actor, kind, verb, object, detail?, status?, waitingOn?, at, onSelect? }[]`	Newest first. `kind`: `prompt`, `run`, `approval`, `comment`, `handoff`
`filter`, `defaultFilter`, `onFilterChange`	`"all" \| "prompt" \| "run" \| "approval"`	Default `all`
`filters`	`boolean`	Show the filter row. Default true
`now`, `locale`	`Date`, `string`	Day grouping and times
`maxHeight`	`number \| string`	Default 420
`loading`, `error`, `onRetry`		States
`labels`	`Partial<TeamActivityLabels>`	Every string, plus `day(date, now, locale)`

Labels

labels covers the title, filters, the new count, empty and filtered empty, the error and Retry, every status word, waitingOn(who), the agent tag and day(date, now, locale) for the group headers.

Keyboard

Key	Action
Tab	Filters, the new count, then rows that have `onSelect`
Enter or Space	Toggle a filter or open a row

Accessibility

Filters are toggle buttons with aria-pressed.
The held count is announced politely.
Status is always in words next to its mark.

Motion

New rows slide down 4 px and fade in over 200 ms; the count drops in the same way. Reduced motion keeps the fades.