@ogygia/devtools 0.0.0 → 0.11.1

package/dist/profiler/ui/FrameDetails.svelte

@@ -0,0 +1,308 @@
+<script>import { fmt_ms, CATEGORY_LABEL } from "./format.js";
+let { f, colspan, base = "", dev = false } = $props();
+const is_abs = (p) => p.startsWith("/") || /^[A-Za-z]:[\\/]/.test(p);
+const location = $derived(f.path ? f.path + (f.line > 0 ? ":" + f.line + (f.col > 0 ? ":" + f.col : "") : "") : "");
+// An absolute path (a dev server, a sourcemapped build on the same machine) opens in the editor.
+const editor_href = $derived(f.path && is_abs(f.path) ? "vscode://file/" + f.path + (f.line > 0 ? ":" + f.line + (f.col > 0 ? ":" + f.col : "") : "") : "");
+const stacks = $derived(f.stacks ?? []);
+// THE HOT LINES: where inside the function the self time landed (V8's per-line ticks)
+const lines = $derived(f.lines ?? []);
+const lines_max = $derived(Math.max(...lines.map((l) => l.ms), .01));
+const heat = $derived(new Map(lines.map((l) => [l.line, l.ms / lines_max])));
+const last_hot = $derived(lines.length ? Math.max(...lines.map((l) => l.line)) : 0);
+const ms_at = (n) => lines.find((l) => l.line === n)?.ms ?? 0;
+let copied = $state(false);
+async function copy() {
+	try {
+		await navigator.clipboard.writeText(location);
+		copied = true;
+		setTimeout(() => copied = false, 1200);
+	} catch {}
+}
+// SOURCE PEEK: the code around the hot lines. The report carries it (`f.src`, captured at report
+// time from the sourcemap's embedded copy), so it shows on a deployed host, in an export and in a
+// share link. Only when the report has none does the dev server read the local file.
+let fetched = $state(null);
+const peek = $derived(f.src ? {
+	start: f.src.start,
+	line: f.line,
+	lines: f.src.lines
+} : fetched);
+$effect(() => {
+	if (f.src || !dev || !base || !f.path || !is_abs(f.path) || f.line <= 0) return;
+	// widen the peek to the hot lines when they sit below the function's first line
+	const to = last_hot > f.line ? `&to=${Math.min(last_hot, f.line + 60)}` : "";
+	const url = `${base}/source?p=${encodeURIComponent(f.path)}&l=${f.line}${to}`;
+	let live = true;
+	fetch(url, { headers: { accept: "application/json" } }).then((r) => r.ok ? r.json() : null).then((j) => {
+		if (live && j && Array.isArray(j.lines)) fetched = j;
+	}).catch(() => {});
+	return () => {
+		live = false;
+	};
+});
+</script>
+
+<tr class="details">
+	<td {colspan}>
+		<div class="where">
+			<span class="k">where</span>
+			{#if location}
+				<code class="loc">{location}</code>
+				<button class="mini" onclick={copy}>{copied ? 'copied' : 'copy'}</button>
+				{#if editor_href}<a class="mini" href={editor_href}>open in editor</a>{/if}
+			{:else}
+				<span class="hint">native — no source position</span>
+			{/if}
+			<span class="k">kind</span>
+			<span>{f.pkg ? `${CATEGORY_LABEL[f.category]} · ${f.pkg}` : CATEGORY_LABEL[f.category]}</span>
+		</div>
+		{#if lines.length}
+			<div class="hotlines">
+				<span class="k">hot lines</span>
+				{#each lines as l (l.line)}
+					<span class="hl" title="{fmt_ms(l.ms)} ms of self time on line {l.line}">
+						<i style="width:{Math.max(4, (l.ms / lines_max) * 60)}px"></i>
+						<code>:{l.line}</code> <span class="dim">{fmt_ms(l.ms)} ms</span>
+					</span>
+				{/each}
+			</div>
+		{/if}
+		{#if f.callees?.length}
+			<div class="callees">
+				<span class="k">inside it</span>
+				<ul>
+					{#if f.self_ms > 0 && f.total_ms > 0}
+						<li>
+							<i style="width:{Math.max(2, (f.self_ms / f.total_ms) * 80)}px"></i><b
+								>its own lines</b
+							><span class="dim"
+								>{fmt_ms(f.self_ms)} ms · {Math.round((f.self_ms / f.total_ms) * 100)}%</span
+							>
+						</li>
+					{/if}
+					{#each f.callees as c (c.key)}
+						<li class:faint={c.category !== 'app' && c.category !== 'component'}>
+							<i style="width:{Math.max(2, c.share * 80)}px"></i>
+							<b>{c.name}</b>
+							{#if c.file}<code class="cf">{c.file}</code>{/if}
+							<span class="dim">{fmt_ms(c.ms)} ms · {Math.round(c.share * 100)}%</span>
+						</li>
+					{/each}
+				</ul>
+			</div>
+		{/if}
+		{#if peek}
+			<pre class="peek">{#each peek.lines as ln, i (i)}<span
+						class="ln"
+						class:hot={peek.start + i === peek.line}
+						style={heat.has(peek.start + i)
+							? `background:rgba(232,115,74,${(0.12 + 0.5 * (heat.get(peek.start + i) ?? 0)).toFixed(2)})`
+							: ''}
+						><span class="no">{peek.start + i}</span><span class="lms"
+							>{heat.has(peek.start + i) ? fmt_ms(ms_at(peek.start + i)) : ''}</span
+						>{ln}
+</span>{/each}</pre>
+		{/if}
+		{#if stacks.length}
+			<div class="stacks">
+				{#each stacks as st, i (i)}
+					<div class="stack">
+						<div class="stack-h">
+							<b>{fmt_ms(st.ms)} ms</b> came through this path
+							{#if st.frames.length === 0}<span class="hint">(called at the top level)</span>{/if}
+						</div>
+						<ol>
+							{#each st.frames as fr, j (j)}
+								<li class:dim={fr.c !== 'app' && fr.c !== 'component'} title={fr.c}>
+									<span class="n">{fr.n}</span>{#if fr.f}<span class="f">{fr.f}</span>{/if}
+								</li>
+							{/each}
+						</ol>
+					</div>
+				{/each}
+			</div>
+		{:else}
+			<p class="hint">
+				No call stacks recorded for this row (an older report, or a frame with no callers).
+			</p>
+		{/if}
+	</td>
+</tr>
+
+<style>
+	tr.details td {
+		background: var(--bg-raised);
+		padding: 10px 14px 12px;
+		border-bottom: 1px solid var(--line);
+	}
+	.where {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 6px 10px;
+		align-items: center;
+		font-size: 12.5px;
+		margin-bottom: 8px;
+	}
+	.k {
+		color: var(--text-faint);
+		font-size: 11px;
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+	}
+	.loc {
+		font-family: ui-monospace, monospace;
+		font-size: 12px;
+		color: var(--text);
+		user-select: all;
+		word-break: break-all;
+	}
+	.mini {
+		font: inherit;
+		font-size: 11px;
+		color: var(--c-blue);
+		background: var(--bg-hover);
+		border: 1px solid var(--line);
+		border-radius: 4px;
+		padding: 1px 7px;
+		cursor: pointer;
+		text-decoration: none;
+	}
+	.mini:hover {
+		background: var(--bg-hover);
+	}
+	.peek {
+		margin: 0 0 10px;
+		padding: 6px 0;
+		background: var(--bg-sunken);
+		border: 1px solid var(--line);
+		border-radius: 6px;
+		font-size: 11.5px;
+		line-height: 1.5;
+		overflow-x: auto;
+	}
+	.peek .ln {
+		display: block;
+		padding: 0 10px;
+		white-space: pre;
+	}
+	.peek .ln.hot {
+		background: var(--warn-deep);
+	}
+	.peek .no {
+		display: inline-block;
+		width: 3.5em;
+		color: var(--text-faint);
+		user-select: none;
+	}
+	.peek .lms {
+		display: inline-block;
+		width: 5em;
+		color: var(--c-orange);
+		font-size: 10.5px;
+		user-select: none;
+	}
+	.hotlines {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 4px 14px;
+		align-items: center;
+		margin: 0 0 8px;
+		font-size: 12px;
+	}
+	.hl {
+		display: inline-flex;
+		align-items: center;
+		gap: 5px;
+	}
+	.hl i {
+		display: inline-block;
+		height: 8px;
+		background: var(--c-orange);
+		border-radius: 2px;
+	}
+	.dim {
+		color: var(--text-faint);
+	}
+	.callees {
+		display: flex;
+		gap: 10px;
+		align-items: baseline;
+		margin: 0 0 8px;
+		font-size: 12px;
+	}
+	.callees ul {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		display: grid;
+		gap: 2px;
+		min-width: 0;
+	}
+	.callees li {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 2px 8px;
+	}
+	.callees li i {
+		display: inline-block;
+		height: 8px;
+		background: var(--c-blue);
+		border-radius: 2px;
+	}
+	.callees li.faint b {
+		font-weight: 500;
+		color: var(--text-dim);
+	}
+	.cf {
+		font-family: ui-monospace, monospace;
+		font-size: 11px;
+		color: var(--text-faint);
+		word-break: break-all;
+	}
+	.stacks {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+		gap: 10px;
+	}
+	.stack {
+		background: var(--bg-sunken);
+		border: 1px solid var(--line);
+		border-radius: 6px;
+		padding: 8px 10px;
+		min-width: 0;
+	}
+	.stack-h {
+		font-size: 12px;
+		color: var(--text-dim);
+		margin-bottom: 4px;
+	}
+	ol {
+		margin: 0;
+		padding: 0 0 0 18px;
+		font-family: ui-monospace, monospace;
+		font-size: 11.5px;
+		line-height: 1.55;
+	}
+	li {
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	.n {
+		color: var(--text);
+	}
+	/* framework / runtime frames between your own: kept (they are the truth of the path), dimmed */
+	li.dim .n {
+		color: var(--text-faint);
+	}
+	.f {
+		color: var(--text-faint);
+		margin-left: 8px;
+	}
+	.hint {
+		color: var(--text-faint);
+		font-size: 12px;
+	}
+</style>

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

@@ -0,0 +1,16 @@
+/**
+     * The expanded row under a function / component: WHERE it is (the full path, with line and
+     * column, openable in the editor when the path is absolute; on a dev server the source lines
+     * themselves) and HOW it was reached (its heaviest call stacks, nearest caller first).
+     * Rendered inside the table islands; plain markup.
+     */
+import type { FrameStat } from '../analyze.js';
+type $$ComponentProps = {
+    f: FrameStat;
+    colspan: number;
+    base?: string;
+    dev?: boolean;
+};
+declare const FrameDetails: import("svelte").Component<$$ComponentProps, {}, "">;
+type FrameDetails = ReturnType<typeof FrameDetails>;
+export default FrameDetails;

package/dist/profiler/ui/FunctionsTable.svelte

@@ -0,0 +1,156 @@
+<script>import { fmt_ms, fmt_dur, fmt_bytes, CATEGORY_COLOR, CATEGORY_LABEL, ink_on } from "./format.js";
+import { sortable } from "./sort.svelte.js";
+import { pressable } from "./press.js";
+import FrameDetails from "./FrameDetails.svelte";
+import { row_id, follow_hash } from "./row-anchor.svelte.js";
+let { rows, hasAlloc, base = "", dev = false } = $props();
+let query = $state("");
+const filtered = $derived.by(() => {
+	const q = query.trim().toLowerCase();
+	if (!q) return rows;
+	return rows.filter((r) => r.name.toLowerCase().includes(q) || r.url.toLowerCase().includes(q) || (r.path ?? "").toLowerCase().includes(q) || (r.pkg ?? "").toLowerCase().includes(q));
+});
+const s = sortable(() => filtered, "self_ms");
+const row_key = (f) => f.key ?? f.name + " " + f.url;
+let open = $state(null);
+const cols = $derived(hasAlloc ? 7 : 6);
+// a finding's `#fn=<key>` link opens + scrolls to its row
+$effect(() => follow_hash("fn", () => rows.map(row_key), (k) => {
+	query = "";
+	open = k;
+}));
+</script>
+
+<div class="tools">
+	<input
+		type="search"
+		placeholder="filter by function, file or package…"
+		bind:value={query}
+		aria-label="filter functions"
+	/>
+	<span class="hint"
+		>{filtered.length} of {rows.length} · click a row for its location and call stacks</span
+	>
+</div>
+<table>
+	<thead>
+		<tr>
+			<th>function</th>
+			<th>where</th>
+			<th><span class="sr-only">kind of code</span></th>
+			<th
+				class="num sort"
+				class:active={s.key === 'self_ms'}
+				onclick={() => s.click('self_ms')}
+				{@attach pressable}
+				aria-sort={s.aria('self_ms')}>self ms<span class="arr">{s.arrow('self_ms')}</span></th
+			>
+			<th
+				class="num sort"
+				class:active={s.key === 'total_ms'}
+				onclick={() => s.click('total_ms')}
+				{@attach pressable}
+				aria-sort={s.aria('total_ms')}>total ms<span class="arr">{s.arrow('total_ms')}</span></th
+			>
+			<th
+				class="num sort"
+				class:active={s.key === 'per'}
+				title="one call: its time per render ÷ its calls in one render"
+				onclick={() => s.click('per')}
+				{@attach pressable}
+				aria-sort={s.aria('per')}>per call<span class="arr">{s.arrow('per')}</span></th
+			>
+			{#if hasAlloc}
+				<th
+					class="num sort"
+					class:active={s.key === 'alloc'}
+					onclick={() => s.click('alloc')}
+					{@attach pressable}
+					aria-sort={s.aria('alloc')}>alloc<span class="arr">{s.arrow('alloc')}</span></th
+				>
+			{/if}
+		</tr>
+	</thead>
+	<tbody>
+		{#each s.sorted as f (row_key(f))}
+			<tr
+				class="row"
+				id={row_id('fn', row_key(f))}
+				class:open={open === row_key(f)}
+				onclick={() => (open = open === row_key(f) ? null : row_key(f))}
+				{@attach pressable}
+			>
+				<td class="fn">
+					<span class="caret">{open === row_key(f) ? '▾' : '▸'}</span>
+					{#if f.label}<b title="an anonymous function: its own first line">fn</b>
+						<code class="fnlabel">{f.label}</code>{:else}<b>{f.name}</b>{/if}
+					{#if f.count > 1}
+						<span class="hint" title="{f.count} calls in one render, {fmt_ms(f.per)} ms each"
+							>×{f.count}</span
+						>
+					{/if}
+				</td>
+				<td class="file" title={f.path || ''}>
+					{#if f.url}{f.url}{#if f.line > 0}:{f.line}{#if f.col > 0}:{f.col}{/if}{/if}{:else}<span
+							class="hint">native</span
+						>{/if}
+				</td>
+				<td
+					><span
+						class="chip"
+						style="background:{CATEGORY_COLOR[f.category]};color:{ink_on(
+							CATEGORY_COLOR[f.category]
+						)}"
+						title={f.pkg ? `${CATEGORY_LABEL[f.category]} · ${f.pkg}` : CATEGORY_LABEL[f.category]}
+						>{f.pkg ?? CATEGORY_LABEL[f.category]}</span
+					></td
+				>
+				<td class="num"><b>{fmt_ms(f.self_ms)}</b></td>
+				<td class="num">{fmt_ms(f.total_ms)}</td>
+				<td class="num">{f.count > 0 ? fmt_dur(f.per) : '—'}</td>
+				{#if hasAlloc}<td class="num">{f.alloc ? fmt_bytes(f.alloc) : '—'}</td>{/if}
+			</tr>
+			{#if open === row_key(f)}
+				<FrameDetails {f} colspan={cols} {base} {dev} />
+			{/if}
+		{/each}
+	</tbody>
+</table>
+
+<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 {
+		color: var(--text-faint);
+		font-size: 12px;
+	}
+	tr.row {
+		cursor: pointer;
+	}
+	tr.row:hover td {
+		background: var(--bg-raised);
+	}
+	tr.row.open td {
+		border-bottom-color: transparent;
+	}
+	.caret {
+		color: var(--text-faint);
+		font-size: 10px;
+		margin-right: 4px;
+	}
+</style>

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

@@ -0,0 +1,17 @@
+/** Hot-functions table — a `wake:'load'` island with reactive column sort, a name/file filter,
+     *  and an expandable row per function (full location + its heaviest call stacks). */
+import type { FrameStat } from '../analyze.js';
+type Row = FrameStat & {
+    per: number;
+    count: number;
+    alloc: number | null;
+};
+type $$ComponentProps = {
+    rows: Row[];
+    hasAlloc: boolean;
+    base?: string;
+    dev?: boolean;
+};
+declare const FunctionsTable: import("svelte").Component<$$ComponentProps, {}, "">;
+type FunctionsTable = ReturnType<typeof FunctionsTable>;
+export default FunctionsTable;

package/dist/profiler/ui/IslandHeatmap.svelte

@@ -0,0 +1,151 @@
+<script>import { fmt_bytes, fmt_ms } from "./format.js";
+import { pressable } from "./press.js";
+let { rows, visit = null } = $props();
+const firsts = $derived(new Map((visit?.firsts ?? []).map((f) => [f.fp, f.t])));
+const cls_by = $derived.by(() => {
+	const m = new Map();
+	for (const s of visit?.shifts ?? []) if (s.fp) m.set(s.fp, (m.get(s.fp) ?? 0) + s.value);
+	return m;
+});
+const visit_islands = $derived(new Map((visit?.islands ?? []).map((i) => [i.fp, i])));
+const all_cols = $derived([
+	{
+		key: "ssr",
+		label: "server ms",
+		hint: "render time on the server, per render",
+		get: (r) => r.ssr_ms,
+		fmt: (n) => `${fmt_ms(n)}`
+	},
+	{
+		key: "markup",
+		label: "markup",
+		hint: "the island’s HTML bytes",
+		get: (r) => r.canonical_bytes || null,
+		fmt: fmt_bytes
+	},
+	{
+		key: "props",
+		label: "props",
+		hint: "the props tail bytes the browser downloads for it",
+		get: (r) => r.props_bytes || null,
+		fmt: fmt_bytes
+	},
+	{
+		key: "js",
+		label: "JS",
+		hint: "the JS its wake loads (shared code included)",
+		get: (r) => r.js_bytes,
+		fmt: fmt_bytes
+	},
+	{
+		key: "js_only",
+		label: "JS only it",
+		hint: "the JS no other island on the page needs: what dropping or deferring it saves",
+		get: (r) => r.js_only,
+		fmt: fmt_bytes
+	},
+	{
+		key: "hydrate",
+		label: "hydrate ms",
+		hint: "wake to hydrated in your browser, p50",
+		get: (r) => r.client?.p50_ms ?? null,
+		fmt: (n) => `${fmt_ms(n)}`
+	},
+	{
+		key: "woke",
+		label: "woke at",
+		hint: "when it finished hydrating in this visit, ms after the click",
+		get: (r) => visit_islands.get(r.fp)?.done ?? null,
+		fmt: (n) => `${fmt_ms(n)}`
+	},
+	{
+		key: "first",
+		label: "first touch",
+		hint: "the first interaction inside it in this visit, ms after the click",
+		get: (r) => firsts.get(r.fp) ?? null,
+		fmt: (n) => `${fmt_ms(n)}`
+	},
+	{
+		key: "cls",
+		label: "shift",
+		hint: "the layout shift its nodes caused in this visit (CLS share)",
+		get: (r) => cls_by.get(r.fp) ?? null,
+		fmt: (n) => n.toFixed(3)
+	}
+]);
+// drop columns with no data at all (dev has no JS weights; the browser columns need a logged-in
+// visit) — a whole column of dashes is noise, not information
+const cols = $derived(all_cols.filter((c) => rows.some((r) => c.get(r) != null)));
+const max = $derived(cols.map((c) => Math.max(...rows.map((r) => c.get(r) ?? 0), 0)));
+let sort = $state(null);
+const scored = $derived.by(() => {
+	const score = (r) => cols.reduce((s, c, i) => s + (max[i] ? (c.get(r) ?? 0) / max[i] : 0), 0);
+	const list = rows.map((r) => ({
+		r,
+		score: score(r)
+	}));
+	if (sort) {
+		const c = cols.find((x) => x.key === sort);
+		list.sort((a, b) => (c.get(b.r) ?? -1) - (c.get(a.r) ?? -1));
+	} else list.sort((a, b) => b.score - a.score);
+	return list;
+});
+// (capped at half strength: the cell's number stays 4.5:1 on its own shade in both themes)
+const shade = (v, i) => v === null || !max[i] ? "transparent" : `rgba(240, 136, 62, ${.06 + .44 * (v / max[i])})`;
+const shown = $derived(scored.slice(0, 40));
+</script>
+
+<table class="heat">
+	<thead>
+		<tr>
+			<th>island</th>
+			{#each cols as c (c.key)}
+				<th
+					class="num col"
+					class:on={sort === c.key}
+					title={c.hint}
+					onclick={() => (sort = sort === c.key ? null : c.key)}
+					{@attach pressable}
+					aria-sort={sort === c.key ? 'descending' : 'none'}>{c.label}</th
+				>
+			{/each}
+			<th
+				class="num"
+				title="how many of the columns it leads, summed as shares of each column’s max">cost</th
+			>
+		</tr>
+	</thead>
+	<tbody>
+		{#each shown as { r, score } (r.entry)}
+			<tr>
+				<td class="fn"
+					><b>{r.name}</b>
+					<span class="hint">{r.wake}{r.copies > 1 ? ` ×${r.copies}` : ''}</span></td
+				>
+				{#each cols as c, i (c.key)}
+					{@const v = c.get(r)}
+					<td class="num cell" style="background:{shade(v, i)}">{v === null ? '—' : c.fmt(v)}</td>
+				{/each}
+				<td class="num"><b>{score.toFixed(1)}</b></td>
+			</tr>
+		{/each}
+	</tbody>
+</table>
+<p class="hint">
+	Darker is more of that cost, each column against its own biggest. An island dark across the row is
+	the one to make static or wake later; one dark only in JS wants a smaller closure; one dark only
+	in “first touch” could wake on interaction. Browser columns need a visit from this browser with
+	the profiler logged in.
+</p>
+
+<style>
+	.heat .col {
+		cursor: pointer;
+	}
+	.heat .col.on {
+		text-decoration: underline;
+	}
+	.heat .cell {
+		font-variant-numeric: tabular-nums;
+	}
+</style>

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

@@ -0,0 +1,16 @@
+/**
+     * THE ISLAND COST HEATMAP — one row per island, one column per cost: server render, markup
+     * bytes, props bytes, unique JS, hydration in the browser, time to its first interaction, the
+     * layout shift it caused. Each cell is shaded against its column's max, so the eye finds the
+     * island that is expensive in several ways at once. A `wake:'load'` island; click a column to
+     * sort by it.
+     */
+import type { IslandRow } from './report-data.js';
+import type { Visit } from '../visit.js';
+type $$ComponentProps = {
+    rows: IslandRow[];
+    visit?: Visit | null;
+};
+declare const IslandHeatmap: import("svelte").Component<$$ComponentProps, {}, "">;
+type IslandHeatmap = ReturnType<typeof IslandHeatmap>;
+export default IslandHeatmap;