@ogygia/devtools 0.0.0 → 0.11.1

package/dist/profiler/ui/Waterfall.svelte

@@ -0,0 +1,371 @@
+<script>/**
+* The network waterfall — an island (`wake:'load'`). Each bar shows its response size; clicking a
+* bar opens a side panel with the full request detail (trigger, sizes, timing, headers, payload).
+* Replaces the old expand-in-place request list. No `$effect`: the panel is pure `selected` state
+* toggled by click / Escape (see reactivity-dom-preferences). Styles live in style.ts (the shipped
+* profiler UI uses one global sheet, not scoped CSS — see style.ts).
+*/
+import { fmt_ms, fmt_bytes } from "./format.js";
+let { rows } = $props();
+let selected = $state(null);
+</script>
+
+<svelte:window
+	onkeydown={(e) => {
+		if (e.key === 'Escape') selected = null;
+	}}
+/>
+
+<div class="wf">
+	<div class="wf-track">
+		{#each rows as r}
+			<div class="wf-row">
+				<button
+					type="button"
+					class="wf-bar"
+					class:err={r.err}
+					class:sel={selected === r.call}
+					style="left:{r.left}%;width:{r.width}%"
+					title={r.title}
+					onclick={() => (selected = r.call)}
+				>
+					{#if r.bodyPct > 5}<span class="body" style="width:{r.bodyPct}%"></span>{/if}
+					{#if r.sizeLabel}<span class="wf-size">{r.sizeLabel}</span>{/if}
+				</button>
+				<span
+					class="wf-label"
+					style={r.rightAnchored
+						? `right:calc(${(100 - r.left).toFixed(1)}% + 6px)`
+						: `left:calc(${(r.left + r.width).toFixed(1)}% + 6px)`}>{r.label}</span
+				>
+			</div>
+		{/each}
+	</div>
+</div>
+
+{#if selected}
+	{@const c = selected}
+	<!-- Non-modal side panel — no full-screen dimming backdrop (it caused a compositing repaint glitch,
+	     and blocked seeing the waterfall). Close with ✕ or Escape; click another bar to switch. -->
+	<div class="wf-drawer" role="dialog" aria-label="Request detail">
+		<div class="wf-drawer-head">
+			<span class="rm">{c.method}</span>
+			<span class="ru" title={c.url}>{c.url}</span>
+			<span class="rs" class:warn={c.error}>{c.error ? 'ERR' : c.status || '—'}</span>
+			<button type="button" class="wf-close" aria-label="Close" onclick={() => (selected = null)}
+				>✕</button
+			>
+		</div>
+		<div class="wf-drawer-body">
+			<dl>
+				<dt>Size</dt>
+				<dd>
+					{#if c.bytes != null}<b>{fmt_bytes(c.bytes)}</b> decoded{/if}{#if c.transfer_bytes != null && c.transfer_bytes !== c.bytes}{#if c.bytes != null},
+						{/if}{fmt_bytes(c.transfer_bytes)} on the wire{#if c.encoding}
+							<span class="dim">({c.encoding})</span
+							>{/if}{/if}{#if c.bytes == null && c.transfer_bytes == null}—{/if}
+				</dd>
+				<dt>Timing</dt>
+				<dd>
+					{fmt_ms(c.ms)} to headers{#if c.body_ms}
+						· {fmt_ms(c.body_ms)} reading the body{/if}
+				</dd>
+				<dt>Response</dt>
+				<dd>
+					{c.error ? 'error' : c.status || '—'}{#if c.type}
+						· {c.type}{/if}{#if c.error}
+						· {c.error}{/if}
+				</dd>
+				{#if c.route ?? c.path}<dt>Triggered by</dt>
+					<dd class="brk">{c.route ?? c.path}</dd>{/if}
+				{#if c.caller}<dt>Caller</dt>
+					<dd class="brk">{c.caller}</dd>{/if}
+				{#if c.callers && c.callers.length > 1}<dt>Call path</dt>
+					<dd class="brk">
+						{#each c.callers as k, i (i)}{#if i > 0}<span class="dim"> ← </span>{/if}{k}{/each}
+					</dd>{/if}
+				{#if c.timings?.length}
+					{@const theirs = c.timings.reduce((a, t) => a + t.ms, 0)}
+					<dt>Their side</dt>
+					<dd>
+						{#each c.timings as t, i (t.name + '\0' + i)}<span class="st"
+								><b>{t.desc ?? t.name}</b> {fmt_ms(t.ms)} ms</span
+							>{/each}
+						{#if theirs > 0}<span class="dim"
+								>— {fmt_ms(theirs)} ms measured on their side, {fmt_ms(Math.max(0, c.ms - theirs))} ms
+								network + framework (from their Server-Timing)</span
+							>{/if}
+					</dd>
+				{/if}
+				{#if c.trace}
+					{@const t = c.trace}
+					{@const rest = Math.max(0, t.ms - t.cpu_ms - t.wait_ms)}
+					<dt>Inside the upstream</dt>
+					<dd>
+						<span class="st"
+							><b>{fmt_ms(t.ms)} ms</b> on their profiler's clock{#if t.route}
+								· route <code>{t.route}</code>{/if}</span
+						>
+						<span
+							class="trace-bar"
+							title="{fmt_ms(t.cpu_ms)} ms CPU · {fmt_ms(
+								t.wait_ms
+							)} ms waiting on {t.calls} call{t.calls === 1 ? '' : 's'} · {fmt_ms(rest)} ms other"
+						>
+							<i class="tb-cpu" style="width:{(t.cpu_ms / Math.max(t.ms, 0.01)) * 100}%"></i><i
+								class="tb-wait"
+								style="width:{(t.wait_ms / Math.max(t.ms, 0.01)) * 100}%"
+							></i><i class="tb-rest" style="width:{(rest / Math.max(t.ms, 0.01)) * 100}%"></i>
+						</span>
+						<span class="dim"
+							>{fmt_ms(t.cpu_ms)} ms CPU · {fmt_ms(t.wait_ms)} ms waiting on {t.calls} call{t.calls ===
+							1
+								? ''
+								: 's'} · {fmt_ms(rest)} ms other · {fmt_ms(Math.max(0, c.ms - t.ms))} ms network between
+							us</span
+						>
+						{#if t.top?.length}
+							<span class="dim"
+								>their own calls: {#each t.top as u, i (i)}{#if i > 0},
+									{/if}{u.url.replace(/^https?:\/\/[^/]+/, '')}
+									{fmt_ms(u.ms)} ms{/each}</span
+							>
+						{/if}
+						{#if t.profiler}<span class="dim">their profiler: <code>{t.profiler}</code></span>{/if}
+					</dd>
+				{/if}
+			</dl>
+
+			<h4>URL</h4>
+			<pre class="wf-url">{c.url}</pre>
+
+			{#if c.headers && Object.keys(c.headers).length}
+				<h4>Response headers</h4>
+				<dl class="hdrs">
+					{#each Object.entries(c.headers) as [k, v]}
+						<dt>{k}</dt>
+						<dd class="brk">{v}</dd>
+					{/each}
+				</dl>
+			{/if}
+		</div>
+	</div>
+{/if}
+
+<style>
+	/* The shell scrolls; the track keeps a usable minimum width so a narrow viewport (or the open
+	   drawer) pans the timeline instead of crushing the % -positioned bars into unreadability. */
+	.wf {
+		background: var(--bg-sunken);
+		border: 1px solid var(--line);
+		border-radius: 8px;
+		margin: 8px 0;
+		overflow-x: auto;
+	}
+	.wf-track {
+		position: relative;
+		min-width: 640px;
+		padding: 8px 0;
+	}
+	.wf-row {
+		position: relative;
+		height: 22px;
+	}
+	.wf-bar {
+		position: absolute;
+		height: 16px;
+		top: 3px;
+		border: 0;
+		padding: 0;
+		border-radius: 3px;
+		background: var(--c-blue);
+		min-width: 2px;
+		cursor: pointer;
+		overflow: hidden;
+		display: block;
+		transition: filter 0.1s;
+	}
+	.wf-bar:hover {
+		filter: brightness(1.18);
+	}
+	.wf-bar.sel {
+		box-shadow:
+			0 0 0 2px var(--c-blue),
+			0 0 0 4px var(--bg-sunken);
+	}
+	.wf-bar.err {
+		background: var(--bad);
+	}
+	.wf-bar .body {
+		position: absolute;
+		right: 0;
+		top: 0;
+		height: 100%;
+		background: #3a5d8f;
+	}
+	.wf-size {
+		position: absolute;
+		left: 5px;
+		top: 0;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		font:
+			10px ui-monospace,
+			monospace;
+		/* on the blue bar: the theme's ink for its accent fills (4.5:1 in both themes) */
+		color: var(--text-on-accent);
+		font-variant-numeric: tabular-nums;
+		white-space: nowrap;
+		pointer-events: none;
+		text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
+	}
+	.wf-label {
+		position: absolute;
+		font:
+			11px ui-monospace,
+			monospace;
+		color: var(--text-dim);
+		top: 4px;
+		white-space: nowrap;
+		pointer-events: none;
+	}
+	.st {
+		display: inline-block;
+		margin-right: 10px;
+	}
+	.dim {
+		color: #5c636e;
+	}
+	/* Request side panel — slides in when a waterfall bar is clicked. */
+	.wf-drawer {
+		position: fixed;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		z-index: 40;
+		width: min(460px, 92vw);
+		background: var(--bg-sunken);
+		border-left: 1px solid var(--line);
+		box-shadow: -12px 0 32px rgba(0, 0, 0, 0.4);
+		display: flex;
+		flex-direction: column;
+	}
+	.wf-drawer-head {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		padding: 12px 14px;
+		border-bottom: 1px solid #1c222c;
+	}
+	.wf-drawer-head .rm {
+		font-family: ui-monospace, monospace;
+		color: var(--text-dim);
+		font-weight: 600;
+	}
+	.wf-drawer-head .ru {
+		font-family: ui-monospace, monospace;
+		color: var(--text-faint);
+		font-size: 12px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		flex: 1;
+		min-width: 0;
+	}
+	.wf-drawer-head .rs {
+		color: #8b93a0;
+		font-variant-numeric: tabular-nums;
+		font-size: 12.5px;
+	}
+	.wf-close {
+		margin-left: auto;
+		border: 0;
+		background: transparent;
+		color: var(--text-faint);
+		font-size: 15px;
+		cursor: pointer;
+		padding: 2px 7px;
+		border-radius: 5px;
+		line-height: 1;
+	}
+	.wf-close:hover {
+		background: var(--bg-hover);
+		color: var(--text);
+	}
+	.wf-drawer-body {
+		padding: 12px 14px 20px;
+		overflow: auto;
+	}
+	.wf-drawer-body h4 {
+		font-size: 11px;
+		color: var(--text-faint);
+		margin: 16px 0 5px;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.04em;
+	}
+	.wf-drawer-body dl {
+		display: grid;
+		grid-template-columns: 96px minmax(0, 1fr);
+		gap: 4px 12px;
+		margin: 0;
+		font-size: 12.5px;
+	}
+	.wf-drawer-body dl.hdrs {
+		grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
+		font-family: ui-monospace, monospace;
+		font-size: 12px;
+		gap: 3px 12px;
+	}
+	.wf-drawer-body dt {
+		color: var(--text-faint);
+	}
+	.wf-drawer-body dd {
+		color: var(--text);
+		margin: 0;
+		min-width: 0;
+	}
+	.wf-drawer-body dd.brk {
+		font-family: ui-monospace, monospace;
+		font-size: 12px;
+		word-break: break-all;
+	}
+	.wf-url {
+		margin: 4px 0 0;
+		padding: 8px 10px;
+		background: var(--bg-sunken);
+		border: 1px solid #1c222c;
+		border-radius: 6px;
+		font:
+			12px ui-monospace,
+			monospace;
+		color: var(--text-dim);
+		word-break: break-all;
+		white-space: pre-wrap;
+	}
+	/* the nested trace: the upstream's own request as a three-part bar */
+	.trace-bar {
+		display: flex;
+		height: 10px;
+		width: 100%;
+		max-width: 420px;
+		background: var(--bg-sunken);
+		border-radius: 3px;
+		overflow: hidden;
+		margin: 4px 0;
+	}
+	.trace-bar i {
+		display: block;
+		height: 100%;
+	}
+	.tb-cpu {
+		background: var(--c-orange);
+	}
+	.tb-wait {
+		background: var(--c-blue);
+	}
+	.tb-rest {
+		background: #374151;
+	}
+</style>

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

@@ -0,0 +1,7 @@
+import type { WfRow } from './report-data.js';
+type $$ComponentProps = {
+    rows: WfRow[];
+};
+declare const Waterfall: import("svelte").Component<$$ComponentProps, {}, "">;
+type Waterfall = ReturnType<typeof Waterfall>;
+export default Waterfall;

package/dist/profiler/ui/WhatIf.svelte

@@ -0,0 +1,87 @@
+<script>// PICK YOUR FIXES: the forecast's parts as a checklist — tick the ones you will make, and the
+// render after them is counted the forecast's way (each saving once, each resource capped by
+// what the render used), right here in the browser. A fix another covers comes with it.
+import { saving_of } from "../saving.js";
+import { fmt_ms } from "./format.js";
+let { parts, now_ms, caps } = $props();
+// all ticked at first: the forecast's own number
+// svelte-ignore state_referenced_locally
+let on = $state(parts.map(() => true));
+const picked = $derived(parts.filter((_, i) => on[i]));
+const result = $derived(saving_of(picked, caps ?? {}, now_ms));
+const pct = $derived(now_ms > 0 ? Math.round((now_ms - result.after) / now_ms * 100) : 0);
+</script>
+
+<div class="whatif">
+	<p class="sum">
+		With the <b>{picked.length}</b> fix{picked.length === 1 ? '' : 'es'} ticked: about
+		<b>{fmt_ms(result.after)} ms</b>
+		a render
+		<span class="hint">(from {fmt_ms(now_ms)} ms, −{pct}%)</span>
+		{#if result.clamped}<span class="hint"
+				>· they claim more than the render used: held at what it used</span
+			>{/if}
+	</p>
+	<ul>
+		{#each parts as p, i}
+			<li>
+				<label>
+					<input type="checkbox" bind:checked={on[i]} />
+					<span class="t">{p.title}</span>
+					<span class="ms"
+						>{p.wait ? 'waiting' : p.kind === 'unread-work' ? 'deleted' : 'CPU'} ~{fmt_ms(p.ms)} ms</span
+					>
+				</label>
+				{#if p.with?.length}<span class="hint covers">also covers {p.with.join('; ')}</span>{/if}
+			</li>
+		{/each}
+	</ul>
+	<p class="hint">
+		<button type="button" onclick={() => (on = parts.map(() => true))}>Tick all</button>
+		<button type="button" onclick={() => (on = parts.map(() => false))}>Clear</button>
+	</p>
+</div>
+
+<style>
+	.whatif {
+		margin: 8px 0 12px;
+	}
+	.sum {
+		margin: 0 0 6px;
+	}
+	ul {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		display: grid;
+		gap: 2px;
+	}
+	li {
+		font-size: 13px;
+	}
+	label {
+		display: flex;
+		gap: 8px;
+		align-items: baseline;
+		cursor: pointer;
+	}
+	.t {
+		flex: 1;
+	}
+	.ms {
+		font-family: var(--font-mono, ui-monospace, monospace);
+		font-size: 12px;
+		opacity: 0.8;
+		white-space: nowrap;
+	}
+	.covers {
+		display: block;
+		margin-left: 24px;
+		font-size: 12px;
+	}
+	button {
+		font: inherit;
+		font-size: 12px;
+		margin-right: 6px;
+	}
+</style>

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

@@ -0,0 +1,18 @@
+type Part = {
+    title: string;
+    kind: string;
+    ms: number;
+    wait: boolean;
+    with?: string[];
+};
+type $$ComponentProps = {
+    parts: Part[];
+    now_ms: number;
+    caps?: {
+        wait?: number;
+        cpu?: number;
+    };
+};
+declare const WhatIf: import("svelte").Component<$$ComponentProps, {}, "">;
+type WhatIf = ReturnType<typeof WhatIf>;
+export default WhatIf;

package/dist/profiler/ui/fake-progress.svelte.d.ts

@@ -0,0 +1,15 @@
+/**
+ * A Windows-style "determinate-ish" progress: crawls forward fast at first, eases toward 95% with the
+ * occasional burst, then snaps to 100% when the real work finishes. There is no true percentage to
+ * report — the profile endpoint just works until it's done — so this is a timed illusion, the standard
+ * "something is happening" reassurance bar. Call `start()` when the request goes out, `finish()` when
+ * it resolves (it awaits one paint at 100% before returning), `fail()` on error.
+ */
+export interface FakeProgress {
+  readonly value: number;
+  readonly running: boolean;
+  start(): void;
+  finish(): Promise<void>;
+  fail(): void;
+}
+export declare function fake_progress(): FakeProgress;

package/dist/profiler/ui/fake-progress.svelte.js

@@ -0,0 +1,38 @@
+// src/profiler/ui/fake-progress.svelte.ts
+function fake_progress() {
+	let value = $state(0);
+	let running = $state(false);
+	let timer;
+	function tick() {
+		if (value >= 95) return;
+		const gap = 95 - value;
+		const burst = Math.random() < .18 ? gap * .14 : 0;
+		value = Math.min(95, value + gap * .045 + burst + .5);
+	}
+	return {
+		get value() {
+			return value;
+		},
+		get running() {
+			return running;
+		},
+		start() {
+			clearInterval(timer);
+			value = 0;
+			running = true;
+			timer = setInterval(tick, 170);
+		},
+		async finish() {
+			clearInterval(timer);
+			value = 100;
+			await new Promise((r) => setTimeout(r, 420));
+			running = false;
+		},
+		fail() {
+			clearInterval(timer);
+			running = false;
+			value = 0;
+		}
+	};
+}
+export { fake_progress };

package/dist/profiler/ui/format.d.ts

@@ -0,0 +1,20 @@
+import { FrameCategory } from "../analyze.js";
+import { ReportMeta } from "../report.js";
+/** ms with sensible precision: whole numbers over 100, one dp over 10, two dp below. */
+export declare const fmt_ms: (n: number) => string;
+/** A duration in ms, with the unit that keeps it readable: `1.20 ms`, `46 µs`, `8 ns`. For per-call
+ *  costs, where a hot getter can cost nanoseconds a call and fixed decimals print it as zero. */
+export declare const fmt_dur: (ms: number) => string;
+/** part/whole as a percentage, or an em-dash when whole is 0. */
+export declare const fmt_pct: (part: number, whole: number) => string;
+/** bytes → MB / kB / B. */
+export declare const fmt_bytes: (n: number) => string;
+export declare const CATEGORY_LABEL: Record<FrameCategory, string>;
+export declare const CATEGORY_COLOR: Record<FrameCategory, string>;
+/** The text color for a label on `bg` (`#rrggbb`): near-black or white, whichever contrasts more
+ *  (a chip's background is a data color, light or dark: one fixed ink failed 4.5:1 on half of them). */
+export declare function ink_on(bg: string): string;
+/** Bar color per I/O kind, for the Waiting-by-function bars. */
+export declare function kind_color(kind: string): string;
+/** A report's one-line label for lists + headers. */
+export declare function label_of(r: ReportMeta): string;

package/dist/profiler/ui/format.js

@@ -0,0 +1,71 @@
+// src/profiler/ui/format.ts
+/** ms with sensible precision: whole numbers over 100, one dp over 10, two dp below. */
+const fmt_ms = (n) => n >= 100 ? n.toFixed(0) : n >= 10 ? n.toFixed(1) : n.toFixed(2);
+/** A duration in ms, with the unit that keeps it readable: `1.20 ms`, `46 µs`, `8 ns`. For per-call
+*  costs, where a hot getter can cost nanoseconds a call and fixed decimals print it as zero. */
+const fmt_dur = (ms) => {
+	if (!Number.isFinite(ms) || ms <= 0) return "—";
+	if (ms >= 1) return `${fmt_ms(ms)} ms`;
+	const us = ms * 1e3;
+	if (us >= 1) return `${us >= 100 ? us.toFixed(0) : us >= 10 ? us.toFixed(1) : us.toFixed(2)} µs`;
+	const ns = us * 1e3;
+	return `${ns >= 10 ? ns.toFixed(0) : ns.toFixed(1)} ns`;
+};
+/** part/whole as a percentage, or an em-dash when whole is 0. */
+const fmt_pct = (part, whole) => whole > 0 ? (part / whole * 100).toFixed(1) + "%" : "—";
+/** bytes → MB / kB / B. */
+const fmt_bytes = (n) => n >= 1048576 ? (n / 1048576).toFixed(1) + " MB" : n >= 1024 ? (n / 1024).toFixed(0) + " kB" : n + " B";
+const CATEGORY_LABEL = {
+	component: "component",
+	app: "app code",
+	dependency: "dependency",
+	svelte: "svelte",
+	node: "node core",
+	gc: "GC",
+	idle: "idle",
+	v8: "v8",
+	profiler: "profiler",
+	unknown: "—"
+};
+const CATEGORY_COLOR = {
+	component: "#e8734a",
+	app: "#4a9d6e",
+	dependency: "#5b8fd6",
+	svelte: "#c1544f",
+	node: "#8a8f98",
+	gc: "#b58a3d",
+	idle: "#3a3f47",
+	v8: "#6b7280",
+	profiler: "#7d6bb0",
+	unknown: "#6b7280"
+};
+/** The text color for a label on `bg` (`#rrggbb`): near-black or white, whichever contrasts more
+*  (a chip's background is a data color, light or dark: one fixed ink failed 4.5:1 on half of them). */
+function ink_on(bg) {
+	if (bg.length !== 7 || bg[0] !== "#") return "var(--text-on-accent)";
+	const ch = (i) => {
+		const v = parseInt(bg.slice(i, i + 2), 16) / 255;
+		return v <= .03928 ? v / 12.92 : ((v + .055) / 1.055) ** 2.4;
+	};
+	const L = .2126 * ch(1) + .7152 * ch(3) + .0722 * ch(5);
+	return 1.05 / (L + .05) >= (L + .05) / .055 ? "#ffffff" : "#06120c";
+}
+/** Bar color per I/O kind, for the Waiting-by-function bars. */
+function kind_color(kind) {
+	switch (kind) {
+		case "http": return "#5b8fd6";
+		case "timer": return "#b58a3d";
+		case "file": return "#4a9d6e";
+		case "socket": return "#c1544f";
+		case "dns": return "#7d6bb0";
+		default: return "#8a8f98";
+	}
+}
+/** A report's one-line label for lists + headers. */
+function label_of(r) {
+	if (r.trigger === "page") return `page ${r.page} ×${r.runs?.length ?? 0}`;
+	if (r.trigger === "request") return `request ${r.request?.path ?? ""}`;
+	if (r.trigger === "trap") return `caught ${r.request?.path ?? ""} (${Math.round(r.request?.ms ?? 0)} ms)`;
+	return `${Math.round(r.duration_ms / 1e3)}s window`;
+}
+export { CATEGORY_COLOR, CATEGORY_LABEL, fmt_bytes, fmt_dur, fmt_ms, fmt_pct, ink_on, kind_color, label_of };

package/dist/profiler/ui/permalink.d.ts

@@ -0,0 +1,9 @@
+/** Encrypt a report dump for a permalink: gzip → AES-GCM(PBKDF2(password)) → base64url. */
+export declare function encode_permalink(dump: unknown, password: string): Promise<string>;
+/** Reverse of {@link encode_permalink}. Throws on a wrong password / tampered blob (GCM tag fails). */
+export declare function decode_permalink(blob: string, password: string): Promise<unknown>;
+/** All-WebKit browsers (desktop Safari + EVERY iOS browser) hard-error past ~80 K URL chars, too small
+ *  for a real report — so universal links are disabled there. Chromium (~2 MB) and Firefox handle it. */
+export declare function is_webkit_capped(): boolean;
+/** Chromium tops out at a 2 MB URL; keep a safe margin. Fragment chars ≈ blob length (all ASCII). */
+export declare const MAX_PERMALINK_CHARS = 15e5;