From a6e8b28bc32bf011d51462536e2387ea60c3d840 Mon Sep 17 00:00:00 2001
From: "claude[bot]" <41898282+claude[bot]@users.noreply.github.com>
Date: Mon, 13 Oct 2025 14:28:26 +0000
Subject: [PATCH] feat(flow): add advanced setting indicators on step settings
 tabs

- Create utility module to detect active advanced settings
- Add badge indicators to Runtime tab and its sub-tabs (Concurrency, Timeout, Priority, Lifetime)
- Update all advanced settings tabs to use centralized detection logic
- Reduce code duplication by using getActiveAdvancedSettings utility

Closes #6804

Co-authored-by: centdix <centdix@users.noreply.github.com>
---
 .../flows/content/FlowModuleComponent.svelte  | 33 ++++++++-------
 .../content/flowModuleSettingsUtils.svelte.ts | 40 +++++++++++++++++++
 2 files changed, 56 insertions(+), 17 deletions(-)
 create mode 100644 frontend/src/lib/components/flows/content/flowModuleSettingsUtils.svelte.ts

diff --git a/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte b/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
index 3be61accba..b9936eafc0 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleComponent.svelte
@@ -57,6 +57,7 @@
 	import { useUiIntent } from '$lib/components/copilot/chat/flow/useUiIntent'
 	import { editor as meditor } from 'monaco-editor'
 	import { DynamicInput } from '$lib/utils'
+	import { getActiveAdvancedSettings } from './flowModuleSettingsUtils.svelte'
 
 	const {
 		selectedId,
@@ -138,6 +139,9 @@
 
 	let assets = $derived((flowModule.value.type === 'rawscript' && flowModule.value.assets) || [])
 
+	// Advanced settings detection for indicators
+	let activeSettings = $derived(getActiveAdvancedSettings(flowModule))
+
 	// UI Intent handling for AI tool control
 	useUiIntent(`flow-${flowModule.id}`, {
 		openTab: (tab) => {
@@ -613,22 +617,17 @@
 											/>
 										{:else if selected === 'advanced'}
 											<Tabs bind:selected={advancedSelected}>
-												<Tab value="retries" active={flowModule.retry !== undefined}>Retries</Tab>
+												<Tab value="retries" active={activeSettings.retry}>Retries</Tab>
 												{#if !$selectedId.includes('failure')}
-													<Tab value="runtime">Runtime</Tab>
-													<Tab value="cache" active={Boolean(flowModule.cache_ttl)}>Cache</Tab>
-													<Tab
-														value="early-stop"
-														active={Boolean(
-															flowModule.stop_after_if || flowModule.stop_after_all_iters_if
-														)}
-													>
+													<Tab value="runtime" active={activeSettings.runtime}>Runtime</Tab>
+													<Tab value="cache" active={activeSettings.cache}>Cache</Tab>
+													<Tab value="early-stop" active={activeSettings.earlyStop}>
 														Early Stop
 													</Tab>
-													<Tab value="skip" active={Boolean(flowModule.skip_if)}>Skip</Tab>
-													<Tab value="suspend" active={Boolean(flowModule.suspend)}>Suspend</Tab>
-													<Tab value="sleep" active={Boolean(flowModule.sleep)}>Sleep</Tab>
-													<Tab value="mock" active={Boolean(flowModule.mock?.enabled)}>Mock</Tab>
+													<Tab value="skip" active={activeSettings.skip}>Skip</Tab>
+													<Tab value="suspend" active={activeSettings.suspend}>Suspend</Tab>
+													<Tab value="sleep" active={activeSettings.sleep}>Sleep</Tab>
+													<Tab value="mock" active={activeSettings.mock}>Mock</Tab>
 													<Tab value="same_worker">Shared Directory</Tab>
 													{#if flowModule.value['language'] === 'python3' || flowModule.value['language'] === 'deno'}
 														<Tab value="s3">S3</Tab>
@@ -637,10 +636,10 @@
 											</Tabs>
 											{#if advancedSelected === 'runtime'}
 												<Tabs bind:selected={advancedRuntimeSelected}>
-													<Tab value="concurrency">Concurrency</Tab>
-													<Tab value="timeout">Timeout</Tab>
-													<Tab value="priority">Priority</Tab>
-													<Tab value="lifetime">Lifetime</Tab>
+													<Tab value="concurrency" active={activeSettings.concurrency}>Concurrency</Tab>
+													<Tab value="timeout" active={activeSettings.timeout}>Timeout</Tab>
+													<Tab value="priority" active={activeSettings.priority}>Priority</Tab>
+													<Tab value="lifetime" active={activeSettings.deleteAfterUse}>Lifetime</Tab>
 												</Tabs>
 											{/if}
 											<div class="h-[calc(100%-32px)] overflow-auto p-4">
diff --git a/frontend/src/lib/components/flows/content/flowModuleSettingsUtils.svelte.ts b/frontend/src/lib/components/flows/content/flowModuleSettingsUtils.svelte.ts
new file mode 100644
index 0000000000..e7e7540750
--- /dev/null
+++ b/frontend/src/lib/components/flows/content/flowModuleSettingsUtils.svelte.ts
@@ -0,0 +1,40 @@
+import type { FlowModule } from '$lib/gen'
+
+/**
+ * Detects which advanced settings are active on a flow module
+ * Used to show badge indicators on settings tabs
+ */
+export function getActiveAdvancedSettings(flowModule: FlowModule) {
+	const hasConcurrencySetting =
+		flowModule.value.type === 'rawscript' &&
+		(flowModule.value.concurrent_limit !== undefined ||
+			flowModule.value.concurrency_time_window_s !== undefined ||
+			flowModule.value.custom_concurrency_key !== undefined)
+
+	const hasTimeoutSetting = Boolean(flowModule.timeout)
+	const hasPrioritySetting = flowModule.priority !== undefined && flowModule.priority > 0
+	const hasDeleteAfterUseSetting = Boolean(flowModule.delete_after_use)
+
+	return {
+		retry: flowModule.retry !== undefined,
+		cache: Boolean(flowModule.cache_ttl),
+		earlyStop: Boolean(flowModule.stop_after_if || flowModule.stop_after_all_iters_if),
+		skip: Boolean(flowModule.skip_if),
+		suspend: Boolean(flowModule.suspend),
+		sleep: Boolean(flowModule.sleep),
+		mock: Boolean(flowModule.mock?.enabled),
+		timeout: hasTimeoutSetting,
+		priority: hasPrioritySetting,
+		deleteAfterUse: hasDeleteAfterUseSetting,
+		concurrency: hasConcurrencySetting,
+		runtime: hasTimeoutSetting || hasPrioritySetting || hasDeleteAfterUseSetting || hasConcurrencySetting
+	}
+}
+
+/**
+ * Detects if any advanced setting is active on a flow module
+ */
+export function hasAnyAdvancedSetting(flowModule: FlowModule): boolean {
+	const settings = getActiveAdvancedSettings(flowModule)
+	return Object.values(settings).some((value) => value === true)
+}