From f481ea4059b4e5cb01273cffeb53ff340e8bd5bd Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@windmill.dev>
Date: Wed, 18 Mar 2026 08:15:04 +0000
Subject: [PATCH] fix(frontend): fix output of resultnode + svelte5 nits
 (#8424)

* fix(frontend): remove banned $bindable('') pattern from ClearableInput

Switching format types in the flow input editor caused a
props_invalid_value error because ClearableInput used
value = $bindable(''), which conflicts with undefined bindings.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* fix(frontend): restore flow result display in result node

The fix in #8390 changed updateLastJob() to only use testJob when
actively running/streaming, preferring flowStateStore for completed
results. But the result node has moduleId='' and no flowStateStore
entry, so the early return made it always show the empty state.

Add !moduleId to the testJob condition so the result node (which has
no flowStateStore entry) still uses testJob as its only data source.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../clearableInput/ClearableInput.svelte      | 32 ++++++++-----------
 .../flows/propPicker/OutputPickerInner.svelte |  5 +--
 2 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/frontend/src/lib/components/common/clearableInput/ClearableInput.svelte b/frontend/src/lib/components/common/clearableInput/ClearableInput.svelte
index 5e5a28c5fc..3d9a0e9ad7 100644
--- a/frontend/src/lib/components/common/clearableInput/ClearableInput.svelte
+++ b/frontend/src/lib/components/common/clearableInput/ClearableInput.svelte
@@ -1,25 +1,25 @@
 <script lang="ts">
-	import { run, createBubbler, stopPropagation, preventDefault } from 'svelte/legacy';
+	import { run, createBubbler, stopPropagation, preventDefault } from 'svelte/legacy'
 
-	const bubble = createBubbler();
+	const bubble = createBubbler()
 	import { createEventDispatcher } from 'svelte'
 	import { fade } from 'svelte/transition'
 	import { X } from 'lucide-svelte'
 	import { createDispatcherIfMounted } from '$lib/createDispatcherIfMounted'
 
 	interface Props {
-		value?: any;
-		placeholder?: string;
-		type?: 'text' | 'textarea' | 'number';
-		inputClass?: string;
-		wrapperClass?: string;
-		buttonClass?: string;
-		children?: import('svelte').Snippet;
+		value?: any
+		placeholder?: string
+		type?: 'text' | 'textarea' | 'number'
+		inputClass?: string
+		wrapperClass?: string
+		buttonClass?: string
+		children?: import('svelte').Snippet
 		[key: string]: any
 	}
 
 	let {
-		value = $bindable(''),
+		value = $bindable(),
 		placeholder = '',
 		type = 'text',
 		inputClass = '',
@@ -27,7 +27,7 @@
 		buttonClass = '',
 		children,
 		...rest
-	}: Props = $props();
+	}: Props = $props()
 	const dispatch = createEventDispatcher()
 	const dispatchIfMounted = createDispatcherIfMounted(dispatch)
 	let isHovered = $state(false)
@@ -35,7 +35,7 @@
 	let isNumeric = $derived(['number', 'range'].includes(type))
 	run(() => {
 		dispatchIfMounted('change', value)
-	});
+	})
 
 	function handleInput(e) {
 		value = isNumeric ? +e.target.value : e.target.value
@@ -44,10 +44,6 @@
 	function clear() {
 		value = ''
 	}
-
-	run(() => {
-		if (value === undefined) value = ''
-	});
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -58,7 +54,7 @@
 >
 	{#if type === 'textarea'}
 		<textarea
-			{value}
+			value={value ?? ''}
 			{placeholder}
 			rows="1"
 			class="resize-y {inputClass}"
@@ -71,7 +67,7 @@
 	{:else}
 		<input
 			{type}
-			{value}
+			value={value ?? ''}
 			{placeholder}
 			class=" {(value ? '!pr-[26px] ' : '') + inputClass}"
 			{...rest}
diff --git a/frontend/src/lib/components/flows/propPicker/OutputPickerInner.svelte b/frontend/src/lib/components/flows/propPicker/OutputPickerInner.svelte
index 6bc4686644..d055c6b2c9 100644
--- a/frontend/src/lib/components/flows/propPicker/OutputPickerInner.svelte
+++ b/frontend/src/lib/components/flows/propPicker/OutputPickerInner.svelte
@@ -204,8 +204,9 @@
 	}
 
 	function updateLastJob() {
-		// Prefer testJob only when actively running/streaming (individual step test in progress)
-		if (testJob && (testJob.result_stream || testJob.type === 'QueuedJob')) {
+		// Prefer testJob when actively running/streaming (individual step test in progress)
+		// or when there's no moduleId (result node — no flowStateStore entry exists)
+		if (testJob && (testJob.result_stream || testJob.type === 'QueuedJob' || !moduleId)) {
 			return testJob
 		}
 		if (