From b33735d8cccba22dd5559fe0f8b5d55f655f41fc Mon Sep 17 00:00:00 2001
From: Diego Imbert <diego@windmill.dev>
Date: Fri, 27 Feb 2026 16:06:51 +0100
Subject: [PATCH] refactor: add callback props alongside createEventDispatcher
 for svelte 5 migration

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../lib/components/AppConnectDrawer.svelte    |   5 +-
 .../src/lib/components/AppConnectInner.svelte |  12 +-
 frontend/src/lib/components/ArgEnum.svelte    |  10 +-
 frontend/src/lib/components/ArgInput.svelte   |  59 ++++-
 .../lib/components/AssignableTagsInner.svelte |   5 +-
 .../ChangeInstanceUsernameInner.svelte        |  18 +-
 .../lib/components/ContentSearchInner.svelte  |   9 +-
 .../components/ContentSearchInnerItem.svelte  |   4 +-
 .../lib/components/DarkModeObserver.svelte    |   7 +-
 frontend/src/lib/components/DateInput.svelte  |   6 +-
 .../src/lib/components/DateTimeInput.svelte   |  10 +-
 .../src/lib/components/DeployButton.svelte    |   9 +-
 .../src/lib/components/DeployWorkspace.svelte |  19 +-
 .../src/lib/components/DisplayResult.svelte   |   6 +-
 .../components/DisplayResultControlBar.svelte |   6 +-
 .../lib/components/EditableSchemaForm.svelte  |   8 +-
 frontend/src/lib/components/Editor.svelte     |  20 +-
 frontend/src/lib/components/EditorBar.svelte  |  18 +-
 .../src/lib/components/FlowGraphViewer.svelte |  41 ++--
 .../components/FlowHistoryJobPicker.svelte    |  12 +-
 .../FlowLoopIterationPreview.svelte           |   6 +-
 .../lib/components/FlowPreviewContent.svelte  |   9 +-
 .../src/lib/components/FolderEditor.svelte    |   4 +-
 .../components/GitRepoPopoverPicker.svelte    |   4 +-
 .../components/GitRepoResourcePicker.svelte   |  10 +-
 .../src/lib/components/GroupEditor.svelte     |   4 +-
 .../src/lib/components/HistoricInputs.svelte  |  10 +-
 .../src/lib/components/InfiniteList.svelte    |  12 +-
 .../lib/components/InputTransformForm.svelte  |   9 +-
 .../lib/components/InstanceGroupEditor.svelte |  32 +--
 .../lib/components/InstanceNameEditor.svelte  | 214 +++++++++---------
 .../src/lib/components/InstanceSetting.svelte |   5 +-
 .../lib/components/InstanceSettings.svelte    |   6 +-
 .../lib/components/InviteGlobalUser.svelte    |   6 +-
 frontend/src/lib/components/JsonEditor.svelte |  13 +-
 frontend/src/lib/components/JsonInputs.svelte |  14 +-
 frontend/src/lib/components/Path.svelte       |   5 +-
 .../src/lib/components/RadioButton.svelte     |  21 +-
 .../src/lib/components/ResourceEditor.svelte  |  11 +-
 .../lib/components/ResourceTypePicker.svelte  |   9 +-
 .../lib/components/S3FilePickerInner.svelte   |   5 +-
 .../src/lib/components/S3ObjectPicker.svelte  |   8 +-
 .../lib/components/SaveInputsButton.svelte    |  19 +-
 .../lib/components/SavedInputsPicker.svelte   |  10 +-
 .../src/lib/components/SavedInputsV2.svelte   |   6 +-
 frontend/src/lib/components/SchemaForm.svelte |  42 +++-
 .../components/SchemaFormWithArgPicker.svelte |   7 +-
 .../src/lib/components/ScriptEditor.svelte    |   8 +-
 .../src/lib/components/ScriptPicker.svelte    |   5 +-
 .../components/ScriptVersionHistory.svelte    |  11 +-
 .../src/lib/components/SimpleEditor.svelte    |  12 +-
 .../src/lib/components/TemplateEditor.svelte  |  12 +-
 frontend/src/lib/components/Toggle.svelte     |   5 +-
 .../src/lib/components/UserSettings.svelte    |   5 +-
 .../src/lib/components/WorkerGroup.svelte     |   7 +-
 .../src/lib/components/WorkerTagSelect.svelte |   8 +-
 .../display/dbtable/DeleteRow.svelte          |   4 +-
 .../display/dbtable/InsertRowRunnable.svelte  |   4 +-
 .../table/AppAggridExplorerTable.svelte       |  18 +-
 .../table/AppAggridTableActions.svelte        |  12 +-
 .../components/display/table/AppCell.svelte   |   6 +-
 .../apps/components/helpers/InputValue.svelte |   6 +-
 .../helpers/RunnableComponent.svelte          |  31 ++-
 .../apps/editor/AppJobsDrawer.svelte          |  13 +-
 .../apps/editor/ComponentHeader.svelte        |  21 +-
 .../apps/editor/DecisionTreeDebug.svelte      |  11 +-
 .../apps/editor/DeploymentHistory.svelte      |   7 +-
 .../apps/editor/GridEditorMenu.svelte         |  16 +-
 .../components/apps/editor/GridViewer.svelte  |  17 +-
 .../apps/editor/RecomputeAllButton.svelte     |   8 +-
 .../components/apps/editor/TabsDebug.svelte   |   6 +-
 .../editor/componentsPanel/CssProperty.svelte |  13 +-
 .../componentsPanel/CustomComponentRow.svelte |   5 +-
 .../editor/componentsPanel/GroupRow.svelte    |   5 +-
 .../editor/componentsPanel/ListItem.svelte    |   5 +-
 .../editor/componentsPanel/NameEditor.svelte  |   5 +-
 .../componentsPanel/ThemeNameEditor.svelte    |   4 +-
 .../editor/componentsPanel/ThemeRow.svelte    |  12 +-
 .../EmptyInlineScript.svelte                  |  10 +-
 .../InlineScriptEditor.svelte                 |   9 +-
 .../InlineScriptEditorPanel.svelte            |   5 +-
 .../InlineScriptHiddenRunnable.svelte         |  13 +-
 .../InlineScriptRunnableByPath.svelte         |  22 +-
 .../ArrayStaticInputEditor.svelte             |   5 +-
 .../ComponentInputTypeEditor.svelte           |   9 +-
 .../settingsPanel/InputsSpecEditor.svelte     |   8 +-
 .../settingsPanel/InputsSpecsEditor.svelte    |   6 +-
 .../settingsPanel/QuickAddColumn.svelte       |   5 +-
 .../InsertDecisionTreeNode.svelte             |  12 +-
 .../inputEditor/ColorInput.svelte             |   4 +-
 .../mainInput/InlineScriptList.svelte         |   5 +-
 .../mainInput/RunnableSelector.svelte         |  32 ++-
 .../mainInput/WorkspaceFlowList.svelte        |   5 +-
 .../mainInput/WorkspaceScriptList.svelte      |   5 +-
 .../shared/ScriptRunConfiguration.svelte      |   6 +-
 .../lib/components/common/CloseButton.svelte  |  13 +-
 .../components/common/button/Button.svelte    |  10 +-
 .../components/common/button/UndoRedo.svelte  |  12 +-
 .../clearableInput/ClearableInput.svelte      |  27 ++-
 .../DraftTriggersConfirmationModal.svelte     |  17 +-
 .../components/common/drawer/Drawer.svelte    |  13 +-
 .../common/drawer/DrawerContent.svelte        |   5 +-
 .../common/fileUpload/FileUpload.svelte       |  13 +-
 .../common/fileUpload/FileUploadModal.svelte  |  18 +-
 .../lib/components/common/menu/Menu.svelte    |   8 +-
 .../lib/components/common/modal/Modal.svelte  |   9 +-
 .../components/common/stepper/Stepper.svelte  |  19 +-
 .../lib/components/common/table/AppRow.svelte |   9 +-
 .../components/common/table/FlowRow.svelte    |   7 +-
 .../components/common/table/ScriptRow.svelte  |   8 +-
 .../src/lib/components/common/tabs/Tab.svelte |   5 +-
 .../lib/components/common/tabs/Tabs.svelte    |   5 +-
 .../copilot/FlowCopilotInputsModal.svelte     |  15 +-
 .../lib/components/copilot/IteratorGen.svelte |  13 +-
 .../components/copilot/PredicateGen.svelte    |  10 +-
 .../components/copilot/StepGenQuick.svelte    |   6 +-
 .../components/copilot/StepInputGen.svelte    |  11 +-
 .../details/DetailPageHeader.svelte           |   5 +-
 .../lib/components/display/PdfViewer.svelte   |   8 +-
 .../flows/common/FlowCardHeader.svelte        |  12 +-
 .../flows/content/FlowInputEditor.svelte      |   4 +-
 .../flows/content/FlowInputs.svelte           |  10 +-
 .../flows/content/FlowInputsFlow.svelte       |   4 +-
 .../flows/content/FlowInputsQuick.svelte      |  29 ++-
 .../flows/content/FlowModuleHeader.svelte     |  78 +++++--
 .../content/FlowModuleWorkerTagSelect.svelte  |   6 +-
 .../flows/content/GenAiQuick.svelte           |  14 +-
 .../flows/header/FlowPreviewButtons.svelte    |   5 +-
 .../flows/map/FlowErrorHandlerItem.svelte     |   9 +-
 .../flows/map/FlowModuleSchemaItem.svelte     |  24 +-
 .../flows/map/FlowModuleSchemaMap.svelte      |  17 +-
 .../flows/map/InsertModuleInner.svelte        |  31 ++-
 .../lib/components/flows/map/MapItem.svelte   |  11 +-
 .../flows/map/VirtualItemWrapper.svelte       |   5 +-
 .../pickers/FlowScriptPickerQuick.svelte      |  17 +-
 .../flows/pickers/FlowToplevelNode.svelte     |   8 +-
 .../flows/pickers/PickHubApp.svelte           |  11 +-
 .../flows/pickers/PickHubFlow.svelte          |  11 +-
 .../flows/pickers/PickHubScript.svelte        |   5 +-
 .../flows/pickers/PickHubScriptQuick.svelte   |   5 +-
 .../pickers/WorkspaceScriptPicker.svelte      |   5 +-
 .../pickers/WorkspaceScriptPickerQuick.svelte |  10 +-
 .../flows/propPicker/PropPickerWrapper.svelte |   6 +-
 .../flows/propPicker/StepHistory.svelte       |   7 +-
 .../renderers/triggers/TriggersWrapper.svelte |   8 +-
 frontend/src/lib/components/home/Item.svelte  |  23 +-
 .../components/home/ListFiltersQuick.svelte   |  22 +-
 .../propertyPicker/ObjectViewer.svelte        |   5 +-
 .../raw_apps/RawAppEditorHeader.svelte        |   8 +-
 .../raw_apps/RawAppInlineScriptEditor.svelte  |   6 +-
 .../RawAppInlineScriptRunnable.svelte         |  14 +-
 .../lib/components/runs/JobRunsPreview.svelte |  11 +-
 .../src/lib/components/runs/RunRow.svelte     |  40 +++-
 .../src/lib/components/runs/RunsTable.svelte  |   9 +-
 .../lib/components/schema/AddProperty.svelte  |   8 +-
 .../schema/AddPropertyFormV2.svelte           |  10 +-
 .../schema/EditableSchemaDrawer.svelte        |   6 +-
 .../schema/FlowPropertyEditor.svelte          |   5 +-
 .../components/schema/PropertyEditor.svelte   |  16 +-
 .../schema/RunningJobSchemaPicker.svelte      |  65 +++---
 .../components/schema/SchemaFormDND.svelte    |   5 +-
 .../lib/components/sidebar/MenuButton.svelte  |  16 +-
 .../src/lib/components/table/DataTable.svelte |  13 +-
 .../components/triggers/CaptureButton.svelte  |   7 +-
 .../components/triggers/CaptureSection.svelte |  36 ++-
 .../components/triggers/CaptureTable.svelte   |  28 ++-
 .../components/triggers/TriggersEditor.svelte |   5 +-
 .../nats/NatsTriggersConfigSection.svelte     |   5 +-
 .../lib/components/tutorials/Tutorial.svelte  |  21 +-
 .../tutorials/TutorialControls.svelte         |  15 +-
 .../components/wizards/AgChartWizard.svelte   |   4 +-
 .../components/wizards/ChartJSWizard.svelte   |   8 +-
 .../components/wizards/PlotlyWizard.svelte    |   8 +-
 173 files changed, 1724 insertions(+), 561 deletions(-)

diff --git a/frontend/src/lib/components/AppConnectDrawer.svelte b/frontend/src/lib/components/AppConnectDrawer.svelte
index 2a1498d055..ef52111c3b 100644
--- a/frontend/src/lib/components/AppConnectDrawer.svelte
+++ b/frontend/src/lib/components/AppConnectDrawer.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-
 	import { createEventDispatcher } from 'svelte'
 	import { Button, Drawer } from './common'
 	import DrawerContent from './common/drawer/DrawerContent.svelte'
@@ -9,9 +8,10 @@
 
 	interface Props {
 		expressOAuthSetup?: boolean
+		onclose?: (...args: any[]) => any
 	}
 
-	let { expressOAuthSetup = false }: Props = $props()
+	let { expressOAuthSetup = false, onclose = undefined }: Props = $props()
 
 	let drawer: Drawer | undefined = $state()
 	let resourceType = $state('')
@@ -47,6 +47,7 @@
 	on:close={() => {
 		step = 1
 		dispatch('close')
+		onclose?.()
 	}}
 	size="800px"
 >
diff --git a/frontend/src/lib/components/AppConnectInner.svelte b/frontend/src/lib/components/AppConnectInner.svelte
index 835a94793f..f47db3ee42 100644
--- a/frontend/src/lib/components/AppConnectInner.svelte
+++ b/frontend/src/lib/components/AppConnectInner.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-
 	import { superadmin, userStore, workspaceStore } from '$lib/stores'
 	import IconedResourceType from './IconedResourceType.svelte'
 	import {
@@ -41,6 +40,9 @@
 		disabled?: boolean
 		manual?: boolean
 		express?: boolean
+		onerror?: (...args: any[]) => any
+		onrefresh?: (...args: any[]) => any
+		onclose?: (...args: any[]) => any
 	}
 
 	let {
@@ -49,7 +51,10 @@
 		isGoogleSignin = $bindable(false),
 		disabled = $bindable(false),
 		manual = $bindable(true),
-		express = false
+		express = false,
+		onerror = undefined,
+		onrefresh = undefined,
+		onclose = undefined
 	}: Props = $props()
 
 	let isValid = $state(true)
@@ -146,6 +151,7 @@
 		manual = !connects?.includes(resourceType)
 		if (manual && express) {
 			dispatch('error', 'Express OAuth setup is not available for non OAuth resource types')
+			onerror?.('Express OAuth setup is not available for non OAuth resource types')
 			return
 		}
 		if (rt) {
@@ -492,7 +498,9 @@
 				}
 			})
 			dispatch('refresh', path)
+			onrefresh?.(path)
 			dispatch('close')
+			onclose?.()
 			sendUserToast(`Saved resource${saveVariable ? ' and variable' : ''} path: ${path}`)
 			step = 1
 			resourceType = ''
diff --git a/frontend/src/lib/components/ArgEnum.svelte b/frontend/src/lib/components/ArgEnum.svelte
index 1de4e467cf..62b47ecd69 100644
--- a/frontend/src/lib/components/ArgEnum.svelte
+++ b/frontend/src/lib/components/ArgEnum.svelte
@@ -14,6 +14,8 @@
 		enumLabels?: Record<string, string> | undefined
 		selectClass?: string
 		onClear?: () => void
+		onfocus?: (...args: any[]) => any
+		onblur?: (...args: any[]) => any
 	}
 
 	let {
@@ -26,7 +28,9 @@
 		create,
 		enumLabels = undefined,
 		selectClass = '',
-		onClear = undefined
+		onClear = undefined,
+		onfocus = undefined,
+		onblur = undefined
 	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
@@ -79,8 +83,8 @@
 				cleared = true
 				value = undefined
 			}}
-			onFocus={() => dispatch('focus')}
-			onBlur={() => dispatch('blur')}
+			onFocus={() => (dispatch('focus'), onfocus?.())}
+			onBlur={() => (dispatch('blur'), onblur?.())}
 			inputClass={selectClass}
 		/>
 	</div>
diff --git a/frontend/src/lib/components/ArgInput.svelte b/frontend/src/lib/components/ArgInput.svelte
index 3d8a12047e..3fd1b0f676 100644
--- a/frontend/src/lib/components/ArgInput.svelte
+++ b/frontend/src/lib/components/ArgInput.svelte
@@ -126,6 +126,13 @@
 		actions?: import('svelte').Snippet
 		innerBottomSnippet?: import('svelte').Snippet
 		fieldHeaderActions?: import('svelte').Snippet
+		onkeydownCmdEnter?: (...args: any[]) => any
+		onchange?: (...args: any[]) => any
+		onacceptChange?: (...args: any[]) => any
+		onrejectChange?: (...args: any[]) => any
+		onfocus?: (...args: any[]) => any
+		onblur?: (...args: any[]) => any
+		onnestedChange?: (...args: any[]) => any
 	}
 
 	let {
@@ -187,7 +194,14 @@
 		actions,
 		innerBottomSnippet,
 		fieldHeaderActions,
-		lightHeaderFont = false
+		lightHeaderFont = false,
+		onkeydownCmdEnter = undefined,
+		onchange = undefined,
+		onacceptChange = undefined,
+		onrejectChange = undefined,
+		onfocus = undefined,
+		onblur = undefined,
+		onnestedChange = undefined
 	}: Props = $props()
 
 	$effect(() => {
@@ -475,6 +489,7 @@
 		) {
 			if (e.key == 'Enter') {
 				dispatch('keydownCmdEnter')
+				onkeydownCmdEnter?.()
 			}
 			return
 		}
@@ -490,6 +505,7 @@
 		if (!deepEqual(oldValue, value)) {
 			oldValue = value
 			dispatch('change')
+			onchange?.()
 		}
 	}
 
@@ -603,6 +619,7 @@
 				onclick={stopPropagation(
 					preventDefault(() => {
 						dispatch('acceptChange', { label, nestedParent })
+						onacceptChange?.({ label, nestedParent })
 					})
 				)}
 			>
@@ -613,6 +630,7 @@
 				onclick={stopPropagation(
 					preventDefault(() => {
 						dispatch('rejectChange', { label, nestedParent })
+						onrejectChange?.({ label, nestedParent })
 					})
 				)}
 			>
@@ -752,8 +770,8 @@
 				{defaultValue}
 				{setNewValueFromCode}
 				{workspace}
-				onFocus={() => dispatch('focus')}
-				onBlur={() => dispatch('blur')}
+				onFocus={() => (dispatch('focus'), onfocus?.())}
+				onBlur={() => (dispatch('blur'), onblur?.())}
 				bind:editor
 				{appPath}
 				{computeS3ForceViewerPolicies}
@@ -786,6 +804,7 @@
 							// Update the value to trigger reactivity
 							value = { ...value }
 							dispatch('change')
+							onchange?.()
 						}
 					}}
 				/>
@@ -836,7 +855,7 @@
 								{disabled}
 								bind:value
 								items={safeSelectItems(itemsType?.multiselect)}
-								onOpen={() => dispatch('focus')}
+								onOpen={() => (dispatch('focus'), onfocus?.())}
 								reorderable
 							/>
 						</div>
@@ -846,7 +865,7 @@
 								{disabled}
 								bind:value
 								items={safeSelectItems(enum_)}
-								onOpen={() => dispatch('focus')}
+								onOpen={() => (dispatch('focus'), onfocus?.())}
 								reorderable
 							/>
 						</div>
@@ -856,7 +875,7 @@
 								{disabled}
 								bind:value
 								items={safeSelectItems(itemsType?.enum)}
-								onOpen={() => dispatch('focus')}
+								onOpen={() => (dispatch('focus'), onfocus?.())}
 								reorderable
 							/>
 						</div>
@@ -892,8 +911,7 @@
 												{:else if itemsType?.type == 'string' && itemsType?.contentEncoding == 'base64'}
 													<FileInput
 														class="w-full"
-														onChange={(x) =>
-															fileChangedInner(x?.[0], (val) => (value[i] = val))}
+														onChange={(x) => fileChangedInner(x?.[0], (val) => (value[i] = val))}
 														multiple={false}
 													/>
 													{@render deleteItemBtn()}
@@ -912,9 +930,11 @@
 														create={extra['disableCreate'] != true}
 														on:focus={() => {
 															dispatch('focus')
+															onfocus?.()
 														}}
 														on:blur={(e) => {
 															dispatch('blur')
+															onblur?.()
 														}}
 														{defaultValue}
 														valid={valid ?? true}
@@ -946,9 +966,11 @@
 															bind:editor
 															on:focus={(e) => {
 																dispatch('focus')
+																onfocus?.()
 															}}
 															on:blur={(e) => {
 																dispatch('blur')
+																onblur?.()
 															}}
 															code={JSON.stringify(v, null, 2)}
 															bind:value={value[i]}
@@ -1132,6 +1154,7 @@
 												}),
 												() => {
 													dispatch('nestedChange')
+													onnestedChange?.()
 												}
 											}
 											bind:args={value}
@@ -1175,6 +1198,7 @@
 											{shouldDispatchChanges}
 											on:change={() => {
 												dispatch('nestedChange')
+												onnestedChange?.()
 											}}
 											on:nestedChange
 										/>
@@ -1198,9 +1222,11 @@
 										bind:editor
 										on:focus={(e) => {
 											dispatch('focus')
+											onfocus?.()
 										}}
 										on:blur={(e) => {
 											dispatch('blur')
+											onblur?.()
 										}}
 										code={rawValue}
 										on:changeValue={(e) => {
@@ -1220,9 +1246,11 @@
 								bind:editor
 								on:focus={(e) => {
 									dispatch('focus')
+									onfocus?.()
 								}}
 								on:blur={(e) => {
 									dispatch('blur')
+									onblur?.()
 								}}
 								code={rawValue}
 								on:change={(e) => {
@@ -1257,9 +1285,11 @@
 							diff={diffStatus && typeof diffStatus.diff === 'object' ? diffStatus.diff : {}}
 							on:acceptChange={(e) => {
 								dispatch('acceptChange', e.detail)
+								onacceptChange?.(e.detail)
 							}}
 							on:rejectChange={(e) => {
 								dispatch('rejectChange', e.detail)
+								onrejectChange?.(e.detail)
 							}}
 							on:nestedChange
 							nestedParent={{ label, nestedParent }}
@@ -1285,12 +1315,15 @@
 							nestedParent={{ label, nestedParent }}
 							on:acceptChange={(e) => {
 								dispatch('acceptChange', e.detail)
+								onacceptChange?.(e.detail)
 							}}
 							on:rejectChange={(e) => {
 								dispatch('rejectChange', e.detail)
+								onrejectChange?.(e.detail)
 							}}
 							on:change={() => {
 								dispatch('nestedChange')
+								onnestedChange?.()
 							}}
 							on:nestedChange
 							{shouldDispatchChanges}
@@ -1307,9 +1340,11 @@
 						bind:editor
 						on:focus={(e) => {
 							dispatch('focus')
+							onfocus?.()
 						}}
 						on:blur={(e) => {
 							dispatch('blur')
+							onblur?.()
 						}}
 						code={rawValue}
 						on:changeValue={(e) => {
@@ -1347,9 +1382,11 @@
 					{autofocus}
 					on:focus={() => {
 						dispatch('focus')
+						onfocus?.()
 					}}
 					on:blur={(e) => {
 						dispatch('blur')
+						onblur?.()
 					}}
 					enumLabels={extra['enumLabels']}
 				/>
@@ -1373,9 +1410,11 @@
 						<Module.default
 							on:focus={(e) => {
 								dispatch('focus')
+								onfocus?.()
 							}}
 							on:blur={(e) => {
 								dispatch('blur')
+								onblur?.()
 							}}
 							on:change={(e) => {
 								setNewValueFromCode(e.detail?.code)
@@ -1448,8 +1487,8 @@
 							<TextInput
 								inputProps={{
 									autofocus,
-									onfocus: () => dispatch('focus'),
-									onblur: () => dispatch('blur'),
+									onfocus: () => (dispatch('focus'), onfocus?.()),
+									onblur: () => (dispatch('blur'), onblur?.()),
 									disabled,
 									onkeydown: onKeyDown,
 									placeholder: placeholder ?? defaultValue ?? '',
diff --git a/frontend/src/lib/components/AssignableTagsInner.svelte b/frontend/src/lib/components/AssignableTagsInner.svelte
index cfca54bc99..007e1a6131 100644
--- a/frontend/src/lib/components/AssignableTagsInner.svelte
+++ b/frontend/src/lib/components/AssignableTagsInner.svelte
@@ -15,9 +15,10 @@
 
 	interface Props {
 		variant?: 'popover' | 'drawer'
+		onrefresh?: (...args: any[]) => any
 	}
 
-	let { variant = 'popover' }: Props = $props()
+	let { variant = 'popover', onrefresh = undefined }: Props = $props()
 
 	let newTag: string = $state('')
 	let customTags: string[] | undefined = $state(undefined)
@@ -82,6 +83,7 @@
 				requestBody: { value: [...(customTags ?? []), tag.trim().replaceAll(' ', '_')] }
 			})
 			dispatch('refresh')
+			onrefresh?.()
 			loadCustomTags()
 			sendUserToast(restoreCustomTags ? 'Tag restored' : 'Tag added')
 			if (!restoreCustomTags) {
@@ -119,6 +121,7 @@
 										requestBody: { value: customTags?.filter((x) => x != customTag) }
 									})
 									dispatch('refresh')
+									onrefresh?.()
 									loadCustomTags()
 									sendUserToast('Tag removed', false, [
 										{
diff --git a/frontend/src/lib/components/ChangeInstanceUsernameInner.svelte b/frontend/src/lib/components/ChangeInstanceUsernameInner.svelte
index 6fa87abf64..52513ce37a 100644
--- a/frontend/src/lib/components/ChangeInstanceUsernameInner.svelte
+++ b/frontend/src/lib/components/ChangeInstanceUsernameInner.svelte
@@ -6,18 +6,22 @@
 	import { createEventDispatcher } from 'svelte'
 
 	interface Props {
-		email: string;
-		username: string;
-		isConflict?: boolean;
-		noPadding?: boolean;
+		email: string
+		username: string
+		isConflict?: boolean
+		noPadding?: boolean
+		onrenamed?: (...args: any[]) => any
+		onclose?: (...args: any[]) => any
 	}
 
 	let {
 		email,
 		username = $bindable(),
 		isConflict = false,
-		noPadding = false
-	}: Props = $props();
+		noPadding = false,
+		onrenamed = undefined,
+		onclose = undefined
+	}: Props = $props()
 
 	let loading = $state(false)
 
@@ -75,6 +79,7 @@
 			sendUserToast(`Renamed user ${email} to ${username}`)
 
 			dispatch('renamed')
+			onrenamed?.()
 		} finally {
 			loading = false
 		}
@@ -134,6 +139,7 @@
 		on:click={() => {
 			renameUser().then(() => {
 				dispatch('close')
+				onclose?.()
 			})
 		}}
 		disabled={email === undefined || !username}
diff --git a/frontend/src/lib/components/ContentSearchInner.svelte b/frontend/src/lib/components/ContentSearchInner.svelte
index 8b20855193..34393b2e92 100644
--- a/frontend/src/lib/components/ContentSearchInner.svelte
+++ b/frontend/src/lib/components/ContentSearchInner.svelte
@@ -23,9 +23,10 @@
 	const dispatch = createEventDispatcher()
 	interface Props {
 		search?: string
+		onclose?: (...args: any[]) => any
 	}
 
-	let { search = $bindable('') }: Props = $props()
+	let { search = $bindable(''), onclose = undefined }: Props = $props()
 
 	export async function open(nsearch?: string) {
 		await Promise.all([loadScripts(), loadResources(), loadApps(), loadFlows()])
@@ -252,7 +253,7 @@
 								<Button
 									href={`/scripts/get/${item.path}`}
 									startIcon={{ icon: ExternalLink }}
-									on:click={() => dispatch('close')}
+									on:click={() => (dispatch('close'), onclose?.())}
 								>
 									Open
 								</Button>
@@ -319,7 +320,7 @@
 								<Button
 									href={`/flows/get/${item.path}`}
 									startIcon={{ icon: ExternalLink }}
-									on:click={() => dispatch('close')}
+									on:click={() => (dispatch('close'), onclose?.())}
 								>
 									Open
 								</Button>
@@ -359,7 +360,7 @@
 								<Button
 									href={`/apps/get/${item.path}`}
 									startIcon={{ icon: ExternalLink }}
-									on:click={() => dispatch('close')}
+									on:click={() => (dispatch('close'), onclose?.())}
 								>
 									Open
 								</Button>
diff --git a/frontend/src/lib/components/ContentSearchInnerItem.svelte b/frontend/src/lib/components/ContentSearchInnerItem.svelte
index 9847376a50..b2503993ef 100644
--- a/frontend/src/lib/components/ContentSearchInnerItem.svelte
+++ b/frontend/src/lib/components/ContentSearchInnerItem.svelte
@@ -6,9 +6,10 @@
 		href: string
 		actions?: import('svelte').Snippet
 		children?: import('svelte').Snippet
+		onclose?: (...args: any[]) => any
 	}
 
-	let { title, href, actions, children }: Props = $props()
+	let { title, href, actions, children, onclose = undefined }: Props = $props()
 
 	const dispatch = createEventDispatcher()
 </script>
@@ -20,6 +21,7 @@
 			{href}
 			onclick={() => {
 				dispatch('close')
+				onclose?.()
 			}}
 		>
 			{title}
diff --git a/frontend/src/lib/components/DarkModeObserver.svelte b/frontend/src/lib/components/DarkModeObserver.svelte
index 30d0d78091..24e60d1ace 100644
--- a/frontend/src/lib/components/DarkModeObserver.svelte
+++ b/frontend/src/lib/components/DarkModeObserver.svelte
@@ -36,10 +36,13 @@
 	import { onMount, onDestroy } from 'svelte'
 	import { createEventDispatcher } from 'svelte'
 
-	let { darkMode = $bindable(false) }: { darkMode?: boolean } = $props()
+	let {
+		darkMode = $bindable(false),
+		onchange = undefined
+	}: { darkMode?: boolean; onchange?: (...args: any[]) => any } = $props()
 	const dispatch = createEventDispatcher()
 	let isDarkMode = useIsDarkMode({
-		onChange: (newDarkMode) => dispatch('change', newDarkMode)
+		onChange: (newDarkMode) => (dispatch('change', newDarkMode), onchange?.(newDarkMode))
 	})
 	$effect(() => {
 		if (darkMode !== isDarkMode.val) {
diff --git a/frontend/src/lib/components/DateInput.svelte b/frontend/src/lib/components/DateInput.svelte
index d634a149ae..2f4c10d01d 100644
--- a/frontend/src/lib/components/DateInput.svelte
+++ b/frontend/src/lib/components/DateInput.svelte
@@ -12,6 +12,7 @@
 		maxDate?: string | undefined
 		dateFormat?: string | undefined
 		disabled?: boolean
+		onchange?: (...args: any[]) => any
 	}
 
 	let {
@@ -20,7 +21,8 @@
 		minDate = undefined,
 		maxDate = undefined,
 		dateFormat = 'dd-MM-yyyy',
-		disabled = false
+		disabled = false,
+		onchange = undefined
 	}: Props = $props()
 
 	const defaultDateFormat = 'dd-MM-yyyy'
@@ -60,6 +62,7 @@
 				const parsedDate = format(dateFromValue, getFormat())
 				value = parsedDate
 				dispatch('change', value)
+				onchange?.(value)
 			} catch (error) {
 				console.error('Failed to parse date:', error)
 			}
@@ -91,6 +94,7 @@
 			} else {
 				value = null
 				dispatch('change', value)
+				onchange?.(value)
 			}
 		}}
 	/>
diff --git a/frontend/src/lib/components/DateTimeInput.svelte b/frontend/src/lib/components/DateTimeInput.svelte
index ba3a848ff9..d047779082 100644
--- a/frontend/src/lib/components/DateTimeInput.svelte
+++ b/frontend/src/lib/components/DateTimeInput.svelte
@@ -25,6 +25,8 @@
 		 * 'local' will use the local timezone of the user
 		 */
 		timezone?: 'naive' | 'local'
+		onchange?: (...args: any[]) => any
+		onclear?: (...args: any[]) => any
 	}
 
 	let {
@@ -36,7 +38,9 @@
 		maxDate = undefined,
 		disabled = undefined,
 		inputClass = undefined,
-		timezone = 'local'
+		timezone = 'local',
+		onchange = undefined,
+		onclear = undefined
 	}: Props = $props()
 
 	let date: string | undefined = $state(undefined)
@@ -80,6 +84,7 @@
 		if (date === '' && value) {
 			value = null
 			dispatchIfMounted('change', value)
+			onchange?.(value)
 			return
 		}
 
@@ -89,6 +94,7 @@
 			if (newDate.getFullYear() < 1900) return
 			value = newDate.toISOString()
 			dispatchIfMounted('change', value)
+			onchange?.(value)
 		}
 	}
 
@@ -114,6 +120,7 @@
 		newDate.setMinutes(newDate.getMinutes() + mins)
 		value = newDate.toISOString()
 		dispatch('change', value)
+		onchange?.(value)
 	}
 
 	let randomId = 'datetarget-' + Math.random().toString(36).substring(7)
@@ -189,6 +196,7 @@
 			on:click={() => {
 				value = null
 				dispatch('clear')
+				onclear?.()
 			}}
 		></Button>
 	{/if}
diff --git a/frontend/src/lib/components/DeployButton.svelte b/frontend/src/lib/components/DeployButton.svelte
index 16ccc04cd2..ec5be21392 100644
--- a/frontend/src/lib/components/DeployButton.svelte
+++ b/frontend/src/lib/components/DeployButton.svelte
@@ -7,7 +7,8 @@
 		loading = false,
 		loadingSave = false,
 		newFlow = false,
-		dropdownItems = []
+		dropdownItems = [],
+		onsave = undefined
 	}: {
 		loading?: boolean
 		loadingSave?: boolean
@@ -16,6 +17,7 @@
 			label: string
 			onClick: () => void
 		}>
+		onsave?: (...args: any[]) => any
 	} = $props()
 
 	const dispatch = createEventDispatcher()
@@ -32,7 +34,7 @@
 	variant="accent"
 	unifiedSize="md"
 	startIcon={{ icon: Save }}
-	on:click={() => dispatch('save')}
+	on:click={() => (dispatch('save'), onsave?.())}
 	dropdownItems={!newFlow ? dropdownItems : undefined}
 	tooltipPopover={{
 		placement: 'bottom-end',
@@ -66,6 +68,7 @@
 				onkeydown={async (e) => {
 					if (e.key === 'Enter') {
 						dispatch('save', deploymentMsg)
+						onsave?.(deploymentMsg)
 					}
 				}}
 				bind:this={msgInput}
@@ -73,7 +76,7 @@
 			<Button
 				unifiedSize="md"
 				variant="accent"
-				on:click={async () => dispatch('save', deploymentMsg)}
+				on:click={async () => (dispatch('save', deploymentMsg), onsave?.(deploymentMsg))}
 				endIcon={{ icon: CornerDownLeft }}
 				loading={loadingSave}
 			>
diff --git a/frontend/src/lib/components/DeployWorkspace.svelte b/frontend/src/lib/components/DeployWorkspace.svelte
index c5e289a85b..6b5b44f675 100644
--- a/frontend/src/lib/components/DeployWorkspace.svelte
+++ b/frontend/src/lib/components/DeployWorkspace.svelte
@@ -48,6 +48,7 @@
 		workspaceToDeployTo?: string | undefined
 		hideButton?: boolean
 		canDeployToWorkspace?: boolean
+		onupdate?: (...args: any[]) => any
 	}
 
 	let {
@@ -56,7 +57,8 @@
 		additionalInformation = undefined,
 		workspaceToDeployTo = $bindable(undefined),
 		hideButton = false,
-		canDeployToWorkspace = $bindable(true)
+		canDeployToWorkspace = $bindable(true),
+		onupdate = undefined
 	}: Props = $props()
 
 	let canSeeTarget: 'yes' | 'cant-deploy-to-workspace' | 'cant-see-all-deps' | undefined =
@@ -99,9 +101,7 @@
 			if (!$superadmin) {
 				const targetUser = await UserService.whoami({ workspace: workspaceToDeployTo! })
 				canPreserveOnBehalfOf =
-					targetUser.is_admin ||
-					targetUser.groups?.includes('wm_deployers') ||
-					false
+					targetUser.is_admin || targetUser.groups?.includes('wm_deployers') || false
 			} else {
 				canPreserveOnBehalfOf = true
 			}
@@ -315,6 +315,7 @@
 			}
 		})
 		dispatch('update', initialPath)
+		onupdate?.(initialPath)
 	}
 
 	function computeStatusPath(kind: Kind, path: string) {
@@ -538,16 +539,14 @@
 							{#if kind === 'trigger'}
 								You must set the "edited by" user for all triggers before deploying
 								<Tooltip class="text-yellow-600">
-									The "edited by" field defines which user's permissions will be applied
-									when the trigger runs. Make sure this is set to an appropriate user
-									before deploying.
+									The "edited by" field defines which user's permissions will be applied when the
+									trigger runs. Make sure this is set to an appropriate user before deploying.
 								</Tooltip>
 							{:else}
 								You must set the "on behalf of" user for all items before deploying
 								<Tooltip class="text-yellow-600">
-									The "run on behalf of" field defines which user's permissions will be
-									applied during execution. Make sure this is set to an appropriate user
-									before deploying.
+									The "run on behalf of" field defines which user's permissions will be applied
+									during execution. Make sure this is set to an appropriate user before deploying.
 								</Tooltip>
 							{/if}
 						</span>
diff --git a/frontend/src/lib/components/DisplayResult.svelte b/frontend/src/lib/components/DisplayResult.svelte
index 4e2b07b1c5..01879329fc 100644
--- a/frontend/src/lib/components/DisplayResult.svelte
+++ b/frontend/src/lib/components/DisplayResult.svelte
@@ -100,6 +100,7 @@
 		copilot_fix?: import('svelte').Snippet
 		children?: import('svelte').Snippet
 		growVertical?: boolean
+		ontoolbarLocationChanged?: (...args: any[]) => any
 	}
 
 	let {
@@ -124,7 +125,8 @@
 		copilot_fix,
 		children,
 		loading = false,
-		growVertical = false
+		growVertical = false,
+		ontoolbarLocationChanged = undefined
 	}: Props = $props()
 	let enableHtml = $state(false)
 	let s3FileDisplayRawMode = $state(false)
@@ -469,6 +471,7 @@
 			toolbarLocation = 'self'
 		}
 		dispatch('toolbar-location-changed', toolbarLocation)
+		ontoolbarLocationChanged?.(toolbarLocation)
 	}
 
 	export function getToolbarLocation() {
@@ -477,6 +480,7 @@
 
 	onDestroy(() => {
 		dispatch('toolbar-location-changed', undefined)
+		ontoolbarLocationChanged?.(undefined)
 	})
 
 	$effect(() => {
diff --git a/frontend/src/lib/components/DisplayResultControlBar.svelte b/frontend/src/lib/components/DisplayResultControlBar.svelte
index 95d0a3414e..3924ff7aa1 100644
--- a/frontend/src/lib/components/DisplayResultControlBar.svelte
+++ b/frontend/src/lib/components/DisplayResultControlBar.svelte
@@ -15,6 +15,7 @@
 		base: string
 		result: any
 		disableTooltips?: boolean
+		onopenDrawer?: (...args: any[]) => any
 	}
 
 	let {
@@ -25,7 +26,8 @@
 		nodeId = undefined,
 		base,
 		result,
-		disableTooltips = false
+		disableTooltips = false,
+		onopenDrawer = undefined
 	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
@@ -67,7 +69,7 @@
 	<button onclick={() => copyToClipboard(toJsonStr(result))}>
 		<ClipboardCopy size={14} />
 	</button>
-	<button onclick={() => dispatch('open-drawer')}>
+	<button onclick={() => (dispatch('open-drawer'), onopenDrawer?.())}>
 		<Expand size={14} />
 	</button>
 </div>
diff --git a/frontend/src/lib/components/EditableSchemaForm.svelte b/frontend/src/lib/components/EditableSchemaForm.svelte
index 02b3ad7304..d564461c49 100644
--- a/frontend/src/lib/components/EditableSchemaForm.svelte
+++ b/frontend/src/lib/components/EditableSchemaForm.svelte
@@ -81,6 +81,8 @@
 		extraTab?: import('svelte').Snippet
 		schemaFormClassName?: string
 		onChange?: (args: Record<string, any>) => void
+		oneditPanelSizeChanged?: (...args: any[]) => any
+		ondelete?: (...args: any[]) => any
 	}
 
 	let {
@@ -117,7 +119,9 @@
 		runButton,
 		extraTab,
 		schemaFormClassName = undefined,
-		onChange = undefined
+		onChange = undefined,
+		oneditPanelSizeChanged = undefined,
+		ondelete = undefined
 	}: Props = $props()
 
 	$effect.pre(() => {
@@ -322,6 +326,7 @@
 		editPanelSize = editSize
 		inputPanelSize = inputSize
 		dispatch('editPanelSizeChanged', editSize)
+		oneditPanelSizeChanged?.(editSize)
 	}
 
 	let panelButtonWidth: number = $state(0)
@@ -647,6 +652,7 @@
 													aria-label="Clear"
 													onclick={() => {
 														dispatch('delete', argName)
+														ondelete?.(argName)
 													}}
 												>
 													<X size={16} />
diff --git a/frontend/src/lib/components/Editor.svelte b/frontend/src/lib/components/Editor.svelte
index 46a30ffc16..8c18430a5d 100644
--- a/frontend/src/lib/components/Editor.svelte
+++ b/frontend/src/lib/components/Editor.svelte
@@ -144,6 +144,12 @@
 		preparedAssetsSqlQueries?: InferAssetsSqlQueryDetails[] | undefined
 		// To execute preview scripts with the right worker group
 		customTag?: string
+		onchange?: (...args: any[]) => any
+		onsaveDraft?: (...args: any[]) => any
+		onblur?: (...args: any[]) => any
+		onfocus?: (...args: any[]) => any
+		ontoggleTestPanel?: (...args: any[]) => any
+		onataReady?: (...args: any[]) => any
 	}
 
 	let {
@@ -174,7 +180,13 @@
 		enablePreprocessorSnippet = false,
 		rawAppRunnableKey = undefined,
 		preparedAssetsSqlQueries,
-		customTag
+		customTag,
+		onchange = undefined,
+		onsaveDraft = undefined,
+		onblur = undefined,
+		onfocus = undefined,
+		ontoggleTestPanel = undefined,
+		onataReady = undefined
 	}: Props = $props()
 
 	$effect.pre(() => {
@@ -395,6 +407,7 @@
 		}
 		code = ncode
 		dispatch('change', ncode)
+		onchange?.(ncode)
 	}
 
 	export function append(code: string): void {
@@ -1237,6 +1250,7 @@
 
 	function saveDraft() {
 		dispatch('saveDraft', code)
+		onsaveDraft?.(code)
 	}
 
 	let vimDisposable: IDisposable | undefined = $state(undefined)
@@ -1450,6 +1464,7 @@
 
 		editor?.onDidBlurEditorText(() => {
 			dispatch('blur')
+			onblur?.()
 		})
 
 		editor?.onDidChangeCursorPosition((event) => {
@@ -1458,6 +1473,7 @@
 
 		editor?.onDidFocusEditorText(() => {
 			dispatch('focus')
+			onfocus?.()
 
 			// for escape we use onkeydown instead of addCommand because addCommand on escape specifically prevents default behavior (like autocomplete cancellation)
 			editor?.onKeyDown((e) => {
@@ -1526,6 +1542,7 @@
 
 			editor?.addCommand(KeyMod.CtrlCmd | KeyCode.KeyU, function () {
 				dispatch('toggleTestPanel')
+				ontoggleTestPanel?.()
 			})
 
 			if (
@@ -1705,6 +1722,7 @@
 				ata?.(code ?? '')
 			}
 			dispatch('ataReady')
+			onataReady?.()
 		}
 	}
 
diff --git a/frontend/src/lib/components/EditorBar.svelte b/frontend/src/lib/components/EditorBar.svelte
index 3dfc25e127..18ba5ba64d 100644
--- a/frontend/src/lib/components/EditorBar.svelte
+++ b/frontend/src/lib/components/EditorBar.svelte
@@ -94,6 +94,9 @@
 		right?: import('svelte').Snippet
 		openAiChat?: boolean
 		moduleId?: string
+		ontoggleCollabMode?: (...args: any[]) => any
+		oncollabPopup?: (...args: any[]) => any
+		oncreateScriptFromInlineScript?: (...args: any[]) => any
 	}
 
 	let {
@@ -116,7 +119,10 @@
 		showHistoryDrawer = $bindable(false),
 		right,
 		openAiChat = false,
-		moduleId = undefined
+		moduleId = undefined,
+		ontoggleCollabMode = undefined,
+		oncollabPopup = undefined,
+		oncreateScriptFromInlineScript = undefined
 	}: Props = $props()
 
 	let contextualVariablePicker: ItemPicker | undefined = $state()
@@ -1054,7 +1060,7 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 						options={{ right: '' }}
 						size="xs"
 						checked={collabLive}
-						on:change={() => dispatch('toggleCollabMode')}
+						on:change={() => (dispatch('toggleCollabMode'), ontoggleCollabMode?.())}
 					/>
 					<Popover>
 						{#snippet text()}
@@ -1066,7 +1072,8 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 						<button
 							title="Show invite link"
 							class="p-1 rounded hover:bg-gray-400 mx-1 border"
-							onclick={() => dispatch('collabPopup')}><Link size={14} /></button
+							onclick={() => (dispatch('collabPopup'), oncollabPopup?.())}
+							><Link size={14} /></button
 						>
 						<div class="isolate flex -space-x-2 pl-2">
 							{#each collabUsers as user}
@@ -1125,7 +1132,10 @@ JsonNode ${windmillPathToCamelCaseName(path)} = JsonNode.Parse(await client.GetS
 				unifiedSize="sm"
 				variant="subtle"
 				startIcon={{ icon: Save }}
-				on:click={() => dispatch('createScriptFromInlineScript')}
+				on:click={() => (
+					dispatch('createScriptFromInlineScript'),
+					oncreateScriptFromInlineScript?.()
+				)}
 				iconOnly={false}
 			>
 				Save to workspace
diff --git a/frontend/src/lib/components/FlowGraphViewer.svelte b/frontend/src/lib/components/FlowGraphViewer.svelte
index f4b3b1cc97..6e2793206f 100644
--- a/frontend/src/lib/components/FlowGraphViewer.svelte
+++ b/frontend/src/lib/components/FlowGraphViewer.svelte
@@ -9,24 +9,25 @@
 	import { dfs } from './flows/dfs'
 	import { workspaceStore } from '$lib/stores'
 
-
 	interface Props {
 		flow: {
-		summary: string
-		description?: string
-		value: FlowValue
-		schema?: any
-		path?: string
-	};
-		overflowAuto?: boolean;
-		noSide?: boolean;
-		download?: boolean;
-		noGraph?: boolean;
-		triggerNode?: boolean;
-		stepDetail?: FlowModule | string | undefined;
-		workspace?: string | undefined;
-		minHeight?: number;
-		noBorder?: boolean;
+			summary: string
+			description?: string
+			value: FlowValue
+			schema?: any
+			path?: string
+		}
+		overflowAuto?: boolean
+		noSide?: boolean
+		download?: boolean
+		noGraph?: boolean
+		triggerNode?: boolean
+		stepDetail?: FlowModule | string | undefined
+		workspace?: string | undefined
+		minHeight?: number
+		noBorder?: boolean
+		ontriggerDetail?: (...args: any[]) => any
+		onselect?: (...args: any[]) => any
 	}
 
 	let {
@@ -39,8 +40,10 @@
 		stepDetail = $bindable(undefined),
 		workspace = $workspaceStore,
 		minHeight = 400,
-		noBorder = false
-	}: Props = $props();
+		noBorder = false,
+		ontriggerDetail = undefined,
+		onselect = undefined
+	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
 </script>
@@ -67,6 +70,7 @@
 				onSelect={(nodeId) => {
 					if (nodeId === 'Trigger') {
 						dispatch('triggerDetail')
+						ontriggerDetail?.()
 						return
 					} else if (nodeId === 'failure') {
 						stepDetail = flow?.value?.failure_module
@@ -77,6 +81,7 @@
 					}
 					stepDetail = stepDetail ?? nodeId
 					dispatch('select', stepDetail)
+					onselect?.(stepDetail)
 				}}
 			/>
 		</div>
diff --git a/frontend/src/lib/components/FlowHistoryJobPicker.svelte b/frontend/src/lib/components/FlowHistoryJobPicker.svelte
index 3a703d8bd7..80fbfc83e3 100644
--- a/frontend/src/lib/components/FlowHistoryJobPicker.svelte
+++ b/frontend/src/lib/components/FlowHistoryJobPicker.svelte
@@ -12,13 +12,19 @@
 		selected?: string | undefined
 		selectInitial?: boolean
 		loading?: boolean
+		onselect?: (...args: any[]) => any
+		onnohistory?: (...args: any[]) => any
+		onunselect?: (...args: any[]) => any
 	}
 
 	let {
 		path,
 		selected = undefined,
 		selectInitial = false,
-		loading = $bindable(false)
+		loading = $bindable(false),
+		onselect = undefined,
+		onnohistory = undefined,
+		onunselect = undefined
 	}: Props = $props()
 	const dispatch = createEventDispatcher()
 
@@ -33,9 +39,11 @@
 		if (jobs.length > 0) {
 			if (selectInitial) {
 				dispatch('select', { jobId: jobs[0].id, initial: true })
+				onselect?.({ jobId: jobs[0].id, initial: true })
 			}
 		} else {
 			dispatch('nohistory')
+			onnohistory?.()
 		}
 		loading = false
 	}
@@ -55,8 +63,10 @@
 				on:select={(e) => {
 					if (e.detail) {
 						dispatch('select', { jobId: e.detail?.jobId, initial: false })
+						onselect?.({ jobId: e.detail?.jobId, initial: false })
 					} else {
 						dispatch('unselect')
+						onunselect?.()
 					}
 				}}
 				{selected}
diff --git a/frontend/src/lib/components/FlowLoopIterationPreview.svelte b/frontend/src/lib/components/FlowLoopIterationPreview.svelte
index f92072b5fd..e1c29d8fcd 100644
--- a/frontend/src/lib/components/FlowLoopIterationPreview.svelte
+++ b/frontend/src/lib/components/FlowLoopIterationPreview.svelte
@@ -18,6 +18,7 @@
 		modules: FlowModule[]
 		previewArgs?: Record<string, any>
 		whileLoop?: boolean
+		onclose?: (...args: any[]) => any
 	}
 
 	let {
@@ -26,7 +27,8 @@
 		job = $bindable(undefined),
 		modules,
 		previewArgs = $bindable({}),
-		whileLoop = false
+		whileLoop = false,
+		onclose = undefined
 	}: Props = $props()
 
 	export const forloopSchema: Schema = {
@@ -112,7 +114,7 @@
 	<div class="flex flex-row justify-between w-full items-center gap-x-2">
 		<div class="w-8">
 			<Button
-				on:click={() => dispatch('close')}
+				on:click={() => (dispatch('close'), onclose?.())}
 				startIcon={{ icon: X }}
 				iconOnly
 				unifiedSize="md"
diff --git a/frontend/src/lib/components/FlowPreviewContent.svelte b/frontend/src/lib/components/FlowPreviewContent.svelte
index 28546536bb..d4b40a504d 100644
--- a/frontend/src/lib/components/FlowPreviewContent.svelte
+++ b/frontend/src/lib/components/FlowPreviewContent.svelte
@@ -65,6 +65,7 @@
 			tagLabel?: string | undefined
 		}
 		suspendStatus: StateStore<Record<string, { job: Job; nb: number }>>
+		onclose?: (...args: any[]) => any
 	}
 
 	let {
@@ -86,7 +87,8 @@
 		render = false,
 		onJobDone,
 		upToId = undefined,
-		suspendStatus
+		suspendStatus,
+		onclose = undefined
 	}: Props = $props()
 
 	let restartBranchNames: [number, string][] = []
@@ -384,7 +386,7 @@
 		<div class="flex flex-row w-full items-center gap-x-2 px-4">
 			<div class="w-8">
 				<Button
-					on:click={() => dispatch('close')}
+					on:click={() => (dispatch('close'), onclose?.())}
 					startIcon={{ icon: X }}
 					iconOnly
 					unifiedSize="md"
@@ -437,7 +439,8 @@
 							startIcon={{ icon: isRunning ? RefreshCw : Play }}
 							size="sm"
 							btnClasses="w-full max-w-lg"
-							on:click={() => recordingMode ? recordAndTest() : runPreview(previewArgs.val, undefined)}
+							on:click={() =>
+								recordingMode ? recordAndTest() : runPreview(previewArgs.val, undefined)}
 							id="flow-editor-test-flow-drawer"
 							shortCut={{ Icon: CornerDownLeft }}
 						>
diff --git a/frontend/src/lib/components/FolderEditor.svelte b/frontend/src/lib/components/FolderEditor.svelte
index cc77c2f6a6..6fb9e58eca 100644
--- a/frontend/src/lib/components/FolderEditor.svelte
+++ b/frontend/src/lib/components/FolderEditor.svelte
@@ -24,9 +24,10 @@
 
 	interface Props {
 		name: string
+		onupdate?: (...args: any[]) => any
 	}
 
-	let { name }: Props = $props()
+	let { name, onupdate = undefined }: Props = $props()
 	let can_write = $state(false)
 
 	type Role = 'viewer' | 'writer' | 'admin'
@@ -137,6 +138,7 @@
 		})
 		sendUserToast('Folder summary updated')
 		dispatch('update')
+		onupdate?.()
 		loadFolder()
 	}
 	$effect.pre(() => {
diff --git a/frontend/src/lib/components/GitRepoPopoverPicker.svelte b/frontend/src/lib/components/GitRepoPopoverPicker.svelte
index f8050a90a2..dc573c0a82 100644
--- a/frontend/src/lib/components/GitRepoPopoverPicker.svelte
+++ b/frontend/src/lib/components/GitRepoPopoverPicker.svelte
@@ -8,9 +8,10 @@
 	interface Props {
 		isOpen?: boolean
 		children?: import('svelte').Snippet
+		onselected?: (...args: any[]) => any
 	}
 
-	let { isOpen = $bindable(false), children }: Props = $props()
+	let { isOpen = $bindable(false), children, onselected = undefined }: Props = $props()
 
 	const dispatch = createEventDispatcher<{
 		selected: { resourcePath: string }
@@ -46,6 +47,7 @@
 
 	function handleSelect(resourcePath: string) {
 		dispatch('selected', { resourcePath })
+		onselected?.({ resourcePath })
 		isOpen = false
 	}
 </script>
diff --git a/frontend/src/lib/components/GitRepoResourcePicker.svelte b/frontend/src/lib/components/GitRepoResourcePicker.svelte
index c1db328acc..c72d6b039b 100644
--- a/frontend/src/lib/components/GitRepoResourcePicker.svelte
+++ b/frontend/src/lib/components/GitRepoResourcePicker.svelte
@@ -13,6 +13,8 @@
 		currentInventories?: string
 		currentPlaybook?: string
 		gitSshIdentity?: string[]
+		onselected?: (...args: any[]) => any
+		onaddInventories?: (...args: any[]) => any
 	}
 
 	let {
@@ -21,7 +23,9 @@
 		currentCommit = undefined,
 		currentInventories = undefined,
 		currentPlaybook = undefined,
-		gitSshIdentity = undefined
+		gitSshIdentity = undefined,
+		onselected = undefined,
+		onaddInventories = undefined
 	}: Props = $props()
 
 	const dispatch = createEventDispatcher<{
@@ -79,6 +83,7 @@
 	function handleSelect() {
 		if (selectedResource) {
 			dispatch('selected', { resourcePath: selectedResource, playbook, inventoriesLocation })
+			onselected?.({ resourcePath: selectedResource, playbook, inventoriesLocation })
 			selectedResource = undefined
 			open = false
 		}
@@ -147,6 +152,9 @@
 				inventoryPaths: inventoryFiles
 			})
 
+			onaddInventories?.({
+				inventoryPaths: inventoryFiles
+			})
 			// TODO: Add success feedback
 		} catch (error) {
 			console.error('Failed to load inventory files:', error)
diff --git a/frontend/src/lib/components/GroupEditor.svelte b/frontend/src/lib/components/GroupEditor.svelte
index e707a93203..5e1400f666 100644
--- a/frontend/src/lib/components/GroupEditor.svelte
+++ b/frontend/src/lib/components/GroupEditor.svelte
@@ -25,9 +25,10 @@
 
 	interface Props {
 		name: string
+		onupdate?: (...args: any[]) => any
 	}
 
-	let { name }: Props = $props()
+	let { name, onupdate = undefined }: Props = $props()
 	let can_write = $state(false)
 
 	type Role = 'member' | 'manager' | 'admin'
@@ -141,6 +142,7 @@
 						requestBody: { summary }
 					})
 					dispatch('update')
+					onupdate?.()
 					sendUserToast('Group summary updated')
 					loadGroup()
 				}}>Save</Button
diff --git a/frontend/src/lib/components/HistoricInputs.svelte b/frontend/src/lib/components/HistoricInputs.svelte
index ca01013e0a..d11cb8b54f 100644
--- a/frontend/src/lib/components/HistoricInputs.svelte
+++ b/frontend/src/lib/components/HistoricInputs.svelte
@@ -17,6 +17,7 @@
 		placement?: 'bottom-start' | 'top-start' | 'bottom-end' | 'top-end'
 		limitPayloadSize?: boolean
 		searchArgs?: Record<string, any> | undefined
+		onselect?: (...args: any[]) => any
 	}
 
 	let {
@@ -26,7 +27,8 @@
 		showAuthor = false,
 		placement = 'top-end',
 		limitPayloadSize = false,
-		searchArgs = undefined
+		searchArgs = undefined,
+		onselect = undefined
 	}: Props = $props()
 
 	let historicList: HistoricList | undefined = $state(undefined)
@@ -44,11 +46,16 @@
 		if (data.payloadData === 'WINDMILL_TOO_BIG') {
 			const fullPayload = await data.getFullPayload?.()
 			dispatch('select', { args: fullPayload, jobId: data.id })
+			onselect?.({ args: fullPayload, jobId: data.id })
 		} else {
 			dispatch('select', {
 				args: structuredClone($state.snapshot(data.payloadData)),
 				jobId: data.id
 			})
+			onselect?.({
+				args: structuredClone($state.snapshot(data.payloadData)),
+				jobId: data.id
+			})
 		}
 	}
 
@@ -84,6 +91,7 @@
 		selected = undefined
 		if (dispatchEvent) {
 			dispatch('select', undefined)
+			onselect?.(undefined)
 		}
 	}
 
diff --git a/frontend/src/lib/components/InfiniteList.svelte b/frontend/src/lib/components/InfiniteList.svelte
index d4b5a05f9a..382b0b901e 100644
--- a/frontend/src/lib/components/InfiniteList.svelte
+++ b/frontend/src/lib/components/InfiniteList.svelte
@@ -22,6 +22,8 @@
 		extra_row?: import('svelte').Snippet<[any]>
 		children?: import('svelte').Snippet<[any]>
 		empty?: import('svelte').Snippet<[any]>
+		onerror?: (...args: any[]) => any
+		onselect?: (...args: any[]) => any
 	}
 
 	let {
@@ -43,7 +45,9 @@
 		columns,
 		extra_row,
 		children,
-		empty
+		empty,
+		onerror = undefined,
+		onselect = undefined
 	}: Props = $props()
 
 	const perPage = 20
@@ -125,6 +129,7 @@
 			if (hasAlreadyFailed) return
 			hasAlreadyFailed = true
 			dispatch('error', { type: 'load', error: err })
+			onerror?.({ type: 'load', error: err })
 		} finally {
 			loading = false
 			loadingMore = false
@@ -145,6 +150,7 @@
 			}, 100)
 		} catch (err) {
 			dispatch('error', { type: 'delete', error: err })
+			onerror?.({ type: 'delete', error: err })
 		}
 	}
 
@@ -178,7 +184,7 @@
 	<tbody class="h-full w-full">
 		{#if extra_row}
 			<Row
-				onclick={() => dispatch('select', 'extraRow')}
+				onclick={() => (dispatch('select', 'extraRow'), onselect?.('extraRow'))}
 				class={twMerge(
 					extraRowClasses.class,
 					selectedItemId === 'extraRow' ? extraRowClasses.bgSelected : extraRowClasses.bgHover,
@@ -195,7 +201,7 @@
 				{@render customRow?.({ item, hover })}
 			{:else}
 				<Row
-					onclick={() => dispatch('select', item)}
+					onclick={() => (dispatch('select', item), onselect?.(item))}
 					class={twMerge(
 						selectedItemId === item.id ? 'bg-surface-selected' : 'hover:bg-surface-hover',
 						'cursor-pointer rounded-md',
diff --git a/frontend/src/lib/components/InputTransformForm.svelte b/frontend/src/lib/components/InputTransformForm.svelte
index 98bb3035de..9d9c0f58e9 100644
--- a/frontend/src/lib/components/InputTransformForm.svelte
+++ b/frontend/src/lib/components/InputTransformForm.svelte
@@ -68,6 +68,7 @@
 		allowedAiTransforms?: string[] | undefined
 		s3StorageConfigured?: boolean
 		chatInputEnabled?: boolean
+		onchange?: (...args: any[]) => any
 	}
 
 	let {
@@ -95,7 +96,8 @@
 		isAgentTool = false,
 		allowedAiTransforms = isAgentTool ? undefined : [],
 		s3StorageConfigured = true,
-		chatInputEnabled = false
+		chatInputEnabled = false,
+		onchange = undefined
 	}: Props = $props()
 
 	let monaco: SimpleEditor | undefined = $state(undefined)
@@ -300,6 +302,7 @@
 
 		// Dispatch change
 		dispatch('change', { argName, arg })
+		onchange?.({ argName, arg })
 	}
 
 	async function switchToJsAndConnect(onPath: (path: string) => void) {
@@ -579,6 +582,7 @@
 									focusProp?.(argName, (path) => {
 										connectProperty(path)
 										dispatch('change', { argName })
+										onchange?.({ argName })
 										return true
 									})
 								}
@@ -774,6 +778,7 @@
 										fontSize={12}
 										on:change={() => {
 											dispatch('change', { argName, arg })
+											onchange?.({ argName, arg })
 										}}
 										loadAsync
 										class="bg-surface-input"
@@ -792,6 +797,7 @@
 								shouldDispatchChanges
 								on:change={() => {
 									dispatch('change', { argName, arg })
+									onchange?.({ argName, arg })
 								}}
 								label={argName}
 								bind:editor={monaco}
@@ -867,6 +873,7 @@
 									}}
 									on:change={() => {
 										dispatch('change', { argName, arg })
+										onchange?.({ argName, arg })
 									}}
 									autoHeight
 									loadAsync
diff --git a/frontend/src/lib/components/InstanceGroupEditor.svelte b/frontend/src/lib/components/InstanceGroupEditor.svelte
index 860b41de68..ac9ee8606f 100644
--- a/frontend/src/lib/components/InstanceGroupEditor.svelte
+++ b/frontend/src/lib/components/InstanceGroupEditor.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-
 	import { GroupService, type InstanceGroup } from '$lib/gen'
 	import { createEventDispatcher } from 'svelte'
 	import autosize from '$lib/autosize'
@@ -10,10 +9,11 @@
 	import { Loader2 } from 'lucide-svelte'
 
 	interface Props {
-		name: string;
+		name: string
+		onupdate?: (...args: any[]) => any
 	}
 
-	let { name }: Props = $props();
+	let { name, onupdate = undefined }: Props = $props()
 
 	let email = $state('')
 	let instance_group: InstanceGroup | undefined = $state()
@@ -21,7 +21,6 @@
 
 	const dispatch = createEventDispatcher()
 
-
 	async function load() {
 		return Promise.all([loadInstanceGroup()])
 	}
@@ -36,7 +35,7 @@
 	}
 	$effect(() => {
 		load()
-	});
+	})
 </script>
 
 <div class="flex flex-col gap-6">
@@ -58,6 +57,7 @@
 							requestBody: { new_summary: instance_group?.summary ?? '' }
 						})
 						dispatch('update')
+						onupdate?.()
 						sendUserToast('New summary saved')
 					}}>Save Summary</Button
 				>
@@ -81,6 +81,7 @@
 						requestBody: { email: email }
 					})
 					dispatch('update')
+					onupdate?.()
 					sendUserToast('User added')
 					loadInstanceGroup()
 				}}
@@ -97,26 +98,27 @@
 					</tr>
 				{/snippet}
 				{#snippet body()}
-								<tbody >
+					<tbody>
 						{#each members as { member_email }}<tr>
 								<td>{member_email}</td>
 								<td>
 									<button
 										class="ml-2 text-red-500"
 										onclick={async () => {
-										await GroupService.removeUserFromInstanceGroup({
-											name,
-											requestBody: { email: member_email }
-										})
-										dispatch('update')
-										sendUserToast('User removed')
-										loadInstanceGroup()
-									}}>remove</button
+											await GroupService.removeUserFromInstanceGroup({
+												name,
+												requestBody: { email: member_email }
+											})
+											dispatch('update')
+											onupdate?.()
+											sendUserToast('User removed')
+											loadInstanceGroup()
+										}}>remove</button
 									>
 								</td>
 							</tr>{/each}
 					</tbody>
-							{/snippet}
+				{/snippet}
 			</TableCustom>
 		{:else}
 			<div class="flex flex-col">
diff --git a/frontend/src/lib/components/InstanceNameEditor.svelte b/frontend/src/lib/components/InstanceNameEditor.svelte
index e6060d98a5..ea4464b177 100644
--- a/frontend/src/lib/components/InstanceNameEditor.svelte
+++ b/frontend/src/lib/components/InstanceNameEditor.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { stopPropagation, createBubbler } from 'svelte/legacy';
+	import { stopPropagation, createBubbler } from 'svelte/legacy'
 
-	const bubble = createBubbler();
+	const bubble = createBubbler()
 	import { Pencil } from 'lucide-svelte'
 	import { createEventDispatcher } from 'svelte'
 	import Button from './common/button/Button.svelte'
@@ -13,11 +13,13 @@
 	import TextInput from './text_input/TextInput.svelte'
 
 	interface Props {
-		value: string | undefined;
-		email: string;
-		username?: string | undefined;
-		automateUsernameCreation?: boolean;
-		login_type: string;
+		value: string | undefined
+		email: string
+		username?: string | undefined
+		automateUsernameCreation?: boolean
+		login_type: string
+		onsave?: (...args: any[]) => any
+		onrefresh?: (...args: any[]) => any
 	}
 
 	let {
@@ -25,8 +27,10 @@
 		email,
 		username = undefined,
 		automateUsernameCreation = false,
-		login_type = $bindable()
-	}: Props = $props();
+		login_type = $bindable(),
+		onsave = undefined,
+		onrefresh = undefined
+	}: Props = $props()
 
 	let password: string = $state('')
 
@@ -34,6 +38,7 @@
 
 	function saveName() {
 		dispatch('save', value)
+		onsave?.(value)
 	}
 	async function savePassword() {
 		if (password.length < 5) {
@@ -48,6 +53,7 @@
 		await UserService.setLoginTypeForUser({ user: email, requestBody: { login_type } })
 		sendUserToast(`Login type updated for ${email}`)
 		dispatch('refresh')
+		onrefresh?.()
 	}
 </script>
 
@@ -60,115 +66,111 @@
 	closeButton
 >
 	{#snippet trigger()}
-	
-			<Button unifiedSize="sm" nonCaptureEvent={true} variant="subtle" startIcon={{ icon: Pencil }}
-				>Edit</Button
-			>
-		
+		<Button unifiedSize="sm" nonCaptureEvent={true} variant="subtle" startIcon={{ icon: Pencil }}
+			>Edit</Button
+		>
 	{/snippet}
 	{#snippet content()}
-	
-			<div class="flex flex-col gap-8 max-w-sm p-4">
-				{#if automateUsernameCreation && username}
-					<ChangeInstanceUsernameInner {email} {username} on:renamed noPadding />
-				{/if}
-				<label class="block text-primary">
-					<div class="pb-1 text-xs font-semibold text-emphasis">Name</div>
-					<div class="flex w-full">
-						<TextInput
-							inputProps={{
-								onclick: (e) => {
-									e.stopPropagation()
-								},
-								onkeydown: (e) => {
-									e.stopPropagation()
-								},
-								onkeypress: ({ key }) => {
-									if (key === 'Enter') {
-										saveName()
-									}
+		<div class="flex flex-col gap-8 max-w-sm p-4">
+			{#if automateUsernameCreation && username}
+				<ChangeInstanceUsernameInner {email} {username} on:renamed noPadding />
+			{/if}
+			<label class="block text-primary">
+				<div class="pb-1 text-xs font-semibold text-emphasis">Name</div>
+				<div class="flex w-full">
+					<TextInput
+						inputProps={{
+							onclick: (e) => {
+								e.stopPropagation()
+							},
+							onkeydown: (e) => {
+								e.stopPropagation()
+							},
+							onkeypress: ({ key }) => {
+								if (key === 'Enter') {
+									saveName()
 								}
-							}}
-							bind:value
-						/>
-					</div>
-					<Button
-						unifiedSize="md"
-						variant="default"
-						buttonType="button"
-						btnClasses="mt-2 "
-						aria-label="Save ID"
-						onclick={() => {
-							saveName()
+							}
 						}}
-					>
-						Update name
-					</Button>
-				</label>
-				<label class="block text-primary">
-					<div class="pb-1 text-xs font-semibold text-emphasis">Password</div>
-					<div class="flex w-full">
-						<input
-							type="password"
-							bind:value={password}
-							class="!w-auto grow"
-							onclick={stopPropagation(() => {})}
-							onkeydown={stopPropagation(bubble('keydown'))}
-							onkeypress={stopPropagation((e: Event) => {
+						bind:value
+					/>
+				</div>
+				<Button
+					unifiedSize="md"
+					variant="default"
+					buttonType="button"
+					btnClasses="mt-2 "
+					aria-label="Save ID"
+					onclick={() => {
+						saveName()
+					}}
+				>
+					Update name
+				</Button>
+			</label>
+			<label class="block text-primary">
+				<div class="pb-1 text-xs font-semibold text-emphasis">Password</div>
+				<div class="flex w-full">
+					<input
+						type="password"
+						bind:value={password}
+						class="!w-auto grow"
+						onclick={stopPropagation(() => {})}
+						onkeydown={stopPropagation(bubble('keydown'))}
+						onkeypress={stopPropagation((e: Event) => {
 							if ((e as KeyboardEvent).key === 'Enter') {
 								savePassword()
 							}
 						})}
-						/>
-					</div>
-					<Button
-						unifiedSize="md"
-						variant="default"
-						buttonType="button"
-						btnClasses="mt-2 "
-						aria-label="Save ID"
-						on:click={() => {
-							savePassword()
-						}}
-					>
-						Update password
-					</Button>
-				</label>
-				<label class="block text-primary">
-					<div class="mb-1 text-xs font-semibold text-emphasis">Login type</div>
+					/>
+				</div>
+				<Button
+					unifiedSize="md"
+					variant="default"
+					buttonType="button"
+					btnClasses="mt-2 "
+					aria-label="Save ID"
+					on:click={() => {
+						savePassword()
+					}}
+				>
+					Update password
+				</Button>
+			</label>
+			<label class="block text-primary">
+				<div class="mb-1 text-xs font-semibold text-emphasis">Login type</div>
 
-					<div class="flex w-full">
-						<input
-							type="text"
-							bind:value={login_type}
-							class="!w-auto grow"
-							onclick={stopPropagation(() => {})}
-							onkeydown={stopPropagation(bubble('keydown'))}
-							onkeypress={stopPropagation((e: Event) => {
+				<div class="flex w-full">
+					<input
+						type="text"
+						bind:value={login_type}
+						class="!w-auto grow"
+						onclick={stopPropagation(() => {})}
+						onkeydown={stopPropagation(bubble('keydown'))}
+						onkeypress={stopPropagation((e: Event) => {
 							if ((e as KeyboardEvent).key === 'Enter') {
 								saveLoginType()
 							}
 						})}
-						/>
-					</div>
-					<div class="text-2xs text-secondary mb-1">
-						Must match exact SSO name, "password" or "saml". Examples: password, google, saml,
-						microsoft
-					</div>
-					<Button
-						unifiedSize="md"
-						variant="default"
-						buttonType="button"
-						btnClasses="mt-2 "
-						aria-label="Save login type"
-						on:click={() => {
-							saveLoginType()
-						}}
-					>
-						Update login type
-					</Button>
-				</label>
-			</div>
-		
+					/>
+				</div>
+				<div class="text-2xs text-secondary mb-1">
+					Must match exact SSO name, "password" or "saml". Examples: password, google, saml,
+					microsoft
+				</div>
+				<Button
+					unifiedSize="md"
+					variant="default"
+					buttonType="button"
+					btnClasses="mt-2 "
+					aria-label="Save login type"
+					on:click={() => {
+						saveLoginType()
+					}}
+				>
+					Update login type
+				</Button>
+			</label>
+		</div>
 	{/snippet}
 </Popover>
diff --git a/frontend/src/lib/components/InstanceSetting.svelte b/frontend/src/lib/components/InstanceSetting.svelte
index 1780bc1d80..307098350a 100644
--- a/frontend/src/lib/components/InstanceSetting.svelte
+++ b/frontend/src/lib/components/InstanceSetting.svelte
@@ -36,6 +36,7 @@
 		openSmtpSettings?: () => void
 		oauths?: Record<string, any>
 		warning?: string
+		oncloseDrawer?: (...args: any[]) => any
 	}
 
 	let {
@@ -45,7 +46,8 @@
 		loading = true,
 		openSmtpSettings,
 		oauths,
-		warning
+		warning,
+		oncloseDrawer = undefined
 	}: Props = $props()
 	const dispatch = createEventDispatcher()
 
@@ -523,6 +525,7 @@
 								on:click={() => {
 									isCriticalAlertsUIOpen.set(true)
 									dispatch('closeDrawer')
+									oncloseDrawer?.()
 								}}
 							>
 								Show critical alerts
diff --git a/frontend/src/lib/components/InstanceSettings.svelte b/frontend/src/lib/components/InstanceSettings.svelte
index 10f65061bf..4dd6289c7c 100644
--- a/frontend/src/lib/components/InstanceSettings.svelte
+++ b/frontend/src/lib/components/InstanceSettings.svelte
@@ -30,6 +30,7 @@
 		quickSetup?: boolean
 		yamlMode?: boolean
 		hasUnsavedChanges?: boolean
+		onsaved?: (...args: any[]) => any
 	}
 
 	let {
@@ -40,7 +41,8 @@
 		onNavigateToTab,
 		quickSetup = false,
 		yamlMode = $bindable(false),
-		hasUnsavedChanges = $bindable(false)
+		hasUnsavedChanges = $bindable(false),
+		onsaved = undefined
 	}: Props = $props()
 
 	let values: Writable<Record<string, any>> = writable({})
@@ -229,6 +231,7 @@
 		} else {
 			sendUserToast('Settings updated')
 			dispatch('saved')
+			onsaved?.()
 		}
 	}
 
@@ -571,6 +574,7 @@
 		} else {
 			sendUserToast('Settings updated')
 			dispatch('saved')
+			onsaved?.()
 		}
 	}
 
diff --git a/frontend/src/lib/components/InviteGlobalUser.svelte b/frontend/src/lib/components/InviteGlobalUser.svelte
index f1a9c16a55..0b5d8ca7b4 100644
--- a/frontend/src/lib/components/InviteGlobalUser.svelte
+++ b/frontend/src/lib/components/InviteGlobalUser.svelte
@@ -9,10 +9,11 @@
 	import { globalEmailInvite } from '$lib/stores'
 
 	interface Props {
-		close?: (() => void) | undefined;
+		close?: (() => void) | undefined
+		onnew?: (...args: any[]) => any
 	}
 
-	let { close = undefined }: Props = $props();
+	let { close = undefined, onnew = undefined }: Props = $props()
 
 	const dispatch = createEventDispatcher()
 
@@ -35,6 +36,7 @@
 		$globalEmailInvite = ''
 		password = generateRandomString(10)
 		dispatch('new')
+		onnew?.()
 		close?.()
 	}
 </script>
diff --git a/frontend/src/lib/components/JsonEditor.svelte b/frontend/src/lib/components/JsonEditor.svelte
index 07db17b9c9..a7e679d556 100644
--- a/frontend/src/lib/components/JsonEditor.svelte
+++ b/frontend/src/lib/components/JsonEditor.svelte
@@ -18,6 +18,9 @@
 		class?: string | undefined
 		disabled?: boolean
 		fixedOverflowWidgets?: boolean
+		onchangeValue?: (...args: any[]) => any
+		onfocus?: (...args: any[]) => any
+		onblur?: (...args: any[]) => any
 	}
 
 	let {
@@ -29,7 +32,10 @@
 		loadAsync = false,
 		class: clazz = undefined,
 		disabled = false,
-		fixedOverflowWidgets = true
+		fixedOverflowWidgets = true,
+		onchangeValue = undefined,
+		onfocus = undefined,
+		onblur = undefined
 	}: Props = $props()
 
 	let tooBig = $derived(code && code?.length > 1000000)
@@ -47,6 +53,7 @@
 				value = JSON.parse(code ?? '')
 			}
 			dispatchIfMounted('changeValue', value)
+			onchangeValue?.(value)
 			error = ''
 		} catch (e) {
 			error = e.message
@@ -75,8 +82,8 @@
 			<SimpleEditor
 				{loadAsync}
 				{small}
-				on:focus={() => (dispatch('focus'), (focused = true))}
-				on:blur={() => (dispatch('blur'), (focused = false))}
+				on:focus={() => ((dispatch('focus'), onfocus?.()), (focused = true))}
+				on:blur={() => ((dispatch('blur'), onblur?.()), (focused = false))}
 				bind:this={editor}
 				on:change
 				autoHeight
diff --git a/frontend/src/lib/components/JsonInputs.svelte b/frontend/src/lib/components/JsonInputs.svelte
index d336ad2d46..49769e189f 100644
--- a/frontend/src/lib/components/JsonInputs.svelte
+++ b/frontend/src/lib/components/JsonInputs.svelte
@@ -8,12 +8,18 @@
 		updateOnBlur?: boolean
 		placeholder?: string
 		selected?: boolean
+		onselect?: (...args: any[]) => any
+		onfocus?: (...args: any[]) => any
+		onblur?: (...args: any[]) => any
 	}
 
 	let {
 		updateOnBlur = true,
 		placeholder = 'Write a JSON payload. The input schema will be inferred.<br/><br/>Example:<br/><br/>{<br/>&nbsp;&nbsp;"foo": "12"<br/>}',
-		selected = false
+		selected = false,
+		onselect = undefined,
+		onfocus = undefined,
+		onblur = undefined
 	}: Props = $props()
 
 	let pendingJson = $state('')
@@ -23,13 +29,16 @@
 	function updatePayloadFromJson(jsonInput: string) {
 		if (jsonInput === undefined || jsonInput === null || jsonInput.trim() === '') {
 			dispatch('select', undefined)
+			onselect?.(undefined)
 			return
 		}
 		try {
 			const parsed = JSON.parse(jsonInput)
 			dispatch('select', parsed)
+			onselect?.(parsed)
 		} catch (error) {
 			dispatch('select', undefined)
+			onselect?.(undefined)
 		}
 	}
 
@@ -40,6 +49,7 @@
 	export function resetSelected(dispatchEvent?: boolean) {
 		if (dispatchEvent) {
 			dispatch('select', undefined)
+			onselect?.(undefined)
 		}
 	}
 
@@ -62,12 +72,14 @@
 		on:focus={() => {
 			if (updateOnBlur) {
 				dispatch('focus')
+				onfocus?.()
 				updatePayloadFromJson(pendingJson)
 			}
 		}}
 		on:blur={async () => {
 			if (updateOnBlur) {
 				dispatch('blur')
+				onblur?.()
 			}
 		}}
 		on:change={(e) => {
diff --git a/frontend/src/lib/components/Path.svelte b/frontend/src/lib/components/Path.svelte
index 85ca9c4271..9a2990c018 100644
--- a/frontend/src/lib/components/Path.svelte
+++ b/frontend/src/lib/components/Path.svelte
@@ -72,6 +72,7 @@
 		hideFullPath?: boolean
 		size?: 'sm' | 'md'
 		drawerOffset?: number
+		onenter?: (...args: any[]) => any
 	}
 
 	let {
@@ -89,7 +90,8 @@
 		disableEditing = false,
 		hideFullPath = false,
 		size = 'md',
-		drawerOffset = 0
+		drawerOffset = 0,
+		onenter = undefined
 	}: Props = $props()
 
 	$effect.pre(() => {
@@ -133,6 +135,7 @@
 		if (key === 'Enter') {
 			event.preventDefault()
 			dispatch('enter')
+			onenter?.()
 		}
 	}
 
diff --git a/frontend/src/lib/components/RadioButton.svelte b/frontend/src/lib/components/RadioButton.svelte
index c7e5dc8dce..7025f80343 100644
--- a/frontend/src/lib/components/RadioButton.svelte
+++ b/frontend/src/lib/components/RadioButton.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
-
 	import { createEventDispatcher } from 'svelte'
 	import Tooltip from './Tooltip.svelte'
 	interface Props {
-		label?: string;
-		options: [string | { title: string; desc: string }, any][];
-		value: any;
-		disabled?: boolean;
-		labelClass?: string;
-		inputClass?: string;
+		label?: string
+		options: [string | { title: string; desc: string }, any][]
+		value: any
+		disabled?: boolean
+		labelClass?: string
+		inputClass?: string
+		onchange?: (...args: any[]) => any
 	}
 
 	let {
@@ -17,8 +17,9 @@
 		value = $bindable(),
 		disabled = false,
 		labelClass = '',
-		inputClass = ''
-	}: Props = $props();
+		inputClass = '',
+		onchange = undefined
+	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
 </script>
@@ -39,7 +40,7 @@
 					class="sr-only"
 					bind:group={value}
 					aria-labelledby="memory-option-0-label"
-					onclick={() => dispatch('change', val)}
+					onclick={() => (dispatch('change', val), onchange?.(val))}
 				/>
 				<p>
 					{#if typeof label !== 'string'}
diff --git a/frontend/src/lib/components/ResourceEditor.svelte b/frontend/src/lib/components/ResourceEditor.svelte
index 8ca1ecd85e..0517f24e66 100644
--- a/frontend/src/lib/components/ResourceEditor.svelte
+++ b/frontend/src/lib/components/ResourceEditor.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-
 	import type { Schema } from '$lib/common'
 	import { ResourceService, type Resource, type ResourceType } from '$lib/gen'
 	import { canWrite, emptyString, isOwner, urlize } from '$lib/utils'
@@ -32,6 +31,7 @@
 		hidePath?: boolean
 		onChange?: (args: { path: string; args: Record<string, any>; description: string }) => void
 		defaultValues?: Record<string, any> | undefined
+		onrefresh?: (...args: any[]) => any
 	}
 
 	let {
@@ -41,7 +41,8 @@
 		newResource = false,
 		hidePath = false,
 		onChange,
-		defaultValues = undefined
+		defaultValues = undefined,
+		onrefresh = undefined
 	}: Props = $props()
 
 	let isValid = $state(true)
@@ -100,6 +101,7 @@
 			}
 			sendUserToast(`Updated resource at ${path}`)
 			dispatch('refresh', path)
+			onrefresh?.(path)
 		} else {
 			throw Error('Cannot edit undefined resource')
 		}
@@ -112,6 +114,7 @@
 		})
 		sendUserToast(`Updated resource at ${path}`)
 		dispatch('refresh', path)
+		onrefresh?.(path)
 	}
 
 	async function loadResourceType(): Promise<void> {
@@ -295,9 +298,7 @@
 				{#if loadingSchema}
 					<Skeleton layout={[[4]]} />
 				{:else if !viewJsonSchema && resourceTypeInfo?.is_fileset}
-					<h5 class="mt-1 inline-flex items-center gap-4">
-						Fileset
-					</h5>
+					<h5 class="mt-1 inline-flex items-center gap-4"> Fileset </h5>
 					<FilesetEditor bind:args />
 				{:else if !viewJsonSchema && resourceSchema && resourceSchema?.properties}
 					{#if resourceTypeInfo?.format_extension}
diff --git a/frontend/src/lib/components/ResourceTypePicker.svelte b/frontend/src/lib/components/ResourceTypePicker.svelte
index c8a7422eb9..3eb92b9a50 100644
--- a/frontend/src/lib/components/ResourceTypePicker.svelte
+++ b/frontend/src/lib/components/ResourceTypePicker.svelte
@@ -13,9 +13,15 @@
 		value: string | undefined
 		notPickable?: boolean
 		nonePickable?: boolean
+		onclick?: (...args: any[]) => any
 	}
 
-	let { value = $bindable(), notPickable = false, nonePickable = false }: Props = $props()
+	let {
+		value = $bindable(),
+		notPickable = false,
+		nonePickable = false,
+		onclick = undefined
+	}: Props = $props()
 
 	let resources: string[] = $state([])
 
@@ -28,6 +34,7 @@
 	function onClick(resource: string | undefined) {
 		value = resource
 		dispatch('click', resource)
+		onclick?.(resource)
 	}
 
 	$effect(() => {
diff --git a/frontend/src/lib/components/S3FilePickerInner.svelte b/frontend/src/lib/components/S3FilePickerInner.svelte
index 380e3d9a35..e13d8105a1 100644
--- a/frontend/src/lib/components/S3FilePickerInner.svelte
+++ b/frontend/src/lib/components/S3FilePickerInner.svelte
@@ -92,6 +92,7 @@
 		testConnectionRequest?: (
 			d: DatasetStorageTestConnectionData
 		) => CancelablePromise<DatasetStorageTestConnectionResponse>
+		onselectAndClose?: (...args: any[]) => any
 	}
 
 	let {
@@ -113,7 +114,8 @@
 		loadFileMetadataRequest = HelpersService.loadFileMetadata,
 		deleteS3FileRequest = HelpersService.deleteS3File,
 		moveS3FileRequest = HelpersService.moveS3File,
-		testConnectionRequest = HelpersService.datasetStorageTestConnection
+		testConnectionRequest = HelpersService.datasetStorageTestConnection,
+		onselectAndClose = undefined
 	}: Props = $props()
 
 	let rootPathNestingLevel = $derived(1 * (rootPath.split('/').length - 1))
@@ -470,6 +472,7 @@
 	export async function selectAndClose() {
 		if (selectedFileKey?.s3) {
 			dispatch('selectAndClose', { s3: selectedFileKey.s3, storage })
+			onselectAndClose?.({ s3: selectedFileKey.s3, storage })
 		}
 	}
 
diff --git a/frontend/src/lib/components/S3ObjectPicker.svelte b/frontend/src/lib/components/S3ObjectPicker.svelte
index 36889e0e2a..356ab8bc39 100644
--- a/frontend/src/lib/components/S3ObjectPicker.svelte
+++ b/frontend/src/lib/components/S3ObjectPicker.svelte
@@ -12,11 +12,12 @@
 	import FileUpload from './common/fileUpload/FileUpload.svelte'
 
 	interface Props {
-		value: any;
-		editor?: SimpleEditor | undefined;
+		value: any
+		editor?: SimpleEditor | undefined
+		onfocus?: (...args: any[]) => any
 	}
 
-	let { value = $bindable(), editor = $bindable(undefined) }: Props = $props();
+	let { value = $bindable(), editor = $bindable(undefined), onfocus = undefined }: Props = $props()
 
 	const dispatch = createEventDispatcher()
 
@@ -65,6 +66,7 @@
 				bind:editor
 				on:focus={(e) => {
 					dispatch('focus')
+					onfocus?.()
 				}}
 				code={JSON.stringify(value ?? { s3: '' }, null, 2)}
 				bind:value
diff --git a/frontend/src/lib/components/SaveInputsButton.svelte b/frontend/src/lib/components/SaveInputsButton.svelte
index 4bddde54ca..47c713c156 100644
--- a/frontend/src/lib/components/SaveInputsButton.svelte
+++ b/frontend/src/lib/components/SaveInputsButton.svelte
@@ -11,12 +11,13 @@
 	const dispatch = createEventDispatcher()
 
 	interface Props {
-		runnableId: string | undefined;
-		runnableType: RunnableType | undefined;
-		args: object;
-		disabled?: boolean;
-		small?: boolean | undefined;
-		showTooltip?: boolean | undefined;
+		runnableId: string | undefined
+		runnableType: RunnableType | undefined
+		args: object
+		disabled?: boolean
+		small?: boolean | undefined
+		showTooltip?: boolean | undefined
+		onupdate?: (...args: any[]) => any
 	}
 
 	let {
@@ -25,8 +26,9 @@
 		args,
 		disabled = false,
 		small = undefined,
-		showTooltip = undefined
-	}: Props = $props();
+		showTooltip = undefined,
+		onupdate = undefined
+	}: Props = $props()
 
 	let savingInputs = $state(false)
 
@@ -52,6 +54,7 @@
 
 		savingInputs = false
 		dispatch('update')
+		onupdate?.()
 	}
 </script>
 
diff --git a/frontend/src/lib/components/SavedInputsPicker.svelte b/frontend/src/lib/components/SavedInputsPicker.svelte
index 057a405ac4..bba06fef67 100644
--- a/frontend/src/lib/components/SavedInputsPicker.svelte
+++ b/frontend/src/lib/components/SavedInputsPicker.svelte
@@ -21,6 +21,8 @@
 		noButton?: boolean
 		jsonView?: boolean
 		limitPayloadSize?: boolean
+		onselect?: (...args: any[]) => any
+		onisEditing?: (...args: any[]) => any
 	}
 
 	let {
@@ -30,7 +32,9 @@
 		isValid = false,
 		noButton = false,
 		jsonView = false,
-		limitPayloadSize = false
+		limitPayloadSize = false,
+		onselect = undefined,
+		onisEditing = undefined
 	}: Props = $props()
 
 	interface EditableInput extends Input {
@@ -136,9 +140,11 @@
 			if (input.payloadData === 'WINDMILL_TOO_BIG') {
 				const fullPayload = await input.getFullPayload?.()
 				dispatch('select', fullPayload)
+				onselect?.(fullPayload)
 			} else {
 				selectedArgs = structuredClone($state.snapshot(input.payloadData) ?? {})
 				dispatch('select', selectedArgs)
+				onselect?.(selectedArgs)
 			}
 		}
 	}
@@ -170,6 +176,7 @@
 	function setEditing(input: EditableInput | null) {
 		isEditing = input
 		dispatch('isEditing', !!input)
+		onisEditing?.(!!input)
 	}
 
 	function handleError(error: { type: string; error: any }) {
@@ -189,6 +196,7 @@
 		selectedArgs = undefined
 		if (dispatchEvent) {
 			dispatch('select', undefined)
+			onselect?.(undefined)
 		}
 	}
 
diff --git a/frontend/src/lib/components/SavedInputsV2.svelte b/frontend/src/lib/components/SavedInputsV2.svelte
index 7823a7caaf..525365af38 100644
--- a/frontend/src/lib/components/SavedInputsV2.svelte
+++ b/frontend/src/lib/components/SavedInputsV2.svelte
@@ -24,6 +24,7 @@
 		// Are the current Inputs valid and able to be saved?
 		isValid: boolean
 		args: object
+		onselected_args?: (...args: any[]) => any
 	}
 
 	let {
@@ -34,7 +35,8 @@
 		jsonView = false,
 		schema,
 		isValid,
-		args
+		args,
+		onselected_args = undefined
 	}: Props = $props()
 
 	export function resetSelected() {
@@ -59,9 +61,11 @@
 			}
 			inputSelected = type
 			dispatch('selected_args', selected_args)
+			onselected_args?.(selected_args)
 		} else if (savedArgs) {
 			inputSelected = type
 			dispatch('selected_args', savedArgs)
+			onselected_args?.(savedArgs)
 		}
 	}
 
diff --git a/frontend/src/lib/components/SchemaForm.svelte b/frontend/src/lib/components/SchemaForm.svelte
index cb8828286c..9894bfa61e 100644
--- a/frontend/src/lib/components/SchemaForm.svelte
+++ b/frontend/src/lib/components/SchemaForm.svelte
@@ -72,6 +72,12 @@
 		workspace?: string | undefined
 		chatInputEnabled?: boolean
 		actions?: import('svelte').Snippet<[{ item: { id: string; value: string } }]> | undefined
+		onchange?: (...args: any[]) => any
+		onclick?: (...args: any[]) => any
+		onnestedChange?: (...args: any[]) => any
+		onacceptChange?: (...args: any[]) => any
+		onrejectChange?: (...args: any[]) => any
+		onkeydownCmdEnter?: (...args: any[]) => any
 	}
 
 	let {
@@ -114,7 +120,13 @@
 		computeS3ForceViewerPolicies = undefined,
 		workspace = undefined,
 		chatInputEnabled = false,
-		actions: actions_render = undefined
+		actions: actions_render = undefined,
+		onchange = undefined,
+		onclick = undefined,
+		onnestedChange = undefined,
+		onacceptChange = undefined,
+		onrejectChange = undefined,
+		onkeydownCmdEnter = undefined
 	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
@@ -188,6 +200,7 @@
 			if (!deepEqual(keys, nkeys)) {
 				keys = nkeys
 				dispatch('change')
+				onchange?.()
 			}
 		}
 		// let missingKeys = keys.filter((x) => args && !(x in args))
@@ -360,6 +373,7 @@
 						class="flex flex-row items-center {largeGap ? 'pb-4' : 'pb-2'} "
 						onclick={() => {
 							dispatch('click', argName)
+							onclick?.(argName)
 						}}
 					>
 						{#if args && typeof args == 'object' && prop}
@@ -371,13 +385,21 @@
 									{lightHeaderFont}
 									on:change={() => {
 										dispatch('change')
+										onchange?.()
 									}}
 									on:nestedChange={() => {
 										dispatch('nestedChange')
+										onnestedChange?.()
 									}}
-									on:acceptChange={(e) => dispatch('acceptChange', e.detail)}
-									on:rejectChange={(e) => dispatch('rejectChange', e.detail)}
-									on:keydownCmdEnter={() => dispatch('keydownCmdEnter')}
+									on:acceptChange={(e) => (
+										dispatch('acceptChange', e.detail),
+										onacceptChange?.(e.detail)
+									)}
+									on:rejectChange={(e) => (
+										dispatch('rejectChange', e.detail),
+										onrejectChange?.(e.detail)
+									)}
+									on:keydownCmdEnter={() => (dispatch('keydownCmdEnter'), onkeydownCmdEnter?.())}
 									{disablePortal}
 									{resourceTypes}
 									{prettifyHeader}
@@ -398,17 +420,19 @@
 									customErrorMessage={prop?.customErrorMessage}
 									bind:properties={
 										() => prop?.properties,
-										(v) => { if (prop) prop.properties = v }
+										(v) => {
+											if (prop) prop.properties = v
+										}
 									}
 									bind:order={
 										() => prop?.order,
-										(v) => { if (prop) prop.order = v }
+										(v) => {
+											if (prop) prop.order = v
+										}
 									}
 									nestedRequired={prop?.required}
 									itemsType={prop?.items}
-									disabled={disabledArgs.includes(argName) ||
-										disabled ||
-										prop?.disabled}
+									disabled={disabledArgs.includes(argName) || disabled || prop?.disabled}
 									{compact}
 									{variableEditor}
 									{itemPicker}
diff --git a/frontend/src/lib/components/SchemaFormWithArgPicker.svelte b/frontend/src/lib/components/SchemaFormWithArgPicker.svelte
index f1f7bae6e9..28363afe4e 100644
--- a/frontend/src/lib/components/SchemaFormWithArgPicker.svelte
+++ b/frontend/src/lib/components/SchemaFormWithArgPicker.svelte
@@ -19,6 +19,7 @@
 		isValid?: boolean
 		jsonView?: boolean
 		children?: import('svelte').Snippet
+		onselect?: (...args: any[]) => any
 	}
 
 	let {
@@ -28,7 +29,8 @@
 		previewArgs,
 		isValid = true,
 		jsonView = false,
-		children
+		children,
+		onselect = undefined
 	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
@@ -142,6 +144,7 @@
 								{runnableType}
 								on:select={(e) => {
 									dispatch('select', { payload: e.detail?.args, type: 'history' })
+									onselect?.({ payload: e.detail?.args, type: 'history' })
 								}}
 							/>
 						</FlowInputEditor>
@@ -155,6 +158,7 @@
 								bind:this={savedInputsPicker}
 								on:select={(e) => {
 									dispatch('select', { payload: e.detail, type: 'saved' })
+									onselect?.({ payload: e.detail, type: 'saved' })
 								}}
 								{jsonView}
 							/>
@@ -173,6 +177,7 @@
 									path={stablePathForCaptures}
 									on:select={(e) => {
 										dispatch('select', { payload: e.detail, type: 'captures' })
+										onselect?.({ payload: e.detail, type: 'captures' })
 									}}
 									bind:this={captureTable}
 									isFlow={true}
diff --git a/frontend/src/lib/components/ScriptEditor.svelte b/frontend/src/lib/components/ScriptEditor.svelte
index 4659abc0ac..391365b2c9 100644
--- a/frontend/src/lib/components/ScriptEditor.svelte
+++ b/frontend/src/lib/components/ScriptEditor.svelte
@@ -119,6 +119,8 @@
 		assets?: AssetWithAltAccessType[]
 		editor_bar_right?: import('svelte').Snippet
 		enablePreprocessorSnippet?: boolean
+		onchange?: (...args: any[]) => any
+		onformat?: (...args: any[]) => any
 	}
 
 	let {
@@ -150,7 +152,9 @@
 		disableAi = false,
 		assets = $bindable(),
 		editor_bar_right,
-		enablePreprocessorSnippet = false
+		enablePreprocessorSnippet = false,
+		onchange = undefined,
+		onformat = undefined
 	}: Props = $props()
 
 	let initialArgs = structuredClone($state.snapshot(args))
@@ -187,6 +191,7 @@
 		watchChanges &&
 			(code != undefined || schema != undefined) &&
 			dispatch('change', { code, schema })
+		onchange?.({ code, schema })
 	})
 
 	watch(
@@ -1407,6 +1412,7 @@
 					console.error('Could not save last_save to local storage', e)
 				}
 				dispatch('format')
+				onformat?.()
 			}}
 			class="flex flex-1 h-full !overflow-visible"
 			scriptLang={lang}
diff --git a/frontend/src/lib/components/ScriptPicker.svelte b/frontend/src/lib/components/ScriptPicker.svelte
index 5fa0618edd..d04f4b2cd7 100644
--- a/frontend/src/lib/components/ScriptPicker.svelte
+++ b/frontend/src/lib/components/ScriptPicker.svelte
@@ -30,6 +30,7 @@
 		allowEdit?: boolean
 		allowView?: boolean
 		clearable?: boolean
+		onselect?: (...args: any[]) => any
 	}
 
 	let {
@@ -42,7 +43,8 @@
 		allowRefresh = false,
 		allowEdit = true,
 		allowView = true,
-		clearable = false
+		clearable = false,
+		onselect = undefined
 	}: Props = $props()
 
 	let items: { value: string; label: string }[] = $state([])
@@ -130,6 +132,7 @@
 				(path) => {
 					scriptPath = path
 					dispatch('select', { path, itemKind })
+					onselect?.({ path, itemKind })
 				}
 			}
 			class="grow shrink max-w-full"
diff --git a/frontend/src/lib/components/ScriptVersionHistory.svelte b/frontend/src/lib/components/ScriptVersionHistory.svelte
index 4d053fc433..eaafb2fe2f 100644
--- a/frontend/src/lib/components/ScriptVersionHistory.svelte
+++ b/frontend/src/lib/components/ScriptVersionHistory.svelte
@@ -13,7 +13,15 @@
 
 	const dispatch = createEventDispatcher()
 
-	let { openDetails = false, scriptPath }: { openDetails?: boolean; scriptPath: string } = $props()
+	let {
+		openDetails = false,
+		scriptPath,
+		onopenDetails = undefined
+	}: {
+		openDetails?: boolean
+		scriptPath: string
+		onopenDetails?: (...args: any[]) => any
+	} = $props()
 
 	let deploymentMsgUpdateMode = $state(false)
 	let deploymentMsgUpdate: string | undefined = $state()
@@ -102,6 +110,7 @@
 									<Button
 										on:click={() => {
 											dispatch('openDetails', { version: version.script_hash })
+											onopenDetails?.({ version: version.script_hash })
 										}}
 										class="ml-2 inline-flex gap-1 text-xs items-center"
 										size="xs"
diff --git a/frontend/src/lib/components/SimpleEditor.svelte b/frontend/src/lib/components/SimpleEditor.svelte
index 2fdd14e3f9..3d7b3dcb34 100644
--- a/frontend/src/lib/components/SimpleEditor.svelte
+++ b/frontend/src/lib/components/SimpleEditor.svelte
@@ -95,7 +95,10 @@
 		disabled = false,
 		minHeight = 1000,
 		renderLineHighlight = 'none',
-		suggestion
+		suggestion,
+		onchange = undefined,
+		onfocus = undefined,
+		onblur = undefined
 	}: {
 		lang: string
 		code?: string
@@ -124,6 +127,9 @@
 		minHeight?: number
 		renderLineHighlight?: 'all' | 'line' | 'gutter' | 'none'
 		suggestion?: string
+		onchange?: (...args: any[]) => any
+		onfocus?: (...args: any[]) => any
+		onblur?: (...args: any[]) => any
 	} = $props()
 
 	let yPadding = MONACO_Y_PADDING
@@ -166,6 +172,7 @@
 		}
 		code = ncode
 		dispatch('change', { code: ncode })
+		onchange?.({ code: ncode })
 	}
 
 	function updatePlaceholderVisibility(value: string) {
@@ -390,6 +397,7 @@
 		editor.onDidFocusEditorText(() => {
 			if (!editor) return
 			dispatch('focus')
+			onfocus?.()
 			loadExtraLib()
 
 			editor.addCommand(KeyMod.CtrlCmd | KeyCode.KeyS, function () {
@@ -431,10 +439,12 @@
 				shouldBindKey && cmdEnterAction && cmdEnterAction()
 			})
 			dispatch('focus')
+			onfocus?.()
 		})
 
 		editor.onDidBlurEditorText(() => {
 			dispatch('blur')
+			onblur?.()
 			updateCode()
 		})
 
diff --git a/frontend/src/lib/components/TemplateEditor.svelte b/frontend/src/lib/components/TemplateEditor.svelte
index f3ad00ffc3..56bf181916 100644
--- a/frontend/src/lib/components/TemplateEditor.svelte
+++ b/frontend/src/lib/components/TemplateEditor.svelte
@@ -389,6 +389,9 @@
 		fontSize?: number
 		loadAsync?: boolean
 		class?: string | undefined
+		onfocus?: (...args: any[]) => any
+		onchange?: (...args: any[]) => any
+		onblur?: (...args: any[]) => any
 	}
 
 	let {
@@ -400,7 +403,10 @@
 		fixedOverflowWidgets = true,
 		fontSize = 12,
 		loadAsync = false,
-		class: clazz = ''
+		class: clazz = '',
+		onfocus = undefined,
+		onchange = undefined,
+		onblur = undefined
 	}: Props = $props()
 
 	let yPadding = MONACO_Y_PADDING
@@ -515,6 +521,7 @@
 
 		editor.onDidFocusEditorText(() => {
 			dispatch('focus')
+			onfocus?.()
 
 			editor?.addCommand(KeyMod.CtrlCmd | KeyCode.KeyS, function () {})
 
@@ -528,6 +535,7 @@
 			}
 			code = ncode
 			dispatch('change', { code: ncode })
+			onchange?.({ code: ncode })
 		}
 
 		editor.onDidChangeModelContent((event) => {
@@ -555,11 +563,13 @@
 
 		editor.onDidFocusEditorText(() => {
 			dispatch('focus')
+			onfocus?.()
 			isFocus = true
 		})
 
 		editor.onDidBlurEditorText(() => {
 			dispatch('blur')
+			onblur?.()
 			isFocus = false
 			updateCode()
 		})
diff --git a/frontend/src/lib/components/Toggle.svelte b/frontend/src/lib/components/Toggle.svelte
index 6b502bcbfa..fa2a6bc505 100644
--- a/frontend/src/lib/components/Toggle.svelte
+++ b/frontend/src/lib/components/Toggle.svelte
@@ -33,6 +33,7 @@
 		size?: '2xs' | 'xs' | 'sm' | 'md'
 		textDisabled?: boolean
 		right?: import('svelte').Snippet
+		onchange?: (...args: any[]) => any
 	}
 
 	let {
@@ -50,7 +51,8 @@
 		class: className = undefined,
 		size = 'sm',
 		textDisabled = false,
-		right
+		right,
+		onchange = undefined
 	}: Props = $props()
 
 	const dispatch = createEventDispatcher<{ change: boolean }>()
@@ -104,6 +106,7 @@
 			bind:checked
 			onchange={stopPropagation((e) => {
 				dispatch('change', !!checked)
+				onchange?.(!!checked)
 			})}
 		/>
 		<div
diff --git a/frontend/src/lib/components/UserSettings.svelte b/frontend/src/lib/components/UserSettings.svelte
index 327414cf9b..96abb24ac3 100644
--- a/frontend/src/lib/components/UserSettings.svelte
+++ b/frontend/src/lib/components/UserSettings.svelte
@@ -15,6 +15,7 @@
 		newToken?: string | undefined
 		showMcpMode?: boolean
 		disableChatOffset?: boolean
+		ontokenCreated?: (...args: any[]) => any
 	}
 
 	let {
@@ -23,7 +24,8 @@
 		newTokenWorkspace = undefined,
 		newToken = $bindable(undefined),
 		showMcpMode = false,
-		disableChatOffset = false
+		disableChatOffset = false,
+		ontokenCreated = undefined
 	}: Props = $props()
 
 	let drawer: Drawer | undefined = $state()
@@ -48,6 +50,7 @@
 	function handleTokenCreated(token: string) {
 		newToken = token
 		dispatch('tokenCreated', token)
+		ontokenCreated?.(token)
 	}
 </script>
 
diff --git a/frontend/src/lib/components/WorkerGroup.svelte b/frontend/src/lib/components/WorkerGroup.svelte
index 22d35906cb..c2dec2f449 100644
--- a/frontend/src/lib/components/WorkerGroup.svelte
+++ b/frontend/src/lib/components/WorkerGroup.svelte
@@ -210,6 +210,7 @@
 		onDeleted?: (deletedGroupName: string) => void
 		onOpenYamlEditor?: () => void
 		selectGroup?: import('svelte').Snippet
+		onreload?: (...args: any[]) => any
 	}
 
 	let {
@@ -225,7 +226,8 @@
 		onDrawerOpened = () => {},
 		onDeleted = () => {},
 		onOpenYamlEditor = undefined,
-		selectGroup = undefined
+		selectGroup = undefined,
+		onreload = undefined
 	}: Props = $props()
 
 	let workspaces: Workspace[] = $state([])
@@ -243,6 +245,7 @@
 	async function deleteWorkerGroup() {
 		await ConfigService.deleteConfig({ name: 'worker__' + name })
 		dispatch('reload')
+		onreload?.()
 		onDeleted(name)
 	}
 
@@ -345,6 +348,7 @@
 		}
 		sendUserToast('Worker caches clearing in 5s. Require a restart.')
 		dispatch('reload')
+		onreload?.()
 		openClean = false
 	}}
 >
@@ -1121,6 +1125,7 @@
 								await ConfigService.updateConfig({ name: 'worker__' + name, requestBody: nconfig })
 								sendUserToast('Configuration set')
 								dispatch('reload')
+								onreload?.()
 							}}
 							disabled={(!hasChanges && nconfig?.dedicated_worker == undefined) || !canEditConfig}
 						>
diff --git a/frontend/src/lib/components/WorkerTagSelect.svelte b/frontend/src/lib/components/WorkerTagSelect.svelte
index cd2bf0b49e..5a5a34d523 100644
--- a/frontend/src/lib/components/WorkerTagSelect.svelte
+++ b/frontend/src/lib/components/WorkerTagSelect.svelte
@@ -16,7 +16,8 @@
 		nullTag = undefined,
 		disabled = false,
 		placeholder,
-		inputClass
+		inputClass,
+		onchange = undefined
 	}: {
 		tag: string | undefined
 		noLabel?: boolean
@@ -26,6 +27,7 @@
 		language?: string
 		class?: string
 		inputClass?: string
+		onchange?: (...args: any[]) => any
 	} = $props()
 
 	let loading = $state(false)
@@ -142,7 +144,9 @@
 		{disabled}
 		placeholder={nullTag ? nullTag : (placeholder ?? 'lang default')}
 		items={safeSelectItems(items)}
-		bind:value={() => tag, (value) => ((tag = value), dispatch('change', value))}
+		bind:value={
+			() => tag, (value) => ((tag = value), (dispatch('change', value), onchange?.(value)))
+		}
 		{startSnippet}
 		bottomSnippet={refreshAll}
 	/>
diff --git a/frontend/src/lib/components/apps/components/display/dbtable/DeleteRow.svelte b/frontend/src/lib/components/apps/components/display/dbtable/DeleteRow.svelte
index f17aa0a3a9..5764dc1119 100644
--- a/frontend/src/lib/components/apps/components/display/dbtable/DeleteRow.svelte
+++ b/frontend/src/lib/components/apps/components/display/dbtable/DeleteRow.svelte
@@ -12,9 +12,10 @@
 
 	interface Props {
 		id: string
+		ondeleted?: (...args: any[]) => any
 	}
 
-	let { id }: Props = $props()
+	let { id, ondeleted = undefined }: Props = $props()
 
 	const { worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
@@ -58,6 +59,7 @@
 					onDone: (_x) => {
 						sendUserToast('Row deleted', false)
 						dispatch('deleted')
+						ondeleted?.()
 					},
 					onCancel: () => {
 						sendUserToast('Error deleting row', true)
diff --git a/frontend/src/lib/components/apps/components/display/dbtable/InsertRowRunnable.svelte b/frontend/src/lib/components/apps/components/display/dbtable/InsertRowRunnable.svelte
index 22dd9411c9..81d12cc007 100644
--- a/frontend/src/lib/components/apps/components/display/dbtable/InsertRowRunnable.svelte
+++ b/frontend/src/lib/components/apps/components/display/dbtable/InsertRowRunnable.svelte
@@ -12,9 +12,10 @@
 
 	interface Props {
 		id: string
+		oninsert?: (...args: any[]) => any
 	}
 
-	let { id }: Props = $props()
+	let { id, oninsert = undefined }: Props = $props()
 
 	const { worldStore } = getContext<AppViewerContext>('AppViewerContext')
 
@@ -54,6 +55,7 @@
 			await runnableComponent?.runComponent(undefined, undefined, undefined, values, {
 				onDone: (_x) => {
 					dispatch('insert')
+					oninsert?.()
 					sendUserToast('Row inserted', false)
 				},
 				onCancel: () => {
diff --git a/frontend/src/lib/components/apps/components/display/table/AppAggridExplorerTable.svelte b/frontend/src/lib/components/apps/components/display/table/AppAggridExplorerTable.svelte
index a12f31b342..c4725bcaa9 100644
--- a/frontend/src/lib/components/apps/components/display/table/AppAggridExplorerTable.svelte
+++ b/frontend/src/lib/components/apps/components/display/table/AppAggridExplorerTable.svelte
@@ -42,6 +42,9 @@
 		result?: any[] | undefined
 		allowColumnDefsActions?: boolean
 		onChange?: string[] | undefined
+		onupdate?: (...args: any[]) => any
+		ondelete?: (...args: any[]) => any
+		onrecompute?: (...args: any[]) => any
 	}
 
 	let {
@@ -56,7 +59,10 @@
 		actions = [],
 		result = undefined,
 		allowColumnDefsActions = true,
-		onChange = undefined
+		onChange = undefined,
+		onupdate = undefined,
+		ondelete = undefined,
+		onrecompute = undefined
 	}: Props = $props()
 	let inputs = {}
 
@@ -129,6 +135,14 @@
 			columnDef: event.colDef
 		})
 
+		onupdate?.({
+			row: event.node.rowIndex,
+			column: event.colDef.field,
+			value: dataCell,
+			data: event.node.data,
+			oldValue: event.oldValue,
+			columnDef: event.colDef
+		})
 		resolvedConfig?.extraConfig?.['defaultColDef']?.['onCellValueChanged']?.(event)
 		fireOnChange()
 	}
@@ -253,6 +267,7 @@
 				cellRendererParams: {
 					onClick: (e) => {
 						dispatch('delete', e)
+						ondelete?.(e)
 					}
 				},
 				lockPosition: 'right',
@@ -383,6 +398,7 @@
 							},
 							recompute: () => {
 								dispatch('recompute')
+								onrecompute?.()
 							}
 						}
 						api = e.api
diff --git a/frontend/src/lib/components/apps/components/display/table/AppAggridTableActions.svelte b/frontend/src/lib/components/apps/components/display/table/AppAggridTableActions.svelte
index 538b20bc14..05ad9bb089 100644
--- a/frontend/src/lib/components/apps/components/display/table/AppAggridTableActions.svelte
+++ b/frontend/src/lib/components/apps/components/display/table/AppAggridTableActions.svelte
@@ -33,6 +33,7 @@
 		wrapActions?: boolean | undefined
 		selectRow: (params: ICellRendererParams<any>) => void
 		setModalRow: (row?: ICellRendererParams<any>) => void
+		ontoggleRow?: (...args: any[]) => any
 	}
 
 	let {
@@ -46,7 +47,8 @@
 		onRemove,
 		wrapActions = undefined,
 		selectRow,
-		setModalRow
+		setModalRow,
+		ontoggleRow = undefined
 	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
@@ -197,6 +199,7 @@
 							noWFull
 							preclickAction={async () => {
 								dispatch('toggleRow')
+								ontoggleRow?.()
 								p && selectRow(p)
 							}}
 							id={action.id}
@@ -223,6 +226,7 @@
 							verticalAlignment="center"
 							preclickAction={async () => {
 								dispatch('toggleRow')
+								ontoggleRow?.()
 								p && (selectRow(p), setModalRow(p))
 							}}
 							onClose={() => setModalRow(undefined)}
@@ -239,6 +243,7 @@
 							onToggle={action.onToggle}
 							preclickAction={async () => {
 								dispatch('toggleRow')
+								ontoggleRow?.()
 								p && selectRow(p)
 							}}
 							verticalAlignment="center"
@@ -259,6 +264,7 @@
 								onSelect={action.onSelect}
 								preclickAction={async () => {
 									dispatch('toggleRow')
+									ontoggleRow?.()
 									p && selectRow(p)
 								}}
 								{controls}
@@ -272,6 +278,7 @@
 						{render}
 						preclickAction={async () => {
 							dispatch('toggleRow')
+							ontoggleRow?.()
 							p && selectRow(p)
 						}}
 						noWFull
@@ -297,6 +304,7 @@
 						verticalAlignment="center"
 						preclickAction={async () => {
 							dispatch('toggleRow')
+							ontoggleRow?.()
 							p && (selectRow(p), setModalRow(p))
 						}}
 						onClose={() => setModalRow(undefined)}
@@ -313,6 +321,7 @@
 						onToggle={action.onToggle}
 						preclickAction={async () => {
 							dispatch('toggleRow')
+							ontoggleRow?.()
 							p && selectRow(p)
 						}}
 					/>
@@ -331,6 +340,7 @@
 							onSelect={action.onSelect}
 							preclickAction={async () => {
 								dispatch('toggleRow')
+								ontoggleRow?.()
 								p && selectRow(p)
 							}}
 						/>
diff --git a/frontend/src/lib/components/apps/components/display/table/AppCell.svelte b/frontend/src/lib/components/apps/components/display/table/AppCell.svelte
index d62ecf4154..583ef288ea 100644
--- a/frontend/src/lib/components/apps/components/display/table/AppCell.svelte
+++ b/frontend/src/lib/components/apps/components/display/table/AppCell.svelte
@@ -12,9 +12,10 @@
 		type?: 'text' | 'badge' | 'link'
 		value: any
 		width: number
+		onupdate?: (...args: any[]) => any
 	}
 
-	let { type = 'text', value = $bindable(), width }: Props = $props()
+	let { type = 'text', value = $bindable(), width, onupdate = undefined }: Props = $props()
 
 	let isEditable = writable(false)
 	let tempValue = $state(value)
@@ -44,6 +45,9 @@
 			value
 		})
 
+		onupdate?.({
+			value
+		})
 		toggleEdit()
 	}
 </script>
diff --git a/frontend/src/lib/components/apps/components/helpers/InputValue.svelte b/frontend/src/lib/components/apps/components/helpers/InputValue.svelte
index c494e82cbb..b07ec76ae3 100644
--- a/frontend/src/lib/components/apps/components/helpers/InputValue.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/InputValue.svelte
@@ -33,6 +33,7 @@
 		field?: string
 		onDemandOnly?: boolean
 		exportValueFunction?: boolean
+		ondone?: (...args: any[]) => any
 	}
 
 	let {
@@ -43,7 +44,8 @@
 		key = '',
 		field = key,
 		onDemandOnly = false,
-		exportValueFunction = false
+		exportValueFunction = false,
+		ondone = undefined
 	}: Props = $props()
 
 	const { componentControl, runnableComponents, recomputeAllContext } =
@@ -67,6 +69,7 @@
 		// How did this ever do anything at the top level in svelte 4 if
 		// events were not being picked up before the component fully mounted?
 		dispatch('done')
+		ondone?.()
 	}
 
 	const { worldStore, state: stateStore, mode } = getContext<AppViewerContext>('AppViewerContext')
@@ -211,6 +214,7 @@
 
 		await tick()
 		dispatchIfMounted('done')
+		ondone?.()
 	}
 
 	function onEvalChange(previousValueKey: string) {
diff --git a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
index 68df0b0a47..d0edc224c8 100644
--- a/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/RunnableComponent.svelte
@@ -75,6 +75,15 @@
 		onSuccess?: (result: any) => void
 		children?: import('svelte').Snippet
 		nonRenderedPlaceholder?: import('svelte').Snippet
+		onstarted?: (...args: any[]) => any
+		ondone?: (...args: any[]) => any
+		onstreamupdate?: (...args: any[]) => any
+		oncancel?: (...args: any[]) => any
+		ondoneError?: (...args: any[]) => any
+		onresultSet?: (...args: any[]) => any
+		onhandleError?: (...args: any[]) => any
+		onrecompute?: (...args: any[]) => any
+		onargsChanged?: (...args: any[]) => any
 	}
 
 	let {
@@ -106,7 +115,16 @@
 		replaceCallback = false,
 		children,
 		nonRenderedPlaceholder,
-		onSuccess
+		onSuccess,
+		onstarted = undefined,
+		ondone = undefined,
+		onstreamupdate = undefined,
+		oncancel = undefined,
+		ondoneError = undefined,
+		onresultSet = undefined,
+		onhandleError = undefined,
+		onrecompute = undefined,
+		onargsChanged = undefined
 	}: Props = $props()
 
 	const {
@@ -190,6 +208,7 @@
 				loading = true
 				outputs.jobId?.set(id)
 				dispatch('started', id)
+				onstarted?.(id)
 			},
 			doneWithoutCompute(r: any) {
 				onDone?.(r)
@@ -200,6 +219,7 @@
 				setResult(result, id)
 				loading = false
 				dispatch('done', { id, result })
+				ondone?.({ id, result })
 			},
 			resultStreamUpdate({
 				id,
@@ -210,6 +230,7 @@
 			}) {
 				setResult(nresult_stream, id, false)
 				dispatch('streamupdate', { id, result_stream: nresult_stream })
+				onstreamupdate?.({ id, result_stream: nresult_stream })
 			},
 			cancel({ id }: { id: string }) {
 				onCancel?.()
@@ -224,12 +245,14 @@
 					}
 				}
 				dispatch('cancel', { id })
+				oncancel?.({ id })
 			},
 			doneError({ id, error }: { id?: string; error: any }) {
 				onError?.(error)
 				setResult({ error }, id)
 				loading = false
 				dispatch('doneError', { id, error })
+				ondoneError?.({ id, error })
 			}
 		}
 		if (isEditor) {
@@ -649,6 +672,7 @@
 
 	async function setResult(res: any, jobId: string | undefined, dispatchSuccess: boolean = true) {
 		dispatch('resultSet', res)
+		onresultSet?.(res)
 		const errors = getResultErrors(res)
 
 		if (errors) {
@@ -659,6 +683,7 @@
 			recordJob(jobId, errors, errors, transformerResult)
 			updateResult(res)
 			dispatch('handleError', errors)
+			onhandleError?.(errors)
 			// callbacks?.done(res)
 			return
 		}
@@ -678,6 +703,7 @@
 			recordJob(jobId, res, undefined, transformerResult)
 			updateResult(transformerResult)
 			dispatch('handleError', transformerResult.error)
+			onhandleError?.(transformerResult.error)
 			// callbacks?.done(res)
 			return
 		}
@@ -708,6 +734,7 @@
 				let rejectCb: (err: Error) => void
 				let p: Partial<CancelablePromise<any>> = new Promise<any>((resolve, reject) => {
 					dispatch('recompute')
+					onrecompute?.()
 					rejectCb = reject
 					executeComponent(true, inlineScript, setRunnableJobEditorPanel, undefined, {
 						onDone: (x) => {
@@ -834,7 +861,7 @@
 	})
 	let ignoreFirst = true
 	$effect(() => {
-		runnableInputValues && !ignoreFirst && dispatch('argsChanged')
+		runnableInputValues && !ignoreFirst && (dispatch('argsChanged'), onargsChanged?.())
 		ignoreFirst = false
 	})
 	let refreshOn = $derived(
diff --git a/frontend/src/lib/components/apps/editor/AppJobsDrawer.svelte b/frontend/src/lib/components/apps/editor/AppJobsDrawer.svelte
index 39ecb51715..408ee94f45 100644
--- a/frontend/src/lib/components/apps/editor/AppJobsDrawer.svelte
+++ b/frontend/src/lib/components/apps/editor/AppJobsDrawer.svelte
@@ -30,6 +30,8 @@
 		selectedJobId?: string | undefined
 		refreshComponents?: (() => void) | undefined
 		errorByComponent?: Record<string, { id?: string; error: string }>
+		onclear?: (...args: any[]) => any
+		onclearErrors?: (...args: any[]) => any
 	}
 
 	let {
@@ -39,7 +41,9 @@
 		hasErrors = false,
 		selectedJobId = $bindable(undefined),
 		refreshComponents = undefined,
-		errorByComponent = {}
+		errorByComponent = {},
+		onclear = undefined,
+		onclearErrors = undefined
 	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
@@ -301,11 +305,16 @@
 				variant="default"
 				on:click={() => {
 					dispatch('clear')
+					onclear?.()
 				}}
 				>Clear jobs
 			</Button>
 			{#if hasErrors}
-				<Button size="md" variant="default" on:click={() => dispatch('clearErrors')}>
+				<Button
+					size="md"
+					variant="default"
+					on:click={() => (dispatch('clearErrors'), onclearErrors?.())}
+				>
 					Clear Errors &nbsp;<BellOff size={14} />
 				</Button>
 			{/if}
diff --git a/frontend/src/lib/components/apps/editor/ComponentHeader.svelte b/frontend/src/lib/components/apps/editor/ComponentHeader.svelte
index e717205670..ffa2974123 100644
--- a/frontend/src/lib/components/apps/editor/ComponentHeader.svelte
+++ b/frontend/src/lib/components/apps/editor/ComponentHeader.svelte
@@ -28,6 +28,11 @@
 		errorHandledByComponent?: boolean
 		fullHeight?: boolean
 		componentContainerWidth: number
+		onmouseover?: (...args: any[]) => any
+		onfillHeight?: (...args: any[]) => any
+		onlock?: (...args: any[]) => any
+		onexpand?: (...args: any[]) => any
+		ontriggerInlineEditor?: (...args: any[]) => any
 	}
 
 	let {
@@ -40,7 +45,12 @@
 		inlineEditorOpened = false,
 		errorHandledByComponent = false,
 		fullHeight = false,
-		componentContainerWidth
+		componentContainerWidth,
+		onmouseover = undefined,
+		onfillHeight = undefined,
+		onlock = undefined,
+		onexpand = undefined,
+		ontriggerInlineEditor = undefined
 	}: Props = $props()
 
 	const DECISION_TREE_THRESHOLD = 300
@@ -130,6 +140,7 @@
 			onmouseover={stopPropagation(() => {
 				hoverHeader = true
 				dispatch('mouseover')
+				onmouseover?.()
 			})}
 			onmouseleave={stopPropagation(() => {
 				hoverHeader = false
@@ -163,7 +174,7 @@
 								? 'bg-blue-300 text-blue-800'
 								: 'text-white hover:bg-blue-400 hover:text-white'
 						)}
-						onclick={() => dispatch('fillHeight')}
+						onclick={() => (dispatch('fillHeight'), onfillHeight?.())}
 						onpointerdown={stopPropagation(bubble('pointerdown'))}
 					>
 						<ArrowDownFromLine aria-label="Full height" size={11} />
@@ -175,7 +186,7 @@
 							'px-1 py-0.5 text-2xs font-bold rounded cursor-pointer w-fit h-full',
 							locked ? 'bg-blue-300 text-blue-800' : 'text-white hover:bg-blue-400 hover:text-white'
 						)}
-						onclick={() => dispatch('lock')}
+						onclick={() => (dispatch('lock'), onlock?.())}
 						onpointerdown={stopPropagation(bubble('pointerdown'))}
 					>
 						{#if locked}
@@ -190,7 +201,7 @@
 							class={twMerge(
 								'px-1 py-0.5 text-2xs font-bold rounded cursor-pointer w-fit h-full text-white hover:bg-blue-400 hover:text-white'
 							)}
-							onclick={() => dispatch('expand')}
+							onclick={() => (dispatch('expand'), onexpand?.())}
 							onpointerdown={stopPropagation(bubble('pointerdown'))}
 						>
 							<Expand aria-label="Expand" size={11} />
@@ -217,7 +228,7 @@
 								? 'bg-blue-300 text-blue-800'
 								: 'text-blue-600 hover:bg-blue-300 hover:text-blue-800'
 						)}
-						onclick={() => dispatch('triggerInlineEditor')}
+						onclick={() => (dispatch('triggerInlineEditor'), ontriggerInlineEditor?.())}
 						onpointerdown={stopPropagation(bubble('pointerdown'))}
 					>
 						<Pen aria-label="Edit" size={11} />
diff --git a/frontend/src/lib/components/apps/editor/DecisionTreeDebug.svelte b/frontend/src/lib/components/apps/editor/DecisionTreeDebug.svelte
index bf70dafd61..7d259a728f 100644
--- a/frontend/src/lib/components/apps/editor/DecisionTreeDebug.svelte
+++ b/frontend/src/lib/components/apps/editor/DecisionTreeDebug.svelte
@@ -15,9 +15,16 @@
 		id: string
 		isSmall?: boolean
 		componentIsDebugging?: boolean
+		ontriggerInlineEditor?: (...args: any[]) => any
 	}
 
-	let { nodes = [], id, isSmall = false, componentIsDebugging = $bindable(false) }: Props = $props()
+	let {
+		nodes = [],
+		id,
+		isSmall = false,
+		componentIsDebugging = $bindable(false),
+		ontriggerInlineEditor = undefined
+	}: Props = $props()
 
 	$effect(() => {
 		componentIsDebugging = isDebugging($debuggingComponents, id)
@@ -119,7 +126,7 @@
 						? ' hover:bg-red-300 hover:text-red-800'
 						: 'text-blue-600 hover:bg-blue-300 hover:text-blue-800'
 				)}
-				onclick={() => dispatch('triggerInlineEditor')}
+				onclick={() => (dispatch('triggerInlineEditor'), ontriggerInlineEditor?.())}
 				onpointerdown={stopPropagation(bubble('pointerdown'))}
 			>
 				{#if componentIsDebugging}
diff --git a/frontend/src/lib/components/apps/editor/DeploymentHistory.svelte b/frontend/src/lib/components/apps/editor/DeploymentHistory.svelte
index 95bf74acf8..16523a1c1b 100644
--- a/frontend/src/lib/components/apps/editor/DeploymentHistory.svelte
+++ b/frontend/src/lib/components/apps/editor/DeploymentHistory.svelte
@@ -14,9 +14,10 @@
 
 	interface Props {
 		appPath: string | undefined
+		onrestore?: (...args: any[]) => any
 	}
 
-	let { appPath }: Props = $props()
+	let { appPath, onrestore = undefined }: Props = $props()
 	let loading: boolean = $state(false)
 
 	let versions: AppHistory[] = $state([])
@@ -186,7 +187,9 @@
 							>
 								Restore as fork
 							</Button>
-							<Button size="xs" on:click={() => dispatch('restore', selected)}
+							<Button
+								size="xs"
+								on:click={() => (dispatch('restore', selected), onrestore?.(selected))}
 								>Redeploy with that version
 							</Button>
 						</div>
diff --git a/frontend/src/lib/components/apps/editor/GridEditorMenu.svelte b/frontend/src/lib/components/apps/editor/GridEditorMenu.svelte
index 5180b322a8..a9ad5e9538 100644
--- a/frontend/src/lib/components/apps/editor/GridEditorMenu.svelte
+++ b/frontend/src/lib/components/apps/editor/GridEditorMenu.svelte
@@ -71,9 +71,20 @@
 		fullHeight?: boolean
 		id: string
 		children?: import('svelte').Snippet
+		onfillHeight?: (...args: any[]) => any
+		onexpand?: (...args: any[]) => any
+		onlock?: (...args: any[]) => any
 	}
 
-	let { locked = false, fullHeight = false, id, children }: Props = $props()
+	let {
+		locked = false,
+		fullHeight = false,
+		id,
+		children,
+		onfillHeight = undefined,
+		onexpand = undefined,
+		onlock = undefined
+	}: Props = $props()
 
 	const { selectedComponent, focusedGrid, componentControl, app } = getContext<AppViewerContext>(
 		'AppViewerContext'
@@ -116,6 +127,7 @@
 			label: () => (fullHeight ? 'Undo fill height' : 'Fill height'),
 			onClick: () => {
 				dispatch('fillHeight')
+				onfillHeight?.()
 			},
 			icon: ArrowDownFromLine,
 			tooltip: {
@@ -127,6 +139,7 @@
 			label: () => 'Expand',
 			onClick: () => {
 				dispatch('expand')
+				onexpand?.()
 			},
 			icon: Expand,
 			tooltip: {
@@ -138,6 +151,7 @@
 			label: () => (locked ? 'Unlock' : 'Lock'),
 			onClick: () => {
 				dispatch('lock')
+				onlock?.()
 			},
 			icon: Anchor,
 			tooltip: {
diff --git a/frontend/src/lib/components/apps/editor/GridViewer.svelte b/frontend/src/lib/components/apps/editor/GridViewer.svelte
index fc540c6cf0..214c632b70 100644
--- a/frontend/src/lib/components/apps/editor/GridViewer.svelte
+++ b/frontend/src/lib/components/apps/editor/GridViewer.svelte
@@ -29,6 +29,8 @@
 		containerWidth?: number | undefined
 		parentWidth?: number | undefined
 		children?: import('svelte').Snippet<[any]>
+		onresize?: (...args: any[]) => any
+		onmount?: (...args: any[]) => any
 	}
 
 	let {
@@ -41,7 +43,9 @@
 		allIdsInPath = undefined,
 		containerWidth = $bindable(undefined),
 		parentWidth = undefined,
-		children
+		children,
+		onresize = undefined,
+		onmount = undefined
 	}: Props = $props()
 
 	const cols = columnConfiguration
@@ -71,6 +75,12 @@
 			yPerPx,
 			width: containerWidth
 		})
+		onresize?.({
+			cols: getComputedCols,
+			xPerPx,
+			yPerPx,
+			width: containerWidth
+		})
 	}, throttleUpdate)
 
 	onMount(() => {
@@ -99,6 +109,11 @@
 						xPerPx,
 						yPerPx // same as rowHeight
 					})
+					onmount?.({
+						cols: getComputedCols,
+						xPerPx,
+						yPerPx // same as rowHeight
+					})
 				} else {
 					onResize()
 				}
diff --git a/frontend/src/lib/components/apps/editor/RecomputeAllButton.svelte b/frontend/src/lib/components/apps/editor/RecomputeAllButton.svelte
index bed52c94e9..ead7b0f253 100644
--- a/frontend/src/lib/components/apps/editor/RecomputeAllButton.svelte
+++ b/frontend/src/lib/components/apps/editor/RecomputeAllButton.svelte
@@ -12,6 +12,7 @@
 		refreshing?: string[]
 		progress?: number
 		loading?: boolean | undefined
+		onsetInter?: (...args: any[]) => any
 	}
 
 	let {
@@ -19,7 +20,8 @@
 		interval = undefined,
 		refreshing = [],
 		progress = 100,
-		loading = false
+		loading = false,
+		onsetInter = undefined
 	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
@@ -27,11 +29,11 @@
 	const items = [
 		{
 			displayName: 'Once',
-			action: () => dispatch('setInter', undefined)
+			action: () => (dispatch('setInter', undefined), onsetInter?.(undefined))
 		},
 		...[1, 2, 3, 4, 5, 6].map((i) => ({
 			displayName: `Every ${i * 5} seconds`,
-			action: () => dispatch('setInter', i * 5000)
+			action: () => (dispatch('setInter', i * 5000), onsetInter?.(i * 5000))
 		}))
 	]
 </script>
diff --git a/frontend/src/lib/components/apps/editor/TabsDebug.svelte b/frontend/src/lib/components/apps/editor/TabsDebug.svelte
index 8d99fd8397..6bf0c0e616 100644
--- a/frontend/src/lib/components/apps/editor/TabsDebug.svelte
+++ b/frontend/src/lib/components/apps/editor/TabsDebug.svelte
@@ -17,6 +17,7 @@
 		isConditionalDebugMode?: boolean
 		isSmall?: boolean
 		isManuallySelected?: boolean
+		ontriggerInlineEditor?: (...args: any[]) => any
 	}
 
 	let {
@@ -24,7 +25,8 @@
 		id,
 		isConditionalDebugMode = false,
 		isSmall = false,
-		isManuallySelected = $bindable(false)
+		isManuallySelected = $bindable(false),
+		ontriggerInlineEditor = undefined
 	}: Props = $props()
 	let selected: number | null = $state(null)
 
@@ -68,7 +70,7 @@
 						? 'hover:bg-red-200 hover:text-red-800'
 						: 'text-blue-600 hover:bg-blue-300 hover:text-blue-800'
 				)}
-				onclick={() => dispatch('triggerInlineEditor')}
+				onclick={() => (dispatch('triggerInlineEditor'), ontriggerInlineEditor?.())}
 				onpointerdown={stopPropagation(bubble('pointerdown'))}
 			>
 				{#if isManuallySelected}
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte
index 640b9b155c..894c76b693 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/CssProperty.svelte
@@ -33,6 +33,9 @@
 		overriden?: boolean
 		overridding?: boolean
 		wmClass?: string | undefined
+		onchange?: (...args: any[]) => any
+		onleft?: (...args: any[]) => any
+		onright?: (...args: any[]) => any
 	}
 
 	let {
@@ -47,7 +50,10 @@
 		shouldDisplayRight = false,
 		overriden = false,
 		overridding = false,
-		wmClass = undefined
+		wmClass = undefined,
+		onchange = undefined,
+		onleft = undefined,
+		onright = undefined
 	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
@@ -58,6 +64,7 @@
 		if (deepEqual(prevValue, value)) return
 		prevValue = structuredClone($state.snapshot(value))
 		dispatch('change', value)
+		onchange?.(value)
 	})
 
 	function toggleQuickMenu() {
@@ -93,7 +100,7 @@
 						size="xs2"
 						iconOnly
 						startIcon={{ icon: MoveLeft }}
-						on:click={() => dispatch('left')}
+						on:click={() => (dispatch('left'), onleft?.())}
 					/>
 					{#snippet text()}
 						{'Copy for this component'}
@@ -107,7 +114,7 @@
 						size="xs2"
 						iconOnly
 						startIcon={{ icon: MoveRight }}
-						on:click={() => dispatch('right')}
+						on:click={() => (dispatch('right'), onright?.())}
 					/>
 					{#snippet text()}
 						Copy for every {componentType ? ccomponents[componentType].name : 'component'}
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/CustomComponentRow.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/CustomComponentRow.svelte
index 3835c191b6..f9976e3719 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/CustomComponentRow.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/CustomComponentRow.svelte
@@ -14,9 +14,10 @@
 			name: string
 			path: string
 		}
+		onreload?: (...args: any[]) => any
 	}
 
-	let { row }: Props = $props()
+	let { row, onreload = undefined }: Props = $props()
 
 	const dispatch = createEventDispatcher()
 
@@ -28,6 +29,7 @@
 			})
 		}
 		dispatch('reload')
+		onreload?.()
 		sendUserToast('Component deleted:\n' + row.name)
 	}
 
@@ -49,6 +51,7 @@
 			}
 		})
 		dispatch('reload')
+		onreload?.()
 
 		sendUserToast('Component name updated:\n' + name)
 	}
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/GroupRow.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/GroupRow.svelte
index f59cdbfc7f..1b6db58407 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/GroupRow.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/GroupRow.svelte
@@ -13,9 +13,10 @@
 			name: string
 			path: string
 		}
+		onreloadGroups?: (...args: any[]) => any
 	}
 
-	let { row }: Props = $props()
+	let { row, onreloadGroups = undefined }: Props = $props()
 
 	const dispatch = createEventDispatcher()
 
@@ -24,6 +25,7 @@
 			await deleteGroup($workspaceStore, row.path)
 		}
 		dispatch('reloadGroups')
+		onreloadGroups?.()
 		sendUserToast('Group deleted:\n' + row.name)
 	}
 
@@ -54,6 +56,7 @@
 						}
 					})
 					dispatch('reloadGroups')
+					onreloadGroups?.()
 
 					sendUserToast('Group name updated:\n' + e.detail.name)
 				}}
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/ListItem.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/ListItem.svelte
index 0a4834c53c..076fe208f6 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/ListItem.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/ListItem.svelte
@@ -20,6 +20,7 @@
 		subtitle?: string | undefined
 		titleSlot?: import('svelte').Snippet
 		children?: import('svelte').Snippet
+		onopen?: (...args: any[]) => any
 	}
 
 	let {
@@ -34,7 +35,8 @@
 		documentationLink = undefined,
 		subtitle = undefined,
 		titleSlot,
-		children
+		children,
+		onopen = undefined
 	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
@@ -46,6 +48,7 @@
 
 	$effect(() => {
 		dispatch('open', isOpen ?? false)
+		onopen?.(isOpen ?? false)
 	})
 
 	onMount(() => {
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/NameEditor.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/NameEditor.svelte
index 6263bc8026..3fbd0f0356 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/NameEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/NameEditor.svelte
@@ -10,9 +10,10 @@
 			name: string
 			path: string
 		}
+		onupdate?: (...args: any[]) => any
 	}
 
-	let { kind, row }: Props = $props()
+	let { kind, row, onupdate = undefined }: Props = $props()
 
 	let editedName = $state(row.name)
 
@@ -20,6 +21,7 @@
 	function onkeydown(e) {
 		if (e.key === 'Enter') {
 			dispatch('update', { path: row.path, name: editedName })
+			onupdate?.({ path: row.path, name: editedName })
 		}
 	}
 </script>
@@ -42,6 +44,7 @@
 					size="xs"
 					on:click={() => {
 						dispatch('update', { path: row.path, name: editedName })
+						onupdate?.({ path: row.path, name: editedName })
 						close()
 					}}
 				>
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/ThemeNameEditor.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/ThemeNameEditor.svelte
index cb1793b252..679c5f3c76 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/ThemeNameEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/ThemeNameEditor.svelte
@@ -12,9 +12,10 @@
 			name: string
 			path: string
 		}
+		onreloadThemes?: (...args: any[]) => any
 	}
 
-	let { row }: Props = $props()
+	let { row, onreloadThemes = undefined }: Props = $props()
 
 	let editedName = $state(row.name)
 
@@ -49,6 +50,7 @@
 						}
 					})
 					dispatch('reloadThemes')
+					onreloadThemes?.()
 					close()
 					sendUserToast('Theme name updated:\n' + editedName)
 				}}
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/ThemeRow.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/ThemeRow.svelte
index f5e26488b6..05a56a8e06 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/ThemeRow.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/ThemeRow.svelte
@@ -22,9 +22,16 @@
 			name: string
 			path: string
 		}
+		onreloadThemes?: (...args: any[]) => any
+		onsetCodeTab?: (...args: any[]) => any
 	}
 
-	let { previewThemePath = $bindable(undefined), row }: Props = $props()
+	let {
+		previewThemePath = $bindable(undefined),
+		row,
+		onreloadThemes = undefined,
+		onsetCodeTab = undefined
+	}: Props = $props()
 
 	const { previewTheme, app } = getContext<AppViewerContext>('AppViewerContext')
 
@@ -80,6 +87,7 @@
 		}
 
 		dispatch('reloadThemes')
+		onreloadThemes?.()
 	}
 
 	async function toggleDelete() {
@@ -88,6 +96,7 @@
 			await deleteTheme($workspaceStore, row.path)
 		}
 		dispatch('reloadThemes')
+		onreloadThemes?.()
 		sendUserToast('Theme deleted:\n' + row.name)
 	}
 
@@ -120,6 +129,7 @@
 		}
 
 		dispatch('setCodeTab')
+		onsetCodeTab?.()
 	}
 
 	function stopPreview() {
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte
index edaefe947a..f0b9c302b9 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/EmptyInlineScript.svelte
@@ -25,13 +25,17 @@
 		showScriptPicker?: boolean
 		rawApps?: boolean
 		unusedInlineScripts: { name: string; inlineScript: InlineScript }[]
+		onnew?: (...args: any[]) => any
+		ondelete?: (...args: any[]) => any
 	}
 
 	let {
 		componentType = undefined,
 		showScriptPicker = false,
 		rawApps = false,
-		unusedInlineScripts
+		unusedInlineScripts,
+		onnew = undefined,
+		ondelete = undefined
 	}: Props = $props()
 
 	let tab = $state('workspacescripts')
@@ -75,6 +79,7 @@
 			schema
 		}
 		dispatch('new', newInlineScript)
+		onnew?.(newInlineScript)
 	}
 
 	async function pickScript(path: string) {
@@ -147,7 +152,7 @@
 			</Button>
 
 			<Button
-				on:click={() => dispatch('delete')}
+				on:click={() => (dispatch('delete'), ondelete?.())}
 				size="xs"
 				color="red"
 				variant="border"
@@ -216,6 +221,7 @@ return state.foo`,
 								schema: undefined
 							}
 							dispatch('new', newInlineScript)
+							onnew?.(newInlineScript)
 						}}
 					/>
 				</div>
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
index 802d51116f..38df7630b3 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditor.svelte
@@ -46,6 +46,8 @@
 		transformer?: boolean
 		componentType?: string | undefined
 		editor?: Editor | undefined
+		oncreateScriptFromInlineScript?: (...args: any[]) => any
+		ondelete?: (...args: any[]) => any
 	}
 
 	let {
@@ -57,7 +59,9 @@
 		syncFields = false,
 		transformer = false,
 		componentType = undefined,
-		editor = $bindable(undefined)
+		editor = $bindable(undefined),
+		oncreateScriptFromInlineScript = undefined,
+		ondelete = undefined
 	}: Props = $props()
 	let diffEditor: DiffEditor | undefined = $state()
 	let simpleEditor: SimpleEditor | undefined = $state()
@@ -221,6 +225,7 @@
 			bind:inlineScript
 			on:createScriptFromInlineScript={() => {
 				dispatch('createScriptFromInlineScript')
+				oncreateScriptFromInlineScript?.()
 				drawerIsOpen = false
 			}}
 		/>
@@ -280,7 +285,7 @@
 					variant="subtle"
 					destructive
 					aria-label="Delete"
-					on:click={() => dispatch('delete')}
+					on:click={() => (dispatch('delete'), ondelete?.())}
 					endIcon={{ icon: Trash2 }}
 					iconOnly
 				/>
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte
index ba3a3b2654..f8831a0b34 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptEditorPanel.svelte
@@ -14,6 +14,7 @@
 		componentType: string
 		id: string
 		transformer: boolean
+		oncreateScriptFromInlineScript?: (...args: any[]) => any
 	}
 
 	let {
@@ -21,7 +22,8 @@
 		defaultUserInput = false,
 		componentType,
 		id,
-		transformer
+		transformer,
+		oncreateScriptFromInlineScript = undefined
 	}: Props = $props()
 
 	const { app } = getContext<AppViewerContext>('AppViewerContext')
@@ -70,6 +72,7 @@
 				on:createScriptFromInlineScript={() => {
 					if (componentInput?.type == 'runnable' && isRunnableByName(componentInput.runnable)) {
 						dispatch('createScriptFromInlineScript', componentInput?.runnable)
+						oncreateScriptFromInlineScript?.(componentInput?.runnable)
 					}
 				}}
 				{defaultUserInput}
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptHiddenRunnable.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptHiddenRunnable.svelte
index 70562ec9d3..045525b8eb 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptHiddenRunnable.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptHiddenRunnable.svelte
@@ -15,9 +15,15 @@
 		runnable: HiddenRunnable
 		id: string
 		transformer: boolean
+		oncreateScriptFromInlineScript?: (...args: any[]) => any
 	}
 
-	let { runnable = $bindable(), id, transformer }: Props = $props()
+	let {
+		runnable = $bindable(),
+		id,
+		transformer,
+		oncreateScriptFromInlineScript = undefined
+	}: Props = $props()
 
 	const { runnableComponents, app } = getContext<AppViewerContext>('AppViewerContext')
 	async function fork(nrunnable: Runnable) {
@@ -60,7 +66,10 @@
 	{/if}
 {:else if isRunnableByName(runnable) && runnable.inlineScript}
 	<InlineScriptEditor
-		on:createScriptFromInlineScript={() => dispatch('createScriptFromInlineScript', runnable)}
+		on:createScriptFromInlineScript={() => (
+			dispatch('createScriptFromInlineScript', runnable),
+			oncreateScriptFromInlineScript?.(runnable)
+		)}
 		{id}
 		bind:inlineScript={runnable.inlineScript}
 		bind:name={runnable.name}
diff --git a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptRunnableByPath.svelte b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptRunnableByPath.svelte
index 5d6ddf7b93..f1ab74a80b 100644
--- a/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptRunnableByPath.svelte
+++ b/frontend/src/lib/components/apps/editor/inlineScriptsPanel/InlineScriptRunnableByPath.svelte
@@ -36,13 +36,18 @@
 	interface Props {
 		runnable: RunnableByPath
 		fields:
-			| Record<string, StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput | CtxAppInput>
+			| Record<
+					string,
+					StaticAppInput | ConnectedAppInput | RowAppInput | UserAppInput | CtxAppInput
+			  >
 			| undefined
 		id: string
 		rawApps?: boolean
 		isLoading?: boolean
 		onRun?: any
 		onCancel?: any
+		onfork?: (...args: any[]) => any
+		ondelete?: (...args: any[]) => any
 	}
 
 	let {
@@ -52,7 +57,9 @@
 		rawApps = false,
 		isLoading = false,
 		onRun = async () => {},
-		onCancel = async () => {}
+		onCancel = async () => {},
+		onfork = undefined,
+		ondelete = undefined
 	}: Props = $props()
 
 	const viewerContext = getContext<AppViewerContext>('AppViewerContext')
@@ -118,6 +125,16 @@
 				path
 			}
 		})
+		onfork?.({
+			type: 'inline',
+			name: path,
+			inlineScript: {
+				content,
+				language,
+				schema,
+				path
+			}
+		})
 	}
 
 	async function openScriptEditor(path: string) {
@@ -227,6 +244,7 @@
 			startIcon={{ icon: Trash }}
 			on:click={() => {
 				dispatch('delete')
+				ondelete?.()
 			}}
 		>
 			Clear
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte
index edea934b57..3f1be7817a 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ArrayStaticInputEditor.svelte
@@ -19,13 +19,15 @@
 		subFieldType?: InputType | undefined
 		selectOptions?: StaticOptions['selectOptions'] | undefined
 		id: string | undefined
+		ondeleteArrayItem?: (...args: any[]) => any
 	}
 
 	let {
 		componentInput = $bindable(),
 		subFieldType = undefined,
 		selectOptions = undefined,
-		id
+		id,
+		ondeleteArrayItem = undefined
 	}: Props = $props()
 
 	const appContext = getContext<AppViewerContext>('AppViewerContext')
@@ -223,6 +225,7 @@
 			items = items
 			componentInput.value = componentInput.value
 			dispatch('deleteArrayItem', { index })
+			ondeleteArrayItem?.({ index })
 		}
 	}
 
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte
index 609f58fd7d..245e24807c 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentInputTypeEditor.svelte
@@ -13,9 +13,15 @@
 		componentInput: AppInput
 		disableStatic?: boolean
 		evalV2editor: EvalV2InputEditor | undefined
+		onselect?: (...args: any[]) => any
 	}
 
-	let { componentInput = $bindable(), disableStatic = false, evalV2editor }: Props = $props()
+	let {
+		componentInput = $bindable(),
+		disableStatic = false,
+		evalV2editor,
+		onselect = undefined
+	}: Props = $props()
 
 	const { onchange, connectingInput, app } = getContext<AppViewerContext>('AppViewerContext')
 
@@ -66,6 +72,7 @@
 							onConnect: () => {}
 						}
 						dispatch('select', true)
+						onselect?.(true)
 					}}
 					openConnection={() => {
 						$connectingInput = {
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte
index 7992159fc1..7897e411a4 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecEditor.svelte
@@ -58,6 +58,8 @@
 		markdownTooltip?: string | undefined
 		securedContext?: boolean
 		disabled?: boolean
+		oncloseConnection?: (...args: any[]) => any
+		onopenConnection?: (...args: any[]) => any
 	}
 
 	let {
@@ -87,7 +89,9 @@
 		showOnDemandOnlyToggle = true,
 		documentationLink = undefined,
 		markdownTooltip = undefined,
-		securedContext = false
+		securedContext = false,
+		oncloseConnection = undefined,
+		onopenConnection = undefined
 	}: Props = $props()
 
 	$effect.pre(() => {
@@ -140,6 +144,7 @@
 
 	function closeConnection() {
 		dispatch('closeConnection')
+		oncloseConnection?.()
 		$connectingInput = {
 			opened: false,
 			hoveredComponent: undefined,
@@ -150,6 +155,7 @@
 
 	function openConnection() {
 		dispatch('openConnection')
+		onopenConnection?.()
 		$connectingInput = {
 			opened: true,
 			input: undefined,
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte
index 19dd309bec..729cc41741 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte
@@ -21,6 +21,7 @@
 		showOnDemandOnlyToggle?: boolean
 		securedContext?: boolean
 		overridenByComponent?: string[]
+		ondelete?: (...args: any[]) => any
 	}
 
 	let {
@@ -36,7 +37,8 @@
 		recomputeOnInputChanged = true,
 		showOnDemandOnlyToggle = false,
 		securedContext = false,
-		overridenByComponent = []
+		overridenByComponent = [],
+		ondelete = undefined
 	}: Props = $props()
 
 	let finalInputSpecsConfiguration = $derived(inputSpecsConfiguration ?? inputSpecs)
@@ -104,7 +106,7 @@
 				/>
 				{#if deletable}
 					<div class="flex flex-row-reverse -mt-4">
-						<CloseButton noBg on:close={() => dispatch('delete', k)} />
+						<CloseButton noBg on:close={() => (dispatch('delete', k), ondelete?.(k))} />
 					</div>
 				{/if}
 			{/if}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/QuickAddColumn.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/QuickAddColumn.svelte
index 7bc4978ce5..47a919f52d 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/QuickAddColumn.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/QuickAddColumn.svelte
@@ -9,9 +9,10 @@
 	interface Props {
 		columns?: string[]
 		id: string | undefined
+		onadd?: (...args: any[]) => any
 	}
 
-	let { columns = [], id }: Props = $props()
+	let { columns = [], id, onadd = undefined }: Props = $props()
 
 	let remainingColumns: string[] = $state([])
 
@@ -64,7 +65,7 @@
 	<div class="flex flex-row gap-2 items-center flex-wrap">
 		{#each remainingColumns as column}
 			<Button
-				on:click={() => dispatch('add', column)}
+				on:click={() => (dispatch('add', column), onadd?.(column))}
 				size="xs2"
 				color="light"
 				variant="border"
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/decisionTree/InsertDecisionTreeNode.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/decisionTree/InsertDecisionTreeNode.svelte
index eaa1233e89..74f7a6fc7c 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/decisionTree/InsertDecisionTreeNode.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/decisionTree/InsertDecisionTreeNode.svelte
@@ -8,9 +8,16 @@
 	interface Props {
 		canAddBranch?: boolean
 		canAddNode?: boolean
+		onnode?: (...args: any[]) => any
+		onaddBranch?: (...args: any[]) => any
 	}
 
-	let { canAddBranch = true, canAddNode = true }: Props = $props()
+	let {
+		canAddBranch = true,
+		canAddNode = true,
+		onnode = undefined,
+		onaddBranch = undefined
+	}: Props = $props()
 </script>
 
 <div class="relative flex flex-row gap-1">
@@ -19,6 +26,7 @@
 			title="Add step"
 			onpointerdown={() => {
 				dispatch('node')
+				onnode?.()
 			}}
 			type="button"
 			class="text-primary bg-surface outline-[1px] outline dark:outline-gray-500 outline-gray-300 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-surface-selected font-medium rounded-full text-sm w-[25px] h-[25px] flex items-center justify-center"
@@ -30,7 +38,7 @@
 		<button
 			title="Add branch"
 			type="button"
-			onclick={() => dispatch('addBranch')}
+			onclick={() => (dispatch('addBranch'), onaddBranch?.())}
 			class={twMerge(
 				'text-secondary bg-surface outline-[1px] outline dark:outline-gray-500 outline-gray-300 focus:outline-none hover:bg-surface-hover focus:ring-4 focus:ring-surface-selected font-medium rounded-full text-sm w-[25px] h-[25px] flex items-center justify-center',
 				!canAddNode && 'ml-16 mb-2'
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/ColorInput.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/ColorInput.svelte
index 7044a82fdd..9b49ef002c 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/ColorInput.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/ColorInput.svelte
@@ -8,9 +8,10 @@
 
 	interface Props {
 		value?: string
+		onchange?: (...args: any[]) => any
 	}
 
-	let { value = $bindable('#fff') }: Props = $props()
+	let { value = $bindable('#fff'), onchange = undefined }: Props = $props()
 	const dispatch = createEventDispatcher()
 	const [popperRef, popperContent] = createPopperActions()
 	let isOpen = $state(false)
@@ -18,6 +19,7 @@
 
 	$effect(() => {
 		dispatch('change', value)
+		onchange?.(value)
 	})
 
 	function open() {
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/InlineScriptList.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/InlineScriptList.svelte
index 738ce634ce..5f50e90999 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/InlineScriptList.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/InlineScriptList.svelte
@@ -11,9 +11,10 @@
 		filter?: string
 		inlineScripts?: string[]
 		children?: import('svelte').Snippet
+		onpick?: (...args: any[]) => any
 	}
 
-	let { filter = $bindable(''), inlineScripts = [], children }: Props = $props()
+	let { filter = $bindable(''), inlineScripts = [], children, onpick = undefined }: Props = $props()
 
 	type Item = { title: string }
 	let filteredItems: (Item & { marked?: string })[] = $state([])
@@ -47,7 +48,7 @@
 			<li class="flex flex-row w-full">
 				<button
 					class="p-4 gap-4 flex flex-row grow justify-between hover:bg-surface-hover bg-surface transition-all items-center rounded-md"
-					onclick={() => dispatch('pick', item.title)}
+					onclick={() => (dispatch('pick', item.title), onpick?.(item.title))}
 				>
 					<div class="flex items-center gap-4">
 						<RowIcon kind="script" />
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte
index af6f20e510..0ac68122dc 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/RunnableSelector.svelte
@@ -21,6 +21,7 @@
 		onlyFlow?: boolean
 		rawApps?: boolean
 		unusedInlineScripts: { name: string; inlineScript: InlineScript }[]
+		onpick?: (...args: any[]) => any
 	}
 
 	let {
@@ -28,7 +29,8 @@
 		hideCreateScript = false,
 		onlyFlow = false,
 		rawApps = false,
-		unusedInlineScripts = $bindable()
+		unusedInlineScripts = $bindable(),
+		onpick = undefined
 	}: Props = $props()
 
 	// const { app, workspace } = getContext<AppViewerContext>('AppViewerContext')
@@ -76,6 +78,10 @@
 			runnable,
 			fields
 		})
+		onpick?.({
+			runnable,
+			fields
+		})
 	}
 
 	async function pickFlow(path: string) {
@@ -92,6 +98,10 @@
 			runnable,
 			fields
 		})
+		onpick?.({
+			runnable,
+			fields
+		})
 	}
 
 	async function pickHubScript(path: string) {
@@ -108,6 +118,10 @@
 			runnable,
 			fields
 		})
+		onpick?.({
+			runnable,
+			fields
+		})
 	}
 
 	function pickInlineScript(name: string) {
@@ -122,6 +136,14 @@
 			fields: {}
 		})
 
+		onpick?.({
+			runnable: {
+				type: 'inline',
+				name,
+				inlineScript: unusedInlineScript.inlineScript
+			},
+			fields: {}
+		})
 		unusedInlineScripts.splice(unusedInlineScriptIndex, 1)
 		unusedInlineScripts = unusedInlineScripts
 	}
@@ -137,6 +159,14 @@
 			},
 			fields: {}
 		})
+		onpick?.({
+			runnable: {
+				type: 'inline',
+				name: newScriptName,
+				inlineScript: undefined
+			},
+			fields: {}
+		})
 	}
 </script>
 
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/WorkspaceFlowList.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/WorkspaceFlowList.svelte
index b2cc91fc01..fca6b34516 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/WorkspaceFlowList.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/WorkspaceFlowList.svelte
@@ -14,9 +14,10 @@
 	interface Props {
 		filter?: string
 		children?: import('svelte').Snippet
+		onpick?: (...args: any[]) => any
 	}
 
-	let { filter = $bindable(''), children }: Props = $props()
+	let { filter = $bindable(''), children, onpick = undefined }: Props = $props()
 
 	let flows: Flow[] | undefined = $state(undefined)
 	let filteredItems: (Flow & { marked?: string })[] = $state([])
@@ -65,7 +66,7 @@
 				<li class="flex flex-row w-full">
 					<button
 						class="p-4 gap-4 flex flex-row grow justify-between hover:bg-surface-hover bg-surface transition-all items-center rounded-md"
-						onclick={() => dispatch('pick', item.path)}
+						onclick={() => (dispatch('pick', item.path), onpick?.(item.path))}
 					>
 						<div class="flex items-center gap-4">
 							<RowIcon kind="flow" />
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/WorkspaceScriptList.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/WorkspaceScriptList.svelte
index be261ca5e8..2d81e77773 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/WorkspaceScriptList.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/mainInput/WorkspaceScriptList.svelte
@@ -14,9 +14,10 @@
 	interface Props {
 		filter?: string
 		children?: import('svelte').Snippet
+		onpick?: (...args: any[]) => any
 	}
 
-	let { filter = $bindable(''), children }: Props = $props()
+	let { filter = $bindable(''), children, onpick = undefined }: Props = $props()
 
 	let scripts: Script[] | undefined = $state(undefined)
 	let filteredItems: (Script & { marked?: string })[] = $state([])
@@ -65,7 +66,7 @@
 				<li class="flex flex-row w-full">
 					<button
 						class="p-4 gap-4 flex flex-row grow justify-between hover:bg-surface-hover bg-surface transition-all items-center rounded-md"
-						onclick={() => dispatch('pick', item.path)}
+						onclick={() => (dispatch('pick', item.path), onpick?.(item.path))}
 					>
 						<div class="flex items-center gap-4">
 							<RowIcon kind="script" />
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptRunConfiguration.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptRunConfiguration.svelte
index bfdbc199a9..d52f398398 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptRunConfiguration.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/script/shared/ScriptRunConfiguration.svelte
@@ -10,6 +10,7 @@
 		canConfigureRecomputeOnInputChanged?: boolean
 		canConfigureRunOnStart?: boolean
 		children?: import('svelte').Snippet
+		onupdateAutoRefresh?: (...args: any[]) => any
 	}
 
 	let {
@@ -17,7 +18,8 @@
 		recomputeOnInputChanged = $bindable(false),
 		canConfigureRecomputeOnInputChanged = true,
 		canConfigureRunOnStart = true,
-		children
+		children,
+		onupdateAutoRefresh = undefined
 	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
@@ -41,6 +43,7 @@
 						size="xs"
 						on:change={() => {
 							dispatch('updateAutoRefresh')
+							onupdateAutoRefresh?.()
 						}}
 					/>
 				</div>
@@ -56,6 +59,7 @@
 						size="xs"
 						on:change={() => {
 							dispatch('updateAutoRefresh')
+							onupdateAutoRefresh?.()
 						}}
 					/>
 				</div>
diff --git a/frontend/src/lib/components/common/CloseButton.svelte b/frontend/src/lib/components/common/CloseButton.svelte
index d7d0a58a7b..5616ecb7d3 100644
--- a/frontend/src/lib/components/common/CloseButton.svelte
+++ b/frontend/src/lib/components/common/CloseButton.svelte
@@ -11,15 +11,24 @@
 		class?: string
 		id?: string | undefined
 		onClick?: () => void | undefined | any
+		onclose?: (...args: any[]) => any
 	}
 
-	let { noBg = false, small = false, Icon, class: className, id, onClick }: Props = $props()
+	let {
+		noBg = false,
+		small = false,
+		Icon,
+		class: className,
+		id,
+		onClick,
+		onclose = undefined
+	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
 </script>
 
 <Button
-	on:click={() => (dispatch('close'), onClick?.())}
+	on:click={() => ((dispatch('close'), onclose?.()), onClick?.())}
 	on:pointerdown={(e) => e.stopPropagation()}
 	{id}
 	startIcon={{ icon: Icon ?? X }}
diff --git a/frontend/src/lib/components/common/button/Button.svelte b/frontend/src/lib/components/common/button/Button.svelte
index 383e73a991..60281d56f8 100644
--- a/frontend/src/lib/components/common/button/Button.svelte
+++ b/frontend/src/lib/components/common/button/Button.svelte
@@ -97,6 +97,8 @@
 		[key: string]: any
 		dropdownOpen?: boolean
 		dropdownWidth?: number | undefined
+		ontooltipOpen?: (...args: any[]) => any
+		ondropdownOpen?: (...args: any[]) => any
 	}
 
 	let {
@@ -139,6 +141,8 @@
 		onClick,
 		dropdownOpen = $bindable(false),
 		dropdownWidth = undefined,
+		ontooltipOpen = undefined,
+		ondropdownOpen = undefined,
 		...rest
 	}: Props = $props()
 
@@ -323,7 +327,7 @@
 	}) //This option is reactive
 
 	$effect(() => {
-		$open !== undefined && dispatchIfMounted('tooltipOpen', $open)
+		$open !== undefined && (dispatchIfMounted('tooltipOpen', $open), ontooltipOpen?.($open))
 	})
 
 	const dividerClass = $derived(getDividerClass(color, variant))
@@ -466,8 +470,8 @@
 			class="h-auto w-fit"
 			hidePopup={hideDropdown}
 			usePointerDownOutside
-			onOpen={() => dispatch('dropdownOpen', true)}
-			onClose={() => dispatch('dropdownOpen', false)}
+			onOpen={() => (dispatch('dropdownOpen', true), ondropdownOpen?.(true))}
+			onClose={() => (dispatch('dropdownOpen', false), ondropdownOpen?.(false))}
 			bind:open={dropdownOpen}
 			enableFlyTransition
 			customWidth={dropdownWidth}
diff --git a/frontend/src/lib/components/common/button/UndoRedo.svelte b/frontend/src/lib/components/common/button/UndoRedo.svelte
index 107747ddb2..80d30f8a95 100644
--- a/frontend/src/lib/components/common/button/UndoRedo.svelte
+++ b/frontend/src/lib/components/common/button/UndoRedo.svelte
@@ -4,11 +4,13 @@
 	import { Button } from '..'
 
 	interface Props {
-		undoProps?: Record<string, any>;
-		redoProps?: Record<string, any>;
+		undoProps?: Record<string, any>
+		redoProps?: Record<string, any>
+		onundo?: (...args: any[]) => any
+		onredo?: (...args: any[]) => any
 	}
 
-	let { undoProps = {}, redoProps = {} }: Props = $props();
+	let { undoProps = {}, redoProps = {}, onundo = undefined, onredo = undefined }: Props = $props()
 	const dispatch = createEventDispatcher()
 </script>
 
@@ -17,7 +19,7 @@
 		title="Undo"
 		variant="default"
 		btnClasses="!min-h-[30px] !rounded-r-none"
-		on:click={() => dispatch('undo')}
+		on:click={() => (dispatch('undo'), onundo?.())}
 		startIcon={{ icon: Undo }}
 		iconOnly
 		{...undoProps}
@@ -26,7 +28,7 @@
 		title="Redo"
 		variant="default"
 		btnClasses="!min-h-[30px] !rounded-l-none !border-l-0"
-		on:click={() => dispatch('redo')}
+		on:click={() => (dispatch('redo'), onredo?.())}
 		startIcon={{ icon: Redo }}
 		iconOnly
 		{...redoProps}
diff --git a/frontend/src/lib/components/common/clearableInput/ClearableInput.svelte b/frontend/src/lib/components/common/clearableInput/ClearableInput.svelte
index 0e587c5aaf..7eba0ab931 100644
--- a/frontend/src/lib/components/common/clearableInput/ClearableInput.svelte
+++ b/frontend/src/lib/components/common/clearableInput/ClearableInput.svelte
@@ -1,21 +1,22 @@
 <script lang="ts">
-	import { createBubbler, stopPropagation, preventDefault } from 'svelte/legacy';
+	import { createBubbler, stopPropagation, preventDefault } from 'svelte/legacy'
 
-	const bubble = createBubbler();
+	const bubble = createBubbler()
 	import { createEventDispatcher } from 'svelte'
 	import { fade } from 'svelte/transition'
 	import { X } from 'lucide-svelte'
 	import { createDispatcherIfMounted } from '$lib/createDispatcherIfMounted'
 
 	interface Props {
-		value?: any;
-		placeholder?: string;
-		type?: 'text' | 'textarea' | 'number';
-		inputClass?: string;
-		wrapperClass?: string;
-		buttonClass?: string;
-		children?: import('svelte').Snippet;
+		value?: any
+		placeholder?: string
+		type?: 'text' | 'textarea' | 'number'
+		inputClass?: string
+		wrapperClass?: string
+		buttonClass?: string
+		children?: import('svelte').Snippet
 		[key: string]: any
+		onchange?: (...args: any[]) => any
 	}
 
 	let {
@@ -26,8 +27,9 @@
 		wrapperClass = '',
 		buttonClass = '',
 		children,
+		onchange = undefined,
 		...rest
-	}: Props = $props();
+	}: Props = $props()
 	const dispatch = createEventDispatcher()
 	const dispatchIfMounted = createDispatcherIfMounted(dispatch)
 	let isHovered = $state(false)
@@ -35,7 +37,8 @@
 	let isNumeric = $derived(['number', 'range'].includes(type))
 	$effect(() => {
 		dispatchIfMounted('change', value)
-	});
+		onchange?.(value)
+	})
 
 	function handleInput(e) {
 		value = isNumeric ? +e.target.value : e.target.value
@@ -47,7 +50,7 @@
 
 	$effect(() => {
 		if (value === undefined) value = ''
-	});
+	})
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
diff --git a/frontend/src/lib/components/common/confirmationModal/DraftTriggersConfirmationModal.svelte b/frontend/src/lib/components/common/confirmationModal/DraftTriggersConfirmationModal.svelte
index e8fec0b907..e40cfd15d5 100644
--- a/frontend/src/lib/components/common/confirmationModal/DraftTriggersConfirmationModal.svelte
+++ b/frontend/src/lib/components/common/confirmationModal/DraftTriggersConfirmationModal.svelte
@@ -16,9 +16,17 @@
 		open?: boolean
 		draftTriggers?: Trigger[]
 		isFlow?: boolean
+		oncanceled?: (...args: any[]) => any
+		onconfirmed?: (...args: any[]) => any
 	}
 
-	let { open = $bindable(false), draftTriggers = [], isFlow = false }: Props = $props()
+	let {
+		open = $bindable(false),
+		draftTriggers = [],
+		isFlow = false,
+		oncanceled = undefined,
+		onconfirmed = undefined
+	}: Props = $props()
 
 	let selectedTriggers: Trigger[] = $state(draftTriggers)
 
@@ -74,8 +82,11 @@
 	confirmationText={isFlow ? 'Deploy Flow' : 'Deploy Script'}
 	type="reload"
 	showIcon={false}
-	on:canceled={() => dispatch('canceled')}
-	on:confirmed={() => dispatch('confirmed', { selectedTriggers })}
+	on:canceled={() => (dispatch('canceled'), oncanceled?.())}
+	on:confirmed={() => (
+		dispatch('confirmed', { selectedTriggers }),
+		onconfirmed?.({ selectedTriggers })
+	)}
 >
 	<div class="flex flex-col w-full gap-8 pb-4">
 		<div class="text-secondary text-sm">
diff --git a/frontend/src/lib/components/common/drawer/Drawer.svelte b/frontend/src/lib/components/common/drawer/Drawer.svelte
index 7cd89bb79b..cf8f485edb 100644
--- a/frontend/src/lib/components/common/drawer/Drawer.svelte
+++ b/frontend/src/lib/components/common/drawer/Drawer.svelte
@@ -20,6 +20,9 @@
 		positionClass?: string | undefined
 		name?: string
 		children?: import('svelte').Snippet<[any]>
+		onafterClose?: (...args: any[]) => any
+		onopen?: (...args: any[]) => any
+		onclose?: (...args: any[]) => any
 	}
 
 	let {
@@ -35,7 +38,10 @@
 		class: clazz = '',
 		positionClass = undefined,
 		name = undefined,
-		children: children_render
+		children: children_render,
+		onafterClose = undefined,
+		onopen = undefined,
+		onclose = undefined
 	}: Props = $props()
 
 	if (open === undefined) {
@@ -60,6 +66,7 @@
 		if (open) {
 			setTimeout(() => {
 				dispatch('afterClose')
+				onafterClose?.()
 			}, durationMs)
 		}
 		disposable?.closeDrawer()
@@ -111,8 +118,8 @@
 		initialOffset={offset}
 		bind:open
 		bind:this={disposable}
-		onOpen={() => dispatch('open')}
-		onClose={() => dispatch('close')}
+		onOpen={() => (dispatch('open'), onopen?.())}
+		onClose={() => (dispatch('close'), onclose?.())}
 		{preventEscape}
 	>
 		{#snippet children({ handleClickAway, zIndex, isTop })}
diff --git a/frontend/src/lib/components/common/drawer/DrawerContent.svelte b/frontend/src/lib/components/common/drawer/DrawerContent.svelte
index ad89c2c725..3efe1c24d6 100644
--- a/frontend/src/lib/components/common/drawer/DrawerContent.svelte
+++ b/frontend/src/lib/components/common/drawer/DrawerContent.svelte
@@ -23,6 +23,7 @@
 		actions?: import('svelte').Snippet
 		titleExtra?: import('svelte').Snippet
 		children?: import('svelte').Snippet
+		onclose?: (...args: any[]) => any
 	}
 
 	let {
@@ -40,7 +41,8 @@
 		id,
 		actions,
 		titleExtra,
-		children
+		children,
+		onclose = undefined
 	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
@@ -58,6 +60,7 @@
 					description: `Close ${aiDescription}`,
 					callback: () => {
 						dispatch('close')
+						onclose?.()
 					}
 				}}
 			>
diff --git a/frontend/src/lib/components/common/fileUpload/FileUpload.svelte b/frontend/src/lib/components/common/fileUpload/FileUpload.svelte
index 637bb9508a..93ae5447df 100644
--- a/frontend/src/lib/components/common/fileUpload/FileUpload.svelte
+++ b/frontend/src/lib/components/common/fileUpload/FileUpload.svelte
@@ -51,6 +51,8 @@
 					  }
 					| undefined)
 			| undefined
+		onaddition?: (...args: any[]) => any
+		ondeletion?: (...args: any[]) => any
 	}
 
 	let {
@@ -73,7 +75,9 @@
 		disabled = false,
 		iconSize = undefined,
 		initialValue = undefined,
-		computeForceViewerPolicies = undefined
+		computeForceViewerPolicies = undefined,
+		onaddition = undefined,
+		ondeletion = undefined
 	}: Props = $props()
 
 	const containerText = $derived(
@@ -155,6 +159,10 @@
 					path: uniqueFolderPrefix + uploadedFolderRoot,
 					filename: undefined
 				})
+				onaddition?.({
+					path: uniqueFolderPrefix + uploadedFolderRoot,
+					filename: undefined
+				})
 				sendUserToast('Folder uploaded!')
 			}
 		} else {
@@ -355,6 +363,7 @@
 		}
 		if (!folderOnly) {
 			dispatch('addition', { path: uploadData.path, filename: fileToUpload.name })
+			onaddition?.({ path: uploadData.path, filename: fileToUpload.name })
 			sendUserToast('File uploaded!')
 		}
 
@@ -382,6 +391,7 @@
 				})
 			}
 			dispatch('deletion', { path: fileKey })
+			ondeletion?.({ path: fileKey })
 			sendUserToast('File deleted!')
 		} catch (err) {
 			console.error(err)
@@ -547,6 +557,7 @@
 
 											if (fileUpload.path) {
 												dispatch('deletion', { path: fileUpload.path })
+												ondeletion?.({ path: fileUpload.path })
 											}
 										}}
 										startIcon={{
diff --git a/frontend/src/lib/components/common/fileUpload/FileUploadModal.svelte b/frontend/src/lib/components/common/fileUpload/FileUploadModal.svelte
index 6a263dff79..c8dd8b260e 100644
--- a/frontend/src/lib/components/common/fileUpload/FileUploadModal.svelte
+++ b/frontend/src/lib/components/common/fileUpload/FileUploadModal.svelte
@@ -6,14 +6,14 @@
 	import { X } from 'lucide-svelte'
 	import FileUpload from './FileUpload.svelte'
 
-
 	interface Props {
-		title: string;
-		open?: boolean;
-		fileKey?: string | undefined;
+		title: string
+		open?: boolean
+		fileKey?: string | undefined
+		onclose?: (...args: any[]) => any
 	}
 
-	let { title, open = false, fileKey = $bindable(undefined) }: Props = $props();
+	let { title, open = false, fileKey = $bindable(undefined), onclose = undefined }: Props = $props()
 
 	let s3Folder: string = $state('')
 	const dispatch = createEventDispatcher()
@@ -34,11 +34,7 @@
 </script>
 
 {#if open}
-	<div
-		transition:fadeFast
-		class={'fixed top-0 bottom-0 left-0 right-0 z-[5000]'}
-		role="dialog"
-	>
+	<div transition:fadeFast class={'fixed top-0 bottom-0 left-0 right-0 z-[5000]'} role="dialog">
 		<div
 			class={classNames(
 				'fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity',
@@ -62,7 +58,7 @@
 								{title}
 							</h3>
 							<Button
-								on:click={() => dispatch('close', fileKey)}
+								on:click={() => (dispatch('close', fileKey), onclose?.(fileKey))}
 								title="Close"
 								color="light"
 								size="sm"
diff --git a/frontend/src/lib/components/common/menu/Menu.svelte b/frontend/src/lib/components/common/menu/Menu.svelte
index 519aada62b..6b7c54f4a7 100644
--- a/frontend/src/lib/components/common/menu/Menu.svelte
+++ b/frontend/src/lib/components/common/menu/Menu.svelte
@@ -23,6 +23,8 @@
 		placement?: Placement
 		trigger?: import('svelte').Snippet<[any]>
 		children?: import('svelte').Snippet<[any]>
+		ondropdownOpen?: (...args: any[]) => any
+		ondropdownClose?: (...args: any[]) => any
 	}
 
 	let {
@@ -34,7 +36,9 @@
 		pointerDown = false,
 		placement = 'bottom-start',
 		trigger,
-		children
+		children,
+		ondropdownOpen = undefined,
+		ondropdownClose = undefined
 	}: Props = $props()
 
 	function handleOutsideClick(event) {
@@ -89,8 +93,10 @@
 				show = !show
 				if (show) {
 					dispatch('dropdownOpen')
+					ondropdownOpen?.()
 				} else {
 					dispatch('dropdownClose')
+					ondropdownClose?.()
 				}
 			}
 		}}
diff --git a/frontend/src/lib/components/common/modal/Modal.svelte b/frontend/src/lib/components/common/modal/Modal.svelte
index bbb4a435cc..cea209d1be 100644
--- a/frontend/src/lib/components/common/modal/Modal.svelte
+++ b/frontend/src/lib/components/common/modal/Modal.svelte
@@ -18,6 +18,8 @@
 		settings?: import('svelte').Snippet
 		children?: import('svelte').Snippet
 		actions?: import('svelte').Snippet
+		onconfirmed?: (...args: any[]) => any
+		oncanceled?: (...args: any[]) => any
 	}
 
 	let {
@@ -29,7 +31,9 @@
 		kind = 'button',
 		settings,
 		children,
-		actions
+		actions,
+		onconfirmed = undefined,
+		oncanceled = undefined
 	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
@@ -41,12 +45,14 @@
 					event.stopPropagation()
 					event.preventDefault()
 					dispatch('confirmed')
+					onconfirmed?.()
 					break
 				case 'Escape':
 					event.stopPropagation()
 					event.preventDefault()
 					open = false
 					dispatch('canceled')
+					oncanceled?.()
 					break
 			}
 		}
@@ -111,6 +117,7 @@
 							<Button
 								on:click={() => {
 									dispatch('canceled')
+									oncanceled?.()
 									open = false
 								}}
 								color="light"
diff --git a/frontend/src/lib/components/common/stepper/Stepper.svelte b/frontend/src/lib/components/common/stepper/Stepper.svelte
index bbd6b1afe4..089c8bd26e 100644
--- a/frontend/src/lib/components/common/stepper/Stepper.svelte
+++ b/frontend/src/lib/components/common/stepper/Stepper.svelte
@@ -4,12 +4,13 @@
 	import { createEventDispatcher } from 'svelte'
 
 	interface Props {
-		tabs: string[];
-		selectedIndex?: number;
-		maxReachedIndex?: number;
-		statusByStep?: Array<'success' | 'error' | 'pending'>;
-		hasValidations?: boolean;
-		allowStepNavigation?: boolean;
+		tabs: string[]
+		selectedIndex?: number
+		maxReachedIndex?: number
+		statusByStep?: Array<'success' | 'error' | 'pending'>
+		hasValidations?: boolean
+		allowStepNavigation?: boolean
+		onclick?: (...args: any[]) => any
 	}
 
 	let {
@@ -18,8 +19,9 @@
 		maxReachedIndex = -1,
 		statusByStep = [],
 		hasValidations = false,
-		allowStepNavigation = false
-	}: Props = $props();
+		allowStepNavigation = false,
+		onclick = undefined
+	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
 
@@ -74,6 +76,7 @@
 				)}
 				onclick={() => {
 					dispatch('click', { index })
+					onclick?.({ index })
 				}}
 			>
 				{#if statusByStep[index] === 'pending'}
diff --git a/frontend/src/lib/components/common/table/AppRow.svelte b/frontend/src/lib/components/common/table/AppRow.svelte
index a372c78e14..100254eee0 100644
--- a/frontend/src/lib/components/common/table/AppRow.svelte
+++ b/frontend/src/lib/components/common/table/AppRow.svelte
@@ -45,6 +45,7 @@
 		depth?: number
 		menuOpen?: boolean
 		showEditButton?: boolean
+		onchange?: (...args: any[]) => any
 	}
 
 	let {
@@ -56,7 +57,8 @@
 		deleteConfirmedCallback = $bindable(),
 		depth = 0,
 		menuOpen = $bindable(false),
-		showEditButton = $bindable(true)
+		showEditButton = $bindable(true),
+		onchange = undefined
 	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
@@ -147,10 +149,12 @@
 								if (event?.shiftKey) {
 									await AppService.deleteApp({ workspace: $workspaceStore ?? '', path })
 									dispatch('change')
+									onchange?.()
 								} else {
 									deleteConfirmedCallback = async () => {
 										await AppService.deleteApp({ workspace: $workspaceStore ?? '', path })
 										dispatch('change')
+										onchange?.()
 									}
 								}
 							},
@@ -261,6 +265,7 @@
 											kind: 'app'
 										})
 										dispatch('change')
+										onchange?.()
 									},
 									type: DELETE,
 									disabled: !canWrite,
@@ -277,10 +282,12 @@
 							if (event?.shiftKey) {
 								await AppService.deleteApp({ workspace: $workspaceStore ?? '', path })
 								dispatch('change')
+								onchange?.()
 							} else {
 								deleteConfirmedCallback = async () => {
 									await AppService.deleteApp({ workspace: $workspaceStore ?? '', path })
 									dispatch('change')
+									onchange?.()
 								}
 							}
 						},
diff --git a/frontend/src/lib/components/common/table/FlowRow.svelte b/frontend/src/lib/components/common/table/FlowRow.svelte
index 0734722760..ea2dce3fc1 100644
--- a/frontend/src/lib/components/common/table/FlowRow.svelte
+++ b/frontend/src/lib/components/common/table/FlowRow.svelte
@@ -48,6 +48,7 @@
 		depth?: number
 		menuOpen?: boolean
 		showEditButton?: boolean
+		onchange?: (...args: any[]) => any
 	}
 
 	let {
@@ -60,7 +61,8 @@
 		errorHandlerMuted,
 		depth = 0,
 		menuOpen = $bindable(false),
-		showEditButton = $bindable(true)
+		showEditButton = $bindable(true),
+		onchange = undefined
 	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
@@ -73,6 +75,7 @@
 				requestBody: { archived }
 			})
 			dispatch('change')
+			onchange?.()
 			sendUserToast(`Archived flow ${path}`)
 		} catch (err) {
 			sendUserToast(`Could not archive this flow ${err.body}`, true)
@@ -83,6 +86,7 @@
 		try {
 			await FlowService.deleteFlowByPath({ workspace: $workspaceStore!, path })
 			dispatch('change')
+			onchange?.()
 			sendUserToast(`Deleted flow ${path}`)
 		} catch (err) {
 			sendUserToast(`Could not delete this flow ${err.body}`, true)
@@ -283,6 +287,7 @@
 											kind: 'flow'
 										})
 										dispatch('change')
+										onchange?.()
 									},
 									type: DELETE,
 									disabled: !owner,
diff --git a/frontend/src/lib/components/common/table/ScriptRow.svelte b/frontend/src/lib/components/common/table/ScriptRow.svelte
index d0f0a50010..7eab3bb02b 100644
--- a/frontend/src/lib/components/common/table/ScriptRow.svelte
+++ b/frontend/src/lib/components/common/table/ScriptRow.svelte
@@ -58,6 +58,7 @@
 		depth?: number
 		menuOpen?: boolean
 		showEditButton?: boolean
+		onchange?: (...args: any[]) => any
 	}
 
 	let {
@@ -71,7 +72,8 @@
 		showCode,
 		depth = 0,
 		menuOpen = $bindable(false),
-		showEditButton = $bindable(true)
+		showEditButton = $bindable(true),
+		onchange = undefined
 	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
@@ -79,6 +81,7 @@
 	async function archiveScript(path: string): Promise<void> {
 		await ScriptService.archiveScriptByPath({ workspace: $workspaceStore!, path })
 		dispatch('change')
+		onchange?.()
 		sendUserToast(`Archived script ${path}`)
 	}
 
@@ -93,12 +96,14 @@
 			}
 		})
 		dispatch('change')
+		onchange?.()
 		sendUserToast(`Unarchived script ${path}`)
 	}
 
 	async function deleteScript(path: string): Promise<void> {
 		await ScriptService.deleteScriptByPath({ workspace: $workspaceStore!, path })
 		dispatch('change')
+		onchange?.()
 		sendUserToast(`Deleted script ${path}`)
 	}
 	let scheduleEditor: ScheduleEditor | undefined = $state(undefined)
@@ -359,6 +364,7 @@
 											kind: 'script'
 										})
 										dispatch('change')
+										onchange?.()
 									},
 									type: DELETE,
 									disabled: !owner,
diff --git a/frontend/src/lib/components/common/tabs/Tab.svelte b/frontend/src/lib/components/common/tabs/Tab.svelte
index a652525b45..bffbe17431 100644
--- a/frontend/src/lib/components/common/tabs/Tab.svelte
+++ b/frontend/src/lib/components/common/tabs/Tab.svelte
@@ -26,6 +26,7 @@
 		 */
 		small?: boolean
 		extra?: import('svelte').Snippet
+		ononpointerdown?: (...args: any[]) => any
 	}
 
 	let {
@@ -44,7 +45,8 @@
 		otherValues = [],
 		disabled = false,
 		small = false,
-		extra = undefined
+		extra = undefined,
+		ononpointerdown = undefined
 	}: Props = $props()
 	const { selected, update, hashNavigation } = getContext<TabsContext>('Tabs')
 
@@ -96,6 +98,7 @@
 	onpointerdown={(event) => {
 		event.stopPropagation()
 		dispatch('onpointerdown', event)
+		ononpointerdown?.(event)
 	}}
 	{disabled}
 	{id}
diff --git a/frontend/src/lib/components/common/tabs/Tabs.svelte b/frontend/src/lib/components/common/tabs/Tabs.svelte
index 642340b01b..b93975c02b 100644
--- a/frontend/src/lib/components/common/tabs/Tabs.svelte
+++ b/frontend/src/lib/components/common/tabs/Tabs.svelte
@@ -24,6 +24,7 @@
 		 * Use this when you want to prevent navigation before checking for unsaved changes.
 		 */
 		deferSelectedUpdate?: boolean
+		onselected?: (...args: any[]) => any
 	}
 
 	let {
@@ -36,7 +37,8 @@
 		values = undefined,
 		children,
 		content,
-		deferSelectedUpdate = false
+		deferSelectedUpdate = false,
+		onselected = undefined
 	}: Props = $props()
 
 	// Single source of truth for tab state
@@ -47,6 +49,7 @@
 			selected = value
 		}
 		dispatch('selected', value)
+		onselected?.(value)
 	}
 
 	setContext<TabsContext>('Tabs', {
diff --git a/frontend/src/lib/components/copilot/FlowCopilotInputsModal.svelte b/frontend/src/lib/components/copilot/FlowCopilotInputsModal.svelte
index f3c2489eb9..dc8381ba15 100644
--- a/frontend/src/lib/components/copilot/FlowCopilotInputsModal.svelte
+++ b/frontend/src/lib/components/copilot/FlowCopilotInputsModal.svelte
@@ -4,13 +4,13 @@
 	import Modal from '../common/modal/Modal.svelte'
 	import Portal from '../Portal.svelte'
 
-
 	interface Props {
-		open?: boolean;
-		inputs?: string[];
+		open?: boolean
+		inputs?: string[]
+		onconfirmed?: (...args: any[]) => any
 	}
 
-	let { open = $bindable(false), inputs = [] }: Props = $props();
+	let { open = $bindable(false), inputs = [], onconfirmed = undefined }: Props = $props()
 
 	const dispatch = createEventDispatcher()
 </script>
@@ -21,6 +21,7 @@
 		on:confirmed={() => {
 			open = false
 			dispatch('confirmed')
+			onconfirmed?.()
 		}}
 		on:canceled
 		title="Windmill AI wants to add the following inputs to the flow:"
@@ -32,17 +33,17 @@
 		</ul>
 
 		{#snippet actions()}
-				<Button
-				
+			<Button
 				on:click={() => {
 					open = false
 					dispatch('confirmed')
+					onconfirmed?.()
 				}}
 				color="light"
 				size="sm"
 			>
 				<span class="inline-flex gap-2">Add <Badge color="dark-green">Enter</Badge></span>
 			</Button>
-			{/snippet}
+		{/snippet}
 	</Modal>
 </Portal>
diff --git a/frontend/src/lib/components/copilot/IteratorGen.svelte b/frontend/src/lib/components/copilot/IteratorGen.svelte
index b9015eb2b1..4b3aa2d97c 100644
--- a/frontend/src/lib/components/copilot/IteratorGen.svelte
+++ b/frontend/src/lib/components/copilot/IteratorGen.svelte
@@ -22,9 +22,17 @@
 		focused?: boolean
 		arg: InputTransform | any
 		pickableProperties?: PickableProperties | undefined
+		onsetExpr?: (...args: any[]) => any
+		onshowExpr?: (...args: any[]) => any
 	}
 
-	let { focused = false, arg, pickableProperties = undefined }: Props = $props()
+	let {
+		focused = false,
+		arg,
+		pickableProperties = undefined,
+		onsetExpr = undefined,
+		onshowExpr = undefined
+	}: Props = $props()
 
 	let btnFocused = $state(false)
 
@@ -94,6 +102,7 @@ Only output the expression, do not explain or discuss.`
 			if (!loading && generatedContent) {
 				event.preventDefault()
 				dispatch('setExpr', generatedContent)
+				onsetExpr?.(generatedContent)
 				generatedContent = ''
 			}
 		} else {
@@ -141,6 +150,7 @@ Only output the expression, do not explain or discuss.`
 
 	$effect(() => {
 		dispatch('showExpr', generatedContent)
+		onshowExpr?.(generatedContent)
 	})
 
 	let out = $state(true) // hack to prevent regenerating answer when accepting the answer due to mouseenter on new icon
@@ -160,6 +170,7 @@ Only output the expression, do not explain or discuss.`
 			on:click={() => {
 				if (!loading && generatedContent.length > 0) {
 					dispatch('setExpr', generatedContent)
+					onsetExpr?.(generatedContent)
 					generatedContent = ''
 				}
 			}}
diff --git a/frontend/src/lib/components/copilot/PredicateGen.svelte b/frontend/src/lib/components/copilot/PredicateGen.svelte
index c49edb70a8..3d8d8335b0 100644
--- a/frontend/src/lib/components/copilot/PredicateGen.svelte
+++ b/frontend/src/lib/components/copilot/PredicateGen.svelte
@@ -18,9 +18,15 @@
 	let loading = $state(false)
 	interface Props {
 		pickableProperties?: PickableProperties | undefined
+		onsetExpr?: (...args: any[]) => any
+		onupdateSummary?: (...args: any[]) => any
 	}
 
-	let { pickableProperties = undefined }: Props = $props()
+	let {
+		pickableProperties = undefined,
+		onsetExpr = undefined,
+		onupdateSummary = undefined
+	}: Props = $props()
 
 	let instructions = $state('')
 	let instructionsField: HTMLInputElement | undefined = $state(undefined)
@@ -77,7 +83,9 @@ Only return the expression without any wrapper. Do not explain or discuss.`
 			)
 
 			dispatch('setExpr', result)
+			onsetExpr?.(result)
 			dispatch('updateSummary', instructions)
+			onupdateSummary?.(instructions)
 		} catch (err) {
 			if (!abortController.signal.aborted) {
 				sendUserToast('Could not generate predicate: ' + err, true)
diff --git a/frontend/src/lib/components/copilot/StepGenQuick.svelte b/frontend/src/lib/components/copilot/StepGenQuick.svelte
index d09e554240..d1bb1f3ecf 100644
--- a/frontend/src/lib/components/copilot/StepGenQuick.svelte
+++ b/frontend/src/lib/components/copilot/StepGenQuick.svelte
@@ -16,6 +16,7 @@
 		preFilter: string
 		disableAi?: boolean
 		filteredItems?: (Script & { marked?: string })[] | (Item & { marked?: string })[]
+		onescape?: (...args: any[]) => any
 	}
 
 	let {
@@ -24,7 +25,8 @@
 		loading = false,
 		preFilter,
 		disableAi = false,
-		filteredItems = $bindable([])
+		filteredItems = $bindable([]),
+		onescape = undefined
 	}: Props = $props()
 	let prefilteredItems = $derived(scripts ?? [])
 
@@ -74,7 +76,7 @@
 			inputProps={{
 				type: 'text',
 				onkeydown: (e) => {
-					if (e.key === 'Escape') dispatch('escape')
+					if (e.key === 'Escape') (dispatch('escape'), onescape?.())
 				},
 				placeholder: `Search ${trigger ? 'triggers' : 'scripts'} ${disableAi ? '' : 'or AI gen'}`
 			}}
diff --git a/frontend/src/lib/components/copilot/StepInputGen.svelte b/frontend/src/lib/components/copilot/StepInputGen.svelte
index 7358ef4c5a..bc5ffc5c8f 100644
--- a/frontend/src/lib/components/copilot/StepInputGen.svelte
+++ b/frontend/src/lib/components/copilot/StepInputGen.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-
 	import { Check, Loader2, Wand2 } from 'lucide-svelte'
 	import Button from '../common/button/Button.svelte'
 	import { getNonStreamingCompletion } from './lib'
@@ -29,6 +28,8 @@
 		pickableProperties?: PickableProperties | undefined
 		argName: string
 		btnClass?: string
+		onsetExpr?: (...args: any[]) => any
+		onshowExpr?: (...args: any[]) => any
 	}
 
 	let {
@@ -37,7 +38,9 @@
 		schemaProperty,
 		pickableProperties = undefined,
 		argName,
-		btnClass = ''
+		btnClass = '',
+		onsetExpr = undefined,
+		onshowExpr = undefined
 	}: Props = $props()
 
 	let empty = $state(false)
@@ -159,6 +162,7 @@ Only return the expression without any wrapper.`
 			if (!loading && generatedContent) {
 				event.preventDefault()
 				dispatch('setExpr', generatedContent)
+				onsetExpr?.(generatedContent)
 				if (newFlowInput) {
 					openInputsModal = true
 				}
@@ -209,10 +213,12 @@ Only return the expression without any wrapper.`
 
 	$effect(() => {
 		dispatch('showExpr', generatedContent)
+		onshowExpr?.(generatedContent)
 	})
 
 	$effect(() => {
 		dispatch('showExpr', $generatedExprs?.[argName] || '')
+		onshowExpr?.($generatedExprs?.[argName] || '')
 	})
 
 	let out = $state(true) // hack to prevent regenerating answer when accepting the answer due to mouseenter on new icon
@@ -237,6 +243,7 @@ Only return the expression without any wrapper.`
 		on:click={() => {
 			if (!loading && generatedContent.length > 0) {
 				dispatch('setExpr', generatedContent)
+				onsetExpr?.(generatedContent)
 				if (newFlowInput) {
 					openInputsModal = true
 				}
diff --git a/frontend/src/lib/components/details/DetailPageHeader.svelte b/frontend/src/lib/components/details/DetailPageHeader.svelte
index cc162961ce..d917bae3e6 100644
--- a/frontend/src/lib/components/details/DetailPageHeader.svelte
+++ b/frontend/src/lib/components/details/DetailPageHeader.svelte
@@ -38,6 +38,7 @@
 		onSaved?: (newPath: string) => void
 		children?: import('svelte').Snippet
 		trigger_badges?: import('svelte').Snippet
+		onseeTriggers?: (...args: any[]) => any
 	}
 
 	let {
@@ -51,7 +52,8 @@
 		errorHandlerMuted = $bindable(),
 		onSaved,
 		children,
-		trigger_badges
+		trigger_badges,
+		onseeTriggers = undefined
 	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
@@ -82,6 +84,7 @@
 						size="xs"
 						on:click={async () => {
 							dispatch('seeTriggers')
+							onseeTriggers?.()
 							await tick()
 							triggersState.selectedTriggerIndex = primarySchedule
 						}}
diff --git a/frontend/src/lib/components/display/PdfViewer.svelte b/frontend/src/lib/components/display/PdfViewer.svelte
index d472614d9a..3c479fa928 100644
--- a/frontend/src/lib/components/display/PdfViewer.svelte
+++ b/frontend/src/lib/components/display/PdfViewer.svelte
@@ -22,6 +22,8 @@
 		allowFullscreen?: boolean
 		class?: string | undefined
 		style?: string | undefined
+		onloading?: (...args: any[]) => any
+		onloaded?: (...args: any[]) => any
 	}
 
 	let {
@@ -30,7 +32,9 @@
 		extraButton = undefined,
 		allowFullscreen = false,
 		class: classNames = undefined,
-		style = undefined
+		style = undefined,
+		onloading = undefined,
+		onloaded = undefined
 	}: Props = $props()
 
 	let fullscreen = $state(false)
@@ -67,6 +71,7 @@
 		}
 		try {
 			dispatch('loading')
+			onloading?.()
 			await resetDoc()
 			doc = await getDocument(src).promise
 			console.log('got doc')
@@ -80,6 +85,7 @@
 			console.log(err)
 		}
 		dispatch('loaded')
+		onloaded?.()
 	}
 
 	async function renderPdf(scaleToViewport = true, resizing = false) {
diff --git a/frontend/src/lib/components/flows/common/FlowCardHeader.svelte b/frontend/src/lib/components/flows/common/FlowCardHeader.svelte
index 87e073ca94..2b9fcf3ad2 100644
--- a/frontend/src/lib/components/flows/common/FlowCardHeader.svelte
+++ b/frontend/src/lib/components/flows/common/FlowCardHeader.svelte
@@ -28,6 +28,8 @@
 		children?: import('svelte').Snippet
 		action?: import('svelte').Snippet
 		isAgentTool?: boolean
+		onsetHash?: (...args: any[]) => any
+		onreload?: (...args: any[]) => any
 	}
 
 	let {
@@ -36,7 +38,9 @@
 		summary = $bindable(undefined),
 		children,
 		action,
-		isAgentTool = false
+		isAgentTool = false,
+		onsetHash = undefined,
+		onreload = undefined
 	}: Props = $props()
 
 	let latestHash: string | undefined = $state(undefined)
@@ -134,8 +138,10 @@
 								on:click={() => {
 									if (flowModuleValue.type == 'script') {
 										dispatch('setHash', latestHash)
+										onsetHash?.(latestHash)
 									}
 									dispatch('reload')
+									onreload?.()
 								}}>Update to latest hash</Button
 							>
 						{/if}
@@ -147,6 +153,7 @@
 							on:click={() => {
 								if (flowModuleValue.type == 'script') {
 									dispatch('setHash', undefined)
+									onsetHash?.(undefined)
 								}
 							}}><Unlock size={12} />hash</Button
 						>
@@ -159,6 +166,7 @@
 								on:click={() => {
 									if (flowModuleValue.type == 'script') {
 										dispatch('setHash', latestHash)
+										onsetHash?.(latestHash)
 									}
 								}}><Lock size={12} />hash</Button
 							>
@@ -166,7 +174,7 @@
 								title="Reload latest hash"
 								unifiedSize="sm"
 								variant="default"
-								on:click={() => dispatch('reload')}
+								on:click={() => (dispatch('reload'), onreload?.())}
 								startIcon={{ icon: RefreshCw }}
 								iconOnly
 							/>
diff --git a/frontend/src/lib/components/flows/content/FlowInputEditor.svelte b/frontend/src/lib/components/flows/content/FlowInputEditor.svelte
index f69c5105dc..db12958c58 100644
--- a/frontend/src/lib/components/flows/content/FlowInputEditor.svelte
+++ b/frontend/src/lib/components/flows/content/FlowInputEditor.svelte
@@ -7,12 +7,14 @@
 		title?: string
 		action?: import('svelte').Snippet
 		children?: import('svelte').Snippet
+		ondestroy?: (...args: any[]) => any
 	}
 
-	let { title = '', action, children }: Props = $props()
+	let { title = '', action, children, ondestroy = undefined }: Props = $props()
 
 	onDestroy(() => {
 		dispatch('destroy')
+		ondestroy?.()
 	})
 </script>
 
diff --git a/frontend/src/lib/components/flows/content/FlowInputs.svelte b/frontend/src/lib/components/flows/content/FlowInputs.svelte
index 7452527103..5cdf0a269a 100644
--- a/frontend/src/lib/components/flows/content/FlowInputs.svelte
+++ b/frontend/src/lib/components/flows/content/FlowInputs.svelte
@@ -26,6 +26,7 @@
 		shouldDisableTriggerScripts?: boolean
 		noEditor: boolean
 		summary?: string | undefined
+		onnew?: (...args: any[]) => any
 	}
 
 	let {
@@ -33,7 +34,8 @@
 		preprocessorModule,
 		shouldDisableTriggerScripts = false,
 		noEditor,
-		summary = $bindable(undefined)
+		summary = $bindable(undefined),
+		onnew = undefined
 	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
@@ -282,6 +284,12 @@
 								subkind: lang == 'docker' ? 'docker' : preprocessorModule ? 'preprocessor' : 'flow',
 								summary
 							})
+							onnew?.({
+								language: lang == 'docker' ? 'bash' : lang,
+								kind,
+								subkind: lang == 'docker' ? 'docker' : preprocessorModule ? 'preprocessor' : 'flow',
+								summary
+							})
 						}}
 					/>
 				{/if}
diff --git a/frontend/src/lib/components/flows/content/FlowInputsFlow.svelte b/frontend/src/lib/components/flows/content/FlowInputsFlow.svelte
index 9f16d95bab..c15fe36c16 100644
--- a/frontend/src/lib/components/flows/content/FlowInputsFlow.svelte
+++ b/frontend/src/lib/components/flows/content/FlowInputsFlow.svelte
@@ -11,9 +11,10 @@
 	import { fade } from 'svelte/transition'
 	interface Props {
 		children?: import('svelte').Snippet
+		onpick?: (...args: any[]) => any
 	}
 
-	let { children }: Props = $props()
+	let { children, onpick = undefined }: Props = $props()
 
 	// export let failureModule: boolean
 	const dispatch = createEventDispatcher()
@@ -90,6 +91,7 @@
 						class="p-4 gap-1 flex flex-row grow hover:bg-surface-hover bg-surface transition-all text-primary"
 						onclick={() => {
 							dispatch('pick', { path })
+							onpick?.({ path })
 						}}
 					>
 						<div class="flex flex-col">
diff --git a/frontend/src/lib/components/flows/content/FlowInputsQuick.svelte b/frontend/src/lib/components/flows/content/FlowInputsQuick.svelte
index a05177b7f2..e08932c3be 100644
--- a/frontend/src/lib/components/flows/content/FlowInputsQuick.svelte
+++ b/frontend/src/lib/components/flows/content/FlowInputsQuick.svelte
@@ -51,6 +51,7 @@
 		selectedKind?: 'script' | 'flow' | 'approval' | 'trigger' | 'preprocessor' | 'failure'
 		displayPath?: boolean
 		refreshCount?: number
+		onnew?: (...args: any[]) => any
 	}
 
 	let {
@@ -64,7 +65,8 @@
 		kind,
 		selectedKind = kind,
 		displayPath = false,
-		refreshCount = 0
+		refreshCount = 0,
+		onnew = undefined
 	}: Props = $props()
 
 	if ($workspaceStore && cachedOwners?.[$workspaceStore]) {
@@ -133,6 +135,16 @@
 				instructions: funcDesc
 			}
 		})
+		onnew?.({
+			kind: selectedKind,
+			inlineScript: {
+				language: lang,
+				kind: selectedKind,
+				subkind: 'flow',
+				summary,
+				instructions: funcDesc
+			}
+		})
 	}
 
 	let openScriptSettings = $state(false)
@@ -353,6 +365,7 @@
 				<FlowToplevelNode
 					on:click={() => {
 						dispatch('new', { kind })
+						onnew?.({ kind })
 					}}
 					{label}
 					selected={selectedByKeyboard === i}
@@ -433,6 +446,20 @@
 								summary
 							}
 						})
+						onnew?.({
+							kind: selectedKind,
+							inlineScript: {
+								language: lang == 'docker' ? 'bash' : lang,
+								kind: selectedKind,
+								subkind:
+									lang == 'docker'
+										? 'docker'
+										: selectedKind == 'preprocessor'
+											? 'preprocessor'
+											: 'flow',
+								summary
+							}
+						})
 					}}
 				/>
 			{/each}
diff --git a/frontend/src/lib/components/flows/content/FlowModuleHeader.svelte b/frontend/src/lib/components/flows/content/FlowModuleHeader.svelte
index bb8490be5f..e21adf9a84 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleHeader.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleHeader.svelte
@@ -25,10 +25,36 @@
 	interface Props {
 		module: FlowModule
 		tag: string | undefined
+		ontoggleRetry?: (...args: any[]) => any
+		ontoggleConcurrency?: (...args: any[]) => any
+		ontoggleCache?: (...args: any[]) => any
+		ontoggleStopAfterIf?: (...args: any[]) => any
+		ontoggleSuspend?: (...args: any[]) => any
+		ontoggleSleep?: (...args: any[]) => any
+		ontogglePin?: (...args: any[]) => any
+		onreload?: (...args: any[]) => any
+		ontagChange?: (...args: any[]) => any
+		onfork?: (...args: any[]) => any
+		oncreateScriptFromInlineScript?: (...args: any[]) => any
 	}
 
-	let { module, tag }: Props = $props()
-	const { scriptEditorDrawer, flowEditorDrawer } = getContext<FlowEditorContext>('FlowEditorContext')
+	let {
+		module,
+		tag,
+		ontoggleRetry = undefined,
+		ontoggleConcurrency = undefined,
+		ontoggleCache = undefined,
+		ontoggleStopAfterIf = undefined,
+		ontoggleSuspend = undefined,
+		ontoggleSleep = undefined,
+		ontogglePin = undefined,
+		onreload = undefined,
+		ontagChange = undefined,
+		onfork = undefined,
+		oncreateScriptFromInlineScript = undefined
+	}: Props = $props()
+	const { scriptEditorDrawer, flowEditorDrawer } =
+		getContext<FlowEditorContext>('FlowEditorContext')
 
 	const dispatch = createEventDispatcher()
 	let customUi: undefined | FlowBuilderWhitelabelCustomUi = getContext('customUi')
@@ -40,7 +66,11 @@
 <div class="flex flex-row gap-2 whitespace-nowrap">
 	{#if module.value.type === 'script' || module.value.type === 'rawscript' || module.value.type == 'flow'}
 		{#if module.retry?.constant || module.retry?.exponential}
-			<Popover placement="bottom" class={popoverClasses} onClick={() => dispatch('toggleRetry')}>
+			<Popover
+				placement="bottom"
+				class={popoverClasses}
+				onClick={() => (dispatch('toggleRetry'), ontoggleRetry?.())}
+			>
 				<Repeat size={14} />
 				{#snippet text()}
 					Retries
@@ -51,7 +81,7 @@
 			<Popover
 				placement="bottom"
 				class={popoverClasses}
-				onClick={() => dispatch('toggleConcurrency')}
+				onClick={() => (dispatch('toggleConcurrency'), ontoggleConcurrency?.())}
 			>
 				<Gauge size={14} />
 				{#snippet text()}
@@ -60,7 +90,11 @@
 			</Popover>
 		{/if}
 		{#if module.cache_ttl != undefined}
-			<Popover placement="bottom" class={popoverClasses} onClick={() => dispatch('toggleCache')}>
+			<Popover
+				placement="bottom"
+				class={popoverClasses}
+				onClick={() => (dispatch('toggleCache'), ontoggleCache?.())}
+			>
 				<Database size={14} />
 				{#snippet text()}
 					Cache
@@ -71,7 +105,7 @@
 			<Popover
 				placement="bottom"
 				class={popoverClasses}
-				onClick={() => dispatch('toggleStopAfterIf')}
+				onClick={() => (dispatch('toggleStopAfterIf'), ontoggleStopAfterIf?.())}
 			>
 				<Square size={14} />
 				{#snippet text()}
@@ -80,7 +114,11 @@
 			</Popover>
 		{/if}
 		{#if module.suspend}
-			<Popover placement="bottom" class={popoverClasses} onClick={() => dispatch('toggleSuspend')}>
+			<Popover
+				placement="bottom"
+				class={popoverClasses}
+				onClick={() => (dispatch('toggleSuspend'), ontoggleSuspend?.())}
+			>
 				<PhoneIncoming size={14} />
 				{#snippet text()}
 					Suspend
@@ -88,7 +126,11 @@
 			</Popover>
 		{/if}
 		{#if module.sleep}
-			<Popover placement="bottom" class={popoverClasses} onClick={() => dispatch('toggleSleep')}>
+			<Popover
+				placement="bottom"
+				class={popoverClasses}
+				onClick={() => (dispatch('toggleSleep'), ontoggleSleep?.())}
+			>
 				<Bed size={14} />
 				{#snippet text()}
 					Sleep
@@ -96,7 +138,11 @@
 			</Popover>
 		{/if}
 		{#if module.mock?.enabled}
-			<Popover placement="bottom" class={popoverClasses} onClick={() => dispatch('togglePin')}>
+			<Popover
+				placement="bottom"
+				class={popoverClasses}
+				onClick={() => (dispatch('togglePin'), ontogglePin?.())}
+			>
 				<Pin size={14} />
 				{#snippet text()}
 					This step is pinned
@@ -114,6 +160,7 @@
 						const hash = module.value.hash ?? (await getLatestHashForScript(module.value.path))
 						$scriptEditorDrawer?.openDrawer(hash, () => {
 							dispatch('reload')
+							onreload?.()
 							sendUserToast('Script has been updated')
 						})
 					}
@@ -132,14 +179,14 @@
 				noLabel={customUi?.tagSelectNoLabel}
 				nullTag={tag}
 				tag={module.value.tag_override}
-				on:change={(e) => dispatch('tagChange', e.detail)}
+				on:change={(e) => (dispatch('tagChange', e.detail), ontagChange?.(e.detail))}
 			/>
 		{/if}
 		{#if customUi?.scriptFork != false}
 			<Button
 				unifiedSize="sm"
 				variant="subtle"
-				on:click={() => dispatch('fork')}
+				on:click={() => (dispatch('fork'), onfork?.())}
 				startIcon={{ icon: GitFork }}
 				iconOnly={false}
 			>
@@ -154,6 +201,7 @@
 				if (module.value.type == 'flow') {
 					$flowEditorDrawer?.openDrawer(module.value.path, () => {
 						dispatch('reload')
+						onreload?.()
 						sendUserToast('Flow has been updated')
 					})
 				}
@@ -168,6 +216,7 @@
 			variant="subtle"
 			on:click={async () => {
 				dispatch('reload')
+				onreload?.()
 			}}
 			startIcon={{
 				icon: RefreshCcw
@@ -183,13 +232,16 @@
 			noLabel={customUi?.tagSelectNoLabel}
 			nullTag={tag}
 			tag={module.value.tag}
-			on:change={(e) => dispatch('tagChange', e.detail)}
+			on:change={(e) => (dispatch('tagChange', e.detail), ontagChange?.(e.detail))}
 		/>
 		<Button
 			unifiedSize="sm"
 			variant="subtle"
 			startIcon={{ icon: Save }}
-			on:click={() => dispatch('createScriptFromInlineScript')}
+			on:click={() => (
+				dispatch('createScriptFromInlineScript'),
+				oncreateScriptFromInlineScript?.()
+			)}
 			iconOnly={false}
 		>
 			Save to workspace
diff --git a/frontend/src/lib/components/flows/content/FlowModuleWorkerTagSelect.svelte b/frontend/src/lib/components/flows/content/FlowModuleWorkerTagSelect.svelte
index 8926863c30..3a2b8b348e 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleWorkerTagSelect.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleWorkerTagSelect.svelte
@@ -10,13 +10,15 @@
 		nullTag,
 		placeholder,
 		noLabel,
-		isPreprocessor
+		isPreprocessor,
+		onchange = undefined
 	}: {
 		tag: string | undefined
 		nullTag?: string | undefined
 		placeholder?: string
 		noLabel?: boolean
 		isPreprocessor: boolean
+		onchange?: (...args: any[]) => any
 	} = $props()
 
 	const { flowStore, selectionManager } = getContext<FlowEditorContext>('FlowEditorContext')
@@ -40,7 +42,7 @@
 					{placeholder}
 					{nullTag}
 					bind:tag
-					on:change={(e) => dispatch('change', e.detail)}
+					on:change={(e) => (dispatch('change', e.detail), onchange?.(e.detail))}
 				/>
 			{:else}
 				<button
diff --git a/frontend/src/lib/components/flows/content/GenAiQuick.svelte b/frontend/src/lib/components/flows/content/GenAiQuick.svelte
index e0e681d568..0d098a850a 100644
--- a/frontend/src/lib/components/flows/content/GenAiQuick.svelte
+++ b/frontend/src/lib/components/flows/content/GenAiQuick.svelte
@@ -1,23 +1,25 @@
 <script lang="ts">
-	import { createBubbler } from 'svelte/legacy';
+	import { createBubbler } from 'svelte/legacy'
 
-	const bubble = createBubbler();
+	const bubble = createBubbler()
 	import { Wand2 } from 'lucide-svelte'
 	import { createEventDispatcher } from 'svelte'
 
 	interface Props {
-		funcDesc: string;
-		selected: boolean;
-		lang: string;
+		funcDesc: string
+		selected: boolean
+		lang: string
+		onclick?: (...args: any[]) => any
 	}
 
-	let { funcDesc, selected, lang }: Props = $props();
+	let { funcDesc, selected, lang, onclick = undefined }: Props = $props()
 	const dispatch = createEventDispatcher()
 
 	const onKeyDown = (e: KeyboardEvent) => {
 		if (selected && e.key === 'Enter') {
 			e.preventDefault()
 			dispatch('click')
+			onclick?.()
 		}
 	}
 </script>
diff --git a/frontend/src/lib/components/flows/header/FlowPreviewButtons.svelte b/frontend/src/lib/components/flows/header/FlowPreviewButtons.svelte
index 206c9f199b..fd1790b164 100644
--- a/frontend/src/lib/components/flows/header/FlowPreviewButtons.svelte
+++ b/frontend/src/lib/components/flows/header/FlowPreviewButtons.svelte
@@ -18,6 +18,7 @@
 		onJobDone?: () => void
 		localModuleStates?: Record<string, GraphModuleState>
 		suspendStatus: StateStore<Record<string, { job: Job; nb: number }>>
+		onopenTriggers?: (...args: any[]) => any
 	}
 
 	let {
@@ -25,7 +26,8 @@
 		onRunPreview,
 		onJobDone,
 		localModuleStates = $bindable({}),
-		suspendStatus
+		suspendStatus,
+		onopenTriggers = undefined
 	}: Props = $props()
 
 	const { selectionManager } = getContext<FlowEditorContext>('FlowEditorContext')
@@ -187,6 +189,7 @@
 			on:openTriggers={(e) => {
 				previewOpen = false
 				dispatch('openTriggers', e.detail)
+				onopenTriggers?.(e.detail)
 			}}
 			bind:preventEscape
 			{onRunPreview}
diff --git a/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte b/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte
index 25d2591f73..bc40142cdd 100644
--- a/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte
+++ b/frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte
@@ -15,11 +15,13 @@
 	let {
 		disableAi,
 		small,
-		diffManager
+		diffManager,
+		ongenerateStep = undefined
 	}: {
 		small: boolean
 		disableAi?: boolean
 		diffManager?: FlowDiffManager
+		ongenerateStep?: (...args: any[]) => any
 	} = $props()
 
 	const dispatch = createEventDispatcher<{
@@ -53,6 +55,11 @@
 				instructions: inlineScript.instructions,
 				lang: inlineScript.language
 			})
+			ongenerateStep?.({
+				moduleId: 'failure',
+				instructions: inlineScript.instructions,
+				lang: inlineScript.language
+			})
 		}
 
 		selectionManager.selectId('failure')
diff --git a/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte b/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
index 495ad1fe42..efd4f892db 100644
--- a/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
+++ b/frontend/src/lib/components/flows/map/FlowModuleSchemaItem.svelte
@@ -89,6 +89,10 @@
 		isOwner?: boolean
 		enableTestRun?: boolean
 		maximizeSubflow?: () => void
+		onchangeId?: (...args: any[]) => any
+		onpointerdown?: (...args: any[]) => any
+		onmove?: (...args: any[]) => any
+		ondelete?: (...args: any[]) => any
 	}
 
 	let {
@@ -123,7 +127,11 @@
 		onEditInput,
 		flowJob,
 		enableTestRun = false,
-		maximizeSubflow = undefined
+		maximizeSubflow = undefined,
+		onchangeId = undefined,
+		onpointerdown = undefined,
+		onmove = undefined,
+		ondelete = undefined
 	}: Props = $props()
 
 	// AI action colors take priority over execution state
@@ -217,6 +225,7 @@
 					bind:value={newId}
 					onSave={({ oldId, newId }) => {
 						dispatch('changeId', { id: oldId, newId, deps: getDeps?.dependents ?? {} })
+						onchangeId?.({ id: oldId, newId, deps: getDeps?.dependents ?? {} })
 						editId = false
 					}}
 					onClose={() => {
@@ -282,7 +291,9 @@
 		style="width: 275px; height: 34px;"
 		onmouseenter={() => (hover = true)}
 		onmouseleave={() => (hover = false)}
-		onpointerdown={stopPropagation(preventDefault((e) => dispatch('pointerdown', e)))}
+		onpointerdown={stopPropagation(
+			preventDefault((e) => (dispatch('pointerdown', e), onpointerdown?.(e)))
+		)}
 	>
 		{#if id}
 			<DiffActionBar moduleId={id} {moduleAction} {diffManager} {flowStore} />
@@ -493,7 +504,7 @@
 							'shadow-md rounded-md',
 							'group-hover:block'
 						)}
-						onclick={stopPropagation(preventDefault((event) => dispatch('move')))}
+						onclick={stopPropagation(preventDefault((event) => (dispatch('move'), onmove?.())))}
 						title="Move"
 					>
 						<Move size={12} />
@@ -514,7 +525,12 @@
 					)}
 					title="Delete"
 					onclick={stopPropagation(
-						preventDefault((event) => dispatch('delete', { id, type: modType }))
+						preventDefault(
+							(event) => (
+								dispatch('delete', { id, type: modType }),
+								ondelete?.({ id, type: modType })
+							)
+						)
 					)}
 					onpointerdown={stopPropagation(preventDefault(() => {}))}
 				>
diff --git a/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte b/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
index 520fd9cd57..f080598066 100644
--- a/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
+++ b/frontend/src/lib/components/flows/map/FlowModuleSchemaMap.svelte
@@ -80,6 +80,8 @@
 		suspendStatus?: StateStore<Record<string, { job: Job; nb: number }>>
 		onDelete?: (id: string) => void
 		flowHasChanged?: boolean
+		ongenerateStep?: (...args: any[]) => any
+		onchange?: (...args: any[]) => any
 	}
 
 	let {
@@ -109,7 +111,9 @@
 		showJobStatus = false,
 		suspendStatus = $bindable({ val: {} }),
 		onDelete,
-		flowHasChanged
+		flowHasChanged,
+		ongenerateStep = undefined,
+		onchange = undefined
 	}: Props = $props()
 
 	const { customUi, selectionManager, moving, history, flowStateStore, flowStore, pathStore } =
@@ -542,6 +546,11 @@
 										lang: detail.inlineScript?.language,
 										instructions: detail.inlineScript?.instructions
 									})
+									ongenerateStep?.({
+										moduleId: 'preprocessor',
+										lang: detail.inlineScript?.language,
+										instructions: detail.inlineScript?.instructions
+									})
 								}
 							} else {
 								const index = (detail.agentId ? targetModules?.length : detail.index) ?? 0
@@ -569,6 +578,11 @@
 										lang: detail.inlineScript?.language,
 										instructions: detail.inlineScript?.instructions
 									})
+									ongenerateStep?.({
+										moduleId: id,
+										lang: detail.inlineScript?.language,
+										instructions: detail.inlineScript?.instructions
+									})
 								}
 								if (detail.kind == 'trigger') {
 									await insertNewModuleAtIndex(
@@ -596,6 +610,7 @@
 						}
 						refreshStateStore(flowStore)
 						dispatch('change')
+						onchange?.()
 					}
 				}
 			}}
diff --git a/frontend/src/lib/components/flows/map/InsertModuleInner.svelte b/frontend/src/lib/components/flows/map/InsertModuleInner.svelte
index 71d87b5a35..6bfa37cbb2 100644
--- a/frontend/src/lib/components/flows/map/InsertModuleInner.svelte
+++ b/frontend/src/lib/components/flows/map/InsertModuleInner.svelte
@@ -19,6 +19,11 @@
 		kind?: 'script' | 'trigger' | 'preprocessor' | 'failure'
 		allowTrigger?: boolean
 		toolMode?: boolean
+		onclose?: (...args: any[]) => any
+		onpickMcpTool?: (...args: any[]) => any
+		onpickWebsearchTool?: (...args: any[]) => any
+		onpickAiAgentTool?: (...args: any[]) => any
+		onnew?: (...args: any[]) => any
 	}
 
 	let {
@@ -27,7 +32,12 @@
 		disableAi = false,
 		kind = 'script',
 		allowTrigger = true,
-		toolMode = false
+		toolMode = false,
+		onclose = undefined,
+		onpickMcpTool = undefined,
+		onpickWebsearchTool = undefined,
+		onpickAiAgentTool = undefined,
+		onnew = undefined
 	}: Props = $props()
 
 	let customUi: undefined | FlowBuilderWhitelabelCustomUi = getContext('customUi')
@@ -57,7 +67,7 @@
 >
 	<div class="flex flex-row items-center gap-2">
 		<StepGenQuick
-			on:escape={() => dispatch('close')}
+			on:escape={() => (dispatch('close'), onclose?.())}
 			{disableAi}
 			on:insert
 			bind:funcDesc
@@ -91,21 +101,27 @@
 						label="MCP"
 						onSelect={() => {
 							dispatch('pickMcpTool')
+							onpickMcpTool?.()
 							dispatch('close')
+							onclose?.()
 						}}
 					/>
 					<TopLevelNode
 						label="Web Search"
 						onSelect={() => {
 							dispatch('pickWebsearchTool')
+							onpickWebsearchTool?.()
 							dispatch('close')
+							onclose?.()
 						}}
 					/>
 					<TopLevelNode
 						label="AI Agent"
 						onSelect={() => {
 							dispatch('pickAiAgentTool')
+							onpickAiAgentTool?.()
 							dispatch('close')
+							onclose?.()
 						}}
 					/>
 				{:else}
@@ -148,28 +164,36 @@
 						label="For loop"
 						onSelect={() => {
 							dispatch('close')
+							onclose?.()
 							dispatch('new', { kind: 'forloop' })
+							onnew?.({ kind: 'forloop' })
 						}}
 					/>
 					<TopLevelNode
 						label="While loop"
 						onSelect={() => {
 							dispatch('close')
+							onclose?.()
 							dispatch('new', { kind: 'whileloop' })
+							onnew?.({ kind: 'whileloop' })
 						}}
 					/>
 					<TopLevelNode
 						label="Branch to one"
 						onSelect={() => {
 							dispatch('close')
+							onclose?.()
 							dispatch('new', { kind: 'branchone' })
+							onnew?.({ kind: 'branchone' })
 						}}
 					/>
 					<TopLevelNode
 						label="Branch to all"
 						onSelect={() => {
 							dispatch('close')
+							onclose?.()
 							dispatch('new', { kind: 'branchall' })
+							onnew?.({ kind: 'branchall' })
 						}}
 					/>
 					{#if customUi?.aiAgent != false}
@@ -177,7 +201,9 @@
 							label="AI Agent"
 							onSelect={() => {
 								dispatch('close')
+								onclose?.()
 								dispatch('new', { kind: 'aiagent' })
+								onnew?.({ kind: 'aiagent' })
 							}}
 						/>
 					{/if}
@@ -195,6 +221,7 @@
 			bind:owners
 			on:close={() => {
 				dispatch('close')
+				onclose?.()
 			}}
 			on:new
 			on:pickScript
diff --git a/frontend/src/lib/components/flows/map/MapItem.svelte b/frontend/src/lib/components/flows/map/MapItem.svelte
index 0db258dda0..bf966cb287 100644
--- a/frontend/src/lib/components/flows/map/MapItem.svelte
+++ b/frontend/src/lib/components/flows/map/MapItem.svelte
@@ -48,6 +48,7 @@
 		flowJob?: Job | undefined
 		isOwner?: boolean
 		maximizeSubflow?: () => void
+		onmove?: (...args: any[]) => any
 	}
 
 	let {
@@ -69,7 +70,8 @@
 		onEditInput,
 		flowJob,
 		isOwner = false,
-		maximizeSubflow
+		maximizeSubflow,
+		onmove = undefined
 	}: Props = $props()
 
 	const { selectionManager } = getGraphContext()
@@ -112,8 +114,11 @@
 	<div class="relative">
 		{#if moving == mod.id}
 			<div class="absolute z-10 right-20 top-0.5 center-center">
-				<Button variant="accent" on:click={() => dispatch('move')} size="xs" destructive
-					>Cancel move</Button
+				<Button
+					variant="accent"
+					on:click={() => (dispatch('move'), onmove?.())}
+					size="xs"
+					destructive>Cancel move</Button
 				>
 			</div>
 		{/if}
diff --git a/frontend/src/lib/components/flows/map/VirtualItemWrapper.svelte b/frontend/src/lib/components/flows/map/VirtualItemWrapper.svelte
index 798116b47d..7c796e6509 100644
--- a/frontend/src/lib/components/flows/map/VirtualItemWrapper.svelte
+++ b/frontend/src/lib/components/flows/map/VirtualItemWrapper.svelte
@@ -15,6 +15,7 @@
 		className?: string
 		previewButton?: import('svelte').Snippet
 		colorClasses: FlowNodeColorClasses
+		onselect?: (...args: any[]) => any
 	}
 
 	let {
@@ -25,7 +26,8 @@
 		children,
 		className,
 		previewButton,
-		colorClasses
+		colorClasses,
+		onselect = undefined
 	}: Props = $props()
 
 	const dispatch = createEventDispatcher<{
@@ -55,6 +57,7 @@
 		onpointerdown={() => {
 			if (selectable) {
 				dispatch('select', id || label || '')
+				onselect?.(id || label || '')
 			}
 		}}
 		onmouseenter={() => {
diff --git a/frontend/src/lib/components/flows/pickers/FlowScriptPickerQuick.svelte b/frontend/src/lib/components/flows/pickers/FlowScriptPickerQuick.svelte
index e93512d456..f7b81f4073 100644
--- a/frontend/src/lib/components/flows/pickers/FlowScriptPickerQuick.svelte
+++ b/frontend/src/lib/components/flows/pickers/FlowScriptPickerQuick.svelte
@@ -6,11 +6,12 @@
 	import { createEventDispatcher } from 'svelte'
 
 	interface Props {
-		label: string;
-		lang?: SupportedLanguage | 'docker' | 'javascript' | undefined;
-		selected?: boolean;
-		eeRestricted: boolean;
-		enterpriseLangs?: string[];
+		label: string
+		lang?: SupportedLanguage | 'docker' | 'javascript' | undefined
+		selected?: boolean
+		eeRestricted: boolean
+		enterpriseLangs?: string[]
+		onclick?: (...args: any[]) => any
 	}
 
 	let {
@@ -18,8 +19,9 @@
 		lang = undefined,
 		selected = false,
 		eeRestricted,
-		enterpriseLangs = []
-	}: Props = $props();
+		enterpriseLangs = [],
+		onclick = undefined
+	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
 	function handleKeydown(event: KeyboardEvent & { currentTarget: EventTarget & Window }) {
@@ -37,6 +39,7 @@
 			return
 		}
 		dispatch('click')
+		onclick?.()
 	}
 </script>
 
diff --git a/frontend/src/lib/components/flows/pickers/FlowToplevelNode.svelte b/frontend/src/lib/components/flows/pickers/FlowToplevelNode.svelte
index 1b0e6ae58a..5a969aaedd 100644
--- a/frontend/src/lib/components/flows/pickers/FlowToplevelNode.svelte
+++ b/frontend/src/lib/components/flows/pickers/FlowToplevelNode.svelte
@@ -3,11 +3,12 @@
 	import TopLevelNode from './TopLevelNode.svelte'
 
 	interface Props {
-		label: string;
-		selected?: boolean;
+		label: string
+		selected?: boolean
+		onclick?: (...args: any[]) => any
 	}
 
-	let { label, selected = false }: Props = $props();
+	let { label, selected = false, onclick = undefined }: Props = $props()
 	const dispatch = createEventDispatcher()
 	function handleKeydown(event: KeyboardEvent & { currentTarget: EventTarget & Window }) {
 		if (selected && event.key === 'Enter') {
@@ -18,6 +19,7 @@
 
 	function click() {
 		dispatch('click')
+		onclick?.()
 	}
 </script>
 
diff --git a/frontend/src/lib/components/flows/pickers/PickHubApp.svelte b/frontend/src/lib/components/flows/pickers/PickHubApp.svelte
index 7f534a924a..079c66cb5b 100644
--- a/frontend/src/lib/components/flows/pickers/PickHubApp.svelte
+++ b/frontend/src/lib/components/flows/pickers/PickHubApp.svelte
@@ -13,9 +13,16 @@
 		syncQuery?: boolean
 		children?: import('svelte').Snippet
 		size?: ButtonType.UnifiedSize
+		onpick?: (...args: any[]) => any
 	}
 
-	let { filter = $bindable(''), syncQuery = false, children, size = 'md' }: Props = $props()
+	let {
+		filter = $bindable(''),
+		syncQuery = false,
+		children,
+		size = 'md',
+		onpick = undefined
+	}: Props = $props()
 
 	type Item = { apps: string[]; summary: string; path: string }
 	let hubApps: any[] | undefined = $state(undefined)
@@ -63,7 +70,7 @@
 				<li class="flex flex-row w-full">
 					<button
 						class="p-4 gap-4 flex flex-row grow justify-between hover:bg-surface-hover transition-all items-center"
-						onclick={() => dispatch('pick', item)}
+						onclick={() => (dispatch('pick', item), onpick?.(item))}
 					>
 						<div class="flex items-center gap-4">
 							<RowIcon kind="app" />
diff --git a/frontend/src/lib/components/flows/pickers/PickHubFlow.svelte b/frontend/src/lib/components/flows/pickers/PickHubFlow.svelte
index 2ab12aea36..d4f0761d89 100644
--- a/frontend/src/lib/components/flows/pickers/PickHubFlow.svelte
+++ b/frontend/src/lib/components/flows/pickers/PickHubFlow.svelte
@@ -13,9 +13,16 @@
 		syncQuery?: boolean
 		children?: import('svelte').Snippet
 		size?: ButtonType.UnifiedSize
+		onpick?: (...args: any[]) => any
 	}
 
-	let { filter = $bindable(''), syncQuery = false, children, size = 'md' }: Props = $props()
+	let {
+		filter = $bindable(''),
+		syncQuery = false,
+		children,
+		size = 'md',
+		onpick = undefined
+	}: Props = $props()
 
 	type Item = { apps: string[]; summary: string; path: string }
 	let hubFlows: any[] | undefined = $state(undefined)
@@ -63,7 +70,7 @@
 				<li class="flex flex-row w-full">
 					<button
 						class="p-4 gap-4 flex flex-row grow justify-between hover:bg-surface-hover transition-all items-center"
-						onclick={() => dispatch('pick', item)}
+						onclick={() => (dispatch('pick', item), onpick?.(item))}
 					>
 						<div class="flex items-center gap-4">
 							<RowIcon kind="flow" />
diff --git a/frontend/src/lib/components/flows/pickers/PickHubScript.svelte b/frontend/src/lib/components/flows/pickers/PickHubScript.svelte
index b5ba87327e..4fc97016cc 100644
--- a/frontend/src/lib/components/flows/pickers/PickHubScript.svelte
+++ b/frontend/src/lib/components/flows/pickers/PickHubScript.svelte
@@ -15,6 +15,7 @@
 		syncQuery?: boolean
 		children?: import('svelte').Snippet
 		size?: ButtonType.UnifiedSize
+		onpick?: (...args: any[]) => any
 	}
 
 	let {
@@ -22,7 +23,8 @@
 		filter = $bindable(''),
 		syncQuery = false,
 		children,
-		size = 'md'
+		size = 'md',
+		onpick = undefined
 	}: Props = $props()
 
 	let loading = $state(false)
@@ -126,6 +128,7 @@
 
 		// Dispatch the event to continue with the selection
 		dispatch('pick', item)
+		onpick?.(item)
 	}
 
 	$effect(() => {
diff --git a/frontend/src/lib/components/flows/pickers/PickHubScriptQuick.svelte b/frontend/src/lib/components/flows/pickers/PickHubScriptQuick.svelte
index 2091f76340..0fe6e4872c 100644
--- a/frontend/src/lib/components/flows/pickers/PickHubScriptQuick.svelte
+++ b/frontend/src/lib/components/flows/pickers/PickHubScriptQuick.svelte
@@ -70,6 +70,7 @@
 		displayPath?: boolean
 		apps?: string[]
 		refreshCount?: number
+		onpickScript?: (...args: any[]) => any
 	}
 
 	let {
@@ -81,7 +82,8 @@
 		items = $bindable([]),
 		displayPath = false,
 		apps = $bindable([]),
-		refreshCount = 0
+		refreshCount = 0,
+		onpickScript = undefined
 	}: Props = $props()
 
 	let allApps: string[] = $state([])
@@ -151,6 +153,7 @@
 
 		// Dispatch the event to continue with the selection
 		dispatch('pickScript', item)
+		onpickScript?.(item)
 	}
 
 	function onKeyDown(e: KeyboardEvent) {
diff --git a/frontend/src/lib/components/flows/pickers/WorkspaceScriptPicker.svelte b/frontend/src/lib/components/flows/pickers/WorkspaceScriptPicker.svelte
index ce1a7e63e0..cfa74cc73b 100644
--- a/frontend/src/lib/components/flows/pickers/WorkspaceScriptPicker.svelte
+++ b/frontend/src/lib/components/flows/pickers/WorkspaceScriptPicker.svelte
@@ -27,6 +27,7 @@
 		displayLock?: boolean
 		filter?: string
 		children?: import('svelte').Snippet
+		onpick?: (...args: any[]) => any
 	}
 
 	let {
@@ -34,7 +35,8 @@
 		isTemplate = undefined,
 		displayLock = false,
 		filter = $bindable(''),
-		children
+		children,
+		onpick = undefined
 	}: Props = $props()
 
 	async function loadItems(): Promise<void> {
@@ -128,6 +130,7 @@
 						class="p-4 gap-1 flex flex-row grow hover:bg-surface-hover bg-surface transition-all text-primary"
 						onclick={() => {
 							dispatch('pick', { path, hash: lockHash ? hash : undefined })
+							onpick?.({ path, hash: lockHash ? hash : undefined })
 						}}
 					>
 						<div class="flex flex-col">
diff --git a/frontend/src/lib/components/flows/pickers/WorkspaceScriptPickerQuick.svelte b/frontend/src/lib/components/flows/pickers/WorkspaceScriptPickerQuick.svelte
index 74daeaada7..ee58f7ad76 100644
--- a/frontend/src/lib/components/flows/pickers/WorkspaceScriptPickerQuick.svelte
+++ b/frontend/src/lib/components/flows/pickers/WorkspaceScriptPickerQuick.svelte
@@ -77,6 +77,8 @@
 			| { kind: 'inline' | 'owner' | 'integrations'; name: string | undefined }
 			| undefined
 		refreshCount?: number
+		onpickFlow?: (...args: any[]) => any
+		onpickScript?: (...args: any[]) => any
 	}
 
 	let {
@@ -88,7 +90,9 @@
 		filter = '',
 		owners = $bindable([]),
 		ownerFilter = $bindable(undefined),
-		refreshCount = 0
+		refreshCount = 0,
+		onpickFlow = undefined,
+		onpickScript = undefined
 	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
@@ -106,8 +110,10 @@
 			let item = filteredWithOwner[selected]
 			if (kind == 'flow') {
 				dispatch('pickFlow', { path: item.path })
+				onpickFlow?.({ path: item.path })
 			} else {
 				dispatch('pickScript', { path: item.path, hash: lockHash ? item.hash : undefined, kind })
+				onpickScript?.({ path: item.path, hash: lockHash ? item.hash : undefined, kind })
 			}
 		}
 	}
@@ -177,8 +183,10 @@
 						onClick={() => {
 							if (kind == 'flow') {
 								dispatch('pickFlow', { path: path })
+								onpickFlow?.({ path: path })
 							} else {
 								dispatch('pickScript', { path: path, hash: lockHash ? hash : undefined, kind })
+								onpickScript?.({ path: path, hash: lockHash ? hash : undefined, kind })
 							}
 						}}
 						startIcon={{
diff --git a/frontend/src/lib/components/flows/propPicker/PropPickerWrapper.svelte b/frontend/src/lib/components/flows/propPicker/PropPickerWrapper.svelte
index 6910fabbb5..e2d7f04650 100644
--- a/frontend/src/lib/components/flows/propPicker/PropPickerWrapper.svelte
+++ b/frontend/src/lib/components/flows/propPicker/PropPickerWrapper.svelte
@@ -41,6 +41,7 @@
 		paneClass?: string
 		noFlowPlugConnect?: boolean
 		children?: import('svelte').Snippet
+		onselect?: (...args: any[]) => any
 	}
 
 	let {
@@ -54,7 +55,8 @@
 		noPadding = false,
 		paneClass = '',
 		noFlowPlugConnect = false,
-		children
+		children,
+		onselect = undefined
 	}: Props = $props()
 
 	const propPickerConfig: Writable<PropPickerConfig | undefined> = writable<
@@ -145,6 +147,7 @@
 							allowCopy={!notSelectable && !$propPickerConfig}
 							on:select={({ detail }) => {
 								dispatch('select', detail)
+								onselect?.(detail)
 								if ($propPickerConfig?.onSelect(detail)) {
 									$propPickerConfig?.clearFocus()
 								}
@@ -163,6 +166,7 @@
 							on:select={({ detail }) => {
 								// console.log('selecting', detail)
 								dispatch('select', detail)
+								onselect?.(detail)
 								if ($propPickerConfig?.onSelect(detail)) {
 									$propPickerConfig?.clearFocus()
 								}
diff --git a/frontend/src/lib/components/flows/propPicker/StepHistory.svelte b/frontend/src/lib/components/flows/propPicker/StepHistory.svelte
index 17b5fd1e24..09cb089883 100644
--- a/frontend/src/lib/components/flows/propPicker/StepHistory.svelte
+++ b/frontend/src/lib/components/flows/propPicker/StepHistory.svelte
@@ -26,6 +26,7 @@
 		path?: string
 		staticInputs?: undefined | StepHistoryData[]
 		noHistory?: 'isLoop' | 'isInsideLoop' | undefined
+		onselect?: (...args: any[]) => any
 	}
 
 	let {
@@ -36,7 +37,8 @@
 		mockEnabled = false,
 		path = '',
 		staticInputs = undefined,
-		noHistory = undefined
+		noHistory = undefined,
+		onselect = undefined
 	}: Props = $props()
 
 	const { pathStore } = getContext<FlowEditorContext>('FlowEditorContext') ?? {}
@@ -100,6 +102,7 @@
 			}
 			selected = 'extraRow'
 			dispatch('select', 'mock')
+			onselect?.('mock')
 			return
 		}
 
@@ -109,11 +112,13 @@
 		}
 		selected = e.detail.id
 		dispatch('select', { ...e.detail })
+		onselect?.({ ...e.detail })
 	}
 
 	export function deselect() {
 		selected = undefined
 		dispatch('select', undefined)
+		onselect?.(undefined)
 	}
 </script>
 
diff --git a/frontend/src/lib/components/graph/renderers/triggers/TriggersWrapper.svelte b/frontend/src/lib/components/graph/renderers/triggers/TriggersWrapper.svelte
index 2ffa6a8d49..ba2bdbec43 100644
--- a/frontend/src/lib/components/graph/renderers/triggers/TriggersWrapper.svelte
+++ b/frontend/src/lib/components/graph/renderers/triggers/TriggersWrapper.svelte
@@ -21,6 +21,8 @@
 		colorClasses: FlowNodeColorClasses
 		onSelect?: (triggerIndex: number) => void
 		onAddDraftTrigger?: (type: TriggerType) => void
+		onnew?: (...args: any[]) => any
+		onpickScript?: (...args: any[]) => any
 	}
 
 	let {
@@ -32,7 +34,9 @@
 		showDraft,
 		onSelect,
 		colorClasses,
-		onAddDraftTrigger
+		onAddDraftTrigger,
+		onnew = undefined,
+		onpickScript = undefined
 	}: Props = $props()
 
 	let showTriggerScriptPicker = $state(false)
@@ -110,10 +114,12 @@
 				on:new={(e) => {
 					showTriggerScriptPicker = false
 					dispatch('new', e.detail)
+					onnew?.(e.detail)
 				}}
 				on:pickScript={(e) => {
 					showTriggerScriptPicker = false
 					dispatch('pickScript', e.detail)
+					onpickScript?.(e.detail)
 				}}
 				kind="trigger"
 			/>
diff --git a/frontend/src/lib/components/home/Item.svelte b/frontend/src/lib/components/home/Item.svelte
index b4a57175cd..aba0974bbd 100644
--- a/frontend/src/lib/components/home/Item.svelte
+++ b/frontend/src/lib/components/home/Item.svelte
@@ -24,16 +24,29 @@
 		depth?: number
 		showCode: (path: string, summary: string) => void
 		showEditButton?: boolean
+		onscriptChanged?: (...args: any[]) => any
+		onflowChanged?: (...args: any[]) => any
+		onappChanged?: (...args: any[]) => any
+		onreload?: (...args: any[]) => any
 	}
 
-	let { item, depth = 0, showCode, showEditButton = true }: Props = $props()
+	let {
+		item,
+		depth = 0,
+		showCode,
+		showEditButton = true,
+		onscriptChanged = undefined,
+		onflowChanged = undefined,
+		onappChanged = undefined,
+		onreload = undefined
+	}: Props = $props()
 </script>
 
 {#if item.type == 'script'}
 	<ScriptRow
 		bind:deleteConfirmedCallback
 		marked={item.marked}
-		on:change={() => dispatch('scriptChanged')}
+		on:change={() => (dispatch('scriptChanged'), onscriptChanged?.())}
 		script={item}
 		errorHandlerMuted={item.ws_error_handler_muted === undefined ||
 		item.ws_error_handler_muted === null
@@ -51,7 +64,7 @@
 	<FlowRow
 		bind:deleteConfirmedCallback
 		marked={item.marked}
-		on:change={() => dispatch('flowChanged')}
+		on:change={() => (dispatch('flowChanged'), onflowChanged?.())}
 		flow={item}
 		errorHandlerMuted={item.ws_error_handler_muted === undefined ||
 		item.ws_error_handler_muted === null
@@ -68,7 +81,7 @@
 	<AppRow
 		bind:deleteConfirmedCallback
 		marked={item.marked}
-		on:change={() => dispatch('appChanged')}
+		on:change={() => (dispatch('appChanged'), onappChanged?.())}
 		app={item}
 		{moveDrawer}
 		{shareModal}
@@ -123,6 +136,7 @@
 		bind:this={shareModal}
 		on:change={() => {
 			dispatch('reload')
+			onreload?.()
 		}}
 	/>
 
@@ -131,6 +145,7 @@
 		bind:this={moveDrawer}
 		on:update={() => {
 			dispatch('reload')
+			onreload?.()
 		}}
 	/>
 {/if}
diff --git a/frontend/src/lib/components/home/ListFiltersQuick.svelte b/frontend/src/lib/components/home/ListFiltersQuick.svelte
index ed80815700..0a48453964 100644
--- a/frontend/src/lib/components/home/ListFiltersQuick.svelte
+++ b/frontend/src/lib/components/home/ListFiltersQuick.svelte
@@ -4,16 +4,19 @@
 	import { createEventDispatcher } from 'svelte'
 	import { Button } from '../common'
 
-
 	interface Props {
-		filters: string[];
-		selectedFilter?: 
-		| { kind: 'owner' | 'integrations'; name: string | undefined }
-		| undefined;
-		resourceType?: boolean;
+		filters: string[]
+		selectedFilter?: { kind: 'owner' | 'integrations'; name: string | undefined } | undefined
+		resourceType?: boolean
+		onselected?: (...args: any[]) => any
 	}
 
-	let { filters, selectedFilter = $bindable(undefined), resourceType = false }: Props = $props();
+	let {
+		filters,
+		selectedFilter = $bindable(undefined),
+		resourceType = false,
+		onselected = undefined
+	}: Props = $props()
 
 	function getIconComponent(name: string, resourceType: boolean) {
 		if (resourceType) {
@@ -32,7 +35,9 @@
 	}
 
 	const dispatch = createEventDispatcher()
-	let selectedAppFilter = $derived(selectedFilter?.kind === 'integrations' ? selectedFilter?.name : undefined)
+	let selectedAppFilter = $derived(
+		selectedFilter?.kind === 'integrations' ? selectedFilter?.name : undefined
+	)
 </script>
 
 {#if Array.isArray(filters) && filters.length > 0}
@@ -45,6 +50,7 @@
 					selectedFilter =
 						selectedAppFilter == filter ? undefined : { kind: 'integrations', name: filter }
 					dispatch('selected')
+					onselected?.()
 				}}
 				variant="subtle"
 				startIcon={icon}
diff --git a/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte b/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
index b22e1ceeac..aacc8c3d91 100644
--- a/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
+++ b/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
@@ -30,6 +30,7 @@
 		connecting?: boolean
 		metaData?: Snippet<[any]>
 		editKey?: Snippet<[any]>
+		onselect?: (...args: any[]) => any
 	}
 
 	let {
@@ -46,7 +47,8 @@
 		expandedEvenOnLevel0 = undefined,
 		connecting = false,
 		metaData,
-		editKey
+		editKey,
+		onselect = undefined
 	}: Props = $props()
 
 	let jsonFiltered = $state(json)
@@ -118,6 +120,7 @@
 			}
 		}
 		dispatch('select', fullKey)
+		onselect?.(fullKey)
 	}
 
 	function clearSearch() {
diff --git a/frontend/src/lib/components/raw_apps/RawAppEditorHeader.svelte b/frontend/src/lib/components/raw_apps/RawAppEditorHeader.svelte
index 7594567440..abfd634d80 100644
--- a/frontend/src/lib/components/raw_apps/RawAppEditorHeader.svelte
+++ b/frontend/src/lib/components/raw_apps/RawAppEditorHeader.svelte
@@ -104,6 +104,7 @@
 		canRedo?: boolean
 		onUndo?: () => void
 		onRedo?: () => void
+		onsavedNewAppPath?: (...args: any[]) => any
 	}
 
 	let {
@@ -124,7 +125,8 @@
 		canUndo = false,
 		canRedo = false,
 		onUndo = undefined,
-		onRedo = undefined
+		onRedo = undefined,
+		onsavedNewAppPath = undefined
 	}: Props = $props()
 
 	let newEditedPath = $state('')
@@ -236,6 +238,7 @@
 				console.error('error interacting with local storage', e)
 			}
 			dispatch('savedNewAppPath', path)
+			onsavedNewAppPath?.(path)
 		} catch (e) {
 			sendUserToast('Error creating app', e)
 		}
@@ -351,6 +354,7 @@
 				console.error('error interacting with local storage', e)
 			}
 			dispatch('savedNewAppPath', npath)
+			onsavedNewAppPath?.(npath)
 		}
 	}
 
@@ -428,6 +432,7 @@
 
 			draftDrawerOpen = false
 			dispatch('savedNewAppPath', newEditedPath)
+			onsavedNewAppPath?.(newEditedPath)
 		} catch (e) {
 			sendUserToast('Error saving initial draft', e)
 		}
@@ -535,6 +540,7 @@
 			loading.saveDraft = false
 			if (newApp || savedApp.draft_only) {
 				dispatch('savedNewAppPath', newEditedPath || path)
+				onsavedNewAppPath?.(newEditedPath || path)
 			}
 		} catch (e) {
 			loading.saveDraft = false
diff --git a/frontend/src/lib/components/raw_apps/RawAppInlineScriptEditor.svelte b/frontend/src/lib/components/raw_apps/RawAppInlineScriptEditor.svelte
index 67175f93b9..635589f5f5 100644
--- a/frontend/src/lib/components/raw_apps/RawAppInlineScriptEditor.svelte
+++ b/frontend/src/lib/components/raw_apps/RawAppInlineScriptEditor.svelte
@@ -60,6 +60,7 @@
 				endColumn: number
 			} | null
 		) => void
+		ondelete?: (...args: any[]) => any
 	}
 
 	let {
@@ -71,7 +72,8 @@
 		onRun,
 		editor = $bindable(undefined),
 		lastDeployedCode,
-		onSelectionChange
+		onSelectionChange,
+		ondelete = undefined
 	}: Props = $props()
 	let diffEditor = $state() as DiffEditor | undefined
 	let validCode = $state(true)
@@ -617,7 +619,7 @@
 					aria-label="Clear script"
 					destructive
 					unifiedSize="sm"
-					on:click={() => dispatch('delete')}
+					on:click={() => (dispatch('delete'), ondelete?.())}
 					endIcon={{ icon: Trash2 }}
 					iconOnly
 				/>
diff --git a/frontend/src/lib/components/raw_apps/RawAppInlineScriptRunnable.svelte b/frontend/src/lib/components/raw_apps/RawAppInlineScriptRunnable.svelte
index 3f8b6b2ffc..1d4660cfa2 100644
--- a/frontend/src/lib/components/raw_apps/RawAppInlineScriptRunnable.svelte
+++ b/frontend/src/lib/components/raw_apps/RawAppInlineScriptRunnable.svelte
@@ -47,9 +47,16 @@
 				endColumn: number
 			} | null
 		) => void
+		oncreateScriptFromInlineScript?: (...args: any[]) => any
 	}
 
-	let { runnable = $bindable(), id, appPath, onSelectionChange }: Props = $props()
+	let {
+		runnable = $bindable(),
+		id,
+		appPath,
+		onSelectionChange,
+		oncreateScriptFromInlineScript = undefined
+	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
 
@@ -188,7 +195,10 @@
 			{#if isRunnableByName(runnable)}
 				<RawAppInlineScriptEditor
 					bind:this={inlineScriptEditor}
-					on:createScriptFromInlineScript={() => dispatch('createScriptFromInlineScript', runnable)}
+					on:createScriptFromInlineScript={() => (
+						dispatch('createScriptFromInlineScript', runnable),
+						oncreateScriptFromInlineScript?.(runnable)
+					)}
 					{id}
 					bind:inlineScript={runnable.inlineScript}
 					bind:name={runnable.name}
diff --git a/frontend/src/lib/components/runs/JobRunsPreview.svelte b/frontend/src/lib/components/runs/JobRunsPreview.svelte
index 637848c83c..1e19323ab3 100644
--- a/frontend/src/lib/components/runs/JobRunsPreview.svelte
+++ b/frontend/src/lib/components/runs/JobRunsPreview.svelte
@@ -20,9 +20,16 @@
 	interface Props {
 		id: string
 		workspace: string | undefined
+		onfilterByConcurrencyKey?: (...args: any[]) => any
+		onfilterByWorker?: (...args: any[]) => any
 	}
 
-	let { id, workspace }: Props = $props()
+	let {
+		id,
+		workspace,
+		onfilterByConcurrencyKey = undefined,
+		onfilterByWorker = undefined
+	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
 
@@ -52,10 +59,12 @@
 
 	function handleFilterByConcurrencyKey(key: string) {
 		dispatch('filterByConcurrencyKey', key)
+		onfilterByConcurrencyKey?.(key)
 	}
 
 	function handleFilterByWorker(worker: string) {
 		dispatch('filterByWorker', worker)
+		onfilterByWorker?.(worker)
 	}
 	$effect(() => {
 		if (currentJob?.id == id) {
diff --git a/frontend/src/lib/components/runs/RunRow.svelte b/frontend/src/lib/components/runs/RunRow.svelte
index 3a14c71111..478e99e6d4 100644
--- a/frontend/src/lib/components/runs/RunRow.svelte
+++ b/frontend/src/lib/components/runs/RunRow.svelte
@@ -38,6 +38,12 @@
 		showTag?: boolean
 		activeLabel: string | null
 		manualSelectionMode?: undefined | 'cancel' | 'rerun'
+		onselect?: (...args: any[]) => any
+		onfilterByPath?: (...args: any[]) => any
+		onfilterByFolder?: (...args: any[]) => any
+		onfilterByLabel?: (...args: any[]) => any
+		onfilterBySchedule?: (...args: any[]) => any
+		onfilterByUser?: (...args: any[]) => any
 	}
 
 	let {
@@ -47,7 +53,13 @@
 		containsLabel = false,
 		showTag = true,
 		activeLabel,
-		manualSelectionMode
+		manualSelectionMode,
+		onselect = undefined,
+		onfilterByPath = undefined,
+		onfilterByFolder = undefined,
+		onfilterByLabel = undefined,
+		onfilterBySchedule = undefined,
+		onfilterByUser = undefined
 	}: Props = $props()
 
 	let scheduleEditor: ScheduleEditor | undefined = $state(undefined)
@@ -81,8 +93,8 @@
 		manualSelectionMode &&
 		!showTag}
 	style="width: {containerWidth}px"
-	onclick={() => dispatch('select')}
-	oncontextmenu={(e) => !selected && dispatch('select')}
+	onclick={() => (dispatch('select'), onselect?.())}
+	oncontextmenu={(e) => !selected && (dispatch('select'), onselect?.())}
 >
 	<!-- Selection column (only when in selection mode) -->
 	{#if manualSelectionMode}
@@ -194,7 +206,10 @@
 											: [
 													{
 														displayName: `Filter by path: ${job.script_path}`,
-														action: () => dispatch('filterByPath', job.script_path),
+														action: () => (
+															dispatch('filterByPath', job.script_path),
+															onfilterByPath?.(job.script_path)
+														),
 														disabled: isExternal
 													}
 												]
@@ -203,7 +218,10 @@
 											return [
 												{
 													displayName: `Filter by folder: ${folder}`,
-													action: () => dispatch('filterByFolder', folder)
+													action: () => (
+														dispatch('filterByFolder', folder),
+														onfilterByFolder?.(folder)
+													)
 												},
 												...items
 											]
@@ -237,7 +255,7 @@
 			<RunLabels
 				{job}
 				{activeLabel}
-				onFilterByLabel={(label) => dispatch('filterByLabel', label)}
+				onFilterByLabel={(label) => (dispatch('filterByLabel', label), onfilterByLabel?.(label))}
 				{labelWidth}
 			/>
 		</div>
@@ -265,7 +283,10 @@
 					items={[
 						{
 							displayName: `Filter by schedule: ${truncateRev(job.schedule_path, 20)}`,
-							action: () => dispatch('filterBySchedule', job.schedule_path)
+							action: () => (
+								dispatch('filterBySchedule', job.schedule_path),
+								onfilterBySchedule?.(job.schedule_path)
+							)
 						}
 					]}
 					class="w-fit"
@@ -289,7 +310,10 @@
 						items={[
 							{
 								displayName: `Filter by triggered by: ${job.created_by}`,
-								action: () => dispatch('filterByUser', job.created_by ?? '')
+								action: () => (
+									dispatch('filterByUser', job.created_by ?? ''),
+									onfilterByUser?.(job.created_by ?? '')
+								)
 							}
 						]}
 						customWidth={256}
diff --git a/frontend/src/lib/components/runs/RunsTable.svelte b/frontend/src/lib/components/runs/RunsTable.svelte
index a9a7823fc8..a2a9ee6fc1 100644
--- a/frontend/src/lib/components/runs/RunsTable.svelte
+++ b/frontend/src/lib/components/runs/RunsTable.svelte
@@ -37,6 +37,8 @@
 		batchRerunOptionsIsOpen?: boolean
 		manualSelectionMode: undefined | 'cancel' | 'rerun'
 		onCancelJobs: (jobIds: string[]) => void
+		onselect?: (...args: any[]) => any
+		onloadExtra?: (...args: any[]) => any
 	}
 
 	let {
@@ -51,7 +53,9 @@
 		perPage = 1000,
 		manualSelectionMode,
 		onCancelJobs,
-		batchRerunOptionsIsOpen = $bindable()
+		batchRerunOptionsIsOpen = $bindable(),
+		onselect = undefined,
+		onloadExtra = undefined
 	}: Props = $props()
 
 	let hasClickFocus = $state(false)
@@ -498,10 +502,12 @@
 															selectedWorkspace = jobOrDate.job.workspace_id
 															selectedIds = [jobOrDate.job.id]
 															dispatch('select')
+															onselect?.()
 														} else {
 															selectedIds = []
 															selectedWorkspace = undefined
 															dispatch('select')
+															onselect?.()
 														}
 													}
 												}}
@@ -537,6 +543,7 @@
 									class="text-xs text-accent text-center w-full pb-2"
 									onclick={() => {
 										dispatch('loadExtra')
+										onloadExtra?.()
 									}}
 								>
 									Load next {perPage} jobs
diff --git a/frontend/src/lib/components/schema/AddProperty.svelte b/frontend/src/lib/components/schema/AddProperty.svelte
index 81270b6fd8..6338a57bd6 100644
--- a/frontend/src/lib/components/schema/AddProperty.svelte
+++ b/frontend/src/lib/components/schema/AddProperty.svelte
@@ -6,10 +6,11 @@
 	import AddPropertyForm from './AddPropertyForm.svelte'
 
 	interface Props {
-		schema?: Schema | any;
+		schema?: Schema | any
+		onchange?: (...args: any[]) => any
 	}
 
-	let { schema = $bindable(emptySchema()) }: Props = $props();
+	let { schema = $bindable(emptySchema()), onchange = undefined }: Props = $props()
 
 	export const DEFAULT_PROPERTY: ModalSchemaProperty = {
 		selectedType: 'string',
@@ -119,6 +120,7 @@
 			sendUserToast(argError, true)
 		}
 		dispatch('change', schema)
+		onchange?.(schema)
 	}
 
 	export function handleDeleteArgument(argPath: string[], nschema?: Schema): void {
@@ -148,10 +150,12 @@
 				schema = modifiedObject
 				schemaString = JSON.stringify(schema, null, '\t')
 				dispatch('change', schema)
+				onchange?.(schema)
 			} else {
 				throw Error('Argument not found!')
 			}
 			dispatch('change', schema)
+			onchange?.(schema)
 		} catch (err) {
 			sendUserToast(`Could not delete argument: ${err}`, true)
 		}
diff --git a/frontend/src/lib/components/schema/AddPropertyFormV2.svelte b/frontend/src/lib/components/schema/AddPropertyFormV2.svelte
index 92c8c8c10b..62e5122e5e 100644
--- a/frontend/src/lib/components/schema/AddPropertyFormV2.svelte
+++ b/frontend/src/lib/components/schema/AddPropertyFormV2.svelte
@@ -10,14 +10,22 @@
 		disabled?: boolean
 		trigger?: import('svelte').Snippet
 		noPopover?: boolean
+		onadd?: (...args: any[]) => any
 	}
 
-	let { customName = undefined, disabled = false, trigger, noPopover }: Props = $props()
+	let {
+		customName = undefined,
+		disabled = false,
+		trigger,
+		noPopover,
+		onadd = undefined
+	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
 
 	function addField() {
 		dispatch('add', { name })
+		onadd?.({ name })
 		name = ''
 	}
 
diff --git a/frontend/src/lib/components/schema/EditableSchemaDrawer.svelte b/frontend/src/lib/components/schema/EditableSchemaDrawer.svelte
index 5062fef802..faea9a939d 100644
--- a/frontend/src/lib/components/schema/EditableSchemaDrawer.svelte
+++ b/frontend/src/lib/components/schema/EditableSchemaDrawer.svelte
@@ -45,7 +45,7 @@
 			order: keys
 		}
 
-		tick().then(() => dispatch('change', schema))
+		tick().then(() => (dispatch('change', schema), onchange?.(schema)))
 	}
 
 	interface Props {
@@ -53,12 +53,14 @@
 		jsonView?: boolean
 		hiddenArgs?: string[]
 		onClose?: () => void
+		onchange?: (...args: any[]) => any
 	}
 
 	let {
 		schema = $bindable(),
 		jsonView = $bindable(false),
-		hiddenArgs = undefined
+		hiddenArgs = undefined,
+		onchange = undefined
 	}: Props = $props()
 
 	// let schema = $state(structuredClone($state.snapshot(schema)))
diff --git a/frontend/src/lib/components/schema/FlowPropertyEditor.svelte b/frontend/src/lib/components/schema/FlowPropertyEditor.svelte
index a8233d630b..e530047e32 100644
--- a/frontend/src/lib/components/schema/FlowPropertyEditor.svelte
+++ b/frontend/src/lib/components/schema/FlowPropertyEditor.svelte
@@ -48,6 +48,7 @@
 		requiredProperty?: string[] | undefined
 		displayWebhookWarning?: boolean
 		onDrawerClose?: () => void
+		onrequiredChange?: (...args: any[]) => any
 	}
 
 	let {
@@ -72,7 +73,8 @@
 		order = $bindable(undefined),
 		requiredProperty = $bindable(undefined),
 		displayWebhookWarning = true,
-		onDrawerClose = undefined
+		onDrawerClose = undefined,
+		onrequiredChange = undefined
 	}: Props = $props()
 
 	let oneOfSelected: string | undefined = $state(oneOf?.[0]?.title)
@@ -385,6 +387,7 @@
 			disabled={type === 'boolean'}
 			on:change={(event) => {
 				dispatch('requiredChange', { required: event?.detail })
+				onrequiredChange?.({ required: event?.detail })
 			}}
 			checked={required}
 			on:change={(event) => {
diff --git a/frontend/src/lib/components/schema/PropertyEditor.svelte b/frontend/src/lib/components/schema/PropertyEditor.svelte
index 1dcf1a817d..ae488c05f9 100644
--- a/frontend/src/lib/components/schema/PropertyEditor.svelte
+++ b/frontend/src/lib/components/schema/PropertyEditor.svelte
@@ -47,6 +47,7 @@
 			| undefined
 		typeeditor?: import('svelte').Snippet
 		children?: import('svelte').Snippet
+		onchange?: (...args: any[]) => any
 	}
 
 	let {
@@ -69,7 +70,8 @@
 		order = $bindable(),
 		itemsType = $bindable(undefined),
 		typeeditor,
-		children
+		children,
+		onchange = undefined
 	}: Props = $props()
 
 	$effect.pre(() => {
@@ -144,6 +146,7 @@
 			initialExtra = structuredClone($state.snapshot(extra))
 			console.debug('property content updated')
 			dispatchIfMounted('change')
+			onchange?.()
 		}
 	}
 
@@ -155,6 +158,7 @@
 			}
 			console.debug('property schema updated')
 			dispatchIfMounted('change')
+			onchange?.()
 		}
 	}
 	$effect(() => {
@@ -180,7 +184,7 @@
 				rows="2"
 				bind:value={description}
 				onkeydown={onKeyDown}
-				onchange={() => dispatch('change')}
+				onchange={() => (dispatch('change'), onchange?.())}
 				placeholder="Field description"
 				class={twMerge(inputBorderClass(), inputBaseClass, 'w-full')}
 			></textarea>
@@ -192,7 +196,11 @@
 			{/snippet}
 			<TextInput
 				bind:value={title}
-				inputProps={{ placeholder: 'Field title', onkeydown, onchange: () => dispatch('change') }}
+				inputProps={{
+					placeholder: 'Field title',
+					onkeydown,
+					onchange: () => (dispatch('change'), onchange?.())
+				}}
 			/>
 		</Label>
 
@@ -210,7 +218,7 @@
 					placeholder="Enter a placeholder"
 					rows="1"
 					bind:value={placeholder}
-					onchange={() => dispatch('change')}
+					onchange={() => (dispatch('change'), onchange?.())}
 					class={twMerge(inputBorderClass(), inputBaseClass, 'w-full')}
 				></textarea>
 			</Label>
diff --git a/frontend/src/lib/components/schema/RunningJobSchemaPicker.svelte b/frontend/src/lib/components/schema/RunningJobSchemaPicker.svelte
index 5f1b054b69..0786ce5698 100644
--- a/frontend/src/lib/components/schema/RunningJobSchemaPicker.svelte
+++ b/frontend/src/lib/components/schema/RunningJobSchemaPicker.svelte
@@ -11,18 +11,20 @@
 
 	const dispatch = createEventDispatcher()
 	interface Props {
-		job: any;
-		selected?: boolean;
-		payloadData?: any | undefined;
-		hovering?: boolean;
+		job: any
+		selected?: boolean
+		payloadData?: any | undefined
+		hovering?: boolean
+		onselect?: (...args: any[]) => any
 	}
 
 	let {
 		job,
 		selected = false,
 		payloadData = $bindable(undefined),
-		hovering = $bindable(false)
-	}: Props = $props();
+		hovering = $bindable(false),
+		onselect = undefined
+	}: Props = $props()
 
 	let loadingArgs = $state(true)
 	loadArgsFromRunningJob(job.id)
@@ -49,7 +51,10 @@
 	</Cell>
 {:else}
 	<Row
-		onclick={() => dispatch('select', { id: job.id, payloadData })}
+		onclick={() => (
+			dispatch('select', { id: job.id, payloadData }),
+			onselect?.({ id: job.id, payloadData })
+		)}
 		class={twMerge(
 			selected === job.id ? 'bg-surface-selected' : 'hover:bg-surface-hover',
 			'cursor-pointer rounded-md'
@@ -58,32 +63,28 @@
 	>
 		<SchemaPickerRow {payloadData} date={job.started_at} {hovering}>
 			{#snippet start()}
-					
-					<div class="center-center">
-						<div
-							class={twMerge(
-								'rounded-full w-2 h-2 animate-pulse',
-								job.suspend ? 'bg-violet-400' : 'bg-orange-400'
-							)}
-							title="Running"
-						></div>
-					</div>
-				
-					{/snippet}
+				<div class="center-center">
+					<div
+						class={twMerge(
+							'rounded-full w-2 h-2 animate-pulse',
+							job.suspend ? 'bg-violet-400' : 'bg-orange-400'
+						)}
+						title="Running"
+					></div>
+				</div>
+			{/snippet}
 			{#snippet extra()}
-					
-					<div class="center-center {hovering ? '' : '!hidden'}">
-						<a
-							target="_blank"
-							href="{base}/run/{job.id}?workspace={$workspaceStore}"
-							class="text-right float-right text-secondary"
-							title="See run detail in a new tab"
-						>
-							<ExternalLink size={16} />
-						</a>
-					</div>
-				
-					{/snippet}
+				<div class="center-center {hovering ? '' : '!hidden'}">
+					<a
+						target="_blank"
+						href="{base}/run/{job.id}?workspace={$workspaceStore}"
+						class="text-right float-right text-secondary"
+						title="See run detail in a new tab"
+					>
+						<ExternalLink size={16} />
+					</a>
+				</div>
+			{/snippet}
 		</SchemaPickerRow>
 	</Row>
 {/if}
diff --git a/frontend/src/lib/components/schema/SchemaFormDND.svelte b/frontend/src/lib/components/schema/SchemaFormDND.svelte
index b5beae3993..2733dd7950 100644
--- a/frontend/src/lib/components/schema/SchemaFormDND.svelte
+++ b/frontend/src/lib/components/schema/SchemaFormDND.svelte
@@ -26,6 +26,7 @@
 		className?: string
 		dndType?: string
 		lightHeaderFont?: boolean
+		onreorder?: (...args: any[]) => any
 	}
 
 	let {
@@ -46,7 +47,8 @@
 		noVariablePicker = false,
 		className = '',
 		dndType = generateRandomString(),
-		lightHeaderFont
+		lightHeaderFont,
+		onreorder = undefined
 	}: Props = $props()
 
 	$effect.pre(() => {
@@ -91,6 +93,7 @@
 		items = $state.snapshot(newItems)
 		const newOrder = items.map((item) => item.value)
 		dispatch('reorder', newOrder)
+		onreorder?.(newOrder)
 	}
 	$effect(() => {
 		readFieldsRecursively(schema)
diff --git a/frontend/src/lib/components/sidebar/MenuButton.svelte b/frontend/src/lib/components/sidebar/MenuButton.svelte
index 72379c6e82..b513f86a8c 100644
--- a/frontend/src/lib/components/sidebar/MenuButton.svelte
+++ b/frontend/src/lib/components/sidebar/MenuButton.svelte
@@ -36,6 +36,7 @@
 		trigger?: MenubarMenuElements['trigger'] | undefined
 		href?: string | undefined
 		class?: string | undefined
+		onclick?: (...args: any[]) => any
 	}
 
 	let {
@@ -55,7 +56,8 @@
 		color = null,
 		trigger = undefined,
 		href = undefined,
-		class: classNames = undefined
+		class: classNames = undefined,
+		onclick = undefined
 	}: Props = $props()
 
 	let buttonRef: HTMLButtonElement | HTMLAnchorElement | undefined = $state(undefined)
@@ -91,6 +93,7 @@
 				: (e) => {
 						if (stopPropagationOnClick) e.preventDefault()
 						dispatch('click')
+						onclick?.()
 					}}
 			{href}
 			data-light-mode={lightMode}
@@ -122,7 +125,12 @@
 				{:else}
 					<SvelteComponent
 						size={16}
-						class={twMerge('flex-shrink-0', sidebarClasses.iconText, 'transition-colors', iconClasses)}
+						class={twMerge(
+							'flex-shrink-0',
+							sidebarClasses.iconText,
+							'transition-colors',
+							iconClasses
+						)}
 						{...iconProps}
 					/>
 				{/if}
@@ -140,9 +148,7 @@
 						title={label}
 					>
 						{label}
-						<span
-							class="pl-2 text-xs text-secondary font-semibold"
-						>
+						<span class="pl-2 text-xs text-secondary font-semibold">
 							{shortcut}
 						</span>
 					</div>
diff --git a/frontend/src/lib/components/table/DataTable.svelte b/frontend/src/lib/components/table/DataTable.svelte
index 76cc38d180..2183c36fdd 100644
--- a/frontend/src/lib/components/table/DataTable.svelte
+++ b/frontend/src/lib/components/table/DataTable.svelte
@@ -39,6 +39,9 @@
 		preventXOverflow?: boolean
 		children?: import('svelte').Snippet
 		emptyMessage?: import('svelte').Snippet
+		onloadMore?: (...args: any[]) => any
+		onprevious?: (...args: any[]) => any
+		onnext?: (...args: any[]) => any
 	}
 
 	let {
@@ -64,7 +67,10 @@
 		containerClass = '',
 		children,
 		emptyMessage,
-		preventXOverflow = false
+		preventXOverflow = false,
+		onloadMore = undefined,
+		onprevious = undefined,
+		onnext = undefined
 	}: Props = $props()
 	setContext<DatatableContext>('datatable', {
 		size
@@ -109,6 +115,7 @@
 			return
 		}
 		dispatch('loadMore')
+		onloadMore?.()
 		lastLoadMoreDispatch = Date.now()
 	}
 
@@ -167,7 +174,7 @@
 						<Button
 							color="light"
 							size="xs2"
-							on:click={() => dispatch('previous')}
+							on:click={() => (dispatch('previous'), onprevious?.())}
 							disabled={currentPage === 1}
 							startIcon={{ icon: ArrowLeftIcon }}
 						>
@@ -178,7 +185,7 @@
 						<Button
 							color="light"
 							size="xs2"
-							on:click={() => dispatch('next')}
+							on:click={() => (dispatch('next'), onnext?.())}
 							endIcon={{ icon: ArrowRightIcon }}
 							disabled={!hasMore}
 						>
diff --git a/frontend/src/lib/components/triggers/CaptureButton.svelte b/frontend/src/lib/components/triggers/CaptureButton.svelte
index 995be6e1f5..4e9173ffed 100644
--- a/frontend/src/lib/components/triggers/CaptureButton.svelte
+++ b/frontend/src/lib/components/triggers/CaptureButton.svelte
@@ -15,9 +15,10 @@
 
 	interface Props {
 		small?: boolean
+		onopenTriggers?: (...args: any[]) => any
 	}
 
-	let { small = false }: Props = $props()
+	let { small = false, onopenTriggers = undefined }: Props = $props()
 
 	const dispatch = createEventDispatcher()
 
@@ -26,6 +27,10 @@
 			kind: captureTriggerKindToTriggerKind(kind),
 			config: {}
 		})
+		onopenTriggers?.({
+			kind: captureTriggerKindToTriggerKind(kind),
+			config: {}
+		})
 	}
 
 	let items = $derived([
diff --git a/frontend/src/lib/components/triggers/CaptureSection.svelte b/frontend/src/lib/components/triggers/CaptureSection.svelte
index eebfe3c1a7..a2a9d1190d 100644
--- a/frontend/src/lib/components/triggers/CaptureSection.svelte
+++ b/frontend/src/lib/components/triggers/CaptureSection.svelte
@@ -48,6 +48,11 @@
 		description?: import('svelte').Snippet
 		children?: import('svelte').Snippet
 		displayAlert?: boolean
+		oncaptureToggle?: (...args: any[]) => any
+		onupdateSchema?: (...args: any[]) => any
+		ontestWithArgs?: (...args: any[]) => any
+		onapplyArgs?: (...args: any[]) => any
+		onaddPreprocessor?: (...args: any[]) => any
 	}
 
 	let {
@@ -59,7 +64,12 @@
 		captureLoading = false,
 		description,
 		children,
-		displayAlert = false
+		displayAlert = false,
+		oncaptureToggle = undefined,
+		onupdateSchema = undefined,
+		ontestWithArgs = undefined,
+		onapplyArgs = undefined,
+		onaddPreprocessor = undefined
 	}: Props = $props()
 
 	const testKind: 'preprocessor' | 'main' = $derived(hasPreprocessor ? 'preprocessor' : 'main')
@@ -80,6 +90,10 @@
 				// this on destroy can be called after capturing has already been stopped (aka after on destroy of the wrapper), make sure we do not start it again
 				disableOnly: true
 			})
+			oncaptureToggle?.({
+				// this on destroy can be called after capturing has already been stopped (aka after on destroy of the wrapper), make sure we do not start it again
+				disableOnly: true
+			})
 		}
 		stopCaptureListening()
 	})
@@ -89,6 +103,10 @@
 			payloadData: e.detail.payloadData,
 			redirect: e.detail.redirect
 		})
+		onupdateSchema?.({
+			payloadData: e.detail.payloadData,
+			redirect: e.detail.redirect
+		})
 	} */
 
 	let pulseButton: PulseButton | undefined
@@ -286,7 +304,7 @@
 						<AnimatedButton animate={captureInfo.active} baseRadius="6px">
 							<Button
 								size="xs"
-								on:click={() => dispatch('captureToggle', {})}
+								on:click={() => (dispatch('captureToggle', {}), oncaptureToggle?.({}))}
 								{disabled}
 								variant={captureInfo.active ? 'default' : 'accent-secondary'}
 								selected={captureInfo.active}
@@ -423,6 +441,11 @@
 										redirect: true,
 										args: true
 									})
+									onupdateSchema?.({
+										payloadData: payloadData ?? {},
+										redirect: true,
+										args: true
+									})
 								},
 								disabled: !selectedCapture,
 								hidden: !isFlow || testKind !== 'main'
@@ -433,6 +456,7 @@
 							const payloadData = selectedCapture?.main_args ?? {}
 							if (isFlow && testKind === 'main') {
 								dispatch('testWithArgs', payloadData)
+								ontestWithArgs?.(payloadData)
 							} else {
 								const trigger_extra = isObject(selectedCapture.preprocessor_args)
 									? selectedCapture.preprocessor_args
@@ -442,6 +466,10 @@
 									kind: testKind,
 									args: { ...structuredClone($state.snapshot(payloadData)), ...trigger_extra }
 								})
+								onapplyArgs?.({
+									kind: testKind,
+									args: { ...structuredClone($state.snapshot(payloadData)), ...trigger_extra }
+								})
 							}
 						}}
 						disabled={testKind === 'preprocessor' && !hasPreprocessor}
@@ -497,8 +525,12 @@
 													dispatch('addPreprocessor', {
 														args: $state.snapshot(payloadData)
 													})
+													onaddPreprocessor?.({
+														args: $state.snapshot(payloadData)
+													})
 												} else {
 													dispatch('addPreprocessor')
+													onaddPreprocessor?.()
 												}
 											}}
 										>
diff --git a/frontend/src/lib/components/triggers/CaptureTable.svelte b/frontend/src/lib/components/triggers/CaptureTable.svelte
index d8e56aebdc..974e73aa7b 100644
--- a/frontend/src/lib/components/triggers/CaptureTable.svelte
+++ b/frontend/src/lib/components/triggers/CaptureTable.svelte
@@ -33,6 +33,12 @@
 		limitPayloadSize?: boolean
 		noBorder?: boolean
 		captureActiveIndicator?: boolean | undefined
+		onselect?: (...args: any[]) => any
+		onselectCapture?: (...args: any[]) => any
+		onaddPreprocessor?: (...args: any[]) => any
+		onupdateSchema?: (...args: any[]) => any
+		ontestWithArgs?: (...args: any[]) => any
+		onapplyArgs?: (...args: any[]) => any
 	}
 
 	let {
@@ -47,7 +53,13 @@
 		fullHeight = true,
 		limitPayloadSize = false,
 		noBorder = false,
-		captureActiveIndicator = undefined
+		captureActiveIndicator = undefined,
+		onselect = undefined,
+		onselectCapture = undefined,
+		onaddPreprocessor = undefined,
+		onupdateSchema = undefined,
+		ontestWithArgs = undefined,
+		onapplyArgs = undefined
 	}: Props = $props()
 
 	let selected: number | undefined = $state(undefined)
@@ -162,7 +174,9 @@
 			const payloadData = await getPayload(capture)
 			selected = capture.id
 			dispatch('select', structuredClone($state.snapshot(payloadData)))
+			onselect?.(structuredClone($state.snapshot(payloadData)))
 			dispatch('selectCapture', capture)
+			onselectCapture?.(capture)
 		}
 	}
 
@@ -197,6 +211,7 @@
 		selected = undefined
 		if (dispatchEvent) {
 			dispatch('select', undefined)
+			onselect?.(undefined)
 		}
 	}
 
@@ -350,6 +365,7 @@
 													variant="accent"
 													on:click={() => {
 														dispatch('addPreprocessor')
+														onaddPreprocessor?.()
 													}}
 												>
 													Add preprocessor
@@ -371,6 +387,11 @@
 														redirect: true,
 														args: true
 													})
+													onupdateSchema?.({
+														payloadData,
+														redirect: true,
+														args: true
+													})
 												},
 												disabled: isTooBig,
 												hidden: !isFlow || testKind !== 'main'
@@ -380,11 +401,16 @@
 											const payloadData = await getPayload(item)
 											if (isFlow && testKind === 'main') {
 												dispatch('testWithArgs', payloadData)
+												ontestWithArgs?.(payloadData)
 											} else {
 												dispatch('applyArgs', {
 													kind: testKind,
 													args: payloadData
 												})
+												onapplyArgs?.({
+													kind: testKind,
+													args: payloadData
+												})
 											}
 										}}
 										disabled={testKind === 'preprocessor' && !hasPreprocessor}
diff --git a/frontend/src/lib/components/triggers/TriggersEditor.svelte b/frontend/src/lib/components/triggers/TriggersEditor.svelte
index 605c2e4c76..f5a547c40e 100644
--- a/frontend/src/lib/components/triggers/TriggersEditor.svelte
+++ b/frontend/src/lib/components/triggers/TriggersEditor.svelte
@@ -53,6 +53,7 @@
 		noCapture?: boolean
 		isEditor?: boolean
 		onDeployTrigger?: (trigger: Trigger) => void
+		onexitTriggers?: (...args: any[]) => any
 	}
 
 	let {
@@ -70,7 +71,8 @@
 		schema = undefined,
 		noCapture = false,
 		isEditor = true,
-		onDeployTrigger
+		onDeployTrigger,
+		onexitTriggers = undefined
 	}: Props = $props()
 
 	let config: Record<string, any> = $state({})
@@ -91,6 +93,7 @@
 	const dispatch = createEventDispatcher()
 	onDestroy(() => {
 		dispatch('exitTriggers')
+		onexitTriggers?.()
 	})
 
 	// Handle trigger selection
diff --git a/frontend/src/lib/components/triggers/nats/NatsTriggersConfigSection.svelte b/frontend/src/lib/components/triggers/nats/NatsTriggersConfigSection.svelte
index 22ffe22e64..7452cd27b4 100644
--- a/frontend/src/lib/components/triggers/nats/NatsTriggersConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/nats/NatsTriggersConfigSection.svelte
@@ -21,6 +21,7 @@
 		path: string
 		can_write?: boolean
 		showTestingBadge?: boolean
+		onvalidConfig?: (...args: any[]) => any
 	}
 
 	const dispatch = createEventDispatcher()
@@ -32,7 +33,8 @@
 		natsCfg = $bindable(),
 		path,
 		can_write = true,
-		showTestingBadge = false
+		showTestingBadge = false,
+		onvalidConfig = undefined
 	}: Props = $props()
 
 	let otherArgsValid = $state(false)
@@ -95,6 +97,7 @@
 			natsCfg.subjects.every((b) => /^[a-zA-Z0-9-_.*>]+$/.test(b)) &&
 			globalError === ''
 		dispatch('valid-config', valid)
+		onvalidConfig?.(valid)
 	})
 
 	function setStreamAndConsumerNames() {
diff --git a/frontend/src/lib/components/tutorials/Tutorial.svelte b/frontend/src/lib/components/tutorials/Tutorial.svelte
index fc95141f5c..25d004463b 100644
--- a/frontend/src/lib/components/tutorials/Tutorial.svelte
+++ b/frontend/src/lib/components/tutorials/Tutorial.svelte
@@ -8,18 +8,19 @@
 	import TutorialInner from './TutorialInner.svelte'
 	import { isCurrentlyInTutorial } from '$lib/stores'
 
-
 	type Options = {
 		indexToInsertAt?: number
 		skipStepsCount?: number
 	}
 
 	interface Props {
-		index?: number;
-		name?: string;
-		tainted?: boolean;
-		onDestroyed?: (() => void) | undefined;
-		getSteps?: (driver: Driver, options?: Options | undefined) => DriveStep[];
+		index?: number
+		name?: string
+		tainted?: boolean
+		onDestroyed?: (() => void) | undefined
+		getSteps?: (driver: Driver, options?: Options | undefined) => DriveStep[]
+		onskipAll?: (...args: any[]) => any
+		onerror?: (...args: any[]) => any
 	}
 
 	let {
@@ -27,8 +28,10 @@
 		name = 'action',
 		tainted = false,
 		onDestroyed = undefined,
-		getSteps = () => []
-	}: Props = $props();
+		getSteps = () => [],
+		onskipAll = undefined,
+		onerror = undefined
+	}: Props = $props()
 
 	let totalSteps = 0
 	let tutorial: Driver | undefined = $state(undefined)
@@ -55,6 +58,7 @@
 				events: {
 					skipAll: () => {
 						dispatch('skipAll')
+						onskipAll?.()
 						tutorial?.destroy()
 					},
 					skipThis: () => {
@@ -121,6 +125,7 @@
 	export const runTutorial = (options?: Options | undefined) => {
 		if (tainted) {
 			dispatch('error', { detail: name })
+			onerror?.({ detail: name })
 			return
 		}
 		isCurrentlyInTutorial.val = true
diff --git a/frontend/src/lib/components/tutorials/TutorialControls.svelte b/frontend/src/lib/components/tutorials/TutorialControls.svelte
index 826e66d151..c3ba79cdf8 100644
--- a/frontend/src/lib/components/tutorials/TutorialControls.svelte
+++ b/frontend/src/lib/components/tutorials/TutorialControls.svelte
@@ -5,11 +5,18 @@
 	import Alert from '../common/alert/Alert.svelte'
 
 	interface Props {
-		activeIndex?: number | undefined;
-		totalSteps?: number | undefined;
+		activeIndex?: number | undefined
+		totalSteps?: number | undefined
+		onprevious?: (...args: any[]) => any
+		onnext?: (...args: any[]) => any
 	}
 
-	let { activeIndex = undefined, totalSteps = undefined }: Props = $props();
+	let {
+		activeIndex = undefined,
+		totalSteps = undefined,
+		onprevious = undefined,
+		onnext = undefined
+	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
 </script>
@@ -34,6 +41,7 @@
 				startIcon={{ icon: ArrowLeft }}
 				on:click={() => {
 					dispatch('previous')
+					onprevious?.()
 				}}
 			>
 				Previous
@@ -44,6 +52,7 @@
 				endIcon={{ icon: ArrowRight }}
 				on:click={() => {
 					dispatch('next')
+					onnext?.()
 				}}
 			>
 				Next
diff --git a/frontend/src/lib/components/wizards/AgChartWizard.svelte b/frontend/src/lib/components/wizards/AgChartWizard.svelte
index 372ef68113..f70f986a71 100644
--- a/frontend/src/lib/components/wizards/AgChartWizard.svelte
+++ b/frontend/src/lib/components/wizards/AgChartWizard.svelte
@@ -31,14 +31,16 @@
 	interface Props {
 		value?: Dataset | undefined
 		trigger?: import('svelte').Snippet
+		onremove?: (...args: any[]) => any
 	}
 
-	let { value = $bindable(undefined), trigger }: Props = $props()
+	let { value = $bindable(undefined), trigger, onremove = undefined }: Props = $props()
 
 	const dispatch = createEventDispatcher()
 
 	function removeDataset() {
 		dispatch('remove')
+		onremove?.()
 	}
 
 	const trigger_render = $derived(trigger)
diff --git a/frontend/src/lib/components/wizards/ChartJSWizard.svelte b/frontend/src/lib/components/wizards/ChartJSWizard.svelte
index f530b79143..fcd6a02a99 100644
--- a/frontend/src/lib/components/wizards/ChartJSWizard.svelte
+++ b/frontend/src/lib/components/wizards/ChartJSWizard.svelte
@@ -16,14 +16,20 @@
 	interface Props {
 		value?: Dataset | undefined
 		trigger?: import('svelte').Snippet
+		onremove?: (...args: any[]) => any
 	}
 
-	let { value = $bindable(undefined), trigger: trigger_render }: Props = $props()
+	let {
+		value = $bindable(undefined),
+		trigger: trigger_render,
+		onremove = undefined
+	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
 
 	function removeDataset() {
 		dispatch('remove')
+		onremove?.()
 	}
 </script>
 
diff --git a/frontend/src/lib/components/wizards/PlotlyWizard.svelte b/frontend/src/lib/components/wizards/PlotlyWizard.svelte
index 221369e4be..7acbcd9ac9 100644
--- a/frontend/src/lib/components/wizards/PlotlyWizard.svelte
+++ b/frontend/src/lib/components/wizards/PlotlyWizard.svelte
@@ -26,14 +26,20 @@
 	interface Props {
 		value?: Dataset | undefined
 		trigger?: import('svelte').Snippet
+		onremove?: (...args: any[]) => any
 	}
 
-	let { value = $bindable(undefined), trigger: trigger_render }: Props = $props()
+	let {
+		value = $bindable(undefined),
+		trigger: trigger_render,
+		onremove = undefined
+	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
 
 	function removeDataset() {
 		dispatch('remove')
+		onremove?.()
 	}
 </script>