Timeline

1import { Timeline, TimelineItem } from '@/ui/Display'23<Timeline aria-label="Deployment history">4  {events.map((e) => (5    <TimelineItem6      key={e.id}7      icon={ICONS[e.type]}8      tone={e.failed ? 'danger' : 'success'}9      title={e.title}                     // past tense, specific10      meta={<>{e.actor} · <RelativeTime value={e.at} /></>}11      detail={e.detail}12    />13  ))}14</Timeline>1516// Both forms: relative for the glance, absolute for comparing against a log.17function RelativeTime({ value }: { value: string }) {18  const d = new Date(value)19  return (20    <time dateTime={value} title={d.toLocaleString(undefined, { timeZoneName: 'short' })}>21      {formatRelative(d)}22    </time>23  )24}2526// The connector stops at the last event. A line past the end claims there27// is more below, and the user scrolls to find nothing.28<li className="relative">29  {!isLast && <span aria-hidden className="ds-timeline__line" />}30  …31</li>3233// Group by day for long feeds — a hundred undifferentiated events is a wall.34const byDay = groupBy(events, (e) => startOfDay(e.at).toISOString())

<!-- An ordered list: the sequence IS the content. -->
<ol class="ds-timeline" aria-label="Deployment history, newest first">
  <li class="ds-timeline__event">
    <!-- Decoration. The outcome must also be in the text. -->
    <span class="ds-timeline__line" aria-hidden="true"></span>
    <span class="ds-timeline__marker" data-tone="danger" aria-hidden="true">
      <svg>…</svg>
    </span>

    <div class="ds-timeline__body">
      <p class="ds-timeline__title">Rolled back to 4019</p>
      <p class="ds-timeline__meta">
        Ada Lovelace ·
        <time datetime="2026-07-21T14:34:00Z"
              title="21 July 2026, 14:34 UTC">4 minutes ago</time>
      </p>
      <p class="ds-timeline__detail">
        Health check failed in eu-west-2 after the connection pool saturated.
      </p>
    </div>
  </li>

  <!-- No connector on the last event. -->
  <li class="ds-timeline__event ds-timeline__event--last">…</li>
</ol>

.ds-timeline { list-style: none; margin: 0; padding: 0; }

.ds-timeline__event {
  position: relative;
  display: flex;
  gap: 12px;                         /* fixed, so icon and avatar markers
                                        share one text edge */
  padding-block-end: 20px;
}

.ds-timeline__marker {
  position: relative;
  z-index: 1;                        /* above the line, so it is never crossed */
  /* Odd, so the 1px connector lands on its exact centre. At 24px the line
     sits half a pixel off and looks bent. */
  inline-size: 23px;
  block-size: 23px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid var(--ds-border);
  background: var(--ds-surface);
}

.ds-timeline__marker[data-tone='success'] {
  border-color: var(--ds-success-border);
  background: var(--ds-success-subtle);
  color: var(--ds-success-text);
}
.ds-timeline__marker[data-tone='danger'] {
  border-color: var(--ds-danger-border);
  background: var(--ds-danger-subtle);
  color: var(--ds-danger-text);
}

.ds-timeline__line {
  position: absolute;
  inset-block: 23px 0;
  inset-inline-start: 11px;          /* (23 − 1) / 2 */
  inline-size: 1px;
  background: var(--ds-border-subtle);
}

/* The connector stops here. Anything else claims more events below. */
.ds-timeline__event--last .ds-timeline__line { display: none; }
.ds-timeline__event--last { padding-block-end: 0; }

.ds-timeline__detail {
  margin-block-start: 4px;
  padding: 8px 10px;
  border: 1px solid var(--ds-border-subtle);
  border-radius: var(--radius-md);
  background: var(--ds-surface-inset);
}