diff --git a/web/src/lib/components/repo/pipelines/WorkflowLogs.svelte b/web/src/lib/components/repo/pipelines/WorkflowLogs.svelte
index de29117e0..9e624e7e8 100644
--- a/web/src/lib/components/repo/pipelines/WorkflowLogs.svelte
+++ b/web/src/lib/components/repo/pipelines/WorkflowLogs.svelte
@@ -33,7 +33,7 @@
 		step: 44,
 		command: 22,
 		line: 22,
-		gap: 12
+		gap: 8
 	};
 </script>
 
diff --git a/web/src/lib/components/repo/pipelines/WorkflowSidebar.svelte b/web/src/lib/components/repo/pipelines/WorkflowSidebar.svelte
index 5b53ef863..1339e61f3 100644
--- a/web/src/lib/components/repo/pipelines/WorkflowSidebar.svelte
+++ b/web/src/lib/components/repo/pipelines/WorkflowSidebar.svelte
@@ -4,21 +4,22 @@
 	export const workflowSidebar = tv({
 		slots: {
 			list: "flex flex-col gap-2",
-			card: "flex flex-col gap-1.5 rounded border px-3 py-2.5 transition-colors",
+			// the whole card is the link to the workflow
+			card: "flex flex-col gap-1.5 rounded-sm border px-3 py-2.5 no-underline transition-colors hover:no-underline",
 			top: "flex items-center justify-between gap-3",
-			link: "flex min-w-0 items-center gap-0.5 no-underline hover:no-underline",
 			name: "truncate font-medium text-foreground-default",
-			arrow: "size-4 shrink-0 text-foreground-default",
 			age: "shrink-0 text-foreground-muted",
 			bottom: "flex items-center justify-between gap-2",
 			status: "flex min-w-0 items-center gap-1.5",
 			label: "truncate font-semibold text-foreground-default",
-			duration: "shrink-0 tabular-nums text-foreground-muted"
+			duration: "shrink-0 text-foreground-muted tabular-nums"
 		},
 		variants: {
 			active: {
 				true: { card: "border-transparent bg-background-inset" },
-				false: { card: "border-border-default bg-background-default" }
+				false: {
+					card: "border-border-default bg-background-default hover:bg-background-subtle"
+				}
 			}
 		},
 		defaultVariants: { active: false }
@@ -26,7 +27,7 @@
 </script>
 
 <script lang="ts">
-	import ArrowUpRight from "$icon/arrow-up-right";
+	import { resolve } from "$app/paths";
 	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
 	import { formatDuration } from "$lib/format";
 	import type { WorkflowSummary } from "$lib/components/repo/types";
@@ -50,18 +51,21 @@
 
 	// preserve order returned by spindle
 	const href = (name: string) =>
-		`/${ownerHandle}/${repoName}/pipelines/${pipelineId}/workflow/${encodeURIComponent(name)}`;
+		resolve(
+			`/${ownerHandle}/${repoName}/pipelines/${pipelineId}/workflow/${encodeURIComponent(name)}` as "/"
+		);
 </script>
 
 <div class={classes().list()}>
 	{#each workflows as workflow (workflow.name)}
 		{@const slots = classes({ active: workflow.name === active })}
-		<div class={slots.card()}>
+		<a
+			href={href(workflow.name)}
+			class={slots.card()}
+			aria-current={workflow.name === active ? "page" : undefined}
+		>
 			<div class={slots.top()}>
-				<a href={href(workflow.name)} class={slots.link()}>
-					<span class={slots.name()} title={workflow.name}>{workflow.name}</span>
-					<ArrowUpRight class={slots.arrow()} aria-hidden="true" />
-				</a>
+				<span class={slots.name()} title={workflow.name}>{workflow.name}</span>
 				<TimeAgo
 					value={workflow.startedAt ?? workflow.finishedAt ?? createdAt}
 					class={slots.age()}
@@ -76,6 +80,6 @@
 					<span class={slots.duration()}>{formatDuration(workflow.duration)}</span>
 				{/if}
 			</div>
-		</div>
+		</a>
 	{/each}
 </div>
diff --git a/web/src/lib/components/repo/pipelines/WorkflowView.stories.svelte b/web/src/lib/components/repo/pipelines/WorkflowView.stories.svelte
new file mode 100644
index 000000000..c6129b61c
--- /dev/null
+++ b/web/src/lib/components/repo/pipelines/WorkflowView.stories.svelte
@@ -0,0 +1,61 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import type { WorkflowSummary } from "$lib/components/repo/types";
+	import WorkflowView from "./WorkflowView.svelte";
+	import { longWorkflowLog, pipelines, runningWorkflowLog, workflowLog } from "./mock";
+
+	const [running, mixed, passed] = pipelines;
+
+	// the spindle rejected this one before it could produce output, so the banner
+	// carries the whole story and the log pane stays empty
+	const refused: WorkflowSummary = {
+		name: "deploy",
+		status: "failed",
+		duration: 0,
+		error: 'spindle refused the workflow\nunknown engine "nixery"\nsupported engines: docker, microvm\nsee docs.tangled.org/pipelines.html'
+	};
+	const refusedRun = { ...mixed, workflows: [...mixed.workflows, refused] };
+
+	const { Story } = defineMeta({
+		title: "Repo/Pipelines/WorkflowView",
+		component: WorkflowView,
+		tags: ["autodocs"],
+		args: {
+			ownerHandle: "tangled.org",
+			repoName: "core",
+			pipeline: passed,
+			workflow: passed.workflows[0],
+			steps: workflowLog,
+			status: "done" as const
+		}
+	});
+</script>
+
+<Story name="Default" />
+<!-- run still going: the open step keeps counting and the sidebar shows pending siblings -->
+<Story
+	name="Streaming"
+	args={{
+		pipeline: running,
+		workflow: running.workflows[1],
+		steps: runningWorkflowLog,
+		status: "streaming"
+	}}
+/>
+<!-- failed workflow, single-line spindle error above the logs -->
+<Story name="Failed workflow" args={{ pipeline: mixed, workflow: mixed.workflows[1] }} />
+<!-- multi-line error, and no logs to show for it -->
+<Story
+	name="Workflow error details"
+	args={{ pipeline: refusedRun, workflow: refused, steps: [] }}
+/>
+<!-- 4k lines virtualized inside the log pane -->
+<Story name="Long log" args={{ steps: longWorkflowLog }} />
+<!-- connected, no frames yet -->
+<Story
+	name="Waiting"
+	args={{ pipeline: running, workflow: running.workflows[2], steps: [], status: "connecting" }}
+/>
+<!-- socket dropped mid-stream -->
+<Story name="Reconnecting" args={{ status: "connecting" }} />
+<Story name="Stream error" args={{ steps: [], error: "workflow not found" }} />
diff --git a/web/src/lib/components/repo/pipelines/WorkflowView.svelte b/web/src/lib/components/repo/pipelines/WorkflowView.svelte
new file mode 100644
index 000000000..6a6fbb327
--- /dev/null
+++ b/web/src/lib/components/repo/pipelines/WorkflowView.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+	import TriangleAlert from "$icon/triangle-alert";
+	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 type { LogStep } from "./logs";
+	import type { LogStreamStatus } from "./logStream.svelte";
+
+	interface Props {
+		ownerHandle: string;
+		repoName: string;
+		pipeline: PipelineSummary;
+		/** the workflow whose logs are on screen */
+		workflow: WorkflowSummary;
+		steps: LogStep[];
+		status: LogStreamStatus;
+		/** stream error frame if the spindle sent one */
+		error?: string | null;
+	}
+
+	let {
+		ownerHandle,
+		repoName,
+		pipeline,
+		workflow,
+		steps,
+		status,
+		error = null
+	}: Props = $props();
+</script>
+
+<div class="grid grid-cols-1 gap-2 lg:grid-cols-[240px_minmax(0,1fr)]">
+	<div class="min-w-0">
+		<WorkflowSidebar
+			{ownerHandle}
+			{repoName}
+			pipelineId={pipeline.id}
+			workflows={pipeline.workflows}
+			active={workflow.name}
+			createdAt={pipeline.createdAt}
+		/>
+	</div>
+	<div class="min-w-0">
+		{#if workflow.error}
+			<!-- same danger surface as the Error component -->
+			<div
+				class="mb-2 flex items-start gap-2 overflow-hidden rounded-sm border border-border-danger bg-background-danger-subtle px-3 py-2 text-foreground-danger dark:border-border-danger/60 dark:bg-background-danger-subtle/20"
+			>
+				<TriangleAlert class="mt-0.5 size-4 shrink-0" aria-hidden="true" />
+				<div class="min-w-0 flex-1">
+					<div class="wrap-break-word whitespace-pre-wrap">
+						{errorMessage(workflow.error)}
+					</div>
+					{#if errorDetails(workflow.error)}
+						<div class="typography-monospace-small wrap-break-word whitespace-pre-wrap">
+							{errorDetails(workflow.error)}
+						</div>
+					{/if}
+				</div>
+			</div>
+		{/if}
+		<WorkflowLogs {steps} {status} {error} />
+	</div>
+</div>
diff --git a/web/src/routes/[handle]/[repo]/pipelines/[pipeline]/workflow/[workflow]/+page.svelte b/web/src/routes/[handle]/[repo]/pipelines/[pipeline]/workflow/[workflow]/+page.svelte
index 1e35c4314..e89afbd70 100644
--- a/web/src/routes/[handle]/[repo]/pipelines/[pipeline]/workflow/[workflow]/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/pipelines/[pipeline]/workflow/[workflow]/+page.svelte
@@ -1,9 +1,7 @@
 <script lang="ts">
-	import TriangleAlert from "$icon/triangle-alert";
 	import PipelineCardContent from "$lib/components/repo/pipelines/PipelineCardContent.svelte";
-	import WorkflowLogs from "$lib/components/repo/pipelines/WorkflowLogs.svelte";
-	import WorkflowSidebar from "$lib/components/repo/pipelines/WorkflowSidebar.svelte";
-	import { errorDetails, errorMessage, isLive } from "$lib/components/repo/pipelines/pipeline";
+	import WorkflowView from "$lib/components/repo/pipelines/WorkflowView.svelte";
+	import { isLive } from "$lib/components/repo/pipelines/pipeline";
 	import { LogStream } from "$lib/components/repo/pipelines/logStream.svelte";
 	import TabPanel from "$lib/components/ui/TabPanel.svelte";
 
@@ -37,33 +35,14 @@
 	/>
 </TabPanel>
 
-<div class="mt-2 grid grid-cols-1 gap-3 lg:grid-cols-[240px_minmax(0,1fr)]">
-	<div class="min-w-0">
-		<WorkflowSidebar
-			ownerHandle={data.repo.ownerHandle}
-			repoName={data.repo.name}
-			pipelineId={data.pipeline.id}
-			workflows={data.pipeline.workflows}
-			active={data.workflow.name}
-			createdAt={data.pipeline.createdAt}
-		/>
-	</div>
-	<div class="min-w-0">
-		{#if data.workflow.error}
-			<div
-				class="mb-3 flex items-start gap-2 rounded border border-border-danger bg-background-danger-subtle p-3 text-foreground-danger"
-			>
-				<TriangleAlert class="mt-0.5 size-4 shrink-0" aria-hidden="true" />
-				<div class="min-w-0 flex-1">
-					<div class="break-words whitespace-pre-wrap">{errorMessage(data.workflow.error)}</div>
-					{#if errorDetails(data.workflow.error)}
-						<div class="break-words whitespace-pre-wrap typography-monospace-small">
-							{errorDetails(data.workflow.error)}
-						</div>
-					{/if}
-				</div>
-			</div>
-		{/if}
-		<WorkflowLogs steps={stream.steps} status={stream.status} error={stream.error} />
-	</div>
+<div class="mt-2">
+	<WorkflowView
+		ownerHandle={data.repo.ownerHandle}
+		repoName={data.repo.name}
+		pipeline={data.pipeline}
+		workflow={data.workflow}
+		steps={stream.steps}
+		status={stream.status}
+		error={stream.error}
+	/>
 </div>