windmill-components 1.677.1 → 1.695.0

package/package/components/flows/content/FlowModuleComponent.svelte

@@ -87,6 +87,10 @@ let websocketAlive = $state({
     shellcheck: false
 });
 let selected = $state(untrack(() => preprocessorModule) ? 'test' : 'inputs');
+let canShowChatTab = $derived(!preprocessorModule &&
+    Boolean(flowStore.val.value?.chat_input_enabled) &&
+    flowModule.value.type === 'aiagent');
+let visibleSelected = $derived(selected === 'chat' && !canShowChatTab ? 'inputs' : selected);
 let advancedSelected = $state('retries');
 let advancedRuntimeSelected = $state('concurrency');
 let s3Kind = $state('s3_client');
@@ -162,6 +166,17 @@ function selectAdvanced(subtab) {
     selected = 'advanced';
     advancedSelected = subtab;
 }
+function setOmitOutputFromConversation(omit) {
+    if (flowModule.value.type !== 'aiagent') {
+        return;
+    }
+    if (omit) {
+        flowModule.value.omit_output_from_conversation = true;
+    }
+    else {
+        delete flowModule.value.omit_output_from_conversation;
+    }
+}
 let forceReload = $state(0);
 let editorPanelSize = $state(untrack(() => noEditor) ? 0 : flowModule.value.type == 'script' ? 30 : 50);
 let editorSettingsPanelSize = $state(100 - untrack(() => editorPanelSize));
@@ -634,7 +649,7 @@ onDestroyHook(() => {
 						const [module, state] = await createScriptFromInlineScript(
 							flowModule,
 							selectedId,
-							flowStateStore.val[flowModule.id].schema,
+							flowStateStore.val[flowModule.id]?.schema,
 							$pathStore
 						)
 						if (flowModule.value.type == 'rawscript') {
@@ -673,109 +688,44 @@ onDestroyHook(() => {
 				{/if}
 
 				<div class="min-h-0 flex-grow" id="flow-editor-editor">
-					<Splitpanes horizontal>
-						{#if flowModule.value.type !== 'aiagent'}
-							<Pane bind:size={editorPanelSize} minSize={10} class="relative">
-								{#if flowModule.value.type === 'rawscript'}
-									{#if !noEditor}
-										{#key flowModule.id}
-											<div class="absolute top-2 right-4 z-10 flex flex-row gap-2">
-												{#if assets?.length}
-													<AssetsDropdownButton {assets} />
-												{/if}
-												{#if isDebuggableScript && customUi?.editorBar?.debug != false}
-													<Button
-														variant={debugMode ? 'accent' : 'default'}
-														size="xs"
-														onclick={toggleDebugMode}
-														startIcon={{ icon: Bug }}
-														btnClasses={debugMode
-															? ''
-															: 'bg-surface hover:bg-surface-hover border border-tertiary/30'}
-														title="Toggle Debug Mode"
-													>
-														{debugMode ? 'Exit Debug' : 'Debug'}
-													</Button>
-												{/if}
-												{#if showDebugPanel && !showDebugConsole}
-													<Button
-														variant="default"
-														size="xs"
-														onclick={() => (showDebugConsole = true)}
-														startIcon={{ icon: Terminal }}
-														btnClasses="bg-surface hover:bg-surface-hover border border-tertiary/30"
-														title="Show Debug Console"
-													>
-														Console
-													</Button>
-												{/if}
-											</div>
-											{#if debugConsoleVisible}
-												<Splitpanes horizontal class="h-full">
-													<Pane bind:size={editorPaneSize} minSize={20}>
-														<div id="flow-editor-code-section" class="h-full relative">
-															<Editor
-																loadAsync
-																folding
-																path={$pathStore + '/' + flowModule.id}
-																bind:websocketAlive
-																bind:this={editor}
-																class="h-full relative"
-																code={flowModule.value.content}
-																scriptLang={flowModule?.value?.language}
-																automaticLayout={true}
-																cmdEnterAction={async () => {
-																	selected = 'test'
-																	if (selectedId == flowModule.id) {
-																		if (flowModule.value.type === 'rawscript' && editor) {
-																			flowModule.value.content = editor.getCode()
-																		}
-																		await reload(flowModule)
-																		modulePreview?.runTestWithStepArgs()
-																	}
-																}}
-																on:change={async (event) => {
-																	const content = event.detail
-																	if (flowModule.value.type === 'rawscript') {
-																		if (flowModule.value.content !== content) {
-																			flowModule.value.content = content
-																		}
-																		await reload(flowModule)
-																		if (debugMode && breakpointDecorations.length > 0) {
-																			refreshBreakpointPositions()
-																		}
-																	}
-																}}
-																formatAction={() => {
-																	reload(flowModule)
-																	saveDraft()
-																}}
-																fixedOverflowWidgets={true}
-																args={Object.entries(flowModule.value.input_transforms).reduce(
-																	(acc, [key, obj]) => {
-																		acc[key] = obj.type === 'static' ? obj.value : undefined
-																		return acc
-																	},
-																	{}
-																)}
-																key={`flow-inline-${$workspaceStore}-${$pathStore}-${flowModule.id}`}
-																moduleId={flowModule.id}
-																preparedAssetsSqlQueries={preparedSqlQueries.current}
-																customTag={flowModule.value.tag}
-															/>
-														</div>
-													</Pane>
-													<Pane bind:size={consolePaneSize} minSize={10}>
-														<DebugConsole
-															client={dapClient}
-															currentFrameId={currentDebugFrameId}
-															onClose={() => (showDebugConsole = false)}
-															workspace={$workspaceStore}
-															jobId={debugSessionJobId ?? undefined}
-														/>
-													</Pane>
-												</Splitpanes>
-											{:else}
+					{#snippet topPaneContent()}
+						{#if flowModule.value.type === 'rawscript'}
+							{#if !noEditor}
+								{#key flowModule.id}
+									<div class="absolute top-2 right-4 z-10 flex flex-row gap-2">
+										{#if assets?.length}
+											<AssetsDropdownButton {assets} />
+										{/if}
+										{#if isDebuggableScript && customUi?.editorBar?.debug != false}
+											<Button
+												variant={debugMode ? 'accent' : 'default'}
+												size="xs"
+												onclick={toggleDebugMode}
+												startIcon={{ icon: Bug }}
+												btnClasses={debugMode
+													? ''
+													: 'bg-surface hover:bg-surface-hover border border-tertiary/30'}
+												title="Toggle Debug Mode"
+											>
+												{debugMode ? 'Exit Debug' : 'Debug'}
+											</Button>
+										{/if}
+										{#if showDebugPanel && !showDebugConsole}
+											<Button
+												variant="default"
+												size="xs"
+												onclick={() => (showDebugConsole = true)}
+												startIcon={{ icon: Terminal }}
+												btnClasses="bg-surface hover:bg-surface-hover border border-tertiary/30"
+												title="Show Debug Console"
+											>
+												Console
+											</Button>
+										{/if}
+									</div>
+									{#if debugConsoleVisible}
+										<Splitpanes horizontal class="h-full">
+											<Pane bind:size={editorPaneSize} minSize={20}>
 												<div id="flow-editor-code-section" class="h-full relative">
 													<Editor
 														loadAsync
@@ -827,531 +777,618 @@ onDestroyHook(() => {
 														customTag={flowModule.value.tag}
 													/>
 												</div>
-											{/if}
-											<DiffEditor
-												open={false}
-												bind:this={diffEditor}
-												modifiedModel={editor?.getModel() as meditor.ITextModel}
-												automaticLayout
-												fixedOverflowWidgets
-												defaultLang={scriptLangToEditorLang(flowModule.value.language)}
-												className="h-full"
-												buttons={diffMode ? diffButtons : []}
-											/>
-										{/key}
-									{/if}
-								{:else if flowModule.value.type === 'script'}
-									{#if !noEditor && (customUi?.hubCode != false || !flowModule?.value?.path?.startsWith('hub/'))}
-										<div class="border-t">
-											{#key forceReload}
-												<FlowModuleScript
-													bind:tag={workspaceScriptTag}
-													bind:language={workspaceScriptLang}
-													showAllCode={false}
-													path={flowModule.value.path}
-													hash={flowModule.value.hash}
+											</Pane>
+											<Pane bind:size={consolePaneSize} minSize={10}>
+												<DebugConsole
+													client={dapClient}
+													currentFrameId={currentDebugFrameId}
+													onClose={() => (showDebugConsole = false)}
+													workspace={$workspaceStore}
+													jobId={debugSessionJobId ?? undefined}
 												/>
-											{/key}
+											</Pane>
+										</Splitpanes>
+									{:else}
+										<div id="flow-editor-code-section" class="h-full relative">
+											<Editor
+												loadAsync
+												folding
+												path={$pathStore + '/' + flowModule.id}
+												bind:websocketAlive
+												bind:this={editor}
+												class="h-full relative"
+												code={flowModule.value.content}
+												scriptLang={flowModule?.value?.language}
+												automaticLayout={true}
+												cmdEnterAction={async () => {
+													selected = 'test'
+													if (selectedId == flowModule.id) {
+														if (flowModule.value.type === 'rawscript' && editor) {
+															flowModule.value.content = editor.getCode()
+														}
+														await reload(flowModule)
+														modulePreview?.runTestWithStepArgs()
+													}
+												}}
+												on:change={async (event) => {
+													const content = event.detail
+													if (flowModule.value.type === 'rawscript') {
+														if (flowModule.value.content !== content) {
+															flowModule.value.content = content
+														}
+														await reload(flowModule)
+														if (debugMode && breakpointDecorations.length > 0) {
+															refreshBreakpointPositions()
+														}
+													}
+												}}
+												formatAction={() => {
+													reload(flowModule)
+													saveDraft()
+												}}
+												fixedOverflowWidgets={true}
+												args={Object.entries(flowModule.value.input_transforms).reduce(
+													(acc, [key, obj]) => {
+														acc[key] = obj.type === 'static' ? obj.value : undefined
+														return acc
+													},
+													{}
+												)}
+												key={`flow-inline-${$workspaceStore}-${$pathStore}-${flowModule.id}`}
+												moduleId={flowModule.id}
+												preparedAssetsSqlQueries={preparedSqlQueries.current}
+												customTag={flowModule.value.tag}
+											/>
 										</div>
 									{/if}
-								{:else if flowModule.value.type === 'flow'}
+									<DiffEditor
+										open={false}
+										bind:this={diffEditor}
+										modifiedModel={editor?.getModel() as meditor.ITextModel}
+										automaticLayout
+										fixedOverflowWidgets
+										defaultLang={scriptLangToEditorLang(flowModule.value.language)}
+										className="h-full"
+										buttons={diffMode ? diffButtons : []}
+									/>
+								{/key}
+							{/if}
+						{:else if flowModule.value.type === 'script'}
+							{#if !noEditor && (customUi?.hubCode != false || !flowModule?.value?.path?.startsWith('hub/'))}
+								<div class="border-t">
 									{#key forceReload}
-										<FlowPathViewer path={flowModule.value.path} />
+										<FlowModuleScript
+											bind:tag={workspaceScriptTag}
+											bind:language={workspaceScriptLang}
+											showAllCode={false}
+											path={flowModule.value.path}
+											hash={flowModule.value.hash}
+										/>
 									{/key}
-								{/if}
-							</Pane>
+								</div>
+							{/if}
+						{:else if flowModule.value.type === 'flow'}
+							{#key forceReload}
+								<FlowPathViewer path={flowModule.value.path} />
+							{/key}
 						{/if}
-						<Pane
-							bind:size={
-								() => {
-									if (flowModule.value.type === 'aiagent') {
-										return 100
-									}
-									return editorSettingsPanelSize
-								},
-								(v) => {
-									if (flowModule.value.type !== 'aiagent') {
-										editorSettingsPanelSize = v
-									}
-								}
-							}
-							minSize={20}
-						>
-							<Splitpanes>
-								<Pane minSize={36} bind:size={leftPanelSize}>
-									<div class="flex flex-col relative h-[99.99%]">
-										<Tabs bind:selected wrapperClass="shrink-0">
-											{#if !preprocessorModule}
-												<Tab value="inputs" label="Step Input" />
-											{/if}
-											<Tab value="test" label="Test this step" />
-											{#if !preprocessorModule && !isAgentTool}
-												<Tab value="advanced" label="Advanced" />
-											{/if}
-										</Tabs>
-										{#if selected === 'inputs' && (flowModule.value.type == 'rawscript' || flowModule.value.type == 'script' || flowModule.value.type == 'flow' || flowModule.value.type == 'aiagent')}
-											<div class="flex-1 overflow-auto" id="flow-editor-step-input">
-												<PropPickerWrapper
+					{/snippet}
+
+					{#snippet bottomPaneContent()}
+						<Splitpanes>
+							<Pane minSize={36} bind:size={leftPanelSize}>
+								<div class="flex flex-col relative h-[99.99%]">
+									<Tabs
+										selected={visibleSelected}
+										on:selected={(event) => {
+											selected = event.detail
+										}}
+										wrapperClass="shrink-0"
+									>
+										{#if !preprocessorModule}
+											<Tab value="inputs" label="Step Input" />
+										{/if}
+										<Tab value="test" label="Test this step" />
+										{#if canShowChatTab && flowModule.value.type === 'aiagent'}
+											<Tab
+												value="chat"
+												active={Boolean(flowModule.value.omit_output_from_conversation)}
+												label="Chat"
+											/>
+										{/if}
+										{#if !preprocessorModule && !isAgentTool}
+											<Tab value="advanced" label="Advanced" />
+										{/if}
+									</Tabs>
+									{#if visibleSelected === 'inputs' && (flowModule.value.type == 'rawscript' || flowModule.value.type == 'script' || flowModule.value.type == 'flow' || flowModule.value.type == 'aiagent')}
+										<div class="flex-1 overflow-auto" id="flow-editor-step-input">
+											<PropPickerWrapper
+												pickableProperties={stepPropPicker.pickableProperties}
+												error={failureModule}
+												noPadding
+											>
+												{#if reloadError}
+													<div
+														title={reloadError}
+														class="absolute left-2 top-2 rounded-full w-2 h-2 bg-red-300"
+													></div>
+												{/if}
+												<InputTransformSchemaForm
+													class="px-2 xl:px-4 pb-8"
+													bind:this={inputTransformSchemaForm}
 													pickableProperties={stepPropPicker.pickableProperties}
-													error={failureModule}
-													noPadding
-												>
-													{#if reloadError}
-														<div
-															title={reloadError}
-															class="absolute left-2 top-2 rounded-full w-2 h-2 bg-red-300"
-														></div>
-													{/if}
-													<InputTransformSchemaForm
-														class="px-2 xl:px-4 pb-8"
-														bind:this={inputTransformSchemaForm}
-														pickableProperties={stepPropPicker.pickableProperties}
-														schema={flowStateStore.val[selectedId]?.schema ?? {}}
-														previousModuleId={previousModule?.id}
-														bind:args={
-															() => {
+													schema={flowStateStore.val[selectedId]?.schema ?? {}}
+													previousModuleId={previousModule?.id}
+													bind:args={
+														() => {
+															// @ts-ignore
+															return flowModule?.value?.input_transforms
+														},
+														(v) => {
+															if (
+																typeof flowModule?.value === 'object' &&
+																flowModule?.value !== null
+															) {
 																// @ts-ignore
-																return flowModule?.value?.input_transforms
-															},
-															(v) => {
-																if (
-																	typeof flowModule?.value === 'object' &&
-																	flowModule?.value !== null
-																) {
-																	// @ts-ignore
-																	flowModule.value.input_transforms = v
-																}
+																flowModule.value.input_transforms = v
 															}
 														}
-														extraLib={stepPropPicker.extraLib}
-														{enableAi}
-														{isAgentTool}
-														allowedAiTransforms={isAgentTool && flowModule.value.type === 'aiagent'
-															? ['user_message']
-															: undefined}
-														helperScript={retrieveDynCodeAndLang(flowModule.value)}
-														chatInputEnabled={flowStore.val.value?.chat_input_enabled ?? false}
-													/>
-												</PropPickerWrapper>
+													}
+													extraLib={stepPropPicker.extraLib}
+													{enableAi}
+													{isAgentTool}
+													allowedAiTransforms={isAgentTool && flowModule.value.type === 'aiagent'
+														? ['user_message']
+														: undefined}
+													helperScript={retrieveDynCodeAndLang(flowModule.value)}
+													chatInputEnabled={flowStore.val.value?.chat_input_enabled ?? false}
+												/>
+											</PropPickerWrapper>
+										</div>
+									{:else if visibleSelected === 'test'}
+										{#if debugMode && isDebuggableScript}
+											<div transition:slide={{ duration: 200 }}>
+												<DebugToolbar
+													connected={$debugState.connected}
+													running={$debugState.running}
+													stopped={$debugState.stopped}
+													breakpointCount={debugBreakpoints.size}
+													onStart={startDebugging}
+													onStop={stopDebugging}
+													onContinue={continueExecution}
+													onStepOver={stepOver}
+													onStepIn={stepIn}
+													onStepOut={stepOut}
+													onClearBreakpoints={clearAllBreakpoints}
+													onExitDebug={toggleDebugMode}
+												/>
 											</div>
-										{:else if selected === 'test'}
-											{#if debugMode && isDebuggableScript}
-												<div transition:slide={{ duration: 200 }}>
-													<DebugToolbar
-														connected={$debugState.connected}
-														running={$debugState.running}
-														stopped={$debugState.stopped}
-														breakpointCount={debugBreakpoints.size}
-														onStart={startDebugging}
-														onStop={stopDebugging}
-														onContinue={continueExecution}
-														onStepOver={stepOver}
-														onStepIn={stepIn}
-														onStepOut={stepOut}
-														onClearBreakpoints={clearAllBreakpoints}
-														onExitDebug={toggleDebugMode}
-													/>
-												</div>
-											{/if}
-											<ModulePreview
-												class="flex-1"
-												pickableProperties={stepPropPicker.pickableProperties}
-												bind:this={modulePreview}
-												mod={flowModule}
-												{noEditor}
-												schema={flowStateStore.val[selectedId]?.schema ?? {}}
-												bind:testJob
-												bind:testIsLoading
-												bind:scriptProgress
-												focusArg={highlightArg}
-												{onJobDone}
-												hideRunButton={debugMode && isDebuggableScript}
+										{/if}
+										<ModulePreview
+											class="flex-1"
+											pickableProperties={stepPropPicker.pickableProperties}
+											bind:this={modulePreview}
+											mod={flowModule}
+											{noEditor}
+											schema={flowStateStore.val[selectedId]?.schema ?? {}}
+											bind:testJob
+											bind:testIsLoading
+											bind:scriptProgress
+											focusArg={highlightArg}
+											{onJobDone}
+											hideRunButton={debugMode && isDebuggableScript}
+										/>
+									{:else if visibleSelected === 'chat' && canShowChatTab && flowModule.value.type === 'aiagent'}
+										<div class="flex-1 overflow-auto p-4">
+											<Section label="Conversation output">
+												<Toggle
+													size="xs"
+													checked={Boolean(flowModule.value.omit_output_from_conversation)}
+													on:change={(event) => {
+														setOmitOutputFromConversation(event.detail)
+													}}
+													options={{
+														right: 'Omit assistant and tool messages from the flow conversation',
+														rightTooltip:
+															'When enabled, this AI agent still runs normally, but its assistant response and tool-use messages are not stored in chat-mode conversation history.'
+													}}
+												/>
+											</Section>
+										</div>
+									{:else if visibleSelected === 'advanced'}
+										<Tabs bind:selected={advancedSelected} wrapperClass="shrink-0">
+											<Tab
+												value="retries"
+												active={flowModule.retry !== undefined || flowModule.continue_on_error}
+												label="Error handling"
 											/>
-										{:else if selected === 'advanced'}
-											<Tabs bind:selected={advancedSelected} wrapperClass="shrink-0">
+											{#if !selectedId.includes('failure')}
+												<Tab value="runtime" label="Runtime" />
+												<Tab value="cache" active={Boolean(flowModule.cache_ttl)} label="Cache" />
 												<Tab
-													value="retries"
-													active={flowModule.retry !== undefined || flowModule.continue_on_error}
-													label="Error handling"
+													value="early-stop"
+													active={Boolean(
+														flowModule.stop_after_if || flowModule.stop_after_all_iters_if
+													)}
+													label="Early Stop"
 												/>
-												{#if !selectedId.includes('failure')}
-													<Tab value="runtime" label="Runtime" />
-													<Tab value="cache" active={Boolean(flowModule.cache_ttl)} label="Cache" />
-													<Tab
-														value="early-stop"
-														active={Boolean(
-															flowModule.stop_after_if || flowModule.stop_after_all_iters_if
-														)}
-														label="Early Stop"
-													/>
-													<Tab value="skip" active={Boolean(flowModule.skip_if)} label="Skip" />
-													<Tab
-														value="suspend"
-														active={Boolean(flowModule.suspend)}
-														label="Suspend"
-													/>
-													<Tab value="sleep" active={Boolean(flowModule.sleep)} label="Sleep" />
-													<Tab
-														value="debounce"
-														active={Boolean(flowModule.debouncing?.debounce_delay_s)}
-														label="Debounce"
-													/>
-													<Tab
-														value="mock"
-														active={Boolean(flowModule.mock?.enabled)}
-														label="Mock"
-													/>
-													<Tab value="same_worker" label="Shared Directory" />
-													{#if flowModule.value['language'] === 'python3' || flowModule.value['language'] === 'deno'}
-														<Tab value="s3" label="S3" />
-													{/if}
+												<Tab value="skip" active={Boolean(flowModule.skip_if)} label="Skip" />
+												<Tab value="suspend" active={Boolean(flowModule.suspend)} label="Suspend" />
+												<Tab value="sleep" active={Boolean(flowModule.sleep)} label="Sleep" />
+												<Tab
+													value="debounce"
+													active={Boolean(flowModule.debouncing?.debounce_delay_s)}
+													label="Debounce"
+												/>
+												<Tab value="mock" active={Boolean(flowModule.mock?.enabled)} label="Mock" />
+												<Tab value="same_worker" label="Shared Directory" />
+												{#if flowModule.value['language'] === 'python3' || flowModule.value['language'] === 'deno'}
+													<Tab value="s3" label="S3" />
 												{/if}
-											</Tabs>
-											{#if advancedSelected === 'runtime'}
-												<Tabs bind:selected={advancedRuntimeSelected} wrapperClass="shrink-0">
-													<Tab value="concurrency" label="Concurrency" />
-													<Tab value="timeout" label="Timeout" />
-													<Tab value="priority" label="Priority" />
-													<Tab value="lifetime" label="Lifetime" />
-												</Tabs>
 											{/if}
-											<div class="flex-1 overflow-auto p-4">
-												{#if advancedSelected === 'retries'}
-													<Section label="Continue on error">
-														{#snippet header()}
-															<Tooltip>
-																When enabled, the flow will continue to the next step even if this step fails (after exhausting all retries, if any). This enables to process the error in a branch one for instance.
-															</Tooltip>
-														{/snippet}
-														<Toggle
-															size="xs"
-															bind:checked={flowModule.continue_on_error}
-															options={{
-																left: 'Stop on error and propagate error up',
-																right: "Continue on error with error as step's return"
-															}}
-														/>
-													</Section>
-													<div class="mt-4"></div>
-													<Section label="Retries">
-														{#snippet header()}
-															<Tooltip
-																documentationLink="https://www.windmill.dev/docs/flows/retries"
-															>
-																If defined, upon error this step will be retried with a delay and a
-																maximum number of attempts as defined below.
-															</Tooltip>
-														{/snippet}
-														<FlowRetries bind:flowModuleRetry={flowModule.retry} bind:flowModule />
-													</Section>
-												{:else if advancedSelected === 'runtime' && advancedRuntimeSelected === 'concurrency'}
-													<Section label="Concurrency limits" class="flex flex-col gap-4" eeOnly>
-														{#snippet header()}
-															<Tooltip>Allowed concurrency within a given timeframe</Tooltip>
-														{/snippet}
-														{#if flowModule.value.type == 'rawscript'}
-															<Label label="Max number of executions within the time window">
-																<div class="flex flex-row gap-2 max-w-sm whitespace-nowrap">
-																	<input
-																		disabled={!$enterpriseLicense}
-																		bind:value={flowModule.value.concurrent_limit}
-																		type="number"
-																	/>
-																	<Button
-																		size="xs"
-																		variant="default"
-																		on:click={() => {
-																			if (flowModule.value.type == 'rawscript') {
-																				flowModule.value.concurrent_limit = undefined
-																			}
-																		}}
-																	>
-																		<div class="flex flex-row gap-2"> Remove Limits </div>
-																	</Button>
-																</div>
-															</Label>
-															<Label label="Time window in seconds">
-																<SecondsInput
-																	disabled={!$enterpriseLicense}
-																	bind:seconds={flowModule.value.concurrency_time_window_s}
-																	clearable
-																/>
-															</Label>
-															<Label label="Custom concurrency key (optional)">
-																{#snippet header()}
-																	<Tooltip>
-																		Concurrency keys are global, you can have them be workspace
-																		specific using the variable `$workspace`. You can also use an
-																		argument's value using `$args[name_of_arg]`</Tooltip
-																	>
-																{/snippet}
-																<!-- svelte-ignore a11y_autofocus -->
+										</Tabs>
+										{#if advancedSelected === 'runtime'}
+											<Tabs bind:selected={advancedRuntimeSelected} wrapperClass="shrink-0">
+												<Tab value="concurrency" label="Concurrency" />
+												<Tab value="timeout" label="Timeout" />
+												<Tab value="priority" label="Priority" />
+												<Tab value="lifetime" label="Lifetime" />
+											</Tabs>
+										{/if}
+										<div class="flex-1 overflow-auto p-4">
+											{#if advancedSelected === 'retries'}
+												<Section label="Continue on error">
+													{#snippet header()}
+														<Tooltip>
+															When enabled, the flow will continue to the next step even if this
+															step fails (after exhausting all retries, if any). This enables to
+															process the error in a branch one for instance.
+														</Tooltip>
+													{/snippet}
+													<Toggle
+														size="xs"
+														bind:checked={flowModule.continue_on_error}
+														options={{
+															left: 'Stop on error and propagate error up',
+															right: "Continue on error with error as step's return"
+														}}
+													/>
+												</Section>
+												<div class="mt-4"></div>
+												<Section label="Retries">
+													{#snippet header()}
+														<Tooltip
+															documentationLink="https://www.windmill.dev/docs/flows/retries"
+														>
+															If defined, upon error this step will be retried with a delay and a
+															maximum number of attempts as defined below.
+														</Tooltip>
+													{/snippet}
+													<FlowRetries bind:flowModuleRetry={flowModule.retry} bind:flowModule />
+												</Section>
+											{:else if advancedSelected === 'runtime' && advancedRuntimeSelected === 'concurrency'}
+												<Section label="Concurrency limits" class="flex flex-col gap-4" eeOnly>
+													{#snippet header()}
+														<Tooltip>Allowed concurrency within a given timeframe</Tooltip>
+													{/snippet}
+													{#if flowModule.value.type == 'rawscript'}
+														<Label label="Max number of executions within the time window">
+															<div class="flex flex-row gap-2 max-w-sm whitespace-nowrap">
 																<input
-																	type="text"
-																	autofocus
 																	disabled={!$enterpriseLicense}
-																	bind:value={flowModule.value.custom_concurrency_key}
-																	placeholder={`$workspace/script/${$pathStore}-$args[foo]`}
+																	bind:value={flowModule.value.concurrent_limit}
+																	type="number"
 																/>
-															</Label>
-														{:else}
-															<Alert type="warning" title="Limitation" size="xs">
-																The concurrency limit of a workspace script is only settable in the
-																script metadata itself. For hub scripts, this feature is non
-																available yet.
-															</Alert>
-														{/if}
-													</Section>
-												{:else if advancedSelected === 'runtime' && advancedRuntimeSelected === 'timeout'}
-													<div>
-														<FlowModuleTimeout
-															previousModuleId={previousModule?.id}
-															bind:flowModule
-														/>
-													</div>
-												{:else if advancedSelected === 'runtime' && advancedRuntimeSelected === 'priority'}
-													<Section label="Priority" class="flex flex-col gap-4">
-														<!-- TODO: Add EE-only badge when we have it -->
-														<Toggle
-															disabled={!$enterpriseLicense || isCloudHosted()}
-															checked={flowModule.priority !== undefined && flowModule.priority > 0}
-															on:change={() => {
-																if (flowModule.priority) {
-																	flowModule.priority = undefined
-																} else {
-																	flowModule.priority = 100
-																}
-															}}
-															options={{
-																right: 'Enabled high priority flow step',
-																rightTooltip: `Jobs scheduled from this step when the flow is executed are labeled as high priority and take precedence over the other jobs in the jobs queue. ${
-																	!$enterpriseLicense
-																		? 'This is a feature only available on enterprise edition.'
-																		: ''
-																}`
-															}}
-														/>
-														<Label label="Priority number">
+																<Button
+																	size="xs"
+																	variant="default"
+																	on:click={() => {
+																		if (flowModule.value.type == 'rawscript') {
+																			flowModule.value.concurrent_limit = undefined
+																		}
+																	}}
+																>
+																	<div class="flex flex-row gap-2"> Remove Limits </div>
+																</Button>
+															</div>
+														</Label>
+														<Label label="Time window in seconds">
+															<SecondsInput
+																disabled={!$enterpriseLicense}
+																bind:seconds={flowModule.value.concurrency_time_window_s}
+																clearable
+															/>
+														</Label>
+														<Label label="Custom concurrency key (optional)">
 															{#snippet header()}
-																<Tooltip>The higher the number, the higher the priority.</Tooltip>
+																<Tooltip>
+																	Concurrency keys are global, you can have them be workspace
+																	specific using the variable `$workspace`. You can also use an
+																	argument's value using `$args[name_of_arg]`</Tooltip
+																>
 															{/snippet}
+															<!-- svelte-ignore a11y_autofocus -->
 															<input
-																type="number"
-																class="!w-24"
-																disabled={flowModule.priority === undefined}
-																bind:value={flowModule.priority}
-																onfocus={bubble('focus')}
-																onchange={() => {
-																	if (flowModule.priority && flowModule.priority > 100) {
-																		flowModule.priority = 100
-																	} else if (flowModule.priority && flowModule.priority < 0) {
-																		flowModule.priority = 0
-																	}
-																}}
+																type="text"
+																autofocus
+																disabled={!$enterpriseLicense}
+																bind:value={flowModule.value.custom_concurrency_key}
+																placeholder={`$workspace/script/${$pathStore}-$args[foo]`}
 															/>
 														</Label>
-
+													{:else}
 														<Alert type="warning" title="Limitation" size="xs">
-															Setting priority is only available for enterprise edition and not
-															available on the cloud.
-														</Alert>
-													</Section>
-												{:else if advancedSelected === 'runtime' && advancedRuntimeSelected === 'lifetime'}
-													<div>
-														<FlowModuleDeleteAfterUse
-															bind:flowModule
-															disabled={!$enterpriseLicense}
-														/>
-													</div>
-												{:else if advancedSelected === 'cache'}
-													<div>
-														<FlowModuleCache bind:flowModule />
-													</div>
-												{:else if advancedSelected === 'early-stop'}
-													<FlowModuleEarlyStop bind:flowModule />
-												{:else if advancedSelected === 'skip'}
-													<FlowModuleSkip bind:flowModule {parentModule} {previousModule} />
-												{:else if advancedSelected === 'suspend'}
-													<div>
-														<FlowModuleSuspend
-															previousModuleId={previousModule?.id}
-															bind:flowModule
-														/>
-													</div>
-												{:else if advancedSelected === 'sleep'}
-													<div>
-														<FlowModuleSleep
-															previousModuleId={previousModule?.id}
-															bind:flowModule
-														/>
-													</div>
-												{:else if advancedSelected === 'debounce'}
-													<div>
-														<FlowModuleDebounce bind:flowModule {selectedId} />
-													</div>
-												{:else if advancedSelected === 'mock'}
-													<div>
-														<FlowModuleMockTransitionMessage />
-													</div>
-												{:else if advancedSelected === 'same_worker'}
-													<div>
-														<Alert type="info" title="Share a directory between steps">
-															If shared directory is set, will share a folder that will be mounted
-															on `./shared` for each of them to pass data between each other.
+															The concurrency limit of a workspace script is only settable in the
+															script metadata itself. For hub scripts, this feature is non available
+															yet.
 														</Alert>
-														<Button
-															btnClasses="mt-4"
-															on:click={() => {
-																selectionManager.selectId('settings-same-worker')
+													{/if}
+												</Section>
+											{:else if advancedSelected === 'runtime' && advancedRuntimeSelected === 'timeout'}
+												<div>
+													<FlowModuleTimeout
+														previousModuleId={previousModule?.id}
+														bind:flowModule
+													/>
+												</div>
+											{:else if advancedSelected === 'runtime' && advancedRuntimeSelected === 'priority'}
+												<Section label="Priority" class="flex flex-col gap-4">
+													<!-- TODO: Add EE-only badge when we have it -->
+													<Toggle
+														disabled={!$enterpriseLicense || isCloudHosted()}
+														checked={flowModule.priority !== undefined && flowModule.priority > 0}
+														on:change={() => {
+															if (flowModule.priority) {
+																flowModule.priority = undefined
+															} else {
+																flowModule.priority = 100
+															}
+														}}
+														options={{
+															right: 'Enabled high priority flow step',
+															rightTooltip: `Jobs scheduled from this step when the flow is executed are labeled as high priority and take precedence over the other jobs in the jobs queue. ${
+																!$enterpriseLicense
+																	? 'This is a feature only available on enterprise edition.'
+																	: ''
+															}`
+														}}
+													/>
+													<Label label="Priority number">
+														{#snippet header()}
+															<Tooltip>The higher the number, the higher the priority.</Tooltip>
+														{/snippet}
+														<input
+															type="number"
+															class="!w-24"
+															disabled={flowModule.priority === undefined}
+															bind:value={flowModule.priority}
+															onfocus={bubble('focus')}
+															onchange={() => {
+																if (flowModule.priority && flowModule.priority > 100) {
+																	flowModule.priority = 100
+																} else if (flowModule.priority && flowModule.priority < 0) {
+																	flowModule.priority = 0
+																}
 															}}
-														>
-															Set shared directory in the flow settings
-														</Button>
-													</div>
-												{:else if advancedSelected === 's3'}
-													<div>
-														<h2 class="pb-4">
-															S3 snippets
-															<Tooltip>
-																Read/Write object from/to S3 and leverage Polars and DuckDB to run
-																efficient ETL processes.
-															</Tooltip>
-														</h2>
-													</div>
-													<div class="flex gap-2 justify-between mb-4 items-center">
-														<div class="flex gap-2">
-															<ToggleButtonGroup bind:selected={s3Kind} class="w-auto">
-																{#snippet children({ item })}
-																	{#if flowModule.value['language'] === 'deno'}
-																		<ToggleButton
-																			value="s3_client"
-																			small
-																			label="S3 lite client"
-																			{item}
-																		/>
-																	{:else}
-																		<ToggleButton value="s3_client" small label="Boto3" {item} />
-																		<ToggleButton value="polars" small label="Polars" {item} />
-																		<ToggleButton value="duckdb" small label="DuckDB" {item} />
-																	{/if}
-																{/snippet}
-															</ToggleButtonGroup>
-														</div>
+														/>
+													</Label>
 
-														<Button
-															size="xs"
-															on:click={() =>
-																editor?.setCode(s3Scripts[flowModule.value['language']][s3Kind])}
-														>
-															Apply snippet
-														</Button>
-													</div>
-													<HighlightCode
-														language={flowModule.value['language']}
-														code={s3Scripts[flowModule.value['language']][s3Kind]}
+													<Alert type="warning" title="Limitation" size="xs">
+														Setting priority is only available for enterprise edition and not
+														available on the cloud.
+													</Alert>
+												</Section>
+											{:else if advancedSelected === 'runtime' && advancedRuntimeSelected === 'lifetime'}
+												<div>
+													<FlowModuleDeleteAfterUse
+														bind:flowModule
+														disabled={!$enterpriseLicense}
 													/>
-												{/if}
-											</div>
-										{/if}
-									</div>
-								</Pane>
-								{#if selected === 'test'}
-									<Pane minSize={20} class="relative">
-										{#if stepHistoryLoader?.stepStates[flowModule.id]?.initial && !flowModule.mock?.enabled}
-											<!-- svelte-ignore a11y_no_static_element_interactions -->
-											<!-- svelte-ignore a11y_click_events_have_key_events -->
-											<div
-												onclick={() => {
-													stepHistoryLoader?.resetInitial(flowModule.id)
-												}}
-												class="cursor-pointer h-full hover:bg-gray-500/20 dark:hover:bg-gray-500/20 dark:bg-gray-500/80 bg-gray-500/40 absolute top-0 left-0 w-full z-50"
-											>
-												<div class="text-center text-primary text-sm py-2 pt-20"
-													><span class="font-bold border p-2 bg-surface-secondary rounded-md"
-														>Run loaded from history</span
-													></div
-												>
-											</div>
-										{/if}
-										{#if showDebugPanel || hasDebugResult}
-											<Splitpanes horizontal class="h-full">
-												<Pane size={50} minSize={15}>
-													<Splitpanes horizontal class="h-full">
-														<Pane size={50} minSize={10}>
-															<LogViewer
-																small
-																content={$debugState.logs}
-																isLoading={$debugState.running && !$debugState.stopped}
-																tag={undefined}
-															/>
-														</Pane>
-														<Pane size={50} minSize={10}>
-															{#if hasDebugResult}
-																<div class="h-full p-2 overflow-auto">
-																	<DisplayResult
-																		result={$debugState.result}
-																		language={rawScriptLang}
-																	/>
-																</div>
-															{:else}
-																<div
-																	class="h-full flex items-center justify-center text-sm text-tertiary"
-																>
-																	{#if $debugState.running && !$debugState.stopped}
-																		Running...
-																	{:else if $debugState.stopped}
-																		Paused at breakpoint
-																	{:else}
-																		Waiting for debug session
-																	{/if}
-																</div>
-															{/if}
-														</Pane>
-													</Splitpanes>
-												</Pane>
-												<Pane size={50} minSize={15}>
-													<DebugPanel
-														stackFrames={$debugState.stackFrames}
-														scopes={$debugState.scopes}
-														variables={$debugState.variables}
-														client={dapClient}
-														bind:selectedFrameId={selectedDebugFrameId}
+												</div>
+											{:else if advancedSelected === 'cache'}
+												<div>
+													<FlowModuleCache bind:flowModule />
+												</div>
+											{:else if advancedSelected === 'early-stop'}
+												<FlowModuleEarlyStop bind:flowModule />
+											{:else if advancedSelected === 'skip'}
+												<FlowModuleSkip bind:flowModule {parentModule} {previousModule} />
+											{:else if advancedSelected === 'suspend'}
+												<div>
+													<FlowModuleSuspend
+														previousModuleId={previousModule?.id}
+														bind:flowModule
 													/>
-												</Pane>
-											</Splitpanes>
-										{:else if debugMode && isDebuggableScript}
-											<div class="h-full flex items-center justify-center text-sm text-tertiary">
-												Click "Debug" in the toolbar to start debugging
-											</div>
-										{:else}
-											<ModulePreviewResultViewer
-												lang={flowModule.value['language'] ?? 'deno'}
-												{editor}
-												{diffEditor}
-												loopStatus={parentLoop
-													? { type: 'inside', flow: parentLoop.type }
-													: undefined}
-												onUpdateMock={(detail) => {
-													flowModule.mock = detail
-													flowModule = flowModule
-													refreshStateStore(flowStore)
-												}}
-												{testJob}
-												{scriptProgress}
-												mod={flowModule}
-												{testIsLoading}
-												disableMock={preprocessorModule || failureModule}
-												disableHistory={failureModule}
-												loadingJob={stepHistoryLoader?.stepStates[flowModule.id]?.loadingJobs}
-												tagLabel={customUi?.tagLabel}
-												bind:this={modulePreviewResultViewer}
-											/>
-										{/if}
-									</Pane>
-								{/if}
-							</Splitpanes>
-						</Pane>
-					</Splitpanes>
+												</div>
+											{:else if advancedSelected === 'sleep'}
+												<div>
+													<FlowModuleSleep previousModuleId={previousModule?.id} bind:flowModule />
+												</div>
+											{:else if advancedSelected === 'debounce'}
+												<div>
+													<FlowModuleDebounce bind:flowModule {selectedId} />
+												</div>
+											{:else if advancedSelected === 'mock'}
+												<div>
+													<FlowModuleMockTransitionMessage />
+												</div>
+											{:else if advancedSelected === 'same_worker'}
+												<div>
+													<Alert type="info" title="Share a directory between steps">
+														If shared directory is set, will share a folder that will be mounted on
+														`./shared` for each of them to pass data between each other.
+													</Alert>
+													<Button
+														btnClasses="mt-4"
+														on:click={() => {
+															selectionManager.selectId('settings-same-worker')
+														}}
+													>
+														Set shared directory in the flow settings
+													</Button>
+												</div>
+											{:else if advancedSelected === 's3'}
+												<div>
+													<h2 class="pb-4">
+														S3 snippets
+														<Tooltip>
+															Read/Write object from/to S3 and leverage Polars and DuckDB to run
+															efficient ETL processes.
+														</Tooltip>
+													</h2>
+												</div>
+												<div class="flex gap-2 justify-between mb-4 items-center">
+													<div class="flex gap-2">
+														<ToggleButtonGroup bind:selected={s3Kind} class="w-auto">
+															{#snippet children({ item })}
+																{#if flowModule.value['language'] === 'deno'}
+																	<ToggleButton
+																		value="s3_client"
+																		small
+																		label="S3 lite client"
+																		{item}
+																	/>
+																{:else}
+																	<ToggleButton value="s3_client" small label="Boto3" {item} />
+																	<ToggleButton value="polars" small label="Polars" {item} />
+																	<ToggleButton value="duckdb" small label="DuckDB" {item} />
+																{/if}
+															{/snippet}
+														</ToggleButtonGroup>
+													</div>
+
+													<Button
+														size="xs"
+														on:click={() =>
+															editor?.setCode(s3Scripts[flowModule.value['language']][s3Kind])}
+													>
+														Apply snippet
+													</Button>
+												</div>
+												<HighlightCode
+													language={flowModule.value['language']}
+													code={s3Scripts[flowModule.value['language']][s3Kind]}
+												/>
+											{/if}
+										</div>
+									{/if}
+								</div>
+							</Pane>
+							{#if selected === 'test'}
+								<Pane minSize={20} class="relative">
+									{#if stepHistoryLoader?.stepStates[flowModule.id]?.initial && !flowModule.mock?.enabled}
+										<!-- svelte-ignore a11y_no_static_element_interactions -->
+										<!-- svelte-ignore a11y_click_events_have_key_events -->
+										<div
+											onclick={() => {
+												stepHistoryLoader?.resetInitial(flowModule.id)
+											}}
+											class="cursor-pointer h-full hover:bg-gray-500/20 dark:hover:bg-gray-500/20 dark:bg-gray-500/80 bg-gray-500/40 absolute top-0 left-0 w-full z-50"
+										>
+											<div class="text-center text-primary text-sm py-2 pt-20"
+												><span class="font-bold border p-2 bg-surface-secondary rounded-md"
+													>Run loaded from history</span
+												></div
+											>
+										</div>
+									{/if}
+									{#if showDebugPanel || hasDebugResult}
+										<Splitpanes horizontal class="h-full">
+											<Pane size={50} minSize={15}>
+												<Splitpanes horizontal class="h-full">
+													<Pane size={50} minSize={10}>
+														<LogViewer
+															small
+															content={$debugState.logs}
+															isLoading={$debugState.running && !$debugState.stopped}
+															tag={undefined}
+														/>
+													</Pane>
+													<Pane size={50} minSize={10}>
+														{#if hasDebugResult}
+															<div class="h-full p-2 overflow-auto">
+																<DisplayResult
+																	result={$debugState.result}
+																	language={rawScriptLang}
+																/>
+															</div>
+														{:else}
+															<div
+																class="h-full flex items-center justify-center text-sm text-tertiary"
+															>
+																{#if $debugState.running && !$debugState.stopped}
+																	Running...
+																{:else if $debugState.stopped}
+																	Paused at breakpoint
+																{:else}
+																	Waiting for debug session
+																{/if}
+															</div>
+														{/if}
+													</Pane>
+												</Splitpanes>
+											</Pane>
+											<Pane size={50} minSize={15}>
+												<DebugPanel
+													stackFrames={$debugState.stackFrames}
+													scopes={$debugState.scopes}
+													variables={$debugState.variables}
+													client={dapClient}
+													bind:selectedFrameId={selectedDebugFrameId}
+												/>
+											</Pane>
+										</Splitpanes>
+									{:else if debugMode && isDebuggableScript}
+										<div class="h-full flex items-center justify-center text-sm text-tertiary">
+											Click "Debug" in the toolbar to start debugging
+										</div>
+									{:else}
+										<ModulePreviewResultViewer
+											lang={flowModule.value['language'] ?? 'deno'}
+											{editor}
+											{diffEditor}
+											loopStatus={parentLoop
+												? { type: 'inside', flow: parentLoop.type }
+												: undefined}
+											onUpdateMock={(detail) => {
+												flowModule.mock = detail
+												flowModule = flowModule
+												refreshStateStore(flowStore)
+											}}
+											{testJob}
+											{scriptProgress}
+											mod={flowModule}
+											{testIsLoading}
+											disableMock={preprocessorModule || failureModule}
+											disableHistory={failureModule}
+											loadingJob={stepHistoryLoader?.stepStates[flowModule.id]?.loadingJobs}
+											tagLabel={customUi?.tagLabel}
+											bind:this={modulePreviewResultViewer}
+										/>
+									{/if}
+								</Pane>
+							{/if}
+						</Splitpanes>
+					{/snippet}
+
+					{#if flowModule.value.type === 'aiagent' || (noEditor && flowModule.value.type !== 'flow')}
+						<!-- Top pane has no content to show (aiagent has no editor; rawscript/script
+						gate their content on !noEditor). Skip the Splitpanes wrapper entirely so
+						there's no orphan splitter. type === 'flow' still renders FlowPathViewer
+						even with noEditor, so it falls into the Splitpanes branch below. -->
+						<div class="h-full">
+							{@render bottomPaneContent()}
+						</div>
+					{:else}
+						<Splitpanes horizontal>
+							<Pane bind:size={editorPanelSize} minSize={10} class="relative">
+								{@render topPaneContent()}
+							</Pane>
+							<Pane bind:size={editorSettingsPanelSize} minSize={20}>
+								{@render bottomPaneContent()}
+							</Pane>
+						</Splitpanes>
+					{/if}
 				</div>
 			</div>
 		</FlowCard>