Services Status Live Banner Block for React

Edit SERVICES: each entry is a name and a state (operational, degraded or down). The heading counts the operational ones, so setting one to degraded makes it "11 of 12 services operational", drops the word "All", turns the heading's dot to the warning colour and gives that one cell a warning dot. The grid is six columns wide, so a multiple of six keeps the last row full.

Twelve green dots in a row are loud and say nothing a single one doesn't. The normal state is the foreground tone, and colour is saved for what needs attention. Every cell also has the state written for screen readers after its name ("API, operational"), so the colour is never the only signal.

The block ships with typed data and no timers, so the preview is stable. To make it live, fetch your services' states after the first render and put them in state; keep the typed list as the first render so the server and the browser agree. If a service's state can change while the page is open, add a polite status line that is in the page from the start and fill it only when a state changes.

Every service's name is already visible in its cell, so a tooltip would only repeat it, and hover-only text can't be read on a phone or with a keyboard.

The matrix becomes three columns by four rows; the names are short so they fit at 320 pixels, and a longer one wraps inside its cell. The heading and the link stack when they don't fit on one row.

Yes. The cells fill from the inline start, the dots lead the names, and the arrow on the link mirrors. The counts are wrapped in bdi, so "12 of 12" keeps its order.