@apisurf/wireui 0.1.2

package/dist/server/_ssr/requests._requestId-BFukRwqL.mjs

@@ -0,0 +1,942 @@
+import { __toESM } from "../_runtime.mjs";
+import { Link, require_jsx_runtime, require_react, useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
+import { Callout, CopyButton, Empty, FilterInput, IconAlert, IconButton, IconChevronLeft, IconChevronRight, IconCollections, IconDown, IconRun, IconUp, Kbd, MethodBadge, Pill, Route$1, STATUS_TEXT, SectionTitle, Segmented, StatusBadge, TabList, css, cx, faintText, formatBytes, formatClockMs, formatDay, formatMs, formatOffset, mono, queryParams, requestCookies, responseCookies, tabKey, timingPhases, toCurl, truncate, usePrefs, useTab, useUnreadable } from "./router-CPcgc_kh.mjs";
+import { Split } from "./split-DWrMIs7K.mjs";
+import { BodyViewer, Code, JsonView, KvTable } from "./kv-table-DQUkoItO.mjs";
+//#region node_modules/.nitro/vite/services/ssr/assets/requests._requestId-BFukRwqL.js
+var import_react = /* @__PURE__ */ __toESM(require_react());
+var import_jsx_runtime = require_jsx_runtime();
+function MessagesPane({ messages, openedAt }) {
+	const [direction, setDirection] = import_react.useState("all");
+	const [filter, setFilter] = import_react.useState("");
+	const [selectedId, setSelectedId] = import_react.useState(messages[0]?.id ?? null);
+	const needle = filter.trim().toLowerCase();
+	const visible = messages.filter((m) => (direction === "all" || m.direction === direction) && (!needle || m.name.toLowerCase().includes(needle) || (m.text ?? "").toLowerCase().includes(needle)));
+	const selected = messages.find((m) => m.id === selectedId) ?? null;
+	const sentCount = messages.filter((m) => m.direction === "sent").length;
+	if (messages.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Empty, {
+		title: "No messages",
+		children: "The connection opened but nothing was sent or received on it."
+	});
+	const list = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: css({
+			display: "flex",
+			flexDir: "column",
+			h: "full",
+			minH: "0"
+		}),
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: css({
+				display: "flex",
+				gap: "2",
+				px: "3",
+				py: "2",
+				alignItems: "center",
+				flexShrink: 0
+			}),
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Segmented, {
+				items: [
+					{
+						id: "all",
+						label: `All ${messages.length}`
+					},
+					{
+						id: "sent",
+						label: `Sent ${sentCount}`
+					},
+					{
+						id: "received",
+						label: `Received ${messages.length - sentCount}`
+					}
+				],
+				value: direction,
+				onSelect: setDirection
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FilterInput, {
+				className: css({ flex: "1" }),
+				placeholder: "Filter messages…",
+				value: filter,
+				onChange: (e) => setFilter(e.target.value)
+			})]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: css({
+				flex: "1",
+				minH: "0",
+				overflow: "auto"
+			}),
+			role: "listbox",
+			"aria-label": "Messages",
+			children: [visible.map((m) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+				type: "button",
+				role: "option",
+				"aria-selected": m.id === selectedId,
+				onClick: () => setSelectedId(m.id),
+				className: css({
+					display: "grid",
+					gridTemplateColumns: "18px 76px 70px 1fr 64px",
+					alignItems: "center",
+					gap: "2",
+					w: "full",
+					px: "3",
+					py: "1",
+					border: "none",
+					borderBottom: "1px solid",
+					borderColor: "line",
+					bg: "transparent",
+					textAlign: "left",
+					cursor: "pointer",
+					_hover: { bg: "hover" },
+					"&[aria-selected=true]": { bg: "selected" }
+				}),
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						title: m.direction,
+						className: m.direction === "sent" ? css({ color: "post" }) : css({ color: "get" }),
+						children: m.direction === "sent" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconUp, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconDown, { size: 14 })
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						className: cx(mono, css({ color: "faint" })),
+						children: formatOffset(m.ts - openedAt)
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						className: cx(mono, truncate, css({ color: "muted" })),
+						children: m.name
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						className: cx(mono, truncate),
+						children: m.text ?? (m.code != null ? `close ${m.code}` : "—")
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						className: cx(mono, css({
+							color: "faint",
+							textAlign: "right"
+						})),
+						children: formatBytes(m.bytes)
+					})
+				]
+			}, m.id)), visible.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: css({
+					p: "4",
+					color: "faint",
+					textAlign: "center"
+				}),
+				children: "No messages match."
+			}) : null]
+		})]
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Split, {
+		direction: "stacked",
+		storageKey: "messages",
+		initial: .55,
+		first: list,
+		second: selected ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MessageDetail, {
+			message: selected,
+			openedAt
+		}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Empty, { title: "Select a message" })
+	});
+}
+function MessageDetail({ message, openedAt }) {
+	const json = import_react.useMemo(() => parseJson(message.text), [message.text]);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: css({
+			display: "flex",
+			flexDir: "column",
+			h: "full",
+			minH: "0"
+		}),
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: css({
+				display: "flex",
+				alignItems: "center",
+				gap: "2",
+				px: "3",
+				py: "1.5",
+				borderBottom: "1px solid",
+				borderColor: "line",
+				flexShrink: 0,
+				flexWrap: "wrap"
+			}),
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pill, {
+					tone: message.direction === "sent" ? "warn" : "ok",
+					children: message.direction
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+					className: mono,
+					children: ["#", message.seq]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: cx(mono, css({ color: "muted" })),
+					children: message.name
+				}),
+				message.event_id ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+					title: message.event_id,
+					className: cx(mono, truncate, css({
+						maxW: "240px",
+						color: "faint",
+						fontSize: "11px"
+					})),
+					children: ["id ", message.event_id]
+				}) : null,
+				message.code != null ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Pill, { children: ["code ", message.code] }) : null,
+				message.truncated ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pill, {
+					tone: "warn",
+					children: "truncated"
+				}) : null,
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+					className: cx(mono, css({ color: "faint" })),
+					children: [
+						formatOffset(message.ts - openedAt),
+						" · ",
+						formatBytes(message.bytes)
+					]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: css({ ml: "auto" }),
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CopyButton, { text: message.text })
+				})
+			]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: css({
+				flex: "1",
+				minH: "0",
+				overflow: "auto",
+				bg: "well"
+			}),
+			children: message.text == null ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Empty, { title: message.body_id == null ? "No payload" : "Binary payload" }) : json !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(JsonView, { value: json }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Code, {
+				text: message.text,
+				wrap: true
+			})
+		})]
+	});
+}
+/** The payload as JSON when it is an object or array, else undefined. */
+function parseJson(text) {
+	if (!text) return void 0;
+	const first = text.trimStart()[0];
+	if (first !== "{" && first !== "[") return void 0;
+	try {
+		return JSON.parse(text);
+	} catch {
+		return;
+	}
+}
+var PHASE_BAR = {
+	dns: css({ bg: "sse" }),
+	connect: css({ bg: "info" }),
+	tls: css({ bg: "patch" }),
+	wait: css({ bg: "post" }),
+	download: css({ bg: "get" }),
+	other: css({ bg: "faint" })
+};
+function TimingWaterfall({ request }) {
+	const phases = timingPhases(request);
+	const total = Math.max(request.duration_ms, .001);
+	let offset = 0;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionTitle, {
+			right: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: cx(mono, css({ fontWeight: "600" })),
+				children: formatMs(request.duration_ms)
+			}),
+			children: request.kind === "http" ? "Timing" : "Connection"
+		}),
+		phases.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+			className: faintText,
+			children: "Only the total duration was measured for this exchange."
+		}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: css({
+				display: "flex",
+				flexDir: "column",
+				gap: "1"
+			}),
+			children: phases.map((phase) => {
+				const left = offset / total * 100;
+				const width = Math.max(phase.ms / total * 100, .4);
+				offset += phase.ms;
+				return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					title: phase.hint,
+					className: css({
+						display: "grid",
+						gridTemplateColumns: "150px 1fr 80px",
+						alignItems: "center",
+						gap: "3",
+						py: "1"
+					}),
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+							className: css({
+								color: "muted",
+								fontSize: "12px"
+							}),
+							children: phase.label
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+							className: css({
+								position: "relative",
+								h: "10px",
+								bg: "hover",
+								rounded: "full"
+							}),
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+								className: cx(css({
+									position: "absolute",
+									top: "0",
+									bottom: "0",
+									rounded: "full"
+								}), PHASE_BAR[phase.key]),
+								style: {
+									left: `${left}%`,
+									width: `${Math.min(width, 100 - left)}%`
+								}
+							})
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+							className: cx(mono, css({ textAlign: "right" })),
+							children: formatMs(phase.ms)
+						})
+					]
+				}, phase.key);
+			})
+		}),
+		request.kind === "http" && request.dns_ms == null && request.connect_ms == null ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+			className: cx(faintText, css({
+				mt: "2",
+				fontSize: "12px"
+			})),
+			children: "No DNS, connect or TLS phase: the request reused an open connection."
+		}) : null
+	] });
+}
+/**
+* The exchange as a verbose transcript: `>` for what was sent, `<` for what
+* came back, `*` for what happened in between. Reads like `curl -v`, which is
+* the format most people already debug in.
+*/
+function Transcript({ request, requestHeaders, responseHeaders }) {
+	const lines = transcriptLines(request, requestHeaders, responseHeaders);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionTitle, { children: "Transcript" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: cx(mono, css({
+			bg: "well",
+			border: "1px solid",
+			borderColor: "line",
+			rounded: "md",
+			p: "3",
+			lineHeight: "1.6",
+			overflowX: "auto"
+		})),
+		children: lines.map((line, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: cx(css({
+				whiteSpace: "pre-wrap",
+				wordBreak: "break-all"
+			}), line.tone === "sent" && css({ color: "post" }), line.tone === "received" && css({ color: "get" }), line.tone === "info" && css({ color: "faint" })),
+			children: [
+				line.prefix,
+				" ",
+				line.text
+			]
+		}, i))
+	})] });
+}
+function transcriptLines(request, requestHeaders, responseHeaders) {
+	const lines = [];
+	const info = (text) => lines.push({
+		prefix: "*",
+		text,
+		tone: "info"
+	});
+	const sent = (text) => lines.push({
+		prefix: ">",
+		text,
+		tone: "sent"
+	});
+	const got = (text) => lines.push({
+		prefix: "<",
+		text,
+		tone: "received"
+	});
+	info(`${new Date(request.ts).toISOString()}  ${request.kind.toUpperCase()} ${request.url}`);
+	for (const line of connectionLines(request)) info(line);
+	const target = request.query ? `${request.path}?${request.query}` : request.path;
+	sent(`${request.method} ${target}`);
+	if (!requestHeaders.some(([n]) => n.toLowerCase() === "host")) sent(`host: ${request.host}`);
+	for (const [name, value] of requestHeaders) sent(`${name}: ${value}`);
+	if (request.request_bytes > 0) info(`${request.request_bytes} bytes sent`);
+	if (request.status != null) {
+		got(`${request.status} ${STATUS_TEXT[request.status] ?? ""}`.trim());
+		for (const [name, value] of responseHeaders) got(`${name}: ${value}`);
+		if (request.ttfb_ms != null) info(`First byte after ${formatMs(request.ttfb_ms)}`);
+		info(`${request.response_bytes} bytes received`);
+	}
+	if (request.error_name) info(`${request.error_name}: ${request.error_message ?? ""}`);
+	info(`Completed in ${formatMs(request.duration_ms)}`);
+	return lines;
+}
+/** How the connection was established, or that an open one was reused. */
+function connectionLines(request) {
+	if (request.dns_ms == null && request.connect_ms == null && request.tls_ms == null) return ["Re-using existing connection"];
+	const lines = [];
+	if (request.dns_ms != null) lines.push(`Resolved ${request.host} in ${formatMs(request.dns_ms)}`);
+	if (request.connect_ms != null) lines.push(`Connected in ${formatMs(request.connect_ms)}`);
+	if (request.tls_ms != null) lines.push(`TLS handshake in ${formatMs(request.tls_ms)}`);
+	return lines;
+}
+function RequestPage() {
+	const { detail, run, neighbours, runRequestCount } = Route$1.useLoaderData();
+	const search = Route$1.useSearch();
+	const navigate = useNavigate({ from: Route$1.fullPath });
+	const { prefs } = usePrefs();
+	const unreadable = useUnreadable();
+	const r = detail.request;
+	const failed = r.error_name != null || r.status == null || r.status >= 400;
+	useTab({
+		key: tabKey.request(r.id),
+		title: r.path,
+		icon: "request",
+		method: r.method,
+		kind: r.kind,
+		failed
+	});
+	const go = import_react.useCallback((id) => {
+		if (id == null) return;
+		navigate({
+			to: "/requests/$requestId",
+			params: { requestId: String(id) },
+			search: (s) => s
+		});
+	}, [navigate]);
+	import_react.useEffect(() => {
+		const onKey = (event) => {
+			const target = event.target;
+			if (target && /^(INPUT|TEXTAREA|SELECT)$/.test(target.tagName)) return;
+			if (event.key === "[") go(neighbours.prev);
+			if (event.key === "]") go(neighbours.next);
+		};
+		window.addEventListener("keydown", onKey);
+		return () => window.removeEventListener("keydown", onKey);
+	}, [
+		go,
+		neighbours.prev,
+		neighbours.next
+	]);
+	if (unreadable) return unreadable;
+	const stream = r.kind !== "http";
+	const reqTab = search.req ?? (r.query ? "params" : detail.requestBody.present ? "body" : "headers");
+	const defaultRes = stream ? "messages" : "body";
+	const resTab = search.res && (stream ? search.res !== "body" : search.res !== "messages") ? search.res : defaultRes;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: css({
+			display: "flex",
+			flexDir: "column",
+			h: "full",
+			minH: "0"
+		}),
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: css({
+				px: "4",
+				pt: "3",
+				pb: "2.5",
+				display: "flex",
+				flexDir: "column",
+				gap: "2",
+				flexShrink: 0
+			}),
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: css({
+					display: "flex",
+					alignItems: "center",
+					gap: "2",
+					fontSize: "12px",
+					color: "muted",
+					minW: "0"
+				}),
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Link, {
+						to: "/collections",
+						search: { entry: run.entry },
+						className: css({
+							display: "inline-flex",
+							alignItems: "center",
+							gap: "1",
+							color: "muted",
+							_hover: { color: "accent" }
+						}),
+						title: run.rel,
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconCollections, { size: 12 }), run.file]
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						className: css({ color: "faint" }),
+						children: "›"
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Link, {
+						to: "/runs/$runId",
+						params: { runId: String(run.id) },
+						className: css({
+							display: "inline-flex",
+							alignItems: "center",
+							gap: "1",
+							color: "muted",
+							_hover: { color: "accent" }
+						}),
+						children: [
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconRun, { size: 10 }),
+							"Run #",
+							run.id
+						]
+					}),
+					run.env ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pill, { children: run.env }) : null,
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						className: css({ color: "faint" }),
+						children: "›"
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+						className: css({ whiteSpace: "nowrap" }),
+						children: [
+							r.seq + 1,
+							" of ",
+							runRequestCount
+						]
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+						className: cx(mono, css({
+							color: "faint",
+							whiteSpace: "nowrap"
+						})),
+						children: [
+							formatDay(Date.now(), r.ts),
+							" ",
+							formatClockMs(r.ts),
+							" ·",
+							" ",
+							formatOffset(r.ts - run.started_at)
+						]
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						className: css({
+							ml: "auto",
+							display: "flex",
+							alignItems: "center",
+							gap: "1"
+						}),
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconButton, {
+							label: "Previous request in run ([)",
+							disabled: neighbours.prev == null,
+							onClick: () => go(neighbours.prev),
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconChevronLeft, {})
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconButton, {
+							label: "Next request in run (])",
+							disabled: neighbours.next == null,
+							onClick: () => go(neighbours.next),
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconChevronRight, {})
+						})]
+					})
+				]
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UrlBar, { detail })]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: css({
+				flex: "1",
+				minH: "0",
+				display: "flex",
+				borderTop: "1px solid",
+				borderColor: "line"
+			}),
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Split, {
+				direction: prefs.layout,
+				storageKey: `request-${prefs.layout}`,
+				initial: prefs.layout === "side" ? .42 : .4,
+				first: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RequestPane, {
+					detail,
+					tab: reqTab,
+					onTab: (next) => void navigate({
+						search: (s) => ({
+							...s,
+							req: next
+						}),
+						replace: true
+					})
+				}),
+				second: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ResponsePane, {
+					detail,
+					tab: resTab,
+					onTab: (next) => void navigate({
+						search: (s) => ({
+							...s,
+							res: next
+						}),
+						replace: true
+					})
+				})
+			})
+		})]
+	});
+}
+function UrlBar({ detail }) {
+	const r = detail.request;
+	const curl = r.kind === "http" ? toCurl(r, detail.requestHeaders, detail.requestBody) : null;
+	const scheme = r.url.slice(0, r.url.indexOf(r.host));
+	const rest = r.url.slice(scheme.length + r.host.length);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: css({
+			display: "flex",
+			gap: "2",
+			alignItems: "stretch"
+		}),
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: css({
+					display: "flex",
+					alignItems: "center",
+					flex: "1",
+					minW: "0",
+					h: "36px",
+					rounded: "md",
+					border: "1px solid",
+					borderColor: "lineStrong",
+					bg: "well",
+					overflow: "hidden"
+				}),
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: css({
+						display: "flex",
+						alignItems: "center",
+						px: "3",
+						h: "full",
+						borderRight: "1px solid",
+						borderColor: "line",
+						flexShrink: 0,
+						"& > span": { fontSize: "12px" }
+					}),
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MethodBadge, {
+						method: r.method,
+						kind: r.kind
+					})
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+					className: cx(mono, truncate, css({
+						px: "3",
+						fontSize: "13px",
+						userSelect: "all",
+						flex: "1"
+					})),
+					title: r.url,
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+							className: css({ color: "faint" }),
+							children: scheme
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: r.host }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+							className: css({ color: "muted" }),
+							children: rest
+						})
+					]
+				})]
+			}),
+			curl ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CopyButton, {
+				text: curl,
+				label: "cURL"
+			}) : null,
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CopyButton, {
+				text: r.url,
+				label: "URL"
+			})
+		]
+	});
+}
+function PaneHeader({ title, children }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: css({
+			display: "flex",
+			alignItems: "center",
+			gap: "2.5",
+			px: "3",
+			h: "36px",
+			flexShrink: 0,
+			bg: "chrome",
+			borderBottom: "1px solid",
+			borderColor: "line"
+		}),
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+			className: css({
+				fontWeight: "600",
+				fontSize: "12px"
+			}),
+			children: title
+		}), children]
+	});
+}
+var paneBody = css({
+	flex: "1",
+	minH: "0",
+	overflow: "auto"
+});
+function RequestPane({ detail, tab, onTab }) {
+	const r = detail.request;
+	const params = queryParams(r.query);
+	const cookies = requestCookies(detail.requestHeaders);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: css({
+			display: "flex",
+			flexDir: "column",
+			h: "full",
+			minH: "0"
+		}),
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PaneHeader, {
+				title: r.kind === "http" ? "Request" : "Handshake",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+					className: cx(mono, css({
+						color: "faint",
+						fontSize: "11px"
+					})),
+					children: [formatBytes(r.request_bytes), " sent"]
+				})
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabList, {
+				dense: true,
+				items: [
+					{
+						id: "params",
+						label: "Params",
+						count: params.length
+					},
+					{
+						id: "headers",
+						label: "Headers",
+						count: detail.requestHeaders.length
+					},
+					{
+						id: "body",
+						label: "Body",
+						hidden: r.kind !== "http",
+						count: detail.requestBody.present ? "●" : void 0
+					},
+					{
+						id: "cookies",
+						label: "Cookies",
+						count: cookies.length,
+						hidden: cookies.length === 0
+					},
+					{
+						id: "tags",
+						label: "Tags",
+						count: detail.tags.length,
+						hidden: detail.tags.length === 0
+					}
+				],
+				value: tab,
+				onSelect: onTab
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: paneBody,
+				children: [
+					tab === "params" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(KvTable, {
+						rows: params.map(([name, value]) => ({
+							name,
+							value
+						})),
+						empty: "No query parameters"
+					}) : null,
+					tab === "headers" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(KvTable, {
+						rows: detail.requestHeaders.map(([name, value]) => ({
+							name,
+							value
+						})),
+						empty: "No request headers",
+						nameLabel: "Header"
+					}) : null,
+					tab === "body" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BodyViewer, {
+						body: detail.requestBody,
+						emptyTitle: "No request body"
+					}) : null,
+					tab === "cookies" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CookieTable, { cookies }) : null,
+					tab === "tags" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(KvTable, {
+						rows: detail.tags.map((t) => ({
+							name: t.key,
+							value: t.value
+						})),
+						empty: "No tags"
+					}) : null
+				]
+			})
+		]
+	});
+}
+function ResponsePane({ detail, tab, onTab }) {
+	const r = detail.request;
+	const stream = r.kind !== "http";
+	const cookies = responseCookies(detail.responseHeaders);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: css({
+			display: "flex",
+			flexDir: "column",
+			h: "full",
+			minH: "0"
+		}),
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(PaneHeader, {
+				title: stream ? "Connection" : "Response",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatusBadge, {
+						status: r.status,
+						error: r.error_name,
+						pill: true
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Metric, {
+						label: stream ? "Open" : "Time",
+						value: formatMs(r.duration_ms)
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Metric, {
+						label: stream ? "Received" : "Size",
+						value: formatBytes(r.response_bytes)
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabList, {
+				dense: true,
+				items: [
+					{
+						id: "body",
+						label: "Body",
+						hidden: stream
+					},
+					{
+						id: "messages",
+						label: "Messages",
+						count: detail.messages.length,
+						hidden: !stream
+					},
+					{
+						id: "headers",
+						label: "Headers",
+						count: detail.responseHeaders.length
+					},
+					{
+						id: "cookies",
+						label: "Cookies",
+						count: cookies.length,
+						hidden: cookies.length === 0
+					},
+					{
+						id: "timeline",
+						label: "Timeline"
+					}
+				],
+				value: tab,
+				onSelect: onTab
+			}),
+			r.error_name ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: css({
+					px: "3",
+					pt: "2.5",
+					flexShrink: 0
+				}),
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Callout, {
+					tone: "bad",
+					icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconAlert, { size: 15 }),
+					title: r.status == null ? "Could not get a response" : r.error_name,
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+						className: mono,
+						children: [
+							r.error_name,
+							": ",
+							r.error_message
+						]
+					})
+				})
+			}) : null,
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: paneBody,
+				children: [
+					tab === "body" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BodyViewer, {
+						body: detail.responseBody,
+						emptyTitle: "No response body"
+					}) : null,
+					tab === "messages" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MessagesPane, {
+						messages: detail.messages,
+						openedAt: r.ts
+					}) : null,
+					tab === "headers" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(KvTable, {
+						rows: detail.responseHeaders.map(([name, value]) => ({
+							name,
+							value
+						})),
+						empty: "No response headers",
+						nameLabel: "Header"
+					}) : null,
+					tab === "cookies" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CookieTable, { cookies }) : null,
+					tab === "timeline" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						className: css({
+							p: "4",
+							display: "flex",
+							flexDir: "column",
+							gap: "5"
+						}),
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TimingWaterfall, { request: r }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Transcript, {
+							request: r,
+							requestHeaders: detail.requestHeaders,
+							responseHeaders: detail.responseHeaders
+						})]
+					}) : null
+				]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: css({
+					px: "3",
+					py: "1",
+					borderTop: "1px solid",
+					borderColor: "line",
+					color: "faint",
+					fontSize: "11px",
+					flexShrink: 0,
+					display: "flex",
+					gap: "3"
+				}),
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "[" }),
+					" ",
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Kbd, { children: "]" }),
+					" previous / next request"
+				] }), r.ttfb_ms != null && !stream ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: ["TTFB ", formatMs(r.ttfb_ms)] }) : null]
+			})
+		]
+	});
+}
+function Metric({ label, value }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+		className: css({
+			display: "inline-flex",
+			gap: "1",
+			fontSize: "12px",
+			whiteSpace: "nowrap"
+		}),
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+			className: css({ color: "muted" }),
+			children: label
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+			className: cx(mono, css({ fontWeight: "600" })),
+			children: value
+		})]
+	});
+}
+function CookieTable({ cookies }) {
+	const rows = cookies.map((c) => ({
+		name: c.name,
+		value: c.value,
+		extra: Object.keys(c.attributes).length ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+			className: css({
+				display: "flex",
+				gap: "1",
+				flexWrap: "wrap"
+			}),
+			children: Object.entries(c.attributes).map(([k, v]) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pill, { children: v === "true" ? k : `${k}=${v}` }, k))
+		}) : null
+	}));
+	const hasAttributes = cookies.some((c) => Object.keys(c.attributes).length > 0);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(KvTable, {
+		rows,
+		empty: "No cookies",
+		nameLabel: "Name",
+		extraLabel: hasAttributes ? "Attributes" : void 0
+	});
+}
+//#endregion
+export { RequestPage as component };