replace run() from svelte/legacy with $effect rune

Migrated 57 files from the legacy `run()` wrapper to the native
Svelte 5 `$effect()` rune. Removed `run` imports from svelte/legacy,
keeping other imports (createBubbler, stopPropagation, etc.) where needed.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/lib/components/AppConnectDrawer.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy'
 
 	import { createEventDispatcher } from 'svelte'
 	import { Button, Drawer } from './common'
@@ -36,7 +35,7 @@
 	const dispatch = createEventDispatcher()
 
 	let darkMode: boolean = $state(false)
-	run(() => {
+	$effect(() => {
 		appConnectInner && onRtToLoadChange(rtToLoad)
 	})
 </script>

frontend/src/lib/components/AppConnectInner.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy'
 
 	import { superadmin, userStore, workspaceStore } from '$lib/stores'
 	import IconedResourceType from './IconedResourceType.svelte'
@@ -173,7 +172,7 @@
 
 	const connectAndManual = ['gitlab']
 
-	run(() => {
+	$effect(() => {
 		isGoogleSignin =
 			step == 1 &&
 			(resourceType == 'google' ||
@@ -183,7 +182,7 @@
 				resourceType == 'gsheets')
 	})
 
-	run(() => {
+	$effect(() => {
 		disabled =
 			(step == 1 && resourceType == '') ||
 			(step == 2 &&

frontend/src/lib/components/AutheliaSetting.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
 
 	import IconedResourceType from './IconedResourceType.svelte'
 	import TextInput from './text_input/TextInput.svelte'
@@ -35,7 +34,7 @@
 		}
 	}
 	let enabled = $derived(value != undefined)
-	run(() => {
+	$effect(() => {
 		changeOrg(org)
 	});
 </script>

frontend/src/lib/components/AuthentikSetting.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
 
 	import IconedResourceType from './IconedResourceType.svelte'
 	import Toggle from './Toggle.svelte'
@@ -35,7 +34,7 @@
 	let enabled = $derived(value != undefined)
 	// Initialize org from existing auth_url
 	let org = $derived(value?.connect_config?.auth_url?.replace('/application/o/authorize/', '') ?? '')
-	run(() => {
+	$effect(() => {
 		changeOrg(org)
 	});
 </script>

frontend/src/lib/components/AzureOauthSettings.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
 
 	import { ExternalLink } from 'lucide-svelte'
 	import OauthScopes from './OauthScopes.svelte'
@@ -24,7 +23,7 @@
 		extra_params_callback: {}
 	}) }: Props = $props();
 
-	run(() => {
+	$effect(() => {
 		if (!connect_config) {
 			connect_config = {
 				scopes: ['offline_access'],
@@ -37,7 +36,7 @@
 		}
 	});
 
-	run(() => {
+	$effect(() => {
 		if (connect_config.extra_params.tenant_id) {
 			connect_config.auth_url = `https://login.microsoftonline.com/${connect_config.extra_params.tenant_id}/oauth2/v2.0/authorize`
 			connect_config.token_url = `https://login.microsoftonline.com/${connect_config.extra_params.tenant_id}/oauth2/v2.0/token`

frontend/src/lib/components/CustomOauth.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
 
 	import OauthExtraParams from './OauthExtraParams.svelte'
 	import OauthScopes from './OauthScopes.svelte'
@@ -15,7 +14,7 @@
 		extra_params_callback: {}
 	}) } = $props();
 
-	run(() => {
+	$effect(() => {
 		if (!connect_config) {
 			connect_config = {
 				scopes: [],

frontend/src/lib/components/CustomPopover.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { run, createBubbler } from 'svelte/legacy'
+	import { createBubbler } from 'svelte/legacy'
 
 	const bubble = createBubbler()
 	import { createPopperActions, type PopperOptions } from 'svelte-popperjs'
@@ -67,7 +67,7 @@
 		timeout = setTimeout(() => (showTooltip = false), disappearTimeout)
 	}
 
-	run(() => {
+	$effect(() => {
 		focusEl && focusEl?.focus()
 	})
 </script>

frontend/src/lib/components/CustomSso.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
 
 	import OauthExtraParams from './OauthExtraParams.svelte'
 	import OauthScopes from './OauthScopes.svelte'
@@ -16,7 +15,7 @@
 		extra_params_callback: {}
 	}) } = $props();
 
-	run(() => {
+	$effect(() => {
 		if (!login_config) {
 			login_config = {
 				scopes: [],

frontend/src/lib/components/ExecutionDuration.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
 
 	import { type Job } from '$lib/gen'
 	import { isScriptPreview } from '$lib/utils'
@@ -59,7 +58,7 @@
 		clearInterval(interval)
 	})
 	// Detect when execution of job started
-	run(() => {
+	$effect(() => {
 		if (
 			!busy &&
 			job &&

frontend/src/lib/components/FlowGraphViewerStep.svelte

@@ -277,7 +277,7 @@
 			</div>
 		{:else if stepDetail.value.type == 'branchall'}
 			<p class="font-medium text-secondary text-center pt-4 pb-8">
-				All branches will run, regardless of the inputs
+				All branches will regardless of the inputs
 			</p>
 		{:else if stepDetail.value.type == 'branchone'}
 			<p class="font-medium text-secondary text-center pt-4 pb-8">

frontend/src/lib/components/FolderUsageInfo.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
 
 	import { FolderService } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
@@ -19,7 +18,7 @@
 	async function loadUsage() {
 		usage = await FolderService.getFolderUsage({ workspace: $workspaceStore!, name })
 	}
-	run(() => {
+	$effect(() => {
 		$workspaceStore && loadUsage()
 	});
 </script>

frontend/src/lib/components/InstanceGroupEditor.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
 
 	import { GroupService, type InstanceGroup } from '$lib/gen'
 	import { createEventDispatcher } from 'svelte'
@@ -35,7 +34,7 @@
 				})
 			: []
 	}
-	run(() => {
+	$effect(() => {
 		load()
 	});
 </script>

frontend/src/lib/components/KanidmSetting.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
 
 	import IconedResourceType from './IconedResourceType.svelte'
 	import TextInput from './text_input/TextInput.svelte'
@@ -45,7 +44,7 @@
 	// also allow lazy/async binding of the `value` prop.
 	let derivedBaseUrl = $derived(value?.connect_config?.auth_url?.replace(AUTH_URL_SUFFIX, ''))
 	let baseUrl = $derived(proxyUrlValue ?? derivedBaseUrl ?? '')
-	run(() => {
+	$effect(() => {
 		changeValues({ baseUrl, id: value?.id ?? '' })
 	});
 </script>

frontend/src/lib/components/KeycloakSetting.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
 
 	import IconedResourceType from './IconedResourceType.svelte'
 	import TextInput from './text_input/TextInput.svelte'
@@ -35,7 +34,7 @@
 		}
 	}
 	let enabled = $derived(value != undefined)
-	run(() => {
+	$effect(() => {
 		changeOrg(org)
 	});
 </script>

frontend/src/lib/components/LogId.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
 
 	interface Props {
 		id: string;
@@ -7,7 +6,7 @@
 
 	let { id }: Props = $props();
 
-	run(() => {
+	$effect(() => {
 		id && console.log('updateJobId')
 	});
 </script>

frontend/src/lib/components/MapResult.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
 
 	import { Map, View, Feature } from 'ol'
 	import { Fill, Stroke, Style, Text } from 'ol/style.js'
@@ -111,7 +110,7 @@
 		createMarkerLayers()?.forEach((l) => map?.addLayer(l))
 	}
 
-	run(() => {
+	$effect(() => {
 		if (!map && mapElement) {
 			useGeographic()
 			map = new Map({

frontend/src/lib/components/MemoryFootprintViewer.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
 
 	import { type MetricDataPoint, MetricsService } from '$lib/gen'
 	import { displayTime } from '$lib/utils'
@@ -72,7 +71,7 @@
 		data = [...data]
 	}
 
-	run(() => {
+	$effect(() => {
 		jobUpdateLastFetch && loadMetricsData()
 	});
 </script>

frontend/src/lib/components/ParqetCsvTableRenderer.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
 
 	import { type GridApi, createGrid, type IDatasource } from 'ag-grid-community'
 
@@ -181,7 +180,7 @@
 	}
 
 	let darkMode: boolean = $state(false)
-	run(() => {
+	$effect(() => {
 		eGui && mountGrid()
 	});
 </script>

frontend/src/lib/components/QueueMetricsDrawerInner.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
 
 	import 'chartjs-adapter-date-fns'
 	import { Line } from '$lib/components/chartjs-wrappers/chartJs'
@@ -183,10 +182,10 @@
 
 	let darkMode = $state(false)
 
-	run(() => {
+	$effect(() => {
 		ChartJS.defaults.color = darkMode ? '#ccc' : '#666'
 	});
-	run(() => {
+	$effect(() => {
 		ChartJS.defaults.borderColor = darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
 	});
 </script>

frontend/src/lib/components/Range.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { run, createBubbler, stopPropagation } from 'svelte/legacy';
+	import { createBubbler, stopPropagation } from 'svelte/legacy';
 
 	const bubble = createBubbler();
 	import RangeSlider from 'svelte-range-slider-pips'
@@ -35,7 +35,7 @@
 		return range < 100 ? 1 : range / 20
 	}
 
-	run(() => {
+	$effect(() => {
 		if (value === null) {
 			value = 0
 		}

frontend/src/lib/components/ResourceEditor.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy'
 
 	import type { Schema } from '$lib/common'
 	import { ResourceService, type Resource, type ResourceType } from '$lib/gen'
@@ -177,24 +176,24 @@
 			content: textFileContent
 		}
 	}
-	run(() => {
+	$effect(() => {
 		if (defaultValues && Object.keys(defaultValues).length > 0) {
 			args = defaultValues
 		}
 	})
-	run(() => {
+	$effect(() => {
 		canSave = (can_write && isValid && jsonError == '') || (viewJsonSchema && jsonError == '')
 	})
 	$effect(() => {
 		onChange && onChange({ path, args, description })
 	})
-	run(() => {
+	$effect(() => {
 		rawCode && untrack(() => parseJson())
 	})
-	run(() => {
+	$effect(() => {
 		linkedVars.length > 0 && path && untrack(() => updateArgsFromLinkedVars())
 	})
-	run(() => {
+	$effect(() => {
 		textFileContent && untrack(() => parseTextFileContent())
 	})
 </script>

frontend/src/lib/components/SupabaseConnect.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy'
 
 	import { Loader2, RotateCwIcon } from 'lucide-svelte'
 
@@ -48,7 +47,7 @@
 	}
 	let databases: undefined | Database[] = $state(undefined)
 
-	run(() => {
+	$effect(() => {
 		token != undefined && listDatabases()
 	})
 

frontend/src/lib/components/ZitadelSetting.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
 
 	import IconedResourceType from './IconedResourceType.svelte'
 	import TextInput from './text_input/TextInput.svelte'
@@ -35,7 +34,7 @@
 		}
 	}
 	let enabled = $derived(value != undefined)
-	run(() => {
+	$effect(() => {
 		changeOrg(org)
 	});
 </script>

frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
 
 	import { getContext, onMount } from 'svelte'
 	import type { App, AppEditorContext, AppViewerContext } from '../types'
@@ -179,12 +178,12 @@
 			setInter: (n) => setInter(n, 'all context')
 		}
 	})
-	run(() => {
+	$effect(() => {
 		!firstLoad &&
 			canInitializeAll($initialized?.initializedComponents, $app) &&
 			refresh('all initialized')
 	});
-	run(() => {
+	$effect(() => {
 		$recomputeAllContext.componentNumber =
 			Object.values($runnableComponents).filter((x) => x.autoRefresh).length ?? 0
 	});

frontend/src/lib/components/common/FileProgressBar.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
 
 	import { tweened } from 'svelte/motion'
 	import { cubicOut } from 'svelte/easing'
@@ -23,7 +22,7 @@
 		easing: cubicOut
 	})
 
-	run(() => {
+	$effect(() => {
 		tweenedProgress.set(progress)
 	});
 </script>

frontend/src/lib/components/common/clearableInput/ClearableInput.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { run, createBubbler, stopPropagation, preventDefault } from 'svelte/legacy';
+	import { createBubbler, stopPropagation, preventDefault } from 'svelte/legacy';
 
 	const bubble = createBubbler();
 	import { createEventDispatcher } from 'svelte'
@@ -33,7 +33,7 @@
 	let isHovered = $state(false)
 
 	let isNumeric = $derived(['number', 'range'].includes(type))
-	run(() => {
+	$effect(() => {
 		dispatchIfMounted('change', value)
 	});
 
@@ -45,7 +45,7 @@
 		value = ''
 	}
 
-	run(() => {
+	$effect(() => {
 		if (value === undefined) value = ''
 	});
 </script>

frontend/src/lib/components/copilot/RegexGen.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
 
 	import { base } from '$lib/base'
 	import { Button } from '../common'
@@ -53,7 +52,7 @@
 		}
 	}
 
-	run(() => {
+	$effect(() => {
 		input && setTimeout(() => input?.focus(), 100)
 	});
 

frontend/src/lib/components/copilot/StepInputGen.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy'
 
 	import { Check, Loader2, Wand2 } from 'lucide-svelte'
 	import Button from '../common/button/Button.svelte'
@@ -42,7 +41,7 @@
 	}: Props = $props()
 
 	let empty = $state(false)
-	run(() => {
+	$effect(() => {
 		empty =
 			Object.keys(arg ?? {}).length === 0 ||
 			(arg.type === 'static' && !arg.value) ||

frontend/src/lib/components/flows/content/FlowInputs.svelte

@@ -150,7 +150,7 @@
 			<div class="mt-2"></div>
 			<Alert title="Trigger scripts" type="info">
 				Trigger scripts are designed to pull data from an external source and return all of the new
-				items since the last run, without resorting to external webhooks.<br /><br />
+				items since the last without resorting to external webhooks.<br /><br />
 
 				A trigger script is intended to be used with
 				<a

frontend/src/lib/components/flows/content/FlowModuleMock.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy'
 
 	import Toggle from '$lib/components/Toggle.svelte'
 	import Tooltip from '$lib/components/Tooltip.svelte'
@@ -40,7 +39,7 @@
 			isMockEnabled = Boolean(newMock?.enabled)
 		}
 	}
-	run(() => {
+	$effect(() => {
 		;(flowModule.mock, untrack(() => updateMock(flowModule.mock)))
 	})
 

frontend/src/lib/components/flows/content/FlowPathViewer.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
 
 	import Skeleton from '$lib/components/common/skeleton/Skeleton.svelte'
 	import FlowGraphViewer from '$lib/components/FlowGraphViewer.svelte'
@@ -34,7 +33,7 @@
 		)
 	}
 
-	run(() => {
+	$effect(() => {
 		path && loadFlow(path)
 	});
 </script>

frontend/src/lib/components/flows/content/FlowSettings.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { run, createBubbler } from 'svelte/legacy'
+	import { createBubbler } from 'svelte/legacy'
 
 	const bubble = createBubbler()
 	import Path from '$lib/components/Path.svelte'
@@ -61,7 +61,7 @@
 
 	let displayWorkerTagPicker = $state(false)
 
-	run(() => {
+	$effect(() => {
 		flowStore.val.tag ? (displayWorkerTagPicker = true) : null
 	})
 

frontend/src/lib/components/icons/WindmillIcon2.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy'
 
 	import { customIcon } from './store'
 
@@ -117,7 +116,7 @@
 
 	let lessSaturatedColor: string | undefined = $state()
 
-	run(() => {
+	$effect(() => {
 		color ? (lessSaturatedColor = reduceSaturation(color, -16)) : (lessSaturatedColor = undefined)
 	})
 </script>

frontend/src/lib/components/raw_apps/RawAppInputsSpecEditor.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy'
 
 	import { addWhitespaceBeforeCapitals, capitalize, classNames } from '$lib/utils'
 	import Tooltip from '$lib/components/Tooltip.svelte'
@@ -69,7 +68,7 @@
 		markdownTooltip = undefined
 	}: Props = $props()
 
-	run(() => {
+	$effect(() => {
 		if (componentInput == undefined) {
 			//@ts-ignore
 			componentInput = {

frontend/src/lib/components/settings/ChangeWorkspaceId.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
 
 	import { workspaceStore, superadmin } from '$lib/stores'
 	import Alert from '../common/alert/Alert.svelte'
@@ -58,10 +57,10 @@
 	}
 
 	let { open = $bindable(false) }: Props = $props();
-	run(() => {
+	$effect(() => {
 		newId = newName.toLowerCase().replace(/\s/gi, '-')
 	});
-	run(() => {
+	$effect(() => {
 		validateName(newId)
 	});
 </script>

frontend/src/lib/components/settings/PremiumInfo.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
 
 	import { base } from '$lib/base'
 	import { capitalize, pluralize, sendUserToast } from '$lib/utils'
@@ -126,7 +125,7 @@
 	}
 
 	const formatNumber = (value: number) => value.toLocaleString('en-US')
-	run(() => {
+	$effect(() => {
 		if ($workspaceStore) {
 			loadPremiumInfo()
 			listUsers()
@@ -135,7 +134,7 @@
 	});
 	let estimatedDevs = $derived(Math.max(1, estimatedDevsRaw))
 	let estimatedSeats = $derived(estimatedDevs + Math.ceil(estimatedOps / 2))
-	run(() => {
+	$effect(() => {
 		estimatedSeats && updateExecs()
 	});
 </script>

frontend/src/lib/components/sidebar/CriticalAlertModal.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
 
 	import { onMount, onDestroy } from 'svelte'
 	import CriticalAlertModalInner from './CriticalAlertModalInner.svelte'
@@ -170,13 +169,13 @@
 		await acknowledgeCriticalAlert?.({ id })
 		updateHasUnacknowledgedCriticalAlerts()
 	}
-	run(() => {
+	$effect(() => {
 		setupApiFunctions(workspaceContext)
 	});
-	run(() => {
+	$effect(() => {
 		if ($isCriticalAlertsUIOpen) open = $isCriticalAlertsUIOpen
 	});
-	run(() => {
+	$effect(() => {
 		isCriticalAlertsUIOpen.set(open)
 	});
 </script>

frontend/src/lib/components/sidebar/MultiplayerMenu.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
 
 	import { enterpriseLicense, userStore, workspaceStore, awarenessStore } from '$lib/stores'
 	import { BROWSER } from 'esm-env'
@@ -47,13 +46,13 @@
 			setPeers()
 		})
 	}
-	run(() => {
+	$effect(() => {
 		awareness?.setLocalState({
 			name: $userStore?.username,
 			url: $page.url.pathname
 		})
 	});
-	run(() => {
+	$effect(() => {
 		$enterpriseLicense && $workspaceStore && connectWorkspace($workspaceStore)
 	});
 

frontend/src/lib/components/table/AutoDataTable.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy'
 
 	import { ArrowDown, ArrowUp, Download, MoreVertical, MoveVertical, Columns } from 'lucide-svelte'
 	import Dropdown from '../DropdownV2.svelte'
@@ -159,10 +158,10 @@
 			colSelection = [...colSelection, key]
 		}
 	}
-	run(() => {
+	$effect(() => {
 		recomputeObjectsAndHeaders(objects)
 	})
-	run(() => {
+	$effect(() => {
 		perPage && adjustCurrentPage()
 	})
 	let data = $derived(computeData(structuredObjects, activeSorting, search))

frontend/src/lib/components/triggers/TriggerTokens.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
 
 	import { FlowService, ScriptService, UserService, type TruncatedToken } from '$lib/gen'
 	import { userStore, workspaceStore } from '$lib/stores'
@@ -41,7 +40,7 @@
 		await listTokens()
 	}
 
-	run(() => {
+	$effect(() => {
 		$workspaceStore && listTokens()
 	});
 </script>

frontend/src/lib/components/triggers/mqtt/MqttEditorConfigSection.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy'
 
 	import Section from '$lib/components/Section.svelte'
 	import Required from '$lib/components/Required.svelte'
@@ -47,7 +46,7 @@
 
 		return true
 	}
-	run(() => {
+	$effect(() => {
 		isValid = isValidSubscribeTopics(subscribe_topics) && !emptyStringTrimmed(mqtt_resource_path)
 	})
 </script>

frontend/src/lib/components/triggers/postgres/PublicationPicker.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
 
 	import { Button } from '$lib/components/common'
 	import Select from '$lib/components/select/Select.svelte'
@@ -108,7 +107,7 @@
 	}
 
 	listDatabasePublication()
-	run(() => {
+	$effect(() => {
 		publication_name && getAllRelations()
 	});
 </script>

frontend/src/lib/components/workspaceSettings/CreateWorkspace.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy'
 
 	import { goto } from '$lib/navigation'
 	import { base } from '$lib/base'
@@ -329,16 +328,16 @@
 	let operatorOnly = $state(false)
 	let autoAdd = $state(true)
 	let selected: Exclude<AIProvider, 'customai'> = $state('openai')
-	run(() => {
+	$effect(() => {
 		id = name.toLowerCase().replace(/\s/gi, '-')
 	})
-	run(() => {
+	$effect(() => {
 		validateName(id)
 	})
-	run(() => {
+	$effect(() => {
 		errorUser = validateUsername(username)
 	})
-	run(() => {
+	$effect(() => {
 		colorEnabled && !workspaceColor && generateRandomColor()
 	})
 	let domain = $derived($usersWorkspaceStore?.email.split('@')[1])

frontend/src/routes/(root)/(logged)/apps_raw/edit/[...path]/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy'
 
 	import { AppService, DraftService } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
@@ -169,7 +168,7 @@
 		}
 	}
 
-	run(() => {
+	$effect(() => {
 		if ($workspaceStore) {
 			loadApp()
 		}

frontend/src/routes/(root)/(logged)/email_triggers/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy'
 
 	import {
 		EmailTriggerService,
@@ -88,7 +87,7 @@
 		loading = false
 	}
 
-	run(() => {
+	$effect(() => {
 		if ($workspaceStore && $userStore) {
 			loadTriggers()
 		}
@@ -108,10 +107,10 @@
 	)
 	let filterUserFolders = $state(getLocalSetting(FILTER_USER_FOLDER_SETTING_NAME) == 'true')
 
-	run(() => {
+	$effect(() => {
 		storeLocalSetting(TRIGGER_PATH_KIND_FILTER_SETTING, selectedFilterKind)
 	})
-	run(() => {
+	$effect(() => {
 		storeLocalSetting(FILTER_USER_FOLDER_SETTING_NAME, filterUserFolders ? 'true' : undefined)
 	})
 
@@ -137,7 +136,7 @@
 		}
 	}
 
-	run(() => {
+	$effect(() => {
 		preFilteredItems =
 			ownerFilter != undefined
 				? selectedFilterKind === 'trigger'
@@ -156,7 +155,7 @@
 					)
 	})
 
-	run(() => {
+	$effect(() => {
 		if ($workspaceStore) {
 			ownerFilter = undefined
 		}
@@ -176,7 +175,7 @@
 				).sort()
 	)
 
-	run(() => {
+	$effect(() => {
 		items = filter !== '' ? filteredItems : preFilteredItems
 	})
 
@@ -229,7 +228,7 @@
 		loadQueryFilters()
 	})
 
-	run(() => {
+	$effect(() => {
 		updateQueryFilters(selectedFilterKind, filterUserFolders)
 	})
 </script>

frontend/src/routes/(root)/(logged)/gcp_triggers/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy'
 
 	import {
 		GcpTriggerService,
@@ -127,7 +126,7 @@
 		}
 	}
 
-	run(() => {
+	$effect(() => {
 		if ($workspaceStore && $userStore) {
 			loadTriggers()
 		}
@@ -152,10 +151,10 @@
 	)
 	let filterUserFolders = $state(getLocalSetting(FILTER_USER_FOLDER_SETTING_NAME) == 'true')
 
-	run(() => {
+	$effect(() => {
 		storeLocalSetting(TRIGGER_PATH_KIND_FILTER_SETTING, selectedFilterKind)
 	})
-	run(() => {
+	$effect(() => {
 		storeLocalSetting(FILTER_USER_FOLDER_SETTING_NAME, filterUserFolders ? 'true' : undefined)
 	})
 
@@ -181,7 +180,7 @@
 		}
 	}
 
-	run(() => {
+	$effect(() => {
 		preFilteredItems =
 			ownerFilter != undefined
 				? selectedFilterKind === 'trigger'
@@ -200,7 +199,7 @@
 					)
 	})
 
-	run(() => {
+	$effect(() => {
 		if ($workspaceStore) {
 			ownerFilter = undefined
 		}
@@ -216,7 +215,7 @@
 				).sort()
 	)
 
-	run(() => {
+	$effect(() => {
 		items = filter !== '' ? filteredItems : preFilteredItems
 	})
 
@@ -249,7 +248,7 @@
 		loadQueryFilters()
 	})
 
-	run(() => {
+	$effect(() => {
 		updateQueryFilters(selectedFilterKind, filterUserFolders)
 	})
 </script>

frontend/src/routes/(root)/(logged)/instance_groups/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy'
 
 	import type { InstanceGroup } from '$lib/gen'
 	import { GroupService } from '$lib/gen'
@@ -34,7 +33,7 @@
 		groupDrawer?.openDrawer()
 	}
 
-	run(() => {
+	$effect(() => {
 		loadInstanceGroups()
 	})
 

frontend/src/routes/(root)/(logged)/kafka_triggers/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy'
 
 	import {
 		KafkaTriggerService,
@@ -122,7 +121,7 @@
 		}
 	}
 
-	run(() => {
+	$effect(() => {
 		if ($workspaceStore && $userStore) {
 			loadTriggers()
 		}
@@ -143,10 +142,10 @@
 	)
 	let filterUserFolders = $state(getLocalSetting(FILTER_USER_FOLDER_SETTING_NAME) == 'true')
 
-	run(() => {
+	$effect(() => {
 		storeLocalSetting(TRIGGER_PATH_KIND_FILTER_SETTING, selectedFilterKind)
 	})
-	run(() => {
+	$effect(() => {
 		storeLocalSetting(FILTER_USER_FOLDER_SETTING_NAME, filterUserFolders ? 'true' : undefined)
 	})
 
@@ -172,7 +171,7 @@
 		}
 	}
 
-	run(() => {
+	$effect(() => {
 		preFilteredItems =
 			ownerFilter != undefined
 				? selectedFilterKind === 'trigger'
@@ -191,7 +190,7 @@
 					)
 	})
 
-	run(() => {
+	$effect(() => {
 		if ($workspaceStore) {
 			ownerFilter = undefined
 		}
@@ -207,7 +206,7 @@
 				).sort()
 	)
 
-	run(() => {
+	$effect(() => {
 		items = filter !== '' ? filteredItems : preFilteredItems
 	})
 
@@ -241,7 +240,7 @@
 		loadQueryFilters()
 	})
 
-	run(() => {
+	$effect(() => {
 		updateQueryFilters(selectedFilterKind, filterUserFolders)
 	})
 </script>

frontend/src/routes/(root)/(logged)/mqtt_triggers/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy'
 
 	import {
 		MqttTriggerService,
@@ -116,7 +115,7 @@
 		}
 	}
 
-	run(() => {
+	$effect(() => {
 		if ($workspaceStore && $userStore) {
 			loadTriggers()
 		}
@@ -137,10 +136,10 @@
 	)
 	let filterUserFolders = $state(getLocalSetting(FILTER_USER_FOLDER_SETTING_NAME) == 'true')
 
-	run(() => {
+	$effect(() => {
 		storeLocalSetting(TRIGGER_PATH_KIND_FILTER_SETTING, selectedFilterKind)
 	})
-	run(() => {
+	$effect(() => {
 		storeLocalSetting(FILTER_USER_FOLDER_SETTING_NAME, filterUserFolders ? 'true' : undefined)
 	})
 
@@ -166,7 +165,7 @@
 		}
 	}
 
-	run(() => {
+	$effect(() => {
 		preFilteredItems =
 			ownerFilter != undefined
 				? selectedFilterKind === 'trigger'
@@ -185,7 +184,7 @@
 					)
 	})
 
-	run(() => {
+	$effect(() => {
 		if ($workspaceStore) {
 			ownerFilter = undefined
 		}
@@ -201,7 +200,7 @@
 				).sort()
 	)
 
-	run(() => {
+	$effect(() => {
 		items = filter !== '' ? filteredItems : preFilteredItems
 	})
 
@@ -235,7 +234,7 @@
 		loadQueryFilters()
 	})
 
-	run(() => {
+	$effect(() => {
 		updateQueryFilters(selectedFilterKind, filterUserFolders)
 	})
 </script>

frontend/src/routes/(root)/(logged)/nats_triggers/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy'
 
 	import {
 		NatsTriggerService,
@@ -121,7 +120,7 @@
 		}
 	}
 
-	run(() => {
+	$effect(() => {
 		if ($workspaceStore && $userStore) {
 			loadTriggers()
 		}
@@ -142,10 +141,10 @@
 	)
 	let filterUserFolders = $state(getLocalSetting(FILTER_USER_FOLDER_SETTING_NAME) == 'true')
 
-	run(() => {
+	$effect(() => {
 		storeLocalSetting(TRIGGER_PATH_KIND_FILTER_SETTING, selectedFilterKind)
 	})
-	run(() => {
+	$effect(() => {
 		storeLocalSetting(FILTER_USER_FOLDER_SETTING_NAME, filterUserFolders ? 'true' : undefined)
 	})
 
@@ -171,7 +170,7 @@
 		}
 	}
 
-	run(() => {
+	$effect(() => {
 		preFilteredItems =
 			ownerFilter != undefined
 				? selectedFilterKind === 'trigger'
@@ -190,7 +189,7 @@
 					)
 	})
 
-	run(() => {
+	$effect(() => {
 		if ($workspaceStore) {
 			ownerFilter = undefined
 		}
@@ -206,7 +205,7 @@
 				).sort()
 	)
 
-	run(() => {
+	$effect(() => {
 		items = filter !== '' ? filteredItems : preFilteredItems
 	})
 
@@ -240,7 +239,7 @@
 		loadQueryFilters()
 	})
 
-	run(() => {
+	$effect(() => {
 		updateQueryFilters(selectedFilterKind, filterUserFolders)
 	})
 </script>

frontend/src/routes/(root)/(logged)/postgres_triggers/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy'
 
 	import {
 		PostgresTriggerService,
@@ -124,7 +123,7 @@
 		}
 	}
 
-	run(() => {
+	$effect(() => {
 		if ($workspaceStore && $userStore) {
 			loadTriggers()
 		}
@@ -154,10 +153,10 @@
 	)
 	let filterUserFolders = $state(getLocalSetting(FILTER_USER_FOLDER_SETTING_NAME) == 'true')
 
-	run(() => {
+	$effect(() => {
 		storeLocalSetting(TRIGGER_PATH_KIND_FILTER_SETTING, selectedFilterKind)
 	})
-	run(() => {
+	$effect(() => {
 		storeLocalSetting(FILTER_USER_FOLDER_SETTING_NAME, filterUserFolders ? 'true' : undefined)
 	})
 
@@ -183,7 +182,7 @@
 		}
 	}
 
-	run(() => {
+	$effect(() => {
 		preFilteredItems =
 			ownerFilter != undefined
 				? selectedFilterKind === 'trigger'
@@ -202,7 +201,7 @@
 					)
 	})
 
-	run(() => {
+	$effect(() => {
 		if ($workspaceStore) {
 			ownerFilter = undefined
 		}
@@ -218,7 +217,7 @@
 				).sort()
 	)
 
-	run(() => {
+	$effect(() => {
 		items = filter !== '' ? filteredItems : preFilteredItems
 	})
 
@@ -252,7 +251,7 @@
 		loadQueryFilters()
 	})
 
-	run(() => {
+	$effect(() => {
 		updateQueryFilters(selectedFilterKind, filterUserFolders)
 	})
 </script>

frontend/src/routes/(root)/(logged)/routes/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy'
 
 	import {
 		HttpTriggerService,
@@ -91,7 +90,7 @@
 		loading = false
 	}
 
-	run(() => {
+	$effect(() => {
 		if ($workspaceStore && $userStore) {
 			loadTriggers()
 		}
@@ -111,10 +110,10 @@
 	)
 	let filterUserFolders = $state(getLocalSetting(FILTER_USER_FOLDER_SETTING_NAME) == 'true')
 
-	run(() => {
+	$effect(() => {
 		storeLocalSetting(TRIGGER_PATH_KIND_FILTER_SETTING, selectedFilterKind)
 	})
-	run(() => {
+	$effect(() => {
 		storeLocalSetting(FILTER_USER_FOLDER_SETTING_NAME, filterUserFolders ? 'true' : undefined)
 	})
 
@@ -140,7 +139,7 @@
 		}
 	}
 
-	run(() => {
+	$effect(() => {
 		preFilteredItems =
 			ownerFilter != undefined
 				? selectedFilterKind === 'trigger'
@@ -159,7 +158,7 @@
 					)
 	})
 
-	run(() => {
+	$effect(() => {
 		if ($workspaceStore) {
 			ownerFilter = undefined
 		}
@@ -179,7 +178,7 @@
 				).sort()
 	)
 
-	run(() => {
+	$effect(() => {
 		items = filter !== '' ? filteredItems : preFilteredItems
 	})
 
@@ -232,7 +231,7 @@
 		loadQueryFilters()
 	})
 
-	run(() => {
+	$effect(() => {
 		updateQueryFilters(selectedFilterKind, filterUserFolders)
 	})
 </script>

frontend/src/routes/(root)/(logged)/sqs_triggers/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy'
 
 	import {
 		SqsTriggerService,
@@ -115,7 +114,7 @@
 		}
 	}
 
-	run(() => {
+	$effect(() => {
 		if ($workspaceStore && $userStore) {
 			loadTriggers()
 		}
@@ -136,10 +135,10 @@
 	)
 	let filterUserFolders = $state(getLocalSetting(FILTER_USER_FOLDER_SETTING_NAME) == 'true')
 
-	run(() => {
+	$effect(() => {
 		storeLocalSetting(TRIGGER_PATH_KIND_FILTER_SETTING, selectedFilterKind)
 	})
-	run(() => {
+	$effect(() => {
 		storeLocalSetting(FILTER_USER_FOLDER_SETTING_NAME, filterUserFolders ? 'true' : undefined)
 	})
 
@@ -165,7 +164,7 @@
 		}
 	}
 
-	run(() => {
+	$effect(() => {
 		preFilteredItems =
 			ownerFilter != undefined
 				? selectedFilterKind === 'trigger'
@@ -184,7 +183,7 @@
 					)
 	})
 
-	run(() => {
+	$effect(() => {
 		if ($workspaceStore) {
 			ownerFilter = undefined
 		}
@@ -200,7 +199,7 @@
 				).sort()
 	)
 
-	run(() => {
+	$effect(() => {
 		items = filter !== '' ? filteredItems : preFilteredItems
 	})
 
@@ -234,7 +233,7 @@
 		loadQueryFilters()
 	})
 
-	run(() => {
+	$effect(() => {
 		updateQueryFilters(selectedFilterKind, filterUserFolders)
 	})
 </script>

frontend/src/routes/(root)/(logged)/svix/create-webhook/+page@(root).svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy'
 
 	import ScriptPicker from '$lib/components/ScriptPicker.svelte'
 	import { Button } from '$lib/components/common'
@@ -67,7 +66,7 @@
 
 		scopes = [`jobs:run:${itemKind}s:${scriptPath}`]
 	}
-	run(() => {
+	$effect(() => {
 		updateTokenAndScope(itemPath)
 	})
 </script>

frontend/src/routes/(root)/(logged)/user/(user)/accept_invite/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
 
 	import { goto } from '$lib/navigation'
 	import { base } from '$lib/base'
@@ -66,7 +65,7 @@
 		}
 	}
 	getAutomateUsernameCreationSetting()
-	run(() => {
+	$effect(() => {
 		validateName(username)
 	});
 </script>

frontend/src/routes/(root)/(logged)/user/(user)/workspaces/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy'
 
 	import { goto } from '$lib/navigation'
 	import { base } from '$app/paths'
@@ -49,7 +48,7 @@
 
 	let rd = $derived($page.url.searchParams.get('rd'))
 
-	run(() => {
+	$effect(() => {
 		if (userSettings && $page.url.hash.startsWith(USER_SETTINGS_HASH)) {
 			const mcpMode = $page.url.hash.includes('-mcp')
 			userSettings.openDrawer(mcpMode)
@@ -94,7 +93,7 @@
 			workspaces = $userWorkspaces
 		}
 	}
-	run(() => {
+	$effect(() => {
 		list_all_as_super_admin != undefined && $userWorkspaces && handleListWorkspaces()
 	})
 
@@ -110,7 +109,7 @@
 
 	let createWorkspace = $state($superadmin || isCloudHosted())
 
-	run(() => {
+	$effect(() => {
 		if ($superadmin) {
 			createWorkspace = true
 		}

frontend/src/routes/(root)/(logged)/websocket_triggers/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy'
 
 	import {
 		WebsocketTriggerService,
@@ -116,7 +115,7 @@
 		}
 	}
 
-	run(() => {
+	$effect(() => {
 		if ($workspaceStore && $userStore) {
 			loadTriggers()
 		}
@@ -137,10 +136,10 @@
 	)
 	let filterUserFolders = $state(getLocalSetting(FILTER_USER_FOLDER_SETTING_NAME) == 'true')
 
-	run(() => {
+	$effect(() => {
 		storeLocalSetting(TRIGGER_PATH_KIND_FILTER_SETTING, selectedFilterKind)
 	})
-	run(() => {
+	$effect(() => {
 		storeLocalSetting(FILTER_USER_FOLDER_SETTING_NAME, filterUserFolders ? 'true' : undefined)
 	})
 
@@ -166,7 +165,7 @@
 		}
 	}
 
-	run(() => {
+	$effect(() => {
 		preFilteredItems =
 			ownerFilter != undefined
 				? selectedFilterKind === 'trigger'
@@ -185,7 +184,7 @@
 					)
 	})
 
-	run(() => {
+	$effect(() => {
 		if ($workspaceStore) {
 			ownerFilter = undefined
 		}
@@ -201,7 +200,7 @@
 				).sort()
 	)
 
-	run(() => {
+	$effect(() => {
 		items = filter !== '' ? filteredItems : preFilteredItems
 	})
 
@@ -235,7 +234,7 @@
 		loadQueryFilters()
 	})
 
-	run(() => {
+	$effect(() => {
 		updateQueryFilters(selectedFilterKind, filterUserFolders)
 	})
 </script>