Blocks are full views: install one and you have a working customer webhook dashboard. Data flows in through @repost/portal-react hooks at the top of the block file and down into presentational components as props. The wiring is code in your repo. Swap any part.
pnpm dlx shadcn@latest add @repost/webhook-dashboard
import { WebhookDashboard } from "@/components/webhook-dashboard";
export function WebhooksPage() {
return <WebhookDashboard getToken={getToken} />;
}getToken returns a portal access token from your token endpoint. Everything else is handled inside: refresh, caching, the live websocket feed.
The blocks#
| Block | Ships |
|---|---|
@repost/webhook-dashboard | Headline metrics with sparklines, the delivered/failed histogram, live delivery history, and per-delivery attempt detail. |
@repost/endpoint-management | Endpoint list with status and DLQ badges, create/edit form, pause/resume/delete, signing-secret reveal. |
@repost/webhook-dlq | The dead-letter queue with a count badge and one-click replay. |
@repost/event-catalog | Browsable event types with schema-derived sample payloads and signed test sends to an endpoint. |
All four respect read-only sessions: mint the token with readOnly: true and write affordances disable server-side, secrets stay hidden.
Options#
Each block takes a small prop surface, for example the dashboard:
<WebhookDashboard
getToken={getToken}
endpointId="ep_..." // narrow to one endpoint
historyWindowDays={90} // history window, defaults to 90
/>Because the block is a file in your repo, anything beyond props is an edit away: reorder the sections, drop the histogram, wrap the table in your own card.