diff --git a/web/src/lib/components/repo/pipelines/WorkflowLogs.stories.svelte b/web/src/lib/components/repo/pipelines/WorkflowLogs.stories.svelte
index 176c187b2..e2ebd527c 100644
--- a/web/src/lib/components/repo/pipelines/WorkflowLogs.stories.svelte
+++ b/web/src/lib/components/repo/pipelines/WorkflowLogs.stories.svelte
@@ -25,14 +25,16 @@
 	// the tail stories need a log that actually grows, because the whole point is
 	// what the viewport does between two frames. one feed each, or whichever story
 	// you open second starts on an exhausted tail
-	const feed = () => {
+	const feed = (every = 250, frames = 1) => {
 		const tail = createLogTail();
 		let steps = $state<LogStep[]>(tail.advance());
 		$effect(() => {
 			const timer = setInterval(() => {
-				steps = tail.advance();
+				let next = steps;
+				for (let i = 0; i < frames; i++) next = tail.advance();
+				steps = next;
 				if (tail.exhausted()) clearInterval(timer);
-			}, 250);
+			}, every);
 			return () => clearInterval(timer);
 		});
 		return {
@@ -44,6 +46,8 @@
 
 	const live = feed();
 	const replayed = feed();
+	// the app flushes once a frame, so a busy step lands several lines a tick
+	const burst = feed(60, 2);
 </script>
 
 <Story name="Default" />
@@ -59,7 +63,24 @@
 <!-- 4k lines virtualized -->
 <Story name="Long" args={{ steps: longWorkflowLog }} />
 <!-- a growing log on a live run: opens on the tail and keeps following it until
-     you scroll or select, then hands the viewport over and offers the way back -->
-<Story name="Live tail" args={{ steps: live.steps, status: "streaming", live: true }} />
+     you scroll or select, then hands the viewport over and offers the way back.
+     the steps go through the template, because args are a snapshot: storybook
+     reads them once per story and never sees the feed move -->
+<Story name="Live tail" args={{ status: "streaming", live: true }}>
+	{#snippet template(args)}
+		<WorkflowLogs {...args} steps={live.steps} />
+	{/snippet}
+</Story>
 <!-- the same growing log on a finished run: opens at the first step and stays put -->
-<Story name="Replayed tail" args={{ steps: replayed.steps, status: "streaming" }} />
+<Story name="Replayed tail" args={{ status: "streaming" }}>
+	{#snippet template(args)}
+		<WorkflowLogs {...args} steps={replayed.steps} />
+	{/snippet}
+</Story>
+<!-- lines landing every frame, the way a busy step really arrives: scrolling away
+     still has to take the viewport on the first try -->
+<Story name="Bursting tail" args={{ status: "streaming", live: true }}>
+	{#snippet template(args)}
+		<WorkflowLogs {...args} steps={burst.steps} />
+	{/snippet}
+</Story>
diff --git a/web/src/lib/components/repo/pipelines/WorkflowLogs.svelte b/web/src/lib/components/repo/pipelines/WorkflowLogs.svelte
index 47becc804..81a6601b8 100644
--- a/web/src/lib/components/repo/pipelines/WorkflowLogs.svelte
+++ b/web/src/lib/components/repo/pipelines/WorkflowLogs.svelte
@@ -39,9 +39,14 @@
 	// reader took over
 	const END_SLACK = 8;
 
-	// a scroll event lands a frame or two after the virtualizer sets scrollTop, so
-	// anything inside this window is ours and never counts as the reader scrolling
-	const COMMAND_WINDOW = 120;
+	// a row measuring taller than its estimate parks the viewport short of the end,
+	// so anything tighter than this strands the follow there
+	const NEAR_END = 70;
+
+	const distanceFromEnd = (scroller: HTMLElement): number =>
+		scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight;
+
+	const OFFSET_SLACK = 1;
 </script>
 
 <script lang="ts">
@@ -82,12 +87,16 @@
 	let detached = $state(false);
 	// a selection in flight, so new lines must not pull the text out from under it
 	let selecting = $state(false);
-	let commandedAt = 0;
+	let pressing = $state(false);
+	// our own scrolling lands on this offset and the reader's never does
+	let ownedOffset: number | null = null;
 	let openedAtTail = false;
 	// explicitly toggled step ids
 	const toggled = new SvelteSet<number>();
 
-	const following = $derived(live && !detached && !selecting);
+	// a press counts, or collapsing a selection mid-drag jumps the text under the cursor
+	const holding = $derived(selecting || pressing);
+	const following = $derived(live && !detached && !holding);
 
 	const collapsed = $derived(
 		new Set(
@@ -119,10 +128,18 @@
 		options,
 		instance
 	) => {
-		commandedAt = performance.now();
+		ownedOffset = offset;
 		elementScroll(offset, options, instance);
 	};
 
+	const ownsViewport = (scroller: HTMLElement): boolean => {
+		if (ownedOffset === null) return false;
+		if (Math.abs(scroller.scrollTop - ownedOffset) <= OFFSET_SLACK) return true;
+		// we asked for more than the element had to give and it saturated at the end,
+		// which is still our scroll and must not read as the reader returning
+		return ownedOffset > scroller.scrollTop && distanceFromEnd(scroller) <= OFFSET_SLACK;
+	};
+
 	const virtualizer = createVirtualizer<HTMLDivElement, HTMLElement>({
 		count: 0,
 		getScrollElement: () => viewport,
@@ -131,10 +148,7 @@
 		overscan: 24,
 		rangeExtractor,
 		scrollToFn,
-		// hold the bottom edge still while rows land and remeasure, instead of
-		// letting a corrected estimate shift the text under the reader
-		anchorTo: "end",
-		scrollEndThreshold: END_SLACK,
+		scrollEndThreshold: NEAR_END,
 		followOnAppend: false
 	});
 
@@ -142,6 +156,7 @@
 		const current = rows;
 		const scroller = viewport;
 		const follow = following;
+		const anchor = follow ? "end" : "start";
 		untrack(() =>
 			$virtualizer.setOptions({
 				count: current.length,
@@ -150,6 +165,9 @@
 					current[index] ? ROW_HEIGHT[current[index].kind] : ROW_HEIGHT.line,
 				getItemKey: (index) => (current[index] ? rowKey(current[index], index) : index),
 				rangeExtractor,
+				// riding the tail holds the bottom edge still through a remeasure. reading
+				// holds the top edge, or a corrected estimate drifts the text downward
+				anchorTo: anchor,
 				// the virtualizer only follows when the viewport already sat at the end,
 				// so a reader who scrolled up keeps their place
 				followOnAppend: follow
@@ -162,6 +180,9 @@
 	$effect(() => {
 		const instance = $virtualizer;
 		if (openedAtTail || !live || !viewport || rows.length === 0) return;
+		// the virtualizer takes the scroll element on its next update, and a scroll it
+		// cannot see yet goes nowhere
+		if (!instance.scrollElement) return;
 		openedAtTail = true;
 		instance.scrollToEnd();
 	});
@@ -169,17 +190,43 @@
 	const onscroll = () => {
 		const scroller = viewport;
 		if (!scroller) return;
+		const previous = scrollTop;
 		scrollTop = scroller.scrollTop;
-		const distance = scroller.scrollHeight - scroller.scrollTop - scroller.clientHeight;
-		// back at the end, whoever put us there: follow the tail again
-		if (distance <= END_SLACK) {
-			detached = false;
+		if (ownsViewport(scroller)) return;
+		// only an upward move is a takeover: the browser can clamp a scroll we asked
+		// for, and reading that short landing as the reader would stop the tail itself
+		if (scrollTop < previous) {
+			detached = true;
 			return;
 		}
-		if (performance.now() - commandedAt < COMMAND_WINDOW) return;
+		if (distanceFromEnd(scroller) <= END_SLACK) detached = false;
+	};
+
+	// firefox animates a wheel scroll, so its scroll event can land after the next
+	// append pinned us back to the end. the wheel itself says the reader wants out
+	const onwheel = (event: WheelEvent) => {
+		const scroller = viewport;
+		if (!scroller || event.deltaY >= 0) return;
+		// a wheel over a log that fits moves nothing, so it takes nothing over
+		if (scroller.scrollTop === 0) return;
 		detached = true;
 	};
 
+	const onkeydown = (event: KeyboardEvent) => {
+		const scroller = viewport;
+		if (!scroller || scroller.scrollTop === 0) return;
+		if (!(event.target instanceof Node) || !scroller.contains(event.target)) return;
+		if (event.key === "ArrowUp" || event.key === "PageUp" || event.key === "Home") {
+			detached = true;
+		}
+	};
+
+	const onpointerdown = (event: PointerEvent) => {
+		const scroller = viewport;
+		pressing =
+			scroller !== null && event.target instanceof Node && scroller.contains(event.target);
+	};
+
 	const onselectionchange = () => {
 		const scroller = viewport;
 		const selection = document.getSelection();
@@ -191,11 +238,32 @@
 			scroller.contains(selection.anchorNode);
 	};
 
+	// a hold parks the viewport too far back for the virtualizer to re-arm itself
+	let wasHolding = false;
+	$effect(() => {
+		if (holding) {
+			wasHolding = true;
+			return;
+		}
+		if (!wasHolding) return;
+		wasHolding = false;
+		if (!live || detached) return;
+		untrack(() => $virtualizer).scrollToEnd();
+	});
+
 	const jumpToTail = () => {
 		detached = false;
 		$virtualizer.scrollToEnd();
 	};
 
+	// the end comes from the virtualizer, because a growing log moves it without
+	// firing a scroll event
+	const behindTail = $derived.by(() => {
+		const scroller = viewport;
+		if (!live || !scroller) return false;
+		return $virtualizer.getTotalSize() - scroller.clientHeight - scrollTop > NEAR_END;
+	});
+
 	const stickyInfo = $derived.by(() => {
 		if (scrollTop <= 0) return null;
 		const virtualItems = $virtualizer.getVirtualItems();
@@ -234,7 +302,17 @@
 	const classes = workflowLogs;
 </script>
 
-<svelte:document {onselectionchange} />
+<svelte:document
+	{onselectionchange}
+	{onkeydown}
+	{onpointerdown}
+	onpointerup={() => (pressing = false)}
+	onpointercancel={() => (pressing = false)}
+	onpointermove={(event) => {
+		// a release outside the window never reaches us
+		if (event.buttons === 0) pressing = false;
+	}}
+/>
 
 {#if steps.length === 0}
 	<div class={classes().empty()}>
@@ -249,6 +327,7 @@
 		<div
 			bind:this={viewport}
 			{onscroll}
+			{onwheel}
 			class={classes().viewport()}
 			style="height: min(70dvh, 60rem)"
 		>
@@ -335,7 +414,7 @@
 				{/each}
 			</div>
 		</div>
-		{#if live && detached}
+		{#if behindTail}
 			<div class="pointer-events-none absolute inset-x-0 bottom-3 flex justify-center">
 				<Button
 					size="small"