@ogygia/devtools 0.0.0-stage → 0.11.0

package/dist/profiler/ui/Scrub.svelte

@@ -0,0 +1,293 @@
+<script>import { density, range_hot, stack_at } from "../stacks.js";
+import { fmt_ms, CATEGORY_COLOR } from "./format.js";
+let { stacks, marks = [] } = $props();
+const W = 960;
+const H = 72;
+const BINS = 240;
+const bins = $derived(density(stacks, BINS));
+const comp_bins = $derived(density(stacks, BINS, "component"));
+const bin_ms = $derived(stacks.window_ms / BINS);
+const max_bin = $derived(Math.max(...bins, bin_ms, .001));
+const x_of = (t) => t / (stacks.window_ms || 1) * W;
+const t_of = (x) => Math.max(0, Math.min(stacks.window_ms, x / W * stacks.window_ms));
+let sel = $state(null);
+let cursor = $state(null);
+let drag = $state(null);
+let view = $state("self");
+const range = $derived(sel ? range_hot(stacks, sel.t0, sel.t1) : range_hot(stacks, 0, stacks.window_ms));
+const at = $derived(cursor === null ? null : stack_at(stacks, cursor));
+const rows = $derived(view === "self" ? range.self : view === "total" ? range.total : range.components);
+const row_max = $derived(Math.max(...rows.map((r) => view === "self" ? r.self_ms : r.total_ms), .001));
+function svg_x(e, el) {
+	const r = el.getBoundingClientRect();
+	return (e.clientX - r.left) / r.width * W;
+}
+function down(e) {
+	const el = e.currentTarget;
+	el.setPointerCapture(e.pointerId);
+	drag = {
+		from: t_of(svg_x(e, el)),
+		moved: false
+	};
+}
+function move(e) {
+	const el = e.currentTarget;
+	const t = t_of(svg_x(e, el));
+	cursor = t;
+	if (drag) {
+		const a = Math.min(drag.from, t);
+		const b = Math.max(drag.from, t);
+		if (b - a > stacks.window_ms * .002) {
+			drag.moved = true;
+			sel = {
+				t0: a,
+				t1: b
+			};
+		}
+	}
+}
+function up() {
+	if (drag && !drag.moved) sel = null;
+	drag = null;
+}
+function leave() {
+	cursor = null;
+	if (drag) up();
+}
+const category_of = (r) => CATEGORY_COLOR[r.category] ?? "#6b7280";
+</script>
+
+<div class="scrub">
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<svg
+		viewBox="0 0 {W} {H + 18}"
+		class="strip"
+		onpointerdown={down}
+		onpointermove={move}
+		onpointerup={up}
+		onpointerleave={leave}
+		role="img"
+		aria-label="CPU density over the render; drag to select a range"
+	>
+		{#each bins as b, i (i)}
+			<rect
+				x={(i / BINS) * W}
+				y={H - (b / max_bin) * H}
+				width={W / BINS + 0.3}
+				height={(b / max_bin) * H}
+				fill="#6f8378"
+				opacity="0.5"
+			/>
+			<rect
+				x={(i / BINS) * W}
+				y={H - (comp_bins[i] / max_bin) * H}
+				width={W / BINS + 0.3}
+				height={(comp_bins[i] / max_bin) * H}
+				fill="#6fe3b0"
+				opacity="0.85"
+			/>
+		{/each}
+		{#each marks as m, k (k)}
+			<line x1={x_of(m.t)} x2={x_of(m.t)} y1="0" y2={H} stroke="#d29922" stroke-dasharray="3 3">
+				<title>{m.label} at {fmt_ms(m.t)} ms</title>
+			</line>
+			{#if k < 3}<text x={x_of(m.t) + 3} y={H + 13} font-size="10" fill="#d29922">{m.label}</text
+				>{/if}
+		{/each}
+		{#if sel}
+			<rect
+				x={x_of(sel.t0)}
+				y="0"
+				width={Math.max(1, x_of(sel.t1) - x_of(sel.t0))}
+				height={H}
+				fill="#6fe3b0"
+				opacity="0.16"
+				stroke="#6fe3b0"
+			/>
+		{/if}
+		{#if cursor !== null}
+			<line x1={x_of(cursor)} x2={x_of(cursor)} y1="0" y2={H} stroke="#e6eee9" stroke-width="1" />
+		{/if}
+		<text x="2" y={H + 13} font-size="10" fill="#6f8378">0</text>
+		<text x={W - 2} y={H + 13} font-size="10" fill="#6f8378" text-anchor="end"
+			>{fmt_ms(stacks.window_ms)} ms</text
+		>
+	</svg>
+	<div class="scrub-bar">
+		<span class="hint">
+			{#if sel}
+				<b>{fmt_ms(sel.t0)}–{fmt_ms(sel.t1)} ms</b> · {fmt_ms(range.cpu_ms)} ms CPU, {fmt_ms(
+					range.idle_ms
+				)} ms idle
+				<button class="lnk" onclick={() => (sel = null)}>whole render</button>
+			{:else}
+				whole render · {fmt_ms(range.cpu_ms)} ms CPU · drag on the strip to slice it
+			{/if}
+			· grey is any CPU, green is a component's
+		</span>
+		<span class="views">
+			<button class:on={view === 'self'} onclick={() => (view = 'self')}>self</button>
+			<button class:on={view === 'total'} onclick={() => (view = 'total')}>owners</button>
+			<button class:on={view === 'components'} onclick={() => (view = 'components')}
+				>components</button
+			>
+		</span>
+	</div>
+	<div class="cols">
+		<table>
+			<thead
+				><tr
+					><th
+						>{view === 'total'
+							? 'on the stack'
+							: view === 'components'
+								? 'component'
+								: 'running'}</th
+					><th class="num">{view === 'self' ? 'self ms' : 'total ms'}</th><th class="num"
+						>of range</th
+					></tr
+				></thead
+			>
+			<tbody>
+				{#each rows.slice(0, 16) as r, k (k)}
+					<tr>
+						<td class="fn"
+							><i class="dot" style="background:{category_of(r)}"></i>{r.name}{#if r.file}<span
+									class="hint"
+								>
+									{r.file}</span
+								>{/if}</td
+						>
+						<td class="num">{fmt_ms(view === 'self' ? r.self_ms : r.total_ms)}</td>
+						<td class="num"
+							><div class="mini">
+								<div
+									style="width:{(
+										((view === 'self' ? r.self_ms : r.total_ms) / row_max) *
+										100
+									).toFixed(0)}%;background:{category_of(r)}"
+								></div>
+							</div>
+							{range.cpu_ms > 0
+								? (((view === 'self' ? r.self_ms : r.total_ms) / range.cpu_ms) * 100).toFixed(0)
+								: 0}%</td
+						>
+					</tr>
+				{:else}
+					<tr><td colspan="3" class="hint">no CPU sample in this range</td></tr>
+				{/each}
+			</tbody>
+		</table>
+		<div class="stack">
+			<div class="hint">
+				{#if at}
+					stack at <b>{fmt_ms(at.t)} ms</b> ({fmt_ms(at.ms)} ms sample), outermost first
+				{:else}
+					move over the strip for the stack at that instant
+				{/if}
+			</div>
+			{#if at}
+				<ol>
+					{#each at.frames as f, i (i)}
+						<li>
+							<i class="dot" style="background:{category_of(f)}"></i>{f.name}{#if f.file}<span
+									class="hint"
+								>
+									{f.file}</span
+								>{/if}
+						</li>
+					{:else}
+						<li class="hint">idle</li>
+					{/each}
+				</ol>
+			{/if}
+		</div>
+	</div>
+</div>
+
+<style>
+	.scrub {
+		margin: 6px 0 10px;
+	}
+	.strip {
+		width: 100%;
+		height: auto;
+		display: block;
+		background: var(--bg-sunken);
+		border: 1px solid var(--line);
+		border-radius: var(--r-sm);
+		cursor: crosshair;
+		touch-action: none;
+		user-select: none;
+	}
+	.scrub-bar {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		gap: 12px;
+		margin: 6px 0;
+		font-size: 12px;
+		flex-wrap: wrap;
+	}
+	.views button,
+	.lnk {
+		background: none;
+		border: 1px solid var(--line-strong);
+		color: inherit;
+		font: inherit;
+		font-size: 12px;
+		padding: 1px 8px;
+		border-radius: var(--r-sm);
+		cursor: pointer;
+		margin-left: 4px;
+	}
+	.views button.on {
+		background: var(--accent-deep);
+		border-color: var(--accent-line);
+		color: var(--accent-strong);
+	}
+	.cols {
+		display: grid;
+		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
+		gap: 16px;
+		align-items: start;
+	}
+	@media (max-width: 800px) {
+		.cols {
+			grid-template-columns: 1fr;
+		}
+	}
+	.dot {
+		display: inline-block;
+		width: 8px;
+		height: 8px;
+		border-radius: 2px;
+		margin-right: 6px;
+		vertical-align: middle;
+	}
+	.mini {
+		display: inline-block;
+		width: 48px;
+		height: 6px;
+		background: var(--bg-sunken);
+		border-radius: 2px;
+		margin-right: 6px;
+		vertical-align: middle;
+		overflow: hidden;
+	}
+	.mini div {
+		height: 100%;
+	}
+	.stack ol {
+		margin: 6px 0 0;
+		padding-left: 22px;
+		font-size: 12px;
+		line-height: 1.5;
+		font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+	}
+	.stack li {
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+</style>

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

@@ -0,0 +1,18 @@
+/**
+     * THE SCRUBBER — the render's CPU as a density strip over the stack index (analyze.ts
+     * `StackIndex`, queried by stacks.ts). Drag across it to ask "what ran between here and here":
+     * the self and inclusive tables answer for that range only. Move the cursor to ask "what was
+     * the stack at this instant". Every other table in the report is an aggregate over the whole
+     * window; this is the same data, sliced where the eye lands. A `wake:'load'` island.
+     */
+import type { StackIndex } from '../analyze.js';
+type $$ComponentProps = {
+    stacks: StackIndex;
+    marks?: {
+        t: number;
+        label: string;
+    }[];
+};
+declare const Scrub: import("svelte").Component<$$ComponentProps, {}, "">;
+type Scrub = ReturnType<typeof Scrub>;
+export default Scrub;

package/dist/profiler/ui/SeedExplainer.svelte

@@ -0,0 +1,193 @@
+<script>import { fmt_bytes } from "./format.js";
+import { row_id, follow_hash } from "./row-anchor.svelte.js";
+import { press_key } from "./press.js";
+let { rows, whole_by, total, seed_bytes } = $props();
+let picked = $state(null);
+const shipped = $derived(rows.filter((r) => r.shipped));
+const dropped = $derived(rows.filter((r) => !r.shipped));
+const REASON = {
+	read: "read by an island",
+	referenced: "props point into it",
+	whole: "an island reads page.data whole"
+};
+$effect(() => follow_hash("seed", () => rows.map((r) => r.key), (k) => picked = k));
+</script>
+
+{#if whole_by.length}
+	<p class="whole">
+		<b>{whole_by.join(', ')}</b> read{whole_by.length === 1 ? 's' : ''} <code>page.data</code> whole,
+		so every key ships. Read the keys by name and seed shaping drops the rest.
+	</p>
+{/if}
+<div class="rows">
+	{#each rows as r (r.key)}
+		<div
+			class="row"
+			id={row_id('seed', r.key)}
+			class:picked={picked === r.key}
+			class:dropped={!r.shipped}
+			onclick={() => (picked = picked === r.key ? null : r.key)}
+			onkeydown={press_key}
+			role="button"
+			tabindex="0"
+			aria-expanded={picked === r.key}
+		>
+			<span class="key"><code>{r.key}</code></span>
+			<div class="track">
+				<div
+					class="fill"
+					class:ref={r.reason === 'referenced'}
+					class:whole={r.reason === 'whole'}
+					style="width:{Math.max(0.5, r.pct)}%"
+				></div>
+			</div>
+			<span class="num">{fmt_bytes(r.bytes)}</span>
+			<span class="why">
+				{#if !r.shipped}<span class="chip off">dropped</span>
+				{:else}<span
+						class="chip"
+						class:ref={r.reason === 'referenced'}
+						class:whole={r.reason === 'whole'}>{REASON[r.reason ?? ''] ?? 'ships'}</span
+					>{/if}
+			</span>
+			{#if picked === r.key}
+				<div class="detail">
+					{#if r.readers_names.length}<div>
+							<span class="k">read by</span>
+							{r.readers_names.join(', ')}
+						</div>{/if}
+					{#if r.referenced_names.length}<div>
+							<span class="k">referenced by the props of</span>
+							{r.referenced_names.join(', ')}
+						</div>{/if}
+					{#if !r.readers_names.length && !r.referenced_names.length}
+						<div class="hint">
+							{r.shipped
+								? 'Nothing asks for this key by name: it ships because an island reads page.data whole.'
+								: 'No island reads or references it, so seed shaping left it out of the seed.'}
+						</div>
+					{/if}
+					{#if r.shipped && r.reason === 'read'}
+						<div class="hint">
+							If the island needs only a part, return that part from load under its own key, or pass
+							it as a prop.
+						</div>
+					{:else if r.shipped && r.reason === 'referenced'}
+						<div class="hint">
+							The cheap shape: the key ships once and the island's props point into it.
+						</div>
+					{/if}
+				</div>
+			{/if}
+		</div>
+	{/each}
+</div>
+<p class="hint">
+	{shipped.length} of {rows.length} keys ship: {fmt_bytes(seed_bytes)} on the wire{#if dropped.length},
+		{fmt_bytes(dropped.reduce((s, r) => s + r.bytes, 0))} of {fmt_bytes(total)} left out by seed shaping{/if}.
+	Click a key for who asks for it.
+</p>
+
+<style>
+	.whole {
+		margin: 4px 0 8px;
+		padding: 6px 10px;
+		background: var(--bg-raised);
+		border-left: 3px solid var(--c-orange);
+		border-radius: 4px;
+		font-size: 12.5px;
+	}
+	.rows {
+		display: grid;
+		gap: 3px;
+	}
+	.row {
+		display: grid;
+		grid-template-columns: 180px 1fr 80px 200px;
+		gap: 10px;
+		align-items: center;
+		font-size: 12.5px;
+		padding: 3px 6px;
+		border-radius: 4px;
+		cursor: pointer;
+	}
+	.row:hover,
+	.row.picked {
+		background: var(--bg-raised);
+	}
+	.row.dropped {
+		opacity: 0.6;
+	}
+	.key code {
+		font-size: 12px;
+	}
+	.track {
+		height: 10px;
+		background: var(--bg-hover);
+		border-radius: 3px;
+		overflow: hidden;
+	}
+	.fill {
+		height: 100%;
+		background: var(--c-orange);
+	}
+	.fill.ref {
+		background: var(--c-blue);
+	}
+	.fill.whole {
+		background: var(--warn);
+	}
+	.dropped .fill {
+		background: #3a424e;
+	}
+	.num {
+		text-align: right;
+		font-variant-numeric: tabular-nums;
+		color: var(--text-dim);
+	}
+	.chip {
+		font-size: 11px;
+		border-radius: 999px;
+		padding: 0 8px;
+		line-height: 16px;
+		border: 1px solid #5a3a2a;
+		color: var(--c-orange);
+	}
+	.chip.ref {
+		border-color: #2a3a5a;
+		color: var(--c-blue);
+	}
+	.chip.whole {
+		border-color: #5a4a20;
+		color: var(--warn);
+	}
+	.chip.off {
+		border-color: var(--line);
+		color: var(--text-faint);
+	}
+	.detail {
+		grid-column: 1 / -1;
+		padding: 4px 0 4px 8px;
+		border-left: 2px solid var(--line);
+		display: grid;
+		gap: 2px;
+	}
+	.k {
+		color: var(--text-faint);
+		font-size: 11px;
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+	}
+	.hint {
+		color: var(--text-faint);
+		font-size: 12px;
+	}
+	@media (max-width: 800px) {
+		.row {
+			grid-template-columns: 120px 1fr 70px;
+		}
+		.why {
+			grid-column: 1 / -1;
+		}
+	}
+</style>

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

@@ -0,0 +1,16 @@
+/**
+     * THE SEED EXPLAINER — every top-level `page.data` key, sized, and WHY it ships: read by an
+     * island's client code (the build's answer), referenced by an island's props (a seed reference),
+     * or because some island reads page.data whole. A dropped key shows too, so the shaping is
+     * visible. A finding links here by `#seed=<key>`.
+     */
+import type { SeedRow } from './report-data.js';
+type $$ComponentProps = {
+    rows: SeedRow[];
+    whole_by: string[];
+    total: number;
+    seed_bytes: number;
+};
+declare const SeedExplainer: import("svelte").Component<$$ComponentProps, {}, "">;
+type SeedExplainer = ReturnType<typeof SeedExplainer>;
+export default SeedExplainer;

package/dist/profiler/ui/ShareLink.svelte

@@ -0,0 +1,148 @@
+<script>/**
+* "Share link" on your own report (`wake:'load'`). Fetches the report's plaintext dump (only when you
+* click — the authed `.dump` endpoint), encrypts it with a password YOU set (see permalink.ts), and
+* hands back a `…/report/<id>#<blob>` URL. The report lives in the `#fragment` — zero server storage,
+* decrypted in the recipient's browser (PermalinkGate). Browser-gated: WebKit (Safari + iOS) caps
+* URLs too low, so links are disabled there; Chromium/Firefox go up to ~1.5 MB, with a Safari-
+* recipient disclaimer past the universal-safe size. No `$effect`; all state moves on click/submit.
+*/
+import { encode_permalink, is_webkit_capped, MAX_PERMALINK_CHARS } from "./permalink.js";
+import { get_report } from "./store.js";
+import { report_request } from "./report-request.js";
+let { id, base, ogpB64 = "" } = $props();
+// WebKit check needs `navigator` — false during SSR, corrected on hydrate.
+const capped = typeof navigator !== "undefined" && is_webkit_capped();
+// Under Safari's ~80 K hard cap (with margin) a link opens EVERYWHERE; above it, Chromium/Firefox only.
+const SAFE_UNIVERSAL = 56e3;
+let open = $state(false);
+let password = $state("");
+let busy = $state(false);
+let url = $state("");
+let note = $state("");
+let err = $state("");
+let copied = $state(false);
+async function generate(e) {
+	e.preventDefault();
+	if (busy || !password) return;
+	busy = true;
+	err = "";
+	url = "";
+	note = "";
+	try {
+		// this browser's kept copy first (no request at all), else ask with the report carried along:
+		// on a serverless host a plain fetch by id lands on an instance that never had it
+		const kept = await get_report(id);
+		let dump = kept?.dump;
+		if (!dump) {
+			const res = await report_request(base, id, "dump", ogpB64);
+			if (!res.ok) throw new Error("fetch");
+			dump = await res.json();
+		}
+		const blob = await encode_permalink(dump, password);
+		if (blob.length > MAX_PERMALINK_CHARS) {
+			err = `This report is ~${Math.round(blob.length / 1024)} KB encoded — too big for a link. Download the .ogp and share the file instead.`;
+			return;
+		}
+		url = `${location.origin}${base}/report/${id}#${blob}`;
+		if (blob.length > SAFE_UNIVERSAL) note = "Large link — opens in Chrome & Firefox; Safari recipients need the .ogp file.";
+	} catch {
+		err = "Could not build the link.";
+	} finally {
+		busy = false;
+	}
+}
+async function copy() {
+	try {
+		await navigator.clipboard.writeText(url);
+		copied = true;
+		setTimeout(() => copied = false, 1500);
+	} catch {}
+}
+</script>
+
+{#if capped}
+	<button
+		type="button"
+		class="btn"
+		disabled
+		title="Universal link sharing is off in Safari — share the .ogp file, or open in Chrome / Firefox"
+	>
+		Share link<span class="sub">Safari: use .ogp</span>
+	</button>
+{:else}
+	<button type="button" class="btn" onclick={() => (open = !open)}>
+		Share link<span class="sub">URL + password</span>
+	</button>
+{/if}
+
+{#if open && !capped}
+	<div class="share-panel">
+		<p class="hint">
+			Anyone with this link <b>and</b> the password can read the report. It's encrypted into the link
+			— nothing is stored on any server.
+		</p>
+		<form class="share-form" onsubmit={generate}>
+			<input
+				type="password"
+				bind:value={password}
+				placeholder="set a password"
+				autocomplete="new-password"
+				disabled={busy}
+			/>
+			<button type="submit" disabled={busy || !password}>{busy ? 'Encrypting…' : 'Generate'}</button
+			>
+		</form>
+		{#if err}<p class="share-err">{err}</p>{/if}
+		{#if url}
+			<div class="share-out">
+				<input type="text" readonly value={url} onclick={(e) => e.currentTarget.select()} />
+				<button type="button" onclick={copy}>{copied ? 'copied ✓' : 'copy'}</button>
+			</div>
+			{#if note}<p class="share-note">{note}</p>{/if}
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.share-panel {
+		margin: 4px 0 14px;
+		padding: 12px 14px;
+		border: 1px solid var(--line);
+		border-radius: 10px;
+		background: var(--bg-sunken);
+		max-width: 640px;
+	}
+	.share-out {
+		display: flex;
+		gap: 8px;
+		margin: 10px 0 0;
+	}
+	.share-out input {
+		flex: 1;
+		min-width: 0;
+		padding: 8px 10px;
+		border-radius: 8px;
+		border: 1px solid var(--line);
+		background: var(--bg-sunken);
+		color: #9fb0c4;
+		font:
+			12px ui-monospace,
+			monospace;
+	}
+	.share-out button {
+		padding: 8px 12px;
+		border-radius: 8px;
+		border: 1px solid var(--line);
+		background: var(--bg-hover);
+		color: var(--text);
+		cursor: pointer;
+		font: inherit;
+		font-size: 12.5px;
+		white-space: nowrap;
+	}
+	.share-note {
+		color: var(--warn);
+		font-size: 12px;
+		margin: 8px 0 0;
+	}
+</style>

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

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