diff --git a/web/src/lib/components/repo/pipelines/PipelineCard.stories.svelte b/web/src/lib/components/repo/pipelines/PipelineCard.stories.svelte
new file mode 100644
index 000000000..1746bb190
--- /dev/null
+++ b/web/src/lib/components/repo/pipelines/PipelineCard.stories.svelte
@@ -0,0 +1,26 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import PipelineCard from "./PipelineCard.svelte";
+	import { pipelines } from "./mock";
+
+	const [running, mixed, passed, waiting, timedOut, cancelled] = pipelines;
+
+	const { Story } = defineMeta({
+		title: "Repo/Pipelines/PipelineCard",
+		component: PipelineCard,
+		tags: ["autodocs"],
+		args: {
+			ownerHandle: "tangled.org",
+			repoName: "core",
+			pipeline: passed
+		}
+	});
+</script>
+
+<Story name="Passed" />
+<Story name="Running" args={{ pipeline: running }} />
+<Story name="Mixed" args={{ pipeline: mixed }} />
+<Story name="Timed out" args={{ pipeline: timedOut }} />
+<Story name="Cancelled" args={{ pipeline: cancelled }} />
+<Story name="Waiting for a spindle" args={{ pipeline: waiting }} />
+<Story name="Plain" args={{ border: false, shadow: false, background: false }} />
diff --git a/web/src/lib/components/repo/pipelines/PipelineCard.svelte b/web/src/lib/components/repo/pipelines/PipelineCard.svelte
new file mode 100644
index 000000000..c56a41ff6
--- /dev/null
+++ b/web/src/lib/components/repo/pipelines/PipelineCard.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import Card, { type CardVariants } from "$lib/components/ui/Card.svelte";
+	import PipelineCardContent from "./PipelineCardContent.svelte";
+	import type { PipelineSummary } from "$lib/components/repo/types";
+
+	interface Props {
+		ownerHandle: string;
+		repoName: string;
+		pipeline: PipelineSummary;
+		border?: CardVariants["border"];
+		shadow?: CardVariants["shadow"];
+		background?: CardVariants["background"];
+	}
+
+	let {
+		ownerHandle,
+		repoName,
+		pipeline,
+		border = true,
+		shadow = false,
+		background = true
+	}: Props = $props();
+</script>
+
+<Card {border} {shadow} {background} padding="sm">
+	<PipelineCardContent {ownerHandle} {repoName} {pipeline} />
+</Card>
diff --git a/web/src/lib/components/repo/pipelines/PipelineCardContent.svelte b/web/src/lib/components/repo/pipelines/PipelineCardContent.svelte
new file mode 100644
index 000000000..7be23d6c6
--- /dev/null
+++ b/web/src/lib/components/repo/pipelines/PipelineCardContent.svelte
@@ -0,0 +1,154 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from "tailwind-variants";
+	import type { TagVariants } from "$lib/components/ui/Tag.svelte";
+	import type { PipelineStatus } from "$lib/components/repo/types";
+
+	export const pipelineCardContent = tv({
+		slots: {
+			// does not wrap: a long branch name wraps inside the trigger group instead, so the
+			// sha stays pinned top-right
+			header: "flex items-start justify-between gap-3 pb-2",
+			trigger: "flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-1",
+			triggerRow: "flex flex-wrap items-center gap-x-1.5 gap-y-1 text-foreground-default",
+			triggerIcon: "size-4 shrink-0 text-foreground-muted",
+			triggerVerb: "text-foreground-muted",
+			triggerRef: "font-semibold",
+			triggerArrow: "size-3 shrink-0 text-foreground-muted",
+			pullLink: "typography-paragraph-small text-foreground-muted no-underline hover:underline",
+			sha: "shrink-0 rounded-sm bg-background-inset px-2 py-0.5 typography-monospace-small text-foreground-default no-underline hover:underline",
+			meta: "flex flex-wrap items-center justify-between text-foreground-muted",
+			metaSub: "flex flex-wrap items-center gap-2",
+			workflows: "ml-1",
+			duration: "inline-flex items-center gap-1",
+			durationIcon: "size-3 shrink-0"
+		},
+		variants: {
+			// the trigger line is only a link once a workflow exists to open
+			linked: {
+				true: { triggerRow: "no-underline hover:underline" },
+				false: {}
+			}
+		},
+		defaultVariants: {
+			linked: false
+		}
+	});
+
+	export type PipelineCardContentVariants = VariantProps<typeof pipelineCardContent>;
+
+	/** which Tag colour each status uses */
+	export const STATUS_TAG_COLORS: Record<PipelineStatus, TagVariants["color"]> = {
+		pending: "gray",
+		running: "warning",
+		success: "success",
+		failed: "danger",
+		timeout: "warning",
+		cancelled: "gray"
+	};
+</script>
+
+<script lang="ts">
+	import { resolve } from "$app/paths";
+	import ArrowLeft from "$icon/arrow-left";
+	import CirclePlay from "$icon/circle-play";
+	import Clock from "$icon/clock";
+	import GitCommitHorizontal from "$icon/git-commit-horizontal";
+	import GitPullRequest from "$icon/git-pull-request";
+	import TimeAgo from "$lib/components/ui/TimeAgo.svelte";
+	import { formatDuration } from "$lib/format";
+	import Tag from "$lib/components/ui/Tag.svelte";
+	import type { PipelineSummary } from "$lib/components/repo/types";
+	import { aggregateStatus, longSummary, STATUS_LABELS, totalDuration } from "./pipeline";
+	import { STATUS_ICONS } from "./PipelineStatusIcon.svelte";
+	import PipelineWorkflows from "./PipelineWorkflows.svelte";
+	import Separator from "$lib/components/ui/Separator.svelte";
+
+	interface Props {
+		ownerHandle: string;
+		repoName: string;
+		pipeline: PipelineSummary;
+	}
+
+	let { ownerHandle, repoName, pipeline }: Props = $props();
+
+	const status = $derived(aggregateStatus(pipeline));
+	const duration = $derived(totalDuration(pipeline));
+
+	// links to the first workflow's logs, plain text until a spindle reports one
+	// TODO: the workflow log route does not exist in the svelte app yet
+	const href = $derived(
+		pipeline.workflows.length > 0
+			? resolve(
+					`/${ownerHandle}/${repoName}/pipelines/${pipeline.id}/workflow/${pipeline.workflows[0].name}` as "/"
+				)
+			: undefined
+	);
+	const commitHref = $derived(resolve(`/${ownerHandle}/${repoName}/commit/${pipeline.sha}` as "/"));
+
+	const classes = $derived(pipelineCardContent({ linked: href !== undefined }));
+</script>
+
+{#snippet triggerLabel()}
+	{#if pipeline.trigger.kind === "push"}
+		<GitCommitHorizontal class={classes.triggerIcon()} aria-hidden="true" />
+		<span class={classes.triggerVerb()}>Push to</span>
+		<span class={classes.triggerRef()}>{pipeline.trigger.targetRef}</span>
+	{:else if pipeline.trigger.kind === "pull_request"}
+		<GitPullRequest class={classes.triggerIcon()} aria-hidden="true" />
+		<span class={classes.triggerVerb()}>Pull request</span>
+		<span class={classes.triggerRef()}>{pipeline.trigger.targetRef}</span>
+		<ArrowLeft class={classes.triggerArrow()} aria-hidden="true" />
+		<span class={classes.triggerRef()}>{pipeline.trigger.sourceLabel}</span>
+	{:else}
+		<CirclePlay class={classes.triggerIcon()} aria-hidden="true" />
+		<span class={classes.triggerVerb()}>Manual dispatch</span>
+	{/if}
+{/snippet}
+
+<div class={classes.header()}>
+	<div class={classes.trigger()}>
+		{#if href}
+			<a {href} class={classes.triggerRow()}>
+				{@render triggerLabel()}
+			</a>
+		{:else}
+			<span class={classes.triggerRow()}>
+				{@render triggerLabel()}
+			</span>
+		{/if}
+
+		{#if pipeline.trigger.kind === "pull_request" && pipeline.trigger.pullPath}
+			<a href={resolve(pipeline.trigger.pullPath as "/")} class={classes.pullLink()}> (view PR) </a>
+		{/if}
+	</div>
+
+	{#if pipeline.sha}
+		<a href={commitHref} class={classes.sha()}>
+			{pipeline.sha.slice(0, 8)}
+		</a>
+	{/if}
+</div>
+
+<div class={classes.meta()}>
+	<span class={classes.metaSub()}>
+		<Tag class="mt-px" size="lg" color={STATUS_TAG_COLORS[status]} icon={STATUS_ICONS[status]}
+			>{STATUS_LABELS[status]}</Tag
+		>
+
+		<span class={classes.workflows()} title={longSummary(pipeline) || undefined}>
+			<PipelineWorkflows {ownerHandle} {repoName} {pipeline} />
+		</span>
+	</span>
+
+	<span class={classes.metaSub()}>
+		<TimeAgo value={pipeline.createdAt} />
+
+		{#if duration > 0}
+			<Separator variant="dot" />
+			<span class={classes.duration()}>
+				<Clock class={classes.durationIcon()} aria-hidden="true" />
+				{formatDuration(duration)}
+			</span>
+		{/if}
+	</span>
+</div>
diff --git a/web/src/lib/components/repo/pipelines/PipelineEmptyState.svelte b/web/src/lib/components/repo/pipelines/PipelineEmptyState.svelte
new file mode 100644
index 000000000..86551aa4f
--- /dev/null
+++ b/web/src/lib/components/repo/pipelines/PipelineEmptyState.svelte
@@ -0,0 +1,77 @@
+<script module lang="ts">
+	import { tv } from "tailwind-variants";
+
+	export const pipelineEmptyState = tv({
+		slots: {
+			root: "flex flex-col items-center gap-6 rounded-sm border border-border-default bg-background-default px-6 py-12 text-center",
+			icon: "size-16 text-foreground-disabled",
+			intro: "flex flex-col gap-2",
+			heading: "typography-paragraph-large font-semibold text-foreground-default",
+			body: "max-w-md typography-paragraph-small text-foreground-muted",
+			steps: "flex max-w-md flex-col gap-3 text-left",
+			step: "flex items-start gap-3",
+			badge:
+				"flex size-6 shrink-0 items-center justify-center rounded-full bg-background-inset typography-paragraph-small font-semibold text-foreground-default",
+			stepBody: "typography-paragraph-small text-foreground-muted",
+			link: "text-foreground-default underline hover:no-underline"
+		}
+	});
+</script>
+
+<script lang="ts">
+	import { resolve } from "$app/paths";
+	import Layers2 from "$icon/layers-2";
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		ownerHandle: string;
+		repoName: string;
+	}
+
+	let { ownerHandle, repoName }: Props = $props();
+
+	const settingsHref = $derived(resolve(`/${ownerHandle}/${repoName}/settings/pipelines` as "/"));
+	const classes = pipelineEmptyState();
+</script>
+
+{#snippet step(index: number, body: Snippet)}
+	<li class={classes.step()}>
+		<span class={classes.badge()}>{index}</span>
+		<span class={classes.stepBody()}>{@render body()}</span>
+	</li>
+{/snippet}
+
+<!-- an empty tab almost always means CI was never set up, so show the setup steps -->
+<div class={classes.root()}>
+	<Layers2 class={classes.icon()} aria-hidden="true" />
+
+	<div class={classes.intro()}>
+		<p class={classes.heading()}>No pipelines have been run yet</p>
+		<p class={classes.body()}>Get started by configuring CI/CD for this repository.</p>
+	</div>
+
+	<ol class={classes.steps()}>
+		{@render step(1, spindle)}
+		{@render step(2, configure)}
+		{@render step(3, trigger)}
+	</ol>
+</div>
+
+{#snippet spindle()}
+	Choose a spindle in your <a href={settingsHref} class={classes.link()}>repository settings</a>
+{/snippet}
+
+{#snippet configure()}
+	<!-- plain anchor: Button's href only takes internal paths -->
+	Configure your CI/CD
+	<a
+		href="https://docs.tangled.org/spindles.html#pipelines"
+		target="_blank"
+		rel="noopener"
+		class={classes.link()}>pipeline</a
+	>
+{/snippet}
+
+{#snippet trigger()}
+	Trigger a workflow with a push or pull request
+{/snippet}
diff --git a/web/src/lib/components/repo/pipelines/PipelineList.stories.svelte b/web/src/lib/components/repo/pipelines/PipelineList.stories.svelte
new file mode 100644
index 000000000..7a837b9a7
--- /dev/null
+++ b/web/src/lib/components/repo/pipelines/PipelineList.stories.svelte
@@ -0,0 +1,22 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import PipelineList from "./PipelineList.svelte";
+	import { pipelines } from "./mock";
+
+	const { Story } = defineMeta({
+		title: "Repo/Pipelines/PipelineList",
+		component: PipelineList,
+		tags: ["autodocs"],
+		args: {
+			ownerHandle: "tangled.org",
+			repoName: "core",
+			pipelines
+		}
+	});
+</script>
+
+<Story name="Default" />
+<!-- no runs at all: the setup steps -->
+<Story name="Empty" args={{ pipelines: [] }} />
+<!-- runs exist, none match the trigger filter -->
+<Story name="Filtered out" args={{ pipelines: [], filtered: true }} />
diff --git a/web/src/lib/components/repo/pipelines/PipelineList.svelte b/web/src/lib/components/repo/pipelines/PipelineList.svelte
new file mode 100644
index 000000000..72efb51f6
--- /dev/null
+++ b/web/src/lib/components/repo/pipelines/PipelineList.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import EmptyState from "$lib/components/ui/EmptyState.svelte";
+	import PipelineCard from "./PipelineCard.svelte";
+	import PipelineEmptyState from "./PipelineEmptyState.svelte";
+	import type { PipelineSummary } from "$lib/components/repo/types";
+
+	interface Props {
+		ownerHandle: string;
+		repoName: string;
+		pipelines: PipelineSummary[];
+		/** repo has runs, they just do not match — show "no match" instead of the setup steps */
+		filtered?: boolean;
+	}
+
+	let { ownerHandle, repoName, pipelines, filtered = false }: Props = $props();
+</script>
+
+{#if pipelines.length > 0}
+	<div class="flex flex-col gap-2">
+		{#each pipelines as pipeline (pipeline.id)}
+			<PipelineCard {ownerHandle} {repoName} {pipeline} />
+		{/each}
+	</div>
+{:else if filtered}
+	<EmptyState message="No pipelines match your search." />
+{:else}
+	<PipelineEmptyState {ownerHandle} {repoName} />
+{/if}
diff --git a/web/src/lib/components/repo/pipelines/PipelineSearch.stories.svelte b/web/src/lib/components/repo/pipelines/PipelineSearch.stories.svelte
new file mode 100644
index 000000000..169edb50c
--- /dev/null
+++ b/web/src/lib/components/repo/pipelines/PipelineSearch.stories.svelte
@@ -0,0 +1,17 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import PipelineSearch from "./PipelineSearch.svelte";
+
+	const { Story } = defineMeta({
+		title: "Repo/Pipelines/PipelineSearch",
+		component: PipelineSearch,
+		tags: ["autodocs"],
+		args: {
+			filter: "all"
+		}
+	});
+</script>
+
+<Story name="Default" />
+<!-- a non-default tab rides along in a hidden field so searching keeps the filter -->
+<Story name="Within a trigger tab" args={{ filter: "pull_request" }} />
diff --git a/web/src/lib/components/repo/pipelines/PipelineSearch.svelte b/web/src/lib/components/repo/pipelines/PipelineSearch.svelte
new file mode 100644
index 000000000..b226cbdda
--- /dev/null
+++ b/web/src/lib/components/repo/pipelines/PipelineSearch.svelte
@@ -0,0 +1,78 @@
+<script module lang="ts">
+	import { tv } from "tailwind-variants";
+
+	export const pipelineSearch = tv({
+		slots: {
+			form: "flex w-full",
+			field: "relative flex w-full items-center",
+			input: "w-full",
+			clear: "absolute right-0.5"
+		},
+		variants: {
+			// room for the clear button so the text does not run under it
+			filled: {
+				true: { input: "pr-9" },
+				false: {}
+			}
+		},
+		defaultVariants: {
+			filled: false
+		}
+	});
+</script>
+
+<script lang="ts">
+	import { page } from "$app/state";
+	import Search from "$icon/search";
+	import X from "$icon/x";
+	import Button from "$lib/components/ui/Button.svelte";
+	import Input from "$lib/components/ui/Input.svelte";
+	import type { PipelineFilter } from "./pipeline";
+
+	interface Props {
+		/** kept in the form so searching does not reset the tab */
+		filter: PipelineFilter;
+	}
+
+	let { filter }: Props = $props();
+
+	let form: HTMLFormElement;
+	// seed from the url so the query (and the clear button) survive a submit
+	let value = $state(page.url.searchParams.get("q") ?? "");
+
+	const clear = () => {
+		value = "";
+		form.requestSubmit();
+	};
+
+	const classes = $derived(pipelineSearch({ filled: value !== "" }));
+</script>
+
+<form bind:this={form} class={classes.form()} method="GET">
+	{#if filter !== "all"}
+		<input type="hidden" name="trigger" value={filter} />
+	{/if}
+
+	<div class={classes.field()}>
+		<Input
+			bind:value
+			type="text"
+			name="q"
+			placeholder="Search pipelines..."
+			aria-label="Search pipelines"
+			iconLeft={Search}
+			class={classes.input()}
+		/>
+		{#if value}
+			<Button
+				type="button"
+				variant="ghost"
+				size="sm"
+				icon={X}
+				onclick={clear}
+				aria-label="Clear search"
+				class={classes.clear()}
+			/>
+		{/if}
+	</div>
+</form>
diff --git a/web/src/lib/components/repo/pipelines/PipelineStatusIcon.svelte b/web/src/lib/components/repo/pipelines/PipelineStatusIcon.svelte
new file mode 100644
index 000000000..bffc99455
--- /dev/null
+++ b/web/src/lib/components/repo/pipelines/PipelineStatusIcon.svelte
@@ -0,0 +1,57 @@
+<script module lang="ts">
+	import type { Component } from "svelte";
+	import type { SvelteHTMLElements } from "svelte/elements";
+	import { tv, type VariantProps } from "tailwind-variants";
+	import Check from "$icon/check";
+	import CircleDashed from "$icon/circle-dashed";
+	import CircleSlash from "$icon/circle-slash";
+	import ClockAlert from "$icon/clock-alert";
+	import RefreshCw from "$icon/refresh-cw";
+	import X from "$icon/x";
+	import type { PipelineStatus } from "$lib/components/repo/types";
+
+	/** same icon per status as the appview's workflowSymbol fragment */
+	export const STATUS_ICONS: Record<PipelineStatus, Component<SvelteHTMLElements["svg"]>> = {
+		pending: CircleDashed,
+		running: RefreshCw,
+		success: Check,
+		failed: X,
+		timeout: ClockAlert,
+		cancelled: CircleSlash
+	};
+
+	// leave `status` off to let the icon inherit its colour, e.g. inside a Tag
+	export const pipelineStatusIcon = tv({
+		base: "size-3 shrink-0",
+		variants: {
+			status: {
+				pending: "text-foreground-muted",
+				running: "text-foreground-warning",
+				success: "text-foreground-success",
+				failed: "text-foreground-danger",
+				timeout: "text-foreground-warning",
+				cancelled: "text-foreground-muted"
+			}
+		}
+	});
+
+	export type PipelineStatusIconVariants = VariantProps<typeof pipelineStatusIcon>;
+</script>
+
+<script lang="ts">
+	interface Props {
+		status: PipelineStatus;
+		/** colour the icon itself; off inside a Tag */
+		colored?: boolean;
+		class?: string;
+	}
+
+	let { status, colored = false, class: className }: Props = $props();
+
+	const Icon = $derived(STATUS_ICONS[status]);
+	const classes = $derived(
+		pipelineStatusIcon({ status: colored ? status : undefined, class: className })
+	);
+</script>
+
+<Icon class={classes} aria-hidden="true" />
diff --git a/web/src/lib/components/repo/pipelines/PipelineToolbar.stories.svelte b/web/src/lib/components/repo/pipelines/PipelineToolbar.stories.svelte
new file mode 100644
index 000000000..e6b7293ae
--- /dev/null
+++ b/web/src/lib/components/repo/pipelines/PipelineToolbar.stories.svelte
@@ -0,0 +1,21 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import PipelineToolbar from "./PipelineToolbar.svelte";
+
+	const { Story } = defineMeta({
+		title: "Repo/Pipelines/PipelineToolbar",
+		component: PipelineToolbar,
+		tags: ["autodocs"],
+		args: {
+			ownerHandle: "tangled.org",
+			repoName: "core",
+			filter: "all",
+			total: 6
+		}
+	});
+</script>
+
+<Story name="All" />
+<Story name="Push" args={{ filter: "push", total: 3 }} />
+<Story name="Pull request" args={{ filter: "pull_request", total: 2 }} />
+<Story name="Single run" args={{ total: 1 }} />
diff --git a/web/src/lib/components/repo/pipelines/PipelineToolbar.svelte b/web/src/lib/components/repo/pipelines/PipelineToolbar.svelte
new file mode 100644
index 000000000..75007d724
--- /dev/null
+++ b/web/src/lib/components/repo/pipelines/PipelineToolbar.svelte
@@ -0,0 +1,80 @@
+<script module lang="ts">
+	import { tv } from "tailwind-variants";
+
+	export const pipelineToolbar = tv({
+		slots: {
+			// same grid as IssueToolbar: group, search, count. search gets its own row on mobile.
+			root: "grid grid-cols-[auto_1fr_auto] gap-2",
+			search: "col-span-3 sm:col-span-1 sm:col-start-2",
+			group: "sm:row-start-1",
+			count:
+				"col-start-3 row-start-2 self-center justify-self-end typography-paragraph-small whitespace-nowrap text-foreground-muted sm:row-start-1",
+			qualifier: "hidden sm:inline"
+		}
+	});
+</script>
+
+<script lang="ts">
+	import { page } from "$app/state";
+	import { resolve } from "$app/paths";
+	import GitCommitHorizontal from "$icon/git-commit-horizontal";
+	import GitPullRequest from "$icon/git-pull-request";
+	import Layers2 from "$icon/layers-2";
+	import Button from "$lib/components/ui/Button.svelte";
+	import ButtonGroup, { segmentProps } from "$lib/components/ui/ButtonGroup.svelte";
+	import type { PipelineFilter } from "./pipeline";
+	import PipelineSearch from "./PipelineSearch.svelte";
+
+	interface Props {
+		ownerHandle: string;
+		repoName: string;
+		filter: PipelineFilter;
+		/** how many runs match the tab and query */
+		total: number;
+	}
+
+	let { ownerHandle, repoName, filter, total }: Props = $props();
+
+	const base = $derived(`/${ownerHandle}/${repoName}/pipelines`);
+
+	// keep the query when switching tabs
+	const segmentHref = (kind: PipelineFilter) => {
+		const query = page.url.searchParams.get("q");
+		const suffix = query ? `&q=${encodeURIComponent(query)}` : "";
+		return resolve(`${base}?trigger=${kind}${suffix}` as "/");
+	};
+
+	const classes = pipelineToolbar();
+</script>
+
+<div class={classes.root()}>
+	<div class={classes.search()}>
+		<PipelineSearch {filter} />
+	</div>
+
+	<ButtonGroup class={classes.group()}>
+		<!-- no manual segment: the appview only filters push and pull request -->
+		<Button href={segmentHref("all")} {...segmentProps(filter === "all")} icon={Layers2}>
+			All
+		</Button>
+		<Button
+			href={segmentHref("push")}
+			{...segmentProps(filter === "push")}
+			icon={GitCommitHorizontal}
+		>
+			Push
+		</Button>
+		<Button
+			href={segmentHref("pull_request")}
+			{...segmentProps(filter === "pull_request")}
+			icon={GitPullRequest}
+		>
+			<!-- nbsp: a plain space between the spans gets collapsed away -->
+			<span>Pull<span class={classes.qualifier()}>&nbsp;request</span></span>
+		</Button>
+	</ButtonGroup>
+
+	<span class={classes.count()}>
+		{total} pipeline {total === 1 ? "run" : "runs"}
+	</span>
+</div>
diff --git a/web/src/lib/components/repo/pipelines/PipelineWorkflows.svelte b/web/src/lib/components/repo/pipelines/PipelineWorkflows.svelte
new file mode 100644
index 000000000..b608f522b
--- /dev/null
+++ b/web/src/lib/components/repo/pipelines/PipelineWorkflows.svelte
@@ -0,0 +1,81 @@
+<script module lang="ts">
+	import { tv } from "tailwind-variants";
+
+	export const pipelineWorkflows = tv({
+		slots: {
+			waiting: "inline-flex items-center gap-1 italic",
+			trigger: "flex items-center gap-1 text-foreground-muted hover:underline",
+			icon: "size-3 shrink-0",
+			// Button hugs its children, so stretch that span to get a two-column row
+			item: "[&>span]:w-full",
+			row: "flex w-full items-center justify-between gap-2",
+			name: "flex min-w-0 items-center gap-1.5",
+			label: "truncate",
+			outcome: "shrink-0 text-foreground-muted"
+		}
+	});
+</script>
+
+<script lang="ts">
+	import ChevronDown from "$icon/chevron-down";
+	import Hourglass from "$icon/hourglass";
+	import Dropdown from "$lib/components/ui/Dropdown.svelte";
+	import DropdownItem from "$lib/components/ui/DropdownItem.svelte";
+	import { formatDuration } from "$lib/format";
+	import type { PipelineSummary } from "$lib/components/repo/types";
+	import { finishedCount, longSummary, STATUS_LABELS } from "./pipeline";
+	import PipelineStatusIcon from "./PipelineStatusIcon.svelte";
+
+	interface Props {
+		ownerHandle: string;
+		repoName: string;
+		pipeline: PipelineSummary;
+	}
+
+	let { ownerHandle, repoName, pipeline }: Props = $props();
+
+	const count = $derived(pipeline.workflows.length);
+	const finished = $derived(finishedCount(pipeline));
+	const noun = $derived(count === 1 ? "workflow" : "workflows");
+	// show the ratio only while something is still running
+	const label = $derived(finished === count ? `${count} ${noun}` : `${finished}/${count} ${noun}`);
+
+	const classes = pipelineWorkflows();
+</script>
+
+{#if count === 0}
+	<!-- no workflows yet, so nothing to open -->
+	<span class={classes.waiting()}>
+		<Hourglass class={classes.icon()} aria-hidden="true" />
+		Waiting for a spindle…
+	</span>
+{:else}
+	<Dropdown group="pipeline-workflows" align="left" menuClass="w-72" label={longSummary(pipeline)}>
+		{#snippet trigger()}
+			<span class={classes.trigger()}>
+				{label}
+				<ChevronDown class={classes.icon()} aria-hidden="true" />
+			</span>
+		{/snippet}
+
+		{#each pipeline.workflows as workflow (workflow.name)}
+			<!-- TODO: the workflow log route does not exist in the svelte app yet -->
+			<DropdownItem
+				href={`/${ownerHandle}/${repoName}/pipelines/${pipeline.id}/workflow/${workflow.name}`}
+				class={classes.item()}
+			>
+				<span class={classes.row()}>
+					<span class={classes.name()}>
+						<PipelineStatusIcon status={workflow.status} colored />
+						<span class={classes.label()}>{workflow.name}</span>
+					</span>
+					<span class={classes.outcome()}>
+						{workflow.duration > 0
+							? formatDuration(workflow.duration)
+							: STATUS_LABELS[workflow.status]}
+					</span>
+				</span>
+			</DropdownItem>
+		{/each}
+	</Dropdown>
+{/if}
diff --git a/web/src/lib/components/repo/pipelines/mock.ts b/web/src/lib/components/repo/pipelines/mock.ts
new file mode 100644
index 000000000..eaf706d1e
--- /dev/null
+++ b/web/src/lib/components/repo/pipelines/mock.ts
@@ -0,0 +1,88 @@
+// fake data for the pipelines tab until it is wired to bobbin
+
+import type { PipelineSummary } from "$lib/components/repo/types";
+
+const minutes = (n: number) => n * 60_000;
+
+// fixed base so the times do not depend on when this runs
+const base = Date.parse("2026-08-04T09:00:00Z");
+const ago = (mins: number) => new Date(base - minutes(mins)).toISOString();
+
+export const pipelines: PipelineSummary[] = [
+	// a run still in flight
+	{
+		id: "01K1XJ4WPQ0000000000000001",
+		sha: "9f2c1ab4d8e7350f6b1c2d9e4a5b6c7d8e9f0a1b",
+		createdAt: ago(3),
+		trigger: { kind: "push", targetRef: "master" },
+		workflows: [
+			{ name: "build", status: "success", duration: minutes(1) + 12_000 },
+			{ name: "test", status: "running", duration: 0 },
+			{ name: "lint", status: "pending", duration: 0 }
+		]
+	},
+	// mixed outcome
+	{
+		id: "01K1XJ4WPQ0000000000000002",
+		sha: "3d7e91c05fa2b8461d0e5c7a9b3f2e1d4c6a8b0f",
+		createdAt: ago(47),
+		trigger: {
+			kind: "pull_request",
+			targetRef: "master",
+			sourceLabel: "oppi.li/core:fix-packfile-timeout",
+			pullPath: "/tangled.org/core/pulls/42"
+		},
+		workflows: [
+			{ name: "build", status: "success", duration: minutes(2) + 4_000 },
+			{ name: "test", status: "failed", duration: minutes(6) + 31_000, error: "3 tests failed" },
+			{ name: "lint", status: "success", duration: 41_000 }
+		]
+	},
+	// all green
+	{
+		id: "01K1XJ4WPQ0000000000000003",
+		sha: "c1b4a7e2f9308d65b2a1c4e7f0d3b6a9c2e5f8b1",
+		createdAt: ago(190),
+		trigger: { kind: "push", targetRef: "master" },
+		workflows: [
+			{ name: "build", status: "success", duration: minutes(1) + 58_000 },
+			{ name: "test", status: "success", duration: minutes(5) + 12_000 },
+			{ name: "lint", status: "success", duration: 39_000 }
+		]
+	},
+	// a spindle that never answered
+	{
+		id: "01K1XJ4WPQ0000000000000004",
+		sha: "7a0f3b8c1d2e4f5a6b7c8d9e0f1a2b3c4d5e6f70",
+		createdAt: ago(320),
+		trigger: { kind: "manual" },
+		workflows: []
+	},
+	// timed out
+	{
+		id: "01K1XJ4WPQ0000000000000005",
+		sha: "e5d4c3b2a1908f7e6d5c4b3a2918f7e6d5c4b3a2",
+		createdAt: ago(1_450),
+		trigger: {
+			kind: "pull_request",
+			targetRef: "release-1.4",
+			sourceLabel: "bump-deps"
+		},
+		workflows: [
+			{ name: "build", status: "success", duration: minutes(2) + 9_000 },
+			{ name: "e2e", status: "timeout", duration: minutes(30) }
+		]
+	},
+	// cancelled mid-run
+	{
+		id: "01K1XJ4WPQ0000000000000006",
+		sha: "b8c7d6e5f4a3b2c1d0e9f8a7b6c5d4e3f2a1b0c9",
+		createdAt: ago(2_880),
+		// the appview strips refs/heads/ and refs/tags/ before it reaches the card
+		trigger: { kind: "push", targetRef: "v1.3.0" },
+		workflows: [
+			{ name: "build", status: "cancelled", duration: 18_000 },
+			{ name: "release", status: "cancelled", duration: 0 }
+		]
+	}
+];
diff --git a/web/src/lib/components/repo/pipelines/pipeline.ts b/web/src/lib/components/repo/pipelines/pipeline.ts
new file mode 100644
index 000000000..f0f4dfb90
--- /dev/null
+++ b/web/src/lib/components/repo/pipelines/pipeline.ts
@@ -0,0 +1,89 @@
+// mirrors the helpers on types.Pipeline in types/pipeline.go
+
+import type {
+	PipelineStatus,
+	PipelineSummary,
+	PipelineTriggerKind
+} from "$lib/components/repo/types";
+
+/** the trigger tabs */
+export type PipelineFilter = "all" | PipelineTriggerKind;
+
+/** what search looks at. a real bobbin query has to cover the same fields. */
+export const matchesQuery = (pipeline: PipelineSummary, query: string): boolean => {
+	const needle = query.trim().toLowerCase();
+	if (!needle) return true;
+
+	const haystack = [
+		pipeline.sha,
+		pipeline.trigger.kind === "manual" ? "manual dispatch" : pipeline.trigger.targetRef,
+		pipeline.trigger.kind === "pull_request" ? pipeline.trigger.sourceLabel : "",
+		...pipeline.workflows.map((workflow) => workflow.name)
+	];
+	return haystack.some((field) => field.toLowerCase().includes(needle));
+};
+
+/** the order the breakdown lists statuses in */
+export const STATUS_ORDER: PipelineStatus[] = [
+	"success",
+	"failed",
+	"timeout",
+	"cancelled",
+	"running",
+	"pending"
+];
+
+export const STATUS_LABELS: Record<PipelineStatus, string> = {
+	pending: "Pending",
+	running: "Running",
+	success: "Passed",
+	failed: "Failed",
+	timeout: "Timed out",
+	cancelled: "Cancelled"
+};
+
+export const statusCounts = (pipeline: PipelineSummary): Record<PipelineStatus, number> => {
+	const counts = {
+		pending: 0,
+		running: 0,
+		success: 0,
+		failed: 0,
+		timeout: 0,
+		cancelled: 0
+	};
+	for (const workflow of pipeline.workflows) counts[workflow.status]++;
+	return counts;
+};
+
+/** one status for the whole run. anything still going wins, so an in-flight run says so. */
+export const aggregateStatus = (pipeline: PipelineSummary): PipelineStatus => {
+	// no workflows yet means no spindle has picked it up
+	if (pipeline.workflows.length === 0) return "pending";
+
+	const counts = statusCounts(pipeline);
+	if (counts.running > 0) return "running";
+	if (counts.pending > 0) return "pending";
+	if (counts.failed > 0) return "failed";
+	if (counts.timeout > 0) return "timeout";
+	if (counts.cancelled > 0) return "cancelled";
+	return "success";
+};
+
+/** how many workflows are done — everything except pending and running */
+export const finishedCount = (pipeline: PipelineSummary): number => {
+	const counts = statusCounts(pipeline);
+	return counts.success + counts.failed + counts.timeout + counts.cancelled;
+};
+
+/** "2/3 passed, 1/3 failed" */
+export const longSummary = (pipeline: PipelineSummary): string => {
+	const counts = statusCounts(pipeline);
+	const total = pipeline.workflows.length;
+	return STATUS_ORDER.filter((status) => counts[status] > 0)
+		.map((status) => `${counts[status]}/${total} ${STATUS_LABELS[status].toLowerCase()}`)
+		.join(", ");
+};
+
+/** sum of the workflows, not wall time across the run */
+export const totalDuration = (pipeline: PipelineSummary): number =>
+	pipeline.workflows.reduce((sum, workflow) => sum + workflow.duration, 0);
diff --git a/web/src/lib/components/repo/types.ts b/web/src/lib/components/repo/types.ts
index 0c3d8622e..f137fdbff 100644
--- a/web/src/lib/components/repo/types.ts
+++ b/web/src/lib/components/repo/types.ts
@@ -49,3 +49,39 @@ export interface IssueSummary {
 	createdAt: string;
 	commentCount: number;
 }
+
+/** the spindle's workflow states, same strings as sh.tangled.ci.pipeline */
+export type PipelineStatus = "pending" | "running" | "success" | "failed" | "timeout" | "cancelled";
+
+export interface WorkflowSummary {
+	name: string;
+	status: PipelineStatus;
+	/** wall time in ms; 0 until the workflow finishes */
+	duration: number;
+	/** first line of the spindle's error, when it failed before running */
+	error?: string;
+}
+
+export type PipelineTrigger =
+	| { kind: "push"; targetRef: string }
+	| {
+			kind: "pull_request";
+			targetRef: string;
+			/** where the head came from — `handle/repo:branch` when it is a fork */
+			sourceLabel: string;
+			/** the pull page, absent when the pull record is gone */
+			pullPath?: string;
+	  }
+	| { kind: "manual" };
+
+export type PipelineTriggerKind = PipelineTrigger["kind"];
+
+export interface PipelineSummary {
+	id: string;
+	/** the commit the spindle checked out */
+	sha: string;
+	createdAt: string;
+	trigger: PipelineTrigger;
+	/** empty while the spindle has not reported back yet */
+	workflows: WorkflowSummary[];
+}
diff --git a/web/src/lib/components/ui/Button.svelte b/web/src/lib/components/ui/Button.svelte
index 2ecf0efc2..4ea6cacaa 100644
--- a/web/src/lib/components/ui/Button.svelte
+++ b/web/src/lib/components/ui/Button.svelte
@@ -126,6 +126,7 @@
 		class?: string;
 		loading?: boolean;
 		spinnerClass?: string;
+		ref?: HTMLAnchorElement | HTMLButtonElement;
 		children?: Snippet;
 	}
 
@@ -141,6 +142,7 @@
 		class: className,
 		loading = false,
 		spinnerClass,
+		ref = $bindable(),
 		children,
 		...rest
 	}: Props = $props();
@@ -176,6 +178,7 @@
 
 {#if href}
 	<a
+		bind:this={ref}
 		{href}
 		class={classes}
 		data-variant={variant}
@@ -187,6 +190,7 @@
 	</a>
 {:else}
 	<button
+		bind:this={ref}
 		{type}
 		disabled={disabled || loading}
 		class={classes}
diff --git a/web/src/lib/components/ui/DropdownItem.svelte b/web/src/lib/components/ui/DropdownItem.svelte
index 7dd9fc1ed..45179c221 100644
--- a/web/src/lib/components/ui/DropdownItem.svelte
+++ b/web/src/lib/components/ui/DropdownItem.svelte
@@ -29,11 +29,13 @@
 		icon?: Component<SvelteHTMLElements["svg"]>;
 		danger?: DropdownItemVariants["danger"];
 		onclick?: (event: MouseEvent) => void;
+		/** Button hugs its children, so a two-column row needs `[&>span]:w-full` here. */
+		class?: string;
 		children: Snippet;
 	}
 
-	let { href, icon, danger = false, onclick, children }: Props = $props();
-	const classes = $derived(dropdownItem({ danger }));
+	let { href, icon, danger = false, onclick, class: className, children }: Props = $props();
+	const classes = $derived(dropdownItem({ danger, class: className }));
 
 	const closeDropdown = getContext<(() => void) | undefined>("dropdown-close");
 	const registerItem = getContext<((el: HTMLElement) => () => void) | undefined>(
diff --git a/web/src/lib/components/ui/Separator.svelte b/web/src/lib/components/ui/Separator.svelte
index 8781b965b..29bde1321 100644
--- a/web/src/lib/components/ui/Separator.svelte
+++ b/web/src/lib/components/ui/Separator.svelte
@@ -1,9 +1,14 @@
 <script lang="ts">
 	interface Props {
+		variant?: string;
 		class?: string;
 	}
 
-	let { class: className = "" }: Props = $props();
+	let { variant: variant = "line", class: className = "" }: Props = $props();
 </script>
 
-<hr class="border-none bg-border-default w-full min-h-px {className}" />
+{#if variant === "line"}
+	<hr class="min-h-px w-full border-none bg-border-default {className}" />
+{:else if variant === "dot"}
+	<span class="text-inherit {className}">·</span>
+{/if}
diff --git a/web/src/lib/components/ui/Tag.stories.svelte b/web/src/lib/components/ui/Tag.stories.svelte
index 71bc2144e..4bf3b09b5 100644
--- a/web/src/lib/components/ui/Tag.stories.svelte
+++ b/web/src/lib/components/ui/Tag.stories.svelte
@@ -10,7 +10,7 @@
 		argTypes: {
 			color: {
 				control: { type: "inline-radio" },
-				options: ["default", "gray"]
+				options: ["default", "gray", "success", "danger", "warning", "info"]
 			}
 		},
 		args: {
@@ -21,4 +21,8 @@
 
 <Story name="Default">Tag</Story>
 <Story name="Gray" args={{ color: "gray" }}>Tag</Story>
+<Story name="Success" args={{ color: "success" }}>Passed</Story>
+<Story name="Danger" args={{ color: "danger" }}>Failed</Story>
+<Story name="Warning" args={{ color: "warning" }}>Timed out</Story>
+<Story name="Info" args={{ color: "info" }}>Primary</Story>
 <Story name="WithIcon" args={{ icon: Hash }}>topic</Story>
diff --git a/web/src/lib/components/ui/Tag.svelte b/web/src/lib/components/ui/Tag.svelte
index d10f82462..2192bc961 100644
--- a/web/src/lib/components/ui/Tag.svelte
+++ b/web/src/lib/components/ui/Tag.svelte
@@ -9,12 +9,15 @@
 				gray: "border border-transparent bg-background-inset text-foreground-default",
 				success:
 					"border border-transparent bg-background-success-subtle text-foreground-success-strong",
+				danger:
+					"border border-transparent bg-background-danger-subtle text-foreground-danger-strong",
 				warning: "border border-transparent bg-background-warning-subtle text-foreground-warning",
 				info: "border border-transparent bg-background-info-subtle text-foreground-info-strong"
 			},
 			size: {
 				sm: "px-1 typography-paragraph-mini",
-				md: "px-1.5 py-0.5 typography-paragraph-small"
+				md: "px-1.5 py-0.5 typography-paragraph-small",
+				lg: "px-2 py-1 typography-paragraph-regular font-normal"
 			}
 		},
 		defaultVariants: {
@@ -55,7 +58,7 @@
 
 <span class={classes} {...rest}>
 	{#if Icon}
-		<Icon class="size-3" aria-hidden="true" />
+		<Icon class="size-3 mt-px" aria-hidden="true" />
 	{/if}
 	{#if children}
 		{@render children()}
diff --git a/web/src/lib/format.ts b/web/src/lib/format.ts
index 47e2b5487..2cf373b78 100644
--- a/web/src/lib/format.ts
+++ b/web/src/lib/format.ts
@@ -53,6 +53,23 @@ export const compactRelativeTime = (input: string | Date, now: Date = new Date()
 	return `${Math.floor(duration)}y ${suffix}`;
 };
 
+// the appview's durationFmt: non-zero chunks, largest first ("1h 3m 20s").
+// under a second reads "0s", so an instant run still differs from one that never ran.
+export const formatDuration = (ms: number): string => {
+	if (!Number.isFinite(ms) || ms < 0) return "";
+	const total = Math.floor(ms / 1000);
+	const chunks: [number, string][] = [
+		[Math.floor(total / 86400), "d"],
+		[Math.floor(total / 3600) % 24, "h"],
+		[Math.floor(total / 60) % 60, "m"],
+		[total % 60, "s"]
+	];
+	const parts = chunks
+		.filter(([amount]) => amount !== 0)
+		.map(([amount, unit]) => `${amount}${unit}`);
+	return parts.length > 0 ? parts.join(" ") : "0s";
+};
+
 export const formatDate = (input: string | Date): string => {
 	const date = typeof input === "string" ? new Date(input) : input;
 	return Number.isNaN(date.getTime()) ? "" : dtf.format(date);
diff --git a/web/src/routes/[handle]/[repo]/pipelines/+page.svelte b/web/src/routes/[handle]/[repo]/pipelines/+page.svelte
new file mode 100644
index 000000000..7693b0f27
--- /dev/null
+++ b/web/src/routes/[handle]/[repo]/pipelines/+page.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import PipelineList from "$lib/components/repo/pipelines/PipelineList.svelte";
+	import PipelineToolbar from "$lib/components/repo/pipelines/PipelineToolbar.svelte";
+	import TabPanel from "$lib/components/ui/TabPanel.svelte";
+
+	let { data } = $props();
+</script>
+
+<TabPanel padded={false} class="p-4">
+	<PipelineToolbar
+		ownerHandle={data.repo.ownerHandle}
+		repoName={data.repo.name}
+		filter={data.filter}
+		total={data.pipelines.length}
+	/>
+</TabPanel>
+
+<div class="mt-2">
+	<PipelineList
+		ownerHandle={data.repo.ownerHandle}
+		repoName={data.repo.name}
+		pipelines={data.pipelines}
+		filtered={data.hasAny}
+	/>
+</div>
diff --git a/web/src/routes/[handle]/[repo]/pipelines/+page.ts b/web/src/routes/[handle]/[repo]/pipelines/+page.ts
new file mode 100644
index 000000000..9756b4f47
--- /dev/null
+++ b/web/src/routes/[handle]/[repo]/pipelines/+page.ts
@@ -0,0 +1,25 @@
+// TODO: mocked. swap for sh.tangled.pipeline.listPipelines via bobbin, the way
+// issues/+page.ts does. a real load hands `q` to the server instead of matching here.
+import { pipelines as mockPipelines } from "$lib/components/repo/pipelines/mock";
+import { matchesQuery, type PipelineFilter } from "$lib/components/repo/pipelines/pipeline";
+import type { PageLoad } from "./$types";
+
+const FILTERS: PipelineFilter[] = ["all", "push", "pull_request"];
+
+export const load: PageLoad = async (event) => {
+	const requested = event.url.searchParams.get("trigger") as PipelineFilter | null;
+	const filter = requested && FILTERS.includes(requested) ? requested : "all";
+	const query = event.url.searchParams.get("q") ?? "";
+
+	const pipelines = mockPipelines
+		.filter((pipeline) => filter === "all" || pipeline.trigger.kind === filter)
+		.filter((pipeline) => matchesQuery(pipeline, query));
+
+	return {
+		filter,
+		query,
+		pipelines,
+		// lets the list tell "no runs at all" from "nothing matched"
+		hasAny: mockPipelines.length > 0
+	};
+};