@ogygia/devtools 0.0.0 → 0.11.0

package/dist/profiler/ui/Drill.svelte

@@ -0,0 +1,276 @@
+<script>import { PATTERN_LABEL } from "../patterns.js";
+import { fmt_ms } from "./format.js";
+let { root } = $props();
+const KIND = {
+	render: "",
+	phase: "",
+	lane: "load file",
+	cpu: "CPU",
+	wait: "waiting",
+	gap: "nothing recorded",
+	line: "",
+	more: ""
+};
+</script>
+
+{#snippet kind(n)}
+	{#if KIND[n.kind]}
+		<span class="dr-kind {n.kind}">
+			{KIND[n.kind]}{#if n.calls && n.calls > 1}
+				· {n.calls} {n.kind === 'cpu' ? 'renders' : 'calls'}{/if}
+			{#if n.runs}<span
+					title="Its lowest and highest over the profiled renders (for a wait: its calls' own time, which the network makes jitter): a difference smaller than this spread is noise"
+				>
+					· {n.kind === 'wait' ? 'calls took ' : ''}{fmt_ms(n.runs[0])}–{fmt_ms(n.runs[1])} ms over renders</span
+				>{/if}
+			{#if n.cold !== undefined}<span
+					class="dr-cold"
+					title="What it took in the first, cold render (loading and compiling its code, filling first-call caches): what a fresh serverless instance pays on its first request"
+				>
+					· {fmt_ms(n.cold)} ms cold</span
+				>{/if}
+			{#if n.alone === undefined}{:else if n.alone < 0.05}<span
+					title="Other calls were in flight the whole time: making this one faster saves nothing unless they get faster too"
+				>
+					· always beside other calls</span
+				>
+			{:else if n.alone < n.ms - 0.05}<span
+					title="Nothing else was in flight for this long: a faster answer saves at least this. The rest of its time it waited alongside other calls."
+				>
+					· {fmt_ms(n.alone)} ms alone</span
+				>
+			{:else}<span
+					title="Nothing else was in flight while it ran: every ms it gets faster, the render does too"
+				>
+					· alone</span
+				>{/if}
+		</span>
+	{/if}
+{/snippet}
+
+{#snippet fills(n)}
+	{#if n.fills}
+		{@const unread = n.fills.every((f) => !f.read)}
+		<!-- what the row was for: the page-data keys its lines feed; all unread = time for nothing -->
+		<span
+			class="dr-fills"
+			class:unread
+			title={unread
+				? 'Every key this feeds is read by nothing on the page: this time buys nothing. Drop it from the load, or move it where it is used.'
+				: 'The page-data keys this feeds (from the load’s return)'}
+		>
+			<!-- read keys first; an unread one in a mixed list is marked, its share of the work is waste -->
+			→ {#each [...n.fills]
+				.sort((a, b) => Number(b.read) - Number(a.read))
+				.slice(0, 5) as f, i (f.key)}{i ? ', ' : ''}<span
+					class:gone={!f.read && !unread}
+					title={f.read ? '' : 'nothing on the page reads this key'}>{f.key}</span
+				>{/each}{n.fills.length > 5 ? ` +${n.fills.length - 5}` : ''}{#if unread}&nbsp;· nothing
+				reads it{/if}
+		</span>
+	{/if}
+{/snippet}
+
+{#snippet split(n)}
+	{#if n.split}
+		{@const s = n.split}
+		{@const per = (ms) => fmt_ms(ms / s.calls)}
+		<!-- each call's own clock: what the other side claims, the rest until headers, the body -->
+		<span
+			class="dr-split"
+			title="Each call's own clock (averaged over its calls): until the answer's headers came, then reading the body. Their side is what the service's own Server-Timing header says it spent; the rest is the network, TLS, their framework or a queue in front of them."
+		>
+			{s.calls > 1 ? 'each call' : 'the call'}:
+			{#if s.theirs_ms !== undefined}
+				<b>{per(s.theirs_ms)} ms their side</b>{#if s.top}&nbsp;({s.top
+						.map((t) => `${t.name} ${per(t.ms)}`)
+						.join(', ')}){/if}{#if s.told && s.told < s.calls}
+					on {s.told} of {s.calls}{/if}
+				· {per(s.network_ms)} ms network &amp; the rest
+			{:else}
+				{per(s.network_ms)} ms until headers
+			{/if}
+			· {per(s.body_ms)} ms body
+		</span>
+	{/if}
+{/snippet}
+
+{#snippet row(n, depth)}
+	{@const pct = root.ms > 0 ? (n.ms / root.ms) * 100 : 0}
+	{#if n.children?.length}
+		<details class="d{depth}" open={depth < 1 && n.kind !== 'more'}>
+			<summary>
+				<span class="dr-bar"
+					><i class="dr-fill {n.kind}" style="width:{Math.max(0.5, pct).toFixed(1)}%"></i></span
+				>
+				<span class="dr-ms">{fmt_ms(n.ms)} ms</span>
+				<span class="dr-lab">{n.label}</span>
+				{@render kind(n)}
+				{@render fills(n)}
+				{#if n.why}<span class="dr-why"
+						>{#each n.why as k (k)}<span title="a slow pattern the report found here"
+								>{PATTERN_LABEL[k] ?? k}</span
+							>{/each}</span
+					>{/if}
+				{#if n.at && n.kind !== 'line'}<code class="dr-at">{n.at}</code>{/if}
+				{@render split(n)}
+			</summary>
+			<div class="kids">
+				{#each n.children as c, i (c.label + '\0' + i)}{@render row(c, depth + 1)}{/each}
+			</div>
+		</details>
+	{:else}
+		<div class="leaf d{depth}">
+			<span class="dr-bar"
+				><i class="dr-fill {n.kind}" style="width:{Math.max(0.5, pct).toFixed(1)}%"></i></span
+			>
+			<span class="dr-ms">{fmt_ms(n.ms)} ms</span>
+			{#if n.kind === 'line'}<code class="dr-lab">{n.at ?? n.label}</code>{:else}<span
+					class="dr-lab"
+					class:dim={n.kind === 'more'}>{n.label}</span
+				>{/if}
+			{@render kind(n)}
+			{@render fills(n)}
+			{#if n.why}<span class="dr-why"
+					>{#each n.why as k (k)}<span title="a slow pattern the report found here"
+							>{PATTERN_LABEL[k] ?? k}</span
+						>{/each}</span
+				>{/if}
+			{#if n.at && n.kind !== 'line'}<code class="dr-at">{n.at}</code>{/if}
+			{@render split(n)}
+		</div>
+	{/if}
+{/snippet}
+
+<div class="drill">
+	<p class="hint">
+		One {fmt_ms(root.ms)} ms render, split until it reaches a line: each part of the request, who held
+		its time (your function, a library, a call it waited on) and the line to open. A library's time goes
+		to your lines that call it; a wait, to the line that made the call; calls waiting at once share the
+		stretch. Every level adds up to the one above.
+	</p>
+	{#each root.children ?? [] as c, i (c.label + '\0' + i)}{@render row(c, 0)}{/each}
+</div>
+
+<style>
+	.drill {
+		font-size: 13px;
+	}
+	summary,
+	.leaf {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 10px;
+		padding: 3px 0;
+	}
+	summary {
+		cursor: pointer;
+		list-style: none;
+	}
+	summary::-webkit-details-marker {
+		display: none;
+	}
+	.kids {
+		margin-left: 18px;
+		border-left: 1px solid var(--line);
+		padding-left: 8px;
+	}
+	.dr-bar {
+		flex: 0 0 120px;
+		height: 10px;
+		background: var(--bg-hover);
+		border-radius: 3px;
+		overflow: hidden;
+	}
+	.dr-fill {
+		display: block;
+		height: 100%;
+		background: #4a9d6e;
+	}
+	.dr-fill.wait {
+		background: #3b82f6;
+	}
+	.dr-fill.gap,
+	.dr-fill.more {
+		background: var(--text-dim);
+		opacity: 0.45;
+	}
+	.dr-fill.phase {
+		background: var(--text);
+		opacity: 0.55;
+	}
+	.dr-ms {
+		flex: 0 0 64px;
+		font-variant-numeric: tabular-nums;
+		text-align: right;
+	}
+	.dr-lab {
+		flex: 1 1 auto;
+		min-width: 0;
+		overflow-wrap: anywhere;
+	}
+	/* a line is a chip that fits its text, not a second bar */
+	code.dr-lab {
+		flex: 0 1 auto;
+		margin-right: auto;
+	}
+	.d0 > summary .dr-lab {
+		font-weight: 600;
+	}
+	.dr-kind {
+		flex: 0 0 auto;
+		font-size: 11px;
+		color: var(--text-dim);
+		white-space: nowrap;
+	}
+	.dr-at {
+		flex: 0 1 auto;
+		font-size: 11.5px;
+		color: var(--text-dim);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	.dim {
+		color: var(--text-dim);
+	}
+	.dr-cold {
+		color: #2563eb;
+	}
+	.dr-fills {
+		flex: 0 0 auto;
+		font-size: 11.5px;
+		color: var(--text-dim);
+		font-family: var(--mono, ui-monospace, monospace);
+	}
+	.dr-fills .gone {
+		color: #b45309;
+		text-decoration: line-through;
+	}
+	.dr-fills.unread {
+		color: #b45309;
+		font-weight: 600;
+	}
+	/* the call's own clock, on its own line under the row's label */
+	.dr-split {
+		flex-basis: 100%;
+		padding-left: 204px;
+		font-size: 11.5px;
+		color: var(--text-dim);
+		margin-top: -2px;
+	}
+	.dr-why {
+		flex: 0 0 auto;
+		display: flex;
+		gap: 4px;
+	}
+	.dr-why > span {
+		font-size: 10.5px;
+		padding: 0 6px;
+		border-radius: 999px;
+		background: color-mix(in srgb, #d97706 18%, transparent);
+		color: var(--text);
+		white-space: nowrap;
+	}
+</style>

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

@@ -0,0 +1,12 @@
+/**
+     * THE DRILL-DOWN (drill.ts): one render's time as a tree that adds up at every level — phase →
+     * who held it (a function, a library, a call) → the line. Static markup: `<details>` open the
+     * levels, no island. Each bar is its share of the whole render.
+     */
+import type { DrillNode } from '../drill.js';
+type $$ComponentProps = {
+    root: DrillNode;
+};
+declare const Drill: import("svelte").Component<$$ComponentProps, {}, "">;
+type Drill = ReturnType<typeof Drill>;
+export default Drill;

package/dist/profiler/ui/ExportButton.svelte

@@ -0,0 +1,59 @@
+<script>/**
+* Export the report as its encrypted `.ogp` — a `wake:'load'` island. With the bytes on the page
+* (`ogpB64`, base64) they are decoded to a Blob and downloaded client-side, so it works even after
+* the server evicts the report. A report shown from this browser's kept copy has no bytes (only a
+* server holds the key): the kept copy rides to whichever instance answers, and it encrypts it
+* (report-request.ts). No key in the browser either way.
+*/
+import { page_ogp, report_request } from "./report-request.js";
+let { id, ogpB64 = "", base = "" } = $props();
+let busy = $state(false);
+let error = $state("");
+function save(blob) {
+	const a = document.createElement("a");
+	a.href = URL.createObjectURL(blob);
+	a.download = `profile-${id}.ogp`;
+	document.body.appendChild(a);
+	a.click();
+	a.remove();
+	setTimeout(() => URL.revokeObjectURL(a.href), 1500);
+}
+async function download() {
+	// the bytes: a prop when given one, else the page's one copy (report-request.ts page_ogp)
+	const b64 = ogpB64 || page_ogp();
+	if (b64) {
+		const bin = atob(b64);
+		const arr = new Uint8Array(bin.length);
+		for (let i = 0; i < bin.length; i++) arr[i] = bin.charCodeAt(i);
+		save(new Blob([arr], { type: "application/octet-stream" }));
+		return;
+	}
+	if (busy) return;
+	busy = true;
+	error = "";
+	try {
+		// no bytes on the page: the kept copy goes along (ogpB64 empty, so report_request sends it)
+		const res = await report_request(base, id, "ogp");
+		if (!res.ok) throw new Error((await res.text()).slice(0, 200) || String(res.status));
+		save(await res.blob());
+	} catch (err) {
+		error = err instanceof Error ? err.message : "export failed";
+	} finally {
+		busy = false;
+	}
+}
+</script>
+
+<button type="button" class="btn primary" onclick={download} aria-busy={busy}>
+	<svg
+		class="ic"
+		viewBox="0 0 24 24"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="2"
+		stroke-linecap="round"
+		stroke-linejoin="round"><path d="M12 3v13m0 0l-4.5-4.5M12 16l4.5-4.5M4 21h16" /></svg
+	>
+	{busy ? 'Encrypting…' : 'Export'}<span class="sub">.ogp · encrypted</span>
+</button>
+{#if error}<span class="hint warn" role="alert">Export failed: {error}</span>{/if}

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

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    id: string;
+    ogpB64?: string;
+    base?: string;
+};
+declare const ExportButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type ExportButton = ReturnType<typeof ExportButton>;
+export default ExportButton;

package/dist/profiler/ui/Flame.svelte

@@ -0,0 +1,222 @@
+<script>import { CATEGORY_COLOR } from "./format.js";
+let { flame } = $props();
+const ROW = 20;
+let canvas;
+// the zoom starts at the root it was given; clicks own it after
+// svelte-ignore state_referenced_locally
+let zoom = $state(flame);
+let zstack = [];
+let resizeTick = $state(0);
+let tip = $state(null);
+let rects = [];
+// SEARCH: bars whose name or file contains the query stay lit, everything else dims; the count
+// and the summed time tell how much of the graph the match covers; Enter zooms to the heaviest hit.
+let query = $state("");
+const q = $derived(query.trim().toLowerCase());
+const matches = $derived.by(() => {
+	if (!q) return {
+		count: 0,
+		ms: 0,
+		best: null
+	};
+	let count = 0, ms = 0, best = null;
+	const walk = (n, inside) => {
+		const hit = n.n.toLowerCase().includes(q) || n.f.toLowerCase().includes(q);
+		if (hit) {
+			count++;
+			if (!best || n.t > best.t) best = n;
+		}
+		// time counts once per matching subtree (a match inside a match is already covered)
+		if (hit && !inside) ms += n.t;
+		for (const c of n.ch ?? []) walk(c, inside || hit);
+	};
+	walk(flame, false);
+	return {
+		count,
+		ms,
+		best
+	};
+});
+const is_match = (n) => !!q && (n.n.toLowerCase().includes(q) || n.f.toLowerCase().includes(q));
+function zoom_to_match() {
+	const best = matches.best;
+	if (!best || best === zoom) return;
+	zstack.push(zoom);
+	zoom = best;
+}
+function depth(n) {
+	let d = 1;
+	for (const c of n.ch ?? []) d = Math.max(d, 1 + depth(c));
+	return d;
+}
+function layout() {
+	if (!canvas) return;
+	const ctx = canvas.getContext("2d");
+	const dpr = window.devicePixelRatio || 1;
+	const w = canvas.clientWidth || 900;
+	const h = Math.min(600, Math.max(260, depth(zoom) * ROW + 10));
+	canvas.style.height = h + "px";
+	canvas.width = w * dpr;
+	canvas.height = h * dpr;
+	ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+	ctx.clearRect(0, 0, w, h);
+	rects = [];
+	const draw = (node, d, x, width) => {
+		if (width < .5) return;
+		const y = d * ROW;
+		ctx.fillStyle = CATEGORY_COLOR[node.c] || "#6b7280";
+		ctx.globalAlpha = q ? is_match(node) ? 1 : .22 : 1;
+		ctx.beginPath();
+		if (ctx.roundRect) ctx.roundRect(x + .5, y + 1, Math.max(width - 1, 1), ROW - 2, 2);
+		else ctx.rect(x + .5, y + 1, Math.max(width - 1, 1), ROW - 2);
+		ctx.fill();
+		if (width > 30) {
+			ctx.fillStyle = "#0d1014";
+			ctx.font = "11px ui-monospace, monospace";
+			ctx.save();
+			ctx.beginPath();
+			ctx.rect(x + 4, y, width - 8, ROW);
+			ctx.clip();
+			ctx.fillText(node.n + " (" + node.t.toFixed(1) + "ms)", x + 5, y + 14);
+			ctx.restore();
+		}
+		ctx.globalAlpha = 1;
+		rects.push({
+			x,
+			y,
+			w: width,
+			h: ROW,
+			node
+		});
+		let cx = x;
+		const scale = node.t > 0 ? width / node.t : 0;
+		for (const c of node.ch ?? []) {
+			const cw = c.t * scale;
+			draw(c, d + 1, cx, cw);
+			cx += cw;
+		}
+	};
+	draw(zoom, 0, 0, w);
+}
+// lay out again when the zoom, the size or the search changes: the effect reads all three
+$effect(() => {
+	void zoom;
+	void resizeTick;
+	void q;
+	layout();
+});
+$effect(() => {
+	const on = () => resizeTick++;
+	window.addEventListener("resize", on);
+	return () => window.removeEventListener("resize", on);
+});
+function hit(ev) {
+	const r = canvas.getBoundingClientRect();
+	const mx = ev.clientX - r.left, my = ev.clientY - r.top;
+	for (let i = rects.length - 1; i >= 0; i--) {
+		const q = rects[i];
+		if (mx >= q.x && mx <= q.x + q.w && my >= q.y && my <= q.y + q.h) return q;
+	}
+	return null;
+}
+function onMove(ev) {
+	const q = hit(ev);
+	tip = q ? {
+		node: q.node,
+		x: Math.min(ev.clientX + 14, window.innerWidth - 360),
+		y: ev.clientY + 14
+	} : null;
+}
+function onClick(ev) {
+	const q = hit(ev);
+	if (!q) return;
+	if (q.node === zoom) zoom = zstack.pop() || flame;
+	else {
+		zstack.push(zoom);
+		zoom = q.node;
+	}
+}
+</script>
+
+<div class="tools">
+	<input
+		type="search"
+		placeholder="find a function or file in the graph…"
+		bind:value={query}
+		onkeydown={(e) => e.key === 'Enter' && zoom_to_match()}
+		aria-label="search the flame graph"
+	/>
+	{#if q}
+		<span class="hint">
+			{#if matches.count}
+				{matches.count} bar{matches.count === 1 ? '' : 's'} · {matches.ms.toFixed(1)} ms · Enter zooms
+				to the heaviest
+			{:else}no match{/if}
+		</span>
+	{/if}
+	<span class="crumb">
+		{#if zoom !== flame}zoomed: {zoom.n} — click the top bar to go back{/if}
+	</span>
+</div>
+<canvas
+	class="flame"
+	bind:this={canvas}
+	onmousemove={onMove}
+	onmouseleave={() => (tip = null)}
+	onclick={onClick}
+></canvas>
+{#if tip}
+	<div class="flame-tip" style="display:block;left:{tip.x}px;top:{tip.y}px">
+		<b>{tip.node.n}</b><br />total {tip.node.t.toFixed(2)} ms · self {tip.node.s.toFixed(2)} ms
+		{#if tip.node.f}<br /><span style="color:var(--text-faint)">{tip.node.f}</span>{/if}
+	</div>
+{/if}
+
+<style>
+	.tools {
+		display: flex;
+		gap: 12px;
+		align-items: center;
+		flex-wrap: wrap;
+		margin: 6px 0 8px;
+	}
+	.tools input {
+		font: inherit;
+		font-size: 13px;
+		background: var(--bg-raised);
+		color: var(--text);
+		border: 1px solid var(--line);
+		border-radius: 6px;
+		padding: 5px 10px;
+		min-width: 280px;
+	}
+	.tools .hint,
+	.tools .crumb {
+		color: var(--text-faint);
+		font-size: 12px;
+	}
+	.flame {
+		width: 100%;
+		height: 460px;
+		border: 1px solid var(--line);
+		border-radius: 8px;
+		background: var(--bg-sunken);
+		cursor: pointer;
+	}
+	.flame-tip {
+		position: fixed;
+		pointer-events: none;
+		background: var(--bg-hover);
+		border: 1px solid var(--line);
+		border-radius: 6px;
+		padding: 6px 10px;
+		font-size: 12px;
+		display: none;
+		max-width: 480px;
+		z-index: 10;
+		box-shadow: 0 4px 16px #0008;
+	}
+	.flame-tip b {
+		font-family: ui-monospace, monospace;
+	}
+</style>

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

@@ -0,0 +1,12 @@
+/**
+     * Flame graph — a `wake:'load'` canvas island (was FLAME_JS). Width = time; click a bar to zoom,
+     * click the top bar to zoom back out; hover for detail. Zoom + tooltip are `$state`; the canvas
+     * redraws in an `$effect` on zoom/resize. `rects` (hit regions) is plain, rebuilt each draw.
+     */
+import type { FlameNode } from '../analyze.js';
+type $$ComponentProps = {
+    flame: FlameNode;
+};
+declare const Flame: import("svelte").Component<$$ComponentProps, {}, "">;
+type Flame = ReturnType<typeof Flame>;
+export default Flame;