windmill-components 1.531.1 → 1.537.1

package/package/components/flows/FlowEditor.svelte

@@ -8,8 +8,9 @@ import { writable } from 'svelte/store';
 import FlowAIChat from '../copilot/chat/flow/FlowAIChat.svelte';
 import { aiChatManager, AIMode } from '../copilot/chat/AIChatManager.svelte';
 import { triggerableByAI } from '../../actions/triggerableByAI.svelte';
+import { extractAllModules } from '../copilot/chat/shared';
 const { flowStore } = getContext('FlowEditorContext');
-let { loading, disableStaticInputs = false, disableTutorials = false, disableAi = false, disableSettings = false, disabledFlowInputs = false, smallErrorHandler = false, showJobStatus = false, newFlow = false, savedFlow = undefined, onDeployTrigger = () => { }, onTestUpTo = undefined, onEditInput = undefined, forceTestTab, highlightArg, localModuleStates = {}, testModuleStates = undefined, aiChatOpen, showFlowAiButton, toggleAiChat, isOwner, onTestFlow, isRunning, onCancelTestFlow, onOpenPreview, onHideJobStatus, individualStepTests = false, job, suspendStatus, onDelete, flowHasChanged } = $props();
+let { loading, disableStaticInputs = false, disableTutorials = false, disableAi = false, disableSettings = false, disabledFlowInputs = false, smallErrorHandler = false, showJobStatus = false, newFlow = false, savedFlow = undefined, onDeployTrigger = () => { }, onTestUpTo = undefined, onEditInput = undefined, forceTestTab, highlightArg, localModuleStates = {}, testModuleStates = undefined, aiChatOpen, showFlowAiButton, toggleAiChat, isOwner, onTestFlow, isRunning, onCancelTestFlow, onOpenPreview, onHideJobStatus, individualStepTests = false, job, suspendStatus, onDelete, flowHasChanged, previewOpen } = $props();
 let flowModuleSchemaMap = $state();
 export function isNodeVisible(nodeId) {
     return flowModuleSchemaMap?.isNodeVisible(nodeId) ?? false;
@@ -18,10 +19,22 @@ setContext('PropPickerContext', {
     flowPropPickerConfig: writable(undefined),
     pickablePropertiesFiltered: writable(undefined)
 });
+$effect(() => {
+    const options = {
+        currentFlow: flowStore.val,
+        lastDeployedFlow: savedFlow,
+        lastSavedFlow: savedFlow?.draft,
+        path: savedFlow?.path,
+        modules: extractAllModules(flowStore.val.value.modules)
+    };
+    aiChatManager.flowOptions = options;
+});
 onMount(() => {
+    aiChatManager.saveAndClear();
     aiChatManager.changeMode(AIMode.FLOW);
 });
 onDestroy(() => {
+    aiChatManager.flowOptions = undefined;
     aiChatManager.changeMode(AIMode.NAVIGATOR);
 });
 </script>
@@ -105,6 +118,7 @@ onDestroy(() => {
 					{isOwner}
 					{suspendStatus}
 					onOpenDetails={onOpenPreview}
+					{previewOpen}
 				/>
 			{/if}
 		</Pane>

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

@@ -40,6 +40,7 @@ interface Props {
     }>>;
     onDelete?: (id: string) => void;
     flowHasChanged?: boolean;
+    previewOpen: boolean;
 }
 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/flows/FlowModuleIcon.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">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;
+</script>
+
+{#if module.value.type === 'aiagent'}
+	<Bot size={16} class="text-violet-800 dark:text-violet-400" />
+{:else if module.value.type === 'rawscript'}
+	<LanguageIcon lang={module.value.language} width={iconWidth} height={iconHeight} />
+{:else if module.summary === 'Terminate flow'}
+	<Square {size} />
+{:else if module.value.type === 'identity'}
+	<ArrowDown {size} />
+{:else if module.value.type === 'flow'}
+	<BarsStaggered {size} />
+{:else if module.value.type === 'forloopflow' || module.value.type === 'whileloopflow'}
+	<Repeat {size} />
+{:else if module.value.type === 'branchone' || module.value.type === 'branchall'}
+	<GitBranch {size} />
+{:else if module.value.type === 'script'}
+	{#if module.value.path.startsWith('hub/')}
+		<IconedResourceType
+			width={iconWidth.toString() + 'px'}
+			height={iconHeight.toString() + 'px'}
+			name={module.value.path.split('/')[2]}
+			silent={true}
+		/>
+	{:else}
+		<Building {size} />
+	{/if}
+{:else}
+	<!-- Fallback icon for unknown module types -->
+	<BarsStaggered {size} />
+{/if}

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

@@ -0,0 +1,10 @@
+import type { FlowModule } from '../../gen';
+interface Props {
+    module: FlowModule;
+    size?: number;
+    width?: number;
+    height?: number;
+}
+declare const FlowModuleIcon: import("svelte").Component<Props, {}, "">;
+type FlowModuleIcon = ReturnType<typeof FlowModuleIcon>;
+export default FlowModuleIcon;

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

@@ -47,7 +47,7 @@ $effect.pre(() => {
 </script>
 
 <div
-	class="overflow-x-auto scrollbar-hidden flex items-center justify-between px-4 py-1 flex-nowrap"
+	class="overflow-x-auto scrollbar-hidden flex items-center justify-between px-4 pt-1 pb-4 flex-nowrap"
 >
 	{#if flowModuleValue}
 		<span class="text-sm w-full mr-4">
@@ -129,6 +129,9 @@ $effect.pre(() => {
 				{:else if flowModuleValue.type === 'flow'}
 					<Badge color="indigo" capitalize>flow</Badge>
 					<input bind:value={summary} placeholder="Summary" class="w-full grow" />
+				{:else if flowModuleValue.type === 'aiagent'}
+					<Badge color="indigo">AI Agent</Badge>
+					<input bind:value={summary} placeholder="Summary" class="w-full grow" />
 				{/if}
 			</div>
 		</span>

package/package/components/flows/content/FlowBranchesAllWrapper.svelte

@@ -12,12 +12,18 @@ import FlowModuleDeleteAfterUse from './FlowModuleDeleteAfterUse.svelte';
 import { enterpriseLicense } from '../../../stores';
 import FlowModuleSkip from './FlowModuleSkip.svelte';
 import TabsV2 from '../../common/tabs/TabsV2.svelte';
+import { useUiIntent } from '../../copilot/chat/flow/useUiIntent';
 let { noEditor, flowModule = $bindable(), previousModule, parentModule } = $props();
 let value = $state(flowModule.value);
 $effect(() => {
     value = flowModule.value;
 });
 let selected = $state('early-stop');
+useUiIntent(`branchall-${flowModule.id}`, {
+    openTab: (tab) => {
+        selected = tab;
+    }
+});
 </script>
 
 <div class="h-full flex flex-col w-full" id="flow-editor-branch-all-wrapper">

package/package/components/flows/content/FlowBranchesOneWrapper.svelte

@@ -12,12 +12,18 @@ import SplitPanesWrapper from '../../splitPanes/SplitPanesWrapper.svelte';
 import FlowModuleMock from './FlowModuleMock.svelte';
 import { enterpriseLicense } from '../../../stores';
 import FlowModuleSkip from './FlowModuleSkip.svelte';
+import { useUiIntent } from '../../copilot/chat/flow/useUiIntent';
 let { flowModule = $bindable(), previousModule, parentModule, noEditor, enableAi = false } = $props();
 let value = $state(flowModule.value);
 $effect(() => {
     value = flowModule.value;
 });
 let selected = $state('early-stop');
+useUiIntent(`branchone-${flowModule.id}`, {
+    openTab: (tab) => {
+        selected = tab;
+    }
+});
 </script>
 
 <div class="h-full" id="flow-editor-branch-one-wrapper">

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

@@ -10,7 +10,7 @@ import TriggersEditor from '../../triggers/TriggersEditor.svelte';
 import { handleSelectTriggerFromKind } from '../../triggers/utils';
 import { computeMissingInputWarnings } from '../missingInputWarnings';
 import FlowResult from './FlowResult.svelte';
-let { noEditor = false, enableAi = false, newFlow = false, disabledFlowInputs = false, savedFlow = undefined, onDeployTrigger = () => { }, forceTestTab, highlightArg, onTestFlow, job, isOwner, suspendStatus, onOpenDetails } = $props();
+let { noEditor = false, enableAi = false, newFlow = false, disabledFlowInputs = false, savedFlow = undefined, onDeployTrigger = () => { }, forceTestTab, highlightArg, onTestFlow, job, isOwner, suspendStatus, onOpenDetails, previewOpen = false } = $props();
 const { selectedId, flowStore, flowStateStore, flowInputsStore, pathStore, initialPathStore, fakeInitialPath, previewArgs, flowInputEditorState } = getContext('FlowEditorContext');
 const { showCaptureHint, triggersState, triggersCount } = getContext('TriggerContext');
 function checkDup(modules) {
@@ -41,6 +41,7 @@ $effect(() => {
 		}}
 		on:applyArgs
 		{onTestFlow}
+		{previewOpen}
 	/>
 {:else if $selectedId === 'Result'}
 	<FlowResult {noEditor} {job} {isOwner} {suspendStatus} {onOpenDetails} />

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

@@ -20,6 +20,7 @@ interface Props {
         nb: number;
     }>>;
     onOpenDetails?: () => void;
+    previewOpen?: boolean;
 }
 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/flows/content/FlowInput.svelte

@@ -19,14 +19,14 @@ import CaptureButton from '../../triggers/CaptureButton.svelte';
 import { getFullPath, setNestedProperty, getNestedProperty, schemaFromDiff, computeDiff, applyDiff } from '../../schema/schemaUtils.svelte';
 import SideBarTab from '../../meltComponents/SideBarTab.svelte';
 import CaptureTable from '../../triggers/CaptureTable.svelte';
-import { isObjectTooBig } from '../../../utils';
+import { isObjectTooBig, readFieldsRecursively } from '../../../utils';
 import { refreshStateStore } from '../../../svelte5Utils.svelte';
-let { noEditor, disabled, onTestFlow } = $props();
+import { deepEqual } from 'fast-equals';
+let { noEditor, disabled, onTestFlow, previewOpen } = $props();
 const { flowStore, previewArgs, pathStore, initialPathStore, fakeInitialPath, flowInputEditorState } = getContext('FlowEditorContext');
 let addPropertyV2 = $state(undefined);
 let previewSchema = $state(undefined);
 let payloadData = undefined;
-let previewArguments = $state(previewArgs.val);
 let dropdownItems = $state([]);
 let diff = $state({});
 let editPanelSize = $state($flowInputEditorState?.editPanelSize ?? 0);
@@ -148,7 +148,9 @@ function schemaFromPayload(payloadData) {
 }
 function handleKeydown(event) {
     if ((event.metaKey || event.ctrlKey) && event.key === 'Enter') {
-        runPreview();
+        if (!previewOpen) {
+            runPreview();
+        }
     }
     else if (event.key === 'Enter' && previewSchema && !preventEnter) {
         applySchemaAndArgs();
@@ -158,9 +160,6 @@ function handleKeydown(event) {
     }
 }
 function runPreview() {
-    if (previewArguments) {
-        previewArgs.val = structuredClone($state.snapshot(previewArguments));
-    }
     onTestFlow?.();
 }
 function updatePreviewSchemaAndArgs(payload) {
@@ -198,8 +197,8 @@ async function updatePreviewSchema(newSchema) {
 }
 async function applySchemaAndArgs() {
     flowStore.val.schema = applyDiff(flowStore.val.schema, diff);
-    if (previewArguments) {
-        savedPreviewArgs = structuredClone($state.snapshot(previewArguments));
+    if (previewArgs.val) {
+        savedPreviewArgs = structuredClone($state.snapshot(previewArgs.val));
     }
     updatePreviewSchemaAndArgs(undefined);
     if ($flowInputEditorState) {
@@ -208,11 +207,13 @@ async function applySchemaAndArgs() {
 }
 function updatePreviewArguments(payloadData) {
     if (!payloadData) {
-        previewArguments = savedPreviewArgs;
+        if (savedPreviewArgs) {
+            previewArgs.val = savedPreviewArgs;
+        }
         return;
     }
-    savedPreviewArgs = structuredClone($state.snapshot(previewArguments));
-    previewArguments = structuredClone($state.snapshot(payloadData));
+    savedPreviewArgs = structuredClone($state.snapshot(previewArgs.val));
+    previewArgs.val = structuredClone($state.snapshot(payloadData));
 }
 let tabButtonWidth = 0;
 let connectFirstNode = $state(() => { });
@@ -267,10 +268,17 @@ function handleChange(arg, currentSchema, diffSchema, updateCurrentSchema) {
 }
 function resetArgs() {
     if (!previewSchema) {
-        // previewArguments = undefined
         savedPreviewArgs = undefined;
     }
 }
+$effect(() => {
+    if (!previewArgs && savedPreviewArgs != undefined) {
+        readFieldsRecursively(flowStore.val.schema);
+        untrack(() => {
+            resetArgs();
+        });
+    }
+});
 let historicInputs = $state(undefined);
 let captureTable = $state(undefined);
 let savedInputsPicker = $state(undefined);
@@ -295,9 +303,6 @@ function resetSelected() {
 				bind:this={editableSchemaForm}
 				bind:schema={flowStore.val.schema}
 				isFlowInput
-				on:edit={(e) => {
-					addPropertyV2?.openDrawer(e.detail)
-				}}
 				on:delete={(e) => {
 					addPropertyV2?.handleDeleteArgument([e.detail])
 				}}
@@ -305,7 +310,7 @@ function resetSelected() {
 				displayWebhookWarning
 				editTab={$flowInputEditorState?.selectedTab}
 				{previewSchema}
-				bind:args={previewArguments}
+				bind:args={previewArgs.val}
 				bind:editPanelSize={
 					() => {
 						return editPanelSize
@@ -331,15 +336,13 @@ function resetSelected() {
 					})
 				}}
 				shouldDispatchChanges={true}
-				on:change={() => {
-					previewArguments = previewArguments
+				onChange={() => {
 					if (!previewSchema) {
-						savedPreviewArgs = structuredClone($state.snapshot(previewArguments))
+						let args = $state.snapshot(previewArgs.val)
+						if (!deepEqual(args, savedPreviewArgs)) {
+							savedPreviewArgs = args
+						}
 					}
-					refreshStateStore(flowStore)
-				}}
-				on:schemaChange={() => {
-					resetArgs()
 				}}
 				bind:isValid
 				bind:dynSelectCode
@@ -408,15 +411,9 @@ function resetSelected() {
 						<AddPropertyV2
 							bind:schema={flowStore.val.schema}
 							bind:this={addPropertyV2}
-							on:change={() => {
-								refreshStateStore(flowStore)
-								if (editableSchemaForm) {
-									editableSchemaForm.updateJson()
-								}
-							}}
-							on:addNew={(e) => {
+							onAddNew={(argName) => {
 								handleEditSchema('inputEditor')
-								editableSchemaForm?.openField(e.detail)
+								editableSchemaForm?.openField(argName)
 								refreshStateStore(flowStore)
 							}}
 						>
@@ -493,7 +490,7 @@ function resetSelected() {
 								on:isEditing={(e) => {
 									preventEnter = e.detail
 								}}
-								previewArgs={previewArguments}
+								previewArgs={previewArgs.val}
 								{isValid}
 								limitPayloadSize
 								bind:this={savedInputsPicker}
@@ -516,7 +513,7 @@ function resetSelected() {
 								on:select={(e) => {
 									updatePreviewSchemaAndArgs(e.detail ?? undefined)
 								}}
-								selected={!!previewArguments}
+								selected={!!previewArgs.val}
 								bind:this={jsonInputs}
 							/>
 						</FlowInputEditor>

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

@@ -2,6 +2,7 @@ interface Props {
     noEditor: boolean;
     disabled: boolean;
     onTestFlow?: () => void;
+    previewOpen: boolean;
 }
 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/flows/content/FlowLoop.svelte

@@ -20,10 +20,17 @@ import FlowModuleSkip from './FlowModuleSkip.svelte';
 import FlowPlugConnect from '../../FlowPlugConnect.svelte';
 import PropPickerWrapper, { CONNECT } from '../propPicker/PropPickerWrapper.svelte';
 import TabsV2 from '../../common/tabs/TabsV2.svelte';
+import { useUiIntent } from '../../copilot/chat/flow/useUiIntent';
 const { previewArgs, flowStateStore, flowStore, currentEditor } = getContext('FlowEditorContext');
 let { mod = $bindable(), parentModule, previousModule, noEditor, enableAi = false } = $props();
 let editor = $state(undefined);
 let selected = $state('early-stop');
+// UI Intent handling for AI tool control
+useUiIntent(`forloopflow-${mod.id}`, {
+    openTab: (tab) => {
+        selected = tab;
+    }
+});
 const { flowPropPickerConfig } = getContext('PropPickerContext');
 flowPropPickerConfig.set(undefined);
 let stepPropPicker = $derived(getStepPropPicker(flowStateStore.val, parentModule, previousModule, mod.id, flowStore.val, previewArgs.val, false));

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

@@ -30,7 +30,7 @@ import InputTransformSchemaForm from '../../InputTransformSchemaForm.svelte';
 import FlowModuleMockTransitionMessage from './FlowModuleMockTransitionMessage.svelte';
 import Tooltip from '../../Tooltip.svelte';
 import { SecondsInput } from '../../common';
-import DiffEditor from '../../DiffEditor.svelte';
+import DiffEditor, {} from '../../DiffEditor.svelte';
 import FlowModuleTimeout from './FlowModuleTimeout.svelte';
 import HighlightCode from '../../HighlightCode.svelte';
 import ToggleButtonGroup from '../../common/toggleButton-v2/ToggleButtonGroup.svelte';
@@ -41,18 +41,29 @@ import { enterpriseLicense } from '../../../stores';
 import { isCloudHosted } from '../../../cloud';
 import { loadSchemaFromModule } from '../flowInfers';
 import FlowModuleSkip from './FlowModuleSkip.svelte';
-import { JobService } from '../../../gen';
+import {} from '../../../gen';
 import { workspaceStore } from '../../../stores';
 import { checkIfParentLoop } from '../utils';
 import ModulePreviewResultViewer from '../../ModulePreviewResultViewer.svelte';
 import { refreshStateStore } from '../../../svelte5Utils.svelte';
 import { getStepHistoryLoaderContext } from '../../stepHistoryLoader.svelte';
 import AssetsDropdownButton from '../../assets/AssetsDropdownButton.svelte';
+import { useUiIntent } from '../../copilot/chat/flow/useUiIntent';
+import { editor as meditor } from 'monaco-editor';
 const { selectedId, currentEditor, previewArgs, flowStateStore, flowStore, pathStore, saveDraft, customUi, executionCount } = getContext('FlowEditorContext');
 let { flowModule = $bindable(), failureModule = false, preprocessorModule = false, parentModule = $bindable(), previousModule, scriptKind = 'script', scriptTemplate = 'script', noEditor, enableAi, savedModule = undefined, forceTestTab = false, highlightArg = undefined, isAgentTool = false } = $props();
 let workspaceScriptTag = $state(undefined);
 let workspaceScriptLang = $state(undefined);
 let diffMode = $state(false);
+let diffButtons = $state([
+    {
+        text: 'Quit diff mode',
+        color: 'red',
+        onClick: () => {
+            hideDiffMode();
+        }
+    }
+]);
 let editor = $state();
 let diffEditor = $state();
 let modulePreview = $state();
@@ -69,11 +80,16 @@ let advancedRuntimeSelected = $state('concurrency');
 let s3Kind = $state('s3_client');
 let validCode = $state(true);
 let width = $state(1200);
-let lastJob = $state(undefined);
 let testJob = $state(undefined);
 let testIsLoading = $state(false);
 let scriptProgress = $state(undefined);
 let assets = $derived((flowModule.value.type === 'rawscript' && flowModule.value.assets) || []);
+// UI Intent handling for AI tool control
+useUiIntent(`flow-${flowModule.id}`, {
+    openTab: (tab) => {
+        selectAdvanced(tab);
+    }
+});
 function onModulesChange(savedModule, flowModule) {
     // console.log('onModulesChange', savedModule, flowModule)
     return savedModule?.value?.type === 'rawscript' &&
@@ -138,41 +154,16 @@ let forceReload = $state(0);
 let editorPanelSize = $state(noEditor ? 0 : flowModule.value.type == 'script' ? 30 : 50);
 let editorSettingsPanelSize = $state(100 - untrack(() => editorPanelSize));
 let stepHistoryLoader = getStepHistoryLoaderContext();
-let lastJobId = undefined;
 function onSelectedIdChange() {
     if (!flowStateStore?.val?.[$selectedId]?.schema && flowModule) {
         reload(flowModule);
     }
-    lastJobId = undefined;
-}
-async function getLastJob() {
-    if (!flowStateStore ||
-        !flowModule.id ||
-        flowStateStore.val[flowModule.id]?.previewResult === 'never tested this far' ||
-        !flowStateStore.val[flowModule.id]?.previewJobId) {
-        return;
-    }
-    if (lastJobId == flowStateStore.val[flowModule.id]?.previewJobId ||
-        lastJob?.id == flowStateStore.val[flowModule.id]?.previewJobId ||
-        flowStateStore.val[flowModule.id]?.previewSuccess == undefined) {
-        return;
-    }
-    lastJobId = flowStateStore.val[flowModule.id]?.previewJobId;
-    const job = await JobService.getJob({
-        workspace: $workspaceStore ?? '',
-        id: flowStateStore.val[flowModule.id]?.previewJobId ?? '',
-        noCode: true
-    });
-    if (job && job.type === 'CompletedJob') {
-        lastJobId = flowStateStore.val[flowModule.id]?.previewJobId;
-        lastJob = job;
-    }
 }
 let leftPanelSize = $state(0);
 function showDiffMode() {
     diffMode = true;
     diffEditor?.setOriginal((savedModule?.value).content ?? '');
-    diffEditor?.setModified(editor?.getCode() ?? '');
+    diffEditor?.setModifiedModel(editor?.getModel());
     diffEditor?.show();
     editor?.hide();
 }
@@ -188,14 +179,6 @@ let stepPropPicker = $derived($executionCount != undefined && failureModule
 $effect.pre(() => {
     $selectedId && untrack(() => onSelectedIdChange());
 });
-$effect(() => {
-    if (testJob && testJob.type === 'CompletedJob') {
-        lastJob = $state.snapshot(testJob);
-    }
-    else if ($workspaceStore && $pathStore && flowModule?.id && flowStateStore) {
-        untrack(() => getLastJob());
-    }
-});
 let parentLoop = $derived(flowStore.val && flowModule ? checkIfParentLoop(flowStore.val, flowModule.id) : undefined);
 $effect(() => {
     if (selected === 'test') {
@@ -214,7 +197,13 @@ $effect(() => {
             showDiffMode,
             hideDiffMode,
             diffMode,
-            lastDeployedCode
+            lastDeployedCode,
+            setDiffOriginal: (code) => {
+                diffEditor?.setOriginal(code ?? '');
+            },
+            setDiffButtons: (buttons) => {
+                diffButtons = buttons;
+            }
         });
 });
 onDestroy(() => {
@@ -234,6 +223,10 @@ $effect(() => {
     }
 });
 let rawScriptLang = $derived(flowModule.value.type == 'rawscript' ? flowModule.value.language : undefined);
+let modulePreviewResultViewer = $state(undefined);
+function onJobDone() {
+    modulePreviewResultViewer?.getOutputPickerInner()?.setJobPreview();
+}
 </script>
 
 <svelte:window onkeydown={onKeyDown} />
@@ -331,6 +324,7 @@ let rawScriptLang = $derived(flowModule.value.type == 'rawscript' ? flowModule.v
 							{lastDeployedCode}
 							{diffMode}
 							openAiChat
+							moduleId={flowModule.id}
 						/>
 					</div>
 				{/if}
@@ -389,17 +383,17 @@ let rawScriptLang = $derived(flowModule.value.type == 'rawscript' ? flowModule.v
 													{}
 												)}
 												key={`flow-inline-${$workspaceStore}-${$pathStore}-${flowModule.id}`}
+												moduleId={flowModule.id}
 											/>
 											<DiffEditor
 												open={false}
 												bind:this={diffEditor}
+												modifiedModel={editor?.getModel() as meditor.ITextModel}
 												automaticLayout
 												fixedOverflowWidgets
 												defaultLang={scriptLangToEditorLang(flowModule.value.language)}
-												class="h-full"
-												showButtons={diffMode}
-												showHistoryButton={false}
-												on:hideDiffMode={hideDiffMode}
+												className="h-full"
+												buttons={diffMode ? diffButtons : []}
 											/>
 										{/key}
 									{/if}
@@ -506,6 +500,7 @@ let rawScriptLang = $derived(flowModule.value.type == 'rawscript' ? flowModule.v
 												bind:testIsLoading
 												bind:scriptProgress
 												focusArg={highlightArg}
+												{onJobDone}
 											/>
 										{:else if selected === 'advanced'}
 											<Tabs bind:selected={advancedSelected}>
@@ -810,15 +805,15 @@ let rawScriptLang = $derived(flowModule.value.type == 'rawscript' ? flowModule.v
 												flowModule = flowModule
 												refreshStateStore(flowStore)
 											}}
-											{lastJob}
-											{scriptProgress}
 											{testJob}
+											{scriptProgress}
 											mod={flowModule}
 											{testIsLoading}
 											disableMock={preprocessorModule || failureModule}
 											disableHistory={failureModule}
 											loadingJob={stepHistoryLoader?.stepStates[flowModule.id]?.loadingJobs}
 											tagLabel={customUi?.tagLabel}
+											bind:this={modulePreviewResultViewer}
 										/>
 									</Pane>
 								{/if}

package/package/components/flows/content/FlowModuleScript.svelte

@@ -101,7 +101,7 @@ $effect.pre(() => {
 				{:then Module}
 					<Module.default
 						open={true}
-						class="h-screen"
+						className="h-screen"
 						readOnly
 						automaticLayout
 						defaultLang={scriptLangToEditorLang(language)}

package/package/components/flows/content/FlowModuleSuspend.svelte

@@ -1,5 +1,4 @@
-<script lang="ts">import { run } from 'svelte/legacy';
-import Toggle from '../../Toggle.svelte';
+<script lang="ts">import Toggle from '../../Toggle.svelte';
 import Tooltip from '../../Tooltip.svelte';
 import InputTransformForm from '../../InputTransformForm.svelte';
 import { getContext, tick, untrack } from 'svelte';
@@ -32,16 +31,29 @@ async function loadGroups() {
         }
     };
 }
-run(() => {
+$effect(() => {
     if ($workspaceStore && allUserGroups.length === 0) {
         untrack(() => {
             loadGroups();
         });
     }
 });
+$effect(() => {
+    // If the schema is empty, remove the form
+    if (Object.keys(flowModule?.suspend?.resume_form?.schema?.properties ?? {}).length === 0) {
+        untrack(() => {
+            tick().then(() => {
+                if (!flowModule.suspend)
+                    return;
+                flowModule.suspend.resume_form = undefined;
+            });
+        });
+    }
+});
 let jsonView = $state(false);
 </script>
 
+A{JSON.stringify(flowModule.suspend?.resume_form)}B
 <Section label="Suspend/Approval/Prompt" class="w-full">
 	{#snippet action()}
 		<SuspendDrawer text="Approval/Prompt helpers" />
@@ -216,21 +228,7 @@ let jsonView = $state(false);
 		<div class="grid grid-cols-4 mt-4 gap-8">
 			<div class="col-span-2">
 				{#if flowModule?.suspend?.resume_form}
-					<EditableSchemaDrawer
-						bind:schema={flowModule.suspend.resume_form.schema}
-						on:change={(e) => {
-							const schema = e.detail
-
-							// If the schema is empty, remove the form
-							if (Object.keys(schema?.properties ?? {}).length === 0) {
-								tick().then(() => {
-									if (!flowModule.suspend) return
-									flowModule.suspend.resume_form = undefined
-								})
-							}
-						}}
-						{jsonView}
-					/>
+					<EditableSchemaDrawer bind:schema={flowModule.suspend.resume_form.schema} {jsonView} />
 				{:else if emptyString($enterpriseLicense)}
 					<Alert type="warning" title="Adding a form to the approval page is an EE feature" />
 				{:else}

package/package/components/flows/content/FlowWhileLoop.svelte

@@ -15,6 +15,7 @@ import FlowLoopIterationPreview from '../../FlowLoopIterationPreview.svelte';
 import FlowModuleDeleteAfterUse from './FlowModuleDeleteAfterUse.svelte';
 import FlowModuleSkip from './FlowModuleSkip.svelte';
 import TabsV2 from '../../common/tabs/TabsV2.svelte';
+import { useUiIntent } from '../../copilot/chat/flow/useUiIntent';
 const { flowStateStore } = getContext('FlowEditorContext');
 let { mod = $bindable(), previousModule, parentModule, noEditor } = $props();
 let selected = $state('early-stop');
@@ -22,6 +23,11 @@ let previewOpen = $state(false);
 let jobId = $state(undefined);
 let job = $state(undefined);
 let previewIterationArgs = $derived(flowStateStore.val[mod.id]?.previewArgs ?? {});
+useUiIntent(`whileloopflow-${mod.id}`, {
+    openTab: (tab) => {
+        selected = tab;
+    }
+});
 </script>
 
 <Drawer bind:open={previewOpen} alwaysOpen size="75%">