Integration Sync Live Banner Block for React

Edit INTEGRATIONS (an id and a name each) and FAILED, the id of the one that starts disconnected. The count in the heading is worked out from the chips' states, so adding a fifth chip makes it "3 of 5" with no other change. To start with every connector healthy, set the initial state to "up" and the Reconnect button never shows.

It simulates a reconnect: the chip goes to "reconnecting" for 1.6 seconds, then to connected. To make it real, call your connector's reconnect endpoint in the handler, set the state to retrying, and set it to up when the request succeeds (or back to down, with a message, when it fails).

While reconnecting, the button stays in the page and focusable, marked aria-disabled and ignoring presses, so focus is not lost. When the connector is back the button is removed, and focus moves to a visually hidden line, "Chatwire reconnected. All 4 integrations are syncing.", at the end of the block, which screen readers read out; the next Tab continues from there.

A polite status line that is in the page from the start says "Reconnecting Chatwire." when the button is pressed. Each chip's dot is decorative, so its state is also written for screen readers after the name: "Chatwire, disconnected". The heading is the section's name and carries the count.

The three sub-lines (stopped, reconnecting, back) share one grid cell and the two that aren't showing are invisible and hidden from assistive technology, so the cell keeps the tallest height. The button's two labels share a cell too, so the chip doesn't change width.

The chips wrap onto as many rows as they need under the header, each with its button beside it. Nothing scrolls sideways at 320 pixels, and in a right-to-left layout the chips and the dots mirror.