@apisurf/wireui 0.1.2

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

@@ -0,0 +1,836 @@
+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 };