windmill-components 1.511.1 → 1.531.0

package/package/components/EditorBar.svelte

@@ -2,7 +2,7 @@
 </script>
 
 <script lang="ts">import { run } from 'svelte/legacy';
-import { ResourceService, VariableService } from '../gen';
+import { ResourceService, VariableService, WorkspaceService } from '../gen';
 import { workspaceStore } from '../stores';
 import { base } from '../base';
 import ItemPicker from './ItemPicker.svelte';
@@ -20,15 +20,17 @@ import { createEventDispatcher, untrack } from 'svelte';
 import { sendUserToast } from '../toast';
 import { getScriptByPath, scriptLangToEditorLang } from '../scripts';
 import Toggle from './Toggle.svelte';
-import { DiffIcon, DollarSign, File, History, Library, Link, Package, Plus, RotateCw, Save, Users } from 'lucide-svelte';
+import { DatabaseIcon, DiffIcon, DollarSign, File, History, Library, Link, Package, Plus, RotateCw, Save, Users } from 'lucide-svelte';
 import { capitalize, formatS3Object, toCamel } from '../utils';
 import ScriptVersionHistory from './ScriptVersionHistory.svelte';
-import ScriptGen from './copilot/ScriptGen.svelte';
 import { getResetCode } from '../script_helpers';
 import Popover from './Popover.svelte';
 import ResourceEditorDrawer from './ResourceEditorDrawer.svelte';
 import EditorSettings from './EditorSettings.svelte';
 import S3FilePicker from './S3FilePicker.svelte';
+import DucklakeIcon from './icons/DucklakeIcon.svelte';
+import FlowInlineScriptAiButton from './copilot/FlowInlineScriptAIButton.svelte';
+import ScriptGen from './copilot/ScriptGen.svelte';
 let { lang, editor, websocketAlive, iconOnly = false, validCode = true, kind = 'script', template = 'script', collabMode = false, collabLive = false, collabUsers = [], scriptPath = undefined, diffEditor = undefined, args, noHistory = false, saveToWorkspace = false, customUi = {}, lastDeployedCode = undefined, diffMode = false, showHistoryDrawer = $bindable(false), right, openAiChat = false } = $props();
 let contextualVariablePicker = $state();
 let variablePicker = $state();
@@ -37,6 +39,8 @@ let resourceTypePicker = $state();
 let variableEditor = $state();
 let resourceEditor = $state();
 let s3FilePicker = $state();
+let ducklakePicker = $state();
+let databasePicker = $state();
 let showContextVarPicker = $derived([
     'python3',
     'bash',
@@ -50,7 +54,8 @@ let showContextVarPicker = $derived([
     'rust',
     'csharp',
     'nu',
-    'java'
+    'java',
+    'ruby'
     // for related places search: ADD_NEW_LANG
 ].includes(lang ?? ''));
 let showVarPicker = $derived([
@@ -66,7 +71,8 @@ let showVarPicker = $derived([
     'rust',
     'csharp',
     'nu',
-    'java'
+    'java',
+    'ruby'
     // for related places search: ADD_NEW_LANG
 ].includes(lang ?? ''));
 let showResourcePicker = $derived([
@@ -83,11 +89,13 @@ let showResourcePicker = $derived([
     'csharp',
     'nu',
     'java',
-    'duckdb'
+    'ruby',
     // for related places search: ADD_NEW_LANG
 ].includes(lang ?? ''));
 let showS3Picker = $derived(['duckdb', 'python3'].includes(lang ?? '') ||
     ['typescript', 'javascript'].includes(scriptLangToEditorLang(lang)));
+let showDucklakePicker = $derived(['duckdb'].includes(lang ?? ''));
+let showDatabasePicker = $derived(['duckdb'].includes(lang ?? ''));
 let showResourceTypePicker = $derived(['typescript', 'javascript'].includes(scriptLangToEditorLang(lang)) ||
     lang === 'python3' ||
     lang === 'php');
@@ -337,6 +345,8 @@ function windmillPathToCamelCaseName(path) {
 		} else if (lang == 'java') {
 			editor.insertAtCursor(`System.getenv("${name}");`)
 			// for related places search: ADD_NEW_LANG
+		} else if (lang == 'ruby') {
+			editor.insertAtCursor(`ENV['${name}']`)
 		}
 		sendUserToast(`${name} inserted at cursor`)
 	}}
@@ -407,6 +417,11 @@ string ${windmillPathToCamelCaseName(path)} = await client.GetStringAsync(uri);
 		} else if (lang == 'java') {
 			editor.insertAtCursor(`(Wmill.getVariable("${path}"))`)
 			// for related places search: ADD_NEW_LANG
+		} else if (lang == 'ruby') {
+			if (!editor.getCode().includes("require 'windmill/mini'")) {
+				editor.insertAtBeginning("require 'windmill/mini'\n")
+			}
+			editor.insertAtCursor(`get_variable("${path}")`)
 		}
 		sendUserToast(`${name} inserted at cursor`)
 	}}
@@ -496,6 +511,11 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 		} else if (lang == 'java') {
 			editor.insertAtCursor(`(Wmill.getResource("${path}"))`)
 			// for related places search: ADD_NEW_LANG
+		} else if (lang == 'ruby') {
+			if (!editor.getCode().includes("require 'windmill/mini'")) {
+				editor.insertAtBeginning("require 'windmill/mini'\n")
+			}
+			editor.insertAtCursor(`get_resource("${path}")`)
 		} else if (lang == 'duckdb') {
 			let t = { postgresql: 'postgres', mysql: 'mysql', bigquery: 'bigquery' }[resType]
 			if (!t) {
@@ -551,6 +571,48 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 <ResourceEditorDrawer bind:this={resourceEditor} on:refresh={resourcePicker.openDrawer} />
 <VariableEditor bind:this={variableEditor} on:create={variablePicker.openDrawer} />
 
+{#if showDucklakePicker}
+	<ItemPicker
+		bind:this={ducklakePicker}
+		pickCallback={async (_, name) => {
+			const connStr = name == 'main' ? 'ducklake' : `ducklake://${name}`
+			editor?.insertAtCursor(`ATTACH '${connStr}' AS dl; USE dl;\n`)
+		}}
+		tooltip="Attach a Ducklake in your DuckDB script. Ducklake allows you to manipulate large data on S3 blob files through a traditional SQL interface."
+		documentationLink="https://www.windmill.dev/docs/core_concepts/ducklake"
+		itemName="ducklake"
+		loadItems={async () =>
+			(await WorkspaceService.listDucklakes({ workspace: $workspaceStore ?? 'NO_W' })).map(
+				(path) => ({ path })
+			)}
+	/>
+{/if}
+
+{#if showDatabasePicker}
+	<ItemPicker
+		bind:this={databasePicker}
+		pickCallback={(path, _, resType) => {
+			if (!editor) return
+			if (lang == 'duckdb') {
+				let t = { postgresql: 'postgres', mysql: 'mysql', bigquery: 'bigquery' }[resType]
+				editor.insertAtCursor(`ATTACH 'res://${path}' AS db (TYPE ${t});`)
+			}
+			sendUserToast(`${path} inserted at cursor`)
+		}}
+		tooltip="Attach a database resource in your script. This allows you to query data from the database using SQL."
+		documentationLink="https://www.windmill.dev/docs/core_concepts/resources_and_types"
+		itemName="Database"
+		buttons={{ 'Edit/View': (x) => resourceEditor?.initEdit(x) }}
+		extraField="description"
+		extraField2="resource_type"
+		loadItems={async () =>
+			await ResourceService.listResource({
+				workspace: $workspaceStore ?? 'NO_W',
+				resourceType: 'postgresql,mysql,bigquery'
+			})}
+	></ItemPicker>
+{/if}
+
 <S3FilePicker
 	bind:this={s3FilePicker}
 	readOnlyMode={false}
@@ -664,6 +726,38 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 				</Button>
 			{/if}
 
+			{#if showDatabasePicker && customUi?.database != false}
+				<Button
+					aiId="editor-bar-add-database"
+					aiDescription="Add database"
+					title="Add database"
+					color="light"
+					on:click={() => databasePicker?.openDrawer()}
+					size="xs"
+					btnClasses="!font-medium text-tertiary"
+					spacingSize="md"
+					startIcon={{ icon: DatabaseIcon }}
+					{iconOnly}
+					>+Database
+				</Button>
+			{/if}
+
+			{#if showDucklakePicker && customUi?.ducklake != false}
+				<Button
+					aiId="editor-bar-use-ducklake"
+					aiDescription="Use Ducklake"
+					title="Use Ducklake"
+					color="light"
+					on:click={() => ducklakePicker?.openDrawer()}
+					size="xs"
+					btnClasses="!font-medium text-tertiary"
+					spacingSize="md"
+					startIcon={{ icon: DucklakeIcon }}
+					{iconOnly}
+					>+Ducklake
+				</Button>
+			{/if}
+
 			{#if customUi?.reset != false}
 				<Button
 					aiId="editor-bar-reset-content"
@@ -775,7 +869,11 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 			{/if}
 
 			{#if customUi?.aiGen != false}
-				<ScriptGen {editor} {diffEditor} {lang} {iconOnly} {args} {openAiChat} />
+				{#if openAiChat}
+					<FlowInlineScriptAiButton />
+				{:else}
+					<ScriptGen {editor} {diffEditor} {lang} {iconOnly} {args} />
+				{/if}
 			{/if}
 
 			<EditorSettings {customUi} />

package/package/components/EditorSettings.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">import { Settings } from 'lucide-svelte';
 import FormatOnSave from './FormatOnSave.svelte';
 import VimMode from './VimMode.svelte';
+import RelativeLineNumbers from './RelativeLineNumbers.svelte';
 import { Button } from './common';
 import CodeCompletionStatus from './copilot/CodeCompletionStatus.svelte';
 import Popover from './meltComponents/Popover.svelte';
@@ -36,6 +37,11 @@ export let customUi = {};
 					<VimMode />
 				</div>
 			{/if}
+			{#if customUi?.relativeLineNumbers != false}
+				<div>
+					<RelativeLineNumbers />
+				</div>
+			{/if}
 			{#if customUi?.aiCompletion != false}
 				<div>
 					<CodeCompletionStatus />

package/package/components/ErrorOrRecoveryHandler.svelte

@@ -7,18 +7,21 @@ import { base } from '../base';
 import { enterpriseLicense, workspaceStore } from '../stores';
 import MsTeamsIcon from './icons/MSTeamsIcon.svelte';
 import { emptySchema, emptyString, sendUserToast, tryEvery } from '../utils';
+import Description from './Description.svelte';
+import MultiSelect from './select/MultiSelect.svelte';
 import { FlowService, JobService, ScriptService, WorkspaceService } from '../gen';
 import { inferArgs } from '../infer';
 import { hubBaseUrlStore } from '../stores';
 import { CheckCircle2, Loader2, RotateCw, XCircle, RefreshCcw } from 'lucide-svelte';
 import { hubPaths } from '../hub';
+import { isCloudHosted } from '../cloud';
 const slackRecoveryHandler = hubPaths.slackRecoveryHandler;
 const slackHandlerScriptPath = hubPaths.slackErrorHandler;
 const slackSuccessHandler = hubPaths.slackSuccessHandler;
 const teamsRecoveryHandler = hubPaths.teamsRecoveryHandler;
 const teamsHandlerScriptPath = hubPaths.teamsErrorHandler;
 const teamsSuccessHandler = hubPaths.teamsSuccessHandler;
-let { errorOrRecovery, isEditable, toggleText = 'Enable', showScriptHelpText = false, handlerSelected = $bindable(), handlerPath = $bindable(), handlerExtraArgs = $bindable(), customScriptTemplate, customHandlerKind = $bindable('script'), customTabTooltip } = $props();
+let { errorOrRecovery, isEditable, toggleText = 'Enable', showScriptHelpText = false, handlerSelected = $bindable('custom'), handlerPath = $bindable(), handlerExtraArgs = $bindable(), customScriptTemplate, customHandlerKind = $bindable('script'), customTabTooltip, } = $props();
 let customHandlerSchema = $state();
 let slackHandlerSchema = $state();
 let isFetching = $state(false);
@@ -27,6 +30,8 @@ let teams_team_name = $state(undefined);
 let workspaceConnectedToSlack = $state(undefined);
 let workspaceConnectedToTeams = $state(undefined);
 let connectionTestJob = $state();
+const EMAIL_RECIPIENTS_KEY = 'email_recipients';
+const CHANNEL_KEY = 'channel';
 async function loadSlackResources() {
     const settings = await WorkspaceService.getSettings({ workspace: $workspaceStore });
     if (!emptyString(settings.slack_name) && !emptyString(settings.slack_team_id)) {
@@ -166,6 +171,12 @@ function isTeamsHandler(scriptPath) {
         return scriptPath.startsWith('hub/') && scriptPath.endsWith('/schedule-success-handler-teams');
     }
 }
+function isEmailHandler(scriptPath) {
+    if (!scriptPath) {
+        return false;
+    }
+    return scriptPath.startsWith('hub/') && scriptPath.endsWith('/workspace-or-error-handler-email');
+}
 $effect(() => {
     if ($workspaceStore) {
         loadSlackResources();
@@ -181,21 +192,27 @@ $effect(() => {
     }
 });
 let lastHandlerSelected = $state(undefined);
-let channelCache = $state({
+let handlerCache = $state({
     slack: undefined,
-    teams: undefined
+    teams: undefined,
+    email: undefined
 });
 $effect(() => {
     if (lastHandlerSelected !== handlerSelected && lastHandlerSelected !== undefined) {
-        if (lastHandlerSelected === 'teams' || lastHandlerSelected === 'slack') {
-            channelCache[lastHandlerSelected] = handlerExtraArgs['channel'];
+        if (lastHandlerSelected != 'custom') {
+            const key = lastHandlerSelected === 'email' ? EMAIL_RECIPIENTS_KEY : CHANNEL_KEY;
+            handlerCache[lastHandlerSelected] = handlerExtraArgs[key];
         }
         if (handlerSelected === 'custom') {
-            handlerExtraArgs['channel'] = '';
+            handlerExtraArgs[CHANNEL_KEY] = '';
+            handlerExtraArgs[EMAIL_RECIPIENTS_KEY] = [];
             handlerPath = undefined;
         }
+        else if (handlerSelected === 'email') {
+            handlerExtraArgs[EMAIL_RECIPIENTS_KEY] = handlerCache[handlerSelected] ?? [];
+        }
         else {
-            handlerExtraArgs['channel'] = channelCache[handlerSelected] ?? '';
+            handlerExtraArgs[CHANNEL_KEY] = handlerCache[handlerSelected] ?? '';
         }
     }
     lastHandlerSelected = handlerSelected;
@@ -204,6 +221,7 @@ $effect(() => {
     handlerPath &&
         !isSlackHandler(handlerPath) &&
         !isTeamsHandler(handlerPath) &&
+        !isEmailHandler(handlerPath) &&
         loadHandlerScriptArgs(handlerPath, [
             'path',
             'workspace_id',
@@ -242,12 +260,18 @@ $effect(() => {
             'slack'
         ]).then((schema) => (slackHandlerSchema = schema));
 });
+$effect(() => {
+    if (handlerSelected === 'email') {
+        handlerPath = hubPaths.emailErrorHandler;
+    }
+});
 </script>
 
 <div>
 	<Tabs bind:selected={handlerSelected} class="mt-2 mb-4">
 		<Tab value="slack" disabled={!isEditable}>Slack</Tab>
 		<Tab value="teams" disabled={!isEditable}>Teams</Tab>
+		<Tab value="email" disabled={!isEditable}>Email</Tab>
 		<Tab value="custom" disabled={!isEditable}>
 			Custom
 			{@render customTabTooltip?.()}
@@ -274,8 +298,10 @@ $effect(() => {
 				size="xs"
 				href={customScriptTemplate}
 				disabled={!isEditable}
-				target="_blank">Create from template</Button
+				target="_blank"
 			>
+				Create from template
+			</Button>
 		{/if}
 	</div>
 	{#if showScriptHelpText}
@@ -503,4 +529,46 @@ $effect(() => {
 			{/if}
 		{/if}
 	{/if}
+{:else if handlerSelected === 'email'}
+	{#if isCloudHosted()}
+		<Alert type="info" title="Email notifications are not available in Cloud">
+			Email notifications for trigger failures are only available in self-hosted Windmill instances.
+		</Alert>
+	{:else}
+		<div class="flex flex-col gap-4 my-4">
+			<Description>
+				Configure email addresses to receive notifications when jobs fail. This feature requires
+				SMTP to be configured.
+			</Description>
+		</div>
+		<div class="flex flex-col gap-2 my-4">
+			<MultiSelect
+				items={[] as { label: string; value: string }[]}
+				bind:value={
+					() => handlerExtraArgs[EMAIL_RECIPIENTS_KEY] ?? [],
+					(recipients) => (handlerExtraArgs[EMAIL_RECIPIENTS_KEY] = recipients)
+				}
+				placeholder="Enter email addresses..."
+				onCreateItem={(email) => {
+					const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
+					if (!emailRegex.test(email)) {
+						sendUserToast('Invalid email format', true)
+						return
+					}
+					const currentArray = handlerExtraArgs[EMAIL_RECIPIENTS_KEY] ?? []
+					handlerExtraArgs[EMAIL_RECIPIENTS_KEY] = [...currentArray, email]
+				}}
+				class="w-full"
+			/>
+			{#if handlerExtraArgs[EMAIL_RECIPIENTS_KEY]?.length > 0}
+				<span class="text-sm text-tertiary">
+					{handlerExtraArgs[EMAIL_RECIPIENTS_KEY]?.length} email{handlerExtraArgs[
+						EMAIL_RECIPIENTS_KEY
+					]?.length === 1
+						? ''
+						: 's'} configured
+				</span>
+			{/if}
+		</div>
+	{/if}
 {/if}

package/package/components/ErrorOrRecoveryHandler.svelte.d.ts

@@ -1,9 +1,10 @@
+import type { ErrorHandler } from '../gen/types.gen';
 interface Props {
     errorOrRecovery: 'error' | 'recovery' | 'success';
     isEditable: boolean;
     toggleText?: string;
     showScriptHelpText?: boolean;
-    handlerSelected: 'custom' | 'slack' | 'teams';
+    handlerSelected: ErrorHandler;
     handlerPath: string | undefined;
     handlerExtraArgs: Record<string, any>;
     customScriptTemplate: string;

package/package/components/ExploreAssetButton.svelte

@@ -1,5 +1,6 @@
 <script module lang="ts">export function assetCanBeExplored(asset, _resourceMetadata) {
-    return (asset.kind === 's3object' ||
+    return (asset.kind === 'ducklake' ||
+        asset.kind === 's3object' ||
         (asset.kind === 'resource' && isDbType(_resourceMetadata?.resource_type)));
 }
 </script>
@@ -12,12 +13,13 @@ import S3FilePicker from './S3FilePicker.svelte';
 import { userStore } from '../stores';
 import { isS3Uri } from '../utils';
 import { Database, File } from 'lucide-svelte';
-const { asset, _resourceMetadata, s3FilePicker, dbManagerDrawer, onClick, class: className = '', noText = false, buttonVariant = 'border', btnClasses = '' } = $props();
+import DucklakeIcon from './icons/DucklakeIcon.svelte';
+const { asset, _resourceMetadata, s3FilePicker, dbManagerDrawer, onClick, class: className = '', noText = false, buttonVariant = 'border', btnClasses = '', disabled = false } = $props();
 const assetUri = $derived(formatAsset(asset));
 </script>
 
 <Button
-	disabled={$userStore?.operator}
+	disabled={$userStore?.operator || disabled}
 	size="xs"
 	variant={buttonVariant}
 	spacingSize="xs2"
@@ -25,9 +27,15 @@ const assetUri = $derived(formatAsset(asset));
 	{btnClasses}
 	on:click={async () => {
 		if (asset.kind === 'resource' && isDbType(_resourceMetadata?.resource_type)) {
-			dbManagerDrawer?.openDrawer(_resourceMetadata.resource_type, asset.path)
+			dbManagerDrawer?.openDrawer({
+				type: 'database',
+				resourceType: _resourceMetadata.resource_type,
+				resourcePath: asset.path
+			})
 		} else if (asset.kind === 's3object' && isS3Uri(assetUri)) {
 			s3FilePicker?.open(assetUri)
+		} else if (asset.kind === 'ducklake') {
+			dbManagerDrawer?.openDrawer({ type: 'ducklake', ducklake: asset.path })
 		}
 		onClick?.()
 	}}
@@ -36,5 +44,7 @@ const assetUri = $derived(formatAsset(asset));
 		<span class:hidden={noText}>Explore</span> <File size={18} />
 	{:else if asset.kind === 'resource'}
 		<span class:hidden={noText}>Manage</span> <Database size={18} />
+	{:else if asset.kind === 'ducklake'}
+		<span class:hidden={noText}>Manage</span> <DucklakeIcon size={18} />
 	{/if}
 </Button>

package/package/components/ExploreAssetButton.svelte.d.ts

@@ -17,6 +17,7 @@ type $$ComponentProps = {
     noText?: boolean;
     buttonVariant?: ButtonType.Variant;
     btnClasses?: string;
+    disabled?: boolean;
 };
 declare const ExploreAssetButton: import("svelte").Component<$$ComponentProps, {}, "">;
 type ExploreAssetButton = ReturnType<typeof ExploreAssetButton>;

package/package/components/FirstStepInputs.svelte

@@ -14,7 +14,7 @@ let error = $state(undefined);
 let mod = $state(undefined);
 async function loadSchema() {
     try {
-        const res = await getFirstStepSchema($flowStateStore, flowStore.val);
+        const res = await getFirstStepSchema(flowStateStore.val, flowStore.val);
         schema = res.schema;
         mod = res.mod;
         dispatch('connectFirstNode', { connectFirstNode: res.connectFirstNode });
@@ -24,7 +24,7 @@ async function loadSchema() {
     }
 }
 $effect(() => {
-    flowStore.val && $flowStateStore && untrack(() => loadSchema());
+    flowStore.val && flowStateStore.val && untrack(() => loadSchema());
 });
 function handleClick() {
     selected = !selected;

package/package/components/FlowBuilder.svelte

@@ -15,7 +15,7 @@ import ScriptEditorDrawer from './flows/content/ScriptEditorDrawer.svelte';
 import { dfs as dfsApply } from './flows/dfs';
 import FlowImportExportMenu from './flows/header/FlowImportExportMenu.svelte';
 import FlowPreviewButtons from './flows/header/FlowPreviewButtons.svelte';
-import { cleanInputs, updateDerivedModuleStatesFromTestJobs } from './flows/utils';
+import { cleanInputs } from './flows/utils';
 import { Calendar, Pen, Save, DiffIcon, HistoryIcon, FileJson, Settings } from 'lucide-svelte';
 import Awareness from './Awareness.svelte';
 import { getAllModules } from './flows/flowExplorer';
@@ -445,13 +445,7 @@ function select(selectedId) {
     selectedIdStore.set(selectedId);
 }
 let insertButtonOpen = writable(false);
-let testModuleId = $state(undefined);
-let modulesTestStates = new ModulesTestStates((moduleId) => {
-    // Update the derived store with test job states
-    delete $derivedModuleStates[moduleId];
-    testModuleId = moduleId;
-    showJobStatus = false;
-});
+let modulesTestStates = new ModulesTestStates();
 let outputPickerOpenFns = $state({});
 let flowEditor = $state(undefined);
 setContext('FlowEditorContext', {
@@ -715,25 +709,8 @@ function onJobDone() {
         }
     }
 }
-const localModuleStates = $derived(flowPreviewContent?.getLocalModuleStates() ?? writable({}));
-const localDurationStatuses = $derived(flowPreviewContent?.getLocalDurationStatuses() ?? writable({}));
-const suspendStatus = $derived(flowPreviewContent?.getSuspendStatus() ?? writable({}));
-// Create a derived store that only shows the module states when showModuleStatus is true
-// this store can also be updated
-let derivedModuleStates = writable({});
-$effect(() => {
-    derivedModuleStates.update((currentStates) => {
-        return showJobStatus ? $localModuleStates : currentStates;
-    });
-});
-$effect(() => {
-    updateDerivedModuleStatesFromTestJobs(testModuleId, modulesTestStates, derivedModuleStates);
-});
-function resetModulesStates() {
-    derivedModuleStates.set({});
-    showJobStatus = false;
-}
-const individualStepTests = $derived(!(showJobStatus && job) && Object.keys($derivedModuleStates).length > 0);
+let localModuleStates = $state({});
+let suspendStatus = $state({ val: {} });
 const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 </script>
 
@@ -798,7 +775,7 @@ const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 							for (const mod of restoredModules) {
 								if (mod) {
 									try {
-										loadFlowModuleState(mod).then((state) => ($flowStateStore[mod.id] = state))
+										loadFlowModuleState(mod).then((state) => (flowStateStore.val[mod.id] = state))
 									} catch (e) {
 										console.error('Error loading state for restored node', e)
 									}
@@ -928,10 +905,12 @@ const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 							showCaptureHint.set(true)
 						}}
 						{onJobDone}
+						bind:localModuleStates
 						bind:this={flowPreviewButtons}
 						{loading}
 						onRunPreview={() => {
-							localModuleStates.set({})
+							modulesTestStates.hideJobsInGraph()
+							localModuleStates = {}
 							showJobStatus = true
 						}}
 					/>
@@ -958,7 +937,7 @@ const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 				</div>
 			</div>
 			<!-- metadata -->
-			{#if $flowStateStore}
+			{#if flowStateStore.val}
 				<FlowEditor
 					bind:this={flowEditor}
 					{disabledFlowInputs}
@@ -1001,19 +980,22 @@ const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 					showFlowAiButton={!disableAi && customUi?.topBar?.aiBuilder != false}
 					toggleAiChat={() => aiChatManager.toggleOpen()}
 					onOpenPreview={flowPreviewButtons?.openPreview}
-					localModuleStates={derivedModuleStates}
+					localModuleStates={showJobStatus ? localModuleStates : {}}
+					{showJobStatus}
+					testModuleStates={modulesTestStates}
 					isOwner={flowPreviewContent?.getIsOwner()}
 					onTestFlow={flowPreviewButtons?.runPreview}
 					isRunning={flowPreviewContent?.getIsRunning()}
 					onCancelTestFlow={flowPreviewContent?.cancelTest}
-					onHideJobStatus={resetModulesStates}
-					{individualStepTests}
+					onHideJobStatus={() => {
+						modulesTestStates.hideJobsInGraph()
+						showJobStatus = false
+					}}
 					{job}
-					{localDurationStatuses}
 					{suspendStatus}
-					{showJobStatus}
 					onDelete={(id) => {
-						delete $derivedModuleStates[id]
+						delete localModuleStates[id]
+						delete modulesTestStates.states[id]
 					}}
 					{flowHasChanged}
 				/>

package/package/components/FlowGraphViewerStep.svelte

@@ -132,6 +132,8 @@ let codeViewer;
 						Inline {stepDetail.value.language} script
 					{:else if stepDetail.value.type == 'script'}
 						Workspace script
+					{:else if stepDetail.value.type == 'aiagent'}
+						AI Agent
 					{/if}
 				</span>
 			</div>
@@ -212,6 +214,11 @@ let codeViewer;
 			{:else}
 				<FlowModuleScript path={stepDetail.value.path} />
 			{/if}
+		{:else if stepDetail.value.type == 'aiagent'}
+			<div class="text-2xs">
+				<h3 class="mb-2 font-semibold mt-2">Step Inputs</h3>
+				<InputTransformsViewer inputTransforms={stepDetail?.value?.input_transforms ?? {}} />
+			</div>
 		{:else if stepDetail.value.type == 'forloopflow'}
 			<div>
 				<p class="font-medium text-secondary pb-2"> Iterator expression: </p>