windmill-components 1.493.10 → 1.501.5

package/package/components/FlowBuilder.svelte

@@ -1,30 +1,26 @@
-<script lang="ts">import { FlowService, DraftService, ScriptService, CaptureService } from '../gen';
-import { initHistory, push, redo, undo } from '../history';
-import { copilotInfo, enterpriseLicense, tutorialsToDo, userStore, workspaceStore, usedTriggerKinds } from '../stores';
-import { cleanValueProperties, encodeState, generateRandomString, orderedJsonStringify, replaceFalseWithUndefined, sleep } from '../utils';
+<script lang="ts">import { FlowService, DraftService, CaptureService } from '../gen';
+import { initHistory, redo, undo } from '../history';
+import { enterpriseLicense, tutorialsToDo, userStore, workspaceStore, usedTriggerKinds } from '../stores';
+import { cleanValueProperties, encodeState, generateRandomString, orderedJsonStringify, readFieldsRecursively, replaceFalseWithUndefined } from '../utils';
 import { sendUserToast } from '../toast';
 import { Drawer } from './common';
 import DeployOverrideConfirmationModal from './common/confirmationModal/DeployOverrideConfirmationModal.svelte';
-import { onMount, setContext, tick } from 'svelte';
+import AIChangesWarningModal from './copilot/chat/flow/AIChangesWarningModal.svelte';
+import { onMount, setContext, untrack } from 'svelte';
 import { writable } from 'svelte/store';
 import CenteredPage from './CenteredPage.svelte';
 import { Badge, Button, UndoRedo } from './common';
 import FlowEditor from './flows/FlowEditor.svelte';
 import ScriptEditorDrawer from './flows/content/ScriptEditorDrawer.svelte';
 import { dfs as dfsApply } from './flows/dfs';
-import { dfs, getPreviousIds } from './flows/previousResults';
 import FlowImportExportMenu from './flows/header/FlowImportExportMenu.svelte';
 import FlowPreviewButtons from './flows/header/FlowPreviewButtons.svelte';
-import { cleanInputs, emptyFlowModuleState } from './flows/utils';
-import { Calendar, Pen, Save, DiffIcon, HistoryIcon, FileJson } from 'lucide-svelte';
+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';
-import { stepCopilot, glueCopilot } from './copilot/flow';
-import FlowCopilotDrawer from './copilot/FlowCopilotDrawer.svelte';
-import FlowCopilotStatus from './copilot/FlowCopilotStatus.svelte';
-import { fade } from 'svelte/transition';
-import { loadFlowModuleState, pickScript } from './flows/flowStateUtils';
-import FlowCopilotInputsModal from './copilot/FlowCopilotInputsModal.svelte';
+import {} from './copilot/flow';
+import { loadFlowModuleState } from './flows/flowStateUtils.svelte';
 import FlowBuilderTutorials from './FlowBuilderTutorials.svelte';
 import Dropdown from './DropdownV2.svelte';
 import FlowTutorials from './FlowTutorials.svelte';
@@ -37,27 +33,11 @@ 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';
-export let initialPath = '';
-export let pathStoreInit = undefined;
-export let newFlow;
-export let selectedId;
-export let initialArgs = {};
-export let loading = false;
-export let flowStore;
-export let flowStateStore;
-export let savedFlow = undefined;
-export let diffDrawer = undefined;
-export let customUi = {};
-export let disableAi = false;
-export let disabledFlowInputs = false;
-export let savedPrimarySchedule = undefined; // used to set the primary schedule in the legacy primaryScheduleStore
-export let version = undefined;
-export let setSavedraftCb = undefined;
-export let draftTriggersFromUrl = undefined;
-export let selectedTriggerIndexFromUrl = undefined;
-export let onevent = {};
+import { TestSteps } from './flows/testSteps.svelte';
+import { aiChatManager } from './copilot/chat/AIChatManager.svelte';
+import { setStepHistoryLoaderContext, StepHistoryLoader } from './stepHistoryLoader.svelte';
+let { initialPath = $bindable(''), pathStoreInit = undefined, newFlow, selectedId, initialArgs = {}, loading = false, flowStore, flowStateStore, savedFlow = $bindable(undefined), diffDrawer = undefined, customUi = {}, disableAi = false, disabledFlowInputs = false, savedPrimarySchedule = undefined, version = undefined, setSavedraftCb = undefined, draftTriggersFromUrl = undefined, selectedTriggerIndexFromUrl = undefined, children, loadedFromHistoryFromUrl, noInitial = false, onSaveInitial, onSaveDraft, onDeploy, onDeployError, onDetails, onSaveDraftError, onSaveDraftOnlyAtNewPath, onHistoryRestore } = $props();
 let initialPathStore = writable(initialPath);
-$: initialPathStore.set(initialPath);
 // used for new flows for captures
 let fakeInitialPath = 'u/' +
     ($userStore?.username?.includes('@')
@@ -66,25 +46,42 @@ let fakeInitialPath = 'u/' +
     '/' +
     generateRandomString(12);
 // Used by multiplayer deploy collision warning
-let deployedValue = undefined; // Value to diff against
-let deployedBy = undefined; // Author
-let confirmCallback = () => { }; // What happens when user clicks `override` in warning
-let open = false; // Is confirmation modal open
+let deployedValue = $state(undefined); // Value to diff against
+let deployedBy = $state(undefined); // Author
+let confirmCallback = $state(() => { }); // What happens when user clicks `override` in warning
+let open = $state(false); // Is confirmation modal open
 // Draft triggers confirmation modal
-let draftTriggersModalOpen = false;
+let draftTriggersModalOpen = $state(false);
 let confirmDeploymentCallback = () => { };
+// AI changes warning modal
+let aiChangesWarningOpen = $state(false);
+let aiChangesConfirmCallback = $state(() => { });
 async function handleDraftTriggersConfirmed(event) {
     const { selectedTriggers } = event.detail;
     // Continue with saving the flow
     draftTriggersModalOpen = false;
     confirmDeploymentCallback(selectedTriggers);
 }
-$: setContext('customUi', customUi);
+function hasAIChanges() {
+    return aiChatManager.flowAiChatHelpers?.hasDiff() ?? false;
+}
+function withAIChangesWarning(callback) {
+    if (hasAIChanges()) {
+        aiChangesConfirmCallback = () => {
+            aiChatManager.flowAiChatHelpers?.rejectAllModuleActions();
+            callback();
+        };
+        aiChangesWarningOpen = true;
+    }
+    else {
+        callback();
+    }
+}
 export function getInitialAndModifiedValues() {
     return {
         savedValue: savedFlow,
         modifiedValue: {
-            ...$flowStore,
+            ...flowStore.val,
             draft_triggers: structuredClone(triggersState.getDraftTriggersSnapshot())
         }
     };
@@ -128,26 +125,31 @@ export function setDraftTriggers(triggers) {
 export function setSelectedTriggerIndex(index) {
     triggersState.selectedTriggerIndex = index;
 }
-let loadingSave = false;
-let loadingDraft = false;
+let loadingSave = $state(false);
+let loadingDraft = $state(false);
 export async function saveDraft(forceSave = false) {
+    withAIChangesWarning(async () => {
+        await saveDraftInternal(forceSave);
+    });
+}
+async function saveDraftInternal(forceSave = false) {
     if (!newFlow && !savedFlow) {
         return;
     }
     if (savedFlow) {
         const draftOrDeployed = cleanValueProperties(savedFlow.draft || savedFlow);
         const currentDraftTriggers = structuredClone(triggersState.getDraftTriggersSnapshot());
-        const current = cleanValueProperties({
-            ...$flowStore,
+        const current = cleanValueProperties($state.snapshot({
+            ...flowStore.val,
             path: $pathStore,
             draft_triggers: currentDraftTriggers
-        });
+        }));
         if (!forceSave && orderedJsonStringify(draftOrDeployed) === orderedJsonStringify(current)) {
             sendUserToast('No changes detected, ignoring', false, [
                 {
                     label: 'Save anyway',
                     callback: () => {
-                        saveDraft(true);
+                        saveDraftInternal(true);
                     }
                 }
             ]);
@@ -156,7 +158,7 @@ export async function saveDraft(forceSave = false) {
     }
     loadingDraft = true;
     try {
-        const flow = cleanInputs($flowStore);
+        const flow = cleanInputs(flowStore.val);
         try {
             localStorage.removeItem('flow');
             localStorage.removeItem(`flow-${$pathStore}`);
@@ -213,33 +215,33 @@ export async function saveDraft(forceSave = false) {
         savedFlow = {
             ...(newFlow || savedFlow?.draft_only
                 ? {
-                    ...structuredClone($flowStore),
+                    ...structuredClone($state.snapshot(flowStore.val)),
                     path: $pathStore,
                     draft_only: true
                 }
                 : savedFlow),
             draft: {
-                ...structuredClone($flowStore),
+                ...structuredClone($state.snapshot(flowStore.val)),
                 path: $pathStore,
                 draft_triggers: structuredClone(triggersState.getDraftTriggersSnapshot())
             }
         };
         let savedAtNewPath = false;
         if (newFlow) {
-            onevent.saveInitial?.($pathStore);
+            onSaveInitial?.({ path: $pathStore, id: getSelectedId() });
         }
         else if (savedFlow?.draft_only && $pathStore !== initialPath) {
             savedAtNewPath = true;
             initialPath = $pathStore;
+            onSaveDraftOnlyAtNewPath?.({ path: $pathStore, selectedId: getSelectedId() });
             // this is so we can use the flow builder outside of sveltekit
-            onevent.saveDraftOnlyAtNewPath?.({ path: $pathStore, selectedId: getSelectedId() });
         }
-        onevent.saveDraft?.({ path: $pathStore, savedAtNewPath, newFlow });
+        onSaveDraft?.({ path: $pathStore, savedAtNewPath, newFlow });
         sendUserToast('Saved as draft');
     }
     catch (error) {
         sendUserToast(`Error while saving the flow as a draft: ${error.body || error.message}`, true);
-        onevent.saveDraftError?.(error);
+        onSaveDraftError?.({ error });
     }
     loadingDraft = false;
 }
@@ -252,6 +254,11 @@ export function computeUnlockedSteps(flow) {
         .map((m) => [m.id, m.value.path]));
 }
 async function handleSaveFlow(deploymentMsg) {
+    withAIChangesWarning(async () => {
+        await handleSaveFlowInternal(deploymentMsg);
+    });
+}
+async function handleSaveFlowInternal(deploymentMsg) {
     await compareVersions();
     if (onLatest || initialPath == '' || savedFlow?.draft_only) {
         // Handle directly
@@ -261,9 +268,9 @@ async function handleSaveFlow(deploymentMsg) {
         // We need it for diff
         await syncWithDeployed();
         if (deployedValue &&
-            $flowStore &&
+            flowStore.val &&
             orderedJsonStringify(deployedValue) ===
-                orderedJsonStringify(replaceFalseWithUndefined({ ...$flowStore, path: $pathStore }))) {
+                orderedJsonStringify(replaceFalseWithUndefined({ ...flowStore.val, path: $pathStore }))) {
             await saveFlow(deploymentMsg);
         }
         else {
@@ -304,7 +311,7 @@ async function saveFlow(deploymentMsg, triggersToDeploy) {
     }
     loadingSave = true;
     try {
-        const flow = cleanInputs($flowStore);
+        const flow = cleanInputs(flowStore.val);
         // console.log('flow', computeUnlockedSteps(flow)) // del
         // loadingSave = false // del
         // return
@@ -372,37 +379,37 @@ async function saveFlow(deploymentMsg, triggersToDeploy) {
                 }
             });
         }
-        const { draft_triggers: _, ...newSavedFlow } = $flowStore;
+        const { draft_triggers: _, ...newSavedFlow } = flowStore.val;
         savedFlow = {
-            ...structuredClone(newSavedFlow),
+            ...structuredClone($state.snapshot(newSavedFlow)),
             path: $pathStore
         };
         setDraftTriggers([]);
         loadingSave = false;
-        onevent.deploy?.($pathStore);
+        onDeploy?.({ path: $pathStore });
     }
     catch (err) {
-        onevent.deployError?.(err);
-        sendUserToast(`The flow could not be saved: ${err.body}`, true);
+        onDeployError?.({ error: err });
+        // this is so we can use the flow builder outside of sveltekit
+        sendUserToast(`The flow could not be saved: ${err.body ?? err}`, true);
         loadingSave = false;
     }
 }
 let timeout = undefined;
-$: {
-    if ($flowStore || $selectedIdStore) {
-        saveSessionDraft();
-    }
-}
 function saveSessionDraft() {
     timeout && clearTimeout(timeout);
     timeout = setTimeout(() => {
         try {
             localStorage.setItem(initialPath && initialPath != '' ? `flow-${initialPath}` : 'flow', encodeState({
-                flow: $flowStore,
+                flow: flowStore.val,
                 path: $pathStore,
                 selectedId: $selectedIdStore,
                 draft_triggers: triggersState.getDraftTriggersSnapshot(),
-                selected_trigger: triggersState.getSelectedTriggerSnapshot()
+                selected_trigger: triggersState.getSelectedTriggerSnapshot(),
+                loadedFromHistory: {
+                    flowJobInitial: stepHistoryLoader.flowJobInitial,
+                    stepsState: stepHistoryLoader.stepStates
+                }
             }));
         }
         catch (err) {
@@ -414,10 +421,10 @@ const selectedIdStore = writable(selectedId ?? 'settings-metadata');
 export function getSelectedId() {
     return $selectedIdStore;
 }
-const previewArgsStore = writable(initialArgs);
+const previewArgsStore = $state({ val: initialArgs });
 const scriptEditorDrawer = writable(undefined);
 const moving = writable(undefined);
-const history = initHistory($flowStore);
+const history = initHistory(flowStore.val);
 const pathStore = writable(pathStoreInit ?? initialPath);
 const captureOn = writable(false);
 const showCaptureHint = writable(undefined);
@@ -426,14 +433,14 @@ const flowInputEditorStateStore = writable({
     editPanelSize: 0,
     payloadData: undefined
 });
-$: initialPath && ($pathStore = initialPath);
-const testStepStore = writable({});
+const testSteps = new TestSteps();
 function select(selectedId) {
     selectedIdStore.set(selectedId);
 }
 let insertButtonOpen = writable(false);
 setContext('FlowEditorContext', {
     selectedId: selectedIdStore,
+    currentEditor: writable(undefined),
     previewArgs: previewArgsStore,
     scriptEditorDrawer,
     moving,
@@ -441,7 +448,7 @@ setContext('FlowEditorContext', {
     flowStateStore,
     flowStore,
     pathStore,
-    testStepStore,
+    testSteps,
     saveDraft,
     initialPathStore,
     fakeInitialPath,
@@ -452,11 +459,11 @@ setContext('FlowEditorContext', {
     flowInputEditorState: flowInputEditorStateStore
 });
 // Add triggers context store
-const triggersState = new Triggers([
+const triggersState = $state(new Triggers([
     { type: 'webhook', path: '', isDraft: false },
     { type: 'email', path: '', isDraft: false },
     ...(draftTriggersFromUrl ?? savedFlow?.draft?.draft_triggers ?? [])
-], selectedTriggerIndexFromUrl, saveSessionDraft);
+], selectedTriggerIndexFromUrl, saveSessionDraft));
 setContext('TriggerContext', {
     triggersCount,
     simplifiedPoll,
@@ -464,6 +471,8 @@ setContext('TriggerContext', {
     triggersState
 });
 export async function loadTriggers() {
+    if (initialPath == '')
+        return;
     $triggersCount = await FlowService.getTriggersCountOfFlow({
         workspace: $workspaceStore,
         path: initialPath
@@ -474,8 +483,6 @@ export async function loadTriggers() {
         savedFlow = filterDraftTriggers(savedFlow, triggersState);
     }
 }
-$: selectedId && select(selectedId);
-$: initialPath && initialPath != '' && $workspaceStore && loadTriggers();
 function onKeyDown(event) {
     let classes = event.target?.['className'];
     if ((typeof classes === 'string' && classes.includes('inputarea')) ||
@@ -485,13 +492,13 @@ function onKeyDown(event) {
     switch (event.key) {
         case 'Z':
             if (event.ctrlKey || event.metaKey) {
-                $flowStore = redo(history);
+                flowStore.val = redo(history);
                 event.preventDefault();
             }
             break;
         case 'z':
             if (event.ctrlKey || event.metaKey) {
-                $flowStore = undo(history, $flowStore);
+                flowStore.val = undo(history, flowStore.val);
                 $selectedIdStore = 'Input';
                 event.preventDefault();
             }
@@ -531,7 +538,7 @@ function generateIds() {
         'settings-metadata',
         'constants',
         'preprocessor',
-        ...dfsApply($flowStore.value.modules, (module) => module.id)
+        ...dfsApply(flowStore.val.value.modules, (module) => module.id)
     ];
 }
 const dropdownItems = [];
@@ -539,7 +546,7 @@ if (customUi.topBar?.extraDeployOptions != false) {
     if (savedFlow?.draft_only === false || savedFlow?.draft_only === undefined) {
         dropdownItems.push({
             label: 'Exit & see details',
-            onClick: () => onevent.seeDetails?.($pathStore)
+            onClick: () => onDetails?.({ path: $pathStore })
         });
     }
     if (!newFlow) {
@@ -549,409 +556,18 @@ if (customUi.topBar?.extraDeployOptions != false) {
         });
     }
 }
-let flowCopilotContext = {
-    drawerStore: writable(undefined),
-    modulesStore: writable([]),
-    currentStepStore: writable(undefined),
-    genFlow: undefined,
+let flowCopilotContext = $state({
     shouldUpdatePropertyType: writable({}),
     exprsToSet: writable({}),
     generatedExprs: writable({}),
     stepInputsLoading: writable(false)
-};
+});
 setContext('FlowCopilotContext', flowCopilotContext);
-const { drawerStore: copilotDrawerStore, modulesStore: copilotModulesStore, currentStepStore: copilotCurrentStepStore, shouldUpdatePropertyType } = flowCopilotContext;
-let doneTs = 0;
-async function getHubCompletions(text, idx, type) {
-    try {
-        // make sure we display the results of the last request last
-        const ts = Date.now();
-        const scripts = (await ScriptService.queryHubScripts({
-            text: `${text}`,
-            limit: 3,
-            kind: type
-        })).map((s) => ({
-            ...s,
-            path: `hub/${s.version_id}/${s.app}/${s.summary.toLowerCase().replaceAll(/\s+/g, '_')}`
-        }));
-        if (ts < doneTs)
-            return;
-        doneTs = ts;
-        $copilotModulesStore[idx].hubCompletions = scripts;
-    }
-    catch (err) {
-        if (err.name !== 'CancelError')
-            throw err;
-    }
-}
-let abortController = undefined;
-let copilotLoading = false;
-let flowCopilotMode = 'sequence';
-let copilotStatus = '';
-let copilotFlowInputs = {};
-let copilotFlowRequiredInputs = [];
-let openCopilotInputsModal = false;
-function setInitCopilotModules(mode) {
-    $copilotModulesStore = [
-        {
-            id: 'a',
-            type: mode === 'trigger' ? 'trigger' : 'script',
-            description: '',
-            code: '',
-            hubCompletions: [],
-            selectedCompletion: undefined,
-            source: undefined,
-            lang: undefined
-        },
-        {
-            id: 'b',
-            type: 'script',
-            description: '',
-            code: '',
-            hubCompletions: [],
-            selectedCompletion: undefined,
-            source: undefined,
-            lang: undefined
-        }
-    ];
-}
-$: setInitCopilotModules(flowCopilotMode);
-function applyCopilotFlowInputs() {
-    const properties = {
-        ...$flowStore.schema?.properties,
-        ...copilotFlowInputs
-    };
-    const required = [
-        ...($flowStore.schema?.required ?? []),
-        ...copilotFlowRequiredInputs
-    ];
-    $flowStore.schema = {
-        $schema: 'https://json-schema.org/draft/2020-12/schema',
-        properties,
-        required,
-        type: 'object'
-    };
-}
-function clearFlowInputsFromStep(id) {
-    const module = dfs(id, $flowStore)[0];
-    if (module?.value.type === 'rawscript' || module?.value.type === 'script') {
-        // clear step inputs that start with flow_input. but not flow_input.iter
-        for (const key in module.value.input_transforms) {
-            const input = module.value.input_transforms[key];
-            if (input.type === 'javascript' &&
-                input.expr.includes('flow_input.') &&
-                !input.expr.includes('flow_input.iter')) {
-                module.value.input_transforms[key] = {
-                    type: 'static',
-                    value: undefined
-                };
-                $shouldUpdatePropertyType[key] = 'static';
-            }
-        }
-    }
-    $flowStore = $flowStore;
-}
-async function finishStepGen() {
-    copilotFlowInputs = {};
-    copilotFlowRequiredInputs = [];
-    setInitCopilotModules(flowCopilotMode);
-    copilotStatus = "Done! Just check the step's inputs and you're good to go!";
-    await sleep(3000);
-    copilotStatus = '';
-}
-function snakeCase(e) {
-    if (e.toLowerCase() === e) {
-        return e;
-    }
-    return (e
-        .match(/([A-Z])/g)
-        ?.reduce((str, c) => str.replace(new RegExp(c), '_' + c.toLowerCase()), e)
-        ?.substring(e.slice(0, 1).match(/([A-Z])/g) ? 1 : 0) ?? e);
-}
-async function genFlow(idx, flowModules, stepOnly = false) {
-    try {
-        push(history, $flowStore);
-        let module = stepOnly ? $copilotModulesStore[0] : $copilotModulesStore[idx];
-        copilotLoading = true;
-        copilotStatus = "Generating code for step '" + module.id + "'...";
-        $copilotCurrentStepStore = module.id;
-        focusCopilot();
-        if (!stepOnly && flowModules.length > idx) {
-            select('');
-            await tick();
-            flowModules.splice(idx, flowModules.length - idx);
-            $flowStore = $flowStore;
-            focusCopilot();
-        }
-        if (idx === 0 && !stepOnly) {
-            $flowStore.schema = {
-                $schema: 'https://json-schema.org/draft/2020-12/schema',
-                properties: {},
-                required: [],
-                type: 'object'
-            };
-        }
-        const flowModule = {
-            id: module.id,
-            stop_after_if: module.type === 'trigger'
-                ? {
-                    expr: 'result == undefined || Array.isArray(result) && result.length == 0',
-                    skip_if_stopped: true
-                }
-                : undefined,
-            value: {
-                input_transforms: {},
-                content: '',
-                language: module.lang ?? 'bun',
-                type: 'rawscript'
-            },
-            summary: module.description
-        };
-        let isHubStep = false;
-        if (module.source === 'hub' && module.selectedCompletion) {
-            isHubStep = true;
-            const [hubScriptModule, hubScriptState] = await pickScript(module.selectedCompletion.path, `${module.selectedCompletion.summary} (${module.selectedCompletion.app})`, module.id, undefined);
-            flowModule.value = hubScriptModule.value;
-            flowModule.summary = hubScriptModule.summary;
-            $flowStateStore[module.id] = hubScriptState;
-        }
-        else {
-            $flowStateStore[module.id] = emptyFlowModuleState();
-        }
-        if (stepOnly) {
-            flowModules.splice(idx, 0, flowModule);
-        }
-        else if (idx === 1 && $copilotModulesStore[idx - 1].type === 'trigger') {
-            const loopModule = {
-                id: module.id + '_loop',
-                value: {
-                    type: 'forloopflow',
-                    iterator: {
-                        type: 'javascript',
-                        expr: 'results.a'
-                    },
-                    skip_failures: true,
-                    modules: [flowModule]
-                }
-            };
-            const loopState = await loadFlowModuleState(loopModule);
-            $flowStateStore[loopModule.id] = loopState;
-            flowModules.push(loopModule);
-        }
-        else {
-            flowModules.push(flowModule);
-        }
-        $copilotDrawerStore?.closeDrawer();
-        await tick();
-        select(module.id);
-        await tick();
-        focusCopilot();
-        let isFirstInLoop = false;
-        const parents = dfs(module.id, $flowStore).slice(1);
-        if (parents[0]?.value.type === 'forloopflow' &&
-            parents[0].value.modules[0].id === module.id) {
-            isFirstInLoop = true;
-        }
-        const prevNodeId = getPreviousIds(module.id, $flowStore, false)[0];
-        const pastModule = dfs(prevNodeId, $flowStore, false)[0];
-        if (!module.source) {
-            throw new Error('Invalid copilot module source');
-        }
-        if (module.source === 'custom') {
-            const deltaStore = writable('');
-            const unsubscribe = deltaStore.subscribe(async (delta) => {
-                module.editor?.append(delta);
-            });
-            abortController = new AbortController();
-            await stepCopilot(module, deltaStore, $workspaceStore, pastModule?.value.type === 'rawscript' || pastModule?.value.type === 'script'
-                ? pastModule
-                : undefined, isFirstInLoop, abortController);
-            unsubscribe();
-        }
-        copilotStatus = "Generating inputs for step '" + module.id + "'...";
-        await sleep(500); // make sure code was parsed
-        try {
-            if ((flowModule.value.type === 'rawscript' || flowModule.value.type === 'script') &&
-                (pastModule === undefined ||
-                    pastModule.value.type === 'rawscript' ||
-                    pastModule.value.type === 'script')) {
-                const stepSchema = JSON.parse(JSON.stringify($flowStateStore[module.id].schema)); // deep copy
-                if (isHubStep && pastModule !== undefined && $copilotInfo.enabled) {
-                    // ask AI to set step inputs
-                    abortController = new AbortController();
-                    const { inputs, allExprs } = await glueCopilot(flowModule.value.input_transforms, $workspaceStore, pastModule, isFirstInLoop, abortController);
-                    // create flow inputs used by AI for autocompletion
-                    copilotFlowInputs = {};
-                    copilotFlowRequiredInputs = [];
-                    Object.entries(allExprs).forEach(([key, expr]) => {
-                        if (expr.includes('flow_input.') && !expr.includes('flow_input.iter.')) {
-                            const flowInputKey = expr.match(/flow_input\.([A-Za-z0-9_]+)/)?.[1];
-                            if (flowInputKey !== undefined &&
-                                (!$flowStore.schema ||
-                                    !(flowInputKey in ($flowStore.schema.properties ?? {}))) // prevent overriding flow inputs
-                            ) {
-                                if (key in stepSchema.properties) {
-                                    copilotFlowInputs[flowInputKey] = stepSchema.properties[key];
-                                    if (stepSchema.required.includes(key)) {
-                                        copilotFlowRequiredInputs.push(flowInputKey);
-                                    }
-                                }
-                                else {
-                                    // when the key is nested (e.g. body.content)
-                                    const [firstKey, ...rest] = key.split('.');
-                                    const restKey = rest.join('.');
-                                    const firstKeyProperties = stepSchema.properties[firstKey]?.properties;
-                                    if (firstKeyProperties !== undefined && restKey in firstKeyProperties) {
-                                        copilotFlowInputs[flowInputKey] = firstKeyProperties[restKey];
-                                        if (firstKeyProperties[restKey].required?.includes(flowInputKey)) {
-                                            copilotFlowRequiredInputs.push(flowInputKey);
-                                        }
-                                    }
-                                }
-                            }
-                        }
-                    });
-                    if (!stepOnly) {
-                        applyCopilotFlowInputs();
-                    }
-                    // set step inputs
-                    Object.entries(inputs).forEach(([key, expr]) => {
-                        flowModule.value.input_transforms[key] = {
-                            type: 'javascript',
-                            expr
-                        };
-                        $shouldUpdatePropertyType[key] = 'javascript';
-                    });
-                }
-                else {
-                    if (isHubStep && pastModule !== undefined && !$copilotInfo.enabled) {
-                        sendUserToast('For better input generation, enable Windmill AI in the workspace settings', true);
-                    }
-                    // create possible flow inputs for autocompletion
-                    copilotFlowInputs = {};
-                    copilotFlowRequiredInputs = [];
-                    Object.keys(flowModule.value.input_transforms).forEach((key) => {
-                        if (key !== 'prev_output') {
-                            const schema = $flowStateStore[module.id].schema;
-                            const schemaProperty = Object.entries(schema?.properties ?? {}).find((x) => x[0] === key)?.[1];
-                            const snakeKey = snakeCase(key);
-                            if (schemaProperty &&
-                                (!$flowStore.schema ||
-                                    !(snakeKey in ($flowStore?.schema?.properties ?? {}))) // prevent overriding flow inputs
-                            ) {
-                                copilotFlowInputs[snakeKey] = schemaProperty;
-                                if (schema?.required.includes(snakeKey)) {
-                                    copilotFlowRequiredInputs.push(snakeKey);
-                                }
-                            }
-                        }
-                    });
-                    if (!stepOnly) {
-                        applyCopilotFlowInputs();
-                    }
-                    // programatically set step inputs
-                    for (const key of Object.keys(flowModule.value.input_transforms)) {
-                        const snakeKey = snakeCase(key);
-                        flowModule.value.input_transforms[key] = {
-                            type: 'javascript',
-                            expr: key === 'prev_output'
-                                ? isFirstInLoop
-                                    ? 'flow_input.iter.value'
-                                    : pastModule
-                                        ? 'results.' + pastModule.id
-                                        : 'flow_input.' + snakeKey
-                                : 'flow_input.' + snakeKey
-                        };
-                        $shouldUpdatePropertyType[key] = 'javascript';
-                    }
-                }
-                $flowStore = $flowStore; // force rerendering
-            }
-            else {
-                if (pastModule !== undefined &&
-                    pastModule.value.type !== 'rawscript' &&
-                    pastModule.value.type !== 'script') {
-                    sendUserToast(`Linking to previous step ${pastModule.id} of type ${pastModule.value.type} is not yet supported`, true);
-                }
-                else {
-                    sendUserToast('Something went wrong, could not generate step inputs', true);
-                }
-            }
-        }
-        catch (err) {
-            console.error(err);
-        }
-        if (stepOnly) {
-            $copilotCurrentStepStore = undefined;
-            copilotLoading = false;
-            copilotStatus = '';
-            if (Object.keys(copilotFlowInputs).length > 0) {
-                openCopilotInputsModal = true;
-            }
-            else {
-                finishStepGen();
-            }
-        }
-        else {
-            copilotStatus =
-                "Waiting for the user to validate code and inputs of step '" + module.id + "'";
-        }
-    }
-    catch (err) {
-        if (stepOnly) {
-            copilotStatus = '';
-            $copilotCurrentStepStore = undefined;
-            setInitCopilotModules(flowCopilotMode);
-        }
-        if (err?.message) {
-            sendUserToast('Failed to generate code: ' + err.message, true);
-        }
-        else {
-            sendUserToast('Failed to generate code', true);
-            console.error(err);
-        }
-    }
-    finally {
-        copilotLoading = false;
-    }
-}
-flowCopilotContext.genFlow = genFlow;
-async function finishCopilotFlowBuilder() {
-    copilotLoading = true;
-    select('Input');
-    $copilotCurrentStepStore = 'Input';
-    copilotStatus = "Done! Just check the flow's inputs and you're good to go!";
-    $copilotCurrentStepStore = undefined;
-    copilotLoading = false;
-    await sleep(3000);
-    copilotStatus = '';
-}
-function focusCopilot() {
-    document.querySelectorAll('.splitpanes__splitter').forEach((el) => {
-        el.classList.add('hidden');
-    });
-    document.querySelectorAll('#flow-graph *').forEach((el) => {
-        if (el instanceof HTMLElement) {
-            el.style.pointerEvents = 'none';
-        }
-    });
-}
-function blurCopilot() {
-    document.querySelectorAll('.splitpanes__splitter').forEach((el) => {
-        el.classList.remove('hidden');
-    });
-    document.querySelectorAll('#flow-graph *').forEach((el) => {
-        if (el instanceof HTMLElement) {
-            el.style.pointerEvents = '';
-        }
-    });
-}
-$: $copilotCurrentStepStore === undefined && blurCopilot();
-let renderCount = 0;
-let flowTutorials = undefined;
-let jsonViewerDrawer = undefined;
-let yamlEditorDrawer = undefined;
-let flowHistory = undefined;
+let renderCount = $state(0);
+let flowTutorials = $state(undefined);
+let jsonViewerDrawer = $state(undefined);
+let yamlEditorDrawer = $state(undefined);
+let flowHistory = $state(undefined);
 export function triggerTutorial() {
     const urlParams = new URLSearchParams(window.location.search);
     const tutorial = urlParams.get('tutorial');
@@ -962,9 +578,8 @@ export function triggerTutorial() {
         flowTutorials?.runTutorialById('action');
     }
 }
-let moreItems = [];
-$: onCustomUiChange(customUi);
-function onCustomUiChange(customUi) {
+let moreItems = $state([]);
+function onCustomUiChange(customUi, hasAiDiff) {
     moreItems = [
         ...(customUi?.topBar?.history != false
             ? [
@@ -978,7 +593,7 @@ function onCustomUiChange(customUi) {
                 }
             ]
             : []),
-        ...(customUi?.topBar?.history != false
+        ...(customUi?.topBar?.export != false
             ? [
                 {
                     displayName: 'Export',
@@ -988,7 +603,19 @@ function onCustomUiChange(customUi) {
                 {
                     displayName: 'Edit in YAML',
                     icon: FileJson,
-                    action: () => yamlEditorDrawer?.openDrawer()
+                    action: () => yamlEditorDrawer?.openDrawer(),
+                    disabled: hasAiDiff
+                }
+            ]
+            : []),
+        ...(customUi?.topBar?.settings != false
+            ? [
+                {
+                    displayName: 'Flow settings',
+                    icon: Settings,
+                    action: () => {
+                        select('settings-metadata');
+                    }
                 }
             ]
             : [])
@@ -1003,12 +630,51 @@ function handleDeployTrigger(trigger) {
             newSavedDraftTrigers.length > 0 ? newSavedDraftTrigers : undefined;
     }
 }
-let flowPreviewButtons;
+let flowPreviewButtons = $state();
+let forceTestTab = $state({});
+let highlightArg = $state({});
+$effect.pre(() => {
+    initialPathStore.set(initialPath);
+});
+$effect.pre(() => {
+    setContext('customUi', customUi);
+});
+$effect.pre(() => {
+    if (flowStore.val || $selectedIdStore) {
+        readFieldsRecursively(flowStore.val);
+        untrack(() => saveSessionDraft());
+    }
+});
+$effect.pre(() => {
+    initialPath && ($pathStore = initialPath);
+});
+$effect.pre(() => {
+    selectedId && untrack(() => select(selectedId));
+});
+$effect.pre(() => {
+    initialPath && initialPath != '' && $workspaceStore && untrack(() => loadTriggers());
+});
+$effect.pre(() => {
+    const hasAiDiff = aiChatManager.flowAiChatHelpers?.hasDiff() ?? false;
+    customUi && untrack(() => onCustomUiChange(customUi, hasAiDiff));
+});
+export async function loadFlowState() {
+    await stepHistoryLoader.loadIndividualStepsStates(flowStore.val, flowStateStore, $workspaceStore, $initialPathStore, $pathStore);
+}
+let stepHistoryLoader = new StepHistoryLoader(loadedFromHistoryFromUrl?.stepsState ?? {}, loadedFromHistoryFromUrl?.flowJobInitial, saveSessionDraft, noInitial);
+setStepHistoryLoaderContext(stepHistoryLoader);
+export function setLoadedFromHistory(loadedFromHistoryUrl) {
+    if (!loadedFromHistoryUrl) {
+        return;
+    }
+    stepHistoryLoader.setFlowJobInitial(loadedFromHistoryUrl.flowJobInitial);
+    stepHistoryLoader.stepStates = loadedFromHistoryUrl.stepsState;
+}
 </script>
 
-<svelte:window on:keydown={onKeyDown} />
+<svelte:window onkeydown={onKeyDown} />
 
-<slot />
+{@render children?.()}
 
 <DeployOverrideConfirmationModal
 	bind:deployedBy
@@ -1016,7 +682,7 @@ let flowPreviewButtons;
 	bind:open
 	{diffDrawer}
 	bind:deployedValue
-	currentValue={$flowStore}
+	currentValue={flowStore.val}
 />
 
 <DraftTriggersConfirmationModal
@@ -1029,30 +695,15 @@ let flowPreviewButtons;
 	on:confirmed={handleDraftTriggersConfirmed}
 />
 
+<AIChangesWarningModal bind:open={aiChangesWarningOpen} onConfirm={aiChangesConfirmCallback} />
+
 {#key renderCount}
 	{#if !$userStore?.operator}
-		<FlowCopilotDrawer {getHubCompletions} {genFlow} bind:flowCopilotMode />
 		{#if $pathStore}
-			<FlowHistory
-				bind:this={flowHistory}
-				path={$pathStore}
-				on:historyRestore={() => onevent.historyRestore?.()}
-			/>
+			<FlowHistory bind:this={flowHistory} path={$pathStore} {onHistoryRestore} />
 		{/if}
 		<FlowYamlEditor bind:drawer={yamlEditorDrawer} />
 		<FlowImportExportMenu bind:drawer={jsonViewerDrawer} />
-		<FlowCopilotInputsModal
-			on:confirmed={async () => {
-				applyCopilotFlowInputs()
-				finishStepGen()
-			}}
-			on:canceled={async () => {
-				clearFlowInputsFromStep($copilotModulesStore[0]?.id)
-				finishStepGen()
-			}}
-			bind:open={openCopilotInputsModal}
-			inputs={Object.keys(copilotFlowInputs)}
-		/>
 		<ScriptEditorDrawer bind:this={$scriptEditorDrawer} />
 
 		<div class="flex flex-col flex-1 h-screen">
@@ -1060,25 +711,21 @@ let flowPreviewButtons;
 			<div
 				class="justify-between flex flex-row items-center pl-2.5 pr-6 space-x-4 scrollbar-hidden overflow-x-auto max-h-12 h-full relative"
 			>
-				{#if $copilotCurrentStepStore !== undefined}
-					<div transition:fade class="absolute inset-0 bg-gray-500 bg-opacity-75 z-[900] !m-0"
-					></div>
-				{/if}
 				<div class="flex w-full max-w-md gap-4 items-center">
 					<Summary
 						disabled={customUi?.topBar?.editableSummary == false}
-						bind:value={$flowStore.summary}
+						bind:value={flowStore.val.summary}
 					/>
 
 					<UndoRedo
 						undoProps={{ disabled: $history.index === 0 }}
 						redoProps={{ disabled: $history.index === $history.history.length - 1 }}
 						on:undo={() => {
-							const currentModules = $flowStore?.value?.modules
+							const currentModules = flowStore.val?.value?.modules
 
-							$flowStore = undo(history, $flowStore)
+							flowStore.val = undo(history, flowStore.val)
 
-							const newModules = $flowStore?.value?.modules
+							const newModules = flowStore.val?.value?.modules
 							const restoredModules = newModules?.filter(
 								(node) => !currentModules?.some((currentNode) => currentNode?.id === node?.id)
 							)
@@ -1096,7 +743,7 @@ let flowPreviewButtons;
 							$selectedIdStore = 'Input'
 						}}
 						on:redo={() => {
-							$flowStore = redo(history)
+							flowStore.val = redo(history)
 						}}
 					/>
 				</div>
@@ -1129,7 +776,7 @@ let flowPreviewButtons;
 						<div class="flex justify-start w-full">
 							<div>
 								<button
-									on:click={async () => {
+									onclick={async () => {
 										select('settings-metadata')
 										document.getElementById('path')?.focus()
 									}}
@@ -1147,7 +794,7 @@ let flowPreviewButtons;
 								readonly
 								value={$pathStore && $pathStore != '' ? $pathStore : 'Choose a path'}
 								class="font-mono !text-xs !min-w-[96px] !max-w-[300px] !w-full !h-[28px] !my-0 !py-0 !border-l-0 !rounded-l-none"
-								on:focus={({ currentTarget }) => {
+								onfocus={({ currentTarget }) => {
 									currentTarget.select()
 								}}
 							/>
@@ -1187,11 +834,17 @@ let flowPreviewButtons;
 								)
 
 								diffDrawer?.openDrawer()
+								const currentFlow =
+									aiChatManager.flowAiChatHelpers?.getPreviewFlow() ?? flowStore.val
 								diffDrawer?.setDiff({
 									mode: 'normal',
 									deployed: deployedValue ?? savedFlow,
 									draft: savedFlow?.draft,
-									current: { ...$flowStore, path: $pathStore, draft_triggers: currentDraftTriggers }
+									current: {
+										...currentFlow,
+										path: $pathStore,
+										draft_triggers: currentDraftTriggers
+									}
 								})
 							}}
 							disabled={!savedFlow}
@@ -1202,15 +855,6 @@ let flowPreviewButtons;
 							</div>
 						</Button>
 					{/if}
-					{#if !disableAi && customUi?.topBar?.aiBuilder != false}
-						<FlowCopilotStatus
-							{copilotLoading}
-							bind:copilotStatus
-							{genFlow}
-							{finishCopilotFlowBuilder}
-							{abortController}
-						/>
-					{/if}
 					<FlowPreviewButtons
 						on:openTriggers={(e) => {
 							select('triggers')
@@ -1243,7 +887,6 @@ let flowPreviewButtons;
 					/>
 				</div>
 			</div>
-
 			<!-- metadata -->
 			{#if $flowStateStore}
 				<FlowEditor
@@ -1257,16 +900,38 @@ let flowPreviewButtons;
 					{newFlow}
 					on:applyArgs={(ev) => {
 						if (ev.detail.kind === 'preprocessor') {
-							$testStepStore['preprocessor'] = ev.detail.args ?? {}
+							testSteps.setStepArgs('preprocessor', ev.detail.args ?? {})
 							$selectedIdStore = 'preprocessor'
 						}
 					}}
 					on:testWithArgs={(e) => {
-						$previewArgsStore = JSON.parse(JSON.stringify(e.detail))
+						previewArgsStore.val = JSON.parse(JSON.stringify(e.detail))
 						flowPreviewButtons?.openPreview(true)
 					}}
+					onTestUpTo={() => {
+						flowPreviewButtons?.testUpTo()
+					}}
 					{savedFlow}
 					onDeployTrigger={handleDeployTrigger}
+					onEditInput={(moduleId, key) => {
+						selectedIdStore.set(moduleId)
+						// Use new prop-based system
+						forceTestTab[moduleId] = true
+						highlightArg[moduleId] = key
+						// Reset the force flag after a short delay to allow re-triggering
+						setTimeout(() => {
+							forceTestTab[moduleId] = false
+							highlightArg[moduleId] = undefined
+						}, 500)
+					}}
+					{forceTestTab}
+					{highlightArg}
+					aiChatOpen={aiChatManager.open}
+					showFlowAiButton={!disableAi && customUi?.topBar?.aiBuilder != false}
+					toggleAiChat={() => aiChatManager.toggleOpen()}
+					onRunPreview={() => {
+						flowPreviewButtons?.openPreview(true)
+					}}
 				/>
 			{:else}
 				<CenteredPage>Loading...</CenteredPage>