From 1dcb6bb9005c1e97f1fca6470eb2d2105a973918 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@windmill.dev>
Date: Wed, 5 Aug 2026 08:07:22 +0000
Subject: [PATCH] fix(frontend): filter the AI Sandbox entry by the flow insert
 search (#10529)

Also drops the now-stale (new) badge on the Claude Code picker entry.

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../flows/content/FlowInputsQuick.svelte      | 42 ++++++++++++++-----
 .../flows/pickers/FlowScriptPicker.svelte     |  3 --
 .../pickers/FlowScriptPickerQuick.svelte      |  3 --
 3 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/frontend/src/lib/components/flows/content/FlowInputsQuick.svelte b/frontend/src/lib/components/flows/content/FlowInputsQuick.svelte
index 89943056e2..d7503b67a8 100644
--- a/frontend/src/lib/components/flows/content/FlowInputsQuick.svelte
+++ b/frontend/src/lib/components/flows/content/FlowInputsQuick.svelte
@@ -200,12 +200,7 @@
 
 	let scrollable: HTMLElement | undefined = $state()
 	function onKeyDown(e: KeyboardEvent) {
-		let length =
-			topLevelNodes?.length +
-			inlineScripts.length +
-			aiLength +
-			filteredWorkspaceItems.length +
-			hubCompletions.length
+		let length = hubOffset + (hubCompletions?.length ?? 0)
 		if (e.key === 'ArrowDown') {
 			selectedByKeyboard = (selectedByKeyboard + 1) % length
 			scrollable?.scrollTo({ top: selectedByKeyboard * 32, behavior: 'smooth' })
@@ -266,12 +261,36 @@
 	)
 	let aiLength = $derived(showAiRows ? 2 : 0)
 
+	// Must match the heading and label rendered for the AI Sandbox section
+	const aiSandboxHeading = 'AI Sandbox'
+	const aiSandboxLabel = 'Claude Code'
+	let matchesAiSandbox = $derived.by(() => {
+		const query = funcDesc?.trim().toLowerCase() ?? ''
+		if (query.length == 0) {
+			return true
+		}
+		return [aiSandboxHeading, aiSandboxLabel].some((term) => {
+			const lowered = term.toLowerCase()
+			return lowered.startsWith(query) || lowered.split(' ').some((w) => w.startsWith(query))
+		})
+	})
+	// Gates the AI Sandbox row and its slot in the index space; both must agree or arrow keys land
+	// on an index that renders nothing.
+	let showAiSandbox = $derived(
+		selectedKind === 'script' &&
+			preFilter === 'all' &&
+			!selected &&
+			customUi?.aiSandbox != false &&
+			matchesAiSandbox
+	)
+
 	// Every result row lives in one keyboard index space, and hovering a row moves that index, so
 	// mouse and keyboard can never highlight two different rows. Offsets follow the render order.
 	let inlineOffset = $derived(topLevelNodes.length)
 	let aiOffset = $derived(inlineOffset + (inlineScripts?.length ?? 0))
 	let workspaceOffset = $derived(aiOffset + aiLength)
-	let hubOffset = $derived(workspaceOffset + (filteredWorkspaceItems?.length ?? 0))
+	let aiSandboxOffset = $derived(workspaceOffset + (filteredWorkspaceItems?.length ?? 0))
+	let hubOffset = $derived(aiSandboxOffset + (showAiSandbox ? 1 : 0))
 </script>
 
 <svelte:window onkeydown={onKeyDown} />
@@ -500,13 +519,14 @@
 			{/await}
 			<div class="pb-1"></div>
 		{/if}
-		{#if selectedKind === 'script' && preFilter === 'all' && !selected && customUi?.aiSandbox != false}
-			<div class="pb-0 text-2xs font-normal text-secondary ml-2">AI Sandbox</div>
+		{#if showAiSandbox}
+			<div class="pb-0 text-2xs font-normal text-secondary ml-2">{aiSandboxHeading}</div>
 			<FlowScriptPickerQuick
 				eeRestricted={false}
-				selected={false}
+				selected={selectedByKeyboard === aiSandboxOffset}
+				onHover={() => hover(aiSandboxOffset)}
 				enterpriseLangs={[]}
-				label="Claude Code"
+				label={aiSandboxLabel}
 				lang="claudesandbox"
 				on:click={() => {
 					dispatch('new', {
diff --git a/frontend/src/lib/components/flows/pickers/FlowScriptPicker.svelte b/frontend/src/lib/components/flows/pickers/FlowScriptPicker.svelte
index 0484762705..93909d13f3 100644
--- a/frontend/src/lib/components/flows/pickers/FlowScriptPicker.svelte
+++ b/frontend/src/lib/components/flows/pickers/FlowScriptPicker.svelte
@@ -32,9 +32,6 @@
 				<LanguageIcon {lang} />
 			{/if}
 			<span class="text-xs">{label}</span>
-			{#if lang === 'claudesandbox'}
-				<span class="text-primary !text-xs">(new)</span>
-			{/if}
 		</div>
 	</Button>
 	{#snippet text()}
diff --git a/frontend/src/lib/components/flows/pickers/FlowScriptPickerQuick.svelte b/frontend/src/lib/components/flows/pickers/FlowScriptPickerQuick.svelte
index 135cc2e2fc..3ac279556f 100644
--- a/frontend/src/lib/components/flows/pickers/FlowScriptPickerQuick.svelte
+++ b/frontend/src/lib/components/flows/pickers/FlowScriptPickerQuick.svelte
@@ -58,9 +58,6 @@
 	{/if}
 	<span class="grow truncate text-left {eeRestricted ? 'text-disabled' : ''}">
 		{label}{#if eeRestricted}&nbsp;(EE){/if}
-		{#if lang === 'claudesandbox'}
-			<span class="text-primary !text-xs">(new)</span>
-		{/if}
 	</span>
 	{#if selected}
 		<kbd class="!text-xs">&crarr;</kbd>