@ogygia/devtools 0.0.0 → 0.11.1

package/dist/profiler/ui/Ledger.svelte

@@ -0,0 +1,196 @@
+<script>import { PATTERN_LABEL } from "../patterns.js";
+import { fmt_ms, fmt_bytes } from "./format.js";
+import { row_href } from "./row-anchor.svelte.js";
+let { lines, patterns = [], shown = 8, renders = 1, fns } = $props();
+// a line links to its function's row only when the functions table has that row
+const known = $derived(fns ? new Set(fns) : null);
+const linkable = (fn) => !!fn && (!known || known.has(fn));
+// CPU, bytes made and GC add up every profiled render: shown per render. What a render KEPT
+// comes from one extra render already, so it is shown as it is.
+const per = (x) => x / Math.max(1, renders);
+// the pattern recognised on a line, for its badge
+const pattern_at = $derived.by(() => {
+	const m = new Map();
+	for (const p of patterns) for (const s of p.sites) m.set(s.path + ":" + s.line, p);
+	return m;
+});
+const top = $derived(lines.slice(0, shown));
+const rest = $derived(lines.slice(shown));
+const max_score = $derived(Math.max(...lines.map((l) => l.score), .01));
+</script>
+
+{#snippet row(l)}
+	<li class="line">
+		<div class="head">
+			<span class="bar" style="width:{Math.max(3, (l.score / max_score) * 100)}%"></span>
+			{#if linkable(l.fn)}
+				<a class="loc" href={row_href('fn:' + l.fn)} title={l.path + ':' + l.line}
+					>{l.file}:{l.line}</a
+				>
+			{:else}
+				<span class="loc" title={l.path + ':' + l.line}>{l.file}:{l.line}</span>
+			{/if}
+			{#if l.module}<span
+					class="who"
+					title="the build has no sourcemap: the line number is the built chunk's"
+					>in {l.module}</span
+				>{/if}
+			{#if l.who.length}<span class="who">{l.who.join(' · ')}</span>{/if}
+			{#if pattern_at.get(l.path + ':' + l.line)}
+				{@const p = pattern_at.get(l.path + ':' + l.line)}
+				<span class="tag" title={p.title}>{PATTERN_LABEL[p.kind]}</span>
+			{/if}
+		</div>
+		{#if l.code}<code class="code">{l.code}</code>{/if}
+		<div class="costs">
+			{#if l.cpu_ms > 0}<span class="c cpu"><b>{fmt_ms(per(l.cpu_ms))} ms</b> CPU</span>{/if}
+			{#if l.lib_ms > 0}
+				<span
+					class="c lib"
+					title={(l.libs ?? [])
+						.map(
+							(x) =>
+								`${x.name}${x.pkg ? ' (' + x.pkg + ')' : ''}: ${fmt_ms(per(x.ms))} ms${x.shared ? `, split over ${x.shared} lines that call it` : ''}`
+						)
+						.join('\n')}
+				>
+					<b>{fmt_ms(per(l.lib_ms))} ms</b> inside {(l.libs ?? [])
+						.map((x) => x.name)
+						.slice(0, 2)
+						.join(', ') || 'libraries'}
+				</span>
+			{/if}
+			{#if l.alloc_bytes > 0}<span class="c alloc"><b>{fmt_bytes(per(l.alloc_bytes))}</b> made</span
+				>{/if}
+			{#if l.gc_ms > 0}<span class="c gc"><b>{fmt_ms(per(l.gc_ms))} ms</b> cleanup</span>{/if}
+			{#if l.retained_bytes > 0}<span class="c kept"><b>{fmt_bytes(l.retained_bytes)}</b> kept</span
+				>{/if}
+			{#if l.mem_via}<span
+					class="c"
+					title="Made inside this package, which the line calls, after an await (no line of yours was running): charged to the line that calls it"
+					>memory: inside {l.mem_via}</span
+				>{/if}
+			{#if l.merged}<span
+					class="c"
+					title="V8 merged {l.merged.callee} into its caller and charged its time to line {l.merged
+						.from}. Its share was moved back here, split by a render profiled with that merging turned off."
+					>time moved from line {l.merged.from}</span
+				>{/if}
+			{#if l.mem_in_fn}<span
+					class="c"
+					title="Memory is measured per function, not per line. This function's memory is shown on its busiest line."
+					>memory: whole function</span
+				>{/if}
+		</div>
+	</li>
+{/snippet}
+
+<ol class="ledger">
+	{#each top as l (l.path + ':' + l.line)}{@render row(l)}{/each}
+</ol>
+{#if rest.length}
+	<details>
+		<summary>{rest.length} more line{rest.length === 1 ? '' : 's'}</summary>
+		<ol class="ledger">
+			{#each rest as l (l.path + ':' + l.line)}{@render row(l)}{/each}
+		</ol>
+	</details>
+{/if}
+
+<style>
+	.ledger {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		display: grid;
+		gap: 8px;
+	}
+	.line {
+		border: 1px solid var(--line);
+		border-radius: 6px;
+		background: var(--bg-sunken);
+		padding: 8px 10px;
+		min-width: 0;
+	}
+	.head {
+		position: relative;
+		display: flex;
+		flex-wrap: wrap;
+		align-items: baseline;
+		gap: 2px 10px;
+		font-size: 12.5px;
+	}
+	/* how the line ranks against the worst one, a thin rule under the heading */
+	.bar {
+		position: absolute;
+		left: 0;
+		bottom: -3px;
+		height: 2px;
+		background: var(--c-orange);
+		border-radius: 1px;
+		opacity: 0.7;
+	}
+	.loc {
+		font-family: ui-monospace, monospace;
+		font-weight: 600;
+		color: var(--text);
+		word-break: break-all;
+		text-decoration: none;
+	}
+	a.loc:hover {
+		text-decoration: underline;
+	}
+	.who {
+		color: var(--text-faint);
+		font-size: 12px;
+		font-family: ui-monospace, monospace;
+		word-break: break-all;
+	}
+	.tag {
+		font-size: 11px;
+		color: var(--c-orange);
+		border: 1px solid currentColor;
+		border-radius: 999px;
+		padding: 0 7px;
+		line-height: 1.5;
+	}
+	.code {
+		display: block;
+		margin: 7px 0 6px;
+		font-family: ui-monospace, monospace;
+		font-size: 12px;
+		color: var(--text-dim);
+		white-space: pre-wrap;
+		word-break: break-word;
+	}
+	.costs {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 4px 14px;
+		font-size: 12px;
+		color: var(--text-faint);
+	}
+	.c b {
+		font-weight: 600;
+	}
+	.cpu b,
+	.lib b {
+		color: var(--c-orange);
+	}
+	.alloc b,
+	.gc b {
+		color: var(--c-blue);
+	}
+	.kept b {
+		color: var(--warn);
+	}
+	details {
+		margin-top: 8px;
+	}
+	summary {
+		cursor: pointer;
+		font-size: 12.5px;
+		color: var(--text-dim);
+		margin-bottom: 8px;
+	}
+</style>

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

@@ -0,0 +1,18 @@
+/**
+     * THE EXACT LINES: the app lines that cost the most, one row each, with the code on the line
+     * and every cost the profiler measured joined on it (CPU, bytes allocated, the GC they caused,
+     * bytes kept alive). The tables below rank functions; this ranks the line a person edits.
+     * Static markup: the first rows show, the rest sit in a <details>.
+     */
+import type { LedgerLine } from '../ledger.js';
+import { type Pattern } from '../patterns.js';
+type $$ComponentProps = {
+    lines: LedgerLine[];
+    patterns?: Pattern[];
+    shown?: number;
+    renders?: number;
+    fns?: string[];
+};
+declare const Ledger: import("svelte").Component<$$ComponentProps, {}, "">;
+type Ledger = ReturnType<typeof Ledger>;
+export default Ledger;

package/dist/profiler/ui/LocalCompare.svelte

@@ -0,0 +1,48 @@
+<script>/**
+* COMPARE FROM THE BROWSER STORE — when the server no longer holds one of the two reports (it
+* restarted, or it is an ephemeral instance), the compare page hands the ids to this island,
+* which reads both dumps from this browser's store, runs the same pure comparison, and renders
+* the same body.
+*/
+import { get_report } from "./store.js";
+import { compare_reports } from "../compare.js";
+import { derive_findings } from "../report.js";
+import CompareBody from "./CompareBody.svelte";
+let { base, a, b } = $props();
+let cmp = $state(null);
+let missing = $state([]);
+let loaded = $state(false);
+const pack = (d) => ({
+	meta: d.meta,
+	analysis: d.analysis,
+	findings: derive_findings(d.analysis, d.meta, d.extras).map((f) => `${f.code}: ${f.message}`),
+	...d.extras.gc_attr ? { gc: d.extras.gc_attr } : {},
+	...d.extras.patterns ? { patterns: d.extras.patterns } : {},
+	...d.extras.ledger ? { ledger: d.extras.ledger } : {},
+	...d.extras.drill ? { drill: d.extras.drill } : {},
+	...d.extras.forecast ? { forecast: d.extras.forecast } : {}
+});
+// read once, at setup: the two ids the compare page handed over
+// svelte-ignore state_referenced_locally
+void Promise.all([get_report(a), get_report(b)]).then(([A, B]) => {
+	const da = A?.dump;
+	const db = B?.dump;
+	missing = [...da ? [] : [a], ...db ? [] : [b]];
+	if (da && db) cmp = compare_reports(pack(da), pack(db));
+}).finally(() => loaded = true);
+</script>
+
+{#if cmp}
+	<CompareBody {base} {cmp} />
+{:else if loaded}
+	<h1>Compare</h1>
+	<p class="verdict">
+		This server no longer holds {missing.length === 2 ? 'either report' : 'one of these reports'},
+		and this browser did not keep {missing.length === 2 ? 'them' : 'it'} ({missing.join(', ')}). A
+		report is kept only by the browser that recorded or opened it.
+	</p>
+	<p class="hint"><a href={base}>← dashboard</a></p>
+{:else}
+	<h1>Compare</h1>
+	<p class="hint">Reading both reports from this browser…</p>
+{/if}

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

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

package/dist/profiler/ui/LocalReports.svelte

@@ -0,0 +1,68 @@
+<script>/**
+* KEPT IN THIS BROWSER — the reports this browser holds in its own store (ui/store.ts), listed
+* on the dashboard next to the server's. On an ephemeral host this is THE list: the server's is
+* empty a minute later. Each opens at its `/report/<id>` (the page falls back to the store when
+* the server has forgotten it); two of the same page compare.
+*/
+import { list_reports, delete_report } from "./store.js";
+import { fmt_ms } from "./format.js";
+let { base, server_ids = [] } = $props();
+let rows = $state([]);
+let loaded = $state(false);
+const on_server = $derived(new Set(server_ids));
+void list_reports().then((r) => rows = r).finally(() => loaded = true);
+const when = (ms) => new Date(ms).toLocaleString();
+/** the previous kept report of the same page, for a compare link */
+const prev_of = (r) => rows.find((o) => o.page === r.page && o.at < r.at && o.trigger === "page");
+async function forget(id) {
+	await delete_report(id);
+	rows = rows.filter((r) => r.id !== id);
+}
+</script>
+
+{#if loaded && rows.length}
+	<h2>
+		Kept in this browser <span class="hint" style="font-weight:400"
+			>({rows.length} — reports this browser stored itself; they outlive the server)</span
+		>
+	</h2>
+	<table>
+		<thead
+			><tr
+				><th>when</th><th>page</th><th class="num">median</th><th>on this server</th><th
+					><span class="sr-only">actions</span></th
+				></tr
+			></thead
+		>
+		<tbody>
+			{#each rows as r (r.id)}
+				{@const prev = prev_of(r)}
+				<tr>
+					<td class="file">{when(r.at)}</td>
+					<td class="fn"
+						><a href="{base}/report/{r.id}">{r.label}</a> <span class="hint">{r.trigger}</span></td
+					>
+					<td class="num">{r.median !== null ? `${fmt_ms(r.median)} ms` : '—'}</td>
+					<td class="file">{on_server.has(r.id) ? 'yes' : 'no (browser only)'}</td>
+					<td class="file">
+						{#if prev}<a href="{base}/compare/{prev.id}/{r.id}">compare with previous</a> ·
+						{/if}
+						<button class="link" onclick={() => forget(r.id)}>forget</button>
+					</td>
+				</tr>
+			{/each}
+		</tbody>
+	</table>
+{/if}
+
+<style>
+	.link {
+		background: none;
+		border: 0;
+		color: inherit;
+		text-decoration: underline;
+		cursor: pointer;
+		font: inherit;
+		padding: 0;
+	}
+</style>

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

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    base: string;
+    server_ids?: string[];
+};
+declare const LocalReports: import("svelte").Component<$$ComponentProps, {}, "">;
+type LocalReports = ReturnType<typeof LocalReports>;
+export default LocalReports;

package/dist/profiler/ui/Login.svelte

@@ -0,0 +1,13 @@
+<script>/** The locked-profiler gate. Static shell + the reactive LoginForm island. Ports render_login. */
+import Shell from "./Shell.svelte";
+import LoginForm from "./LoginForm.svelte" with { wake: "load" };
+let { data } = $props();
+const { base, next, session_problem } = $derived(data);
+</script>
+
+<Shell {base} bare>
+	<h1>ogygia profiler <small>locked</small></h1>
+	<!-- A login that succeeded but whose session never reached the server: say why, don't loop. -->
+	{#if session_problem}<p class="verdict" data-session-problem>{session_problem}</p>{/if}
+	<LoginForm {base} {next} />
+</Shell>

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

@@ -0,0 +1,12 @@
+declare const Login: import("svelte").Component<{
+    data: {
+        base: string;
+        next: string;
+        session_problem: string | null;
+    };
+    form: Response | null;
+    params: {};
+    search: {};
+}, {}, "">;
+type Login = ReturnType<typeof Login>;
+export default Login;

package/dist/profiler/ui/LoginForm.svelte

@@ -0,0 +1,42 @@
+<script>/**
+* The unlock form — a `wake: 'load'` island (real reactive state, was report.ts's inline login
+* script). Posts the key as JSON (NOT a form POST) so Kit's CSRF — which only guards form
+* content-types and would otherwise need the app's ORIGIN set — never applies; the session cookie
+* rides the response. On success it navigates to `next`.
+*/
+let { base, next } = $props();
+let key = $state("");
+let wrong = $state(false);
+async function submit(ev) {
+	ev.preventDefault();
+	wrong = false;
+	try {
+		const r = await fetch(base + "/login", {
+			method: "POST",
+			headers: { "content-type": "application/json" },
+			body: JSON.stringify({
+				key,
+				next
+			})
+		});
+		if (r.ok) {
+			const d = await r.json();
+			location.href = d.next || base;
+			return;
+		}
+	} catch {}
+	wrong = true;
+	key = "";
+}
+</script>
+
+<p class="hint">Enter the profiler key to continue. It's kept for this browser session.</p>
+{#if wrong}<p class="verdict">Wrong key.</p>{/if}
+<form class="inline" onsubmit={submit}>
+	<label>
+		key
+		<!-- svelte-ignore a11y_autofocus -->
+		<input type="password" bind:value={key} autofocus size="34" autocomplete="current-password" />
+	</label>
+	<button class="btn primary">Unlock</button>
+</form>

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

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    base: string;
+    next: string;
+};
+declare const LoginForm: import("svelte").Component<$$ComponentProps, {}, "">;
+type LoginForm = ReturnType<typeof LoginForm>;
+export default LoginForm;

package/dist/profiler/ui/Message.svelte

@@ -0,0 +1,10 @@
+<script>/** The router's error boundary (Kit's +error.svelte) for the profiler — renders any c.error(). Static. */
+import Shell from "./Shell.svelte";
+let { status, error, data } = $props();
+</script>
+
+<Shell base={data.base}>
+	<h1>Error {status}</h1>
+	<p>{error.message}</p>
+	<p><a href={data.base}>← dashboard</a></p>
+</Shell>

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

@@ -0,0 +1,12 @@
+type $$ComponentProps = {
+    status: number;
+    error: {
+        message: string;
+    };
+    data: {
+        base: string;
+    };
+};
+declare const Message: import("svelte").Component<$$ComponentProps, {}, "">;
+type Message = ReturnType<typeof Message>;
+export default Message;

package/dist/profiler/ui/OnThisPage.svelte

@@ -0,0 +1,137 @@
+<script>let entries = $state([]);
+let active = $state(0);
+$effect(() => {
+	const els = [...document.querySelectorAll(".part, .app-main h2")];
+	entries = els.map((el) => {
+		if (el.classList.contains("part")) return {
+			n: el.querySelector(".part-n")?.textContent ?? "",
+			t: el.querySelector(".part-t")?.textContent ?? "",
+			el,
+			level: 0
+		};
+		// an h2's own text, minus the trailing "(hint …)" the sections carry
+		const t = (el.childNodes[0]?.textContent ?? el.textContent ?? "").trim();
+		return {
+			n: "",
+			t,
+			el,
+			level: 1
+		};
+	});
+	if (!els.length) return;
+	const io = new IntersectionObserver((ents) => {
+		for (const e of ents) {
+			if (e.isIntersecting) {
+				const i = els.indexOf(e.target);
+				if (i >= 0) active = i;
+			}
+		}
+	}, {
+		rootMargin: "-6% 0px -85% 0px",
+		threshold: 0
+	});
+	for (const el of els) io.observe(el);
+	// the report reserves the rail's space server-side (Shell `toc`); nothing to toggle here
+	return () => io.disconnect();
+});
+const jump = (e) => e.el.scrollIntoView({
+	behavior: "smooth",
+	block: "start"
+});
+</script>
+
+{#if entries.length > 1}
+	<nav class="otp" aria-label="on this page">
+		<div class="otp-h">On this page</div>
+		<ul>
+			{#each entries as e, i (i)}
+				<li>
+					<button
+						class:on={i === active}
+						class:part={e.level === 0}
+						class:sub={e.level === 1}
+						onclick={() => jump(e)}
+					>
+						{#if e.n}<span class="n">{e.n}</span>{/if}{e.t}
+					</button>
+				</li>
+			{/each}
+		</ul>
+	</nav>
+{/if}
+
+<style>
+	.otp {
+		position: fixed;
+		right: 16px;
+		top: 22px;
+		width: 200px;
+		max-height: calc(100vh - 40px);
+		overflow-y: auto;
+		z-index: 8;
+	}
+	.otp-h {
+		font-size: 10px;
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+		color: var(--text-faint);
+		padding: 0 0 4px;
+	}
+	.otp ul {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
+	.otp button {
+		display: flex;
+		gap: 7px;
+		align-items: baseline;
+		width: 100%;
+		text-align: left;
+		background: none;
+		border: 0;
+		padding: 2px 0;
+		color: var(--text-faint);
+		font: inherit;
+		font-size: 12px;
+		cursor: pointer;
+		line-height: 1.3;
+	}
+	.otp button:hover {
+		color: var(--text);
+	}
+	/* the current section: text goes accent + bold, no side marker */
+	.otp button.on {
+		color: var(--accent-strong);
+		font-weight: 600;
+	}
+	.otp button.part.on {
+		color: var(--accent-strong);
+	}
+	.otp button.part {
+		color: var(--text);
+		font-weight: 600;
+		margin-top: 5px;
+	}
+	.otp button.part:first-child {
+		margin-top: 0;
+	}
+	.otp button.sub {
+		padding-left: 12px;
+		font-size: 11.5px;
+	}
+	.otp .n {
+		font-family: var(--font-mono);
+		font-size: 10px;
+		color: var(--text-faint);
+	}
+	.otp button.on .n {
+		color: var(--accent);
+	}
+	/* only show when there's room to the right of the content column */
+	@media (max-width: 1500px) {
+		.otp {
+			display: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,3 @@
+declare const OnThisPage: import("svelte").Component<Record<string, never>, {}, "">;
+type OnThisPage = ReturnType<typeof OnThisPage>;
+export default OnThisPage;