@ogygia/devtools 0.0.0 → 0.11.0

package/dist/devtools/page.js

@@ -0,0 +1,957 @@
+import { page_ledger } from "./ledger-dom.js";
+import { all_regions, region_name, region_names, region_props_sidecar, region_transitive } from "./regions.js";
+import { leftover_state, owned_leftovers, owned_scroll_listeners, scroll_listeners, unload_listeners } from "./leftovers.js";
+import { profile_for } from "./profile-store.js";
+import { with_source_lines } from "./source-lines.js";
+import { since_load } from "./since-load.js";
+import { analyze_cpu, analyze_page, browser_of, defer_keys, dev_compile_ms, fp_compare, is_trace, prebundled_names, vital_parts } from "@ogygia/core/insights";
+import { PAGE_DEFER_KEY, PAGE_DEFER_REGISTRY_KEY, PAGE_SEED_SELECTOR, beacon_page, hole_request_times, is_headless, tool_fetch } from "@ogygia/core/internal/instruments";
+import { snapshot } from "@ogygia/core/events";
+// src/devtools/page.ts
+/**
+* The Page tab's DOM side: reads the regions off the page and the failures off the bus, hands them
+* with the beacon's visit to the pure {@link ./page-insights.js analyzer}. Also publishes
+* `window.__ogygia_page()` (dev-only, devtools builds) so the planted-problem answer key and e2e
+* read the same report the tab shows without opening the panel.
+*/
+const FPS_KEY = "ogygia:devtools:fps";
+/** props text kept per island (a longer one is compared by its fingerprint alone) */
+const FPS_PROPS_CAP = 8e3;
+/** pages kept per tab */
+const FPS_PAGES_CAP = 20;
+let fps_memo = null;
+/** This page load's islands against this tab's last load of the same page (fp-drift.ts): once per
+*  load — the first call records this load for the next one. `nav` — the in-app navigation it follows. */
+function fp_drift(nav = 0) {
+	const page = location.pathname + location.search;
+	const at = `${performance.timeOrigin}:${nav}:${page}`;
+	if (fps_memo?.at === at) return fps_memo.drift;
+	const now = [];
+	for (const r of all_regions()) {
+		if (r.kind !== "island" || !r.entry || !r.fp || r.rides) continue;
+		const text = region_props_sidecar(r.el);
+		now.push({
+			entry: r.entry,
+			fp: r.fp,
+			...text !== null && text.length <= FPS_PROPS_CAP ? { props: text } : {}
+		});
+	}
+	let store = {};
+	try {
+		store = JSON.parse(sessionStorage.getItem(FPS_KEY) ?? "{}");
+	} catch {
+		store = {};
+	}
+	const drift = fp_compare(store[page] ?? [], now);
+	store[page] = now;
+	const pages = Object.keys(store);
+	for (let i = 0; i < pages.length - FPS_PAGES_CAP; i++) delete store[pages[i]];
+	try {
+		sessionStorage.setItem(FPS_KEY, JSON.stringify(store));
+	} catch {}
+	fps_memo = {
+		at,
+		drift
+	};
+	return drift;
+}
+function region_facts() {
+	const sy = typeof scrollY === "number" ? scrollY : 0;
+	const out = [];
+	const own = /* @__PURE__ */ new Map();
+	for (const row of page_ledger()?.rows ?? []) if (row.unique > 0) own.set(row.entry, row.unique);
+	const abs = (e) => {
+		try {
+			return e ? new URL(e, location.href).href : "";
+		} catch {
+			return "";
+		}
+	};
+	for (const r of all_regions()) {
+		if (!r.fp) continue;
+		const box = r.el.getBoundingClientRect();
+		const own_bytes = own.size && r.kind === "island" ? own.get(abs(r.entry)) : void 0;
+		const hidden = r.kind === "island" && !box.height && !box.width && !has_child_box(r.el);
+		const headless = hidden && is_headless(r.el);
+		let shows_at = null;
+		if (hidden && !headless && EAGER_WAKES.has(r.wake)) {
+			const key = `${r.fp}:${document.styleSheets.length}`;
+			const seen = media_seen.get(key);
+			shows_at = seen !== void 0 ? seen : shown_under_media(r.el);
+			if (seen === void 0) media_seen.set(key, shows_at);
+		}
+		out.push({
+			fp: r.fp,
+			name: region_name(r.entry),
+			kind: r.kind,
+			wake: r.wake,
+			hydrated: r.hydrated,
+			...own_bytes ? { own_bytes } : {},
+			top: Math.round((box.height || box.width ? box.top : first_child_top(r.el)) + sy),
+			height: Math.round(box.height),
+			...hidden ? { hidden: true } : {},
+			...headless ? { headless: true } : {},
+			...shows_at ? { shows_at } : {}
+		});
+	}
+	return out;
+}
+const EAGER_WAKES = /* @__PURE__ */ new Set(["load", "idle"]);
+const media_seen = /* @__PURE__ */ new Map();
+function has_child_box(el) {
+	for (const c of el.children) {
+		const b = c.getBoundingClientRect();
+		if (b.height || b.width) return true;
+	}
+	return false;
+}
+/** The media query under which the page's CSS shows this hidden island (or a child of it): a rule
+*  inside an `@media` this screen does not match giving it a `display` other than `none` — or, the
+*  other way round, one inside an `@media` this screen matches hiding it (shown where that query is
+*  not: `not all and …`). The element read is what is hidden: the island's own child, or the
+*  nearest hidden wrapper around it (a sidebar island inside an aside a phone hides). Null when no
+*  readable sheet says (a cross-origin sheet, a hide by script, an empty island). */
+function shown_under_media(el) {
+	const none = (e) => getComputedStyle(e).display === "none";
+	let hider = null;
+	for (const c of el.children) if (none(c)) {
+		hider = c;
+		break;
+	}
+	for (let up = el; !hider && up && up !== document.body; up = up.parentElement) if (none(up)) hider = up;
+	if (!hider) return null;
+	const target = hider;
+	const matches = (sel) => {
+		try {
+			return target.matches(sel);
+		} catch {
+			return false;
+		}
+	};
+	let budget = 2e4;
+	let hidden_by = null;
+	const walk = (rules, off, on) => {
+		for (const rule of rules) {
+			if (--budget < 0) return null;
+			if (rule instanceof CSSMediaRule) {
+				const q = rule.conditionText || rule.media.mediaText;
+				const now = typeof matchMedia === "function" && matchMedia(q).matches;
+				const hit = walk(rule.cssRules, now ? off : q, now ? q : on);
+				if (hit) return hit;
+			} else if (rule instanceof CSSStyleRule) {
+				const d = rule.style.display;
+				if (!d || !off && !on || !matches(rule.selectorText)) continue;
+				if (off && d !== "none") return off;
+				if (on && !off && d === "none" && !hidden_by) hidden_by = on;
+			} else if ("cssRules" in rule && rule.cssRules) {
+				const hit = walk(rule.cssRules, off, on);
+				if (hit) return hit;
+			}
+		}
+		return null;
+	};
+	for (const sheet of document.styleSheets) {
+		let rules;
+		try {
+			rules = sheet.cssRules;
+		} catch {
+			continue;
+		}
+		const hit = walk(rules, null, null);
+		if (hit) return hit;
+	}
+	const by = hidden_by;
+	return by ? by.startsWith("(") ? `not all and ${by}` : `not ${by}` : null;
+}
+/** THE DEV SERVER'S PRE-BUNDLED PACKAGES, read once from its `.vite/deps/_metadata.json` (the folder of
+*  a pre-bundled script the page loaded — no guess at the app's base): the names its `optimized` keys
+*  belong to. Null until read; never off the dev server, nor on a page that loaded no pre-bundled file. */
+let prebundled = null;
+let prebundled_asked = false;
+function prebundled_packages(script_urls) {
+	if (!import.meta.env.DEV || prebundled_asked) return prebundled;
+	const one = script_urls.find((u) => u.includes("/node_modules/.vite/deps/"));
+	if (!one) return null;
+	prebundled_asked = true;
+	const dir = one.slice(0, one.indexOf("/node_modules/.vite/deps/") + 25);
+	tool_fetch(dir + "_metadata.json").then((r) => r.ok ? r.json() : null).then((m) => {
+		prebundled = prebundled_names(Object.keys(m?.optimized ?? {}));
+	}).catch(() => {});
+	return null;
+}
+/** A FILE THE BROWSER DOWNLOADED AGAIN: its answer's `Vary` header, asked once per URL with a HEAD
+*  (a tool's request, out of every measurement). Null until it is in, or when the answer has none. */
+const varies = /* @__PURE__ */ new Map();
+function vary_of(url) {
+	if (varies.has(url)) return varies.get(url) ?? null;
+	varies.set(url, null);
+	tool_fetch(url, {
+		method: "HEAD",
+		cache: "no-store"
+	}).then((r) => varies.set(url, r.headers.get("vary"))).catch(() => {});
+	return null;
+}
+function first_child_top(el) {
+	for (const c of el.children) {
+		const b = c.getBoundingClientRect();
+		if (b.height || b.width) return b.top;
+	}
+	return el.getBoundingClientRect().top;
+}
+/** This page's hydration failures, each island once: after an in-app navigation, the ones since it,
+*  and an earlier one only while its region is still on the page and still not awake (a kept
+*  island). Every visit to a page with a broken island failed it again: without this, the tab listed
+*  one failure per visit, by fingerprint, on pages that do not have the island at all. */
+function failures(since = last_nav()?.t ?? -Infinity) {
+	const out = [];
+	const ok = /* @__PURE__ */ new Set();
+	const seen = /* @__PURE__ */ new Set();
+	const ev = snapshot();
+	for (let i = ev.length - 1; i >= 0; i--) {
+		const e = ev[i];
+		if (e.name === "region.hydrate.done" && e.fp) ok.add(e.fp);
+		else if (e.name === "region.hydrate.failed" && !(e.fp && ok.has(e.fp))) {
+			const key = e.fp ?? e.message;
+			if (seen.has(key)) continue;
+			if (e.t < since && !(e.fp && document.querySelector(`ogygia-region[data-og-fp="${CSS.escape(e.fp)}"]:not([data-hydrated])`))) continue;
+			seen.add(key);
+			let start;
+			for (let j = i - 1; j >= 0 && e.fp; j--) {
+				const s = ev[j];
+				if (s.name === "region.hydrate.start" && s.fp === e.fp) {
+					start = s.t;
+					break;
+				}
+			}
+			const turn = e.turn;
+			out.push({
+				fp: e.fp,
+				message: e.message,
+				...start !== void 0 ? { span: [start, e.t] } : {},
+				...typeof turn === "number" ? { turn } : {}
+			});
+		}
+	}
+	return out;
+}
+/** Each island on the page with its dev code breakdown (the dev server's module graph: heaviest
+*  modules, barrels still imported whole). Once per component: copies share a module graph. */
+function island_code() {
+	const out = [];
+	const seen = /* @__PURE__ */ new Set();
+	for (const r of all_regions()) {
+		if (r.kind !== "island" || !r.entry || seen.has(r.entry)) continue;
+		seen.add(r.entry);
+		const t = region_transitive(r.entry);
+		if (!t?.top?.length && !t?.barrels?.length && !t?.hazards?.length) continue;
+		out.push({
+			fp: r.fp ?? void 0,
+			name: region_name(r.entry),
+			bytes: t.bytes,
+			top: t.top ?? [],
+			barrels: t.barrels ?? [],
+			...t.hazards?.length ? { hazards: t.hazards } : {}
+		});
+	}
+	return out;
+}
+/** How long each hole's fallback showed before its first answer (since the last navigation), and
+*  whether it sits on the first screen. */
+function hole_waits(since = last_nav()?.t ?? -Infinity, fcp = 0) {
+	const out = [];
+	const seen = /* @__PURE__ */ new Set();
+	const batched = batch_parts(since);
+	for (const e of snapshot()) {
+		if (e.name !== "region.server.applied" || e.wait_ms === void 0 || e.t < since) continue;
+		const key = e.endpoint ?? e.entry ?? "";
+		if (seen.has(key)) continue;
+		seen.add(key);
+		const el = e.endpoint ? document.querySelector(`ogygia-region[endpoint="${CSS.escape(e.endpoint)}"]`) : null;
+		let id = "";
+		try {
+			id = e.endpoint ? new URL(e.endpoint, location.href).searchParams.get("id") ?? "" : "";
+		} catch {
+			id = "";
+		}
+		const rect = el?.getBoundingClientRect();
+		const start = Math.max(fcp, since, e.t - e.wait_ms);
+		const part = e.endpoint ? batched.get(e.endpoint) : void 0;
+		const times = part ? {
+			left: part.left,
+			first: part.at,
+			end: part.at
+		} : e.endpoint ? hole_request_times(e.endpoint, e.t) : null;
+		out.push({
+			name: id && region_names()[id] || (e.entry ? region_name(e.entry) : "a hole"),
+			wait_ms: Math.max(0, Math.round(e.t - start)),
+			below_fold: !!rect && rect.top + scrollY > innerHeight,
+			...e.endpoint ? { endpoint: e.endpoint } : {},
+			shown_at: Math.round(start),
+			...times ? {
+				left_at: times.left,
+				first_at: times.first,
+				end_at: times.end
+			} : {},
+			...times && "render" in times && times.render !== void 0 ? { server_ms: times.render } : {},
+			...times && "queue" in times && times.queue !== void 0 ? { server_queue_ms: times.queue } : {},
+			...part ? { batch_size: part.size } : {}
+		});
+	}
+	return out;
+}
+/** Each hole a batch request carried (since `since`): endpoint → the batch's start (the browser's
+*  timing of the POST, else the send), its own part's landing, and the batch's size. */
+function batch_parts(since) {
+	const out = /* @__PURE__ */ new Map();
+	const sent = /* @__PURE__ */ new Map();
+	for (const e of snapshot()) {
+		if (e.t < since) continue;
+		if (e.name === "region.batch.sent") sent.set(e.batch, {
+			t: e.t,
+			size: e.endpoints.length
+		});
+		else if (e.name === "region.batch.part") {
+			const b = sent.get(e.batch);
+			if (!b) continue;
+			b.left ??= batch_request_start(e.endpoint, b.t);
+			out.set(e.endpoint, {
+				left: Math.round(b.left),
+				at: Math.round(e.t),
+				size: b.size
+			});
+		}
+	}
+	return out;
+}
+/** When the browser sent the batch POST that left at about `sent` (its Resource Timing), or `sent`. */
+function batch_request_start(endpoint, sent) {
+	try {
+		const u = new URL(endpoint, location.href);
+		let best;
+		for (const r of performance.getEntriesByName(u.origin + u.pathname, "resource")) if (r.startTime >= sent - 5 && (!best || r.startTime < best.startTime)) best = r;
+		if (best) return best.requestStart || best.startTime;
+	} catch {}
+	return sent;
+}
+/** Batch requests that carried fewer holes than they were sent for (since `since`). */
+function hole_batches(since = last_nav()?.t ?? -Infinity) {
+	const out = [];
+	const sent = /* @__PURE__ */ new Map();
+	for (const e of snapshot()) {
+		if (e.t < since) continue;
+		if (e.name === "region.batch.sent") sent.set(e.batch, e.endpoints);
+		else if (e.name === "region.batch.done" && e.delivered < e.sent) {
+			const names = (sent.get(e.batch) ?? []).map((ep) => {
+				let id = "";
+				try {
+					id = new URL(ep, location.href).searchParams.get("id") ?? "";
+				} catch {
+					id = "";
+				}
+				return id && region_names()[id] || "a hole";
+			});
+			out.push({
+				sent: e.sent,
+				delivered: e.delivered,
+				status: e.status,
+				...e.refused ? { refused: e.refused } : {},
+				...e.final_url ? { final_url: e.final_url } : {},
+				names
+			});
+		}
+	}
+	return out;
+}
+/** Holes whose answer never came: the last failure of each (no retry after it), unless an answer
+*  arrived since. In a build the runtime says nothing and the page just keeps the fallback. */
+function hole_failures(since = last_nav()?.t ?? -Infinity) {
+	const out = [];
+	const answered = /* @__PURE__ */ new Set();
+	const seen = /* @__PURE__ */ new Set();
+	const ev = snapshot();
+	for (let i = ev.length - 1; i >= 0; i--) {
+		const e = ev[i];
+		if (e.name !== "region.server.applied" && e.name !== "region.server.failed") continue;
+		const key = e.endpoint ?? e.entry ?? "";
+		if (e.name === "region.server.applied") answered.add(key);
+		else if (e.final && !answered.has(key) && !seen.has(key) && e.t >= since) {
+			seen.add(key);
+			const el = e.endpoint ? document.querySelector(`ogygia-region[endpoint="${CSS.escape(e.endpoint)}"]`) : e.entry ? document.querySelector(`ogygia-region[entry="${CSS.escape(e.entry)}"]`) : null;
+			let id = "";
+			try {
+				id = e.endpoint ? new URL(e.endpoint, location.href).searchParams.get("id") ?? "" : "";
+			} catch {
+				id = "";
+			}
+			out.push({
+				fp: el?.getAttribute("data-og-fp") ?? void 0,
+				name: id && region_names()[id] || (e.entry ? region_name(e.entry) : "a hole"),
+				endpoint: e.endpoint,
+				reason: e.reason,
+				...e.final_url ? { final_url: e.final_url } : {},
+				...e.message ? { message: e.message } : {},
+				attempts: e.attempt
+			});
+		}
+	}
+	return out;
+}
+const cpu_memo = /* @__PURE__ */ new WeakMap();
+/** The CPU summary of a kept trace, against this page's island windows. */
+function cpu_of(page, trace) {
+	if (!is_trace(trace)) return null;
+	const n = `${page.islands.length}|${page.longtasks.length}`;
+	const hit = cpu_memo.get(trace);
+	if (hit && hit.n === n) return hit.out;
+	const windows = page.islands.map((i) => ({
+		fp: i.fp,
+		from: i.turn ?? i.loaded,
+		to: Math.max(i.done, i.fx ?? 0)
+	}));
+	const out = analyze_cpu(trace, windows, page.longtasks, location.href);
+	cpu_memo.set(trace, {
+		n,
+		out
+	});
+	return out;
+}
+/** The last in-app navigation (the router's body swap): where to, and when it started. */
+/** This document's streamed promises, each by its `page.data` key (the seed) and when its resolve
+*  arrived (the inline bootstrap's stamp): what held the document open. Null: nothing streamed. */
+function held_open() {
+	const t = globalThis[PAGE_DEFER_REGISTRY_KEY]?.t;
+	if (!t) return null;
+	const names = defer_keys(document.querySelector(PAGE_SEED_SELECTOR)?.textContent ?? "", PAGE_DEFER_KEY);
+	const keys = Object.entries(t).map(([id, at]) => ({
+		key: names.get(Number(id)) ?? null,
+		at: Math.round(at)
+	}));
+	return keys.length ? {
+		side: "browser",
+		keys: keys.sort((a, b) => a.at - b.at)
+	} : null;
+}
+/** The router's last navigation that SWAPPED the page (its start time, its address). One that started
+*  and never finished — it fell back to a full load the browser did not make (a test holding document
+*  loads back), or a later one overtook it — changed nothing: this is still the page it was. */
+function last_nav() {
+	const ev = snapshot();
+	let own = null;
+	let finished = null;
+	for (let i = ev.length - 1; i >= 0; i--) {
+		const e = ev[i];
+		if (e.realm !== "client") continue;
+		if (e.name === "nav.finish" && finished === null) finished = e.to;
+		else if (e.name === "nav.start" && finished !== null) {
+			own = {
+				to: finished,
+				t: e.t
+			};
+			break;
+		}
+	}
+	const path = (to) => to.split("?")[0];
+	const starts = ev.filter((e) => e.name === "nav.start" && e.realm === "client").map((e) => ({
+		t: e.t,
+		path: path(e.to)
+	}));
+	const moved = url_moves.filter((m) => !starts.some((s) => s.t <= m.t && s.path === path(m.to))).at(-1);
+	if (moved && (!own || moved.t > own.t)) return moved;
+	return own;
+}
+/** each change of the page's path, as the dock saw it (history.pushState, a back or forward) */
+const url_moves = [];
+let watching_url = false;
+function watch_url() {
+	if (watching_url || typeof history === "undefined") return;
+	watching_url = true;
+	let path = location.pathname;
+	const seen = () => {
+		if (location.pathname === path) return;
+		path = location.pathname;
+		url_moves.push({
+			to: location.pathname + location.search,
+			t: performance.now()
+		});
+		if (url_moves.length > 20) url_moves.shift();
+	};
+	const push = history.pushState;
+	history.pushState = function(...args) {
+		push.apply(this, args);
+		seen();
+	};
+	addEventListener("popstate", seen);
+}
+/**
+* After an in-app navigation the beacon's visit keeps the whole document's story on one clock: the
+* first page's islands, shifts and long tasks, then this page's. The tab is about THIS page, so its
+* events are cut to those since the navigation and shifted to start there; the paints and the
+* vitals stay the document's (a soft navigation paints nothing new the browser reports).
+*/
+function since_nav(page, t) {
+	const shift = (xs) => xs.filter((x) => x.t >= t).map((x) => ({
+		...x,
+		t: x.t - t
+	}));
+	const visit = page.visit;
+	const interaction = visit?.interaction && visit.interaction.t >= t ? {
+		...visit.interaction,
+		t: visit.interaction.t - t
+	} : void 0;
+	return {
+		vitals: {},
+		visit: visit ? {
+			...visit,
+			paints: {},
+			nav: {},
+			resources: [],
+			preload_misses: [],
+			preloads_unused: [],
+			uncompressed: [],
+			font_faces: [],
+			refetched: [],
+			scripts: [],
+			warnings: (visit.warnings ?? []).filter((w) => (w.t ?? 0) >= t),
+			interaction,
+			forced_layout: (visit.forced_layout ?? []).filter((f) => f.start >= t).map((f) => ({
+				...f,
+				start: f.start - t,
+				end: f.end - t
+			})),
+			scroll_jank: (visit.scroll_jank ?? []).filter((j) => j.start >= t).map((j) => ({
+				...j,
+				start: j.start - t
+			})),
+			navs: (page.visit?.navs ?? []).filter((n) => n.t >= t - 1).map((n) => ({
+				...n,
+				t: n.t - t,
+				fetched: n.fetched - t,
+				styled: n.styled - t,
+				swapped: n.swapped - t
+			}))
+		} : null,
+		islands: page.islands.filter((i) => i.t0 >= t).map((i) => ({
+			...i,
+			t0: i.t0 - t,
+			loaded: i.loaded - t,
+			done: i.done - t,
+			...i.turn !== void 0 ? { turn: i.turn - t } : {},
+			...i.fx !== void 0 ? { fx: i.fx - t } : {}
+		})),
+		firsts: shift(page.firsts),
+		shifts: shift(page.shifts),
+		longtasks: shift(page.longtasks),
+		...page.longtasks_from ? { longtasks_from: page.longtasks_from } : {},
+		...page.shifts_from ? { shifts_from: page.shifts_from } : {},
+		snapshots: page.snapshots
+	};
+}
+/** Awake islands whose children slot (`<ogygia-slot>`) holds nothing: children the server never
+*  rendered (the island adopts the server's HTML; it never renders them itself). */
+function empty_slots() {
+	const out = [];
+	for (const slot of document.querySelectorAll("ogygia-slot")) {
+		let content = false;
+		for (const n of slot.childNodes) if (n.nodeType === 1 || n.nodeType === 3 && (n.textContent ?? "").trim()) {
+			content = true;
+			break;
+		}
+		if (content) continue;
+		const fp = slot.closest("ogygia-region[data-hydrated]")?.getAttribute("data-og-fp");
+		if (fp) out.push(fp);
+	}
+	return out;
+}
+/** Other origins' URLs an element of the live document names (script src, link href, in the head
+*  and body alike): the third-party scripts no element names came by an import or a fetch. */
+function other_origin_refs() {
+	const out = /* @__PURE__ */ new Set();
+	for (const el of document.querySelectorAll("script[src],link[href]")) {
+		const url = el.src || el.href;
+		if (url && !url.startsWith(location.origin + "/")) out.add(url);
+	}
+	return [...out];
+}
+/**
+* What THIS browser cannot measure (Safari has no layout-shift, long-task or interaction timing;
+* only Chromium has the JS sampler and long animation frames). A finding that needs one of them
+* cannot appear here — its absence is not a clean bill, and the tab says so.
+*/
+function unmeasured(cpu_off) {
+	let types = [];
+	try {
+		types = PerformanceObserver.supportedEntryTypes ?? [];
+	} catch {
+		types = [];
+	}
+	const out = [];
+	if (!types.includes("layout-shift")) out.push("layout shifts (CLS; a hydration that moved the layout is estimated from the island's box)");
+	if (!types.includes("largest-contentful-paint")) out.push("the largest paint (LCP)");
+	if (!types.includes("event")) out.push("interaction timing (INP, slow interactions)");
+	if (!types.includes("longtask")) out.push("long tasks (the stalls are estimated from frames drawn late)");
+	if (!types.includes("long-animation-frame")) out.push("which script held a frame");
+	if (cpu_off === "unsupported") out.push("the main-thread CPU (the JS sampler)");
+	return out;
+}
+/** The slowest interaction's trace (taken after the load, kept in the page), read over its two
+*  spans — the same cut the profiler makes on its copy. Memoized per trace. */
+const icpu_memo = /* @__PURE__ */ new WeakMap();
+function interaction_cpu_of(page) {
+	let kept = page.cpu.traces.find((t) => t.label === "interaction" && t.spans);
+	if (!kept) {
+		const i = page.visit?.interaction;
+		const load = page.cpu.traces.find((t) => t.label === "page load");
+		if (!i || i.ms < 200 || !load || i.t < load.from || i.t + i.ms > load.to) return null;
+		const at = i.t + i.delay;
+		kept = {
+			...load,
+			spans: {
+				t: i.t,
+				wait: [i.t, at],
+				handler: [at, at + i.processing]
+			}
+		};
+	}
+	if (!kept.spans || !is_trace(kept.trace)) return null;
+	const hit = icpu_memo.get(kept.trace);
+	if (hit && hit.t === kept.spans.t) return interaction_lines(hit);
+	const { t, wait, handler } = kept.spans;
+	const MIN = 20;
+	const windows = [...wait[1] - wait[0] >= MIN ? [{
+		fp: "wait",
+		from: wait[0],
+		to: wait[1]
+	}] : [], ...handler[1] - handler[0] >= MIN ? [{
+		fp: "handler",
+		from: handler[0],
+		to: handler[1]
+	}] : []];
+	const s = analyze_cpu(kept.trace, windows, [], location.href);
+	const out = {
+		t,
+		wait: s.islands.wait ?? null,
+		handler: s.islands.handler ?? null
+	};
+	icpu_memo.set(kept.trace, out);
+	return interaction_lines(out);
+}
+/** the interaction's functions with the source's lines (a served line is not the source's): read
+*  from the files' inline maps; `mapped` once every app function has its line */
+function interaction_lines(i) {
+	const w = i.wait ? with_source_lines(i.wait.top) : null;
+	const h = i.handler ? with_source_lines(i.handler.top) : null;
+	return {
+		...i,
+		mapped: (w?.mapped ?? true) && (h?.mapped ?? true),
+		wait: i.wait && w ? {
+			...i.wait,
+			top: w.fns
+		} : null,
+		handler: i.handler && h ? {
+			...i.handler,
+			top: h.fns
+		} : null
+	};
+}
+/** the load's CPU with the source's lines, in every list the tabs and findings quote */
+function summary_lines(s) {
+	if (!s) return s;
+	const islands = {};
+	for (const [fp, v] of Object.entries(s.islands)) islands[fp] = {
+		...v,
+		top: with_source_lines(v.top).fns
+	};
+	return {
+		...s,
+		fns: with_source_lines(s.fns).fns,
+		islands,
+		outside: {
+			...s.outside,
+			top: with_source_lines(s.outside.top).fns
+		}
+	};
+}
+/** THE PROFILER'S LAST RUN OF A PAGE, in brief: from the dock's profile store (the Profiler tab's
+*  runs, shared data — never the report re-fetched), for the Page tab's server-side sentences. */
+function server_brief(path) {
+	const p = profile_for(path);
+	if (!p) return void 0;
+	const TIME_CODES = [
+		"mostly-waiting",
+		"phases",
+		"top-component",
+		"top-cpu"
+	];
+	let said;
+	for (const code of TIME_CODES) {
+		said = p.findings.find((f) => f.code === code)?.message;
+		if (said) break;
+	}
+	const trim = (m) => {
+		const s = m.length > 200 ? m.slice(0, 200) + "…" : m;
+		return s.endsWith(".") ? s.slice(0, -1) : s;
+	};
+	const comp = [...p.components].sort((a, b) => b.self_ms - a.self_ms)[0];
+	const no_store = p.cache_control && p.cache_control.toLowerCase().split(",").some((d) => d.trim() === "no-store") ? p.cache_control : void 0;
+	return {
+		ago_min: Math.max(0, (Date.now() - p.at) / 6e4),
+		render_ms: p.render_ms,
+		top: said ? trim(said) : comp ? `${comp.name} (${Math.round(comp.self_ms)} ms of its own)` : null,
+		calls: p.network?.count ?? 0,
+		calls_ms: p.network?.total_ms ?? 0,
+		...no_store ? { no_store } : {},
+		...p.prerendered ? { prerendered: p.prerendered } : {}
+	};
+}
+/** The island a script file belongs to, when it is one's own file (by its location or identity). */
+/** When this document came from Back or Forward and was NOT restored from the back/forward cache,
+*  the browser's reasons (`notRestoredReasons`, where it gives them), the first 6. */
+function not_restored_reasons() {
+	try {
+		const n = performance.getEntriesByType("navigation")[0];
+		if (!n || n.type !== "back_forward") return [];
+		return (n.notRestoredReasons?.reasons ?? []).map((r) => String(r?.reason ?? "")).filter(Boolean).slice(0, 6);
+	} catch {
+		return [];
+	}
+}
+function island_of_file(url) {
+	const base = (u) => {
+		const q = u.indexOf("?");
+		const p = q === -1 ? u : u.slice(0, q);
+		return p.slice(p.lastIndexOf("/") + 1);
+	};
+	const file = base(url);
+	if (!file) return {};
+	for (const r of all_regions()) {
+		const src = r.el.getAttribute("src");
+		if (r.entry && (src && base(src) === file || base(r.entry) === file)) return { island: region_name(r.entry) };
+	}
+	if (file.endsWith(".svelte")) {
+		const stem = file.slice(0, -7);
+		for (const r of all_regions()) if (r.kind === "island" && r.entry && region_name(r.entry) === stem) return { island: stem };
+	}
+	return {};
+}
+function read_page() {
+	const page = beacon_page();
+	if (!page) return null;
+	const regions = region_facts();
+	const nav = last_nav();
+	const load = page.cpu.traces.find((t) => t.label === "page load");
+	const cpu = load && !nav ? summary_lines(cpu_of(page, load.trace)) : null;
+	const base = nav ? since_nav(page, nav.t) : page;
+	const in_page = other_origin_refs();
+	const preload_misses = base.visit?.preload_misses?.map((m) => {
+		const vary = m.type === "font" ? vary_of(m.url) : null;
+		return vary ? {
+			...m,
+			vary
+		} : m;
+	});
+	const fallbacks = base.visit?.entry_fallbacks?.map((f) => ({
+		...f,
+		name: region_name(f.entry)
+	}));
+	const refetched = base.visit?.refetched?.map((f) => f.entry ? {
+		...f,
+		name: region_name(f.entry)
+	} : f);
+	const interaction = base.visit?.interaction ? {
+		...base.visit.interaction,
+		scripts: base.visit.interaction.scripts?.map((s) => ({
+			...s,
+			...island_of_file(s.url)
+		}))
+	} : void 0;
+	const scroll_jank = base.visit?.scroll_jank?.map((j) => ({
+		...j,
+		scripts: j.scripts.map((s) => ({
+			...s,
+			...island_of_file(s.url)
+		}))
+	}));
+	const with_visit = base.visit ? {
+		...base,
+		visit: {
+			...base.visit,
+			origin: location.origin,
+			in_page,
+			...preload_misses ? { preload_misses } : {},
+			...fallbacks ? { entry_fallbacks: fallbacks } : {},
+			...refetched ? { refetched } : {},
+			...interaction ? { interaction } : {},
+			...scroll_jank ? { scroll_jank } : {}
+		}
+	} : base;
+	const holes = hole_failures();
+	const code = island_code();
+	const waits = hole_waits(nav?.t ?? -Infinity, nav ? 0 : with_visit.visit?.paints?.fcp ?? 0);
+	const batches = hole_batches(nav?.t ?? -Infinity);
+	const restores = (window.__og_restore_log ?? []).filter((e) => e.t >= (nav?.t ?? -Infinity));
+	const drift = fp_drift(nav ? Math.round(nav.t) : 0).map((d) => ({
+		name: region_name(d.entry),
+		fp: d.fp_now,
+		...d.path ? { path: d.path } : {},
+		...d.was !== void 0 ? {
+			was: d.was,
+			now: d.now
+		} : {}
+	}));
+	const icpu = interaction_cpu_of(page);
+	const { regs, islands: seen } = leftover_state();
+	const leftovers = owned_leftovers(regs, seen, region_name, performance.now()).map(({ entry: _entry, ...l }) => l);
+	const scroll_blockers = owned_scroll_listeners(scroll_listeners(), seen, region_name);
+	const unload_owners = [...new Set(owned_scroll_listeners(unload_listeners(), seen, region_name).map((o) => o.owner))];
+	const not_restored = nav ? [] : not_restored_reasons();
+	const bfcache = unload_owners.length || not_restored.length ? {
+		unload: unload_owners,
+		...not_restored.length ? { not_restored } : {}
+	} : null;
+	const server_profiles = {};
+	for (const n of with_visit.visit?.navs ?? []) {
+		const path = n.to.split("?")[0];
+		const b = server_brief(path);
+		if (b) server_profiles[path] = b;
+	}
+	const server_profile = server_brief(nav ? nav.to.split("?")[0] : location.pathname);
+	const held = nav ? null : held_open();
+	const input = {
+		...with_visit,
+		...held ? { held_open: held } : {},
+		empty_slots: empty_slots(),
+		...holes.length ? { hole_failures: holes } : {},
+		...code.length ? { island_code: code } : {},
+		...waits.length ? { hole_waits: waits } : {},
+		...batches.length ? { hole_batches: batches } : {},
+		...restores.length ? { restore_events: restores } : {},
+		...drift.length ? { fp_drift: drift } : {},
+		...leftovers.length ? { leftovers } : {},
+		...scroll_blockers.length ? { scroll_blockers } : {},
+		...bfcache ? { bfcache } : {},
+		...icpu ? { interaction_cpu: icpu } : {},
+		server_profiles,
+		...server_profile ? { server_profile } : {},
+		...import.meta.env.DEV ? { dev: true } : {},
+		...typeof navigator !== "undefined" && browser_of(navigator.userAgent) ? { browser: browser_of(navigator.userAgent) } : {},
+		...(() => {
+			const at = globalThis[Symbol.for("ogygia.dock-open-at")];
+			return typeof at === "number" && !last_nav() ? { dock_open_at: at } : {};
+		})(),
+		...(() => {
+			const pre = import.meta.env.DEV ? prebundled_packages((with_visit.visit?.resources ?? []).filter((r) => r.type === "script").map((r) => r.url)) : null;
+			return pre?.length ? { prebundled: pre } : {};
+		})()
+	};
+	const view = {
+		page,
+		regions,
+		cpu,
+		nav,
+		unmeasured: unmeasured(page.cpu.off),
+		since: null,
+		...waits.length ? { holes: waits } : {},
+		...holes.length ? { holes_failed: holes } : {},
+		report: analyze_page(input, regions, failures(), nav ? performance.now() - nav.t : performance.now(), cpu)
+	};
+	if (nav) {
+		const woke = new Set(input.islands.map((i) => i.fp));
+		const seen = /* @__PURE__ */ new Set();
+		view.kept = regions.filter((r) => r.kind === "island" && r.hydrated && !woke.has(r.fp) && !seen.has(r.fp) && !!seen.add(r.fp)).map((r) => ({
+			fp: r.fp,
+			name: r.name
+		}));
+	}
+	if (!nav) {
+		const parts = {};
+		for (const k of [
+			"ttfb",
+			"fcp",
+			"lcp",
+			"inp"
+		]) {
+			const p = vital_parts(input, k);
+			if (p) parts[k] = p;
+		}
+		view.parts = parts;
+	}
+	const prev = nav ? null : previous_load();
+	if (prev) view.since = since_load(prev, snapshot_of(view));
+	return view;
+}
+function install_page_hook() {
+	if (typeof window !== "undefined" && !window.__ogygia_page) window.__ogygia_page = read_page;
+	if (typeof window !== "undefined") watch_url();
+	if (typeof window !== "undefined" && !window.__ogygia_styles) window.__ogygia_styles = async () => {
+		const { read_styles, scan_unscoped, styles_findings } = await import("./styles.js");
+		const report = read_styles(document, { match: true });
+		report.unscoped = await scan_unscoped(document);
+		return {
+			report,
+			findings: styles_findings(report)
+		};
+	};
+	if (typeof window !== "undefined" && !window.__ogygia_cache) window.__ogygia_cache = async () => {
+		const { probe_cache, cache_findings } = await import("./cache-headers.js");
+		const probes = await probe_cache(document);
+		return {
+			probes,
+			findings: cache_findings(probes)
+		};
+	};
+	if (typeof window !== "undefined" && !hooked_hide) {
+		hooked_hide = true;
+		addEventListener("pagehide", () => {
+			try {
+				const v = read_page();
+				if (v && !v.nav) sessionStorage.setItem(LOAD_KEY + location.pathname, JSON.stringify(snapshot_of(v)));
+			} catch {}
+		});
+	}
+}
+const LOAD_KEY = "ogygia:devtools:load:";
+let hooked_hide = false;
+/** the previous load's picture of THIS page, read once per document (before this load overwrites it) */
+let prev_load;
+function previous_load() {
+	if (prev_load !== void 0) return prev_load;
+	try {
+		const raw = sessionStorage.getItem(LOAD_KEY + location.pathname);
+		prev_load = raw ? JSON.parse(raw) : null;
+	} catch {
+		prev_load = null;
+	}
+	return prev_load;
+}
+function snapshot_of(v) {
+	const name = new Map(v.regions.map((r) => [r.fp, r.name]));
+	return {
+		path: location.pathname,
+		at: Date.now(),
+		findings: v.report.findings.map((f) => ({
+			code: f.code,
+			names: f.fps.map((fp) => name.get(fp) ?? fp),
+			...f.dev_compile ? { dev: true } : {}
+		})),
+		islands: v.report.rows.map((r) => {
+			const compile_ms = Math.round(dev_compile_ms({
+				dev: import.meta.env.DEV ? true : void 0,
+				visit: v.page.visit
+			}, r));
+			return {
+				name: r.name,
+				load_ms: r.load_ms,
+				hydrate_ms: r.hydrate_ms,
+				...compile_ms ? { compile_ms } : {}
+			};
+		}),
+		vitals: v.report.vitals.map((x) => ({
+			key: x.key,
+			value: x.value
+		})),
+		...v.parts ? { parts: v.parts } : {},
+		...v.report.findings.some((f) => f.dev_compile && (f.code === "slow-ttfb" || f.code === "vital-ttfb")) ? { page_compiled: true } : {},
+		...v.report.findings.some((f) => f.dev_compile && (f.code === "shift-cause" || f.code === "vital-cls")) ? { cls_dev: true } : {}
+	};
+}
+export { cpu_of, failures, held_open, hole_batches, hole_failures, hole_waits, install_page_hook, last_nav, read_page, region_facts, since_nav, summary_lines, unmeasured };