@dxos/react-ui-trace 0.11.1 → 0.14.0

package/dist/lib/index.mjs

@@ -1,165 +1,380 @@
 import { translationKey } from "./translations.mjs";
 import { format } from "date-fns";
-import React, { forwardRef, memo, useCallback, useContext, useDeferredValue, useEffect, useMemo, useRef, useState } from "react";
+import React, { Fragment, forwardRef, memo, useCallback, useContext, useDeferredValue, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { createContext, useComposedRefs } from "@dxos/react-hooks";
-import { Accordion, HoverCard, Icon, IconButton, Panel, ScrollArea, ScrollContainer, Tooltip, composable, composableProps, useDynamicRef, useForwardedRef, useTranslation } from "@dxos/react-ui";
-import { mx } from "@dxos/ui-theme";
-import { Unit, trim } from "@dxos/util";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as Button from "@dxos/react-ui/Button";
+import * as Hooks from "@dxos/react-ui/Hooks";
+import * as HoverCard from "@dxos/react-ui/HoverCard";
+import * as ScrollArea from "@dxos/react-ui/ScrollArea";
+import * as Util from "@dxos/react-ui/Util";
+import { getHashHue, mx, palette } from "@dxos/ui-theme";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { RegistryContext } from "@effect/atom-react/RegistryContext";
 import * as Match from "effect/Match";
 import * as Option from "effect/Option";
 import * as Process from "@dxos/compute/Process";
 import { Tree, createStaticTreeModel } from "@dxos/react-ui-list";
+import * as Icon from "@dxos/react-ui/Icon";
+import * as Tooltip from "@dxos/react-ui/Tooltip";
+import { Unit, safeStringify, trim } from "@dxos/util";
 import { addEventListener } from "@dxos/async";
 import { LogLevel, log } from "@dxos/log";
 import { Shimmer } from "@dxos/react-ui-components";
+import { useListModel, useWindow, windowRowProps } from "@dxos/react-ui-virtual";
 import { ActionToolbar, MenuBuilder, useMenuBuilder } from "@dxos/react-ui-menu";
 import { JsonHighlighter } from "@dxos/react-ui-syntax-highlighter";
+import * as Accordion from "@dxos/react-ui/Accordion";
+import * as Panel from "@dxos/react-ui/Panel";
+import * as ScrollContainer from "@dxos/react-ui/ScrollContainer";
+import { TextEditor } from "@dxos/react-ui-editor";
+import { createBasicExtensions, createThemeExtensions, folding, json } from "@dxos/ui-editor";
 import * as Array$1 from "effect/Array";
 import { pipe } from "effect/Function";
 import * as Pipeable from "effect/Pipeable";
 import * as Schema from "effect/Schema";
 import * as Struct from "effect/Struct";
-import { RUN_AGAIN_ERROR_CODE, RUN_AGAIN_MESSAGE } from "@dxos/compute";
 import * as Trace from "@dxos/compute/Trace";
-import { Annotation, Filter, Query } from "@dxos/echo";
+import { Annotation, Filter, Obj, Query } from "@dxos/echo";
 import { EID } from "@dxos/keys";
 import { useAtomValue } from "@effect/atom-react/Hooks";
 import * as Duration from "effect/Duration";
-import * as Atom from "effect/unstable/reactivity/Atom";
+import * as Atom from "effect/reactivity/Atom";
 import { FeedTraceSink } from "@dxos/compute-runtime";
 import { Task } from "@dxos/types";
+//#region src/components/Gantt/gantt-rows.ts
+/**
+* Rows in reading order: the ungrouped lanes, then each group's band, a nested group's band directly
+* after its parent's. Within a band the lanes come in the order given, each nested under its
+* `parentId`.
+*
+* A band is contiguous by construction, which is the whole reason the order is settled here rather
+* than left to the caller: one rectangle can only enclose a run of adjacent rows.
+*/
+var orderRows = (groups, lanes) => {
+	const rows = [];
+	const bands = [];
+	/** A group's lanes, nested under one another by `parentId`; a parent in another group is ignored. */
+	const pushLanes = (members, parentId, depth) => {
+		for (const lane of members.filter((member) => member.parentId === parentId)) {
+			rows.push({
+				lane,
+				depth,
+				index: rows.length,
+				groupId: lane.groupId
+			});
+			pushLanes(members, lane.id, depth + 1);
+		}
+	};
+	const visitGroup = (group, depth) => {
+		const first = rows.length;
+		pushLanes(lanes.filter((lane) => lane.groupId === group.id), void 0, depth);
+		if (rows.length > first) bands.push({
+			group,
+			first,
+			last: rows.length - 1
+		});
+		for (const child of groups.filter((candidate) => candidate.parentId === group.id)) visitGroup(child, depth + 1);
+	};
+	pushLanes(lanes.filter((lane) => lane.groupId === void 0), void 0, 0);
+	for (const group of groups.filter((group) => group.parentId === void 0)) visitGroup(group, 0);
+	return {
+		rows,
+		bands
+	};
+};
+//#endregion
+//#region src/components/Gantt/gantt-scale.ts
+/** Room a tick label needs; elapsed labels are short, so this also caps how many fit. */
+var TIME_LABEL_WIDTH = 56;
+var MAX_TIME_TICKS = 10;
+/** Round tick intervals in milliseconds, so elapsed labels read `0s, 10s, 20s` rather than `13.4s`. */
+var TICK_STEPS = [
+	100,
+	200,
+	500,
+	1e3,
+	2e3,
+	5e3,
+	1e4,
+	15e3,
+	3e4,
+	6e4,
+	12e4,
+	3e5,
+	6e5,
+	9e5,
+	18e5,
+	36e5,
+	72e5,
+	216e5,
+	432e5,
+	864e5
+];
+var pad2 = (value) => String(value).padStart(2, "0");
+/**
+* Elapsed time since the start of the axis. The span picks the form for every tick alike, so a
+* run's labels read as one unit: `0.2s` below a second's step, `45s` below a minute, `1:05` below an
+* hour, `1:02:05` beyond.
+*/
+var formatElapsed = (elapsed, { span, step }) => {
+	const seconds = Math.round(elapsed / 1e3);
+	if (span >= 36e5) return `${Math.floor(seconds / 3600)}:${pad2(Math.floor(seconds / 60) % 60)}:${pad2(seconds % 60)}`;
+	if (span >= 6e4) return `${Math.floor(seconds / 60)}:${pad2(seconds % 60)}`;
+	if (step < 1e3) return `${(elapsed / 1e3).toFixed(1)}s`;
+	return `${seconds}s`;
+};
+/** An event's ordinal is two or three glyphs, so its labels pack tighter than a clock's. */
+var EVENT_LABEL_WIDTH = 40;
+/** Duration against width, labelled with the time elapsed since the start of the range. */
+var timeScale = ({ range, width, pad }) => {
+	const span = Math.max(range.end - range.start, 1);
+	const inner = Math.max(width - 2 * pad, 1);
+	const at = (time) => pad + (time - range.start) / span * inner;
+	const maxTicks = Math.max(2, Math.min(MAX_TIME_TICKS, Math.floor(inner / TIME_LABEL_WIDTH)));
+	const step = TICK_STEPS.find((candidate) => span / candidate <= maxTicks - 1) ?? Math.ceil(span / (maxTicks - 1) / TICK_STEPS[TICK_STEPS.length - 1]) * TICK_STEPS[TICK_STEPS.length - 1];
+	const ticks = [];
+	for (let elapsed = 0; elapsed <= span; elapsed += step) ticks.push({
+		at: at(range.start + elapsed),
+		label: formatElapsed(elapsed, {
+			span,
+			step
+		})
+	});
+	return {
+		at,
+		width,
+		ticks
+	};
+};
+/**
+* One step per event, in the order they happened. Ordinals are global rather than per lane: a
+* delegation drops from a parent's node to its child's first node, and only a shared ordering keeps
+* those two at the same offset.
+*/
+var unitScale = ({ times, step, pad }) => {
+	const events = [...new Set(times)].sort((left, right) => left - right);
+	const last = Math.max(events.length - 1, 0);
+	/** Index of the last event at or before `time`, or -1 when `time` precedes every event. */
+	const floorIndex = (time) => {
+		let low = 0;
+		let high = events.length - 1;
+		let found = -1;
+		while (low <= high) {
+			const mid = low + high >> 1;
+			if (events[mid] <= time) {
+				found = mid;
+				low = mid + 1;
+			} else high = mid - 1;
+		}
+		return found;
+	};
+	const unit = (time) => {
+		if (events.length === 0) return 0;
+		const index = floorIndex(time);
+		if (index < 0) return 0;
+		if (index >= last) return last;
+		const from = events[index];
+		return index + (time - from) / (events[index + 1] - from);
+	};
+	const stride = Math.max(1, Math.ceil(last / Math.max(Math.floor(last * step / EVENT_LABEL_WIDTH), 1)));
+	const ticks = [];
+	for (let index = 0; events.length > 0 && index <= last; index += stride) ticks.push({
+		at: pad + index * step,
+		label: `#${index + 1}`
+	});
+	return {
+		at: (time) => pad + unit(time) * step,
+		width: 2 * pad + last * step,
+		ticks
+	};
+};
+//#endregion
+//#region src/components/Gantt/useEnter.ts
+/**
+* Which of `ids` arrived since the last frame.
+*
+* A caller draws an entering element at the place it came from — the event before it, the node that
+* spawned its lane — and the next frame draws it where it belongs, leaving a CSS transition to carry
+* it the rest of the way. That is all the bookkeeping an enter animation needs: everything else in
+* the drawing animates from its own previous value, which the browser already has.
+*
+* Nothing present on mount ever counts as entering — a chart that animates its whole history open on
+* first paint is noise, since the reader was not there to see it arrive.
+*/
+var useEnter = (ids) => {
+	const [settled, setSettled] = useState(() => new Set(ids));
+	const entering = ids.some((id) => !settled.has(id));
+	useEffect(() => {
+		if (!entering) return;
+		const frame = requestAnimationFrame(() => setSettled(new Set(ids)));
+		return () => cancelAnimationFrame(frame);
+	});
+	return (id) => !settled.has(id);
+};
+//#endregion
+//#region src/components/Gantt/useRangeTween.ts
+/** How long the axis takes to settle on new bounds. */
+var TWEEN_DURATION = 400;
+var easeOutCubic = (progress) => 1 - (1 - progress) ** 3;
+/** Motion is skipped where nothing would see it, or where the reader asked for less of it. */
+var shouldSnap = () => typeof document === "undefined" || document.hidden || typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+/**
+* The range to draw with: `target`, reached over a short ease rather than in one step, so a
+* time axis whose bounds move (a new event, `now` advancing) slides every span, node and tick to
+* its new place together instead of jumping. A new target mid-flight eases on from wherever the
+* drawing is, so a stream of updates reads as one continuous motion.
+*/
+var useRangeTween = (target, enabled) => {
+	const [shown, setShown] = useState(target);
+	const shownRef = useRef(target);
+	useEffect(() => {
+		const from = shownRef.current;
+		const settle = (range) => {
+			shownRef.current = range;
+			setShown(range);
+		};
+		if (!enabled || shouldSnap() || from.start === target.start && from.end === target.end) {
+			settle(target);
+			return;
+		}
+		let frame;
+		const startedAt = performance.now();
+		const step = (time) => {
+			const progress = Math.min((time - startedAt) / TWEEN_DURATION, 1);
+			const eased = easeOutCubic(progress);
+			settle({
+				start: from.start + (target.start - from.start) * eased,
+				end: from.end + (target.end - from.end) * eased
+			});
+			frame = progress < 1 ? requestAnimationFrame(step) : void 0;
+		};
+		frame = requestAnimationFrame(step);
+		return () => {
+			if (frame !== void 0) cancelAnimationFrame(frame);
+		};
+	}, [
+		enabled,
+		target.start,
+		target.end
+	]);
+	return enabled ? shown : target;
+};
+//#endregion
 //#region src/components/Gantt/Gantt.tsx
-var ROW_HEIGHT = 28;
+var PAD_X = 16;
+var ROW_HEIGHT = 24;
 var HEADER_HEIGHT = 20;
-var PAD_X = 12;
-var NODE_RADIUS = 5;
-/** Upper bound on axis ticks; the count shrinks with the width so `HH:mm:ss` labels never overlap. */
-var MAX_TICKS = 5;
-var TICK_MIN_WIDTH = 72;
+/** Pixels per event on the `unit` axis — wide enough that two adjacent nodes read as two. */
+var UNIT_STEP = 32;
+/** How long a newly arrived element takes to travel from where it came from to where it belongs. */
+var ENTER_TRANSITION = "duration-500 ease-out";
+/** Within this of the live edge the chart keeps following it; past it the reader is reading history. */
+var FOLLOW_SLACK = 4;
+/**
+* How long the chart takes to drift to the live edge. Longer than the enter transition on purpose:
+* the arriving event settles into place first, and the window follows it rather than racing it.
+*/
+var FOLLOW_DURATION = 600;
+var NODE_RADIUS = 6;
 var BAR_HEIGHT = 15;
+/** The thread through a lane's nodes: a hairline, so the nodes remain what the row reads as. */
+var THREAD_HEIGHT = 1;
 /**
 * A bar reaches half its height past its first and last instant, so a node sitting on either one is
 * as far from the bar's end as it is from its top and bottom.
 */
 var BAR_OVERHANG = BAR_HEIGHT / 2;
-/** Gap between adjacent session rectangles, halved on each. */
+/** Gap between adjacent band rectangles, halved on each. */
 var GROUP_INSET = 2;
 /** The rectangle's clearance around its bars, the same on every side, so its corners stay concentric with theirs. */
 var GROUP_PAD = ROW_HEIGHT / 2 - BAR_HEIGHT / 2 - GROUP_INSET;
-var GROUP_RADIUS = 12;
-/** Radius of the delegation connector's bend from the drop into the child bar. */
+var GROUP_RADIUS = 10;
+/** Radius of the connector's bend from the drop into the lane it opens. */
 var BEND_RADIUS = BAR_HEIGHT / 2;
 /**
 * Bar, node, thread and label colours per status: nodes and the thread through them are the bar's
-* hue in a lighter shade.
+* hue in a lighter shade, and `edge` — the live end of a lane still running — is the stronger shade
+* the legend's own status dot uses, so the two read as the same statement about the lane.
 */
+/**
+* A hued lane's colour: the theme's tag surface token, read as a variable because the hue is data, so
+* the lane matches a `Tag` of the same hue.
+*/
+var hueColor = (hue) => `var(--color-${hue}-surface)`;
+/** The hue's strong shade, for a node that needs attention (a question, an error) within its lane. */
+var hueStrongColor = (hue) => `var(--color-${hue}-text)`;
 var STATUS_COLOR = {
 	pending: {
 		fill: "fill-neutral-500/40",
 		node: "fill-neutral-300",
+		edge: "fill-neutral-400",
 		thread: "stroke-neutral-300",
 		text: "text-neutral-400"
 	},
 	blocked: {
 		fill: "fill-orange-500/40",
 		node: "fill-orange-300",
+		edge: "fill-orange-500",
 		thread: "stroke-orange-300",
 		text: "text-orange-500"
 	},
 	running: {
 		fill: "fill-sky-500/40",
 		node: "fill-sky-300",
+		edge: "fill-sky-500",
 		thread: "stroke-sky-300",
 		text: "text-sky-500"
 	},
 	review: {
 		fill: "fill-cyan-500/40",
 		node: "fill-cyan-300",
+		edge: "fill-cyan-500",
 		thread: "stroke-cyan-300",
 		text: "text-cyan-500"
 	},
 	done: {
 		fill: "fill-green-500/40",
 		node: "fill-green-300",
+		edge: "fill-green-500",
 		thread: "stroke-green-300",
 		text: "text-green-500"
 	},
 	failed: {
 		fill: "fill-red-500/40",
 		node: "fill-red-300",
+		edge: "fill-red-500",
 		thread: "stroke-red-300",
 		text: "text-red-500"
 	}
 };
-/**
-* Rows grouped by the session that processes them: a session, then the tasks (and subtasks) it
-* works itself, then — after that block — every session those tasks spawned, recursively. Keeping a
-* session's own rows contiguous is what lets one rectangle enclose them.
-*/
-var orderRows = (lanes) => {
-	const rows = [];
-	const groups = [];
-	const childrenOf = (parentId) => lanes.filter((lane) => lane.parentId === parentId);
-	const visitSession = (session, depth) => {
-		const first = rows.length;
-		rows.push({
-			lane: session,
-			depth,
-			index: rows.length,
-			sessionId: session.id
-		});
-		const spawned = [];
-		const visitTasks = (parentId, taskDepth) => {
-			for (const child of childrenOf(parentId)) if (child.kind === "task") {
-				rows.push({
-					lane: child,
-					depth: taskDepth,
-					index: rows.length,
-					sessionId: session.id
-				});
-				visitTasks(child.id, taskDepth + 1);
-			} else spawned.push({
-				lane: child,
-				depth: taskDepth
-			});
-		};
-		visitTasks(session.id, depth + 1);
-		groups.push({
-			session,
-			first,
-			last: rows.length - 1
-		});
-		for (const child of spawned) visitSession(child.lane, child.depth);
-	};
-	for (const lane of childrenOf(void 0)) if (lane.kind === "session") visitSession(lane, 0);
-	else rows.push({
-		lane,
-		depth: 0,
-		index: rows.length,
-		sessionId: void 0
-	});
-	return {
-		rows,
-		groups
-	};
-};
-var formatTokens = (tokens) => tokens.total >= 1e3 ? Unit.Thousand(tokens.total).toString() : String(tokens.total);
+/** A node that asks for attention: a question put to the reader, or something that went wrong. */
+var isAlert = (marker) => marker.level === "warn" || marker.level === "error";
+var CONNECTOR_CLASSNAME = "stroke-fuchsia-500";
 var [GanttProvider, useGanttContext] = createContext("Gantt");
 /**
-* Gantt view of sessions and tasks on a shared time axis. The root resolves the rows and the axis;
-* the parts lay out side by side in the order given, sharing one row grid: `Legend` names the
-* lanes, `Chart` draws them, `Meta` shows per-lane totals. A host that already lists the lanes
-* renders the chart alone.
+* Gantt view of lanes on a shared axis. The root resolves the rows and the axis and fills its host;
+* the parts lay out side by side in the order given, sharing one row grid: `Legend` names the lanes
+* and `Chart` draws them. A host that already lists the lanes renders the chart alone.
+*
+* The root owns the scrolling, on both axes at once: the legend's rows and the chart's move together
+* vertically, the legend stays put while the drawing scrolls horizontally, and the horizontal bar is
+* at the foot of the host rather than under the last lane.
 */
-var GanttRoot = composable(({ lanes, markers = [], range: rangeProp, now, showNow, onLaneSelect, onMarkerSelect, children, ...props }, forwardedRef) => {
-	const { rows, groups } = useMemo(() => orderRows(lanes), [lanes]);
+var GanttRoot = Util.composable(({ groups = [], lanes, markers = [], range: rangeProp, now, showNow, axis = "unit", unitStep, animate, onLaneSelect, onMarkerSelect, onAxisChange, legend: legendProp, onLegendChange, children, ...props }, forwardedRef) => {
+	const [legendState, setLegendState] = useState("title");
+	const legend = legendProp ?? legendState;
+	const setLegend = useCallback((next) => {
+		setLegendState(next);
+		onLegendChange?.(next);
+	}, [onLegendChange]);
+	const [viewport, setViewport] = useState(null);
+	const [legendWidth, setLegendWidth] = useState(0);
+	const { rows, bands } = useMemo(() => orderRows(groups, lanes), [groups, lanes]);
 	const rowById = useMemo(() => new Map(rows.map((row) => [row.lane.id, row])), [rows]);
 	const markerById = useMemo(() => new Map(markers.map((marker) => [marker.id, marker])), [markers]);
 	const range = useMemo(() => {
 		if (rangeProp) return rangeProp;
-		const times = [...lanes.flatMap((lane) => [lane.start, lane.end]), ...markers.map((marker) => marker.timestamp)].filter((time) => time !== void 0).concat(now === void 0 ? [] : [now]);
+		const times = [...lanes.flatMap((lane) => (lane.segments ?? []).flatMap((segment) => [segment.start, segment.end])), ...markers.map((marker) => marker.timestamp)].filter((time) => time !== void 0).concat(now === void 0 ? [] : [now]);
 		const start = times.length > 0 ? Math.min(...times) : 0;
 		return {
 			start,
@@ -173,35 +388,72 @@ var GanttRoot = composable(({ lanes, markers = [], range: rangeProp, now, showNo
 	]);
 	return /* @__PURE__ */ jsx(GanttProvider, {
 		rows,
-		groups,
+		bands,
 		rowById,
 		markers,
 		markerById,
 		range,
 		now,
 		showNow,
+		axis,
+		unitStep,
+		animate,
 		onLaneSelect,
 		onMarkerSelect,
-		children: /* @__PURE__ */ jsx("div", {
-			...composableProps(props, { classNames: "flex w-full items-start text-xs font-mono overflow-hidden" }),
+		onAxisChange,
+		legend,
+		setLegend,
+		viewport,
+		setLegendWidth,
+		children: /* @__PURE__ */ jsx(ScrollArea.Root, {
+			...Util.composableProps(props, { classNames: "dx-expand text-xs font-mono" }),
+			orientation: "all",
+			trackStart: legendWidth,
 			ref: forwardedRef,
-			children
+			children: /* @__PURE__ */ jsx(ScrollArea.Viewport, {
+				classNames: "flex items-start",
+				ref: setViewport,
+				children
+			})
 		})
 	});
 });
 GanttRoot.displayName = "Gantt.Root";
-/** The lane names, one per row, indented by depth; each row is the lane's keyboard path. */
-var GanttLegend = composable((props, forwardedRef) => {
-	const { rows, onLaneSelect } = useGanttContext("Gantt.Legend");
+/**
+* The lane names, one per row, indented by depth; each row is the lane's keyboard path. Children go
+* in the header row above the names, beside the chart's axis labels (e.g. `Gantt.AxisToggle`).
+*
+* The column shows each lane's title or its stats (`legend` on the root), and whichever it is not
+* showing is in a hover card over the row, so neither costs a column of its own.
+*/
+var GanttLegend = Util.composable(({ children, ...props }, forwardedRef) => {
+	const { rows, legend, onLaneSelect, setLegendWidth } = useGanttContext("Gantt.Legend");
+	const legendRef = useRef(null);
+	const ref = useComposedRefs(forwardedRef, legendRef);
+	useEffect(() => {
+		const element = legendRef.current;
+		if (!element) return;
+		const observer = new ResizeObserver(() => setLegendWidth(element.offsetWidth));
+		observer.observe(element);
+		return () => {
+			observer.disconnect();
+			setLegendWidth(0);
+		};
+	}, [setLegendWidth]);
 	return /* @__PURE__ */ jsxs("div", {
-		...composableProps(props, { classNames: "shrink-0 w-[min(20rem,40%)] min-w-40 flex flex-col" }),
-		ref: forwardedRef,
-		children: [/* @__PURE__ */ jsx("div", { style: { height: HEADER_HEIGHT } }), rows.map(({ lane, depth }) => /* @__PURE__ */ jsxs("div", {
-			className: mx("flex items-center gap-2 truncate", onLaneSelect && "cursor-pointer hover:bg-hover-surface-subtle"),
+		...Util.composableProps(props, { classNames: "sticky left-0 z-[1] shrink-0 w-[min(15rem,20cqw)] min-w-40 flex flex-col font-sans bg-(--surface-bg)" }),
+		ref,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex items-center",
+			style: { height: HEADER_HEIGHT },
+			children
+		}), rows.map(({ lane, depth }) => /* @__PURE__ */ jsxs("div", {
+			className: mx("flex items-center gap-2 min-w-0", onLaneSelect && "cursor-pointer hover:bg-hover-surface-subtle"),
 			style: {
 				height: ROW_HEIGHT,
 				paddingInlineStart: `${.5 + depth}rem`
 			},
+			"data-testid": "gantt.legend.row",
 			...onLaneSelect && {
 				role: "button",
 				tabIndex: 0,
@@ -213,82 +465,354 @@ var GanttLegend = composable((props, forwardedRef) => {
 					}
 				}
 			},
-			children: [/* @__PURE__ */ jsx("span", { className: mx("shrink-0 w-2 h-2 rounded-full bg-current", STATUS_COLOR[lane.status].text) }), /* @__PURE__ */ jsx("span", {
-				className: "truncate text-base-fg",
-				children: lane.label
+			children: [/* @__PURE__ */ jsx("span", {
+				className: mx("shrink-0 w-2 h-2 rounded-full bg-current", !lane.hue && STATUS_COLOR[lane.status].text),
+				style: lane.hue ? { color: hueColor(lane.hue) } : void 0
+			}), /* @__PURE__ */ jsx(GanttLaneLabel, {
+				lane,
+				legend
 			})]
 		}, lane.id))]
 	});
 });
 GanttLegend.displayName = "Gantt.Legend";
-/** Per-lane totals — tokens and tool calls — aligned to the rows. */
-var GanttMeta = composable((props, forwardedRef) => {
-	const { rows } = useGanttContext("Gantt.Meta");
-	return /* @__PURE__ */ jsxs("div", {
-		...composableProps(props, { classNames: "shrink-0 flex flex-col" }),
-		ref: forwardedRef,
-		children: [/* @__PURE__ */ jsx("div", { style: { height: HEADER_HEIGHT } }), rows.map(({ lane }) => /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center justify-end gap-2 px-2 text-subdued whitespace-nowrap",
-			style: { height: ROW_HEIGHT },
-			children: [lane.tokens && /* @__PURE__ */ jsx("span", {
-				title: `${lane.tokens.input} in / ${lane.tokens.output} out`,
-				children: formatTokens(lane.tokens)
-			}), lane.toolCalls !== void 0 && /* @__PURE__ */ jsxs("span", { children: [lane.toolCalls, " tools"] })]
-		}, lane.id))]
+/** A legend row's text, and a hover card holding what the column is not showing. */
+var GanttLaneLabel = ({ lane, legend }) => {
+	const meta = lane.meta ?? [];
+	const title = /* @__PURE__ */ jsx("span", {
+		className: "truncate text-fg",
+		"data-testid": "gantt.legend.title",
+		children: lane.label
 	});
-});
-GanttMeta.displayName = "Gantt.Meta";
+	const stats = /* @__PURE__ */ jsx("span", {
+		className: "grow flex gap-2 truncate text-fg-muted whitespace-nowrap tabular-nums",
+		"data-testid": "gantt.legend.stats",
+		children: meta.map(({ label }, index) => /* @__PURE__ */ jsx("span", { children: label }, index))
+	});
+	if (legend === "title" && meta.length === 0) return title;
+	return /* @__PURE__ */ jsxs(HoverCard.Root, { children: [/* @__PURE__ */ jsx(HoverCard.Trigger, {
+		asChild: true,
+		children: legend === "title" ? title : stats
+	}), /* @__PURE__ */ jsx(HoverCard.Content, {
+		classNames: "p-2 max-w-72 text-xs",
+		"data-testid": "gantt.legend.card",
+		children: legend === "title" ? meta.map(({ label, title }, index) => /* @__PURE__ */ jsxs("div", {
+			className: "tabular-nums",
+			children: [label, title && /* @__PURE__ */ jsx("span", {
+				className: "text-fg-muted",
+				children: ` · ${title}`
+			})]
+		}, index)) : /* @__PURE__ */ jsx("div", {
+			className: "font-medium",
+			children: lane.label
+		})
+	})] });
+};
 /**
-* The drawing: every lane is a rounded bar with its markers threaded through it as nodes, a session's
-* rectangle encloses the tasks it works, and connectors draw dependencies and delegations.
+* Switches the chart between its axes: `time`, the run fitted to the width, and `unit`, one step per
+* event. Renders nothing unless the root was given `onAxisChange`, since the axis is the host's state.
+*/
+var GanttAxisToggle = (_) => {
+	const { t } = Hooks.useTranslation(translationKey);
+	const { axis = "unit", onAxisChange } = useGanttContext("Gantt.AxisToggle");
+	if (!onAxisChange) return null;
+	return /* @__PURE__ */ jsx(Button.Root, {
+		variant: "ghost",
+		size: "sm",
+		iconSize: "xs",
+		iconOnly: true,
+		icon: axis === "time" ? "ph--clock--regular" : "ph--dots-three-outline--regular",
+		label: t(axis === "time" ? "gantt-axis-unit.label" : "gantt-axis-time.label"),
+		onClick: () => onAxisChange(axis === "time" ? "unit" : "time"),
+		"data-testid": "gantt.axisToggle"
+	});
+};
+GanttAxisToggle.displayName = "Gantt.AxisToggle";
+/** Switches the legend's column between the lanes' titles and their stats. */
+var GanttLegendToggle = (_) => {
+	const { t } = Hooks.useTranslation(translationKey);
+	const { legend, setLegend } = useGanttContext("Gantt.LegendToggle");
+	return /* @__PURE__ */ jsx(Button.Root, {
+		variant: "ghost",
+		size: "sm",
+		iconSize: "xs",
+		iconOnly: true,
+		icon: legend === "title" ? "ph--text-aa--regular" : "ph--chart-bar--regular",
+		label: t(legend === "title" ? "gantt-legend-stats.label" : "gantt-legend-title.label"),
+		onClick: () => setLegend(legend === "title" ? "stats" : "title"),
+		"data-testid": "gantt.legendToggle"
+	});
+};
+GanttLegendToggle.displayName = "Gantt.LegendToggle";
+/**
+* The drawing: a lane is a rounded bar per segment with its markers threaded through as nodes, a
+* group's rectangle encloses its band, and connectors draw dependencies and the node a lane opened
+* out of.
+*
+* On the `unit` axis the drawing is as wide as the events need and follows the newest of them in the
+* root's scroll frame, while the legend beside it stays where it is.
+*
+* The drawing is one keyboard stop: clicking a node focuses it, the arrows walk the nodes (left and
+* right along a lane, up and down to the nearest node of the next lane), Space opens the current
+* node's card and Enter selects it — the same keys a legend row answers to.
 */
 var GanttChart = forwardRef(({ classNames }, forwardedRef) => {
-	const { rows, groups, rowById, markers, markerById, range, now, showNow, onLaneSelect, onMarkerSelect } = useGanttContext("Gantt.Chart");
+	const { rows, bands, rowById, markers, markerById, range, now, showNow, axis = "unit", unitStep = UNIT_STEP, animate, onLaneSelect, onMarkerSelect, viewport } = useGanttContext("Gantt.Chart");
+	const { t } = Hooks.useTranslation(translationKey);
 	const svgRef = useRef(null);
-	const ref = useComposedRefs(svgRef, forwardedRef);
+	const ref = useComposedRefs(forwardedRef, svgRef);
+	const nodeIdPrefix = useId();
+	/** The node the keyboard is on, and the node whose card is open (by hover or by Space). */
+	const [currentId, setCurrentId] = useState();
+	const [openId, setOpenId] = useState();
+	const followRef = useRef(true);
+	const glideRef = useRef(false);
+	const frameRef = useRef(void 0);
+	const drawnRef = useRef(void 0);
 	const [width, setWidth] = useState(600);
 	useEffect(() => {
-		const element = svgRef.current;
+		const element = viewport;
 		if (!element) return;
-		const observer = new ResizeObserver(([entry]) => entry && setWidth(entry.contentRect.width));
+		const measure = () => {
+			const svg = svgRef.current;
+			const offset = svg ? svg.getBoundingClientRect().left - element.getBoundingClientRect().left + element.scrollLeft : 0;
+			setWidth(Math.max(element.clientWidth - offset, 0));
+		};
+		const observer = new ResizeObserver(measure);
 		observer.observe(element);
-		return () => observer.disconnect();
-	}, []);
-	const span = Math.max(range.end - range.start, 1);
-	const x = (time) => PAD_X + (time - range.start) / span * (width - 24);
+		const onScroll = () => {
+			const atEdge = element.scrollWidth - element.clientWidth - element.scrollLeft <= FOLLOW_SLACK;
+			if (glideRef.current) {
+				glideRef.current = !atEdge;
+				return;
+			}
+			followRef.current = atEdge;
+		};
+		element.addEventListener("scroll", onScroll, { passive: true });
+		return () => {
+			observer.disconnect();
+			element.removeEventListener("scroll", onScroll);
+		};
+	}, [viewport]);
+	/** Each lane's markers in the order they happened: the threads, the bars and the enter origins read it. */
+	const laneMarkers = useMemo(() => {
+		const byLane = /* @__PURE__ */ new Map();
+		for (const marker of markers) {
+			const list = byLane.get(marker.laneId);
+			if (list) list.push(marker);
+			else byLane.set(marker.laneId, [marker]);
+		}
+		for (const list of byLane.values()) list.sort((left, right) => left.timestamp - right.timestamp);
+		return byLane;
+	}, [markers]);
+	const lastEvent = useMemo(() => {
+		const times = [...markers.map((marker) => marker.timestamp), ...rows.flatMap(({ lane }) => (lane.segments ?? []).flatMap(({ start, end }) => [start, end ?? start]))];
+		return times.length > 0 ? Math.max(...times) : void 0;
+	}, [markers, rows]);
+	const shownRange = useRangeTween(useMemo(() => lastEvent === void 0 ? range : {
+		start: range.start,
+		end: Math.max(lastEvent, range.start)
+	}, [
+		range.start,
+		range.end,
+		lastEvent
+	]), axis === "time");
+	const slide = animate === true && axis === "unit";
+	const scale = useMemo(() => axis === "unit" ? unitScale({
+		times: markers.map((marker) => marker.timestamp),
+		step: unitStep,
+		pad: PAD_X
+	}) : timeScale({
+		range: shownRange,
+		width,
+		pad: PAD_X
+	}), [
+		axis,
+		markers,
+		unitStep,
+		shownRange,
+		width
+	]);
+	const isEntering = useEnter(markers.map((marker) => marker.id));
+	const edge = axis === "time" ? scale.at(shownRange.end) : void 0;
+	const x = (time) => edge === void 0 ? scale.at(time) : Math.min(scale.at(time), edge);
 	const rowY = (index) => HEADER_HEIGHT + index * ROW_HEIGHT + ROW_HEIGHT / 2;
-	const laneTimes = (lane) => markers.filter((marker) => marker.laneId === lane.id).map((marker) => marker.timestamp);
-	const laneEnd = (lane) => {
-		const times = laneTimes(lane);
-		return times.length > 0 ? Math.max(...times) : lane.end ?? now;
+	const openSource = (lane) => lane.openedFrom && markerById.get(lane.openedFrom.markerId);
+	const markerX = /* @__PURE__ */ new Map();
+	const activeEdges = /* @__PURE__ */ new Set();
+	for (const [laneId, list] of laneMarkers) {
+		const row = rowById.get(laneId);
+		if (!row) continue;
+		const newest = list[list.length - 1];
+		if (row.lane.status === "running" && newest) activeEdges.add(newest.id);
+		list.forEach((marker, index) => {
+			const previous = index > 0 ? list[index - 1] : void 0;
+			const source = previous ? void 0 : openSource(row.lane);
+			const origin = previous ? x(previous.timestamp) : source && x(source.timestamp);
+			const resting = x(marker.timestamp);
+			markerX.set(marker.id, slide && origin !== void 0 && isEntering(marker.id) ? origin : resting);
+		});
+	}
+	/**
+	* A lane's drawn stretches, one per segment. An open segment reaches its last node, taking the
+	* node's drawn position rather than its instant so the bar grows with an arriving event instead of
+	* jumping ahead of it — and on to the chart's newest event when that is later.
+	*/
+	const stretchesOf = (lane) => {
+		const list = laneMarkers.get(lane.id) ?? [];
+		const segments = lane.segments ?? [];
+		return segments.map((segment, index) => {
+			const upper = segment.end ?? segments[index + 1]?.start ?? Number.MAX_SAFE_INTEGER;
+			const inside = list.filter((marker) => marker.timestamp >= segment.start && marker.timestamp <= upper);
+			const first = inside[0];
+			const last = inside[inside.length - 1];
+			const from = x(segment.start);
+			const lastX = last ? markerX.get(last.id) ?? x(last.timestamp) : void 0;
+			const edgeX = lastEvent !== void 0 ? x(lastEvent) : void 0;
+			const to = segment.end !== void 0 ? x(segment.end) : lastX !== void 0 && edgeX !== void 0 ? Math.max(lastX, edgeX) : lastX ?? edgeX ?? from;
+			const threaded = inside.length > 1 && first && last;
+			return {
+				from,
+				to: Math.max(to, from),
+				threadFrom: threaded ? markerX.get(first.id) : void 0,
+				threadTo: threaded ? markerX.get(last.id) : void 0
+			};
+		});
 	};
-	const delegationSource = (lane) => lane.delegatedFrom && markerById.get(lane.delegatedFrom.markerId);
-	const barStart = (lane, start) => {
-		const source = delegationSource(lane);
-		const edge = x(start) - BAR_OVERHANG;
-		return source ? Math.max(edge, x(source.timestamp) + 2 * BEND_RADIUS) : edge;
+	const isOpening = (lane) => {
+		const first = laneMarkers.get(lane.id)?.[0];
+		return slide && first !== void 0 && isEntering(first.id);
 	};
-	const nodeX = (lane, time) => lane.start === void 0 ? x(time) : Math.max(x(time), barStart(lane, lane.start) + BAR_OVERHANG);
 	const height = HEADER_HEIGHT + rows.length * ROW_HEIGHT;
-	const tickCount = Math.max(2, Math.min(MAX_TICKS, Math.floor((width - 24) / TICK_MIN_WIDTH)));
-	const ticks = Array.from({ length: tickCount }, (_, index) => range.start + span * index / (tickCount - 1));
+	const grow = slide && mx("transition-[width]", ENTER_TRANSITION);
+	const nodeIds = useMemo(() => new Map(markers.map((marker, index) => [marker.id, `${nodeIdPrefix}-node-${index}`])), [markers, nodeIdPrefix]);
+	const current = currentId === void 0 ? void 0 : markerById.get(currentId);
+	/** The node an arrow key moves to from `from`; `from` itself where there is nowhere further to go. */
+	const neighbour = (from, key) => {
+		if (key === "ArrowLeft" || key === "ArrowRight") {
+			const list = laneMarkers.get(from.laneId) ?? [];
+			return list[list.findIndex((marker) => marker.id === from.id) + (key === "ArrowLeft" ? -1 : 1)] ?? from;
+		}
+		const row = rowById.get(from.laneId);
+		if (!row) return from;
+		const fromX = markerX.get(from.id) ?? x(from.timestamp);
+		const distance = (marker) => Math.abs((markerX.get(marker.id) ?? x(marker.timestamp)) - fromX);
+		const direction = key === "ArrowUp" ? -1 : 1;
+		for (let index = row.index + direction; index >= 0 && index < rows.length; index += direction) {
+			const list = laneMarkers.get(rows[index].lane.id) ?? [];
+			if (list.length > 0) return list.reduce((best, marker) => distance(marker) < distance(best) ? marker : best);
+		}
+		return from;
+	};
+	/** Scrolls the frame just enough to show `marker` clear of the sticky legend and the frame's edges. */
+	const reveal = (marker) => {
+		const svg = svgRef.current;
+		const row = rowById.get(marker.laneId);
+		const cx = markerX.get(marker.id);
+		if (!viewport || !svg || !row || cx === void 0) return;
+		const frame = viewport.getBoundingClientRect();
+		const drawing = svg.getBoundingClientRect();
+		const legendWidth = drawing.left - frame.left + viewport.scrollLeft;
+		const nodeX = drawing.left - frame.left + cx;
+		const nodeY = drawing.top - frame.top + rowY(row.index);
+		const margin = ROW_HEIGHT;
+		const left = nodeX - margin < legendWidth ? nodeX - margin - legendWidth : nodeX + margin > viewport.clientWidth ? nodeX + margin - viewport.clientWidth : 0;
+		const top = nodeY - margin < 0 ? nodeY - margin : nodeY + margin > viewport.clientHeight ? nodeY + margin - viewport.clientHeight : 0;
+		if (left !== 0 || top !== 0) viewport.scrollBy({
+			left,
+			top
+		});
+	};
+	const moveTo = (marker) => {
+		setCurrentId(marker.id);
+		setOpenId((open) => open === void 0 ? void 0 : marker.id);
+		reveal(marker);
+	};
+	const handleKeyDown = (event) => {
+		switch (event.key) {
+			case "ArrowLeft":
+			case "ArrowRight":
+			case "ArrowUp":
+			case "ArrowDown": {
+				event.preventDefault();
+				const next = current ? neighbour(current, event.key) : rows.map(({ lane }) => laneMarkers.get(lane.id)?.at(-1)).find((marker) => marker !== void 0);
+				if (next) moveTo(next);
+				break;
+			}
+			case " ":
+				event.preventDefault();
+				if (current) setOpenId((open) => open === current.id ? void 0 : current.id);
+				break;
+			case "Escape":
+				if (openId !== void 0) {
+					event.preventDefault();
+					setOpenId(void 0);
+				}
+				break;
+			case "Enter": if (current) {
+				event.preventDefault();
+				onMarkerSelect?.(current);
+			}
+		}
+	};
+	useLayoutEffect(() => {
+		const element = viewport;
+		if (!element) return;
+		const previous = drawnRef.current;
+		drawnRef.current = scale.width;
+		const grown = previous !== void 0 && scale.width > previous;
+		if (previous === void 0 || grown && previous <= width) {
+			element.scrollLeft = element.scrollWidth;
+			return;
+		}
+		if (!grown || !followRef.current) return;
+		if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
+			element.scrollLeft = element.scrollWidth;
+			return;
+		}
+		const from = element.scrollLeft;
+		const to = element.scrollWidth - element.clientWidth;
+		if (to <= from) return;
+		const started = performance.now();
+		glideRef.current = true;
+		const step = (now) => {
+			const progress = Math.min((now - started) / FOLLOW_DURATION, 1);
+			element.scrollLeft = from + (to - from) * (1 - (1 - progress) ** 3);
+			if (progress < 1) frameRef.current = requestAnimationFrame(step);
+			else glideRef.current = false;
+		};
+		frameRef.current = requestAnimationFrame(step);
+		return () => {
+			if (frameRef.current !== void 0) cancelAnimationFrame(frameRef.current);
+			glideRef.current = false;
+		};
+	}, [scale.width, viewport]);
 	return /* @__PURE__ */ jsxs("svg", {
-		className: mx("flex-1 min-w-0", classNames),
+		className: mx("grow shrink-0 dx-focus-ring", classNames),
+		style: {
+			width: scale.width,
+			height
+		},
+		tabIndex: 0,
+		role: "group",
+		"aria-label": t("gantt-chart.label"),
+		"aria-activedescendant": current ? nodeIds.get(current.id) : void 0,
+		onKeyDown: handleKeyDown,
+		"data-testid": "gantt.chart",
 		ref,
-		style: { height },
 		children: [
-			ticks.map((tick, index) => /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
-				x1: x(tick),
-				x2: x(tick),
+			scale.ticks.map(({ at, label }, index) => /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
+				x1: at,
+				x2: at,
 				y1: HEADER_HEIGHT,
 				y2: height,
 				className: "stroke-separator"
 			}), /* @__PURE__ */ jsx("text", {
-				x: x(tick),
+				x: at,
 				y: 14,
-				textAnchor: index === 0 ? "start" : index === tickCount - 1 ? "end" : "middle",
-				className: "fill-current text-subdued",
-				children: format(tick, "HH:mm:ss")
+				textAnchor: at <= PAD_X ? "start" : at >= scale.width - PAD_X ? "end" : "middle",
+				className: "fill-current text-fg-subtle",
+				children: label
 			})] }, index)),
 			now !== void 0 && showNow && /* @__PURE__ */ jsx("line", {
 				x1: x(now),
@@ -298,30 +822,27 @@ var GanttChart = forwardRef(({ classNames }, forwardedRef) => {
 				strokeDasharray: "3 3",
 				className: STATUS_COLOR.running.thread
 			}),
-			groups.flatMap(({ session, first, last }) => {
-				const members = rows.slice(first, last + 1).map((row) => row.lane);
-				const starts = members.flatMap((lane) => lane.start === void 0 ? [] : [barStart(lane, lane.start)]);
-				const ends = members.flatMap((lane) => {
-					const end = lane.start === void 0 ? void 0 : laneEnd(lane);
-					return end === void 0 ? [] : [x(end) + BAR_OVERHANG];
-				});
-				if (starts.length === 0 || ends.length === 0) return [];
-				const left = Math.min(...starts) - GROUP_PAD;
-				const right = Math.max(...ends) + GROUP_PAD;
+			bands.flatMap(({ group, first, last }) => {
+				const stretches = rows.slice(first, last + 1).flatMap((row) => stretchesOf(row.lane));
+				if (stretches.length === 0) return [];
+				const left = Math.min(...stretches.map((stretch) => stretch.from)) - BAR_OVERHANG - GROUP_PAD;
+				const right = Math.max(...stretches.map((stretch) => stretch.to)) + BAR_OVERHANG + GROUP_PAD;
 				return [/* @__PURE__ */ jsx("rect", {
 					x: left,
 					y: rowY(first) - ROW_HEIGHT / 2 + GROUP_INSET,
 					width: Math.max(right - left, ROW_HEIGHT),
 					height: (last - first + 1) * ROW_HEIGHT - 4,
 					rx: GROUP_RADIUS,
-					className: "fill-input-surface"
-				}, `group:${session.id}`)];
+					className: mx("fill-input-surface", grow)
+				}, `band:${group.id}`)];
 			}),
 			rows.flatMap(({ lane, index }) => (lane.blockedOn ?? []).flatMap((depId) => {
 				const dep = rowById.get(depId);
-				const anchor = dep && (laneEnd(dep.lane) ?? dep.lane.start);
-				if (!dep || anchor === void 0) return [];
-				const anchorX = nodeX(dep.lane, anchor);
+				if (!dep) return [];
+				const stretches = stretchesOf(dep.lane);
+				const anchor = stretches[stretches.length - 1];
+				if (!anchor) return [];
+				const anchorX = anchor.to;
 				return [/* @__PURE__ */ jsx("line", {
 					x1: anchorX,
 					x2: anchorX,
@@ -329,35 +850,55 @@ var GanttChart = forwardRef(({ classNames }, forwardedRef) => {
 					y2: rowY(index),
 					strokeDasharray: "2 2",
 					className: STATUS_COLOR.blocked.thread
-				}, `${lane.id}:${depId}`), ...lane.start === void 0 ? [/* @__PURE__ */ jsx("circle", {
+				}, `${lane.id}:${depId}`), ...(lane.segments ?? []).length === 0 ? [/* @__PURE__ */ jsx("circle", {
 					cx: anchorX,
 					cy: rowY(index),
 					r: NODE_RADIUS,
-					strokeDasharray: "2 2",
 					className: mx("fill-base-surface", STATUS_COLOR.blocked.thread)
 				}, `${lane.id}:${depId}:hold`)] : []];
 			})),
 			rows.flatMap(({ lane, index }) => {
-				const source = delegationSource(lane);
-				const sourceRow = lane.delegatedFrom && rowById.get(lane.delegatedFrom.laneId);
-				if (!source || !sourceRow || lane.start === void 0) return [];
+				const source = openSource(lane);
+				const sourceRow = lane.openedFrom && rowById.get(lane.openedFrom.laneId);
+				const stretches = stretchesOf(lane);
+				if (!source || !sourceRow || stretches.length === 0) return [];
 				const sourceX = x(source.timestamp);
 				const y = rowY(index);
-				const firstNode = Math.min(...laneTimes(lane));
-				const targetX = Number.isFinite(firstNode) ? nodeX(lane, firstNode) : barStart(lane, lane.start) + BAR_OVERHANG;
+				const targetX = stretches[0].from;
+				const path = targetX > sourceX + BEND_RADIUS ? `M ${sourceX} ${rowY(sourceRow.index)} V ${y - BEND_RADIUS} Q ${sourceX} ${y} ${sourceX + BEND_RADIUS} ${y} H ${targetX}` : `M ${sourceX} ${rowY(sourceRow.index)} V ${y}`;
 				return [/* @__PURE__ */ jsx("path", {
-					d: `M ${sourceX} ${rowY(sourceRow.index)} V ${y - BEND_RADIUS} Q ${sourceX} ${y} ${sourceX + BEND_RADIUS} ${y} H ${targetX}`,
+					d: path,
 					fill: "none",
-					className: "stroke-fuchsia-500"
-				}, `delegation:${lane.id}`)];
+					pathLength: 1,
+					strokeDasharray: 1,
+					strokeDashoffset: isOpening(lane) ? 1 : 0,
+					className: mx(animate && mx("transition-[stroke-dashoffset]", ENTER_TRANSITION), CONNECTOR_CLASSNAME)
+				}, `opened:${lane.id}`)];
 			}),
-			rows.map(({ lane, index }) => {
-				const end = laneEnd(lane);
-				if (lane.start === void 0 || end === void 0) return null;
+			rows.flatMap(({ lane, index }) => {
+				const target = lane.closedInto && markerById.get(lane.closedInto.markerId);
+				const targetRow = lane.closedInto && rowById.get(lane.closedInto.laneId);
+				const stretches = stretchesOf(lane);
+				const last = stretches[stretches.length - 1];
+				if (!target || !targetRow || !last) return [];
+				const targetX = x(target.timestamp);
+				const y = rowY(index);
+				const targetY = rowY(targetRow.index);
+				const rise = Math.sign(targetY - y) * BEND_RADIUS;
+				const path = targetX > last.to + BEND_RADIUS ? `M ${last.to} ${y} H ${targetX - BEND_RADIUS} Q ${targetX} ${y} ${targetX} ${y + rise} V ${targetY}` : `M ${targetX} ${y} V ${targetY}`;
+				return [/* @__PURE__ */ jsx("path", {
+					d: path,
+					fill: "none",
+					strokeDasharray: "3 2",
+					className: CONNECTOR_CLASSNAME
+				}, `closed:${lane.id}`)];
+			}),
+			rows.flatMap(({ lane, index }) => stretchesOf(lane).map((stretch, segment) => {
+				const start = stretch.from - BAR_OVERHANG;
 				const bar = {
-					x: barStart(lane, lane.start),
+					x: start,
 					y: rowY(index) - BAR_HEIGHT / 2,
-					width: Math.max(x(end) + BAR_OVERHANG - barStart(lane, lane.start), BAR_HEIGHT),
+					width: isOpening(lane) ? BAR_HEIGHT : Math.max(stretch.to + BAR_OVERHANG - start, BAR_HEIGHT),
 					height: BAR_HEIGHT,
 					rx: BAR_HEIGHT / 2
 				};
@@ -366,61 +907,104 @@ var GanttChart = forwardRef(({ classNames }, forwardedRef) => {
 					onClick: () => onLaneSelect?.(lane),
 					children: [/* @__PURE__ */ jsx("rect", {
 						...bar,
-						className: "fill-base-surface"
-					}), /* @__PURE__ */ jsx("rect", {
+						className: mx("fill-base-surface", grow)
+					}), lane.hue ? /* @__PURE__ */ jsx("rect", {
 						...bar,
-						className: STATUS_COLOR[lane.status].fill
+						className: mx(grow),
+						style: {
+							fill: hueColor(lane.hue),
+							fillOpacity: .4
+						}
+					}) : /* @__PURE__ */ jsx("rect", {
+						...bar,
+						className: mx(STATUS_COLOR[lane.status].fill, grow)
 					})]
-				}, lane.id);
-			}),
-			rows.map(({ lane, index }) => {
-				const times = laneTimes(lane);
-				if (times.length < 2) return null;
-				return /* @__PURE__ */ jsx("line", {
-					x1: nodeX(lane, Math.min(...times)),
-					x2: nodeX(lane, Math.max(...times)),
-					y1: rowY(index),
-					y2: rowY(index),
-					className: STATUS_COLOR[lane.status].thread
-				}, `thread:${lane.id}`);
+				}, `${lane.id}:${segment}`);
+			})),
+			rows.flatMap(({ lane, index }) => stretchesOf(lane).flatMap((stretch, segment) => stretch.threadFrom === void 0 || stretch.threadTo === void 0 ? [] : [/* @__PURE__ */ jsx("rect", {
+				x: stretch.threadFrom,
+				y: rowY(index) - THREAD_HEIGHT / 2,
+				width: Math.max(stretch.threadTo - stretch.threadFrom, 0),
+				height: THREAD_HEIGHT,
+				className: mx(slide && mx("transition-[x,width]", ENTER_TRANSITION), !lane.hue && STATUS_COLOR[lane.status].node),
+				style: lane.hue ? { fill: hueColor(lane.hue) } : void 0
+			}, `thread:${lane.id}:${segment}`)])),
+			markers.flatMap((marker) => {
+				const row = marker.wait && rowById.get(marker.laneId);
+				const from = markerX.get(marker.id);
+				const to = marker.wait && markerX.get(marker.wait.until);
+				if (!row || from === void 0 || to === void 0 || to <= from) return [];
+				return [/* @__PURE__ */ jsx("line", {
+					x1: from,
+					x2: to,
+					y1: rowY(row.index),
+					y2: rowY(row.index),
+					strokeWidth: 2,
+					strokeDasharray: "4 3",
+					className: row.lane.hue ? void 0 : STATUS_COLOR[row.lane.status].thread,
+					style: row.lane.hue ? { stroke: hueStrongColor(row.lane.hue) } : void 0
+				}, `wait:${marker.id}`)];
 			}),
 			markers.map((marker) => {
 				const row = rowById.get(marker.laneId);
-				return row ? /* @__PURE__ */ jsxs(HoverCard.Root, { children: [/* @__PURE__ */ jsx(HoverCard.Trigger, {
-					asChild: true,
-					children: /* @__PURE__ */ jsx("circle", {
-						cx: nodeX(row.lane, marker.timestamp),
-						cy: rowY(row.index),
-						r: NODE_RADIUS,
-						className: mx("cursor-pointer stroke-base-surface transition-[stroke-width] hover:stroke-[3px] hover:stroke-base-fg", STATUS_COLOR[row.lane.status].node),
-						onClick: () => onMarkerSelect?.(marker)
-					})
-				}), /* @__PURE__ */ jsx(HoverCard.Portal, { children: /* @__PURE__ */ jsxs(HoverCard.Content, {
-					classNames: "p-2 max-w-72 text-xs font-mono",
-					children: [
-						/* @__PURE__ */ jsx("div", {
-							className: "font-medium truncate",
-							children: marker.label
-						}),
-						/* @__PURE__ */ jsxs("div", {
-							className: "text-description",
-							children: [
-								marker.kind,
-								" · ",
-								format(marker.timestamp, "HH:mm:ss.SSS"),
-								marker.level && marker.level !== "info" && /* @__PURE__ */ jsx("span", {
-									className: mx("ms-2", marker.level === "error" ? "text-error-text" : "text-warning-text"),
-									children: marker.level
-								})
-							]
-						}),
-						/* @__PURE__ */ jsx("div", {
-							className: "text-description truncate",
-							children: row.lane.label
-						}),
-						/* @__PURE__ */ jsx(HoverCard.Arrow, {})
-					]
-				}) })] }, marker.id) : null;
+				const cx = markerX.get(marker.id);
+				return row && cx !== void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [marker.pending && /* @__PURE__ */ jsx("circle", {
+					cx,
+					cy: rowY(row.index),
+					r: NODE_RADIUS,
+					className: "animate-ping transform-fill origin-center pointer-events-none fill-error-500"
+				}), /* @__PURE__ */ jsxs(HoverCard.Root, {
+					open: openId === marker.id,
+					onOpenChange: ({ open }) => setOpenId((previous) => open ? marker.id : previous === marker.id ? void 0 : previous),
+					children: [/* @__PURE__ */ jsx(HoverCard.Trigger, {
+						asChild: true,
+						children: /* @__PURE__ */ jsx("circle", {
+							id: nodeIds.get(marker.id),
+							role: "img",
+							"aria-label": marker.label,
+							"data-marker-id": marker.id,
+							"data-lane-id": marker.laneId,
+							cx,
+							cy: rowY(row.index),
+							r: NODE_RADIUS,
+							className: mx("cursor-pointer hover:stroke-[3px] hover:stroke-fg", isAlert(marker) ? "stroke-red-500 stroke-2" : "stroke-base-surface", marker.level === "error" && row.lane.status === "failed" && "animate-pulse", slide ? mx("transition-[stroke-width,cx]", ENTER_TRANSITION) : "transition-[stroke-width]", activeEdges.has(marker.id) ? mx("animate-pulse", !row.lane.hue && STATUS_COLOR[row.lane.status].edge) : !row.lane.hue && (isAlert(marker) ? STATUS_COLOR[row.lane.status].edge : STATUS_COLOR[row.lane.status].node), marker.id === currentId && "stroke-[3px] stroke-fg"),
+							style: row.lane.hue ? { fill: isAlert(marker) ? hueStrongColor(row.lane.hue) : hueColor(row.lane.hue) } : void 0,
+							onClick: () => {
+								setCurrentId(marker.id);
+								svgRef.current?.focus({ preventScroll: true });
+								onMarkerSelect?.(marker);
+							}
+						})
+					}), /* @__PURE__ */ jsxs(HoverCard.Content, {
+						classNames: "p-2 max-w-72 text-xs",
+						"data-testid": "gantt.markerCard",
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								className: "font-medium truncate",
+								children: marker.label
+							}),
+							/* @__PURE__ */ jsx("div", {
+								className: "text-fg-muted truncate",
+								children: row.lane.label
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "text-fg-muted tabular-nums",
+								children: [
+									marker.kind && `${marker.kind} · `,
+									format(marker.timestamp, "HH:mm:ss"),
+									` · +${formatElapsed(marker.timestamp - range.start, {
+										span: marker.timestamp - range.start,
+										step: 1e3
+									})}`,
+									marker.level && marker.level !== "info" && /* @__PURE__ */ jsx("span", {
+										className: mx("ms-2", marker.level === "error" ? "text-error-text" : "text-warning-text"),
+										children: marker.level
+									})
+								]
+							})
+						]
+					})]
+				})] }, marker.id) : null;
 			})
 		]
 	});
@@ -429,8 +1013,9 @@ GanttChart.displayName = "Gantt.Chart";
 var Gantt = {
 	Root: GanttRoot,
 	Legend: GanttLegend,
-	Chart: GanttChart,
-	Meta: GanttMeta
+	AxisToggle: GanttAxisToggle,
+	LegendToggle: GanttLegendToggle,
+	Chart: GanttChart
 };
 //#endregion
 //#region src/components/ProcessTree/ProcessTree.tsx
@@ -449,7 +1034,7 @@ var NO_SELECTION$1 = [];
 * in trailing columns. The forest is rebuilt on every metrics tick, so open state lives outside the
 * model and is re-seeded — a collapse must survive the next tick. Renders through `Tree`.
 */
-var ProcessTree = React.memo(composable(({ processes, depth = DEFAULT_DEPTH, resolveLabel, selected = NO_SELECTION$1, onSelectedChange, onProcessTerminate, ...props }, forwardedRef) => {
+var ProcessTree = React.memo(Util.composable(({ processes, depth = DEFAULT_DEPTH, resolveLabel, selected = NO_SELECTION$1, onSelectedChange, onProcessTerminate, ...props }, forwardedRef) => {
 	const openRef = useRef(/* @__PURE__ */ new Map());
 	const registry = useContext(RegistryContext);
 	const root = useMemo(() => buildProcessForest(processes, depth), [processes, depth]);
@@ -476,58 +1061,64 @@ var ProcessTree = React.memo(composable(({ processes, depth = DEFAULT_DEPTH, res
 		const pid = item.process.pid.toString();
 		onSelectedChange?.(!meta ? [pid] : current ? [...selected, pid] : selected.filter((candidate) => candidate !== pid));
 	}, [selected, onSelectedChange]);
-	const renderIcon = useMemo(() => makeIconRenderer(), []);
-	const renderColumns = useMemo(() => makeColumnRenderer(onProcessTerminate), [onProcessTerminate]);
-	return /* @__PURE__ */ jsx(ScrollArea.Root, {
-		...composableProps(props),
-		thin: true,
+	const renderRow = useCallback((node) => /* @__PURE__ */ jsx(ProcessRow, {
+		node,
+		onProcessTerminate
+	}), [onProcessTerminate]);
+	return /* @__PURE__ */ jsx("div", {
+		...Util.composableProps(props, { classNames: "flex flex-col min-h-0" }),
 		ref: forwardedRef,
-		children: /* @__PURE__ */ jsx(ScrollArea.Viewport, { children: /* @__PURE__ */ jsx(Tree, {
+		children: /* @__PURE__ */ jsx(Tree.Root, {
 			id: ROOT_ID,
 			model,
-			density: "sm",
+			virtual: "fixed",
+			size: "sm",
 			selectionMode: "multiple",
-			classNames: "text-sm tabular-nums font-thin",
-			gridTemplateColumns: "[tree-row-start] var(--dx-control) minmax(0, 1fr) min-content min-content [tree-row-end]",
-			renderIcon,
-			renderColumns,
+			columns: COLUMNS,
 			onOpenChange: handleOpenChange,
-			onSelect: handleSelect
-		}) })
+			onSelect: handleSelect,
+			children: /* @__PURE__ */ jsx(Tree.Content, { children: renderRow })
+		})
 	});
 }));
-/** Status glyph — animated, coloured and tooltipped per state, which `TreeItemDataProps.icon` cannot express. */
-var makeIconRenderer = () => ({ item: { process } }) => process === void 0 ? null : /* @__PURE__ */ jsx(Tooltip.Trigger, {
+/** Disclosure, status glyph, label, then the elapsed time and the terminate control. */
+var COLUMNS = "var(--dx-half-block-size) var(--dx-block-size) minmax(0, 1fr) min-content min-content";
+/** One process: its status glyph (animated, coloured and tooltipped per state), elapsed time and terminate control. */
+var ProcessRow = ({ node, onProcessTerminate }) => {
+	const process = node.item?.process;
+	return /* @__PURE__ */ jsxs(Tree.Item, {
+		node,
+		children: [
+			/* @__PURE__ */ jsx(Tree.ItemIndicator, {}),
+			/* @__PURE__ */ jsx(Tree.ItemIcon, { children: process && /* @__PURE__ */ jsx(StatusIcon, { process }) }),
+			/* @__PURE__ */ jsx(Tree.ItemText, {}),
+			/* @__PURE__ */ jsx("span", {
+				className: "text-end ps-1 text-xs text-fg-muted tabular-nums whitespace-nowrap",
+				children: process && [Process.State.FAILED, Process.State.SUCCEEDED].includes(process.state) && Unit.Duration(process.metrics.wallTime).toString()
+			}),
+			/* @__PURE__ */ jsx("span", { children: process && onProcessTerminate && process.state !== Process.State.TERMINATED && /* @__PURE__ */ jsx(Button.Root, {
+				icon: "ph--x--regular",
+				iconOnly: true,
+				size: "sm",
+				variant: "ghost",
+				label: "Actions",
+				onClick: (event) => {
+					event.stopPropagation();
+					onProcessTerminate(process);
+				}
+			}) })
+		]
+	});
+};
+var StatusIcon = ({ process }) => /* @__PURE__ */ jsx(Tooltip.Trigger, {
 	content: process.state.toString(),
-	children: /* @__PURE__ */ jsx(Icon, {
-		size: 4,
-		synchronized: true,
-		classNames: mx("shrink-0", process.state === Process.State.RUNNING && "animate-spin", process.state === Process.State.FAILED && "text-error-text", process.state === Process.State.SUCCEEDED && "text-success-text"),
+	children: /* @__PURE__ */ jsx(Icon.Icon, {
+		size: "md",
+		spin: process.state === Process.State.RUNNING,
+		valence: process.state === Process.State.FAILED ? "error" : process.state === Process.State.SUCCEEDED ? "success" : void 0,
 		icon: Match.value(process.state).pipe(Match.when(Process.State.RUNNING, () => "ph--spinner-gap--regular"), Match.when(Process.State.SUCCEEDED, () => "ph--check-circle--regular"), Match.when(Process.State.FAILED, () => "ph--warning--regular"), Match.when(Process.State.HYBERNATING, () => "ph--spinner--regular"), Match.when(Process.State.IDLE, () => "ph--moon-stars--regular"), Match.when(Process.State.TERMINATING, () => "ph--x-circle--regular"), Match.when(Process.State.TERMINATED, () => "ph--x-circle--regular"), Match.orElse(() => "ph--spinner-gap--regular"))
 	})
 });
-/** Trailing columns: elapsed time for finished processes, and the terminate control. */
-var makeColumnRenderer = (onProcessTerminate) => ({ item: { process } }) => process === void 0 ? null : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
-	className: "flex items-center justify-end text-xs text-description tabular-nums",
-	children: [Process.State.FAILED, Process.State.SUCCEEDED].includes(process.state) && /* @__PURE__ */ jsx("span", {
-		className: "whitespace-nowrap",
-		children: Unit.Duration(process.metrics.wallTime).toString()
-	})
-}), /* @__PURE__ */ jsx("div", {
-	className: "flex items-center",
-	children: onProcessTerminate && /* @__PURE__ */ jsx(IconButton, {
-		classNames: "min-h-0 p-1",
-		icon: "ph--x--regular",
-		iconOnly: true,
-		density: "sm",
-		variant: "ghost",
-		label: "Actions",
-		onClick: (event) => {
-			event.stopPropagation();
-			onProcessTerminate(process);
-		}
-	})
-})] });
 var sortProcesses = (processes) => {
 	return [
 		...processes.filter((process) => [Process.State.RUNNING, Process.State.HYBERNATING].includes(process.state)),
@@ -579,6 +1170,103 @@ var buildProcessForest = (processes, maxDepth) => {
 	};
 };
 //#endregion
+//#region src/components/Timeline/timeline-layout.ts
+/**
+* Lays a commit graph out into rows: which lane each branch draws in, how far each branch's line
+* runs, and which commits get a row at all.
+*
+* Pure and linear in the number of commits: every lookup a commit makes about a parent, and every
+* lane release, is served from an index built in one pass. Commits are assumed to be in topological
+* order — a parent always precedes its children.
+*/
+var layoutTimeline = (commits, branches) => {
+	const visibleBranches = new Set(branches);
+	const firstBranch = branches[0];
+	const commitIndexById = /* @__PURE__ */ new Map();
+	commits.forEach((commit, index) => {
+		if (!commitIndexById.has(commit.id)) commitIndexById.set(commit.id, index);
+	});
+	const positionOf = (commitId) => {
+		const index = commitIndexById.get(commitId);
+		return index === void 0 ? void 0 : {
+			index,
+			branch: commits[index].branch
+		};
+	};
+	const mergeRow = /* @__PURE__ */ new Map();
+	commits.forEach((commit, row) => {
+		for (const parentId of commit.parents ?? []) {
+			const parent = positionOf(parentId);
+			if (parent && parent.branch !== commit.branch && visibleBranches.has(parent.branch)) mergeRow.set(parent.branch, row);
+		}
+	});
+	const releasedAtRow = /* @__PURE__ */ new Map();
+	for (const [branch, endRow] of mergeRow) {
+		if (branch === firstBranch) continue;
+		const released = releasedAtRow.get(endRow);
+		if (released) released.push(branch);
+		else releasedAtRow.set(endRow, [branch]);
+	}
+	const branchLane = /* @__PURE__ */ new Map();
+	if (firstBranch !== void 0) branchLane.set(firstBranch, 0);
+	const activeLanes = /* @__PURE__ */ new Set([0]);
+	let maxLane = 0;
+	commits.forEach((commit, row) => {
+		if (visibleBranches.has(commit.branch) && !branchLane.has(commit.branch)) {
+			let lane = 1;
+			while (activeLanes.has(lane)) lane++;
+			branchLane.set(commit.branch, lane);
+			activeLanes.add(lane);
+			maxLane = Math.max(maxLane, lane);
+		}
+		for (const branch of releasedAtRow.get(row) ?? []) {
+			const lane = branchLane.get(branch);
+			if (lane !== void 0) activeLanes.delete(lane);
+		}
+	});
+	const spans = /* @__PURE__ */ new Map();
+	commits.forEach((commit, index) => {
+		let span = spans.get(commit.branch);
+		if (span) span.end = index;
+		else {
+			span = {
+				start: index,
+				end: index
+			};
+			spans.set(commit.branch, span);
+		}
+		const parents = commit.parents ?? [];
+		for (const parentId of parents) {
+			const parent = positionOf(parentId);
+			if (!parent || parent.branch === commit.branch) continue;
+			span.start = Math.min(span.start, parent.index);
+			if (parents.length > 1) {
+				const parentSpan = spans.get(parent.branch);
+				if (parentSpan) parentSpan.end = Math.max(parentSpan.end, index);
+			}
+		}
+	});
+	const rows = [];
+	const rowByCommitIndex = /* @__PURE__ */ new Map();
+	commits.forEach((commit, index) => {
+		if (branchLane.has(commit.branch)) {
+			rowByCommitIndex.set(index, rows.length);
+			rows.push({
+				commit,
+				index
+			});
+		}
+	});
+	return {
+		rows,
+		branchLane,
+		laneCount: maxLane + 1,
+		spans,
+		rowByCommitIndex,
+		commitIndexById
+	};
+};
+//#endregion
 //#region src/components/Timeline/timeline-options.ts
 var defaultOptions = {
 	lineHeight: 24,
@@ -601,10 +1289,13 @@ var hasShimmerEffect = (commit) => commit.tags?.includes(SHIMMER_EFFECT_TAG$1) ?
 var empty = Object.freeze([]);
 /**
 * GitGraph-style timeline.
+*
+* Rows are windowed by `useWindow`, so rendering costs the viewport rather than the history. The
+* layout is still computed over the whole history, so a windowed row draws every lane crossing it.
 */
-var Timeline = memo(composable(({ branches: branchesProp, branch, commits = empty, showTimestamp = false, showIcon = true, compact = false, options = compact ? compactOptions : defaultOptions, debug = false, onChange, onSelect, ...props }, forwardedRef) => {
-	const { t } = useTranslation(translationKey);
-	const containerRef = useForwardedRef(forwardedRef);
+var Timeline = memo(Util.composable(({ branches: branchesProp, branch, commits = empty, showTimestamp = false, showIcon = true, compact = false, options = compact ? compactOptions : defaultOptions, debug = false, scroller, onChange, onSelect, ...props }, forwardedRef) => {
+	const { t } = Hooks.useTranslation(translationKey);
+	const containerRef = Hooks.useForwardedRef(forwardedRef);
 	const branches = useMemo(() => {
 		if (branchesProp) return branchesProp;
 		return commits.reduce((branches, commit) => {
@@ -612,87 +1303,18 @@ var Timeline = memo(composable(({ branches: branchesProp, branch, commits = empt
 			return branches;
 		}, []);
 	}, [branchesProp, commits]);
-	const getCommitIndex = (id) => commits.findIndex((c) => c.id === id);
-	const getBranch = (id) => commits.find((c) => c.id === id)?.branch;
-	/**
-	* Assign branches to lanes, reusing lanes once a branch has been merged.
-	* Unmerged branches keep their lane active (they may still be in progress).
-	*/
-	const { branchLane, laneCount } = useMemo(() => {
-		const visibleBranches = new Set(branches);
-		const commitBranch = /* @__PURE__ */ new Map();
-		for (const commit of commits) commitBranch.set(commit.id, commit.branch);
-		const mergeRow = /* @__PURE__ */ new Map();
-		for (let row = 0; row < commits.length; row++) {
-			const commit = commits[row];
-			for (const parentId of commit.parents ?? []) {
-				const parentBranch = commitBranch.get(parentId);
-				if (parentBranch && parentBranch !== commit.branch && visibleBranches.has(parentBranch)) mergeRow.set(parentBranch, Math.max(mergeRow.get(parentBranch) ?? row, row));
-			}
-		}
-		const branchLane = /* @__PURE__ */ new Map();
-		if (branches.length > 0) branchLane.set(branches[0], 0);
-		const activeLanes = /* @__PURE__ */ new Set([0]);
-		let maxLane = 0;
-		for (let row = 0; row < commits.length; row++) {
-			const commit = commits[row];
-			if (visibleBranches.has(commit.branch) && !branchLane.has(commit.branch)) {
-				let lane = 1;
-				while (activeLanes.has(lane)) lane++;
-				branchLane.set(commit.branch, lane);
-				activeLanes.add(lane);
-				maxLane = Math.max(maxLane, lane);
-			}
-			for (const [branch, endRow] of mergeRow) if (endRow === row && branch !== branches[0] && branchLane.has(branch)) activeLanes.delete(branchLane.get(branch));
-		}
-		return {
-			branchLane,
-			laneCount: maxLane + 1
-		};
-	}, [commits, branches]);
-	const getBranchIndex = (branch) => branchLane.get(branch) ?? -1;
-	/**
-	* Create spans for each branch.
-	*/
-	const spans = useMemo(() => {
-		const spans = /* @__PURE__ */ new Map();
-		commits.forEach((commit, index) => {
-			let span = spans.get(commit.branch);
-			if (!span) {
-				span = {
-					start: index,
-					end: index
-				};
-				spans.set(commit.branch, span);
-			} else span.end = index;
-			const parents = commit.parents ?? [];
-			for (const parent of parents) {
-				const branch = getBranch(parent);
-				if (branch && branch !== commit.branch) {
-					span.start = Math.min(span.start, getCommitIndex(parent));
-					if (parents.length > 1) {
-						const parentSpan = spans.get(branch);
-						if (parentSpan) parentSpan.end = Math.max(parentSpan.end, index);
-					}
-				}
-			}
-		});
-		return spans;
-	}, [commits, branches]);
+	const layout = useMemo(() => layoutTimeline(commits, branches), [commits, branches]);
 	const [current, setCurrent] = useState(void 0);
-	const currentRef = useDynamicRef(current);
-	const selectedRef = useDynamicRef(void 0);
+	const currentRef = Hooks.useDynamicRef(current);
+	const selectedRef = Hooks.useDynamicRef(void 0);
 	const currentCommit = useMemo(() => current !== void 0 ? commits[current] : void 0, [current, commits]);
 	const highlightedBranch = branch ?? currentCommit?.branch;
+	const currentRow = current === void 0 ? void 0 : layout.rowByCommitIndex.get(current);
 	useEffect(() => {
 		onChange?.({
 			current,
 			commit: current === void 0 ? void 0 : commits[current]
 		});
-		(containerRef.current?.querySelector(`[data-index="${current}"]`))?.scrollIntoView({
-			behavior: "instant",
-			block: "nearest"
-		});
 	}, [onChange, current]);
 	useEffect(() => {
 		if (!branch) return;
@@ -735,78 +1357,147 @@ var Timeline = memo(composable(({ branches: branchesProp, branch, commits = empt
 			}
 		});
 	}, [commits, containerRef.current]);
+	const handleRowClick = useCallback((index) => {
+		if (selectedRef.current === index) {
+			selectedRef.current = void 0;
+			setCurrent(void 0);
+			onSelect?.(void 0);
+			return;
+		}
+		setCurrent(index);
+		selectedRef.current = index;
+		onSelect?.(commits[index]);
+	}, [commits, onSelect]);
+	const gridTemplateColumns = useMemo(() => [
+		"min-content",
+		showIcon && "1.25rem",
+		"1fr",
+		showTimestamp && "max-content"
+	].filter(Boolean).join(" "), [showIcon, showTimestamp]);
 	return /* @__PURE__ */ jsx("div", {
-		...composableProps(props, { classNames: "grid auto-rows-min outline-none" }),
+		...Util.composableProps(props, { classNames: "relative outline-none" }),
+		role: "list",
 		tabIndex: 0,
-		style: { gridTemplateColumns: [
-			"min-content",
-			showIcon && "1.25rem",
-			"1fr",
-			showTimestamp && "max-content"
-		].filter(Boolean).join(" ") },
 		ref: containerRef,
-		children: commits.length < 1 ? /* @__PURE__ */ jsx("p", {
-			className: "col-span-full text-description p-trim-md",
+		children: layout.rows.length < 1 ? /* @__PURE__ */ jsx("p", {
+			className: "text-fg-muted p-trim-md",
 			children: t("no-commits.message")
-		}) : commits.map((commit, index) => {
-			if (getBranchIndex(commit.branch) === -1) return null;
-			const hasLink = !!commit.link && !!onSelect;
-			const handleClick = () => {
-				if (selectedRef.current === index) {
-					selectedRef.current = void 0;
-					setCurrent(void 0);
-					onSelect?.(void 0);
-					return;
-				}
-				setCurrent(index);
-				selectedRef.current = index;
-				onSelect?.(commit);
-			};
-			const message = debug ? JSON.stringify({
-				id: commit.id,
-				parents: commit.parents
-			}) : commit.message;
-			return /* @__PURE__ */ jsxs("div", {
-				"data-index": index,
-				"aria-current": current === index,
-				className: mx("group/row col-span-full grid grid-cols-subgrid gap-1 px-[2px] overflow-hidden items-center cursor-pointer pe-2", "aria-current:bg-current-surface! hover:bg-hover-surface-subtle"),
-				style: { height: `${options.lineHeight}px` },
-				onClick: handleClick,
-				children: [
-					/* @__PURE__ */ jsx("div", {
-						className: "px-2",
-						children: /* @__PURE__ */ jsx(LineVector, {
-							branchLane,
-							laneCount,
-							spans,
-							index,
-							commit,
-							highlightedBranch,
-							options
-						})
-					}),
-					showIcon && /* @__PURE__ */ jsx(CommitIcon, { commit }),
-					/* @__PURE__ */ jsx("div", {
-						className: mx("text-sm truncate cursor-pointer text-description font-thin group-aria-current/row:text-current-fg hover:text-current-fg", hasLink && "underline decoration-dotted underline-offset-2"),
-						children: hasShimmerEffect(commit) ? /* @__PURE__ */ jsx(Shimmer, { children: message }) : message
-					}),
-					showTimestamp && /* @__PURE__ */ jsx("div", {
-						className: "text-xs tabular-nums items-center text-description font-thin",
-						children: commit.timestamp && format(commit.timestamp, TIMESTAMP_FORMAT)
-					})
-				]
-			}, commit.id);
+		}) : scroller && /* @__PURE__ */ jsx(TimelineWindow, {
+			scroller,
+			layout,
+			options,
+			currentRow,
+			showIcon,
+			showTimestamp,
+			debug,
+			highlightedBranch,
+			linkable: !!onSelect,
+			gridTemplateColumns,
+			onRowClick: handleRowClick
 		})
 	});
 }));
 Timeline.displayName = "Timeline";
+var getRowId = (row) => row.commit.id;
+/**
+* The mounted rows: a sizer that gives the scrollbar the whole history's extent, and a window
+* holding the rows in view, translated to where they belong. Rendered only once the host's
+* scroller exists, because the placement binds to the element on mount.
+*/
+var TimelineWindow = ({ scroller, layout, options, currentRow, ...context }) => {
+	const scrollerRef = useRef(scroller);
+	scrollerRef.current = scroller;
+	const model = useListModel(layout.rows, getRowId);
+	const extents = useMemo(() => ({
+		of: () => options.lineHeight,
+		exact: true
+	}), [options.lineHeight]);
+	const controllerRef = useRef(null);
+	const { layout: { visible }, windowRef, offset, sizerExtent, first, last } = useWindow({
+		scrollerRef,
+		model,
+		extents,
+		controllerRef
+	});
+	const visibleRef = useRef(visible);
+	visibleRef.current = visible;
+	useEffect(() => {
+		if (currentRow === void 0) return;
+		const { first, last } = visibleRef.current;
+		if (currentRow < first) controllerRef.current?.scrollToIndex(currentRow, "start");
+		else if (currentRow > last) controllerRef.current?.scrollToIndex(currentRow, "end");
+	}, [currentRow]);
+	const rows = [];
+	for (let index = first; index <= last; index++) {
+		const row = layout.rows[index];
+		if (!row) continue;
+		rows.push(/* @__PURE__ */ jsx(TimelineRowView, {
+			index,
+			row,
+			current: index === currentRow,
+			layout,
+			options,
+			...context
+		}, row.commit.id));
+	}
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", { style: { height: sizerExtent } }), /* @__PURE__ */ jsx("div", {
+		ref: windowRef,
+		className: "absolute top-0 left-0 flex flex-col w-full",
+		style: { transform: `translateY(${offset}px)` },
+		children: rows
+	})] });
+};
+var TimelineRowView = memo(({ index, row, current, layout, options, showIcon, showTimestamp, debug, highlightedBranch, linkable, gridTemplateColumns, onRowClick }) => {
+	const { commit } = row;
+	const handleClick = useCallback(() => onRowClick(row.index), [onRowClick, row.index]);
+	const hasLink = !!commit.link && linkable;
+	const message = debug ? JSON.stringify({
+		id: commit.id,
+		parents: commit.parents
+	}) : commit.message;
+	return /* @__PURE__ */ jsxs("div", {
+		role: "listitem",
+		"data-object-id": commit.id,
+		...windowRowProps(index, commit.id),
+		"data-commit-index": row.index,
+		"aria-current": current ? "true" : void 0,
+		className: "group/row grid gap-1 px-[2px] overflow-hidden items-center pe-2 dx-hover dx-current",
+		style: {
+			gridTemplateColumns,
+			height: `${options.lineHeight}px`
+		},
+		onClick: handleClick,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "px-2",
+				children: /* @__PURE__ */ jsx(LineVector, {
+					layout,
+					index: row.index,
+					commit,
+					highlightedBranch,
+					options
+				})
+			}),
+			showIcon && /* @__PURE__ */ jsx(CommitIcon, { commit }),
+			/* @__PURE__ */ jsx("div", {
+				className: mx("text-sm truncate cursor-pointer text-fg-muted font-thin group-aria-current/row:text-current-fg hover:text-current-fg", hasLink && "underline decoration-dotted underline-offset-2"),
+				children: hasShimmerEffect(commit) ? /* @__PURE__ */ jsx(Shimmer, { children: message }) : message
+			}),
+			showTimestamp && /* @__PURE__ */ jsx("div", {
+				className: "text-xs tabular-nums items-center text-fg-muted font-thin",
+				children: commit.timestamp && format(commit.timestamp, TIMESTAMP_FORMAT)
+			})
+		]
+	});
+});
+TimelineRowView.displayName = "TimelineRowView";
 var CommitIcon = memo(({ commit }) => {
 	if (!commit.icon) return /* @__PURE__ */ jsx("div", {});
-	return /* @__PURE__ */ jsx(Icon, {
+	return /* @__PURE__ */ jsx(Icon.Icon, {
 		icon: commit.icon,
-		size: 4,
-		synchronized: true,
-		classNames: mx(commit.icon === "ph--spinner-gap--regular" && "animate-spin", commit.level !== void 0 && levelColors[commit.level])
+		size: "md",
+		spin: commit.icon === "ph--spinner-gap--regular",
+		classNames: commit.level !== void 0 ? levelColors[commit.level] : void 0
 	});
 });
 var colors = [
@@ -854,9 +1545,10 @@ var levelColors = {
 /**
 * SVG for node and connector paths.
 */
-var LineVector = memo(({ branchLane, laneCount, spans, index, commit, highlightedBranch, options }) => {
+var LineVector = memo(({ layout, index, commit, highlightedBranch, options }) => {
+	const { branchLane, laneCount, spans } = layout;
 	const halfHeight = options.lineHeight / 2;
-	const cx = (c) => c * options.columnWidth + options.columnWidth / 2;
+	const cx = (column) => column * options.columnWidth + options.columnWidth / 2;
 	const getBranchIndex = (branch) => branchLane.get(branch) ?? -1;
 	const createPath = (index, commit, branch, span) => {
 		const parents = commit.parents ?? [];
@@ -878,7 +1570,7 @@ var LineVector = memo(({ branchLane, laneCount, spans, index, commit, highlighte
 	};
 	const col = getBranchIndex(commit.branch);
 	const color = colors[col % colors.length];
-	const opacity = (branch) => ["duration-500 transition-opacity", highlightedBranch === void 0 || branch === highlightedBranch ? "opacity-100" : "opacity-50"];
+	const opacity = (branch) => ["duration-500 transition-opacity", highlightedBranch === void 0 || branch === highlightedBranch ? "opacity-100" : "opacity-40"];
 	return /* @__PURE__ */ jsxs("svg", {
 		width: laneCount * options.columnWidth,
 		height: options.lineHeight,
@@ -1038,6 +1730,38 @@ var computeActiveColumns = (commits, lanes, laneById) => {
 	return active;
 };
 //#endregion
+//#region src/components/TracePanel/SpanTreeView.tsx
+/**
+* The trace's span tree as read-only JSON.
+*
+* CodeMirror puts only the lines in view into the DOM and parses the rest in time-sliced chunks, so
+* showing a tree stops costing what the tree is worth — a highlighter renders every one of its lines
+* in one synchronous pass. `TextEditor` rather than `Editor.View`: this pane has no toolbar, so the
+* compound component's context would only be wiring nothing reads.
+*/
+var SpanTreeView = ({ classNames, spanTree }) => {
+	const themeMode = Hooks.useThemeMode();
+	const value = useMemo(() => safeStringify(spanTree, void 0, 2), [spanTree]);
+	const extensions = useMemo(() => [
+		createBasicExtensions({
+			readOnly: true,
+			lineWrapping: false,
+			search: true
+		}),
+		createThemeExtensions({
+			themeMode,
+			syntaxHighlighting: true
+		}),
+		json(),
+		folding()
+	], [themeMode]);
+	return /* @__PURE__ */ jsx(TextEditor, {
+		classNames: ["text-xs", classNames],
+		value,
+		extensions
+	});
+};
+//#endregion
 //#region src/components/TracePanel/trace-filter.ts
 /**
 * What a running process is working on behalf of, as a single bucket.
@@ -1090,6 +1814,21 @@ var parseProcessEnvironments = (selected) => selected === void 0 ? DEFAULT_PROCE
 * runs as a child of the process it serves, so its events are that process's work. An empty
 * selection is no filter.
 */
+/**
+* Narrows the process tree to the selected processes and their descendants, the process-side twin of
+* {@link filterTraceMessages}: a running child of a picked process is that process's live work.
+*/
+var filterProcessesBySelection = (processes, selected) => {
+	if (selected.length === 0) return processes;
+	const parentByPid = new Map(processes.map((process) => [process.pid, process.parentPid]));
+	const selection = new Set(selected);
+	const isSelected = (pid, depth = 0) => {
+		if (selection.has(pid)) return true;
+		const parent = parentByPid.get(pid);
+		return parent !== null && parent !== void 0 && depth < processes.length && isSelected(parent, depth + 1);
+	};
+	return processes.filter((process) => isSelected(process.pid));
+};
 var filterTraceMessages = (messages, selected) => {
 	if (selected.length === 0) return messages;
 	const parentByPid = /* @__PURE__ */ new Map();
@@ -1159,8 +1898,8 @@ var useTraceMenu = ({ selected, onSelectedChange, selectionCount = 0, onClearSel
 * event. Presentation only — the host resolves the process monitor, the trace feed, settings and
 * navigation and hands them in as props.
 */
-var TracePanel = composable(({ classNames, processes, graph, environments, onEnvironmentsChange, debug = false, resolveLabel, selected = NO_SELECTION, onSelectedChange, onProcessTerminate, onOpenLink, ...props }, forwardedRef) => {
-	const { t } = useTranslation(translationKey);
+var TracePanel = Util.composable(({ classNames, processes, graph, environments, onEnvironmentsChange, debug = false, resolveLabel, selected = NO_SELECTION, onSelectedChange, onProcessTerminate, onOpenLink, ...props }, forwardedRef) => {
+	const { t } = Hooks.useTranslation(translationKey);
 	const handleClearSelection = useCallback(() => onSelectedChange?.([]), [onSelectedChange]);
 	const menu = useTraceMenu({
 		selected: environments,
@@ -1169,8 +1908,10 @@ var TracePanel = composable(({ classNames, processes, graph, environments, onEnv
 		onClearSelection: handleClearSelection
 	});
 	const { branches, commits, spanTree, details } = useDeferredValue(graph);
-	const [selectedCommit, setSelectedCommit] = useState();
+	const [pickedCommit, setSelectedCommit] = useState();
+	const selectedCommit = useMemo(() => pickedCommit && commits.some((commit) => commit.id === pickedCommit.id) ? pickedCommit : void 0, [pickedCommit, commits]);
 	const [openSections, setOpenSections] = useState(SECTIONS.map((section) => section.id));
+	const [traceViewport, setTraceViewport] = useState(null);
 	const handleCommitSelect = useCallback((commit) => {
 		setSelectedCommit(commit);
 		if (commit?.link) onOpenLink?.(commit.link);
@@ -1180,32 +1921,25 @@ var TracePanel = composable(({ classNames, processes, graph, environments, onEnv
 		return last !== void 0 && branches.includes(last) ? last : null;
 	}, [selected, branches]);
 	return /* @__PURE__ */ jsxs(Panel.Root, {
-		...composableProps(props, { classNames: ["h-full", classNames] }),
+		...Util.composableProps(props, { classNames: ["h-full", classNames] }),
 		ref: forwardedRef,
-		children: [/* @__PURE__ */ jsx(Panel.Toolbar, {
-			asChild: true,
-			children: /* @__PURE__ */ jsx(ActionToolbar, {
-				...menu,
-				alwaysActive: true,
-				classNames: "justify-end"
-			})
-		}), /* @__PURE__ */ jsx(Panel.Content, { children: /* @__PURE__ */ jsx(Accordion.Root, {
-			items: SECTIONS,
+		children: [/* @__PURE__ */ jsx(Panel.Header, { children: /* @__PURE__ */ jsx(ActionToolbar, {
+			...menu,
+			alwaysActive: true,
+			classNames: "justify-end"
+		}) }), /* @__PURE__ */ jsx(Panel.Body, { children: /* @__PURE__ */ jsx(Accordion.Root, {
 			value: openSections,
 			onValueChange: setOpenSections,
-			classNames: "h-full min-h-0 rounded-none border-y-0",
-			children: ({ items }) => items.map((section) => {
+			classNames: "h-full min-h-0",
+			border: false,
+			children: SECTIONS.map((section) => {
 				switch (section.id) {
 					case "processes": return /* @__PURE__ */ jsxs(Accordion.Item, {
-						item: section,
-						classNames: "border-x-0",
-						children: [/* @__PURE__ */ jsx(Accordion.ItemHeader, {
-							hover: true,
-							children: /* @__PURE__ */ jsx("span", {
-								className: "text-sm text-description",
-								children: t("trace-processes.label")
-							})
-						}), /* @__PURE__ */ jsx(Accordion.ItemBody, {
+						value: section.id,
+						children: [/* @__PURE__ */ jsx(Accordion.ItemTrigger, { children: /* @__PURE__ */ jsx("span", {
+							className: "text-sm text-fg-muted",
+							children: t("trace-processes.label")
+						}) }), /* @__PURE__ */ jsx(Accordion.ItemContent, {
 							classNames: "p-0",
 							children: /* @__PURE__ */ jsx(ProcessTreeContainer, {
 								classNames: "max-h-[8lh]",
@@ -1219,32 +1953,31 @@ var TracePanel = composable(({ classNames, processes, graph, environments, onEnv
 						})]
 					}, section.id);
 					case "trace": return /* @__PURE__ */ jsxs(Accordion.Item, {
-						item: section,
-						classNames: mx("border-x-0 dx-grow flex flex-col", "[&>[data-part=item-content]]:dx-grow [&>[data-part=item-content]]:flex [&>[data-part=item-content]]:flex-col [&>[data-part=item-content]]:animate-none"),
-						children: [/* @__PURE__ */ jsx(Accordion.ItemHeader, {
-							hover: true,
-							children: /* @__PURE__ */ jsx("span", {
-								className: "text-sm text-description",
-								children: t("trace.label")
-							})
-						}), /* @__PURE__ */ jsx(Accordion.ItemBody, {
+						value: section.id,
+						disabled: true,
+						classNames: mx("dx-grow flex flex-col", "[&>[data-part=item-content]]:dx-grow [&>[data-part=item-content]]:flex [&>[data-part=item-content]]:flex-col [&>[data-part=item-content]]:animate-none"),
+						children: [/* @__PURE__ */ jsx(Accordion.ItemTrigger, { children: /* @__PURE__ */ jsx("span", {
+							className: "text-sm text-fg-muted",
+							children: t("trace.label")
+						}) }), /* @__PURE__ */ jsx(Accordion.ItemContent, {
 							classNames: "dx-grow grid grid-rows-[minmax(0,1fr)]",
 							children: /* @__PURE__ */ jsx(ScrollContainer.Root, {
 								pin: true,
 								children: /* @__PURE__ */ jsxs(ScrollContainer.Content, {
-									thin: true,
+									width: "thin",
 									children: [
-										/* @__PURE__ */ jsx(ScrollContainer.Fade, {}),
-										/* @__PURE__ */ jsx(ScrollContainer.Viewport, { children: debug ? /* @__PURE__ */ jsx(JsonHighlighter, {
-											data: spanTree,
-											classNames: "text-xs"
-										}) : /* @__PURE__ */ jsx(Timeline, {
-											branches,
-											branch: currentBranch,
-											commits,
-											showTimestamp: true,
-											onSelect: handleCommitSelect
-										}) }),
+										/* @__PURE__ */ jsx(ScrollContainer.Fade, { classNames: "h-8" }),
+										/* @__PURE__ */ jsx(ScrollContainer.Viewport, {
+											ref: setTraceViewport,
+											children: debug ? /* @__PURE__ */ jsx(SpanTreeView, { spanTree }) : /* @__PURE__ */ jsx(Timeline, {
+												branches,
+												branch: currentBranch,
+												commits,
+												showTimestamp: true,
+												scroller: traceViewport,
+												onSelect: handleCommitSelect
+											})
+										}),
 										/* @__PURE__ */ jsx(ScrollContainer.ScrollDownButton, {})
 									]
 								})
@@ -1254,20 +1987,16 @@ var TracePanel = composable(({ classNames, processes, graph, environments, onEnv
 					case "details": {
 						const commit = debug ? void 0 : selectedCommit;
 						return /* @__PURE__ */ jsxs(Accordion.Item, {
-							item: section,
+							value: section.id,
 							disabled: !commit,
-							classNames: "border-x-0",
-							children: [/* @__PURE__ */ jsx(Accordion.ItemHeader, {
-								hover: true,
-								children: /* @__PURE__ */ jsx("span", {
-									className: "block truncate text-sm text-description",
-									children: commit?.message ?? t("trace-details.label")
-								})
-							}), commit && /* @__PURE__ */ jsx(Accordion.ItemBody, {
+							children: [/* @__PURE__ */ jsx(Accordion.ItemTrigger, { children: /* @__PURE__ */ jsx("span", {
+								className: "flex items-center truncate text-sm text-fg-muted",
+								children: t("trace-details.label")
+							}) }), commit && /* @__PURE__ */ jsx(Accordion.ItemContent, {
 								classNames: "p-0",
 								children: /* @__PURE__ */ jsx(JsonHighlighter, {
 									data: details[commit.id] ?? commit,
-									classNames: "max-h-[20lh] text-xs"
+									classNames: "max-h-[20lh] text-xs p-1.5"
 								})
 							})]
 						}, section.id);
@@ -1509,7 +2238,7 @@ var flattenSpanTree = (root) => {
 };
 //#endregion
 //#region src/execution-graph/execution-graph.ts
-var __dxlog_file = "/Users/burdon/Code/dxos/dxos/.claude/worktrees/resume-project-tasks-6ed628/packages/ui/react-ui-trace/src/execution-graph/execution-graph.ts";
+var __dxlog_file = "/__w/dxos/dxos/packages/ui/react-ui-trace/src/execution-graph/execution-graph.ts";
 /**
 * Branch name for top-level operation invocations.
 */
@@ -1593,7 +2322,7 @@ var buildExecutionGraph = ({ traceMessages, activeProcesses = [], collapseComple
 	}, {
 		"~LogMeta": "~LogMeta",
 		F: __dxlog_file,
-		L: 144,
+		L: 143,
 		S: void 0
 	});
 	return {
@@ -1625,7 +2354,7 @@ var parseAgentRequestEnd = (data) => {
 	log("invalid trace event", { type: Trace.AgentRequestEnd.key }, {
 		"~LogMeta": "~LogMeta",
 		F: __dxlog_file,
-		L: 210,
+		L: 209,
 		S: void 0
 	});
 };
@@ -1654,7 +2383,7 @@ var presentEvent = (event, toolCallContext) => {
 			log("invalid trace event", { type: event.type }, {
 				"~LogMeta": "~LogMeta",
 				F: __dxlog_file,
-				L: 240,
+				L: 239,
 				S: void 0
 			});
 			return;
@@ -1675,7 +2404,7 @@ var presentEvent = (event, toolCallContext) => {
 			log("invalid trace event", { type: event.type }, {
 				"~LogMeta": "~LogMeta",
 				F: __dxlog_file,
-				L: 258,
+				L: 257,
 				S: void 0
 			});
 			return;
@@ -1720,7 +2449,7 @@ var presentEvent = (event, toolCallContext) => {
 			log("invalid trace event", { type: event.type }, {
 				"~LogMeta": "~LogMeta",
 				F: __dxlog_file,
-				L: 318,
+				L: 317,
 				S: void 0
 			});
 			return;
@@ -1737,12 +2466,12 @@ var presentEvent = (event, toolCallContext) => {
 			log("invalid trace event", { type: event.type }, {
 				"~LogMeta": "~LogMeta",
 				F: __dxlog_file,
-				L: 330,
+				L: 329,
 				S: void 0
 			});
 			return;
 		}
-		const incomplete = event.data.outcome === "failure" && (event.data.errorCode === RUN_AGAIN_ERROR_CODE || event.data.errorCode === void 0 && event.data.error === RUN_AGAIN_MESSAGE);
+		const incomplete = event.data.outcome === "failure" && (event.data.errorCode === Process.RUN_AGAIN_ERROR_CODE || event.data.errorCode === void 0 && event.data.error === Process.RUN_AGAIN_MESSAGE);
 		const presentation = event.data.outcome === "success" ? {
 			icon: ICONS.operationEndSuccess.icon,
 			level: ICONS.operationEndSuccess.level,
@@ -1833,18 +2562,22 @@ var deriveInFlightActivityLine = (messages, rootPid, options = {}) => {
 	return lastLine;
 };
 var collectDescendantPids = (messages, rootPid) => {
-	const pids = /* @__PURE__ */ new Set([rootPid]);
-	let expanded = true;
-	while (expanded) {
-		expanded = false;
-		for (const message of messages) {
-			const pid = message.meta.pid;
-			const parentPid = message.meta.parentPid;
-			if (pid && parentPid && pids.has(parentPid) && !pids.has(pid)) {
-				pids.add(pid);
-				expanded = true;
-			}
+	const childPidsByParent = /* @__PURE__ */ new Map();
+	for (const message of messages) {
+		const { pid, parentPid } = message.meta;
+		if (!pid || !parentPid) continue;
+		let children = childPidsByParent.get(parentPid);
+		if (!children) {
+			children = /* @__PURE__ */ new Set();
+			childPidsByParent.set(parentPid, children);
 		}
+		children.add(pid);
+	}
+	const pids = /* @__PURE__ */ new Set([rootPid]);
+	const pending = [rootPid];
+	while (pending.length > 0) for (const childPid of childPidsByParent.get(pending.pop()) ?? []) if (!pids.has(childPid)) {
+		pids.add(childPid);
+		pending.push(childPid);
 	}
 	return pids;
 };
@@ -1904,6 +2637,8 @@ var isCollapsibleSpan = (span, parent, collapseCompletedSpans) => {
 * subtrees (depth-first), then its remaining events. Active-process running rows are inserted
 * at the end of each matching span block — not appended after the entire tree.
 */
+/** Branch tips as a commit's parent list; a branch with no commit yet contributes nothing. */
+var parentIds = (...tips) => Array$1.dedupe(tips.filter((tip) => tip !== void 0).map((tip) => tip.id));
 var spanTreeToCommits = (root, activeProcesses, toolCallContext, collapseCompletedSpans) => {
 	const builder = new GraphBuilder();
 	const details = {};
@@ -1936,10 +2671,12 @@ var spanTreeToCommits = (root, activeProcesses, toolCallContext, collapseComplet
 	};
 	const beginCommitIdBySpan = /* @__PURE__ */ new Map();
 	const lastInSpanContext = (span) => {
-		if (!span || span.id === "<main>") return CommitSelector.branch(MAIN_BRANCH).pipe(CommitSelector.compose(CommitSelector.last()));
-		const ownBranch = branchOf(span);
+		if (!span || span.id === "<main>") return parentIds(builder.tipOf(MAIN_BRANCH));
+		const ownTip = builder.tipOf(branchOf(span));
+		if (ownTip) return parentIds(ownTip);
 		const beginId = beginCommitIdBySpan.get(span.id);
-		return CommitSelector.firstOf(CommitSelector.branch(ownBranch).pipe(CommitSelector.compose(CommitSelector.last())), beginId ? CommitSelector.id(beginId) : CommitSelector.filter(() => false), lastInSpanContext(findParentSpan(span)));
+		if (beginId && builder.hasCommit(beginId)) return [beginId];
+		return lastInSpanContext(findParentSpan(span));
 	};
 	const lastCommitIdBySpan = /* @__PURE__ */ new Map();
 	let globalIndex = 0;
@@ -1953,7 +2690,7 @@ var spanTreeToCommits = (root, activeProcesses, toolCallContext, collapseComplet
 			builder.addCommit({
 				id: `running:${process.pid}`,
 				branch: process.pid,
-				parents: builder.computeParents(CommitSelector.firstOf(CommitSelector.branch(process.pid).pipe(CommitSelector.compose(CommitSelector.last())), CommitSelector.branch(MAIN_BRANCH).pipe(CommitSelector.compose(CommitSelector.last())))),
+				parents: parentIds(builder.firstTipOf(process.pid, MAIN_BRANCH)),
 				icon: ICONS.agentRequestRunning.icon,
 				level: ICONS.agentRequestRunning.level,
 				message: "Generating...",
@@ -1965,7 +2702,7 @@ var spanTreeToCommits = (root, activeProcesses, toolCallContext, collapseComplet
 			builder.addCommit({
 				id: `running:${process.pid}`,
 				branch: process.pid,
-				parents: builder.computeParents(CommitSelector.branch(process.pid).pipe(CommitSelector.compose(CommitSelector.last()))),
+				parents: parentIds(builder.tipOf(process.pid)),
 				icon: ICONS.processRunning.icon,
 				level: ICONS.processRunning.level,
 				message: "Running...",
@@ -1994,19 +2731,19 @@ var spanTreeToCommits = (root, activeProcesses, toolCallContext, collapseComplet
 		let parents;
 		if (span.id === "<main>") {
 			branch = MAIN_BRANCH;
-			parents = builder.computeParents(lastInSpanContext(null));
+			parents = lastInSpanContext(null);
 		} else if (collapsible) {
 			branch = parentBranch;
-			parents = builder.computeParents(lastInSpanContext(parentSpan));
+			parents = lastInSpanContext(parentSpan);
 		} else if (isBeginEvent) {
 			branch = isProcessBoundary ? ownBranch : parentBranch;
-			parents = builder.computeParents(lastInSpanContext(parentSpan));
+			parents = lastInSpanContext(parentSpan);
 		} else if (isEndEvent) {
 			branch = isProcessBoundary ? MAIN_BRANCH : parentBranch;
-			parents = builder.computeParents(CommitSelector.unionAll(CommitSelector.branch(branch).pipe(CommitSelector.compose(CommitSelector.last())), CommitSelector.branch(ownBranch).pipe(CommitSelector.compose(CommitSelector.last()))));
+			parents = parentIds(builder.tipOf(branch), builder.tipOf(ownBranch));
 		} else {
 			branch = ownBranch;
-			parents = builder.computeParents(lastInSpanContext(span));
+			parents = lastInSpanContext(span);
 		}
 		const commitId = formatCommitId(span, globalIndex++, presentation.idSuffix);
 		const shimmer = isPendingToolCallEvent(event, toolCallContext);
@@ -2156,22 +2893,44 @@ var CommitSelector = {
 		return [];
 	})
 };
+/**
+* Accumulates the commit list. Every lookup the graph makes while building — the tip of a branch,
+* a commit by id — is served from an index, because each is asked once per commit and a scan would
+* make the whole build quadratic in the history.
+*/
 var GraphBuilder = class {
 	#commits = [];
 	#branches = /* @__PURE__ */ new Set();
-	findCommits(selector) {
-		return selector.select(this.#commits);
-	}
+	#indexById = /* @__PURE__ */ new Map();
+	#tipIndexByBranch = /* @__PURE__ */ new Map();
 	hasBranch(branch) {
 		return this.#branches.has(branch);
 	}
+	hasCommit(commitId) {
+		return this.#indexById.has(commitId);
+	}
+	/** The most recent commit on a branch, or undefined while the branch has none. */
+	tipOf(branch) {
+		if (!branch) return;
+		const index = this.#tipIndexByBranch.get(branch);
+		return index === void 0 ? void 0 : this.#commits[index];
+	}
+	/** The most recent commit on the first of `branches` that has one. */
+	firstTipOf(...branches) {
+		for (const branch of branches) {
+			const tip = this.tipOf(branch);
+			if (tip) return tip;
+		}
+	}
 	addCommit(commit) {
 		this.addBranch(commit.branch);
-		this.#commits.push(commit);
+		const index = this.#commits.push(commit) - 1;
+		if (!this.#indexById.has(commit.id)) this.#indexById.set(commit.id, index);
+		this.#tipIndexByBranch.set(commit.branch, index);
 	}
 	addTag(commitId, tag) {
-		const index = this.#commits.findIndex((commit) => commit.id === commitId);
-		if (index < 0) return;
+		const index = this.#indexById.get(commitId);
+		if (index === void 0) return;
 		const commit = this.#commits[index];
 		if (commit.tags?.includes(tag)) return;
 		this.#commits[index] = {
@@ -2179,12 +2938,6 @@ var GraphBuilder = class {
 			tags: [...commit.tags ?? [], tag]
 		};
 	}
-	/**
-	* Computes parents — picks first matching commit's id.
-	*/
-	computeParents(selector) {
-		return Array$1.dedupe(selector.select(this.#commits).map((commit) => commit.id));
-	}
 	addBranch(branch) {
 		this.#branches.add(branch);
 	}
@@ -2192,7 +2945,13 @@ var GraphBuilder = class {
 	* Removes duplicate commits and dangling parents.
 	*/
 	doctor() {
-		this.#commits = pipe(this.#commits, Array$1.dedupeWith((a, b) => a.id === b.id), Array$1.map(Struct.evolve({ parents: (parents) => parents ? Array$1.filter(parents, (id) => this.#commits.some((commit) => commit.id === id)) : void 0 })));
+		const seen = /* @__PURE__ */ new Set();
+		this.#commits = pipe(this.#commits, Array$1.filter((commit) => {
+			if (seen.has(commit.id)) return false;
+			seen.add(commit.id);
+			return true;
+		}), Array$1.map(Struct.evolve({ parents: (parents) => parents ? Array$1.filter(parents, (id) => seen.has(id)) : void 0 })));
+		this.#reindex();
 	}
 	build() {
 		this.doctor();
@@ -2201,6 +2960,14 @@ var GraphBuilder = class {
 			branches: [...this.#branches]
 		};
 	}
+	#reindex() {
+		this.#indexById.clear();
+		this.#tipIndexByBranch.clear();
+		this.#commits.forEach((commit, index) => {
+			if (!this.#indexById.has(commit.id)) this.#indexById.set(commit.id, index);
+			this.#tipIndexByBranch.set(commit.branch, index);
+		});
+	}
 };
 //#endregion
 //#region src/execution-graph/pending-block-status.ts
@@ -2221,7 +2988,7 @@ var formatPendingBlockStatus = (block) => {
 	if (block._tag === "text") return `Generating ${estimateTokenCount(block.text)} tokens....`;
 	if (block._tag === "toolCall") {
 		const bytes = new TextEncoder().encode(block.input).length;
-		return `Calling ${block.operationName ?? block.name} (${bytes} bytes)...`;
+		return `Calling ${block.displayName ?? block.operationName ?? block.name} (${bytes} bytes)...`;
 	}
 };
 /**
@@ -2277,6 +3044,7 @@ var useTraceMessages = (space, { debounce } = {}) => {
 var atomEmpty = Atom.make(() => []);
 var NO_PIDS = [];
 var SPAN_TIMEOUT_CHECK_INTERVAL_MS = 6e4;
+var REBUILD_DEBOUNCE = Duration.millis(500);
 /**
 * The commit graph of a space's trace, rebuilt as messages land and as the process tree changes.
 * `processesAtom` is the host's live process tree (a running agent draws a spinner commit); without
@@ -2306,8 +3074,8 @@ var useExecutionGraph = (space, processesAtom, { collapseCompletedSpans, eventLi
 /** Identity for the graph: only a process appearing, disappearing or changing state redraws it. */
 var sameProcesses = (left, right) => left.length === right.length && left.every((process, index) => process.pid === right[index].pid && process.state === right[index].state);
 var getExecutionGraph = (space, processesAtom, { collapseCompletedSpans = true, eventLimit = 100, selectedPids = NO_PIDS, now }) => {
-	const traceMessages = getTraceMessagesAtom(space).pipe(Atom.map((messages) => filterTraceMessages(messages, selectedPids)));
-	const activeProcesses = pipe(processesAtom, Atom.debounce(Duration.millis(500)), Atom.map((processes) => processes.filter((process) => (process.state === Process.State.RUNNING || process.state === Process.State.HYBERNATING) && (selectedPids.length === 0 || selectedPids.includes(process.pid)))), Atom.withEquality(sameProcesses));
+	const traceMessages = getTraceMessagesAtom(space).pipe(Atom.debounce(REBUILD_DEBOUNCE), Atom.map((messages) => filterTraceMessages(messages, selectedPids)));
+	const activeProcesses = pipe(processesAtom, Atom.debounce(REBUILD_DEBOUNCE), Atom.map((processes) => filterProcessesBySelection(processes, selectedPids).filter((process) => process.state === Process.State.RUNNING || process.state === Process.State.HYBERNATING)), Atom.withEquality(sameProcesses));
 	return Atom.make((get) => buildExecutionGraph({
 		traceMessages: get(traceMessages),
 		activeProcesses: get(activeProcesses),
@@ -2317,10 +3085,171 @@ var getExecutionGraph = (space, processesAtom, { collapseCompletedSpans = true,
 	}));
 };
 //#endregion
+//#region src/session-timeline/gantt-mapping.ts
+/**
+* The one place the domain's nouns meet the chart's.
+*
+* The chart knows only groups, lanes, segments and markers; this file knows that a **process** is a
+* group — the band around the lanes of the tasks it works, with no row of its own — a **task** is a
+* lane inside it, a **subtask** nests under its parent task, and a **delegation** opens a lane out of
+* the node that spawned it. Keeping the translation here is what lets either vocabulary change without
+* dragging the other with it.
+*/
+var formatTokens = (tokens) => tokens.total >= 1e3 ? Unit.Thousand(tokens.total).toString() : String(tokens.total);
+/** Tokens and tool calls, formatted here because the chart renders `meta` without reading it. */
+var laneMeta = (lane) => [...lane.tokens ? [{
+	label: formatTokens(lane.tokens),
+	title: `${lane.tokens.input} in / ${lane.tokens.output} out`
+}] : [], ...lane.toolCalls !== void 0 ? [{ label: `${lane.toolCalls} tools` }] : []];
+/**
+* A lane's stretch as segments: one run, split around each gap where its task was put down, so a
+* question and its answer are separate runs with the wait between them left open.
+*/
+var segmentsOf = (lane) => {
+	if (lane.start === void 0) return;
+	const segments = [];
+	let start = lane.start;
+	for (const gap of [...lane.gaps ?? []].sort((left, right) => left.start - right.start)) {
+		const gapStart = Math.max(gap.start, start);
+		const gapEnd = lane.end === void 0 ? gap.end : Math.min(gap.end, lane.end);
+		if (gapEnd <= gapStart) continue;
+		if (gapStart > start) segments.push({
+			start,
+			end: gapStart
+		});
+		start = gapEnd;
+	}
+	if (lane.end === void 0) segments.push({ start });
+	else if (lane.end > start) segments.push({
+		start,
+		end: lane.end
+	});
+	return segments;
+};
+var isHistoryEntry = Schema.is(Task.HistoryEntry);
+/**
+* Maps a session timeline onto the chart's model.
+*
+* Every process becomes a band holding the lanes of the tasks it works; the process itself draws no
+* row, so its own nodes (requests, tool calls no task claims) are dropped. A process standing for one
+* task — a delegated sub-agent, or a session the builder folded its lone task into — is that task's
+* lane, so it keeps its span, its nodes and the node it opened out of. A process spawned by another
+* nests its band under its parent's — so causality is drawn by `openedFrom` while membership is
+* `groupId` and nesting is `parentId`, three facts the timeline's single `parentId` used to carry.
+*/
+var sessionTimelineToGantt = (timeline) => {
+	const byId = new Map(timeline.lanes.map((lane) => [lane.id, lane]));
+	const groups = [];
+	const lanes = [];
+	/** The band a lane belongs to: its own, for a process; its process's, for a task. */
+	const bandOf = (lane) => {
+		if (lane.kind === "session") return lane.id;
+		const parent = lane.parentId === void 0 ? void 0 : byId.get(lane.parentId);
+		return parent ? bandOf(parent) : void 0;
+	};
+	for (const lane of timeline.lanes) {
+		const meta = laneMeta(lane);
+		const facts = {
+			label: lane.label,
+			status: lane.status,
+			...segmentsOf(lane) ? { segments: segmentsOf(lane) } : {},
+			...lane.delegatedFrom ? { openedFrom: lane.delegatedFrom } : {},
+			...lane.returnedTo ? { closedInto: lane.returnedTo } : {},
+			...lane.hue ? { hue: lane.hue } : {},
+			...lane.blockedOn ? { blockedOn: lane.blockedOn } : {},
+			...meta.length > 0 ? { meta } : {}
+		};
+		const parent = lane.parentId === void 0 ? void 0 : byId.get(lane.parentId);
+		if (lane.kind === "session") {
+			groups.push({
+				id: lane.id,
+				...parent ? { parentId: bandOf(parent) } : {}
+			});
+			if (lane.taskId === void 0) continue;
+		}
+		lanes.push({
+			id: lane.id,
+			groupId: bandOf(lane),
+			...lane.kind === "task" && parent?.kind === "task" ? { parentId: parent.id } : {},
+			...facts
+		});
+	}
+	const drawn = new Set(lanes.map((lane) => lane.id));
+	const answerByQuestion = /* @__PURE__ */ new Map();
+	for (const marker of timeline.markers) if (isHistoryEntry(marker.detail) && Task.isAnswerEntry(marker.detail)) answerByQuestion.set(`${marker.laneId}:${marker.detail.questionId}`, marker.id);
+	return {
+		groups,
+		lanes,
+		markers: timeline.markers.flatMap((marker) => drawn.has(marker.laneId) ? [marker] : []).map((marker) => {
+			const question = isHistoryEntry(marker.detail) && Task.isQuestionEntry(marker.detail) ? marker.detail : void 0;
+			const until = question && answerByQuestion.get(`${marker.laneId}:${question.id}`);
+			return {
+				id: marker.id,
+				laneId: marker.laneId,
+				kind: marker.kind,
+				timestamp: marker.timestamp,
+				label: marker.label,
+				...marker.level ? { level: marker.level } : {},
+				...until ? { wait: { until } } : {},
+				...question && !until ? { pending: true } : {}
+			};
+		})
+	};
+};
+//#endregion
 //#region src/session-timeline/session-timeline.ts
+var isStatus = Schema.is(Task.Status);
+/**
+* The status moves in a task's edit history, oldest first; none for a task not stored in a database,
+* which keeps no history.
+*/
+var readTaskStatusChanges = (task) => Obj.getDatabase(task) === void 0 ? [] : Obj.getChanges(task, { property: "status" }).flatMap(({ time, before, after }) => isStatus(after) ? [{
+	timestamp: time,
+	status: after,
+	...isStatus(before) ? { previousStatus: before } : {}
+}] : []);
+/** Statuses of a task not yet picked up. */
+var PENDING_STATUSES = /* @__PURE__ */ new Set(["todo", "backlog"]);
+/**
+* The edit history's status moves, each timed by the trace event recording the same move when there is
+* one. History times are whole seconds, rounded down, so on their own they start a lane up to a second
+* before the node that marks its start; everything derived from them — spans, nodes — reads these.
+*/
+var refineStatusChanges = (changes, events) => {
+	const traced = /* @__PURE__ */ new Map();
+	for (const event of events) if (event.type === Trace.TaskStatusChanged.key) {
+		const data = decode(Trace.TaskStatusChanged.schema, event.data);
+		if (data) traced.set(data.taskId, [...traced.get(data.taskId) ?? [], {
+			timestamp: event.timestamp,
+			status: data.status
+		}]);
+	}
+	return new Map([...changes].map(([taskId, list]) => {
+		const candidates = [...traced.get(taskId) ?? []];
+		return [taskId, list.map((change) => {
+			const index = candidates.findIndex(({ timestamp, status }) => status === change.status && Math.abs(timestamp - change.timestamp) <= HISTORY_MATCH_MS);
+			if (index < 0) return change;
+			const [match] = candidates.splice(index, 1);
+			return {
+				...change,
+				timestamp: match.timestamp
+			};
+		})];
+	}));
+};
+/** Statuses that end a stretch of work on a task. */
+var CLOSED_STATUSES = /* @__PURE__ */ new Set([
+	"done",
+	"review",
+	"failed",
+	"cancelled"
+]);
+var isStatusChange = (detail) => typeof detail === "object" && detail !== null && "status" in detail && isStatus(detail.status);
 var ACTIVE_STATES = /* @__PURE__ */ new Set([Process.State.RUNNING, Process.State.HYBERNATING]);
 /** How long an open lane may be silent before the axis stops following `now`. */
 var OPEN_LANE_STALE_MS = 6e5;
+/** How far apart a task's recorded status move and the trace event recording the same move may land. */
+var HISTORY_MATCH_MS = 5e3;
 var TASK_STATUS = {
 	todo: "pending",
 	backlog: "pending",
@@ -2340,66 +3269,62 @@ var decode = (schema, data) => Option.getOrUndefined(Schema.decodeUnknownOption(
 var sessionLaneId = (key) => `session:${key}`;
 var taskLaneId = (taskId) => `task:${taskId}`;
 /**
-* Cuts a session's events into one segment per task worked, from the status events its task tools
-* write. Only tasks in `taskIds` — the session's own checklist — take part: an agent is free to move
-* a task belonging to nothing on this chart, and such an event must not close the segment that is
-* open or move the boundary.
+* Cuts a session's events into segments of task work, from the status events its task tools write.
+* Only tasks in `taskIds` — the session's own checklist — take part: an agent is free to move a task
+* belonging to nothing on this chart, and such an event must not open or close anything here.
 *
-* A `started` event opens a segment and closes the one still open — the agent keeps exactly one task
-* in progress. Any other status ends the agent's work on the task: `todo` puts it down as surely as
-* `done`, and whatever the agent does next is no longer that task's. A task can also finish without
-* a start: delegation marks every task it hands over
-* `started` before the agent's first turn, so the run's only event for that task is the one closing
-* it. Such a task gets the stretch since the last boundary, which is where its work happened — but
-* only on the transition out of `started` and only while no other task holds the stretch: a task
-* merely dismissed (`todo` → `blocked`) claims nothing, a second close (`review` → `done`) mints
-* nothing, and a close arriving after the next task has started leaves that task's segment alone
-* rather than overlapping it.
+* An agent may hold several tasks in progress at once, and may put one down and pick it up again as
+* it discovers what depends on what: a `started` event opens a segment for its task and leaves every
+* other open segment alone, and any other status closes that task's open segment. A task can also
+* finish without a start: delegation marks every task it hands over `started` before the agent's
+* first turn, so the run's only event for that task is the one closing it. Such a task gets the
+* stretch since the last boundary, which is where its work happened — but only on the transition out
+* of `started` and only while no other task holds the stretch: a task merely dismissed
+* (`todo` → `blocked`) claims nothing, a second close (`review` → `done`) mints nothing, and a close
+* arriving while other work is open leaves that work alone rather than overlapping it.
 */
 var buildTaskSegments = (events, sessionStart, taskIds) => {
 	const segments = [];
-	let open;
+	const open = /* @__PURE__ */ new Map();
 	let boundary = sessionStart;
-	const close = (segment, timestamp) => {
-		segment.end = timestamp;
-		boundary = timestamp;
-		if (open === segment) open = void 0;
-	};
 	for (const event of events) {
 		if (event.type !== Trace.TaskStatusChanged.key) continue;
 		const data = decode(Trace.TaskStatusChanged.schema, event.data);
 		if (!data || !taskIds.has(data.taskId)) continue;
+		const current = open.get(data.taskId);
 		if (data.status === "started") {
-			if (open && open.taskId !== data.taskId) close(open, event.timestamp);
-			if (!open) {
-				open = {
-					taskId: data.taskId,
-					laneId: taskLaneId(data.taskId),
-					start: event.timestamp
-				};
-				segments.push(open);
-				boundary = event.timestamp;
-			}
-		} else {
-			const started = segments.findLast((candidate) => candidate.taskId === data.taskId && candidate.end === void 0);
-			if (started) close(started, event.timestamp);
-			else if (data.previousStatus === "started" && open === void 0) {
+			if (!current) {
 				const segment = {
 					taskId: data.taskId,
 					laneId: taskLaneId(data.taskId),
-					start: Math.min(boundary ?? event.timestamp, event.timestamp)
+					start: event.timestamp
 				};
 				segments.push(segment);
-				close(segment, event.timestamp);
+				open.set(data.taskId, segment);
 			}
+			boundary = event.timestamp;
+		} else if (current) {
+			current.end = event.timestamp;
+			open.delete(data.taskId);
+			boundary = event.timestamp;
+		} else if (data.previousStatus === "started" && open.size === 0) {
+			segments.push({
+				taskId: data.taskId,
+				laneId: taskLaneId(data.taskId),
+				start: Math.min(boundary ?? event.timestamp, event.timestamp),
+				end: event.timestamp
+			});
+			boundary = event.timestamp;
 		}
 	}
 	return segments;
 };
 /**
-* The segment an event belongs to. Segments meet where one task starts over another, so a
-* status event is matched to its own task's segment, and any other event at a shared boundary
-* goes to the later segment — the newcomer's start is the first thing the agent did on it.
+* The segment an event belongs to. A status event goes to its own task's segment. Any other event
+* goes to the one segment in progress when it happened; where segments merely meet, the one ending
+* there yields to the one beginning — the newcomer's start is the first thing the agent did on it.
+* With several tasks genuinely in progress at once the event belongs to none of them in particular,
+* so it stays with the session rather than being credited to whichever started last.
 */
 var segmentFor = (segments, event) => {
 	if (!segments) return;
@@ -2408,15 +3333,85 @@ var segmentFor = (segments, event) => {
 		const data = decode(Trace.TaskStatusChanged.schema, event.data);
 		return data && segments.findLast((segment) => segment.taskId === data.taskId && contains(segment));
 	}
-	return segments.findLast(contains);
+	const candidates = segments.filter(contains);
+	const inside = candidates.filter((segment) => segment.end === void 0 || event.timestamp < segment.end);
+	if (inside.length > 1) return;
+	return inside[0] ?? candidates.at(-1);
+};
+/**
+* The stretch a task's edit history says it was worked: from its first move to `started` to the last
+* move out of it. `end` is absent while the history leaves it `started`; `last` is its last move.
+* Absent when the task was never started.
+*/
+var historySpan = (changes) => {
+	let start;
+	let end;
+	let open = false;
+	for (const change of changes) if (change.status === "started") {
+		start ??= change.timestamp;
+		open = true;
+	} else if (open) {
+		end = change.timestamp;
+		open = false;
+	}
+	const last = changes.at(-1)?.timestamp;
+	return start === void 0 || last === void 0 ? void 0 : {
+		start,
+		end: open ? void 0 : end,
+		last
+	};
+};
+/**
+* The stretches a task was put down between two runs of work: from a move out of `started` that did
+* not finish it (a question blocking it, say) to the next move back. One still open is no gap — the
+* lane simply ends there — and nothing before the first start is one either.
+*/
+var workGaps = (changes) => {
+	const gaps = [];
+	let started = false;
+	let pausedAt;
+	for (const change of changes) if (change.status === "started") {
+		if (pausedAt !== void 0 && change.timestamp > pausedAt) gaps.push({
+			start: pausedAt,
+			end: change.timestamp
+		});
+		started = true;
+		pausedAt = void 0;
+	} else if (started && pausedAt === void 0 && !CLOSED_STATUSES.has(change.status)) pausedAt = change.timestamp;
+	return gaps;
+};
+/** A question or answer in the task's log; other entries are edits the edit history already holds. */
+var exchangeMarker = (entry, id, laneId) => {
+	const timestamp = Date.parse(entry.date);
+	if (Number.isNaN(timestamp)) return;
+	const base = {
+		id,
+		laneId,
+		kind: "task",
+		timestamp,
+		detail: entry
+	};
+	switch (entry.event) {
+		case "question": return {
+			...base,
+			label: entry.text,
+			level: "warn"
+		};
+		case "answer": return {
+			...base,
+			label: `Answered: ${entry.answer}`
+		};
+		default: return;
+	}
 };
 /**
 * Builds the gantt-shaped view of one or more assistant sessions from their trace: session lanes
 * (supervisors and the sub-agents they delegate to), task lanes, and the markers on each.
 */
-var buildSessionTimeline = ({ traceMessages, processes = [], sessions, tasks = [], now }) => {
+var buildSessionTimeline = ({ traceMessages, processes = [], sessions, tasks = [], taskStatusChanges: recordedChanges, now }) => {
 	const spans = flattenSpanTree(buildSpanTree(traceMessages));
 	const events = spans.flatMap((span) => span.events).sort((a, b) => a.timestamp - b.timestamp);
+	const taskStatusChanges = recordedChanges && refineStatusChanges(recordedChanges, events);
 	const requestBegins = events.filter((event) => event.type === Trace.AgentRequestBegin.key && event.meta.pid !== void 0);
 	const agentPidsByChat = /* @__PURE__ */ new Map();
 	for (const process of processes) {
@@ -2510,12 +3505,13 @@ var buildSessionTimeline = ({ traceMessages, processes = [], sessions, tasks = [
 		const chatTaskIds = new Set(chatTasks.map((task) => task.id));
 		const taskLanes = /* @__PURE__ */ new Map();
 		for (const task of chatTasks) {
+			const parentTask = Task.getParentTask(task);
 			const taskLane = {
 				id: taskLaneId(task.id),
 				kind: "task",
 				label: task.title,
 				status: taskLaneStatus(task, tasks),
-				parentId: laneId,
+				parentId: parentTask && chatTaskIds.has(parentTask.id) ? taskLaneId(parentTask.id) : laneId,
 				sessionId: source.session?.id,
 				taskId: task.id
 			};
@@ -2533,6 +3529,18 @@ var buildSessionTimeline = ({ traceMessages, processes = [], sessions, tasks = [
 			taskLane.start = Math.min(taskLane.start ?? segment.start, segment.start);
 			taskLane.end = segment.end === void 0 ? void 0 : Math.max(taskLane.end ?? segment.end, segment.end);
 		}
+		for (const task of chatTasks) {
+			const taskLane = taskLanes.get(task.id);
+			const span = historySpan(taskStatusChanges?.get(task.id) ?? []);
+			if (!taskLane || !span) continue;
+			const tracedEnd = taskLane.start === void 0 ? void 0 : taskLane.end;
+			taskLane.start = Math.min(taskLane.start ?? span.start, span.start);
+			if (span.end === void 0 && task.status === "started") taskLane.end = void 0;
+			else {
+				const end = span.end ?? tracedEnd ?? span.last;
+				taskLane.end = tracedEnd === void 0 ? end : Math.max(tracedEnd, end);
+			}
+		}
 		for (const subPid of subAgentPids) {
 			const match = subAgentSpans.find((candidate) => candidate.pid === subPid);
 			const process = processByPid.get(subPid);
@@ -2568,20 +3576,83 @@ var buildSessionTimeline = ({ traceMessages, processes = [], sessions, tasks = [
 			} else lanes.push(subLane);
 		}
 	}
+	const lanedTaskIds = new Set(lanes.flatMap((lane) => lane.taskId === void 0 ? [] : [lane.taskId]));
+	const unownedLanes = /* @__PURE__ */ new Map();
+	for (const task of tasks) {
+		const span = lanedTaskIds.has(task.id) ? void 0 : historySpan(taskStatusChanges?.get(task.id) ?? []);
+		if (!span) continue;
+		unownedLanes.set(task.id, {
+			id: taskLaneId(task.id),
+			kind: "task",
+			label: task.title,
+			status: taskLaneStatus(task, tasks),
+			start: span.start,
+			end: span.end === void 0 && task.status === "started" ? void 0 : span.end ?? span.last,
+			taskId: task.id
+		});
+	}
+	for (const [taskId, lane] of unownedLanes) {
+		const blockedOn = (taskById.get(taskId)?.dependsOn ?? []).map((ref) => Task.refEntityId(ref)).filter((id) => id !== void 0 && unownedLanes.has(id)).map(taskLaneId);
+		if (blockedOn.length > 0) lane.blockedOn = blockedOn;
+		lanes.push(lane);
+	}
 	for (const [sessionId, segments] of segmentsBySession) segmentsBySession.set(sessionId, segments.filter((segment) => !replacedTaskLanes.has(segment.laneId)));
+	const tracedChanges = /* @__PURE__ */ new Map();
+	for (const event of events) if ((event.meta.pid !== void 0 && laneByPid.has(event.meta.pid) || event.meta.parentPid !== void 0 && laneByPid.has(event.meta.parentPid)) && event.type === Trace.TaskStatusChanged.key) {
+		const data = decode(Trace.TaskStatusChanged.schema, event.data);
+		if (data) tracedChanges.set(data.taskId, [...tracedChanges.get(data.taskId) ?? [], event]);
+	}
+	const mergedEvents = /* @__PURE__ */ new Set();
+	for (const lane of lanes) {
+		const task = lane.taskId === void 0 ? void 0 : taskById.get(lane.taskId);
+		if (!task) continue;
+		const traced = tracedChanges.get(task.id) ?? [];
+		const changes = taskStatusChanges?.get(task.id) ?? [];
+		const firstStart = changes.findIndex((change) => change.status === "started");
+		for (const [index, change] of changes.entries()) {
+			if (PENDING_STATUSES.has(change.status) && (firstStart < 0 || index < firstStart)) continue;
+			const match = traced.find((event) => !mergedEvents.has(event) && decode(Trace.TaskStatusChanged.schema, event.data)?.status === change.status && Math.abs(event.timestamp - change.timestamp) <= HISTORY_MATCH_MS);
+			if (match) mergedEvents.add(match);
+			markers.push({
+				id: `${lane.id}:${markers.length}`,
+				laneId: lane.id,
+				kind: "task",
+				timestamp: match?.timestamp ?? change.timestamp,
+				label: `Task ${change.status}`,
+				level: change.status === "failed" ? "error" : void 0,
+				pid: match?.meta.pid,
+				detail: change
+			});
+		}
+		for (const entry of task.history ?? []) {
+			const marker = exchangeMarker(entry, `${lane.id}:${markers.length}`, lane.id);
+			if (marker) markers.push(marker);
+		}
+	}
 	for (const lane of lanes) if (lane.blockedOn) lane.blockedOn = lane.blockedOn.map((id) => replacedTaskLanes.get(id) ?? id);
 	const tokens = /* @__PURE__ */ new Map();
 	const spawnMarkerByPid = /* @__PURE__ */ new Map();
+	const returnMarkerByPid = /* @__PURE__ */ new Map();
 	for (const event of events) {
 		const laneId = (event.meta.pid && laneByPid.get(event.meta.pid)) ?? (event.meta.parentPid && laneByPid.get(event.meta.parentPid)) ?? void 0;
 		if (laneId === void 0) continue;
 		const markerLaneId = event.type === Trace.AgentRequestBegin.key || event.type === Trace.AgentRequestEnd.key ? laneId : segmentFor(segmentsBySession.get(laneId), event)?.laneId ?? laneId;
-		const marker = toMarker(event, `${markerLaneId}:${markers.length}`, markerLaneId);
+		const marker = mergedEvents.has(event) ? void 0 : toMarker(event, `${markerLaneId}:${markers.length}`, markerLaneId);
 		if (marker) {
 			markers.push(marker);
-			if (marker.kind === "delegation") {
+			if (event.type === Trace.DelegationSpawned.key) {
 				const data = decode(Trace.DelegationSpawned.schema, event.data);
-				if (data) spawnMarkerByPid.set(data.pid, marker.id);
+				if (data) spawnMarkerByPid.set(data.pid, {
+					laneId: marker.laneId,
+					markerId: marker.id
+				});
+			}
+			if (event.type === Trace.DelegationCompleted.key) {
+				const data = decode(Trace.DelegationCompleted.schema, event.data);
+				if (data) returnMarkerByPid.set(data.pid, {
+					laneId: marker.laneId,
+					markerId: marker.id
+				});
 			}
 		}
 		if (event.type === Trace.CompleteBlock.key) {
@@ -2616,18 +3687,22 @@ var buildSessionTimeline = ({ traceMessages, processes = [], sessions, tasks = [
 		}
 	}
 	for (const { lane, sessionLaneId } of childSessions) {
-		const markerId = (lane.pid && spawnMarkerByPid.get(lane.pid)) ?? markers.filter((marker) => marker.laneId === sessionLaneId && marker.timestamp <= (lane.start ?? 0)).at(-1)?.id;
-		if (markerId !== void 0) lane.delegatedFrom = {
+		const fallbackId = markers.filter((marker) => marker.laneId === sessionLaneId && marker.timestamp <= (lane.start ?? 0)).at(-1)?.id;
+		const spawn = (lane.pid === void 0 ? void 0 : spawnMarkerByPid.get(lane.pid)) ?? (fallbackId === void 0 ? void 0 : {
 			laneId: sessionLaneId,
-			markerId
-		};
+			markerId: fallbackId
+		});
+		if (spawn) lane.delegatedFrom = spawn;
+		const returned = lane.pid === void 0 ? void 0 : returnMarkerByPid.get(lane.pid);
+		if (returned) lane.returnedTo = returned;
 	}
 	for (const session of lanes.filter((lane) => lane.kind === "session" && lane.parentId === void 0)) {
 		const children = lanes.filter((lane) => lane.parentId === session.id);
 		const [task] = children;
-		if (children.length !== 1 || task.kind !== "task" || lanes.some((lane) => lane.blockedOn?.includes(task.id))) continue;
+		if (children.length !== 1 || task.kind !== "task" || lanes.some((lane) => lane.parentId === task.id || lane.blockedOn?.includes(task.id))) continue;
 		lanes.splice(lanes.indexOf(task), 1);
 		session.taskId = task.taskId;
+		if (task.start !== void 0) session.start = session.start === void 0 ? task.start : Math.min(session.start, task.start);
 		if (task.status === "blocked" || task.status === "review" || task.status === "pending") session.status = task.status;
 		markers.forEach((marker, index) => {
 			if (marker.laneId === task.id) markers[index] = {
@@ -2636,6 +3711,49 @@ var buildSessionTimeline = ({ traceMessages, processes = [], sessions, tasks = [
 			};
 		});
 	}
+	const laneById = new Map(lanes.map((lane) => [lane.id, lane]));
+	const laneByTaskId = new Map(lanes.flatMap((lane) => lane.taskId === void 0 ? [] : [[lane.taskId, lane]]));
+	const ancestorLanesOf = (lane) => {
+		const task = lane.taskId === void 0 ? void 0 : taskById.get(lane.taskId);
+		const ancestors = [];
+		const seen = new Set(task ? [task.id] : []);
+		for (let parent = task && Task.getParentTask(task); parent && !seen.has(parent.id); parent = Task.getParentTask(parent)) {
+			seen.add(parent.id);
+			const parentLane = laneByTaskId.get(parent.id);
+			if (parentLane?.kind === "task") ancestors.push(parentLane);
+		}
+		return ancestors;
+	};
+	for (const marker of [...markers]) {
+		const lane = laneById.get(marker.laneId);
+		if (lane?.kind !== "task" || !isStatusChange(marker.detail)) continue;
+		const { status } = marker.detail;
+		if (status !== "started" && !CLOSED_STATUSES.has(status)) continue;
+		for (const ancestor of ancestorLanesOf(lane)) markers.push({
+			...marker,
+			id: `${ancestor.id}:sub:${marker.id}`,
+			laneId: ancestor.id,
+			label: `${lane.label}: ${status}`
+		});
+	}
+	for (const lane of lanes) {
+		const task = lane.taskId === void 0 ? void 0 : taskById.get(lane.taskId);
+		if (!task || lane.start === void 0) continue;
+		const seen = /* @__PURE__ */ new Set([task.id]);
+		for (let parent = Task.getParentTask(task); parent && !seen.has(parent.id); parent = Task.getParentTask(parent)) {
+			seen.add(parent.id);
+			const parentLane = laneByTaskId.get(parent.id);
+			if (parentLane?.start !== void 0 && lane.start < parentLane.start) parentLane.start = lane.start;
+		}
+	}
+	for (const lane of lanes) {
+		const task = lane.taskId === void 0 ? void 0 : taskById.get(lane.taskId);
+		if (task) {
+			lane.hue = getHashHue(Obj.getMnemonic(task));
+			const gaps = workGaps(taskStatusChanges?.get(task.id) ?? []);
+			if (gaps.length > 0) lane.gaps = gaps;
+		}
+	}
 	const times = [...lanes.flatMap((lane) => [lane.start, lane.end]).filter((time) => time !== void 0), ...markers.map((marker) => marker.timestamp)];
 	const hasOpen = lanes.some((lane) => lane.start !== void 0 && lane.end === void 0);
 	const latest = times.length > 0 ? Math.max(...times) : void 0;
@@ -2701,6 +3819,16 @@ var toMarker = (event, id, laneId) => {
 				detail: data
 			};
 		}
+		case Trace.DelegationCompleted.key: {
+			const data = decode(Trace.DelegationCompleted.schema, event.data);
+			return {
+				...base,
+				kind: "delegation",
+				label: data?.status === "failure" ? "Sub-agent failed" : `Returned${data?.result ? `: ${data.result}` : ""}`,
+				level: data?.status === "failure" ? "error" : void 0,
+				detail: data
+			};
+		}
 		case Trace.OperationStart.key: {
 			const data = decode(Trace.OperationStart.schema, event.data);
 			return {
@@ -2740,6 +3868,7 @@ var toMarker = (event, id, laneId) => {
 //#endregion
 //#region src/session-timeline/types.ts
 var LaneKind = Schema.Literals(["session", "task"]);
+var LaneHue = Schema.Literals([palette.neutral.hue, ...palette.hues.map((style) => style.hue)]);
 var LaneStatus = Schema.Literals([
 	"pending",
 	"blocked",
@@ -2785,13 +3914,25 @@ var Lane = Schema.Struct({
 	/** Epoch ms. */
 	start: Schema.optional(Schema.Number),
 	end: Schema.optional(Schema.Number),
+	/**
+	* Stretches inside `start`..`end` when the lane's task was put down — blocked on a question, say —
+	* and later picked up again; the lane is drawn as separate runs around them.
+	*/
+	gaps: Schema.optional(Schema.Array(Schema.Struct({
+		start: Schema.Number,
+		end: Schema.Number
+	}))),
 	parentId: Schema.optional(Schema.String),
 	sessionId: Schema.optional(Schema.String),
 	taskId: Schema.optional(Schema.String),
+	/** The task's hue, hashed from its mnemonic, so the lane matches the task's mnemonic chip. */
+	hue: Schema.optional(LaneHue),
 	pid: Schema.optional(Schema.String),
 	/** Lane ids this lane waits on (task dependencies). */
 	blockedOn: Schema.optional(Schema.Array(Schema.String)),
 	delegatedFrom: Schema.optional(DelegationSource),
+	/** Node in the supervisor lane this lane's result was folded back into. */
+	returnedTo: Schema.optional(DelegationSource),
 	tokens: Schema.optional(TokenUsage),
 	toolCalls: Schema.optional(Schema.Number)
 });
@@ -2838,6 +3979,21 @@ var TICK_MS = 5e3;
 var TRACE_DEBOUNCE = Duration.millis(500);
 var NO_PROCESSES = [];
 /**
+* A task's status moves, re-read only when its document has moved on: reading them diffs every change
+* in the document, and the timeline rebuilds on every trace emission and tick.
+*/
+var cachedStatusChanges = (cache, task) => {
+	const heads = (Obj.version(task).automergeHeads ?? []).join(",");
+	const cached = cache.get(task.id);
+	if (cached?.heads === heads) return cached.changes;
+	const changes = readTaskStatusChanges(task);
+	cache.set(task.id, {
+		heads,
+		changes
+	});
+	return changes;
+};
+/**
 * The live gantt-shaped view of the given sessions: rebuilt as trace events land on the space's
 * trace feed and as the process tree changes, and ticked so open lanes keep extending.
 */
@@ -2848,13 +4004,18 @@ var useSessionTimeline = (space, { sessions, tasks, processes = NO_PROCESSES })
 		const interval = setInterval(() => setNow(Date.now()), TICK_MS);
 		return () => clearInterval(interval);
 	}, []);
-	return useMemo(() => buildSessionTimeline({
-		traceMessages,
-		processes,
-		sessions,
-		tasks,
-		now
-	}), [
+	const statusChangeCache = useRef(/* @__PURE__ */ new Map());
+	return useMemo(() => {
+		const taskStatusChanges = new Map((tasks ?? []).map((task) => [task.id, cachedStatusChanges(statusChangeCache.current, task)]));
+		return buildSessionTimeline({
+			traceMessages,
+			processes,
+			sessions,
+			tasks,
+			taskStatusChanges,
+			now
+		});
+	}, [
 		traceMessages,
 		processes,
 		sessions,
@@ -2863,6 +4024,6 @@ var useSessionTimeline = (space, { sessions, tasks, processes = NO_PROCESSES })
 	]);
 };
 //#endregion
-export { ALL_PROCESS_ENVIRONMENTS, BEGIN_EVENT_TYPES, CommitSelector, DEFAULT_PROCESS_ENVIRONMENTS, DEFAULT_SPAN_TIMEOUT_MS, DelegationSource, END_EVENT_TYPES, Gantt, Lane, LaneKind, LaneStatus, Marker, MarkerKind, MarkerLevel, ProcessEnvironment, ProcessTree, ROOT_SPAN_ID, Session, SessionTimeline, TimeRange, Timeline, TokenUsage, TracePanel, buildExecutionGraph, buildSessionTimeline, buildSpanTree, collectProcessActivityLines, compactOptions, defaultOptions, deriveInFlightActivityLine, environmentIcon, estimateTokenCount, filterProcesses, filterTraceMessages, flattenSpanTree, formatPendingBlockStatus, getTraceMessagesAtom, isSpanBeginEvent, isSpanEndEvent, parseProcessEnvironments, pendingStatusFromEphemeralMessage, processEnvironment, renderTimelineAscii, resolveEphemeralStatusUpdate, toggleProcessEnvironment, useExecutionGraph, useSessionTimeline, useTraceMenu, useTraceMessages, walkSpanTree };
+export { ALL_PROCESS_ENVIRONMENTS, BEGIN_EVENT_TYPES, CommitSelector, DEFAULT_PROCESS_ENVIRONMENTS, DEFAULT_SPAN_TIMEOUT_MS, DelegationSource, END_EVENT_TYPES, Gantt, Lane, LaneHue, LaneKind, LaneStatus, Marker, MarkerKind, MarkerLevel, ProcessEnvironment, ProcessTree, ROOT_SPAN_ID, Session, SessionTimeline, TimeRange, Timeline, TokenUsage, TracePanel, buildExecutionGraph, buildSessionTimeline, buildSpanTree, collectProcessActivityLines, compactOptions, defaultOptions, deriveInFlightActivityLine, environmentIcon, estimateTokenCount, filterProcesses, filterProcessesBySelection, filterTraceMessages, flattenSpanTree, formatElapsed, formatPendingBlockStatus, getTraceMessagesAtom, isSpanBeginEvent, isSpanEndEvent, orderRows, parseProcessEnvironments, pendingStatusFromEphemeralMessage, processEnvironment, readTaskStatusChanges, renderTimelineAscii, resolveEphemeralStatusUpdate, sessionTimelineToGantt, timeScale, toggleProcessEnvironment, unitScale, useExecutionGraph, useSessionTimeline, useTraceMenu, useTraceMessages, walkSpanTree };
 
 //# sourceMappingURL=index.mjs.map