@ogygia/devtools 0.0.0-stage → 0.11.0

package/dist/devtools/HubTab.svelte

@@ -0,0 +1,206 @@
+<!-- (its CSS injected into the dock's shadow root: see Devtools.svelte) -->
+<svelte:options css="injected" />
+
+<script>
+	/**
+	 * The Hub tab (hub inspector, internal/notes/devtools.md, Rung 5 · 6): ogygia's identity spine made
+	 * visible. Every transportable that crosses an island boundary — a wired class, a store, a snippet,
+	 * a held region, a hoisted fn — is a hub Ref with one id, and the browser MEMOIZES decode by id so
+	 * N islands holding the same handle REUNITE on ONE live instance. This tab shows that: per id, its
+	 * kind, how many times it was resolved (= how many carriers picked it up), and how many of those
+	 * were REUNIONS (a memo hit returning the existing instance vs a first fresh decode). Plus the
+	 * dispose reaping that runs on navigation. Reads hub.mint / hub.resolve / hub.dispose off the bus.
+	 */
+	import { snapshot } from '@ogygia/core/events';
+
+	let { tick = 0 } = $props();
+
+	// A transportable's registration tag is `<module path>#<ExportName>` — the class/const name is the
+	// part after `#`. That's the human label; the id is a mint hash (fall back to it when untagged).
+	function short_id(id) {
+		return id && id.length > 12 ? id.slice(0, 8) + '…' : id;
+	}
+	function name_of(m) {
+		if (m.tag) return m.tag.split('#').pop() || m.tag;
+		return short_id(m.id);
+	}
+
+	// Kind → colour, so wire / store / snippet / region / fn read at a glance.
+	const KIND = {
+		wire: '#14b8a6',
+		store: '#8b5cf6',
+		snippet: '#f59e0b',
+		region: '#38bdf8',
+		fn: '#ec4899'
+	};
+
+	const model = $derived.by(() => {
+		void tick; // refresh with the panel tick
+		const ev = snapshot();
+		const byId = new Map();
+		const get = (id) => {
+			let m = byId.get(id);
+			if (!m) byId.set(id, (m = { id, kind: '', tag: '', scope: '', resolves: 0, reunions: 0 }));
+			return m;
+		};
+		for (const e of ev) {
+			if (e.name === 'hub.mint') {
+				const m = get(e.id);
+				m.kind = e.kind;
+				if (e.tag) m.tag = e.tag;
+			} else if (e.name === 'hub.resolve') {
+				const m = get(e.id);
+				if (!m.kind) m.kind = e.kind;
+				if (e.tag && !m.tag) m.tag = e.tag; // wire tag rides the client decode (mint is server-only)
+				m.scope = e.scope;
+				m.resolves++;
+				if (e.hit) m.reunions++;
+			}
+		}
+		// Shared instances (reunited at least once) first — they ARE the story — then by carrier count.
+		const rows = [...byId.values()].sort(
+			(a, b) => b.reunions - a.reunions || b.resolves - a.resolves
+		);
+		const shared = rows.filter((r) => r.reunions > 0).length;
+		const disposes = ev.filter((e) => e.name === 'hub.dispose');
+		return { rows, shared, disposes };
+	});
+</script>
+
+<div class="cap">
+	hub inspector <span class="muted">· one live object, shared across islands by identity</span>
+</div>
+
+{#if model.rows.length === 0}
+	<div class="muted">
+		no hub activity on this page. Visit a page with a wired class / store / held region (e.g.
+		<b>/transportable</b> or <b>/lab/wire</b>) — then reopen this tab.
+	</div>
+{:else}
+	{#if model.shared > 0}
+		<div class="hero">
+			<b>{model.shared}</b> shared live object{model.shared === 1 ? '' : 's'} — each held by several islands
+			but decoded ONCE, so every holder reunites on the same instance.
+		</div>
+	{/if}
+	<table>
+		<thead>
+			<tr><th>object</th><th>kind</th><th>scope</th><th>held&nbsp;by</th><th>reunited</th></tr>
+		</thead>
+		<tbody>
+			{#each model.rows as r (r.id)}
+				<tr class:shared={r.reunions > 0}>
+					<td title={r.tag || r.id}><span class="nm">{name_of(r)}</span></td>
+					<td>
+						<span class="dot" style:background={KIND[r.kind] || '#64748b'}></span>{r.kind || '—'}
+					</td>
+					<td class="muted">{r.scope || '—'}</td>
+					<td>{r.resolves}×</td>
+					<td>
+						{#if r.reunions > 0}
+							<span class="badge"
+								>1 instance · {r.reunions} reunion{r.reunions === 1 ? '' : 's'}</span
+							>
+						{:else}<span class="muted">fresh</span>{/if}
+					</td>
+				</tr>
+			{/each}
+		</tbody>
+	</table>
+	<div class="note muted">
+		<b>held by</b> = how many carriers (islands) picked this handle up. <b>reunited</b> = a memo hit returning
+		the existing live instance instead of decoding a fresh one — the reunification that makes N islands
+		share ONE reactive object.
+	</div>
+
+	{#if model.disposes.length}
+		<div class="sec">dispose (nav teardown)</div>
+		<table>
+			<thead><tr><th>scope</th><th>instances</th></tr></thead>
+			<tbody>
+				{#each model.disposes as d (d.seq)}
+					<tr><td>{d.scope}</td><td>{d.count}</td></tr>
+				{/each}
+			</tbody>
+		</table>
+	{/if}
+{/if}
+
+<style>
+	.cap {
+		font-size: 12px;
+		color: #5eead4;
+		margin-bottom: 8px;
+	}
+	.muted {
+		color: #94a3b8;
+	}
+	.muted b {
+		color: #94a3b8;
+	}
+	.hero {
+		margin-bottom: 10px;
+		padding: 7px 10px;
+		border-radius: 8px;
+		background: rgba(20, 184, 166, 0.1);
+		border: 1px solid rgba(20, 184, 166, 0.25);
+		color: #cbd5e1;
+		line-height: 1.5;
+	}
+	.hero b {
+		color: #5eead4;
+		font-size: 13px;
+	}
+	table {
+		border-collapse: collapse;
+		width: 100%;
+	}
+	th,
+	td {
+		text-align: right;
+		padding: 3px 8px;
+		white-space: nowrap;
+	}
+	th:first-child,
+	td:first-child,
+	th:nth-child(2),
+	td:nth-child(2) {
+		text-align: left;
+	}
+	thead th {
+		color: #94a3b8;
+		border-bottom: 1px solid rgba(148, 163, 184, 0.2);
+	}
+	.nm {
+		color: #e2e8f0;
+		font-weight: 600;
+	}
+	.dot {
+		display: inline-block;
+		width: 8px;
+		height: 8px;
+		border-radius: 50%;
+		margin-right: 6px;
+		vertical-align: 0;
+	}
+	tr.shared td {
+		background: rgba(20, 184, 166, 0.08);
+	}
+	.badge {
+		margin-left: 6px;
+		padding: 0 6px;
+		border-radius: 999px;
+		font-size: 10px;
+		background: rgba(20, 184, 166, 0.18);
+		color: #5eead4;
+	}
+	.note {
+		margin-top: 8px;
+		line-height: 1.5;
+	}
+	.sec {
+		margin: 12px 0 4px;
+		color: #94a3b8;
+		font-weight: 600;
+	}
+</style>

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

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

package/dist/devtools/HydrationTab.svelte

@@ -0,0 +1,237 @@
+<!-- (its CSS injected into the dock's shadow root: see Devtools.svelte) -->
+<svelte:options css="injected" />
+
+<script>
+	/**
+	 * The Hydration tab: did every island wake from its server markup, and if not, what differed.
+	 * Per island: failed (threw), recovered (Svelte threw the server DOM away and rendered again),
+	 * healed (another script edited it before it woke; the runtime put the server markup back),
+	 * changed (the browser's first render differs from the server's), clean, or still asleep — with
+	 * the runtime's own reason, and for a changed one the diff of server markup against the browser's
+	 * (html-diff.ts). Hover a row: the island lights up. Sources: the bus (failed / recovered /
+	 * healed events), the beacon's before/after markup, the element's `data-og-recovered` reason.
+	 */
+	import { hydration_rows, STATUS_RANK as RANK } from './hydration.js';
+	import { html_diff } from '@ogygia/core/insights';
+	import { highlight, clear_highlight } from './highlight.js';
+	import { onMount } from 'svelte';
+
+	let { tick = 0, selected = $bindable(null) } = $props();
+	// a row with a difference to show opens it; any other row opens the island's card (a click that
+	// did nothing on 8 of 9 rows is what the press-everything sweep found)
+	function press(/** @type {{ el: Element; snap?: unknown; status: string }} */ r) {
+		if (r.snap && r.status !== 'clean') open_el = open_el === r.el ? null : r.el;
+		else selected = r.el;
+	}
+	// (by element: two copies of one island with the same props share a fingerprint)
+	let open_el = $state(/** @type {Element | null} */ (null));
+
+	const LABEL = {
+		failed: 'failed',
+		recovered: 'recovered',
+		healed: 'healed',
+		changed: 'markup changed',
+		asleep: 'asleep',
+		clean: 'clean'
+	};
+
+	const model = $derived.by(() => {
+		void tick;
+		const { rows, measured } = hydration_rows();
+		const counts = {};
+		for (const r of rows) counts[r.status] = (counts[r.status] ?? 0) + 1;
+		return { rows, counts, measured };
+	});
+
+	const diff = $derived.by(() => {
+		const r = model.rows.find((x) => x.el === open_el);
+		return r?.snap ? html_diff(r.snap.ssr, r.snap.hydrated) : null;
+	});
+
+	onMount(() => () => clear_highlight());
+</script>
+
+<div class="hy" data-og-hydration>
+	<div class="cap">
+		hydration <span class="muted">· did each island wake from its server markup</span>
+	</div>
+	<div class="counts">
+		{#each Object.keys(RANK) as s (s)}
+			{#if model.counts[s]}<span class="badge {s}">{LABEL[s]} {model.counts[s]}</span>{/if}
+		{/each}
+	</div>
+	{#if !model.measured}
+		<p class="muted">
+			The browser's before/after markup needs a measured page load (in a build: open devtools, then
+			reload).
+		</p>
+	{/if}
+
+	<table>
+		<tbody>
+			{#each model.rows as r (r.el)}
+				<tr
+					class="row {r.status}"
+					data-status={r.status}
+					onmouseenter={() => highlight([r.el], `${r.name} — ${LABEL[r.status]}`)}
+					onmouseleave={() => clear_highlight()}
+					onclick={() => press(r)}
+					title={r.snap && r.status !== 'clean' ? 'show the difference' : "open the island's card"}
+				>
+					<td><span class="badge {r.status}">{LABEL[r.status]}</span></td>
+					<!-- the name is a button: Tab reaches the row, Enter presses it (the press bubbles to the row) -->
+					<td class="nm"
+						><button
+							class="rowbtn"
+							onfocus={() => highlight([r.el], `${r.name} — ${LABEL[r.status]}`)}
+							onblur={() => clear_highlight()}>{r.name}</button
+						><span class="muted"> {r.wake}</span></td
+					>
+					<td class="why" title={r.reason}
+						>{r.reason}{#if r.snap && r.status !== 'clean'}<span class="muted">
+								· click for the difference</span
+							>{/if}</td
+					>
+				</tr>
+				{#if open_el === r.el && diff}
+					<tr class="diffrow">
+						<td colspan="3">
+							<p class="muted">
+								server markup against the browser's first render: <b class="del">−{diff.removed}</b>
+								<b class="add">+{diff.added}</b>
+								pieces{diff.partial ? ' (too many changes: only where they start)' : ''}
+							</p>
+							{#if r.snap?.from !== undefined}<p class="muted" data-og-hyd-window>
+									A big island: this is the part around its first change, about {Math.round(
+										r.snap.from / 1024
+									)} KB into its markup — later changes are not shown.
+								</p>{/if}
+							{#each diff.hunks as h, i (i)}
+								<div class="hunk">
+									{#each h.ops as o, k (k)}<span class={o.op}>{o.text}</span>{/each}
+								</div>
+							{/each}
+							{#if !diff.hunks.length}<p class="muted">
+									No visible difference (only Svelte's markers moved).
+								</p>{/if}
+						</td>
+					</tr>
+				{/if}
+			{:else}
+				<tr><td class="muted">no islands on this page</td></tr>
+			{/each}
+		</tbody>
+	</table>
+</div>
+
+<style>
+	.hy {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+	.cap {
+		font-size: 12px;
+		color: #5eead4;
+	}
+	.muted {
+		color: #94a3b8;
+	}
+	.counts {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 5px;
+	}
+	.badge {
+		display: inline-block;
+		font-size: 10px;
+		padding: 1px 7px;
+		border-radius: 999px;
+		border: 1px solid rgba(148, 163, 184, 0.3);
+		white-space: nowrap;
+	}
+	.badge.failed,
+	.badge.recovered {
+		background: rgba(239, 68, 68, 0.18);
+		color: #fca5a5;
+		border-color: rgba(239, 68, 68, 0.4);
+	}
+	.badge.healed,
+	.badge.changed {
+		background: rgba(245, 158, 11, 0.16);
+		color: #fcd34d;
+		border-color: rgba(245, 158, 11, 0.4);
+	}
+	.badge.clean {
+		color: #86efac;
+		border-color: rgba(34, 197, 94, 0.35);
+	}
+	.badge.asleep {
+		color: #94a3b8;
+	}
+	table {
+		border-collapse: collapse;
+		width: 100%;
+	}
+	td {
+		padding: 3px 4px;
+		border-bottom: 1px solid rgba(148, 163, 184, 0.08);
+		vertical-align: top;
+	}
+	.row {
+		cursor: pointer;
+	}
+	.row:hover td {
+		background: rgba(148, 163, 184, 0.08);
+	}
+	.nm {
+		white-space: nowrap;
+	}
+	/* a button that reads as the name it was */
+	.rowbtn {
+		all: unset;
+		cursor: pointer;
+	}
+	.rowbtn:focus-visible {
+		outline: 2px solid rgba(94, 234, 212, 0.7);
+		outline-offset: 2px;
+		border-radius: 3px;
+	}
+	.why {
+		color: #cbd5e1;
+		max-width: 320px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.diffrow td {
+		background: rgba(15, 23, 42, 0.6);
+	}
+	.hunk {
+		font-size: 10.5px;
+		line-height: 1.6;
+		padding: 5px 7px;
+		margin: 4px 0;
+		border-radius: 6px;
+		background: rgba(148, 163, 184, 0.06);
+		word-break: break-all;
+	}
+	.hunk .same {
+		color: #94a3b8;
+	}
+	.hunk .del {
+		background: rgba(239, 68, 68, 0.22);
+		color: #fecaca;
+		text-decoration: line-through;
+	}
+	.hunk .add {
+		background: rgba(34, 197, 94, 0.2);
+		color: #bbf7d0;
+	}
+	b.del {
+		color: #fca5a5;
+	}
+	b.add {
+		color: #86efac;
+	}
+</style>

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

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