windmill-components 1.623.2 → 1.655.0

package/package/components/flows/FlowAssetsHandler.svelte

@@ -2,7 +2,6 @@
     let s = $state({
         val: {
             selectedAsset: undefined,
-            dbManagerDrawer: undefined,
             s3FilePicker: undefined,
             resourceEditorDrawer: undefined,
             resourceMetadataCache: {},
@@ -27,7 +26,6 @@ import { AssetService, ResourceService } from '../../gen';
 import { deepEqual } from 'fast-equals';
 import { workspaceStore } from '../../stores';
 import S3FilePicker from '../S3FilePicker.svelte';
-import DbManagerDrawer from '../DBManagerDrawer.svelte';
 import ResourceEditorDrawer from '../ResourceEditorDrawer.svelte';
 import { watch } from 'runed';
 let { modules, enableParser = false, enableDbExplore = false, enablePathScriptAndFlowAssets = false } = $props();
@@ -43,7 +41,7 @@ $effect(() => {
     const assets = allModules.flatMap((m) => getFlowModuleAssets(m, flowGraphAssetsCtx?.val.additionalAssetsMap) ?? []) ?? [];
     for (const asset of assets) {
         if (asset.kind == 'resource') {
-            let truncatedPath = asset.path.split('/').slice(0, 3).join('/');
+            let truncatedPath = asset.path.split('?table=')[0];
             if (truncatedPath in resMetadataCache)
                 continue;
             resMetadataCache[truncatedPath] = undefined; // avoid fetching multiple times because of async
@@ -103,8 +101,9 @@ async function parseAndUpdateRawScriptModule(v, modId) {
         if (old?.alt_access_type)
             asset.alt_access_type = old.alt_access_type;
     }
-    if (!deepEqual(v.assets, newAssets))
-        v.assets = newAssets;
+    const normalizedAssets = newAssets.length > 0 ? newAssets : undefined;
+    if (!deepEqual(v.assets, normalizedAssets))
+        v.assets = normalizedAssets;
 }
 // Check for raw script modules whose assets were not parsed. Useful for flows created
 // before the assets feature was introduced.
@@ -144,6 +143,5 @@ $effect(() => {
 
 {#if flowGraphAssetsCtx}
 	<S3FilePicker bind:this={flowGraphAssetsCtx.val.s3FilePicker} readOnlyMode />
-	<DbManagerDrawer bind:this={flowGraphAssetsCtx.val.dbManagerDrawer} />
 	<ResourceEditorDrawer bind:this={flowGraphAssetsCtx.val.resourceEditorDrawer} />
 {/if}

package/package/components/flows/FlowModuleIcon.svelte

@@ -1,11 +1,12 @@
-<script lang="ts">import LanguageIcon from '../common/languageIcons/LanguageIcon.svelte';
+<script lang="ts">import { untrack } from 'svelte';
+import LanguageIcon from '../common/languageIcons/LanguageIcon.svelte';
 import IconedResourceType from '../IconedResourceType.svelte';
 import { Building, Repeat, Square, ArrowDown, GitBranch, Bot } from 'lucide-svelte';
 import BarsStaggered from '../icons/BarsStaggered.svelte';
 let { module, size = 16, width, height } = $props();
 // Use width/height if provided, otherwise use size for both
-const iconWidth = width || size;
-const iconHeight = height || size;
+const iconWidth = untrack(() => width) || untrack(() => size);
+const iconHeight = untrack(() => height) || untrack(() => size);
 </script>
 
 {#if module?.value?.type === 'aiagent'}

package/package/components/flows/FlowProgressBar.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">import {} from '../../gen';
 import ProgressBar from '../progressBar/ProgressBar.svelte';
-let { job = undefined, currentSubJobProgress = $bindable(undefined), class: className } = $props();
+import { forLater } from '../../forLater';
+let { job = undefined, currentSubJobProgress = $bindable(undefined), class: className, slim = false, textPosition = 'top', showStepId = false } = $props();
 let error = $state(undefined);
 let index = $state(0);
 let subIndex = $state(undefined);
@@ -8,8 +9,16 @@ let subLength = $state(undefined);
 let length = $state(1);
 let nextInProgress = $state(false);
 let subIndexIsPercent = $state(false);
+let currentStepId = $state(undefined);
+let isWaitingForEvents = $state(false);
+let isCanceled = $state(false);
+let isScheduled = $state(false);
 let progressBar = $state(undefined);
 function updateJobProgress(job) {
+    // Check if job is scheduled for later
+    const isJobScheduled = Boolean('running' in job && 'scheduled_for' in job &&
+        job.scheduled_for && forLater(job.scheduled_for));
+    isScheduled = isJobScheduled;
     const modules = job?.flow_status?.modules;
     if (!modules?.length) {
         return;
@@ -19,10 +28,23 @@ function updateJobProgress(job) {
     let newError = undefined;
     let newNextInProgress = false;
     let maxDone = Math.max(job?.flow_status?.step ?? 0, 0);
+    let newCurrentStepId = undefined;
+    let newIsWaitingForEvents = false;
     if (modules.length > maxDone) {
         const nextModule = modules[maxDone];
         if (nextModule.type === 'InProgress') {
             newNextInProgress = true;
+            // Get the step ID if available
+            if (nextModule.id) {
+                newCurrentStepId = nextModule.id;
+            }
+        }
+        else if (nextModule.type === 'WaitingForEvents') {
+            newIsWaitingForEvents = true;
+            // Get the step ID if available for waiting events
+            if (nextModule.id) {
+                newCurrentStepId = nextModule.id;
+            }
         }
     }
     let module = modules[maxDone];
@@ -63,6 +85,9 @@ function updateJobProgress(job) {
     length = Math.max(modules.length, 1);
     index = maxDone;
     nextInProgress = newNextInProgress;
+    currentStepId = newCurrentStepId;
+    isWaitingForEvents = newIsWaitingForEvents;
+    isCanceled = job?.canceled || false;
 }
 export function reset() {
     progressBar?.resetP();
@@ -71,6 +96,10 @@ export function reset() {
     subLength = undefined;
     length = 1;
     index = 0;
+    currentStepId = undefined;
+    isWaitingForEvents = false;
+    isCanceled = false;
+    isScheduled = false;
 }
 $effect(() => {
     job && updateJobProgress(job);
@@ -86,5 +115,12 @@ $effect(() => {
 	{subIndex}
 	{error}
 	{subIndexIsPercent}
+	{slim}
 	class={className}
+	{textPosition}
+	stepId={currentStepId}
+	{showStepId}
+	{isWaitingForEvents}
+	{isCanceled}
+	{isScheduled}
 />

package/package/components/flows/FlowProgressBar.svelte.d.ts

@@ -3,6 +3,9 @@ interface Props {
     job?: Job | undefined;
     currentSubJobProgress?: number | undefined;
     class?: string;
+    slim?: boolean;
+    textPosition?: 'top' | 'bottom';
+    showStepId?: boolean;
 }
 declare const FlowProgressBar: import("svelte").Component<Props, {
     reset: () => void;

package/package/components/flows/agentToolUtils.d.ts

@@ -1,10 +1,19 @@
 import type { AiAgent, FlowModule, FlowModuleValue } from '../../gen';
+export declare const SPECIAL_TOOL_KINDS: readonly ["mcpTool", "websearchTool", "aiAgentTool"];
+export type SpecialToolKind = (typeof SPECIAL_TOOL_KINDS)[number];
 export type AgentTool = AiAgent['tools'][number];
 export type FlowModuleTool = AgentTool & {
     value: {
         tool_type: 'flowmodule';
     } & FlowModuleValue;
 };
+export type AiAgentTool = AgentTool & {
+    value: {
+        tool_type: 'flowmodule';
+    } & {
+        type: 'aiagent';
+    } & FlowModuleValue;
+};
 export type McpTool = AgentTool & {
     value: {
         tool_type: 'mcp';
@@ -30,6 +39,10 @@ export declare function isMcpTool(tool: AgentTool): tool is McpTool;
  * Type guard to check if a tool is a Websearch tool
  */
 export declare function isWebsearchTool(tool: AgentTool): tool is WebsearchTool;
+/**
+ * Create an AI Agent tool (nested agent)
+ */
+export declare function createAiAgentTool(id: string): AiAgentTool;
 /**
  * Create an MCP tool from resource path
  */
@@ -38,6 +51,11 @@ export declare function createMcpTool(id: string): McpTool;
  * Create a Websearch tool
  */
 export declare function createWebsearchTool(id: string): WebsearchTool;
+/**
+ * Convert a FlowModuleTool to a FlowModule for use with loadFlowModuleState etc.
+ * Strips the extra `tool_type` field and maps AgentTool fields to FlowModule fields.
+ */
+export declare function agentToolToFlowModule(tool: FlowModuleTool): FlowModule;
 /**
  * Convert a FlowModule back to an AgentTool
  * Used when saving changes back to the AI Agent tools array

package/package/components/flows/agentToolUtils.js

@@ -1,3 +1,6 @@
+import { loadStoredConfig } from '../aiProviderStorage';
+import { AI_AGENT_SCHEMA } from './flowInfers';
+export const SPECIAL_TOOL_KINDS = ['mcpTool', 'websearchTool', 'aiAgentTool'];
 /**
  * Type guard to check if a tool is a FlowModule tool
  */
@@ -16,6 +19,38 @@ export function isMcpTool(tool) {
 export function isWebsearchTool(tool) {
     return tool.value.tool_type === 'websearch';
 }
+/**
+ * Create an AI Agent tool (nested agent)
+ */
+export function createAiAgentTool(id) {
+    const input_transforms = {
+        provider: {
+            type: 'static',
+            value: loadStoredConfig() ?? { kind: 'openai', resource: '', model: '' }
+        },
+        output_type: { type: 'static', value: 'text' },
+        user_message: { type: 'ai' }
+    };
+    for (const key of Object.keys(AI_AGENT_SCHEMA.properties ?? {})) {
+        if (!(key in input_transforms)) {
+            ;
+            input_transforms[key] = {
+                type: 'static',
+                value: undefined
+            };
+        }
+    }
+    return {
+        id,
+        summary: '',
+        value: {
+            tool_type: 'flowmodule',
+            type: 'aiagent',
+            tools: [],
+            input_transforms
+        }
+    };
+}
 /**
  * Create an MCP tool from resource path
  */
@@ -43,6 +78,18 @@ export function createWebsearchTool(id) {
         }
     };
 }
+/**
+ * Convert a FlowModuleTool to a FlowModule for use with loadFlowModuleState etc.
+ * Strips the extra `tool_type` field and maps AgentTool fields to FlowModule fields.
+ */
+export function agentToolToFlowModule(tool) {
+    const { tool_type: _, ...value } = tool.value;
+    return {
+        id: tool.id,
+        summary: tool.summary,
+        value: value
+    };
+}
 /**
  * Convert a FlowModule back to an AgentTool
  * Used when saving changes back to the AI Agent tools array

package/package/components/flows/common/FlowCardHeader.svelte

@@ -27,8 +27,9 @@ function getCachedValues(path) {
     const key = getCachedKey(path);
     latestHash = cachedValues[key]?.latestHash;
 }
-if (flowModuleValue?.type === 'script' && flowModuleValue.path) {
-    getCachedValues(flowModuleValue.path);
+const untrackedFlowModuleValue = untrack(() => flowModuleValue);
+if (untrackedFlowModuleValue?.type === 'script' && untrackedFlowModuleValue.path) {
+    getCachedValues(untrackedFlowModuleValue.path);
 }
 async function loadLatestHash(value) {
     let script = await ScriptService.getScriptByPath({
@@ -120,12 +121,11 @@ $effect.pre(() => {
 							}}><Unlock size={12} />hash</Button
 						>
 					{:else if latestHash}
-						<div class="flex">
+						<div class="flex gap-2">
 							<Button
 								title="Lock hash to always use this specific version"
-								color="light"
-								size="xs"
-								btnClasses="text-primary inline-flex gap-1 items-center"
+								unifiedSize="sm"
+								variant="default"
 								on:click={() => {
 									if (flowModuleValue.type == 'script') {
 										dispatch('setHash', latestHash)
@@ -134,12 +134,12 @@ $effect.pre(() => {
 							>
 							<Button
 								title="Reload latest hash"
-								size="xs"
-								color="light"
+								unifiedSize="sm"
+								variant="default"
 								on:click={() => dispatch('reload')}
-							>
-								<RefreshCw size={12} /></Button
-							>
+								startIcon={{ icon: RefreshCw }}
+								iconOnly
+							/>
 						</div>
 					{/if}
 					<input

package/package/components/flows/content/AgentToolWrapper.svelte

@@ -24,7 +24,7 @@ let { tool = $bindable(), noEditor = false, enableAi = false, parentModule = und
 	/>
 {:else if isMcpTool(tool)}
 	<!-- MCP tool - use McpToolEditor -->
-	<McpToolEditor bind:tool={tool as McpTool} />
+	<McpToolEditor bind:tool />
 {:else if isWebsearchTool(tool)}
 	<WebsearchToolDisplay />
 {/if}

package/package/components/flows/content/DynamicInputHelpBox.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">import Alert from '../../common/alert/Alert.svelte';
 import Button from '../../common/button/Button.svelte';
 import { ChevronDown } from 'lucide-svelte';
-$: opened = false;
+let opened = $state(false);
 </script>
 
 <div class="text-xs flex flex-row-reverse">

package/package/components/flows/content/DynamicInputHelpBox.svelte.d.ts

@@ -1,18 +1,3 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const DynamicInputHelpBox: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type DynamicInputHelpBox = InstanceType<typeof DynamicInputHelpBox>;
+declare const DynamicInputHelpBox: import("svelte").Component<Record<string, never>, {}, "">;
+type DynamicInputHelpBox = ReturnType<typeof DynamicInputHelpBox>;
 export default DynamicInputHelpBox;

package/package/components/flows/content/FlowEditorPanel.svelte

@@ -11,6 +11,7 @@ import { handleSelectTriggerFromKind } from '../../triggers/utils';
 import { computeMissingInputWarnings } from '../missingInputWarnings';
 import FlowResult from './FlowResult.svelte';
 import FlowSelectionPanel from './FlowSelectionPanel.svelte';
+import { resolveSelectedModuleIds, locateModules, areContiguousSiblings } from '../multiSelectUtils';
 let { noEditor = false, enableAi = false, newFlow = false, disabledFlowInputs = false, savedFlow = undefined, onDeployTrigger = () => { }, forceTestTab, highlightArg, onTestFlow, job, isOwner, suspendStatus, onOpenDetails, previewOpen = false, flowModuleSchemaMap = undefined } = $props();
 const { selectionManager, flowStore, flowStateStore, flowInputsStore, pathStore, initialPathStore, fakeInitialPath, previewArgs, flowInputEditorState, stepsInputArgs } = getContext('FlowEditorContext');
 const selectedId = $derived(selectionManager.getSelectedId());
@@ -28,10 +29,22 @@ function checkDup(modules) {
 $effect(() => {
     computeMissingInputWarnings(flowStore, flowStateStore.val, flowInputsStore);
 });
+// Derived state for multi-select operations in the side panel
+let resolvedModuleIds = $derived(resolveSelectedModuleIds(selectionManager.selectedIds, flowStore.val.value.modules ?? []));
+let canMoveSelected = $derived(resolvedModuleIds.length > 0 &&
+    areContiguousSiblings(locateModules(resolvedModuleIds, flowStore.val.value.modules ?? [])));
 </script>
 
 {#if selectionManager && selectionManager.selectedIds.length > 1}
-	<FlowSelectionPanel {selectionManager} {noEditor} />
+	<FlowSelectionPanel
+		{selectionManager}
+		{noEditor}
+		onDeleteSelected={() => flowModuleSchemaMap?.deleteMultiple(resolvedModuleIds)}
+		onDuplicateSelected={() => flowModuleSchemaMap?.duplicateMultiple(resolvedModuleIds)}
+		onMoveSelected={() => flowModuleSchemaMap?.moveMultiple(resolvedModuleIds)}
+		{canMoveSelected}
+		resolvedCount={resolvedModuleIds.length}
+	/>
 {:else if selectedId?.startsWith('settings')}
 	<FlowSettings {enableAi} {noEditor} />
 {:else if selectedId === 'Input'}

package/package/components/flows/content/FlowEnvironmentVariables.svelte

@@ -2,11 +2,15 @@
 import { getContext, setContext } from 'svelte';
 import { writable } from 'svelte/store';
 import { Button } from '../../common';
-import { Plus, Trash2 } from 'lucide-svelte';
+import { DollarSign, Plus, Trash2 } from 'lucide-svelte';
 import FlowCard from '../common/FlowCard.svelte';
 import JsonEditor from '../../JsonEditor.svelte';
 import Label from '../../Label.svelte';
 import Select from '../../select/Select.svelte';
+import ItemPicker from '../../ItemPicker.svelte';
+import ResourcePicker from '../../ResourcePicker.svelte';
+import { VariableService } from '../../../gen';
+import { workspaceStore } from '../../../stores';
 let { noEditor } = $props();
 const { flowStore } = getContext('FlowEditorContext');
 if (!flowStore.val.value.flow_env) {
@@ -15,6 +19,9 @@ if (!flowStore.val.value.flow_env) {
 let flowEnvVarsMap = $derived(new Map(Object.entries(flowStore.val.value.flow_env || {})));
 function determineValueType(value) {
     if (typeof value === 'string') {
+        if (value.startsWith('$res:')) {
+            return 'resource';
+        }
         try {
             JSON.parse(value);
             return value.trim().startsWith('{') ||
@@ -32,23 +39,42 @@ function determineValueType(value) {
 let flowEnvTypes = $state({});
 const typeOptions = [
     { label: 'String', value: 'string' },
-    { label: 'JSON', value: 'json' }
+    { label: 'JSON', value: 'json' },
+    { label: 'Resource', value: 'resource' }
 ];
+// Track resource paths separately for bind:value with ResourcePicker
+let resourcePaths = $state({});
+// Initialize resourcePaths from existing flow_env values
+for (const [key, value] of Object.entries(flowStore.val.value.flow_env || {})) {
+    if (typeof value === 'string' && value.startsWith('$res:')) {
+        resourcePaths[key] = value.substring('$res:'.length);
+    }
+}
+// Initialize types for new keys and sync resourcePaths → flow_env
 $effect(() => {
     for (const [key, value] of flowEnvVarsMap.entries()) {
         if (!flowEnvTypes[key]) {
             flowEnvTypes[key] = determineValueType(value);
         }
     }
+    for (const [key, path] of Object.entries(resourcePaths)) {
+        if (flowStore.val.value.flow_env && flowEnvTypes[key] === 'resource') {
+            const newVal = '$res:' + (path || '');
+            if (flowStore.val.value.flow_env[key] !== newVal) {
+                flowStore.val.value.flow_env[key] = newVal;
+                flowStore.val = flowStore.val;
+            }
+        }
+    }
 });
+// Convert values when user changes the type dropdown
+let prevTypes = {};
 $effect(() => {
     for (const [key, type] of Object.entries(flowEnvTypes)) {
-        if (flowStore.val.value.flow_env && key in flowStore.val.value.flow_env) {
-            const currentType = determineValueType(flowStore.val.value.flow_env[key]);
-            if (currentType !== type) {
-                updateEnvType(key, type);
-            }
+        if (prevTypes[key] && prevTypes[key] !== type) {
+            updateEnvType(key, type);
         }
+        prevTypes[key] = type;
     }
 });
 let flowEnvEntries = $derived(Array.from(flowEnvVarsMap.entries()).map(([key, value]) => {
@@ -82,6 +108,7 @@ function removeEnvVar(key) {
     if (flowStore.val.value.flow_env && key in flowStore.val.value.flow_env) {
         delete flowStore.val.value.flow_env[key];
         delete flowEnvTypes[key];
+        delete resourcePaths[key];
         flowStore.val = flowStore.val;
     }
 }
@@ -118,34 +145,57 @@ function updateEnvKey(oldKey, newKey) {
         flowStore.val.value.flow_env = newEnvVars;
         delete flowEnvTypes[oldKey];
         flowEnvTypes[newKey] = type;
+        // Move resource path if applicable
+        if (type === 'resource' && oldKey in resourcePaths) {
+            resourcePaths[newKey] = resourcePaths[oldKey];
+            delete resourcePaths[oldKey];
+        }
         flowStore.val = flowStore.val;
     }
 }
 function updateEnvType(key, newType) {
     if (flowStore.val.value.flow_env && key in flowStore.val.value.flow_env) {
-        const currentValue = flowStore.val.value.flow_env[key];
-        const stringValue = typeof currentValue === 'string' ? currentValue : JSON.stringify(currentValue, null, 2);
         flowEnvTypes[key] = newType;
-        if (newType === 'json') {
-            try {
-                const parsed = JSON.parse(stringValue);
-                flowStore.val.value.flow_env[key] = parsed;
-            }
-            catch {
-                flowStore.val.value.flow_env[key] = stringValue;
+        if (newType === 'resource') {
+            flowStore.val.value.flow_env[key] = '$res:';
+            resourcePaths[key] = '';
+        }
+        else if (newType === 'json') {
+            delete resourcePaths[key];
+            const currentValue = flowStore.val.value.flow_env[key];
+            if (typeof currentValue === 'string') {
+                try {
+                    flowStore.val.value.flow_env[key] = JSON.parse(currentValue);
+                }
+                catch {
+                    // keep as string if not valid JSON
+                }
             }
         }
         else {
-            flowStore.val.value.flow_env[key] = stringValue;
+            delete resourcePaths[key];
+            const currentValue = flowStore.val.value.flow_env[key];
+            if (typeof currentValue !== 'string') {
+                flowStore.val.value.flow_env[key] = JSON.stringify(currentValue, null, 2);
+            }
         }
         flowStore.val = flowStore.val;
     }
 }
+function setVarPath(key, path) {
+    if (flowStore.val.value.flow_env) {
+        flowStore.val.value.flow_env[key] = '$var:' + path;
+        flowStore.val = flowStore.val;
+    }
+}
+let variablePicker = $state(undefined);
+let pickForKey = $state(undefined);
 setContext('PropPickerWrapper', {
     inputMatches: writable(undefined),
-    focusProp: () => { },
+    connectProp: () => { },
     propPickerConfig: writable(undefined),
-    clearFocus: () => { }
+    clearConnect: () => { },
+    exprBeingEdited: writable([])
 });
 </script>
 
@@ -156,8 +206,8 @@ setContext('PropPickerWrapper', {
 				Flow envs can be referenced in any flow step input using the syntax{' '}
 				<code>flow_env.VARIABLE_NAME</code> or <code>flow_env["VARIABLE_NAME"]</code>. These
 				variables are available in the property picker and can be used in JavaScript expressions and
-				input bindings. You can choose between String or JSON types for each variable - JSON types
-				allow complex data structures.
+				input bindings. String values can link to workspace variables using the <DollarSign size={12}
+					class="inline" /> button. Resource type references workspace resources resolved at runtime.
 			</Alert>
 
 			{#if flowEnvEntries.length === 0}
@@ -210,10 +260,13 @@ setContext('PropPickerWrapper', {
 								{/if}
 							</div>
 
-							<div class="flex flex-col gap-1">
-								<!-- svelte-ignore a11y_label_has_associated_control -->
-								<label class="text-sm font-medium">Value</label>
-								{#if entry.type === 'json'}
+							<Label label="Value">
+								{#if entry.type === 'resource'}
+									<ResourcePicker
+										bind:value={resourcePaths[entry.key]}
+										disabled={noEditor}
+									/>
+								{:else if entry.type === 'json'}
 									<div class="w-full">
 										<JsonEditor
 											bind:code={entry.displayValue}
@@ -225,16 +278,43 @@ setContext('PropPickerWrapper', {
 										/>
 									</div>
 								{:else}
-									<input
-										type="text"
-										value={entry.displayValue}
-										oninput={(e) => updateEnvValue(entry.key, e.currentTarget.value, 'string')}
-										disabled={noEditor}
-										class="input w-full"
-										placeholder="Variable value"
-									/>
+									<div class="relative group w-full">
+										<input
+											type="text"
+											value={entry.displayValue}
+											oninput={(e) =>
+												updateEnvValue(entry.key, e.currentTarget.value, 'string')}
+											disabled={noEditor}
+											class="input w-full"
+											placeholder="Variable value"
+										/>
+										{#if !noEditor}
+											<Button
+												iconOnly
+												startIcon={{ icon: DollarSign }}
+												unifiedSize="sm"
+												onClick={() => {
+													pickForKey = entry.key
+													variablePicker?.openDrawer?.()
+												}}
+												wrapperClasses="opacity-0 group-hover:opacity-100 transition-opacity absolute right-2 top-1/2 -translate-y-1/2 bg-surface-input"
+												variant="subtle"
+												title="Insert a Variable"
+											/>
+										{/if}
+									</div>
+									{#if typeof entry.value === 'string' && entry.value.startsWith('$var:') && entry.value.length > 5}
+										<div class="text-2xs text-tertiary">
+											Linked to variable <a
+												href="/variables#{entry.value.slice(5)}"
+												target="_blank"
+												class="text-accent underline font-normal"
+												>{entry.value.slice(5)}</a
+											>
+										</div>
+									{/if}
 								{/if}
-							</div>
+							</Label>
 						</div>
 					{/each}
 				</div>
@@ -249,3 +329,20 @@ setContext('PropPickerWrapper', {
 		</div>
 	</FlowCard>
 </div>
+
+<ItemPicker
+	bind:this={variablePicker}
+	pickCallback={(path, _) => {
+		if (pickForKey) {
+			setVarPath(pickForKey, path)
+			pickForKey = undefined
+		}
+	}}
+	itemName="Variable"
+	extraField="path"
+	loadItems={async () =>
+		(await VariableService.listVariable({ workspace: $workspaceStore ?? '' })).map((x) => ({
+			name: x.path,
+			...x
+		}))}
+/>

package/package/components/flows/content/FlowFailureModule.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">import { getContext } from 'svelte';
 import FlowModuleWrapper from './FlowModuleWrapper.svelte';
-export let noEditor = false;
-export let savedModule = undefined;
-const { flowStore } = getContext('FlowEditorContext');
+let { noEditor = false, savedModule = undefined } = $props();
+const { flowStore } = $state(getContext('FlowEditorContext'));
 </script>
 
 {#if flowStore.val.value.failure_module}