shadcn.io is not affiliated with official shadcn/ui
Webhook Console Command Menu Block for Svelte
A webhook console's command menu shown open over the Webhooks page: five endpoints with a state word, a test event select, and a delivery log under the list that gains a row each time you send one.
Installation
Overview
Send a test event and watch the delivery land with this webhook command menu for Svelte with Ark UI. It opens from the Webhooks page in Pingvale, a webhook console, whose header holds an outline field with its ⌘ K cap, and the page is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The menu is the catalog Command with a Test event select above the list and a delivery log under it: five endpoints, each with its URL, the events it listens to and a state word, Active, Failing or Paused. Enter sends the chosen event to the highlighted endpoint and a row appears at the top of the log with the time, the event, the endpoint, the response code, 200 or 500 as set for that endpoint, and a fixed duration. The log holds five rows, three on a phone, at a fixed height and is a polite live region, and the page behind the menu counts the deliveries. For the preview the menu is drawn open in place when the page loads; the field, or Ctrl or ⌘ K while focus is in the block, opens the real command dialog with the same endpoints and log. For webhook consoles, integration settings and any list you test from the keyboard.
FAQ
Why is the menu already open, and what do I keep?
So you can see it without a click. On load the menu is the Command drawn inline over a picture of the Webhooks page, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette and share the block's state, so a delivery row in the copy is still there in the dialog. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.
How does the delivery log behave?
Each send adds a delivery to the front of a list, with a number that drives its fixed clock, starting at 09:41:07 and five seconds apart. The log shows the newest five (three on a phone) in a box of fixed height, so a new row never moves the list above it, and an empty log says what to do. It is an ordered list marked aria-live="polite", so a screen reader hears each delivery as it arrives.
Why does each endpoint always answer the same?
The response code and the duration belong to the endpoint as data: Audit sink is Failing and always answers 500 after about three seconds, the others answer 200, and Search reindex is Paused and is skipped in words. A demo that picked codes at random would show a different page on every load. The test event itself is the select's choice and is sent whether or not the endpoint lists it, as a test would be.
What stays local, and how do I wire it?
All of it. Nothing leaves the page and the status line says so. In your app replace the body of pick with a call to your test-delivery endpoint and prepend its real result, code and duration to the log; the log component needs no change.
What does a phone show?
The menu docks to the top of the stage, the endpoint name and the duration in the log are dropped and the log shows its newest three rows. The Test event select stays above the list at full width.
Is it accessible from the keyboard?
Type to filter by name, URL or event, the arrow keys move through the rows, Enter sends the test event and Escape closes the menu with focus back on the header's field; Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The Test event select is a native select above the list. The rows are options of a combobox and the first is highlighted when it opens.