Live Status Grid Stats Block for React

Each service has a resting latency and a span. A shared script of twenty steps is added to the base, in units of that span, and the cell shows a window of twelve. Every two seconds the window drops the oldest step and takes the next, eight times, then holds. The first reading is the one rendered on the server, so the markup does not change until the block is on screen. Edit SERVICES, WOBBLE, WINDOW and THRESHOLD to use your own series. There is no socket in the demo.

The ghost Button at the end of the header pauses and resumes. While it can still run, the button is pressed when the feed is paused. Once the script has held, or when motion is reduced, the button stays but does nothing, and its name says the reading is held or still, so it never pretends there is more to play. The choice stays in the page.

A cell is slow when its latest reading is at or above 120 ms. In this script only Object store crosses that line, on every sample, so the headline can name it without going stale. The mark is a Status warning plus the word Slow. The other cells stay in the text colour. The bars are each scaled to that cell's own window, and the newest bar is drawn at full weight.

The word next to the dot (Live, Paused, Held or Still) is a polite live region. It changes when you pause, when the script holds, or when reduced motion keeps the first reading. It does not announce each new latency. The sample count beside it updates in silence. Each cell also has a hidden line with the name, the current latency, the low and the high of its window, and the word slow when it applies. The bars themselves are decorative.

The block stays on the opening reading, the dot does not ping, and the word reads Still. The pause control does not start the script. With motion allowed, the dot sends one ring per sample and the bars ease to their new height. Nothing loops.

Two columns, with the last cell spanning the row so the hairlines never leave a hole. From the md breakpoint it is three by three and that cell spans one. The header stacks, with the live control under the sentence. Only the header fades in. The band ends the block, so there is no rule under the grid for the next section to double.