From dcd2fc491225705eba2a3f4fce273c0ccd52f40b Mon Sep 17 00:00:00 2001
From: Diego Imbert <diego@windmill.dev>
Date: Wed, 30 Sep 2026 13:18:46 +0200
Subject: [PATCH] fix: setup banner without icon, button actions, plainer
 activity rows

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../assets/AssetGraph/AssetNode.svelte        |  2 +-
 .../AssetGraph/PipelineActivityPanel.svelte   |  8 +++----
 .../AssetGraph/PipelineSetupSignpost.svelte   | 13 +++++++-----
 .../lib/components/common/alert/Alert.svelte  | 21 ++++++++++++-------
 4 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/frontend/src/lib/components/assets/AssetGraph/AssetNode.svelte b/frontend/src/lib/components/assets/AssetGraph/AssetNode.svelte
index 3b1dec569a..6a38b0c433 100644
--- a/frontend/src/lib/components/assets/AssetGraph/AssetNode.svelte
+++ b/frontend/src/lib/components/assets/AssetGraph/AssetNode.svelte
@@ -409,7 +409,7 @@
 			{/if}
 			{#if producer}
 				{#if producer.runState}
-					<RunStateChip runState={producer.runState} class="mr-1" />
+					<RunStateChip runState={producer.runState} class="mr-1 h-5 px-1.5 rounded-md" />
 				{/if}
 				<button
 					type="button"
diff --git a/frontend/src/lib/components/assets/AssetGraph/PipelineActivityPanel.svelte b/frontend/src/lib/components/assets/AssetGraph/PipelineActivityPanel.svelte
index 7e6c34adc2..d1e44a6924 100644
--- a/frontend/src/lib/components/assets/AssetGraph/PipelineActivityPanel.svelte
+++ b/frontend/src/lib/components/assets/AssetGraph/PipelineActivityPanel.svelte
@@ -416,7 +416,7 @@
 					onmouseenter={() => onHoverRun?.([e.path])}
 					onmouseleave={() => onHoverRun?.(undefined)}
 					class={twMerge(
-						'w-full flex items-center gap-2 px-2 py-1 rounded-sm hover:bg-surface-hover text-xs text-left',
+						'w-full flex items-center gap-2 px-2 py-1.5 rounded-sm font-normal hover:bg-surface-hover text-xs text-left',
 						isMember && 'pl-7',
 						expanded && 'bg-surface-selected'
 					)}
@@ -445,7 +445,7 @@
 					{:else}
 						<Code2 size={12} class="shrink-0 text-tertiary" />
 					{/if}
-					<span class="flex-1 min-w-0 truncate font-mono text-2xs" title={e.path}>
+					<span class="flex-1 min-w-0 truncate text-xs" title={e.path}>
 						{e.path}
 					</span>
 					{#if showSource}
@@ -533,7 +533,7 @@
 						onclick={() => toggleGroup(g.key)}
 						onmouseenter={() => onHoverRun?.(g.members.map((m) => m.path))}
 						onmouseleave={() => onHoverRun?.(undefined)}
-						class="w-full flex items-center gap-2 px-2 py-1 rounded-sm hover:bg-surface-hover text-xs text-left"
+						class="w-full flex items-center gap-2 px-2 py-1.5 rounded-sm font-normal hover:bg-surface-hover text-xs text-left"
 						title={collapsed ? 'Expand cascade runs' : 'Collapse cascade runs'}
 					>
 						<span class="shrink-0 text-tertiary">
@@ -549,7 +549,7 @@
 							{/if}
 						</span>
 						<Workflow size={12} class="shrink-0 text-indigo-500" />
-						<span class="flex-1 min-w-0 truncate font-mono text-2xs" title={groupTitle(g)}>
+						<span class="flex-1 min-w-0 truncate text-xs" title={groupTitle(g)}>
 							{groupTitle(g)}
 						</span>
 						<span
diff --git a/frontend/src/lib/components/assets/AssetGraph/PipelineSetupSignpost.svelte b/frontend/src/lib/components/assets/AssetGraph/PipelineSetupSignpost.svelte
index 8e82467e4d..0970708cb8 100644
--- a/frontend/src/lib/components/assets/AssetGraph/PipelineSetupSignpost.svelte
+++ b/frontend/src/lib/components/assets/AssetGraph/PipelineSetupSignpost.svelte
@@ -4,6 +4,7 @@
 	import { base } from '$lib/base'
 	import { CircleCheck, CircleAlert, Database, HardDrive, ArrowRight } from 'lucide-svelte'
 	import Alert from '$lib/components/common/alert/Alert.svelte'
+	import { Button } from '$lib/components/common'
 
 	interface Props {
 		workspace: string
@@ -74,7 +75,7 @@
 </script>
 
 {#if show}
-	<Alert type="warning" title="Finish setting up pipelines">
+	<Alert type="warning" title="Finish setting up pipelines" hideIcon>
 		<div class="flex flex-col gap-3">
 			<p>
 				Pipelines materialize data into DuckLake tables backed by object storage. Configure the
@@ -96,13 +97,15 @@
 							<span class="text-2xs text-secondary">{step.description}</span>
 						</div>
 						{#if step.done !== true}
-							<a
+							<Button
+								variant="default"
+								unifiedSize="sm"
 								href={step.href}
-								class="shrink-0 inline-flex items-center gap-1 text-xs text-accent hover:underline whitespace-nowrap"
+								endIcon={{ icon: ArrowRight }}
+								wrapperClasses="shrink-0"
 							>
 								{step.cta}
-								<ArrowRight size={12} />
-							</a>
+							</Button>
 						{:else}
 							<span class="shrink-0 text-2xs text-green-700 dark:text-green-400">Configured</span>
 						{/if}
diff --git a/frontend/src/lib/components/common/alert/Alert.svelte b/frontend/src/lib/components/common/alert/Alert.svelte
index e4cdd7bd7d..79eef95a0d 100644
--- a/frontend/src/lib/components/common/alert/Alert.svelte
+++ b/frontend/src/lib/components/common/alert/Alert.svelte
@@ -16,6 +16,8 @@
 		bgClass?: string | undefined
 		bgStyle?: string | undefined
 		iconClass?: string | undefined
+		/** Drop the type's icon; the text starts at the alert's edge. */
+		hideIcon?: boolean
 		iconStyle?: string | undefined
 		titleClass?: string | undefined
 		titleStyle?: string | undefined
@@ -37,6 +39,7 @@
 		bgClass = undefined,
 		bgStyle = undefined,
 		iconClass = undefined,
+		hideIcon = false,
 		iconStyle = undefined,
 		titleClass = undefined,
 		titleStyle = undefined,
@@ -73,14 +76,16 @@
 	<div class="flex flex-row items-center">
 		<!-- shrink-0: the badge's min-content width is the 16px icon, so without it a
 		     narrow container squeezes the circle into an oval. -->
-		<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full">
-			<SvelteComponent
-				class={twMerge(classes[type].iconClass, iconClass)}
-				style={iconStyle}
-				size={16}
-			/>
-		</div>
-		<div class={twMerge('ml-1 w-full')}>
+		{#if !hideIcon}
+			<div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full">
+				<SvelteComponent
+					class={twMerge(classes[type].iconClass, iconClass)}
+					style={iconStyle}
+					size={16}
+				/>
+			</div>
+		{/if}
+		<div class={twMerge(!hideIcon && 'ml-1', 'w-full')}>
 			{#if hasTitleRow}
 				<div class={twMerge('w-full flex flex-row items-center justify-between')}>
 					<span