KQ-1746 · WEBHOOK/REPLAY

Webhook Replay

A webhook endpoint's delivery log where a failed delivery can be sent again. Replay sends a pulse along its row — a comet riding one motion value for 520 ms on the move ease, from the event name, under the columns, to the status chip — and if the answer is not back the head breathes at the chip until it is; then the chip flips about its horizontal axis, out on the exit ease and in on springs.snap with a soft success ring, or still failing, in on springs.flick to the new error code with the new response under the event. Rows open with Enter to the payload, headers and response at their measured height on springs.glide, Up and Down walk the rows, R replays, and the endpoint can be paused and its signing secret revealed or rotated.

KQ-1746 · WEBHOOK/REPLAY

Webhooks

Coldbrook · 2 endpoints

POSThooks.coldbrook.dev/v2/ordersActive

order.created
order.paid
order.refunded

whsec_••••••••3f9a

{
  "id": "evt_51c0",
  "type": "order.paid",
  "created": "2026-10-19T14:28:00Z",
  "data": {
    "order": {
      "id": "CB-10482",
      "state": "paid",
      "total": 4820,
      "currency": "GBP",
      "items": 3,
      "customer": "cus_dx1q"
    }
  }
}

{
  "id": "evt_51e5",
  "type": "order.created",
  "created": "2026-10-19T14:26:00Z",
  "data": {
    "order": {
      "id": "CB-10483",
      "state": "open",
      "total": 1260,
      "currency": "GBP",
      "items": 1,
      "customer": "cus_e35p"
    }
  }
}

{
  "id": "evt_520a",
  "type": "order.paid",
  "created": "2026-10-19T14:21:00Z",
  "data": {
    "order": {
      "id": "CB-10479",
      "state": "paid",
      "total": 9350,
      "currency": "GBP",
      "items": 6,
      "customer": "cus_dept"
    }
  }
}

{
  "id": "evt_522f",
  "type": "order.refunded",
  "created": "2026-10-19T14:16:00Z",
  "data": {
    "order": {
      "id": "CB-10471",
      "state": "refunded",
      "total": 2400,
      "currency": "GBP",
      "items": 2,
      "customer": "cus_c1u1",
      "reason": "damaged"
    }
  }
}

{
  "id": "evt_5254",
  "type": "order.created",
  "created": "2026-10-19T14:09:00Z",
  "data": {
    "order": {
      "id": "CB-10477",
      "state": "open",
      "total": 3190,
      "currency": "GBP",
      "items": 2,
      "customer": "cus_d2hv",
      "sku": "FW-BKT-12"
    }
  }
}

{
  "id": "evt_5279",
  "type": "order.paid",
  "created": "2026-10-19T13:57:00Z",
  "data": {
    "order": {
      "id": "CB-10474",
      "state": "paid",
      "total": 640,
      "currency": "GBP",
      "items": 1,
      "customer": "cus_ck5y"
    }
  }
}

{
  "id": "evt_529e",
  "type": "order.created",
  "created": "2026-10-19T13:42:00Z",
  "data": {
    "order": {
      "id": "CB-10475",
      "state": "open",
      "total": 5120,
      "currency": "GBP",
      "items": 4,
      "customer": "cus_cq9x"
    }
  }
}

{
  "id": "evt_52c3",
  "type": "order.created",
  "created": "2026-10-19T13:28:00Z",
  "data": {
    "order": {
      "id": "CB-10474",
      "state": "open",
      "total": 640,
      "currency": "GBP",
      "items": 1,
      "customer": "cus_ck5y"
    }
  }
}

{
  "id": "evt_52e8",
  "type": "order.paid",
  "created": "2026-10-19T12:32:00Z",
  "data": {
    "order": {
      "id": "CB-10468",
      "state": "paid",
      "total": 7710,
      "currency": "GBP",
      "items": 5,
      "customer": "cus_bji4"
    }
  }
}

9 deliveries · 3 failed

Open it on the Canvas stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/webhook-replay

Props

chipStyle: "pill" | "tag" | "dot"; default "pill"; How each status code is drawn: a tinted pill, a square tag with a leading bar, or a dot and the bare code.
payloadTheme: "plain" | "tinted" | "night"; default "tinted"; How payloads, headers and responses are coloured: one ink, tinted tokens, or a dark code panel in both themes.
density: "compact" | "regular" | "roomy"; default "regular"; Row height and type in the log.
endpoints: WebhookEndpoint[]; default defaultWebhookEndpoints; Each { id, name, url (no scheme), events, secret, paused? }.
deliveries / defaultDeliveries: WebhookDelivery[]; default — / defaultWebhookDeliveries; Most recent first: { id, endpoint, event, status, duration, attempt, at, payload, response?, replayAs? }; controlled or initial.
onDeliveriesChange: (deliveries) => void; default —; Fires with every delivery after a replay lands or a test event is sent.
endpoint / defaultEndpoint: string; default — / the first; The endpoint shown, by id; controlled or initial.
onEndpointChange: (id) => void; default —; Fires from the tab press or arrow key that chose another endpoint.
onReplay: (delivery) => WebhookReplayResult | Promise<WebhookReplayResult> | void; default —; Replay was pressed. Return { status, duration, body? } or a promise of it; return nothing and the delivery's replayAs answers. A rejected promise reads as no answer.
onPause: (endpoint, paused) => void; default —; Pause or Resume was pressed.
onRotateSecret: (endpoint) => string | void; default —; Rotate was confirmed. Return the new secret, or nothing for a generated one.
onSendTest: (endpoint) => void; default —; Send test event was pressed on an empty log; a test delivery is added and lands with its own pulse.
now: number; default defaultWebhookNow; The current time in ms; delivery times are read against it. Never read from the clock.
status: "ready" | "loading" | "error"; default "ready"; Loading shows placeholder rows; error explains and offers Try again.
onRetry: () => void; default —; Try again was pressed after the log failed to load.
title: string; default "Webhooks"; The heading.
height: number; default 540; Height of the surface in px; the log scrolls inside it.
disabled: boolean; default false; Read only: nothing can be replayed, paused or rotated.
className: string; default —; Classes for the surface.

Prop	Type	Default	Description
chipStyle	"pill" \| "tag" \| "dot"	"pill"	How each status code is drawn: a tinted pill, a square tag with a leading bar, or a dot and the bare code.
payloadTheme	"plain" \| "tinted" \| "night"	"tinted"	How payloads, headers and responses are coloured: one ink, tinted tokens, or a dark code panel in both themes.
density	"compact" \| "regular" \| "roomy"	"regular"	Row height and type in the log.
endpoints	WebhookEndpoint[]	defaultWebhookEndpoints	Each { id, name, url (no scheme), events, secret, paused? }.
deliveries / defaultDeliveries	WebhookDelivery[]	— / defaultWebhookDeliveries	Most recent first: { id, endpoint, event, status, duration, attempt, at, payload, response?, replayAs? }; controlled or initial.
onDeliveriesChange	(deliveries) => void	—	Fires with every delivery after a replay lands or a test event is sent.
endpoint / defaultEndpoint	string	— / the first	The endpoint shown, by id; controlled or initial.
onEndpointChange	(id) => void	—	Fires from the tab press or arrow key that chose another endpoint.
onReplay	(delivery) => WebhookReplayResult \| Promise<WebhookReplayResult> \| void	—	Replay was pressed. Return { status, duration, body? } or a promise of it; return nothing and the delivery's replayAs answers. A rejected promise reads as no answer.
onPause	(endpoint, paused) => void	—	Pause or Resume was pressed.
onRotateSecret	(endpoint) => string \| void	—	Rotate was confirmed. Return the new secret, or nothing for a generated one.
onSendTest	(endpoint) => void	—	Send test event was pressed on an empty log; a test delivery is added and lands with its own pulse.
now	number	defaultWebhookNow	The current time in ms; delivery times are read against it. Never read from the clock.
status	"ready" \| "loading" \| "error"	"ready"	Loading shows placeholder rows; error explains and offers Try again.
onRetry	() => void	—	Try again was pressed after the log failed to load.
title	string	"Webhooks"	The heading.
height	number	540	Height of the surface in px; the log scrolls inside it.
disabled	boolean	false	Read only: nothing can be replayed, paused or rotated.
className	string	—	Classes for the surface.