diff --git a/web/src/lib/components/repo/pipelines/WorkflowLogs.stories.svelte b/web/src/lib/components/repo/pipelines/WorkflowLogs.stories.svelte
index 3be5de5c..de90b9fd 100644
--- a/web/src/lib/components/repo/pipelines/WorkflowLogs.stories.svelte
+++ b/web/src/lib/components/repo/pipelines/WorkflowLogs.stories.svelte
@@ -1,7 +1,12 @@
 <script module lang="ts">
 	import { defineMeta } from "@storybook/addon-svelte-csf";
 	import WorkflowLogs from "./WorkflowLogs.svelte";
-	import { longWorkflowLog, runningWorkflowLog, workflowLog } from "./mock";
+	import {
+		createLogTail,
+		longWorkflowLog,
+		runningWorkflowLog,
+		workflowLog
+	} from "./mock";
 
 	const { Story } = defineMeta({
 		title: "Repo/Pipelines/WorkflowLogs",
@@ -14,6 +19,33 @@
 	});
 </script>
 
+<script lang="ts">
+	import type { LogStep } from "./logs";
+
+	// 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 tail = createLogTail();
+		let steps = $state<LogStep[]>(tail.advance());
+		$effect(() => {
+			const timer = setInterval(() => {
+				steps = tail.advance();
+				if (tail.exhausted()) clearInterval(timer);
+			}, 250);
+			return () => clearInterval(timer);
+		});
+		return {
+			get steps() {
+				return steps;
+			}
+		};
+	};
+
+	const live = feed();
+	const replayed = feed();
+</script>
+
 <Story name="Default" />
 <!-- active step timer ticks while setup step stays folded -->
 <Story name="Streaming" args={{ steps: runningWorkflowLog, status: "streaming" }} />
@@ -26,3 +58,8 @@
 <Story name="Stream error" args={{ status: "done", error: "workflow not found" }} />
 <!-- 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 }} />
+<!-- 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" }} />
diff --git a/web/src/lib/components/repo/pipelines/WorkflowLogs.svelte b/web/src/lib/components/repo/pipelines/WorkflowLogs.svelte
index 4f11fd6a..47becc80 100644
--- a/web/src/lib/components/repo/pipelines/WorkflowLogs.svelte
+++ b/web/src/lib/components/repo/pipelines/WorkflowLogs.svelte
@@ -33,6 +33,15 @@
 		line: 22,
 		gap: 8
 	};
+
+	// slack for a fractional scrollTop. it has to stay under one line, or a single
+	// appended line still reads as "at the end" and the tail creeps along after the
+	// 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;
 </script>
 
 <script lang="ts">
@@ -41,11 +50,15 @@
 	import {
 		createVirtualizer,
 		defaultRangeExtractor,
-		type SvelteVirtualizer
+		elementScroll,
+		type SvelteVirtualizer,
+		type VirtualizerOptions
 	} from "@tanstack/svelte-virtual";
+	import ArrowDownToLine from "$icon/arrow-down-to-line";
 	import ChevronDown from "$icon/chevron-down";
 	import ChevronRight from "$icon/chevron-right";
 	import TriangleAlert from "$icon/triangle-alert";
+	import Button from "$lib/components/ui/Button.svelte";
 	import Error from "$lib/components/ui/Error.svelte";
 	import Spinner from "$lib/components/ui/Spinner.svelte";
 	import Elapsed from "./Elapsed.svelte";
@@ -55,18 +68,27 @@
 	interface Props {
 		steps: LogStep[];
 		status: LogStreamStatus;
+		// the run is still going, so the tail is worth following
+		live?: boolean;
 		// stream error frame if spindle sent one
 		error?: string | null;
 	}
 
-	let { steps, status, error = null }: Props = $props();
+	let { steps, status, live = false, error = null }: Props = $props();
 
 	let viewport = $state<HTMLDivElement | null>(null);
 	let scrollTop = $state(0);
-	let following = $state(true);
+	// the reader scrolled away from the tail and owns the viewport until they come back
+	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 openedAtTail = false;
 	// explicitly toggled step ids
 	const toggled = new SvelteSet<number>();
 
+	const following = $derived(live && !detached && !selecting);
+
 	const collapsed = $derived(
 		new Set(
 			steps
@@ -90,18 +112,36 @@
 		return indexes;
 	};
 
+	// every scroll the virtualizer performs comes through here, which is how the
+	// scroll handler tells our own scrolling apart from the reader's
+	const scrollToFn: VirtualizerOptions<HTMLDivElement, HTMLElement>["scrollToFn"] = (
+		offset,
+		options,
+		instance
+	) => {
+		commandedAt = performance.now();
+		elementScroll(offset, options, instance);
+	};
+
 	const virtualizer = createVirtualizer<HTMLDivElement, HTMLElement>({
 		count: 0,
 		getScrollElement: () => viewport,
 		estimateSize: () => ROW_HEIGHT.line,
 		measureElement: (element) => Math.round(element.getBoundingClientRect().height),
 		overscan: 24,
-		rangeExtractor
+		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,
+		followOnAppend: false
 	});
 
 	$effect.pre(() => {
 		const current = rows;
 		const scroller = viewport;
+		const follow = following;
 		untrack(() =>
 			$virtualizer.setOptions({
 				count: current.length,
@@ -109,23 +149,51 @@
 				estimateSize: (index) =>
 					current[index] ? ROW_HEIGHT[current[index].kind] : ROW_HEIGHT.line,
 				getItemKey: (index) => (current[index] ? rowKey(current[index], index) : index),
-				rangeExtractor
+				rangeExtractor,
+				// the virtualizer only follows when the viewport already sat at the end,
+				// so a reader who scrolled up keeps their place
+				followOnAppend: follow
 			})
 		);
 	});
 
-	// scroll to bottom directly as new lines land and remeasure
+	// a live run opens on its tail. a finished one opens at the first step, the way
+	// you read a log you already know the end of
 	$effect(() => {
-		const scroller = viewport;
-		const bottom = $virtualizer.getTotalSize();
-		if (!scroller || !untrack(() => following)) return;
-		scroller.scrollTop = bottom;
+		const instance = $virtualizer;
+		if (openedAtTail || !live || !viewport || rows.length === 0) return;
+		openedAtTail = true;
+		instance.scrollToEnd();
 	});
 
 	const onscroll = () => {
-		if (!viewport) return;
-		scrollTop = viewport.scrollTop;
-		following = viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight < 8;
+		const scroller = viewport;
+		if (!scroller) return;
+		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;
+			return;
+		}
+		if (performance.now() - commandedAt < COMMAND_WINDOW) return;
+		detached = true;
+	};
+
+	const onselectionchange = () => {
+		const scroller = viewport;
+		const selection = document.getSelection();
+		if (!scroller) return;
+		selecting =
+			selection !== null &&
+			!selection.isCollapsed &&
+			selection.anchorNode !== null &&
+			scroller.contains(selection.anchorNode);
+	};
+
+	const jumpToTail = () => {
+		detached = false;
+		$virtualizer.scrollToEnd();
 	};
 
 	const stickyInfo = $derived.by(() => {
@@ -166,6 +234,8 @@
 	const classes = workflowLogs;
 </script>
 
+<svelte:document {onselectionchange} />
+
 {#if steps.length === 0}
 	<div class={classes().empty()}>
 		{#if status === "connecting"}
@@ -175,94 +245,108 @@
 		{/if}
 	</div>
 {:else}
-	<div
-		bind:this={viewport}
-		{onscroll}
-		class={classes().viewport()}
-		style="height: min(70dvh, 60rem)"
-	>
-		{#if stickyInfo}
-			{@const slots = classes({
-				collapsed: collapsed.has(stickyInfo.step.id),
-				first: rows[stickyInfo.index - 1]?.kind === "step",
-				last: isLastRow(rows, stickyInfo.index)
-			})}
-			<div
-				class="pointer-events-auto sticky top-0 z-20 -mb-11 w-full"
-				style="transform: translateY({stickyInfo.offset}px)"
-			>
-				<button
-					type="button"
-					class={slots.header()}
-					style="min-height: {ROW_HEIGHT.step}px"
-					aria-expanded={!collapsed.has(stickyInfo.step.id)}
-					onclick={() => toggle(stickyInfo.step.id)}
+	<div class="relative">
+		<div
+			bind:this={viewport}
+			{onscroll}
+			class={classes().viewport()}
+			style="height: min(70dvh, 60rem)"
+		>
+			{#if stickyInfo}
+				{@const slots = classes({
+					collapsed: collapsed.has(stickyInfo.step.id),
+					first: rows[stickyInfo.index - 1]?.kind === "step",
+					last: isLastRow(rows, stickyInfo.index)
+				})}
+				<div
+					class="pointer-events-auto sticky top-0 z-20 -mb-11 w-full"
+					style="transform: translateY({stickyInfo.offset}px)"
 				>
-					{#if collapsed.has(stickyInfo.step.id)}
-						<ChevronRight class={slots.chevron()} aria-hidden="true" />
-					{:else}
-						<ChevronDown class={slots.chevron()} aria-hidden="true" />
-					{/if}
-					<span class={slots.name()}>{stickyInfo.step.name}</span>
-					<Elapsed
-						start={stickyInfo.step.startedAt}
-						end={stickyInfo.step.finishedAt}
-						class={slots.elapsed()}
-					/>
-				</button>
-			</div>
-		{/if}
-		<div class={classes().sizer()} style="height: {$virtualizer.getTotalSize()}px">
-			{#each $virtualizer.getVirtualItems() as item (item.key)}
-				{@const row = rows[item.index]}
-				{#if row}
-					{@const slots = classes({
-						collapsed: row.kind === "step" && collapsed.has(row.step.id),
-						first: rows[item.index - 1]?.kind === "step",
-						last: isLastRow(rows, item.index)
-					})}
-					<div
-						class={slots.row()}
-						style="transform: translateY({item.start}px)"
-						data-index={item.index}
-						use:measure={$virtualizer}
+					<button
+						type="button"
+						class={slots.header()}
+						style="min-height: {ROW_HEIGHT.step}px"
+						aria-expanded={!collapsed.has(stickyInfo.step.id)}
+						onclick={() => toggle(stickyInfo.step.id)}
 					>
-						{#if row.kind === "step"}
-							<button
-								type="button"
-								class="{slots.header()} pointer-events-auto"
-								style="position: sticky; top: 0; min-height: {ROW_HEIGHT.step}px"
-								aria-expanded={!collapsed.has(row.step.id)}
-								onclick={() => toggle(row.step.id)}
-							>
-								{#if collapsed.has(row.step.id)}
-									<ChevronRight class={slots.chevron()} aria-hidden="true" />
-								{:else}
-									<ChevronDown class={slots.chevron()} aria-hidden="true" />
-								{/if}
-								<span class={slots.name()}>{row.step.name}</span>
-								<Elapsed
-									start={row.step.startedAt}
-									end={row.step.finishedAt}
-									class={slots.elapsed()}
-								/>
-							</button>
-						{:else if row.kind === "command"}
-							<div class={slots.body()}>
-								<div class={slots.command()}>{row.command}</div>
-							</div>
-						{:else if row.kind === "line"}
-							<div class={slots.body()}>
-								<!-- ansi_up escapes the log text; the only markup is its own spans -->
-								<div class={slots.line()}>{@html row.html}</div>
-							</div>
-						{:else if row.kind === "gap"}
-							<div style="height: {ROW_HEIGHT.gap}px" class="w-full"></div>
+						{#if collapsed.has(stickyInfo.step.id)}
+							<ChevronRight class={slots.chevron()} aria-hidden="true" />
+						{:else}
+							<ChevronDown class={slots.chevron()} aria-hidden="true" />
 						{/if}
-					</div>
-				{/if}
-			{/each}
+						<span class={slots.name()}>{stickyInfo.step.name}</span>
+						<Elapsed
+							start={stickyInfo.step.startedAt}
+							end={stickyInfo.step.finishedAt}
+							class={slots.elapsed()}
+						/>
+					</button>
+				</div>
+			{/if}
+			<div class={classes().sizer()} style="height: {$virtualizer.getTotalSize()}px">
+				{#each $virtualizer.getVirtualItems() as item (item.key)}
+					{@const row = rows[item.index]}
+					{#if row}
+						{@const slots = classes({
+							collapsed: row.kind === "step" && collapsed.has(row.step.id),
+							first: rows[item.index - 1]?.kind === "step",
+							last: isLastRow(rows, item.index)
+						})}
+						<div
+							class={slots.row()}
+							style="transform: translateY({item.start}px)"
+							data-index={item.index}
+							use:measure={$virtualizer}
+						>
+							{#if row.kind === "step"}
+								<button
+									type="button"
+									class="{slots.header()} pointer-events-auto"
+									style="position: sticky; top: 0; min-height: {ROW_HEIGHT.step}px"
+									aria-expanded={!collapsed.has(row.step.id)}
+									onclick={() => toggle(row.step.id)}
+								>
+									{#if collapsed.has(row.step.id)}
+										<ChevronRight class={slots.chevron()} aria-hidden="true" />
+									{:else}
+										<ChevronDown class={slots.chevron()} aria-hidden="true" />
+									{/if}
+									<span class={slots.name()}>{row.step.name}</span>
+									<Elapsed
+										start={row.step.startedAt}
+										end={row.step.finishedAt}
+										class={slots.elapsed()}
+									/>
+								</button>
+							{:else if row.kind === "command"}
+								<div class={slots.body()}>
+									<div class={slots.command()}>{row.command}</div>
+								</div>
+							{:else if row.kind === "line"}
+								<div class={slots.body()}>
+									<!-- ansi_up escapes the log text; the only markup is its own spans -->
+									<div class={slots.line()}>{@html row.html}</div>
+								</div>
+							{:else if row.kind === "gap"}
+								<div style="height: {ROW_HEIGHT.gap}px" class="w-full"></div>
+							{/if}
+						</div>
+					{/if}
+				{/each}
+			</div>
 		</div>
+		{#if live && detached}
+			<div class="pointer-events-none absolute inset-x-0 bottom-3 flex justify-center">
+				<Button
+					size="small"
+					icon={ArrowDownToLine}
+					class="pointer-events-auto shadow-regular"
+					onclick={jumpToTail}
+				>
+					Jump to latest
+				</Button>
+			</div>
+		{/if}
 	</div>
 {/if}
 
diff --git a/web/src/lib/components/repo/pipelines/WorkflowView.svelte b/web/src/lib/components/repo/pipelines/WorkflowView.svelte
index 6a6fbb32..52cf8a6d 100644
--- a/web/src/lib/components/repo/pipelines/WorkflowView.svelte
+++ b/web/src/lib/components/repo/pipelines/WorkflowView.svelte
@@ -3,7 +3,7 @@
 	import type { PipelineSummary, WorkflowSummary } from "$lib/components/repo/types";
 	import WorkflowLogs from "./WorkflowLogs.svelte";
 	import WorkflowSidebar from "./WorkflowSidebar.svelte";
-	import { errorDetails, errorMessage } from "./pipeline";
+	import { errorDetails, errorMessage, isLive } from "./pipeline";
 	import type { LogStep } from "./logs";
 	import type { LogStreamStatus } from "./logStream.svelte";
 
@@ -28,6 +28,8 @@
 		status,
 		error = null
 	}: Props = $props();
+
+	const live = $derived(isLive(workflow.status));
 </script>
 
 <div class="grid grid-cols-1 gap-2 lg:grid-cols-[240px_minmax(0,1fr)]">
@@ -60,6 +62,6 @@
 				</div>
 			</div>
 		{/if}
-		<WorkflowLogs {steps} {status} {error} />
+		<WorkflowLogs {steps} {status} {live} {error} />
 	</div>
 </div>
diff --git a/web/src/lib/components/repo/pipelines/mock.ts b/web/src/lib/components/repo/pipelines/mock.ts
index d5fe9890..a290ecac 100644
--- a/web/src/lib/components/repo/pipelines/mock.ts
+++ b/web/src/lib/components/repo/pipelines/mock.ts
@@ -36,7 +36,12 @@ export const pipelines: PipelineSummary[] = [
 		},
 		workflows: [
 			{ name: "build", status: "success", duration: minutes(2) + 4_000 },
-			{ name: "test", status: "failed", duration: minutes(6) + 31_000, error: "3 tests failed" },
+			{
+				name: "test",
+				status: "failed",
+				duration: minutes(6) + 31_000,
+				error: "3 tests failed"
+			},
 			{ name: "lint", status: "success", duration: 41_000 }
 		]
 	},
@@ -130,7 +135,10 @@ const drain = (frames: LogFrame[]): LogStep[] => {
 export const workflowLog: LogStep[] = drain([
 	control(-1, "microVM setup", { kind: "system" }),
 	output(0, "starting microVM image alpine\n"),
-	output(0, "agent connected; serial log: /tmp/spindle-microvm-knot1.tangled.sh-3msfzd67fzh22-deploy-web-dev.yml-95471715/serial.log\n"),
+	output(
+		0,
+		"agent connected; serial log: /tmp/spindle-microvm-knot1.tangled.sh-3msfzd67fzh22-deploy-web-dev.yml-95471715/serial.log\n"
+	),
 	finish(-1, 3),
 	control(0, "Clone repository into workspace", {
 		kind: "system",
@@ -170,6 +178,57 @@ export const runningWorkflowLog: LogStep[] = drain([
 	output(1, "\u001b[32m✓\u001b[0m src/lib/format.test.ts (12)\n")
 ]);
 
+const tailFrames: LogFrame[] = [
+	control(-1, "microVM setup", { kind: "system" }),
+	output(-1, "starting microVM image alpine\n"),
+	finish(-1, 3),
+	control(0, "install dependencies", { command: "pnpm install --frozen-lockfile" }),
+	...Array.from({ length: 30 }, (_, index) =>
+		output(0, `\u001b[90m+\u001b[0m package-${index} \u001b[32m1.${index}.0\u001b[0m\n`)
+	),
+	finish(0, 41),
+	control(1, "run tests", { command: "pnpm test" }),
+	output(1, "\u001b[1mRUN\u001b[0m  v4.1.10\n"),
+	...Array.from({ length: 40 }, (_, index) =>
+		output(1, `\u001b[32m✓\u001b[0m src/lib/suite-${index}.test.ts (${index + 2})\n`)
+	),
+	finish(1, 96),
+	control(2, "build the site", { command: "pnpm build" }),
+	...Array.from({ length: 40 }, (_, index) =>
+		output(2, `[${index}] \u001b[36mbundle\u001b[0m src/module-${index}.ts\n`)
+	)
+];
+
+// the tail is replayed live, so its stamps have to be too, or every step reads
+// as an hour long
+const restamp = (frame: LogFrame): LogFrame => {
+	const time = new Date().toISOString();
+	if (frame.kind === "control") return { kind: "control", control: { ...frame.control, time } };
+	if (frame.kind === "data") return { kind: "data", data: { ...frame.data, time } };
+	return frame;
+};
+
+/**
+ * hands out a growing log, one frame per call, through the real accumulator. a
+ * story drives it on a timer, so the scroll behavior can be watched against a
+ * moving tail instead of a fixed fixture.
+ */
+export const createLogTail = (): { advance: () => LogStep[]; exhausted: () => boolean } => {
+	const accumulator = createLogAccumulator();
+	let index = 0;
+	return {
+		advance() {
+			const frame = tailFrames[index];
+			if (frame) {
+				index += 1;
+				accumulator.push(restamp(frame));
+			}
+			return [...accumulator.steps];
+		},
+		exhausted: () => index >= tailFrames.length
+	};
+};
+
 /** a step big enough that the viewport can only hold a slice of it */
 export const longWorkflowLog: LogStep[] = drain([
 	control(1, "build everything", { command: "make -j8" }),