Request inspectorPro

An HTTP request and response with headers, bodies, a timing waterfall and copy as cURL.

Markdown

On this page

ProA draft invoice created through a billing API, with the timing waterfall and masked credentials.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/request-inspector

Usage

tsx

import { RequestInspector } from "@/components/ui/chatcn/pro/request-inspector"

<RequestInspector
  request={{ method: "POST", url, headers, body }}
  response={{ status: 201, headers, body }}
  timing={{ dns: 18, connect: 31, tls: 46, wait: 212, download: 9 }}
/>

The waterfall stacks DNS, connect, TLS, the wait for the first byte and the download, each offset where the last one ended, so where the time went reads at a glance; setup phases are grays, the wait and the download carry color. In flight, pass startedAt and the running phase grows live. JSON bodies render as a tree; anything else as text. Authorization, cookies and API keys stay masked until revealed, and Copy as cURL swaps them for shell variables.

Examples

In flight

ProSetup phases land, the wait grows live, then the response arrives.

States

ProA 422, a refused connection, a 204, a 503 with an HTML body and a long URL.

Props

Prop	Type	Notes
`request`	`{ method, url, headers?, body? }`	Headers as `[name, value][]`
`response`	`{ status, statusText?, headers?, body?, size? }`	Leave out while pending
`timing`	`{ dns?, connect?, tls?, wait?, download? }`	Milliseconds; skip phases that did not happen
`status`	`"pending" \| "done" \| "error"`	Inferred from `response`
`error`, `errorCode`, `onRetry`		For requests that got no response
`startedAt`	`number`	For the live clock while pending
`secretHeaders`	`string[]`	Masked header names
`tab`, `defaultTab`, `onTabChange`	`"response" \| "headers" \| "request"`	Default `response`
`label`	`ReactNode`	The tool or step that made the call

Keyboard

Key	Action
Left and Right arrows	Move between tabs
Tab	Into the panel, then reveal credentials and Copy as cURL

Accessibility

The status line is a polite live region, so the result is announced once.
Masked values read as Hidden value until revealed; the reveal button says what it shows.
The waterfall is a list; each phase reads its name and duration.

Motion

Waterfall phases change opacity in 150 ms when one is pointed at; the running phase grows by layout ten times a second, which is data, not decoration. Copy swaps to a check in 150 ms.