Environment Promotion Ladder Changelog Block for Radix UI

Edit STAGES at the top of the file. A stage has a name, the version it runs, its rollout percentage, the minutes it has run that version and a list of gates, each a name, a note and whether it passed. The headline, the "3 of 4 gates passed" triggers, the sentences under the names and the times ("1 d 4 h") are computed from that data.

Because v7.3.0 has not been promoted there yet. Production keeps running v7.2.4 at 100%, and its gates are the checks that v7.3.0 still has to pass, so its sentence reads "v7.3.0 waits on 2 checks". A stage is called promoted only when it runs the newest version at 100% with every gate passed.

Each row's trigger is a button with the count of passed gates; Enter or Space opens its list, and any number of rows can be open together. A closed list is inert, so its contents are out of reach of the keyboard on every library. Nothing is promoted: the block only shows state.

By shape and word: a filled square with a check for a promoted stage, a half-filled square for one rolling out, an empty square for one that waits; a check or a clock and the word "Passed" or "Waiting" for each gate. All of it is in the foreground colour.

On a phone the version and the time share a line under the name, the bar and the trigger follow, and the gates open under the row. In a right-to-left layout the rung line, the half-filled square and the bars mirror while versions and times keep their reading order.

The header and the ladder fade up once on load, with CSS transitions; the chevron turns when a row opens. With reduced motion they are off.