diff --git a/web/src/lib/components/repo/pipelines/PipelineSymbol.svelte b/web/src/lib/components/repo/pipelines/PipelineSymbol.svelte
new file mode 100644
index 00000000..8c3fb79c
--- /dev/null
+++ b/web/src/lib/components/repo/pipelines/PipelineSymbol.svelte
@@ -0,0 +1,80 @@
+<script module lang="ts">
+	import { tv } from "tailwind-variants";
+	import type { PipelineStatus } from "$lib/components/repo/types";
+
+	/** the ring reuses the icon colours, so a status reads the same either way */
+	export const STATUS_STROKES: Record<PipelineStatus, string> = {
+		pending: "stroke-foreground-placeholder",
+		running: "stroke-foreground-warning",
+		success: "stroke-foreground-success",
+		failed: "stroke-foreground-danger",
+		timeout: "stroke-foreground-warning",
+		cancelled: "stroke-foreground-muted"
+	};
+
+	export const pipelineSymbol = tv({
+		slots: {
+			// the glyph that stands in when the ring would be one flat colour
+			icon: "size-4 shrink-0",
+			waiting: "size-4 shrink-0 text-foreground-muted",
+			// -rotate-90 puts the first arc at twelve o'clock instead of three
+			ring: "size-4 shrink-0 -rotate-90"
+		}
+	});
+
+	const RADIUS = 8;
+	const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+</script>
+
+<script lang="ts">
+	import Hourglass from "$icon/hourglass";
+	import type { PipelineSummary } from "$lib/components/repo/types";
+	import { statusCounts, STATUS_ORDER } from "./pipeline";
+	import PipelineStatusIcon from "./PipelineStatusIcon.svelte";
+
+	interface Props {
+		pipeline: PipelineSummary;
+		class?: string;
+	}
+
+	let { pipeline, class: className }: Props = $props();
+
+	// one arc per status that actually occurs, laid out clockwise in STATUS_ORDER
+	const arcs = $derived.by(() => {
+		const counts = statusCounts(pipeline);
+		const total = pipeline.workflows.length;
+		let offset = 0;
+		return STATUS_ORDER.filter((status) => counts[status] > 0).map((status) => {
+			const length = (counts[status] / total) * CIRCUMFERENCE;
+			const arc = { status, length, offset };
+			offset += length;
+			return arc;
+		});
+	});
+
+	const classes = pipelineSymbol();
+</script>
+
+{#if arcs.length === 0}
+	<!-- no spindle has reported a workflow yet, so there is nothing to apportion -->
+	<Hourglass class={classes.waiting({ class: className })} aria-hidden="true" />
+{:else if arcs.length === 1}
+	<!-- every workflow agrees: a full ring of one colour says less than the status' own icon -->
+	<PipelineStatusIcon status={arcs[0].status} colored class={classes.icon({ class: className })} />
+{:else}
+	<!-- the arcs always add up to the whole circle, so the ring needs no track under them -->
+	<svg class={classes.ring({ class: className })} viewBox="0 0 20 20" aria-hidden="true">
+		{#each arcs as arc (arc.status)}
+			<circle
+				cx="10"
+				cy="10"
+				r={RADIUS}
+				fill="none"
+				stroke-width="2"
+				class={STATUS_STROKES[arc.status]}
+				stroke-dasharray="{arc.length} {CIRCUMFERENCE - arc.length}"
+				stroke-dashoffset={-arc.offset}
+			/>
+		{/each}
+	</svg>
+{/if}
diff --git a/web/src/lib/components/repo/pipelines/PipelineWorkflows.stories.svelte b/web/src/lib/components/repo/pipelines/PipelineWorkflows.stories.svelte
new file mode 100644
index 00000000..9af695a5
--- /dev/null
+++ b/web/src/lib/components/repo/pipelines/PipelineWorkflows.stories.svelte
@@ -0,0 +1,31 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import PipelineWorkflows from "./PipelineWorkflows.svelte";
+	import { pipelines } from "./mock";
+
+	const [running, mixed, passed, waiting, timedOut, cancelled] = pipelines;
+
+	const { Story } = defineMeta({
+		title: "Repo/Pipelines/PipelineWorkflows",
+		component: PipelineWorkflows,
+		tags: ["autodocs"],
+		args: {
+			ownerHandle: "tangled.org",
+			repoName: "core",
+			pipeline: running
+		}
+	});
+</script>
+
+<!-- the card's trigger: how many workflows, and how many have settled -->
+<Story name="Count" />
+<Story name="Count waiting" args={{ pipeline: waiting }} />
+
+<!-- the appview's pipelineSymbol: a status ring sized for a commit or PR header -->
+<Story name="Symbol" args={{ variant: "symbol" }} />
+<Story name="Symbol long" args={{ variant: "symbol", summary: "long" }} />
+<Story name="Symbol mixed" args={{ variant: "symbol", pipeline: mixed, summary: "long" }} />
+<Story name="Symbol passed" args={{ variant: "symbol", pipeline: passed }} />
+<Story name="Symbol timed out" args={{ variant: "symbol", pipeline: timedOut, summary: "long" }} />
+<Story name="Symbol cancelled" args={{ variant: "symbol", pipeline: cancelled }} />
+<Story name="Symbol waiting" args={{ variant: "symbol", pipeline: waiting }} />
diff --git a/web/src/lib/components/repo/pipelines/PipelineWorkflows.svelte b/web/src/lib/components/repo/pipelines/PipelineWorkflows.svelte
index ec565ade..9326eac2 100644
--- a/web/src/lib/components/repo/pipelines/PipelineWorkflows.svelte
+++ b/web/src/lib/components/repo/pipelines/PipelineWorkflows.svelte
@@ -12,7 +12,8 @@
 			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"
+			outcome: "shrink-0 text-foreground-muted",
+			status: "mt-0.5"
 		},
 		variants: {
 			variant: {
@@ -39,6 +40,7 @@
 	import { finishedCount, longSummary, shortSummary, STATUS_LABELS } from "./pipeline";
 	import PipelineStatusIcon from "./PipelineStatusIcon.svelte";
 	import PipelineSymbol from "./PipelineSymbol.svelte";
+	import ShimmerText from "$lib/components/ui/ShimmerText.svelte";
 
 	interface Props {
 		ownerHandle: string;
@@ -63,24 +65,36 @@
 
 {#if count === 0}
 	<!-- no workflows yet, so nothing to open -->
-	<span
-		class={classes.waiting()}
-		title={variant === "symbol" ? "Waiting for a spindle" : undefined}
-	>
-		<PipelineSymbol {pipeline} class={classes.symbol()} />
-		{#if variant === "count"}
-			Waiting for a spindle…
-		{/if}
-	</span>
+	<ShimmerText color="inherit" duration={3} delay={0}>
+		<span
+			class={classes.waiting()}
+			title={variant === "symbol" ? "Waiting for a spindle" : undefined}
+		>
+			<PipelineSymbol {pipeline} class={classes.symbol()} />
+			{#if variant === "count"}
+				<span class={classes.status()}>Waiting for a spindle…</span>
+			{/if}
+		</span>
+	</ShimmerText>
 {:else}
-	<Dropdown group="pipeline-workflows" align="left" menuClass="w-72" label={longSummary(pipeline)}>
+	<Dropdown
+		group="pipeline-workflows"
+		align="left"
+		menuClass="w-72"
+		label={longSummary(pipeline)}
+		xOffset={-8.5}
+	>
 		{#snippet trigger()}
 			<span class={classes.trigger()}>
 				{#if variant === "symbol"}
 					<PipelineSymbol {pipeline} class={classes.symbol()} />
-					{summary === "long" ? longSummary(pipeline) : shortSummary(pipeline)}
+					<span class={classes.status()}>
+						{summary === "long" ? longSummary(pipeline) : shortSummary(pipeline)}
+					</span>
 				{:else}
-					{label}
+					<span class={classes.status()}>
+						{label}
+					</span>
 					<ChevronDown class={classes.icon()} aria-hidden="true" />
 				{/if}
 			</span>
diff --git a/web/src/lib/components/repo/pipelines/pipeline.ts b/web/src/lib/components/repo/pipelines/pipeline.ts
index f0f4dfb9..2ecb21a0 100644
--- a/web/src/lib/components/repo/pipelines/pipeline.ts
+++ b/web/src/lib/components/repo/pipelines/pipeline.ts
@@ -75,6 +75,10 @@ export const finishedCount = (pipeline: PipelineSummary): number => {
 	return counts.success + counts.failed + counts.timeout + counts.cancelled;
 };
 
+/** "2/3" — how many workflows passed, for spots too tight for the breakdown */
+export const shortSummary = (pipeline: PipelineSummary): string =>
+	`${statusCounts(pipeline).success}/${pipeline.workflows.length}`;
+
 /** "2/3 passed, 1/3 failed" */
 export const longSummary = (pipeline: PipelineSummary): string => {
 	const counts = statusCounts(pipeline);
diff --git a/web/src/lib/components/ui/Dropdown.svelte b/web/src/lib/components/ui/Dropdown.svelte
index c6b910bd..d82f6f08 100644
--- a/web/src/lib/components/ui/Dropdown.svelte
+++ b/web/src/lib/components/ui/Dropdown.svelte
@@ -63,6 +63,7 @@
 		menuClass?: string;
 		trigger: Snippet;
 		children: Snippet;
+		xOffset?: number;
 	}
 
 	let {
@@ -76,7 +77,8 @@
 		label,
 		menuClass,
 		trigger,
-		children
+		children,
+		xOffset
 	}: Props = $props();
 
 	let open = $state(false);
@@ -190,7 +192,7 @@
 		aria-expanded={open}
 		aria-controls={menuId}
 		aria-label={label}
-		insetShadow={insetShadow}
+		{insetShadow}
 	>
 		{@render trigger()}
 	</Button>
@@ -205,6 +207,7 @@
 		role="menu"
 		tabindex={-1}
 		onkeydown={onMenuKeydown}
+		style="transform: translateX({xOffset}px)"
 	>
 		{@render children()}
 	</div>