effect-inspect 0.1.0

package/app/dist/server/assets/routes-eZ4XqxE9.js

@@ -0,0 +1,3999 @@
+import { a as CollapseButton, c as PanelHeader, i as themeAtom, l as usePanel, n as DEFAULT_THEME, o as CollapsedRail, r as resolvedThemeAtom, s as Empty$1, u as Button } from "./router-CN98Ramo.js";
+import { useCallback, useContext, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { FilterX, Monitor, Moon, MousePointerClick, PlugZap, Radio, SearchX, Sun, X } from "lucide-react";
+import { RegistryContext, useAtom, useAtomMount, useAtomValue } from "@effect/atom-react";
+import { Atom } from "effect/unstable/reactivity";
+import { Data, Result, Schema } from "effect";
+//#region app/src/chart/Layout.ts
+var EMPTY$1 = {
+	version: -1,
+	rows: [],
+	rowOf: /* @__PURE__ */ new Map(),
+	duration: 0,
+	ordered: []
+};
+/** Effective end of a span: open spans run to `now` (the trace's right edge). */
+var spanEnd = (span, now) => span.end ?? now;
+/**
+* Returns a layout for the store's current version, reusing `previous` when
+* nothing has changed.
+*
+* **A span's row is final once assigned.** `previous.rowOf` is carried over
+* verbatim and only spans the previous layout never saw are packed. A late
+* arrival that fits nowhere takes a new row rather than repacking what the
+* user is already looking at — under a live trace, rows never reshuffle.
+*
+* The cost is deliberate and one-directional: a trace watched live can end up
+* taller than the same trace loaded from scratch, because a gap that opens up
+* later is never reclaimed. Visual stability beats vertical compactness.
+*/
+var layout = (store, previous = EMPTY$1) => {
+	if (previous.version === store.version) return previous;
+	const duration = store.stats().duration;
+	const ordered = [];
+	for (const ids of store.rows) for (const id of ids) {
+		const span = store.spans.get(id);
+		if (span !== void 0) ordered.push(span);
+	}
+	ordered.sort((a, b) => a.start - b.start || a.depth - b.depth);
+	const spansByRow = [];
+	const freeFrom = [];
+	const pinned = [];
+	const rowOf = /* @__PURE__ */ new Map();
+	const claim = (row, span, isPinned) => {
+		while (spansByRow.length <= row) {
+			spansByRow.push([]);
+			freeFrom.push(Number.NEGATIVE_INFINITY);
+			pinned.push([]);
+		}
+		const to = spanEnd(span, duration);
+		spansByRow[row].push(span);
+		if (isPinned) pinned[row].push({
+			from: span.start,
+			to
+		});
+		else if (to > freeFrom[row]) freeFrom[row] = to;
+		rowOf.set(span.spanId, row);
+	};
+	/** True when a span spanning `[from, to)` can be drawn on `row` untouched. */
+	const fits = (row, from, to) => {
+		if (row >= spansByRow.length) return true;
+		if (freeFrom[row] > from) return false;
+		return !pinned[row].some((i) => i.from < to && from < i.to);
+	};
+	if (ordered.length >= previous.ordered.length) for (const span of ordered) {
+		const pinnedRow = previous.rowOf.get(span.spanId);
+		if (pinnedRow !== void 0) claim(pinnedRow, span, true);
+	}
+	const rowFor = (span) => {
+		const parentRow = span.parentId === void 0 ? void 0 : rowOf.get(span.parentId);
+		const from = span.start;
+		const to = spanEnd(span, duration);
+		let row = parentRow === void 0 ? 0 : parentRow + 1;
+		while (!fits(row, from, to)) row++;
+		return row;
+	};
+	for (const span of ordered) {
+		if (rowOf.has(span.spanId)) continue;
+		claim(rowFor(span), span, false);
+	}
+	const rows = spansByRow.map((spans) => {
+		spans.sort((a, b) => a.start - b.start);
+		const maxEnd = new Float64Array(spans.length);
+		let running = Number.NEGATIVE_INFINITY;
+		for (let i = 0; i < spans.length; i++) {
+			const end = spanEnd(spans[i], duration);
+			if (end > running) running = end;
+			maxEnd[i] = running;
+		}
+		return {
+			spans,
+			maxEnd
+		};
+	});
+	return {
+		version: store.version,
+		rows,
+		rowOf,
+		duration,
+		ordered
+	};
+};
+var emptyLayout = () => EMPTY$1;
+/**
+* Index of the first span in `row` that can intersect `[from, to]`.
+*
+* Binary searches the prefix-maximum of end times: everything before the
+* result ends strictly before `from`, so it is safely skipped. Returns
+* `row.spans.length` when nothing intersects.
+*/
+var firstVisible = (row, from) => {
+	let lo = 0;
+	let hi = row.spans.length;
+	while (lo < hi) {
+		const mid = lo + hi >>> 1;
+		if (row.maxEnd[mid] < from) lo = mid + 1;
+		else hi = mid;
+	}
+	return lo;
+};
+/**
+* Walks the spans of `row` intersecting `[from, to]`, in start order.
+*
+* Stops as soon as a span starts after `to` — the row is start-sorted, so
+* everything after it starts later still.
+*/
+var forEachVisible = (row, from, to, now, visit) => {
+	for (let i = firstVisible(row, from); i < row.spans.length; i++) {
+		const span = row.spans[i];
+		if (span.start > to) return;
+		if (spanEnd(span, now) >= from) visit(span);
+	}
+};
+//#endregion
+//#region app/src/chart/metrics.ts
+/** Span timing derived the same way for the chart, the tooltip, the log and the drawer. */
+/**
+* Time covered by the union of `span`'s direct children, clipped to `[from, to]`.
+*
+* A **union**, not a sum: two children running concurrently for 10ms each
+* occupy 10ms of their parent, not 20ms. Summing would make a heavily
+* concurrent span's self time read as zero (or negative, and clamp to zero),
+* which is exactly the number the aggregation tabs are built to show.
+*
+* Children are sorted by start and swept once, so this is O(k log k) in the
+* number of direct children — not in the subtree, and never in the trace.
+*/
+var childUnion = (store, span, now, from, to) => {
+	const intervals = [];
+	for (const id of span.children) {
+		const child = store.spans.get(id);
+		if (child === void 0) continue;
+		const lo = Math.max(child.start, from);
+		const hi = Math.min(spanEnd(child, now), to);
+		if (hi > lo) intervals.push([lo, hi]);
+	}
+	if (intervals.length === 0) return 0;
+	intervals.sort((a, b) => a[0] - b[0]);
+	let covered = 0;
+	let [runStart, runEnd] = intervals[0];
+	for (let i = 1; i < intervals.length; i++) {
+		const [lo, hi] = intervals[i];
+		if (lo > runEnd) {
+			covered += runEnd - runStart;
+			runStart = lo;
+			runEnd = hi;
+		} else if (hi > runEnd) runEnd = hi;
+	}
+	return covered + (runEnd - runStart);
+};
+/**
+* Total and self time for a span, in millis.
+*
+* Self time is the span's own duration minus the time covered by its direct
+* children. `from`/`to` clip both to a time window, which is how the
+* aggregation tabs follow the viewport the way Chrome does: a span half inside
+* the window contributes only its visible half, and only the child time that
+* overlaps that half is subtracted.
+*/
+var timings = (store, span, now, from = -Infinity, to = Infinity) => {
+	const lo = Math.max(span.start, from);
+	const hi = Math.min(spanEnd(span, now), to);
+	if (hi <= lo) return {
+		total: 0,
+		self: 0
+	};
+	return {
+		total: hi - lo,
+		self: Math.max(hi - lo - childUnion(store, span, now, lo, hi), 0)
+	};
+};
+//#endregion
+//#region app/src/chart/selection.ts
+/**
+* The one selection model, shared by the flame chart and the event log.
+*
+* Both views read and write **these** atoms; neither holds a selection of its
+* own that it then syncs. That is the difference between "selection-synced"
+* and "two views of one value" — the latter cannot drift.
+*
+* These hold span **ids**, not spans: a span object is mutable and can be
+* re-depthed by a late-arriving parent, so holding a reference would pin a
+* stale depth. Both views resolve the id against `traceStore` at read time.
+*/
+/** The clicked span, or `undefined`. Drives the detail panel and both views' highlight. */
+var selectedSpanIdAtom = Atom.make(void 0);
+/** The span under the cursor, or `undefined`. Written by whichever view is hovered. */
+var hoveredSpanIdAtom = Atom.make(void 0);
+/** Free-text span-name filter. Non-matching spans are dimmed in both views. */
+var filterAtom = Atom.make("");
+/** Whether the filter hides non-matching spans outright rather than dimming them. */
+var filterHidesAtom = Atom.make(false);
+/**
+* Case-insensitive substring match, with an empty filter matching everything.
+*
+* Substring rather than fuzzy or regex: Chrome's own filter is a substring
+* match, and a regex in a per-frame draw loop is a performance trap.
+*/
+var matches = (name, filter) => filter === "" || name.toLowerCase().includes(filter);
+/**
+* Whether the memory track is collapsed away.
+*
+* Lives here rather than in the renderer because the toggle is DOM chrome and
+* the track is canvas; an atom is the seam they already share. Collapsed means
+* the track takes zero height, which is the same thing a session with no
+* samples gets — so there is only one "no track" code path.
+*/
+var memoryCollapsedAtom = Atom.make(false);
+//#endregion
+//#region app/src/chart/aggregate.ts
+/**
+* The drawer's aggregation trio: Summary, Bottom-up and Call tree.
+*
+* All three are presentations of one computation — **self time**, a span's
+* duration minus the union of its children's (see `metrics.ts`) — so they are
+* built here together from a single pass rather than three times over.
+*
+* Two rules they all share, both Chrome's:
+* - **Aggregate the visible range, not the whole trace.** A span is clipped to
+*   the viewport, so a span half on screen contributes half its time.
+* - **Group by name.** Two `db.query` spans are one row; individual spans are
+*   the flame chart's job.
+*
+* Rebuilt when the viewport, the filter or `store.version` changes — never per
+* frame. The drawer is not in the chart's draw path at all.
+*/
+var EMPTY = {
+	summary: [],
+	callTree: [],
+	bottomUp: [],
+	timings: []
+};
+var bucket = (id, name, spanId) => ({
+	id,
+	name,
+	count: 0,
+	total: 0,
+	self: 0,
+	failed: false,
+	spanId,
+	children: /* @__PURE__ */ new Map()
+});
+var add = (into, timing, self) => {
+	into.count += 1;
+	into.total += timing.total;
+	into.self += self;
+	if (timing.span.outcome?._tag === "Failure") into.failed = true;
+};
+/**
+* Lookup-or-create a child, keyed by name so recursive calls merge into one node.
+*
+* Paths join segments with NUL: it cannot occur in a span name, so it cannot collide with one.
+*/
+var descend = (children, path, name, spanId) => {
+	const existing = children.get(name);
+	if (existing !== void 0) return existing;
+	const made = bucket(path === "" ? name : `${path}\0${name}`, name, spanId);
+	children.set(name, made);
+	return made;
+};
+/** Heaviest first, by whichever measure the tree is ordered on. */
+var freeze = (source, by) => [...source].sort((a, b) => b[by] - a[by] || a.name.localeCompare(b.name)).map((node) => ({
+	id: node.id,
+	name: node.name,
+	count: node.count,
+	total: node.total,
+	self: node.self,
+	failed: node.failed,
+	spanId: node.spanId,
+	children: freeze(node.children.values(), by)
+}));
+/**
+* Builds all three views for the spans visible in `[from, to]`.
+*
+* `hides` mirrors the chart's "hide non-matching" toggle: set, a non-matching
+* span is excluded from the aggregation entirely; clear, the filter only marks
+* rows and every span still counts, so the numbers keep adding up to the trace.
+*/
+var aggregate = (store, from, to, filter, hides) => {
+	const now = store.stats().duration;
+	const needle = filter.toLowerCase();
+	const visible = [];
+	for (const span of store.spans.values()) {
+		if (hides && !matches(span.name, needle)) continue;
+		const { total, self } = timings(store, span, now, from, to);
+		if (total <= 0) continue;
+		visible.push({
+			span,
+			total,
+			self
+		});
+	}
+	if (visible.length === 0) return EMPTY;
+	visible.sort((a, b) => a.span.start - b.span.start);
+	const byName = /* @__PURE__ */ new Map();
+	for (const timing of visible) add(descend(byName, "", timing.span.name, timing.span.spanId), timing, timing.self);
+	const summary = [...byName.values()].sort((a, b) => b.self - a.self || a.name.localeCompare(b.name)).map((row) => ({
+		name: row.name,
+		count: row.count,
+		total: row.total,
+		self: row.self,
+		average: row.total / row.count,
+		failed: row.failed,
+		spanId: row.spanId
+	}));
+	const included = new Set(visible.map((timing) => timing.span.spanId));
+	const chains = /* @__PURE__ */ new Map();
+	const chain = (span) => {
+		const cached = chains.get(span.spanId);
+		if (cached !== void 0) return cached;
+		const parentId = span.parentId;
+		const parent = parentId === void 0 ? void 0 : store.spans.get(parentId);
+		const built = parent === void 0 || !included.has(parent.spanId) ? [span] : [...chain(parent), span];
+		chains.set(span.spanId, built);
+		return built;
+	};
+	const callRoots = /* @__PURE__ */ new Map();
+	const bottomRoots = /* @__PURE__ */ new Map();
+	for (const timing of visible) {
+		const ancestry = chain(timing.span);
+		let node = descend(callRoots, "", ancestry[0].name, ancestry[0].spanId);
+		for (let i = 1; i < ancestry.length; i++) node = descend(node.children, node.id, ancestry[i].name, ancestry[i].spanId);
+		add(node, timing, timing.self);
+		let caller = descend(bottomRoots, "", timing.span.name, timing.span.spanId);
+		add(caller, timing, timing.self);
+		for (let i = ancestry.length - 2; i >= 0; i--) {
+			caller = descend(caller.children, caller.id, ancestry[i].name, ancestry[i].spanId);
+			add(caller, timing, timing.self);
+		}
+	}
+	return {
+		summary,
+		callTree: freeze(callRoots.values(), "total"),
+		bottomUp: freeze(bottomRoots.values(), "self"),
+		timings: visible
+	};
+};
+//#endregion
+//#region src/protocol/Schema.ts
+/**
+* The effect-inspect wire protocol.
+*
+* Three unions: {@link ClientMessage} (instrumented program → collector),
+* {@link CollectorMessage} (collector → instrumented program) and
+* {@link WebappMessage} (collector → webapp).
+*
+* Informed by `effect/devtools/DevToolsSchema` but deliberately different:
+* spans are delta-encoded as `SpanStart` / `SpanEnd` rather than a full span
+* snapshot re-sent on end, every message carries a `sessionId`, and attribute
+* values are a bounded {@link Json} union instead of `Schema.Any`.
+*/
+/**
+* Monotonic nanosecond timestamp, matching `Tracer.Span#startTime`.
+*
+* Carried as a decimal string on the wire because JSON numbers cannot hold
+* nanos without precision loss.
+*/
+var Timestamp = Schema.BigIntFromString;
+var Json = Schema.Union([
+	Schema.String,
+	Schema.Finite,
+	Schema.Boolean,
+	Schema.Null,
+	Schema.Array(Schema.suspend(() => Json)),
+	Schema.Record(Schema.String, Schema.suspend(() => Json))
+]);
+/** Span attributes, log annotations, and metric/event attributes. */
+var Attributes = Schema.Record(Schema.String, Json);
+/** Identifies one run of an instrumented program. */
+var SessionId = Schema.String;
+var sessionId = { sessionId: SessionId };
+/** Mirrors `Tracer.SpanKind`. */
+var SpanKind = Schema.Literals([
+	"internal",
+	"server",
+	"client",
+	"producer",
+	"consumer"
+]);
+/** Mirrors `LogLevel.LogLevel`. */
+var LogLevel = Schema.Literals([
+	"All",
+	"Fatal",
+	"Error",
+	"Warn",
+	"Info",
+	"Debug",
+	"Trace",
+	"None"
+]);
+/**
+* Wall-clock anchor for a session's monotonic clock.
+*
+* `startTime` is nanos from the same monotonic source as span times;
+* `wallClockEpochMillis` is `Date.now()` sampled at the same instant. Together
+* they let the webapp render absolute times and align sessions with each other.
+*/
+var Clock = Schema.Struct({
+	startTime: Timestamp,
+	wallClockEpochMillis: Schema.Natural
+});
+/** First message on a client connection; opens the session. */
+var Hello = Schema.Struct({
+	_tag: Schema.tag("Hello"),
+	...sessionId,
+	program: Schema.String,
+	pid: Schema.Natural,
+	runtime: Schema.String,
+	protocolVersion: Schema.Natural,
+	clock: Clock
+});
+/**
+* A span parent that lives outside this session's span tree — propagated from
+* another tracing system, so the collector has ids but no span body.
+*/
+var ExternalParent = Schema.Struct({
+	_tag: Schema.tag("ExternalParent"),
+	spanId: Schema.String,
+	traceId: Schema.String,
+	sampled: Schema.Boolean
+});
+/** A span parent within this session, referenced by id only. */
+var LocalParent = Schema.Struct({
+	_tag: Schema.tag("LocalParent"),
+	spanId: Schema.String
+});
+var SpanParent = Schema.Union([LocalParent, ExternalParent]);
+/**
+* A span opened. Sent once, when the span starts — never re-sent.
+*
+* `parent` is absent for a root span.
+*/
+var SpanStart = Schema.Struct({
+	_tag: Schema.tag("SpanStart"),
+	...sessionId,
+	spanId: Schema.String,
+	traceId: Schema.String,
+	parent: Schema.optional(SpanParent),
+	name: Schema.String,
+	kind: SpanKind,
+	startTime: Timestamp,
+	attributes: Attributes,
+	sampled: Schema.Boolean,
+	fiberId: Schema.optional(Schema.Natural)
+});
+/**
+* How a span finished.
+*
+* The full `Cause` is not carried: the webapp only needs to colour the span and
+* show a message, so the producer flattens failures to `error` (rendered
+* message) plus optional `stack`. `_tag: "Failure"` covers expected errors,
+* defects and interrupts alike, distinguished by `kind`.
+*/
+var SpanOutcomeSuccess = Schema.Struct({ _tag: Schema.tag("Success") });
+var SpanOutcomeFailure = Schema.Struct({
+	_tag: Schema.tag("Failure"),
+	kind: Schema.Literals([
+		"Fail",
+		"Die",
+		"Interrupt"
+	]),
+	error: Schema.String,
+	stack: Schema.optional(Schema.String)
+});
+var SpanOutcome = Schema.Union([SpanOutcomeSuccess, SpanOutcomeFailure]);
+/**
+* A span closed.
+*
+* `attributes` carries only attributes added after `SpanStart` was sent; the
+* collector merges them over the ones it already has.
+*/
+var SpanEnd = Schema.Struct({
+	_tag: Schema.tag("SpanEnd"),
+	...sessionId,
+	spanId: Schema.String,
+	endTime: Timestamp,
+	outcome: SpanOutcome,
+	attributes: Attributes
+});
+/** A point-in-time event recorded against a span. */
+var SpanEvent = Schema.Struct({
+	_tag: Schema.tag("SpanEvent"),
+	...sessionId,
+	spanId: Schema.String,
+	name: Schema.String,
+	time: Timestamp,
+	attributes: Attributes
+});
+/** A log record, in the same ordered stream as spans. */
+var Log = Schema.Struct({
+	_tag: Schema.tag("Log"),
+	...sessionId,
+	time: Timestamp,
+	level: LogLevel,
+	message: Json,
+	spanId: Schema.optional(Schema.String),
+	fiberId: Schema.optional(Schema.Natural),
+	annotations: Attributes
+});
+var metric = (type, state) => Schema.Struct({
+	type: Schema.tag(type),
+	name: Schema.String,
+	description: Schema.optional(Schema.String),
+	attributes: Schema.Record(Schema.String, Schema.String),
+	state
+});
+var Counter = metric("Counter", Schema.Struct({
+	count: Schema.Natural,
+	incremental: Schema.Boolean
+}));
+var Gauge = metric("Gauge", Schema.Struct({ value: Schema.Finite }));
+var Histogram = metric("Histogram", Schema.Struct({
+	buckets: Schema.Array(Schema.Tuple([Schema.Finite, Schema.Natural])),
+	count: Schema.Natural,
+	min: Schema.Finite,
+	max: Schema.Finite,
+	sum: Schema.Finite
+}));
+var Frequency = metric("Frequency", Schema.Struct({ occurrences: Schema.Record(Schema.String, Schema.Natural) }));
+var Summary$1 = metric("Summary", Schema.Struct({
+	quantiles: Schema.Array(Schema.Tuple([Schema.Finite.check(Schema.isBetween({
+		minimum: 0,
+		maximum: 1
+	})), Schema.NullOr(Schema.Finite)])),
+	count: Schema.Natural,
+	min: Schema.Finite,
+	max: Schema.Finite,
+	sum: Schema.Finite
+}));
+var Metric = Schema.Union([
+	Counter,
+	Gauge,
+	Histogram,
+	Frequency,
+	Summary$1
+]);
+/** A snapshot of every metric, taken at `time`. */
+var Metrics = Schema.Struct({
+	_tag: Schema.tag("Metrics"),
+	...sessionId,
+	time: Timestamp,
+	metrics: Schema.Array(Metric)
+});
+/** A fiber lifecycle transition. */
+var FiberEvent = Schema.Struct({
+	_tag: Schema.tag("FiberEvent"),
+	...sessionId,
+	fiberId: Schema.Natural,
+	event: Schema.Literals([
+		"Start",
+		"End",
+		"Suspend",
+		"Resume"
+	]),
+	parentFiberId: Schema.optional(Schema.Natural),
+	time: Timestamp
+});
+/**
+* A `process.memoryUsage()` reading, sampled on an interval by the client.
+*
+* Node and Bun only: a runtime without `process.memoryUsage` emits none of
+* these and a session simply has no memory track. Figures are bytes, as the
+* runtime reports them; `time` shares the monotonic base of span times, so the
+* webapp can draw the curve against the same x-axis as the flame chart.
+*/
+var MemorySample = Schema.Struct({
+	_tag: Schema.tag("MemorySample"),
+	...sessionId,
+	time: Timestamp,
+	heapUsed: Schema.Natural,
+	heapTotal: Schema.Natural,
+	rss: Schema.Natural,
+	external: Schema.Natural
+});
+var Ping = Schema.Struct({
+	_tag: Schema.tag("Ping"),
+	...sessionId
+});
+var Pong = Schema.Struct({
+	_tag: Schema.tag("Pong"),
+	...sessionId
+});
+/** Asks the client for a {@link Metrics} snapshot. */
+var MetricsRequest = Schema.Struct({ _tag: Schema.tag("MetricsRequest") });
+/** Telemetry the instrumented program sends to the collector. */
+var ClientMessage = Schema.Union([
+	Hello,
+	SpanStart,
+	SpanEnd,
+	SpanEvent,
+	Log,
+	Metrics,
+	FiberEvent,
+	MemorySample,
+	Ping
+]);
+/** What the collector sends back to the instrumented program. */
+var CollectorMessage = Schema.Union([Pong, MetricsRequest]);
+/** A session the collector knows about, as listed to the webapp. */
+var Session = Schema.Struct({
+	sessionId: SessionId,
+	program: Schema.String,
+	pid: Schema.Natural,
+	runtime: Schema.String,
+	clock: Clock,
+	active: Schema.Boolean,
+	endedAtEpochMillis: Schema.optional(Schema.Natural)
+});
+/** Every session the collector holds. Sent on connect and on change. */
+var SessionList = Schema.Struct({
+	_tag: Schema.tag("SessionList"),
+	sessions: Schema.Array(Session)
+});
+/**
+* Everything already recorded for a session, replayed in arrival order.
+*
+* Sent once when the webapp subscribes, before any live telemetry for that
+* session. `complete` is false when the backlog is split across several
+* messages, so the webapp knows more is coming.
+*/
+var Backlog = Schema.Struct({
+	_tag: Schema.tag("Backlog"),
+	...sessionId,
+	messages: Schema.Array(ClientMessage),
+	complete: Schema.Boolean
+});
+/** A live client message forwarded to the webapp as it arrives. */
+var Live = Schema.Struct({
+	_tag: Schema.tag("Live"),
+	message: ClientMessage
+});
+/**
+* A session ended — its program exited or its connection dropped.
+*
+* **Nothing emits this.** The collector marks the session `active: false` and
+* re-sends the whole {@link SessionList} on every change, which already tells
+* the webapp everything this message would. The variant is kept because the
+* protocol is extended additively and removing it would break the union for
+* anyone decoding an older stream; the webapp handler for it was deleted
+* rather than left looking implemented.
+*/
+var SessionEnded = Schema.Struct({
+	_tag: Schema.tag("SessionEnded"),
+	...sessionId,
+	endedAtEpochMillis: Schema.Natural
+});
+/** What the collector sends to the webapp. */
+var WebappMessage = Schema.Union([
+	SessionList,
+	Backlog,
+	Live,
+	SessionEnded
+]);
+/** Asks the collector to stream one session: its backlog, then live messages. */
+var Subscribe = Schema.Struct({
+	_tag: Schema.tag("Subscribe"),
+	...sessionId
+});
+/** Stops the stream started by {@link Subscribe}. */
+var Unsubscribe = Schema.Struct({
+	_tag: Schema.tag("Unsubscribe"),
+	...sessionId
+});
+/** What the webapp sends to the collector. */
+var WebappRequest = Schema.Union([Subscribe, Unsubscribe]);
+/**
+* Line 1 of a saved trace file.
+*
+* The rest of the file is {@link ClientMessage} NDJSON, byte-identical to what
+* the wire carries — a trace file is the protocol message stream with a header
+* on top, not a second representation of a trace. So any new `ClientMessage`
+* variant is carried by a saved trace for free, and {@link traceFileFormatVersion}
+* only moves if *this* struct or the line layout changes.
+*
+* The full {@link Session} is embedded because a loaded trace has no
+* `SessionList` to get its `clock` from, and without the clock the webapp
+* cannot show absolute times.
+*/
+var TraceFileHeader = Schema.Struct({
+	_tag: Schema.tag("TraceFileHeader"),
+	formatVersion: Schema.Natural,
+	/** {@link protocolVersion} at save time. Recorded for diagnosis, not enforced. */
+	protocolVersion: Schema.Natural,
+	session: Session,
+	savedAtEpochMillis: Schema.Natural
+});
+//#endregion
+//#region src/protocol/Codec.ts
+/**
+* NDJSON codec for the protocol unions.
+*
+* The whole encoding lives behind {@link Codec}: one line of JSON per message,
+* `\n`-terminated. Swapping in a compact binary format later means another
+* `make`-shaped factory, not touching callers.
+*/
+/** Raised when a message cannot be encoded — an out-of-domain field value. */
+var EncodeError = class extends Data.TaggedError("EncodeError") {
+	get message() {
+		return `Unencodable protocol message: ${this.reason}`;
+	}
+};
+/** Raised when a line is not valid JSON, or not a valid message. */
+var DecodeError = class extends Data.TaggedError("DecodeError") {
+	get message() {
+		return `Invalid protocol message: ${this.reason}`;
+	}
+};
+var make = (schema) => {
+	const json = Schema.fromJsonString(schema);
+	const encodeJson = Schema.encodeResult(json);
+	const decodeJson = Schema.decodeUnknownResult(json);
+	const encodeResult = (message) => Result.match(encodeJson(message), {
+		onSuccess: (line) => Result.succeed(`${line}\n`),
+		onFailure: (error) => Result.fail(new EncodeError({ reason: error.message }))
+	});
+	const decode = (line) => Result.mapError(decodeJson(line.trim()), (error) => new DecodeError({
+		line,
+		reason: error.message
+	}));
+	return {
+		encode: (message) => Result.getOrThrow(encodeResult(message)),
+		encodeResult,
+		decode,
+		decodeAll: (chunk) => Result.all(chunk.split("\n").filter((line) => line.trim() !== "").map(decode))
+	};
+};
+/** Instrumented program → collector. */
+var clientCodec = make(ClientMessage);
+make(CollectorMessage);
+/** Collector → webapp. */
+var webappCodec = make(WebappMessage);
+/** Webapp → collector. */
+var webappRequestCodec = make(WebappRequest);
+/** Line 1 of a saved trace file; the rest of the file is {@link clientCodec} lines. */
+var traceFileHeaderCodec = make(TraceFileHeader);
+//#endregion
+//#region app/src/trace/TraceFile.ts
+/**
+* Saving a trace to a file and loading it back.
+*
+* The file **is** the protocol message stream: line 1 is a
+* {@link Protocol.TraceFileHeader}, every line after it is a `ClientMessage`
+* exactly as `clientCodec` writes it on the wire. So a new protocol message
+* variant is carried by a saved trace for free — the format version only moves
+* if the header or the line layout changes, never because the protocol grew.
+*
+* Parsing is deliberately lenient about the *tail* and strict about the
+* *head*: a header that will not decode means this is not a trace file and
+* there is nothing to show, while a truncated last line means the writer died
+* mid-save and everything before it is still a real trace worth rendering.
+*/
+/** File extension for a saved trace. */
+var traceFileExtension = ".eitrace";
+var fail = (message) => Result.fail({
+	_tag: "TraceFileError",
+	message
+});
+/**
+* Prefix on a loaded session's id.
+*
+* Without it, loading a trace exported from the collector you are currently
+* connected to would collide with the live session of the same id and the two
+* would fight over the selection.
+*/
+var loadedSessionPrefix = "loaded:";
+/** True for a session id produced by {@link parseTraceFile}. */
+var isLoadedSession = (sessionId) => sessionId.startsWith(loadedSessionPrefix);
+/**
+* Serializes a session and its messages to trace-file text.
+*
+* `messages` is the raw protocol stream in arrival order — not a re-derivation
+* from the rendered trace model, which would silently drop every message the
+* model does not draw.
+*/
+var serializeTraceFile = (session, messages, savedAtEpochMillis) => {
+	const header = traceFileHeaderCodec.encode({
+		_tag: "TraceFileHeader",
+		formatVersion: 1,
+		protocolVersion: 1,
+		session,
+		savedAtEpochMillis
+	});
+	const body = [];
+	for (const message of messages) body.push(clientCodec.encode(message));
+	return header + body.join("");
+};
+/** A filename safe on every platform, carrying the program and save time. */
+var traceFileName = (session, savedAtEpochMillis) => {
+	return `${(session.program.split(/[/\\]/).pop() ?? "trace").replace(/[^\w.-]+/g, "-").replace(/^-+|-+$/g, "") || "trace"}-${new Date(savedAtEpochMillis).toISOString().replace(/[:.]/g, "-").slice(0, 19)}${traceFileExtension}`;
+};
+/**
+* Parses trace-file text.
+*
+* Fails only when the file is not a trace file at all — an unreadable header,
+* a format version from the future, or a body whose *interior* is corrupt. A
+* bad line that is not the last one means the file was edited or mangled, not
+* merely cut short, and rendering a trace with a hole in the middle would be a
+* lie; a bad final line is reported as {@link LoadedTrace.truncatedLines}.
+*/
+var parseTraceFile = (text) => {
+	const lines = text.split("\n");
+	const headerLine = lines[0];
+	if (headerLine === void 0 || headerLine.trim() === "") return fail("The file is empty.");
+	const headerResult = traceFileHeaderCodec.decode(headerLine);
+	if (Result.isFailure(headerResult)) return fail("This is not an effect-inspect trace file: its header could not be read.");
+	const header = headerResult.success;
+	if (header.formatVersion > 1) return fail(`This trace file is format version ${header.formatVersion}; this build understands up to 1.`);
+	const messages = [];
+	let truncatedLines = 0;
+	for (let index = 1; index < lines.length; index++) {
+		const line = lines[index];
+		if (line.trim() === "") continue;
+		const decoded = clientCodec.decode(line);
+		if (Result.isSuccess(decoded)) {
+			messages.push(decoded.success);
+			continue;
+		}
+		if (!lines.slice(index + 1).every((rest) => rest.trim() === "")) return fail(`This trace file is corrupt: line ${index + 1} could not be read.`);
+		truncatedLines = 1;
+	}
+	return Result.succeed({
+		header,
+		messages,
+		truncatedLines
+	});
+};
+/** The `Session` a loaded trace lists as: never active, id namespaced so it cannot collide. */
+var loadedSession = (header) => ({
+	...header.session,
+	sessionId: isLoadedSession(header.session.sessionId) ? header.session.sessionId : `${loadedSessionPrefix}${header.session.sessionId}`,
+	active: false,
+	endedAtEpochMillis: header.session.endedAtEpochMillis ?? header.savedAtEpochMillis
+});
+//#endregion
+//#region app/src/trace/TraceStore.ts
+var NANOS_PER_MILLI = 1000000n;
+/**
+* Converts protocol nanos to milliseconds relative to `origin`, as a `number`.
+*
+* The subtraction happens in `bigint` so it stays exact, and only the
+* (small, relative) result is narrowed to `number` — narrowing the absolute
+* nanos first would lose precision well before it got here.
+*/
+var toRelativeMillis = (time, origin) => Number((time - origin) / NANOS_PER_MILLI) + Number((time - origin) % NANOS_PER_MILLI) / 1e6;
+/**
+* Mutable span index for one session.
+*
+* Ingest is `apply`, one protocol message at a time, in arrival order. Reads
+* are direct field access — `spans`, `roots` and `rows` are live structures,
+* not copies, so the renderer must treat them as read-only and must re-read
+* them (not cache them) whenever {@link version} changes.
+*/
+var TraceStore = class {
+	/** Every span seen, by span id. Includes spans that are still open. */
+	spans = /* @__PURE__ */ new Map();
+	/** Root span ids in arrival order — the renderer's entry points. */
+	roots = [];
+	/** Span ids that have no `SpanEnd` yet, so the renderer can draw them open-ended. */
+	openSpans = /* @__PURE__ */ new Set();
+	/** Logs in arrival order. */
+	logs = [];
+	/**
+	* Memory samples in arrival order, which is also time order.
+	*
+	* A plain array rather than anything indexed: the track draws the whole
+	* series each frame by walking it once, and at the client's 100ms interval a
+	* ten-minute trace is 6,000 entries — a scan the renderer does not notice.
+	* ponytail: linear scan, swap for a binary search into the viewport if a
+	* trace ever runs long enough for it to show up in a frame budget.
+	*/
+	memory = [];
+	/**
+	* Largest `heapUsed` seen — the memory track's y-axis top, kept here so the
+	* renderer never re-scans the series to scale a frame.
+	*/
+	memoryPeak = 0;
+	/** Smallest `heapUsed` seen — the memory track's y-axis floor. */
+	memoryTrough = Number.POSITIVE_INFINITY;
+	/** Largest `rss` seen; the secondary line has its own scale. */
+	memoryRssPeak = 0;
+	/**
+	* Every message ingested, in arrival order — the source for saving to a file.
+	*
+	* The rendered model above is lossy on purpose (relative millis, merged
+	* attributes, `Metrics`/`FiberEvent` dropped), so a file written from it
+	* would quietly lose whatever the chart does not draw. Keeping the decoded
+	* messages costs one array slot each — they are already allocated — and
+	* makes save a copy rather than a re-derivation.
+	*/
+	raw = [];
+	/**
+	* Span ids bucketed by depth: `rows[2]` is every span nested two levels deep.
+	*
+	* This is the flame chart's row layout. It is maintained incrementally on
+	* ingest so the renderer never has to traverse the tree to find a row, and
+	* so drawing a viewport means scanning only the rows it covers.
+	*/
+	rows = [];
+	/**
+	* Spans waiting on a parent that has not arrived, keyed by the missing
+	* parent id.
+	*
+	* A child can legitimately precede its parent: the backlog preserves arrival
+	* order, and a parent's `SpanStart` is emitted when it opens, which a
+	* concurrent fiber's child can beat to the wire. Rather than drop such a
+	* span, it is parked here and re-linked when the parent shows up.
+	*/
+	pendingChildren = /* @__PURE__ */ new Map();
+	/** Monotonic nanos of the first event seen; the zero point for `start`/`end`. */
+	origin;
+	/** Wall-clock millis matching {@link origin}, from the session's `Hello`. */
+	epochOrigin;
+	/**
+	* Bumped on every mutation.
+	*
+	* This is the *only* value React is allowed to observe. The renderer polls
+	* it per frame to decide whether to redraw; the UI mirrors it into an atom
+	* on a timer so counters update without a render per span.
+	*/
+	version = 0;
+	spanCount = 0;
+	errorCount = 0;
+	eventCount = 0;
+	maxTime = 0;
+	/** Snapshot of the counters — allocates, so call it per repaint, not per span. */
+	stats() {
+		return {
+			spans: this.spanCount,
+			openSpans: this.openSpans.size,
+			errors: this.errorCount,
+			logs: this.logs.length,
+			events: this.eventCount,
+			duration: this.maxTime
+		};
+	}
+	/** Drops everything — used when switching sessions. */
+	clear() {
+		this.spans.clear();
+		this.roots.length = 0;
+		this.openSpans.clear();
+		this.logs.length = 0;
+		this.memory.length = 0;
+		this.memoryPeak = 0;
+		this.memoryTrough = Number.POSITIVE_INFINITY;
+		this.memoryRssPeak = 0;
+		this.raw.length = 0;
+		this.rows.length = 0;
+		this.pendingChildren.clear();
+		this.origin = void 0;
+		this.epochOrigin = void 0;
+		this.spanCount = 0;
+		this.errorCount = 0;
+		this.eventCount = 0;
+		this.maxTime = 0;
+		this.version++;
+	}
+	/** Ingests one client message. Unknown/undrawn variants are ignored, not errors. */
+	apply(message) {
+		this.raw.push(message);
+		switch (message._tag) {
+			case "Hello":
+				this.anchor(message.clock.startTime);
+				this.epochOrigin = message.clock.wallClockEpochMillis;
+				break;
+			case "SpanStart":
+				this.applySpanStart(message);
+				break;
+			case "SpanEnd":
+				this.applySpanEnd(message);
+				break;
+			case "SpanEvent":
+				this.applySpanEvent(message);
+				break;
+			case "Log":
+				this.applyLog(message);
+				break;
+			case "MemorySample":
+				this.applyMemorySample(message);
+				break;
+			default: return;
+		}
+		this.version++;
+	}
+	/** Ingests a batch, bumping `version` once rather than per message. */
+	applyAll(messages) {
+		const before = this.version;
+		for (const message of messages) this.apply(message);
+		this.version = before + 1;
+	}
+	anchor(time) {
+		this.origin ??= time;
+	}
+	relative(time) {
+		this.anchor(time);
+		const value = toRelativeMillis(time, this.origin);
+		if (value > this.maxTime) this.maxTime = value;
+		return value;
+	}
+	applySpanStart(message) {
+		if (this.spans.has(message.spanId)) return;
+		const parentId = message.parent?._tag === "LocalParent" ? message.parent.spanId : void 0;
+		const parent = parentId === void 0 ? void 0 : this.spans.get(parentId);
+		const span = {
+			spanId: message.spanId,
+			traceId: message.traceId,
+			name: message.name,
+			kind: message.kind,
+			parentId,
+			start: this.relative(message.startTime),
+			end: void 0,
+			depth: parent === void 0 ? 0 : parent.depth + 1,
+			outcome: void 0,
+			attributes: { ...message.attributes },
+			children: [],
+			events: [],
+			fiberId: message.fiberId,
+			orphaned: parentId !== void 0 && parent === void 0
+		};
+		this.spans.set(span.spanId, span);
+		this.openSpans.add(span.spanId);
+		this.spanCount++;
+		if (parent !== void 0) parent.children.push(span.spanId);
+		else if (parentId === void 0) this.roots.push(span.spanId);
+		else {
+			const pending = this.pendingChildren.get(parentId);
+			if (pending === void 0) this.pendingChildren.set(parentId, [span.spanId]);
+			else pending.push(span.spanId);
+		}
+		this.addToRow(span);
+		this.adoptPending(span);
+	}
+	/** Re-links children that arrived before this span did. */
+	adoptPending(parent) {
+		const pending = this.pendingChildren.get(parent.spanId);
+		if (pending === void 0) return;
+		this.pendingChildren.delete(parent.spanId);
+		for (const childId of pending) {
+			const child = this.spans.get(childId);
+			if (child === void 0) continue;
+			parent.children.push(childId);
+			child.orphaned = false;
+			this.redepth(child, parent.depth + 1);
+		}
+	}
+	/**
+	* Moves a subtree to a new depth after a late parent arrives.
+	*
+	* Iterative rather than recursive: a deeply-nested Effect program can stack
+	* hundreds of spans and a blown call stack during ingest would take the
+	* whole webapp down.
+	*/
+	redepth(root, depth) {
+		const stack = [[root, depth]];
+		while (stack.length > 0) {
+			const next = stack.pop();
+			if (next === void 0) break;
+			const [span, spanDepth] = next;
+			if (span.depth !== spanDepth) {
+				this.removeFromRow(span);
+				span.depth = spanDepth;
+				this.addToRow(span);
+			}
+			for (const childId of span.children) {
+				const child = this.spans.get(childId);
+				if (child !== void 0) stack.push([child, spanDepth + 1]);
+			}
+		}
+	}
+	addToRow(span) {
+		while (this.rows.length <= span.depth) this.rows.push([]);
+		this.rows[span.depth].push(span.spanId);
+	}
+	removeFromRow(span) {
+		const row = this.rows[span.depth];
+		if (row === void 0) return;
+		const index = row.indexOf(span.spanId);
+		if (index !== -1) row.splice(index, 1);
+	}
+	applySpanEnd(message) {
+		const span = this.spans.get(message.spanId);
+		if (span === void 0) return;
+		span.end = this.relative(message.endTime);
+		span.outcome = message.outcome;
+		if (Object.keys(message.attributes).length > 0) span.attributes = {
+			...span.attributes,
+			...message.attributes
+		};
+		if (this.openSpans.delete(message.spanId) && message.outcome._tag === "Failure") this.errorCount++;
+	}
+	applySpanEvent(message) {
+		const span = this.spans.get(message.spanId);
+		if (span === void 0) return;
+		span.events.push({
+			name: message.name,
+			time: this.relative(message.time),
+			attributes: message.attributes
+		});
+		this.eventCount++;
+	}
+	applyMemorySample(message) {
+		this.memory.push({
+			time: this.relative(message.time),
+			heapUsed: message.heapUsed,
+			heapTotal: message.heapTotal,
+			rss: message.rss,
+			external: message.external
+		});
+		if (message.heapUsed > this.memoryPeak) this.memoryPeak = message.heapUsed;
+		if (message.heapUsed < this.memoryTrough) this.memoryTrough = message.heapUsed;
+		if (message.rss > this.memoryRssPeak) this.memoryRssPeak = message.rss;
+	}
+	applyLog(message) {
+		this.logs.push({
+			time: this.relative(message.time),
+			level: message.level,
+			message: message.message,
+			spanId: message.spanId,
+			fiberId: message.fiberId,
+			annotations: message.annotations
+		});
+	}
+};
+//#endregion
+//#region app/src/state/atoms.ts
+/**
+* Application state.
+*
+* The split here is the whole design: **atoms hold what React renders**
+* (connection status, the session list, which session is selected, a repaint
+* tick) and the {@link TraceStore} holds **what the canvas renders** (every
+* span). Nothing per-span is ever put in an atom — a 10k-span trace would mean
+* 10k subscriptions and a React render per arriving span, which is exactly the
+* stutter the spec forbids.
+*
+* The bridge between the two is {@link traceVersionAtom}: the socket writes
+* spans straight into the store and the store's version is sampled on an
+* animation frame, so the header counters stay live while the span data path
+* never touches React.
+*/
+/**
+* Where the collector listens.
+*
+* The `/webapp` path matters: the collector routes both roles on one port by
+* request path, and anything that is not `/webapp` is treated as an
+* instrumented program — which would get no `SessionList` at all. See
+* `webappPath` in `src/collector/Server.ts`.
+*
+* `VITE_COLLECTOR_URL` overrides it, so a second collector on a non-default
+* `EFFECT_INSPECT_PORT` can be inspected without editing source.
+*/
+var COLLECTOR_URL = typeof window === "undefined" ? "ws://localhost:34437/webapp" : `${window.location.protocol === "https:" ? "wss:" : "ws:"}//${window.location.host}/webapp`;
+/**
+* The span store for the currently selected session.
+*
+* A single long-lived instance rather than one per session: switching sessions
+* calls `clear()`, so the renderer can hold one stable reference for the life
+* of the page instead of re-acquiring it whenever selection changes.
+*/
+var traceStore = new TraceStore();
+/** Current connection status. Written by {@link connectionAtom}. */
+var connectionStatusAtom = Atom.make({ _tag: "Connecting" });
+/** Every session the collector knows about, newest first. */
+var liveSessionsAtom = Atom.make([]);
+/**
+* Traces loaded from files this page load, newest first.
+*
+* Held in an atom rather than a module-level array because the session list
+* renders from it; the *messages* are not per-span React state — they are
+* replayed into {@link traceStore} in one `applyAll` on selection and never
+* read by React again.
+*/
+var loadedSessionsAtom = Atom.make([]);
+/**
+* Live and loaded sessions in one list, loaded first.
+*
+* Loaded traces sort above live ones so a file you just opened is where you
+* are looking, rather than buried under whatever the collector is holding.
+*/
+var sessionsAtom = Atom.readable((get) => [...get(loadedSessionsAtom).map((loaded) => loaded.session), ...get(liveSessionsAtom)]);
+/** The selected session id, or `undefined` when nothing is selected. */
+var selectedSessionIdAtom = Atom.make(void 0);
+/**
+* Sampled copy of `traceStore.version`, so components can re-render on trace
+* change without subscribing to the trace itself.
+*
+* Updated once per animation frame while data is arriving (see
+* {@link connectionAtom}), which caps the UI at one render per frame no matter
+* how many spans land in between.
+*/
+var traceVersionAtom = Atom.make(0);
+/** Count of protocol lines the webapp could not decode; surfaced in the header. */
+var decodeErrorsAtom = Atom.make(0);
+/** The selected session's metadata, derived from the list and the selection. */
+var selectedSessionAtom = Atom.readable((get) => {
+	const id = get(selectedSessionIdAtom);
+	if (id === void 0) return void 0;
+	return get(sessionsAtom).find((session) => session.sessionId === id);
+});
+/**
+* Wall-clock epoch millis corresponding to `traceStore.origin`.
+*
+* `TraceStore.epochOrigin` is permanently `undefined` in practice: the
+* collector does not append `Hello` to the session ring, so the store's `Hello`
+* case never fires. The anchor is plumbed from the `Session` record instead,
+* which carries the same `clock` and is already in hand — appending `Hello`
+* would change the collector's retention semantics for one timestamp.
+*
+* The store's origin is the first *observed* event, not the session start, so
+* the session clock has to be shifted by the gap between them.
+*/
+var wallClockOriginAtom = Atom.readable((get) => {
+	get(traceVersionAtom);
+	const session = get(selectedSessionAtom);
+	if (session === void 0 || traceStore.origin === void 0) return void 0;
+	const offsetNanos = traceStore.origin - session.clock.startTime;
+	return session.clock.wallClockEpochMillis + Number(offsetNanos / 1000000n);
+});
+/** Live counters for the header, recomputed only when the sampled version changes. */
+var traceStatsAtom = Atom.readable((get) => {
+	get(traceVersionAtom);
+	return traceStore.stats();
+});
+/** Backoff for reconnect attempts, capped so a long-down collector still retries. */
+var retryDelay = (attempt) => Math.min(1e3 * 2 ** attempt, 1e4);
+/**
+* Owns the collector WebSocket for as long as it is mounted.
+*
+* Written as a `keepAlive` atom rather than a `useEffect` so the connection
+* survives component remounts and React strict-mode double-invocation, and so
+* the socket's writes go through the registry — the same path a component
+* write takes — instead of a side channel.
+*
+* Reads as `void`: the value of this atom is its side effect. Components mount
+* it with `useAtomMount` and read status from {@link connectionStatusAtom}.
+*/
+var connectionAtom = Atom.keepAlive(Atom.readable((ctx) => {
+	let socket;
+	let retry;
+	let frame;
+	let attempt = 0;
+	let closed = false;
+	/** The session this socket is subscribed to, so we can unsubscribe on switch. */
+	let subscribed;
+	/**
+	* Mirrors the store's version into an atom on the next frame.
+	*
+	* Coalesced: many messages within one frame schedule a single write, so a
+	* burst of a thousand spans costs one React render, not a thousand.
+	*/
+	const scheduleRepaint = () => {
+		if (frame !== void 0) return;
+		frame = requestAnimationFrame(() => {
+			frame = void 0;
+			ctx.set(traceVersionAtom, traceStore.version);
+		});
+	};
+	const send = (request) => {
+		if (socket?.readyState === WebSocket.OPEN) socket.send(webappRequestCodec.encode(request));
+	};
+	/**
+	* Points the store at whichever session is selected.
+	*
+	* A live session means subscribing to the collector; a loaded one means
+	* replaying its file's messages straight into the store. Both paths clear
+	* the store first, because it is shared across sessions.
+	*/
+	const syncSubscription = () => {
+		const next = ctx.get(selectedSessionIdAtom);
+		if (next === subscribed) return;
+		if (subscribed !== void 0 && !isLoadedSession(subscribed)) send({
+			_tag: "Unsubscribe",
+			sessionId: subscribed
+		});
+		subscribed = next;
+		traceStore.clear();
+		scheduleRepaint();
+		if (next === void 0) return;
+		if (isLoadedSession(next)) {
+			const loaded = ctx.get(loadedSessionsAtom).find((entry) => entry.session.sessionId === next);
+			if (loaded !== void 0) traceStore.applyAll(loaded.messages);
+			scheduleRepaint();
+			return;
+		}
+		send({
+			_tag: "Subscribe",
+			sessionId: next
+		});
+	};
+	const handle = (message) => {
+		switch (message._tag) {
+			case "SessionList": {
+				const sessions = [...message.sessions].sort((a, b) => b.clock.wallClockEpochMillis - a.clock.wallClockEpochMillis);
+				ctx.set(liveSessionsAtom, sessions);
+				if (ctx.get(selectedSessionIdAtom) === void 0 && sessions.length > 0) ctx.set(selectedSessionIdAtom, sessions[0].sessionId);
+				break;
+			}
+			case "Backlog":
+				if (message.sessionId !== subscribed) return;
+				traceStore.applyAll(message.messages);
+				scheduleRepaint();
+				break;
+			case "Live":
+				if (message.message.sessionId !== subscribed) return;
+				traceStore.apply(message.message);
+				scheduleRepaint();
+		}
+	};
+	const connect = () => {
+		if (closed) return;
+		ctx.set(connectionStatusAtom, { _tag: "Connecting" });
+		const ws = new WebSocket(COLLECTOR_URL);
+		socket = ws;
+		ws.onopen = () => {
+			attempt = 0;
+			ctx.set(connectionStatusAtom, { _tag: "Connected" });
+			if (subscribed !== void 0 && isLoadedSession(subscribed)) return;
+			subscribed = void 0;
+			syncSubscription();
+		};
+		ws.onmessage = (event) => {
+			if (typeof event.data !== "string") return;
+			const messages = decodeFrame(event.data);
+			if (messages === void 0) {
+				ctx.set(decodeErrorsAtom, ctx.get(decodeErrorsAtom) + 1);
+				return;
+			}
+			for (const message of messages) handle(message);
+		};
+		ws.onerror = () => {};
+		ws.onclose = () => {
+			if (closed) return;
+			socket = void 0;
+			if (subscribed === void 0 || !isLoadedSession(subscribed)) subscribed = void 0;
+			const delay = retryDelay(attempt);
+			ctx.set(connectionStatusAtom, {
+				_tag: "Disconnected",
+				reason: `Cannot reach the collector at ${COLLECTOR_URL}`,
+				attempt
+			});
+			attempt++;
+			retry = setTimeout(connect, delay);
+		};
+	};
+	ctx.subscribe(selectedSessionIdAtom, () => syncSubscription());
+	ctx.addFinalizer(() => {
+		closed = true;
+		if (retry !== void 0) clearTimeout(retry);
+		if (frame !== void 0) cancelAnimationFrame(frame);
+		socket?.close();
+		socket = void 0;
+	});
+	connect();
+}));
+/**
+* Decodes one WebSocket frame, which may hold several NDJSON lines.
+*
+* Returns `undefined` rather than throwing on a bad frame: `decodeAll` is
+* strict by design (a bad line means the stream is out of sync), but the
+* webapp's job is to stay up and show the error count, not to die.
+*/
+var decodeFrame = (data) => Result.getOrUndefined(webappCodec.decodeAll(data));
+/**
+* Adds a parsed trace file to the session list and selects it.
+*
+* Re-loading the same file replaces the existing entry rather than stacking a
+* duplicate — the session id is derived from the file's, so a second copy
+* would be indistinguishable in the list.
+*/
+var addLoadedTrace = (registry, text) => {
+	const parsed = parseTraceFile(text);
+	if (Result.isFailure(parsed)) return Result.fail(parsed.failure.message);
+	const { header, messages, truncatedLines } = parsed.success;
+	const session = loadedSession(header);
+	const entry = {
+		session,
+		messages,
+		truncatedLines
+	};
+	registry.set(loadedSessionsAtom, [entry, ...registry.get(loadedSessionsAtom).filter((existing) => existing.session.sessionId !== session.sessionId)]);
+	registry.set(selectedSessionIdAtom, session.sessionId);
+	return Result.succeed(session);
+};
+/**
+* The messages to write when saving the selected session.
+*
+* A loaded session is written back from the file's own messages rather than
+* from the store, so re-exporting a file is lossless even for message types
+* the chart does not draw.
+*/
+var saveableMessages = (registry, sessionId) => {
+	if (!isLoadedSession(sessionId)) return traceStore.raw;
+	return registry.get(loadedSessionsAtom).find((entry) => entry.session.sessionId === sessionId)?.messages ?? traceStore.raw;
+};
+//#endregion
+//#region app/src/chart/palette.ts
+/**
+* Resolves one custom property against `<html>`.
+*
+* `document.documentElement` rather than the canvas: the canvas sits inside the
+* shell, which paints its own background, and reading from it would resolve
+* inherited values correctly but pointlessly — every token in play is declared
+* on `:root`/`.dark`, which is the same element.
+*/
+var read = (style, name, fallback) => {
+	const value = style.getPropertyValue(name).trim();
+	return value === "" ? fallback : value;
+};
+/**
+* Mixes `color` with `base` at `amount` percent, as a string the canvas can use.
+*
+* `color-mix()` in a canvas `fillStyle` is supported wherever `oklch()` is, and
+* every browser that ships `@property`-less Tailwind v4 has both — so this is a
+* plain string rather than a manual colour-space conversion. It exists because
+* a few chart surfaces need a token at partial strength (the overview scrim,
+* the area fill under the memory curve) and foundation ships no `-tint` for
+* the neutrals.
+*/
+var mix = (color, base, amount) => `color-mix(in oklch, ${color} ${amount}%, ${base})`;
+/**
+* Snapshot of the current theme's chart colours.
+*
+* Fallbacks are the dark values, which is what the server renders and what a
+* headless canvas test with no stylesheet attached would otherwise get as an
+* empty string — an empty `fillStyle` assignment is ignored and leaves the
+* previous colour, so a missing token would paint garbage rather than
+* something plain.
+*/
+var readPalette = () => {
+	const style = getComputedStyle(document.documentElement);
+	const bg = read(style, "--canvas", "#1c1d20");
+	const ink = read(style, "--ink", "#f5f6f7");
+	const ink2 = read(style, "--ink-2", "#a8adb8");
+	const ink3 = read(style, "--ink-3", "#6f7480");
+	const red = read(style, "--red", "#e05252");
+	return {
+		bg,
+		panel: read(style, "--surface", "#26272c"),
+		grid: read(style, "--grid-line", "#3a3c42"),
+		rulerText: ink3,
+		label: ink,
+		labelDim: ink2,
+		error: mix(red, bg, 72),
+		errorHot: red,
+		selected: ink,
+		depth: [
+			read(style, "--depth-1", "#3f3f46"),
+			read(style, "--depth-2", "#52525b"),
+			read(style, "--depth-3", "#34343a"),
+			read(style, "--depth-4", "#45454d"),
+			read(style, "--depth-5", "#2e2e33")
+		],
+		overviewScrim: mix(bg, "transparent", 72),
+		overviewWindow: read(style, "--line-strong", "#4a4d55"),
+		memoryCurve: ink2,
+		memoryFill: mix(ink2, "transparent", 16),
+		memoryRss: ink3,
+		memoryLabel: ink3,
+		memoryBase: read(style, "--line", "#33353b"),
+		readoutBg: read(style, "--tooltip-bg", "#1a1b1e"),
+		readoutFg: read(style, "--tooltip-fg", "#f5f6f7")
+	};
+};
+//#endregion
+//#region app/src/chart/Viewport.ts
+/** Never zoom in past this window width; below it float maths gets noisy. */
+var MIN_SPAN = .001;
+/**
+* Clamps a window to `[0, total]` while preserving its width where possible.
+*
+* Preserving width matters for panning: dragging past the left edge should
+* stop at the edge, not squash the window.
+*/
+var clamp = (view, total) => {
+	const limit = Math.max(total, MIN_SPAN);
+	const width = Math.min(Math.max(view.to - view.from, MIN_SPAN), limit);
+	let from = view.from;
+	if (from < 0) from = 0;
+	if (from + width > limit) from = limit - width;
+	return {
+		from,
+		to: from + width
+	};
+};
+/** Zooms by `factor` (>1 zooms out) keeping the time under `anchor` fixed. */
+var zoom = (view, anchor, factor, total) => {
+	const width = (view.to - view.from) * factor;
+	const ratio = (anchor - view.from) / (view.to - view.from);
+	return clamp({
+		from: anchor - width * ratio,
+		to: anchor + width * (1 - ratio)
+	}, total);
+};
+/** Slides the window by `delta` millis. */
+var pan = (view, delta, total) => clamp({
+	from: view.from + delta,
+	to: view.to + delta
+}, total);
+/** True when the window covers the whole trace, i.e. live mode should follow. */
+var isFull = (view, total) => view.from <= 0 && view.to >= Math.max(total, MIN_SPAN) - MIN_SPAN;
+/** The height a track takes: full, collapsed to its handle, or nothing at all. */
+var trackHeight = (samples, collapsed) => {
+	if (samples.length === 0) return 0;
+	return collapsed ? 11 : 40;
+};
+/** Bytes as the shortest readable unit — the track's only text. */
+var formatBytes = (bytes) => {
+	if (bytes < 1024) return `${bytes} B`;
+	if (bytes < 1048576) return `${(bytes / 1024).toFixed(0)} KB`;
+	if (bytes < 1073741824) return `${(bytes / 1048576).toFixed(1)} MB`;
+	return `${(bytes / 1073741824).toFixed(2)} GB`;
+};
+/**
+* Index of the sample at or just before `time`, or `-1` when `time` predates
+* the series.
+*
+* Binary search rather than a scan: this runs per pointer move, and a long
+* trace's series is thousands of entries.
+*/
+var sampleAt = (samples, time) => {
+	let lo = 0;
+	let hi = samples.length - 1;
+	let found = -1;
+	while (lo <= hi) {
+		const mid = lo + hi >>> 1;
+		if (samples[mid].time <= time) {
+			found = mid;
+			lo = mid + 1;
+		} else hi = mid - 1;
+	}
+	return samples[found === -1 ? 0 : found];
+};
+/**
+* Draws the heap curve across the full track width.
+*
+* The y-scale is the **whole trace's** peak rather than the visible window's,
+* so zooming in does not silently re-scale the curve under the user and make a
+* flat stretch look like a spike. Chrome does the same.
+*
+* Samples are drawn as a step-then-line polyline over the visible range only,
+* with one sample of overshoot on each side so the curve enters and leaves the
+* viewport rather than starting at its edge.
+*/
+var drawMemoryTrack = (draw) => {
+	const { ctx, samples, collapsed, top, height, width, timeToX, peak, trough, rssPeak, traceEnd, palette } = draw;
+	if (samples.length === 0 || height <= 0) return;
+	if (collapsed) {
+		ctx.save();
+		ctx.fillStyle = palette.bg;
+		ctx.fillRect(0, top, width, height);
+		ctx.fillStyle = palette.memoryLabel;
+		ctx.textAlign = "left";
+		ctx.fillText(`+ memory · heap peak ${formatBytes(peak)}`, 4, top + height / 2);
+		ctx.restore();
+		return;
+	}
+	const bottom = top + height;
+	const scale = height - 12;
+	const floor = trough;
+	const span = peak - floor;
+	const yOf = (bytes) => span > 0 ? bottom - (bytes - floor) / span * scale - 2 : bottom - scale / 2;
+	ctx.save();
+	ctx.beginPath();
+	ctx.rect(0, top, width, height);
+	ctx.clip();
+	const xOf = (time) => {
+		const x = timeToX(time);
+		if (x < -width) return -width;
+		return x > width * 2 ? width * 2 : x;
+	};
+	const first = samples[0];
+	const last = samples[samples.length - 1];
+	const leftX = xOf(0);
+	const rightX = xOf(traceEnd);
+	ctx.beginPath();
+	ctx.moveTo(leftX, bottom);
+	ctx.lineTo(leftX, yOf(first.heapUsed));
+	for (const sample of samples) ctx.lineTo(xOf(sample.time), yOf(sample.heapUsed));
+	ctx.lineTo(rightX, yOf(last.heapUsed));
+	ctx.lineTo(rightX, bottom);
+	ctx.closePath();
+	ctx.fillStyle = palette.memoryFill;
+	ctx.fill();
+	ctx.strokeStyle = palette.memoryCurve;
+	ctx.lineWidth = 1;
+	ctx.stroke();
+	if (rssPeak > 0) {
+		const yRss = (bytes) => bottom - bytes / rssPeak * scale - 2;
+		ctx.beginPath();
+		ctx.moveTo(leftX, yRss(first.rss));
+		for (const sample of samples) ctx.lineTo(xOf(sample.time), yRss(sample.rss));
+		ctx.lineTo(rightX, yRss(last.rss));
+		ctx.strokeStyle = palette.memoryRss;
+		ctx.setLineDash([2, 2]);
+		ctx.stroke();
+		ctx.setLineDash([]);
+	}
+	ctx.strokeStyle = palette.memoryBase;
+	ctx.beginPath();
+	ctx.moveTo(0, bottom - .5);
+	ctx.lineTo(width, bottom - .5);
+	ctx.stroke();
+	const label = `− memory · heap ${formatBytes(floor)}–${formatBytes(peak)} · rss ${formatBytes(rssPeak)}`;
+	ctx.textAlign = "left";
+	ctx.fillStyle = palette.bg;
+	ctx.fillRect(0, top, ctx.measureText(label).width + 8, 13);
+	ctx.fillStyle = palette.memoryLabel;
+	ctx.fillText(label, 4, top + 7);
+	ctx.restore();
+};
+//#endregion
+//#region app/src/chart/Renderer.ts
+/** Height of the whole-trace overview strip, in CSS pixels. */
+var OVERVIEW_HEIGHT = 34;
+/** Height of the time ruler below the overview. */
+var RULER_HEIGHT = 18;
+/** Height of one depth row. Tight, per the visual direction. */
+var ROW_HEIGHT$1 = 16;
+/** Bars narrower than this are drawn but never labelled — the text would not fit. */
+var MIN_LABEL_WIDTH = 26;
+var FlameRenderer = class {
+	canvas;
+	registry;
+	ctx;
+	layout = emptyLayout();
+	view = {
+		from: 0,
+		to: 1
+	};
+	/** True while the viewport still covers the whole trace, so live data follows. */
+	following = true;
+	scrollY = 0;
+	width = 0;
+	height = 0;
+	dpr = 1;
+	frame;
+	dirty = true;
+	lastVersion = -1;
+	/**
+	* The current theme's colours.
+	*
+	* Refreshed on a theme change, not per frame: resolving a dozen custom
+	* properties through `getComputedStyle` forces a style recalculation, which
+	* at 60fps would cost more than drawing the bars.
+	*/
+	palette = readPalette();
+	hover;
+	/** Last pointer x while the cursor is over the canvas — the keyboard zoom anchor. */
+	cursorX;
+	drag;
+	overviewDrag = false;
+	overviewGrab = 0;
+	unsubscribes = [];
+	observer;
+	constructor(canvas, registry) {
+		this.canvas = canvas;
+		this.registry = registry;
+		const ctx = canvas.getContext("2d", { alpha: false });
+		if (ctx === null) throw new Error("2d canvas context unavailable");
+		this.ctx = ctx;
+		this.observer = new ResizeObserver(() => this.resize());
+		this.observer.observe(canvas);
+		this.resize();
+		canvas.addEventListener("pointerdown", this.onPointerDown);
+		canvas.addEventListener("pointermove", this.onPointerMove);
+		canvas.addEventListener("pointerup", this.onPointerUp);
+		canvas.addEventListener("pointerleave", this.onPointerLeave);
+		canvas.addEventListener("wheel", this.onWheel, { passive: false });
+		const repaint = () => this.invalidate();
+		this.unsubscribes.push(registry.subscribe(selectedSpanIdAtom, repaint), registry.subscribe(hoveredSpanIdAtom, repaint), registry.subscribe(filterAtom, repaint), registry.subscribe(filterHidesAtom, repaint), registry.subscribe(memoryCollapsedAtom, repaint), registry.subscribe(resolvedThemeAtom, () => {
+			this.palette = readPalette();
+			this.invalidate();
+		}));
+		this.loop();
+	}
+	dispose() {
+		if (this.frame !== void 0) cancelAnimationFrame(this.frame);
+		this.observer.disconnect();
+		for (const off of this.unsubscribes) off();
+		this.canvas.removeEventListener("pointerdown", this.onPointerDown);
+		this.canvas.removeEventListener("pointermove", this.onPointerMove);
+		this.canvas.removeEventListener("pointerup", this.onPointerUp);
+		this.canvas.removeEventListener("pointerleave", this.onPointerLeave);
+		this.canvas.removeEventListener("wheel", this.onWheel);
+	}
+	/** Frames the whole trace and resumes following live data. */
+	resetView() {
+		this.following = true;
+		this.invalidate();
+	}
+	/** Scrolls the given span into view and centres the viewport on it. */
+	revealSpan(spanId) {
+		const span = traceStore.spans.get(spanId);
+		if (span === void 0) return;
+		const total = this.total();
+		const end = spanEnd(span, total);
+		const width = Math.max(this.view.to - this.view.from, (end - span.start) * 1.4, .01);
+		const centre = (span.start + end) / 2;
+		this.following = false;
+		this.setView(clamp({
+			from: centre - width / 2,
+			to: centre + width / 2
+		}, total));
+		const top = (this.layout.rowOf.get(span.spanId) ?? span.depth) * ROW_HEIGHT$1;
+		const viewTop = this.chartTop();
+		const visible = this.height - viewTop;
+		if (top < this.scrollY) this.scrollY = top;
+		else if (top + ROW_HEIGHT$1 > this.scrollY + visible) this.scrollY = top + ROW_HEIGHT$1 - visible;
+		this.invalidate();
+	}
+	/** The current time window — the overview strip and the ruler both read it. */
+	viewport() {
+		return this.view;
+	}
+	/**
+	* Zooms by `factor` (>1 out) around the keyboard anchor — W/S.
+	*
+	* The anchor is the cursor while it is over the chart, else the selected
+	* span's midpoint, else the window centre. That is Chrome's rule, and it is
+	* what makes W/S usable without a mouse at all: with a span selected, zooming
+	* keeps that span under the eye rather than drifting off screen.
+	*/
+	zoomBy(factor) {
+		this.setView(zoom(this.view, this.keyboardAnchor(), factor, this.total()));
+	}
+	/** Pans by a fraction of the window width — A/D. */
+	panBy(fraction) {
+		this.setView(pan(this.view, (this.view.to - this.view.from) * fraction, this.total()));
+	}
+	/** Scrolls the rows vertically by `delta` CSS pixels, clamped to the content. */
+	scrollRows(delta) {
+		const rows = this.layout.rows.length * ROW_HEIGHT$1;
+		const visible = this.height - this.chartTop();
+		this.scrollY = Math.max(0, Math.min(this.scrollY + delta, Math.max(rows - visible, 0)));
+		this.invalidate();
+	}
+	/**
+	* Where a keyboard zoom pivots. The pointer position is remembered on every
+	* move and dropped on leave, so "cursor is over the chart" is a real test
+	* rather than a guess.
+	*/
+	keyboardAnchor() {
+		if (this.cursorX !== void 0) return this.xToTime(this.cursorX);
+		const selected = this.registry.get(selectedSpanIdAtom);
+		const span = selected === void 0 ? void 0 : traceStore.spans.get(selected);
+		if (span !== void 0) return (span.start + spanEnd(span, this.total())) / 2;
+		return (this.view.from + this.view.to) / 2;
+	}
+	/** The span the cursor is over, with its screen rect, for the tooltip. */
+	hovered() {
+		return this.hover;
+	}
+	invalidate() {
+		this.dirty = true;
+	}
+	total() {
+		return Math.max(this.layout.duration, .001);
+	}
+	/**
+	* Height the memory track occupies right now.
+	*
+	* Zero when the session has no samples, so a trace recorded in a runtime
+	* without `process.memoryUsage` gets no empty band — and zero when collapsed.
+	*/
+	memoryHeight() {
+		return trackHeight(traceStore.memory, this.registry.get(memoryCollapsedAtom));
+	}
+	/**
+	* Top of the bar area — below the overview, the ruler and the memory track.
+	*
+	* Everything vertical in this class routes through here: hit testing, row
+	* scrolling, gridlines and `revealSpan`. So the memory track pushing the bars
+	* down is one number, and nothing else has to know it moved.
+	*/
+	chartTop() {
+		return 52 + this.memoryHeight();
+	}
+	setView(next) {
+		this.view = next;
+		this.following = isFull(next, this.total());
+		this.invalidate();
+	}
+	resize() {
+		const rect = this.canvas.getBoundingClientRect();
+		if (rect.width === 0 || rect.height === 0) return;
+		this.dpr = Math.min(globalThis.devicePixelRatio || 1, 2);
+		this.width = rect.width;
+		this.height = rect.height;
+		this.canvas.width = Math.round(rect.width * this.dpr);
+		this.canvas.height = Math.round(rect.height * this.dpr);
+		this.invalidate();
+	}
+	loop = () => {
+		this.frame = requestAnimationFrame(this.loop);
+		if (traceStore.version !== this.lastVersion) {
+			this.lastVersion = traceStore.version;
+			this.layout = layout(traceStore, this.layout);
+			this.dirty = true;
+		}
+		if (this.following) {
+			const total = this.total();
+			if (this.view.from !== 0 || this.view.to !== total) {
+				this.view = {
+					from: 0,
+					to: total
+				};
+				this.dirty = true;
+			}
+		}
+		if (!this.dirty) return;
+		this.dirty = false;
+		this.draw();
+	};
+	timeToX(time) {
+		return (time - this.view.from) / (this.view.to - this.view.from) * this.width;
+	}
+	xToTime(x) {
+		return this.view.from + x / this.width * (this.view.to - this.view.from);
+	}
+	pointer(event) {
+		const rect = this.canvas.getBoundingClientRect();
+		return {
+			x: event.clientX - rect.left,
+			y: event.clientY - rect.top
+		};
+	}
+	/**
+	* Finds the span under a point.
+	*
+	* Sub-pixel spans are the reason this searches by time rather than by drawn
+	* rect: at a wide zoom a span can be a fraction of a pixel, and testing
+	* against its *rendered* width would make it unhittable. Instead the cursor
+	* x is converted to a time and the row is searched for a span containing it,
+	* with a small pixel-width tolerance so a zero-width span still has a
+	* grabbable target.
+	*/
+	hitTest(x, y) {
+		const top = this.chartTop();
+		if (y < top) return void 0;
+		const rowIndex = Math.floor((y - top + this.scrollY) / ROW_HEIGHT$1);
+		const row = this.layout.rows[rowIndex];
+		if (row === void 0) return void 0;
+		const total = this.total();
+		const tolerance = (this.view.to - this.view.from) / this.width * 2;
+		const time = this.xToTime(x);
+		let found;
+		forEachVisible(row, time - tolerance, time + tolerance, total, (span) => {
+			if (span.start - tolerance <= time && spanEnd(span, total) + tolerance >= time) found = span;
+		});
+		if (found === void 0) return void 0;
+		const x0 = this.timeToX(found.start);
+		const x1 = this.timeToX(spanEnd(found, total));
+		return {
+			span: found,
+			x: x0,
+			y: top + rowIndex * ROW_HEIGHT$1 - this.scrollY,
+			width: Math.max(x1 - x0, 1)
+		};
+	}
+	onPointerDown = (event) => {
+		const { x, y } = this.pointer(event);
+		this.canvas.setPointerCapture(event.pointerId);
+		if (y < OVERVIEW_HEIGHT) {
+			const total = this.total();
+			const left = this.view.from / total * this.width;
+			const right = this.view.to / total * this.width;
+			if (x >= left && x <= right) {
+				this.overviewDrag = true;
+				this.overviewGrab = x - left;
+			} else {
+				const width = this.view.to - this.view.from;
+				const centre = x / this.width * total;
+				this.overviewDrag = true;
+				this.overviewGrab = width / total * this.width / 2;
+				this.setView(clamp({
+					from: centre - width / 2,
+					to: centre + width / 2
+				}, total));
+			}
+			return;
+		}
+		const memoryHeight = this.memoryHeight();
+		const memoryTop = 52;
+		if (memoryHeight > 0 && y >= memoryTop && y < memoryTop + memoryHeight && x < 260) {
+			this.registry.set(memoryCollapsedAtom, !this.registry.get(memoryCollapsedAtom));
+			this.invalidate();
+			return;
+		}
+		const hit = this.hitTest(x, y);
+		this.registry.set(selectedSpanIdAtom, hit?.span.spanId);
+		this.drag = {
+			x,
+			view: this.view
+		};
+	};
+	onPointerMove = (event) => {
+		const { x, y } = this.pointer(event);
+		this.cursorX = x;
+		if (this.overviewDrag) {
+			const total = this.total();
+			const width = this.view.to - this.view.from;
+			const from = (x - this.overviewGrab) / this.width * total;
+			this.setView(clamp({
+				from,
+				to: from + width
+			}, total));
+			return;
+		}
+		if (this.drag !== void 0) {
+			const perPixel = (this.drag.view.to - this.drag.view.from) / this.width;
+			this.setView(pan(this.drag.view, (this.drag.x - x) * perPixel, this.total()));
+			return;
+		}
+		const hit = this.hitTest(x, y);
+		if (hit?.span.spanId !== this.hover?.span.spanId) this.registry.set(hoveredSpanIdAtom, hit?.span.spanId);
+		this.hover = hit;
+		this.canvas.style.cursor = hit === void 0 ? "default" : "pointer";
+		this.invalidate();
+	};
+	onPointerUp = (event) => {
+		this.canvas.releasePointerCapture(event.pointerId);
+		this.drag = void 0;
+		this.overviewDrag = false;
+	};
+	onPointerLeave = () => {
+		this.hover = void 0;
+		this.cursorX = void 0;
+		this.registry.set(hoveredSpanIdAtom, void 0);
+		this.invalidate();
+	};
+	onWheel = (event) => {
+		event.preventDefault();
+		const { x } = this.pointer(event);
+		const total = this.total();
+		if (event.altKey) {
+			this.scrollRows(event.deltaY);
+			return;
+		}
+		if (event.shiftKey) {
+			const perPixel = (this.view.to - this.view.from) / this.width;
+			this.setView(pan(this.view, event.deltaY * perPixel, total));
+			return;
+		}
+		if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {
+			const perPixel = (this.view.to - this.view.from) / this.width;
+			this.setView(pan(this.view, event.deltaX * perPixel, total));
+			return;
+		}
+		const factor = Math.exp(event.deltaY * .002);
+		this.setView(zoom(this.view, this.xToTime(x), factor, total));
+	};
+	/** The bar fill for a nesting depth, cycling through the theme's ramp. */
+	depthFill(depth) {
+		const ramp = this.palette.depth;
+		return ramp[depth % ramp.length] ?? this.palette.labelDim;
+	}
+	draw() {
+		const ctx = this.ctx;
+		ctx.setTransform(this.dpr, 0, 0, this.dpr, 0, 0);
+		ctx.fillStyle = this.palette.bg;
+		ctx.fillRect(0, 0, this.width, this.height);
+		ctx.font = "10px ui-monospace, SFMono-Regular, Menlo, monospace";
+		ctx.textBaseline = "middle";
+		const filter = this.registry.get(filterAtom).toLowerCase();
+		const hides = this.registry.get(filterHidesAtom);
+		const selected = this.registry.get(selectedSpanIdAtom);
+		this.drawOverview(filter);
+		const ticks = this.drawRuler();
+		this.drawMemory();
+		this.drawBars(filter, hides, selected, ticks);
+	}
+	/** The whole-trace strip, with the viewport drawn as a window over it. */
+	drawOverview(filter) {
+		const ctx = this.ctx;
+		const total = this.total();
+		ctx.fillStyle = this.palette.panel;
+		ctx.fillRect(0, 0, this.width, OVERVIEW_HEIGHT);
+		const rows = this.layout.rows.length;
+		if (rows > 0) {
+			const rowHeight = Math.max(30 / rows, .5);
+			for (let rowIndex = 0; rowIndex < rows; rowIndex++) {
+				const row = this.layout.rows[rowIndex];
+				const y = 2 + rowIndex * rowHeight;
+				for (const span of row.spans) {
+					const x0 = span.start / total * this.width;
+					const x1 = spanEnd(span, total) / total * this.width;
+					if (filter !== "" && !matches(span.name, filter)) continue;
+					ctx.fillStyle = this.depthFill(span.depth);
+					ctx.fillRect(x0, y, Math.max(x1 - x0, .5), Math.max(rowHeight - .5, .5));
+				}
+			}
+		}
+		const left = this.view.from / total * this.width;
+		const right = this.view.to / total * this.width;
+		ctx.fillStyle = this.palette.overviewScrim;
+		ctx.fillRect(0, 0, left, OVERVIEW_HEIGHT);
+		ctx.fillRect(right, 0, this.width - right, OVERVIEW_HEIGHT);
+		ctx.strokeStyle = this.palette.overviewWindow;
+		ctx.lineWidth = 1;
+		ctx.strokeRect(left + .5, .5, Math.max(right - left - 1, 1), 33);
+	}
+	/** The time ruler; returns the tick times so the gridlines can reuse them. */
+	drawRuler() {
+		const ctx = this.ctx;
+		const y = OVERVIEW_HEIGHT;
+		ctx.fillStyle = this.palette.bg;
+		ctx.fillRect(0, y, this.width, RULER_HEIGHT);
+		const ticks = tickTimes(this.view.from, this.view.to, this.width);
+		ctx.fillStyle = this.palette.rulerText;
+		ctx.textAlign = "left";
+		for (const time of ticks) {
+			const x = this.timeToX(time);
+			ctx.fillText(formatTick(time, ticks), x + 3, 43);
+		}
+		ctx.strokeStyle = this.palette.grid;
+		ctx.beginPath();
+		ctx.moveTo(0, 51.5);
+		ctx.lineTo(this.width, 51.5);
+		ctx.stroke();
+		return ticks;
+	}
+	/**
+	* The memory track, drawn with this renderer's own `timeToX`.
+	*
+	* Sharing the coordinate function rather than the numbers is what makes the
+	* track x-aligned with the bars at every zoom level: there is no second
+	* viewport to keep in sync, so there is nothing to drift.
+	*/
+	drawMemory() {
+		const height = this.memoryHeight();
+		if (height === 0) return;
+		const top = 52;
+		const cursorTime = this.cursorX === void 0 ? void 0 : this.xToTime(this.cursorX);
+		const collapsed = this.registry.get(memoryCollapsedAtom);
+		drawMemoryTrack({
+			ctx: this.ctx,
+			samples: traceStore.memory,
+			collapsed,
+			top,
+			height,
+			width: this.width,
+			timeToX: (time) => this.timeToX(time),
+			peak: traceStore.memoryPeak,
+			trough: traceStore.memoryTrough,
+			rssPeak: traceStore.memoryRssPeak,
+			traceEnd: this.total(),
+			cursorTime,
+			palette: this.palette
+		});
+		if (collapsed || cursorTime === void 0) return;
+		const sample = sampleAt(traceStore.memory, cursorTime);
+		if (sample === void 0) return;
+		const ctx = this.ctx;
+		ctx.save();
+		const x = Math.round(this.timeToX(sample.time)) + .5;
+		ctx.strokeStyle = this.palette.memoryLabel;
+		ctx.beginPath();
+		ctx.moveTo(x, top);
+		ctx.lineTo(x, top + height);
+		ctx.stroke();
+		const label = `heap ${formatBytes(sample.heapUsed)} · rss ${formatBytes(sample.rss)}`;
+		ctx.textAlign = "left";
+		const textWidth = ctx.measureText(label).width;
+		const labelX = x + 6 + textWidth > this.width ? x - 6 - textWidth : x + 6;
+		ctx.fillStyle = this.palette.readoutBg;
+		ctx.fillRect(labelX - 3, top + height - 16, textWidth + 6, 12);
+		ctx.fillStyle = this.palette.readoutFg;
+		ctx.fillText(label, labelX, top + height - 10);
+		ctx.restore();
+	}
+	drawBars(filter, hides, selected, ticks) {
+		const ctx = this.ctx;
+		const top = this.chartTop();
+		const total = this.total();
+		const hovered = this.hover?.span.spanId;
+		ctx.save();
+		ctx.beginPath();
+		ctx.rect(0, top, this.width, this.height - top);
+		ctx.clip();
+		ctx.strokeStyle = this.palette.grid;
+		ctx.beginPath();
+		for (const time of ticks) {
+			const x = Math.round(this.timeToX(time)) + .5;
+			ctx.moveTo(x, top);
+			ctx.lineTo(x, this.height);
+		}
+		ctx.stroke();
+		const firstRow = Math.max(Math.floor(this.scrollY / ROW_HEIGHT$1), 0);
+		const lastRow = Math.min(Math.ceil((this.scrollY + this.height - top) / ROW_HEIGHT$1), this.layout.rows.length - 1);
+		ctx.textAlign = "left";
+		for (let rowIndex = firstRow; rowIndex <= lastRow; rowIndex++) {
+			const row = this.layout.rows[rowIndex];
+			if (row === void 0) continue;
+			const y = top + rowIndex * ROW_HEIGHT$1 - this.scrollY;
+			forEachVisible(row, this.view.from, this.view.to, total, (span) => {
+				const matched = matches(span.name, filter);
+				if (hides && !matched) return;
+				const x0 = this.timeToX(span.start);
+				const width = Math.max(this.timeToX(spanEnd(span, total)) - x0, 1);
+				const failed = span.outcome?._tag === "Failure";
+				const hot = span.spanId === hovered;
+				ctx.globalAlpha = matched ? 1 : .22;
+				if (failed) ctx.fillStyle = hot ? this.palette.errorHot : this.palette.error;
+				else ctx.fillStyle = hot ? this.palette.labelDim : this.depthFill(span.depth);
+				ctx.fillRect(x0, y, width, 15);
+				if (span.spanId === selected) {
+					ctx.strokeStyle = this.palette.selected;
+					ctx.lineWidth = 1;
+					ctx.strokeRect(x0 + .5, y + .5, Math.max(width - 1, 1), 14);
+				}
+				if (width >= MIN_LABEL_WIDTH) {
+					ctx.save();
+					ctx.beginPath();
+					ctx.rect(x0, y, width - 3, 15);
+					ctx.clip();
+					ctx.fillStyle = matched ? this.palette.label : this.palette.labelDim;
+					ctx.fillText(span.name, x0 + 3, y + 15 / 2);
+					ctx.restore();
+				}
+			});
+			ctx.globalAlpha = 1;
+		}
+		ctx.restore();
+	}
+};
+/**
+* Chooses ruler tick times for a window, at a 1/2/5 step.
+*
+* Exported for testing — it is the only non-obvious arithmetic in the chart
+* and a wrong step makes the ruler lie at some zoom levels.
+*/
+/** Rounds a normalized (1..10) step up to the nearest 1/2/5/10. */
+var niceStep = (normalized) => {
+	if (normalized > 5) return 10;
+	if (normalized > 2) return 5;
+	if (normalized > 1) return 2;
+	return 1;
+};
+/** Decimal places that keep two ticks `step` apart visually distinct. */
+var tickDecimals = (step) => {
+	if (step >= 10) return 0;
+	if (step >= 1) return 1;
+	if (step >= .1) return 2;
+	return 3;
+};
+var tickTimes = (from, to, width) => {
+	const target = Math.max(Math.floor(width / 90), 1);
+	const rough = (to - from) / target;
+	if (!Number.isFinite(rough) || rough <= 0) return [from];
+	const magnitude = 10 ** Math.floor(Math.log10(rough));
+	const step = niceStep(rough / magnitude) * magnitude;
+	const ticks = [];
+	for (let t = Math.ceil(from / step) * step; t <= to; t += step) ticks.push(t);
+	return ticks.length === 0 ? [from] : ticks;
+};
+/** Formats a tick, with enough decimals to keep adjacent ticks distinct. */
+var formatTick = (time, ticks) => {
+	const step = ticks.length > 1 ? Math.abs(ticks[1] - ticks[0]) : Math.abs(time) || 1;
+	if (step >= 1e3) return `${(time / 1e3).toFixed(time % 1e3 === 0 ? 0 : 1)}s`;
+	return `${time.toFixed(tickDecimals(step))}ms`;
+};
+//#endregion
+//#region app/src/components/Shortcuts.tsx
+/**
+* The keyboard-shortcut overlay, opened with `?`.
+*
+* Undiscoverable shortcuts may as well not exist, so this is paired with a
+* permanent `? keys` hint in the chart toolbar — the overlay is the detail, the
+* hint is how anyone finds out the overlay is there.
+*
+* Hand-rolled rather than shadcn's `dialog`. Radix would be a new dependency,
+* it portals to `body` (this overlay is positioned inside the chart container,
+* not over the whole app), and its own Escape handling would race
+* `useKeyboard`, which already dismisses innermost-first. What it would give us
+* that matters — the focus trap and focus restore — is the effect below.
+*/
+var KEYS = [
+	["W / S", "zoom in / out around the cursor"],
+	["A / D", "pan left / right"],
+	["Q / E", "scroll rows up / down"],
+	["0", "reset zoom, follow live data"],
+	["← / →", "previous / next sibling span"],
+	["↑ / ↓", "parent / first child span"],
+	["Enter", "reveal the selected span"],
+	["Esc", "clear the selection"],
+	["?", "this list"]
+];
+var FOCUSABLE = "a[href], button:not([disabled]), input, select, textarea, [tabindex]";
+var Shortcuts = ({ onClose }) => {
+	const dialog = useRef(null);
+	/**
+	* Move focus in, keep it in, and put it back on close.
+	*
+	* Escape is deliberately *not* handled here: `useKeyboard` owns it and closes
+	* the overlay before clearing the selection, so a second handler would only
+	* make the ordering ambiguous.
+	*/
+	useEffect(() => {
+		const restoreTo = document.activeElement;
+		dialog.current?.querySelector(FOCUSABLE)?.focus();
+		const onKeyDown = (event) => {
+			if (event.key !== "Tab") return;
+			const element = dialog.current;
+			if (element === null) return;
+			const focusable = [...element.querySelectorAll(FOCUSABLE)];
+			const first = focusable[0];
+			const last = focusable[focusable.length - 1];
+			if (first === void 0 || last === void 0) return;
+			const leaving = event.shiftKey ? first : last;
+			if (document.activeElement === leaving || !element.contains(document.activeElement)) {
+				event.preventDefault();
+				(event.shiftKey ? last : first).focus();
+			}
+		};
+		globalThis.addEventListener("keydown", onKeyDown, true);
+		return () => {
+			globalThis.removeEventListener("keydown", onKeyDown, true);
+			if (restoreTo instanceof HTMLElement) restoreTo.focus();
+		};
+	}, []);
+	return /* @__PURE__ */ jsx("div", {
+		onClick: onClose,
+		className: "absolute inset-0 z-20 flex items-center justify-center bg-page/80",
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: dialog,
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-label": "Keyboard shortcuts",
+			onClick: (event) => event.stopPropagation(),
+			className: "w-80 rounded-card bg-surface p-4 text-[11px] shadow-overlay",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-baseline justify-between",
+				children: [/* @__PURE__ */ jsx("h2", {
+					className: "text-xs text-ink",
+					children: "Keyboard"
+				}), /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "quiet",
+					size: "xs",
+					onClick: onClose,
+					className: "text-ink-2",
+					children: "close"
+				})]
+			}), /* @__PURE__ */ jsx("dl", {
+				className: "mt-3 grid grid-cols-[5rem_1fr] gap-x-3 gap-y-1.5",
+				children: KEYS.map(([key, description]) => /* @__PURE__ */ jsxs("div", {
+					className: "contents",
+					children: [/* @__PURE__ */ jsx("dt", {
+						className: "tabular-nums text-ink",
+						children: key
+					}), /* @__PURE__ */ jsx("dd", {
+						className: "text-ink-2",
+						children: description
+					})]
+				}, key))
+			})]
+		})
+	});
+};
+//#endregion
+//#region app/src/chart/navigate.ts
+var byStart = (store, ids) => {
+	const spans = [];
+	for (const id of ids) {
+		const span = store.spans.get(id);
+		if (span !== void 0) spans.push(span);
+	}
+	spans.sort((a, b) => a.start - b.start || (a.spanId < b.spanId ? -1 : 1));
+	return spans;
+};
+/**
+* The span's siblings in visual order, including itself.
+*
+* A root's siblings are the other roots: at depth 0 there is no parent to ask,
+* but left/right must still walk the top row.
+*
+* An **orphan** (parent id seen, parent span not yet arrived) is the case worth
+* knowing about: `TraceStore` parks it in `pendingChildren` rather than pushing
+* it to `roots`, so it is drawn at depth 0 but is in nobody's child list. Left
+* and right would dead-end on it — the span is visible and unreachable. So it
+* is grouped with the roots it is drawn beside, which is what the eye expects.
+*/
+var siblingsOf = (store, span) => {
+	const parent = span.parentId === void 0 ? void 0 : store.spans.get(span.parentId);
+	if (parent !== void 0) return byStart(store, parent.children);
+	return byStart(store, span.orphaned ? [...store.roots, span.spanId] : store.roots);
+};
+/**
+* The next span in `direction` from `spanId`, or `undefined` at the edge.
+*
+* Returning `undefined` rather than wrapping or clamping is deliberate: the
+* caller leaves the selection where it is, so holding an arrow key at the end
+* of a row does nothing instead of teleporting to the other end.
+*/
+var step = (store, spanId, direction) => {
+	const span = store.spans.get(spanId);
+	if (span === void 0) return void 0;
+	if (direction === "parent") return span.parentId === void 0 ? void 0 : store.spans.get(span.parentId)?.spanId;
+	if (direction === "child") return byStart(store, span.children)[0]?.spanId;
+	const siblings = siblingsOf(store, span);
+	const index = siblings.findIndex((candidate) => candidate.spanId === spanId);
+	if (index === -1) return void 0;
+	return siblings[direction === "previous" ? index - 1 : index + 1]?.spanId;
+};
+/**
+* A sensible span to select when nothing is selected yet and an arrow is
+* pressed: the earliest root, so the first keystroke lands somewhere visible
+* rather than doing nothing.
+*/
+var firstSpan = (store) => byStart(store, store.roots)[0]?.spanId;
+/**
+* True when a keystroke's target is somewhere it means text, not a command.
+*
+* This is the rule that actually bites: typing `w` in the filter box must type
+* a `w`, not zoom the chart. Checked by element kind rather than by a flag the
+* filter box sets, so every input the app grows — the aggregation tabs' own
+* filters included — is covered without touching the key handler.
+*
+* `isContentEditable` covers rich-text hosts; `closest` catches a keystroke
+* that lands on a child of one. Lives here rather than beside the handler so a
+* plain `bun test` can exercise it without mounting React.
+*/
+var isTypingTarget = (target) => {
+	if (!(target instanceof HTMLElement)) return false;
+	const tag = target.tagName;
+	if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return true;
+	return target.isContentEditable || target.closest("[contenteditable=\"true\"]") !== null;
+};
+//#endregion
+//#region app/src/components/useKeyboard.ts
+/**
+* The chart's keyboard bindings — Chrome DevTools' performance-panel keys.
+*
+* One listener on `window` rather than a focusable canvas: the bindings have to
+* work after clicking an event-log row or a session in the sidebar, and
+* requiring the user to click back onto the chart first would make W/A/S/D feel
+* broken. The cost of that choice is that this handler is responsible for
+* staying out of the way of text entry — see {@link isTypingTarget}.
+*/
+/** Zoom step per W/S press. Matches the wheel's feel over a few presses. */
+var ZOOM_STEP = 1.25;
+/** Pan step per A/D press, as a fraction of the visible window. */
+var PAN_STEP = .12;
+/** Rows scrolled per Q/E press, in CSS pixels (two rows). */
+var ROW_STEP = 32;
+var ARROWS = {
+	ArrowUp: "parent",
+	ArrowDown: "child",
+	ArrowLeft: "previous",
+	ArrowRight: "next"
+};
+/**
+* Binds the chart's keys for as long as the component is mounted.
+*
+* Returns nothing: every effect is a write to the shared selection model or a
+* call onto the mounted renderer, so there is no state for React to hold.
+*/
+var useKeyboard = (onShowHelp, onCloseHelp, helpOpen) => {
+	const registry = useContext(RegistryContext);
+	useEffect(() => {
+		const onKeyDown = (event) => {
+			if (isTypingTarget(event.target)) return;
+			if (event.ctrlKey || event.metaKey || event.altKey) return;
+			const chart = activeChart();
+			const selected = registry.get(selectedSpanIdAtom);
+			const direction = ARROWS[event.key];
+			if (direction !== void 0) {
+				const next = selected === void 0 ? firstSpan(traceStore) : step(traceStore, selected, direction);
+				if (next !== void 0) {
+					registry.set(selectedSpanIdAtom, next);
+					revealSpan(next);
+				}
+				event.preventDefault();
+				return;
+			}
+			switch (event.key) {
+				case "w":
+				case "W":
+					chart?.zoomBy(1 / ZOOM_STEP);
+					break;
+				case "s":
+				case "S":
+					chart?.zoomBy(ZOOM_STEP);
+					break;
+				case "a":
+				case "A":
+					chart?.panBy(-.12);
+					break;
+				case "d":
+				case "D":
+					chart?.panBy(PAN_STEP);
+					break;
+				case "q":
+				case "Q":
+					chart?.scrollRows(-32);
+					break;
+				case "e":
+				case "E":
+					chart?.scrollRows(ROW_STEP);
+					break;
+				case "Enter":
+					if (selected === void 0) {
+						const first = firstSpan(traceStore);
+						if (first !== void 0) {
+							registry.set(selectedSpanIdAtom, first);
+							revealSpan(first);
+						}
+					} else revealSpan(selected);
+					break;
+				case "Escape":
+					if (helpOpen) onCloseHelp();
+					else registry.set(selectedSpanIdAtom, void 0);
+					break;
+				case "0":
+					chart?.resetView();
+					break;
+				case "?":
+					onShowHelp();
+					break;
+				default: return;
+			}
+			event.preventDefault();
+		};
+		globalThis.addEventListener("keydown", onKeyDown);
+		return () => globalThis.removeEventListener("keydown", onKeyDown);
+	}, [
+		registry,
+		onShowHelp,
+		onCloseHelp,
+		helpOpen
+	]);
+};
+//#endregion
+//#region app/src/components/format.ts
+/** Shared number formatting for the chart chrome and the event log. */
+/** Millis, with the unit and precision Chrome's performance panel uses. */
+var formatDuration$1 = (millis) => {
+	if (!Number.isFinite(millis)) return "—";
+	if (millis >= 1e3) return `${(millis / 1e3).toFixed(2)}s`;
+	if (millis >= 1) return `${millis.toFixed(2)}ms`;
+	return `${(millis * 1e3).toFixed(0)}µs`;
+};
+/** An attribute value as one line of text; objects/arrays are JSON, not `[object Object]`. */
+var formatValue = (value) => typeof value === "string" ? value : JSON.stringify(value) ?? String(value);
+//#endregion
+//#region app/src/components/FlameChart.tsx
+/**
+* The canvas flame chart, plus the DOM chrome that floats over it.
+*
+* The canvas itself is owned entirely by {@link FlameRenderer}; this component
+* mounts it, hands it the atom registry, and otherwise does not re-render when
+* the chart repaints. The only DOM here is the hover tooltip and the toolbar,
+* both of which are cheap and genuinely better as DOM than as canvas text.
+*/
+/**
+* Floating hover tooltip.
+*
+* Reads the hovered span **id** from the shared selection model and resolves
+* it against the store, so it cannot show a stale span; position comes from
+* the renderer, which is the only thing that knows where the bar landed.
+*/
+var Tooltip = ({ renderer, containerWidth }) => {
+	const hoveredId = useAtomValue(hoveredSpanIdAtom);
+	if (renderer === void 0 || hoveredId === void 0) return null;
+	const hit = renderer.hovered();
+	if (hit === void 0 || hit.span.spanId !== hoveredId) return null;
+	const span = hit.span;
+	const { total, self } = timings(traceStore, span, traceStore.stats().duration);
+	const attributes = Object.entries(span.attributes).slice(0, 6);
+	const left = Math.min(Math.max(hit.x, 4), Math.max(containerWidth - 264, 4));
+	return /* @__PURE__ */ jsxs("div", {
+		className: "pointer-events-none absolute z-10 w-64 rounded-card border border-[var(--tooltip-border)] bg-[var(--tooltip-bg)] p-2 text-[11px] text-[var(--tooltip-fg)] shadow-overlay",
+		style: {
+			left,
+			top: hit.y + 20
+		},
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "truncate",
+				children: span.name
+			}),
+			/* @__PURE__ */ jsxs("dl", {
+				className: "mt-1.5 grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 text-[var(--tooltip-muted)]",
+				children: [
+					/* @__PURE__ */ jsx("dt", { children: "total" }),
+					/* @__PURE__ */ jsx("dd", {
+						className: "text-right tabular-nums text-[var(--tooltip-fg)]",
+						children: formatDuration$1(total)
+					}),
+					/* @__PURE__ */ jsx("dt", { children: "self" }),
+					/* @__PURE__ */ jsx("dd", {
+						className: "text-right tabular-nums text-[var(--tooltip-fg)]",
+						children: formatDuration$1(self)
+					}),
+					/* @__PURE__ */ jsx("dt", { children: "start" }),
+					/* @__PURE__ */ jsx("dd", {
+						className: "text-right tabular-nums text-[var(--tooltip-fg)]",
+						children: formatDuration$1(span.start)
+					})
+				]
+			}),
+			span.outcome?._tag === "Failure" && /* @__PURE__ */ jsx("p", {
+				className: "mt-1.5 line-clamp-3 border-t border-[var(--tooltip-border)] pt-1.5 text-red",
+				children: span.outcome.error
+			}),
+			attributes.length > 0 && /* @__PURE__ */ jsx("dl", {
+				className: "mt-1.5 grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 border-t border-[var(--tooltip-border)] pt-1.5 text-[var(--tooltip-muted)]",
+				children: attributes.map(([key, value]) => /* @__PURE__ */ jsxs("div", {
+					className: "contents",
+					children: [/* @__PURE__ */ jsx("dt", {
+						className: "truncate",
+						children: key
+					}), /* @__PURE__ */ jsx("dd", {
+						className: "truncate text-right text-[var(--tooltip-fg)]",
+						children: formatValue(value)
+					})]
+				}, key))
+			})
+		]
+	});
+};
+/** Filter box and view controls; writes the shared filter atoms. */
+var Toolbar = ({ onReset, onShowHelp }) => {
+	const [filter, setFilter] = useAtom(filterAtom);
+	const [hides, setHides] = useAtom(filterHidesAtom);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex h-8 shrink-0 items-center gap-2 border-b border-line bg-surface px-2",
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				value: filter,
+				onChange: (event) => setFilter(event.target.value),
+				placeholder: "Filter spans…",
+				"aria-label": "Filter spans",
+				className: "h-6 w-56 rounded-control bg-field px-2 text-xs text-ink shadow-hairline placeholder:text-ink-3"
+			}),
+			/* @__PURE__ */ jsxs("label", {
+				className: "flex items-center gap-1.5 text-[11px] text-ink-2",
+				children: [/* @__PURE__ */ jsx("input", {
+					type: "checkbox",
+					checked: hides,
+					onChange: (event) => setHides(event.target.checked),
+					className: "accent-accent"
+				}), "hide non-matching"]
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				variant: "quiet",
+				size: "xs",
+				onClick: onReset,
+				className: "ml-auto text-ink-2",
+				children: "reset zoom"
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				variant: "quiet",
+				size: "xs",
+				onClick: onShowHelp,
+				"aria-label": "Keyboard shortcuts",
+				className: "text-ink-2",
+				children: "? keys"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-[11px] text-ink-3",
+				children: "drag to pan · wheel to zoom · W/A/S/D"
+			})
+		]
+	});
+};
+var FlameChart = () => {
+	const registry = useContext(RegistryContext);
+	const canvasRef = useRef(null);
+	const containerRef = useRef(null);
+	const [renderer, setRenderer] = useState();
+	const [width, setWidth] = useState(0);
+	const [helpOpen, setHelpOpen] = useState(false);
+	useEffect(() => {
+		const canvas = canvasRef.current;
+		if (canvas === null) return;
+		const instance = new FlameRenderer(canvas, registry);
+		setRenderer(instance);
+		const observer = new ResizeObserver(([entry]) => setWidth(entry?.contentRect.width ?? 0));
+		if (containerRef.current !== null) observer.observe(containerRef.current);
+		return () => {
+			observer.disconnect();
+			instance.dispose();
+			setRenderer(void 0);
+		};
+	}, [registry]);
+	useEffect(() => {
+		activeRenderer = renderer;
+		return () => {
+			if (activeRenderer === renderer) activeRenderer = void 0;
+		};
+	}, [renderer]);
+	const showHelp = useCallback(() => setHelpOpen(true), []);
+	const closeHelp = useCallback(() => setHelpOpen(false), []);
+	useKeyboard(showHelp, closeHelp, helpOpen);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-h-0 flex-1 flex-col",
+		children: [/* @__PURE__ */ jsx(Toolbar, {
+			onReset: () => renderer?.resetView(),
+			onShowHelp: showHelp
+		}), /* @__PURE__ */ jsxs("div", {
+			ref: containerRef,
+			className: "relative min-h-0 flex-1",
+			children: [
+				/* @__PURE__ */ jsx("canvas", {
+					ref: canvasRef,
+					className: "absolute inset-0 size-full touch-none"
+				}),
+				/* @__PURE__ */ jsx(Tooltip, {
+					renderer,
+					containerWidth: width
+				}),
+				helpOpen && /* @__PURE__ */ jsx(Shortcuts, { onClose: closeHelp })
+			]
+		})]
+	});
+};
+/** The mounted chart, if any — see the comment at its assignment. */
+var activeRenderer;
+/** Centres the chart on a span. No-op when the chart is not mounted. */
+var revealSpan = (spanId) => activeRenderer?.revealSpan(spanId);
+/**
+* The mounted renderer, for the keyboard bindings.
+*
+* Same module-level handle `revealSpan` already uses, exposed because the key
+* handler needs several of the renderer's transitions rather than one, and
+* wrapping each in its own free function would be five of these.
+*/
+var activeChart = () => activeRenderer;
+/**
+* The chart's current time window, or `undefined` when no chart is mounted.
+*
+* Read by the drawer's aggregation tabs, which follow the visible range the
+* way Chrome does. They **poll** this on a settle timer rather than being
+* pushed every viewport change: the viewport moves once per pan frame and
+* aggregating 13k spans at that rate would stutter, so the drawer samples a
+* settled window instead of subscribing to a moving one.
+*/
+var chartViewport = () => activeRenderer?.viewport();
+//#endregion
+//#region app/src/components/EventLog.tsx
+/**
+* The bottom drawer's Event log tab: every span as a sortable, filterable row.
+*
+* Selection is **not** synced with the flame chart — it is the same value.
+* Both read and write `selectedSpanIdAtom`, so a click here moves the chart
+* and a click there scrolls this table, with no effect wiring in between and
+* nothing that can drift.
+*
+* Rows are windowed rather than all mounted: a 10k-span trace is 10k table
+* rows, which is exactly the DOM-node-per-span cost the chart exists to avoid.
+* Only the ~40 rows in the scroll window are real elements; the rest is two
+* spacer heights.
+*/
+var ROW_HEIGHT = 22;
+/** Rows rendered beyond the scroll window, so fast scrolling does not flash. */
+var OVERSCAN = 8;
+/**
+* The shared table chrome, lifted from the registry's `records-table` and
+* `filter-table`: a sticky header on the panel surface, a strong rule under
+* it, hover and selection as background changes on the row.
+*
+* `primitive-table-cell` is deliberately *not* used — it is 10px/12px padding
+* for a roomy demo grid, and these rows are a fixed 22px so the virtualizer
+* can multiply by them. The tokens are the part worth sharing, not the metric.
+*/
+var TABLE_HEAD = "flex shrink-0 border-b border-line-strong bg-surface px-2 text-ink-3";
+/** Header cell: quiet until hovered, full ink once it is the sort key. */
+var headCellClass = (active) => `py-1 text-left transition-colors hover:text-ink ${active ? "text-ink" : ""}`;
+/** Selected row wash — `records-table`'s accent mix over the panel surface. */
+var SELECTED = "color-mix(in srgb, var(--accent) 10%, var(--surface))";
+/**
+* Row background, in precedence order: selected, hovered, then the zebra
+* stripe. The stripe is foundation's `--stripe` over `--stripe-bg`, which is
+* what makes a dense numeric table scannable across its columns.
+*/
+var rowBackground = (selected, hovered, even) => {
+	if (selected) return SELECTED;
+	if (hovered) return "var(--hover)";
+	return even ? void 0 : "var(--stripe)";
+};
+var COLUMNS = [
+	{
+		key: "start",
+		label: "Start"
+	},
+	{
+		key: "self",
+		label: "Self"
+	},
+	{
+		key: "total",
+		label: "Total"
+	},
+	{
+		key: "name",
+		label: "Name"
+	}
+];
+var compare = (key, a, b) => {
+	if (key === "name") return a.span.name.localeCompare(b.span.name);
+	if (key === "start") return a.span.start - b.span.start;
+	return a[key] - b[key];
+};
+var EventLog = () => {
+	const version = useAtomValue(traceVersionAtom);
+	const filter = useAtomValue(filterAtom);
+	const hides = useAtomValue(filterHidesAtom);
+	const [selectedId, setSelectedId] = useAtom(selectedSpanIdAtom);
+	const [hoveredId, setHoveredId] = useAtom(hoveredSpanIdAtom);
+	const [sort, setSort] = useState({
+		key: "start",
+		desc: false
+	});
+	const [scrollTop, setScrollTop] = useState(0);
+	const [viewHeight, setViewHeight] = useState(0);
+	const scrollRef = useRef(null);
+	const rows = useMemo(() => {
+		const now = traceStore.stats().duration;
+		const needle = filter.toLowerCase();
+		const list = [];
+		for (const span of traceStore.spans.values()) {
+			const matched = matches(span.name, needle);
+			if (hides && !matched) continue;
+			list.push({
+				span,
+				matched,
+				...timings(traceStore, span, now)
+			});
+		}
+		list.sort((a, b) => (sort.desc ? -1 : 1) * compare(sort.key, a, b));
+		return list;
+	}, [
+		version,
+		filter,
+		hides,
+		sort
+	]);
+	useEffect(() => {
+		const element = scrollRef.current;
+		if (element === null) return;
+		const observer = new ResizeObserver(([entry]) => setViewHeight(entry?.contentRect.height ?? 0));
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, []);
+	useEffect(() => {
+		const element = scrollRef.current;
+		if (element === null || selectedId === void 0) return;
+		const index = rows.findIndex((row) => row.span.spanId === selectedId);
+		if (index === -1) return;
+		const top = index * ROW_HEIGHT;
+		if (top < element.scrollTop || top + ROW_HEIGHT > element.scrollTop + element.clientHeight) element.scrollTop = top - element.clientHeight / 2;
+	}, [selectedId, rows]);
+	const first = Math.max(Math.floor(scrollTop / ROW_HEIGHT) - OVERSCAN, 0);
+	const last = Math.min(Math.ceil((scrollTop + viewHeight) / ROW_HEIGHT) + OVERSCAN, rows.length);
+	const visible = rows.slice(first, last);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-h-0 flex-1 flex-col text-[11px]",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: TABLE_HEAD,
+			children: COLUMNS.map((column) => /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: () => setSort((current) => current.key === column.key ? {
+					key: column.key,
+					desc: !current.desc
+				} : {
+					key: column.key,
+					desc: column.key !== "name" && column.key !== "start"
+				}),
+				className: `${headCellClass(sort.key === column.key)} ${column.key === "name" ? "flex-1 pl-3" : "w-24 pr-3 text-right"}`,
+				children: [column.label, sort.key === column.key && (sort.desc ? " ↓" : " ↑")]
+			}, column.key))
+		}), /* @__PURE__ */ jsx("div", {
+			ref: scrollRef,
+			onScroll: (event) => setScrollTop(event.currentTarget.scrollTop),
+			className: "min-h-0 flex-1 overflow-y-auto",
+			children: rows.length === 0 ? /* @__PURE__ */ jsx("p", {
+				className: "px-3 py-2 text-ink-3",
+				children: "No spans match."
+			}) : /* @__PURE__ */ jsx("div", {
+				style: {
+					height: rows.length * ROW_HEIGHT,
+					position: "relative"
+				},
+				children: /* @__PURE__ */ jsx("div", {
+					style: { transform: `translateY(${first * ROW_HEIGHT}px)` },
+					children: visible.map((row, index) => {
+						const id = row.span.spanId;
+						const failed = row.span.outcome?._tag === "Failure";
+						const selected = id === selectedId;
+						return /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							onClick: () => {
+								setSelectedId(id);
+								revealSpan(id);
+							},
+							onMouseEnter: () => setHoveredId(id),
+							onMouseLeave: () => setHoveredId(void 0),
+							style: {
+								height: ROW_HEIGHT,
+								background: rowBackground(selected, id === hoveredId, (first + index) % 2 === 0)
+							},
+							className: `flex w-full items-center px-2 text-left tabular-nums transition-colors ${selected ? "text-ink" : ""} ${row.matched ? "text-ink-2" : "text-ink-3"}`,
+							children: [
+								/* @__PURE__ */ jsx("span", {
+									className: "w-24 pr-3 text-right",
+									children: formatDuration$1(row.span.start)
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "w-24 pr-3 text-right",
+									children: formatDuration$1(row.self)
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "w-24 pr-3 text-right",
+									children: formatDuration$1(row.total)
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: `flex-1 truncate pl-3 ${failed ? "text-red" : "text-ink"}`,
+									children: row.span.name
+								})
+							]
+						}, id);
+					})
+				})
+			})
+		})]
+	});
+};
+//#endregion
+//#region app/src/components/Aggregation.tsx
+/**
+* The drawer's Summary, Bottom-up and Call tree tabs.
+*
+* All three read one {@link Aggregation}, built by `aggregate.ts`, so they
+* cannot disagree about a number. They are in one file because they are one
+* feature: a shared hook, a shared row chrome, and three ~30-line bodies.
+*
+* Selection is the *existing* model — `selectedSpanIdAtom` plus `revealSpan`,
+* exactly what the Event log uses. A row selects a representative span of its
+* group, which is what Chrome does when you click an aggregated row.
+*/
+/** How often the drawer samples the chart's viewport. Not a frame — a gesture. */
+var VIEWPORT_POLL_MS = 150;
+/**
+* The chart's time window, sampled rather than subscribed.
+*
+* The viewport moves once per pan frame; aggregating 13k spans at that rate
+* would put the drawer in the chart's frame budget, which the task forbids. So
+* this polls on a coarse timer and only re-renders when the window actually
+* moved — a drag produces a handful of rebuilds, not one per frame.
+*/
+var useViewport = () => {
+	const [view, setView] = useState(() => chartViewport() ?? {
+		from: -Infinity,
+		to: Infinity
+	});
+	useEffect(() => {
+		const id = setInterval(() => {
+			const next = chartViewport();
+			if (next === void 0) return;
+			setView((current) => current.from === next.from && current.to === next.to ? current : next);
+		}, VIEWPORT_POLL_MS);
+		return () => clearInterval(id);
+	}, []);
+	return view;
+};
+/**
+* The aggregation for the current viewport, filter and trace version.
+*
+* Memoised on exactly those four inputs, so a repaint, a hover or a selection
+* change costs nothing and only real data or real navigation rebuilds it.
+*/
+var useAggregation = () => {
+	const version = useAtomValue(traceVersionAtom);
+	const filter = useAtomValue(filterAtom);
+	const hides = useAtomValue(filterHidesAtom);
+	const view = useViewport();
+	return useMemo(() => aggregate(traceStore, view.from, view.to, filter, hides), [
+		version,
+		view.from,
+		view.to,
+		filter,
+		hides
+	]);
+};
+/**
+* Nothing in the aggregation window.
+*
+* Unlike the other empty states this one is almost always *reachable* — it
+* means the current filter or zoom excluded everything, not that the trace is
+* empty — so the hint names the two controls that caused it.
+*/
+var Empty = () => /* @__PURE__ */ jsx(Empty$1, {
+	icon: FilterX,
+	title: "No spans in view",
+	hint: "These tabs aggregate the chart's visible range. Reset the zoom, or clear the filter, to widen it."
+});
+/** Right-aligned numeric cell, the same width in all three tabs. */
+var Cell = ({ children }) => /* @__PURE__ */ jsx("span", {
+	className: "w-20 shrink-0 pr-3 text-right tabular-nums",
+	children
+});
+/** The Event log's header, plus the row padding the trees want. */
+var HEAD = `${TABLE_HEAD} py-1 text-[11px]`;
+var SCROLL = "min-h-0 flex-1 overflow-y-auto text-[11px]";
+/**
+* Row chrome, shared with the Event log so the four tabs read as one table.
+*
+* These rows are not virtualized — the tree is small and already collapsed —
+* so unlike the Event log the zebra can key off the DOM with `even:`, and
+* hovering is a CSS state rather than the atom the chart also listens to.
+*/
+var rowClass = (selected, dimmed) => `flex w-full items-center px-2 text-left tabular-nums transition-colors odd:bg-[var(--stripe)] hover:bg-[var(--hover)] ${selected ? "text-ink" : ""} ${dimmed ? "text-ink-3" : "text-ink-2"}`;
+/** Selected rows take the Event log's wash, which must beat the zebra. */
+var rowStyle = (selected) => selected ? { background: rowBackground(true, false, false) } : {};
+var Summary = () => {
+	const { summary } = useAggregation();
+	const filter = useAtomValue(filterAtom);
+	const [selectedId, setSelectedId] = useAtom(selectedSpanIdAtom);
+	const [sort, setSort] = useState({
+		key: "self",
+		desc: true
+	});
+	const rows = useMemo(() => {
+		const compare = (a, b) => sort.key === "name" ? a.name.localeCompare(b.name) : a[sort.key] - b[sort.key];
+		return [...summary].sort((a, b) => (sort.desc ? -1 : 1) * compare(a, b));
+	}, [summary, sort]);
+	if (rows.length === 0) return /* @__PURE__ */ jsx(Empty, {});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-h-0 flex-1 flex-col",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: HEAD,
+			children: [
+				{
+					key: "count",
+					label: "Count"
+				},
+				{
+					key: "total",
+					label: "Total"
+				},
+				{
+					key: "self",
+					label: "Self"
+				},
+				{
+					key: "average",
+					label: "Avg"
+				},
+				{
+					key: "name",
+					label: "Name"
+				}
+			].map((column) => /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: () => setSort((current) => current.key === column.key ? {
+					key: column.key,
+					desc: !current.desc
+				} : {
+					key: column.key,
+					desc: column.key !== "name"
+				}),
+				className: `${headCellClass(sort.key === column.key)} py-0 ${column.key === "name" ? "flex-1 pl-3" : "w-20 pr-3 text-right"}`,
+				children: [column.label, sort.key === column.key && (sort.desc ? " ↓" : " ↑")]
+			}, column.key))
+		}), /* @__PURE__ */ jsx("div", {
+			className: SCROLL,
+			children: rows.map((row) => /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				onClick: () => setSelectedId(row.spanId),
+				className: rowClass(row.spanId === selectedId, !matches(row.name, filter.toLowerCase())),
+				style: {
+					height: 22,
+					...rowStyle(row.spanId === selectedId)
+				},
+				children: [
+					/* @__PURE__ */ jsx(Cell, { children: row.count }),
+					/* @__PURE__ */ jsx(Cell, { children: formatDuration$1(row.total) }),
+					/* @__PURE__ */ jsx(Cell, { children: formatDuration$1(row.self) }),
+					/* @__PURE__ */ jsx(Cell, { children: formatDuration$1(row.average) }),
+					/* @__PURE__ */ jsx("span", {
+						className: `flex-1 truncate pl-3 ${row.failed ? "text-red" : ""}`,
+						children: row.name
+					})
+				]
+			}, row.name))
+		})]
+	});
+};
+/**
+* One node of either tree, plus its expanded descendants.
+*
+* Expansion state is a set of node ids held by the tree, not per-node state:
+* the tree is rebuilt whenever the viewport or the trace moves, so a node
+* component cannot hold anything across a rebuild. Node ids are name paths,
+* which survive a rebuild as long as the path still exists.
+*/
+/** Disclosure marker: nothing for a leaf, a caret for a node. */
+var marker = (hasChildren, open) => {
+	if (!hasChildren) return "";
+	return open ? "▾" : "▸";
+};
+var Row = ({ node, depth, expanded, onToggle }) => {
+	const [selectedId, setSelectedId] = useAtom(selectedSpanIdAtom);
+	const filter = useAtomValue(filterAtom);
+	const open = expanded.has(node.id);
+	const hasChildren = node.children.length > 0;
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: () => {
+			setSelectedId(node.spanId);
+			if (hasChildren) onToggle(node.id);
+		},
+		className: rowClass(node.spanId === selectedId, !matches(node.name, filter.toLowerCase())),
+		style: {
+			height: 22,
+			...rowStyle(node.spanId === selectedId)
+		},
+		children: [
+			/* @__PURE__ */ jsx(Cell, { children: node.count }),
+			/* @__PURE__ */ jsx(Cell, { children: formatDuration$1(node.total) }),
+			/* @__PURE__ */ jsx(Cell, { children: formatDuration$1(node.self) }),
+			/* @__PURE__ */ jsxs("span", {
+				className: `flex-1 truncate pl-3 ${node.failed ? "text-red" : ""}`,
+				style: { paddingLeft: depth * 12 + 12 },
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "inline-block w-3 text-ink-3",
+					children: marker(hasChildren, open)
+				}), node.name]
+			})
+		]
+	}), open && node.children.map((child) => /* @__PURE__ */ jsx(Row, {
+		node: child,
+		depth: depth + 1,
+		expanded,
+		onToggle
+	}, child.id))] });
+};
+/** Shared body for the two trees; only the roots and the header differ. */
+var Tree = ({ roots, selfLabel }) => {
+	const [expanded, setExpanded] = useState(/* @__PURE__ */ new Set());
+	const toggle = (id) => setExpanded((current) => {
+		const next = new Set(current);
+		if (!next.delete(id)) next.add(id);
+		return next;
+	});
+	if (roots.length === 0) return /* @__PURE__ */ jsx(Empty, {});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-h-0 flex-1 flex-col",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: HEAD,
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "w-20 pr-3 text-right",
+					children: "Count"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "w-20 pr-3 text-right",
+					children: "Total"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "w-20 pr-3 text-right",
+					children: selfLabel
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "flex-1 pl-3",
+					children: "Name"
+				})
+			]
+		}), /* @__PURE__ */ jsx("div", {
+			className: SCROLL,
+			children: roots.map((node) => /* @__PURE__ */ jsx(Row, {
+				node,
+				depth: 0,
+				expanded,
+				onToggle: toggle
+			}, node.id))
+		})]
+	});
+};
+/** Root-first: expand a node to see what it called. */
+var CallTree = () => /* @__PURE__ */ jsx(Tree, {
+	roots: useAggregation().callTree,
+	selfLabel: "Self"
+});
+/** Leaf-first: expand a name to see who called it. */
+var BottomUp = () => /* @__PURE__ */ jsx(Tree, {
+	roots: useAggregation().bottomUp,
+	selfLabel: "Self"
+});
+//#endregion
+//#region app/src/components/Drawer.tsx
+/**
+* The bottom tabbed drawer.
+*
+* Four tabs over one trace: the Event log is per span, the other three are
+* aggregations of the visible range. Only the active tab is mounted, so a
+* closed Summary costs nothing — the aggregation is built by the tab, not by
+* the drawer.
+*
+* The tab bar is hand-rolled rather than `@radix-ui/react-tabs`. Radix would
+* be a new dependency to render four buttons, and its `TabsContent` keeps a
+* panel per tab — the opposite of the mount-only-the-active-tab decision above.
+* The roles and the roving tabindex below are the whole of what it would buy.
+*/
+var TABS = [
+	{
+		id: "log",
+		label: "Event log",
+		render: () => /* @__PURE__ */ jsx(EventLog, {})
+	},
+	{
+		id: "summary",
+		label: "Summary",
+		render: () => /* @__PURE__ */ jsx(Summary, {})
+	},
+	{
+		id: "bottom-up",
+		label: "Bottom-up",
+		render: () => /* @__PURE__ */ jsx(BottomUp, {})
+	},
+	{
+		id: "call-tree",
+		label: "Call tree",
+		render: () => /* @__PURE__ */ jsx(CallTree, {})
+	}
+];
+/** Arrow-key step within the tab list, wrapping at both ends. */
+var STEP = {
+	ArrowLeft: -1,
+	ArrowRight: 1
+};
+var Drawer = () => {
+	const [height, setHeight] = useState(220);
+	const [collapsed, setCollapsed] = useState(false);
+	const [active, setActive] = useState("log");
+	const tabList = useRef(null);
+	/**
+	* Drag the top edge to resize. Pointer capture so it survives leaving the bar.
+	*
+	* Capturing redirects the `pointerup` to the bar, so no `click` ever fires on
+	* a control inside it. The guard therefore lives **here**, on the bar, rather
+	* than as a `stopPropagation` on each child: a drag only starts when the
+	* pointer landed on the bar itself, so every button in the bar — present and
+	* future — stays clickable without having to remember to opt out.
+	*/
+	const onPointerDown = (event) => {
+		if (event.target !== event.currentTarget) return;
+		event.currentTarget.setPointerCapture(event.pointerId);
+		const startY = event.clientY;
+		const startHeight = height;
+		const move = (moveEvent) => {
+			setHeight(Math.min(Math.max(startHeight - (moveEvent.clientY - startY), 80), 600));
+		};
+		const up = () => {
+			globalThis.removeEventListener("pointermove", move);
+			globalThis.removeEventListener("pointerup", up);
+		};
+		globalThis.addEventListener("pointermove", move);
+		globalThis.addEventListener("pointerup", up);
+	};
+	/**
+	* Arrow keys move the selection, as the tabs pattern requires.
+	*
+	* Only the active tab is reachable with Tab (the roving tabindex below), so
+	* without this the other three would be unreachable from the keyboard.
+	* Focus has to move with the selection or the next arrow press is read by
+	* whatever still holds focus.
+	*/
+	const onKeyDown = (event) => {
+		const step = STEP[event.key];
+		if (step === void 0) return;
+		event.preventDefault();
+		const next = TABS[(TABS.findIndex((tab) => tab.id === active) + step + TABS.length) % TABS.length];
+		setActive(next.id);
+		tabList.current?.querySelector(`[data-tab="${next.id}"]`)?.focus();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex shrink-0 flex-col border-t border-line bg-surface",
+		style: { height: collapsed ? "auto" : height },
+		children: [/* @__PURE__ */ jsxs("div", {
+			onPointerDown: collapsed ? void 0 : onPointerDown,
+			className: `flex h-8 shrink-0 items-center gap-1 px-2 ${collapsed ? "" : "cursor-row-resize"}`,
+			children: [/* @__PURE__ */ jsx("div", {
+				ref: tabList,
+				role: "tablist",
+				"aria-label": "Trace views",
+				onKeyDown,
+				className: "flex items-center gap-1",
+				children: TABS.map((tab) => {
+					const selected = tab.id === active;
+					return /* @__PURE__ */ jsx("button", {
+						type: "button",
+						role: "tab",
+						id: `drawer-tab-${tab.id}`,
+						"data-tab": tab.id,
+						"aria-selected": selected,
+						"aria-controls": "drawer-panel",
+						tabIndex: selected ? 0 : -1,
+						onClick: () => setActive(tab.id),
+						className: `rounded-chip px-2 py-1 text-[11px] transition-colors ${selected ? "bg-hover text-ink" : "text-ink-3 hover:bg-hover hover:text-ink-2"}`,
+						children: tab.label
+					}, tab.id);
+				})
+			}), /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "quiet",
+				size: "xs",
+				onClick: () => setCollapsed((value) => !value),
+				"aria-expanded": !collapsed,
+				"aria-controls": "drawer-panel",
+				className: "ml-auto text-ink-3 hover:text-ink",
+				children: collapsed ? "expand" : "collapse"
+			})]
+		}), !collapsed && /* @__PURE__ */ jsx("div", {
+			id: "drawer-panel",
+			role: "tabpanel",
+			"aria-labelledby": `drawer-tab-${active}`,
+			className: "flex min-h-0 flex-1 flex-col",
+			children: TABS.find((tab) => tab.id === active).render()
+		})]
+	});
+};
+//#endregion
+//#region app/src/components/SpanDetail.tsx
+/**
+* Detail panel for the selected span — the full record the tooltip truncates.
+*
+* Reads the shared `selectedSpanIdAtom` and resolves the id against the store
+* on each render, so a re-depthed or newly-ended span shows its current state
+* rather than a snapshot taken at click time.
+*/
+var Field = ({ label, value }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("dt", {
+	className: "truncate text-ink-3",
+	children: label
+}), /* @__PURE__ */ jsx("dd", {
+	className: "truncate text-right tabular-nums text-ink",
+	children: value
+})] });
+/** The panel's own chrome, matching the sidebar and drawer it sits beside. */
+var PANEL = "flex w-72 shrink-0 flex-col border-l border-line bg-surface text-[11px]";
+/** Section rule, so every block in the panel divides the same way. */
+var SECTION = "border-b border-line px-2.5 py-2";
+/** Small uppercase section label — the panel's only non-data type. */
+var LABEL = "mb-1 text-[10px] uppercase tracking-wider text-ink-3";
+/**
+* The failure block's red wash, as a flat `background-image` over the panel's
+* opaque `bg-surface`.
+*
+* Foundation's `-tint` tokens are translucent in dark (`… / 0.14`), so using
+* one as a `background-color` here would let the chart behind the panel read
+* through in dark only. Same fix, same reason, as `tintWash` in `TraceFile`.
+*/
+var redWash = { backgroundImage: "linear-gradient(var(--red-tint), var(--red-tint))" };
+/**
+* The panel's frame: one header row carrying every panel-level control, then
+* whatever fills it.
+*
+* Clear-selection lives *here* rather than beside the span's name. With the
+* panel header added, a `✕` in the first content block sat directly under the
+* collapse chevron — two dismissal-shaped controls, one above the other, doing
+* different things. Both belong to the panel, so both belong in its header,
+* ordered clear-then-collapse: the narrower action first.
+*/
+var Frame = ({ onToggle, onClear, title, children }) => /* @__PURE__ */ jsxs("aside", {
+	id: "detail-panel",
+	className: PANEL,
+	children: [/* @__PURE__ */ jsxs(PanelHeader, {
+		title,
+		children: [onClear !== void 0 && /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "quiet",
+			size: "xs",
+			onClick: onClear,
+			"aria-label": "Clear selection",
+			title: "Clear selection",
+			className: "size-6 shrink-0 px-0 text-ink-3 hover:text-ink",
+			children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
+		}), /* @__PURE__ */ jsx(CollapseButton, {
+			edge: "right",
+			collapsed: false,
+			onToggle,
+			label: "Hide span detail",
+			controls: "detail-panel"
+		})]
+	}), /* @__PURE__ */ jsx("div", {
+		className: "min-h-0 flex-1 overflow-y-auto",
+		children
+	})]
+});
+var SpanDetail = () => {
+	const [selectedId, setSelectedId] = useAtom(selectedSpanIdAtom);
+	const [collapsed, toggle] = usePanel("detail");
+	useAtomValue(traceVersionAtom);
+	if (collapsed) return /* @__PURE__ */ jsx(CollapsedRail, {
+		edge: "right",
+		title: "Span",
+		onToggle: toggle,
+		id: "detail-panel"
+	});
+	if (selectedId === void 0) return /* @__PURE__ */ jsx(Frame, {
+		onToggle: toggle,
+		title: "Span",
+		children: /* @__PURE__ */ jsx(Empty$1, {
+			icon: MousePointerClick,
+			title: "No span selected",
+			hint: "Click a bar in the flame chart, or a row in the event log, to see its timings, attributes and logs."
+		})
+	});
+	const span = traceStore.spans.get(selectedId);
+	if (span === void 0) return /* @__PURE__ */ jsx(Frame, {
+		onToggle: toggle,
+		title: "Span",
+		children: /* @__PURE__ */ jsx(Empty$1, {
+			icon: SearchX,
+			title: "Span no longer in the trace",
+			hint: "The collector's backlog rolled past it. Select another span, or reload to start a fresh trace."
+		})
+	});
+	const now = traceStore.stats().duration;
+	const { total, self } = timings(traceStore, span, now);
+	const attributes = Object.entries(span.attributes);
+	const logs = traceStore.logs.filter((log) => log.spanId === span.spanId);
+	return /* @__PURE__ */ jsxs(Frame, {
+		onToggle: toggle,
+		onClear: () => setSelectedId(void 0),
+		title: "Span",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: SECTION,
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "break-words text-ink",
+					children: span.name
+				}), /* @__PURE__ */ jsx("p", {
+					className: "mt-0.5 text-ink-3",
+					children: span.kind
+				})]
+			}),
+			/* @__PURE__ */ jsxs("dl", {
+				className: `grid grid-cols-[auto_1fr] gap-x-3 gap-y-1 ${SECTION}`,
+				children: [
+					/* @__PURE__ */ jsx(Field, {
+						label: "start",
+						value: formatDuration$1(span.start)
+					}),
+					/* @__PURE__ */ jsx(Field, {
+						label: "total",
+						value: formatDuration$1(total)
+					}),
+					/* @__PURE__ */ jsx(Field, {
+						label: "self",
+						value: formatDuration$1(self)
+					}),
+					/* @__PURE__ */ jsx(Field, {
+						label: "depth",
+						value: String(span.depth)
+					}),
+					/* @__PURE__ */ jsx(Field, {
+						label: "children",
+						value: String(span.children.length)
+					}),
+					span.fiberId !== void 0 && /* @__PURE__ */ jsx(Field, {
+						label: "fiber",
+						value: String(span.fiberId)
+					}),
+					/* @__PURE__ */ jsx(Field, {
+						label: "state",
+						value: span.end === void 0 ? "running" : "ended"
+					})
+				]
+			}),
+			span.outcome?._tag === "Failure" && /* @__PURE__ */ jsxs("div", {
+				className: SECTION,
+				style: redWash,
+				children: [
+					/* @__PURE__ */ jsx("p", {
+						className: "text-ink-2",
+						children: span.outcome.kind
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "mt-1 break-words text-red",
+						children: span.outcome.error
+					}),
+					span.outcome.stack !== void 0 && /* @__PURE__ */ jsx("pre", {
+						className: "mt-1.5 overflow-x-auto rounded-chip bg-inset p-2 text-[10px] leading-[1.6] whitespace-pre-wrap text-ink-2",
+						children: span.outcome.stack
+					})
+				]
+			}),
+			attributes.length > 0 && /* @__PURE__ */ jsxs("div", {
+				className: SECTION,
+				children: [/* @__PURE__ */ jsx("p", {
+					className: LABEL,
+					children: "Attributes"
+				}), /* @__PURE__ */ jsx("dl", {
+					className: "grid grid-cols-[auto_1fr] gap-x-3 gap-y-1",
+					children: attributes.map(([key, value]) => /* @__PURE__ */ jsxs("div", {
+						className: "contents",
+						children: [/* @__PURE__ */ jsx("dt", {
+							className: "truncate text-ink-3",
+							children: key
+						}), /* @__PURE__ */ jsx("dd", {
+							className: "break-words text-right text-ink-2",
+							children: formatValue(value)
+						})]
+					}, key))
+				})]
+			}),
+			span.events.length > 0 && /* @__PURE__ */ jsxs("div", {
+				className: SECTION,
+				children: [/* @__PURE__ */ jsx("p", {
+					className: LABEL,
+					children: "Events"
+				}), span.events.map((event, index) => /* @__PURE__ */ jsxs("div", {
+					className: "flex justify-between gap-2 py-0.5",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "truncate text-ink-2",
+						children: event.name
+					}), /* @__PURE__ */ jsx("span", {
+						className: "shrink-0 tabular-nums text-ink-3",
+						children: formatDuration$1(event.time - span.start)
+					})]
+				}, `${event.name}-${index}`))]
+			}),
+			logs.length > 0 && /* @__PURE__ */ jsxs("div", {
+				className: "px-2.5 py-2",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: LABEL,
+					children: "Logs"
+				}), logs.map((log, index) => /* @__PURE__ */ jsxs("div", {
+					className: "py-0.5",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: log.level === "Error" ? "text-red" : "text-ink-3",
+							children: log.level
+						}),
+						" ",
+						/* @__PURE__ */ jsx("span", {
+							className: "text-ink-2",
+							children: formatValue(log.message)
+						})
+					]
+				}, index))]
+			})
+		]
+	});
+};
+//#endregion
+//#region app/src/components/ThemeToggle.tsx
+/**
+* The theme control: a three-state segmented switch for `light | dark | system`.
+*
+* A segmented group rather than a single cycling button, because the
+* preference has three values and `system` is not a state you can discover by
+* clicking through — with three radios the current choice and the available
+* choices are both visible at once.
+*
+* It is a `radiogroup`, so a screen reader announces "3 of 3, system,
+* selected", and arrow keys move between options the way a native radio group
+* does. Only the checked option is in the tab order (`tabIndex`), which is the
+* standard roving-tabindex pattern — Tab reaches the group, arrows move inside it.
+*/
+var OPTIONS = [
+	{
+		value: "light",
+		label: "Light",
+		Icon: Sun
+	},
+	{
+		value: "dark",
+		label: "Dark",
+		Icon: Moon
+	},
+	{
+		value: "system",
+		label: "System",
+		Icon: Monitor
+	}
+];
+/** No-op subscribe: {@link useHydrated} never changes after the first commit. */
+var noSubscribe = () => () => {};
+/**
+* `false` during server render and during hydration, `true` afterwards.
+*
+* `useSyncExternalStore` is the sanctioned way to ask this: React calls the
+* third argument on the server and while hydrating, and the second one after,
+* which is precisely the distinction needed — and unlike a `useEffect` + state
+* pair, React guarantees the switch happens once hydration has committed
+* rather than racing it.
+*/
+var useHydrated = () => useSyncExternalStore(noSubscribe, () => true, () => false);
+var ThemeToggle = () => {
+	const [stored, setTheme] = useAtom(themeAtom);
+	const theme = useHydrated() ? stored : DEFAULT_THEME;
+	/** Arrow keys cycle, as a native radio group does. */
+	const onKeyDown = (event) => {
+		const step = {
+			ArrowRight: 1,
+			ArrowDown: 1,
+			ArrowLeft: -1,
+			ArrowUp: -1
+		}[event.key];
+		if (step === void 0) return;
+		event.preventDefault();
+		const next = OPTIONS[(OPTIONS.findIndex((option) => option.value === theme) + step + OPTIONS.length) % OPTIONS.length];
+		setTheme(next.value);
+		event.currentTarget.querySelector(`[data-theme="${next.value}"]`)?.focus();
+	};
+	return /* @__PURE__ */ jsx("div", {
+		role: "radiogroup",
+		"aria-label": "Colour theme",
+		onKeyDown,
+		className: "flex items-center gap-0.5 rounded-control bg-inset p-0.5 shadow-hairline",
+		children: OPTIONS.map(({ value, label, Icon }) => {
+			const checked = theme === value;
+			return /* @__PURE__ */ jsx("button", {
+				type: "button",
+				role: "radio",
+				"aria-checked": checked,
+				"aria-label": label,
+				title: label,
+				"data-theme": value,
+				tabIndex: checked ? 0 : -1,
+				onClick: () => setTheme(value),
+				className: `flex size-6 items-center justify-center rounded-chip transition-colors ${checked ? "bg-surface text-ink shadow-btn" : "text-ink-3 hover:text-ink-2"}`,
+				children: /* @__PURE__ */ jsx(Icon, { className: "size-3.5" })
+			}, value);
+		})
+	});
+};
+//#endregion
+//#region app/src/components/atoms/ValuePill.tsx
+var TONES = {
+	neutral: {
+		cls: "bg-field text-ink-2",
+		ring: "var(--shadow-hairline)"
+	},
+	green: {
+		cls: "bg-green-tint text-green",
+		ring: "0 0 0 1px color-mix(in oklch, var(--green) 28%, transparent)"
+	},
+	orange: {
+		cls: "bg-orange-tint text-orange",
+		ring: "0 0 0 1px color-mix(in oklch, var(--orange) 28%, transparent)"
+	},
+	red: {
+		cls: "bg-red-tint text-red",
+		ring: "0 0 0 1px color-mix(in oklch, var(--red) 28%, transparent)"
+	},
+	accent: {
+		cls: "bg-accent-tint text-accent-ink",
+		ring: "0 0 0 1px color-mix(in oklch, var(--accent) 28%, transparent)"
+	}
+};
+/** Inline value badge — a plain value (a date, a name, a count) set off in
+*  prose. Softer than a StatusPill (no dot) and not a mono token (see Chip). */
+var ValuePill = ({ children, tone = "neutral", className = "" }) => {
+	const t = TONES[tone];
+	return /* @__PURE__ */ jsx("span", {
+		className: `mx-0.5 inline-flex items-center rounded-full px-1.5 py-0
+        align-middle text-[12px] font-medium ${t.cls} ${className}`,
+		style: { boxShadow: t.ring },
+		children
+	});
+};
+//#endregion
+//#region app/src/components/TraceFile.tsx
+/**
+* Saving the selected trace to a file, and loading one back.
+*
+* Drop target is the whole window rather than a zone in the layout: when the
+* collector is down there is no chart to drop onto, and "drop a trace anywhere
+* on the page" is the behaviour every profiler has.
+*/
+/**
+* The shared surface for both header notices.
+*
+* The error and the truncation warning sit in the same place and say the same
+* kind of thing — "the file you opened is not what you expected" — so they get
+* one treatment and differ only by tone, the same red/orange split the stats
+* row and connection badge use.
+*/
+var NOTICE = "absolute inset-x-0 top-11 z-20 mx-auto flex w-fit max-w-xl items-baseline gap-3 rounded-card bg-surface px-3 py-2 text-xs shadow-overlay";
+/**
+* A notice's tone wash, as a flat `background-image` over {@link NOTICE}'s
+* opaque `bg-surface`.
+*
+* Foundation's `-tint` tokens are *translucent* in dark (`… / 0.14`), so
+* setting one as the notice's `background-color` lets the toolbar behind it
+* read straight through. Painting it as a one-stop gradient layers the tone on
+* top of an opaque surface instead, which is what a floating panel needs.
+*/
+var tintWash = (tone) => ({ backgroundImage: `linear-gradient(var(--${tone}-tint), var(--${tone}-tint))` });
+/** Hands the text to the browser as a download. */
+var download = (name, text) => {
+	const url = URL.createObjectURL(new Blob([text], { type: "application/x-ndjson" }));
+	const anchor = document.createElement("a");
+	anchor.href = url;
+	anchor.download = name;
+	anchor.click();
+	URL.revokeObjectURL(url);
+};
+var TraceFileControls = () => {
+	const registry = useContext(RegistryContext);
+	const session = useAtomValue(selectedSessionAtom);
+	const stats = useAtomValue(traceStatsAtom);
+	const loaded = useAtomValue(loadedSessionsAtom);
+	const [error, setError] = useState(void 0);
+	const [dragging, setDragging] = useState(false);
+	const input = useRef(null);
+	const open = (file) => {
+		setError(void 0);
+		file.text().then((text) => {
+			const result = addLoadedTrace(registry, text);
+			if (Result.isFailure(result)) setError(result.failure);
+		}).catch((cause) => setError(`Could not read ${file.name}: ${String(cause)}`));
+	};
+	useEffect(() => {
+		const over = (event) => {
+			if (event.dataTransfer?.types.includes("Files") !== true) return;
+			event.preventDefault();
+			setDragging(true);
+		};
+		const leave = (event) => {
+			if (event.relatedTarget === null) setDragging(false);
+		};
+		const drop = (event) => {
+			const file = event.dataTransfer?.files[0];
+			if (file === void 0) return;
+			event.preventDefault();
+			setDragging(false);
+			open(file);
+		};
+		globalThis.addEventListener("dragover", over);
+		globalThis.addEventListener("dragleave", leave);
+		globalThis.addEventListener("drop", drop);
+		return () => {
+			globalThis.removeEventListener("dragover", over);
+			globalThis.removeEventListener("dragleave", leave);
+			globalThis.removeEventListener("drop", drop);
+		};
+	});
+	const save = () => {
+		if (session === void 0) return;
+		const savedAt = Date.now();
+		const text = serializeTraceFile(session, saveableMessages(registry, session.sessionId), savedAt);
+		download(traceFileName(session, savedAt), text);
+	};
+	const truncated = loaded.find((entry) => entry.session.sessionId === session?.sessionId && entry.truncatedLines > 0);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1.5",
+			children: [
+				/* @__PURE__ */ jsx(Button, {
+					type: "button",
+					size: "xs",
+					onClick: save,
+					disabled: session === void 0 || stats.spans === 0,
+					"data-testid": "save-trace",
+					children: "save"
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					type: "button",
+					size: "xs",
+					onClick: () => input.current?.click(),
+					"data-testid": "open-trace",
+					children: "open"
+				}),
+				/* @__PURE__ */ jsx("input", {
+					ref: input,
+					type: "file",
+					accept: traceFileExtension,
+					"data-testid": "trace-file-input",
+					className: "hidden",
+					onChange: (event) => {
+						const file = event.target.files?.[0];
+						if (file !== void 0) open(file);
+						event.target.value = "";
+					}
+				})
+			]
+		}),
+		error !== void 0 && /* @__PURE__ */ jsxs("div", {
+			"data-testid": "trace-file-error",
+			className: `${NOTICE} text-red`,
+			style: tintWash("red"),
+			children: [error, /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => setError(void 0),
+				className: "shrink-0 text-ink-2 transition-colors hover:text-ink",
+				children: "dismiss"
+			})]
+		}),
+		truncated !== void 0 && error === void 0 && /* @__PURE__ */ jsx("div", {
+			"data-testid": "trace-file-truncated",
+			className: `${NOTICE} text-orange`,
+			style: tintWash("orange"),
+			children: "This trace file was cut short mid-write; everything before the cut is shown."
+		}),
+		dragging && /* @__PURE__ */ jsx("div", {
+			className: "pointer-events-none fixed inset-0 z-30 flex items-center justify-center bg-page/80",
+			children: /* @__PURE__ */ jsxs("p", {
+				className: "rounded-card border border-dashed border-line-strong bg-surface px-6 py-4 text-xs text-ink-2 shadow-overlay",
+				children: [
+					"Drop a ",
+					".eitrace",
+					" file to load it"
+				]
+			})
+		})
+	] });
+};
+//#endregion
+//#region app/src/components/Shell.tsx
+/**
+* The app shell: header, session sidebar, and the pane the flame chart will
+* fill.
+*
+* Every component here reads atoms. None of them touch `traceStore` except via
+* {@link traceStatsAtom}, which is derived from the sampled version — so a span
+* arriving never renders this tree directly.
+*/
+var formatTime = (epochMillis) => new Date(epochMillis).toLocaleTimeString([], { hour12: false });
+var formatDuration = (millis) => {
+	if (millis < 1e3) return `${millis.toFixed(1)}ms`;
+	return `${(millis / 1e3).toFixed(2)}s`;
+};
+/**
+* Connection states, as a pill tone and a dot colour.
+*
+* A dropped collector is an error, so it takes the red tone. A healthy socket
+* is deliberately the *neutral* pill with a green dot rather than a green
+* pill: the steady state is the one you see all day, and it should not shout.
+*/
+var CONNECTION = {
+	Connected: {
+		label: "connected",
+		tone: "neutral",
+		dot: "bg-green"
+	},
+	Connecting: {
+		label: "connecting",
+		tone: "neutral",
+		dot: "bg-ink-3 animate-pulse"
+	},
+	Disconnected: {
+		label: "disconnected",
+		tone: "red",
+		dot: "bg-red"
+	}
+};
+var ConnectionBadge = () => {
+	const status = useAtomValue(connectionStatusAtom);
+	const errors = useAtomValue(decodeErrorsAtom);
+	const { label, tone, dot } = CONNECTION[status._tag];
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-1.5",
+		children: [/* @__PURE__ */ jsxs(ValuePill, {
+			tone,
+			className: "gap-1.5",
+			children: [/* @__PURE__ */ jsx("span", { className: `size-1.5 rounded-full ${dot}` }), label]
+		}), errors > 0 && /* @__PURE__ */ jsxs(ValuePill, {
+			tone: "red",
+			children: [errors, " undecodable"]
+		})]
+	});
+};
+var Stat = ({ label, value }) => /* @__PURE__ */ jsxs("div", {
+	className: "flex items-baseline gap-1.5",
+	children: [/* @__PURE__ */ jsx("span", {
+		className: "text-ink-3",
+		children: label
+	}), /* @__PURE__ */ jsx("span", {
+		className: "tabular-nums text-ink",
+		children: value
+	})]
+});
+var Stats = () => {
+	const stats = useAtomValue(traceStatsAtom);
+	const wallClock = useAtomValue(wallClockOriginAtom);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-4 text-xs",
+		children: [
+			wallClock !== void 0 && /* @__PURE__ */ jsx(Stat, {
+				label: "t0",
+				value: formatTime(wallClock)
+			}),
+			/* @__PURE__ */ jsx(Stat, {
+				label: "spans",
+				value: String(stats.spans)
+			}),
+			/* @__PURE__ */ jsx(Stat, {
+				label: "open",
+				value: String(stats.openSpans)
+			}),
+			/* @__PURE__ */ jsx(Stat, {
+				label: "logs",
+				value: String(stats.logs)
+			}),
+			/* @__PURE__ */ jsx(Stat, {
+				label: "events",
+				value: String(stats.events)
+			}),
+			/* @__PURE__ */ jsx(Stat, {
+				label: "dur",
+				value: formatDuration(stats.duration)
+			}),
+			stats.errors > 0 && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-baseline gap-1.5",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-ink-3",
+					children: "errors"
+				}), /* @__PURE__ */ jsx(ValuePill, {
+					tone: "red",
+					className: "tabular-nums",
+					children: stats.errors
+				})]
+			})
+		]
+	});
+};
+var SessionRow = ({ session, selected, onSelect }) => /* @__PURE__ */ jsxs("button", {
+	type: "button",
+	onClick: onSelect,
+	className: `w-full border-l-2 px-2 py-1.5 text-left transition-colors ${selected ? "border-accent bg-hover text-ink" : "border-transparent text-ink-2 hover:bg-hover hover:text-ink"}`,
+	children: [/* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2",
+		children: [/* @__PURE__ */ jsx("span", { className: `size-1.5 shrink-0 rounded-full ${session.active ? "bg-green" : "bg-line-strong"}` }), /* @__PURE__ */ jsx("span", {
+			className: "truncate text-xs",
+			children: programLabel(session.program)
+		})]
+	}), /* @__PURE__ */ jsxs("div", {
+		className: "mt-0.5 flex justify-between pl-3.5 text-[10px] text-ink-3",
+		children: [/* @__PURE__ */ jsx("span", { children: isLoadedSession(session.sessionId) ? "file" : `pid ${session.pid}` }), /* @__PURE__ */ jsx("span", {
+			className: "tabular-nums",
+			children: formatTime(session.clock.wallClockEpochMillis)
+		})]
+	})]
+});
+/** Empty sessions list: waiting on the collector, or waiting on a program. */
+var NoSessions = ({ connected }) => connected ? /* @__PURE__ */ jsx(Empty$1, {
+	icon: Radio,
+	title: "No sessions yet",
+	hint: /* @__PURE__ */ jsxs(Fragment, { children: [
+		"Run a program with the inspect layer attached, or drop a saved",
+		" ",
+		/* @__PURE__ */ jsx("code", {
+			className: "text-ink-2",
+			children: ".eitrace"
+		}),
+		" file anywhere on this page."
+	] })
+}) : /* @__PURE__ */ jsx(Empty$1, {
+	icon: PlugZap,
+	title: "Waiting for the collector",
+	hint: /* @__PURE__ */ jsxs(Fragment, { children: [
+		"Start it with ",
+		/* @__PURE__ */ jsx("code", {
+			className: "text-ink-2",
+			children: "bun run collector"
+		}),
+		". This page reconnects on its own."
+	] })
+});
+var Sessions = () => {
+	const sessions = useAtomValue(sessionsAtom);
+	const [selectedId, setSelectedId] = useAtom(selectedSessionIdAtom);
+	const status = useAtomValue(connectionStatusAtom);
+	const [collapsed, toggle] = usePanel("sessions");
+	if (collapsed) return /* @__PURE__ */ jsx(CollapsedRail, {
+		edge: "left",
+		title: "Sessions",
+		onToggle: toggle,
+		id: "sessions-panel"
+	});
+	return /* @__PURE__ */ jsxs("aside", {
+		id: "sessions-panel",
+		className: "flex w-56 shrink-0 flex-col border-r border-line bg-surface",
+		children: [/* @__PURE__ */ jsx(PanelHeader, {
+			title: "Sessions",
+			children: /* @__PURE__ */ jsx(CollapseButton, {
+				edge: "left",
+				collapsed: false,
+				onToggle: toggle,
+				label: "Hide sessions",
+				controls: "sessions-panel"
+			})
+		}), /* @__PURE__ */ jsx("div", {
+			className: "min-h-0 flex-1 overflow-y-auto",
+			children: sessions.length === 0 ? /* @__PURE__ */ jsx(NoSessions, { connected: status._tag === "Connected" }) : sessions.map((session) => /* @__PURE__ */ jsx(SessionRow, {
+				session,
+				selected: session.sessionId === selectedId,
+				onSelect: () => setSelectedId(session.sessionId)
+			}, session.sessionId))
+		})]
+	});
+};
+/** Shown in place of the chart when the collector cannot be reached. */
+var Offline = () => /* @__PURE__ */ jsx(Empty$1, {
+	className: "flex-1",
+	icon: PlugZap,
+	title: "Collector unreachable",
+	hint: /* @__PURE__ */ jsxs(Fragment, { children: [
+		"Nothing is listening on ",
+		/* @__PURE__ */ jsx("code", {
+			className: "text-ink-2",
+			children: COLLECTOR_URL
+		}),
+		". Start it with",
+		" ",
+		/* @__PURE__ */ jsx("code", {
+			className: "text-ink-2",
+			children: "bun run collector"
+		}),
+		" — this page reconnects on its own. You can still open a saved trace: drop one anywhere on this page."
+	] })
+});
+/** A session's program, without the absolute path a default `programName` carries. */
+var programLabel = (program) => program.split(/[/\\]/).pop() || program;
+/** The chart, drawer and detail panel, once a session is selected. */
+var Workspace = () => {
+	if (useAtomValue(selectedSessionAtom) === void 0) return /* @__PURE__ */ jsx(Empty$1, {
+		className: "flex-1",
+		icon: MousePointerClick,
+		title: "No session selected",
+		hint: "Pick a program from the sessions list to see its flame chart, event log and span detail."
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-h-0 flex-1",
+		children: [/* @__PURE__ */ jsx(SpanDetail, {}), /* @__PURE__ */ jsxs("div", {
+			className: "order-first flex min-w-0 flex-1 flex-col",
+			children: [/* @__PURE__ */ jsx(FlameChart, {}), /* @__PURE__ */ jsx(Drawer, {})]
+		})]
+	});
+};
+var Shell = () => {
+	useAtomMount(connectionAtom);
+	const status = useAtomValue(connectionStatusAtom);
+	const session = useAtomValue(selectedSessionAtom);
+	const loadedSelected = session !== void 0 && isLoadedSession(session.sessionId);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative flex h-screen flex-col bg-page font-mono text-ink antialiased",
+		children: [/* @__PURE__ */ jsxs("header", {
+			className: "flex h-11 shrink-0 items-center justify-between gap-4 border-b border-line bg-surface px-3",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 items-baseline gap-3",
+				children: [/* @__PURE__ */ jsx("h1", {
+					className: "text-sm text-ink",
+					children: "effect-inspect"
+				}), session !== void 0 && /* @__PURE__ */ jsxs("span", {
+					className: "truncate text-xs text-ink-3",
+					children: [
+						programLabel(session.program),
+						" · ",
+						session.runtime
+					]
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 items-center gap-4",
+				children: [
+					/* @__PURE__ */ jsx(Stats, {}),
+					/* @__PURE__ */ jsx(TraceFileControls, {}),
+					/* @__PURE__ */ jsx(ConnectionBadge, {}),
+					/* @__PURE__ */ jsx(ThemeToggle, {})
+				]
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex min-h-0 flex-1",
+			children: [/* @__PURE__ */ jsx(Sessions, {}), /* @__PURE__ */ jsx("main", {
+				className: "flex min-w-0 flex-1 flex-col",
+				children: status._tag === "Disconnected" && !loadedSelected ? /* @__PURE__ */ jsx(Offline, {}) : /* @__PURE__ */ jsx(Workspace, {})
+			})]
+		})]
+	});
+};
+//#endregion
+//#region app/src/routes/index.tsx?tsr-split=component
+var SplitComponent = Shell;
+//#endregion
+export { SplitComponent as component };