Webhook Endpoints Settings Block for React

The page opens with the sheet drawn in place over the endpoint list so the preview shows it, without trapping focus or hiding the page around it. Its Cancel, its Close button and Escape (while focus is inside the stage) close it and move focus to Edit endpoint. Edit endpoint opens the real Sheet with a focus trap, Escape and focus returning to the button, from the side the page reads from. Both share one set of fields and one state, so what you did in place is there in the real one. In your app keep the Sheet and drop the in-place copy.

Edit the constants at the top: GROUPS lists the event types by group, SAVED is the endpoint as stored (its address, whether it is on and the events it listens for), SECRETS are the signing secrets a roll hands out in order, and DELIVERIES are the recent deliveries with the code the receiver answered. The group boxes, the "5 of 9 on" counts, the sentence under the heading and the failed count are all worked out from those, so nothing is typed twice.

A group's box looks at its events: ticked when all are on, empty when none are, and mixed in between. Pressing it ticks every event in the group, or, when they were all on, clears them. Each event keeps its own box, and the tree reads in a fixed order so the list never reshuffles. The sentence under the heading restates the subscription, or says that nothing is sent while the endpoint is off or has no events.

Resend marks the failed delivery as answered 200 and says it was resent in this demo, and nothing is delivered. It also shows the signature header a receiver would verify: the HMAC-SHA256 of the timestamp, a dot and the body, keyed with the current fictional signing secret, worked out in your browser by crypto.subtle only when you press the button, then shortened for the page. It needs a secure page; on a page that isn't one, the row says so instead. To make it real, resend from your server and verify the signature there with the secret that endpoint really has.

It makes the next secret from a short typed list, shows it once in monospace with a Copy button and a Hide it button, and says the old secret works for 24 hours, until the day after the page's fixed date. Closing the sheet hides it for good. Nothing is generated, stored or sent, and Save only changes the endpoint drawn behind the sheet, with a message that nothing was sent. To make it real, roll and save through your API and keep a short overlap in which both secrets verify.

On a phone the in-place sheet docks to the foot of the stage with its body scrolling and Save pinned; the real sheet keeps the library's own phone layout. The URL field and its message share one reserved slot, so an error never moves the tree. Every box is named by its event, the switch by what it does, the status badges say delivered or failed in words, and a polite live region present from the start says what changed.