windmill-components 1.531.1 → 1.537.1

package/package/components/EditableSchemaForm.svelte

@@ -11,22 +11,23 @@ import { twMerge } from 'tailwind-merge';
 import FlowPropertyEditor from './schema/FlowPropertyEditor.svelte';
 import PropertyEditor from './schema/PropertyEditor.svelte';
 import SimpleEditor from './SimpleEditor.svelte';
-import { createEventDispatcher, tick, untrack } from 'svelte';
+import { createEventDispatcher, untrack } from 'svelte';
 import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
 import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
 import Label from './Label.svelte';
 import { sendUserToast } from '../toast';
 import Toggle from './Toggle.svelte';
-import { DynamicSelect, emptyString } from '../utils';
+import { DynamicSelect, emptyString, generateRandomString, readFieldsRecursively } from '../utils';
 import Popover from './meltComponents/Popover.svelte';
 import SchemaFormDnd from './schema/SchemaFormDND.svelte';
 import { deepEqual } from 'fast-equals';
 import { tweened } from 'svelte/motion';
 import Section from './Section.svelte';
 import Editor from './Editor.svelte';
+import AddPropertyV2 from './schema/AddPropertyV2.svelte';
 // export let openEditTab: () => void = () => {}
 const dispatch = createEventDispatcher();
-let { schema = $bindable(), hiddenArgs = [], args = $bindable(undefined), shouldHideNoInputs = false, noVariablePicker = false, flexWrap = false, uiOnly = false, isFlowInput = false, noPreview = false, jsonEnabled = true, isAppInput = false, displayWebhookWarning = false, onlyMaskPassword = false, dndType = undefined, editTab, previewSchema = undefined, editPanelInitialSize = undefined, editPanelSize = $bindable(0), diff = {}, disableDnd = false, shouldDispatchChanges = false, isValid = $bindable(true), customUi = undefined, pannelExtraButtonWidth = 0, class: clazz = '', dynSelectCode = $bindable(), dynSelectLang = $bindable(), showDynSelectOpt = false, openEditTab, addProperty, runButton, extraTab } = $props();
+let { schema = $bindable(), hiddenArgs = [], args = $bindable(undefined), shouldHideNoInputs = false, noVariablePicker = false, flexWrap = false, uiOnly = false, isFlowInput = false, noPreview = false, jsonEnabled = true, isAppInput = false, displayWebhookWarning = false, onlyMaskPassword = false, editTab, previewSchema = undefined, editPanelInitialSize = undefined, editPanelSize = $bindable(0), diff = {}, disableDnd = false, shouldDispatchChanges = false, isValid = $bindable(true), customUi = undefined, pannelExtraButtonWidth = 0, class: clazz = '', dynSelectCode = $bindable(), dynSelectLang = $bindable(), showDynSelectOpt = false, addPropertyInEditorTab = false, openEditTab, addProperty, runButton, extraTab, schemaFormClassName = undefined, onChange = undefined } = $props();
 $effect.pre(() => {
     if (args == undefined) {
         args = {};
@@ -38,6 +39,12 @@ $effect.pre(() => {
         dynSelectCode = schema?.['x-windmill-dyn-select-code'] || '';
     }
 });
+$effect(() => {
+    if (onChange) {
+        readFieldsRecursively(args);
+        onChange(args ?? {});
+    }
+});
 $effect(() => {
     if (schema && dynSelectCode !== undefined && dynSelectLang !== undefined) {
         if (dynSelectCode && dynSelectCode.trim()) {
@@ -63,9 +70,9 @@ export function setDefaults() {
 let pickForField;
 let itemPicker = $state(undefined);
 let variableEditor = $state(undefined);
-let keys = $state(Array.isArray(schema?.order)
+let keys = $state((Array.isArray(schema?.order)
     ? [...schema.order]
-    : (Object.keys(schema?.properties ?? {}) ?? Object.keys(schema?.properties ?? {})));
+    : (Object.keys(schema?.properties ?? {}) ?? Object.keys(schema?.properties ?? {}))).filter((x) => !hiddenArgs?.includes(x)));
 function alignOrderWithProperties(schema) {
     if (schema.order == undefined && !Array.isArray(schema.order)) {
         schema.order = [];
@@ -91,22 +98,16 @@ function alignOrderWithProperties(schema) {
     return hasChanged;
 }
 function onSchemaChange() {
-    let editSchema = false;
     if (alignOrderWithProperties(schema)) {
-        console.log('alignOrderWithProperties', JSON.stringify(schema, null, 2));
-        editSchema = true;
+        // console.log('alignOrderWithProperties', JSON.stringify(schema, null, 2))
     }
-    let lkeys = schema?.order ?? Object.keys(schema?.properties ?? {});
+    let lkeys = (schema?.order ?? Object.keys(schema?.properties ?? {})).filter((x) => !hiddenArgs?.includes(x));
     if (schema?.properties && !deepEqual(lkeys, keys)) {
         keys = [...lkeys];
-        editSchema = true;
         if (opened == undefined) {
             opened = keys[0];
         }
     }
-    if (editSchema) {
-        schema = schema;
-    }
 }
 let opened = $state(untrack(() => keys[0]));
 function computeSelected(property) {
@@ -147,25 +148,25 @@ function renameProperty(oldName, key) {
         el.value = oldName;
     }
     else {
+        let newSchema = $state.snapshot(schema);
         if (args) {
             args[newName] = args[oldName];
             delete args[oldName];
         }
-        schema.properties[newName] = schema.properties[oldName];
-        delete schema.properties[oldName];
-        if (schema.required?.includes(oldName)) {
-            schema.required = schema.required?.map((x) => (x === oldName ? newName : x));
+        newSchema.properties[newName] = newSchema.properties[oldName];
+        delete newSchema.properties[oldName];
+        if (newSchema.required?.includes(oldName)) {
+            newSchema.required = newSchema.required?.map((x) => (x === oldName ? newName : x));
         }
         // Replace the old name with the new name in the order array
-        if (schema.order) {
-            const index = schema.order.indexOf(oldName);
+        if (newSchema.order) {
+            const index = newSchema.order.indexOf(oldName);
             if (index !== -1) {
-                schema.order[index] = newName;
+                newSchema.order[index] = newName;
             }
         }
         opened = newName;
-        schema = $state.snapshot(schema);
-        dispatch('change', schema);
+        schema = newSchema;
         sendUserToast('Argument renamed');
     }
 }
@@ -246,6 +247,7 @@ function updateDynSelectCode(functionName, lang = 'bun') {
     const code = generateFn(functionName);
     dynSelectCode = dynSelectCode ? dynSelectCode.concat(code) : code;
 }
+let dndType = $state(generateRandomString());
 </script>
 
 <div class="w-full h-full">
@@ -282,15 +284,15 @@ function updateDynSelectCode(functionName, lang = 'bun') {
 						class="min-h-0 overflow-y-auto grow rounded-md {runButton ? 'flex flex-col gap-2' : ''}"
 					>
 						<SchemaFormDnd
-							nestedClasses={'flex flex-col gap-1'}
+							{dndType}
+							nestedClasses={'flex flex-col gap-1 ' + (schemaFormClassName ?? '')}
 							bind:schema={
 								() => (previewSchema ? previewSchema : schema),
 								(newSchema) => {
 									schema = newSchema
-									tick().then(() => dispatch('change', schema))
 								}
 							}
-							{dndType}
+							{hiddenArgs}
 							{disableDnd}
 							{onlyMaskPassword}
 							bind:args
@@ -298,11 +300,16 @@ function updateDynSelectCode(functionName, lang = 'bun') {
 								opened = e.detail
 							}}
 							on:reorder={(e) => {
+								let order = e.detail
+								let newProperties = {}
+								for (let key of order) {
+									newProperties[key] = schema.properties[key]
+								}
 								schema = {
 									...schema,
+									properties: newProperties,
 									order: e.detail
 								}
-								tick().then(() => dispatch('change', schema))
 							}}
 							helperScript={{
 								type: 'inline',
@@ -314,9 +321,6 @@ function updateDynSelectCode(functionName, lang = 'bun') {
 							{diff}
 							on:acceptChange
 							on:rejectChange
-							on:nestedChange={() => {
-								dispatch('change', schema)
-							}}
 							{shouldDispatchChanges}
 							bind:isValid
 							noVariablePicker={noVariablePicker || customUi?.disableVariablePicker === true}
@@ -324,8 +328,8 @@ function updateDynSelectCode(functionName, lang = 'bun') {
 
 						{@render runButton?.()}
 
-						<div class="h-full">
-							{#if dynSelectFunctions.length > 0}
+						{#if dynSelectFunctions.length > 0}
+							<div class="grow">
 								<Section
 									label="Dynamic select functions"
 									collapsable={true}
@@ -372,8 +376,8 @@ function updateDynSelectCode(functionName, lang = 'bun') {
 										{/key}
 									</div>
 								</Section>
-							{/if}
-						</div>
+							</div>
+						{/if}
 					</div>
 				</div>
 			</Pane>
@@ -390,22 +394,31 @@ function updateDynSelectCode(functionName, lang = 'bun') {
 				{:else}
 					<!-- WIP -->
 					{#if jsonEnabled && customUi?.jsonOnly != true}
-						<div class="w-full p-3 flex justify-end">
-							<Toggle
-								bind:checked={jsonView}
-								label="JSON View"
-								size="xs"
-								options={{
-									right: 'JSON editor',
-									rightTooltip:
-										'Arguments can be edited either using the wizard, or by editing their JSON Schema.'
-								}}
-								lightMode
-								on:change={() => {
-									schemaString = JSON.stringify(schema, null, '\t')
-									editor?.setCode(schemaString)
-								}}
-							/>
+						<div class="w-full p-3 flex gap-4 justify-end items-center">
+							{#if addPropertyInEditorTab}
+								<AddPropertyV2 bind:schema>
+									{#snippet trigger()}
+										<Button color="light" size="xs" iconOnly startIcon={{ icon: Plus }} />
+									{/snippet}
+								</AddPropertyV2>
+							{/if}
+							<div class="shrink-0">
+								<Toggle
+									bind:checked={jsonView}
+									label="JSON View"
+									size="xs"
+									options={{
+										right: 'JSON editor',
+										rightTooltip:
+											'Arguments can be edited either using the wizard, or by editing their JSON Schema.'
+									}}
+									lightMode
+									on:change={() => {
+										schemaString = JSON.stringify(schema, null, '\t')
+										editor?.setCode(schemaString)
+									}}
+								/>
+							</div>
 						</div>
 					{/if}
 
@@ -498,7 +511,7 @@ function updateDynSelectCode(functionName, lang = 'bun') {
 										</div>
 										{#if opened === argName}
 											<div class="p-4 border-t">
-												{#if !hiddenArgs.includes(argName) && Object.keys(schema?.properties ?? {}).includes(argName)}
+												{#if Object.keys(schema?.properties ?? {}).includes(argName)}
 													{#if typeof args == 'object' && schema?.properties[argName]}
 														<PropertyEditor
 															bind:description={schema.properties[argName].description}
@@ -519,10 +532,6 @@ function updateDynSelectCode(functionName, lang = 'bun') {
 															bind:order={schema.properties[argName].order}
 															{isFlowInput}
 															{isAppInput}
-															on:change={() => {
-																schema = $state.snapshot(schema)
-																dispatch('change', schema)
-															}}
 														>
 															{#snippet typeeditor()}
 																{#if isFlowInput || isAppInput}
@@ -536,7 +545,6 @@ function updateDynSelectCode(functionName, lang = 'bun') {
 																					const isS3 = v == 'S3'
 																					const isOneOf = v == 'oneOf'
 																					const isDynSelect = v == 'dynselect'
-
 																					const emptyProperty = {
 																						contentEncoding: undefined,
 																						enum_: undefined,
@@ -612,13 +620,9 @@ function updateDynSelectCode(functionName, lang = 'bun') {
 																							type: v
 																						}
 																					}
+																					schema.properties = schema.properties
 																				}
 																			}
-																			on:selected={(e) => {
-																				schema = schema
-																				dispatch('change', schema)
-																				dispatch('schemaChange')
-																			}}
 																		>
 																			{#snippet children({ item })}
 																				{#each typeOptions as x}
@@ -632,6 +636,9 @@ function updateDynSelectCode(functionName, lang = 'bun') {
 
 															{#if isFlowInput || isAppInput}
 																<FlowPropertyEditor
+																	onDrawerClose={() => {
+																		dndType = generateRandomString()
+																	}}
 																	bind:defaultValue={schema.properties[argName].default}
 																	{variableEditor}
 																	{itemPicker}
@@ -662,12 +669,6 @@ function updateDynSelectCode(functionName, lang = 'bun') {
 																				(x) => x !== argName
 																			)
 																		}
-																		dispatch('change', schema)
-																	}}
-																	on:schemaChange={(e) => {
-																		schema = $state.snapshot(schema)
-																		dispatch('change', schema)
-																		dispatch('schemaChange')
 																	}}
 																/>
 															{/if}
@@ -692,7 +693,6 @@ function updateDynSelectCode(functionName, lang = 'bun') {
 									on:change={() => {
 										try {
 											schema = JSON.parse(schemaString)
-											dispatch('change', schema)
 											error = ''
 										} catch (err) {
 											error = err.message

package/package/components/EditableSchemaForm.svelte.d.ts

@@ -16,7 +16,6 @@ interface Props {
     isAppInput?: boolean;
     displayWebhookWarning?: boolean;
     onlyMaskPassword?: boolean;
-    dndType?: string | undefined;
     editTab: 'inputEditor' | 'history' | 'savedInputs' | 'json' | 'captures' | 'firstStepInputs' | undefined;
     previewSchema?: Record<string, any> | undefined;
     editPanelInitialSize?: number | undefined;
@@ -31,10 +30,13 @@ interface Props {
     dynSelectCode?: string | undefined;
     dynSelectLang?: ScriptLang | undefined;
     showDynSelectOpt?: boolean;
+    addPropertyInEditorTab?: boolean;
     openEditTab?: import('svelte').Snippet;
     addProperty?: import('svelte').Snippet;
     runButton?: import('svelte').Snippet;
     extraTab?: import('svelte').Snippet;
+    schemaFormClassName?: string;
+    onChange?: (args: Record<string, any>) => void;
 }
 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> & {
@@ -52,9 +54,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 declare const EditableSchemaForm: $$__sveltets_2_IsomorphicComponent<Props, {
     acceptChange: CustomEvent<any>;
     rejectChange: CustomEvent<any>;
-    change: CustomEvent<any>;
     delete: CustomEvent<any>;
-    schemaChange: CustomEvent<any>;
     editPanelSizeChanged: CustomEvent<any>;
 } & {
     [evt: string]: CustomEvent<any>;

package/package/components/Editor.svelte

@@ -107,14 +107,14 @@ import AIChatInlineWidget from './copilot/chat/AIChatInlineWidget.svelte';
 import { writable } from 'svelte/store';
 import { formatResourceTypes } from './copilot/chat/script/core';
 import FakeMonacoPlaceHolder from './FakeMonacoPlaceHolder.svelte';
-import { editorPositionMap, readFieldsRecursively } from '../utils';
+import { editorPositionMap } from '../utils';
 import { extToLang, langToExt } from '../editorLangUtils';
 import { aiChatManager } from './copilot/chat/AIChatManager.svelte';
 import { getDbSchemas } from './apps/components/display/dbtable/utils';
 // import EditorTheme from './EditorTheme.svelte'
 let divEl = $state(null);
 let editor = $state(null);
-let { code = $bindable(), cmdEnterAction = undefined, formatAction = undefined, automaticLayout = true, websocketAlive = $bindable(), shouldBindKey = true, fixedOverflowWidgets = true, path = undefined, yContent = undefined, awareness = undefined, folding = false, args = undefined, useWebsockets = true, small = false, scriptLang, disabled = false, lineNumbersMinChars = 3, files = {}, extraLib = undefined, changeTimeout = 500, loadAsync = false, key = undefined, class: clazz = undefined } = $props();
+let { code = $bindable(), cmdEnterAction = undefined, formatAction = undefined, automaticLayout = true, websocketAlive = $bindable(), shouldBindKey = true, fixedOverflowWidgets = true, path = undefined, yContent = undefined, awareness = undefined, folding = false, args = undefined, useWebsockets = true, small = false, scriptLang, disabled = false, lineNumbersMinChars = 3, files = {}, extraLib = undefined, changeTimeout = 500, loadAsync = false, key = undefined, class: clazz = undefined, moduleId = undefined } = $props();
 $effect.pre(() => {
     if (websocketAlive == undefined) {
         websocketAlive = {
@@ -406,8 +406,7 @@ function addSqlTypeCompletions() {
     });
 }
 let sqlSchemaCompletor = undefined;
-async function updateSchema() {
-    const newSchemaRes = lang === 'graphql' ? args?.api : args?.database;
+async function updateSchema(newSchemaRes) {
     if (typeof newSchemaRes === 'string') {
         const resourcePath = newSchemaRes.replace('$res:', '');
         dbSchema = $dbSchemas[resourcePath];
@@ -530,7 +529,16 @@ let showInlineAIChat = $state(false);
 let inlineAIChatSelection = $state(null);
 let selectedCode = $state('');
 export function reviewAndApplyCode(code, applyAll = false) {
-    aiChatEditorHandler?.reviewAndApply(code, applyAll);
+    aiChatEditorHandler?.reviewChanges(code, { applyAll, mode: 'apply' });
+}
+export function reviewAppliedCode(originalCode, opts) {
+    aiChatEditorHandler?.reviewChanges(originalCode, {
+        mode: 'revert',
+        onFinishedReview: opts?.onFinishedReview
+    });
+}
+export function getAiChatEditorHandler() {
+    return aiChatEditorHandler;
 }
 function addChatHandler(editor) {
     try {
@@ -1077,7 +1085,7 @@ async function loadMonaco() {
                 (selection.startLineNumber !== selection.endLineNumber ||
                     selection.startColumn !== selection.endColumn);
             if (hasSelection && selectedLines) {
-                aiChatManager.addSelectedLinesToContext(selectedLines, selection.startLineNumber, selection.endLineNumber);
+                aiChatManager.addSelectedLinesToContext(selectedLines, selection.startLineNumber, selection.endLineNumber, moduleId);
             }
             else {
                 aiChatManager.toggleOpen();
@@ -1322,10 +1330,13 @@ $effect(() => {
         ? untrack(() => addSqlTypeCompletions())
         : sqlTypeCompletor?.dispose();
 });
+let lastArg = undefined;
 $effect(() => {
-    console.log('updating schema', lang, $dbSchemas);
-    readFieldsRecursively(args);
-    lang && $dbSchemas && untrack(() => updateSchema());
+    let newArg = lang === 'graphql' ? args?.api : args?.database;
+    if (newArg !== lastArg) {
+        lastArg = newArg;
+        $dbSchemas && untrack(() => updateSchema(newArg));
+    }
 });
 $effect(() => {
     console.log('updating db schema completions', dbSchema, lang);
@@ -1396,10 +1407,20 @@ $effect(() => {
 {#if $reviewingChanges}
 	<GlobalReviewButtons
 		onAcceptAll={() => {
-			aiChatEditorHandler?.acceptAll()
+			const mode = aiChatEditorHandler?.getReviewMode?.()
+			if (mode === 'revert') {
+				aiChatEditorHandler?.keepAll()
+			} else {
+				aiChatEditorHandler?.acceptAll()
+			}
 		}}
 		onRejectAll={() => {
-			aiChatEditorHandler?.rejectAll()
+			const mode = aiChatEditorHandler?.getReviewMode?.()
+			if (mode === 'revert') {
+				aiChatEditorHandler?.revertAll()
+			} else {
+				aiChatEditorHandler?.rejectAll()
+			}
 		}}
 	/>
 {/if}

package/package/components/Editor.svelte.d.ts

@@ -4,6 +4,7 @@ import { type Preview } from '../gen';
 import type { Text } from 'yjs';
 import { editor as meditor, type IDisposable } from 'monaco-editor';
 import { type DepsToGet } from '../ata/index';
+import { AIChatEditorHandler } from './copilot/chat/monaco-adapter';
 interface Props {
     code?: string;
     cmdEnterAction?: (() => void) | undefined;
@@ -31,6 +32,7 @@ interface Props {
     loadAsync?: boolean;
     key?: string | undefined;
     class?: string | undefined;
+    moduleId?: string;
 }
 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> & {
@@ -72,6 +74,10 @@ declare const Editor: $$__sveltets_2_IsomorphicComponent<Props, {
     format: () => Promise<void>;
     getScriptLang: () => string | undefined;
     reviewAndApplyCode: (code: string, applyAll?: boolean) => void;
+    reviewAppliedCode: (originalCode: string, opts?: {
+        onFinishedReview?: () => void;
+    }) => void;
+    getAiChatEditorHandler: () => AIChatEditorHandler | undefined;
     reloadWebsocket: () => Promise<void>;
     fetchPackageDeps: (deps: DepsToGet) => Promise<void>;
     addAction: (id: string, label: string, callback: (editor: meditor.IStandaloneCodeEditor) => void, keybindings?: number[]) => void;

package/package/components/EditorBar.svelte

@@ -31,7 +31,7 @@ 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 { 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, moduleId = undefined } = $props();
 let contextualVariablePicker = $state();
 let variablePicker = $state();
 let resourcePicker = $state();
@@ -870,7 +870,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 
 			{#if customUi?.aiGen != false}
 				{#if openAiChat}
-					<FlowInlineScriptAiButton />
+					<FlowInlineScriptAiButton {moduleId} />
 				{:else}
 					<ScriptGen {editor} {diffEditor} {lang} {iconOnly} {args} />
 				{/if}

package/package/components/EditorBar.svelte.d.ts

@@ -33,6 +33,7 @@ interface Props {
     showHistoryDrawer?: boolean;
     right?: import('svelte').Snippet;
     openAiChat?: boolean;
+    moduleId?: string;
 }
 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> & {

package/package/components/FieldHeader.svelte

@@ -38,7 +38,7 @@ export let simpleTooltipIconClass = '';
 	{/if}
 
 	{#if displayType}
-		{#if format && !format.startsWith('resource')}
+		{#if format && !format.startsWith('resource') && !format.startsWith('jsonschema-')}
 			<span class="text-xs italic ml-2 text-tertiary dark:text-indigo-400">
 				{format}
 			</span>

package/package/components/FlowBuilder.svelte

@@ -33,7 +33,7 @@ import DeployButton from './DeployButton.svelte';
 import { deployTriggers, filterDraftTriggers, handleSelectTriggerFromKind } from './triggers/utils';
 import DraftTriggersConfirmationModal from './common/confirmationModal/DraftTriggersConfirmationModal.svelte';
 import { Triggers } from './triggers/triggers.svelte';
-import { TestSteps } from './flows/testSteps.svelte';
+import { StepsInputArgs } from './flows/stepsInputArgs.svelte';
 import { aiChatManager } from './copilot/chat/AIChatManager.svelte';
 import { setStepHistoryLoaderContext, StepHistoryLoader } from './stepHistoryLoader.svelte';
 import { ModulesTestStates } from './modulesTest.svelte';
@@ -440,7 +440,7 @@ const flowInputEditorStateStore = writable({
     editPanelSize: 0,
     payloadData: undefined
 });
-const testSteps = new TestSteps();
+const stepsInputArgs = new StepsInputArgs();
 function select(selectedId) {
     selectedIdStore.set(selectedId);
 }
@@ -458,7 +458,7 @@ setContext('FlowEditorContext', {
     flowStateStore,
     flowStore,
     pathStore,
-    testSteps,
+    stepsInputArgs,
     saveDraft,
     initialPathStore,
     fakeInitialPath,
@@ -909,6 +909,8 @@ const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 						bind:this={flowPreviewButtons}
 						{loading}
 						onRunPreview={() => {
+							// Reset manually edited args inputs when running a preview
+							stepsInputArgs.resetManuallyEditedArgs()
 							modulesTestStates.hideJobsInGraph()
 							localModuleStates = {}
 							showJobStatus = true
@@ -950,7 +952,7 @@ const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 					{newFlow}
 					on:applyArgs={(ev) => {
 						if (ev.detail.kind === 'preprocessor') {
-							testSteps.setStepArgs('preprocessor', ev.detail.args ?? {})
+							stepsInputArgs.setStepArgs('preprocessor', ev.detail.args ?? {})
 							$selectedIdStore = 'preprocessor'
 						}
 					}}
@@ -998,6 +1000,7 @@ const flowHasChanged = $derived(flowPreviewContent?.flowHasChanged());
 						delete modulesTestStates.states[id]
 					}}
 					{flowHasChanged}
+					previewOpen={flowPreviewButtons?.getPreviewOpen()}
 				/>
 			{:else}
 				<CenteredPage>Loading...</CenteredPage>

package/package/components/FlowPreviewContent.svelte

@@ -67,7 +67,7 @@ export async function runPreview(args, restartedFrom) {
         jobId = await runFlowPreview(args, newFlow, $pathStore, restartedFrom);
         isRunning = true;
         if (inputSelected) {
-            savedArgs = previewArgs.val;
+            savedArgs = $state.snapshot(previewArgs.val);
             inputSelected = undefined;
         }
         onRunPreview?.();
@@ -92,7 +92,7 @@ function onKeyDown(event) {
                 if (preventEscape) {
                     selectInput(undefined);
                     event.preventDefault();
-                    event.stopPropagation;
+                    event.stopPropagation();
                 }
                 break;
         }
@@ -423,7 +423,7 @@ export function flowHasChanged() {
 									schema={flowStore.val.schema}
 									bind:args={previewArgs.val}
 									on:change={() => {
-										savedArgs = previewArgs.val
+										savedArgs = $state.snapshot(previewArgs.val)
 									}}
 									bind:isValid
 									helperScript={flowStore.val.schema?.['x-windmill-dyn-select-code'] &&

package/package/components/FlowStatusViewer.svelte

@@ -43,6 +43,8 @@ let refreshGlobal = async (moduleId, clear, root) => {
 let updateGlobalRefresh = (moduleId, updateFn) => {
     globalRefreshes[moduleId] = [...(globalRefreshes[moduleId] ?? []), updateFn];
 };
+let storedToolCallJobs = $state({});
+let toolCallIndicesToLoad = $state([]);
 </script>
 
 <FlowStatusViewerInner
@@ -74,4 +76,30 @@ let updateGlobalRefresh = (moduleId, updateFn) => {
 	isNodeSelected={true}
 	{refreshGlobal}
 	{updateGlobalRefresh}
+	toolCallStore={{
+		getStoredToolCallJob: (storeKey: string) => storedToolCallJobs[storeKey],
+		setStoredToolCallJob: (storeKey: string, job: Job) => {
+			storedToolCallJobs[storeKey] = job
+		},
+		getLocalToolCallJobs: (prefix: string) => {
+			// we return a map from tool call index to job
+			// to do so, we filter the storedToolCallJobs object by the prefix and we make sure what's left in the key is a tool call index: 2 part of format agentModuleId-toolCallIndex
+			// and not a further nested tool call index
+			return Object.fromEntries(
+				Object.entries(storedToolCallJobs)
+					.filter(
+						([key]) => key.startsWith(prefix) && key.replace(prefix, '').split('-').length === 2
+					)
+					.map(([key, job]) => [Number(key.replace(prefix, '').split('-').pop()), job])
+			)
+		},
+		isToolCallToBeLoaded: (storeKey: string) => {
+			return toolCallIndicesToLoad.includes(storeKey)
+		},
+		addToolCallToLoad: (storeKey: string) => {
+			if (!toolCallIndicesToLoad.includes(storeKey)) {
+				toolCallIndicesToLoad.push(storeKey)
+			}
+		}
+	}}
 />