6f:I[8513,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ScrollBar"] 84:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:"#f0f4f9" 54:["$","div","color-border",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-border",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#dce4ef"}]]}] 55:["$","div","color-border-strong",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-border-strong",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#c5d1e1"}]]}] 56:["$","div","color-code-bg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-code-bg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#f0f4f9"}]]}] 57:["$","div","color-code-fg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-code-fg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#2a3444"}]]}] 58:["$","div","color-error",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-error",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#d92d4a"}]]}] 59:["$","div","color-error-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-error-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}] 5a:["$","div","color-fg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-fg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#101828"}]]}] 5b:["$","div","color-fg-secondary",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-fg-secondary",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#344054"}]]}] 5c:["$","div","color-focus",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-focus",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#315fea"}]]}] 5d:["$","div","color-info",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-info",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#087dbd"}]]}] 5e:["$","div","color-info-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-info-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}] 5f:["$","div","color-muted",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-muted",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#667085"}]]}] 60:["$","div","color-neutral",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-neutral",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#475467"}]]}] 61:["$","div","color-neutral-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-neutral-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}] 62:["$","div","color-secondary-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-secondary-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#009fb3"}]]}] 63:["$","div","color-signature",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-signature",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#e9564a"}]]}] 64:["$","div","color-success",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-success",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#128a55"}]]}] 65:["$","div","color-success-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-success-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}] 66:["$","div","color-surface",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-surface",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}] 67:["$","div","color-surface-2",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-surface-2",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#f8fafd"}]]}] 68:["$","div","color-warning",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-warning",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#b86e00"}]]}] 69:["$","div","color-warning-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-warning-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ffffff"}]]}] 6a:["$","$L6f",null,{"orientation":"horizontal"}] 6b:["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L52",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","color-accent",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-accent",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#4f7cff"}]]}],["$","div","color-accent-fg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-accent-fg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#080c14"}]]}],["$","div","color-accent-hover",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-accent-hover",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#6f91ff"}]]}],["$","div","color-accent-text",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-accent-text",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#7f9fff"}]]}],["$","div","color-bg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-bg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#080c14"}]]}],["$","div","color-bg-elevated",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-bg-elevated",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#0d1420"}]]}],["$","div","color-bg-secondary",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-bg-secondary",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#0d1420"}]]}],["$","div","color-border",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-border",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#263449"}]]}],["$","div","color-border-strong",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-border-strong",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#354863"}]]}],["$","div","color-code-bg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-code-bg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#0d1420"}]]}],["$","div","color-code-fg",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-code-fg",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"$L70"}]]}],"$L71","$L72","$L73","$L74","$L75","$L76","$L77","$L78","$L79","$L7a","$L7b","$L7c","$L7d","$L7e","$L7f","$L80","$L81","$L82"]}],"$L83"]}]}]]}] 6c:null 6d:null 85:Tc55a,"use client"; import * as React from "react"; import { motion, AnimatePresence } from "motion/react"; import { cn } from "@/lib/utils"; import { useReducedMotion, useVisibilityPause, useAutoFollow, useDisclosure, useAnchoredPortal, useCopy, statusVars, formatNumber, formatTimestamp as defaultFormatTimestamp, type StatusTone, } from "@/lib/motiq"; /** * WebhookEventStream — a presentation-only console for a stream of outbound * webhook deliveries that your application already has in hand (payment events, * deploy hooks, CRM sync, CI notifications, integration fan-out). * * It is *presentation only*: the host application owns the `events` array and * streams new deliveries in by appending to it. The component never opens a * socket, never re-sends anything, and never fabricates a status. Retry/Replay * are callbacks the host wires to its own delivery logic. * * Two things make it worth shipping in an integrations/observability UI: * 1. Auto-follow that never fights the reader (shared `useAutoFollow`): while * pinned to the bottom, new deliveries scroll into view; scroll up (or pause) * and following stops, arrivals are counted, and a "N new — jump to latest" * control resumes on the reader's terms. User scrolling is never disabled. * 2. Secrets are a first-class concern: well-known credential headers and * payload fields (signing secrets, tokens, cookies) are redacted by default * and can never be un-hidden from inside the component. The redacted value is * never present in the DOM, in copied text, or in search results. * * Accessibility: delivery status is conveyed with an icon **and** a text label * (never colour alone); the console is a `role="log"` region so arrivals are * announced politely; each event is a real disclosure (aria-expanded) revealing * its payload; long endpoints/payloads scroll rather than truncate silently; and * under `prefers-reduced-motion` events appear in their final state. Clean-room * original. */ /* -------------------------------------------------------------------------- */ /* Types */ /* -------------------------------------------------------------------------- */ /** Delivery outcome of a single webhook attempt, owned by the application. */ export type WebhookDeliveryStatus = "delivered" | "failed" | "pending" | "retrying"; /** Lifecycle of the stream itself, owned by the application. */ export type WebhookStreamStatus = "streaming" | "paused" | "idle" | "error"; export interface WebhookEvent { /** Stable identifier, unique within the stream. */ id: string | number; /** Dotted event type, e.g. "payment.succeeded". Drives the type filter. */ event: string; /** Delivery outcome — drives the icon, label, and tone (never colour alone). */ status: WebhookDeliveryStatus; /** Destination endpoint URL (display only — never called by the component). */ endpoint: string; /** HTTP response status code from the delivery attempt, when one exists. */ statusCode?: number; /** When the event was emitted / last attempted. */ timestamp?: Date | number | string; /** How many times delivery has been retried (0 = first attempt). */ retryCount?: number; /** Response latency of the last attempt, in milliseconds. */ durationMs?: number; /** Headers sent with the delivery — secret headers are redacted for display. */ headers?: Record; /** The event payload — a JSON-serialisable value; secret keys are redacted. */ payload?: unknown; /** Human-readable failure reason for failed deliveries. */ error?: string; } /** Where a value lives — passed to a redaction predicate. */ export type WebhookRedactSection = "headers" | "payload"; export interface WebhookRedactContext { key: string; value: unknown; section: WebhookRedactSection; /** Dotted path within the payload (e.g. "data.token"); the bare key for headers. */ path: string; } /** * Redaction rule: * - `true` / omitted → redact the built-in credential key list. * - `false` → disable redaction (the app takes responsibility for its data). * - `string[]` → the built-in list PLUS these additional keys (case-insensitive). * - function → full control; returning `true` redacts that value. */ export type WebhookRedactRule = | boolean | string[] | ((ctx: WebhookRedactContext) => boolean); export interface WebhookEventStreamProps { /** The delivery events, controlled by the host application (append to stream). */ events: WebhookEvent[]; /** Lifecycle state. `"streaming"` shows a live pulse; `"error"` shows a banner. */ status?: WebhookStreamStatus; /** Message shown in the error banner when `status === "error"`. */ errorMessage?: string; /** Whether the viewport auto-follows the tail. Controlled when provided. */ follow?: boolean; /** Notified when the effective follow state changes. */ onFollowChange?: (following: boolean) => void; /** Whether the reader paused the view. Controlled when provided. */ paused?: boolean; /** Notified when the paused state changes (also fired by Pause/Resume). */ onPausedChange?: (paused: boolean) => void; /** Cap on retained rows; older deliveries are dropped from the top. */ maxEvents?: number; /** Which delivery statuses are selectable in the filter. Defaults to all. */ statuses?: WebhookDeliveryStatus[]; /** Search text. Controlled when provided. */ query?: string; /** Notified when the search text changes. */ onQueryChange?: (query: string) => void; /** Controls header/payload redaction. See {@link WebhookRedactRule}. */ redact?: WebhookRedactRule; /** Wired to the host's retry logic; enables Retry on a failed delivery. */ onRetry?: (event: WebhookEvent) => void; /** Wired to the host's replay logic; re-sends the delivery. */ onReplay?: (event: WebhookEvent) => void; /** Notified when an event row is expanded or collapsed. */ onInspect?: (event: WebhookEvent, expanded: boolean) => void; /** Wired to the host's reconnect logic; shown in the error banner. */ onReconnect?: () => void; /** Override timestamp rendering. */ formatTimestamp?: (value: Date | number | string) => string; /** Header title. */ title?: string; /** Accessible name for the log region. */ label?: string; className?: string; } /* -------------------------------------------------------------------------- */ /* Status vocabulary — icon + label + tone (never colour alone). */ /* -------------------------------------------------------------------------- */ interface StatusMeta { label: string; tone: StatusTone; } const STATUS_META: Record = { delivered: { label: "Delivered", tone: "success" }, failed: { label: "Failed", tone: "error" }, pending: { label: "Pending", tone: "neutral" }, retrying: { label: "Retrying", tone: "active" }, }; const ALL_STATUSES: WebhookDeliveryStatus[] = ["delivered", "failed", "pending", "retrying"]; /* -------------------------------------------------------------------------- */ /* Redaction — a one-way display transform; secrets never reach the DOM. */ /* -------------------------------------------------------------------------- */ const DEFAULT_SENSITIVE = new Set( [ "authorization", "cookie", "set-cookie", "x-api-key", "api-key", "apikey", "x-webhook-secret", "webhook-secret", "x-hub-signature", "x-hub-signature-256", "x-signature", "signature", "x-webhook-signature", "secret", "signing_secret", "signing-secret", "password", "token", "access_token", "refresh_token", "client_secret", "private_key", "session", "sessionid", ].map((s) => s.toLowerCase()), ); const REDACTED_TOKEN = "••••••"; function makeShouldRedact( rule: WebhookRedactRule | undefined, ): (ctx: WebhookRedactContext) => boolean { if (rule === false) return () => false; if (typeof rule === "function") { return (ctx) => DEFAULT_SENSITIVE.has(ctx.key.toLowerCase()) || rule(ctx); } const extra = Array.isArray(rule) ? new Set(rule.map((k) => k.toLowerCase())) : null; return (ctx) => { const k = ctx.key.toLowerCase(); return DEFAULT_SENSITIVE.has(k) || (extra?.has(k) ?? false); }; } function redactDeep( value: unknown, section: WebhookRedactSection, shouldRedact: (ctx: WebhookRedactContext) => boolean, path: string, ): unknown { if (Array.isArray(value)) { return value.map((v, i) => redactDeep(v, section, shouldRedact, `${path}[${i}]`)); } if (value && typeof value === "object") { const out: Record = {}; for (const [k, v] of Object.entries(value as Record)) { const nextPath = path ? `${path}.${k}` : k; out[k] = shouldRedact({ key: k, value: v, section, path: nextPath }) ? REDACTED_TOKEN : redactDeep(v, section, shouldRedact, nextPath); } return out; } return value; } /** Serialise a payload to a display string, applying redaction. */ function payloadToText( payload: unknown, shouldRedact: (ctx: WebhookRedactContext) => boolean, ): string { if (payload == null) return ""; let structured: unknown = payload; if (typeof payload === "string") { const trimmed = payload.trim(); if (trimmed.startsWith("{") || trimmed.startsWith("[")) { try { structured = JSON.parse(payload); } catch { return payload; } } else { return payload; } } if (typeof structured !== "object" || structured === null) { return typeof payload === "string" ? payload : String(payload); } return JSON.stringify(redactDeep(structured, "payload", shouldRedact, ""), null, 2); } /** Serialise one event to plain text for copy (secrets masked). */ function eventToText( e: WebhookEvent, fmt: (v: Date | number | string) => string, shouldRedact: (ctx: WebhookRedactContext) => boolean, ): string { const lines: string[] = []; const ts = e.timestamp != null ? `[${fmt(e.timestamp)}] ` : ""; const code = e.statusCode != null ? ` ${e.statusCode}` : ""; lines.push(`${ts}${STATUS_META[e.status].label.toUpperCase()}${code} ${e.event} → ${e.endpoint}`); if ((e.retryCount ?? 0) > 0) lines.push(` retries: ${e.retryCount}`); if (e.error) lines.push(` error: ${e.error}`); if (e.headers && Object.keys(e.headers).length) { lines.push(" headers:"); for (const [k, v] of Object.entries(e.headers)) { const redacted = shouldRedact({ key: k, value: v, section: "headers", path: k }); lines.push(` ${k}: ${redacted ? REDACTED_TOKEN : v}`); } } const body = payloadToText(e.payload, shouldRedact); if (body) lines.push(" payload:", body); return lines.join("\n"); } function eventsToText( list: WebhookEvent[], fmt: (v: Date | number | string) => string, shouldRedact: (ctx: WebhookRedactContext) => boolean, ): string { return list.map((e) => eventToText(e, fmt, shouldRedact)).join("\n\n"); } function formatDuration(ms: number): string { if (ms < 1) return "0 ms"; if (ms < 1000) return `${Math.round(ms)} ms`; return `${(ms / 1000).toFixed(2)} s`; } /** Semantic tone for an HTTP status code (drives tint only; the number is text). */ function statusCodeTone(code: number): StatusTone { if (code >= 200 && code < 300) return "success"; if (code >= 300 && code < 400) return "info"; if (code >= 400 && code < 500) return "warning"; if (code >= 500) return "error"; return "neutral"; } /* -------------------------------------------------------------------------- */ /* Icons */ /* -------------------------------------------------------------------------- */ const glyph = { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round" as const, strokeLinejoin: "round" as const, "aria-hidden": true, focusable: false, }; function StatusIcon({ status }: { status: WebhookDeliveryStatus }) { switch (status) { case "delivered": return ( ); case "failed": return ( ); case "retrying": return ( ); case "pending": default: return ( ); } } const Chevron = () => ( ); const SearchGlyph = () => ( ); const PauseGlyph = () => ( ); const PlayGlyph = () => ( ); const CopyGlyph = () => ( ); const CheckGlyph = () => ( ); const ArrowDownGlyph = () => ( ); const RetryGlyph = () => ( ); const ReplayGlyph = () => ( ); const LockGlyph = () => ( ); const AlertGlyph = () => ( ); /* -------------------------------------------------------------------------- */ /* Search highlight */ /* -------------------------------------------------------------------------- */ function escapeRegExp(s: string): string { return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); } function Highlight({ text, needle }: { text: string; needle: string }): React.ReactElement { if (!needle) return <>{text}; const parts = text.split(new RegExp(`(${escapeRegExp(needle)})`, "gi")); const lower = needle.toLowerCase(); return ( <> {parts.map((part, i) => part.toLowerCase() === lower ? ( {part} ) : ( {part} ), )} ); } /* -------------------------------------------------------------------------- */ /* Shared class helpers */ /* -------------------------------------------------------------------------- */ const focusRing = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-focus,var(--color-accent))] focus-visible:ring-offset-1 focus-visible:ring-offset-[var(--color-surface)]"; const btn = cn( "inline-flex items-center gap-1.5 rounded-md border border-[var(--color-border)] bg-[var(--color-surface)]", "px-2 py-1 text-[12px] font-medium text-[var(--color-fg)] transition-colors", "hover:border-[var(--color-accent)] hover:text-[var(--color-accent)]", "disabled:cursor-not-allowed disabled:opacity-45 disabled:hover:border-[var(--color-border)] disabled:hover:text-[var(--color-fg)]", focusRing, ); /* -------------------------------------------------------------------------- */ /* Custom event-type filter — a real library listbox popover (not a native setQuery(e.target.value)} placeholder="Search events…" className={cn( "w-full rounded-md border border-[var(--color-border)] bg-[var(--color-bg)] py-1 pl-8 pr-2", "text-[12.5px] text-[var(--color-fg)] placeholder:text-[var(--color-muted)]", focusRing, )} />

Filter by event type

{statuses.map((s) => { const meta = STATUS_META[s]; const on = activeStatuses.has(s); const vars = statusVars(meta.tone); return ( ); })}

{/* Console --------------------------------------------------------- */}

{isEmpty ? (

{isError ? "The delivery stream ended before any events arrived." : "No webhook deliveries yet."}

Events will appear here as your application dispatches them.

) : visible.length === 0 ? (

No events match the current filters.

) : (

{visible.map((event) => ( ))}

)}

{/* New-events indicator — appears only when not following. */} {newCount > 0 ? ( ) : null}

{/* Error banner ---------------------------------------------------- */} {isError ? (

{errorMessage ?? "The webhook delivery stream disconnected."} {onReconnect ? ( ) : null}

) : null} {/* Rate-limited lifecycle announcer — state changes only, never per event. */}

{isError ? `Webhook stream error. ${errorMessage ?? ""}` : isPaused ? "Webhook stream paused." : status === "streaming" ? "Webhook stream is live." : "Webhook stream idle."}

); } export default WebhookEventStream; 6e:["$","$L84",null,{"files":[{"path":"registry/developer-tools/webhook-event-stream.tsx","content":"$85","type":"registry:component","target":"components/motiq/webhook-event-stream.tsx"}],"className":"h-[70svh] min-h-80"}]