Services Status Error Block for React

No. The six services are typed at the top of the file in SERVICES, and Refresh status waits 600 ms and reports "no change", so a viewer can run it as often as they like. To wire it, fetch your status API (or monitoring provider) in the handler where the code says so, replace SERVICES and the checked time with what it returns, keep the busy state until it answers, and say what changed in the status line. The summary, the counts and the filter are all computed from the list, so they follow.

No. Behind the visible list sits an unseen copy of every row that holds the height, so switching the filter never moves the panel or the page below it. The hidden services are counted in a line under the list ("3 operational services hidden"), and a polite status message says how many services are shown.

Each state has a shape and a word: a solid square and "Operational", an outline triangle and "Degraded", a cross and "Down". The words get heavier as the news gets worse, from muted to medium to semibold. The one color on the panel is the status token on the summary icon, and the words next to it say the same thing, so the page reads the same in grayscale, in dark mode and for people who can't tell red from green.

It shows a spinner for a moment, keeps its size so nothing shifts, then moves focus to the status line, which says "Checked again at 14:05 UTC: no change" and that a real check would ask your status API. The button disables itself while it waits, which drops keyboard focus, so focus goes to the result instead of to the page.

Tab reaches Refresh status, the toggle, the status line's two links in order. The toggle is a group of two named buttons, one pressed at a time. The toggle group moves with the arrow keys and follows the page's direction. Each row is a list item that reads its name, what it covers and its state as one line, and the status line is a polite live region.

Only say what you know. The panel shows what is down and when it last checked, and leaves "our team is working on it" for a status page that a person updates. Link yours where the code has href="#", and return a real 503 from the server for the page this panel sits on, so browsers and search engines don't treat the outage as content.