@ogygia/devtools 0.0.0-stage → 0.11.0

package/dist/profiler/ui/Dashboard.svelte

@@ -0,0 +1,492 @@
+<script>/**
+* The profiler dashboard (`/__profiler`): live request log, slowest routes, saved reports, and the
+* "profile a page" form. Static server render — no island; it's a data snapshot. Ports report.ts's
+* render_dashboard.
+*/
+import { fmt_ms, label_of } from "./format.js";
+import Shell from "./Shell.svelte";
+import LocalReports from "./LocalReports.svelte" with { wake: "load" };
+let { data } = $props();
+const { base, recent, routes, reports, top_fix, site_fixes, holes, recording, dev, rss_mb, inflight, history, by, tag_keys, trap, sampled, background_note } = $derived(data);
+const sampled_max = $derived(Math.max(...sampled?.functions.map((f) => f.self_ms) ?? [0], .01));
+const time = (ms) => new Date(ms).toLocaleTimeString();
+let recent_desc = $derived(recent.slice(-40).reverse());
+let top_routes = $derived(routes.slice(0, 20));
+// the previous page-mode report of the same page, for each report — the "compare" link
+const prev_of = $derived.by(() => {
+	const m = new Map();
+	for (const h of history) for (let i = 1; i < h.points.length; i++) m.set(h.points[i].id, h.points[i - 1].id);
+	return m;
+});
+const tracked = $derived(history.filter((h) => h.points.length >= 2));
+const spark = (pts) => {
+	const w = 160, h = 28, pad = 3;
+	const max = Math.max(...pts.map((p) => p.median), 1);
+	const step = pts.length > 1 ? (w - 2 * pad) / (pts.length - 1) : 0;
+	return {
+		w,
+		h,
+		poly: pts.map((p, i) => `${pad + i * step},${h - pad - p.median / max * (h - 2 * pad)}`).join(" ")
+	};
+};
+const delta_pct = (pts) => {
+	const a = pts[pts.length - 2].median;
+	const b = pts[pts.length - 1].median;
+	return a > 0 ? (b - a) / a * 100 : 0;
+};
+</script>
+
+<svelte:head><title>profiler — dashboard</title></svelte:head>
+
+<Shell {base}>
+	<div class="head">
+		<h1>
+			SSR profiler
+			<small>live since server start</small>
+		</h1>
+		<div class="actions">
+			<a
+				class="btn"
+				href="{base}/site"
+				title="Every request as a dot, and where the site's time goes per route — from this instance, or from a sink over days"
+				>The whole site</a
+			>
+			<a class="btn" href="{base}/view">Import<span class="sub">.ogp</span></a>
+			<a
+				class="btn danger"
+				class:recording
+				href="{base}/reset"
+				title="Stop any running or stuck recording and clear the profiler's state.">Reset</a
+			>
+			{#if !dev}<a class="btn" href="{base}/logout">Lock</a>{/if}
+		</div>
+	</div>
+
+	<div class="summary">
+		<div class="stat"><b>{rss_mb} MB</b><span>memory (rss)</span></div>
+		<div class="stat"><b>{inflight}</b><span>requests in flight</span></div>
+		<div class="stat"><b>{reports.length}</b><span>reports held</span></div>
+		<div class="stat"><b>{routes.length}</b><span>routes seen</span></div>
+		{#if tracked.length}<div class="stat">
+				<b>{tracked.length}</b><span>pages tracked over time</span>
+			</div>{/if}
+	</div>
+
+	{#if recording}
+		<p class="verdict">
+			A profile is running right now. Refresh in a moment — or hit <b>Reset</b> above if a run got stuck.
+		</p>
+	{/if}
+
+	<div class="grid">
+		<section class="panel">
+			<h2>Profile a page</h2>
+			<p class="hint">
+				A path on this site. It renders through your real server a few times and shows exactly where
+				the time went — components, functions, allocations, and outbound calls.
+			</p>
+			<form class="inline" action="{base}/run" method="get">
+				<label>path <input name="p" placeholder="/some/slow/page" size="24" required /></label>
+				<label>renders <input name="runs" value="5" size="3" /></label>
+				<label
+					class="ogp-opt"
+					title="Recommended on serverless: the report can't be kept in memory across invocations. Download the encrypted .ogp, then open it via Import."
+				>
+					<input type="checkbox" name="format" value="ogp" /> <code>.ogp</code>
+				</label>
+				<button class="primary">Profile</button>
+			</form>
+			<p class="hint">
+				On a <b>serverless</b> host, tick <code>.ogp</code> — the profile streams back as an
+				encrypted file, then <a href="{base}/view">open it here</a>. Or profile one live request
+				with the <code>x-profile: &lt;secret&gt;</code> header.
+			</p>
+		</section>
+		<section class="panel">
+			<h2>Getting started</h2>
+			<p class="hint">
+				Type a path and hit <b>Profile</b> to record a page. Every recording shows up in the sidebar
+				and, with a store configured, is shared across instances. Watch a route's median over time
+				under
+				<b>Pages over time</b>; a jump is a regression you can open a compare on.
+			</p>
+			<p class="hint">
+				The <b>whole site</b> view plots every request and where each route spends its time.
+				<b>Reset</b>
+				clears a stuck recording if the site drags after profiling.
+			</p>
+		</section>
+	</div>
+
+	<LocalReports {base} server_ids={reports.map((r) => r.id)} />
+
+	{#if trap || sampled || background_note}
+		<h2>In the background</h2>
+		{#if background_note}<p class="verdict">{background_note}</p>{/if}
+		{#if trap}
+			<p class="hint">
+				<b>Catch the slow one:</b>
+				{trap.armed ? 'armed' : 'done'} — a coarse sampler runs in {Math.round(
+					trap.window_ms / 1000
+				)} s windows and keeps the window when a request crosses <b>{trap.over} ms</b>. Caught {trap.caught}
+				of {trap.keep}.{#if trap.caught}
+					The reports are in the list below, labelled "caught".{/if}
+			</p>
+		{/if}
+		{#if sampled}
+			<p class="hint">
+				<b>Always-on sampling:</b> one {Math.round((sampled.window_ms / 1000) * 10) / 10} s window every
+				{sampled.every_s} s, folded into the table below — {sampled.windows} window{sampled.windows ===
+				1
+					? ''
+					: 's'} so far{#if sampled.since}, since {time(sampled.since)}{/if},
+				{fmt_ms(sampled.busy_ms)} ms busy of {fmt_ms(sampled.sampled_ms)} ms sampled. Accuracy from volume:
+				a function that is hot here is hot in real traffic, whatever one recording says.
+			</p>
+			{#if sampled.functions.length}
+				<table>
+					<thead
+						><tr
+							><th>function</th><th>where</th><th class="num">self ms (summed)</th><th class="num"
+								>in windows</th
+							></tr
+						></thead
+					>
+					<tbody>
+						{#each sampled.functions.slice(0, 25) as f (f.key)}
+							<tr>
+								<td class="fn"
+									><b>{f.name}</b>{#if f.pkg}<span class="hint"> · {f.pkg}</span>{/if}</td
+								>
+								<td class="file"
+									>{f.url}{#if f.line > 0}:{f.line}{/if}</td
+								>
+								<td class="num bar-cell"
+									><div class="bar" style="width:{(f.self_ms / sampled_max) * 100}%"></div>
+									<b>{fmt_ms(f.self_ms)}</b></td
+								>
+								<td class="num">{f.windows}</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			{:else}
+				<p class="hint">No window sampled yet.</p>
+			{/if}
+		{/if}
+	{/if}
+
+	<div class="grid">
+		{#if tracked.length}
+			<section class="panel wide">
+				<h2>Pages over time</h2>
+				<p class="hint">
+					Every page profiled more than once: its median render per run, oldest to newest, and its
+					page score then and now. A jump is a regression — open the compare to see which component
+					or function moved.
+				</p>
+				<table>
+					<thead>
+						<tr
+							><th>page</th><th>runs</th><th class="num">latest</th><th class="num">vs previous</th
+							><th class="num">score</th><th><span class="sr-only">actions</span></th></tr
+						>
+					</thead>
+					<tbody>
+						{#each tracked as h (h.page)}
+							{@const g = spark(h.points)}
+							{@const d = delta_pct(h.points)}
+							{@const last = h.points[h.points.length - 1]}
+							{@const before = h.points[h.points.length - 2]}
+							<tr>
+								<td class="fn">{h.page}</td>
+								<td
+									><svg width={g.w} height={g.h} viewBox="0 0 {g.w} {g.h}"
+										><polyline
+											points={g.poly}
+											fill="none"
+											stroke="var(--c-blue)"
+											stroke-width="1.5"
+										/></svg
+									></td
+								>
+								<td class="num"><a href="{base}/report/{last.id}">{fmt_ms(last.median)} ms</a></td>
+								<td
+									class="num"
+									style="color:{d > 5 ? 'var(--bad)' : d < -5 ? 'var(--good)' : 'inherit'}"
+									>{d > 0 ? '+' : ''}{d.toFixed(0)}%</td
+								>
+								<td class="num" title="page score, before → now"
+									>{#if last.score !== undefined}{#if before.score !== undefined && before.score !== last.score}<span
+												class="hint">{before.score} →</span
+											>
+										{/if}<b
+											style="color:{before.score !== undefined && last.score < before.score
+												? 'var(--bad)'
+												: before.score !== undefined && last.score > before.score
+													? 'var(--good)'
+													: 'inherit'}">{last.score}</b
+										>{/if}</td
+								>
+								<td><a href="{base}/compare/{before.id}/{last.id}">compare</a></td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</section>
+		{/if}
+
+		{#if site_fixes?.length}
+			<!-- FIX ONCE, FASTER EVERYWHERE: lines the latest reports of two or more pages share -->
+			<section class="panel wide">
+				<h2>Fix once, faster on every page</h2>
+				<p class="hint">
+					Slow lines that show in the latest report of two or more pages. One change to each makes
+					all of them faster: what it gives back per render, per page and in all.
+				</p>
+				<table>
+					<thead>
+						<tr><th>line</th><th>what</th><th>pages</th><th class="num">in all</th></tr>
+					</thead>
+					<tbody>
+						{#each site_fixes as f (f.kind + f.where + f.line)}
+							<tr>
+								<td><code title={f.code}>{f.where}:{f.line}</code></td>
+								<td>{f.title}</td>
+								<td class="pages">
+									{#each f.pages as p, i (p.page)}{i ? ' · ' : ''}<a href="{base}/report/{p.report}"
+											>{p.page}</a
+										> <span class="save">~{fmt_ms(p.ms)} ms</span>{/each}
+								</td>
+								<td class="num"><b>~{fmt_ms(f.total_ms)} ms</b></td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</section>
+		{/if}
+
+		{#if reports.length}
+			<section class="panel wide">
+				<h2>Reports</h2>
+				<table>
+					<thead>
+						<tr
+							><th>report</th><th>when</th><th class="num">window</th><th class="num">requests</th
+							><th>biggest fix</th><th><span class="sr-only">actions</span></th></tr
+						>
+					</thead>
+					<tbody>
+						{#each reports as r (r.id)}
+							<tr>
+								<td><a href="{base}/report/{r.id}">{label_of(r)}</a></td>
+								<td>{time(r.created)}</td>
+								<td class="num">{fmt_ms(r.duration_ms)} ms</td>
+								<td class="num">{r.requests.length}</td>
+								<td class="fix">
+									{#if top_fix?.[r.id]}
+										{@const t = top_fix[r.id]}
+										<a href="{base}/report/{r.id}#pattern-0">{t.title}</a>
+										{#if t.save_ms >= 0.1}<span class="save"
+												>~{fmt_ms(t.save_ms)} ms{t.wait ? ' of waiting' : ''}</span
+											>{/if}{#if t.more}<span class="more"> · {t.more} more</span>{/if}
+									{:else}—{/if}
+								</td>
+								<td
+									>{#if prev_of.has(r.id)}<a href="{base}/compare/{prev_of.get(r.id)}/{r.id}"
+											>compare with previous</a
+										>{/if}</td
+								>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</section>
+		{/if}
+
+		{#if holes}
+			<section class="panel wide" data-hole-slots>
+				<h2>
+					Holes on this server <span class="hint" style="font-weight:400"
+						>({holes.rendered} rendered, {holes.slots} render slots per process)</span
+					>
+				</h2>
+				{#if holes.summary}
+					<p class="warn">{holes.summary}</p>
+				{:else}
+					<p class="hint">
+						No hole waited for a render slot. Each render holds one of the {holes.slots} slots through
+						its awaits, so slow holes would make the next ones wait.
+					</p>
+				{/if}
+				<table>
+					<thead>
+						<tr
+							><th>hole</th><th class="num">requests</th><th class="num">cache hits</th><th
+								class="num">failed</th
+							><th class="num">render ms</th><th
+								class="num"
+								title="mean wait for a render slot per rendered request (worst in brackets)"
+								>slot wait ms</th
+							><th class="num" title="its part of all the time the render slots were held"
+								>slot time</th
+							></tr
+						>
+					</thead>
+					<tbody>
+						{#each holes.rows as h (h.id)}
+							<tr>
+								<td class="fn">{h.name}</td>
+								<td class="num">{h.requests}</td>
+								<td class="num">{h.hits}</td>
+								<td class="num">{h.failed}</td>
+								<td class="num">{h.requests - h.hits - h.failed ? fmt_ms(h.render_ms) : '—'}</td>
+								<td class="num"
+									>{h.queue_ms ? fmt_ms(h.queue_ms) : '0'}{#if h.queue_max_ms >= 50}
+										<span class="hint">({fmt_ms(h.queue_max_ms)})</span>{/if}</td
+								>
+								<td class="num">{Math.round(h.slot_share * 100)}%</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</section>
+		{/if}
+
+		<section class="panel wide">
+			<h2>Slowest routes</h2>
+			<p class="hint">
+				Wall-clock per request since server start. p95 is the slow tail. "net p50" is time inside
+				outbound calls — when it tracks the total, the route is waiting on other services, not
+				computing.
+			</p>
+			{#if tag_keys.length}
+				<p class="hint">
+					Split by tag (<code>tag()</code> from @ogygia/devtools/profiler):
+					<a href={base} class:active={!by}>none</a>
+					{#each tag_keys as k (k)}· <a
+							href="{base}?by={encodeURIComponent(k)}"
+							class:active={by === k}>{k}</a
+						>{/each}
+				</p>
+			{/if}
+			{#if top_routes.length}
+				<table>
+					<thead>
+						<tr
+							><th>route</th><th class="num">hits</th><th class="num">p50 ms</th><th class="num"
+								>p95 ms</th
+							><th class="num">max ms</th><th class="num">net p50</th></tr
+						>
+					</thead>
+					<tbody>
+						{#each top_routes as r (r.route)}
+							<tr>
+								<td class="fn">{r.route}</td>
+								<td class="num">{r.count}</td>
+								<td class="num">{fmt_ms(r.p50)}</td>
+								<td class="num">{fmt_ms(r.p95)}</td>
+								<td class="num">{fmt_ms(r.max)}</td>
+								<td class="num">{fmt_ms(r.net_p50)}</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			{:else}
+				<p class="hint">No requests seen yet — load some pages, then refresh.</p>
+			{/if}
+		</section>
+
+		<section class="panel wide">
+			<h2>Recent requests</h2>
+			{#if recent_desc.length}
+				<table>
+					<thead>
+						<tr
+							><th>when</th><th>method</th><th>path</th><th>route</th>{#if tag_keys.length}<th
+									>tags</th
+								>{/if}<th class="num">status</th><th class="num">net ms</th><th class="num"
+								>total ms</th
+							></tr
+						>
+					</thead>
+					<tbody>
+						{#each recent_desc as e (e.ts + e.path)}
+							<tr>
+								<td>{time(e.ts)}</td>
+								<td>{e.method}</td>
+								<td class="fn"
+									>{e.path}{#if e.internal}<span class="warn"> (profiler)</span>{/if}</td
+								>
+								<td class="file">{e.route ?? '—'}</td>
+								{#if tag_keys.length}<td class="file"
+										>{e.tags
+											? Object.entries(e.tags)
+													.map(([k, v]) => `${k}=${v}`)
+													.join(' ')
+											: '—'}</td
+									>{/if}
+								<td class="num">{e.status || '—'}</td>
+								<td class="num"
+									>{#if e.net_count}{fmt_ms(e.net_ms)}
+										<span class="hint">({e.net_count})</span>{:else}—{/if}</td
+								>
+								<td class="num"><b>{fmt_ms(e.ms)}</b></td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			{:else}
+				<p class="hint">Nothing yet.</p>
+			{/if}
+		</section>
+	</div>
+</Shell>
+
+<style>
+	td.fix {
+		font-size: 12.5px;
+		max-width: 360px;
+	}
+	td.fix .save {
+		color: var(--c-orange);
+		font-weight: 600;
+		margin-left: 6px;
+		white-space: nowrap;
+	}
+	td.fix .more {
+		color: var(--text-faint);
+	}
+	.head {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: 16px;
+		flex-wrap: wrap;
+	}
+	.head .actions {
+		margin-top: 4px;
+	}
+	.ogp-opt {
+		display: inline-flex;
+		align-items: center;
+		gap: 5px;
+		font-size: 12.5px;
+		color: var(--text-dim);
+	}
+	.bar-cell {
+		position: relative;
+		min-width: 120px;
+	}
+	.bar-cell .bar {
+		position: absolute;
+		left: 4px;
+		right: 4px;
+		bottom: 3px;
+		height: 3px;
+		max-width: calc(100% - 8px);
+		background: var(--accent);
+		border-radius: 2px;
+		opacity: 0.7;
+	}
+</style>

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

@@ -0,0 +1,31 @@
+declare const Dashboard: import("svelte").Component<{
+    data: {
+        base: string;
+        recent: import("../report.js").RequestEntry[];
+        routes: import("../report.js").RouteAgg[];
+        by: string | null;
+        tag_keys: string[];
+        reports: import("../report.js").ReportMeta[];
+        top_fix: Record<string, {
+            title: string;
+            save_ms: number;
+            wait: boolean;
+            more: number;
+        }>;
+        site_fixes: import("../site-fixes.js").SiteFix[];
+        holes: import("../hole-slots.js").HoleSlots | null;
+        recording: boolean;
+        dev: boolean;
+        rss_mb: number;
+        inflight: number;
+        history: import("../profiler-router.js").PageHistory[];
+        trap: import("../index.js").TrapStatus | null;
+        sampled: import("../index.js").SampledSummary | null;
+        background_note: string | null;
+    };
+    form: null;
+    params: {};
+    search: {};
+}, {}, "">;
+type Dashboard = ReturnType<typeof Dashboard>;
+export default Dashboard;