@ogygia/devtools 0.0.0 → 0.11.1

package/dist/profiler/ui/Shell.svelte

@@ -0,0 +1,50 @@
+<script>import Sidebar from "./Sidebar.svelte" with { wake: "load" };
+// The shared profiler vocabulary (reset, typography, tables, buttons, form controls…). Global by
+// nature — every page composes with it — so it lives in a sibling stylesheet, not scoped here. It's
+// collected onto every page's server-router CSS aggregate because Shell is a child of every page.
+//
+// `?inline`, deliberately: the router-css walk reads the FILE (this import is only its discovery
+// marker — the query is stripped before resolution), so the sheet must never be a live css MODULE.
+// The profiler loads on the first request of any dev session (its handle times every render), which
+// welds this subtree into the SSR module graph — and SvelteKit's dev "inline all styles" collector
+// walks that graph and would inject this GLOBAL sheet (body{ max-width… }) into the app's own
+// pages (seen in the wild: every page squeezed to 1150px, profiler-dark). Kit's collector skips
+// `?inline` css urls by rule, so this is leak-proof no matter how the crawl reaches us.
+import "./profiler.css?inline";
+let { base = "", current = null, toc = false, bare = false, children } = $props();
+</script>
+
+<svelte:head>
+	<!-- Tell the ogygia devtools to stay out of profiler pages (incl. the Profiler tab's embedded iframe). -->
+	<meta name="ogygia-devtools" content="off" />
+</svelte:head>
+
+{#if bare}
+	<!-- pre-auth / message pages: no rail, no polling islands, just the content centred -->
+	<main class="app-main app-bare">
+		{@render children()}
+	</main>
+{:else}
+	<div class="app">
+		<Sidebar {base} {current} />
+		<main class="app-main" class:has-toc={toc}>
+			{@render children()}
+			<div class="footer">
+				ogygia/profiler — samples the whole Node process during SSR. <b>Self</b> = time (or memory)
+				inside the function itself. <b>Total</b> = self plus everything it called. <b>Per call</b> = total
+				÷ how many times it ran (a ×N tag means it ran N times; no tag means once).
+			</div>
+		</main>
+	</div>
+{/if}
+
+<style>
+	/* The shell's own chrome (scoped). The shared vocabulary lives in ./profiler.css. */
+	.footer {
+		margin-top: 40px;
+		padding-top: 12px;
+		border-top: 1px solid var(--line);
+		color: var(--text-faint);
+		font-size: 12px;
+	}
+</style>

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

@@ -0,0 +1,27 @@
+/**
+     * The profiler UI shell: owns the shared stylesheet (the sibling profiler.css, imported below) and
+     * renders the footer. Every profiler view wraps its body in this. Component-specific styles live
+     * scoped in their own components (Treemap / Flame / Waterfall / ReportBody / ShareLink /
+     * PermalinkGate); the shared vocabulary is the imported sheet.
+     *
+     * Reaching a routeless, server-only-rendered page: the profiler renders through `@ogygia/router` +
+     * `document()`, so its component CSS is emitted + linked by the SERVER-ROUTER CSS mechanism
+     * (link/router-css.ts) — Shell is a transitive child of every page component, so this sheet ships on
+     * every profiler page.
+     *
+     * NOTE — no literal style/script tag or a preprocessor-dialect block may appear anywhere in this
+     * file, comments included: this ships raw and svelte2tsx (type-gen) treats such a token as a real
+     * open tag and reports "script left open". See test/profiler-ui-consumer-safe.
+     */
+import type { Snippet } from 'svelte';
+import './profiler.css?inline';
+type $$ComponentProps = {
+    base?: string;
+    current?: string | null;
+    toc?: boolean;
+    bare?: boolean;
+    children: Snippet;
+};
+declare const Shell: import("svelte").Component<$$ComponentProps, {}, "">;
+type Shell = ReturnType<typeof Shell>;
+export default Shell;

package/dist/profiler/ui/Sidebar.svelte

@@ -0,0 +1,312 @@
+<script>/**
+* The global rail — on every profiler page (Shell renders it). Brand, the top-level nav, the
+* recordings this browser has kept, live status, and the theme switch. A `wake:'load'` island so
+* it can read the local store (IndexedDB) for kept reports and poll status.
+*
+* HOSTED DB SEAM: `server` is the list a company-hosted store would return (the reports the
+* backend holds, across instances and teammates). Today it is empty and the rail shows what THIS
+* browser kept ("the browser is the database"); when the backend lands, the router fills `server`
+* and the two lists merge — nothing else here changes. `live` is the same seam for a status feed.
+*/
+import { list_reports } from "./store.js";
+import ThemeSwitch from "./ThemeSwitch.svelte";
+let { base, current = null } = $props();
+// reports the durable store holds (SQLite/Redis/Postgres), shared across instances and teammates —
+// fetched from `/reports.json`; empty when no store is configured (then the rail is local-only)
+let server = $state([]);
+$effect(() => {
+	fetch(`${base}/reports.json`, { headers: { accept: "application/json" } }).then((r) => r.ok ? r.json() : []).then((rows) => server = Array.isArray(rows) ? rows : []).catch(() => server = []);
+});
+// LIVE STATUS — polled from the instance (`/status.json`): is a recording running, how many
+// requests are in flight, memory, how many reports it holds. The rail's pulse.
+let live = $state(null);
+$effect(() => {
+	let alive = true;
+	const poll = async () => {
+		try {
+			const r = await fetch(`${base}/status.json`, { headers: { accept: "application/json" } });
+			if (r.ok && alive) live = await r.json();
+		} catch {}
+	};
+	poll();
+	const t = setInterval(poll, 4e3);
+	return () => {
+		alive = false;
+		clearInterval(t);
+	};
+});
+let local = $state([]);
+$effect(() => {
+	list_reports().then((rows) => rows.sort((a, b) => b.at - a.at).slice(0, 12).map((r) => ({
+		id: r.id,
+		label: r.page ?? r.label ?? r.id,
+		page: r.page ?? undefined,
+		created: r.at,
+		where: "local"
+	}))).then((rows) => local = rows).catch(() => local = []);
+});
+// server-held reports first, then browser-only ones; a report in both shows ONCE (server wins)
+const rows = $derived.by(() => {
+	const seen = new Set();
+	const out = [];
+	for (const s of server) {
+		if (seen.has(s.id)) continue;
+		seen.add(s.id);
+		out.push({
+			...s,
+			where: "server"
+		});
+	}
+	for (const l of local) {
+		if (seen.has(l.id)) continue;
+		seen.add(l.id);
+		out.push(l);
+	}
+	return out.slice(0, 16);
+});
+const ago = (t) => {
+	const s = Math.max(0, (Date.now() - t) / 1e3);
+	if (s < 60) return "just now";
+	if (s < 3600) return `${Math.round(s / 60)}m ago`;
+	if (s < 86400) return `${Math.round(s / 3600)}h ago`;
+	return `${Math.round(s / 86400)}d ago`;
+};
+const nav = $derived([
+	{
+		href: base,
+		label: "Dashboard",
+		icon: "▦"
+	},
+	{
+		href: `${base}/site`,
+		label: "Whole site",
+		icon: "◈"
+	},
+	{
+		href: `${base}/view`,
+		label: "Import .ogp",
+		icon: "↥"
+	}
+]);
+const is_here = (href) => typeof window !== "undefined" && window.location.pathname === new URL(href, window.location.origin).pathname;
+</script>
+
+<aside class="rail">
+	<a class="brand" href={base}>
+		<span class="mark">◑</span>
+		<span class="wordmark">ogygia<b>profiler</b></span>
+	</a>
+
+	<nav>
+		{#each nav as n (n.href)}
+			<a href={n.href} class="navi" class:on={is_here(n.href)}
+				><span class="ni">{n.icon}</span>{n.label}</a
+			>
+		{/each}
+	</nav>
+
+	<div
+		class="status"
+		title={live ? `${live.inflight} in flight · ${live.rss_mb} MB · ${live.reports} in memory` : ''}
+	>
+		<span class="dot" class:run={live?.recording}></span>
+		{#if live?.recording}
+			recording…
+		{:else if live}
+			ready · {live.inflight} in flight
+		{:else}
+			ready
+		{/if}
+	</div>
+
+	<div class="recent">
+		<div class="rh">Recent recordings</div>
+		{#if rows.length}
+			<ul>
+				{#each rows as r (r.where + r.id)}
+					<li>
+						<a href="{base}/report/{r.id}" class:cur={r.id === current}>
+							<span class="rl">{r.label}</span>
+							<span class="rm"
+								>{ago(r.created)}{#if r.where === 'server'}
+									· shared{/if}</span
+							>
+						</a>
+					</li>
+				{/each}
+			</ul>
+		{:else}
+			<p class="empty">
+				None kept in this browser yet. On a report, hit <b>Keep</b> to pin it here.
+			</p>
+		{/if}
+	</div>
+
+	<div class="foot">
+		<ThemeSwitch />
+	</div>
+</aside>
+
+<style>
+	.rail {
+		position: fixed;
+		left: 0;
+		top: 0;
+		width: 236px;
+		height: 100vh;
+		display: flex;
+		flex-direction: column;
+		gap: 14px;
+		padding: 18px 14px;
+		border-right: 1px solid var(--line);
+		background: var(--bg-panel);
+		overflow-y: auto;
+		z-index: 10;
+	}
+	@media (max-width: 860px) {
+		.rail {
+			position: static;
+			width: auto;
+			height: auto;
+		}
+	}
+	.brand {
+		display: flex;
+		align-items: center;
+		gap: 9px;
+		text-decoration: none;
+		color: var(--text);
+		padding: 2px 4px;
+	}
+	.brand:hover {
+		text-decoration: none;
+	}
+	.mark {
+		font-size: 20px;
+		color: var(--accent);
+	}
+	.wordmark {
+		font-family: var(--font-display);
+		font-size: 17px;
+		letter-spacing: -0.01em;
+	}
+	.wordmark b {
+		font-weight: 600;
+		color: var(--accent);
+		margin-left: 3px;
+	}
+	nav {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+	}
+	.navi {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		padding: 7px 10px;
+		border-radius: var(--r-sm);
+		color: var(--text-dim);
+		font-size: 13px;
+		text-decoration: none;
+	}
+	.navi:hover {
+		background: var(--bg-hover);
+		color: var(--text);
+		text-decoration: none;
+	}
+	.navi.on {
+		background: var(--accent-deep);
+		color: var(--accent-strong);
+	}
+	.ni {
+		width: 16px;
+		text-align: center;
+		opacity: 0.85;
+	}
+	.status {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		font-size: 12px;
+		color: var(--text-faint);
+		padding: 0 10px;
+	}
+	.dot {
+		width: 7px;
+		height: 7px;
+		border-radius: 50%;
+		background: var(--text-faint);
+	}
+	.dot.run {
+		background: var(--accent);
+		box-shadow: 0 0 8px var(--accent);
+		animation: pulse 1.6s ease-in-out infinite;
+	}
+	@keyframes pulse {
+		50% {
+			opacity: 0.4;
+		}
+	}
+	.recent {
+		flex: 1;
+		min-height: 0;
+		display: flex;
+		flex-direction: column;
+	}
+	.rh {
+		font-size: 10.5px;
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+		color: var(--text-faint);
+		padding: 0 10px 6px;
+	}
+	.recent ul {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+		overflow-y: auto;
+	}
+	.recent a {
+		display: block;
+		padding: 6px 10px;
+		border-radius: var(--r-sm);
+		text-decoration: none;
+		color: var(--text-dim);
+	}
+	.recent a:hover {
+		background: var(--bg-hover);
+		text-decoration: none;
+	}
+	.recent a.cur {
+		background: var(--accent-deep);
+	}
+	/* (the faint grey is 4.2:1 on the dark accent fill) */
+	.recent a.cur .rm {
+		color: var(--text-dim);
+	}
+	.rl {
+		display: block;
+		font-size: 12.5px;
+		color: var(--text);
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		font-family: var(--font-mono);
+	}
+	.rm {
+		display: block;
+		font-size: 10.5px;
+		color: var(--text-faint);
+	}
+	.empty {
+		font-size: 12px;
+		color: var(--text-faint);
+		padding: 0 10px;
+		line-height: 1.5;
+	}
+	.foot {
+		border-top: 1px solid var(--line);
+		padding-top: 12px;
+	}
+</style>

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

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

package/dist/profiler/ui/Site.svelte

@@ -0,0 +1,20 @@
+<script>/** `<base>/site`: the whole-site pictures. Shell + the SiteView island (the request cloud with a
+*  brushable selection, and the layer cake per route), fed by this instance's rows or a sink URL
+*  the browser reads. */
+import Shell from "./Shell.svelte";
+import SiteView from "./SiteView.svelte" with { wake: "load" };
+let { data } = $props();
+const { base, rows, from, sink, ephemeral } = $derived(data);
+</script>
+
+<svelte:head><title>the whole site — profiler</title></svelte:head>
+
+<Shell {base}>
+	<h1>The whole site <small>every request, and where the time goes per route</small></h1>
+	<p class="hint">
+		<a href={base}>← dashboard</a> · {rows.length} rows from this instance{ephemeral
+			? ' (ephemeral: seconds of memory — use a sink)'
+			: ''}
+	</p>
+	<SiteView {base} {rows} {from} {sink} {ephemeral} />
+</Shell>

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

@@ -0,0 +1,23 @@
+declare const Site: import("svelte").Component<{
+    data: {
+        base: string;
+        rows: import("../sink.js").SinkRow[];
+        sink: {
+            url: string;
+            last: {
+                at: number;
+                ok: boolean;
+                rows: number;
+                error?: string;
+            } | null;
+            buffered: number;
+        } | null;
+        from: string | null;
+        ephemeral: boolean;
+    };
+    form: null;
+    params: {};
+    search: {};
+}, {}, "">;
+type Site = ReturnType<typeof Site>;
+export default Site;