Access Token Hygiene Settings Block for React

Edit TOKENS at the top of the file: each token has an id, a name, its scopes, the day it was made, the day it last signed a request (empty when it never has) and the day it ends (empty when it never does). AS_OF is the day every age is measured from, and RISKS, UNUSED_DAYS and SOON_DAYS set the four checks. Every count, badge and sentence is worked out from those, so nothing is typed twice. In your app replace AS_OF with today's date.

A token never expires when it has no end date. It is unused when 90 days or more have passed since it last signed a request, or since it was made if it never has. It has the admin scope when any scope starts with admin. It ends soon when its end date is within 14 days of AS_OF. These are small pure functions of the typed dates, so setting an end date on a token or restoring a revoked one changes the strip, the table and the heading count straight away. A revoked token carries no risk.

Everything. Choosing an end date, revoking and restoring only change the list in this page, and the status line and the dialog say so. To make them real, send the new end date or the revoke request from the handlers (expire, confirm and restore) to your API and update the list from the response, showing the failure in the same status line. Creating a token and showing its secret once is a different screen, and is not part of this panel.

It dims the tokens that carry no risk instead of hiding them, so the table never changes height and a token you are about to fix doesn't jump away when you fix it. The status line says how many need attention and that the rest are dimmed, and dimmed rows keep their text at a readable contrast. When every risk has been fixed the heading reads that all the tokens are in good shape.

Revoke is a destructive button that is always on the page: with nothing ticked it stays in place, says so in the status line when pressed, and opens nothing. With tokens ticked it opens an alert dialog that lists them by name and scope, takes focus on Keep them, and does not close when you click outside it. Escape and Keep them close it with focus back on Revoke. Confirming marks the tokens as revoked in the list and clears the selection.

Below the medium breakpoint the table becomes one card per token with the same checkbox, badges and end-date menu, and the Revoke bar sticks to the bottom of the screen while you scroll. On a larger screen the table has a caption, column headers and a row header per token, the checkbox in each row is named for its token and described by its scopes, and the menu in the Expires cell is named for the token too ("End date for CI deploy"). The status line is a polite live region that is present from the start. On Base UI the mixed state is the checkbox's indeterminate prop.