API request log like the ones in Stripe or Supabase, status, method, path, latency and time on each row. Filter by status with counts that add up to All, or search a path or request id. Click a row and it opens inline with Request, Response and Timing tabs, the timing waterfall adds up to the row's total, and Copy as cURL gives you the call. New requests slide in at the top and wait while a row is open. logs and generate are props. Light and dark via shadcn theme tokens, respects reduced motion. More dark, data-dense components at https://www.ssych.com/library?ref=21st.dev
import { useEffect, useState } from "react"
import RequestLog from "@/components/ui/request-log"
import type { HttpMethod, RequestLogEntry, RequestTiming } from "@/components/ui/request-log"
const HOST = "api.inkmail.dev"
const UA = "inkmail-node/4.2.0"
const AUTH = "Bearer ik_live_••••••••3kQz"
const headers = (method: HttpMethod, extra: Record<string, string> = {}) => ({
Host: HOST,
Authorization: AUTH,
...(method === "POST" || method === "PATCH" || method === "PUT" ? { "Content-Type": "application/json" } : {}),
"User-Agent": UA,
...extra,
})
/** A reused keep-alive connection: no DNS, connect or TLS, the rest is server plus transfer. */
const warm = (ms: number): RequestTiming => {
const transfer = Math.max(1, Math.round(ms * 0.12))
return { dns: 0, connect: 0, tls: 0, server: ms - transfer, transfer }
}
/** A cold connection: resolve, connect and handshake before the server sees the request. */
const cold = (ms: number): RequestTiming => {
const dns = Math.max(1, Math.round(ms * 0.05))
const connect = Math.max(1, Math.round(ms * 0.09))
const tls = Math.max(1, Math.round(ms * 0.14))
const transfer = Math.max(1, Math.round(ms * 0.08))
return { dns, connect, tls, transfer, server: ms - dns - connect - tls - transfer }
}
const json = (v: unknown) => JSON.stringify(v)
type Seed = Omit<RequestLogEntry, "time" | "request" | "response"> & {
ago: number
req?: unknown
res?: unknown
extraHeaders?: Record<string, string>
noAuth?: boolean
}
const SEEDS: Seed[] = [
{
id: "req_8Kd2pQv7Tn", status: 200, method: "POST", path: "/v1/emails", ms: 142, ago: 4, timing: warm(142),
extraHeaders: { "Idempotency-Key": "c0f7a2e4-91d3-4b8e-a6f1-2d9c5e7b3a10" },
req: { from: "Field Notes <digest@fieldnotes.email>", to: ["team@harborline.co"], subject: "Your weekly digest", template_id: "tpl_digest_v3" },
res: { id: "em_8Xk2mPq4", object: "email", status: "queued", created_at: "2026-09-26T09:41:02Z" },
},
{
id: "req_4Hq9WzLm2c", status: 200, method: "GET", path: "/v1/domains", ms: 38, ago: 11, timing: warm(38),
res: { object: "list", data: [{ id: "dom_4Hq9Wz", name: "send.harborline.co", status: "verified", region: "eu-west-1" }, { id: "dom_7Tn2Lc", name: "mail.fieldnotes.email", status: "pending", region: "us-east-1" }] },
},
{
id: "req_Vb61sRk0Qe", status: 422, method: "POST", path: "/v1/broadcasts", ms: 61, ago: 26, timing: warm(61),
req: { name: "September product update", from: "Harborline <news@harborline.co>", subject: "What shipped in September" },
res: { error: { type: "validation_error", message: "audience_id is required", param: "audience_id" } },
},
{
id: "req_2Hc7VnXo8a", status: 200, method: "POST", path: "/v1/emails/batch", ms: 486, ago: 43, timing: cold(486),
extraHeaders: { "Idempotency-Key": "5e8d1b7c-2f4a-4c90-b3e6-a1d7f9c2e804" },
req: [{ to: "ops@harborline.co", subject: "Invoice INV-2291" }, { to: "billing@harborline.co", subject: "Invoice INV-2292" }, { to: "finance@harborline.co", subject: "Invoice INV-2293" }],
res: { data: [{ id: "em_2Hc7Vn" }, { id: "em_2Hc7Vp" }, { id: "em_2Hc7Vq" }] },
},
{
id: "req_Jm30tPyd5W", status: 404, method: "GET", path: "/v1/emails/em_71bQx0", ms: 22, ago: 58, timing: warm(22),
res: { error: { type: "not_found", message: "Email em_71bQx0 not found" } },
},
{
id: "req_Qa9eL1wCv4", status: 200, method: "DELETE", path: "/v1/api-keys/key_9vTzR2", ms: 74, ago: 97, timing: warm(74),
res: { object: "api_key", id: "key_9vTzR2", deleted: true },
},
{
id: "req_Xr57GkN2hs", status: 500, method: "POST", path: "/v1/emails", ms: 3012, ago: 131,
timing: { dns: 3, connect: 9, tls: 17, server: 2961, transfer: 22 },
extraHeaders: { "Idempotency-Key": "9a3c6e1f-7b2d-4e58-8c0a-f4b1d6e9a273" },
req: { from: "Harborline <receipts@harborline.co>", to: ["ap@quayside.io"], subject: "Receipt for order 48213" },
res: { error: { type: "internal_error", message: "Upstream SMTP relay timed out after 3000ms", request_id: "req_Xr57GkN2hs" } },
},
{
id: "req_Tf8d2MbQ0k", status: 200, method: "GET", path: "/v1/audiences/aud_3RkP1m/contacts?limit=50", ms: 212, ago: 164, timing: warm(212),
res: { object: "list", has_more: true, data: [{ id: "ct_91LxQe", email: "billing@quayside.io", unsubscribed: false }, { id: "ct_91LxQf", email: "ops@quayside.io", unsubscribed: false }] },
},
{
id: "req_Lw2c8YpE6r", status: 200, method: "PATCH", path: "/v1/contacts/ct_91LxQe", ms: 57, ago: 203, timing: warm(57),
req: { unsubscribed: true },
res: { object: "contact", id: "ct_91LxQe", unsubscribed: true },
},
{
id: "req_Ns4kR7vA1x", status: 429, method: "POST", path: "/v1/emails", ms: 9, ago: 241, timing: warm(9),
req: { from: "Harborline <alerts@harborline.co>", to: ["oncall@harborline.co"], subject: "Disk usage above 90%" },
res: { error: { type: "rate_limit_exceeded", message: "Too many requests. Retry after 2s.", retry_after: 2 } },
},
{
id: "req_Pz6hW0dK3m", status: 201, method: "POST", path: "/v1/webhooks", ms: 133, ago: 288, timing: cold(133),
req: { endpoint: "https://hooks.harborline.co/inkmail", events: ["email.delivered", "email.bounced"] },
res: { object: "webhook", id: "wh_5Gm8Rt", signing_secret: "whsec_••••••••Zp1q" },
},
{
id: "req_Cg1yU5nH8t", status: 502, method: "POST", path: "/v1/domains/dom_7Tn2Lc/verify", ms: 1840, ago: 342,
timing: { dns: 2, connect: 7, tls: 15, server: 1794, transfer: 22 },
res: { error: { type: "bad_gateway", message: "DNS provider did not respond while checking TXT records" } },
},
{
id: "req_Ek7sB2qV9j", status: 304, method: "GET", path: "/v1/templates/tpl_welcome", ms: 16, ago: 377, timing: warm(16),
extraHeaders: { "If-None-Match": "W/\"7d1-3f9a\"" },
},
{
id: "req_Hu3mZ8fL5p", status: 401, method: "GET", path: "/v1/emails?limit=20", ms: 12, ago: 419, timing: warm(12), noAuth: true,
res: { error: { type: "missing_api_key", message: "Missing Authorization header" } },
},
{
id: "req_Wd9oF4cS2g", status: 200, method: "GET", path: "/v1/emails/em_8Xk2mPq4", ms: 45, ago: 466, timing: warm(45),
res: { id: "em_8Xk2mPq4", object: "email", last_event: "delivered", opened: true, clicks: 2 },
},
{
id: "req_Ay2tJ6xM0b", status: 200, method: "POST", path: "/v1/audiences", ms: 96, ago: 520, timing: cold(96),
req: { name: "Beta testers" },
res: { object: "audience", id: "aud_8Wq2Zs", name: "Beta testers" },
},
]
function toEntry(s: Seed, time: Date): RequestLogEntry {
const { ago: _ago, req, res, extraHeaders, noAuth, ...rest } = s
void _ago
const h: Record<string, string> = headers(s.method, extraHeaders)
if (noAuth) delete h.Authorization
return {
...rest,
time,
request: { headers: h, body: req === undefined ? undefined : json(req) },
response: { body: res === undefined ? undefined : json(res) },
}
}
// deterministic "live" traffic: a seeded PRNG so the same sequence plays every time
function mulberry32(seed: number) {
let a = seed
return () => {
a = (a + 0x6d2b79f5) | 0
let t = Math.imul(a ^ (a >>> 15), 1 | a)
t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t
return ((t ^ (t >>> 14)) >>> 0) / 4294967296
}
}
const ALPHA = "ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz0123456789"
const token = (r: () => number, len: number) => Array.from({ length: len }, () => ALPHA[Math.floor(r() * ALPHA.length)]).join("")
const around = (r: () => number, base: number) => Math.max(4, Math.round(base * (0.65 + r() * 0.8)))
type Live = (r: () => number) => Omit<Seed, "id" | "ago">
const LIVE: Live[] = [
(r) => {
const ms = around(r, 130)
return {
status: 200, method: "POST", path: "/v1/emails", ms, timing: warm(ms),
extraHeaders: { "Idempotency-Key": `${token(r, 8)}-${token(r, 4)}-${token(r, 4)}` },
req: { from: "Field Notes <digest@fieldnotes.email>", to: ["team@harborline.co"], subject: "Your weekly digest" },
res: { id: `em_${token(r, 8)}`, object: "email", status: "queued" },
}
},
(r) => {
const id = `em_${token(r, 8)}`
const ms = around(r, 40)
return { status: 200, method: "GET", path: `/v1/emails/${id}`, ms, timing: warm(ms), res: { id, object: "email", last_event: "delivered" } }
},
(r) => {
const ms = around(r, 36)
return { status: 200, method: "GET", path: "/v1/domains", ms, timing: warm(ms), res: { object: "list", data: [{ id: "dom_4Hq9Wz", name: "send.harborline.co", status: "verified" }] } }
},
(r) => {
const ms = around(r, 210)
return { status: 200, method: "GET", path: "/v1/audiences/aud_3RkP1m/contacts?limit=50", ms, timing: warm(ms), res: { object: "list", has_more: r() > 0.5, data: [] } }
},
(r) => {
const ms = around(r, 60)
return {
status: 422, method: "POST", path: "/v1/broadcasts", ms, timing: warm(ms),
req: { name: "Weekly roundup", subject: "This week at Harborline" },
res: { error: { type: "validation_error", message: "from is required", param: "from" } },
}
},
(r) => {
const ms = around(r, 480)
return { status: 200, method: "POST", path: "/v1/emails/batch", ms, timing: cold(ms), req: [{ to: "ops@harborline.co" }, { to: "billing@harborline.co" }], res: { data: [{ id: `em_${token(r, 6)}` }, { id: `em_${token(r, 6)}` }] } }
},
(r) => {
const id = `em_${token(r, 6)}`
const ms = around(r, 20)
return { status: 404, method: "GET", path: `/v1/emails/${id}`, ms, timing: warm(ms), res: { error: { type: "not_found", message: `Email ${id} not found` } } }
},
(r) => {
const ms = around(r, 2400)
return {
status: 503, method: "POST", path: "/v1/emails", ms, timing: cold(ms),
req: { from: "Harborline <receipts@harborline.co>", to: ["ap@quayside.io"], subject: "Receipt for order 48297" },
res: { error: { type: "service_unavailable", message: "Sending is paused while the relay pool drains", retry_after: 30 } },
}
},
]
// mostly healthy traffic, the odd validation error, a rare outage
const ORDER = [0, 1, 2, 0, 3, 1, 4, 0, 5, 1, 2, 6, 0, 3, 1, 7]
function generate(seq: number): RequestLogEntry {
const r = mulberry32(seq * 7919 + 17)
const make = LIVE[ORDER[seq % ORDER.length]]
return toEntry({ id: `req_${token(r, 10)}${seq}`, ago: 0, ...make(r) }, new Date())
}
export default function DemoOne() {
// open the preview in dark by default; the sandbox theme toggle still works
useEffect(() => { document.documentElement.classList.add("dark") }, [])
const [logs] = useState(() => {
const now = Date.now()
return SEEDS.map((s) => toEntry(s, new Date(now - s.ago * 1000)))
})
return (
<div className="flex w-full justify-center p-4">
<RequestLog
logs={logs}
generate={generate}
interval={3200}
baseUrl={`https://${HOST}`}
/>
</div>
)
}
Part of ssych ui — browse the full library on 21st.dev.