Components · Lists
What just happened across a team — the recent-activity timeline that sits in the dashboard rail and every entity's history tab. A single connector rail threads down through actor medallions — a tinted avatar for a person, an icon for a system event — and each item reads as an actor + action line with an inline entity link, an optional one-line detail, and a right-aligned relative time. The medallion tone carries the event kind (a join is accent, an approval good, a flag warn, a post neutral); the rail runs between items and stops at the last one.
One rail runs behind the medallions (each ringed 3px in the surface so the line tucks under it) and stops at the last item. Actor medallions are tinted avatars — accent join · good approval · warn flag · neutral post — and the closing system event swaps the avatar for a refresh icon. The Hannah Weiss link is pinned :hover; hover / tab the rest live. Times sit right, tabular-nums, faint.
1px --rule line centred under each 34px node, from the medallion's foot to the next item; display:none on :last-child so the timeline terminates cleanly rather than trailing into space.3px surface ring so the rail passes behind it. A tinted Avatar (initials) for a person-actor, a lucide icon for a system event; tone maps to the event kind.approved …, joined …, posted in …). The current user reads as You with an accent medallion.text-xs faint — carrying the payload (role · area, event time, a quoted snippet). Truncates; omit it for a bare one-line event.font-[540] faint, tabular-nums — 8m ago / 1h ago / Yesterday. Coarsens with age; a title can carry the absolute timestamp.Source · @phauna/ds Timeline (rail + medallion, from ds/surface) · ds/political/CampaignStatusCard.tsx recent-activity list · Avatar (tinted initials) · Badge tones · --color-rule from globals.css.