@ogygia/devtools 0.0.0 → 0.11.1

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

@@ -0,0 +1,21 @@
+import type { Since } from '../compare.js';
+import type { Analysis } from '../analyze.js';
+import type { ReportMeta, ReportExtras } from '../report.js';
+import type { PageHistory } from '../profiler-router.js';
+type $$ComponentProps = {
+    a: Analysis;
+    meta: ReportMeta;
+    base: string;
+    extras: ReportExtras;
+    ogpB64?: string;
+    history?: PageHistory | null;
+    prev?: string | null;
+    /** against the previous profile of this page (the server's comparison, cut for the top) */
+    since?: Since | null;
+    dev?: boolean;
+    /** rendered from this browser's own kept copy (the owner's): it can still be shared */
+    kept?: boolean;
+};
+declare const ReportBody: import("svelte").Component<$$ComponentProps, {}, "">;
+type ReportBody = ReturnType<typeof ReportBody>;
+export default ReportBody;

package/dist/profiler/ui/Run.svelte

@@ -0,0 +1,17 @@
+<script>/** The `<base>/run` page: Shell + the reactive RunView island that drives the progress bar and the
+*  profile request. Served through document() like every other profiler view. */
+import Shell from "./Shell.svelte";
+import RunView from "./RunView.svelte" with { wake: "load" };
+let { data } = $props();
+const { base, path, runs, format, against } = $derived(data);
+</script>
+
+<Shell {base}>
+	<h1>Profiling <code>{path}</code></h1>
+	<p class="hint">
+		Rendering the page through your real server{format === 'ogp'
+			? ', then downloading the .ogp'
+			: ''}. This runs the page {runs}× for a steady median — hold on.
+	</p>
+	<RunView {base} {path} {runs} {format} {against} />
+</Shell>

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

@@ -0,0 +1,14 @@
+declare const Run: import("svelte").Component<{
+    data: {
+        base: string;
+        path: string;
+        runs: number;
+        format: string;
+        against?: string | undefined;
+    };
+    form: null;
+    params: {};
+    search: {};
+}, {}, "">;
+type Run = ReturnType<typeof Run>;
+export default Run;

package/dist/profiler/ui/RunView.svelte

@@ -0,0 +1,146 @@
+<script>/**
+* The run page body — a `wake:'load'` island. On wake it fires the profile at `<base>/page`, shows a
+* Windows-style progress bar while the server renders + samples, then swaps to the report (navigates
+* this document to `/report/<id>`, so an embedding devtools iframe shows the whole thing). For the
+* `.ogp` path it downloads the encrypted file instead. It also postMessages the final report URL to a
+* parent frame, so the devtools tab can offer "open in new tab".
+*/
+import { onMount } from "svelte";
+import { fake_progress } from "./fake-progress.svelte.js";
+import { put_report } from "./store.js";
+// ── regexes
+const NON_WORD_G = /\W+/g;
+let { base, path, runs, format, against = "" } = $props();
+// A busy worker answers /page with 409 (one recording per worker — the V8 profiler is process-wide).
+// There's no server-side queue to rely on (a serverless worker is recycled within ~30s), so the QUEUE
+// LIVES HERE: poll until a worker accepts. On serverless the retry lands on a free worker; on a single
+// server it comes back once the run ahead finishes. Give up after QUEUE_MAX_MS and point at Reset.
+const QUEUE_POLL_MS = 2e3;
+const QUEUE_MAX_MS = 12e4;
+const p = fake_progress();
+let phase = $state("Starting the profiler…");
+let error = $state("");
+let done_ogp = $state(false);
+let queued = $state(false);
+let waited_s = $state(0);
+/** Fetch /page, polling while any worker we reach is busy. Returns the first non-409 response, or the
+*  last 409 if we waited past QUEUE_MAX_MS (the caller surfaces that as an error). */
+async function fetch_page(url) {
+	const started = Date.now();
+	for (;;) {
+		queued = false;
+		p.start();
+		phase = `Rendering ${path} ${runs}× and sampling the server…`;
+		const res = await fetch(url);
+		if (res.status !== 409) return res;
+		// busy — enter/stay in the queue
+		if (Date.now() - started > QUEUE_MAX_MS) return res;
+		queued = true;
+		const retry_after = Number(res.headers.get("retry-after")) * 1e3;
+		const delay = Number.isFinite(retry_after) && retry_after > 0 ? retry_after : QUEUE_POLL_MS;
+		waited_s = Math.round((Date.now() - started) / 1e3);
+		phase = "In queue — a profile is already running. Waiting for a free worker…";
+		await new Promise((r) => setTimeout(r, delay));
+	}
+}
+async function run() {
+	try {
+		// `keep`: the answer carries the report's dump so THIS BROWSER keeps it (IndexedDB) before
+		// navigating — on an ephemeral host the instance that rendered it may be gone by then
+		const suffix = format === "ogp" ? "&format=ogp" : "&format=keep";
+		const res = await fetch_page(`${base}/page?p=${encodeURIComponent(path)}&runs=${runs}${suffix}`);
+		if (!res.ok) throw new Error(String(res.status));
+		if (format === "ogp") {
+			const blob = await res.blob();
+			await p.finish();
+			const a = document.createElement("a");
+			const href = URL.createObjectURL(blob);
+			a.href = href;
+			a.download = `profile-${path.replace(NON_WORD_G, "_") || "page"}.ogp`;
+			a.click();
+			URL.revokeObjectURL(href);
+			done_ogp = true;
+			phase = "Downloaded the encrypted .ogp.";
+		} else {
+			// /page renders N times and answers { id, url, dump }: keep the dump here, then open the report
+			let url = res.url;
+			try {
+				const keep = await res.json();
+				if (keep.url) url = keep.url;
+				// asked to check a fix: open the new report compared with the one it was run against
+				if (against && keep.id) url = `${base}/compare/${against}/${keep.id}`;
+				if (keep.dump) {
+					phase = "Keeping the report in this browser…";
+					await put_report(keep.dump);
+				}
+			} catch {}
+			await p.finish();
+			phase = "Opening the report…";
+			try {
+				window.parent?.postMessage({
+					type: "ogygia:profiled",
+					url
+				}, location.origin);
+			} catch {}
+			location.href = url;
+		}
+	} catch (e) {
+		p.fail();
+		queued = false;
+		const code = e instanceof Error ? e.message : "error";
+		error = `Profiling failed (${code}). If the page is slow, the host's request timeout may have cut it ` + `off — try fewer renders, or tick the .ogp download and open it via Import. If a run got ` + `stuck, hit Reset on the dashboard.`;
+	}
+}
+onMount(run);
+</script>
+
+<div class="run">
+	<p class="phase">{queued ? '⏳ ' : ''}{phase}</p>
+	{#if queued}
+		<p class="hint">
+			Waited {waited_s}s. Recordings run one at a time per worker (the V8 profiler is process-wide)
+			— this keeps polling until one is free, then measures automatically.
+		</p>
+	{:else}
+		<div class="track"><div class="fill" style="width:{p.value}%"></div></div>
+		<p class="pct">{Math.round(p.value)}%</p>
+	{/if}
+
+	{#if error}
+		<p class="verdict">{error}</p>
+		<p class="hint"><a href={base}>← back to the dashboard</a></p>
+	{:else if done_ogp}
+		<p class="hint">
+			Your download didn't start? <a href="{base}/view">Open the Import page</a> and pick the file.
+		</p>
+		<p class="hint"><a href={base}>← back to the dashboard</a></p>
+	{/if}
+</div>
+
+<style>
+	.run {
+		max-width: 44rem;
+		margin: 2rem 0;
+	}
+	.phase {
+		margin: 0 0 0.6rem;
+		font-weight: 600;
+	}
+	.track {
+		height: 12px;
+		border-radius: 999px;
+		background: rgba(148, 163, 184, 0.22);
+		overflow: hidden;
+	}
+	.fill {
+		height: 100%;
+		border-radius: 999px;
+		background: linear-gradient(90deg, #14b8a6, #0ea5e9);
+		transition: width 0.24s ease-out;
+	}
+	.pct {
+		margin: 0.4rem 0 0;
+		font-variant-numeric: tabular-nums;
+		opacity: 0.7;
+	}
+</style>

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

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    base: string;
+    path: string;
+    runs: number;
+    format: string;
+    against?: string;
+};
+declare const RunView: import("svelte").Component<$$ComponentProps, {}, "">;
+type RunView = ReturnType<typeof RunView>;
+export default RunView;

package/dist/profiler/ui/ScoreCard.svelte

@@ -0,0 +1,197 @@
+<script>let { score } = $props();
+// Score → a token colour: green good, mint/accent fine, amber watch, red bad.
+function tone(n) {
+	if (n >= 90) return "var(--good)";
+	if (n >= 75) return "var(--accent)";
+	if (n >= 50) return "var(--warn)";
+	return "var(--bad)";
+}
+const ring = $derived(tone(score.score));
+export {};
+</script>
+
+<section class="scorecard" aria-label="ogygia page score">
+	<div class="ring-wrap">
+		<div
+			class="ring"
+			style="--pct:{score.score};--ring:{ring}"
+			role="img"
+			aria-label="score {score.score} of 100, grade {score.grade}"
+		>
+			<div class="ring-fill">
+				<b style="color:{ring}">{score.score}</b>
+				<span class="grade" style="color:{ring}">{score.grade}</span>
+			</div>
+		</div>
+		<div class="ring-cap">
+			<h2>page score</h2>
+			<p class="hint">
+				scored on what a visitor pays for, whatever built the page: all the JS at start, the weight
+				on the wire, what blocks the first paint, the HTML, the data shipped, the server render,
+				hydration, and the browser's vitals. Smooth curves: every byte and millisecond counts. A
+				category with no measurement is left out, never a free 100.
+			</p>
+			{#if score.worst}
+				<p class="win">
+					<span class="win-k" style="color:{tone(score.worst.score)}">Biggest win</span>
+					{score.worst.note}
+				</p>
+			{/if}
+		</div>
+	</div>
+
+	<div class="cats">
+		<!-- inline (not a {#snippet}): `c` is typed by score.categories, so no template type annotation
+		     is needed — which keeps the markup TS-free AND satisfies svelte-check's noImplicitAny. -->
+		{#each score.categories as c (c.key)}
+			<div class="cat" title={c.note}>
+				<div class="cat-head">
+					<span class="cat-label">{c.label}</span>
+					<span class="cat-value">{c.value}</span>
+					<span class="cat-score" style="color:{tone(c.score)}">{c.score}</span>
+				</div>
+				<div class="track">
+					<div class="meter" style="width:{c.score}%;background:{tone(c.score)}"></div>
+				</div>
+				{#if c.lost || c.detail?.length}
+					<p class="cat-detail">
+						{#if c.lost}<span class="lost">−{c.lost} pts</span>{/if}
+						{#if c.detail?.length}{c.detail.join(' · ')}{/if}
+					</p>
+				{/if}
+			</div>
+		{/each}
+		{#if score.missing.length}
+			<p class="missing">
+				Left out: {#each score.missing as m, i (m.key)}{i ? '; ' : ''}<b>{m.label}</b>
+					({m.why}){/each}.
+			</p>
+		{/if}
+	</div>
+</section>
+
+<style>
+	.scorecard {
+		display: grid;
+		grid-template-columns: minmax(280px, 1fr) minmax(0, 1.4fr);
+		gap: 1.5rem 2rem;
+		align-items: center;
+		padding: 1.25rem 1.5rem;
+		margin: 1rem 0 1.5rem;
+		background: var(--bg-raised);
+		border: 1px solid var(--line);
+		border-radius: var(--r-lg, 12px);
+	}
+	.ring-wrap {
+		display: flex;
+		gap: 1.25rem;
+		align-items: center;
+	}
+	.ring {
+		flex: none;
+		width: 108px;
+		height: 108px;
+		border-radius: 50%;
+		background: conic-gradient(var(--ring) calc(var(--pct) * 1%), var(--line) 0);
+		display: grid;
+		place-items: center;
+	}
+	.ring-fill {
+		width: 84px;
+		height: 84px;
+		border-radius: 50%;
+		background: var(--bg-panel, var(--bg-sunken));
+		display: grid;
+		place-items: center;
+		line-height: 1;
+	}
+	.ring-fill b {
+		font-size: 2rem;
+		font-variant-numeric: tabular-nums;
+	}
+	.grade {
+		font-size: 0.75rem;
+		font-weight: 700;
+		letter-spacing: 0.08em;
+	}
+	.ring-cap h2 {
+		margin: 0 0 0.25rem;
+		font-size: 1rem;
+	}
+	.ring-cap .hint {
+		margin: 0;
+		color: var(--text-dim);
+		font-size: 0.8rem;
+		line-height: 1.4;
+	}
+	.win {
+		margin: 0.6rem 0 0;
+		font-size: 0.82rem;
+		color: var(--text);
+		line-height: 1.4;
+	}
+	.win-k {
+		font-weight: 700;
+		margin-right: 0.35rem;
+	}
+	.cats {
+		display: grid;
+		gap: 0.6rem;
+		min-width: 0;
+	}
+	.cat-head {
+		display: flex;
+		align-items: baseline;
+		gap: 0.5rem;
+		font-size: 0.82rem;
+	}
+	.cat-label {
+		font-weight: 600;
+	}
+	.cat-value {
+		margin-left: auto;
+		color: var(--text-faint);
+		font-family: var(--font-mono);
+		font-size: 0.75rem;
+	}
+	.cat-score {
+		font-variant-numeric: tabular-nums;
+		font-weight: 700;
+		width: 2ch;
+		text-align: right;
+	}
+	.track {
+		height: 6px;
+		margin-top: 0.25rem;
+		border-radius: 999px;
+		background: var(--bg-sunken);
+		overflow: hidden;
+	}
+	.meter {
+		height: 100%;
+		border-radius: 999px;
+		transition: width 0.4s ease;
+	}
+	.cat-detail {
+		margin: 0.2rem 0 0;
+		font-size: 0.72rem;
+		color: var(--text-dim);
+		line-height: 1.35;
+	}
+	.lost {
+		color: var(--warn);
+		margin-right: 0.4rem;
+		font-variant-numeric: tabular-nums;
+	}
+	.missing {
+		margin: 0.4rem 0 0;
+		font-size: 0.72rem;
+		color: var(--text-dim);
+		line-height: 1.4;
+	}
+	@media (max-width: 640px) {
+		.scorecard {
+			grid-template-columns: 1fr;
+		}
+	}
+</style>

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

@@ -0,0 +1,7 @@
+import type { PageScore } from '../score.js';
+type $$ComponentProps = {
+    score: PageScore;
+};
+declare const ScoreCard: import("svelte").Component<$$ComponentProps, {}, "">;
+type ScoreCard = ReturnType<typeof ScoreCard>;
+export default ScoreCard;