Build Pipeline Matrix Changelog Block for React

Edit RUNS at the top of the file. A run is a number, a branch, a short commit, a trigger and one outcome per stage, written with the small pass, fail and skip helpers (a stage and its seconds). The headline, each run's total, the median times and the failure counts are all computed from the list. Give a failing run its errors lines and its "Failed at Test" row appears under it by itself.

A status colour should mean a real failure, so only the failed cell takes one, with the word "Failed" beside it. Every other result is a shape and a word in the foreground colour: a check and "Passed", a dash and "Skipped". In a greyscale or high-contrast theme nothing is lost.

It tints one stage's column in every row and rewrites the line under the table: the median time of that stage, and in how many of the runs that reached it, it failed. Choosing "All" gives the pass count and the median run. It changes only this block; the table keeps its height and nothing is re-run.

Yes: a native table with a caption, scope on every header, the run number as the row header and tabular numbers. The scroll region around it has a name and takes focus, so a keyboard user can reach the columns that sit past the edge. The error lines sit in their own focusable region too.

Below lg the table scrolls sideways inside its region and the run number stays pinned at the start, so every row keeps its stage results. In a right-to-left layout the table mirrors while run numbers, branches, commits and times stay in reading order.

The header and the table fade up once on load, with CSS transitions. With reduced motion they are off and the block simply appears. Choosing a stage tints the column at once.