ds
Components
Activity feed

Activity feed

Who did what and when, grouped by day.

Today
Priya Kulkarni merged #412 Retry S3 reads with backoff into main
9f3c2e1+48 −12

14:32
orders-api v2.14.0 deployed to production by the pipeline
14:40
Sameer Khan commented on INC-231
The role lost s3:GetObject when the bucket policy was replaced at 09:02. Restored it, runs are green again.

09:47
load_orders failed 3 times in a row. See runs
09:15
Yesterday
dana@contractor.io was invited as Viewer by Priya
17:05
API key ci-deploy was rotated
11:20
customers_daily backfill finished, 665 partitions in 41 minutes
08:02

Show code

<ol class="feed">
  <li class="feed-day">Today</li>
  <li class="ev"><span class="avatar t-teal" aria-hidden="true">PK</span>
    <div class="ev-body"><b>Priya Kulkarni</b> merged <a href="#">#412 Retry S3 reads with backoff</a> into <code>main</code>
      <div class="ev-att"><span class="chip"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="3"/><line x1="3" x2="9" y1="12" y2="12"/><line x1="15" x2="21" y1="12" y2="12"/></svg>9f3c2e1</span><span class="chip">+48 −12</span></div>
    </div><time datetime="2026-10-12T14:32">14:32</time></li>
  <li class="ev"><span class="ev-ico accent"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 13v8"/><path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"/><path d="m8 17 4-4 4 4"/></svg></span>
    <div class="ev-body"><b>orders-api v2.14.0</b> deployed to <b>production</b> by the pipeline</div><time datetime="2026-10-12T14:40">14:40</time></li>
  <li class="ev"><span class="avatar t-amber" aria-hidden="true">SK</span>
    <div class="ev-body"><b>Sameer Khan</b> commented on <a href="#">INC-231</a>
      <p class="ev-quote">The role lost s3:GetObject when the bucket policy was replaced at 09:02. Restored it, runs are green again.</p>
    </div><time datetime="2026-10-12T09:47">09:47</time></li>
  <li class="ev"><span class="ev-ico down"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg></span>
    <div class="ev-body"><b>load_orders</b> failed 3 times in a row. <a href="#">See runs</a></div><time datetime="2026-10-12T09:15">09:15</time></li>
  <li class="feed-day">Yesterday</li>
  <li class="ev quiet"><span class="ev-ico"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" x2="19" y1="8" y2="14"/><line x1="22" x2="16" y1="11" y2="11"/></svg></span>
    <div class="ev-body"><b>dana@contractor.io</b> was invited as Viewer by Priya</div><time datetime="2026-10-11T17:05">17:05</time></li>
  <li class="ev quiet"><span class="ev-ico"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><path d="M2.586 17.414A2 2 0 0 0 2 18.828V21a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h1a1 1 0 0 0 1-1v-1a1 1 0 0 1 1-1h.172a2 2 0 0 0 1.414-.586l.814-.814a6.5 6.5 0 1 0-4-4z"/><circle cx="16.5" cy="7.5" r=".5" fill="currentColor"/></svg></span>
    <div class="ev-body">API key <b>ci-deploy</b> was rotated</div><time datetime="2026-10-11T11:20">11:20</time></li>
  <li class="ev"><span class="ev-ico ok"><svg class="i" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg></span>
    <div class="ev-body"><b>customers_daily</b> backfill finished, 665 partitions in 41 minutes</div><time datetime="2026-10-11T08:02">08:02</time></li>
</ol>

What happened, newest first, grouped under day headings in mono. People get their avatar; the system gets an icon in a ring, coloured only when the event is about health or a deploy. A rail joins events within a day and stops at the last one. Quieter system events, like invites and key rotations, use .quiet: smaller, muted, no ring.

Each event is one sentence that starts with who: "Priya merged #412 into main". Commit hashes, diffs and branches are chips under it; a comment is quoted in a bordered box. The time is mono on the right in local time, with the full timestamp in datetime.

API

Class	On	What it does
`.feed`	ol	The list.
`.feed-day`	li	A day heading.
`.ev`	li	An event: an .avatar or .ev-ico, an .ev-body, a <time>.
`.ev-ico`	span	A ringed icon for system events. `.ok`, `.down`, `.accent`.
`.ev-body`	div	The sentence. <b> for actors and objects, links for things you can open.
`.ev-att`	div	Chips under the sentence: commits, branches, sizes.
`.ev-quote`	p	A quoted comment.
`.quiet`	.ev	A quieter system event.

Group repeated events: "Priya pushed 6 commits".
Link every object to its page.
Relative days, exact times.

Don't

Status colours for ordinary events.
Infinite scroll without a date to jump to.
Passive sentences that hide who did it.

Accessibility

Use an ordered list and a real time element. Hide avatars from screen readers when the name is in the sentence.
If new events arrive live, announce a count ("2 new events") instead of reading each one.