API Request Inspector

1"use client";
2 
3import * as React from "react";
4import { motion, AnimatePresence } from "motion/react";
5 
6import { cn } from "@/lib/utils";
7import {
8  useReducedMotion,
9  useDisclosure,
10  useCopy,
11  getStatusMeta,
12  statusVars,
13  useAnimatedNumber,
14  formatTimestamp as defaultFormatTimestamp,
15  type StatusTone,
16} from "@/lib/motiq";
17 
18/**
19 * ApiRequestInspector — a presentation-only inspection surface for a single
20 * HTTP request/response that your application already has in hand. It is NOT an
21 * API client: it never opens a socket, never re-sends anything, and never
22 * fabricates timing. Retry/Cancel are callbacks the host wires to its own logic.
23 *
24 * What makes it worth shipping in a dev/observability UI: it treats secrets as a
25 * first-class concern. Well-known credential headers/fields are redacted by
26 * default and can never be un-hidden from inside the component — redaction is a
27 * one-way display transform, and the redacted value is never present in the DOM,
28 * in search, or in copied text. Around that it offers expandable sections,
29 * in-payload search, formatted/raw and wrapped/scrolling views, a timing-phase
30 * breakdown, an auth summary, and copy of the url / request / response.
31 *
32 * Accessibility: status is conveyed with an icon + text label (never colour
33 * alone); each section is a real disclosure button (aria-expanded) controlling a
34 * labelled region; payload text stays selectable; long lines scroll
35 * horizontally; a polite live region announces copy success and state changes;
36 * under prefers-reduced-motion everything renders in its final state. Clean-room
37 * original.
38 */
39 
40/* -------------------------------------------------------------------------- */
41/* Types                                                                       */
42/* -------------------------------------------------------------------------- */
43 
44export type HttpMethod =
45  | "GET" | "POST" | "PUT" | "PATCH" | "DELETE" | "HEAD" | "OPTIONS"
46  | (string & {});
47 
48/** Lifecycle of the inspected exchange, owned by the host application. */
49export type InspectorState =
50  | "idle"
51  | "loading"
52  | "success"
53  | "client_error"
54  | "server_error"
55  | "timeout"
56  | "cancelled"
57  | "retrying";
58 
59/** A single timing phase of the request (e.g. DNS, TLS, TTFB, Download). */
60export interface TimingPhase {
61  label: string;
62  durationMs: number;
63}
64 
65/** Non-sensitive summary of how the request was authorized. */
66export interface AuthSummary {
67  /** e.g. "Bearer", "Basic", "API Key". */
68// … truncated