@ogygia/devtools 0.0.0-stage → 0.11.0

package/dist/profiler/ui/DataRiver.svelte

@@ -0,0 +1,206 @@
+<script>import { fmt_bytes, fmt_ms } from "./format.js";
+let { river } = $props();
+const W = 1e3;
+const COL_X = [
+	40,
+	300,
+	560,
+	820
+];
+const NODE_W = 12;
+const PAD = 8;
+const MIN_H = 8;
+const COLOR = [
+	"#5b8fd6",
+	"#4d9c6b",
+	"#d9a03d",
+	"#2ea043"
+];
+const waste_keys = $derived(new Set(river.waste.map((w) => w.key)));
+// layout: per column, node heights proportional to value (a column's own unit), stacked
+const layout = $derived.by(() => {
+	const H_COL = 260;
+	const pos = new Map();
+	for (let col = 0; col < 4; col++) {
+		const nodes = river.nodes.filter((n) => n.col === col);
+		if (!nodes.length) continue;
+		const total = nodes.reduce((s, n) => s + Math.max(n.value, 0), 0) || 1;
+		const avail = H_COL - PAD * (nodes.length - 1);
+		let y = 20;
+		for (const n of nodes) {
+			const h = Math.max(MIN_H, Math.max(n.value, 0) / total * avail * .9);
+			pos.set(n.id, {
+				x: COL_X[col],
+				y,
+				h,
+				n
+			});
+			y += h + PAD;
+		}
+	}
+	// links: thickness per column pair, normalised to the biggest link of that pair; stacked on both ends
+	const out_y = new Map();
+	const in_y = new Map();
+	const paths = [];
+	for (let col = 0; col < 3; col++) {
+		const links = river.links.filter((l) => pos.get(l.from)?.n.col === col);
+		const max = Math.max(...links.map((l) => l.value), 1);
+		for (const l of links) {
+			const a = pos.get(l.from);
+			const b = pos.get(l.to);
+			if (!a || !b) continue;
+			const w = Math.max(2, l.value / max * Math.min(a.h, b.h, 40));
+			const y0 = a.y + (out_y.get(l.from) ?? 0) + w / 2;
+			const y1 = b.y + (in_y.get(l.to) ?? 0) + w / 2;
+			out_y.set(l.from, (out_y.get(l.from) ?? 0) + w);
+			in_y.set(l.to, (in_y.get(l.to) ?? 0) + w);
+			const x0 = a.x + NODE_W;
+			const x1 = b.x;
+			const c = (x1 - x0) / 2;
+			paths.push({
+				d: `M${x0},${y0} C${x0 + c},${y0} ${x1 - c},${y1} ${x1},${y1}`,
+				w,
+				l,
+				from: a.n,
+				to: b.n,
+				waste: b.n.kind === "key" && waste_keys.has(b.n.label)
+			});
+		}
+	}
+	const height = Math.max(...[...pos.values()].map((p) => p.y + p.h), 120) + 24;
+	return {
+		pos: [...pos.values()],
+		paths,
+		height
+	};
+});
+let tip = $state(null);
+const move = (e) => {
+	if (tip) tip = {
+		text: tip.text,
+		x: e.clientX,
+		y: e.clientY
+	};
+};
+const fmt = (v, unit) => unit === "ms" ? `${fmt_ms(v)} ms` : fmt_bytes(v);
+const unit_of = (n) => n.col <= 1 ? "ms" : "bytes";
+const HEAD = [
+	"upstream calls (ms waited)",
+	"load functions",
+	"page.data keys (bytes in the seed)",
+	"islands (bytes they read)"
+];
+</script>
+
+<svg
+	viewBox="0 0 {W} {layout.height}"
+	class="river"
+	role="img"
+	aria-label="the data river"
+	onmouseleave={() => (tip = null)}
+>
+	{#each HEAD as h, i (h)}
+		<text x={COL_X[i]} y="12" class="head">{h}</text>
+	{/each}
+	{#each layout.paths as p, i (i)}
+		<path
+			d={p.d}
+			stroke={p.waste ? '#ff7b72' : COLOR[p.from.col]}
+			stroke-width={p.w}
+			fill="none"
+			class="band"
+			role="presentation"
+			onmouseenter={(e) =>
+				(tip = {
+					text: `${p.from.label} → ${p.to.label}: ${fmt(p.l.value, p.l.unit)}${p.waste ? ' — no island reads this key' : ''}`,
+					x: e.clientX,
+					y: e.clientY
+				})}
+			onmousemove={move}
+		/>
+	{/each}
+	{#each layout.pos as p (p.n.id)}
+		<rect
+			x={p.x}
+			y={p.y}
+			width={NODE_W}
+			height={p.h}
+			fill={p.n.kind === 'key' && waste_keys.has(p.n.label)
+				? '#ff7b72'
+				: p.n.kind === 'unknown'
+					? '#6b7280'
+					: COLOR[p.n.col]}
+			rx="2"
+			role="presentation"
+			onmouseenter={(e) =>
+				(tip = {
+					text: `${p.n.label}: ${fmt(p.n.value, unit_of(p.n))}${p.n.detail ? ` — ${p.n.detail}` : ''}`,
+					x: e.clientX,
+					y: e.clientY
+				})}
+			onmousemove={move}
+		/>
+		<text
+			x={p.x + NODE_W + 5}
+			y={p.y + Math.min(p.h, 14) / 2 + 4}
+			class="label"
+			class:waste={p.n.kind === 'key' && waste_keys.has(p.n.label)}
+			>{p.n.label.length > 34 ? p.n.label.slice(0, 32) + '…' : p.n.label}
+			<tspan class="val">{fmt(p.n.value, unit_of(p.n))}</tspan></text
+		>
+	{/each}
+</svg>
+{#if tip}
+	<div class="tip" style="left:{tip.x + 12}px;top:{tip.y + 12}px">{tip.text}</div>
+{/if}
+{#each river.notes as n (n)}<p class="verdict">{n}</p>{/each}
+<p class="hint">
+	Left to right: what each upstream call cost the load that made it, what each load put into <code
+		>page.data</code
+	>, how big each key is in the seed the browser downloads, and which island reads it. A load whose
+	source the profiler could not read shows its keys as unknown; a key in red ships to no island.
+</p>
+
+<style>
+	.river {
+		width: 100%;
+		height: auto;
+		display: block;
+		background: var(--bg-sunken);
+		border: 1px solid var(--line);
+		border-radius: 6px;
+	}
+	.head {
+		fill: var(--text-dim);
+		font-size: 10px;
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+	}
+	.band {
+		opacity: 0.45;
+	}
+	.band:hover {
+		opacity: 0.85;
+	}
+	.label {
+		fill: var(--text);
+		font-size: 11px;
+	}
+	.label.waste {
+		fill: var(--bad);
+	}
+	.val {
+		fill: var(--text-faint);
+	}
+	.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: 380px;
+		pointer-events: none;
+	}
+</style>

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

@@ -0,0 +1,13 @@
+/**
+     * THE DATA RIVER — calls → loads → page.data keys → islands as a flow (river.ts). Band width is
+     * the amount: ms on the left half (what the loads waited for), bytes on the right (what the seed
+     * carries and who reads it). A key that no island reads ends in red: fetched and shipped for no
+     * one. A `wake:'load'` island; hover a band or a node.
+     */
+import type { River } from '../river.js';
+type $$ComponentProps = {
+    river: River;
+};
+declare const DataRiver: import("svelte").Component<$$ComponentProps, {}, "">;
+type DataRiver = ReturnType<typeof DataRiver>;
+export default DataRiver;

package/dist/profiler/ui/DomTravel.svelte

@@ -0,0 +1,207 @@
+<script>/**
+* DOM TIME TRAVEL — each island's markup as the server sent it, after it hydrated, and when the
+* page went away, with the diff between them (dom-diff.ts), plus the visit's layout shifts drawn
+* on a page-shaped map with the island that moved. Browser-only data: the beacon keeps the
+* snapshots in this browser's store (they are big), never on the server. A `wake:'load'` island.
+*/
+import { html_diff, shift_boxes } from "../dom-diff.js";
+import { latest_visit } from "./store.js";
+let { page, names = {}, visit = null } = $props();
+let rec = $state(null);
+let looked = $state(false);
+// read once, at setup: the page's latest visit from this browser's store
+// svelte-ignore state_referenced_locally
+void latest_visit(page).then((r) => rec = r).finally(() => looked = true);
+const v = $derived(rec?.visit ?? visit);
+const boxes = $derived(v ? shift_boxes(v.shifts, v.viewport) : []);
+const cls_total = $derived(boxes.reduce((s, b) => s + b.value, 0));
+const name = (fp) => fp ? names[fp] ?? fp.slice(0, 8) : "outside any island";
+let picked = $state(null);
+let moment = $state("hydrated");
+const snap = $derived(rec?.snapshots.find((s) => s.fp === picked) ?? rec?.snapshots[0] ?? null);
+const diff = $derived(snap ? html_diff(snap.ssr, moment === "final" && snap.final !== undefined ? snap.final : snap.hydrated) : null);
+const VW = 240;
+const vh = $derived(v?.viewport ? Math.round(VW * v.viewport[1] / v.viewport[0]) : 160);
+</script>
+
+{#if v && (boxes.length || rec?.snapshots.length)}
+	<div class="travel">
+		<div class="map">
+			<h3 class="sub-h">
+				Layout shifts <span class="hint"
+					>{cls_total.toFixed(3)} CLS in this visit, where and whose</span
+				>
+			</h3>
+			<svg
+				viewBox="0 0 {VW} {vh}"
+				width={VW}
+				height={vh}
+				class="viewport"
+				role="img"
+				aria-label="layout shifts on the viewport"
+			>
+				<rect x="0" y="0" width={VW} height={vh} class="vp" />
+				{#each boxes as b, i (i)}
+					<rect
+						x={b.fx * VW}
+						y={b.fy * vh}
+						width={Math.max(b.w * VW, 2)}
+						height={Math.max(b.h * vh, 2)}
+						class="from"
+					/>
+					<rect
+						x={b.x * VW}
+						y={b.y * vh}
+						width={Math.max(b.w * VW, 2)}
+						height={Math.max(b.h * vh, 2)}
+						class="to"
+						style="opacity:{0.35 + Math.min(0.6, b.value * 3)}"
+					>
+						<title>{name(b.fp)} · {b.value.toFixed(3)} at {Math.round(b.t)} ms</title>
+					</rect>
+					<line
+						x1={b.fx * VW + (b.w * VW) / 2}
+						y1={b.fy * vh + (b.h * vh) / 2}
+						x2={b.x * VW + (b.w * VW) / 2}
+						y2={b.y * vh + (b.h * vh) / 2}
+						class="arrow"
+					/>
+				{/each}
+			</svg>
+			{#if boxes.length}
+				<ul class="shifts">
+					{#each boxes.slice(0, 8) as b, i (i)}
+						<li>
+							<b>{name(b.fp)}</b>
+							{b.value.toFixed(3)} <span class="hint">at {Math.round(b.t)} ms</span>
+						</li>
+					{/each}
+				</ul>
+			{:else}
+				<p class="hint">No layout shift in this visit.</p>
+			{/if}
+		</div>
+		<div class="diff">
+			<h3 class="sub-h">
+				Markup, then and now <span class="hint"
+					>{rec?.snapshots.length ?? 0} island{(rec?.snapshots.length ?? 0) === 1 ? '' : 's'} changed
+					between the server and the browser</span
+				>
+			</h3>
+			{#if rec?.snapshots.length}
+				<p class="pick">
+					{#each rec.snapshots as s (s.fp)}
+						<button class:on={snap?.fp === s.fp} onclick={() => (picked = s.fp)}
+							>{name(s.fp)}</button
+						>
+					{/each}
+					<span class="hint">· server →</span>
+					<button class:on={moment === 'hydrated'} onclick={() => (moment = 'hydrated')}
+						>hydrated</button
+					>
+					{#if snap?.final !== undefined}<button
+							class:on={moment === 'final'}
+							onclick={() => (moment = 'final')}>when the page left</button
+						>{/if}
+				</p>
+				{#if diff}
+					<p class="hint">
+						{diff.removed.toLocaleString()} chars gone, {diff.added.toLocaleString()} added, {Math.round(
+							diff.same_ratio * 100
+						)}% of the tokens unchanged{diff.truncated
+							? ' (too large to diff token by token: shown as one removal and one addition)'
+							: ''}.
+					</p>
+					<pre class="d">{#each diff.ops as op, i (i)}<span class={op.kind}>{op.text}</span
+							>{/each}</pre>
+				{/if}
+			{:else}
+				<p class="hint">Every island's markup after hydration matched what the server sent.</p>
+			{/if}
+		</div>
+	</div>
+{:else if looked}
+	<p class="hint">
+		No visit of <code>{page}</code> kept in this browser. Open the page once while logged in to the profiler;
+		the beacon stores the islands' markup before and after hydration and the layout shifts here.
+	</p>
+{:else}
+	<p class="hint">Reading this browser's visit…</p>
+{/if}
+
+<style>
+	.travel {
+		display: grid;
+		grid-template-columns: 280px 1fr;
+		gap: 20px;
+		align-items: start;
+	}
+	@media (max-width: 800px) {
+		.travel {
+			grid-template-columns: 1fr;
+		}
+	}
+	.viewport {
+		display: block;
+		border: 1px solid var(--line);
+		border-radius: 4px;
+		background: var(--bg-sunken);
+	}
+	.vp {
+		fill: var(--bg-sunken);
+	}
+	.from {
+		fill: none;
+		stroke: #6b7280;
+		stroke-dasharray: 3 2;
+	}
+	.to {
+		fill: var(--bad);
+		stroke: var(--bad);
+	}
+	.arrow {
+		stroke: var(--warn);
+		stroke-width: 1;
+	}
+	.shifts {
+		margin: 6px 0 0;
+		padding-left: 18px;
+		font-size: 12px;
+	}
+	.pick button {
+		background: var(--bg-raised);
+		border: 1px solid var(--line-strong);
+		color: inherit;
+		border-radius: 4px;
+		padding: 2px 8px;
+		margin: 0 4px 4px 0;
+		cursor: pointer;
+		font: inherit;
+		font-size: 12px;
+	}
+	.pick button.on {
+		border-color: var(--c-blue);
+	}
+	.d {
+		max-height: 360px;
+		overflow: auto;
+		white-space: pre-wrap;
+		word-break: break-all;
+		font-size: 11px;
+		line-height: 1.4;
+		background: var(--bg-sunken);
+		border: 1px solid var(--line);
+		border-radius: 4px;
+		padding: 8px;
+	}
+	.d .add {
+		background: rgba(46, 160, 67, 0.35);
+	}
+	.d .del {
+		background: rgba(255, 123, 114, 0.35);
+		text-decoration: line-through;
+	}
+	.d .same {
+		color: var(--text-dim);
+	}
+</style>

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

@@ -0,0 +1,9 @@
+import type { Visit } from '../visit.js';
+type $$ComponentProps = {
+    page: string;
+    names?: Record<string, string>;
+    visit?: Visit | null;
+};
+declare const DomTravel: import("svelte").Component<$$ComponentProps, {}, "">;
+type DomTravel = ReturnType<typeof DomTravel>;
+export default DomTravel;

package/dist/profiler/ui/DownloadHtml.svelte

@@ -0,0 +1,52 @@
+<script>/**
+* Download a report file — the self-contained HTML (`as: 'html'`) or the agent JSON (`'json'`) —
+* as a `wake:'load'` island. The report rides with the request (report-request.ts), so whichever
+* instance answers can build the file: on a serverless host the one that made the report is
+* usually gone, and a plain link by id 404s.
+*/
+import { report_request } from "./report-request.js";
+let { base, id, ogpB64 = "", as = "html", link = false } = $props();
+let busy = $state(false);
+let error = $state("");
+const href = $derived(`${base}/report/${id}.${as}`);
+const name = $derived(`ogygia-profile-${id}.${as}`);
+function save(blob) {
+	const a = document.createElement("a");
+	a.href = URL.createObjectURL(blob);
+	a.download = name;
+	document.body.appendChild(a);
+	a.click();
+	a.remove();
+	setTimeout(() => URL.revokeObjectURL(a.href), 1500);
+}
+async function download(e) {
+	e.preventDefault();
+	if (busy) return;
+	busy = true;
+	error = "";
+	try {
+		const res = await report_request(base, id, as, ogpB64);
+		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 : "download failed";
+	} finally {
+		busy = false;
+	}
+}
+</script>
+
+{#if link}
+	<a {href} download={name} onclick={download} aria-busy={busy}>{busy ? 'building…' : 'JSON'}</a>
+{:else}
+	<a
+		class="btn"
+		{href}
+		download={name}
+		onclick={download}
+		aria-busy={busy}
+		title="One HTML file with everything inlined — opens from disk, islands live. Built app only."
+		>{busy ? 'Building…' : 'Download'}<span class="sub">.html</span></a
+	>
+{/if}
+{#if error}<span class="hint warn" role="alert">Download failed: {error}</span>{/if}

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

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    base: string;
+    id: string;
+    ogpB64?: string;
+    as?: 'html' | 'json';
+    link?: boolean;
+};
+declare const DownloadHtml: import("svelte").Component<$$ComponentProps, {}, "">;
+type DownloadHtml = ReturnType<typeof DownloadHtml>;
+export default DownloadHtml;