From d03a5cdeb4a17139904e826e907f93a1349dd5a6 Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Thu, 20 Aug 2026 14:22:47 +0200
Subject: [PATCH] web/pipelines: visuals nits

Signed-off-by: eti <eti@eti.tf>
---
 .../repo/pipelines/PipelineCardContent.svelte |  4 +-
 .../PipelineWorkflows.stories.svelte          |  5 +
 .../repo/pipelines/PipelineWorkflows.svelte   | 93 ++++++++++++-------
 .../repo/pipelines/WorkflowLogs.svelte        | 45 ++++++---
 .../repo/pipelines/WorkflowSidebar.svelte     |  6 +-
 web/src/lib/components/ui/Link.svelte         |  5 +-
 .../workflow/[workflow]/+page.svelte          |  2 +-
 7 files changed, 109 insertions(+), 51 deletions(-)

diff --git a/web/src/lib/components/repo/pipelines/PipelineCardContent.svelte b/web/src/lib/components/repo/pipelines/PipelineCardContent.svelte
index b2195f2f..c21dc2ea 100644
--- a/web/src/lib/components/repo/pipelines/PipelineCardContent.svelte
+++ b/web/src/lib/components/repo/pipelines/PipelineCardContent.svelte
@@ -15,7 +15,7 @@
 			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: "mr-2 flex flex-wrap items-center gap-2",
-			workflows: "-ml-3",
+			workflows: "",
 			duration: "inline-flex items-center gap-1",
 			durationIcon: "size-3 shrink-0"
 		},
@@ -138,7 +138,7 @@
 <div class={classes.meta()}>
 	<span class={classes.metaSub()}>
 		<span class={classes.workflows()} title={longSummary(pipeline) || undefined}>
-			<PipelineWorkflows {ownerHandle} {repoName} {pipeline} />
+			<PipelineWorkflows {ownerHandle} {repoName} {pipeline} link />
 		</span>
 	</span>
 
diff --git a/web/src/lib/components/repo/pipelines/PipelineWorkflows.stories.svelte b/web/src/lib/components/repo/pipelines/PipelineWorkflows.stories.svelte
index 9af695a5..cb556149 100644
--- a/web/src/lib/components/repo/pipelines/PipelineWorkflows.stories.svelte
+++ b/web/src/lib/components/repo/pipelines/PipelineWorkflows.stories.svelte
@@ -21,6 +21,11 @@
 <Story name="Count" />
 <Story name="Count waiting" args={{ pipeline: waiting }} />
 
+<!-- the same tally as a bare link, for a row that must align with plain text -->
+<Story name="Link" args={{ link: true }} />
+<Story name="Link waiting" args={{ link: true, pipeline: waiting }} />
+<Story name="Link symbol" args={{ link: true, variant: "symbol", summary: "long" }} />
+
 <!-- 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" }} />
diff --git a/web/src/lib/components/repo/pipelines/PipelineWorkflows.svelte b/web/src/lib/components/repo/pipelines/PipelineWorkflows.svelte
index 7ac8b8fe..ecb39dc3 100644
--- a/web/src/lib/components/repo/pipelines/PipelineWorkflows.svelte
+++ b/web/src/lib/components/repo/pipelines/PipelineWorkflows.svelte
@@ -20,7 +20,7 @@
 		variants: {
 			variant: {
 				// "2/3 workflows" with a chevron, for a card that has room to spell it out
-				count: { symbol: "size-3" },
+				count: { symbol: "size-4" },
 				// the appview's pipelineSymbol: a status ring plus a bare tally
 				symbol: { trigger: "gap-1.5" }
 			}
@@ -34,16 +34,17 @@
 </script>
 
 <script lang="ts">
-	import ChevronDown from "$icon/chevron-down";
 	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, shortSummary, STATUS_LABELS } from "./pipeline";
+	import { longSummary, shortSummary, STATUS_LABELS } from "./pipeline";
 	import PipelineStatusIcon from "./PipelineStatusIcon.svelte";
 	import PipelineSymbol from "./PipelineSymbol.svelte";
 	import ShimmerText from "$lib/components/ui/ShimmerText.svelte";
 	import Button, { type ButtonVariants } from "$lib/components/ui/Button.svelte";
+	import Link from "$lib/components/ui/Link.svelte";
+	import { resolve } from "$app/paths";
 	import type { Component } from "svelte";
 	import type { SvelteHTMLElements } from "svelte/elements";
 
@@ -60,6 +61,12 @@
 		icon?: Component<SvelteHTMLElements["svg"]>;
 		iconClass?: string;
 		size?: ButtonVariants["size"];
+		/**
+		 * a bare link to the first workflow instead of the dropdown: no button padding and no
+		 * type size of its own, so it lines up with the text beside it. The workflow list is
+		 * unreachable this way, since an <a> cannot open a popover.
+		 */
+		link?: boolean;
 	}
 
 	let {
@@ -70,32 +77,67 @@
 		summary = "short",
 		icon: Icon,
 		iconClass,
-		size = "regular"
+		size = "regular",
+		link = false
 	}: Props = $props();
 
 	const count = $derived(pipeline.workflows.length);
-	const finished = $derived(finishedCount(pipeline));
-	const noun = $derived(count === 1 ? "workflow" : "workflows");
 
 	const classes = $derived(pipelineWorkflows({ variant }));
+
+	const workflowPath = (name: string) =>
+		`/${ownerHandle}/${repoName}/pipelines/${pipeline.id}/workflow/${name}`;
 </script>
 
+{#snippet body()}
+	{#if Icon}
+		<Icon class="size-3 {iconClass}" aria-hidden="true" />
+	{/if}
+	<PipelineSymbol {pipeline} class={classes.symbol()} />
+	{#if summary !== "none"}
+		<span class={classes.status()}>
+			{summary === "long" ? longSummary(pipeline) : shortSummary(pipeline)}
+		</span>
+	{/if}
+{/snippet}
+
 {#if count === 0}
 	<!-- no workflows yet, so nothing to open -->
 	<ShimmerText color="inherit" duration={3} delay={0} class={classes.waitingWrap()}>
-		<Button
-			variant="ghost"
-			disabled
-			class={classes.waiting()}
-			title={variant === "symbol" ? "Waiting for a spindle" : undefined}
-			{size}
-		>
-			<PipelineSymbol {pipeline} class={classes.waitingSymbol()} />
-			{#if variant === "count"}
-				<span class={classes.status()}>Waiting…</span>
-			{/if}
-		</Button>
+		{#if link}
+			<span
+				class={classes.trigger()}
+				title={variant === "symbol" ? "Waiting for a spindle" : undefined}
+			>
+				<PipelineSymbol {pipeline} class={classes.waitingSymbol()} />
+				{#if variant === "count"}
+					<span class={classes.status()}>Waiting…</span>
+				{/if}
+			</span>
+		{:else}
+			<Button
+				variant="ghost"
+				disabled
+				class={classes.waiting()}
+				title={variant === "symbol" ? "Waiting for a spindle" : undefined}
+				{size}
+			>
+				<PipelineSymbol {pipeline} class={classes.waitingSymbol()} />
+				{#if variant === "count"}
+					<span class={classes.status()}>Waiting…</span>
+				{/if}
+			</Button>
+		{/if}
 	</ShimmerText>
+{:else if link}
+	<Link
+		variant="inherit"
+		href={resolve(workflowPath(pipeline.workflows[0].name) as "/")}
+		class={classes.trigger()}
+		title={summary === "none" ? longSummary(pipeline) : undefined}
+	>
+		{@render body()}
+	</Link>
 {:else}
 	<!-- the ghost button is Dropdown's own trigger: a Button inside the trigger
 	     snippet nests a <button> in a <button>, which the parser unnests, leaving
@@ -111,23 +153,12 @@
 	>
 		{#snippet trigger()}
 			<span class={classes.trigger()}>
-				{#if Icon}
-					<Icon class="size-3 {iconClass}" aria-hidden="true" />
-				{/if}
-				<PipelineSymbol {pipeline} class={classes.symbol()} />
-				{#if summary !== "none"}
-					<span class={classes.status()}>
-						{summary === "long" ? longSummary(pipeline) : shortSummary(pipeline)}
-					</span>
-				{/if}
+				{@render body()}
 			</span>
 		{/snippet}
 
 		{#each pipeline.workflows as workflow (workflow.name)}
-			<DropdownItem
-				href={`/${ownerHandle}/${repoName}/pipelines/${pipeline.id}/workflow/${workflow.name}`}
-				class={classes.item()}
-			>
+			<DropdownItem href={workflowPath(workflow.name)} class={classes.item()}>
 				<span class={classes.row()}>
 					<span class={classes.name()}>
 						<PipelineStatusIcon status={workflow.status} colored />
diff --git a/web/src/lib/components/repo/pipelines/WorkflowLogs.svelte b/web/src/lib/components/repo/pipelines/WorkflowLogs.svelte
index 9e624e7e..4f11fd6a 100644
--- a/web/src/lib/components/repo/pipelines/WorkflowLogs.svelte
+++ b/web/src/lib/components/repo/pipelines/WorkflowLogs.svelte
@@ -4,19 +4,17 @@
 
 	export const workflowLogs = tv({
 		slots: {
-			viewport: "overflow-y-auto typography-monospace-regular rounded",
+			viewport: "overflow-y-auto rounded typography-monospace-regular",
 			sizer: "relative w-full",
 			row: "absolute top-0 left-0 flex w-full",
-			header:
-				"sticky top-0 z-10 flex w-full items-center gap-2 rounded-t border-x border-t border-border-default bg-background-default cursor-pointer px-3 text-left font-sans typography-paragraph-regular shadow-xs",
+			header: "sticky top-0 z-10 flex w-full cursor-pointer items-center gap-2 rounded-t border-x border-t border-border-default bg-background-default px-3 text-left font-sans typography-paragraph-regular",
 			chevron: "size-4 shrink-0 text-foreground-muted",
 			name: "truncate font-semibold text-foreground-default",
-			elapsed: "ml-auto shrink-0 tabular-nums text-foreground-muted",
+			elapsed: "ml-auto shrink-0 text-foreground-muted tabular-nums",
 			body: "w-full min-w-0 border-x border-border-default bg-background-default px-3",
 			command: "break-all whitespace-pre-wrap text-foreground-info",
 			line: "break-all whitespace-pre-wrap text-foreground-default",
-			empty:
-				"flex items-center justify-center gap-2 rounded border border-border-default p-12 text-base italic text-foreground-muted",
+			empty: "flex items-center justify-center gap-2 rounded border border-border-default bg-background-default p-12 text-base text-foreground-muted italic",
 			status: "flex items-center gap-2 px-1 py-2 text-foreground-muted"
 		},
 		variants: {
@@ -40,7 +38,11 @@
 <script lang="ts">
 	import { untrack } from "svelte";
 	import { SvelteSet } from "svelte/reactivity";
-	import { createVirtualizer, defaultRangeExtractor, type SvelteVirtualizer } from "@tanstack/svelte-virtual";
+	import {
+		createVirtualizer,
+		defaultRangeExtractor,
+		type SvelteVirtualizer
+	} from "@tanstack/svelte-virtual";
 	import ChevronDown from "$icon/chevron-down";
 	import ChevronRight from "$icon/chevron-right";
 	import TriangleAlert from "$icon/triangle-alert";
@@ -104,7 +106,8 @@
 			$virtualizer.setOptions({
 				count: current.length,
 				getScrollElement: () => scroller,
-				estimateSize: (index) => (current[index] ? ROW_HEIGHT[current[index].kind] : ROW_HEIGHT.line),
+				estimateSize: (index) =>
+					current[index] ? ROW_HEIGHT[current[index].kind] : ROW_HEIGHT.line,
 				getItemKey: (index) => (current[index] ? rowKey(current[index], index) : index),
 				rangeExtractor
 			})
@@ -144,7 +147,8 @@
 		}
 
 		if (!activeStep) return null;
-		const offset = nextStepStart !== null ? Math.min(0, nextStepStart - ROW_HEIGHT.step - scrollTop) : 0;
+		const offset =
+			nextStepStart !== null ? Math.min(0, nextStepStart - ROW_HEIGHT.step - scrollTop) : 0;
 		return { ...activeStep, offset };
 	});
 	type LogVirtualizer = SvelteVirtualizer<HTMLDivElement, HTMLElement>;
@@ -171,7 +175,12 @@
 		{/if}
 	</div>
 {:else}
-	<div bind:this={viewport} {onscroll} class={classes().viewport()} style="height: min(70dvh, 60rem)">
+	<div
+		bind:this={viewport}
+		{onscroll}
+		class={classes().viewport()}
+		style="height: min(70dvh, 60rem)"
+	>
 		{#if stickyInfo}
 			{@const slots = classes({
 				collapsed: collapsed.has(stickyInfo.step.id),
@@ -179,12 +188,12 @@
 				last: isLastRow(rows, stickyInfo.index)
 			})}
 			<div
-				class="sticky top-0 z-20 -mb-11 w-full pointer-events-auto"
+				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()} shadow-xs"
+					class={slots.header()}
 					style="min-height: {ROW_HEIGHT.step}px"
 					aria-expanded={!collapsed.has(stickyInfo.step.id)}
 					onclick={() => toggle(stickyInfo.step.id)}
@@ -195,7 +204,11 @@
 						<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()} />
+					<Elapsed
+						start={stickyInfo.step.startedAt}
+						end={stickyInfo.step.finishedAt}
+						class={slots.elapsed()}
+					/>
 				</button>
 			</div>
 		{/if}
@@ -228,7 +241,11 @@
 									<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()} />
+								<Elapsed
+									start={row.step.startedAt}
+									end={row.step.finishedAt}
+									class={slots.elapsed()}
+								/>
 							</button>
 						{:else if row.kind === "command"}
 							<div class={slots.body()}>
diff --git a/web/src/lib/components/repo/pipelines/WorkflowSidebar.svelte b/web/src/lib/components/repo/pipelines/WorkflowSidebar.svelte
index 1339e61f..b578ae66 100644
--- a/web/src/lib/components/repo/pipelines/WorkflowSidebar.svelte
+++ b/web/src/lib/components/repo/pipelines/WorkflowSidebar.svelte
@@ -16,9 +16,11 @@
 		},
 		variants: {
 			active: {
-				true: { card: "border-transparent bg-background-inset" },
+				true: {
+					card: "border-border-disabled bg-background-default dark:bg-background-subtle"
+				},
 				false: {
-					card: "border-border-default bg-background-default hover:bg-background-subtle"
+					card: "border-border-default bg-background-subtle hover:border-border-disabled hover:bg-background-default dark:bg-background-default dark:hover:bg-background-subtle"
 				}
 			}
 		},
diff --git a/web/src/lib/components/ui/Link.svelte b/web/src/lib/components/ui/Link.svelte
index 878c3c73..c9dcf261 100644
--- a/web/src/lib/components/ui/Link.svelte
+++ b/web/src/lib/components/ui/Link.svelte
@@ -12,7 +12,10 @@
 				warning:
 					"text-foreground-link-warning hover:text-foreground-link-warning-hover focus-visible:outline-foreground-link-warning",
 				danger:
-					"text-foreground-link-danger hover:text-foreground-link-danger-hover focus-visible:outline-foreground-link-danger"
+					"text-foreground-link-danger hover:text-foreground-link-danger-hover focus-visible:outline-foreground-link-danger",
+				// takes its color from whatever it sits in, for a link inside a row of
+				// plain text that should read as text until you hover it
+				inherit: "text-inherit focus-visible:outline-border-focus"
 			},
 			size: {
 				regular: "",
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 e89afbd7..0c101642 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
@@ -27,7 +27,7 @@
 	<title>{data.workflow.name} · Pipeline {data.pipeline.id} · Tangled</title>
 </svelte:head>
 
-<TabPanel padded={false} class="p-4">
+<TabPanel padded={false} class="flex flex-col gap-2 p-4">
 	<PipelineCardContent
 		ownerHandle={data.repo.ownerHandle}
 		repoName={data.repo.name}
-- 
2.51.2