From 0dfed6666e5c342feed9655682ea09f2d6bb180b Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Wed, 5 Aug 2026 10:32:55 +0200
Subject: [PATCH] web/components/pipelines: add a symbol variant to
 PipelineWorkflows

Recreates the appview's pipelineSymbol fragment. A donut ring split by
workflow status, or the status icon on its own when every workflow
agrees. Clicking it opens the same workflow dropdown the count variant
already had.

Dropdown got an xOffset prop so the menu can line up under the symbol.

Signed-off-by: eti <eti@eti.tf>
---
 .../repo/pipelines/PipelineSymbol.svelte      | 80 +++++++++++++++++++
 .../PipelineWorkflows.stories.svelte          | 31 +++++++
 .../repo/pipelines/PipelineWorkflows.svelte   | 40 +++++++---
 .../lib/components/repo/pipelines/pipeline.ts |  4 +
 web/src/lib/components/ui/Dropdown.svelte     |  7 +-
 5 files changed, 147 insertions(+), 15 deletions(-)
 create mode 100644 web/src/lib/components/repo/pipelines/PipelineSymbol.svelte
 create mode 100644 web/src/lib/components/repo/pipelines/PipelineWorkflows.stories.svelte

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 000000000..8c3fb79c6
--- /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 000000000..9af695a59
--- /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 ec565ade8..9326eac20 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 f0f4dfb90..2ecb21a06 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 c6b910bd9..d82f6f080 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>
-- 
2.51.2