@ogygia/devtools 0.0.0 → 0.11.1

package/dist/profiler/ui/ReportBody.svelte

@@ -0,0 +1,2592 @@
+<script>/**
+* The full SSR profile report. Static sections render server-side; the interactive widgets are
+* `wake:'load'` islands (treemap, flame graph, sortable tables, export button). Ports report.ts's
+* render_report — no HTML strings, no minified script blobs.
+*
+* THE ORDER IS THE POINT: what to fix first (the findings, the paths, the one render explained),
+* then the stories that need reading (memory, the data, the islands and the browser, the
+* network), then the raw tables everything above is an aggregate of. Nothing is left out; the
+* raw numbers come last.
+*/
+import { derive_findings, span_rows, cold_rows, page_score_of } from "../report.js";
+import { fmt_ms, fmt_pct, fmt_bytes, label_of, CATEGORY_COLOR, CATEGORY_LABEL, ink_on } from "./format.js";
+import { build_treemap, treemap_legend, budget_segments, waiting_rows, top_hosts, waterfall_rows, request_rows, island_rows, seed_rows, hole_rows, spark as build_spark } from "./report-data.js";
+import IslandsTable from "./IslandsTable.svelte" with { wake: "load" };
+import Paths from "./Paths.svelte" with { wake: "load" };
+import Awaits from "./Awaits.svelte" with { wake: "load" };
+import SeedExplainer from "./SeedExplainer.svelte" with { wake: "load" };
+import Shell from "./Shell.svelte";
+import ExportButton from "./ExportButton.svelte" with { wake: "load" };
+// (awake on load: it sits in a closed <details>, and a tick made before a later wake is lost)
+import WhatIf from "./WhatIf.svelte" with { wake: "load" };
+import ScoreCard from "./ScoreCard.svelte";
+import Treemap from "./Treemap.svelte" with { wake: "load" };
+import Flame from "./Flame.svelte" with { wake: "load" };
+import ComponentsTable from "./ComponentsTable.svelte" with { wake: "load" };
+import FunctionsTable from "./FunctionsTable.svelte" with { wake: "load" };
+import WaitingTable from "./WaitingTable.svelte" with { wake: "load" };
+import Waterfall from "./Waterfall.svelte" with { wake: "load" };
+import ShareLink from "./ShareLink.svelte" with { wake: "load" };
+import Timeline from "./Timeline.svelte" with { wake: "load" };
+import Scrub from "./Scrub.svelte" with { wake: "load" };
+import RenderSteps from "./RenderSteps.svelte" with { wake: "load" };
+import AllocStrip from "./AllocStrip.svelte";
+import Ledger from "./Ledger.svelte";
+import Patterns from "./Patterns.svelte";
+import Drill from "./Drill.svelte";
+import { unread_rows } from "../drill.js";
+import { PATTERN_LABEL, fix_impact } from "../patterns.js";
+import OnThisPage from "./OnThisPage.svelte" with { wake: "load" };
+import OneClock from "./OneClock.svelte" with { wake: "load" };
+import ByteStrip from "./ByteStrip.svelte" with { wake: "load" };
+import DataRiver from "./DataRiver.svelte" with { wake: "load" };
+import IslandHeatmap from "./IslandHeatmap.svelte" with { wake: "load" };
+import DomTravel from "./DomTravel.svelte" with { wake: "load" };
+import KeepLocal from "./KeepLocal.svelte" with { wake: "load" };
+import DownloadHtml from "./DownloadHtml.svelte" with { wake: "load" };
+import { OGP_ELEMENT_ID } from "./report-request.js";
+import { island_rows_of, island_name } from "../report.js";
+import { PHASE_LABEL } from "../timeline.js";
+import { sync_io, memo_candidates, span_values } from "../insights.js";
+import { render_steps } from "../steps.js";
+import { row_href } from "./row-anchor.svelte.js";
+// The report renderer, fed the fields directly — from the server (a logged-in `/report/[id]`) OR
+// from a decrypted share-link `#fragment` (PermalinkGate). One body, two sources.
+let { a, meta, base, extras, ogpB64, history = null, prev = null, since = null, dev = false, kept = false } = $props();
+// the one element the export buttons read the page's .ogp bytes from (`\x2f` is `/`: a literal
+// closing script tag would end this script block)
+const ogp_element = (b64) => `<script type="application/octet-stream" id="${OGP_ELEMENT_ID}">${b64}<\x2fscript>`;
+const fmt_kb = (b) => `${Math.round(b / 1024)} KB`;
+// The ogygia page score — derived here from the same meta+extras the findings read, so the card
+// and the findings never disagree (report.ts serializes the same value for agents).
+const score = $derived(page_score_of(meta, extras));
+// ogygia's own cost on the profiled page: the request with the largest side-channels
+const og = $derived([...meta.requests].filter((r) => r.og).sort((x, y) => y.og.seed_bytes + y.og.tail_bytes - (x.og.seed_bytes + x.og.tail_bytes))[0]?.og ?? null);
+// history: this page's medians over time (page mode), newest last
+const hist = $derived(history && history.points.length >= 2 ? history.points : null);
+const hist_geom = $derived.by(() => {
+	if (!hist) return null;
+	const w = 320, h = 48, pad = 4;
+	const max = Math.max(...hist.map((p) => p.median), 1);
+	const step = hist.length > 1 ? (w - 2 * pad) / (hist.length - 1) : 0;
+	const pts = hist.map((p, i) => [pad + i * step, h - pad - p.median / max * (h - 2 * pad)]);
+	return {
+		w,
+		h,
+		max,
+		pts,
+		poly: pts.map(([x, y]) => `${x},${y}`).join(" ")
+	};
+});
+const hist_prev = $derived(hist ? hist[hist.length - 2] : null);
+const hist_last = $derived(hist ? hist[hist.length - 1] : null);
+const hist_delta = $derived(hist_prev && hist_last && hist_prev.median > 0 ? (hist_last.median - hist_prev.median) / hist_prev.median * 100 : 0);
+const busy_pct = $derived(a.duration_ms > 0 ? a.busy_ms / a.duration_ms * 100 : 0);
+const net = $derived(extras.net.filter((c) => c.ms >= 0));
+const net_total = $derived(net.reduce((s, c) => s + c.ms + (c.body_ms ?? 0), 0));
+const findings = $derived(derive_findings(a, meta, extras));
+// what fixing every slow pattern is worth, against the median render (page mode) or the window
+const render_ms = $derived(meta.runs?.length ? [...meta.runs].sort((x, y) => x - y)[Math.floor(meta.runs.length / 2)] : a.duration_ms);
+// a CPU pattern's numbers cover every profiled render; a wait pattern's, one
+const renders = $derived(meta.runs?.length || 1);
+// the report's own forecast (overlapping fixes counted once, moot ones left out, deleted work in);
+// an older report without one: the plain sum, waits capped at the render's waiting
+const fc = $derived(extras.forecast);
+const old = $derived(fc ? undefined : fix_impact(extras.patterns ?? [], render_ms, renders, a.timeline?.wait_ms));
+const impact = $derived(fc ? {
+	render_ms: fc.now_ms,
+	after_ms: fc.after_ms,
+	pct: fc.now_ms > 0 ? Math.round((fc.now_ms - fc.after_ms) / fc.now_ms * 100) : 0,
+	cpu_ms: fc.cpu_ms,
+	wait_ms: fc.wait_ms,
+	delete_ms: fc.delete_ms
+} : old ? {
+	...old,
+	delete_ms: 0
+} : undefined);
+/** fixes whose saving another on the same lines already covers: counted once */
+const covered = $derived((fc?.parts ?? []).filter((p) => p.with?.length));
+const all_patterns = $derived((extras.patterns ?? []).map((p, i) => {
+	const s = p.sites[0];
+	// the caller that loops, else (a wait in a helper) the first line that called the helper
+	const at = s?.via?.find((v) => v.in_loop) ?? (p.wait ? s?.via?.[0] : undefined) ?? s;
+	const worth = p.kept_bytes ? `keeps ${fmt_bytes(p.kept_bytes)} a render${p.requests_left !== undefined ? `, heap full in ~${p.requests_left} requests` : ""}` : p.seed_bytes ? `ships ${fmt_bytes(p.seed_bytes)} a page view` : p.kind === "sync-io" && !p.cost_ms ? "blocks the server on every request (too quick to time here)" : p.wait ? p.kind === "same-document" || p.kind === "almost-same-document" ? `~${fmt_ms(p.save_ms)} ms: the whole render, served from a cache` : `~${fmt_ms(p.save_ms)} ms less waiting` : `~${fmt_ms(p.save_ms / renders)} ms less CPU a render`;
+	// memory and seed lead where they are (they are sorted first for a reason); time, by ms a render
+	// (a leak that crashes the server, 8 MB+ a render, and a whole shipped seed lead; a small kept
+	// amount waits behind the time savings — the same rule as the agent's plan)
+	const value = (p.kept_bytes ?? 0) >= 8 * 1048576 || p.seed_bytes ? Infinity : p.kept_bytes ? -1 : p.wait ? p.save_ms : p.save_ms / renders;
+	return {
+		i,
+		label: PATTERN_LABEL[p.kind],
+		where: at ? `${at.file}:${at.line}` : "",
+		worth,
+		href: `#pattern-${i}`,
+		value
+	};
+}));
+const from_patterns = $derived(all_patterns.slice(0, 3));
+// WORK FOR DATA NOTHING READS (the drill-down's rows whose every key is unread): all of it goes,
+// so it ranks with the patterns by its ms in one render
+const unread = $derived(unread_rows(extras.drill));
+const unread_ms = $derived(unread.reduce((s, r) => s + r.ms, 0));
+// a pattern inside that work (the date parsing in a function that builds only an unread key) is
+// moot: deleting it beats speeding it up
+const gone_names = $derived(new Set(unread.map((r) => r.label)));
+const gone_at = $derived(new Set(unread.flatMap((r) => r.at ? [r.at] : [])));
+const moot = (i) => {
+	const p = typeof i === "number" ? extras.patterns?.[i] : undefined;
+	return !!p && p.sites.every((s) => gone_at.has(`${s.file}:${s.line}`) || (s.fn ? gone_names.has(s.fn.split(" ")[0]) : false));
+};
+// WITH A FORECAST: its order (each saving once, a covered fix folded into the one that covers it)
+// and its running total after each step; memory and a shipped seed still lead
+const from_forecast = $derived(fc?.parts.length ? [...all_patterns.filter((s) => s.value === Infinity || s.value === -1), ...fc.parts.flatMap((p, rank) => {
+	if (p.kind === "unread-work") {
+		const keys = p.title.slice(p.title.indexOf("(") + 1, -1);
+		// the place to edit: a LINE row that fills the key (the load's line), else the biggest row
+		const rows = unread.filter((r) => r.keys.join(", ") === keys);
+		const row = rows.find((r) => r.kind === "line" && r.at) ?? rows[0];
+		return [{
+			i: `unread-${rank}`,
+			label: "Work for data nothing reads",
+			where: row?.at ?? row?.label ?? "",
+			worth: `~${fmt_ms(p.ms)} ms a render (${keys})`,
+			href: "#drill",
+			value: 1e9 - rank,
+			...p.after_ms !== undefined ? { after: p.after_ms } : {}
+		}];
+	}
+	const at = (extras.patterns ?? []).findIndex((x) => x.title === p.title);
+	if (at === -1) return [];
+	return [{
+		...all_patterns[at],
+		value: 1e9 - rank,
+		...p.after_ms !== undefined ? { after: p.after_ms } : {},
+		...p.with?.length ? { also: p.with } : {}
+	}];
+})] : undefined);
+const start_here = $derived((from_forecast ?? [...from_patterns.filter((s) => unread_ms < 1 || !moot(s.i)), ...unread_ms >= 1 ? [{
+	i: "unread",
+	label: "Work for data nothing reads",
+	where: unread[0].at ?? unread[0].label,
+	worth: `~${fmt_ms(unread_ms)} ms a render (${[...new Set(unread.flatMap((r) => r.keys))].slice(0, 3).join(", ")})`,
+	href: "#drill",
+	value: unread_ms
+}] : []]).sort((x, y) => y.value - x.value).slice(0, 3));
+// group the findings by the area they touch, so "what to fix" reads as a few labelled clusters,
+// not one wall — warnings float to the top of each cluster
+const FCAT_ORDER = [
+	"Network",
+	"CPU",
+	"Memory",
+	"Data & seed",
+	"Islands & delivery",
+	"Overview"
+];
+const fcat = (code) => {
+	const has = (...ks) => ks.some((k) => code.includes(k));
+	if (has("await", "network", "n-plus", "upstream", "self-fetch", "sequential")) return "Network";
+	if (has("gc", "alloc", "mem", "retain", "promise")) return "Memory";
+	if (has("seed", "key-", "props", "river", "data")) return "Data & seed";
+	if (has("island", "wake", "hole", "cold")) return "Islands & delivery";
+	if (has("cpu", "path", "component", "deopt", "memo", "span", "loop", "sync", "value")) return "CPU";
+	return "Overview";
+};
+const finding_groups = $derived(FCAT_ORDER.map((label) => ({
+	label,
+	items: findings.filter((f) => fcat(f.code) === label).sort((x, y) => x.severity === y.severity ? 0 : x.severity === "warn" ? -1 : 1)
+})).filter((g) => g.items.length));
+const warn_count = $derived(findings.filter((f) => f.severity === "warn").length);
+// component memory join + counts
+const allocByName = $derived.by(() => {
+	const m = new Map();
+	for (const h of extras.heap ?? []) m.set(h.name, (m.get(h.name) ?? 0) + h.self_bytes);
+	// a component's bytes: everything allocated under it, nested components excluded
+	for (const c of extras.heap_components ?? []) m.set(c.name, c.bytes);
+	return m;
+});
+const hasAlloc = $derived(allocByName.size > 0);
+const hasCounts = $derived(a.components.some((c) => c.calls != null) || a.functions.some((f) => f.calls != null));
+// PER CALL: the time adds up every render, the call count is ONE render's (the coverage render),
+// so one call is the time per render over the calls in a render
+const withExtras = (f) => {
+	const count = f.calls ?? 0;
+	return {
+		...f,
+		per: f.total_ms / renders / (count > 0 ? count : 1),
+		count,
+		alloc: allocByName.get(f.name) ?? null
+	};
+};
+const compRows = $derived(a.components.map(withExtras));
+const compMaxTotal = $derived(Math.max(...a.components.map((c) => c.total_ms), 1));
+const stats = $derived.by(() => {
+	const out = [
+		{
+			value: fmt_ms(meta.duration_ms) + " ms",
+			label: "window"
+		},
+		{
+			value: busy_pct.toFixed(0) + "%",
+			label: "CPU busy"
+		},
+		{
+			value: net.length ? fmt_ms(net_total) + " ms" : "0",
+			label: `network (${net.length} calls)`
+		},
+		(
+		// per render, the unit of the render time and the lines (the window holds every run)
+		{
+			value: fmt_ms((extras.gc_attr ? extras.gc_attr.summary.total_ms : a.gc_ms) / renders) + " ms",
+			label: renders > 1 ? "garbage collection per render" : "garbage collection"
+		}),
+		{
+			value: String(meta.requests.length),
+			label: "requests in window"
+		}
+	];
+	if (extras.gc) out.push({
+		value: fmt_ms(extras.gc.max_ms) + " ms",
+		label: `GC pause max (${extras.gc.count})`
+	});
+	if (meta.loop_delay) out.push({
+		value: fmt_ms(meta.loop_delay.p99) + " ms",
+		label: "loop delay p99"
+	});
+	if (meta.elu_percent !== undefined) out.push({
+		value: meta.elu_percent.toFixed(0) + "%",
+		label: "event loop use"
+	});
+	if (meta.rss_mb !== undefined) out.push({
+		value: meta.rss_mb + " MB",
+		label: "memory (rss)"
+	});
+	out.push({
+		value: String(a.sample_count),
+		label: "samples"
+	});
+	if (meta.overhead && meta.overhead.cpu_ms + meta.overhead.gc_ms > 0) out.push({
+		value: `−${fmt_ms(meta.overhead.cpu_ms + meta.overhead.gc_ms)} ms`,
+		label: `profiler's own cost, taken out${meta.overhead.per_run_ms ? ` (${fmt_ms(meta.overhead.per_run_ms)} ms per render)` : ""}`
+	});
+	return out;
+});
+const runsMedian = $derived(meta.trigger === "page" && meta.runs?.length ? [...meta.runs].sort((x, y) => x - y)[Math.floor(meta.runs.length / 2)] : 0);
+const budget = $derived(budget_segments(a));
+const tree = $derived(build_treemap(a));
+const legend = $derived(treemap_legend(a));
+const hosts = $derived(top_hosts(net).slice(0, 12));
+const netSorted = $derived([...net].sort((x, y) => y.ms + (y.body_ms ?? 0) - (x.ms + (x.body_ms ?? 0))).slice(0, 60));
+const wf = $derived(waterfall_rows(net));
+const waiting = $derived(waiting_rows(net, extras.io ?? []));
+const spans = $derived(span_rows(extras.spans));
+const span_runs = $derived(meta.trigger === "page" ? Math.max(meta.runs?.length ?? 1, 1) : 1);
+const tagged = $derived(meta.requests.filter((r) => r.tags && Object.keys(r.tags).length));
+const waitMax = $derived(waiting[0]?.ms || 1);
+const spark = $derived(build_spark(extras.mem));
+const measures = $derived(extras.measures ?? []);
+const heap = $derived(extras.heap ?? []);
+const files = $derived(a.files.filter((f) => f.category !== "idle").slice(0, 25));
+const buckets = $derived(a.buckets.filter((b) => b.category !== "idle").slice(0, 15));
+const maxBucket = $derived(Math.max(...a.buckets.map((b) => b.self_ms), 1));
+// the ogygia side of the page: islands (server + build + browser joined), the seed, the holes
+const islands = $derived(island_rows(a, meta, extras));
+const hasJs = $derived(islands.some((r) => r.js_bytes !== null));
+const hasClient = $derived(islands.some((r) => !!r.client));
+const flagged = $derived(islands.filter((r) => r.advice).length);
+const seed = $derived(seed_rows(meta));
+const holes = $derived(hole_rows(meta));
+const vitals = $derived(extras.vitals ?? null);
+const client_marks = $derived(extras.client_marks ?? []);
+// every island fingerprint on the page → its component name (the browser's pictures are keyed by fingerprint)
+const fp_names = $derived.by(() => {
+	const out = {};
+	for (const r of island_rows_of(meta)) out[r.fp] = island_name(r);
+	return out;
+});
+// each hole id → its component (and props, for a single copy): One clock's hole lanes
+const hole_names = $derived.by(() => {
+	const out = {};
+	for (const h of holes) if (h.name) out[h.id] = h.props && h.count <= 1 ? `${h.name} ${h.props}` : h.name;
+	return out;
+});
+const visit = $derived(extras.visit ?? null);
+const server_clock = $derived(a.timeline ? {
+	window_ms: a.timeline.window_ms,
+	phases: a.timeline.phases.map((p) => ({
+		phase: p.phase,
+		label: PHASE_LABEL[p.phase] ?? p.phase,
+		cpu_ms: p.cpu_ms,
+		wait_ms: p.wait_ms
+	}))
+} : null);
+const page_path = $derived(meta.page ?? meta.request?.path ?? null);
+// WHO CAUSED THE GC: the pauses on the timeline's clock (the window starts `window_offset_ms` into the capture)
+const gc_attr = $derived(extras.gc_attr ?? null);
+const gc_ticks = $derived(gc_attr ? gc_attr.pauses.map((p) => ({
+	t: p.t - (gc_attr.window_offset_ms ?? 0),
+	ms: p.ms,
+	kind: p.kind,
+	why: p.why,
+	top: p.top.slice(0, 3).map((x) => `${x.name}${x.component && x.component !== x.name ? ` in ${x.component}` : ""} ${Math.round(x.share * 100)}%`).join(", ")
+})) : []);
+// the pauses on the capture's clock, for the heap chart (it spans every run)
+const gc_on_capture = $derived(gc_attr ? gc_attr.pauses.map((p) => ({
+	t: p.t,
+	ms: p.ms,
+	kind: p.kind
+})) : []);
+// the scrubber's marks: the pauses inside the window, the few longest
+const scrub_marks = $derived(gc_ticks.filter((g) => g.t >= 0 && (a.timeline ? g.t <= a.timeline.window_ms : true)).sort((x, y) => y.ms - x.ms).slice(0, 8).map((g) => ({
+	t: g.t,
+	label: `GC ${fmt_ms(g.ms)}`
+})));
+const fmt_mb = (b) => `${Math.round(b / 1048576 * 10) / 10} MB`;
+// more from the same snapshot: deopts, sync I/O, promises, memo candidates, what a render keeps
+const deopt_rows = $derived(a.deopts ?? []);
+const sync_rows = $derived(sync_io(a));
+const memo_rows = $derived(memo_candidates(a, gc_attr?.makers ?? []));
+// THE FUNCTIONS TABLE: the 80 with the most self time, plus every function another part of the
+// report links to (`#fn=<key>`). A slow pattern's line, a path's middle frame or a leak's maker
+// often has little self time; without its row the link opened nothing (43 of 67 on a heavy page).
+const fn_key = (f) => f.key ?? f.name + " " + f.url;
+const linked = $derived.by(() => {
+	const out = new Set();
+	for (const f of findings) if (f.anchor?.startsWith("fn:")) out.add(f.anchor.slice(3));
+	for (const l of extras.ledger ?? []) if (l.fn) out.add(l.fn);
+	for (const p of extras.patterns ?? []) for (const s of p.sites) {
+		if (s.fn) out.add(s.fn);
+		for (const v of s.via ?? []) if (v.fn) out.add(v.fn);
+	}
+	const walk_path = (n) => {
+		if (n.key && n.category !== "component") out.add(n.key);
+		for (const c of n.children) walk_path(c);
+	};
+	for (const g of a.paths ?? []) walk_path(g.tree);
+	for (const s of sync_rows) out.add(s.key);
+	for (const m of memo_rows) out.add(m.key);
+	for (const d of deopt_rows) out.add(d.key);
+	return out;
+});
+const fnRows = $derived([...a.functions.slice(0, 80), ...a.functions.slice(80).filter((f) => linked.has(fn_key(f)))].map(withExtras));
+// the rows a `#fn=` link can reach: a key outside them gets no link (a library frame with no
+// time of its own sits on a path but has no row)
+const fn_keys = $derived(fnRows.map(fn_key));
+const fn_known = $derived(new Set(fn_keys));
+const anchor_ok = (anchor) => !anchor.startsWith("fn:") || fn_known.has(anchor.slice(3));
+const promises = $derived(extras.promises ?? null);
+const promises_per_render = $derived(promises ? Math.round(promises.count / Math.max(meta.runs?.length ?? 1, 1)) : 0);
+const retained = $derived(extras.retained ?? null);
+// the render step by step, when the heap grew, the instance's other requests, the data's lineage, the spans' values
+const steps = $derived(a.timeline ? render_steps(a.timeline, a.stacks) ?? null : null);
+const alloc = $derived(extras.alloc ?? null);
+const contention = $derived(extras.contention ?? null);
+const contention_others = $derived(contention ? contention.requests.filter((r) => r.kind === "other").length : 0);
+const lineage = $derived(extras.lineage ?? null);
+const lineage_keys = $derived(lineage ? lineage.keys.slice(0, 40) : []);
+const value_rows = $derived(span_values(extras.spans));
+const cold = $derived(cold_rows(a, meta));
+const holes_seen = $derived(holes.some((h) => h.requests > 0));
+// page mode: N runs of one page → fold identical requests into one row with the count + medians
+const reqs = $derived(request_rows(meta.requests, meta.trigger === "page").slice(0, 60));
+const folded = $derived(meta.trigger === "page" && reqs.some((r) => r.count > 1));
+const title = $derived(`SSR profile — ${label_of(meta)}`);
+const VERDICT_LABEL = {
+	island: "read by an island",
+	server: "server only, not shipped",
+	"server-only": "server only, but shipped",
+	unread: "nobody reads it",
+	unknown: "unknown"
+};
+const contention_self = $derived(contention ? contention.requests.filter((r) => r.kind === "self").length : 0);
+</script>
+
+<svelte:head><title>{title}</title></svelte:head>
+
+<Shell {base} current={meta.id} toc>
+	<OnThisPage />
+
+	<h1>
+		SSR profile
+		<small
+			>{label_of(meta)} · {new Date(meta.created).toLocaleString()} · node {meta.node}{a.sourcemapped
+				? ' · sourcemapped'
+				: ''}</small
+		>
+	</h1>
+	<div class="actions">
+		{#if meta.trigger === 'page' && meta.page}
+			<!-- fix the code, then this: the same page profiled again, opened as a comparison with this report -->
+			<a
+				class="btn primary"
+				href="{base}/run?p={encodeURIComponent(meta.page)}&runs={meta.runs?.length ||
+					3}&against={meta.id}"
+				title="Profile {meta.page} again and compare it with this report: which patterns and lines your change fixed"
+				>Profile again &amp; compare</a
+			>
+		{/if}
+		<!-- the buttons read the page's .ogp bytes from the one element below when clicked
+		     (report-request.ts page_ogp), never as a prop each: five copies were 1.2 MB -->
+		{#if ogpB64 || kept}<ExportButton id={meta.id} {base} />{/if}
+		{#if ogpB64 || kept}<ShareLink id={meta.id} {base} />{/if}
+		<KeepLocal {base} id={meta.id} />
+		<DownloadHtml {base} id={meta.id} />
+		<a class="btn" href="{base}/view">Import<span class="sub">.ogp</span></a>
+	</div>
+	{#if ogpB64}{@html ogp_element(ogpB64)}{/if}
+	<p class="hint">
+		<a href={base}>← dashboard</a> ·
+		<DownloadHtml {base} id={meta.id} as="json" link /> (agents) ·
+		<a href="{base}/report/{meta.id}/raw" download="ogygia-profile-{meta.id}.cpuprofile"
+			>.cpuprofile</a
+		>
+		(DevTools / speedscope) · Export is an encrypted <code>.ogp</code> — re-open it with Import (needs
+		this profiler's key)
+	</p>
+
+	<ScoreCard {score} />
+
+	<div class="summary">
+		{#each stats as st}<div class="stat"><b>{st.value}</b><span>{st.label}</span></div>{/each}
+	</div>
+
+	<!-- ═══════════════ 1 · WHAT TO FIX ═══════════════ -->
+	<div class="part"><span class="part-n">1</span><span class="part-t">What to fix</span></div>
+
+	{#if since}
+		<!-- SINCE THE LAST PROFILE of this page: did the change pay, and which rows moved -->
+		<section class="since">
+			{#if since.score && since.score.a !== since.score.b}
+				{@const ds = since.score.b - since.score.a}
+				<p data-since-score>
+					<b class={ds < 0 ? 'warn' : 'good'}>Score {since.score.a} → {since.score.b}</b> ({since
+						.score.a_grade} → {since.score.b_grade}){#if since.score.moved.length}: {since.score.moved
+							.map((m) => `${m.label} ${m.a} → ${m.b}`)
+							.join(', ')}{/if}.
+				</p>
+			{/if}
+			{#if since.browser}
+				<!-- the browser's findings, each report read with its own visit -->
+				<p data-since-browser>
+					<b>In the browser</b>{#if since.browser.fixed.length}: <span class="good"
+							>fixed {since.browser.fixed.join(' · ')}</span
+						>{/if}{#if since.browser.added.length}{since.browser.fixed.length ? ';' : ':'}
+						<span class="warn">new {since.browser.added.join(' · ')}</span>{/if}.
+				</p>
+			{/if}
+			{#if since.vitals}
+				<!-- the vitals each report's own visit measured, and the part of each that moved most -->
+				{@const label = (k) => (k === 'cls' ? 'CLS' : k.toUpperCase())}
+				{@const val = (k, v) => (k === 'cls' ? String(v) : `${fmt_ms(v)} ms`)}
+				<p data-since-vitals>
+					<b class={since.vitals.some((v) => v.b > v.a) ? 'warn' : 'good'}>Vitals</b>: {since.vitals
+						.map(
+							(v) =>
+								`${label(v.key)} ${val(v.key, v.a)} → ${val(v.key, v.b)}${v.part ? ` (${v.part.label} ${fmt_ms(v.part.a)} → ${fmt_ms(v.part.b)} ms)` : ''}`
+						)
+						.join('; ')}.
+				</p>
+			{/if}
+			{#if since.islands}
+				{@const isl = since.islands}
+				<!-- what the deploy costs a returning visitor: each island keeps its file (its cache still
+				     serves it) or moves to a new one (downloaded again) -->
+				<p data-since-islands>
+					<b class={isl.moved.length ? 'warn' : 'good'}
+						>Island files: {isl.moved.length} changed, {isl.kept} kept</b
+					>{#if isl.moved.length}{' '}— a returning visitor downloads {isl.bytes
+							? fmt_bytes(isl.bytes) + ' '
+							: ''}again for {isl.moved
+							.slice(0, 6)
+							.map((m) => m.name)
+							.join(', ')}{isl.moved.length > 6
+							? ` and ${isl.moved.length - 6} more`
+							: ''}{/if}.{#if isl.all_moved}{' '}Every island changed: if their code did not, the
+						build's names are not stable. SvelteKit bakes its version (the build time, by default)
+						into its client code — set <code>kit.version.name</code> to your commit.{/if}
+				</p>
+			{/if}
+			{#if since.assets}
+				{@const d = since.assets}
+				{@const line = (c) =>
+					`${c.name}${c.contains ? ` (${c.contains.join(', ')})` : ''}`}
+				<!-- the files behind a JS move: known by what they hold (hashed names change every build) -->
+				<p data-since-assets>
+					<b class={d.js.b > d.js.a ? 'warn' : 'good'}
+						>JS at start {fmt_bytes(d.js.a)} → {fmt_bytes(d.js.b)}</b
+					>{d.lazy_js.a !== d.lazy_js.b
+						? ` (loads later ${fmt_bytes(d.lazy_js.a)} → ${fmt_bytes(d.lazy_js.b)})`
+						: ''}{#if d.added.length}; new: {d.added
+							.map((c) => `${line(c)} ${fmt_bytes(c.b)}${c.lazy ? ' later' : ''}`)
+							.join('; ')}{/if}{#if d.grew.length}; grew: {d.grew
+							.map((c) => `${line(c)} ${fmt_bytes(c.a)} → ${fmt_bytes(c.b)}`)
+							.join('; ')}{/if}{#if d.shrank.length}; shrank: {d.shrank
+							.map((c) => `${line(c)} ${fmt_bytes(c.a)} → ${fmt_bytes(c.b)}`)
+							.join('; ')}{/if}{#if d.removed.length}; gone: {d.removed
+							.map((c) => `${line(c)} ${fmt_bytes(c.a)}`)
+							.join('; ')}{/if}{#if d.to_start.length}; now at start (it loaded later before — an
+						island's wake changed?): {d.to_start
+							.map((c) => `${line(c)} ${fmt_bytes(c.b)}`)
+							.join('; ')}{/if}{#if d.to_later.length}; now loads later: {d.to_later
+							.map((c) => `${line(c)} ${fmt_bytes(c.b)}`)
+							.join('; ')}{/if}.
+				</p>
+			{/if}
+			{#if since.order}
+				<p>
+					<b>Run order changes this comparison:</b> both ran on one server after a render that kept {since
+						.order.kept_mb} MB alive each time, so the later one ran on a fuller heap. Restart between
+					profiles to compare.
+				</p>
+			{:else if since.same}
+				<p>
+					<b>No real change since your last profile</b
+					>{#if since.a_ms !== undefined && since.b_ms !== undefined}&nbsp;({fmt_ms(since.a_ms)} → {fmt_ms(
+							since.b_ms
+						)} ms, within the runs' own spread){/if}.
+				</p>
+			{:else if since.a_ms !== undefined && since.b_ms !== undefined}
+				{@const d = since.b_ms - since.a_ms}
+				<p>
+					<b class={d > 0 ? 'warn' : 'good'}>{d > 0 ? '+' : '−'}{fmt_ms(Math.abs(d))} ms</b> since
+					your last profile ({fmt_ms(since.a_ms)} → {fmt_ms(since.b_ms)} ms){#if since.moved.length},
+						mostly:{:else}.{/if}
+				</p>
+			{/if}
+			{#if !since.order && !since.same && since.moved.length}
+				<ul>
+					{#each since.moved as r, i (r.path.join('\0') + i)}
+						<li>
+							<span class="status {r.status}">{r.status}</span>
+							{r.path[r.path.length - 1]}{#if r.at && r.kind !== 'line'}
+								<code>{r.at}</code>{/if}
+							<b class={r.d_ms > 0 ? 'warn' : 'good'}
+								>{r.d_ms > 0 ? '+' : '−'}{fmt_ms(Math.abs(r.d_ms))} ms</b
+							>
+						</li>
+					{/each}
+				</ul>
+			{/if}
+			{#if since.fix_check && !since.same && !since.order}<p class="hint">
+					The fixed patterns promised ~{fmt_ms(since.fix_check.predicted_ms)} ms; the render moved {fmt_ms(
+						since.fix_check.measured_ms
+					)} ms.
+				</p>{/if}
+			<a class="btn" href="{base}/compare/{since.prev}/{meta.id}">Compare in full</a>
+		</section>
+	{/if}
+
+	{#if start_here.length}
+		<!-- START HERE: the three biggest fixes, each with the line to open and what it is worth -->
+		<ol class="start">
+			{#each start_here as s (s.i)}
+				<li>
+					<a href={s.href}><b>{s.label}</b></a>
+					{#if s.where}<code>{s.where}</code>{/if}
+					<span class="worth">{s.worth}</span>
+					{#if s.after !== undefined}<span
+							class="then"
+							title="one render once this and every step above it are done"
+							>→ ~{fmt_ms(s.after)} ms</span
+						>{/if}
+					{#if s.also?.length}<span class="hint">also covers {s.also.join('; ')}</span>{/if}
+				</li>
+			{/each}
+		</ol>
+	{/if}
+
+	{#if warn_count}<p class="findings-lead">
+			<b>{warn_count}</b> thing{warn_count === 1 ? '' : 's'} worth fixing, grouped by area. The rest are
+			context.
+		</p>{/if}
+	<div class="fgrid">
+		{#each finding_groups as g (g.label)}
+			<section class="fgroup">
+				<h3 class="fgroup-h">{g.label} <span class="fgroup-n">{g.items.length}</span></h3>
+				{#each g.items as f, i (f.code + i)}
+					<div class="finding" class:warn={f.severity === 'warn'}>
+						<p class="fmsg">{f.message}</p>
+						{#if f.fix}<p class="ffix">{f.fix}</p>{/if}
+						{#if f.pattern !== undefined && extras.patterns?.[f.pattern]}
+							<a class="fshow fpat" href="#pattern-{f.pattern}"
+								>same problem as “{PATTERN_LABEL[extras.patterns[f.pattern].kind]}” ↓</a
+							>
+						{/if}
+						{#if f.anchor && anchor_ok(f.anchor)}<a class="fshow" href={row_href(f.anchor)}
+								>show the row ↓</a
+							>{/if}
+						{#if f.file && !f.anchor}<span class="ffile"
+								>{f.file}{#if f.line}:{f.line}{/if}</span
+							>{/if}
+					</div>
+				{/each}
+			</section>
+		{/each}
+	</div>
+
+	{#if extras.drill}
+		<section class="panel" id="drill">
+			<h2>
+				Where one render went <span class="hint" style="font-weight:400">(down to the line)</span>
+			</h2>
+			<Drill root={extras.drill} />
+		</section>
+	{/if}
+
+	{#if extras.patterns?.length}
+		<section class="panel">
+			<h2>Slow patterns</h2>
+			{#if impact && impact.render_ms > impact.after_ms}
+				<p class="impact">
+					Fixing all of these takes about <b>{fmt_ms(impact.render_ms - impact.after_ms)} ms</b> off
+					the {fmt_ms(impact.render_ms)} ms render (<b>{impact.pct}%</b>): about {fmt_ms(
+						impact.after_ms
+					)} ms after.
+					<span class="hint">
+						{[
+							impact.cpu_ms ? `${fmt_ms(impact.cpu_ms)} ms of CPU` : '',
+							impact.wait_ms ? `${fmt_ms(impact.wait_ms)} ms of waiting` : '',
+							impact.delete_ms
+								? `${fmt_ms(impact.delete_ms)} ms of work for data nothing reads`
+								: ''
+						]
+							.filter(Boolean)
+							.join(', ')} per render.
+						{#if covered.length}
+							Fixes on the same lines count once: {covered
+								.map((p) => `“${p.title}” covers ${p.with.map((w) => `“${w}”`).join(', ')}`)
+								.join('; ')}.
+						{/if}
+						{#if fc?.answers}Keeping the services’ answers between renders too (if they may be a
+							little stale): about <b>{fmt_ms(fc.answers.after_ms)} ms</b>{#if fc.answers.measured},
+								measured: the page rendered in {fmt_ms(fc.answers.measured.ms)} ms with those answers
+								served from memory{/if}.{/if}
+						{#if fc?.cpu_now_ms && fc.cpu_after_ms && fc.cpu_after_ms < fc.cpu_now_ms * 0.9}
+							{@const lambda_gbs = (ms) =>
+								(((ms / 1000) * (meta.lambda_mb ?? 0)) / 1024) * 1e6}
+							Capacity: the main thread spends {fmt_ms(fc.cpu_now_ms)} ms of CPU a render, about {fmt_ms(
+								fc.cpu_after_ms
+							)} ms after the CPU fixes, so one core serves about
+							<b>{Math.round(1000 / fc.cpu_now_ms)} → {Math.round(1000 / fc.cpu_after_ms)}</b>
+							renders a second (the waiting fixes cut how long a visitor waits, not this).
+							{#if meta.lambda_mb}On Lambda at {meta.lambda_mb} MB, billed for the whole render, waits
+								included: about {Math.round(lambda_gbs(impact.render_ms)).toLocaleString('en')} → {Math.round(
+									lambda_gbs(impact.after_ms)
+								).toLocaleString('en')} GB-seconds per million renders.{/if}
+						{/if}
+						{#if fc?.cache}A cached copy of the whole document is a separate lever, not in this
+							number.{/if}
+						{#if fc?.clamped}The savings claimed more waiting or CPU than the render had (they
+							overlap more than the lines show): each is held at what the render used.{/if}
+						{#if fc?.partial}Built without sourcemaps: the profiler saw fewer lines, so fewer fixes;
+							the real time after them is likely lower.{/if}
+					</span>
+				</p>
+			{/if}
+			{#if fc?.parts.length}
+				<details class="whatif-box">
+					<summary>Pick the fixes you will make</summary>
+					<WhatIf parts={fc.parts} now_ms={fc.now_ms} caps={fc.caps} />
+				</details>
+			{/if}
+			<p class="hint">
+				Known slow habits spotted on your costliest lines, and the numbers that back each one.
+				Biggest win first.
+			</p>
+			<Patterns patterns={extras.patterns} busy_ms={a.busy_ms} {renders} fns={fn_keys} />
+		</section>
+	{/if}
+
+	{#if extras.ledger?.length}
+		<section class="panel">
+			<h2>The exact lines</h2>
+			<p class="hint">
+				Your own lines that cost the most, with every cost on the line{renders > 1
+					? `, per render (the average of ${renders})`
+					: ''}. Click a place to open its function.
+			</p>
+			<Ledger lines={extras.ledger} patterns={extras.patterns ?? []} {renders} fns={fn_keys} />
+		</section>
+	{/if}
+
+	<div class="grid">
+		<section class="panel">
+			<h2>Where the time went</h2>
+			<p class="hint">
+				The whole window, wall-clock. If the biggest segment is "idle / waiting", the server was
+				blocked on I/O, not computing — look at Network below. If it's "your code", the treemap and
+				Components table show exactly where.
+			</p>
+			<div class="budget">
+				{#each budget as s}
+					<div
+						style="width:{s.pct}%;background:{CATEGORY_COLOR[s.cat]};color:{ink_on(
+							CATEGORY_COLOR[s.cat]
+						)}"
+						title="{s.label} — {fmt_ms(s.ms / renders)} ms{renders > 1
+							? ' per render'
+							: ''} ({s.pct.toFixed(1)}%)"
+					>
+						{s.pct > 8 ? `${s.label} ${s.pct.toFixed(0)}%` : ''}
+					</div>
+				{/each}
+			</div>
+			{#if busy_pct < 25}
+				<p class="hint" style="color:var(--warn)">
+					This window barely used the CPU ({busy_pct.toFixed(0)}% busy) — the bottleneck is
+					<b>waiting</b>, not computing. Look at "Waiting by function" below; the treemap is just
+					the small slice of real CPU work.
+				</p>
+			{/if}
+		</section>
+		{#if hist && hist_geom && hist_last && hist_prev}
+			<section class="panel">
+				<h2>History of {meta.page}</h2>
+				<div class="history">
+					<svg width={hist_geom.w} height={hist_geom.h} viewBox="0 0 {hist_geom.w} {hist_geom.h}">
+						<polyline points={hist_geom.poly} fill="none" stroke="#6ca8e0" stroke-width="1.5" />
+						{#each hist_geom.pts as [x, y], i (i)}
+							<circle cx={x} cy={y} r="3" fill={hist[i].id === meta.id ? '#e0834a' : '#6ca8e0'}>
+								<title
+									>{fmt_ms(hist[i].median)} ms · {new Date(hist[i].created).toLocaleString()}</title
+								>
+							</circle>
+						{/each}
+					</svg>
+					<div>
+						<p class="hint">
+							{hist.map((p) => fmt_ms(p.median) + ' ms').join(' → ')} (median render, oldest first).
+							{#if Math.abs(hist_delta) >= 5}
+								<b class={hist_delta > 0 ? 'warn' : 'good'}
+									>{hist_delta > 0 ? '+' : ''}{hist_delta.toFixed(0)}%</b
+								> against the previous run.
+							{/if}
+						</p>
+						{#if prev}<a class="btn" href="{base}/compare/{prev}/{meta.id}"
+								>Compare with the previous run</a
+							>{/if}
+					</div>
+				</div>
+			</section>
+		{/if}
+	</div>
+
+	{#if a.paths?.length}
+		<section class="panel">
+			<h2>
+				Paths to fix <span class="hint" style="font-weight:400"
+					>({a.paths.length}: hot functions that share one caller)</span
+				>
+			</h2>
+			<p class="hint">
+				The hot-functions table ranks them one by one, but several often sit on <b>one call path</b
+				>: fix the caller they share and all of them go. Each graph reads left to right: the caller
+				to fix, the chain of calls, the hot functions (lit) at the end. Link width is the time that
+				flowed through; click a node for its row.
+			</p>
+			<Paths paths={a.paths} busy={a.busy_ms} fns={fn_keys} />
+		</section>
+	{/if}
+
+	<!-- ═══════════════ 2 · WHY IT TOOK THIS LONG ═══════════════ -->
+	{#if a.timeline}
+		<div class="part">
+			<span class="part-n">2</span><span class="part-t">Why it took this long</span>
+		</div>
+		<section class="panel">
+			<h2>Why this render took {fmt_ms(a.timeline.window_ms)} ms</h2>
+			<p class="hint">
+				One render, left to right, start to end. Each block is a stretch of time: solid means the
+				CPU was running the thing named on it, striped means the server was waiting for a call to
+				come back. The numbered steps below are the same blocks in order — the biggest is the one to
+				fix first.
+			</p>
+			<Timeline t={a.timeline} gc={gc_ticks} />
+			{#if a.timeline.awaits && a.timeline.awaits.nodes.length >= 2}
+				<h3 class="sub-h">
+					Which call waited for which <span class="hint"
+						>the render's calls on one clock, arrows where one started only after another finished</span
+					>
+				</h3>
+				<Awaits
+					nodes={a.timeline.awaits.nodes}
+					edges={a.timeline.awaits.edges}
+					window_ms={a.timeline.window_ms}
+				/>
+			{/if}
+			{#if a.stacks}
+				<h3 class="sub-h">
+					Slice it <span class="hint"
+						>the render's CPU samples themselves — drag a range for what ran there, hover for the
+						stack at that instant</span
+					>
+				</h3>
+				<p class="hint">
+					Every table in this report is an aggregate over the whole render. This is the same data
+					before aggregation:
+					{a.stacks.raw.toLocaleString()} samples, each with its stack. Slice the busy stretch on the
+					strip and the tables answer for that stretch alone; the yellow marks are the collections.
+				</p>
+				<Scrub stacks={a.stacks} marks={scrub_marks} />
+			{/if}
+			{#if steps && steps.steps.length > 1}
+				<h3 class="sub-h">
+					Step through it <span class="hint"
+						>the same render as a sequence: this ran, then the server waited for that, then…</span
+					>
+				</h3>
+				<RenderSteps {steps} />
+			{/if}
+		</section>
+	{/if}
+
+	{#if contention && contention.requests.length}
+		<section class="panel">
+			<h2>
+				The instance was not alone <span class="hint" style="font-weight:400"
+					>({contention.requests.length} request{contention.requests.length === 1 ? '' : 's'} ran here
+					during the profiled render{(meta.runs?.length ?? 1) > 1 ? 's' : ''}{#if contention_self}: {contention_self}
+						the page's own calls to itself{/if}{#if contention_others}, {contention_others} from elsewhere{/if})</span
+				>
+			</h2>
+			<p class="hint">
+				One Node process, one event loop: every other request's turn on the CPU is a wait inside the
+				render's wall time with no frame of its own. Something else was in flight for <b
+					>{Math.round(contention.busy_share * 100)}%</b
+				>
+				of the window{#if contention.cpu_max_ms > 0}, taking up to <b
+						>{fmt_ms(contention.cpu_max_ms)} ms</b
+					> of CPU from it (an upper bound — a request's CPU is a process-wide delta, so overlapping requests
+					carry some of each other's){/if}.
+				{#if contention_others === 0}None of them is a stranger: they are the page's own calls to
+					this same server, and its holes — the render waited on itself.{/if}
+				The CPU tables above exclude the others; the wall time does not.
+			</p>
+			<table>
+				<thead
+					><tr
+						><th>request</th><th>route</th><th class="num">status</th><th class="num">ms</th><th
+							class="num">overlapped</th
+						><th class="num">CPU, at most</th><th>what</th></tr
+					></thead
+				>
+				<tbody>
+					{#each contention.requests.slice(0, 20) as r, i (i)}
+						<tr>
+							<td class="fn">{r.method} {r.path}</td>
+							<td class="file">{r.route ?? '—'}</td>
+							<td class="num">{r.status || '—'}</td>
+							<td class="num">{fmt_ms(r.ms)}</td>
+							<td class="num"><b>{fmt_ms(r.overlap_ms)}</b></td>
+							<td class="num">{fmt_ms(r.cpu_max_ms)}</td>
+							<td class="hint"
+								>{r.kind === 'hole'
+									? "one of the page's own holes"
+									: r.kind === 'self'
+										? 'the render calling its own server'
+										: 'another request'}</td
+							>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+			{#if contention.inflight_at_start.some((n) => n > 0)}
+				<p class="hint">
+					In flight when each profiled render started: {contention.inflight_at_start.join(', ')}.
+				</p>
+			{/if}
+		</section>
+	{/if}
+
+	<!-- ═══════════════ 3 · MEMORY ═══════════════ -->
+	{#if spark}
+		<div class="part"><span class="part-n">3</span><span class="part-t">Memory</span></div>
+		{#if gc_attr && (gc_attr.pauses.length || gc_attr.makers.length)}
+			<section class="panel">
+				<h2>
+					Who caused the GC <span class="hint" style="font-weight:400"
+						>(each pause joined to what filled the heap before it)</span
+					>
+				</h2>
+				<div class="summary">
+					<div class="stat">
+						<b>{gc_attr.summary.count}</b><span
+							>pauses in the window · {gc_attr.summary.minor} minor · {gc_attr.summary.major} major{gc_attr
+								.summary.incremental
+								? ` · ${gc_attr.summary.incremental} incremental`
+								: ''}</span
+						>
+					</div>
+					<div class="stat">
+						<b>{fmt_ms(gc_attr.summary.total_ms / renders)} ms</b><span
+							>in GC{renders > 1 ? ' per render' : ''} · longest pause {fmt_ms(
+								gc_attr.summary.max_ms
+							)} ms</span
+						>
+					</div>
+					<div class="stat">
+						<b>{Math.round((gc_attr.summary.allocated_mb / renders) * 10) / 10} MB</b><span
+							>allocated{renders > 1 ? ' per render' : ' in the window'} · {gc_attr.summary
+								.alloc_rate_mb_s} MB/s</span
+						>
+					</div>
+					{#if gc_attr.summary.retained_mb !== undefined}<div class="stat">
+							<b>{gc_attr.summary.retained_mb > 0 ? '+' : ''}{gc_attr.summary.retained_mb} MB</b
+							><span
+								>heap held at the end vs the start{gc_attr.summary.retained_mb <= 5
+									? ' — the rest was churn'
+									: ' — something keeps what it allocates'}</span
+							>
+						</div>{/if}
+					{#if gc_attr.summary.overhead_ms >= 0.5}<div class="stat">
+							<b>−{fmt_ms(gc_attr.summary.overhead_ms)} ms</b><span
+								>the profiler's own garbage, taken out ({fmt_ms(gc_attr.summary.measured_ms)} ms measured)</span
+							>
+						</div>{/if}
+				</div>
+				{#if gc_attr.makers.length}
+					{@const with_pauses = gc_attr.makers.some((m) => m.pauses > 0)}
+					{@const with_comp = gc_attr.makers.some((m) => m.component)}
+					<h3 class="sub-h">
+						Garbage makers <span class="hint"
+							>allocators by the pause time their allocations caused{renders > 1
+								? ', per render'
+								: ''}</span
+						>
+					</h3>
+					<table>
+						<thead
+							><tr
+								><th>function</th>{#if with_comp}<th>in</th>{/if}<th>where</th><th class="num"
+									>allocated</th
+								><th class="num">share</th><th class="num">GC ms caused</th>{#if with_pauses}<th
+										class="num">pauses</th
+									>{/if}</tr
+							></thead
+						>
+						<tbody>
+							{#each gc_attr.makers.slice(0, 20) as m (m.key)}
+								<tr>
+									<td class="fn"
+										><b>{m.name}</b>{#if m.caller && m.caller !== m.name}<span class="hint">
+												← {m.caller}</span
+											>{/if}</td
+									>
+									{#if with_comp}<td class="fn">{m.component ?? '—'}</td>{/if}
+									<td class="file"
+										>{m.url ? `${m.url.split('/').slice(-3).join('/')}:${m.line}` : ''}
+										<span class="hint">{m.category}</span></td
+									>
+									<td class="num">{fmt_mb(m.allocated / renders)}</td>
+									<td class="num">{Math.round(m.share * 100)}%</td>
+									<td class="num"><b>{fmt_ms(m.gc_ms / renders)}</b></td>
+									{#if with_pauses}<td class="num">{m.pauses}</td>{/if}
+								</tr>
+							{/each}
+						</tbody>
+					</table>
+				{/if}
+				{#if gc_attr.components.length}
+					<p class="hint">
+						By component: {#each gc_attr.components.slice(0, 6) as c, i (c.name)}{#if i > 0},
+							{/if}<b>{c.name}</b>
+							{fmt_ms(c.gc_ms / renders)} ms of GC for {fmt_mb(
+								c.allocated / renders
+							)}{/each}{renders > 1 ? ', per render' : ''}.
+					</p>
+				{/if}
+				{#if gc_attr.pauses.length}
+					<h3 class="sub-h">
+						The pauses <span class="hint"
+							>when, what kind, and what was allocated since the previous one</span
+						>
+					</h3>
+					<table>
+						<thead
+							><tr
+								><th class="num">at</th><th>kind</th><th class="num">ms</th><th class="num"
+									>allocated before</th
+								><th>why</th><th>running then</th></tr
+							></thead
+						>
+						<tbody>
+							{#each gc_attr.pauses.slice(0, 40) as p, i (i)}
+								<tr>
+									<td class="num">{fmt_ms(p.t - (gc_attr.window_offset_ms ?? 0))} ms</td>
+									<td class="fn">{p.kind}{p.forced ? ' (forced)' : ''}</td>
+									<td class="num"
+										><b>{fmt_ms(p.ms)}</b>{#if p.ms_measured - p.ms >= 0.5}<span class="hint">
+												({fmt_ms(p.ms_measured)} measured)</span
+											>{/if}</td
+									>
+									<td class="num">{p.estimated ? '≈' : ''}{fmt_mb(p.allocated)}</td>
+									<td class="file">{p.why}</td>
+									<td class="fn"
+										>{#if p.top.length}{#each p.top.slice(0, 3) as x, j (x.key)}{#if j > 0},
+												{/if}{x.name}{#if x.component && x.component !== x.name}
+													<span class="hint">in {x.component}</span>{/if}
+												{Math.round(x.share * 100)}%{/each}{:else if p.running}<b
+												>{p.running.label}</b
+											>{#if p.running.file}
+												<span class="hint">{p.running.file.split('/').slice(-2).join('/')}</span
+												>{/if}{:else}—{/if}</td
+									>
+								</tr>
+							{/each}
+						</tbody>
+					</table>
+					{#if gc_attr.pauses.length > 40}<p class="hint">
+							and {gc_attr.pauses.length - 40} more pauses.
+						</p>{/if}
+				{/if}
+				<p class="hint">
+					A minor pause happens when the young space fills; a major one when the old space grows.
+					Who allocated comes from one read of the allocation profile at the end of the window
+					(reading it during the work set off collections of its own), so "GC ms caused" gives each
+					allocator its share of the pauses by its share of everything allocated, and a pause's
+					"allocated before" is the window's rate over the stretch since the previous pause.
+					"Running then" is what the CPU was doing when the pause fell, from the timeline. The
+					profiler's own allocations are taken out of every pause.
+				</p>
+			</section>
+		{/if}
+		{#if alloc}
+			<section class="panel">
+				<h2>
+					When the heap grew <span class="hint" style="font-weight:400"
+						>(the used heap over the whole recording, and the stretches it grew fastest — with what
+						ran then)</span
+					>
+				</h2>
+				<AllocStrip {alloc} gc={gc_on_capture} />
+			</section>
+		{/if}
+		{#if retained}
+			<section class="panel">
+				<h2>
+					What a render leaves behind <span class="hint" style="font-weight:400"
+						>(one more render, a full collection, then what is still alive — by the line that made
+						it)</span
+					>
+				</h2>
+				<div class="summary">
+					<div class="stat">
+						<b>{fmt_mb(retained.total_bytes)}</b><span
+							>still alive after the render and a full collection</span
+						>
+					</div>
+					<div class="stat">
+						<b>{fmt_ms(retained.render_ms)} ms</b><span>that render (outside the runs)</span>
+					</div>
+				</div>
+				{#if retained.sites.length}
+					<table>
+						<thead
+							><tr
+								><th>allocated by</th><th>in</th><th>where</th><th class="num">kept</th><th
+									class="num">share</th
+								></tr
+							></thead
+						>
+						<tbody>
+							{#each retained.sites.slice(0, 15) as s, i (i)}
+								<tr>
+									<td class="fn"
+										><b>{s.name}</b>{#if s.caller && s.caller !== s.name}<span class="hint">
+												← {s.caller}</span
+											>{/if}</td
+									>
+									<td class="fn">{s.component ?? '—'}</td>
+									<td class="file"
+										>{s.url ? `${s.url.split('/').slice(-3).join('/')}:${s.line}` : ''}</td
+									>
+									<td class="num">{fmt_mb(s.bytes)}</td>
+									<td class="num">{Math.round(s.share * 100)}%</td>
+								</tr>
+							{/each}
+						</tbody>
+					</table>
+				{/if}
+				<p class="hint">
+					These objects were made by one render and something still holds them after a full
+					collection: a module-level cache, a registry, a closure kept by a long-lived object. The
+					line is where they were made; their owner is what keeps them. A page that keeps this much
+					per render grows until the instance restarts.
+				</p>
+			</section>
+		{/if}
+	{/if}
+
+	<!-- ═══════════════ 4 · HIDDEN COSTS ═══════════════ -->
+	{#if sync_rows.length || promises_per_render >= 1000 || memo_rows.length || deopt_rows.length}
+		<div class="part">
+			<span class="part-n">4</span><span class="part-t">Hidden costs</span><span class="hint"
+				>what no single hot function shows</span
+			>
+		</div>
+		<div class="grid">
+			{#if sync_rows.length}
+				<section class="panel">
+					<h3>
+						Synchronous I/O in the render <span class="hint"
+							>blocks every other request on the instance while it runs</span
+						>
+					</h3>
+					<table>
+						<thead
+							><tr
+								><th>call</th><th>module</th><th class="num">calls</th><th class="num">ms</th><th
+									>from</th
+								></tr
+							></thead
+						>
+						<tbody>
+							{#each sync_rows as s (s.key)}
+								<tr
+									><td class="fn"
+										><a href={fn_known.has(s.key) ? row_href(`fn:${s.key}`) : undefined}
+											><b>{s.name}</b></a
+										></td
+									><td class="file">{s.module}</td><td class="num">{s.calls ?? '—'}</td><td
+										class="num">{fmt_ms(s.total_ms)}</td
+									><td class="file">{s.callers.join(' ← ') || '—'}</td></tr
+								>
+							{/each}
+						</tbody>
+					</table>
+				</section>
+			{/if}
+			{#if memo_rows.length}
+				<section class="panel">
+					<h3>
+						Memoization candidates <span class="hint"
+							>called many times per render at a steady cost each — if the result depends only on
+							the argument, cache it</span
+						>
+					</h3>
+					<table>
+						<thead
+							><tr
+								><th>function</th><th>where</th><th class="num">/ render</th><th class="num"
+									>per call</th
+								><th class="num">total ms</th><th class="num">alloc / call</th><th>under</th></tr
+							></thead
+						>
+						<tbody>
+							{#each memo_rows as m (m.key)}
+								<tr
+									><td class="fn"
+										><a href={fn_known.has(m.key) ? row_href(`fn:${m.key}`) : undefined}
+											><b>{m.name}</b></a
+										></td
+									><td class="file">{m.url}:{m.line}</td><td class="num">{m.calls}</td><td
+										class="num">{m.per_call_ms} ms</td
+									><td class="num">{fmt_ms(m.total_ms)}</td><td class="num"
+										>{m.alloc_per_call ? fmt_bytes(m.alloc_per_call) : '—'}</td
+									><td class="fn">{m.parent ?? '—'}</td></tr
+								>
+							{/each}
+						</tbody>
+					</table>
+				</section>
+			{/if}
+			{#if deopt_rows.length}
+				<section class="panel">
+					<h3>
+						Deoptimizations <span class="hint"
+							>functions V8 threw out of optimized code, and why</span
+						>
+					</h3>
+					<table>
+						<thead
+							><tr
+								><th>function</th><th>where</th><th class="num">times</th><th>reasons</th><th
+									class="num">self ms</th
+								></tr
+							></thead
+						>
+						<tbody>
+							{#each deopt_rows.slice(0, 20) as d (d.key)}
+								<tr>
+									<td class="fn"
+										><a href={fn_known.has(d.key) ? row_href(`fn:${d.key}`) : undefined}
+											><b>{d.name}</b></a
+										></td
+									>
+									<td class="file"
+										>{d.url}{#if d.line > 0}:{d.line}{/if}
+										<span class="hint">{CATEGORY_LABEL[d.category]}</span></td
+									>
+									<td class="num">{d.count}</td>
+									<td class="fn"
+										>{Object.entries(d.reasons)
+											.sort((x, y) => y[1] - x[1])
+											.map(([r, n]) => `${r} ×${n}`)
+											.join(', ')}</td
+									>
+									<td class="num">{fmt_ms(d.self_ms)}</td>
+								</tr>
+							{/each}
+						</tbody>
+					</table>
+					<p class="hint">
+						"wrong map": objects of different shapes reach one site — keep the same properties in
+						the same order. "not a Smi": a number changed kind. A function that deoptimizes every
+						render runs slow every render.
+					</p>
+				</section>
+			{/if}
+			{#if promises && promises_per_render >= 1000}
+				<section class="panel">
+					<h3>Promises <span class="hint">each an allocation and a microtask</span></h3>
+					<p>
+						<b class="big">{promises_per_render.toLocaleString()}</b>
+						<span class="hint">created per render</span>
+					</p>
+					{#if promises.top.length}
+						<p class="hint">
+							Mostly from: {#each promises.top.slice(0, 5) as t, i (t.caller)}{#if i > 0},
+								{/if}<b>{t.caller}</b>
+								{Math.round(t.share * 100)}%{/each}
+							<span class="hint"
+								>(one stack in 256 promises is captured; the shares are of those)</span
+							>
+						</p>
+					{/if}
+				</section>
+			{/if}
+		</div>
+	{/if}
+
+	<!-- ═══════════════ 5 · THE DATA ═══════════════ -->
+	{#if lineage || (extras.river && extras.river.nodes.length) || (og && seed && seed.rows.length) || extras.strip}
+		<div class="part"><span class="part-n">5</span><span class="part-t">The data</span></div>
+	{/if}
+	{#if lineage}
+		<section class="panel">
+			<h2>
+				Who reads what <span class="hint" style="font-weight:400"
+					>(every page.data key: the load that made it, the components that read it, from their
+					sources)</span
+				>
+			</h2>
+			<p class="hint">
+				A key read by an island must ship in the seed. A key read only on the server is rendered
+				into the HTML and need not ship. A key nobody reads was fetched for no one — the load's wait
+				behind it is pure waste. The readers come from scanning the route's page and layouts and
+				every component the profile saw; the islands' reads are what the page's own seed explainer
+				recorded, so the two agree. An island that reads the page whole makes every key "unknown".
+			</p>
+			<table>
+				<thead
+					><tr
+						><th>key</th><th>from</th><th class="num">shipped</th><th class="num">load waited</th
+						><th>read by</th><th>verdict</th></tr
+					></thead
+				>
+				<tbody>
+					{#each lineage_keys as k (k.key)}
+						<tr>
+							<td class="fn"><code>{k.key}</code></td>
+							<td class="file">{k.from ?? '—'}</td>
+							<td class="num">{k.shipped_bytes ? fmt_bytes(k.shipped_bytes) : '—'}</td>
+							<td class="num">{k.load_wait_ms === null ? '—' : fmt_ms(k.load_wait_ms) + ' ms'}</td>
+							<td class="fn"
+								>{#each k.readers.slice(0, 5) as r, i (r.name)}{#if i > 0},
+									{/if}{r.name}{#if r.island}<span class="hint"> (island)</span>{/if}{:else}<span
+										class="hint">—</span
+									>{/each}{#if k.readers.length > 5}<span class="hint">
+										+{k.readers.length - 5}</span
+									>{/if}</td
+							>
+							<td
+								><span
+									class="lverdict"
+									class:warn={k.verdict === 'unread'}
+									class:note={k.verdict === 'server-only'}
+									class:good={k.verdict === 'island'}>{VERDICT_LABEL[k.verdict] ?? k.verdict}</span
+								></td
+							>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+			{#if lineage.keys.length > 40}<p class="hint">
+					and {lineage.keys.length - 40} more keys.
+				</p>{/if}
+			{#if lineage.notes.length}<p class="hint">
+					{#each lineage.notes as n, i (i)}{n}
+					{/each}
+				</p>{/if}
+			<p class="hint scanned">
+				Scanned: {#each lineage.components as c, i (c.file)}{#if i > 0},
+					{/if}<span title={c.file}>{c.name}</span>{#if c.reads === null}<span class="hint">
+							(?)</span
+						>{:else if c.whole}<span class="hint"> (whole)</span>{:else}<span class="hint">
+							({c.reads.length})</span
+						>{/if}{/each}.
+			</p>
+		</section>
+	{/if}
+	{#if extras.river && extras.river.nodes.length}
+		<section class="panel">
+			<h2>
+				The data river <span class="hint" style="font-weight:400"
+					>(upstream calls → loads → page.data keys → the islands that read them)</span
+				>
+			</h2>
+			<DataRiver river={extras.river} />
+		</section>
+	{/if}
+	{#if og && seed && seed.rows.length}
+		<section class="panel">
+			<h2>
+				The seed, explained <span class="hint" style="font-weight:400"
+					>({fmt_kb(og.seed_bytes)}{#if og.seed_culprit}
+						· devalue because of <code>{og.seed_culprit}</code>{:else if og.seed_json}
+						· json{/if})</span
+				>
+			</h2>
+			<p class="hint">
+				<!-- (a colour swatch beside plain text: the words themselves must stay 4.5:1 in both themes) -->
+				Every top-level <code>page.data</code> key, sized, and why it ships:
+				<i class="sw" style="background:#e8734a"></i>read by an island's client code,
+				<i class="sw" style="background:#5b8fd6"></i>referenced by an island's props, or
+				<i class="sw" style="background:#d9a03d"></i>whole because an island reads page.data without
+				naming keys. Greyed keys were left out by seed shaping.
+			</p>
+			<SeedExplainer
+				rows={seed.rows}
+				whole_by={seed.whole_by}
+				total={seed.total}
+				seed_bytes={og.seed_bytes}
+			/>
+		</section>
+	{/if}
+	{#if extras.strip}
+		<section class="panel">
+			<h2>
+				The document, byte by byte <span class="hint" style="font-weight:400"
+					>({fmt_bytes(extras.strip.total)} — what each byte the server wrote is, in the order it left)</span
+				>
+			</h2>
+			<ByteStrip
+				strip={extras.strip}
+				names={fp_names}
+				nav={visit ? { res_start: visit.nav.res_start, res_end: visit.nav.res_end } : null}
+			/>
+		</section>
+	{/if}
+	{#if extras.assets}
+		{@const pa = extras.assets}
+		<section class="panel" id="page-weight">
+			<h2>
+				What the page loads <span class="hint" style="font-weight:400"
+					>({fmt_bytes(pa.totals.wire)} on the wire at start · {fmt_bytes(pa.totals.js)} of JS in {pa
+						.totals.js_files} files{#if pa.totals.lazy_js}
+						· {fmt_bytes(pa.totals.lazy_js)} more on demand{/if})</span
+				>
+			</h2>
+			<p class="hint">
+				Every file the document makes the browser fetch at start, weighed through the app: its
+				scripts, each
+				<code>modulepreload</code> and what it imports, a Kit-hydrated page's route code, the
+				islands that wake at load, stylesheets, fonts and images. Code that loads only when an
+				island wakes later is marked <b>on demand</b>.
+				<b>Blocks</b> = must arrive before the first paint.
+			</p>
+			<table class="weight">
+				<thead
+					><tr
+						><th>file</th><th>kind</th><th>how</th><th class="num">size</th><th class="num">wire</th
+						><th>holds</th></tr
+					></thead
+				>
+				<tbody>
+					{#each pa.assets.slice(0, 25) as x (x.url)}
+						<tr class:lazy={x.lazy}>
+							<td class="file" title={x.url}>{x.url.split('?')[0].split('/').pop()}</td>
+							<td
+								>{x.kind}{#if x.blocking}
+									<b class="warn">blocks</b>{/if}{#if x.lazy}
+									<span class="hint">on demand</span>{/if}</td
+							>
+							<td class="hint">{x.via}</td>
+							<td class="num">{fmt_bytes(x.bytes)}</td>
+							<td class="num">{fmt_bytes(x.wire)}</td>
+							<td class="hint">{x.contains ? x.contains.join(', ') : ''}</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+			{#if pa.assets.length > 25}<p class="hint">
+					…and {pa.assets.length - 25} smaller files.
+				</p>{/if}
+			{#if pa.missed.length}<p class="hint">
+					Not weighed: {pa.missed
+						.slice(0, 5)
+						.map((u) => u.split('/').pop())
+						.join(', ')}{pa.missed.length > 5 ? ` and ${pa.missed.length - 5} more` : ''}.
+				</p>{/if}
+		</section>
+	{:else if extras.assets_missing}
+		<section class="panel" id="page-weight">
+			<h2>What the page loads</h2>
+			<p class="hint">Not weighed: {extras.assets_missing}.</p>
+		</section>
+	{/if}
+
+	<!-- ═══════════════ 6 · ISLANDS AND THE BROWSER ═══════════════ -->
+	{#if og || islands.length || (meta.trigger === 'page' && meta.runs?.length && (page_path || vitals || client_marks.length)) || extras.client_cpu}
+		<div class="part">
+			<span class="part-n">6</span><span class="part-t">Islands and the browser</span>
+		</div>
+	{/if}
+	{#if og}
+		<section class="panel">
+			<h2>ogygia's own cost</h2>
+			<p class="hint">
+				What the handle added to this page — the transform's own time and every byte it put in the
+				document. The seed ships only when an island reads <code>$page</code>; props cross once per
+				island.
+			</p>
+			<div class="summary">
+				<div class="stat"><b>{fmt_ms(og.transform_ms)} ms</b><span>transform</span></div>
+				<div class="stat"><b>{og.islands}</b><span>islands</span></div>
+				{#if og.holes}<div class="stat"><b>{og.holes}</b><span>holes</span></div>{/if}
+				<div class="stat">
+					<b>{fmt_kb(og.seed_bytes)}</b><span
+						>page seed{og.seed_bytes ? (og.seed_json ? ' (json)' : ' (devalue)') : ''}</span
+					>
+				</div>
+				<div class="stat"><b>{fmt_kb(og.tail_bytes)}</b><span>props + hints</span></div>
+				{#if og.remote_seed_bytes}<div class="stat">
+						<b>{fmt_kb(og.remote_seed_bytes)}</b><span>remote seed</span>
+					</div>{/if}
+				{#if og.fnm_bytes}<div class="stat">
+						<b>{fmt_kb(og.fnm_bytes)}</b><span>fn manifest</span>
+					</div>{/if}
+				{#if og.ctx_bytes}<div class="stat">
+						<b>{fmt_kb(og.ctx_bytes)}</b><span>context bridge</span>
+					</div>{/if}
+			</div>
+		</section>
+
+		{#if islands.length}
+			<section class="panel">
+				<h2>
+					Islands <span class="hint" style="font-weight:400"
+						>({islands.length}{#if flagged}, {flagged} with advice{/if}, click a column to sort)</span
+					>
+				</h2>
+				<p class="hint">
+					One row per island — its copies merge, however many props sidecars they ship (<b>×N</b>).
+					<b>SSR ms</b>
+					is the component's server render per page render; <b>props</b> is what the sidecar ships;
+					<b>seed refs</b>
+					are props that point into page.data instead of shipping twice{#if hasJs}; <b>JS</b> is the unique
+						weight of the island's module and its preloads{/if};
+					<b>interactivity</b> is what the build found in its components — an
+					<span style="color:var(--warn)">inert</span>
+					island loads JS for markup that never changes{#if hasClient}; <b>hydrate ms</b> is what your
+						own browser reported (wake to hydrated, p50){:else}. Open the page in this browser while
+						logged in and the runtime reports each island's hydration time back here{/if}. A
+					<span class="dotflag-inline">!</span> marks a row with advice — open it.
+				</p>
+				<IslandsTable rows={islands} {hasJs} {hasClient} />
+			</section>
+		{/if}
+
+		{#if holes.length}
+			<section class="panel">
+				<h2>Holes <span class="hint" style="font-weight:400">({holes.length} deferred)</span></h2>
+				<p class="hint">
+					A hole ships its fallback in the page and renders on the islands endpoint afterwards. Each
+					is named by its component and props, the way it is written in the page.{#if holes_seen}
+						The endpoint requests that landed in this window say what its render cache did.{:else}
+						No endpoint requests landed in this window — open the page in a browser during a
+						recording, or profile the hole's URL, to see hits and misses.{/if}
+				</p>
+				<table>
+					<thead>
+						<tr
+							><th>hole</th><th>fetch</th><th>then wakes</th><th class="num">maxAge</th><th
+								class="num">copies</th
+							><th class="num">requests</th><th class="num">avg ms</th><th>cache</th></tr
+						>
+					</thead>
+					<tbody>
+						{#each holes as h (h.id)}
+							<tr>
+								<td class="fn">
+									{#if h.name}<b>{h.name}</b>{#if h.props}
+											<code class="props">{h.props}</code>{/if}<span class="hint">
+											· {h.id}</span
+										>{:else}<code>{h.id}</code>{/if}
+								</td>
+								<td>{h.when}</td>
+								<td>{h.hydrate ?? '—'}</td>
+								<td class="num">{h.ttl ? `${h.ttl}s` : '—'}</td>
+								<td class="num">{h.count}</td>
+								<td class="num">{h.requests || '—'}</td>
+								<td class="num">{h.avg_ms === null ? '—' : fmt_ms(h.avg_ms)}</td>
+								<td>
+									<span
+										class="hverdict"
+										class:warn={h.ttl > 0 && h.requests >= 2 && h.hit === 0}
+										class:good={h.hit > 0}>{h.verdict}</span
+									>
+									{#if h.requests}<span class="hint">
+											· {h.hit} hit · {h.miss} miss{#if h.none}
+												· {h.none} uncached{/if}</span
+										>{/if}
+								</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</section>
+		{/if}
+	{/if}
+	{#if islands.length}
+		<section class="panel">
+			<h2>
+				Island cost heatmap <span class="hint" style="font-weight:400"
+					>(every cost of every island on one grid — click a column to sort by it)</span
+				>
+			</h2>
+			<IslandHeatmap rows={islands} {visit} />
+		</section>
+	{/if}
+	{#if page_path && islands.length}
+		<section class="panel">
+			<h2>
+				DOM time travel <span class="hint" style="font-weight:400"
+					>(each island's markup as the server sent it, after it hydrated, when the page left — and
+					the layout shifts, mapped)</span
+				>
+			</h2>
+			<DomTravel page={page_path} names={fp_names} {visit} />
+		</section>
+	{/if}
+
+	{#if meta.trigger === 'page' && meta.runs?.length}
+		{#if page_path}
+			<section class="panel">
+				<h2>
+					One clock <span class="hint" style="font-weight:400"
+						>(the server's render, the HTML arriving, every file, the main thread, each island
+						waking, the paints — from the click)</span
+					>
+				</h2>
+				<OneClock server={server_clock} {visit} page={page_path} names={fp_names} {hole_names} />
+			</section>
+		{/if}
+		{#if vitals}
+			<section class="panel">
+				<h2>
+					In the browser <span class="hint" style="font-weight:400"
+						>(what your own visits to this page measured, p50 of {vitals.n})</span
+					>
+				</h2>
+				<div class="summary">
+					<div class="stat">
+						<b>{vitals.ttfb === null ? '—' : fmt_ms(vitals.ttfb) + ' ms'}</b><span>TTFB</span>
+					</div>
+					<div class="stat">
+						<b>{vitals.fcp === null ? '—' : fmt_ms(vitals.fcp) + ' ms'}</b><span>first paint</span>
+					</div>
+					<div class="stat">
+						<b>{vitals.lcp === null ? '—' : fmt_ms(vitals.lcp) + ' ms'}</b><span>LCP</span>
+					</div>
+					<div class="stat"><b>{vitals.cls === null ? '—' : vitals.cls}</b><span>CLS</span></div>
+					<div class="stat">
+						<b>{vitals.inp === null ? '—' : fmt_ms(vitals.inp) + ' ms'}</b><span>INP</span>
+					</div>
+					<div class="stat"><b>{fmt_ms(runsMedian)} ms</b><span>server render (median)</span></div>
+				</div>
+				<p class="hint">
+					TTFB minus the render is what sits in front of this server (a cold instance, a proxy, the
+					network); LCP minus TTFB is what the browser does after the HTML arrives (assets, fonts,
+					hydration).
+				</p>
+			</section>
+		{/if}
+		{#if client_marks.length}
+			<section class="panel">
+				<h3 class="sub-h">
+					Marked in the browser <span class="hint"
+						>what the app timed itself with <code>mark()</code>, p50 over your visits</span
+					>
+				</h3>
+				<table>
+					<thead
+						><tr
+							><th>mark</th><th class="num">seen</th><th class="num">p50 ms</th><th class="num"
+								>max ms</th
+							><th class="num">failed</th><th>attributes</th></tr
+						></thead
+					>
+					<tbody>
+						{#each client_marks as m (m.name)}
+							<tr>
+								<td class="fn"><b>{m.name}</b></td>
+								<td class="num">{m.n}</td>
+								<td class="num"><b>{fmt_ms(m.p50_ms)}</b></td>
+								<td class="num">{fmt_ms(m.max_ms)}</td>
+								<td class="num" class:warn={m.errors > 0}>{m.errors || '—'}</td>
+								<td class="hint">{m.attr_keys.join(', ') || '—'}</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</section>
+		{/if}
+	{/if}
+
+	{#if extras.client_cpu}
+		{@const c = extras.client_cpu.analysis}
+		{@const cRows = c.components.map((f) => ({
+			...f,
+			per: f.total_ms / Math.max(f.calls ?? 1, 1),
+			count: f.calls ?? 0,
+			alloc: null
+		}))}
+		{@const fRows = c.functions.slice(0, 60).map((f) => ({
+			...f,
+			per: f.total_ms / Math.max(f.calls ?? 1, 1),
+			count: f.calls ?? 0,
+			alloc: null
+		}))}
+		<section class="panel">
+			<h2>In the browser: CPU while the page hydrated</h2>
+			<p class="hint">
+				Your own browser's main thread, sampled every 10 ms for the first seconds of the visit ({new Date(
+					extras.client_cpu.at
+				).toLocaleTimeString()}), the same way the server is: components by their hydration cost,
+				the functions under them, and a flame graph. This is where the islands' hydrate times come
+				from. A visitor is never sampled.
+			</p>
+			<div class="summary">
+				<div class="stat"><b>{fmt_ms(c.duration_ms)} ms</b><span>sampled</span></div>
+				<div class="stat"><b>{fmt_ms(c.busy_ms)} ms</b><span>main thread busy</span></div>
+				<div class="stat">
+					<b>{c.duration_ms > 0 ? ((c.busy_ms / c.duration_ms) * 100).toFixed(0) : 0}%</b><span
+						>busy</span
+					>
+				</div>
+				<div class="stat"><b>{c.components.length}</b><span>components seen</span></div>
+			</div>
+			{#if cRows.length}
+				<h3 class="sub-h">Components <span class="hint">by hydration cost in the browser</span></h3>
+				<ComponentsTable
+					rows={cRows}
+					busy={c.busy_ms}
+					hasAlloc={false}
+					maxTotal={Math.max(...cRows.map((r) => r.total_ms), 1)}
+					{base}
+					dev={false}
+				/>
+			{/if}
+			<h3 class="sub-h">Hot functions <span class="hint">in the browser</span></h3>
+			<FunctionsTable rows={fRows} hasAlloc={false} {base} dev={false} />
+			<h3 class="sub-h">Flame graph <span class="hint">the browser's main thread</span></h3>
+			<Flame flame={c.flame} />
+		</section>
+	{/if}
+
+	<!-- ═══════════════ 7 · NETWORK AND WAITS ═══════════════ -->
+	<div class="part"><span class="part-n">7</span><span class="part-t">Network and waits</span></div>
+	<section class="panel">
+		<h2>Network</h2>
+		{#if net.length}
+			<p class="hint">
+				Every outbound call the server made during the window, tied to the route that made it.
+				"wait" = until headers arrived; "body" = reading the response.{#if meta.trigger === 'page' && (meta.runs?.length ?? 0) > 1}
+					Shown for one representative render (of {meta.runs?.length ?? 0}).{/if}
+			</p>
+			{#if wf.length}
+				<p class="hint">
+					Each bar is one request, sized by its response. Click a bar for its trigger, sizes,
+					headers, and payload.
+				</p>
+				<Waterfall rows={wf} />
+			{/if}
+			<table>
+				<thead>
+					<tr
+						><th>host</th><th class="num">calls</th><th class="num">total ms</th><th class="num"
+							>p50</th
+						><th class="num">max</th><th class="num">errors</th></tr
+					>
+				</thead>
+				<tbody>
+					{#each hosts as h}
+						<tr>
+							<td class="fn">{h.host || '(same process)'}</td>
+							<td class="num">{h.count}</td>
+							<td class="num"><b>{fmt_ms(h.total)}</b></td>
+							<td class="num">{fmt_ms(h.p50)}</td>
+							<td class="num">{fmt_ms(h.max)}</td>
+							<td class="num">{h.errors || '—'}</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		{:else}
+			<p class="hint">
+				No outbound HTTP calls seen in this window. If requests are still slow while the CPU is
+				idle, the wait is inside a database/socket driver or a timer.
+			</p>
+		{/if}
+	</section>
+
+	{#if spans.length}
+		<section class="panel">
+			<h2>
+				Spans <span class="hint" style="font-weight:400"
+					>(what the app named with <code>span()</code>)</span
+				>
+			</h2>
+			<p class="hint">
+				The waits the profiler cannot see on its own, named in the code. Per render: count and time
+				are divided by the {span_runs} render{span_runs === 1 ? '' : 's'} in this recording. A span appears
+				on the timeline as "in &lt;name&gt;" wherever a call or a gap sits inside it. <b>total</b>
+				is the spans' summed duration, <b>self</b> is that minus the child spans inside them,
+				<b>wall</b>
+				counts overlaps once (∥ marks spans that ran together, ×N the most at once): wall is what the
+				render paid. When spans overlap, one span's start to end is mostly waiting behind the others,
+				so <b>share</b> under p50 is its fair part of the wall. A span that carries an attribute
+				with a few distinct values (a tag, a table, a key) gets a <b>by</b> table under it: each value's
+				share, and the shares add up to the span's wall.
+			</p>
+			<table>
+				<thead>
+					<tr
+						><th>span</th><th>called from</th><th class="num">per render</th><th
+							class="num"
+							title="the spans' summed duration per render">total ms</th
+						><th class="num" title="minus the child spans inside it — its own time">self ms</th><th
+							class="num"
+							title="overlaps counted once — what it cost the render">wall ms</th
+						><th class="num">p50</th><th class="num">max</th><th>cache</th><th class="num"
+							>errors</th
+						></tr
+					>
+				</thead>
+				<tbody>
+					{#each spans as s (s.name)}
+						<tr>
+							<td class="fn"
+								><b>{s.name}</b>{#if s.attr_keys.length}<span class="hint">
+										· {s.attr_keys.join(', ')}</span
+									>{/if}</td
+							>
+							<td class="file"
+								>{s.callers[0] ?? '—'}{#if s.callers.length > 1}<span class="hint">
+										+{s.callers.length - 1}</span
+									>{/if}</td
+							>
+							<td class="num"
+								>{(s.count / span_runs) % 1 === 0
+									? s.count / span_runs
+									: (s.count / span_runs).toFixed(1)}</td
+							>
+							<td class="num">{fmt_ms(s.total_ms / span_runs)}</td>
+							<td class="num" class:dimcell={s.self_ms < s.total_ms * 0.2}
+								>{fmt_ms(s.self_ms / span_runs)}</td
+							>
+							<td class="num"
+								><b>{fmt_ms(s.wall_ms / span_runs)}</b
+								>{#if s.count > 1 && s.wall_ms < s.total_ms * 0.6}<span
+										class="hint"
+										title="the spans overlap: they ran together{s.peak
+											? `, up to ${s.peak} at once`
+											: ''}"
+									>
+										∥{s.peak ? ` ×${s.peak}` : ''}</span
+									>{/if}</td
+							>
+							<td class="num"
+								>{fmt_ms(
+									s.p50_ms
+								)}{#if s.share_p50_ms !== undefined && s.count > 1 && s.wall_ms < s.total_ms * 0.6}<div
+										class="hint"
+										title="one span's fair part of the wall: its start to end is mostly waiting behind the others"
+									>
+										share {fmt_ms(s.share_p50_ms)}
+									</div>{/if}</td
+							>
+							<td class="num">{fmt_ms(s.max_ms)}</td>
+							<td
+								>{#if s.cache}{s.cache.hit} hit ·
+									<span class:warn={s.cache.miss > 0}>{s.cache.miss} miss</span>{:else}—{/if}</td
+							>
+							<td class="num">{s.errors || (s.open ? `${s.open} open` : '—')}</td>
+						</tr>
+						{#each Object.entries(s.by) as [k, rows] (k)}
+							<tr class="by">
+								<td colspan="10">
+									<div class="bygrid">
+										<div class="byh">by {k}</div>
+										<div class="byh"></div>
+										<div
+											class="byh num"
+											title="its fair part of the span's wall: at each instant the wall is split among the spans open then, so the rows add up to the span's wall"
+										>
+											share ms
+										</div>
+										<div class="byh num" title="summed durations">total ms</div>
+										<div class="byh num">per render</div>
+										<div class="byh num">p50</div>
+										<div class="byh num">max</div>
+										{#each rows as r (r.value)}
+											{@const share = r.share_ms ?? r.wall_ms}
+											<div class="byv"><code>{r.value}</code></div>
+											<div class="bybar">
+												<i
+													style="width:{Math.max(
+														1,
+														(share / Math.max(...rows.map((x) => x.share_ms ?? x.wall_ms), 0.01)) *
+															100
+													)}%"
+												></i>
+											</div>
+											<div class="num"><b>{fmt_ms(share / span_runs)}</b></div>
+											<div class="num">{fmt_ms(r.total_ms / span_runs)}</div>
+											<div class="num">
+												{(r.count / span_runs) % 1 === 0
+													? r.count / span_runs
+													: (r.count / span_runs).toFixed(1)}×
+											</div>
+											<div class="num">{r.p50_ms ? fmt_ms(r.p50_ms) : '—'}</div>
+											<div class="num">{fmt_ms(r.max_ms)}</div>
+										{/each}
+									</div>
+								</td>
+							</tr>
+						{/each}
+					{/each}
+				</tbody>
+			</table>
+			{#if value_rows.length}
+				<h3 class="sub-h">
+					Values, not just functions <span class="hint"
+						>the numbers the spans carried, and how the time moved with them</span
+					>
+				</h3>
+				<p class="hint">
+					A span that reports a number (<code>rows</code>, <code>tags</code>, <code>bytes</code>) is
+					measured against it here:
+					<b>ms per unit</b> is the slope of a straight line through the spans, <b>fit</b> how well the
+					line holds (1 = the value alone sets the time). A steep, well-fitting line says the cost is
+					the size of the input; cut the input and the span follows.
+				</p>
+				<table>
+					<thead
+						><tr
+							><th>span</th><th>attribute</th><th class="num">spans</th><th class="num">min</th><th
+								class="num">p50</th
+							><th class="num">max</th><th class="num">sum</th><th class="num">ms per unit</th><th
+								class="num">fit</th
+							></tr
+						></thead
+					>
+					<tbody>
+						{#each value_rows.slice(0, 30) as v (v.span + '.' + v.attr)}
+							<tr>
+								<td class="fn"><b>{v.span}</b></td>
+								<td class="fn"><code>{v.attr}</code></td>
+								<td class="num">{v.n}</td>
+								<td class="num">{v.min}</td>
+								<td class="num">{v.p50}</td>
+								<td class="num">{v.max}</td>
+								<td class="num">{v.sum}</td>
+								<td class="num"
+									>{v.ms_per_unit === undefined
+										? '—'
+										: v.ms_per_unit >= 0.01
+											? v.ms_per_unit
+											: v.ms_per_unit.toExponential(1)}</td
+								>
+								<td class="num" class:good={v.r !== undefined && v.r >= 0.8}
+									>{v.r === undefined ? '—' : v.r}</td
+								>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			{/if}
+		</section>
+	{/if}
+
+	{#if waiting.length}
+		<section class="panel">
+			<h2>
+				Waiting by function <span class="hint" style="font-weight:400"
+					>(click a column to sort)</span
+				>
+			</h2>
+			<p class="hint">
+				Where the server WAITED (not computed), attributed to the function that started the I/O. A
+				big number here with idle CPU is your bottleneck.
+			</p>
+			<WaitingTable rows={waiting} maxMs={waitMax} />
+		</section>
+	{/if}
+
+	<!-- ═══════════════ 8 · THE RAW NUMBERS ═══════════════ -->
+	<div class="part">
+		<span class="part-n">8</span><span class="part-t">The raw numbers</span><span class="hint"
+			>everything above is an aggregate of these</span
+		>
+	</div>
+
+	<section class="panel">
+		<h2>CPU by self time</h2>
+		<p class="hint">
+			Every box is real work; the biggest box is the bottleneck. This is <b>self</b> time, so parents
+			like Root/_layout barely show — only code that actually burns CPU. Hover for detail.
+		</p>
+		{#if tree}
+			<Treemap hierarchy={tree} />
+			<div class="legend">
+				{#each legend as c}<span
+						><i style="background:{CATEGORY_COLOR[c]}"></i>{CATEGORY_LABEL[c]}</span
+					>{/each}
+			</div>
+		{/if}
+	</section>
+
+	<section class="panel">
+		<h2>
+			Components <span class="hint" style="font-weight:400"
+				>({a.components.length}, click a column to sort)</span
+			>
+		</h2>
+		<p class="hint">
+			<b>self</b> = the component's own code, excluding nested components. <b>total</b> = self plus
+			everything it calls. Sort by self to find who burns CPU, by total for the most expensive
+			subtree.{#if renders > 1}
+				Self and total add up all {renders} renders (divide by {renders} for one); <b>per call</b> is
+				one render of the component.{/if}{#if hasCounts}
+				<b>×N</b> is how many times it rendered in one page render.{/if}{#if hasAlloc}
+				<b>alloc</b> is the memory allocated under it (sampled), nested components excluded — sort by
+				it to find who makes the garbage.{/if}
+		</p>
+		{#if compRows.length}
+			<ComponentsTable
+				rows={compRows}
+				busy={a.busy_ms}
+				{hasAlloc}
+				maxTotal={compMaxTotal}
+				{base}
+				{dev}
+			/>
+		{:else}
+			<p class="hint">
+				No component frames in this recording — was any page rendered during the window?
+			</p>
+		{/if}
+	</section>
+
+	<section class="panel">
+		<h2>
+			Hot functions <span class="hint" style="font-weight:400">(click a column to sort)</span>
+		</h2>
+		<p class="hint">
+			Every function on the server, by time spent inside it.{#if renders > 1}
+				Self and total add up all {renders} renders (divide by {renders} for one); <b>per call</b> is
+				one call.{/if}{#if hasCounts}
+				<b>×N</b> is the exact call count in one render (from V8 coverage).{/if}
+		</p>
+		{#if !a.sourcemapped}
+			<p class="hint warn">
+				Locations are bundled chunk positions — no sourcemap resolved. Ship .map files next to the
+				server chunks (build with server sourcemaps) and "where" maps back to your source files.
+			</p>
+		{/if}
+		{#if fnRows.length > 80}<p class="hint">
+				The 80 with the most self time, and {fnRows.length - 80} more that other parts of this report
+				link to.
+			</p>{/if}
+		<FunctionsTable rows={fnRows} {hasAlloc} {base} {dev} />
+	</section>
+
+	{#if heap.length}
+		<section class="panel">
+			<h2>Top memory allocators</h2>
+			<p class="hint">
+				Sampled heap allocations during the window — who creates the objects (and the GC pressure).
+			</p>
+			<table>
+				<thead>
+					<tr
+						><th>function</th><th>where</th><th><span class="sr-only">kind of code</span></th><th
+							class="num">self</th
+						><th class="num">total</th></tr
+					>
+				</thead>
+				<tbody>
+					{#each heap as h}
+						<tr>
+							<td class="fn"><b>{h.name}</b></td>
+							<td class="file"
+								>{h.url}{#if h.line > 0}:{h.line}{/if}</td
+							>
+							<td
+								><span
+									class="chip"
+									style="background:{CATEGORY_COLOR[h.category]};color:{ink_on(
+										CATEGORY_COLOR[h.category]
+									)}">{CATEGORY_LABEL[h.category]}</span
+								></td
+							>
+							<td class="num"><b>{fmt_bytes(h.self_bytes)}</b></td>
+							<td class="num">{fmt_bytes(h.total_bytes)}</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		</section>
+	{/if}
+
+	{#if spark}
+		<section class="panel">
+			<h2>Memory over the window</h2>
+			<svg class="spark" width={spark.w} height={spark.h} viewBox="0 0 {spark.w} {spark.h}">
+				<polyline points={spark.pts} fill="none" stroke="#6ca8e0" stroke-width="1.5" />
+				<text x={spark.pad} y="12" fill="#6f8378" font-size="11">{spark.max} MB</text>
+				<text x={spark.pad} y={spark.h - 6} fill="#6f8378" font-size="11">{spark.min} MB</text>
+			</svg>
+			<p class="hint">
+				rss {spark.first.rss} → {spark.last.rss} MB · heap {spark.first.heap_used} → {spark.last
+					.heap_used} MB
+			</p>
+		</section>
+	{/if}
+
+	{#if measures.length}
+		<section class="panel">
+			<h2>User timings</h2>
+			<p class="hint">
+				Spans emitted with performance.measure() — captured free during the window. Real wall time.
+			</p>
+			<table>
+				<thead>
+					<tr
+						><th>name</th><th class="num">count</th><th class="num">total ms</th><th class="num"
+							>avg ms</th
+						><th class="num">max ms</th></tr
+					>
+				</thead>
+				<tbody>
+					{#each measures as m}
+						<tr>
+							<td class="fn">{m.name}</td>
+							<td class="num">{m.count}</td>
+							<td class="num"><b>{fmt_ms(m.total_ms)}</b></td>
+							<td class="num">{fmt_ms(m.total_ms / m.count)}</td>
+							<td class="num">{fmt_ms(m.max_ms)}</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		</section>
+	{/if}
+
+	<section class="panel">
+		<h2>Time by file</h2>
+		{#if files.length}
+			<table>
+				<thead
+					><tr
+						><th>file</th><th><span class="sr-only">kind of code</span></th><th class="num"
+							>self ms</th
+						><th class="num">% of busy</th></tr
+					></thead
+				>
+				<tbody>
+					{#each files as f}
+						<tr>
+							<td class="file">{f.key}</td>
+							<td
+								><span
+									class="chip"
+									style="background:{CATEGORY_COLOR[f.category]};color:{ink_on(
+										CATEGORY_COLOR[f.category]
+									)}">{CATEGORY_LABEL[f.category]}</span
+								></td
+							>
+							<td class="num"><b>{fmt_ms(f.self_ms)}</b></td>
+							<td class="num">{fmt_pct(f.self_ms, a.busy_ms)}</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		{/if}
+	</section>
+
+	<section class="panel">
+		<h2>Where the CPU went</h2>
+		{#each buckets as b}
+			<div class="barrow">
+				<span class="fn">{b.key}</span>
+				<div
+					class="bar"
+					style="width:{Math.max(1, (b.self_ms / maxBucket) * 100)}%;background:{CATEGORY_COLOR[
+						b.category
+					]}"
+				></div>
+				<span class="num">{fmt_ms(b.self_ms)} ms</span>
+			</div>
+		{/each}
+	</section>
+
+	{#if meta.trigger === 'page' && meta.runs?.length}
+		<section class="panel">
+			<h2>Renders of {meta.page ?? ''}</h2>
+			<p class="hint">
+				Each run is one full server render, median {fmt_ms(runsMedian)} ms.
+				{#if meta.redirected_from}Followed a redirect from <code>{meta.redirected_from}</code>.{/if}
+				{#if meta.warmup_ms !== undefined}Warm-up render {fmt_ms(meta.warmup_ms)} ms (un-profiled, pays
+					cold module load).{/if}
+				{#if meta.run_status !== undefined}Status {meta.run_status}{#if meta.run_bytes !== undefined},
+						{fmt_bytes(meta.run_bytes)}{/if}.{/if}
+			</p>
+			<p class="fn">{meta.runs.map((r) => fmt_ms(r) + ' ms').join(' · ')}</p>
+			{#if meta.budget_note}<p class="verdict">{meta.budget_note}</p>{/if}
+			{#if meta.cold && cold.length}
+				<h3 class="sub-h">
+					Cold start <span class="hint"
+						>the first render, profiled on its own: {fmt_ms(meta.cold.ms)} ms against {fmt_ms(
+							runsMedian
+						)} ms warm</span
+					>
+				</h3>
+				<p class="hint">
+					What the first render paid over a warm one, per file: module load, compile, first-call
+					caches. On a serverless host every cold instance pays this on its first request.
+				</p>
+				<table>
+					<thead
+						><tr
+							><th>file</th><th><span class="sr-only">kind of code</span></th><th class="num"
+								>cold ms</th
+							><th class="num">warm ms</th><th class="num">extra</th></tr
+						></thead
+					>
+					<tbody>
+						{#each cold.slice(0, 20) as r (r.file)}
+							<tr>
+								<td class="file">{r.file}</td>
+								<td
+									><span
+										class="chip"
+										style="background:{CATEGORY_COLOR[r.category]};color:{ink_on(
+											CATEGORY_COLOR[r.category]
+										)}">{CATEGORY_LABEL[r.category]}</span
+									></td
+								>
+								<td class="num">{fmt_ms(r.cold_ms)}</td>
+								<td class="num">{fmt_ms(r.warm_ms)}</td>
+								<td class="num"><b>+{fmt_ms(r.extra_ms)}</b></td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			{/if}
+		</section>
+	{:else if (meta.trigger === 'request' || meta.trigger === 'trap') && meta.request}
+		<section class="panel">
+			<h2>{meta.trigger === 'trap' ? 'Caught request' : 'Profiled request'}</h2>
+			<p class="fn">
+				{meta.request.method}
+				{meta.request.path} — {fmt_ms(meta.request.ms)} ms (route {meta.request.route ?? '—'})
+			</p>
+			{#if meta.trigger === 'trap'}
+				<p class="hint">
+					The background trap kept this window because the request crossed {meta.trap_over ?? 0} ms. Sampled
+					coarsely (no per-request context, no stacks on calls), so the timeline is the answer here; the
+					tables are rougher than a page profile's.
+				</p>
+			{/if}
+			<p>
+				<a
+					class="btn"
+					href="{base}/replay/{meta.id}"
+					title="Render this request again, five times, under the full profiler — same path and query{extras.replay &&
+					Object.keys(extras.replay.headers).length
+						? `, with ${Object.keys(extras.replay.headers).join(', ')}`
+						: ''}">Profile this request in full</a
+				>
+				<span class="hint">
+					renders <code>{extras.replay?.path ?? meta.request.path}</code> again as a page profile{#if extras.replay && Object.keys(extras.replay.headers).length}
+						with the kept headers ({Object.keys(extras.replay.headers).join(', ')}){:else}
+						(no headers kept: name them in <code>trap.replay</code> to carry a tenant or a locale along){/if}
+				</span>
+			</p>
+		</section>
+	{/if}
+
+	<section class="panel">
+		<h2>Requests during the window</h2>
+		<p class="hint">
+			Wall-clock time. High total with low net and low CPU = waiting on something we can't see.
+			"inflight" = other requests sharing the CPU at the same time.{#if folded}
+				The page rendered {meta.runs?.length ?? 0} times, so identical requests are folded into one row:
+				<b>×N</b> is how many, the numbers are medians, "max" the slowest of them.{/if}
+		</p>
+		{#if reqs.length}
+			<table>
+				<thead>
+					<tr
+						><th>method</th><th>path</th><th>route</th>{#if tagged.length}<th>tags</th>{/if}<th
+							class="num">status</th
+						><th class="num">inflight</th><th class="num">net ms</th><th class="num">cpu ms</th><th
+							class="num">wait ms</th
+						><th class="num">total ms</th>{#if folded}<th class="num">max ms</th>{/if}</tr
+					>
+				</thead>
+				<tbody>
+					{#each reqs as e}
+						<tr>
+							<td>{e.method}</td>
+							<td class="fn"
+								>{e.path}{#if e.count > 1}<span class="hint">
+										×{e.count}</span
+									>{/if}{#if e.internal}<span class="warn"> (profiler)</span>{/if}</td
+							>
+							<td class="file">{e.route ?? '—'}</td>
+							{#if tagged.length}<td class="file">{e.tags || '—'}</td>{/if}
+							<td class="num">{e.status || '—'}</td>
+							<td class="num">{e.inflight}</td>
+							<td class="num">{e.net_count ? fmt_ms(e.net_ms) : '—'}</td>
+							<td class="num">{fmt_ms(e.cpu_ms)}</td>
+							<td class="num">{fmt_ms(e.wait_ms)}</td>
+							<td class="num"><b>{fmt_ms(e.ms)}</b></td>
+							{#if folded}<td class="num">{fmt_ms(e.max_ms)}</td>{/if}
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		{:else}
+			<p class="hint">No requests completed inside the window.</p>
+		{/if}
+	</section>
+
+	<section class="panel">
+		<h2>Flame graph</h2>
+		<p class="hint">
+			Width = time. Click a bar to zoom, click it again to zoom back out. Orange bars are your
+			components.
+		</p>
+		<Flame flame={a.flame} />
+	</section>
+</Shell>
+
+<style>
+	.barrow {
+		display: grid;
+		grid-template-columns: minmax(160px, 240px) 1fr 90px;
+		gap: 10px;
+		align-items: center;
+		padding: 3px 0;
+		font-size: 13px;
+	}
+	.barrow .num {
+		text-align: right;
+		font-variant-numeric: tabular-nums;
+		color: var(--text-dim);
+	}
+	.budget {
+		display: flex;
+		height: 34px;
+		border-radius: var(--r-sm);
+		overflow: hidden;
+		border: 1px solid var(--line);
+		margin: 6px 0;
+	}
+	.budget > div {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		font-size: 10.5px;
+		color: #06120c;
+		font-weight: 600;
+		overflow: hidden;
+		white-space: nowrap;
+		min-width: 0;
+	}
+	.legend {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 6px 14px;
+		margin: 8px 0 0;
+		font-size: 11.5px;
+		color: var(--text-dim);
+	}
+	.legend span {
+		display: inline-flex;
+		align-items: center;
+		gap: 5px;
+	}
+	.legend i {
+		width: 10px;
+		height: 10px;
+		border-radius: 2px;
+		display: inline-block;
+	}
+	.spark {
+		display: block;
+		margin: 6px 0;
+	}
+	.findings-lead {
+		margin: 0 0 12px;
+		font-size: 13.5px;
+		color: var(--text-dim);
+	}
+	.fgrid {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
+		gap: 14px;
+		align-items: start;
+		margin-bottom: 8px;
+	}
+	.fgroup {
+		background: var(--bg-panel);
+		border: 1px solid var(--line);
+		border-radius: var(--r-lg);
+		padding: 12px 14px;
+		min-width: 0;
+	}
+	.fgroup-h {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		margin: 0 0 8px;
+		font-family: var(--font-body);
+		font-size: 11px;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		color: var(--text-faint);
+	}
+	.fgroup-n {
+		font-family: var(--font-mono);
+		font-size: 10.5px;
+		color: var(--text-faint);
+		background: var(--bg-hover);
+		border-radius: 999px;
+		padding: 0 6px;
+	}
+	.finding {
+		padding: 8px 0;
+		border-top: 1px solid var(--line);
+	}
+	.finding:first-of-type {
+		border-top: 0;
+		padding-top: 0;
+	}
+	.fmsg {
+		margin: 0;
+		font-size: 13px;
+		line-height: 1.45;
+		color: var(--text);
+		overflow-wrap: anywhere;
+	}
+	.finding.warn .fmsg {
+		color: var(--text);
+	}
+	.finding.warn {
+		border-left: 2px solid var(--warn);
+		padding-left: 10px;
+		margin-left: -12px;
+	}
+	.ffix {
+		margin: 3px 0 0;
+		font-size: 12.5px;
+		line-height: 1.4;
+		color: var(--text-dim);
+	}
+	.fshow {
+		font-size: 12px;
+	}
+	.since {
+		border: 1px solid var(--line);
+		border-radius: 8px;
+		padding: 10px 14px;
+		margin: 0 0 12px;
+		font-size: 13.5px;
+	}
+	.since p {
+		margin: 0 0 6px;
+	}
+	.since ul {
+		margin: 0 0 8px;
+		padding-left: 18px;
+	}
+	.since .status {
+		font-size: 11px;
+		text-transform: uppercase;
+		color: var(--text-dim);
+		margin-right: 6px;
+	}
+	.start {
+		margin: 0 0 16px;
+		padding: 12px 16px 12px 34px;
+		background: var(--bg-panel);
+		border: 1px solid var(--line);
+		border-radius: var(--r-lg);
+		display: grid;
+		gap: 6px;
+		font-size: 14px;
+	}
+	.start li {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 2px 10px;
+		align-items: baseline;
+		min-width: 0;
+	}
+	.start li::marker {
+		color: var(--c-orange);
+		font-weight: 700;
+	}
+	.start code {
+		font-family: var(--font-mono);
+		font-size: 12.5px;
+		color: var(--text-dim);
+		overflow-wrap: anywhere;
+	}
+	.start .worth {
+		color: var(--c-orange);
+		font-size: 13px;
+	}
+	.start .then {
+		font-family: var(--font-mono, ui-monospace, monospace);
+		font-size: 12px;
+		color: var(--c-green, currentColor);
+		margin-left: 6px;
+	}
+	.impact {
+		margin: 0 0 8px;
+		font-size: 14px;
+	}
+	.impact b {
+		color: var(--c-orange);
+	}
+	.fpat {
+		color: var(--c-orange);
+		margin-right: 10px;
+	}
+	.ffile {
+		font-family: var(--font-mono);
+		font-size: 11.5px;
+		color: var(--text-faint);
+		margin-left: 6px;
+		/* a full file:// path must wrap inside its card, never widen the page */
+		overflow-wrap: anywhere;
+	}
+	.scanned {
+		overflow-wrap: anywhere;
+	}
+	.history {
+		display: flex;
+		gap: 16px;
+		align-items: center;
+		flex-wrap: wrap;
+	}
+	.hverdict.warn,
+	.lverdict.warn {
+		color: var(--warn);
+	}
+	.lverdict.note {
+		color: var(--c-blue);
+	}
+	.lverdict.good {
+		color: var(--good);
+	}
+	code.props {
+		font-size: 11px;
+		color: var(--text-dim);
+	}
+	.sub-h {
+		font-size: 14px;
+		margin: 14px 0 4px;
+	}
+	.sub-h .hint {
+		font-weight: 400;
+		margin-left: 6px;
+	}
+	tr.by td {
+		background: var(--bg-sunken);
+		padding: 6px 14px 10px 28px;
+		border-bottom: 1px solid var(--line);
+	}
+	.dimcell {
+		color: var(--text-faint);
+	}
+	.bygrid {
+		display: grid;
+		grid-template-columns: minmax(120px, max-content) minmax(140px, 1fr) 80px 80px 80px 64px 64px;
+		gap: 3px 14px;
+		align-items: center;
+		font-size: 12px;
+		max-width: 760px;
+	}
+	.bygrid .byh {
+		color: var(--text-faint);
+		font-size: 10.5px;
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+		padding-bottom: 2px;
+		border-bottom: 1px solid var(--line);
+	}
+	.bygrid .num {
+		text-align: right;
+		font-variant-numeric: tabular-nums;
+		color: var(--text-dim);
+	}
+	.bygrid .byv code {
+		font-size: 11.5px;
+	}
+	.bybar {
+		height: 6px;
+		background: var(--bg-sunken);
+		border-radius: 3px;
+		overflow: hidden;
+	}
+	.bybar i {
+		display: block;
+		height: 100%;
+		background: var(--warn);
+		border-radius: 3px;
+	}
+	.dotflag-inline {
+		display: inline-block;
+		width: 14px;
+		height: 14px;
+		line-height: 14px;
+		text-align: center;
+		border-radius: 50%;
+		background: var(--warn);
+		color: #06120c;
+		font-weight: 700;
+		font-size: 10px;
+	}
+	table.weight td.file {
+		font-family: var(--mono, ui-monospace, monospace);
+		max-width: 16rem;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	/* files that load later read quieter — in the faint ink, never by fading it below a readable 4.5:1 */
+	table.weight tr.lazy td {
+		color: var(--text-faint);
+	}
+	table.weight .num {
+		text-align: right;
+		white-space: nowrap;
+	}
+</style>