{
  "name": "WebhookConsole",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/WebhookConsole.tsx",
  "chapterTag": "24 Integrations",
  "chapter": "24-integrations.html",
  "sectionId": "webhook-console",
  "elName": "Six deliveries — mixed status (200 / 200 / 200 / 429 / 500 / 204)",
  "demoUrl": "https://brand.magicblocks.ai/components/24-integrations#webhook-console",
  "hasLiveDemo": false,
  "description": "A mono-font table of recent webhook deliveries — timestamp / endpoint /\nevent / status / duration. Status codes are colour-coded by first digit\n(`2xx` → success, `4xx` → warning, `5xx` → error) so a glance reads the\nhealth of the queue without parsing every row.",
  "useClient": true,
  "interactivity": "interactive",
  "namedExports": [
    {
      "name": "WebhookConsole",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "WebhookConsoleProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "WebhookDelivery",
      "isPrincipal": false,
      "isType": false
    }
  ],
  "importStatement": "import { WebhookConsole } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "deliveries",
      "optional": false,
      "type": "WebhookDelivery[]",
      "doc": "Recent webhook deliveries, newest-first. Each row renders as a five-column grid (timestamp / endpoint / event / status / duration); the rows are independent so consumers can virtualise the list at their own level when there are hundreds."
    },
    {
      "name": "onDeliveryClick",
      "optional": true,
      "type": "(id: string) => void",
      "doc": "Fires when a row is clicked. When wired, each row renders as a `<button>`; when omitted, rows render as `<div>` so the console reads as a read-only log."
    },
    {
      "name": "className",
      "optional": true,
      "type": "string",
      "doc": ""
    }
  ],
  "classesUsed": [
    "row",
    "webhook-console",
    "webhook-console-duration",
    "webhook-console-endpoint",
    "webhook-console-event",
    "webhook-console-row",
    "webhook-console-status",
    "webhook-console-timestamp"
  ],
  "examples": {
    "react": "<WebhookConsole\n  deliveries={[\n    { id: \"d1\", timestamp: \"10:34:12\", endpoint: \"POST /webhooks/slack\",\n      eventType: \"lead.created\", statusCode: 200, durationMs: 142 },\n    { id: \"d2\", timestamp: \"10:31:54\", endpoint: \"POST /webhooks/stripe\",\n      eventType: \"payment.succeeded\", statusCode: 200, durationMs: 89 },\n  ]}\n  onDeliveryClick={(id) => openDeliveryDetail(id)}\n/>",
    "html": "<div class=\"webhook-console\">\n  <div class=\"webhook-console-row is-header\" role=\"row\">\n    <span class=\"webhook-console-timestamp\">Time</span>\n    <span class=\"webhook-console-endpoint\">Endpoint</span>\n    <span class=\"webhook-console-event\">Event</span>\n    <span class=\"webhook-console-status\">Status</span>\n    <span class=\"webhook-console-duration\">Duration</span>\n  </div>\n  <div class=\"webhook-console-row\">\n    <span class=\"webhook-console-timestamp\">10:34:12</span>\n    <span class=\"webhook-console-endpoint\">POST /webhooks/slack</span>\n    <span class=\"webhook-console-event\">lead.created</span>\n    <span class=\"webhook-console-status is-2xx\">200</span>\n    <span class=\"webhook-console-duration\">142ms</span>\n  </div>\n  <div class=\"webhook-console-row\">\n    <span class=\"webhook-console-timestamp\">10:31:54</span>\n    <span class=\"webhook-console-endpoint\">POST /webhooks/stripe</span>\n    <span class=\"webhook-console-event\">payment.succeeded</span>\n    <span class=\"webhook-console-status is-2xx\">200</span>\n    <span class=\"webhook-console-duration\">89ms</span>\n  </div>\n  <div class=\"webhook-console-row\">\n    <span class=\"webhook-console-timestamp\">10:28:22</span>\n    <span class=\"webhook-console-endpoint\">POST /webhooks/zapier</span>\n    <span class=\"webhook-console-event\">task.completed</span>\n    <span class=\"webhook-console-status is-2xx\">200</span>\n    <span class=\"webhook-console-duration\">234ms</span>\n  </div>\n  <div class=\"webhook-console-row\">\n    <span class=\"webhook-console-timestamp\">10:24:08</span>\n    <span class=\"webhook-console-endpoint\">POST /webhooks/zapier</span>\n    <span class=\"webhook-console-event\">task.completed</span>\n    <span class=\"webhook-console-status is-4xx\">429</span>\n    <span class=\"webhook-console-duration\">0ms</span>\n  </div>\n  <div class=\"webhook-console-row\">\n    <span class=\"webhook-console-timestamp\">10:18:43</span>\n    <span class=\"webhook-console-endpoint\">POST /webhooks/slack</span>\n    <span class=\"webhook-console-event\">message.received</span>\n    <span class=\"webhook-console-status is-5xx\">500</span>\n    <span class=\"webhook-console-duration\">5012ms</span>\n  </div>\n  <div class=\"webhook-console-row\">\n    <span class=\"webhook-console-timestamp\">10:12:01</span>\n    <span class=\"webhook-console-endpoint\">POST /webhooks/notion</span>\n    <span class=\"webhook-console-event\">page.updated</span>\n    <span class=\"webhook-console-status is-2xx\">204</span>\n    <span class=\"webhook-console-duration\">67ms</span>\n  </div>\n</div>",
    "css": ".row { display: flex; gap: var(--s-4); flex-wrap: wrap; align-items: center; }\n\n.webhook-console {\n  background: var(--bg-paper);\n  border: 1px solid var(--hair);\n  border-radius: var(--r-md);\n  overflow: hidden;\n}\n\n.webhook-console-duration { color: var(--fg-dim); }\n\n.webhook-console-endpoint { color: var(--fg); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n\n.webhook-console-event { color: var(--accent-text); }\n\n.webhook-console-row {\n  display: grid;\n  grid-template-columns: auto 1fr auto auto auto;\n  gap: var(--s-3);\n  padding: var(--s-3) var(--s-4);\n  border-bottom: 1px solid var(--hair);\n  font: 13px var(--f-mono);\n  align-items: center;\n  text-align: left;\n  width: 100%;\n  background: transparent;\n}\n\n.webhook-console-status { font-weight: 600; }\n\n.webhook-console-timestamp { color: var(--fg-dim); white-space: nowrap; }"
  }
}