@apisurf/wireui 0.1.2 → 0.1.4

package/dist/server/_ssr/runs._runId-DM5Y8e6b.mjs

@@ -0,0 +1,850 @@
+import { __toESM } from "../_runtime.mjs";
+import { require_jsx_runtime, require_react, useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
+import { Callout, Card, Dot, Empty, FilterInput, IconAlert, IconButton, IconCheckCircle, IconChevronLeft, IconChevronRight, IconXCircle, MethodBadge, Metric, Pill, SectionTitle, Segmented, StatStrip, StatusBadge, TabList, css, cx, formatBytes, formatCount, formatDateTime, formatMs, formatOffset, isFailure, mono, pagePad, plural, requestErrorsHint, runTone, runVerdict, scrollPane, statusTone, tabKey, table, toneText, truncate, useNow, useTab, useUnreadable } from "./prefs-iPvYd_Vz.mjs";
+import { Route } from "./router-ClsXvW-b.mjs";
+import { Code, KvTable } from "./kv-table-BONnSOLb.mjs";
+import { SessionHeader } from "./session-header-BYy6LaSU.mjs";
+//#region node_modules/.nitro/vite/services/ssr/assets/runs._runId-DM5Y8e6b.js
+var import_react = /* @__PURE__ */ __toESM(require_react());
+var import_jsx_runtime = require_jsx_runtime();
+function RunPage() {
+	const { run, tags, requests, checks, analytics, neighbours } = Route.useLoaderData();
+	const { tab = "timeline" } = Route.useSearch();
+	const navigate = useNavigate({ from: Route.fullPath });
+	const unreadable = useUnreadable();
+	const tone = runTone(run);
+	useTab({
+		key: tabKey.run(run.id),
+		title: `${run.file} #${run.id}`,
+		icon: "run",
+		failed: tone === "bad"
+	});
+	const go = import_react.useCallback((id) => {
+		if (id == null) return;
+		navigate({
+			to: "/runs/$runId",
+			params: { runId: String(id) },
+			search: (s) => ({ tab: s.tab })
+		});
+	}, [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 failedChecks = checks.filter((c) => c.status === "fail").length;
+	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)(SessionHeader, {
+				script: run,
+				linked: true,
+				tone,
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(RunHeader, {
+					run,
+					neighbours,
+					go
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabList, {
+					items: [
+						{
+							id: "timeline",
+							label: "Timeline"
+						},
+						{
+							id: "requests",
+							label: "Requests",
+							count: requests.length
+						},
+						{
+							id: "checks",
+							label: "Checks",
+							count: checks.length ? `${checks.length - failedChecks}/${checks.length}` : 0,
+							tone: failedChecks ? "bad" : checks.length ? "ok" : void 0
+						},
+						{
+							id: "details",
+							label: "Details",
+							count: tags.length || void 0
+						}
+					],
+					value: tab,
+					onSelect: (next) => void navigate({ search: { tab: next === "timeline" ? void 0 : next } })
+				})]
+			}),
+			tab === "timeline" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RequestsTab, {
+				run,
+				requests,
+				checks
+			}) : null,
+			tab === "requests" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RequestsTab, {
+				run,
+				requests,
+				checks: [],
+				analytics
+			}) : null,
+			tab === "checks" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChecksTab, {
+				run,
+				checks
+			}) : null,
+			tab === "details" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DetailsTab, {
+				run,
+				tags
+			}) : null
+		]
+	});
+}
+function RunHeader({ run, neighbours, go }) {
+	const now = useNow(Date.now(), 6e4);
+	const tone = runTone(run);
+	const sep = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+		className: css({ color: "faint" }),
+		children: "·"
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: css({
+			display: "flex",
+			flexDir: "column",
+			gap: "2.5",
+			px: "5",
+			pt: "1.5",
+			pb: "2"
+		}),
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: css({
+					display: "flex",
+					alignItems: "center",
+					gap: "3"
+				}),
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: css({
+						minW: "0",
+						flex: "1",
+						display: "flex",
+						alignItems: "center",
+						gap: "2",
+						flexWrap: "wrap",
+						fontSize: "12px",
+						color: "muted"
+					}),
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dot, { tone }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h2", {
+							className: css({
+								fontSize: "18px",
+								fontWeight: "600",
+								m: "0",
+								color: "fg"
+							}),
+							children: ["Run ", /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+								className: css({ fontFamily: "mono" }),
+								children: ["#", run.id]
+							})]
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pill, {
+							tone,
+							title: run.error_count ? requestErrorsHint(run.error_count) : void 0,
+							children: runVerdict(run)
+						}),
+						run.env ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pill, { children: run.env }) : null,
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: formatDateTime(now, run.started_at) }),
+						sep,
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: ["node ", run.node_version] }),
+						run.label && run.label !== run.file ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [sep, /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: run.label })] }) : null
+					]
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: css({
+						display: "flex",
+						gap: "1",
+						flexShrink: 0
+					}),
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconButton, {
+						label: "Older run of this script ([)",
+						disabled: neighbours.prev == null,
+						onClick: () => go(neighbours.prev),
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconChevronLeft, {})
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconButton, {
+						label: "Newer run of this script (])",
+						disabled: neighbours.next == null,
+						onClick: () => go(neighbours.next),
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconChevronRight, {})
+					})]
+				})]
+			}),
+			run.exit_status === "error" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Callout, {
+				tone: "bad",
+				icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconAlert, { size: 15 }),
+				title: run.error_name ?? "The script threw",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: mono,
+					children: run.error_message
+				})
+			}) : null,
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(RunMetrics, { run })
+		]
+	});
+}
+/** What the run cost, in one strip under its title. */
+function RunMetrics({ run }) {
+	const wall = run.finished_at ? run.finished_at - run.started_at : null;
+	const httpCount = run.request_count - run.connection_count;
+	const checks = run.check_count;
+	const failedChecks = run.failed_check_count;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatStrip, { items: [
+		{
+			label: "Wall time",
+			value: formatMs(wall),
+			title: run.finished_at ? "Start to finish" : "Never finished"
+		},
+		{
+			label: "Requests",
+			value: run.connection_count ? `${formatCount(httpCount)} + ${plural(run.connection_count, "connection")}` : formatCount(httpCount),
+			title: `${formatMs(run.total_duration_ms)} in flight`
+		},
+		{
+			label: "Failed requests",
+			value: formatCount(run.error_count),
+			tone: run.error_count ? "warn" : void 0,
+			title: "Errors and ≥ 400 responses — they don't fail the run"
+		},
+		{
+			label: "Checks",
+			value: checks ? `${checks - failedChecks}/${checks}` : "—",
+			tone: failedChecks ? "bad" : checks ? "ok" : void 0,
+			title: checks ? failedChecks ? `${failedChecks} failed` : "All passed" : "None recorded"
+		},
+		{
+			label: "Data",
+			value: formatBytes(run.total_bytes),
+			title: "Sent + received"
+		}
+	] });
+}
+var BAR = {
+	ok: css({ bg: "ok" }),
+	info: css({ bg: "info" }),
+	warn: css({ bg: "warn" }),
+	bad: css({ bg: "bad" }),
+	neutral: css({ bg: "faint" })
+};
+function RequestsTab({ run, requests, checks, analytics }) {
+	const navigate = useNavigate();
+	const [filter, setFilter] = import_react.useState("");
+	const [show, setShow] = import_react.useState("all");
+	const [host, setHost] = import_react.useState(null);
+	const [order, setOrder] = import_react.useState("time");
+	const needle = filter.trim().toLowerCase();
+	const rows = import_react.useMemo(() => {
+		const matches = (text) => !needle || text.toLowerCase().includes(needle);
+		const shown = requests.filter((row) => (show === "all" || isFailure(row)) && (host == null || row.host === host) && matches(`${row.method} ${row.host}${row.path} ${row.status ?? ""}`));
+		const merged = (order === "slowest" ? shown.toSorted((a, b) => b.duration_ms - a.duration_ms) : shown).map((row) => ({
+			type: "request",
+			row
+		}));
+		if (checks.length === 0) return merged;
+		for (const check of checks) {
+			if (show === "failed" && check.status !== "fail") continue;
+			if (!matches(`${check.name} ${check.message ?? ""}`)) continue;
+			merged.push({
+				type: "check",
+				row: check
+			});
+		}
+		return merged.toSorted((a, b) => a.row.ts - b.row.ts);
+	}, [
+		requests,
+		checks,
+		needle,
+		show,
+		host,
+		order
+	]);
+	const start = run.started_at;
+	const span = Math.max(run.finished_at ?? 0, ...requests.map((r) => r.ts + r.duration_ms), ...checks.map((c) => c.ts), start + 1) - start;
+	const failures = requests.filter(isFailure).length + checks.filter((c) => c.status === "fail").length;
+	if (requests.length === 0 && checks.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Empty, { title: "This run made no requests" });
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: css({
+			display: "flex",
+			flexDir: "column",
+			flex: "1",
+			minH: "0"
+		}),
+		children: [
+			analytics && analytics.total > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RequestInsights, {
+				run,
+				analytics,
+				host,
+				onHost: setHost
+			}) : null,
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: css({
+					display: "flex",
+					gap: "2",
+					px: "5",
+					py: "2",
+					alignItems: "center",
+					flexShrink: 0,
+					flexWrap: "wrap"
+				}),
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FilterInput, {
+						className: css({ w: "280px" }),
+						placeholder: checks.length ? "Filter by method, path, status or check" : "Filter by method, path or status",
+						value: filter,
+						onChange: (e) => setFilter(e.target.value)
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Segmented, {
+						items: [{
+							id: "all",
+							label: `All ${requests.length + checks.length}`
+						}, {
+							id: "failed",
+							label: `Failed ${failures}`
+						}],
+						value: show,
+						onSelect: setShow
+					}),
+					analytics ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Segmented, {
+						items: [{
+							id: "time",
+							label: "In order"
+						}, {
+							id: "slowest",
+							label: "Slowest first"
+						}],
+						value: order,
+						onSelect: setOrder
+					}) : null,
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+						className: css({
+							ml: "auto",
+							color: "faint",
+							fontSize: "12px"
+						}),
+						children: ["Timeline spans ", formatMs(span)]
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: scrollPane,
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", {
+					className: table,
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", {
+							className: "num",
+							style: { width: 40 },
+							children: "#"
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { children: "Request" }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { children: "Status" }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", {
+							className: "num",
+							children: "Time"
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", {
+							className: "num",
+							children: "Size"
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", {
+							style: { width: "32%" },
+							children: "Timeline"
+						})
+					] }) }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tbody", { children: [rows.map((item) => item.type === "check" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CheckLine, {
+						check: item.row,
+						start,
+						span
+					}, `c${item.row.id}`) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", {
+						"data-link": true,
+						onClick: () => void navigate({
+							to: "/requests/$requestId",
+							params: { requestId: String(item.row.id) }
+						}),
+						children: [
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+								className: cx("num", mono, css({ color: "faint" })),
+								children: item.row.seq + 1
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+								className: css({
+									maxW: "0",
+									w: "full"
+								}),
+								children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+									className: css({
+										display: "flex",
+										alignItems: "center",
+										gap: "2",
+										minW: "0"
+									}),
+									children: [
+										/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MethodBadge, {
+											method: item.row.method,
+											kind: item.row.kind,
+											width: "list"
+										}),
+										/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+											className: cx(truncate, mono),
+											title: `${item.row.host}${item.row.path}`,
+											children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+												className: css({ color: "faint" }),
+												children: item.row.host
+											}), item.row.path]
+										}),
+										item.row.kind !== "http" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+											className: css({
+												color: "faint",
+												fontSize: "11px",
+												whiteSpace: "nowrap"
+											}),
+											children: plural(item.row.message_count, "message")
+										}) : null
+									]
+								})
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatusBadge, {
+								status: item.row.status,
+								error: item.row.error_name
+							}) }),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+								className: cx("num", mono),
+								children: formatMs(item.row.duration_ms)
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+								className: cx("num", mono, css({ color: "muted" })),
+								children: formatBytes(item.row.response_bytes)
+							}),
+							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+								className: css({
+									position: "relative",
+									h: "8px"
+								}),
+								title: `${formatOffset(item.row.ts - start)} · ${formatMs(item.row.duration_ms)}`,
+								children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+									className: cx(css({
+										position: "absolute",
+										top: "0",
+										bottom: "0",
+										rounded: "full",
+										minW: "2px"
+									}), BAR[statusTone(item.row.status, item.row.error_name)]),
+									style: {
+										left: `${(item.row.ts - start) / span * 100}%`,
+										width: `${item.row.duration_ms / span * 100}%`,
+										opacity: item.row.kind === "http" ? 1 : .5
+									}
+								})
+							}) })
+						]
+					}, item.row.id)), rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+						colSpan: 6,
+						className: css({
+							textAlign: "center",
+							color: "faint",
+							py: "6"
+						}),
+						children: checks.length ? "Nothing matches." : "No requests match."
+					}) }) : null] })]
+				})
+			})
+		]
+	});
+}
+function CheckLine({ check, start, span }) {
+	const pass = check.status === "pass";
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [
+		/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+			className: "num",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: cx(css({
+					display: "inline-flex",
+					verticalAlign: "middle"
+				}), toneText(pass ? "ok" : "bad")),
+				title: pass ? "Passed" : "Failed",
+				children: pass ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconCheckCircle, { size: 13 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconXCircle, { size: 13 })
+			})
+		}),
+		/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+			colSpan: 4,
+			className: css({ maxW: "0" }),
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: css({
+					display: "flex",
+					alignItems: "center",
+					gap: "2",
+					minW: "0",
+					fontSize: "12px"
+				}),
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: css({
+						display: "inline-block",
+						w: "46px",
+						flexShrink: 0,
+						fontFamily: "mono",
+						fontSize: "10.5px",
+						fontWeight: "700",
+						letterSpacing: "0.02em",
+						color: "faint"
+					}),
+					children: check.mode === "assert" ? "ASSERT" : "CHECK"
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+					className: cx(truncate, pass ? css({ color: "muted" }) : css({
+						color: "bad",
+						fontWeight: "500"
+					})),
+					children: [check.name, !pass && check.message ? ` — ${check.message}` : ""]
+				})]
+			})
+		}),
+		/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: css({
+				position: "relative",
+				h: "8px"
+			}),
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: cx(css({
+					position: "absolute",
+					top: "-1px",
+					w: "2px",
+					h: "10px",
+					rounded: "full"
+				}), pass ? BAR.ok : BAR.bad),
+				style: { left: `${(check.ts - start) / span * 100}%` }
+			})
+		}) })
+	] });
+}
+function ChecksTab({ run, checks }) {
+	if (checks.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Empty, {
+		title: "No checks in this run",
+		icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconCheckCircle, { size: 22 }),
+		children: [
+			"A script records expectations with ",
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { children: "check()" }),
+			" and ",
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { children: "assert()" }),
+			" from",
+			" ",
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { children: "@apisurf/wire/kit" }),
+			"."
+		]
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: scrollPane,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: pagePad,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Card, { children: checks.map((check) => {
+				const pass = check.status === "pass";
+				return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: css({
+						display: "flex",
+						gap: "2.5",
+						px: "3",
+						py: "2",
+						borderBottom: "1px solid",
+						borderColor: "line",
+						_last: { borderBottom: "none" }
+					}),
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+							className: cx(css({ pt: "1px" }), toneText(pass ? "ok" : "bad")),
+							children: pass ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconCheckCircle, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconXCircle, { size: 16 })
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+							className: css({
+								flex: "1",
+								minW: "0"
+							}),
+							children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+								className: css({
+									display: "flex",
+									gap: "2",
+									alignItems: "center"
+								}),
+								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+									className: css({ fontWeight: "500" }),
+									children: check.name
+								}), check.mode === "assert" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pill, {
+									tone: pass ? "neutral" : "bad",
+									children: "assert"
+								}) : null]
+							}), !pass && check.message ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+								className: cx(mono, css({
+									color: "bad",
+									mt: "0.5",
+									wordBreak: "break-word"
+								})),
+								children: check.message
+							}) : null]
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+							className: cx(mono, css({
+								color: "faint",
+								whiteSpace: "nowrap"
+							})),
+							children: formatOffset(check.ts - run.started_at)
+						})
+					]
+				}, check.id);
+			}) })
+		})
+	});
+}
+var MIX_TONE = {
+	"1xx": "info",
+	"2xx": "ok",
+	"3xx": "info",
+	"4xx": "warn",
+	"5xx": "bad",
+	error: "bad"
+};
+function RequestInsights({ run, analytics, host, onHost }) {
+	const latencyHint = `Over ${plural(analytics.latencySamples, "HTTP request")}. A WebSocket or SSE connection's duration is how long it stayed open, so it is left out.` + (run.connection_count ? ` This run opened ${plural(run.connection_count, "connection")}.` : "");
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: css({
+			display: "flex",
+			flexDir: "column",
+			gap: "2",
+			px: "5",
+			pt: "3",
+			pb: "1",
+			flexShrink: 0
+		}),
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: css({
+				display: "flex",
+				flexWrap: "wrap",
+				alignItems: "center",
+				rowGap: "2",
+				columnGap: "5"
+			}),
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Metric, {
+					label: "p50",
+					value: formatMs(analytics.p50),
+					title: latencyHint
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Metric, {
+					label: "p95",
+					value: formatMs(analytics.p95),
+					title: latencyHint
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Metric, {
+					label: "p99",
+					value: formatMs(analytics.p99),
+					title: latencyHint
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(StatusMix, { analytics })
+			]
+		}), analytics.byHost.length > 1 || host != null ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: css({
+				display: "flex",
+				flexWrap: "wrap",
+				alignItems: "center",
+				gap: "1.5"
+			}),
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: css({
+					color: "muted",
+					fontSize: "12px",
+					mr: "1"
+				}),
+				children: "Hosts"
+			}), analytics.byHost.map((row) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostChip, {
+				row,
+				pressed: host === row.host,
+				onClick: () => onHost(host === row.host ? null : row.host)
+			}, row.host))]
+		}) : null]
+	});
+}
+function StatusMix({ analytics }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: css({
+			display: "flex",
+			alignItems: "center",
+			gap: "3",
+			minW: "0"
+		}),
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: css({
+				display: "flex",
+				gap: "2px",
+				h: "8px",
+				w: "160px",
+				flexShrink: 0
+			}),
+			role: "img",
+			"aria-label": "Status mix",
+			children: analytics.statusMix.map((mix) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				title: `${mix.status_class}: ${mix.count}`,
+				className: cx(css({
+					rounded: "full",
+					minW: "4px"
+				}), BAR[MIX_TONE[mix.status_class] ?? "neutral"]),
+				style: { flexGrow: mix.count }
+			}, mix.status_class))
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: css({
+				display: "flex",
+				gap: "3",
+				flexWrap: "wrap",
+				fontSize: "12px"
+			}),
+			children: analytics.statusMix.map((mix) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+				className: css({
+					display: "inline-flex",
+					alignItems: "center",
+					gap: "1"
+				}),
+				title: `${Math.round(mix.count / analytics.total * 100)}% of requests`,
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: cx(mono, toneText(MIX_TONE[mix.status_class] ?? "neutral")),
+					children: mix.status_class
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: css({ color: "muted" }),
+					children: mix.count
+				})]
+			}, mix.status_class))
+		})]
+	});
+}
+function HostChip({ row, pressed, onClick }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+		type: "button",
+		"aria-pressed": pressed,
+		onClick,
+		title: `${plural(row.count, "call")} · p95 ${formatMs(row.p95)}${row.errors ? ` · ${plural(row.errors, "error")}` : ""} — click to ${pressed ? "show every host" : "show only this host"}`,
+		className: css({
+			display: "inline-flex",
+			alignItems: "center",
+			gap: "1.5",
+			h: "24px",
+			px: "2",
+			rounded: "md",
+			border: "1px solid",
+			borderColor: "line",
+			bg: "raised",
+			color: "fg",
+			cursor: "pointer",
+			fontSize: "12px",
+			_hover: {
+				borderColor: "lineStrong",
+				bg: "hover"
+			},
+			"&[aria-pressed=true]": {
+				borderColor: "accent",
+				bg: "accentSoft",
+				color: "accent"
+			}
+		}),
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: mono,
+				children: row.host
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: css({
+					color: "muted",
+					fontVariantNumeric: "tabular-nums"
+				}),
+				children: row.count
+			}),
+			row.errors ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+				className: css({
+					color: "warn",
+					fontVariantNumeric: "tabular-nums"
+				}),
+				children: [row.errors, "✕"]
+			}) : null
+		]
+	});
+}
+function DetailsTab({ run, tags }) {
+	const now = useNow(Date.now(), 6e4);
+	const rows = [
+		{
+			name: "id",
+			value: String(run.id)
+		},
+		{
+			name: "uid",
+			value: run.uid
+		},
+		{
+			name: "label",
+			value: run.label ?? "—"
+		},
+		{
+			name: "entry",
+			value: run.entry
+		},
+		{
+			name: "cwd",
+			value: run.cwd
+		},
+		{
+			name: "env",
+			value: run.env ?? "—"
+		},
+		{
+			name: "node",
+			value: run.node_version
+		},
+		{
+			name: "started",
+			value: formatDateTime(now, run.started_at)
+		},
+		{
+			name: "finished",
+			value: run.finished_at ? formatDateTime(now, run.finished_at) : "—"
+		},
+		{
+			name: "exit status",
+			value: run.exit_status ?? "—"
+		}
+	];
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: scrollPane,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: pagePad,
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionTitle, { children: "Run" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Card, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(KvTable, {
+					rows,
+					empty: "",
+					filterable: false,
+					nameLabel: "Field"
+				}) })] }),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionTitle, { children: "Tags" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Card, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(KvTable, {
+					rows: tags.map((t) => ({
+						name: t.key,
+						value: t.value
+					})),
+					empty: "No tags — add them with wire execute --tag key=value",
+					filterable: false
+				}) })] }),
+				run.entry_source ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionTitle, { children: "Inline source" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Card, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: css({ bg: "well" }),
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Code, { text: run.entry_source })
+				}) })] }) : null
+			]
+		})
+	});
+}
+//#endregion
+export { RunPage as component };