@apisurf/wireui 0.1.2 → 0.1.3

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

@@ -1,836 +0,0 @@
-import { __toESM } from "../_runtime.mjs";
-import { Link, require_jsx_runtime, require_react, useNavigate } from "../_libs/@tanstack/react-router+[...].mjs";
-import { Callout, Card, Dot, Empty, FilterInput, IconAlert, IconButton, IconCheckCircle, IconChevronLeft, IconChevronRight, IconCollections, IconXCircle, MethodBadge, Pill, Route, SectionTitle, Segmented, Stat, StatGrid, StatusBadge, TabList, css, cx, formatBytes, formatCount, formatDateTime, formatMs, formatOffset, isFailure, mono, pagePad, plural, runTone, runVerdict, scrollPane, statusTone, tabKey, table, toneText, truncate, useNow, useTab, useUnreadable } from "./router-CPcgc_kh.mjs";
-import { Code, KvTable } from "./kv-table-DQUkoItO.mjs";
-//#region node_modules/.nitro/vite/services/ssr/assets/runs._runId-Df_LmPHa.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 = "requests" } = 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"
-	});
-	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.jsx)(RunHeader, {
-				run,
-				neighbours
-			}),
-			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TabList, {
-				items: [
-					{
-						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: "insights",
-						label: "Insights"
-					},
-					{
-						id: "details",
-						label: "Details",
-						count: tags.length || void 0
-					}
-				],
-				value: tab,
-				onSelect: (next) => void navigate({ search: { tab: next === "requests" ? void 0 : next } })
-			}),
-			tab === "requests" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RequestsTab, {
-				run,
-				requests,
-				checks
-			}) : null,
-			tab === "checks" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChecksTab, {
-				run,
-				checks
-			}) : null,
-			tab === "insights" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(InsightsTab, {
-				run,
-				analytics
-			}) : null,
-			tab === "details" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DetailsTab, {
-				run,
-				tags
-			}) : null
-		]
-	});
-}
-function RunHeader({ run, neighbours }) {
-	const navigate = useNavigate();
-	const now = useNow(Date.now(), 6e4);
-	const tone = runTone(run);
-	const wall = run.finished_at ? run.finished_at - run.started_at : null;
-	const httpCount = run.request_count - run.connection_count;
-	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("header", {
-		className: css({
-			px: "5",
-			pt: "4",
-			pb: "3",
-			display: "flex",
-			flexDir: "column",
-			gap: "3",
-			flexShrink: 0
-		}),
-		children: [
-			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-				className: css({
-					display: "flex",
-					alignItems: "flex-start",
-					gap: "3"
-				}),
-				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-					className: css({
-						minW: "0",
-						flex: "1"
-					}),
-					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-						className: css({
-							display: "flex",
-							alignItems: "center",
-							gap: "2"
-						}),
-						children: [
-							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Dot, { tone }),
-							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", {
-								className: cx(truncate, css({
-									fontSize: "18px",
-									fontWeight: "600",
-									m: "0"
-								})),
-								children: run.file
-							}),
-							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
-								className: cx(mono, css({
-									color: "faint",
-									fontSize: "13px"
-								})),
-								children: ["#", run.id]
-							}),
-							/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pill, {
-								tone,
-								children: runVerdict(run)
-							}),
-							run.env ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Pill, { children: run.env }) : null
-						]
-					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-						className: css({
-							display: "flex",
-							gap: "2",
-							mt: "1",
-							color: "muted",
-							flexWrap: "wrap",
-							fontSize: "12px"
-						}),
-						children: [
-							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Link, {
-								to: "/collections",
-								search: { entry: run.entry },
-								className: cx(mono, css({
-									color: "muted",
-									display: "inline-flex",
-									gap: "1",
-									alignItems: "center",
-									_hover: { color: "accent" }
-								})),
-								title: run.entry,
-								children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconCollections, { size: 12 }), run.rel]
-							}),
-							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "·" }),
-							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: formatDateTime(now, run.started_at) }),
-							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "·" }),
-							/* @__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: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "·" }), /* @__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: () => neighbours.prev && void navigate({
-							to: "/runs/$runId",
-							params: { runId: String(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: () => neighbours.next && void navigate({
-							to: "/runs/$runId",
-							params: { runId: String(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.jsxs)(StatGrid, { children: [
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stat, {
-					label: "Wall time",
-					value: formatMs(wall),
-					sub: run.finished_at ? "start to finish" : "never finished"
-				}),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stat, {
-					label: "Requests",
-					value: formatCount(httpCount),
-					sub: run.connection_count ? `+ ${plural(run.connection_count, "connection")}` : `${formatMs(run.total_duration_ms)} in flight`
-				}),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stat, {
-					label: "Failed requests",
-					value: formatCount(run.error_count),
-					tone: run.error_count ? "warn" : "ok",
-					sub: "errors and ≥ 400"
-				}),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stat, {
-					label: "Checks",
-					value: run.check_count ? `${run.check_count - run.failed_check_count}/${run.check_count}` : "—",
-					tone: run.failed_check_count ? "bad" : run.check_count ? "ok" : void 0,
-					sub: run.check_count ? run.failed_check_count ? `${run.failed_check_count} failed` : "all passed" : "none recorded"
-				}),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stat, {
-					label: "Data",
-					value: formatBytes(run.total_bytes),
-					sub: "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 }) {
-	const navigate = useNavigate();
-	const [filter, setFilter] = import_react.useState("");
-	const [show, setShow] = import_react.useState("all");
-	const [withChecks, setWithChecks] = import_react.useState(true);
-	const needle = filter.trim().toLowerCase();
-	const visible = requests.filter((r) => (show === "all" || isFailure(r)) && (!needle || `${r.method} ${r.host}${r.path} ${r.status ?? ""}`.toLowerCase().includes(needle)));
-	const rows = import_react.useMemo(() => {
-		const merged = visible.map((row) => ({
-			type: "request",
-			row
-		}));
-		if (!withChecks || needle || show === "failed") return merged;
-		for (const check of checks) merged.push({
-			type: "check",
-			row: check
-		});
-		return merged.toSorted((a, b) => a.row.ts - b.row.ts);
-	}, [
-		visible,
-		checks,
-		withChecks,
-		needle,
-		show
-	]);
-	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;
-	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: [/* @__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: "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}`
-					}, {
-						id: "failed",
-						label: `Failed ${failures}`
-					}],
-					value: show,
-					onSelect: setShow
-				}),
-				checks.length ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", {
-					className: css({
-						display: "inline-flex",
-						alignItems: "center",
-						gap: "1.5",
-						color: "muted",
-						fontSize: "12px",
-						cursor: "pointer"
-					}),
-					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
-						type: "checkbox",
-						checked: withChecks,
-						onChange: (e) => setWithChecks(e.target.checked)
-					}), "Show checks inline"]
-				}) : 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: "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", {}),
-		/* @__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: cx(css({
-						display: "inline-flex",
-						w: "46px",
-						justifyContent: "center"
-					}), toneText(pass ? "ok" : "bad")),
-					children: pass ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconCheckCircle, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconXCircle, { size: 14 })
-				}), /* @__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 InsightsTab({ run, analytics }) {
-	const navigate = useNavigate();
-	if (analytics.total === 0) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Empty, { title: "Nothing to analyse — this run made no requests" });
-	const maxHost = Math.max(...analytics.byHost.map((h) => h.count), 1);
-	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)(StatGrid, { children: [
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stat, {
-						label: "p50 latency",
-						value: formatMs(analytics.p50),
-						sub: `over ${plural(analytics.latencySamples, "HTTP request")}`
-					}),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stat, {
-						label: "p95 latency",
-						value: formatMs(analytics.p95)
-					}),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stat, {
-						label: "p99 latency",
-						value: formatMs(analytics.p99)
-					}),
-					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Stat, {
-						label: "Hosts",
-						value: formatCount(analytics.byHost.length),
-						sub: analytics.byHost[0]?.host
-					})
-				] }),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionTitle, { children: "Status mix" }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Card, {
-					className: css({ p: "3" }),
-					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-						className: css({
-							display: "flex",
-							gap: "2px",
-							h: "14px"
-						}),
-						children: analytics.statusMix.map((mix) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-							title: `${mix.status_class}: ${mix.count}`,
-							className: cx(css({
-								rounded: "sm",
-								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: "4",
-							mt: "2.5",
-							flexWrap: "wrap"
-						}),
-						children: analytics.statusMix.map((mix) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
-							className: css({
-								display: "inline-flex",
-								alignItems: "center",
-								gap: "1.5"
-							}),
-							children: [
-								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: cx(css({
-									w: "8px",
-									h: "8px",
-									rounded: "xs"
-								}), BAR[MIX_TONE[mix.status_class] ?? "neutral"]) }),
-								/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-									className: mono,
-									children: mix.status_class
-								}),
-								/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
-									className: css({ color: "muted" }),
-									children: [
-										mix.count,
-										" · ",
-										Math.round(mix.count / analytics.total * 100),
-										"%"
-									]
-								})
-							]
-						}, mix.status_class))
-					})]
-				})] }),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
-					className: css({
-						display: "grid",
-						gridTemplateColumns: {
-							base: "1fr",
-							lg: "1fr 1fr"
-						},
-						gap: "5"
-					}),
-					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionTitle, { children: "By host" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Card, { 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", { children: "Host" }),
-							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", {
-								className: "num",
-								children: "Calls"
-							}),
-							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", {
-								className: "num",
-								children: "Errors"
-							}),
-							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", {
-								className: "num",
-								children: "p95"
-							})
-						] }) }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: analytics.byHost.map((host) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", { children: [
-							/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("td", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-								className: cx(mono, truncate),
-								children: host.host
-							}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
-								className: css({
-									h: "3px",
-									mt: "1",
-									bg: "accent",
-									rounded: "full",
-									opacity: .6
-								}),
-								style: { width: `${host.count / maxHost * 100}%` }
-							})] }),
-							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
-								className: "num",
-								children: host.count
-							}),
-							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
-								className: cx("num", host.errors ? css({ color: "warn" }) : void 0),
-								children: host.errors
-							}),
-							/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
-								className: cx("num", mono),
-								children: formatMs(host.p95)
-							})
-						] }, host.host)) })]
-					}) })] }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SectionTitle, { children: "Slowest requests" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Card, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("table", {
-						className: table,
-						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: analytics.slowest.map((row) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", {
-							"data-link": true,
-							onClick: () => void navigate({
-								to: "/requests/$requestId",
-								params: { requestId: String(row.id) }
-							}),
-							children: [/* @__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",
-										gap: "2",
-										alignItems: "center",
-										minW: "0"
-									}),
-									children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MethodBadge, {
-										method: row.method,
-										width: "list"
-									}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
-										className: cx(mono, truncate),
-										children: row.path
-									})]
-								})
-							}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
-								className: cx("num", mono),
-								children: formatMs(row.duration_ms)
-							})]
-						}, row.id)) })
-					}) })] })]
-				}),
-				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", {
-					className: css({
-						color: "faint",
-						fontSize: "12px",
-						m: "0"
-					}),
-					children: ["Latency covers HTTP requests only; a WebSocket or SSE connection's duration is how long it stayed open.", run.connection_count ? ` This run opened ${plural(run.connection_count, "connection")}.` : ""]
-				})
-			]
-		})
-	});
-}
-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 };