@ogygia/devtools 0.0.0 → 0.11.1

package/dist/profiler/ui/OneClock.svelte

@@ -0,0 +1,297 @@
+<script>/**
+* ONE CLOCK — the server's render, the HTML arriving, every file the browser fetched, the main
+* thread's long tasks, each island waking, and the paints, on one time axis from the click. A
+* `wake:'load'` island: the visit comes from the report (a long-lived host joined the beacon)
+* or, when the server has none, from this browser's own store (the beacon writes there too —
+* the merge happens here, never on an instance that may be gone). The critical path is the
+* highlighted thread through the lanes.
+*/
+import { one_clock } from "../visit.js";
+import { latest_visit } from "./store.js";
+import { fmt_ms } from "./format.js";
+let { server, visit = null, page, names = {}, hole_names = {} } = $props();
+// the report's visit seeds the clock; without one, this browser's store is asked once, at setup
+// svelte-ignore state_referenced_locally
+let v = $state(visit);
+// svelte-ignore state_referenced_locally
+let source = $state(visit ? "server" : "none");
+// svelte-ignore state_referenced_locally
+let looked = $state(!!visit);
+// svelte-ignore state_referenced_locally
+if (!visit) {
+	void latest_visit(page).then((rec) => {
+		if (rec?.visit) {
+			v = rec.visit;
+			source = "browser";
+		}
+	}).finally(() => looked = true);
+}
+const clock = $derived(v ? one_clock(v, server, names, hole_names) : null);
+const W = 1e3;
+const ROW = 16;
+const LEFT = 118;
+const TOP = 22;
+const COLOR = {
+	"server-hooks": "#8b5cf6",
+	"server-load": "#5b8fd6",
+	"server-render": "#4d9c6b",
+	"server-ogygia": "#c9a227",
+	"server-kit": "#6b7280",
+	"server-response": "#6b7280",
+	ttfb: "#374151",
+	download: "#5b8fd6",
+	css: "#d9a03d",
+	script: "#f0883e",
+	font: "#a371f7",
+	img: "#3fb950",
+	fetch: "#58a6ff",
+	other: "#6b7280",
+	task: "#ff7b72",
+	"island-load": "#79c0ff",
+	"island-hydrate": "#2ea043",
+	// a hole's answer (the devtools waterfall's colours)
+	"hole-wait": "#475569",
+	"hole-before": "#475569",
+	"hole-slot": "#f59e0b",
+	"hole-render": "#a78bfa",
+	"hole-server": "#c4b5fd",
+	"hole-rest": "#7dd3fc"
+};
+const MARK = {
+	fcp: "#8a94a2",
+	lcp: "#d9a03d",
+	dcl: "#8a94a2",
+	load: "#8a94a2",
+	first: "#6ca8e0",
+	mark: "#a371f7"
+};
+const color = (b) => COLOR[b.kind] ?? (b.kind.startsWith("server-") ? "#4d9c6b" : "#6b7280");
+const x = (t) => clock ? LEFT + t / clock.end * (W - LEFT - 8) : LEFT;
+const height = $derived(clock ? TOP + clock.lanes.length * ROW + 40 : 0);
+// time grid: a tick every nice step
+const ticks = $derived.by(() => {
+	if (!clock) return [];
+	const step = [
+		50,
+		100,
+		200,
+		250,
+		500,
+		1e3,
+		2e3,
+		5e3,
+		1e4
+	].find((s) => clock.end / s <= 12) ?? 1e4;
+	const out = [];
+	for (let t = 0; t <= clock.end; t += step) out.push(t);
+	return out;
+});
+let tip = $state(null);
+let only_critical = $state(false);
+// mark labels on three rows, a label dropped (row −1) when it would sit on one already placed
+const label_rows = $derived.by(() => {
+	if (!clock) return [];
+	const placed = [
+		-1e9,
+		-1e9,
+		-1e9
+	];
+	return [...clock.marks].sort((a, b) => a.t - b.t).map((m) => {
+		const px = x(m.t);
+		let row = -1;
+		for (let r = 0; r < 3; r++) {
+			if (px - placed[r] > 78) {
+				placed[r] = px;
+				row = r;
+				break;
+			}
+		}
+		return {
+			...m,
+			row
+		};
+	});
+});
+</script>
+
+{#if clock && v}
+	<div class="legend">
+		<span class="hint"
+			>{source === 'browser' ? 'from this browser’s own visit' : 'from your visit (beacon)'} · {new Date(
+				v.at
+			).toLocaleTimeString()}{v.nav.protocol ? ` · ${v.nav.protocol}` : ''}{v.viewport
+				? ` · ${v.viewport[0]}×${v.viewport[1]}`
+				: ''}</span
+		>
+		<label class="hint"
+			><input type="checkbox" bind:checked={only_critical} /> dim what is not on the critical path</label
+		>
+	</div>
+	<svg
+		viewBox="0 0 {W} {height}"
+		class="clock"
+		role="img"
+		aria-label="one clock: server, document, network, main thread, islands"
+		onmouseleave={() => (tip = null)}
+	>
+		{#each ticks as t (t)}
+			<line x1={x(t)} x2={x(t)} y1={TOP - 4} y2={height - 26} class="grid" />
+			<text x={x(t)} y={TOP - 8} class="tick">{t} ms</text>
+		{/each}
+		{#each clock.lanes as lane, i (lane.name)}
+			{@const y = TOP + i * ROW}
+			<text x={LEFT - 6} y={y + ROW - 4} class="lane-name" text-anchor="end">{lane.name}</text>
+			<line x1={LEFT} x2={W - 8} y1={y + ROW} y2={y + ROW} class="lane-sep" />
+			{#each lane.bars as b (b.id)}
+				<rect
+					x={x(b.t0)}
+					y={y + 2}
+					width={Math.max(x(b.t1) - x(b.t0), 1.5)}
+					height={ROW - 4}
+					fill={color(b)}
+					class="bar"
+					class:critical={b.critical}
+					class:dim={only_critical && !b.critical}
+					class:blocking={b.blocking}
+					role="presentation"
+					onmouseenter={(e) => (tip = { bar: b, x: e.clientX, y: e.clientY })}
+					onmousemove={(e) => (tip = { bar: b, x: e.clientX, y: e.clientY })}
+				/>
+			{/each}
+		{/each}
+		{#each label_rows as m, i (m.kind + m.t + i)}
+			<line
+				x1={x(m.t)}
+				x2={x(m.t)}
+				y1={TOP - 2}
+				y2={height - 26}
+				stroke={MARK[m.kind] ?? '#9aa4b2'}
+				class="mark"
+				class:soft={m.kind === 'first' || m.kind === 'mark'}
+			/>
+			{#if m.row >= 0}<text
+					x={x(m.t) + 3}
+					y={height - 16 + m.row * 9}
+					class="mark-label"
+					fill={MARK[m.kind] ?? '#9aa4b2'}>{m.label} {Math.round(m.t)}</text
+				>{/if}
+		{/each}
+	</svg>
+	{#if tip}
+		<div class="tip" style="left:{tip.x + 12}px;top:{tip.y + 12}px">
+			<b>{tip.bar.label}</b><br />
+			{fmt_ms(tip.bar.t0)} → {fmt_ms(tip.bar.t1)} ms ({fmt_ms(tip.bar.t1 - tip.bar.t0)} ms){#if tip.bar.detail}<br
+				/>{tip.bar.detail}{/if}{#if tip.bar.critical}<br /><i>on the critical path</i>{/if}
+		</div>
+	{/if}
+	{#if clock.critical.length}
+		<ol class="path">
+			{#each clock.critical as c (c.id)}
+				<li>
+					<b>{c.label}</b> <span class="hint">{fmt_ms(c.t0)} → {fmt_ms(c.t1)} ms</span> — {c.why}
+				</li>
+			{/each}
+			{#if v.paints.lcp !== undefined}<li>
+					<b>largest paint</b>
+					<span class="hint">at {fmt_ms(v.paints.lcp)} ms</span>{#if v.paints.lcp_tag}
+						— a <code>{v.paints.lcp_tag}</code>{#if v.paints.lcp_fp && names[v.paints.lcp_fp]}
+							inside <b>{names[v.paints.lcp_fp]}</b>{/if}{/if}
+				</li>{/if}
+		</ol>
+	{/if}
+	{#each clock.notes as n (n)}<p class="hint">{n}</p>{/each}
+	<p class="hint">
+		The server bar is the profiled render placed so it ends at this visit's first byte; everything
+		else is what this browser measured on the same clock. Islands show module load (light) then
+		hydration (dark). Each hole's lane is its answer: grey before its request left, amber waiting
+		for a render slot on the server, violet the server render, blue the network and the swap (the
+		devtools Page tab draws the same). A striped-looking gap before first paint with nothing in the
+		lanes is the browser parsing and laying out.
+	</p>
+{:else if looked}
+	<p class="hint">
+		No visit of <code>{page}</code> from this browser yet. Open the page once while logged in to the profiler,
+		then come back: the beacon records the visit into this browser and (on a long-lived host) into the
+		server.
+	</p>
+{:else}
+	<p class="hint">Looking for a visit of this page in this browser…</p>
+{/if}
+
+<style>
+	.legend {
+		display: flex;
+		gap: 16px;
+		align-items: center;
+		margin: 4px 0 6px;
+	}
+	.clock {
+		width: 100%;
+		height: auto;
+		display: block;
+		background: var(--bg-sunken);
+		border: 1px solid var(--line);
+		border-radius: 6px;
+	}
+	.grid {
+		stroke: #1c2129;
+		stroke-width: 1;
+	}
+	.tick {
+		fill: var(--text-faint);
+		font-size: 9px;
+		text-anchor: middle;
+	}
+	.lane-name {
+		fill: var(--text);
+		font-size: 10px;
+	}
+	.lane-sep {
+		stroke: var(--bg-raised);
+	}
+	.bar {
+		rx: 2;
+		opacity: 0.92;
+	}
+	.bar.dim {
+		opacity: 0.18;
+	}
+	.bar.critical {
+		stroke: #fff;
+		stroke-width: 1.2;
+		opacity: 1;
+	}
+	.bar.blocking {
+		stroke-dasharray: 2 2;
+		stroke: var(--warn);
+	}
+	.mark {
+		stroke-width: 1;
+		stroke-dasharray: 3 3;
+	}
+	.mark.soft {
+		opacity: 0.5;
+	}
+	.mark-label {
+		font-size: 9px;
+	}
+	.tip {
+		position: fixed;
+		z-index: 20;
+		background: var(--bg-raised);
+		border: 1px solid var(--line-strong);
+		border-radius: 6px;
+		padding: 6px 8px;
+		font-size: 12px;
+		max-width: 360px;
+		pointer-events: none;
+	}
+	.path {
+		margin: 8px 0 0;
+		padding-left: 20px;
+		font-size: 13px;
+	}
+	.path li {
+		margin: 2px 0;
+	}
+</style>

package/dist/profiler/ui/OneClock.svelte.d.ts

@@ -0,0 +1,27 @@
+/**
+     * ONE CLOCK — the server's render, the HTML arriving, every file the browser fetched, the main
+     * thread's long tasks, each island waking, and the paints, on one time axis from the click. A
+     * `wake:'load'` island: the visit comes from the report (a long-lived host joined the beacon)
+     * or, when the server has none, from this browser's own store (the beacon writes there too —
+     * the merge happens here, never on an instance that may be gone). The critical path is the
+     * highlighted thread through the lanes.
+     */
+import { type Visit } from '../visit.js';
+type $$ComponentProps = {
+    server: {
+        window_ms: number;
+        phases: {
+            phase: string;
+            label?: string;
+            cpu_ms: number;
+            wait_ms: number;
+        }[];
+    } | null;
+    visit?: Visit | null;
+    page: string;
+    names?: Record<string, string>;
+    hole_names?: Record<string, string>;
+};
+declare const OneClock: import("svelte").Component<$$ComponentProps, {}, "">;
+type OneClock = ReturnType<typeof OneClock>;
+export default OneClock;

package/dist/profiler/ui/Panel.svelte

@@ -0,0 +1,10 @@
+<script>let { id, title, sub = "", wide = false, children } = $props();
+export {};
+</script>
+
+<section class="panel" class:wide {id}>
+	<h2>
+		{title}{#if sub}<span class="hint">{sub}</span>{/if}
+	</h2>
+	{@render children()}
+</section>

package/dist/profiler/ui/Panel.svelte.d.ts

@@ -0,0 +1,16 @@
+/**
+     * One dashboard panel: a card with a title, an optional sub-line in the title, and whatever the
+     * section renders inside. Static — every section of the report sits in one, so the page reads as
+     * a grid of cards instead of a scroll of headings. `wide` spans a two-column row.
+     */
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    id: string;
+    title: string;
+    sub?: string;
+    wide?: boolean;
+    children: Snippet;
+};
+declare const Panel: import("svelte").Component<$$ComponentProps, {}, "">;
+type Panel = ReturnType<typeof Panel>;
+export default Panel;

package/dist/profiler/ui/Paths.svelte

@@ -0,0 +1,269 @@
+<script>import { fmt_ms, fmt_pct, CATEGORY_COLOR } from "./format.js";
+import { row_href } from "./row-anchor.svelte.js";
+let { paths, busy, fns } = $props();
+// a middle frame (a library's renderer with no time of its own) may have no functions-table row
+const known = $derived(fns ? new Set(fns) : null);
+const COL = 236;
+const ROW = 30;
+const NODE_W = 204;
+const NODE_H = 22;
+const PAD = 8;
+/** a tidy left-to-right layout: leaves take rows in DFS order, a parent sits at its children's middle */
+function layout(root) {
+	const nodes = [];
+	let row = 0;
+	let depth_max = 0;
+	const place = (n, depth, parent) => {
+		depth_max = Math.max(depth_max, depth);
+		const me = {
+			n,
+			x: PAD + depth * COL,
+			y: 0,
+			depth,
+			parent
+		};
+		nodes.push(me);
+		if (!n.children.length) me.y = PAD + row++ * ROW;
+		else {
+			const kids = n.children.map((c) => place(c, depth + 1, me));
+			me.y = (kids[0].y + kids[kids.length - 1].y) / 2;
+		}
+		return me;
+	};
+	place(root, 0, null);
+	return {
+		nodes,
+		width: PAD * 2 + (depth_max + 1) * COL - (COL - NODE_W),
+		height: PAD * 2 + Math.max(row, 1) * ROW
+	};
+}
+const groups = $derived(paths.map((g) => ({
+	g,
+	l: layout(g.tree)
+})));
+const link = (a, b) => {
+	const x1 = a.x + NODE_W;
+	const y1 = a.y + NODE_H / 2;
+	const x2 = b.x;
+	const y2 = b.y + NODE_H / 2;
+	const mx = (x1 + x2) / 2;
+	return `M${x1},${y1} C${mx},${y1} ${mx},${y2} ${x2},${y2}`;
+};
+const stroke = (n, total) => 1 + 7 * Math.min(1, n.ms / Math.max(total, .01));
+const href = (n) => !n.key ? null : n.category === "component" ? row_href(`comp:${n.name}`) : known && !known.has(n.key) ? null : row_href(`fn:${n.key}`);
+const short = (s, max = 19) => s.length > max ? s.slice(0, max - 1) + "…" : s;
+</script>
+
+{#each groups as { g, l }, gi (g.owner.key)}
+	<div class="path">
+		<div class="head">
+			<span class="no">{gi + 1}</span>
+			<b
+				>{g.fns.length} hot functions on one path under
+				<a href={href(g.tree) ?? '#'}>{g.owner.name}</a></b
+			>
+			<span class="hint">
+				· {fmt_ms(g.ms)} ms together ({fmt_pct(g.ms, busy)} of busy, {Math.round(g.share * 100)}% of
+				what {g.owner.name} costs){#if g.owner.calls}
+					· {g.owner.name} runs {g.owner.calls}×{/if}
+			</span>
+		</div>
+		<div class="fix">
+			Fix <b>{g.owner.name}</b> once — call it less, cache what it computes, or move it out of the
+			render — and
+			{g.fns.map((f) => f.name).join(', ')} go with it. Chasing them one by one gains the same time in
+			{g.fns.length} places.
+		</div>
+		<div class="legend">
+			<span><i class="sw owner"></i> the caller to fix</span>
+			<span><i class="sw hot"></i> a hot function</span>
+			<span><i class="sw"></i> a call between them</span>
+			<span
+				><i class="ln"></i> link width and the thin bar under a node = its share of the path's {fmt_ms(
+					g.ms
+				)} ms</span
+			>
+		</div>
+		<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+		<div
+			class="scroll"
+			tabindex="0"
+			role="region"
+			aria-label="call path from {g.owner.name}, scrolls sideways"
+		>
+			<!-- a group, not an image: its nodes are links (an image cannot hold anything to press) -->
+			<svg
+				width={l.width}
+				height={l.height}
+				viewBox="0 0 {l.width} {l.height}"
+				role="group"
+				aria-label="the call path from {g.owner.name} to its hot functions"
+			>
+				{#each l.nodes as n (n.n.key + n.x + n.y)}
+					{#if n.parent}
+						<path
+							d={link(n.parent, n)}
+							fill="none"
+							stroke={n.n.hot ? '#e8734a' : '#3a4250'}
+							stroke-width={stroke(n.n, g.ms)}
+							opacity="0.85"
+						/>
+					{/if}
+				{/each}
+				{#each l.nodes as n (n.n.key + n.x + n.y + 'n')}
+					{@const h = href(n.n)}
+					<a href={h ?? undefined} class:dead={!h}>
+						<g
+							class="node"
+							class:hot={n.n.hot}
+							class:owner={n.depth === 0}
+							transform="translate({n.x},{n.y})"
+						>
+							<title
+								>{n.n.name}{n.n.file ? ` (${n.n.file})` : ''} — {fmt_ms(n.n.ms)} ms of hot time through
+								here{n.n.hot ? ' · a hot function' : ''}</title
+							>
+							<rect width={NODE_W} height={NODE_H} rx="5" />
+							{#if n.depth > 0}
+								<!-- the node's share of the path's time, in its category colour -->
+								<rect
+									class="bar"
+									width={Math.max(2, (NODE_W - 12) * Math.min(1, n.n.ms / Math.max(g.ms, 0.01)))}
+									height="2"
+									x="6"
+									y={NODE_H - 4}
+									rx="1"
+									fill={CATEGORY_COLOR[n.n.category] ?? '#6b7280'}
+									opacity="0.8"
+								/>
+							{/if}
+							<text x="8" y="15">{short(n.n.name, n.n.calls ? 13 : 19)}</text>
+							{#if n.n.calls}<text class="calls" x={NODE_W - 50} y="15" text-anchor="end"
+									>×{n.n.calls}</text
+								>{/if}
+							<text class="ms" x={NODE_W - 6} y="15" text-anchor="end">{fmt_ms(n.n.ms)}</text>
+						</g>
+					</a>
+				{/each}
+			</svg>
+		</div>
+	</div>
+{/each}
+
+<style>
+	.path {
+		margin: 8px 0 14px;
+		padding: 10px 12px;
+		background: var(--bg-raised);
+		border: 1px solid var(--line);
+		border-radius: 8px;
+	}
+	.head {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 6px 8px;
+		align-items: baseline;
+		font-size: 13.5px;
+	}
+	.head .no {
+		display: inline-block;
+		width: 20px;
+		height: 20px;
+		line-height: 20px;
+		text-align: center;
+		border-radius: 50%;
+		background: var(--c-orange);
+		color: var(--bg-sunken);
+		font-weight: 700;
+		font-size: 12px;
+	}
+	.head .hint,
+	.fix {
+		color: var(--text-dim);
+		font-size: 12.5px;
+	}
+	.fix {
+		margin: 6px 0 4px;
+		padding: 5px 10px;
+		border-left: 3px solid var(--warn);
+		background: var(--bg-raised);
+		border-radius: 4px;
+	}
+	.legend {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 4px 14px;
+		margin: 4px 0 6px;
+		font-size: 11.5px;
+		color: var(--text-faint);
+	}
+	.legend span {
+		display: inline-flex;
+		align-items: center;
+		gap: 5px;
+	}
+	.legend .sw {
+		width: 12px;
+		height: 10px;
+		border-radius: 3px;
+		background: var(--bg-hover);
+		border: 1px solid var(--line);
+		display: inline-block;
+	}
+	.legend .sw.owner {
+		background: var(--accent-deep);
+		border-color: var(--c-blue);
+	}
+	.legend .sw.hot {
+		background: var(--warn-deep);
+		border-color: var(--c-orange);
+	}
+	.legend .ln {
+		width: 18px;
+		height: 3px;
+		background: var(--c-orange);
+		border-radius: 2px;
+		display: inline-block;
+	}
+	.scroll {
+		overflow-x: auto;
+	}
+	svg {
+		display: block;
+		font-family: ui-monospace, monospace;
+		font-size: 11.5px;
+	}
+	.node rect:not(.bar) {
+		fill: var(--bg-hover);
+		stroke: var(--line);
+	}
+	.node.hot rect:not(.bar) {
+		fill: var(--warn-deep);
+		stroke: var(--c-orange);
+	}
+	.node.owner rect:not(.bar) {
+		fill: var(--accent-deep);
+		stroke: var(--c-blue);
+		stroke-width: 1.5;
+	}
+	.node text {
+		fill: var(--text-faint);
+	}
+	.node.hot text,
+	.node.owner text {
+		fill: var(--text);
+	}
+	.node .ms {
+		fill: var(--text-dim);
+	}
+	.node .calls {
+		fill: var(--text-faint);
+		font-size: 9.5px;
+	}
+	a:hover .node rect:not(.bar) {
+		stroke: var(--text);
+	}
+	a.dead {
+		pointer-events: none;
+	}
+</style>

package/dist/profiler/ui/Paths.svelte.d.ts

@@ -0,0 +1,15 @@
+/**
+     * THE PATHS TO FIX — one graph per path group (analyze.ts `paths`): the caller to fix on the
+     * left, the chain of calls through to every hot function under it on the right. Link width and
+     * node bar are the hot time that flowed through; hot functions are lit, the rest of the chain
+     * dimmed. Hover a node for its time, click it to jump to its row. A `wake:'load'` island.
+     */
+import type { PathGroup } from '../analyze.js';
+type $$ComponentProps = {
+    paths: PathGroup[];
+    busy: number;
+    fns?: string[];
+};
+declare const Paths: import("svelte").Component<$$ComponentProps, {}, "">;
+type Paths = ReturnType<typeof Paths>;
+export default Paths;