Deployment Log Tabs Changelog Block for React

Edit DEPLOYS at the top of the file. A deploy has an environment (one of the three constants), a short commit, a message, who deployed it with their initials, the seconds it took, a UTC start time written as an ISO string ("2026-03-28T14:02") and, for a failure, the stage it stopped at. The tab counts, the headline, the bars and the dates are computed from the list; the dates are spelled out by a small helper so they read the same on the server and in every browser.

Each tab shows only its own rows, and a copy of the All panel sits unseen in the same grid cell, so the frame is always as tall as the longest tab. Arrow keys move between tabs and the panel follows.

It puts the commit hash on your clipboard and says so to screen readers through a polite status line. It does not link to a repository or run anything.

A status colour should mean a real failure, so only the failed deploy takes one, beside "Failed at Test". Everything else is a check or a word in the foreground colour, so the table reads the same in greyscale.

On a phone the environment, the commit and the time move under the message and the duration drops, so each row keeps its message and its status without scrolling sideways. In a right-to-left layout the table mirrors while hashes, times and counts keep their reading order.

The header and the table fade up once on load, with CSS transitions. With reduced motion they are off. Switching tabs swaps the rows at once.