Config Changes Ledger Changelog Block for React

Edit CHANGES at the top of the file. A change has a key, the environment, who changed it, a UTC time as an ISO string, its old value (empty for a key that is new) and its new value. The rollback command is built from them (cfg set key old --env name, or cfg unset key --env name for a new key), so the visible command and the copied one never disagree, and the headline counts come from the list.

It puts that row's rollback command on your clipboard and says so to screen readers through a polite status line. Nothing is executed and no setting changes: "cfg" is a fictional command line.

Choosing an environment swaps the rows and a polite line says how many are showing. Every row of the full list sits unseen in the same cell, so the block keeps its height whichever environment is chosen. The Select opens with Enter, Space or the arrow keys and closes with Escape.

The old value is struck through and read as "Was"; the new one follows an arrow, is heavier and is read as "Now". A key that did not exist reads "Not set" before the arrow. No red and green.

On a phone each row stacks: the key and its details, the values and command, then the Copy button under them. Long commands wrap rather than scroll. In a right-to-left layout the arrow mirrors while keys, values and commands keep their reading order.

The header and the ledger fade up once on load, with CSS transitions. With reduced motion they are off. Choosing an environment swaps the rows at once.