From b61da57c352d291e5e241c6ce4cf7e2d425470de Mon Sep 17 00:00:00 2001
From: Diego Imbert <diego@windmill.dev>
Date: Wed, 30 Sep 2026 19:40:24 +0200
Subject: [PATCH] fix: an errored script header stays red when selected

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../src/lib/components/assets/AssetGraph/AssetNode.svelte | 6 +++++-
 .../components/assets/AssetGraph/PipelineNodeCard.svelte  | 8 ++++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/frontend/src/lib/components/assets/AssetGraph/AssetNode.svelte b/frontend/src/lib/components/assets/AssetGraph/AssetNode.svelte
index d023691f67..30ea2e52c2 100644
--- a/frontend/src/lib/components/assets/AssetGraph/AssetNode.svelte
+++ b/frontend/src/lib/components/assets/AssetGraph/AssetNode.svelte
@@ -280,7 +280,11 @@
 		return items
 	}
 	let upstream = $derived(data.upstream)
-	const HEADER_SELECTED = 'bg-surface-accent-selected hover:bg-surface-accent-selected text-accent'
+	let HEADER_SELECTED = $derived(
+		data.scriptError
+			? 'bg-red-200 dark:bg-red-600 hover:bg-red-200 dark:hover:bg-red-600'
+			: 'bg-surface-accent-selected hover:bg-surface-accent-selected text-accent'
+	)
 	const CHIP_SELECTED =
 		'bg-surface-accent-selected border-border-selected hover:bg-surface-accent-selected text-accent'
 	let producer = $derived(upstream && 'path' in upstream ? upstream : undefined)
diff --git a/frontend/src/lib/components/assets/AssetGraph/PipelineNodeCard.svelte b/frontend/src/lib/components/assets/AssetGraph/PipelineNodeCard.svelte
index b6041db145..6aaad095ff 100644
--- a/frontend/src/lib/components/assets/AssetGraph/PipelineNodeCard.svelte
+++ b/frontend/src/lib/components/assets/AssetGraph/PipelineNodeCard.svelte
@@ -140,8 +140,12 @@ and the controls hung around the card.
 		<div
 			class={twMerge(
 				'mx-2 flex items-stretch min-w-0 rounded-t-md overflow-hidden bg-surface border border-b-0 border-gray-200 dark:border-gray-700',
-				headerTone === 'error' && 'border-red-300 dark:border-red-600',
-				headerSelected && 'border-border-selected dark:border-border-selected'
+				// Like an errored card: red, and a stronger red when selected.
+				headerTone === 'error'
+					? headerSelected
+						? 'border-red-500 dark:border-red-500'
+						: 'border-red-300 dark:border-red-600'
+					: headerSelected && 'border-border-selected dark:border-border-selected'
 			)}
 			style="height: {PIPELINE_NODE_HEADER}px;"
 		>