Server Error Incident Card Block for React

Nothing leaves the page. Each press shows a spinner on the button for under a second, then the Retries row reads "1 retry, the last at 14:03 UTC: still failing", and the status line says the same politely; the clock times follow a fixed back-off from a typed start (14:03, 14:05, 14:08, then 14:12 and on), so the card reads the same on the server and in every browser, and nothing here reads the current time. To wire it for real, re-run the failed request where the code says so, keep the busy state until it answers, and replace the card with the loaded bookings when it succeeds.

Because a page that forces a dark scope ignores the visitor's choice and looks like a different product when the rest of the app is light. The slug keeps its name so existing links work, but the card uses theme tokens only, so it is dark in a dark theme and light in a light one.

It lets a visitor quote one exact failure to support, and lets you find it in your logs. REQUEST_ID is a typed constant here; generate one per request in your app, return it in a response header and print it where you log the error. The Copy Button writes the real text to the clipboard and announces "Copied".

The card is a real list of terms and values, so a screen reader reads "Error, 500 Internal server error" and so on. The error's meaning is in the words, never only the red dot, which is decoration. Tab runs Copy, the status link and Retry the request, each with a visible focus ring; after a retry, focus moves to the status line so the result is read out.

The retries line and the status line each keep room for their longest text, so a retry changes words, not boxes. Nothing here grows or shrinks, on a phone or a desktop.

It's a plain link to #: point it at your status page. The block never calls history.back() and never navigates on its own.