nit cache and skip on input node

frontend/src/lib/components/FlowGraphViewer.svelte

@@ -36,6 +36,8 @@
 		>
 			<FlowGraphV2
 				{triggerNode}
+				earlyStop={flow.value.skip_expr !== undefined}
+				cache={flow.value.cache_ttl !== undefined}
 				path={flow?.path}
 				{download}
 				minHeight={400}

frontend/src/lib/components/FlowStatusViewerInner.svelte

@@ -1244,6 +1244,8 @@
 									}
 								}
 							}}
+							earlyStop={job.raw_flow?.skip_expr !== undefined}
+							cache={job.raw_flow?.cache_ttl !== undefined}
 							modules={job.raw_flow?.modules ?? []}
 							failureModule={job.raw_flow?.failure_module}
 							preprocessorModule={job.raw_flow?.preprocessor_module}

frontend/src/lib/components/Section.svelte

@@ -48,9 +48,7 @@
 			{/if}
 		</h2>
 		<slot name="action" />
-		{#if collapsable && collapsed}
-			<slot name="badge" />
-		{/if}
+		<slot name="badge" />
 	</div>
 	<div class={collapsable && collapsed ? `hidden ${$$props.class}` : `${$$props.class}`}>
 		<slot />

frontend/src/lib/components/Toggle.svelte

@@ -104,9 +104,7 @@
 	<slot name="right" />
 </label>
 {#if eeOnly && disabled}
-	<span
-		class="inline-flex text-xs text-primary items-center gap-1 !text-yellow-500 whitespace-nowrap ml-8"
-	>
+	<span class="inline-flex text-xs items-center gap-1 !text-yellow-500 whitespace-nowrap ml-8">
 		<AlertTriangle size={16} />
 		EE only <Tooltip>Enterprise Edition only feature</Tooltip>
 	</span>

frontend/src/lib/components/flows/content/FlowSettings.svelte

@@ -138,7 +138,7 @@
 								right: 'Worker group tag (queue)',
 								rightTooltip:
 									"When a worker group tag is defined at the flow level, any steps inside the flow will run on any worker group that listen to that tag, regardless of the steps tag. If no worker group tags is defined, the flow controls will be executed with the default tag 'flow' and the steps will be executed with their respective tag",
-							rightDocumentationLink: 'https://www.windmill.dev/docs/core_concepts/worker_groups'
+								rightDocumentationLink: 'https://www.windmill.dev/docs/core_concepts/worker_groups'
 							}}
 							class="py-1"
 						/>
@@ -185,7 +185,8 @@
 							}}
 							options={{
 								right: 'Cache the results for each possible inputs',
-								rightTooltip: 'When enabled, the flow will cache the results of the flow for each possible set of inputs.',
+								rightTooltip:
+									'When enabled, the flow will cache the results of the flow for each possible set of inputs.',
 								rightDocumentationLink: 'https://www.windmill.dev/docs/flows/cache#cache-flows'
 							}}
 							class="py-1"
@@ -226,7 +227,8 @@
 								rightTooltip:
 									'If the inputs meet the predefined condition, the flow will not run.' +
 									'to decide if the flow should stop early.',
-								rightDocumentationLink: 'https://www.windmill.dev/docs/flows/early_stop#early-stop-for-flow'
+								rightDocumentationLink:
+									'https://www.windmill.dev/docs/flows/early_stop#early-stop-for-flow'
 							}}
 							class="py-1"
 						/>
@@ -316,7 +318,8 @@
 								'Steps will share a folder at `./shared` in which they can store heavier data and ' +
 								'pass them to the next step. Beware that the `./shared` folder is not ' +
 								'preserved across suspends and sleeps.',
-							rightDocumentationLink: 'https://www.windmill.dev/docs/core_concepts/persistent_storage/within_windmill#shared-directory'
+							rightDocumentationLink:
+								'https://www.windmill.dev/docs/core_concepts/persistent_storage/within_windmill#shared-directory'
 						}}
 						class="py-1"
 					/>
@@ -339,7 +342,8 @@
 						right: 'Make runs invisible to others',
 						rightTooltip:
 							'When this option is enabled, manual executions of this script are invisible to users other than the user running it, including the owner(s). This setting can be overridden when this script is run manually from the advanced menu.',
-						rightDocumentationLink: 'https://www.windmill.dev/docs/core_concepts/monitor_past_and_future_runs#invisible-runs'
+						rightDocumentationLink:
+							'https://www.windmill.dev/docs/core_concepts/monitor_past_and_future_runs#invisible-runs'
 					}}
 					class="py-1"
 				/>
@@ -365,27 +369,29 @@
 				<!-- Concurrency Section -->
 				{#if customUi?.settingsTabs?.concurrency != false}
 					<div>
-						<Toggle
-							textClass="font-normal text-sm"
-							color="nord"
-							size="xs"
-							disabled={!$enterpriseLicense}
-							checked={Boolean($flowStore.value.concurrent_limit)}
-							on:change={() => {
-								if ($flowStore.value.concurrent_limit) {
-									$flowStore.value.concurrent_limit = undefined
-								} else {
-									$flowStore.value.concurrent_limit = 1
-								}
-							}}
-							options={{
-								right: 'Concurrency limits',
-								rightTooltip: 'Allowed concurrency within a given timeframe',
-								rightDocumentationLink: 'https://www.windmill.dev/docs/flows/concurrency_limit'
-							}}
-							class="py-1"
-							eeOnly={true}
-						/>
+						<div class="flex flex-row items-center gap-2">
+							<Toggle
+								textClass="font-normal text-sm"
+								color="nord"
+								size="xs"
+								disabled={!$enterpriseLicense}
+								checked={Boolean($flowStore.value.concurrent_limit)}
+								on:change={() => {
+									if ($flowStore.value.concurrent_limit) {
+										$flowStore.value.concurrent_limit = undefined
+									} else {
+										$flowStore.value.concurrent_limit = 1
+									}
+								}}
+								options={{
+									right: 'Concurrency limits',
+									rightTooltip: 'Allowed concurrency within a given timeframe',
+									rightDocumentationLink: 'https://www.windmill.dev/docs/flows/concurrency_limit'
+								}}
+								class="py-1"
+								eeOnly={true}
+							/>
+						</div>
 
 						{#if $flowStore.value.concurrent_limit}
 							<div class="flex flex-col gap-4">
@@ -483,28 +489,30 @@
 				</Toggle>
 
 				<div>
-					<Toggle
-						textClass="font-normal text-sm"
-						color="nord"
-						size="xs"
-						disabled={!$enterpriseLicense || isCloudHosted()}
-						checked={Boolean($flowStore.dedicated_worker)}
-						on:change={() => {
-							if ($flowStore.dedicated_worker) {
-								$flowStore.dedicated_worker = undefined
-							} else {
-								$flowStore.dedicated_worker = true
-							}
-						}}
-						options={{
-							right: 'Flow is run on dedicated workers',
-							rightTooltip:
-								'When enabled, the flow will be executed on a dedicated worker.',
-							rightDocumentationLink: 'https://www.windmill.dev/docs/core_concepts/jobs#high-priority-jobs'
-						}}
-						class="py-1"
-						eeOnly={true}
-					/>
+					<div class="flex flex-row items-center gap-2">
+						<Toggle
+							textClass="font-normal text-sm"
+							color="nord"
+							size="xs"
+							disabled={!$enterpriseLicense || isCloudHosted()}
+							checked={Boolean($flowStore.dedicated_worker)}
+							on:change={() => {
+								if ($flowStore.dedicated_worker) {
+									$flowStore.dedicated_worker = undefined
+								} else {
+									$flowStore.dedicated_worker = true
+								}
+							}}
+							options={{
+								right: 'Flow is run on dedicated workers',
+								rightTooltip: 'When enabled, the flow will be executed on a dedicated worker.',
+								rightDocumentationLink:
+									'https://www.windmill.dev/docs/core_concepts/jobs#high-priority-jobs'
+							}}
+							class="py-1"
+							eeOnly={true}
+						/>
+					</div>
 
 					{#if $flowStore.dedicated_worker}
 						<div>

frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte

@@ -330,6 +330,8 @@
 
 	<div class="z-10 flex-auto grow bg-surface-secondary" bind:clientHeight={minHeight}>
 		<FlowGraphV2
+			earlyStop={$flowStore.value?.skip_expr !== undefined}
+			cache={$flowStore.value?.cache_ttl !== undefined}
 			triggerNode={true}
 			path={$pathStore}
 			{newFlow}

frontend/src/lib/components/flows/map/VirtualItem.svelte

@@ -6,6 +6,9 @@
 	import VirtualItemWrapper from './VirtualItemWrapper.svelte'
 	import type { PropPickerContext } from '$lib/components/prop_picker'
 	import FlowPropPicker from '$lib/components/flows/propPicker/FlowPropPicker.svelte'
+	import Popover from '$lib/components/Popover.svelte'
+	import { fade } from 'svelte/transition'
+	import { Database, Square } from 'lucide-svelte'
 
 	export let label: string | undefined = undefined
 	export let bgColor: string = ''
@@ -19,6 +22,8 @@
 	export let inputJson: Object | undefined = undefined
 	export let prefix = ''
 	export let alwaysPluggable: boolean = false
+	export let cache: boolean = false
+	export let earlyStop: boolean = false
 
 	const { currentStepStore: copilotCurrentStepStore } =
 		getContext<FlowCopilotContext | undefined>('FlowCopilotContext') || {}
@@ -62,7 +67,30 @@
 			</div>
 		{/if}
 	</div>
-
+	<div class="absolute text-sm right-12 -bottom-3 flex flex-row gap-1 z-10">
+		{#if cache}
+			<Popover notClickable>
+				<div
+					transition:fade|local={{ duration: 200 }}
+					class="center-center rounded border bg-surface border-gray-400 text-secondary px-1 py-0.5"
+				>
+					<Database size={12} />
+				</div>
+				<svelte:fragment slot="text">Cached</svelte:fragment>
+			</Popover>
+		{/if}
+		{#if earlyStop}
+			<Popover notClickable>
+				<div
+					transition:fade|local={{ duration: 200 }}
+					class="center-center bg-surface rounded border border-gray-400 text-secondary px-1 py-0.5"
+				>
+					<Square size={12} />
+				</div>
+				<svelte:fragment slot="text">Early stop if condition met</svelte:fragment>
+			</Popover>
+		{/if}
+	</div>
 	{#if inputJson && $flowPropPickerConfig && (Object.keys(inputJson).length > 0 || alwaysPluggable)}
 		<div class="absolute -bottom-[14px] right-[21px] translate-x-[50%] center-center">
 			<FlowPropPicker json={inputJson} {prefix} />

frontend/src/lib/components/graph/FlowGraphV2.svelte

@@ -57,6 +57,8 @@
 	export let newFlow: boolean = false
 
 	export let insertable = false
+	export let earlyStop: boolean = false
+	export let cache: boolean = false
 	export let scroll = false
 	export let moving: string | undefined = undefined
 
@@ -238,7 +240,9 @@
 			flowModuleStates,
 			selectedId: $selectedId,
 			path,
-			newFlow
+			newFlow,
+			cache,
+			earlyStop
 		},
 		failureModule,
 		preprocessorModule,

frontend/src/lib/components/graph/renderers/nodes/InputNode.svelte

@@ -18,6 +18,8 @@
 		index: number
 		disableAi: boolean
 		disableMoveIds: string[]
+		cache: boolean
+		earlyStop: boolean
 	}
 
 	const { selectedId } = getContext<{
@@ -83,5 +85,7 @@
 		inputJson={filteredInput}
 		prefix="flow_input"
 		alwaysPluggable
+		cache={data.cache}
+		earlyStop={data.earlyStop}
 	/>
 </NodeWrapper>

frontend/src/routes/approve/[workspace]/[job]/[resume]/[hmac]/+page.svelte

@@ -286,6 +286,8 @@
 				<FlowGraphV2
 					workspace={job.workspace_id}
 					triggerNode={false}
+					earlyStop={job.raw_flow?.skip_expr !== undefined}
+					cache={job.raw_flow?.cache_ttl !== undefined}
 					modules={job.raw_flow?.modules}
 					failureModule={job.raw_flow?.failure_module}
 					preprocessorModule={job.raw_flow?.preprocessor_module}