@ogygia/devtools 0.0.0-stage → 0.11.0

package/dist/devtools/SessionTab.svelte.d.ts

@@ -0,0 +1,11 @@
+export default SessionTab;
+type SessionTab = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const SessionTab: import("svelte").Component<{
+    tick?: number;
+}, {}, "">;
+type $$ComponentProps = {
+    tick?: number;
+};

package/dist/devtools/TimelineTab.svelte

@@ -0,0 +1,267 @@
+<!-- (its CSS injected into the dock's shadow root: see Devtools.svelte) -->
+<svelte:options css="injected" />
+
+<script>
+	/**
+	 * The Timeline tab: CLIENT-realm events on a time axis, one lane per region (+ a page/nav lane), a
+	 * hydrate.start→done bar per region. Server events are excluded on purpose — their clock is a
+	 * different origin. The track width follows the window (bind:clientWidth), so it never overflows.
+	 */
+	import { snapshot } from '@ogygia/core/events';
+	import { last_nav } from './page.js';
+	import { region_name, region_name_by_fp } from './regions.js';
+
+	let { tick = 0 } = $props();
+
+	const MARK = {
+		'runtime.boot': { c: '#64748b', t: 'boot' },
+		'region.connected': { c: '#64748b', t: 'connect' },
+		'wake.scheduled': { c: '#38bdf8', t: 'sched' },
+		'wake.fired': { c: '#2dd4bf', t: 'wake' },
+		'region.hydrate.start': { c: '#f59e0b', t: 'hydrate' },
+		'region.hydrate.done': { c: '#22c55e', t: 'done' },
+		'region.hydrate.failed': { c: '#ef4444', t: 'fail' },
+		'interaction.replay': { c: '#8b5cf6', t: 'replay' },
+		'nav.start': { c: '#ec4899', t: 'nav' },
+		'nav.finish': { c: '#ec4899', t: 'nav done' }
+	};
+	const LEGEND = [
+		'wake.scheduled',
+		'wake.fired',
+		'region.hydrate.start',
+		'region.hydrate.done',
+		'interaction.replay',
+		'nav.start'
+	];
+	const LABEL_W = 118;
+
+	let wrapW = $state(560);
+	const trackW = $derived(Math.max(200, wrapW - LABEL_W - 12));
+
+	const model = $derived.by(() => {
+		void tick; // refresh with the panel tick
+		// THIS page: from the last in-app navigation on (the nav itself included). Every earlier page's
+		// islands stayed in the buffer: after a few navigations the axis spanned the whole session, one
+		// lane per island of every page visited, each squeezed to a dot.
+		// (a navigation that never swapped the page — a full load held back, one overtaken — starts nothing)
+		const all = snapshot().filter((e) => e.realm === 'client' && MARK[e.name]);
+		const nav = last_nav();
+		const from = nav
+			? Math.max(
+					0,
+					all.findIndex((e) => e.t >= nav.t)
+				)
+			: 0;
+		const events = all.slice(from);
+		if (events.length === 0) return { events: [], lanes: [], span: 0 };
+
+		// Group by region, keeping only the FIRST occurrence of each phase. A live region re-emits
+		// wake/hydrate on every tick — folding to first-per-phase keeps a 2-minute live tail from
+		// stretching the axis so the real initial-load hydrations collapse into a single dot.
+		const laneMap = new Map();
+		for (const e of events) {
+			const key = e.fp || 'page';
+			let lane = laneMap.get(key);
+			if (!lane) laneMap.set(key, (lane = { key, first: new Map(), entry: null }));
+			if (!lane.first.has(e.name)) lane.first.set(e.name, e);
+			if (e.entry && !lane.entry) lane.entry = e.entry;
+		}
+
+		// Axis spans only those first events — i.e. the initial hydration wave.
+		let t0 = Infinity;
+		let t1 = -Infinity;
+		for (const lane of laneMap.values())
+			for (const e of lane.first.values()) {
+				if (e.t < t0) t0 = e.t;
+				if (e.t > t1) t1 = e.t;
+			}
+		const span = Math.max(1, t1 - t0);
+		const x = (t) => ((t - t0) / span) * trackW;
+
+		const lanes = [];
+		for (const lane of laneMap.values()) {
+			const evs = [...lane.first.values()].sort((a, b) => a.t - b.t);
+			const label =
+				lane.key === 'page'
+					? 'page / nav'
+					: lane.entry
+						? region_name(lane.entry)
+						: region_name_by_fp(lane.key);
+			// Bar = schedule → done (or the earliest phase we saw → done). Open bar when hydrate hasn't
+			// finished yet, so a still-waking region reads differently from a done one.
+			const start =
+				lane.first.get('wake.scheduled') ||
+				lane.first.get('wake.fired') ||
+				lane.first.get('region.hydrate.start');
+			const done = lane.first.get('region.hydrate.done') || lane.first.get('region.hydrate.failed');
+			const bar = start
+				? {
+						left: x(start.t),
+						width: done ? Math.max(3, x(done.t) - x(start.t)) : Math.max(3, trackW - x(start.t)),
+						open: !done,
+						failed: lane.first.has('region.hydrate.failed')
+					}
+				: null;
+			const dur = start && done ? done.t - start.t : null;
+			const dots = evs.map((e) => ({
+				left: x(e.t),
+				color: MARK[e.name].c,
+				title: `${MARK[e.name].t} · ${e.name} @ +${(e.t - t0).toFixed(1)}ms`
+			}));
+			lanes.push({ key: lane.key, label, bar, dots, dur, order: evs[0]?.t ?? 0 });
+		}
+		lanes.sort((a, b) => a.order - b.order);
+		return { events, lanes, span };
+	});
+</script>
+
+<h3>
+	timeline — client wake / hydrate {model.events.length ? `(${model.events.length} events)` : ''}
+</h3>
+
+{#if model.events.length === 0}
+	<div class="muted">no client events yet — interact with the page, then reopen.</div>
+{:else}
+	<div class="wrap" bind:clientWidth={wrapW}>
+		{#each model.lanes as lane (lane.key)}
+			<div class="lane">
+				<div class="label" title={lane.key} style:width="{LABEL_W}px">{lane.label}</div>
+				<div class="track" style:width="{trackW}px">
+					{#if lane.bar}
+						<div
+							class="bar"
+							class:open={lane.bar.open}
+							class:failed={lane.bar.failed}
+							style:left="{lane.bar.left}px"
+							style:width="{lane.bar.width}px"
+						></div>
+					{/if}
+					{#each lane.dots as d}<div
+							class="dot"
+							title={d.title}
+							style:left="{d.left}px"
+							style:background={d.color}
+						></div>{/each}
+					{#if lane.dur != null}<span
+							class="dur"
+							style:left="{(lane.bar?.left ?? 0) + (lane.bar?.width ?? 0)}px"
+							>{lane.dur < 10 ? lane.dur.toFixed(1) : Math.round(lane.dur)} ms</span
+						>{/if}
+				</div>
+			</div>
+		{/each}
+		<div class="lane axis">
+			<div class="label" style:width="{LABEL_W}px"></div>
+			<div class="track" style:width="{trackW}px">
+				<span class="l">0 ms</span><span class="r"
+					>{model.span.toFixed(model.span < 100 ? 1 : 0)} ms total</span
+				>
+			</div>
+		</div>
+	</div>
+
+	<div class="legend">
+		{#each LEGEND as n}
+			<span class="li"
+				><span class="dot inline" style:background={MARK[n].c}></span>{MARK[n].t}</span
+			>
+		{/each}
+	</div>
+{/if}
+
+<style>
+	h3 {
+		margin: 0 0 8px;
+		font-size: 12px;
+		color: #5eead4;
+	}
+	.muted {
+		color: #94a3b8;
+	}
+	.wrap {
+		width: 100%;
+	}
+	.lane {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		margin: 3px 0;
+	}
+	.label {
+		color: #94a3b8;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.track {
+		position: relative;
+		height: 18px;
+		border-left: 1px solid rgba(148, 163, 184, 0.25);
+	}
+	.bar {
+		position: absolute;
+		top: 7px;
+		height: 5px;
+		border-radius: 3px;
+		background: linear-gradient(90deg, rgba(56, 189, 248, 0.5), rgba(34, 197, 94, 0.6));
+	}
+	.bar.open {
+		background: repeating-linear-gradient(
+			90deg,
+			rgba(245, 158, 11, 0.5),
+			rgba(245, 158, 11, 0.5) 4px,
+			transparent 4px,
+			transparent 8px
+		);
+	}
+	.bar.failed {
+		background: rgba(239, 68, 68, 0.6);
+	}
+	.dur {
+		position: absolute;
+		top: 3px;
+		margin-left: 5px;
+		font-size: 10px;
+		color: #94a3b8;
+		white-space: nowrap;
+	}
+	.dot {
+		position: absolute;
+		top: 5px;
+		width: 9px;
+		height: 9px;
+		margin-left: -4px;
+		border-radius: 50%;
+		border: 1px solid #0b1220;
+	}
+	.axis .track {
+		height: 14px;
+		border-left: none;
+	}
+	.axis .l {
+		position: absolute;
+		left: 0;
+		color: #94a3b8;
+	}
+	.axis .r {
+		position: absolute;
+		right: 0;
+		color: #94a3b8;
+	}
+	.legend {
+		margin-top: 10px;
+		display: flex;
+		flex-wrap: wrap;
+		gap: 10px;
+	}
+	.li {
+		color: #94a3b8;
+	}
+	.dot.inline {
+		position: static;
+		display: inline-block;
+		margin: 0 5px 0 0;
+		vertical-align: 0;
+		border: none;
+	}
+</style>

package/dist/devtools/TimelineTab.svelte.d.ts

@@ -0,0 +1,11 @@
+export default TimelineTab;
+type TimelineTab = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const TimelineTab: import("svelte").Component<{
+    tick?: number;
+}, {}, "">;
+type $$ComponentProps = {
+    tick?: number;
+};

package/dist/devtools/WireTab.svelte

@@ -0,0 +1,149 @@
+<!-- (its CSS injected into the dock's shadow root: see Devtools.svelte) -->
+<svelte:options css="injected" />
+
+<script>
+	/**
+	 * The Wire tab (wire inspector, internal/notes/devtools.md, Rung 5 · 2): everything the SERVER
+	 * shipped to this page across the island boundary — each island's devalue PROPS payload, the
+	 * document seeds ($app/state page + remote query cache), and the signed capabilities minted for
+	 * deferred holes. The data-crossing counterpart to the Bytes tab (which is code). Reads the
+	 * server-realm events the handle folded into the stream via the `application/ogygia-devtools`
+	 * side-channel; nothing here needs a socket — it's the same in-page bus.
+	 */
+	import { snapshot } from '@ogygia/core/events';
+	import { short_chunk, kb, region_name } from './regions.js';
+
+	let { tick = 0 } = $props();
+
+	const model = $derived.by(() => {
+		void tick; // refresh with the panel tick
+		const ev = snapshot();
+		const renders = ev.filter((e) => e.name === 'server.region.rendered');
+		const seeds = ev.filter((e) => e.name === 'server.seed.injected');
+		const caps = ev.filter((e) => e.name === 'server.capability.minted');
+		const propsBytes = renders.reduce((s, r) => s + (r.propsBytes || 0), 0);
+		const seedBytes = seeds.reduce((s, r) => s + (r.bytes || 0), 0);
+		return { renders, seeds, caps, propsBytes, seedBytes, total: propsBytes + seedBytes };
+	});
+</script>
+
+<h3>wire inspector — what the server shipped to this page</h3>
+
+{#if model.renders.length === 0 && model.seeds.length === 0 && model.caps.length === 0}
+	<div class="muted">
+		no server crossings recorded — needs a devtools build (the handle's side-channel feeds this).
+	</div>
+{:else}
+	<div class="sec">islands · props payload</div>
+	<table>
+		<thead><tr><th>island</th><th>mode</th><th>fp</th><th>props</th></tr></thead>
+		<tbody>
+			{#each model.renders as r (r.seq)}
+				<tr>
+					<td title={r.entry || ''}>
+						{#if r.entry}
+							<span class="nm">{region_name(r.entry)}</span>
+							<span class="id">{short_chunk(r.entry)}</span>
+						{:else}—{/if}
+					</td>
+					<td>{r.mode}</td>
+					<td>{r.fp || '—'}</td>
+					<td>{r.propsBytes != null ? r.propsBytes + ' B' : '—'}</td>
+				</tr>
+			{:else}
+				<tr><td colspan="4" class="muted">none</td></tr>
+			{/each}
+		</tbody>
+	</table>
+
+	<div class="sec">document seeds</div>
+	<table>
+		<thead><tr><th>seed</th><th>bytes</th></tr></thead>
+		<tbody>
+			{#each model.seeds as s (s.seq)}
+				<tr><td>{s.kind}</td><td>{s.bytes} B</td></tr>
+			{:else}
+				<tr><td colspan="2" class="muted">none</td></tr>
+			{/each}
+		</tbody>
+	</table>
+
+	{#if model.caps.length}
+		<div class="sec">capabilities minted (deferred holes)</div>
+		<table>
+			<thead><tr><th>id</th><th>ttl</th></tr></thead>
+			<tbody>
+				{#each model.caps as c (c.seq)}
+					<tr
+						><td title={c.id}>{short_chunk(c.id) || c.id}</td><td
+							>{c.ttl ? c.ttl + ' s' : 'no-store'}</td
+						></tr
+					>
+				{/each}
+			</tbody>
+		</table>
+	{/if}
+
+	<div class="total">
+		<span>data across the wire</span>
+		<span
+			>{kb(model.total)}
+			<span class="muted">({model.propsBytes} B props + {model.seedBytes} B seeds)</span></span
+		>
+	</div>
+{/if}
+
+<style>
+	h3 {
+		margin: 0 0 8px;
+		font-size: 12px;
+		color: #5eead4;
+	}
+	.muted {
+		color: #94a3b8;
+	}
+	.sec {
+		margin: 12px 0 4px;
+		color: #94a3b8;
+		font-weight: 600;
+	}
+	.sec:first-of-type {
+		margin-top: 0;
+	}
+	table {
+		border-collapse: collapse;
+		width: 100%;
+	}
+	th,
+	td {
+		text-align: right;
+		padding: 2px 8px;
+		white-space: nowrap;
+	}
+	th:first-child,
+	td:first-child {
+		text-align: left;
+	}
+	thead th {
+		color: #94a3b8;
+		border-bottom: 1px solid rgba(148, 163, 184, 0.2);
+	}
+	.total {
+		display: flex;
+		justify-content: space-between;
+		margin-top: 12px;
+		padding-top: 6px;
+		border-top: 1px solid rgba(148, 163, 184, 0.2);
+		color: #5eead4;
+		font-weight: 600;
+	}
+	.nm {
+		color: #e2e8f0;
+		font-weight: 600;
+	}
+	.id {
+		margin-left: 7px;
+		color: #94a3b8;
+		font-size: 10px;
+	}
+</style>

package/dist/devtools/WireTab.svelte.d.ts

@@ -0,0 +1,11 @@
+export default WireTab;
+type WireTab = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const WireTab: import("svelte").Component<{
+    tick?: number;
+}, {}, "">;
+type $$ComponentProps = {
+    tick?: number;
+};

package/dist/devtools/bytes.d.ts

@@ -0,0 +1,70 @@
+/**
+ * THE BYTE LEDGER, EXACT — each island's JavaScript from the page's own island graph (the chunk list
+ * a build writes for every island entry, `script[data-ogygia-graph]`) and the browser's byte counts
+ * per file (resource timing). Pure: the graph, the sizes and the islands in; out:
+ *
+ * - per island: its files, what they weigh, the part ONLY it needs (`unique`: what removing the
+ *   island would save) and the part it shares with other islands;
+ * - the page: every file counted once (not once per island that imports it);
+ * - the shared files, heaviest first, with the islands that use each.
+ *
+ * The runtime's own files are shared by every island and kept apart. A file the browser has not
+ * loaded yet (an island still asleep) has no size: it is counted as cold, not as zero.
+ */
+export interface LedgerIsland {
+  /** absolute entry URL (its identity: the graph's key) */
+  entry: string;
+  /** the file it loads, absolute (its content-hashed location); absent → the entry itself */
+  file?: string;
+  name: string;
+  kind: string;
+  wake: string;
+  /** copies of it on the page */
+  count: number;
+}
+export interface FileSize {
+  /** bytes over the wire (compressed) */
+  wire: number;
+  /** decoded bytes */
+  raw: number;
+}
+export interface LedgerRow {
+  entry: string;
+  name: string;
+  kind: string;
+  wake: string;
+  count: number;
+  /** files its code needs (the entry and its chunks; not the runtime's) */
+  files: number;
+  /** the loaded ones' wire bytes */
+  wire: number;
+  /** only this island needs these (what removing it would save) */
+  unique: number;
+  /** shared with at least one other island on the page */
+  shared: number;
+  /** files not loaded yet (it is asleep): no size known */
+  cold: number;
+  /** the files themselves (their URLs): an island's card matches them against the modules loaded twice */
+  urls?: string[];
+}
+export interface Ledger {
+  rows: LedgerRow[];
+  /** every file once: the islands' and the runtime's */
+  page: {
+    files: number;
+    wire: number;
+    raw: number;
+    cold: number;
+  };
+  runtime: {
+    files: number;
+    wire: number;
+  };
+  /** shared files, heaviest first, with who uses them */
+  shared: {
+    url: string;
+    wire: number;
+    users: string[];
+  }[];
+}
+export declare function byte_ledger(islands: readonly LedgerIsland[], graph: ReadonlyMap<string, readonly string[]>, size: (url: string) => FileSize | null, runtime: readonly string[]): Ledger;

package/dist/devtools/bytes.js

@@ -0,0 +1,82 @@
+// src/devtools/bytes.ts
+function byte_ledger(islands, graph, size, runtime) {
+	const runtime_set = new Set(runtime);
+	const files_of = /* @__PURE__ */ new Map();
+	const users = /* @__PURE__ */ new Map();
+	for (const i of islands) {
+		if (files_of.has(i.entry)) continue;
+		const list = [.../* @__PURE__ */ new Set([i.file ?? i.entry, ...graph.get(i.entry) ?? []])].filter((u) => !runtime_set.has(u));
+		files_of.set(i.entry, list);
+		for (const u of list) (users.get(u) ?? users.set(u, /* @__PURE__ */ new Set()).get(u)).add(i.entry);
+	}
+	const name_of = new Map(islands.map((i) => [i.entry, i.name]));
+	const rows = [];
+	const seen = /* @__PURE__ */ new Set();
+	for (const i of islands) {
+		if (seen.has(i.entry)) continue;
+		seen.add(i.entry);
+		const list = files_of.get(i.entry);
+		let wire = 0;
+		let unique = 0;
+		let shared = 0;
+		let cold = 0;
+		for (const u of list) {
+			const s = size(u);
+			if (!s) {
+				cold++;
+				continue;
+			}
+			wire += s.wire;
+			if ((users.get(u)?.size ?? 0) > 1) shared += s.wire;
+			else unique += s.wire;
+		}
+		rows.push({
+			entry: i.entry,
+			name: i.name,
+			kind: i.kind,
+			wake: i.wake,
+			count: i.count,
+			files: list.length,
+			wire,
+			unique,
+			shared,
+			cold,
+			urls: list
+		});
+	}
+	rows.sort((a, b) => b.unique - a.unique || b.wire - a.wire);
+	let page_wire = 0;
+	let page_raw = 0;
+	let page_cold = 0;
+	const all = /* @__PURE__ */ new Set([...users.keys(), ...runtime]);
+	for (const u of all) {
+		const s = size(u);
+		if (!s) page_cold++;
+		else {
+			page_wire += s.wire;
+			page_raw += s.raw;
+		}
+	}
+	let runtime_wire = 0;
+	for (const u of runtime) runtime_wire += size(u)?.wire ?? 0;
+	const shared = [...users].filter(([, who]) => who.size > 1).map(([url, who]) => ({
+		url,
+		wire: size(url)?.wire ?? 0,
+		users: [...who].map((e) => name_of.get(e) ?? e)
+	})).filter((s) => s.wire > 0).sort((a, b) => b.wire - a.wire);
+	return {
+		rows,
+		page: {
+			files: all.size,
+			wire: page_wire,
+			raw: page_raw,
+			cold: page_cold
+		},
+		runtime: {
+			files: runtime.length,
+			wire: runtime_wire
+		},
+		shared
+	};
+}
+export { byte_ledger };

package/dist/devtools/cache-headers.d.ts

@@ -0,0 +1,20 @@
+import { StylesFinding } from "./styles.js";
+export interface CacheProbe {
+  url: string;
+  /** the island's name, or "the runtime" */
+  name: string;
+  cache_control: string | null;
+  /** decoded bytes, when the browser loaded the file */
+  bytes: number;
+}
+/** Read one `cache-control`: whether it caches the file long enough to count. Split, not a regex. */
+export declare function cached_long(cache_control: string | null): boolean;
+/** Every content-named file the page loads (the islands' locations, the runtime's), each once. */
+export declare function content_named_files(doc?: Document): {
+  url: string;
+  name: string;
+}[];
+/** Ask the server how it caches each file (HEAD, past the browser's cache), at most `limit` files. */
+export declare function probe_cache(doc?: Document, limit?: number): Promise<CacheProbe[]>;
+/** The finding: content-named files the host does not cache long, named, with the bytes at stake. */
+export declare function cache_findings(probes: readonly CacheProbe[]): StylesFinding[];