diff --git a/frontend/src/lib/components/AppConnectDrawer.svelte b/frontend/src/lib/components/AppConnectDrawer.svelte
index fa7393bcfc..44aacc4bab 100644
--- a/frontend/src/lib/components/AppConnectDrawer.svelte
+++ b/frontend/src/lib/components/AppConnectDrawer.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy'
+
 	import { createEventDispatcher } from 'svelte'
 	import { Button, Drawer } from './common'
 	import DrawerContent from './common/drawer/DrawerContent.svelte'
@@ -6,24 +8,26 @@
 	import AppConnectInner from './AppConnectInner.svelte'
 	import DarkModeObserver from './DarkModeObserver.svelte'
 
-	export let expressOAuthSetup = false
-
-	let drawer: Drawer
-	let resourceType = ''
-	let step = 1
-	let disabled = false
-	let isGoogleSignin = false
-	let manual = true
-
-	let appConnectInner: AppConnectInner | undefined = undefined
-
-	let rtToLoad: string | undefined = ''
-	export async function open(rt?: string) {
-		rtToLoad = rt
-		drawer.openDrawer?.()
+	interface Props {
+		expressOAuthSetup?: boolean
 	}
 
-	$: appConnectInner && onRtToLoadChange(rtToLoad)
+	let { expressOAuthSetup = false }: Props = $props()
+
+	let drawer: Drawer | undefined = $state()
+	let resourceType = $state('')
+	let step = $state(1)
+	let disabled = $state(false)
+	let isGoogleSignin = $state(false)
+	let manual = $state(true)
+
+	let appConnectInner: AppConnectInner | undefined = $state(undefined)
+
+	let rtToLoad: string | undefined = $state('')
+	export async function open(rt?: string) {
+		rtToLoad = rt
+		drawer?.openDrawer?.()
+	}
 
 	function onRtToLoadChange(rtToLoad: string | undefined) {
 		appConnectInner?.open(rtToLoad)
@@ -31,7 +35,10 @@
 
 	const dispatch = createEventDispatcher()
 
-	let darkMode: boolean = false
+	let darkMode: boolean = $state(false)
+	run(() => {
+		appConnectInner && onRtToLoadChange(rtToLoad)
+	})
 </script>
 
 <DarkModeObserver bind:darkMode />
@@ -46,7 +53,7 @@
 >
 	<DrawerContent
 		title="Add a resource"
-		on:close={drawer.closeDrawer}
+		on:close={() => drawer?.closeDrawer()}
 		tooltip="Resources represent connections to third party systems. Learn more on how to integrate external APIs."
 		documentationLink="https://www.windmill.dev/docs/integrations/integrations_on_windmill"
 	>
@@ -57,7 +64,7 @@
 			bind:isGoogleSignin
 			bind:disabled
 			bind:manual
-			on:close={drawer?.closeDrawer}
+			on:close={() => drawer?.closeDrawer()}
 			on:refresh
 			express={expressOAuthSetup}
 		/>
@@ -67,7 +74,7 @@
 					<Button variant="default" on:click={appConnectInner?.back ?? (() => {})}>Back</Button>
 				{/if}
 				{#if isGoogleSignin}
-					<button {disabled} on:click={appConnectInner?.next}>
+					<button {disabled} onclick={appConnectInner?.next}>
 						<img
 							class="h-10 w-auto object-contain"
 							src={darkMode ? '/google_signin_dark.png' : '/google_signin_light.png'}
diff --git a/frontend/src/lib/components/AppTutorials.svelte b/frontend/src/lib/components/AppTutorials.svelte
index f32c613bb3..86a81e9fa7 100644
--- a/frontend/src/lib/components/AppTutorials.svelte
+++ b/frontend/src/lib/components/AppTutorials.svelte
@@ -4,9 +4,9 @@
 	import BackgroundRunnablesTutorial from './tutorials/app/BackgroundRunnablesTutorial.svelte'
 	import ConnectionTutorial from './tutorials/app/ConnectionTutorial.svelte'
 
-	let backgroundRunnablesTutorial: BackgroundRunnablesTutorial | undefined = undefined
-	let connectionTutorial: ConnectionTutorial | undefined = undefined
-	let appTutorial: AppTutorial | undefined = undefined
+	let backgroundRunnablesTutorial: BackgroundRunnablesTutorial | undefined = $state(undefined)
+	let connectionTutorial: ConnectionTutorial | undefined = $state(undefined)
+	let appTutorial: AppTutorial | undefined = $state(undefined)
 
 	export function runTutorialById(id: string, options?: { skipStepsCount?: number }) {
 		if (id === 'backgroundrunnables') {
diff --git a/frontend/src/lib/components/AutheliaSetting.svelte b/frontend/src/lib/components/AutheliaSetting.svelte
index 3392b056b6..78158cddcd 100644
--- a/frontend/src/lib/components/AutheliaSetting.svelte
+++ b/frontend/src/lib/components/AutheliaSetting.svelte
@@ -1,14 +1,18 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import IconedResourceType from './IconedResourceType.svelte'
 	import Toggle from './Toggle.svelte'
 
-	export let value: any
+	interface Props {
+		value: any;
+	}
 
-	$: enabled = value != undefined
+	let { value = $bindable() }: Props = $props();
 
-	let org = ''
 
-	$: changeOrg(org)
+	let org = $state('')
+
 
 	function changeOrg(org) {
 		if (value) {
@@ -28,10 +32,14 @@
 			}
 		}
 	}
+	let enabled = $derived(value != undefined)
+	run(() => {
+		changeOrg(org)
+	});
 </script>
 
 <div class="flex flex-col gap-1">
-	<!-- svelte-ignore a11y-label-has-associated-control -->
+	<!-- svelte-ignore a11y_label_has_associated_control -->
 	<label class="text-sm font-medium text-primary flex gap-4 items-center"
 		><div class="w-[120px]"><IconedResourceType name={'authelia'} after={true} /></div><Toggle
 			checked={enabled}
diff --git a/frontend/src/lib/components/AuthentikSetting.svelte b/frontend/src/lib/components/AuthentikSetting.svelte
index 8936905a16..f811fa95c4 100644
--- a/frontend/src/lib/components/AuthentikSetting.svelte
+++ b/frontend/src/lib/components/AuthentikSetting.svelte
@@ -1,14 +1,18 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import IconedResourceType from './IconedResourceType.svelte'
 	import Toggle from './Toggle.svelte'
 
-	export let value: any
+	interface Props {
+		value: any;
+	}
 
-	$: enabled = value != undefined
+	let { value = $bindable() }: Props = $props();
 
-	let org = ''
 
-	$: changeOrg(org)
+	let org = $state('')
+
 
 	function changeOrg(org) {
 		if (value) {
@@ -28,10 +32,14 @@
 			}
 		}
 	}
+	let enabled = $derived(value != undefined)
+	run(() => {
+		changeOrg(org)
+	});
 </script>
 
 <div class="flex flex-col gap-1">
-	<!-- svelte-ignore a11y-label-has-associated-control -->
+	<!-- svelte-ignore a11y_label_has_associated_control -->
 	<label class="text-sm font-medium text-primary flex gap-4 items-center"
 		><div class="w-[120px]"><IconedResourceType name={'authentik'} after={true} /></div><Toggle
 			checked={enabled}
diff --git a/frontend/src/lib/components/AzureOauthSettings.svelte b/frontend/src/lib/components/AzureOauthSettings.svelte
index 47f6390a82..1deb425da8 100644
--- a/frontend/src/lib/components/AzureOauthSettings.svelte
+++ b/frontend/src/lib/components/AzureOauthSettings.svelte
@@ -1,38 +1,48 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { ExternalLink } from 'lucide-svelte'
 	import OauthScopes from './OauthScopes.svelte'
 
-	export let connect_config: {
+	interface Props {
+		connect_config?: {
 		scopes: string[]
 		auth_url: string
 		token_url: string
 		req_body_auth: boolean
 		extra_params: { tenant_id: string }
 		extra_params_callback: Record<string, any>
-	} = {
+	};
+	}
+
+	let { connect_config = $bindable({
 		scopes: ['offline_access'],
 		auth_url: '',
 		token_url: '',
 		req_body_auth: true,
 		extra_params: { tenant_id: '' },
 		extra_params_callback: {}
-	}
+	}) }: Props = $props();
 
-	$: if (!connect_config) {
-		connect_config = {
-			scopes: ['offline_access'],
-			auth_url: '',
-			token_url: '',
-			req_body_auth: true,
-			extra_params: { tenant_id: '' },
-			extra_params_callback: {}
+	run(() => {
+		if (!connect_config) {
+			connect_config = {
+				scopes: ['offline_access'],
+				auth_url: '',
+				token_url: '',
+				req_body_auth: true,
+				extra_params: { tenant_id: '' },
+				extra_params_callback: {}
+			}
 		}
-	}
+	});
 
-	$: 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`
-	}
+	run(() => {
+		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`
+		}
+	});
 </script>
 
 <label class="block pb-2" for="tenant-id">
diff --git a/frontend/src/lib/components/Badge.svelte b/frontend/src/lib/components/Badge.svelte
index 11042b4f1e..8dcad8ef8e 100644
--- a/frontend/src/lib/components/Badge.svelte
+++ b/frontend/src/lib/components/Badge.svelte
@@ -1,12 +1,22 @@
 <script lang="ts">
 	import Tooltip from './Tooltip.svelte'
-	export let twBgColor = 'bg-blue-200'
-	export let twTextColor = 'text-secondary'
-	export let tooltip: string | undefined = undefined
+	interface Props {
+		twBgColor?: string;
+		twTextColor?: string;
+		tooltip?: string | undefined;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		twBgColor = 'bg-blue-200',
+		twTextColor = 'text-secondary',
+		tooltip = undefined,
+		children
+	}: Props = $props();
 </script>
 
 <span class="{twBgColor} {twTextColor} text-2xs rounded px-1 whitespace-nowrap">
-	<slot />
+	{@render children?.()}
 	{#if tooltip && tooltip != ''}
 		<Tooltip>{tooltip}</Tooltip>
 	{/if}
diff --git a/frontend/src/lib/components/CenteredModal.svelte b/frontend/src/lib/components/CenteredModal.svelte
index 94dc9dd550..58ae97ad77 100644
--- a/frontend/src/lib/components/CenteredModal.svelte
+++ b/frontend/src/lib/components/CenteredModal.svelte
@@ -4,10 +4,21 @@
 	import WindmillIcon from './icons/WindmillIcon.svelte'
 	import LoginPageHeader from './LoginPageHeader.svelte'
 
-	export let subtitle: string | undefined = undefined
-	export let title = 'Windmill'
-	export let disableLogo = false
-	export let large = false
+	interface Props {
+		subtitle?: string | undefined;
+		title?: string;
+		disableLogo?: boolean;
+		large?: boolean;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		subtitle = undefined,
+		title = 'Windmill',
+		disableLogo = false,
+		large = false,
+		children
+	}: Props = $props();
 
 	setLicense()
 </script>
@@ -38,7 +49,7 @@
 					</p>
 				{/if}
 			</div>
-			<slot />
+			{@render children?.()}
 		</div>
 	</div>
 
diff --git a/frontend/src/lib/components/CenteredPage.svelte b/frontend/src/lib/components/CenteredPage.svelte
index b6b85933d6..f9bedf2a54 100644
--- a/frontend/src/lib/components/CenteredPage.svelte
+++ b/frontend/src/lib/components/CenteredPage.svelte
@@ -1,9 +1,15 @@
-<script>
+<script lang="ts">
 	import { twMerge } from 'tailwind-merge'
+	interface Props {
+		children?: import('svelte').Snippet;
+		[key: string]: any
+	}
+
+	let { children, ...rest }: Props = $props();
 </script>
 
 <div class="pb-8">
-	<div class={twMerge('max-w-7xl mx-auto px-4 sm:px-6 md:px-8', $$restProps.class)}>
-		<slot />
+	<div class={twMerge('max-w-7xl mx-auto px-4 sm:px-6 md:px-8', rest.class)}>
+		{@render children?.()}
 	</div>
 </div>
diff --git a/frontend/src/lib/components/ChangeInstanceUsernameInner.svelte b/frontend/src/lib/components/ChangeInstanceUsernameInner.svelte
index 8b4d41eea1..1aa8559e7e 100644
--- a/frontend/src/lib/components/ChangeInstanceUsernameInner.svelte
+++ b/frontend/src/lib/components/ChangeInstanceUsernameInner.svelte
@@ -5,12 +5,21 @@
 	import Alert from './common/alert/Alert.svelte'
 	import { createEventDispatcher } from 'svelte'
 
-	export let email: string
-	export let username: string
-	export let isConflict = false
-	export let noPadding = false
+	interface Props {
+		email: string;
+		username: string;
+		isConflict?: boolean;
+		noPadding?: boolean;
+	}
 
-	let loading = false
+	let {
+		email,
+		username = $bindable(),
+		isConflict = false,
+		noPadding = false
+	}: Props = $props();
+
+	let loading = $state(false)
 
 	let usernameInfo:
 		| {
@@ -20,7 +29,7 @@
 					username: string
 				}[]
 		  }
-		| undefined = undefined
+		| undefined = $state(undefined)
 
 	function handleKeyUp(event: KeyboardEvent) {
 		const key = event.key
@@ -83,7 +92,7 @@
 	<input
 		type="text"
 		class="mb-4"
-		on:keyup={handleKeyUp}
+		onkeyup={handleKeyUp}
 		bind:value={username}
 		disabled={isConflict}
 	/>
diff --git a/frontend/src/lib/components/CollapseLink.svelte b/frontend/src/lib/components/CollapseLink.svelte
index a723eea703..ea409e7065 100644
--- a/frontend/src/lib/components/CollapseLink.svelte
+++ b/frontend/src/lib/components/CollapseLink.svelte
@@ -4,12 +4,24 @@
 	import { twMerge } from 'tailwind-merge'
 	import { ChevronDown } from 'lucide-svelte'
 
-	export let open = false
-	export let text: string
-	export let small = false
+	interface Props {
+		open?: boolean
+		text: string
+		small?: boolean
+		children?: import('svelte').Snippet
+		class?: string
+	}
+
+	let {
+		open = $bindable(false),
+		text,
+		small = false,
+		children,
+		class: className = ''
+	}: Props = $props()
 </script>
 
-<div class={twMerge('flex', $$props.class)}>
+<div class={twMerge('flex', className)}>
 	<Button
 		variant="default"
 		btnClasses="text-primary {small ? 'text-xs' : ''} "
@@ -20,5 +32,5 @@
 	</Button>
 </div>
 {#if open}
-	<div transition:slide|local={{ duration: 100 }}><slot /></div>
+	<div transition:slide|local={{ duration: 100 }}>{@render children?.()}</div>
 {/if}
diff --git a/frontend/src/lib/components/ConfirmButton.svelte b/frontend/src/lib/components/ConfirmButton.svelte
index e0c3a8d974..0d35b8f9fb 100644
--- a/frontend/src/lib/components/ConfirmButton.svelte
+++ b/frontend/src/lib/components/ConfirmButton.svelte
@@ -3,8 +3,13 @@
 	import { Check, X } from 'lucide-svelte'
 	import { createEventDispatcher } from 'svelte'
 
-	export let confirmation: string = 'Are you sure?'
-	let firstClick = false
+	interface Props {
+		confirmation?: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let { confirmation = 'Are you sure?', children }: Props = $props();
+	let firstClick = $state(false)
 	const dispatch = createEventDispatcher()
 </script>
 
@@ -13,7 +18,7 @@
 	<Button
 		on:click={() => {
 			firstClick = true
-		}}><slot /></Button
+		}}>{@render children?.()}</Button
 	>
 {:else}
 		{confirmation}
diff --git a/frontend/src/lib/components/ConnectionSection.svelte b/frontend/src/lib/components/ConnectionSection.svelte
index 8f42e08f05..0a28921cf9 100644
--- a/frontend/src/lib/components/ConnectionSection.svelte
+++ b/frontend/src/lib/components/ConnectionSection.svelte
@@ -15,21 +15,39 @@
 		team_name: string
 	}
 
-	export let platform: 'slack' | 'teams'
-	export let teamName: string | undefined
-	export let display_name: string | undefined
-	export let scriptPath: string
-	export let initialPath: string
-	export let onDisconnect: () => Promise<void>
-	export let onSelect: () => Promise<void>
-	export let connectHref: string | undefined
-	export let createScriptHref: string
-	export let createFlowHref: string
-	export let documentationLink: string
-	export let onLoadSettings: () => void
-	export let itemKind: 'flow' | 'script' = 'script'
+	interface Props {
+		platform: 'slack' | 'teams';
+		teamName: string | undefined;
+		display_name: string | undefined;
+		scriptPath: string;
+		initialPath: string;
+		onDisconnect: () => Promise<void>;
+		onSelect: () => Promise<void>;
+		connectHref: string | undefined;
+		createScriptHref: string;
+		createFlowHref: string;
+		documentationLink: string;
+		onLoadSettings: () => void;
+		itemKind?: 'flow' | 'script';
+	}
 
-	let selectedTeam: TeamItem | undefined = undefined
+	let {
+		platform,
+		teamName,
+		display_name,
+		scriptPath = $bindable(),
+		initialPath,
+		onDisconnect,
+		onSelect,
+		connectHref,
+		createScriptHref,
+		createFlowHref,
+		documentationLink,
+		onLoadSettings,
+		itemKind = $bindable('script')
+	}: Props = $props();
+
+	let selectedTeam: TeamItem | undefined = $state(undefined)
 
 	async function connectTeams() {
 		if (!selectedTeam) return
diff --git a/frontend/src/lib/components/ContextualVariableEditor.svelte b/frontend/src/lib/components/ContextualVariableEditor.svelte
index b859e08691..43277787ba 100644
--- a/frontend/src/lib/components/ContextualVariableEditor.svelte
+++ b/frontend/src/lib/components/ContextualVariableEditor.svelte
@@ -13,25 +13,25 @@
 
 	const dispatch = createEventDispatcher()
 
-	let edit: boolean = false
-	let name: string = ''
-	let value: string = ''
+	let edit: boolean = $state(false)
+	let name: string = $state('')
+	let value: string = $state('')
 
 	export function initNew(): void {
 		edit = false
 		name = ''
 		value = ''
-		drawer.openDrawer()
+		drawer?.openDrawer()
 	}
 
 	export function editVariable(editName: string, editValue: string): void {
 		edit = true
 		name = editName
 		value = editValue
-		drawer.openDrawer()
+		drawer?.openDrawer()
 	}
 
-	let drawer: Drawer
+	let drawer: Drawer | undefined = $state()
 
 	async function updateVariable(): Promise<void> {
 		await WorkspaceService.setEnvironmentVariable({
@@ -48,7 +48,7 @@
 		)
 		dispatch('update')
 
-		drawer.closeDrawer()
+		drawer?.closeDrawer()
 		setTimeout(() => {
 			dispatch('update')
 		}, 5000)
@@ -58,7 +58,7 @@
 <Drawer bind:this={drawer} size="900px">
 	<DrawerContent
 		title={edit ? `Update contextual variable ${name}` : 'Create a contextual variable'}
-		on:close={drawer.closeDrawer}
+		on:close={drawer?.closeDrawer}
 	>
 		<div class="flex flex-col gap-8">
 			{#if !edit}
diff --git a/frontend/src/lib/components/CronInput.svelte b/frontend/src/lib/components/CronInput.svelte
index b7febcdaca..87b9b183e1 100644
--- a/frontend/src/lib/components/CronInput.svelte
+++ b/frontend/src/lib/components/CronInput.svelte
@@ -219,7 +219,7 @@
 				{#if !disabled}
 					<div class="flex flex-row gap-2 shrink-0">
 						{@render cronBuilder()}
-						<CronGen bind:schedule bind:cronVersion />
+						<CronGen bind:schedule {cronVersion} />
 					</div>
 				{/if}
 			</div>
diff --git a/frontend/src/lib/components/CustomOauth.svelte b/frontend/src/lib/components/CustomOauth.svelte
index 5ae21602df..0cca13b465 100644
--- a/frontend/src/lib/components/CustomOauth.svelte
+++ b/frontend/src/lib/components/CustomOauth.svelte
@@ -1,28 +1,32 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import OauthExtraParams from './OauthExtraParams.svelte'
 	import OauthScopes from './OauthScopes.svelte'
 	import Toggle from './Toggle.svelte'
 	import Tooltip from './Tooltip.svelte'
 
-	export let connect_config = {
+	let { connect_config = $bindable({
 		scopes: [],
 		auth_url: '',
 		token_url: '',
 		req_body_auth: false,
 		extra_params: {},
 		extra_params_callback: {}
-	}
+	}) } = $props();
 
-	$: if (!connect_config) {
-		connect_config = {
-			scopes: [],
-			auth_url: '',
-			token_url: '',
-			req_body_auth: false,
-			extra_params: {},
-			extra_params_callback: {}
+	run(() => {
+		if (!connect_config) {
+			connect_config = {
+				scopes: [],
+				auth_url: '',
+				token_url: '',
+				req_body_auth: false,
+				extra_params: {},
+				extra_params_callback: {}
+			}
 		}
-	}
+	});
 </script>
 
 <label class="block pb-2">
@@ -41,12 +45,12 @@
 		bind:value={connect_config.token_url}
 	/>
 </label>
-<!-- svelte-ignore a11y-label-has-associated-control -->
+<!-- svelte-ignore a11y_label_has_associated_control -->
 <label class="block pb-2">
 	<span class="text-primary font-semibold text-sm">Scopes</span>
 	<OauthScopes bind:scopes={connect_config.scopes} />
 </label>
-<!-- svelte-ignore a11y-label-has-associated-control -->
+<!-- svelte-ignore a11y_label_has_associated_control -->
 <label class="block pb-2">
 	<span class="text-primary font-semibold text-sm"
 		>Extra Query Args for Authorize Request&nbsp;<Tooltip
@@ -56,14 +60,14 @@
 	>
 	<OauthExtraParams bind:extra_params={connect_config.extra_params} />
 </label>
-<!-- svelte-ignore a11y-label-has-associated-control -->
+<!-- svelte-ignore a11y_label_has_associated_control -->
 <label class="block pb-2">
 	<span class="text-primary font-semibold text-sm"
 		>Extra Query Args for Token request <Tooltip>Not needed in most cases</Tooltip></span
 	>
 	<OauthExtraParams bind:extra_params={connect_config.extra_params_callback} />
 </label>
-<!-- svelte-ignore a11y-label-has-associated-control -->
+<!-- svelte-ignore a11y_label_has_associated_control -->
 <label class="block pb-2">
 	<span class="text-primary font-semibold text-sm"
 		>Payload <Tooltip
diff --git a/frontend/src/lib/components/CustomPopover.svelte b/frontend/src/lib/components/CustomPopover.svelte
index 0efa555922..c9649fe837 100644
--- a/frontend/src/lib/components/CustomPopover.svelte
+++ b/frontend/src/lib/components/CustomPopover.svelte
@@ -1,3 +1,4 @@
+<!-- @migration-task Error while migrating Svelte code: $$props is used together with named props in a way that cannot be automatically migrated. -->
 <script lang="ts">
 	import { createPopperActions, type PopperOptions } from 'svelte-popperjs'
 	import type { PopoverPlacement } from './Popover.model'
diff --git a/frontend/src/lib/components/CustomSso.svelte b/frontend/src/lib/components/CustomSso.svelte
index 8e19a7e7e4..b0c565a613 100644
--- a/frontend/src/lib/components/CustomSso.svelte
+++ b/frontend/src/lib/components/CustomSso.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import OauthExtraParams from './OauthExtraParams.svelte'
 	import OauthScopes from './OauthScopes.svelte'
 	import Toggle from './Toggle.svelte'
 	import Tooltip from './Tooltip.svelte'
 
-	export let login_config = {
+	let { login_config = $bindable({
 		scopes: [],
 		auth_url: '',
 		token_url: '',
@@ -12,19 +14,21 @@
 		req_body_auth: false,
 		extra_params: {},
 		extra_params_callback: {}
-	}
+	}) } = $props();
 
-	$: if (!login_config) {
-		login_config = {
-			scopes: [],
-			auth_url: '',
-			token_url: '',
-			userinfo_url: '',
-			req_body_auth: false,
-			extra_params: {},
-			extra_params_callback: {}
+	run(() => {
+		if (!login_config) {
+			login_config = {
+				scopes: [],
+				auth_url: '',
+				token_url: '',
+				userinfo_url: '',
+				req_body_auth: false,
+				extra_params: {},
+				extra_params_callback: {}
+			}
 		}
-	}
+	});
 </script>
 
 <label class="block pb-2">
@@ -51,12 +55,12 @@
 		bind:value={login_config.userinfo_url}
 	/>
 </label>
-<!-- svelte-ignore a11y-label-has-associated-control -->
+<!-- svelte-ignore a11y_label_has_associated_control -->
 <label class="block pb-2">
 	<span class="text-primary font-semibold text-xs">Scopes</span>
 	<OauthScopes bind:scopes={login_config.scopes} />
 </label>
-<!-- svelte-ignore a11y-label-has-associated-control -->
+<!-- svelte-ignore a11y_label_has_associated_control -->
 <label class="block pb-2">
 	<span class="text-primary font-semibold text-xs"
 		>Extra Query Args for Authorize Request&nbsp;<Tooltip
@@ -66,14 +70,14 @@
 	>
 	<OauthExtraParams bind:extra_params={login_config.extra_params} />
 </label>
-<!-- svelte-ignore a11y-label-has-associated-control -->
+<!-- svelte-ignore a11y_label_has_associated_control -->
 <label class="block pb-2">
 	<span class="text-primary font-semibold text-xs"
 		>Extra Query Args for Token request <Tooltip>Not needed in most cases</Tooltip></span
 	>
 	<OauthExtraParams bind:extra_params={login_config.extra_params_callback} />
 </label>
-<!-- svelte-ignore a11y-label-has-associated-control -->
+<!-- svelte-ignore a11y_label_has_associated_control -->
 <label class="block pb-2">
 	<span class="text-primary font-semibold text-xs"
 		>Payload <Tooltip
diff --git a/frontend/src/lib/components/DBManager.svelte b/frontend/src/lib/components/DBManager.svelte
index 3247575e3e..cc077ccadc 100644
--- a/frontend/src/lib/components/DBManager.svelte
+++ b/frontend/src/lib/components/DBManager.svelte
@@ -144,12 +144,14 @@
 								}))}
 							class="w-fit"
 						>
-							<svelte:fragment slot="buttonReplacement">
-								<MoreVertical
-									size={8}
-									class="w-8 h-8 p-2 hover:bg-surface-hover cursor-pointer rounded-md"
-								/>
-							</svelte:fragment>
+							{#snippet buttonReplacement()}
+													
+									<MoreVertical
+										size={8}
+										class="w-8 h-8 p-2 hover:bg-surface-hover cursor-pointer rounded-md"
+									/>
+								
+													{/snippet}
 						</DropdownV2>
 					{/if}
 				</button>
diff --git a/frontend/src/lib/components/DateInput.svelte b/frontend/src/lib/components/DateInput.svelte
index c39e6149e3..6e311d0f54 100644
--- a/frontend/src/lib/components/DateInput.svelte
+++ b/frontend/src/lib/components/DateInput.svelte
@@ -1,19 +1,33 @@
 <script lang="ts">
+	import { createBubbler } from 'svelte/legacy';
+
+	const bubble = createBubbler();
 	import { createEventDispatcher } from 'svelte'
 	import { format, isValid, parse } from 'date-fns'
 	import { sendUserToast } from '$lib/toast'
 
-	export let value: string | undefined = undefined
-	export let autofocus: boolean | null = false
-	export let minDate: string | undefined = undefined
-	export let maxDate: string | undefined = undefined
-	export let dateFormat: string | undefined = 'dd-MM-yyyy'
-	export let disabled: boolean = false
+	interface Props {
+		value?: string | undefined;
+		autofocus?: boolean | null;
+		minDate?: string | undefined;
+		maxDate?: string | undefined;
+		dateFormat?: string | undefined;
+		disabled?: boolean;
+	}
+
+	let {
+		value = $bindable(undefined),
+		autofocus = false,
+		minDate = undefined,
+		maxDate = undefined,
+		dateFormat = $bindable('dd-MM-yyyy'),
+		disabled = false
+	}: Props = $props();
 
 	const defaultDateFormat = 'dd-MM-yyyy'
 	const defaultHtmlDateFormat = 'yyyy-MM-dd'
 
-	let date: string | undefined = computeDate(value)
+	let date: string | undefined = $state(computeDate(value))
 
 	const dispatch = createEventDispatcher()
 
@@ -70,8 +84,8 @@
 	let randomId = 'datetarget-' + Math.random().toString(36).substring(7)
 </script>
 
-<div class="flex flex-row gap-1 items-center w-full" id={randomId} on:pointerdown on:focus>
-	<!-- svelte-ignore a11y-autofocus -->
+<div class="flex flex-row gap-1 items-center w-full" id={randomId} onpointerdown={bubble('pointerdown')} onfocus={bubble('focus')}>
+	<!-- svelte-ignore a11y_autofocus -->
 	<input
 		{disabled}
 		type="date"
@@ -80,7 +94,7 @@
 		class="!w-full app-editor-input"
 		min={minDate}
 		max={maxDate}
-		on:change={() => {
+		onchange={() => {
 			if (date) {
 				updateValue(date)
 			}
diff --git a/frontend/src/lib/components/DefaultScripts.svelte b/frontend/src/lib/components/DefaultScripts.svelte
index 40a8420278..b693ad2222 100644
--- a/frontend/src/lib/components/DefaultScripts.svelte
+++ b/frontend/src/lib/components/DefaultScripts.svelte
@@ -6,11 +6,15 @@
 	import DrawerContent from './common/drawer/DrawerContent.svelte'
 	import DefaultScriptsInner from './DefaultScriptsInner.svelte'
 
-	let drawer: Drawer
-	export let placement: 'left' | 'right' = 'left'
+	let drawer: Drawer | undefined = $state()
 
-	export let size: 'xs3' | 'xs2' = 'xs2'
-	export let noText = false
+	interface Props {
+		placement?: 'left' | 'right'
+		size?: 'xs3' | 'xs2'
+		noText?: boolean
+	}
+
+	let { placement = 'left', size = 'xs2', noText = false }: Props = $props()
 </script>
 
 {#if $userStore?.is_admin || $userStore?.is_super_admin}
diff --git a/frontend/src/lib/components/DefaultScriptsInner.svelte b/frontend/src/lib/components/DefaultScriptsInner.svelte
index 6d4979aae1..1a451d8264 100644
--- a/frontend/src/lib/components/DefaultScriptsInner.svelte
+++ b/frontend/src/lib/components/DefaultScriptsInner.svelte
@@ -6,8 +6,11 @@
 	import { defaultScriptLanguages } from '$lib/scripts'
 	import Alert from './common/alert/Alert.svelte'
 
-	export let small = false
-	$: langs = computeLangs($defaultScripts)
+	interface Props {
+		small?: boolean;
+	}
+
+	let { small = false }: Props = $props();
 
 	function computeLangs(defaultScripts: WorkspaceDefaultScripts | undefined): Script['language'][] {
 		const allLangs = Object.keys(defaultScriptLanguages) as Script['language'][]
@@ -30,6 +33,7 @@
 			requestBody: $defaultScripts
 		})
 	}
+	let langs = $derived(computeLangs($defaultScripts))
 </script>
 
 <Alert title="Global to workspace" type="info" class="mb-4" size={small ? 'xs' : 'sm'}>
@@ -47,7 +51,7 @@
 			<div>
 				{#if i > 0}
 					<button
-						on:click={() => changePosition(i ?? 0, true)}
+						onclick={() => changePosition(i ?? 0, true)}
 						class={small ? 'mr-2 text-secondary text-sm' : 'text-lg mr-2'}
 						title="Move up"
 					>
@@ -56,7 +60,7 @@
 				{/if}
 				{#if i < langs.length - 1}
 					<button
-						on:click={() => changePosition(i ?? 0, false)}
+						onclick={() => changePosition(i ?? 0, false)}
 						class={small ? 'mr-2 text-secondary text-sm' : 'text-lg mr-2'}
 						title="Move down">&downarrow;</button
 					>
diff --git a/frontend/src/lib/components/DefaultTagsInner.svelte b/frontend/src/lib/components/DefaultTagsInner.svelte
index 610da15112..a5575c30f0 100644
--- a/frontend/src/lib/components/DefaultTagsInner.svelte
+++ b/frontend/src/lib/components/DefaultTagsInner.svelte
@@ -10,12 +10,16 @@
 	import MultiSelect from './select/MultiSelect.svelte'
 	import { safeSelectItems } from './select/utils.svelte'
 
-	let defaultTags: string[] | undefined = undefined
-	export let defaultTagPerWorkspace: boolean | undefined = undefined
-	export let defaultTagWorkspaces: string[] = []
-	let limitToWorkspaces = false
+	let defaultTags: string[] | undefined = $state(undefined)
+	interface Props {
+		defaultTagPerWorkspace?: boolean | undefined;
+		defaultTagWorkspaces?: string[];
+	}
 
-	let workspaces: string[] = []
+	let { defaultTagPerWorkspace = $bindable(undefined), defaultTagWorkspaces = $bindable([]) }: Props = $props();
+	let limitToWorkspaces = $state(false)
+
+	let workspaces: string[] = $state([])
 	async function loadWorkspaces() {
 		workspaces = (await WorkspaceService.listWorkspacesAsSuperAdmin()).map((m) => m.id)
 	}
diff --git a/frontend/src/lib/components/DeployToSetting.svelte b/frontend/src/lib/components/DeployToSetting.svelte
index 7add91c982..ed41f81d0a 100644
--- a/frontend/src/lib/components/DeployToSetting.svelte
+++ b/frontend/src/lib/components/DeployToSetting.svelte
@@ -9,9 +9,9 @@
 	import Toggle from './Toggle.svelte'
 	import { emptyString } from '$lib/utils'
 
-	$: deployableWorkspaces = $usersWorkspaceStore?.workspaces
-		.map((w) => w.id)
-		.filter((w) => w != $workspaceStore)
+	let deployableWorkspaces = $derived(
+		$usersWorkspaceStore?.workspaces.map((w) => w.id).filter((w) => w != $workspaceStore)
+	)
 
 	type DeployUITypeMap = {
 		scripts: boolean
@@ -34,14 +34,21 @@
 		triggers: true
 	}
 
-	export let workspaceToDeployTo: string | undefined
-	export let deployUiSettings: {
-		include_path: string[]
-		include_type: DeployUITypeMap
-	} = {
-		include_path: [],
-		include_type: all_ok
+	interface Props {
+		workspaceToDeployTo: string | undefined
+		deployUiSettings?: {
+			include_path: string[]
+			include_type: DeployUITypeMap
+		}
 	}
+
+	let {
+		workspaceToDeployTo = $bindable(),
+		deployUiSettings = $bindable({
+			include_path: [],
+			include_type: all_ok
+		})
+	}: Props = $props()
 	function deployUITypeMapToArray(
 		typesMap: DeployUITypeMap,
 		expectedValue: boolean
@@ -91,7 +98,7 @@
 <div class="flex min-w-0 mt-1">
 	<select
 		bind:value={workspaceToDeployTo}
-		on:change={async (e) => {
+		onchange={async (e) => {
 			await WorkspaceService.editDeployTo({
 				workspace: $workspaceStore ?? '',
 				requestBody: { deploy_to: workspaceToDeployTo == '' ? undefined : workspaceToDeployTo }
@@ -125,14 +132,14 @@
 					anything including slashes.
 				</Tooltip></h4
 			>
-			{#each deployUiSettings.include_path ?? [] as regexpPath, idx}
+			{#each deployUiSettings.include_path ?? [] as _, idx}
 				<div class="flex mt-1 items-center">
-					<input type="text" bind:value={regexpPath} id="arg-input-array" />
+					<input type="text" bind:value={deployUiSettings.include_path[idx]} id="arg-input-array" />
 					<button
 						transition:fade|local={{ duration: 100 }}
 						class="rounded-full p-1 bg-surface-secondary duration-200 hover:bg-surface-hover ml-2"
 						aria-label="Clear"
-						on:click={() => {
+						onclick={() => {
 							deployUiSettings.include_path.splice(idx, 1)
 							deployUiSettings.include_path = [...deployUiSettings.include_path]
 						}}
diff --git a/frontend/src/lib/components/DeployWorkspaceDrawer.svelte b/frontend/src/lib/components/DeployWorkspaceDrawer.svelte
index 6a83d96393..7ff58809e5 100644
--- a/frontend/src/lib/components/DeployWorkspaceDrawer.svelte
+++ b/frontend/src/lib/components/DeployWorkspaceDrawer.svelte
@@ -4,12 +4,12 @@
 	import DeployWorkspace from './DeployWorkspace.svelte'
 	import { type AdditionalInformation, type Kind } from '$lib/utils_deployable'
 
-	let initialPath: string | undefined = undefined
-	let kind: Kind | undefined = undefined
-	let drawer: Drawer | undefined = undefined
-	let workspaceToDeployTo: string | undefined = undefined
-	let deployWorkspace: DeployWorkspace | undefined = undefined
-	let additionalInformation: AdditionalInformation | undefined = undefined
+	let initialPath: string | undefined = $state(undefined)
+	let kind: Kind | undefined = $state(undefined)
+	let drawer: Drawer | undefined = $state(undefined)
+	let workspaceToDeployTo: string | undefined = $state(undefined)
+	let deployWorkspace: DeployWorkspace | undefined = $state(undefined)
+	let additionalInformation: AdditionalInformation | undefined = $state(undefined)
 
 	export async function openDrawer(
 		initialPath_l: string,
diff --git a/frontend/src/lib/components/Description.svelte b/frontend/src/lib/components/Description.svelte
index fb0e361eb9..29347345c1 100644
--- a/frontend/src/lib/components/Description.svelte
+++ b/frontend/src/lib/components/Description.svelte
@@ -1,3 +1,4 @@
+<!-- @migration-task Error while migrating Svelte code: $$props is used together with named props in a way that cannot be automatically migrated. -->
 <script lang="ts">
 	import { twMerge } from 'tailwind-merge'
 
diff --git a/frontend/src/lib/components/Dev.svelte b/frontend/src/lib/components/Dev.svelte
index 86ded3bc0d..7bce89f58c 100644
--- a/frontend/src/lib/components/Dev.svelte
+++ b/frontend/src/lib/components/Dev.svelte
@@ -21,7 +21,7 @@
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
 	import { onDestroy, onMount, setContext, untrack } from 'svelte'
 	import DarkModeToggle from '$lib/components/sidebar/DarkModeToggle.svelte'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import { getUserExt } from '$lib/user'
 	import FlowPreviewButtons from './flows/header/FlowPreviewButtons.svelte'
 	import FlowModuleSchemaMap from './flows/map/FlowModuleSchemaMap.svelte'
@@ -581,9 +581,9 @@
 			}
 		})
 	}
-	let token = $derived($page.url.searchParams.get('wm_token') ?? undefined)
-	let workspace = $derived($page.url.searchParams.get('workspace') ?? undefined)
-	let themeDarkRaw = $derived($page.url.searchParams.get('activeColorTheme'))
+	let token = $derived(page.url.searchParams.get('wm_token') ?? undefined)
+	let workspace = $derived(page.url.searchParams.get('workspace') ?? undefined)
+	let themeDarkRaw = $derived(page.url.searchParams.get('activeColorTheme'))
 	let themeDark = $derived(themeDarkRaw == '2' || themeDarkRaw == '4')
 
 	$effect.pre(() => {
diff --git a/frontend/src/lib/components/DisplayResult.svelte b/frontend/src/lib/components/DisplayResult.svelte
index 8da624ddd8..1c99a5ba62 100644
--- a/frontend/src/lib/components/DisplayResult.svelte
+++ b/frontend/src/lib/components/DisplayResult.svelte
@@ -27,7 +27,7 @@
 	import Toggle from './Toggle.svelte'
 	import FileDownload from './common/fileDownload/FileDownload.svelte'
 
-	import ParqetTableRenderer from './ParqetCsvTableRenderer.svelte'
+	import ParqetTableRenderer from './ParquetCsvTableRenderer.svelte'
 	import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte'
 	import MapResult from './MapResult.svelte'
diff --git a/frontend/src/lib/components/DurationMs.svelte b/frontend/src/lib/components/DurationMs.svelte
index 451925c0c6..60d2964ffe 100644
--- a/frontend/src/lib/components/DurationMs.svelte
+++ b/frontend/src/lib/components/DurationMs.svelte
@@ -4,9 +4,13 @@
 	import { Hourglass } from 'lucide-svelte'
 	import WaitTimeWarning from './common/waitTimeWarning/WaitTimeWarning.svelte'
 
-	export let duration_ms: number
-	export let self_wait_time_ms: number | undefined = undefined
-	export let aggregate_wait_time_ms: number | undefined = undefined
+	interface Props {
+		duration_ms: number;
+		self_wait_time_ms?: number | undefined;
+		aggregate_wait_time_ms?: number | undefined;
+	}
+
+	let { duration_ms, self_wait_time_ms = undefined, aggregate_wait_time_ms = undefined }: Props = $props();
 </script>
 
 <div>
diff --git a/frontend/src/lib/components/ExecutionDuration.svelte b/frontend/src/lib/components/ExecutionDuration.svelte
index 9044adff36..0b96607bfe 100644
--- a/frontend/src/lib/components/ExecutionDuration.svelte
+++ b/frontend/src/lib/components/ExecutionDuration.svelte
@@ -1,32 +1,40 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { type Job } from '$lib/gen'
 	import { isScriptPreview } from '$lib/utils'
 	import { onDestroy } from 'svelte'
 
-	export let job: Job | undefined = undefined
-	/** Execution duration of current active job (in ms) */
-	export let executionDuration: number = 0
-	/** Is current job running more than specified value in `longDefinition` seconds */
-	export let longRunning: boolean = false
-	/** What do we count as "long" (in ms)*/
-	export let longDefinition: number = 30_000
-	/** How often component updates execution duration (in ms)
+	
+	
+	
+	
+	interface Props {
+		job?: Job | undefined;
+		/** Execution duration of current active job (in ms) */
+		executionDuration?: number;
+		/** Is current job running more than specified value in `longDefinition` seconds */
+		longRunning?: boolean;
+		/** What do we count as "long" (in ms)*/
+		longDefinition?: number;
+		/** How often component updates execution duration (in ms)
 	 *   Higher value -> more efficient component is, less accuracy it has
 	 *   Lower value -> less efficient component is, more accuracy it has
 	 */
-	export let updateResolution: number = 5_000
+		updateResolution?: number;
+	}
+
+	let {
+		job = undefined,
+		executionDuration = $bindable(0),
+		longRunning = $bindable(false),
+		longDefinition = 30_000,
+		updateResolution = 5_000
+	}: Props = $props();
 
 	let startedAt: number | undefined = undefined
-	let busy: boolean = false
+	let busy: boolean = $state(false)
 	let interval: number | undefined
-	// Detect when execution of job started
-	$: if (
-		!busy &&
-		job &&
-		'running' in job &&
-		(job.job_kind == 'script' || isScriptPreview(job?.job_kind))
-	)
-		start(job)
 
 	function start(job: Job) {
 		busy = true
@@ -50,4 +58,14 @@
 		// Clear the interval when the component is destroyed
 		clearInterval(interval)
 	})
+	// Detect when execution of job started
+	run(() => {
+		if (
+			!busy &&
+			job &&
+			'running' in job &&
+			(job.job_kind == 'script' || isScriptPreview(job?.job_kind))
+		)
+			start(job)
+	});
 </script>
diff --git a/frontend/src/lib/components/FieldHeader.svelte b/frontend/src/lib/components/FieldHeader.svelte
index 87119c8e75..8b56bdfd79 100644
--- a/frontend/src/lib/components/FieldHeader.svelte
+++ b/frontend/src/lib/components/FieldHeader.svelte
@@ -5,19 +5,37 @@
 	import Tooltip from './meltComponents/Tooltip.svelte'
 	import { InfoIcon } from 'lucide-svelte'
 
-	export let label: string
-	export let format: string = ''
-	export let contentEncoding = ''
-	export let type: string | undefined = undefined
-	export let disabled: boolean = false
-	export let required = false
-	export let displayType: boolean = true
-	export let labelClass: string = ''
-	export let prettify = false
-	export let simpleTooltip: string | undefined = undefined
-	export let lightHeader = false
-	export let SimpleTooltipIcon = InfoIcon
-	export let simpleTooltipIconClass = ''
+	interface Props {
+		label: string;
+		format?: string;
+		contentEncoding?: string;
+		type?: string | undefined;
+		disabled?: boolean;
+		required?: boolean;
+		displayType?: boolean;
+		labelClass?: string;
+		prettify?: boolean;
+		simpleTooltip?: string | undefined;
+		lightHeader?: boolean;
+		SimpleTooltipIcon?: any;
+		simpleTooltipIconClass?: string;
+	}
+
+	let {
+		label,
+		format = '',
+		contentEncoding = '',
+		type = undefined,
+		disabled = false,
+		required = false,
+		displayType = true,
+		labelClass = '',
+		prettify = false,
+		simpleTooltip = undefined,
+		lightHeader = false,
+		SimpleTooltipIcon = InfoIcon,
+		simpleTooltipIconClass = ''
+	}: Props = $props();
 </script>
 
 <div class="inline-flex flex-row items-baseline truncated">
@@ -54,9 +72,11 @@
 	{#if !emptyString(simpleTooltip)}
 		<Tooltip class="ml-2" placement="bottom">
 			<SimpleTooltipIcon size="14" class={'-mb-0.5 ' + simpleTooltipIconClass} />
-			<span class="text-xs" slot="text">
-				{simpleTooltip}
-			</span>
+			{#snippet text()}
+						<span class="text-xs" >
+					{simpleTooltip}
+				</span>
+					{/snippet}
 		</Tooltip>
 	{/if}
 </div>
diff --git a/frontend/src/lib/components/FlowGraphViewer.svelte b/frontend/src/lib/components/FlowGraphViewer.svelte
index 5297ed3584..f305cb34e7 100644
--- a/frontend/src/lib/components/FlowGraphViewer.svelte
+++ b/frontend/src/lib/components/FlowGraphViewer.svelte
@@ -9,21 +9,34 @@
 	import { dfs } from './flows/dfs'
 	import { workspaceStore } from '$lib/stores'
 
-	export let flow: {
+
+	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;
 	}
 
-	export let overflowAuto = false
-	export let noSide = false
-	export let download = false
-	export let noGraph = false
-	export let triggerNode = false
-	export let stepDetail: FlowModule | string | undefined = undefined
-	export let workspace: string | undefined = $workspaceStore
+	let {
+		flow,
+		overflowAuto = false,
+		noSide = false,
+		download = false,
+		noGraph = false,
+		triggerNode = false,
+		stepDetail = $bindable(undefined),
+		workspace = $workspaceStore
+	}: Props = $props();
 
 	const dispatch = createEventDispatcher()
 </script>
diff --git a/frontend/src/lib/components/FlowGraphViewerStep.svelte b/frontend/src/lib/components/FlowGraphViewerStep.svelte
index 6fcb5c902c..46c7679723 100644
--- a/frontend/src/lib/components/FlowGraphViewerStep.svelte
+++ b/frontend/src/lib/components/FlowGraphViewerStep.svelte
@@ -18,16 +18,19 @@
 	import { Copy } from 'lucide-svelte'
 	import HighlightTheme from './HighlightTheme.svelte'
 
-	export let schema: any | undefined = undefined
+	interface Props {
+		schema?: any | undefined
+		stepDetail?: FlowModule | string | undefined
+	}
 
-	export let stepDetail: FlowModule | string | undefined = undefined
-	let codeViewer: Drawer
+	let { schema = undefined, stepDetail = undefined }: Props = $props()
+	let codeViewer: Drawer | undefined = $state()
 </script>
 
 <HighlightTheme />
 
 <Drawer bind:this={codeViewer} size="900px">
-	<DrawerContent title={'Expanded Code'} on:close={codeViewer.closeDrawer}>
+	<DrawerContent title={'Expanded Code'} on:close={() => codeViewer?.closeDrawer()}>
 		{#if stepDetail && typeof stepDetail != 'string'}
 			{#if stepDetail.value.type == 'script'}
 				<div class="mb-4">
@@ -170,7 +173,12 @@
 			<div>
 				<div class="mb-2 mt-4 flex justify-between items-center">
 					<h3 class="font-semibold">Code</h3>
-					<Button size="xs2" color="light" variant="contained" on:click={codeViewer.openDrawer}>
+					<Button
+						size="xs2"
+						color="light"
+						variant="contained"
+						on:click={() => codeViewer?.openDrawer()}
+					>
 						Expand
 					</Button>
 				</div>
@@ -205,7 +213,12 @@
 				<div class="flex flex-col grow">
 					<div class="mb-2 flex justify-between items-center">
 						<h3 class="font-semibold">Code</h3>
-						<Button size="xs2" color="light" variant="contained" on:click={codeViewer.openDrawer}>
+						<Button
+							size="xs2"
+							color="light"
+							variant="contained"
+							on:click={() => codeViewer?.openDrawer()}
+						>
 							Expand
 						</Button>
 					</div>
diff --git a/frontend/src/lib/components/FlowInputViewer.svelte b/frontend/src/lib/components/FlowInputViewer.svelte
index 94c25ffcc4..62aef2dd37 100644
--- a/frontend/src/lib/components/FlowInputViewer.svelte
+++ b/frontend/src/lib/components/FlowInputViewer.svelte
@@ -3,7 +3,11 @@
 
 	import FieldHeader from './FieldHeader.svelte'
 
-	export let schema: Schema | { [key: string]: unknown } | undefined
+	interface Props {
+		schema: Schema | { [key: string]: unknown } | undefined;
+	}
+
+	let { schema }: Props = $props();
 </script>
 
 <ul class="my-2">
diff --git a/frontend/src/lib/components/FlowPlugConnect.svelte b/frontend/src/lib/components/FlowPlugConnect.svelte
index 10b00e7301..6640a7e137 100644
--- a/frontend/src/lib/components/FlowPlugConnect.svelte
+++ b/frontend/src/lib/components/FlowPlugConnect.svelte
@@ -4,9 +4,13 @@
 	import AnimatedButton from './common/button/AnimatedButton.svelte'
 	import { twMerge } from 'tailwind-merge'
 
-	export let connecting: boolean
-	export let id: undefined | string = undefined
-	export let wrapperClasses = ''
+	interface Props {
+		connecting: boolean;
+		id?: undefined | string;
+		wrapperClasses?: string;
+	}
+
+	let { connecting, id = undefined, wrapperClasses = '' }: Props = $props();
 </script>
 
 <AnimatedButton animate={connecting} baseRadius="6px" animationDuration="2s" marginWidth="2px">
diff --git a/frontend/src/lib/components/FlowStatusWaitingForEvents.svelte b/frontend/src/lib/components/FlowStatusWaitingForEvents.svelte
index 0ea5ad4d6b..4f1667dbdb 100644
--- a/frontend/src/lib/components/FlowStatusWaitingForEvents.svelte
+++ b/frontend/src/lib/components/FlowStatusWaitingForEvents.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { mergeSchema } from '$lib/common'
 	import { type Job, JobService } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
@@ -9,23 +11,30 @@
 	import { Button } from './common'
 	import SchemaForm from './SchemaForm.svelte'
 
-	export let isOwner: boolean
-	export let workspaceId: string | undefined
-	export let job: Job
-	export let light: boolean = false
+	interface Props {
+		isOwner: boolean;
+		workspaceId: string | undefined;
+		job: Job;
+		light?: boolean;
+	}
 
-	let default_payload: object = {}
-	let resumeUrl: string | undefined = undefined
-	let cancelUrl: string | undefined = undefined
-	let description: any = undefined
-	let hide_cancel = false
+	let {
+		isOwner,
+		workspaceId,
+		job,
+		light = false
+	}: Props = $props();
 
-	$: approvalStep = (job?.flow_status?.step ?? 1) - 1
+	let default_payload: object = $state({})
+	let resumeUrl: string | undefined = $state(undefined)
+	let cancelUrl: string | undefined = $state(undefined)
+	let description: any = $state(undefined)
+	let hide_cancel = $state(false)
 
-	let defaultValues = {}
-	$: job && getDefaultArgs()
 
-	let schema = {}
+	let defaultValues = $state({})
+
+	let schema = $state({})
 	let lastJobId: string | undefined = undefined
 	async function getDefaultArgs() {
 		let jobId = job?.flow_status?.modules?.[approvalStep]?.job
@@ -113,6 +122,10 @@
 			}
 		}
 	}
+	let approvalStep = $derived((job?.flow_status?.step ?? 1) - 1)
+	run(() => {
+		job && getDefaultArgs()
+	});
 </script>
 
 <div class="w-full h-full mt-2 text-xs text-primary">
diff --git a/frontend/src/lib/components/FolderEditor.svelte b/frontend/src/lib/components/FolderEditor.svelte
index a2023240cf..9ab5ec7293 100644
--- a/frontend/src/lib/components/FolderEditor.svelte
+++ b/frontend/src/lib/components/FolderEditor.svelte
@@ -267,7 +267,8 @@
 			{#if perms}
 				<TableCustom>
 					<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
-					<tr slot="header-row">
+					<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
+	<tr slot="header-row">
 						<th>user/group</th>
 						<th></th>
 						<th></th>
diff --git a/frontend/src/lib/components/FolderUsageInfo.svelte b/frontend/src/lib/components/FolderUsageInfo.svelte
index ab3241083a..cc706da9ed 100644
--- a/frontend/src/lib/components/FolderUsageInfo.svelte
+++ b/frontend/src/lib/components/FolderUsageInfo.svelte
@@ -1,19 +1,27 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { FolderService } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
 	import Cell from './table/Cell.svelte'
 
-	export let name: string
-	export let tabular = false
-	export let order = ['scripts', 'flows', 'apps', 'schedules', 'variables', 'resources']
+	interface Props {
+		name: string;
+		tabular?: boolean;
+		order?: any;
+	}
 
-	$: $workspaceStore && loadUsage()
+	let { name, tabular = false, order = ['scripts', 'flows', 'apps', 'schedules', 'variables', 'resources'] }: Props = $props();
 
-	let usage: Record<string, number> = {}
+
+	let usage: Record<string, number> = $state({})
 
 	async function loadUsage() {
 		usage = await FolderService.getFolderUsage({ workspace: $workspaceStore!, name })
 	}
+	run(() => {
+		$workspaceStore && loadUsage()
+	});
 </script>
 
 {#if tabular}
diff --git a/frontend/src/lib/components/GfmMarkdown.svelte b/frontend/src/lib/components/GfmMarkdown.svelte
index 7392de5484..9dfe144bd3 100644
--- a/frontend/src/lib/components/GfmMarkdown.svelte
+++ b/frontend/src/lib/components/GfmMarkdown.svelte
@@ -3,7 +3,11 @@
 	import { gfmPlugin } from 'svelte-exmarkdown/gfm'
 	import rehypeRaw from 'rehype-raw'
 	import { rehypeGithubAlerts } from 'rehype-github-alerts'
-	export let md: string
+	interface Props {
+		md: string;
+	}
+
+	let { md }: Props = $props();
 	const plugins: Plugin[] = [
 		gfmPlugin(),
 		{ rehypePlugin: [rehypeRaw] },
diff --git a/frontend/src/lib/components/GraphqlSchemaViewer.svelte b/frontend/src/lib/components/GraphqlSchemaViewer.svelte
index 3f85839772..7e022798ca 100644
--- a/frontend/src/lib/components/GraphqlSchemaViewer.svelte
+++ b/frontend/src/lib/components/GraphqlSchemaViewer.svelte
@@ -1,3 +1,4 @@
+<!-- @migration-task Error while migrating Svelte code: $$props is used together with named props in a way that cannot be automatically migrated. -->
 <script lang="ts">
 	import { BROWSER } from 'esm-env'
 
diff --git a/frontend/src/lib/components/GroupEditor.svelte b/frontend/src/lib/components/GroupEditor.svelte
index bdea0c4533..9bc5fa8b18 100644
--- a/frontend/src/lib/components/GroupEditor.svelte
+++ b/frontend/src/lib/components/GroupEditor.svelte
@@ -149,7 +149,8 @@
 		{#if members}
 			<TableCustom>
 				<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
-				<tr slot="header-row">
+				<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
+	<tr slot="header-row">
 					<th>user</th>
 					<th></th>
 					<th></th>
@@ -291,7 +292,8 @@
 				<h2 class="mt-6 text-emphasis text-xs font-semibold">Members from the instance group</h2>
 				<TableCustom>
 					<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
-					<tr slot="header-row">
+					<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
+	<tr slot="header-row">
 						<th>user</th>
 					</tr>
 					{#snippet body()}
diff --git a/frontend/src/lib/components/HighlightCode.svelte b/frontend/src/lib/components/HighlightCode.svelte
index 63e1d8a999..f516b4d5ca 100644
--- a/frontend/src/lib/components/HighlightCode.svelte
+++ b/frontend/src/lib/components/HighlightCode.svelte
@@ -132,8 +132,10 @@
 			{#if !lines}
 				<Highlight class="nowrap {className}" language={lang} {code} />
 			{:else}
-				<Highlight class="nowrap {className}" language={lang} {code} let:highlighted>
-					<LineNumbers {highlighted} />
+				<Highlight class="nowrap {className}" language={lang} {code}>
+					{#snippet children({ highlighted })}
+						<LineNumbers {highlighted} />
+					{/snippet}
 				</Highlight>
 			{/if}
 		{:else}
diff --git a/frontend/src/lib/components/IconedPath.svelte b/frontend/src/lib/components/IconedPath.svelte
index 72b83c8a48..8a11695d2a 100644
--- a/frontend/src/lib/components/IconedPath.svelte
+++ b/frontend/src/lib/components/IconedPath.svelte
@@ -1,3 +1,4 @@
+<!-- @migration-task Error while migrating Svelte code: $$props is used together with named props in a way that cannot be automatically migrated. -->
 <script lang="ts">
 	import { truncateHash } from '$lib/utils'
 	import { Building } from 'lucide-svelte'
diff --git a/frontend/src/lib/components/InputTransformsViewer.svelte b/frontend/src/lib/components/InputTransformsViewer.svelte
index d5867ba8dc..f001ed1d37 100644
--- a/frontend/src/lib/components/InputTransformsViewer.svelte
+++ b/frontend/src/lib/components/InputTransformsViewer.svelte
@@ -3,8 +3,12 @@
 	import { cleanExpr } from '$lib/utils'
 	import ObjectViewer from './propertyPicker/ObjectViewer.svelte'
 
-	export let inputTransforms: Record<string, InputTransform>
-	$: entries = Object.entries(inputTransforms)
+	interface Props {
+		inputTransforms: Record<string, InputTransform>;
+	}
+
+	let { inputTransforms }: Props = $props();
+	let entries = $derived(Object.entries(inputTransforms))
 </script>
 
 {#if entries.length}
diff --git a/frontend/src/lib/components/InstanceGroupEditor.svelte b/frontend/src/lib/components/InstanceGroupEditor.svelte
index cf2a3ded0a..a518ef9bd5 100644
--- a/frontend/src/lib/components/InstanceGroupEditor.svelte
+++ b/frontend/src/lib/components/InstanceGroupEditor.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { GroupService, type InstanceGroup } from '$lib/gen'
 	import { createEventDispatcher } from 'svelte'
 	import autosize from '$lib/autosize'
@@ -8,17 +10,18 @@
 	import { sendUserToast } from '$lib/toast'
 	import { Loader2 } from 'lucide-svelte'
 
-	export let name: string
+	interface Props {
+		name: string;
+	}
 
-	let email = ''
-	let instance_group: InstanceGroup | undefined
-	let members: { member_email: string }[] | undefined = undefined
+	let { name }: Props = $props();
+
+	let email = $state('')
+	let instance_group: InstanceGroup | undefined = $state()
+	let members: { member_email: string }[] | undefined = $state(undefined)
 
 	const dispatch = createEventDispatcher()
 
-	$: {
-		load()
-	}
 
 	async function load() {
 		return Promise.all([loadInstanceGroup()])
@@ -32,6 +35,9 @@
 				})
 			: []
 	}
+	run(() => {
+		load()
+	});
 </script>
 
 <div class="flex flex-col gap-6">
@@ -85,17 +91,19 @@
 		</div>
 		{#if members}
 			<TableCustom>
-				<tr slot="header-row">
+				<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
+	<tr slot="header-row">
 					<th>user</th>
 					<th></th>
 				</tr>
-				<tbody slot="body">
-					{#each members as { member_email }}<tr>
-							<td>{member_email}</td>
-							<td>
-								<button
-									class="ml-2 text-red-500"
-									on:click={async () => {
+				{#snippet body()}
+								<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 }
@@ -104,10 +112,11 @@
 										sendUserToast('User removed')
 										loadInstanceGroup()
 									}}>remove</button
-								>
-							</td>
-						</tr>{/each}
-				</tbody>
+									>
+								</td>
+							</tr>{/each}
+					</tbody>
+							{/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 502396022f..fae89b33f9 100644
--- a/frontend/src/lib/components/InstanceNameEditor.svelte
+++ b/frontend/src/lib/components/InstanceNameEditor.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	import { stopPropagation, createBubbler } from 'svelte/legacy'
+
+	const bubble = createBubbler()
 	import { Pencil } from 'lucide-svelte'
 	import { createEventDispatcher } from 'svelte'
 	import Button from './common/button/Button.svelte'
@@ -9,13 +12,23 @@
 	import { sendUserToast } from '$lib/toast'
 	import TextInput from './text_input/TextInput.svelte'
 
-	export let value: string | undefined
-	export let email: string
-	export let username: string | undefined = undefined
-	export let automateUsernameCreation: boolean = false
-	export let login_type: string
+	interface Props {
+		value: string | undefined
+		email: string
+		username?: string | undefined
+		automateUsernameCreation?: boolean
+		login_type: string
+	}
 
-	let password: string = ''
+	let {
+		value = $bindable(),
+		email,
+		username = undefined,
+		automateUsernameCreation = false,
+		login_type = $bindable()
+	}: Props = $props()
+
+	let password: string = $state('')
 
 	const dispatch = createEventDispatcher()
 
@@ -46,10 +59,10 @@
 	}}
 	closeButton
 >
-	<svelte:fragment slot="trigger">
+	{#snippet trigger()}
 		<Button nonCaptureEvent={true} size="xs" color="light" endIcon={{ icon: Pencil }}>Edit</Button>
-	</svelte:fragment>
-	<svelte:fragment slot="content">
+	{/snippet}
+	{#snippet content()}
 		<div class="flex flex-col gap-8 max-w-sm p-4">
 			{#if automateUsernameCreation && username}
 				<ChangeInstanceUsernameInner {email} {username} on:renamed noPadding />
@@ -94,13 +107,13 @@
 						type="password"
 						bind:value={password}
 						class="!w-auto grow"
-						on:click|stopPropagation={() => {}}
-						on:keydown|stopPropagation
-						on:keypress|stopPropagation={({ key }) => {
+						onclick={stopPropagation(() => {})}
+						onkeydown={stopPropagation(bubble('keydown'))}
+						onkeypress={stopPropagation(({ key }) => {
 							if (key === 'Enter') {
 								savePassword()
 							}
-						}}
+						})}
 					/>
 				</div>
 				<Button
@@ -124,13 +137,13 @@
 						type="text"
 						bind:value={login_type}
 						class="!w-auto grow"
-						on:click|stopPropagation={() => {}}
-						on:keydown|stopPropagation
-						on:keypress|stopPropagation={({ key }) => {
+						onclick={stopPropagation(() => {})}
+						onkeydown={stopPropagation(bubble('keydown'))}
+						onkeypress={stopPropagation(({ key }) => {
 							if (key === 'Enter') {
 								saveLoginType()
 							}
-						}}
+						})}
 					/>
 				</div>
 				<div class="text-2xs text-secondary mb-1">
@@ -151,5 +164,5 @@
 				</Button>
 			</label>
 		</div>
-	</svelte:fragment>
+	{/snippet}
 </Popover>
diff --git a/frontend/src/lib/components/InviteGlobalUser.svelte b/frontend/src/lib/components/InviteGlobalUser.svelte
index a8f7edd13e..0374c92758 100644
--- a/frontend/src/lib/components/InviteGlobalUser.svelte
+++ b/frontend/src/lib/components/InviteGlobalUser.svelte
@@ -9,9 +9,9 @@
 
 	const dispatch = createEventDispatcher()
 
-	let is_super_admin = false
-	let password: string = generateRandomString(10)
-	let name: string | undefined
+	let is_super_admin = $state(false)
+	let password: string = $state(generateRandomString(10))
+	let name: string | undefined = $state()
 	let company: string | undefined
 
 	async function addUser() {
diff --git a/frontend/src/lib/components/JsonInputs.svelte b/frontend/src/lib/components/JsonInputs.svelte
index 8310098e0f..8c0955b574 100644
--- a/frontend/src/lib/components/JsonInputs.svelte
+++ b/frontend/src/lib/components/JsonInputs.svelte
@@ -4,14 +4,17 @@
 
 	const dispatch = createEventDispatcher()
 
-	export let updateOnBlur = true
-	export let placeholder =
-		'Write a JSON payload. The input schema will be inferred.<br/><br/>Example:<br/><br/>{<br/>&nbsp;&nbsp;"foo": "12"<br/>}'
-	export let selected: boolean = false
+	interface Props {
+		updateOnBlur?: boolean;
+		placeholder?: string;
+		selected?: boolean;
+	}
 
-	let pendingJson = ''
-	let simpleEditor: SimpleEditor | undefined = undefined
-	let focusTrap: HTMLElement | undefined
+	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 }: Props = $props();
+
+	let pendingJson = $state('')
+	let simpleEditor: SimpleEditor | undefined = $state(undefined)
+	let focusTrap: HTMLElement | undefined = $state()
 
 	function updatePayloadFromJson(jsonInput: string) {
 		if (jsonInput === undefined || jsonInput === null || jsonInput.trim() === '') {
@@ -44,7 +47,7 @@
 	}
 </script>
 
-<svelte:window on:keydown={handleKeydown} />
+<svelte:window onkeydown={handleKeydown} />
 
 <!-- Add a hidden button that can receive focus -->
 <button bind:this={focusTrap} class="sr-only" tabindex="-1" aria-hidden="true">Focus trap</button>
diff --git a/frontend/src/lib/components/KanidmSetting.svelte b/frontend/src/lib/components/KanidmSetting.svelte
index c15ab6e022..9a651958e3 100644
--- a/frontend/src/lib/components/KanidmSetting.svelte
+++ b/frontend/src/lib/components/KanidmSetting.svelte
@@ -1,22 +1,20 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import IconedResourceType from './IconedResourceType.svelte'
 	import Toggle from './Toggle.svelte'
 
-	export let value: any
+	interface Props {
+		value: any;
+	}
+
+	let { value = $bindable() }: Props = $props();
 
 	const AUTH_URL_SUFFIX = '/ui/oauth2'
 
-	$: enabled = value != undefined
 
-	// If `baseUrl` is not already set in the form, try to parse it from the `auth_url` value
-	//
-	// The binding dance here allows us to avoid rendering the string 'undefined' in the input, and
-	// also allow lazy/async binding of the `value` prop.
-	$: derivedBaseUrl = value?.connect_config?.auth_url?.replace(AUTH_URL_SUFFIX, '')
-	let proxyUrlValue = undefined
-	$: baseUrl = proxyUrlValue ?? derivedBaseUrl ?? ''
+	let proxyUrlValue = $state(undefined)
 
-	$: changeValues({ baseUrl, id: value?.id ?? '' })
 
 	function changeValues({ baseUrl, id }) {
 		if (value) {
@@ -38,10 +36,20 @@
 			proxyUrlValue = baseUrl
 		}
 	}
+	let enabled = $derived(value != undefined)
+	// If `baseUrl` is not already set in the form, try to parse it from the `auth_url` value
+	//
+	// The binding dance here allows us to avoid rendering the string 'undefined' in the input, and
+	// 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(() => {
+		changeValues({ baseUrl, id: value?.id ?? '' })
+	});
 </script>
 
 <div class="flex flex-col gap-1">
-	<!-- svelte-ignore a11y-label-has-associated-control -->
+	<!-- svelte-ignore a11y_label_has_associated_control -->
 	<label class="text-sm font-medium text-primary flex gap-4 items-center"
 		><div class="w-[120px]"><IconedResourceType name={'kanidm'} after={true} /></div><Toggle
 			checked={enabled}
diff --git a/frontend/src/lib/components/KeycloakSetting.svelte b/frontend/src/lib/components/KeycloakSetting.svelte
index 214b26d288..5405b4790d 100644
--- a/frontend/src/lib/components/KeycloakSetting.svelte
+++ b/frontend/src/lib/components/KeycloakSetting.svelte
@@ -1,14 +1,18 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import IconedResourceType from './IconedResourceType.svelte'
 	import Toggle from './Toggle.svelte'
 
-	export let value: any
+	interface Props {
+		value: any;
+	}
 
-	$: enabled = value != undefined
+	let { value = $bindable() }: Props = $props();
 
-	let org = ''
 
-	$: changeOrg(org)
+	let org = $state('')
+
 
 	function changeOrg(org) {
 		if (value) {
@@ -28,10 +32,14 @@
 			}
 		}
 	}
+	let enabled = $derived(value != undefined)
+	run(() => {
+		changeOrg(org)
+	});
 </script>
 
 <div class="flex flex-col gap-1">
-	<!-- svelte-ignore a11y-label-has-associated-control -->
+	<!-- svelte-ignore a11y_label_has_associated_control -->
 	<label class="text-sm font-medium text-primary flex gap-4 items-center"
 		><div class="w-[120px]"><IconedResourceType name={'keycloak'} after={true} /></div><Toggle
 			checked={enabled}
diff --git a/frontend/src/lib/components/LogId.svelte b/frontend/src/lib/components/LogId.svelte
index bb90a700cf..cadbe14e0c 100644
--- a/frontend/src/lib/components/LogId.svelte
+++ b/frontend/src/lib/components/LogId.svelte
@@ -1,5 +1,13 @@
 <script lang="ts">
-	export let id: string
+	import { run } from 'svelte/legacy';
 
-	$: id && console.log('updateJobId')
+	interface Props {
+		id: string;
+	}
+
+	let { id }: Props = $props();
+
+	run(() => {
+		id && console.log('updateJobId')
+	});
 </script>
diff --git a/frontend/src/lib/components/LogSnippetViewer.svelte b/frontend/src/lib/components/LogSnippetViewer.svelte
index 1781351573..97828cd3f2 100644
--- a/frontend/src/lib/components/LogSnippetViewer.svelte
+++ b/frontend/src/lib/components/LogSnippetViewer.svelte
@@ -1,8 +1,15 @@
 <script lang="ts">
-	import { AnsiUp } from 'ansi_up'
+	import { createBubbler } from 'svelte/legacy'
 
-	export let content: string
-	export let highlighted: any[]
+	const bubble = createBubbler()
+	import { AnsiUp } from 'ansi_up'
+	interface Props {
+		content: string
+		highlighted: any[]
+		onClick?: () => void
+	}
+
+	let { content, highlighted, onClick }: Props = $props()
 
 	const ansi_up = new AnsiUp()
 	ansi_up.use_classes = true
@@ -30,7 +37,13 @@
 	let html = highlightSnippet(content)
 </script>
 
-<button on:click class="font-light !m-0 !p-0">
+<button
+	onclick={() => {
+		onClick?.()
+		bubble('click')
+	}}
+	class="font-light !m-0 !p-0"
+>
 	<pre
 		class="bg-surface-secondary hover:bg-surface px-2 py-1 text-secondary text-xs w-[100%] whitespace-pre border min-w-full text-start">
 {@html html}
diff --git a/frontend/src/lib/components/ManualPopover.svelte b/frontend/src/lib/components/ManualPopover.svelte
index ddeadf79cc..8182cfcf9b 100644
--- a/frontend/src/lib/components/ManualPopover.svelte
+++ b/frontend/src/lib/components/ManualPopover.svelte
@@ -1,3 +1,4 @@
+<!-- @migration-task Error while migrating Svelte code: $$props is used together with named props in a way that cannot be automatically migrated. -->
 <script lang="ts">
 	import { createPopperActions } from 'svelte-popperjs'
 	import type { PopoverPlacement } from './Popover.model'
diff --git a/frontend/src/lib/components/MapResult.svelte b/frontend/src/lib/components/MapResult.svelte
index 60a33c8a66..3b225efba8 100644
--- a/frontend/src/lib/components/MapResult.svelte
+++ b/frontend/src/lib/components/MapResult.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { Map, View, Feature } from 'ol'
 	import { Fill, Stroke, Style, Text } from 'ol/style.js'
 	import { useGeographic } from 'ol/proj'
@@ -18,17 +20,26 @@
 		strokeColor?: string
 	}
 
-	export let lon: number | undefined = undefined
-	export let lat: number | undefined = undefined
-	export let zoom: number | undefined = undefined
-	export let markers: Marker[] | string | undefined = undefined
+	interface Props {
+		lon?: number | undefined;
+		lat?: number | undefined;
+		zoom?: number | undefined;
+		markers?: Marker[] | string | undefined;
+	}
+
+	let {
+		lon = undefined,
+		lat = undefined,
+		zoom = undefined,
+		markers = undefined
+	}: Props = $props();
 
 	const LAYER_NAME = {
 		MARKER: 'Marker'
 	} as const
 
-	let map: Map | undefined = undefined
-	let mapElement: HTMLDivElement | undefined = undefined
+	let map: Map | undefined = $state(undefined)
+	let mapElement: HTMLDivElement | undefined = $state(undefined)
 
 	function getLayersByName(name: keyof typeof LAYER_NAME) {
 		return map
@@ -100,36 +111,38 @@
 		createMarkerLayers()?.forEach((l) => map?.addLayer(l))
 	}
 
-	$: if (!map && mapElement) {
-		useGeographic()
-		map = new Map({
-			target: mapElement,
-			layers: [
-				new TileLayer({
-					source: new OSM()
+	run(() => {
+		if (!map && mapElement) {
+			useGeographic()
+			map = new Map({
+				target: mapElement,
+				layers: [
+					new TileLayer({
+						source: new OSM()
+					}),
+					...(createMarkerLayers() || [])
+				],
+				view: new View({
+					center: [lon ?? 0, lat ?? 0],
+					zoom: zoom ?? 2
 				}),
-				...(createMarkerLayers() || [])
-			],
-			view: new View({
-				center: [lon ?? 0, lat ?? 0],
-				zoom: zoom ?? 2
-			}),
-			controls: defaultControls({
-				attribution: false
+				controls: defaultControls({
+					attribution: false
+				})
 			})
-		})
-		if (lat && lon) {
-			map.getView().setCenter([lon, lat])
-		}
+			if (lat && lon) {
+				map.getView().setCenter([lon, lat])
+			}
 
-		if (map && zoom) {
-			map.getView().setZoom(zoom)
-		}
+			if (map && zoom) {
+				map.getView().setZoom(zoom)
+			}
 
-		if (map && markers) {
-			updateMarkers()
+			if (map && markers) {
+				updateMarkers()
+			}
 		}
-	}
+	});
 </script>
 
 <div bind:this={mapElement} class="w-full h-[300px]"></div>
diff --git a/frontend/src/lib/components/MemoryFootprintViewer.svelte b/frontend/src/lib/components/MemoryFootprintViewer.svelte
index afcdfb82a4..df3ecdb0f4 100644
--- a/frontend/src/lib/components/MemoryFootprintViewer.svelte
+++ b/frontend/src/lib/components/MemoryFootprintViewer.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { type MetricDataPoint, MetricsService } from '$lib/gen'
 	import { displayTime } from '$lib/utils'
 	import { enterpriseLicense, workspaceStore } from '$lib/stores'
@@ -17,16 +19,20 @@
 
 	ChartJS.register(Title, Tooltip, Legend, LineElement, LinearScale, PointElement, CategoryScale)
 
-	export let jobId: string
-	export let jobUpdateLastFetch: Date | undefined
+	interface Props {
+		jobId: string;
+		jobUpdateLastFetch: Date | undefined;
+	}
+
+	let { jobId, jobUpdateLastFetch }: Props = $props();
 
 	let jobMetricsLastFetch: Date | undefined = undefined
-	let jobMemoryStats: MetricDataPoint[] | undefined = undefined
+	let jobMemoryStats: MetricDataPoint[] | undefined = $state(undefined)
 
 	let data: {
 		x: number
 		y: number
-	}[] = []
+	}[] = $state([])
 	let labels: string[] = []
 
 	async function loadMetricsData() {
@@ -66,7 +72,9 @@
 		data = [...data]
 	}
 
-	$: jobUpdateLastFetch && loadMetricsData()
+	run(() => {
+		jobUpdateLastFetch && loadMetricsData()
+	});
 </script>
 
 <div class="relative max-h-100">
diff --git a/frontend/src/lib/components/ModuleStatus.svelte b/frontend/src/lib/components/ModuleStatus.svelte
index 645097b3d0..09417ec023 100644
--- a/frontend/src/lib/components/ModuleStatus.svelte
+++ b/frontend/src/lib/components/ModuleStatus.svelte
@@ -5,9 +5,13 @@
 	import { displayDate } from '$lib/utils'
 	import { Hourglass } from 'lucide-svelte'
 
-	export let type: FlowStatusModule['type']
-	export let scheduled_for: Date | undefined
-	export let skipped: boolean = false
+	interface Props {
+		type: FlowStatusModule['type'];
+		scheduled_for: Date | undefined;
+		skipped?: boolean;
+	}
+
+	let { type, scheduled_for, skipped = false }: Props = $props();
 </script>
 
 {#if type == 'WaitingForEvents'}
diff --git a/frontend/src/lib/components/MoveDrawer.svelte b/frontend/src/lib/components/MoveDrawer.svelte
index 2979987629..8014969403 100644
--- a/frontend/src/lib/components/MoveDrawer.svelte
+++ b/frontend/src/lib/components/MoveDrawer.svelte
@@ -11,14 +11,14 @@
 
 	type Kind = 'script' | 'resource' | 'schedule' | 'variable' | 'flow' | 'app' | 'raw_app'
 
-	let kind: Kind
-	let initialPath: string = ''
-	let path: string | undefined = undefined
-	let summary: undefined | string = undefined
+	let kind: Kind = $state('script')
+	let initialPath: string = $state('')
+	let path: string | undefined = $state(undefined)
+	let summary: undefined | string = $state(undefined)
 
-	let drawer: Drawer
+	let drawer: Drawer | undefined = $state()
 
-	let own = false
+	let own = $state(false)
 	export async function openDrawer(
 		initialPath_l: string,
 		summary_l: string | undefined,
@@ -29,7 +29,7 @@
 		initialPath = initialPath_l
 		summary = summary_l
 		loadOwner()
-		drawer.openDrawer()
+		drawer?.openDrawer()
 	}
 
 	function loadOwner() {
@@ -94,7 +94,7 @@
 			})
 		}
 		dispatch('update', path)
-		drawer.closeDrawer()
+		drawer?.closeDrawer()
 	}
 </script>
 
diff --git a/frontend/src/lib/components/OAuthSetting.svelte b/frontend/src/lib/components/OAuthSetting.svelte
index 5d25c26ead..87a320319b 100644
--- a/frontend/src/lib/components/OAuthSetting.svelte
+++ b/frontend/src/lib/components/OAuthSetting.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { X } from 'lucide-svelte'
 	import CollapseLink from './CollapseLink.svelte'
 	import IconedResourceType from './IconedResourceType.svelte'
@@ -6,15 +8,22 @@
 	import { onMount } from 'svelte'
 	import { enterpriseLicense } from '$lib/stores'
 
-	export let name: string
-	export let value: any
-	export let login = true
-	export let eeOnly = false
+	interface Props {
+		name: string;
+		value: any;
+		login?: boolean;
+		eeOnly?: boolean;
+	}
 
-	$: enabled = value != undefined && !(eeOnly && !$enterpriseLicense)
+	let {
+		name,
+		value = $bindable(),
+		login = true,
+		eeOnly = false
+	}: Props = $props();
 
-	let tenant: string = ''
-	$: (name == 'microsoft' || name == 'teams') && changeTenantId(tenant)
+
+	let tenant: string = $state('')
 
 	onMount(() => {
 		try {
@@ -60,10 +69,14 @@
 			}
 		}
 	}
+	let enabled = $derived(value != undefined && !(eeOnly && !$enterpriseLicense))
+	run(() => {
+		(name == 'microsoft' || name == 'teams') && changeTenantId(tenant)
+	});
 </script>
 
 <div class="flex flex-col">
-	<!-- svelte-ignore a11y-label-has-associated-control -->
+	<!-- svelte-ignore a11y_label_has_associated_control -->
 	<label
 		class="text-sm flex gap-4 items-center font-medium text-primary {enabled ? 'rounded py-2' : ''}"
 		><div class="w-[120px]"><IconedResourceType {name} after={true} /></div><Toggle
@@ -116,7 +129,7 @@
 									class="max-w-96 w-full"
 									type="text"
 									bind:value={value['allowed_domains'][idx]}
-									on:keyup={(e) => {
+									onkeyup={(e) => {
 										if (domain == '') {
 											value['allowed_domains'] = value['allowed_domains']?.filter(
 												(d) => d != domain
@@ -126,7 +139,7 @@
 								/>
 								<button
 									class="text-primary text-xs rounded hover:bg-surface-hover"
-									on:click={() => {
+									onclick={() => {
 										value['allowed_domains'] = value['allowed_domains']?.filter((d) => d != domain)
 										if (value['allowed_domains'].length == 0) {
 											value['allowed_domains'] = undefined
@@ -140,7 +153,7 @@
 						<div class="flex gap-2">
 							<button
 								class="text-primary text-sm border rounded p-1"
-								on:click={() => {
+								onclick={() => {
 									value['allowed_domains'] = [...(value['allowed_domains'] ?? []), 'mydomain.com']
 								}}>+ Add domain</button
 							>
diff --git a/frontend/src/lib/components/OauthExtraParams.svelte b/frontend/src/lib/components/OauthExtraParams.svelte
index 71aa4e1e79..e19d55e7f0 100644
--- a/frontend/src/lib/components/OauthExtraParams.svelte
+++ b/frontend/src/lib/components/OauthExtraParams.svelte
@@ -2,9 +2,13 @@
 	import { Button } from './common'
 	import { Minus, Plus } from 'lucide-svelte'
 
-	export let extra_params: Record<string, string> = {}
+	interface Props {
+		extra_params?: Record<string, string>;
+	}
 
-	let extra_params_vec: [string, string][] = Object.entries(extra_params)
+	let { extra_params = $bindable({}) }: Props = $props();
+
+	let extra_params_vec: [string, string][] = $state(Object.entries(extra_params))
 
 	function sync() {
 		extra_params = Object.fromEntries(extra_params_vec)
@@ -13,8 +17,8 @@
 
 {#each extra_params_vec as o}
 	<div class="flex flex-row max-w-md mb-2">
-		<input type="text" on:keyup={sync} bind:value={o[0]} />
-		<input type="text" on:keyup={sync} bind:value={o[1]} />
+		<input type="text" onkeyup={sync} bind:value={o[0]} />
+		<input type="text" onkeyup={sync} bind:value={o[1]} />
 		<Button
 			variant="default"
 			destructive
diff --git a/frontend/src/lib/components/OauthScopes.svelte b/frontend/src/lib/components/OauthScopes.svelte
index 96579ed651..545471d0dc 100644
--- a/frontend/src/lib/components/OauthScopes.svelte
+++ b/frontend/src/lib/components/OauthScopes.svelte
@@ -2,13 +2,17 @@
 	import { Button } from './common'
 	import { Minus, Plus } from 'lucide-svelte'
 
-	export let scopes: string[] = []
+	interface Props {
+		scopes?: string[]
+	}
+
+	let { scopes = $bindable([]) }: Props = $props()
 </script>
 
 {#if scopes && Array.isArray(scopes)}
-	{#each scopes as v}
+	{#each scopes as v, i}
 		<div class="flex flex-row max-w-md mb-2">
-			<input type="text" bind:value={v} />
+			<input type="text" bind:value={scopes[i]} />
 			<Button
 				variant="default"
 				size="xs"
diff --git a/frontend/src/lib/components/ObjectStoreConfigSettings.svelte b/frontend/src/lib/components/ObjectStoreConfigSettings.svelte
index 6526637934..cb504c8140 100644
--- a/frontend/src/lib/components/ObjectStoreConfigSettings.svelte
+++ b/frontend/src/lib/components/ObjectStoreConfigSettings.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { Database, Loader2 } from 'lucide-svelte'
 	import Toggle from './Toggle.svelte'
 	import { Button, Tab, Tabs } from './common'
@@ -42,13 +44,18 @@
 		serviceAccountKey: Record<string, string>
 	}
 
-	export let bucket_config: S3Config | AzureConfig | AwsOidcConfig | GcsConfig | undefined =
-		undefined
+	interface Props {
+		bucket_config?: S3Config | AzureConfig | AwsOidcConfig | GcsConfig | undefined;
+	}
 
-	$: bucket_config?.type == 'S3' &&
-		bucket_config.allow_http == undefined &&
-		(bucket_config.allow_http = true)
-	let loading = false
+	let { bucket_config = $bindable(undefined) }: Props = $props();
+
+	run(() => {
+		bucket_config?.type == 'S3' &&
+			bucket_config.allow_http == undefined &&
+			(bucket_config.allow_http = true)
+	});
+	let loading = $state(false)
 
 	async function testConnection() {
 		loading = true
diff --git a/frontend/src/lib/components/PageHeader.svelte b/frontend/src/lib/components/PageHeader.svelte
index 336428a976..2d461f7427 100644
--- a/frontend/src/lib/components/PageHeader.svelte
+++ b/frontend/src/lib/components/PageHeader.svelte
@@ -1,10 +1,21 @@
 <script lang="ts">
 	import Tooltip from './Tooltip.svelte'
 
-	export let title: string
-	export let tooltip: string = ''
-	export let documentationLink: string | undefined = undefined
-	export let primary: boolean = true
+	interface Props {
+		title: string;
+		tooltip?: string;
+		documentationLink?: string | undefined;
+		primary?: boolean;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		title,
+		tooltip = '',
+		documentationLink = undefined,
+		primary = true,
+		children
+	}: Props = $props();
 </script>
 
 <div class="flex flex-row flex-wrap justify-between pb-2 my-4 mr-2">
@@ -30,9 +41,9 @@
 		</span>
 	{/if}
 
-	{#if $$slots.default}
+	{#if children}
 		<div class="my-2">
-			<slot />
+			{@render children?.()}
 		</div>
 	{/if}
 </div>
diff --git a/frontend/src/lib/components/ParqetCsvTableRenderer.svelte b/frontend/src/lib/components/ParquetCsvTableRenderer.svelte
similarity index 90%
rename from frontend/src/lib/components/ParqetCsvTableRenderer.svelte
rename to frontend/src/lib/components/ParquetCsvTableRenderer.svelte
index 07a8c267a9..262be32363 100644
--- a/frontend/src/lib/components/ParqetCsvTableRenderer.svelte
+++ b/frontend/src/lib/components/ParquetCsvTableRenderer.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy'
+
 	import { type GridApi, createGrid, type IDatasource } from 'ag-grid-community'
 
 	import 'ag-grid-community/styles/ag-grid.css'
@@ -14,15 +16,19 @@
 	// import 'ag-grid-community/dist/styles/ag-theme-alpine-dark.css'
 
 	let selectedRowIndex = -1
-	export let s3resource: string
-	export let storage: string | undefined
-	export let workspaceId: string | undefined
-	export let disable_download: boolean = false
+	interface Props {
+		s3resource: string
+		storage: string | undefined
+		workspaceId: string | undefined
+		disable_download?: boolean
+	}
+
+	let { s3resource, storage, workspaceId, disable_download = false }: Props = $props()
 
 	let lastSearch: string | undefined = undefined
 
-	let nbRows: number | undefined = undefined
-	let csvSeparatorChar: string = ','
+	let nbRows: number | undefined = $state(undefined)
+	let csvSeparatorChar: string = $state(',')
 	let datasource: IDatasource = {
 		rowCount: 0,
 		getRows: async function (params) {
@@ -95,11 +101,9 @@
 		toggleRow(rows[0])
 	}
 
-	let eGui: HTMLDivElement
+	let eGui: HTMLDivElement | undefined = $state()
 
-	$: eGui && mountGrid()
-
-	let error: string | undefined = undefined
+	let error: string | undefined = $state(undefined)
 	async function mountGrid() {
 		if (eGui) {
 			try {
@@ -170,7 +174,10 @@
 		}
 	}
 
-	let darkMode: boolean = false
+	let darkMode: boolean = $state(false)
+	run(() => {
+		eGui && mountGrid()
+	})
 </script>
 
 <DarkModeObserver bind:darkMode />
@@ -182,7 +189,7 @@
 				<label for="csvSeparatorChar" class="text-2xs text-secondary">Separator</label>
 
 				<div class="w-12 ml-2 mr-2">
-					<select class="h-8" bind:value={csvSeparatorChar} on:change={(e) => mountGrid()}>
+					<select class="h-8" bind:value={csvSeparatorChar} onchange={(e) => mountGrid()}>
 						<option value=",">,</option>
 						<option value=";">;</option>
 						<option value="\t">\t</option>
diff --git a/frontend/src/lib/components/PersistentScriptDrawer.svelte b/frontend/src/lib/components/PersistentScriptDrawer.svelte
index aa5c869f31..a681e2ed4a 100644
--- a/frontend/src/lib/components/PersistentScriptDrawer.svelte
+++ b/frontend/src/lib/components/PersistentScriptDrawer.svelte
@@ -10,19 +10,19 @@
 	import { Hourglass, Loader2, Play, RefreshCw } from 'lucide-svelte'
 
 	let dispatch = createEventDispatcher()
-	let drawer: Drawer
+	let drawer: Drawer | undefined = $state()
 
-	let script: Script
-	let loadQueuedJobs = true
-	let queuedJobsLoading = false
+	let script: Script | undefined = $state()
+	let loadQueuedJobs = $state(true)
+	let queuedJobsLoading = $state(false)
 	let queuedJobs: {
 		status: 'running' | 'queued'
 		jobId: string
 		scheduledFor: string
 		scriptHash: string
-	}[] = []
+	}[] = $state([])
 
-	let cancellingInProgress = false
+	let cancellingInProgress = $state(false)
 
 	async function continuouslyLoadQueuedJobs() {
 		while (loadQueuedJobs) {
@@ -40,7 +40,7 @@
 		let qjs = await JobService.listQueue({
 			workspace: $workspaceStore ?? '',
 			orderDesc: false,
-			scriptPathExact: script.path
+			scriptPathExact: script?.path
 		})
 		let loadingQueuedJobs: {
 			status: 'running' | 'queued'
@@ -71,12 +71,12 @@
 		cancellingInProgress = true
 		await JobService.cancelPersistentQueuedJobs({
 			workspace: $workspaceStore ?? '',
-			path: script.path,
+			path: script?.path ?? '',
 			requestBody: {
 				reason: undefined
 			}
 		})
-		sendUserToast(`All jobs cancelled for ${script.path}`)
+		sendUserToast(`All jobs cancelled for ${script?.path}`)
 		cancellingInProgress = false
 	}
 
@@ -88,12 +88,12 @@
 		script = persistentScript!
 		loadQueuedJobs = true
 		continuouslyLoadQueuedJobs()
-		drawer.openDrawer?.()
+		drawer?.openDrawer?.()
 	}
 
 	async function exit() {
 		loadQueuedJobs = false
-		drawer.closeDrawer?.()
+		drawer?.closeDrawer?.()
 	}
 
 	onDestroy(() => {
@@ -117,51 +117,56 @@
 	>
 		<div class="flex gap-2 items-center justify-between">
 			<h2>
-				Queued jobs for {script.path}
+				Queued jobs for {script?.path}
 			</h2>
 			<Button size="md" btnClasses="w-full h-8" variant="default" on:click={loadQueuedJobsOnce}>
 				<RefreshCw class={queuedJobsLoading ? 'animate-spin' : ''} size={14} />
 			</Button>
 		</div>
 		<TableCustom>
+			<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
 			<tr slot="header-row">
 				<th class="text-xs">Script Hash</th>
 				<th class="text-xs">Job ID</th>
 				<th class="text-xs">Status</th>
 				<th class="text-xs">Scheduled For</th>
 			</tr>
-			<tbody slot="body">
-				{#each queuedJobs as { jobId, status, scriptHash, scheduledFor }}
-					<tr class="">
-						<td class="text-xs">
-							<a
-								class="pr-3"
-								href="{base}/scripts/get/{scriptHash}?workspace={$workspaceStore}"
-								target="_blank"
-							>
-								{scriptHash}
-							</a>
-						</td>
-						<td class="text-xs">
-							<a class="pr-3" href="{base}/run/{jobId}?workspace={$workspaceStore}" target="_blank"
-								>{jobId.substring(24)}</a
-							>
-						</td>
-						<td class="text-xs">
-							{#if status === 'running'}
-								<Badge color="yellow" baseClass="!px-1.5">
-									<Play size={14} />
-								</Badge>
-							{:else}
-								<Badge baseClass="!px-1.5">
-									<Hourglass size={14} />
-								</Badge>
-							{/if}
-						</td>
-						<td class="text-xs">{scheduledFor}</td>
-					</tr>
-				{/each}
-			</tbody>
+			{#snippet body()}
+				<tbody>
+					{#each queuedJobs as { jobId, status, scriptHash, scheduledFor }}
+						<tr class="">
+							<td class="text-xs">
+								<a
+									class="pr-3"
+									href="{base}/scripts/get/{scriptHash}?workspace={$workspaceStore}"
+									target="_blank"
+								>
+									{scriptHash}
+								</a>
+							</td>
+							<td class="text-xs">
+								<a
+									class="pr-3"
+									href="{base}/run/{jobId}?workspace={$workspaceStore}"
+									target="_blank">{jobId.substring(24)}</a
+								>
+							</td>
+							<td class="text-xs">
+								{#if status === 'running'}
+									<Badge color="yellow" baseClass="!px-1.5">
+										<Play size={14} />
+									</Badge>
+								{:else}
+									<Badge baseClass="!px-1.5">
+										<Hourglass size={14} />
+									</Badge>
+								{/if}
+							</td>
+							<td class="text-xs">{scheduledFor}</td>
+						</tr>
+					{/each}
+				</tbody>
+			{/snippet}
 		</TableCustom>
 
 		{#snippet actions()}
diff --git a/frontend/src/lib/components/QueueMetricsDrawer.svelte b/frontend/src/lib/components/QueueMetricsDrawer.svelte
index dd4ad426fa..fc1ac36a84 100644
--- a/frontend/src/lib/components/QueueMetricsDrawer.svelte
+++ b/frontend/src/lib/components/QueueMetricsDrawer.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	import { run, createBubbler, preventDefault } from 'svelte/legacy'
+
+	const bubble = createBubbler()
 	import { onMount } from 'svelte'
 	import { Drawer, DrawerContent, Button } from './common'
 	import QueueMetricsDrawerInner from './QueueMetricsDrawerInner.svelte'
@@ -21,24 +24,26 @@
 		}
 	}
 
-	let drawer: Drawer
+	let drawer: Drawer | undefined = $state()
 	export function openDrawer() {
 		drawer?.openDrawer()
 	}
 
-	let alerts: Alert[] = []
+	let alerts: Alert[] = $state([])
 
 	let configName = 'alert__job_queue_waiting'
 	let originalAlerts: Alert[] = []
-	let newTag = ''
-	let editingIndex = -1
-	let changesMade = false
-	let removedAlerts: Alert[] = []
+	let newTag = $state('')
+	let editingIndex = $state(-1)
+	let changesMade = $state(false)
+	let removedAlerts: Alert[] = $state([])
 	let stagedNewAlert = false
-	let workerTags: string[] = []
-	let filteredTags: string[] = []
+	let workerTags: string[] = $state([])
+	let filteredTags: string[] = $state([])
 
-	$: removedAlerts
+	run(() => {
+		removedAlerts
+	})
 
 	onMount(async () => {
 		await fetchConfig()
@@ -234,7 +239,7 @@
 
 				{#if alerts.length > 0}
 					<div>
-						<form on:submit|preventDefault>
+						<form onsubmit={preventDefault(bubble('submit'))}>
 							<table class="w-full border-collapse mb-2 text-xs table-auto">
 								<thead class="bg-gray-200 dark:bg-slate-600 text-left text-xs">
 									<tr>
@@ -263,7 +268,7 @@
 										<th class="p-2 min-w-[100px]"> Actions </th>
 									</tr>
 								</thead>
-								<tbody on:input={handleInput}>
+								<tbody oninput={handleInput}>
 									{#each alerts as alert, index}
 										<tr
 											class={removedAlerts.includes(alert)
@@ -279,7 +284,7 @@
 															>
 																{tag}
 																<button
-																	on:click={() => removeTag(index, tag)}
+																	onclick={() => removeTag(index, tag)}
 																	aria-label="Remove tag"
 																	class="ml-1 text-xs">x</button
 																>
@@ -293,17 +298,17 @@
 															placeholder={workerTags.length === alert.tags_to_monitor.length
 																? 'All tags already added'
 																: 'Add tag from dropdown'}
-															on:input={(e) => filterTags(e)}
+															oninput={(e) => filterTags(e)}
 															disabled={workerTags.length === alert.tags_to_monitor.length}
 															class="p-1 flex-grow mr-1"
 														/>
-														<button on:click={() => addTag(index, newTag)} aria-label="Add tag">
+														<button onclick={() => addTag(index, newTag)} aria-label="Add tag">
 															<PlusCircle size={16} />
 														</button>
 													</div>
 													<!-- Add the new "Add All Tags" button here -->
 													<button
-														on:click={() => addAllTags(index)}
+														onclick={() => addAllTags(index)}
 														class="text-xs hover:bg-gray-200 dark:hover:bg-gray-700 rounded px-2 py-1 mt-1"
 														disabled={workerTags.length === alert.tags_to_monitor.length}
 													>
@@ -319,7 +324,7 @@
 																		<button
 																			type="button"
 																			class="w-full text-left p-2 cursor-pointer hover:bg-slate-200 dark:hover:bg-slate-700"
-																			on:click={() => addTag(index, tag)}
+																			onclick={() => addTag(index, tag)}
 																		>
 																			{tag}
 																		</button>
@@ -375,14 +380,14 @@
 											<td class="border p-2">
 												<div class="flex gap-3 justify-center items-center">
 													{#if editingIndex === index}
-														<button on:click={() => saveAlert(index)} aria-label="Save">
+														<button onclick={() => saveAlert(index)} aria-label="Save">
 															<Check size={16} />
 														</button>
 													{:else}
-														<button on:click={() => startEditing(index)} aria-label="Edit">
+														<button onclick={() => startEditing(index)} aria-label="Edit">
 															<Pencil size={16} />
 														</button>
-														<button on:click={() => stageDeleteAlert(index)} aria-label="Delete">
+														<button onclick={() => stageDeleteAlert(index)} aria-label="Delete">
 															<Trash size={16} />
 														</button>
 													{/if}
diff --git a/frontend/src/lib/components/QueueMetricsDrawerInner.svelte b/frontend/src/lib/components/QueueMetricsDrawerInner.svelte
index 76e0b0c72b..e65a8e7e2e 100644
--- a/frontend/src/lib/components/QueueMetricsDrawerInner.svelte
+++ b/frontend/src/lib/components/QueueMetricsDrawerInner.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import 'chartjs-adapter-date-fns'
 	import { Line } from '$lib/components/chartjs-wrappers/chartJs'
 
@@ -21,7 +23,7 @@
 	import DarkModeObserver from './DarkModeObserver.svelte'
 	import Alert from './common/alert/Alert.svelte'
 
-	let loading: boolean = true
+	let loading: boolean = $state(true)
 
 	const colorTuples = [
 		['#7EB26D', 'rgba(126, 178, 109, 0.2)'],
@@ -63,12 +65,12 @@
 		LogarithmicScale
 	)
 
-	let countData: ChartData<'line', Point[], undefined> | undefined = undefined
-	let delayData: ChartData<'line', Point[], undefined> | undefined = undefined
+	let countData: ChartData<'line', Point[], undefined> | undefined = $state(undefined)
+	let delayData: ChartData<'line', Point[], undefined> | undefined = $state(undefined)
 
-	let minDate = new Date()
+	let minDate = $state(new Date())
 
-	let noMetrics = false
+	let noMetrics = $state(false)
 
 	function fillData(
 		data: {
@@ -178,10 +180,14 @@
 
 	loadMetrics()
 
-	let darkMode = false
+	let darkMode = $state(false)
 
-	$: ChartJS.defaults.color = darkMode ? '#ccc' : '#666'
-	$: ChartJS.defaults.borderColor = darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
+	run(() => {
+		ChartJS.defaults.color = darkMode ? '#ccc' : '#666'
+	});
+	run(() => {
+		ChartJS.defaults.borderColor = darkMode ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'
+	});
 </script>
 
 <DarkModeObserver bind:darkMode />
diff --git a/frontend/src/lib/components/RadioButton.svelte b/frontend/src/lib/components/RadioButton.svelte
index efa9a62b40..c7e5dc8dce 100644
--- a/frontend/src/lib/components/RadioButton.svelte
+++ b/frontend/src/lib/components/RadioButton.svelte
@@ -1,13 +1,24 @@
 <script lang="ts">
-	export let label = ''
-	export let options: [string | { title: string; desc: string }, any][]
-	export let value: any
-	export let disabled = false
-	export let labelClass = ''
-	export let inputClass = ''
 
 	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;
+	}
+
+	let {
+		label = '',
+		options,
+		value = $bindable(),
+		disabled = false,
+		labelClass = '',
+		inputClass = ''
+	}: Props = $props();
 
 	const dispatch = createEventDispatcher()
 </script>
@@ -28,7 +39,7 @@
 					class="sr-only"
 					bind:group={value}
 					aria-labelledby="memory-option-0-label"
-					on:click={() => dispatch('change', val)}
+					onclick={() => dispatch('change', val)}
 				/>
 				<p>
 					{#if typeof label !== 'string'}
diff --git a/frontend/src/lib/components/Range.svelte b/frontend/src/lib/components/Range.svelte
index 0e92ac72de..72129aada2 100644
--- a/frontend/src/lib/components/Range.svelte
+++ b/frontend/src/lib/components/Range.svelte
@@ -1,29 +1,47 @@
 <script lang="ts">
+	import { run, createBubbler, stopPropagation } from 'svelte/legacy'
+
+	const bubble = createBubbler()
 	import RangeSlider from 'svelte-range-slider-pips'
 
-	export let min = 0
-	export let max = 100
-	export let initialValue = 0
-	export let value = typeof initialValue === 'string' ? parseInt(initialValue) : initialValue
-	export let disabled: boolean = false
-	export let defaultValue: number | undefined = undefined
-	export let format: (value: number) => string = (v) => `${v}`
-	export let hideInput: boolean = false
+	interface Props {
+		min?: number
+		max?: number
+		initialValue?: number
+		value?: any
+		disabled?: boolean
+		defaultValue?: number | undefined
+		format?: (value: number) => string
+		hideInput?: boolean
+	}
+
+	let {
+		min = 0,
+		max = 100,
+		initialValue = 0,
+		value = $bindable(typeof initialValue === 'string' ? parseInt(initialValue) : initialValue),
+		disabled = false,
+		defaultValue = undefined,
+		format = (v) => `${v}`,
+		hideInput = false
+	}: Props = $props()
 
 	let step: number = 1
 
-	let slider: HTMLElement
+	let slider: HTMLElement | undefined = $state()
 
 	function calculateAxisStep(min: number, max: number): number {
 		const range = max - min
 		return range < 100 ? 1 : range / 20
 	}
 
-	$: if (value === null) {
-		value = 0
-	}
+	run(() => {
+		if (value === null) {
+			value = 0
+		}
+	})
 
-	$: axisStep = calculateAxisStep(min, max)
+	let axisStep = $derived(calculateAxisStep(min, max))
 
 	function handleKeyDown(event: KeyboardEvent) {
 		if (disabled) return
@@ -44,17 +62,17 @@
 	}
 
 	// Calculate the handle width based on the length of the max value
-	$: handleWidth = `${Math.max(max.toString().length ?? 2, 2)}em`
+	let handleWidth = $derived(`${Math.max(max.toString().length ?? 2, 2)}em`)
 </script>
 
 <div class="flex flex-row w-full mx-2 items-center gap-8">
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
 
 	<div
 		class={'grow'}
 		style="--range-handle-focus: {'#7e9abd'}; --range-handle: {'#7e9abd'}; --handle-width: {handleWidth}; --handle-border: 4px;"
-		on:pointerdown|stopPropagation
-		on:keydown={handleKeyDown}
+		onpointerdown={stopPropagation(bubble('pointerdown'))}
+		onkeydown={handleKeyDown}
 		>{#if max <= min}
 			<div class="text-secondary text-sm"
 				>Impossible to display range: {`max (${max}) <= min (${min})`}</div
diff --git a/frontend/src/lib/components/Required.svelte b/frontend/src/lib/components/Required.svelte
index 2163efa976..5bbee49790 100644
--- a/frontend/src/lib/components/Required.svelte
+++ b/frontend/src/lib/components/Required.svelte
@@ -1,3 +1,4 @@
+<!-- @migration-task Error while migrating Svelte code: $$props is used together with named props in a way that cannot be automatically migrated. -->
 <script lang="ts">
 	export let required: boolean
 	export let detail = ''
diff --git a/frontend/src/lib/components/ResourceEditorDrawer.svelte b/frontend/src/lib/components/ResourceEditorDrawer.svelte
index 50db916f13..3cc4d9e7a0 100644
--- a/frontend/src/lib/components/ResourceEditorDrawer.svelte
+++ b/frontend/src/lib/components/ResourceEditorDrawer.svelte
@@ -1,26 +1,29 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy'
+
 	import { Button, Drawer } from './common'
 
 	import DrawerContent from './common/drawer/DrawerContent.svelte'
 
 	import { Loader2, Save } from 'lucide-svelte'
+	import { untrack } from 'svelte'
 
-	let drawer: Drawer
-	let canSave = true
-	let resource_type: string | undefined = undefined
-	let defaultValues: Record<string, any> | undefined = undefined
+	let drawer: Drawer | undefined = $state()
+	let canSave = $state(true)
+	let resource_type: string | undefined = $state(undefined)
+	let defaultValues: Record<string, any> | undefined = $state(undefined)
 
 	let resourceEditor: { editResource: () => void; createResource: () => void } | undefined =
-		undefined
+		$state(undefined)
 
-	let path: string | undefined = undefined
+	let path: string | undefined = $state(undefined)
 
-	let newResource = false
+	let newResource = $state(false)
 	export async function initEdit(p: string): Promise<void> {
 		resource_type = undefined
 		newResource = false
 		path = p
-		drawer.openDrawer?.()
+		drawer?.openDrawer?.()
 	}
 
 	export async function initNew(
@@ -31,12 +34,14 @@
 		path = undefined
 		resource_type = resourceType
 		defaultValues = nDefaultValues
-		drawer.openDrawer?.()
+		drawer?.openDrawer?.()
 	}
 
-	let mode: 'edit' | 'new' = newResource ? 'new' : 'edit'
+	let mode: 'edit' | 'new' = $state(untrack(() => newResource) ? 'new' : 'edit')
 
-	$: path ? (mode = 'edit') : (mode = 'new')
+	run(() => {
+		path ? (mode = 'edit') : (mode = 'new')
+	})
 </script>
 
 <Drawer bind:this={drawer} size="800px">
@@ -68,7 +73,7 @@
 					} else {
 						resourceEditor?.createResource()
 					}
-					drawer.closeDrawer()
+					drawer?.closeDrawer()
 				}}
 				disabled={!canSave}
 			>
diff --git a/frontend/src/lib/components/RunButton.svelte b/frontend/src/lib/components/RunButton.svelte
index 58d1dfb314..834a08f944 100644
--- a/frontend/src/lib/components/RunButton.svelte
+++ b/frontend/src/lib/components/RunButton.svelte
@@ -2,10 +2,19 @@
 	import { Button } from '$lib/components/common'
 	import { CornerDownLeft, Loader2 } from 'lucide-svelte'
 
-	export let isLoading
-	export let hideShortcut = false
-	export let onRun: () => Promise<void>
-	export let onCancel: () => Promise<void>
+	interface Props {
+		isLoading: any;
+		hideShortcut?: boolean;
+		onRun: () => Promise<void>;
+		onCancel: () => Promise<void>;
+	}
+
+	let {
+		isLoading,
+		hideShortcut = false,
+		onRun,
+		onCancel
+	}: Props = $props();
 </script>
 
 {#if !isLoading}
diff --git a/frontend/src/lib/components/RunFormAdvancedPopup.svelte b/frontend/src/lib/components/RunFormAdvancedPopup.svelte
index b96cd2b652..6351201622 100644
--- a/frontend/src/lib/components/RunFormAdvancedPopup.svelte
+++ b/frontend/src/lib/components/RunFormAdvancedPopup.svelte
@@ -8,7 +8,9 @@
 	import { WorkerService } from '$lib/gen'
 	import DateTimeInput from './DateTimeInput.svelte'
 
-	export let runnable:
+
+	interface Props {
+		runnable: 
 		| {
 				summary?: string
 				description?: string
@@ -21,11 +23,18 @@
 				created_by?: string
 				extra_perms?: Record<string, boolean>
 		  }
-		| undefined
+		| undefined;
+		scheduledForStr: string | undefined;
+		invisible_to_owner: boolean | undefined;
+		overrideTag: string | undefined;
+	}
 
-	export let scheduledForStr: string | undefined
-	export let invisible_to_owner: boolean | undefined
-	export let overrideTag: string | undefined
+	let {
+		runnable,
+		scheduledForStr = $bindable(),
+		invisible_to_owner = $bindable(),
+		overrideTag = $bindable()
+	}: Props = $props();
 	loadWorkerGroups()
 
 	async function loadWorkerGroups() {
diff --git a/frontend/src/lib/components/S3ObjectPicker.svelte b/frontend/src/lib/components/S3ObjectPicker.svelte
index 6a9d1c9a86..087b3a6f55 100644
--- a/frontend/src/lib/components/S3ObjectPicker.svelte
+++ b/frontend/src/lib/components/S3ObjectPicker.svelte
@@ -11,15 +11,19 @@
 	import S3FilePicker from './S3FilePicker.svelte'
 	import FileUpload from './common/fileUpload/FileUpload.svelte'
 
-	export let value: any
-	export let editor: SimpleEditor | undefined = undefined
+	interface Props {
+		value: any
+		editor?: SimpleEditor | undefined
+	}
+
+	let { value = $bindable(), editor = $bindable(undefined) }: Props = $props()
 
 	const dispatch = createEventDispatcher()
 
-	let s3FilePicker: S3FilePicker
-	let s3FileUploadRawMode: false
+	let s3FilePicker: S3FilePicker | undefined = $state()
+	let s3FileUploadRawMode: false | undefined = $state()
 	let el: HTMLTextAreaElement | undefined = undefined
-	let rawValue: string | undefined = undefined
+	let rawValue: string | undefined = $state(undefined)
 
 	function evalValueToRaw() {
 		rawValue = JSON.stringify(value, null, 2)
diff --git a/frontend/src/lib/components/SaveInputsButton.svelte b/frontend/src/lib/components/SaveInputsButton.svelte
index a8e179e586..c32bb42dd2 100644
--- a/frontend/src/lib/components/SaveInputsButton.svelte
+++ b/frontend/src/lib/components/SaveInputsButton.svelte
@@ -10,14 +10,25 @@
 
 	const dispatch = createEventDispatcher()
 
-	export let runnableId: string | undefined
-	export let runnableType: RunnableType | undefined
-	export let args: object
-	export let disabled: boolean = false
-	export let small: boolean | undefined = undefined
-	export let showTooltip: boolean | undefined = undefined
+	interface Props {
+		runnableId: string | undefined;
+		runnableType: RunnableType | undefined;
+		args: object;
+		disabled?: boolean;
+		small?: boolean | undefined;
+		showTooltip?: boolean | undefined;
+	}
 
-	let savingInputs = false
+	let {
+		runnableId,
+		runnableType,
+		args,
+		disabled = false,
+		small = undefined,
+		showTooltip = undefined
+	}: Props = $props();
+
+	let savingInputs = $state(false)
 
 	async function saveInput(args: object) {
 		savingInputs = true
diff --git a/frontend/src/lib/components/SavedInputsPickerViewer.svelte b/frontend/src/lib/components/SavedInputsPickerViewer.svelte
index 150e2b9b97..919965b5cf 100644
--- a/frontend/src/lib/components/SavedInputsPickerViewer.svelte
+++ b/frontend/src/lib/components/SavedInputsPickerViewer.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	import { run, createBubbler } from 'svelte/legacy';
+
+	const bubble = createBubbler();
 	import { Button } from '$lib/components/common'
 	import Popover from '$lib/components/meltComponents/Popover.svelte'
 	import ObjectViewerWrapper from '$lib/components/propertyPicker/ObjectViewerWrapper.svelte'
@@ -6,12 +9,23 @@
 	import { Eye, CopyIcon, Loader2 } from 'lucide-svelte'
 	import { createEventDispatcher } from 'svelte'
 
-	export let payloadData: any
-	export let limitPayloadSize: boolean = false
-	export let hover: boolean = false
-	export let viewerOpen: boolean = false
-	export let maxWidth: number | undefined = undefined
-	export let editOptions: boolean = true
+	interface Props {
+		payloadData: any;
+		limitPayloadSize?: boolean;
+		hover?: boolean;
+		viewerOpen?: boolean;
+		maxWidth?: number | undefined;
+		editOptions?: boolean;
+	}
+
+	let {
+		payloadData,
+		limitPayloadSize = false,
+		hover = false,
+		viewerOpen = false,
+		maxWidth = undefined,
+		editOptions = true
+	}: Props = $props();
 
 	const dispatch = createEventDispatcher()
 	const payloadTooBigForPreview = payloadData != 'WINDMILL_TOO_BIG' && isObjectTooBig(payloadData)
@@ -32,11 +46,11 @@
 	}
 	const xOffset = editOptions ? 218 : 168 // width of the optional buttons on the right
 
-	let popover: Popover | undefined
+	let popover: Popover | undefined = $state()
 	let popoverOpen = false
 	let hoverTimeout: ReturnType<typeof setTimeout> | undefined
-	let objectViewerLoaded = false
-	let popoverFullyOpened = false
+	let objectViewerLoaded = $state(false)
+	let popoverFullyOpened = $state(false)
 
 	function handlePopoverChange(event: CustomEvent<boolean>) {
 		const isOpen = event.detail
@@ -73,8 +87,10 @@
 		}
 	}
 
-	$: handleHoverChange(hover)
-	$: ajustedWidth = maxWidth ? Math.abs(maxWidth - xOffset) : undefined
+	run(() => {
+		handleHoverChange(hover)
+	});
+	let ajustedWidth = $derived(maxWidth ? Math.abs(maxWidth - xOffset) : undefined)
 </script>
 
 <Popover
@@ -88,75 +104,79 @@
 	closeOnClickOutside={false}
 	usePointerDownOutside
 >
-	<svelte:fragment slot="trigger" let:isOpen>
-		<Button
-			variant="subtle"
-			unifiedSize="sm"
-			btnClasses={hover || isOpen ? 'block -my-2 bg-transparent' : 'hidden'}
-			wrapperClasses="p-0"
-			iconOnly
-			nonCaptureEvent
-			startIcon={{ icon: Eye }}
-		/>
-	</svelte:fragment>
-	<svelte:fragment slot="content">
-		<div
-			class="p-2 overflow-auto"
-			style="width: {ajustedWidth ? ajustedWidth + 'px' : '50vh'}; max-height: 50vh"
-		>
-			{#if payloadData === 'WINDMILL_TOO_BIG'}
-				<div class="text-center text-primary text-xs">
-					{#if limitPayloadSize}
-						Payload too big to be used
-					{:else}
-						Payload too big to preview but can still be loaded
-					{/if}
-				</div>
-			{:else}
-				<div
-					class="relative p-2"
-					role="button"
-					tabindex="0"
-					aria-label="Copy JSON payload to clipboard"
-					on:click={() => {
+	{#snippet trigger({ isOpen })}
+	
+			<Button
+				variant="subtle"
+				unifiedSize="sm"
+				btnClasses={hover || isOpen ? 'block -my-2 bg-transparent' : 'hidden'}
+				wrapperClasses="p-0"
+				iconOnly
+				nonCaptureEvent
+				startIcon={{ icon: Eye }}
+			/>
+		
+	{/snippet}
+	{#snippet content()}
+	
+			<div
+				class="p-2 overflow-auto"
+				style="width: {ajustedWidth ? ajustedWidth + 'px' : '50vh'}; max-height: 50vh"
+			>
+				{#if payloadData === 'WINDMILL_TOO_BIG'}
+					<div class="text-center text-primary text-xs">
+						{#if limitPayloadSize}
+							Payload too big to be used
+						{:else}
+							Payload too big to preview but can still be loaded
+						{/if}
+					</div>
+				{:else}
+					<div
+						class="relative p-2"
+						role="button"
+						tabindex="0"
+						aria-label="Copy JSON payload to clipboard"
+						onclick={() => {
 						copyToClipboard(JSON.stringify(payloadData))
 					}}
-					on:keydown
-				>
-					{#if !objectViewerLoaded && payloadTooBigForPreview}
-						<div class="flex justify-center items-center py-4">
-							<Loader2 size={20} class="animate-spin text-primary" />
-							<span class="ml-2 text-xs text-primary">Loading data...</span>
-						</div>
-					{/if}
+						onkeydown={bubble('keydown')}
+					>
+						{#if !objectViewerLoaded && payloadTooBigForPreview}
+							<div class="flex justify-center items-center py-4">
+								<Loader2 size={20} class="animate-spin text-primary" />
+								<span class="ml-2 text-xs text-primary">Loading data...</span>
+							</div>
+						{/if}
 
-					{#if popoverFullyOpened || !payloadTooBigForPreview}
-						<div
-							class={!objectViewerLoaded && payloadTooBigForPreview
-								? 'invisible h-0 overflow-hidden'
-								: ''}
-						>
-							<ObjectViewerWrapper
-								json={payloadData}
-								allowCopy
-								pureViewer
-								on:mounted={() => (objectViewerLoaded = true)}
+						{#if popoverFullyOpened || !payloadTooBigForPreview}
+							<div
+								class={!objectViewerLoaded && payloadTooBigForPreview
+									? 'invisible h-0 overflow-hidden'
+									: ''}
+							>
+								<ObjectViewerWrapper
+									json={payloadData}
+									allowCopy
+									pureViewer
+									on:mounted={() => (objectViewerLoaded = true)}
+								/>
+							</div>
+						{/if}
+
+						<div class="absolute top-2 right-2 w-full h-full">
+							<Button
+								variant="subtle"
+								unifiedSize="sm"
+								class="absolute top-0 right-0"
+								iconOnly
+								startIcon={{ icon: CopyIcon }}
+								nonCaptureEvent
 							/>
 						</div>
-					{/if}
-
-					<div class="absolute top-2 right-2 w-full h-full">
-						<Button
-							variant="subtle"
-							unifiedSize="sm"
-							class="absolute top-0 right-0"
-							iconOnly
-							startIcon={{ icon: CopyIcon }}
-							nonCaptureEvent
-						/>
 					</div>
-				</div>
-			{/if}
-		</div>
-	</svelte:fragment>
+				{/if}
+			</div>
+		
+	{/snippet}
 </Popover>
diff --git a/frontend/src/lib/components/SchemaEditorProperty.svelte b/frontend/src/lib/components/SchemaEditorProperty.svelte
index 611e178981..fa12138c0d 100644
--- a/frontend/src/lib/components/SchemaEditorProperty.svelte
+++ b/frontend/src/lib/components/SchemaEditorProperty.svelte
@@ -2,7 +2,11 @@
 	import type { SchemaProperty } from '$lib/common'
 	import Badge from './common/badge/Badge.svelte'
 
-	export let property: SchemaProperty
+	interface Props {
+		property: SchemaProperty;
+	}
+
+	let { property }: Props = $props();
 </script>
 
 <div class="flex flex-row flex-wrap gap-1">
diff --git a/frontend/src/lib/components/SchemaFormWithArgPicker.svelte b/frontend/src/lib/components/SchemaFormWithArgPicker.svelte
index 4764a26e74..7ddc4146be 100644
--- a/frontend/src/lib/components/SchemaFormWithArgPicker.svelte
+++ b/frontend/src/lib/components/SchemaFormWithArgPicker.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy'
+
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
 	import FlowInputEditor from '$lib/components/flows/content/FlowInputEditor.svelte'
 	import HistoricInputs from '$lib/components/HistoricInputs.svelte'
@@ -7,16 +9,29 @@
 	import CaptureIcon from '$lib/components/triggers/CaptureIcon.svelte'
 	import CaptureButton from './triggers/CaptureButton.svelte'
 	import SavedInputsPicker from './SavedInputsPicker.svelte'
-	import { createEventDispatcher } from 'svelte'
+	import { createEventDispatcher, untrack } from 'svelte'
 	import CaptureTable from './triggers/CaptureTable.svelte'
 	import RefreshButton from './common/button/RefreshButton.svelte'
 
-	export let runnableId: string = ''
-	export let stablePathForCaptures: string = ''
-	export let runnableType: any
-	export let previewArgs: any
-	export let isValid: boolean = true
-	export let jsonView: boolean = false
+	interface Props {
+		runnableId?: string
+		stablePathForCaptures?: string
+		runnableType: any
+		previewArgs: any
+		isValid?: boolean
+		jsonView?: boolean
+		children?: import('svelte').Snippet
+	}
+
+	let {
+		runnableId = '',
+		stablePathForCaptures = '',
+		runnableType,
+		previewArgs,
+		isValid = true,
+		jsonView = false,
+		children
+	}: Props = $props()
 
 	const dispatch = createEventDispatcher()
 
@@ -77,18 +92,23 @@
 		]
 	}
 
-	let rightHeight = 0
-	let selectedTab: 'history' | 'saved_inputs' | 'captures' | undefined = undefined
-	let dropdownItems: any
-	let rightPanelOpen = false
+	let rightHeight = $state(0)
+	let selectedTab: 'history' | 'saved_inputs' | 'captures' | undefined = $state(undefined)
+	let dropdownItems: any = $state()
+	let rightPanelOpen = $state(false)
 
-	let savedInputsPicker: SavedInputsPicker | undefined = undefined
-	let loading = false
-	let captureTable: CaptureTable | undefined = undefined
-	let historicInputs: HistoricInputs | undefined = undefined
-	$: (selectedTab, (dropdownItems = getDropdownItems()))
+	let savedInputsPicker: SavedInputsPicker | undefined = $state(undefined)
+	let loading = $state(false)
+	let captureTable: CaptureTable | undefined = $state(undefined)
+	let historicInputs: HistoricInputs | undefined = $state(undefined)
+	run(() => {
+		;[selectedTab]
+		untrack(() => {
+			dropdownItems = getDropdownItems()
+		})
+	})
 
-	let inputPanelSize = 70
+	let inputPanelSize = $state(70)
 </script>
 
 <div class="h-fit">
@@ -100,7 +120,7 @@
 	<Splitpanes class={!rightPanelOpen ? 'splitter-hidden' : ''}>
 		<Pane bind:size={inputPanelSize} class="!overflow-visible" minSize={30}>
 			<div class="relative w-full h-fit pr-12 pb-4" bind:clientHeight={rightHeight}>
-				<slot />
+				{@render children?.()}
 			</div>
 		</Pane>
 
@@ -109,11 +129,13 @@
 				<div style="height: {rightHeight}px" class="border-t border-r pb-2">
 					{#if selectedTab === 'history'}
 						<FlowInputEditor title="History">
-							<svelete:fragment slot="action">
-								<div class="center-center">
-									<RefreshButton {loading} onClick={() => historicInputs?.refresh()} />
-								</div>
-							</svelete:fragment>
+							{#snippet action()}
+								<svelete:fragment>
+									<div class="center-center">
+										<RefreshButton {loading} onClick={() => historicInputs?.refresh()} />
+									</div>
+								</svelete:fragment>
+							{/snippet}
 							<HistoricInputs
 								bind:loading
 								bind:this={historicInputs}
@@ -140,11 +162,13 @@
 						</FlowInputEditor>
 					{:else if selectedTab === 'captures'}
 						<FlowInputEditor title="Trigger captures">
-							<svelete:fragment slot="action">
-								<div class="center-center">
-									<CaptureButton on:openTriggers small={true} />
-								</div>
-							</svelete:fragment>
+							{#snippet action()}
+								<svelete:fragment>
+									<div class="center-center">
+										<CaptureButton on:openTriggers small={true} />
+									</div>
+								</svelete:fragment>
+							{/snippet}
 							<div class="h-full">
 								<CaptureTable
 									path={stablePathForCaptures}
diff --git a/frontend/src/lib/components/SchemaViewer.svelte b/frontend/src/lib/components/SchemaViewer.svelte
index 19d1be52b0..ddde2ebee4 100644
--- a/frontend/src/lib/components/SchemaViewer.svelte
+++ b/frontend/src/lib/components/SchemaViewer.svelte
@@ -40,7 +40,8 @@
 						<div class="flex flex-row">
 							<TableCustom>
 								<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
-								<tr slot="header-row" class="underline">
+								<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
+	<tr slot="header-row" class="underline">
 									<th>name</th>
 									<th>type</th>
 									<th>description</th>
diff --git a/frontend/src/lib/components/ScriptBuilder.svelte b/frontend/src/lib/components/ScriptBuilder.svelte
index c597a6cd03..20c195f8d0 100644
--- a/frontend/src/lib/components/ScriptBuilder.svelte
+++ b/frontend/src/lib/components/ScriptBuilder.svelte
@@ -1,3 +1,5 @@
+<!-- @migration-task Error while migrating Svelte code: Can only bind to an Identifier or MemberExpression or a `{get, set}` pair
+https://svelte.dev/e/bind_invalid_expression -->
 <script lang="ts">
 	import { createBubbler } from 'svelte/legacy'
 
diff --git a/frontend/src/lib/components/Scrollable.svelte b/frontend/src/lib/components/Scrollable.svelte
index 37e3ae2933..5826368534 100644
--- a/frontend/src/lib/components/Scrollable.svelte
+++ b/frontend/src/lib/components/Scrollable.svelte
@@ -2,14 +2,19 @@
 	import { onMount, onDestroy } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
 
-	let isAtBottom: boolean = false
-	let isScrollable = false
+	let isAtBottom: boolean = $state(false)
+	let isScrollable = $state(false)
 
-	export let id: string | null | undefined = undefined
-	export let scrollableClass: string = ''
-	export let shiftedShadow: boolean = false
+	interface Props {
+		id?: string | null | undefined
+		scrollableClass?: string
+		shiftedShadow?: boolean
+		children?: import('svelte').Snippet
+	}
+
+	let { id = undefined, scrollableClass = '', shiftedShadow = false, children }: Props = $props()
 	let mutationObserver: MutationObserver
-	let el: HTMLDivElement
+	let el: HTMLDivElement | undefined = $state()
 
 	function handleScroll(event) {
 		const scrollableElement = event.target
@@ -33,7 +38,7 @@
 	}
 
 	export function scrollIntoView(top: number) {
-		el.scrollTo({ top, behavior: 'smooth' })
+		el?.scrollTo({ top, behavior: 'smooth' })
 	}
 	onMount(() => {
 		observeScrollability(el)
@@ -45,8 +50,8 @@
 </script>
 
 <div {id} class={twMerge('relative pb-1', scrollableClass)}>
-	<div bind:this={el} on:scroll={handleScroll} class="w-full h-full overflow-y-auto">
-		<slot />
+	<div bind:this={el} onscroll={handleScroll} class="w-full h-full overflow-y-auto">
+		{@render children?.()}
 	</div>
 	{#if !isAtBottom && isScrollable}
 		<div
diff --git a/frontend/src/lib/components/ServiceLogsInner.svelte b/frontend/src/lib/components/ServiceLogsInner.svelte
index 1de3754b72..27256eaa28 100644
--- a/frontend/src/lib/components/ServiceLogsInner.svelte
+++ b/frontend/src/lib/components/ServiceLogsInner.svelte
@@ -19,7 +19,7 @@
 	import SplitPanesOrColumnOnMobile from './splitPanes/SplitPanesOrColumnOnMobile.svelte'
 	import Select from './select/Select.svelte'
 	import { goto } from '$lib/navigation'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 
 	interface Props {
 		searchTerm: string
@@ -32,8 +32,8 @@
 	let minTs: undefined | string = $state(undefined)
 	let maxTs: undefined | string = $state(undefined)
 
-	let minTsManual: undefined | string = $state($page.url.searchParams.get('minTs') ?? undefined)
-	let maxTsManual: undefined | string = $state($page.url.searchParams.get('maxTs') ?? undefined)
+	let minTsManual: undefined | string = $state(page.url.searchParams.get('minTs') ?? undefined)
+	let maxTsManual: undefined | string = $state(page.url.searchParams.get('maxTs') ?? undefined)
 
 	let max_lines: undefined | number = $state(undefined)
 
@@ -171,13 +171,13 @@
 
 	type Selected = { mode: string; workerGroup: string; hostname: string }
 	let initialSelected =
-		$page.url.searchParams.get('mode') &&
-		$page.url.searchParams.get('workerGroup') &&
-		$page.url.searchParams.get('hostname')
+		page.url.searchParams.get('mode') &&
+		page.url.searchParams.get('workerGroup') &&
+		page.url.searchParams.get('hostname')
 			? {
-					mode: $page.url.searchParams.get('mode')!,
-					workerGroup: $page.url.searchParams.get('workerGroup')!,
-					hostname: $page.url.searchParams.get('hostname')!
+					mode: page.url.searchParams.get('mode')!,
+					workerGroup: page.url.searchParams.get('workerGroup')!,
+					hostname: page.url.searchParams.get('hostname')!
 				}
 			: undefined
 	let selected: Selected | undefined = $state(initialSelected)
@@ -710,7 +710,7 @@
 								<LogSnippetViewer
 									content={snippet_fragment || document.logs[0]}
 									highlighted={snippet_highlighted}
-									on:click={() => {
+									onClick={() => {
 										let logLineNumber = document.line_number[0]
 										let logFile = document.file_name[0]
 										let host = document.host[0]
diff --git a/frontend/src/lib/components/ShareModal.svelte b/frontend/src/lib/components/ShareModal.svelte
index e5ad54f88b..fcbe166992 100644
--- a/frontend/src/lib/components/ShareModal.svelte
+++ b/frontend/src/lib/components/ShareModal.svelte
@@ -155,7 +155,8 @@
 				{#if acls?.length > 0}
 					<TableCustom>
 						<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
-						<tr slot="header-row">
+						<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
+	<tr slot="header-row">
 							<th>owner</th>
 							<th></th>
 							<th></th>
diff --git a/frontend/src/lib/components/Slider.svelte b/frontend/src/lib/components/Slider.svelte
index c2ca0abbdd..e3269cde09 100644
--- a/frontend/src/lib/components/Slider.svelte
+++ b/frontend/src/lib/components/Slider.svelte
@@ -5,10 +5,21 @@
 	import Tooltip from './Tooltip.svelte'
 	import { twMerge } from 'tailwind-merge'
 
-	export let text: string
-	export let tooltip: string | undefined = undefined
-	export let view = false
-	export let size: 'xs' | 'sm' | 'md' | 'lg' = 'md'
+	interface Props {
+		text: string;
+		tooltip?: string | undefined;
+		view?: boolean;
+		size?: 'xs' | 'sm' | 'md' | 'lg';
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		text,
+		tooltip = undefined,
+		view = $bindable(false),
+		size = 'md',
+		children
+	}: Props = $props();
 </script>
 
 <Button
@@ -26,5 +37,5 @@
 	{/if}
 </Button>
 {#if view}
-	<div class="my-4 px-2" transition:slide|local><slot /></div>
+	<div class="my-4 px-2" transition:slide|local>{@render children?.()}</div>
 {/if}
diff --git a/frontend/src/lib/components/Star.svelte b/frontend/src/lib/components/Star.svelte
index b4ac4c61ab..2d0ab33d99 100644
--- a/frontend/src/lib/components/Star.svelte
+++ b/frontend/src/lib/components/Star.svelte
@@ -1,16 +1,22 @@
 <script lang="ts">
+	import { preventDefault } from 'svelte/legacy'
+
 	import { FavoriteService } from '$lib/gen'
 	import { starStore } from '$lib/stores'
 	import { sendUserToast } from '$lib/toast'
 	import { createEventDispatcher } from 'svelte'
 	import { Star, StarOff } from 'lucide-svelte'
 
-	export let path: string
-	export let kind: 'flow' | 'app' | 'script' | 'raw_app'
-	export let starred = false
-	export let workspace_id: string
+	interface Props {
+		path: string
+		kind: 'flow' | 'app' | 'script' | 'raw_app'
+		starred?: boolean
+		workspace_id: string
+	}
 
-	let buttonHover = false
+	let { path, kind, starred = false, workspace_id }: Props = $props()
+
+	let buttonHover = $state(false)
 
 	async function onClick() {
 		buttonHover = false
@@ -31,13 +37,15 @@
 		}
 		dispatch('starred', !starred)
 	}
-	const dispatch = createEventDispatcher()
+	const dispatch = createEventDispatcher<{
+		starred: boolean
+	}>()
 </script>
 
 <button
-	on:click|preventDefault={onClick}
-	on:mouseenter={() => (buttonHover = true)}
-	on:mouseleave={() => (buttonHover = false)}
+	onclick={preventDefault(onClick)}
+	onmouseenter={() => (buttonHover = true)}
+	onmouseleave={() => (buttonHover = false)}
 	class="p-2"
 >
 	{#if starred}
diff --git a/frontend/src/lib/components/Summary.svelte b/frontend/src/lib/components/Summary.svelte
index 42d0b48ba5..1b4c3f2c2e 100644
--- a/frontend/src/lib/components/Summary.svelte
+++ b/frontend/src/lib/components/Summary.svelte
@@ -2,8 +2,12 @@
 	import { Pen } from 'lucide-svelte'
 	import TextInput from './text_input/TextInput.svelte'
 
-	export let value: string
-	export let disabled = false
+	interface Props {
+		value: string;
+		disabled?: boolean;
+	}
+
+	let { value = $bindable(), disabled = false }: Props = $props();
 
 	function blur(e: KeyboardEvent) {
 		e.key === 'Enter' && (e?.target as any)?.blur()
diff --git a/frontend/src/lib/components/SupabaseConnect.svelte b/frontend/src/lib/components/SupabaseConnect.svelte
index d16960ffbc..e44399ee84 100644
--- a/frontend/src/lib/components/SupabaseConnect.svelte
+++ b/frontend/src/lib/components/SupabaseConnect.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy'
+
 	import { Loader2, RotateCwIcon } from 'lucide-svelte'
 
 	import { Button, DrawerContent } from './common'
@@ -15,16 +17,16 @@
 	import { createEventDispatcher } from 'svelte'
 	import HighlightTheme from './HighlightTheme.svelte'
 
-	let drawer: Drawer
-	let token: undefined | string = undefined
+	let drawer: Drawer | undefined = $state()
+	let token: undefined | string = $state(undefined)
 	export async function open() {
 		token = $oauthStore?.access_token ?? ''
-		drawer.openDrawer?.()
+		drawer?.openDrawer?.()
 		step = 'init'
 		description = ''
 	}
 
-	let step: 'init' | 'resource' = 'init'
+	let step: 'init' | 'resource' = $state('init')
 
 	async function listDatabases() {
 		if (!token) return
@@ -44,31 +46,33 @@
 		region: string
 		id: string
 	}
-	let databases: undefined | Database[] = undefined
+	let databases: undefined | Database[] = $state(undefined)
 
-	$: token != undefined && listDatabases()
+	run(() => {
+		token != undefined && listDatabases()
+	})
 
-	let selectedDatabase: undefined | Database = undefined
+	let selectedDatabase: undefined | Database = $state(undefined)
 
-	let description = ''
-	let pathError = ''
-	let password = ''
-	let path: string | undefined = undefined
+	let description = $state('')
+	let pathError = $state('')
+	let password = $state('')
+	let path: string | undefined = $state(undefined)
 
 	/**
 	 * https://github.com/orgs/supabase/discussions/17817
 	 * host is in the format of `aws-0-${region}.pooler.supabase.com`
 	 * user is in the format of `postgres.${id}`
 	 */
-	$: resourceValue = {
+	let resourceValue = $derived.by(() => ({
 		host: `aws-0-${selectedDatabase?.region}.pooler.supabase.com`,
 		user: `postgres.${selectedDatabase?.id}`,
 		port: 5432,
 		dbname: 'postgres',
 		sslmode: 'prefer',
 		password: `$var:${path}`
-	}
-	$: disabled = path == undefined || pathError != '' || path == ''
+	}))
+	let disabled = $derived(path == undefined || pathError != '' || path == '')
 
 	const dispatch = createEventDispatcher()
 	async function save() {
@@ -95,7 +99,7 @@
 		})
 		sendUserToast('Saved postgres resource')
 		dispatch('refresh')
-		drawer.closeDrawer?.()
+		drawer?.closeDrawer?.()
 	}
 </script>
 
@@ -120,7 +124,7 @@
 				{#each databases as database}
 					<button
 						class="btn btn-outline-primary mt-2 border p-2 w-full border-secondary-inverse hover:border-secondary rounded"
-						on:click={() => {
+						onclick={() => {
 							selectedDatabase = database
 
 							step = 'resource'
diff --git a/frontend/src/lib/components/SuperadminSettingsInner.svelte b/frontend/src/lib/components/SuperadminSettingsInner.svelte
index ab4707c9ec..04f363ab37 100644
--- a/frontend/src/lib/components/SuperadminSettingsInner.svelte
+++ b/frontend/src/lib/components/SuperadminSettingsInner.svelte
@@ -6,7 +6,7 @@
 	import { sendUserToast } from '$lib/toast'
 	import { base } from '$lib/base'
 	import SearchItems from './SearchItems.svelte'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import { goto as gotoUrl } from '$app/navigation'
 	import Version from './Version.svelte'
 	import Uptodate from './Uptodate.svelte'
@@ -31,9 +31,9 @@
 	let { closeDrawer } = $props()
 
 	function removeHash() {
-		const index = $page.url.href.lastIndexOf('#')
+		const index = page.url.href.lastIndexOf('#')
 		if (index === -1) return
-		const hashRemoved = $page.url.href.slice(0, index)
+		const hashRemoved = page.url.href.slice(0, index)
 		gotoUrl(hashRemoved)
 	}
 
@@ -209,7 +209,8 @@
 						<div class="mt-2 overflow-auto">
 							<TableCustom>
 								<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
-								<tr slot="header-row" class="sticky top-0 bg-surface border-b">
+								<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
+	<tr slot="header-row" class="sticky top-0 bg-surface border-b">
 									<th>email</th>
 									<th>auth</th>
 									<th>name</th>
diff --git a/frontend/src/lib/components/TableCustom.svelte b/frontend/src/lib/components/TableCustom.svelte
index e40a2c9706..0a4a7aefb4 100644
--- a/frontend/src/lib/components/TableCustom.svelte
+++ b/frontend/src/lib/components/TableCustom.svelte
@@ -1,3 +1,4 @@
+<!-- @migration-task Error while migrating Svelte code: $$props is used together with named props in a way that cannot be automatically migrated. -->
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte'
 
diff --git a/frontend/src/lib/components/TemplateEditor.svelte b/frontend/src/lib/components/TemplateEditor.svelte
index 9c01537eea..7bf74b9bb3 100644
--- a/frontend/src/lib/components/TemplateEditor.svelte
+++ b/frontend/src/lib/components/TemplateEditor.svelte
@@ -1,3 +1,4 @@
+<!-- @migration-task Error while migrating Svelte code: $$props is used together with named props in a way that cannot be automatically migrated. -->
 <script module>
 	import '@codingame/monaco-vscode-standalone-typescript-language-features'
 </script>
diff --git a/frontend/src/lib/components/TestConnection.svelte b/frontend/src/lib/components/TestConnection.svelte
index 3f49c92c21..f45dc0879b 100644
--- a/frontend/src/lib/components/TestConnection.svelte
+++ b/frontend/src/lib/components/TestConnection.svelte
@@ -7,10 +7,19 @@
 	import { workspaceStore } from '$lib/stores'
 	import { tryEvery } from '$lib/utils'
 
-	export let workspaceOverride: string | undefined = undefined
-	export let resourceType: string | undefined
-	export let args: Record<string, any> | any = {}
-	export let buttonTextOverride: string | undefined = undefined
+	interface Props {
+		workspaceOverride?: string | undefined;
+		resourceType: string | undefined;
+		args?: Record<string, any> | any;
+		buttonTextOverride?: string | undefined;
+	}
+
+	let {
+		workspaceOverride = undefined,
+		resourceType,
+		args = {},
+		buttonTextOverride = undefined
+	}: Props = $props();
 
 	const scripts: {
 		[key: string]: {
@@ -166,7 +175,7 @@ export async function main(bucket: any) {
 		}
 	}
 
-	let loading = false
+	let loading = $state(false)
 	async function testConnection() {
 		if (!resourceType) return
 		loading = true
diff --git a/frontend/src/lib/components/TimeAgo.svelte b/frontend/src/lib/components/TimeAgo.svelte
index a11e4ac240..64b0868f2e 100644
--- a/frontend/src/lib/components/TimeAgo.svelte
+++ b/frontend/src/lib/components/TimeAgo.svelte
@@ -1,18 +1,28 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { getDbClockNow } from '$lib/forLater'
 	import { displayDate } from '$lib/utils'
 	import { onDestroy, onMount } from 'svelte'
 
-	export let date: string
-	export let agoOnlyIfRecent: boolean = false
-	export let noDate = false
-	export let isRecent: boolean = true
+	interface Props {
+		date: string;
+		agoOnlyIfRecent?: boolean;
+		noDate?: boolean;
+		isRecent?: boolean;
+	}
 
-	let computedTimeAgo: string | undefined = undefined
+	let {
+		date,
+		agoOnlyIfRecent = false,
+		noDate = false,
+		isRecent = $bindable(true)
+	}: Props = $props();
+
+	let computedTimeAgo: string | undefined = $state(undefined)
 
 	let interval
 
-	$: date && computeDate()
 
 	onMount(() => {
 		interval = setInterval(() => {
@@ -73,6 +83,9 @@
 			}
 		}
 	}
+	run(() => {
+		date && computeDate()
+	});
 </script>
 
 {#if computedTimeAgo && (!agoOnlyIfRecent || isRecent)}
diff --git a/frontend/src/lib/components/TooltipInner.svelte b/frontend/src/lib/components/TooltipInner.svelte
index b8c435f167..19a72e3a5b 100644
--- a/frontend/src/lib/components/TooltipInner.svelte
+++ b/frontend/src/lib/components/TooltipInner.svelte
@@ -2,8 +2,13 @@
 	import Markdown from 'svelte-exmarkdown'
 	import { ExternalLink } from 'lucide-svelte'
 	import { gfmPlugin } from 'svelte-exmarkdown/gfm'
-	export let documentationLink: string | undefined = undefined
-	export let markdownTooltip: string | undefined = undefined
+	interface Props {
+		documentationLink?: string | undefined;
+		markdownTooltip?: string | undefined;
+		children?: import('svelte').Snippet;
+	}
+
+	let { documentationLink = undefined, markdownTooltip = undefined, children }: Props = $props();
 	const plugins = [gfmPlugin()]
 </script>
 
@@ -15,7 +20,7 @@
 			<Markdown md={markdownTooltip} {plugins} />
 		</div>
 	{:else}
-		<slot />
+		{@render children?.()}
 	{/if}
 
 	{#if documentationLink}
diff --git a/frontend/src/lib/components/Uptodate.svelte b/frontend/src/lib/components/Uptodate.svelte
index 8dc5f00eee..56119732df 100644
--- a/frontend/src/lib/components/Uptodate.svelte
+++ b/frontend/src/lib/components/Uptodate.svelte
@@ -3,7 +3,7 @@
 	import { isCloudHosted } from '$lib/cloud'
 	import Tooltip from './Tooltip.svelte'
 
-	let uptodate: string | undefined = undefined
+	let uptodate: string | undefined = $state(undefined)
 
 	async function loadVersion() {
 		try {
diff --git a/frontend/src/lib/components/Urlize.svelte b/frontend/src/lib/components/Urlize.svelte
index 060ec9f141..d682a39ca9 100644
--- a/frontend/src/lib/components/Urlize.svelte
+++ b/frontend/src/lib/components/Urlize.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
 	import { urlize } from '$lib/utils'
 
-	export let text: string
-	$: parsed = text ? urlize(text, 'html') : ''
+	interface Props {
+		text: string;
+	}
+
+	let { text }: Props = $props();
+	let parsed = $derived(text ? urlize(text, 'html') : '')
 </script>
 
 {@html parsed}
diff --git a/frontend/src/lib/components/Version.svelte b/frontend/src/lib/components/Version.svelte
index 9406bed01f..aa0b58624d 100644
--- a/frontend/src/lib/components/Version.svelte
+++ b/frontend/src/lib/components/Version.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { SettingsService } from '$lib/gen'
 
-	let version = ''
+	let version = $state('')
 
 	loadVersion()
 
diff --git a/frontend/src/lib/components/WhitelistIp.svelte b/frontend/src/lib/components/WhitelistIp.svelte
index 600c879c79..8d8bac1a5d 100644
--- a/frontend/src/lib/components/WhitelistIp.svelte
+++ b/frontend/src/lib/components/WhitelistIp.svelte
@@ -2,7 +2,7 @@
 	import { WorkerService } from '$lib/gen'
 	import { Alert } from './common'
 
-	let ips: string[] | undefined = undefined
+	let ips: string[] | undefined = $state(undefined)
 
 	WorkerService.listWorkers({ pingSince: 300 }).then((workers) => {
 		ips = [
diff --git a/frontend/src/lib/components/WorkerGroup.svelte b/frontend/src/lib/components/WorkerGroup.svelte
index 0c0328c994..670f05a958 100644
--- a/frontend/src/lib/components/WorkerGroup.svelte
+++ b/frontend/src/lib/components/WorkerGroup.svelte
@@ -1,3 +1,5 @@
+<!-- @migration-task Error while migrating Svelte code: Can only bind to an Identifier or MemberExpression or a `{get, set}` pair
+https://svelte.dev/e/bind_invalid_expression -->
 <script lang="ts">
 	import { Copy, Plus, RefreshCcwIcon, Settings, Trash, X } from 'lucide-svelte'
 	import { Alert, Badge, Button, Drawer } from './common'
diff --git a/frontend/src/lib/components/WorkflowTimeline.svelte b/frontend/src/lib/components/WorkflowTimeline.svelte
index 28c000a03a..35cf4445ff 100644
--- a/frontend/src/lib/components/WorkflowTimeline.svelte
+++ b/frontend/src/lib/components/WorkflowTimeline.svelte
@@ -7,23 +7,15 @@
 	import TimelineBar from './TimelineBar.svelte'
 	import type { WorkflowStatus } from '$lib/gen'
 
-	export let flow_status: Record<string, WorkflowStatus>
-	export let flowDone = false
+	interface Props {
+		flow_status: Record<string, WorkflowStatus>;
+		flowDone?: boolean;
+	}
 
-	$: min = Object.values(flow_status).reduce(
-		(a, b) => Math.min(a, b.scheduled_for ? new Date(b.scheduled_for).getTime() : Infinity),
-		Infinity
-	)
-	$: max = flowDone
-		? Object.values(flow_status).reduce(
-				(a, b) =>
-					Math.max(a, b.started_at ? new Date(b.started_at).getTime() + (b.duration_ms ?? 0) : 0),
-				0
-		  )
-		: undefined
-	$: total = flowDone && max ? max - min : now - min
+	let { flow_status, flowDone = false }: Props = $props();
 
-	let now = getDbClockNow().getTime()
+
+	let now = $state(getDbClockNow().getTime())
 
 	let interval = setInterval((x) => {
 		if (!max) {
@@ -37,6 +29,18 @@
 	onDestroy(() => {
 		interval && clearInterval(interval)
 	})
+	let min = $derived(Object.values(flow_status).reduce(
+		(a, b) => Math.min(a, b.scheduled_for ? new Date(b.scheduled_for).getTime() : Infinity),
+		Infinity
+	))
+	let max = $derived(flowDone
+		? Object.values(flow_status).reduce(
+				(a, b) =>
+					Math.max(a, b.started_at ? new Date(b.started_at).getTime() + (b.duration_ms ?? 0) : 0),
+				0
+		  )
+		: undefined)
+	let total = $derived(flowDone && max ? max - min : now - min)
 </script>
 
 {#if flow_status}
diff --git a/frontend/src/lib/components/ZitadelSetting.svelte b/frontend/src/lib/components/ZitadelSetting.svelte
index 16e15a6070..ace0bd2e85 100644
--- a/frontend/src/lib/components/ZitadelSetting.svelte
+++ b/frontend/src/lib/components/ZitadelSetting.svelte
@@ -1,14 +1,18 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import IconedResourceType from './IconedResourceType.svelte'
 	import Toggle from './Toggle.svelte'
 
-	export let value: any
+	interface Props {
+		value: any;
+	}
 
-	$: enabled = value != undefined
+	let { value = $bindable() }: Props = $props();
 
-	let org = ''
 
-	$: changeOrg(org)
+	let org = $state('')
+
 
 	function changeOrg(org) {
 		if (value) {
@@ -28,10 +32,14 @@
 			}
 		}
 	}
+	let enabled = $derived(value != undefined)
+	run(() => {
+		changeOrg(org)
+	});
 </script>
 
 <div class="flex flex-col gap-1">
-	<!-- svelte-ignore a11y-label-has-associated-control -->
+	<!-- svelte-ignore a11y_label_has_associated_control -->
 	<label class="text-sm font-medium text-primary flex gap-4 items-center"
 		><div class="w-[120px]"><IconedResourceType name={'zitadel'} after={true} /></div><Toggle
 			checked={enabled}
diff --git a/frontend/src/lib/components/apps/components/display/InsertRowDrawerButton.svelte b/frontend/src/lib/components/apps/components/display/InsertRowDrawerButton.svelte
index d2f0f98a8c..f4507416fc 100644
--- a/frontend/src/lib/components/apps/components/display/InsertRowDrawerButton.svelte
+++ b/frontend/src/lib/components/apps/components/display/InsertRowDrawerButton.svelte
@@ -24,7 +24,7 @@
 </script>
 
 <svelte:window
-	on:keydown={(e) => {
+	onkeydown={(e) => {
 		if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
 			onConfirm()
 		}
diff --git a/frontend/src/lib/components/apps/editor/AppExportButton.svelte b/frontend/src/lib/components/apps/editor/AppExportButton.svelte
index 0bc4cf4b10..bda3dcb51a 100644
--- a/frontend/src/lib/components/apps/editor/AppExportButton.svelte
+++ b/frontend/src/lib/components/apps/editor/AppExportButton.svelte
@@ -14,11 +14,11 @@
 	import Tab from '$lib/components/common/tabs/Tab.svelte'
 	import HighlightTheme from '$lib/components/HighlightTheme.svelte'
 
-	let jsonViewerDrawer: Drawer
+	let jsonViewerDrawer: Drawer | undefined = $state()
 
-	let app: any | undefined = undefined
+	let app: any | undefined = $state(undefined)
 
-	let rawType: 'json' | 'yaml' = 'yaml'
+	let rawType: 'json' | 'yaml' = $state('yaml')
 
 	export function open(app_l: any) {
 		app = app_l
@@ -29,7 +29,7 @@
 <HighlightTheme />
 
 <Drawer bind:this={jsonViewerDrawer} size="800px">
-	<DrawerContent title="App Export" on:close={() => jsonViewerDrawer.toggleDrawer()}>
+	<DrawerContent title="App Export" on:close={() => jsonViewerDrawer?.toggleDrawer()}>
 		<div>
 			<Tabs bind:selected={rawType}>
 				<Tab value="yaml" label="YAML" />
diff --git a/frontend/src/lib/components/apps/editor/AppInputs.svelte b/frontend/src/lib/components/apps/editor/AppInputs.svelte
index ed9591903c..4876cb5a86 100644
--- a/frontend/src/lib/components/apps/editor/AppInputs.svelte
+++ b/frontend/src/lib/components/apps/editor/AppInputs.svelte
@@ -9,7 +9,7 @@
 
 	const { app } = getContext<AppViewerContext>('AppViewerContext')
 
-	let resourceOnly: boolean = true
+	let resourceOnly: boolean = $state(true)
 </script>
 
 <Alert type="info" title="Configurations">
diff --git a/frontend/src/lib/components/apps/editor/AppJsonEditor.svelte b/frontend/src/lib/components/apps/editor/AppJsonEditor.svelte
index 7572c8c0fe..5a955a8ce6 100644
--- a/frontend/src/lib/components/apps/editor/AppJsonEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/AppJsonEditor.svelte
@@ -10,12 +10,12 @@
 	import { createEventDispatcher } from 'svelte'
 	import { Globe, Loader2, Save } from 'lucide-svelte'
 
-	let jsonViewerDrawer: Drawer
+	let jsonViewerDrawer: Drawer | undefined = $state()
 
-	let code: string = ''
+	let code: string = $state('')
 	let path: string = ''
-	let useDraft: boolean = false
-	let loading = true
+	let useDraft: boolean = $state(false)
+	let loading = $state(true)
 	const dispatch = createEventDispatcher()
 
 	let app: any | undefined = undefined
@@ -73,7 +73,7 @@
 </script>
 
 <Drawer bind:this={jsonViewerDrawer} size="800px">
-	<DrawerContent title="App JSON" on:close={() => jsonViewerDrawer.toggleDrawer()}>
+	<DrawerContent title="App JSON" on:close={() => jsonViewerDrawer?.toggleDrawer()}>
 		{#if useDraft}
 			<div class="mb-1">
 				<Badge small color="indigo" baseClass="border border-indigo-200">+Draft</Badge>
diff --git a/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte b/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte
index 881e9de0a9..7c9932553e 100644
--- a/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte
+++ b/frontend/src/lib/components/apps/editor/RecomputeAllComponents.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { getContext, onMount } from 'svelte'
 	import type { App, AppEditorContext, AppViewerContext } from '../types'
 	import { allItems, BG_PREFIX } from '../utils'
@@ -10,12 +12,9 @@
 
 	let timeout: number | undefined = undefined
 	let shouldRefresh = false
-	let firstLoad = false
+	let firstLoad = $state(false)
 	let progressTimer: number | undefined = undefined
 
-	$: !firstLoad &&
-		canInitializeAll($initialized?.initializedComponents, $app) &&
-		refresh('all initialized')
 
 	// $: console.log('canInitializeAll', firstLoad, $initialized?.initializedComponents)
 	function canInitializeAll(initialized: string[] | undefined, app: App) {
@@ -53,8 +52,6 @@
 		}
 	}
 
-	$: $recomputeAllContext.componentNumber =
-		Object.values($runnableComponents).filter((x) => x.autoRefresh).length ?? 0
 
 	onMount(() => {
 		if (appEditorContext) {
@@ -112,7 +109,7 @@
 		onRefresh(!inter, 'setInter ' + source)
 	}
 
-	let refreshing: string[] = []
+	let refreshing: string[] = $state([])
 	function refresh(reason: string, excludeId: string | undefined = undefined) {
 		let isFirstLoad = false
 		if (!firstLoad && reason == 'all initialized') {
@@ -182,6 +179,15 @@
 			setInter: (n) => setInter(n, 'all context')
 		}
 	})
+	run(() => {
+		!firstLoad &&
+			canInitializeAll($initialized?.initializedComponents, $app) &&
+			refresh('all initialized')
+	});
+	run(() => {
+		$recomputeAllContext.componentNumber =
+			Object.values($runnableComponents).filter((x) => x.autoRefresh).length ?? 0
+	});
 </script>
 
 <RecomputeAllButton
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/CssHelperPanel.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/CssHelperPanel.svelte
index c50b0ad656..2971a52654 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/CssHelperPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/CssHelperPanel.svelte
@@ -76,7 +76,7 @@
 
 	entries.sort((a, b) => (b.order ?? 0) - (a.order ?? 0) + a.name.localeCompare(b.name))
 
-	let search = ''
+	let search = $state('')
 </script>
 
 <div class="p-2">
@@ -98,12 +98,15 @@
 					}
 				}}
 			>
-				<div slot="titleSlot" class="flex items-center">
-					<svelte:component this={icon} size={18} />
-					<span class="ml-1">
-						{name}
-					</span>
-				</div>
+				{#snippet titleSlot()}
+								{@const SvelteComponent = icon}
+				<div  class="flex items-center">
+						<SvelteComponent size={18} />
+						<span class="ml-1">
+							{name}
+						</span>
+					</div>
+							{/snippet}
 				{#if description}
 					<div class="py-2 text-xs text-gray-500">{description}</div>
 				{/if}
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/CustomComponentsList.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/CustomComponentsList.svelte
index 7460c30de9..7d2b84b264 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/CustomComponentsList.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/CustomComponentsList.svelte
@@ -15,9 +15,9 @@
 	let customcomponents: Array<{
 		name: string
 		path: string
-	}> = []
+	}> = $state([])
 
-	let loading: boolean = false
+	let loading: boolean = $state(false)
 
 	async function getCustomComponents() {
 		loading = true
@@ -44,7 +44,7 @@
 							}
 						},
 						name: nameField,
-						js: await files[0].text()
+						js: await files?.[0].text()
 					}
 				}
 			})
@@ -61,10 +61,10 @@
 		nameField = ''
 	}
 
-	let nameField: string = ''
-	let reactVersion: string = '18.2.0'
-	let files: FileList
-	let useReact = true
+	let nameField: string = $state('')
+	let reactVersion: string = $state('18.2.0')
+	let files: FileList | undefined = $state()
+	let useReact = $state(true)
 
 	getCustomComponents()
 </script>
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleMenu.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleMenu.svelte
index cf5bda33c7..6630391b04 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleMenu.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/QuickStyleMenu.svelte
@@ -211,11 +211,13 @@
 				{isOpen[prefix] ? '!bg-surface-secondary hover:!bg-surface-hover' : ''}"
 			>
 				<!-- @migration-task: migrate this slot by hand, `title` would shadow a prop on the parent component -->
-				<svelte:fragment slot="titleSlot">
-					<span class="font-normal text-xs">
-						{group}
-					</span>
-				</svelte:fragment>
+				{#snippet titleSlot()}
+							
+						<span class="font-normal text-xs">
+							{group}
+						</span>
+					
+							{/snippet}
 				<div class="flex justify-start items-center flex-wrap gap-x-4 gap-y-1 pt-3">
 					{#each property[group] as p}
 						{@const {
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/ThemeList.svelte b/frontend/src/lib/components/apps/editor/componentsPanel/ThemeList.svelte
index abeb1bed53..5296ebe3a6 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/ThemeList.svelte
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/ThemeList.svelte
@@ -19,14 +19,14 @@
 	const { previewTheme, app } = getContext<AppViewerContext>('AppViewerContext')
 
 	let cssString: string | undefined = $app?.theme?.type === 'inlined' ? $app.theme.css : undefined
-	$: type = $app?.theme?.type
+	let type = $derived($app?.theme?.type)
 
 	let themes: Array<{
 		name: string
 		path: string
-	}> = []
+	}> = $state([])
 
-	let loading: boolean = false
+	let loading: boolean = $state(false)
 
 	async function getThemes() {
 		loading = true
@@ -62,8 +62,8 @@
 		}
 	}
 
-	let nameField: string = ''
-	let previewThemePath: string | undefined = undefined
+	let nameField: string = $state('')
+	let previewThemePath: string | undefined = $state(undefined)
 
 	onMount(() => {
 		getThemes()
diff --git a/frontend/src/lib/components/apps/editor/contextPanel/DebugPanel.svelte b/frontend/src/lib/components/apps/editor/contextPanel/DebugPanel.svelte
index c0094fba48..c97b4b791e 100644
--- a/frontend/src/lib/components/apps/editor/contextPanel/DebugPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/contextPanel/DebugPanel.svelte
@@ -12,12 +12,12 @@
 
 	const { app, initialized } = getContext<AppViewerContext>('AppViewerContext')
 
-	$: unintitializedComponents = allItems($app.grid, $app.subgrids)
+	let unintitializedComponents = $derived(allItems($app.grid, $app.subgrids)
 		.map((x) => x.id)
 		.filter((x) => !$initialized.initializedComponents?.includes(x))
-		.sort()
+		.sort())
 
-	$: subgridsErrors = Object.keys($app.subgrids ?? {})
+	let subgridsErrors = $derived(Object.keys($app.subgrids ?? {})
 		.map((x) => {
 			const parentId = x.split('-')[0]
 			const parent = findGridItem($app, parentId)
@@ -39,7 +39,7 @@
 				}
 			}
 		})
-		.filter(Boolean)
+		.filter(Boolean))
 </script>
 
 <div class="flex flex-col gap-8" style="all:none;">
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/StylePanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/StylePanel.svelte
index 2bcb0c4114..e99c44a8c4 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/StylePanel.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/StylePanel.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { Tab, TabContent } from '$lib/components/common'
 	import { sendUserToast } from '$lib/toast'
 	import { getContext } from 'svelte'
@@ -20,28 +22,28 @@
 
 	const { app, cssEditorOpen, selectedComponent } = getContext<AppViewerContext>('AppViewerContext')
 
-	let component: AppComponent | undefined
-	$: {
+	let component: AppComponent | undefined = $state()
+	run(() => {
 		const newComponent = findComponentSettings($app, $selectedComponent?.[0])?.item?.data
 		if (component != newComponent) {
 			component = newComponent
 		}
-	}
+	});
 
-	let tab: 'local' | 'global' = 'local'
-	let overrideGlobalCSS: (() => void) | undefined = undefined
-	let overrideLocalCSS: (() => void) | undefined = undefined
-	$: type = component?.type
-	let migrationModal: CssMigrationModal | undefined = undefined
+	let tab: 'local' | 'global' = $state('local')
+	let overrideGlobalCSS: (() => void) | undefined = $state(undefined)
+	let overrideLocalCSS: (() => void) | undefined = $state(undefined)
+	let type = $derived(component?.type)
+	let migrationModal: CssMigrationModal | undefined = $state(undefined)
 
-	$: customCssByComponentType =
-		component?.type && $app.css
+	let customCssByComponentType =
+		$derived(component?.type && $app.css
 			? Object.entries($app.css[component.type] || {}).map(([id, v]) => ({
 					id,
 					forceStyle: v?.style != undefined,
 					forceClass: v?.['class'] != undefined
 				}))
-			: undefined
+			: undefined)
 
 	function copyLocalToGlobal(name: string, value: ComponentCssProperty | undefined) {
 		if (!value) {
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/UploadInputEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/UploadInputEditor.svelte
index dc5a9b6aec..09582a1ef3 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/UploadInputEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/inputEditor/UploadInputEditor.svelte
@@ -75,7 +75,8 @@
 		}}
 	>
 		<!-- @migration-task: migrate this slot by hand, `selected-title` is an invalid identifier -->
-		<svelte:fragment slot="selected-title">
+		<!-- @migration-task: migrate this slot by hand, `selected-title` is an invalid identifier -->
+	<svelte:fragment slot="selected-title">
 			<!-- Removing the title when there is a selected file -->
 			<span></span>
 		</svelte:fragment>
diff --git a/frontend/src/lib/components/assets/AssetButtons.svelte b/frontend/src/lib/components/assets/AssetButtons.svelte
index e429b1664f..1f9a1e0139 100644
--- a/frontend/src/lib/components/assets/AssetButtons.svelte
+++ b/frontend/src/lib/components/assets/AssetButtons.svelte
@@ -40,7 +40,9 @@
 	{#if asset.kind === 'resource' && resourceDataCache[asset.path] === undefined}
 		<Tooltip class="mr-2.5">
 			<AlertTriangle size={16} class="text-orange-600 dark:text-orange-500" />
-			<svelte:fragment slot="text">Could not find resource</svelte:fragment>
+			{#snippet text()}
+						Could not find resource
+					{/snippet}
 		</Tooltip>
 	{/if}
 	{#if assetCanBeExplored(asset, { resource_type: resourceDataCache[asset.path] })}
diff --git a/frontend/src/lib/components/assets/AssetsDropdownButton.svelte b/frontend/src/lib/components/assets/AssetsDropdownButton.svelte
index 0948c02a96..29ce4f6591 100644
--- a/frontend/src/lib/components/assets/AssetsDropdownButton.svelte
+++ b/frontend/src/lib/components/assets/AssetsDropdownButton.svelte
@@ -92,106 +92,116 @@
 	bind:isOpen
 	escapeBehavior="ignore"
 >
-	<svelte:fragment slot="trigger">
-		<div
-			class={twMerge(
-				size === '3xs' ? 'h-[1.6rem]' : 'py-1.5',
-				'text-xs flex items-center gap-1.5 px-2 rounded-md relative',
-				'border border-tertiary/30',
-				'bg-surface hover:bg-surface-hover active:bg-surface',
-				'transition-all hover:text-primary cursor-pointer'
-			)}
-		>
+	{#snippet trigger()}
+	
 			<div
-				bind:this={blueBgDiv}
-				class="absolute pointer-events-none bg-slate-300 dark:bg-[#576278] inset-0 rounded-md opacity-0"
-			></div>
-			<Pyramid size={size === '3xs' ? 13 : 16} class="z-10" />
-			<span
-				class={twMerge('z-10 font-normal', size === '3xs' ? 'text-3xs mt-[0.08rem]' : 'text-xs')}
+				class={twMerge(
+					size === '3xs' ? 'h-[1.6rem]' : 'py-1.5',
+					'text-xs flex items-center gap-1.5 px-2 rounded-md relative',
+					'border border-tertiary/30',
+					'bg-surface hover:bg-surface-hover active:bg-surface',
+					'transition-all hover:text-primary cursor-pointer'
+				)}
 			>
-				{noBtnText ? assets.length : pluralize(assets.length, 'asset')}
-			</span>
-		</div>
-	</svelte:fragment>
-	<svelte:fragment slot="content">
-		<ul class="divide-y rounded-md">
-			{#each assets as asset}
-				<li
-					class="text-sm px-3 h-12 flex gap-3 items-center hover:bg-surface-hover/25"
-					onmouseenter={() => onHoverLi?.(asset, 'enter')}
-					onmouseleave={() => onHoverLi?.(asset, 'leave')}
+				<div
+					bind:this={blueBgDiv}
+					class="absolute pointer-events-none bg-slate-300 dark:bg-[#576278] inset-0 rounded-md opacity-0"
+				></div>
+				<Pyramid size={size === '3xs' ? 13 : 16} class="z-10" />
+				<span
+					class={twMerge('z-10 font-normal', size === '3xs' ? 'text-3xs mt-[0.08rem]' : 'text-xs')}
 				>
-					<Popover
-						contentClasses="py-2 px-4 flex flex-col gap-2"
-						disablePopup={!!asset.access_type}
+					{noBtnText ? assets.length : pluralize(assets.length, 'asset')}
+				</span>
+			</div>
+		
+	{/snippet}
+	{#snippet content()}
+	
+			<ul class="divide-y rounded-md">
+				{#each assets as asset}
+					<li
+						class="text-sm px-3 h-12 flex gap-3 items-center hover:bg-surface-hover/25"
+						onmouseenter={() => onHoverLi?.(asset, 'enter')}
+						onmouseleave={() => onHoverLi?.(asset, 'leave')}
 					>
-						<svelte:fragment slot="trigger">
-							<div
-								class={twMerge(
-									'text-xs font-normal border text-primary w-10 p-1 text-center rounded-md',
-									!asset.access_type && !asset.alt_access_type
-										? 'text-orange-500 !border-orange-500'
-										: '',
-									!asset.access_type ? 'hover:bg-surface active:opacity-80' : ''
-								)}
-							>
-								{formatAssetAccessType(getAccessType(asset))}
-							</div>
-						</svelte:fragment>
-						<svelte:fragment slot="content">
-							{#if !asset.access_type}
-								<span class="text-sm text-primary leading-4">
-									Could not infer automatically <br />
-									<span class="text-xs">Please select manually </span>
-								</span>
-								<div class="flex items-center gap-2">
-									<ToggleButtonGroup bind:selected={asset.alt_access_type} class="max-w-fit">
-										{#snippet children({ item })}
-											<ToggleButton value="r" label="Read" {item} />
-											<ToggleButton value="w" label="Write" {item} />
-											<ToggleButton value="rw" label="Read/Write" {item} />
-										{/snippet}
-									</ToggleButtonGroup>
+						<Popover
+							contentClasses="py-2 px-4 flex flex-col gap-2"
+							disablePopup={!!asset.access_type}
+						>
+							{#snippet trigger()}
+											
+									<div
+										class={twMerge(
+											'text-xs font-normal border text-primary w-10 p-1 text-center rounded-md',
+											!asset.access_type && !asset.alt_access_type
+												? 'text-orange-500 !border-orange-500'
+												: '',
+											!asset.access_type ? 'hover:bg-surface active:opacity-80' : ''
+										)}
+									>
+										{formatAssetAccessType(getAccessType(asset))}
+									</div>
+								
+											{/snippet}
+							{#snippet content()}
+											
+									{#if !asset.access_type}
+										<span class="text-sm text-primary leading-4">
+											Could not infer automatically <br />
+											<span class="text-xs">Please select manually </span>
+										</span>
+										<div class="flex items-center gap-2">
+											<ToggleButtonGroup bind:selected={asset.alt_access_type} class="max-w-fit">
+												{#snippet children({ item })}
+													<ToggleButton value="r" label="Read" {item} />
+													<ToggleButton value="w" label="Write" {item} />
+													<ToggleButton value="rw" label="Read/Write" {item} />
+												{/snippet}
+											</ToggleButtonGroup>
 
-									<Tooltip2>
-										This is used to determine if the asset should be displayed as an input or an
-										output node in the flow editor
-									</Tooltip2>
-								</div>
-							{/if}
-						</svelte:fragment>
-					</Popover>
-					<div class="flex flex-col flex-1">
-						<Tooltip class="select-none w-48 truncate" disablePopup={disableLiTooltip}>
-							{asset.path}
-							<svelte:fragment slot="text">
+											<Tooltip2>
+												This is used to determine if the asset should be displayed as an input or an
+												output node in the flow editor
+											</Tooltip2>
+										</div>
+									{/if}
+								
+											{/snippet}
+						</Popover>
+						<div class="flex flex-col flex-1">
+							<Tooltip class="select-none w-48 truncate" disablePopup={disableLiTooltip}>
 								{asset.path}
-							</svelte:fragment>
-						</Tooltip>
-						<span class="text-xs text-primary select-none">
-							{liSubtitle?.(asset) ??
-								formatAssetKind({
-									...asset,
-									...(asset.kind === 'resource'
-										? { metadata: { resource_type: resourceDataCache[asset.path] } }
-										: {})
-								})}
-						</span>
-					</div>
+								{#snippet text()}
+													
+										{asset.path}
+									
+													{/snippet}
+							</Tooltip>
+							<span class="text-xs text-primary select-none">
+								{liSubtitle?.(asset) ??
+									formatAssetKind({
+										...asset,
+										...(asset.kind === 'resource'
+											? { metadata: { resource_type: resourceDataCache[asset.path] } }
+											: {})
+									})}
+							</span>
+						</div>
 
-					<AssetButtons
-						onClick={() => (isOpen = false)}
-						{asset}
-						{resourceDataCache}
-						{dbManagerDrawer}
-						{resourceEditorDrawer}
-						{s3FilePicker}
-					/>
-				</li>
-			{/each}
-		</ul>
-	</svelte:fragment>
+						<AssetButtons
+							onClick={() => (isOpen = false)}
+							{asset}
+							{resourceDataCache}
+							{dbManagerDrawer}
+							{resourceEditorDrawer}
+							{s3FilePicker}
+						/>
+					</li>
+				{/each}
+			</ul>
+		
+	{/snippet}
 </Popover>
 <S3FilePicker bind:this={s3FilePicker} readOnlyMode />
 <DbManagerDrawer bind:this={dbManagerDrawer} />
diff --git a/frontend/src/lib/components/auditLogs/AuditLogsFilters.svelte b/frontend/src/lib/components/auditLogs/AuditLogsFilters.svelte
index b6dee8b226..f554c86b1a 100644
--- a/frontend/src/lib/components/auditLogs/AuditLogsFilters.svelte
+++ b/frontend/src/lib/components/auditLogs/AuditLogsFilters.svelte
@@ -1,3 +1,5 @@
+<!-- @migration-task Error while migrating Svelte code: `$bindable()` can only be used inside a `$props()` declaration
+https://svelte.dev/e/bindable_invalid_location -->
 <script lang="ts" module>
 	async function loadResources(workspace: string): Promise<string[]> {
 		const r = await ResourceService.listResource({ workspace })
diff --git a/frontend/src/lib/components/common/FileProgressBar.svelte b/frontend/src/lib/components/common/FileProgressBar.svelte
index d339d9477f..190254c6aa 100644
--- a/frontend/src/lib/components/common/FileProgressBar.svelte
+++ b/frontend/src/lib/components/common/FileProgressBar.svelte
@@ -1,23 +1,37 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { tweened } from 'svelte/motion'
 	import { cubicOut } from 'svelte/easing'
 
-	export let color = 'blue'
-	export let progress = 0
-	export let ended: boolean = false
+	interface Props {
+		color?: string;
+		progress?: number;
+		ended?: boolean;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		color = 'blue',
+		progress = 0,
+		ended = false,
+		children
+	}: Props = $props();
 
 	const tweenedProgress = tweened(progress, {
 		duration: 400,
 		easing: cubicOut
 	})
 
-	$: tweenedProgress.set(progress)
+	run(() => {
+		tweenedProgress.set(progress)
+	});
 </script>
 
 {#key color}
 	<div class="flex flex-row gap-1 items-center justify-between w-full">
 		{#if ended}
-			<slot />
+			{@render children?.()}
 		{:else}
 			<div class="progress-bar">
 				<div
diff --git a/frontend/src/lib/components/common/alert/Notification.svelte b/frontend/src/lib/components/common/alert/Notification.svelte
index 4beca30071..7c4aadc271 100644
--- a/frontend/src/lib/components/common/alert/Notification.svelte
+++ b/frontend/src/lib/components/common/alert/Notification.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
-	export let notificationCount = 0
-	export let notificationLimit: number | undefined = undefined
+	interface Props {
+		notificationCount?: number;
+		notificationLimit?: number | undefined;
+	}
+
+	let { notificationCount = 0, notificationLimit = undefined }: Props = $props();
 </script>
 
 {#if notificationCount > 0}
diff --git a/frontend/src/lib/components/common/breadcrumb/Breadcrumb.svelte b/frontend/src/lib/components/common/breadcrumb/Breadcrumb.svelte
index 17e7a60132..076ae7439d 100644
--- a/frontend/src/lib/components/common/breadcrumb/Breadcrumb.svelte
+++ b/frontend/src/lib/components/common/breadcrumb/Breadcrumb.svelte
@@ -2,9 +2,19 @@
 	import { createEventDispatcher } from 'svelte'
 	import Button from '../button/Button.svelte'
 
-	export let items: string[]
-	export let selectedIndex: number
-	export let disabled: boolean = false
+	interface Props {
+		items: string[];
+		selectedIndex: number;
+		disabled?: boolean;
+		separator?: import('svelte').Snippet;
+	}
+
+	let {
+		items,
+		selectedIndex,
+		disabled = false,
+		separator
+	}: Props = $props();
 
 	const dispatch = createEventDispatcher()
 </script>
@@ -12,7 +22,7 @@
 <div class="flex items-center justify-center">
 	{#each items as item, index}
 		{#if index > 0}
-			<slot name="separator" />
+			{@render separator?.()}
 		{/if}
 		<Button
 			size="sm"
diff --git a/frontend/src/lib/components/common/button/AnimatedButton.svelte b/frontend/src/lib/components/common/button/AnimatedButton.svelte
index 7248b891dc..3ceb0ebd4c 100644
--- a/frontend/src/lib/components/common/button/AnimatedButton.svelte
+++ b/frontend/src/lib/components/common/button/AnimatedButton.svelte
@@ -1,12 +1,26 @@
 <script lang="ts">
 	import AnimatedButtonInner from './AnimatedButtonInner.svelte'
-	export let marginWidth = '2px'
-	export let animationDuration = '2s'
-	export let baseRadius = '4px'
-	export let animate = true
-	export let wrapperClasses = ''
-	export let ringColor = 'transparent'
-	export let darkMode = false
+	interface Props {
+		marginWidth?: string;
+		animationDuration?: string;
+		baseRadius?: string;
+		animate?: boolean;
+		wrapperClasses?: string;
+		ringColor?: string;
+		darkMode?: boolean;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		marginWidth = '2px',
+		animationDuration = '2s',
+		baseRadius = '4px',
+		animate = true,
+		wrapperClasses = '',
+		ringColor = 'transparent',
+		darkMode = false,
+		children
+	}: Props = $props();
 </script>
 
 {#if animate}
@@ -19,10 +33,10 @@
 		{ringColor}
 		{darkMode}
 	>
-		<slot />
+		{@render children?.()}
 	</AnimatedButtonInner>
 {:else}
 	<div class={wrapperClasses}>
-		<slot />
+		{@render children?.()}
 	</div>
 {/if}
diff --git a/frontend/src/lib/components/common/button/AnimatedButtonInner.svelte b/frontend/src/lib/components/common/button/AnimatedButtonInner.svelte
index 7396b5314b..9ba46928a0 100644
--- a/frontend/src/lib/components/common/button/AnimatedButtonInner.svelte
+++ b/frontend/src/lib/components/common/button/AnimatedButtonInner.svelte
@@ -1,27 +1,41 @@
 <script lang="ts">
 	import { twMerge } from 'tailwind-merge'
 	import DarkModeObserver from '$lib/components/DarkModeObserver.svelte'
-	export let marginWidth = '2px'
-	export let animationDuration = '2s'
-	export let baseRadius = '4px'
-	export let animate = true
-	export let wrapperClasses = ''
-	export let ringColor = 'transparent'
-	export let darkMode = false
+	interface Props {
+		marginWidth?: string;
+		animationDuration?: string;
+		baseRadius?: string;
+		animate?: boolean;
+		wrapperClasses?: string;
+		ringColor?: string;
+		darkMode?: boolean;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		marginWidth = '2px',
+		animationDuration = '2s',
+		baseRadius = '4px',
+		animate = true,
+		wrapperClasses = '',
+		ringColor = 'transparent',
+		darkMode = $bindable(false),
+		children
+	}: Props = $props();
 
 	const gradientColors = {
 		light: ['#d6e5ff', '#0073ff', '#5aa2fa', '#0272fa', '#d6e5ff'],
 		dark: ['#0469db', '#15498a', '#031ea3', '#0073ff', '#0469db']
 	}
 
-	let clientWidth = 0
-	let clientHeight = 0
+	let clientWidth = $state(0)
+	let clientHeight = $state(0)
 
-	$: circleRadius = Math.ceil(
+	let circleRadius = $derived(Math.ceil(
 		Math.sqrt(clientWidth * clientWidth + clientHeight * clientHeight) / 2
-	)
+	))
 
-	$: gradientString = `from 0deg, ${gradientColors[darkMode ? 'dark' : 'light'].join(', ')}`
+	let gradientString = $derived(`from 0deg, ${gradientColors[darkMode ? 'dark' : 'light'].join(', ')}`)
 </script>
 
 <DarkModeObserver bind:darkMode />
@@ -33,7 +47,7 @@
 	bind:clientWidth
 	bind:clientHeight
 >
-	<slot />
+	{@render children?.()}
 </div>
 
 <style>
diff --git a/frontend/src/lib/components/common/button/PulseButton.svelte b/frontend/src/lib/components/common/button/PulseButton.svelte
index 8b1603cf81..537d8915e3 100644
--- a/frontend/src/lib/components/common/button/PulseButton.svelte
+++ b/frontend/src/lib/components/common/button/PulseButton.svelte
@@ -1,10 +1,20 @@
-<script>
-	export let pulseDuration = 2
-	export let numberOfPulses = 3
-	export let scale = 1.2
+<script lang="ts">
+	interface Props {
+		pulseDuration?: number;
+		numberOfPulses?: number;
+		scale?: number;
+		children?: import('svelte').Snippet;
+	}
 
-	let isPulsing = false
-	let pulseCount = 1
+	let {
+		pulseDuration = 2,
+		numberOfPulses = 3,
+		scale = 1.2,
+		children
+	}: Props = $props();
+
+	let isPulsing = $state(false)
+	let pulseCount = $state(1)
 
 	export function triggerPulse(count) {
 		if (pulseCount < 1) return
@@ -20,7 +30,7 @@
 
 <div class="relative">
 	<div>
-		<slot />
+		{@render children?.()}
 	</div>
 	{#each Array(numberOfPulses) as _, i}
 		<div
diff --git a/frontend/src/lib/components/common/button/RoundIconButton.svelte b/frontend/src/lib/components/common/button/RoundIconButton.svelte
index 3d05d10f13..4a9c62d7a6 100644
--- a/frontend/src/lib/components/common/button/RoundIconButton.svelte
+++ b/frontend/src/lib/components/common/button/RoundIconButton.svelte
@@ -1,13 +1,18 @@
 <script lang="ts">
-	export let color: 'light' | 'dark' | undefined = 'light'
-	export let border: boolean = false
+	interface Props {
+		color?: 'light' | 'dark' | undefined;
+		border?: boolean;
+		children?: import('svelte').Snippet;
+	}
 
-	$: colorClasses = {
+	let { color = 'light', border = false, children }: Props = $props();
+
+	let colorClasses = $derived({
 		light: 'text-primary bg-surface hover:bg-surface-hover text-primary',
 		dark: 'text-primary hover:bg-surface-hover-dark text-primary'
-	}[color ?? 'light']
+	}[color ?? 'light'])
 </script>
 
 <div class="rounded-full p-1 {colorClasses} {border ? 'border border-tertiary' : ''}">
-	<slot />
+	{@render children?.()}
 </div>
diff --git a/frontend/src/lib/components/common/button/UndoRedo.svelte b/frontend/src/lib/components/common/button/UndoRedo.svelte
index 7a12eb1fc9..107747ddb2 100644
--- a/frontend/src/lib/components/common/button/UndoRedo.svelte
+++ b/frontend/src/lib/components/common/button/UndoRedo.svelte
@@ -3,8 +3,12 @@
 	import { createEventDispatcher } from 'svelte'
 	import { Button } from '..'
 
-	export let undoProps: Record<string, any> = {}
-	export let redoProps: Record<string, any> = {}
+	interface Props {
+		undoProps?: Record<string, any>;
+		redoProps?: Record<string, any>;
+	}
+
+	let { undoProps = {}, redoProps = {} }: Props = $props();
 	const dispatch = createEventDispatcher()
 </script>
 
diff --git a/frontend/src/lib/components/common/calendarPicker/CalendarPicker.svelte b/frontend/src/lib/components/common/calendarPicker/CalendarPicker.svelte
index a228e207f1..842ab6e4bc 100644
--- a/frontend/src/lib/components/common/calendarPicker/CalendarPicker.svelte
+++ b/frontend/src/lib/components/common/calendarPicker/CalendarPicker.svelte
@@ -1,3 +1,4 @@
+<!-- @migration-task Error while migrating Svelte code: $$props is used together with named props in a way that cannot be automatically migrated. -->
 <script lang="ts">
 	import { Calendar } from 'lucide-svelte'
 	import { createEventDispatcher } from 'svelte'
diff --git a/frontend/src/lib/components/common/clearableInput/ClearableInput.svelte b/frontend/src/lib/components/common/clearableInput/ClearableInput.svelte
index d5a2a6b2fd..5e5a28c5fc 100644
--- a/frontend/src/lib/components/common/clearableInput/ClearableInput.svelte
+++ b/frontend/src/lib/components/common/clearableInput/ClearableInput.svelte
@@ -1,21 +1,41 @@
 <script lang="ts">
+	import { run, createBubbler, stopPropagation, preventDefault } from 'svelte/legacy';
+
+	const bubble = createBubbler();
 	import { createEventDispatcher } from 'svelte'
 	import { fade } from 'svelte/transition'
 	import { X } from 'lucide-svelte'
 	import { createDispatcherIfMounted } from '$lib/createDispatcherIfMounted'
 
-	export let value: any = ''
-	export let placeholder = ''
-	export let type: 'text' | 'textarea' | 'number' = 'text'
-	export let inputClass = ''
-	export let wrapperClass = ''
-	export let buttonClass = ''
+	interface Props {
+		value?: any;
+		placeholder?: string;
+		type?: 'text' | 'textarea' | 'number';
+		inputClass?: string;
+		wrapperClass?: string;
+		buttonClass?: string;
+		children?: import('svelte').Snippet;
+		[key: string]: any
+	}
+
+	let {
+		value = $bindable(''),
+		placeholder = '',
+		type = 'text',
+		inputClass = '',
+		wrapperClass = '',
+		buttonClass = '',
+		children,
+		...rest
+	}: Props = $props();
 	const dispatch = createEventDispatcher()
 	const dispatchIfMounted = createDispatcherIfMounted(dispatch)
-	let isHovered = false
+	let isHovered = $state(false)
 
-	$: isNumeric = ['number', 'range'].includes(type)
-	$: dispatchIfMounted('change', value)
+	let isNumeric = $derived(['number', 'range'].includes(type))
+	run(() => {
+		dispatchIfMounted('change', value)
+	});
 
 	function handleInput(e) {
 		value = isNumeric ? +e.target.value : e.target.value
@@ -25,14 +45,16 @@
 		value = ''
 	}
 
-	$: if (value === undefined) value = ''
+	run(() => {
+		if (value === undefined) value = ''
+	});
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	class="relative grow {wrapperClass}"
-	on:mouseenter={() => (isHovered = true)}
-	on:mouseleave={() => (isHovered = false)}
+	onmouseenter={() => (isHovered = true)}
+	onmouseleave={() => (isHovered = false)}
 >
 	{#if type === 'textarea'}
 		<textarea
@@ -40,11 +62,11 @@
 			{placeholder}
 			rows="1"
 			class="resize-y {inputClass}"
-			{...$$restProps}
-			on:input={handleInput}
-			on:keydown|stopPropagation
-			on:focus
-			on:blur
+			{...rest}
+			oninput={handleInput}
+			onkeydown={stopPropagation(bubble('keydown'))}
+			onfocus={bubble('focus')}
+			onblur={bubble('blur')}
 		></textarea>
 	{:else}
 		<input
@@ -52,11 +74,11 @@
 			{value}
 			{placeholder}
 			class=" {(value ? '!pr-[26px] ' : '') + inputClass}"
-			{...$$restProps}
-			on:input={handleInput}
-			on:keydown|stopPropagation
-			on:focus
-			on:blur
+			{...rest}
+			oninput={handleInput}
+			onkeydown={stopPropagation(bubble('keydown'))}
+			onfocus={bubble('focus')}
+			onblur={bubble('blur')}
 		/>
 	{/if}
 	{#if value && isHovered}
@@ -65,10 +87,10 @@
 			class="absolute z-10 top-[9.5px] right-2 rounded-full p-0.5 text-primary bg-surface-secondary
 			 hover:bg-surface-hover focus:bg-surface-hover {buttonClass}"
 			aria-label="Clear"
-			on:click|preventDefault|stopPropagation={clear}
+			onclick={stopPropagation(preventDefault(clear))}
 		>
 			<X size={11} class="" />
 		</button>
 	{/if}
-	<slot />
+	{@render children?.()}
 </div>
diff --git a/frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte b/frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte
index 23d91f790a..8a4fcc59b2 100644
--- a/frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte
+++ b/frontend/src/lib/components/common/confirmationModal/ConfirmationModal.svelte
@@ -77,7 +77,7 @@
 	const Icon = $derived(theme[type].Icon ?? AlertTriangle)
 </script>
 
-<svelte:window on:keydown|capture={onKeyDown} />
+<svelte:window onkeydowncapture={onKeyDown} />
 
 {#if open}
 	<div
diff --git a/frontend/src/lib/components/common/fileInput/FileInput.svelte b/frontend/src/lib/components/common/fileInput/FileInput.svelte
index 37a8b3801e..a103a9b33e 100644
--- a/frontend/src/lib/components/common/fileInput/FileInput.svelte
+++ b/frontend/src/lib/components/common/fileInput/FileInput.svelte
@@ -1,3 +1,4 @@
+<!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot (selected-title to selected_title) making the component unusable -->
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte'
 	import { FileUp, Trash } from 'lucide-svelte'
diff --git a/frontend/src/lib/components/common/fileUpload/FileUploadModal.svelte b/frontend/src/lib/components/common/fileUpload/FileUploadModal.svelte
index 916c3b671b..f45860e62e 100644
--- a/frontend/src/lib/components/common/fileUpload/FileUploadModal.svelte
+++ b/frontend/src/lib/components/common/fileUpload/FileUploadModal.svelte
@@ -6,12 +6,16 @@
 	import { X } from 'lucide-svelte'
 	import FileUpload from './FileUpload.svelte'
 
-	export let title: string
-	export let open: boolean = false
 
-	export let fileKey: string | undefined = undefined
+	interface Props {
+		title: string;
+		open?: boolean;
+		fileKey?: string | undefined;
+	}
 
-	let s3Folder: string = ''
+	let { title, open = false, fileKey = $bindable(undefined) }: Props = $props();
+
+	let s3Folder: string = $state('')
 	const dispatch = createEventDispatcher()
 
 	function fadeFast(node: HTMLElement) {
diff --git a/frontend/src/lib/components/common/layout/ListElement.svelte b/frontend/src/lib/components/common/layout/ListElement.svelte
index 891079ce42..f865305c9e 100644
--- a/frontend/src/lib/components/common/layout/ListElement.svelte
+++ b/frontend/src/lib/components/common/layout/ListElement.svelte
@@ -1,3 +1,11 @@
+<script lang="ts">
+	interface Props {
+		children?: import('svelte').Snippet;
+	}
+
+	let { children }: Props = $props();
+</script>
+
 <div class="w-full flex-grow bg-blue-300">
-	<slot />
+	{@render children?.()}
 </div>
diff --git a/frontend/src/lib/components/common/menu/MenuItem.svelte b/frontend/src/lib/components/common/menu/MenuItem.svelte
index 4c3d50643c..99d14826e1 100644
--- a/frontend/src/lib/components/common/menu/MenuItem.svelte
+++ b/frontend/src/lib/components/common/menu/MenuItem.svelte
@@ -1,11 +1,22 @@
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<div on:click class="py-1">
+<script lang="ts">
+	import { createBubbler } from 'svelte/legacy';
+
+	const bubble = createBubbler();
+	interface Props {
+		children?: import('svelte').Snippet;
+	}
+
+	let { children }: Props = $props();
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div onclick={bubble('click')} class="py-1">
 	<span
 		class="text-secondary block px-4 py-2 text-sm hover:bg-surface-hover hover:text-primary"
 		role="menuitem"
 		tabindex="-1"
 	>
-		<slot />
+		{@render children?.()}
 	</span>
 </div>
diff --git a/frontend/src/lib/components/common/menu/ResolveOpen.svelte b/frontend/src/lib/components/common/menu/ResolveOpen.svelte
index ec32904a3e..d4a02e2d40 100644
--- a/frontend/src/lib/components/common/menu/ResolveOpen.svelte
+++ b/frontend/src/lib/components/common/menu/ResolveOpen.svelte
@@ -1,10 +1,18 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { createDispatcherIfMounted } from '$lib/createDispatcherIfMounted'
 	import { createEventDispatcher } from 'svelte'
 
 	const dispatch = createEventDispatcher()
 	const dispatchIfMounted = createDispatcherIfMounted(dispatch)
-	export let open: boolean = false
+	interface Props {
+		open?: boolean;
+	}
 
-	$: dispatchIfMounted(open ? 'open' : 'close')
+	let { open = false }: Props = $props();
+
+	run(() => {
+		dispatchIfMounted(open ? 'open' : 'close')
+	});
 </script>
diff --git a/frontend/src/lib/components/common/modal/AlwaysMountedModal.svelte b/frontend/src/lib/components/common/modal/AlwaysMountedModal.svelte
index c4049802fc..444dcb9015 100644
--- a/frontend/src/lib/components/common/modal/AlwaysMountedModal.svelte
+++ b/frontend/src/lib/components/common/modal/AlwaysMountedModal.svelte
@@ -1,3 +1,4 @@
+<!-- @migration-task Error while migrating Svelte code: $$props is used together with named props in a way that cannot be automatically migrated. -->
 <script lang="ts">
 	import Portal from '$lib/components/Portal.svelte'
 
diff --git a/frontend/src/lib/components/common/modal/Modal.svelte b/frontend/src/lib/components/common/modal/Modal.svelte
index 8c7294d35a..65ebc03c50 100644
--- a/frontend/src/lib/components/common/modal/Modal.svelte
+++ b/frontend/src/lib/components/common/modal/Modal.svelte
@@ -1,17 +1,37 @@
 <script lang="ts">
+	import { createBubbler, stopPropagation } from 'svelte/legacy';
+
+	const bubble = createBubbler();
 	import { createEventDispatcher } from 'svelte'
 	import { fade } from 'svelte/transition'
 	import Button from '../button/Button.svelte'
 	import { twMerge } from 'tailwind-merge'
 	import CloseButton from '../CloseButton.svelte'
 
-	export let title: string
-	export let open: boolean = false
-	let c: string = ''
-	export { c as class }
-	export let style = ''
-	export let cancelText: string | undefined = undefined
-	export let kind: 'button' | 'X' = 'button'
+	
+	interface Props {
+		title: string;
+		open?: boolean;
+		class?: string;
+		style?: string;
+		cancelText?: string | undefined;
+		kind?: 'button' | 'X';
+		settings?: import('svelte').Snippet;
+		children?: import('svelte').Snippet;
+		actions?: import('svelte').Snippet;
+	}
+
+	let {
+		title,
+		open = $bindable(false),
+		class: c = '',
+		style = '',
+		cancelText = undefined,
+		kind = 'button',
+		settings,
+		children,
+		actions
+	}: Props = $props();
 
 	const dispatch = createEventDispatcher()
 
@@ -37,13 +57,13 @@
 	}
 </script>
 
-<svelte:window on:keydown|capture={onKeyDown} />
+<svelte:window onkeydowncapture={onKeyDown} />
 
 {#if open}
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 	<div
-		on:click={() => (open = false)}
+		onclick={() => (open = false)}
 		transition:fadeFast|local
 		class={'absolute top-0 bottom-0 left-0 right-0 z-[9999]'}
 		role="dialog"
@@ -58,9 +78,9 @@
 
 		<div class="fixed inset-0 z-10 overflow-y-auto">
 			<div class="flex min-h-full items-center justify-center p-4">
-				<!-- svelte-ignore a11y-no-static-element-interactions -->
+				<!-- svelte-ignore a11y_no_static_element_interactions -->
 				<div
-					on:click|stopPropagation
+					onclick={stopPropagation(bubble('click'))}
 					class={twMerge(
 						'relative transform overflow-hidden rounded-lg bg-surface px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6',
 						c,
@@ -78,17 +98,17 @@
 						<div class="ml-4 text-left flex-1">
 							<div class="flex flex-row items-center justify-between">
 								<h3>{title}</h3>
-								<slot name="settings" />
+								{@render settings?.()}
 							</div>
 
 							<div class="mt-4 text-sm text-primary">
-								<slot />
+								{@render children?.()}
 							</div>
 						</div>
 					</div>
 					{#if kind == 'button'}
 						<div class="flex items-center space-x-2 flex-row-reverse space-x-reverse mt-4">
-							<slot name="actions" />
+							{@render actions?.()}
 							<Button
 								on:click={() => {
 									dispatch('canceled')
diff --git a/frontend/src/lib/components/common/modal/Modal2.svelte b/frontend/src/lib/components/common/modal/Modal2.svelte
index cecadb18b3..36259ba52d 100644
--- a/frontend/src/lib/components/common/modal/Modal2.svelte
+++ b/frontend/src/lib/components/common/modal/Modal2.svelte
@@ -1,3 +1,4 @@
+<!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot (header-left to header_left) making the component unusable -->
 <script lang="ts">
 	import Portal from '$lib/components/Portal.svelte'
 
diff --git a/frontend/src/lib/components/common/seconds/SecondsInput.svelte b/frontend/src/lib/components/common/seconds/SecondsInput.svelte
index 4f2cfdd11c..17925930be 100644
--- a/frontend/src/lib/components/common/seconds/SecondsInput.svelte
+++ b/frontend/src/lib/components/common/seconds/SecondsInput.svelte
@@ -1,21 +1,32 @@
 <script lang="ts">
+	import { run, createBubbler } from 'svelte/legacy';
+
+	const bubble = createBubbler();
 	type TimeUnit = number | undefined
 
 	const ONE_DAY_IN_SECONDS = 86400 as const
 	const ONE_HOUR_IN_SECONDS = 3600 as const
 	const ONE_MINUTE_IN_SECONDS = 60 as const
 
-	export let seconds = 0
-	export let hideDisplay = false
-	export let disabled = false
-	export let max: number | undefined = undefined
+	interface Props {
+		seconds?: number;
+		hideDisplay?: boolean;
+		disabled?: boolean;
+		max?: number | undefined;
+	}
 
-	let day: TimeUnit = undefined
-	let hour: TimeUnit = undefined
-	let min: TimeUnit = undefined
-	let sec: TimeUnit = undefined
+	let {
+		seconds = $bindable(0),
+		hideDisplay = false,
+		disabled = false,
+		max = undefined
+	}: Props = $props();
+
+	let day: TimeUnit = $state(undefined)
+	let hour: TimeUnit = $state(undefined)
+	let min: TimeUnit = $state(undefined)
+	let sec: TimeUnit = $state(undefined)
 
-	$: convertSecondsToTime(seconds)
 
 	function convertSecondsToTime(seconds) {
 		day = Math.floor(seconds / ONE_DAY_IN_SECONDS)
@@ -44,6 +55,9 @@
 			seconds = max
 		}
 	}
+	run(() => {
+		convertSecondsToTime(seconds)
+	});
 </script>
 
 <div class="flex flex-wrap gap-x-4">
@@ -69,8 +83,8 @@
 					class="!w-14"
 					{disabled}
 					bind:value={sec}
-					on:change={convertUnitsToSeconds}
-					on:focus
+					onchange={convertUnitsToSeconds}
+					onfocus={bubble('focus')}
 				/>
 			</label>
 			<label>
@@ -80,8 +94,8 @@
 					class="!w-14"
 					{disabled}
 					bind:value={min}
-					on:change={convertUnitsToSeconds}
-					on:focus
+					onchange={convertUnitsToSeconds}
+					onfocus={bubble('focus')}
 				/>
 			</label>
 		</div>
@@ -93,8 +107,8 @@
 					class="!w-14"
 					{disabled}
 					bind:value={hour}
-					on:change={convertUnitsToSeconds}
-					on:focus
+					onchange={convertUnitsToSeconds}
+					onfocus={bubble('focus')}
 				/>
 			</label>
 			<label>
@@ -104,8 +118,8 @@
 					class="!w-14"
 					{disabled}
 					bind:value={day}
-					on:change={convertUnitsToSeconds}
-					on:focus
+					onchange={convertUnitsToSeconds}
+					onfocus={bubble('focus')}
 				/>
 			</label>
 		</div>
diff --git a/frontend/src/lib/components/common/stepper/Stepper.svelte b/frontend/src/lib/components/common/stepper/Stepper.svelte
index 2bdb1079db..bbd6b1afe4 100644
--- a/frontend/src/lib/components/common/stepper/Stepper.svelte
+++ b/frontend/src/lib/components/common/stepper/Stepper.svelte
@@ -3,12 +3,23 @@
 	import { Loader2 } from 'lucide-svelte'
 	import { createEventDispatcher } from 'svelte'
 
-	export let tabs: string[]
-	export let selectedIndex: number = 0
-	export let maxReachedIndex: number = -1
-	export let statusByStep: Array<'success' | 'error' | 'pending'> = []
-	export let hasValidations: boolean = false
-	export let allowStepNavigation: boolean = false
+	interface Props {
+		tabs: string[];
+		selectedIndex?: number;
+		maxReachedIndex?: number;
+		statusByStep?: Array<'success' | 'error' | 'pending'>;
+		hasValidations?: boolean;
+		allowStepNavigation?: boolean;
+	}
+
+	let {
+		tabs,
+		selectedIndex = 0,
+		maxReachedIndex = -1,
+		statusByStep = [],
+		hasValidations = false,
+		allowStepNavigation = false
+	}: Props = $props();
 
 	const dispatch = createEventDispatcher()
 
@@ -54,14 +65,14 @@
 <div class="flex justify-between">
 	<ol class="relative z-20 flex justify-between items-centers text-sm font-medium text-primary">
 		{#each tabs ?? [] as step, index}
-			<!-- svelte-ignore a11y-click-events-have-key-events -->
-			<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 			<li
 				class={classNames(
 					'flex items-center gap-2 px-2 py-1 hover:bg-gray-1200 rounded-md m-0.5',
 					index <= maxReachedIndex || allowStepNavigation ? 'cursor-pointer' : 'cursor-not-allowed'
 				)}
-				on:click={() => {
+				onclick={() => {
 					dispatch('click', { index })
 				}}
 			>
diff --git a/frontend/src/lib/components/common/table/RowIcon.svelte b/frontend/src/lib/components/common/table/RowIcon.svelte
index 8803268166..486785a82a 100644
--- a/frontend/src/lib/components/common/table/RowIcon.svelte
+++ b/frontend/src/lib/components/common/table/RowIcon.svelte
@@ -2,8 +2,12 @@
 	import BarsStaggered from '$lib/components/icons/BarsStaggered.svelte'
 	import { Code2, LayoutDashboard } from 'lucide-svelte'
 
-	export let kind: 'script' | 'flow' | 'app' | 'raw_app'
-	export let href: string = '#'
+	interface Props {
+		kind: 'script' | 'flow' | 'app' | 'raw_app';
+		href?: string;
+	}
+
+	let { kind, href = '#' }: Props = $props();
 </script>
 
 <a {href} class="flex justify-center items-center">
diff --git a/frontend/src/lib/components/common/table/Table.svelte b/frontend/src/lib/components/common/table/Table.svelte
index b0e99bc9e1..0e6b72658a 100644
--- a/frontend/src/lib/components/common/table/Table.svelte
+++ b/frontend/src/lib/components/common/table/Table.svelte
@@ -1,8 +1,16 @@
+<script lang="ts">
+	interface Props {
+		children?: import('svelte').Snippet;
+	}
+
+	let { children }: Props = $props();
+</script>
+
 <div class="flex flex-col">
 	<div class="overflow-hidden rounded-md border">
 		<table class="min-w-full divide-y divide-gray-300">
 			<tbody class="divide-y bg-surface">
-				<slot />
+				{@render children?.()}
 			</tbody>
 		</table>
 	</div>
diff --git a/frontend/src/lib/components/copilot/CronGen.svelte b/frontend/src/lib/components/copilot/CronGen.svelte
index 36cc7de352..374843ed87 100644
--- a/frontend/src/lib/components/copilot/CronGen.svelte
+++ b/frontend/src/lib/components/copilot/CronGen.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { ExternalLink, Wand2 } from 'lucide-svelte'
 	import Button from '../common/button/Button.svelte'
 	import { getNonStreamingCompletion } from './lib'
@@ -9,14 +11,17 @@
 	import type { ChatCompletionMessageParam } from 'openai/resources/index.mjs'
 	import { copilotInfo } from '$lib/aiStore'
 
-	export let schedule: string
-	export let cronVersion: string
+	interface Props {
+		schedule: string;
+		cronVersion: string;
+	}
 
-	let instructions = ''
-	let instructionsField: HTMLInputElement | undefined = undefined
-	let genLoading = false
-	let abortController = new AbortController()
-	$: instructionsField && setTimeout(() => instructionsField?.focus(), 100)
+	let { schedule = $bindable(), cronVersion }: Props = $props();
+
+	let instructions = $state('')
+	let instructionsField: HTMLInputElement | undefined = $state(undefined)
+	let genLoading = $state(false)
+	let abortController = $state(new AbortController())
 
 	const SYSTEM_V2 =
 		"You are a helpful assistant for creating CRON schedules using both standard and extended Croner patterns. The structure is 'second minute hour dayOfMonth month dayOfWeek'. Supported modifiers: ? (wildcard), L (last day/weekday), # (nth occurrence of a weekday), and W (closest weekday). Weekdays are Sunday (0 or 7), Monday (1), Tuesday (2), Wednesday (3), Thursday (4), Friday (5), Saturday (6). Ensure syntax is valid, including optional seconds and special modifiers. You only return either the CRON string without any leading/closing quotes or an error message prefixed with 'ERROR:'."
@@ -24,7 +29,6 @@
 	const SYSTEM_V1 =
 		"You are a helpful assistant for creating CRON schedules. The structure is 'second minute hour dayOfMonth month dayOfWeek'. Weekdays are Sunday (1), Monday (2), Tuesday (3), Wednesday (4), Thursday (5), Friday (6), Saturday (7). You only return the CRON string without any wrapping characters. If it is invalid, you will return an error message preceded by 'ERROR:'."
 
-	$: updateSystemPrompt(cronVersion)
 
 	function updateSystemPrompt(version: string) {
 		if (version === 'v2') {
@@ -66,68 +70,78 @@
 			genLoading = false
 		}
 	}
+	run(() => {
+		instructionsField && setTimeout(() => instructionsField?.focus(), 100)
+	});
+	run(() => {
+		updateSystemPrompt(cronVersion)
+	});
 </script>
 
 <Popover floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}>
-	<svelte:fragment slot="trigger">
-		<Button
-			color={genLoading ? 'red' : 'light'}
-			size="xs"
-			nonCaptureEvent={!genLoading}
-			startIcon={{ icon: Wand2 }}
-			iconOnly
-			title="AI Assistant"
-			btnClasses="text-ai bg-violet-100 dark:bg-gray-700"
-			loading={genLoading}
-			clickableWhileLoading
-			on:click={genLoading ? () => abortController?.abort() : () => {}}
-		/>
-	</svelte:fragment>
-	<svelte:fragment slot="content" let:close>
-		<div class="border rounded-lg shadow-lg p-4 bg-surface">
-			{#if $copilotInfo.enabled}
-				<div class="flex w-96">
-					<input
-						bind:this={instructionsField}
-						type="text"
-						placeholder="CRON schedule description"
-						bind:value={instructions}
-						on:keypress={({ key }) => {
+	{#snippet trigger()}
+	
+			<Button
+				color={genLoading ? 'red' : 'light'}
+				size="xs"
+				nonCaptureEvent={!genLoading}
+				startIcon={{ icon: Wand2 }}
+				iconOnly
+				title="AI Assistant"
+				btnClasses="text-ai bg-violet-100 dark:bg-gray-700"
+				loading={genLoading}
+				clickableWhileLoading
+				on:click={genLoading ? () => abortController?.abort() : () => {}}
+			/>
+		
+	{/snippet}
+	{#snippet content({ close })}
+	
+			<div class="border rounded-lg shadow-lg p-4 bg-surface">
+				{#if $copilotInfo.enabled}
+					<div class="flex w-96">
+						<input
+							bind:this={instructionsField}
+							type="text"
+							placeholder="CRON schedule description"
+							bind:value={instructions}
+							onkeypress={({ key }) => {
 							if (key === 'Enter' && instructions.length > 0) {
 								close()
 								generateCron()
 							}
 						}}
-					/>
-					<Button
-						size="xs"
-						color="light"
-						variant="contained"
-						buttonType="button"
-						btnClasses="!ml-2 text-ai bg-violet-100 dark:bg-gray-700"
-						title="Generate CRON schedule from prompt"
-						aria-label="Generate"
-						iconOnly
-						on:click={() => {
-							close()
-							generateCron()
-						}}
-						disabled={instructions.length == 0}
-						startIcon={{ icon: Wand2 }}
-					/>
-				</div>
-			{:else}
-				<div class="block text-primary">
-					<p class="text-sm"
-						>Enable Windmill AI in the <a
-							href="{base}/workspace_settings?tab=ai"
-							target="_blank"
-							class="inline-flex flex-row items-center gap-1"
-							>workspace settings <ExternalLink size={16} /></a
-						></p
-					>
-				</div>
-			{/if}
-		</div>
-	</svelte:fragment>
+						/>
+						<Button
+							size="xs"
+							color="light"
+							variant="contained"
+							buttonType="button"
+							btnClasses="!ml-2 text-ai bg-violet-100 dark:bg-gray-700"
+							title="Generate CRON schedule from prompt"
+							aria-label="Generate"
+							iconOnly
+							on:click={() => {
+								close()
+								generateCron()
+							}}
+							disabled={instructions.length == 0}
+							startIcon={{ icon: Wand2 }}
+						/>
+					</div>
+				{:else}
+					<div class="block text-primary">
+						<p class="text-sm"
+							>Enable Windmill AI in the <a
+								href="{base}/workspace_settings?tab=ai"
+								target="_blank"
+								class="inline-flex flex-row items-center gap-1"
+								>workspace settings <ExternalLink size={16} /></a
+							></p
+						>
+					</div>
+				{/if}
+			</div>
+		
+	{/snippet}
 </Popover>
diff --git a/frontend/src/lib/components/copilot/FlowCopilotInputsModal.svelte b/frontend/src/lib/components/copilot/FlowCopilotInputsModal.svelte
index f80d6cf537..f3c2489eb9 100644
--- a/frontend/src/lib/components/copilot/FlowCopilotInputsModal.svelte
+++ b/frontend/src/lib/components/copilot/FlowCopilotInputsModal.svelte
@@ -4,9 +4,13 @@
 	import Modal from '../common/modal/Modal.svelte'
 	import Portal from '../Portal.svelte'
 
-	export let open = false
 
-	export let inputs: string[] = []
+	interface Props {
+		open?: boolean;
+		inputs?: string[];
+	}
+
+	let { open = $bindable(false), inputs = [] }: Props = $props();
 
 	const dispatch = createEventDispatcher()
 </script>
@@ -27,16 +31,18 @@
 			{/each}
 		</ul>
 
-		<Button
-			slot="actions"
-			on:click={() => {
-				open = false
-				dispatch('confirmed')
-			}}
-			color="light"
-			size="sm"
-		>
-			<span class="inline-flex gap-2">Add <Badge color="dark-green">Enter</Badge></span>
-		</Button>
+		{#snippet actions()}
+				<Button
+				
+				on:click={() => {
+					open = false
+					dispatch('confirmed')
+				}}
+				color="light"
+				size="sm"
+			>
+				<span class="inline-flex gap-2">Add <Badge color="dark-green">Enter</Badge></span>
+			</Button>
+			{/snippet}
 	</Modal>
 </Portal>
diff --git a/frontend/src/lib/components/copilot/MetadataGen.svelte b/frontend/src/lib/components/copilot/MetadataGen.svelte
index 666b50bf64..c93258d9ff 100644
--- a/frontend/src/lib/components/copilot/MetadataGen.svelte
+++ b/frontend/src/lib/components/copilot/MetadataGen.svelte
@@ -1,3 +1,4 @@
+<!-- @migration-task Error while migrating Svelte code: $$props is used together with named props in a way that cannot be automatically migrated. -->
 <script lang="ts">
 	import { getCompletion, getResponseFromEvent } from './lib'
 	import { isInitialCode } from '$lib/script_helpers'
diff --git a/frontend/src/lib/components/copilot/RegexGen.svelte b/frontend/src/lib/components/copilot/RegexGen.svelte
index faf6406c2a..b716e48385 100644
--- a/frontend/src/lib/components/copilot/RegexGen.svelte
+++ b/frontend/src/lib/components/copilot/RegexGen.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { base } from '$lib/base'
 	import { Button } from '../common'
 
@@ -12,10 +14,10 @@
 	import { copilotInfo } from '$lib/aiStore'
 
 	// state
-	let funcDesc: string = ''
-	let genLoading: boolean = false
-	let input: HTMLInputElement | undefined
-	let abortController: AbortController | undefined = undefined
+	let funcDesc: string = $state('')
+	let genLoading: boolean = $state(false)
+	let input: HTMLInputElement | undefined = $state()
+	let abortController: AbortController | undefined = $state(undefined)
 
 	const dispatch = createEventDispatcher()
 	async function onGenerate() {
@@ -51,9 +53,11 @@
 		}
 	}
 
-	$: input && setTimeout(() => input?.focus(), 100)
+	run(() => {
+		input && setTimeout(() => input?.focus(), 100)
+	});
 
-	let promptHistory: string[] = JSON.parse(getPromptsRegex() || '[]')
+	let promptHistory: string[] = $state(JSON.parse(getPromptsRegex() || '[]'))
 
 	function getPromptsRegex(): string | undefined {
 		try {
@@ -98,83 +102,87 @@
 		]
 	}}
 >
-	<svelte:fragment slot="trigger">
-		<Button
-			title="Generate regexes from prompt"
-			btnClasses="text-ai bg-violet-100 dark:bg-gray-700"
-			size="sm"
-			color={genLoading ? 'red' : 'light'}
-			spacingSize="md"
-			startIcon={{ icon: Wand2 }}
-			loading={genLoading}
-			propagateEvent
-			clickableWhileLoading
-			on:click={genLoading ? () => abortController?.abort() : () => {}}
-		/>
-	</svelte:fragment>
-	<svelte:fragment slot="content" let:close>
-		<div class="block text-primary p-4">
-			{#if $copilotInfo.enabled}
-				<div class="flex flex-col gap-4">
-					<div class="flex w-96">
-						<input
-							type="text"
-							bind:this={input}
-							bind:value={funcDesc}
-							on:keypress={({ key }) => {
+	{#snippet trigger()}
+	
+			<Button
+				title="Generate regexes from prompt"
+				btnClasses="text-ai bg-violet-100 dark:bg-gray-700"
+				size="sm"
+				color={genLoading ? 'red' : 'light'}
+				spacingSize="md"
+				startIcon={{ icon: Wand2 }}
+				loading={genLoading}
+				propagateEvent
+				clickableWhileLoading
+				on:click={genLoading ? () => abortController?.abort() : () => {}}
+			/>
+		
+	{/snippet}
+	{#snippet content({ close })}
+	
+			<div class="block text-primary p-4">
+				{#if $copilotInfo.enabled}
+					<div class="flex flex-col gap-4">
+						<div class="flex w-96">
+							<input
+								type="text"
+								bind:this={input}
+								bind:value={funcDesc}
+								onkeypress={({ key }) => {
 								if (key === 'Enter' && funcDesc?.length > 0) {
 									close()
 									onGenerate()
 								}
 							}}
-							placeholder={'Describe what the regex should doww'}
-						/>
-						<Button
-							size="xs"
-							color="light"
-							buttonType="button"
-							btnClasses="!ml-2 text-ai bg-violet-100 dark:bg-gray-700"
-							aria-label="Generate"
-							on:click={() => {
-								close()
-								onGenerate()
-							}}
-							disabled={funcDesc?.length <= 0}
-							iconOnly
-							startIcon={{ icon: Wand2 }}
-						/>
-					</div>
-					{#if promptHistory.length > 0}
-						<div class="w-96 flex flex-col gap-1">
-							{#each promptHistory as p}
-								<Button
-									size="xs2"
-									color="light"
-									btnClasses="justify-start overflow-x-scroll no-scrollbar"
-									startIcon={{ icon: HistoryIcon, classes: 'shrink-0' }}
-									on:click={() => {
-										funcDesc = p
-									}}>{p}</Button
-								>
-							{/each}
-							<button
-								class="underline text-xs text-start px-2 text-secondary font-normal"
-								on:click={clearPromptHistory}>clear history</button
-							>
+								placeholder={'Describe what the regex should doww'}
+							/>
+							<Button
+								size="xs"
+								color="light"
+								buttonType="button"
+								btnClasses="!ml-2 text-ai bg-violet-100 dark:bg-gray-700"
+								aria-label="Generate"
+								on:click={() => {
+									close()
+									onGenerate()
+								}}
+								disabled={funcDesc?.length <= 0}
+								iconOnly
+								startIcon={{ icon: Wand2 }}
+							/>
 						</div>
-					{/if}
-				</div>
-			{:else}
-				<p class="text-sm">
-					Enable Windmill AI in the <a
-						href="{base}/workspace_settings?tab=ai"
-						target="_blank"
-						class="inline-flex flex-row items-center gap-1"
-					>
-						workspace settings <ExternalLink size={16} />
-					</a>
-				</p>
-			{/if}
-		</div>
-	</svelte:fragment>
+						{#if promptHistory.length > 0}
+							<div class="w-96 flex flex-col gap-1">
+								{#each promptHistory as p}
+									<Button
+										size="xs2"
+										color="light"
+										btnClasses="justify-start overflow-x-scroll no-scrollbar"
+										startIcon={{ icon: HistoryIcon, classes: 'shrink-0' }}
+										on:click={() => {
+											funcDesc = p
+										}}>{p}</Button
+									>
+								{/each}
+								<button
+									class="underline text-xs text-start px-2 text-secondary font-normal"
+									onclick={clearPromptHistory}>clear history</button
+								>
+							</div>
+						{/if}
+					</div>
+				{:else}
+					<p class="text-sm">
+						Enable Windmill AI in the <a
+							href="{base}/workspace_settings?tab=ai"
+							target="_blank"
+							class="inline-flex flex-row items-center gap-1"
+						>
+							workspace settings <ExternalLink size={16} />
+						</a>
+					</p>
+				{/if}
+			</div>
+		
+	{/snippet}
 </Popover>
diff --git a/frontend/src/lib/components/copilot/ScriptFix.svelte b/frontend/src/lib/components/copilot/ScriptFix.svelte
index fc62e1d27b..2deaef0193 100644
--- a/frontend/src/lib/components/copilot/ScriptFix.svelte
+++ b/frontend/src/lib/components/copilot/ScriptFix.svelte
@@ -28,38 +28,42 @@
 		}}
 		displayArrow={true}
 	>
-		<svelte:fragment slot="trigger">
-			<div class="flex flex-row">
-				<Button
-					title="Fix code"
-					size="xs"
-					color="light"
-					spacingSize="xs2"
-					startIcon={{ icon: WandSparkles }}
-					on:click={() => {
-						if ($copilotInfo.enabled) {
-							aiChatManager.fix()
-						}
-					}}
-					btnClasses="text-ai bg-violet-100 dark:bg-gray-700 min-w-[84px]"
-					propagateEvent={!$copilotInfo.enabled}
-				>
-					AI Fix
-				</Button>
-			</div>
-		</svelte:fragment>
-		<svelte:fragment slot="content">
-			<div class="p-4">
-				<div class="w-80">
-					<p class="text-sm"
-						>Enable Windmill AI in the <a
-							class="inline-flex flex-row items-center gap-1"
-							href="{base}/workspace_settings?tab=ai"
-							target="_blank">workspace settings</a
-						></p
-					></div
-				>
-			</div>
-		</svelte:fragment>
+		{#snippet trigger()}
+			
+				<div class="flex flex-row">
+					<Button
+						title="Fix code"
+						size="xs"
+						color="light"
+						spacingSize="xs2"
+						startIcon={{ icon: WandSparkles }}
+						on:click={() => {
+							if ($copilotInfo.enabled) {
+								aiChatManager.fix()
+							}
+						}}
+						btnClasses="text-ai bg-violet-100 dark:bg-gray-700 min-w-[84px]"
+						propagateEvent={!$copilotInfo.enabled}
+					>
+						AI Fix
+					</Button>
+				</div>
+			
+			{/snippet}
+		{#snippet content()}
+			
+				<div class="p-4">
+					<div class="w-80">
+						<p class="text-sm"
+							>Enable Windmill AI in the <a
+								class="inline-flex flex-row items-center gap-1"
+								href="{base}/workspace_settings?tab=ai"
+								target="_blank">workspace settings</a
+							></p
+						></div
+					>
+				</div>
+			
+			{/snippet}
 	</Popover>
 {/if}
diff --git a/frontend/src/lib/components/copilot/chat/AIChat.svelte b/frontend/src/lib/components/copilot/chat/AIChat.svelte
index 9e41034fbe..762afc87e7 100644
--- a/frontend/src/lib/components/copilot/chat/AIChat.svelte
+++ b/frontend/src/lib/components/copilot/chat/AIChat.svelte
@@ -71,7 +71,7 @@
 </script>
 
 <svelte:window
-	on:keydown={(e) => {
+	onkeydown={(e) => {
 		if ((e.ctrlKey || e.metaKey) && e.key === 'l') {
 			e.preventDefault()
 			aiChatManager.toggleOpen()
diff --git a/frontend/src/lib/components/copilot/chat/AIChatDisplay.svelte b/frontend/src/lib/components/copilot/chat/AIChatDisplay.svelte
index 2ad7a0e5b8..050f50f043 100644
--- a/frontend/src/lib/components/copilot/chat/AIChatDisplay.svelte
+++ b/frontend/src/lib/components/copilot/chat/AIChatDisplay.svelte
@@ -99,55 +99,59 @@
 		</div>
 		<div class="flex flex-row items-center gap-2">
 			<Popover>
-				<svelte:fragment slot="trigger">
-					<Button
-						on:click={() => {}}
-						title="History"
-						size="md"
-						btnClasses="!p-1"
-						startIcon={{ icon: HistoryIcon }}
-						iconOnly
-						variant="border"
-						color="light"
-						propagateEvent
-					/>
-				</svelte:fragment>
-				<svelte:fragment slot="content" let:close>
-					<div class="p-1 overflow-y-auto max-h-[300px]">
-						{#if pastChats.length === 0}
-							<div class="text-center text-primary text-xs">No history</div>
-						{:else}
-							<div class="flex flex-col">
-								{#each pastChats as chat}
-									<button
-										class="text-left flex flex-row items-center gap-2 justify-between hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md p-1"
-										onclick={() => {
-											loadPastChat(chat.id)
-											close()
-										}}
-									>
-										<div
-											class="text-xs font-medium w-48 text-ellipsis overflow-hidden whitespace-nowrap flex-1"
-											title={chat.title}
-										>
-											{chat.title}
-										</div>
-										<Button
-											iconOnly
-											size="xs2"
-											btnClasses="!p-1"
-											variant="default"
-											startIcon={{ icon: X }}
-											on:click={() => {
-												deletePastChat(chat.id)
+				{#snippet trigger()}
+							
+						<Button
+							on:click={() => {}}
+							title="History"
+							size="md"
+							btnClasses="!p-1"
+							startIcon={{ icon: HistoryIcon }}
+							iconOnly
+							variant="border"
+							color="light"
+							propagateEvent
+						/>
+					
+							{/snippet}
+				{#snippet content({ close })}
+							
+						<div class="p-1 overflow-y-auto max-h-[300px]">
+							{#if pastChats.length === 0}
+								<div class="text-center text-primary text-xs">No history</div>
+							{:else}
+								<div class="flex flex-col">
+									{#each pastChats as chat}
+										<button
+											class="text-left flex flex-row items-center gap-2 justify-between hover:bg-gray-100 dark:hover:bg-gray-700 rounded-md p-1"
+											onclick={() => {
+												loadPastChat(chat.id)
+												close()
 											}}
-										/>
-									</button>
-								{/each}
-							</div>
-						{/if}
-					</div>
-				</svelte:fragment>
+										>
+											<div
+												class="text-xs font-medium w-48 text-ellipsis overflow-hidden whitespace-nowrap flex-1"
+												title={chat.title}
+											>
+												{chat.title}
+											</div>
+											<Button
+												iconOnly
+												size="xs2"
+												btnClasses="!p-1"
+												variant="default"
+												startIcon={{ icon: X }}
+												on:click={() => {
+													deletePastChat(chat.id)
+												}}
+											/>
+										</button>
+									{/each}
+								</div>
+							{/if}
+						</div>
+					
+							{/snippet}
 			</Popover>
 			<Button
 				title="New chat"
diff --git a/frontend/src/lib/components/copilot/chat/AIChatInput.svelte b/frontend/src/lib/components/copilot/chat/AIChatInput.svelte
index 2eb7a201f4..98d756c64d 100644
--- a/frontend/src/lib/components/copilot/chat/AIChatInput.svelte
+++ b/frontend/src/lib/components/copilot/chat/AIChatInput.svelte
@@ -136,22 +136,26 @@
 		{#if showContext}
 			<div class="flex flex-row gap-1 mb-1 overflow-scroll pt-2 no-scrollbar">
 				<Popover>
-					<svelte:fragment slot="trigger">
-						<div
-							class="border rounded-md px-1 py-0.5 font-normal text-primary text-xs hover:bg-surface-hover bg-surface"
-							>@</div
-						>
-					</svelte:fragment>
-					<svelte:fragment slot="content" let:close>
-						<AvailableContextList
-							{availableContext}
-							{selectedContext}
-							onSelect={(element) => {
-								addContextToSelection(element)
-								close()
-							}}
-						/>
-					</svelte:fragment>
+					{#snippet trigger()}
+									
+							<div
+								class="border rounded-md px-1 py-0.5 font-normal text-primary text-xs hover:bg-surface-hover bg-surface"
+								>@</div
+							>
+						
+									{/snippet}
+					{#snippet content({ close })}
+									
+							<AvailableContextList
+								{availableContext}
+								{selectedContext}
+								onSelect={(element) => {
+									addContextToSelection(element)
+									close()
+								}}
+							/>
+						
+									{/snippet}
 				</Popover>
 				{#each selectedContext as element}
 					<ContextElementBadge
diff --git a/frontend/src/lib/components/copilot/chat/AssistantMessage.svelte b/frontend/src/lib/components/copilot/chat/AssistantMessage.svelte
index 2e90d4c2a2..b14a4aeac0 100644
--- a/frontend/src/lib/components/copilot/chat/AssistantMessage.svelte
+++ b/frontend/src/lib/components/copilot/chat/AssistantMessage.svelte
@@ -5,7 +5,11 @@
 	import CodeDisplay from './script/CodeDisplay.svelte'
 	import LinkRenderer from './LinkRenderer.svelte'
 
-	export let message: DisplayMessage
+	interface Props {
+		message: DisplayMessage;
+	}
+
+	let { message }: Props = $props();
 </script>
 
 <div
diff --git a/frontend/src/lib/components/copilot/chat/ChatMode.svelte b/frontend/src/lib/components/copilot/chat/ChatMode.svelte
index 045fe5d37c..8bb0ab5c0d 100644
--- a/frontend/src/lib/components/copilot/chat/ChatMode.svelte
+++ b/frontend/src/lib/components/copilot/chat/ChatMode.svelte
@@ -12,39 +12,43 @@
 		).length < 2}
 		class="max-w-full"
 	>
-		<svelte:fragment slot="trigger">
-			<div
-				class="text-primary text-xs flex flex-row items-center font-normal gap-0.5 border px-1 rounded-lg"
-			>
-				<span class={`truncate`}>
-					{aiChatManager.mode.charAt(0).toUpperCase() + aiChatManager.mode.slice(1)} mode
-				</span>
-				{#if Object.keys(aiChatManager.allowedModes).filter((k) => aiChatManager.allowedModes[k]).length > 1}
-					<div class="shrink-0">
-						<ChevronDown size={16} />
-					</div>
-				{/if}
-			</div>
-		</svelte:fragment>
-		<svelte:fragment slot="content" let:close>
-			<div class="flex flex-col gap-1 p-1 min-w-24">
-				{#each Object.values(AIMode) as possibleMode}
-					{#if aiChatManager.allowedModes[possibleMode]}
-						<button
-							class={twMerge(
-								'text-left text-xs hover:bg-surface-hover rounded-md p-1 font-normal',
-								aiChatManager.mode === possibleMode && 'bg-surface-hover'
-							)}
-							onclick={() => {
-								aiChatManager.changeMode(possibleMode)
-								close()
-							}}
-						>
-							{possibleMode.charAt(0).toUpperCase() + possibleMode.slice(1)} mode
-						</button>
+		{#snippet trigger()}
+			
+				<div
+					class="text-primary text-xs flex flex-row items-center font-normal gap-0.5 border px-1 rounded-lg"
+				>
+					<span class={`truncate`}>
+						{aiChatManager.mode.charAt(0).toUpperCase() + aiChatManager.mode.slice(1)} mode
+					</span>
+					{#if Object.keys(aiChatManager.allowedModes).filter((k) => aiChatManager.allowedModes[k]).length > 1}
+						<div class="shrink-0">
+							<ChevronDown size={16} />
+						</div>
 					{/if}
-				{/each}
-			</div>
-		</svelte:fragment>
+				</div>
+			
+			{/snippet}
+		{#snippet content({ close })}
+			
+				<div class="flex flex-col gap-1 p-1 min-w-24">
+					{#each Object.values(AIMode) as possibleMode}
+						{#if aiChatManager.allowedModes[possibleMode]}
+							<button
+								class={twMerge(
+									'text-left text-xs hover:bg-surface-hover rounded-md p-1 font-normal',
+									aiChatManager.mode === possibleMode && 'bg-surface-hover'
+								)}
+								onclick={() => {
+									aiChatManager.changeMode(possibleMode)
+									close()
+								}}
+							>
+								{possibleMode.charAt(0).toUpperCase() + possibleMode.slice(1)} mode
+							</button>
+						{/if}
+					{/each}
+				</div>
+			
+			{/snippet}
 	</Popover>
 </div>
diff --git a/frontend/src/lib/components/copilot/chat/flow/AIChangesWarningModal.svelte b/frontend/src/lib/components/copilot/chat/flow/AIChangesWarningModal.svelte
index 529d6d55a9..a9ff5cea61 100644
--- a/frontend/src/lib/components/copilot/chat/flow/AIChangesWarningModal.svelte
+++ b/frontend/src/lib/components/copilot/chat/flow/AIChangesWarningModal.svelte
@@ -18,6 +18,7 @@
 </script>
 
 <Modal bind:open title="AI Changes Will Be Lost">
+	<!-- @migration-task: migrate this slot by hand, `title` would shadow a prop on the parent component -->
 	<div slot="title" class="flex items-center gap-2">
 		<AlertTriangleIcon size={20} class="text-orange-500" />
 		AI Changes Will Be Lost
@@ -27,11 +28,13 @@
 			You have pending AI changes that will be rejected when saving. Do you want to continue?
 		</p>
 	</div>
-	<div slot="actions">
-		<div class="flex gap-2 justify-end">
-			<Button variant="contained" color="red" on:click={handleConfirm}>
-				Reject changes and save
-			</Button>
+	{#snippet actions()}
+		<div >
+			<div class="flex gap-2 justify-end">
+				<Button variant="contained" color="red" on:click={handleConfirm}>
+					Reject changes and save
+				</Button>
+			</div>
 		</div>
-	</div>
+	{/snippet}
 </Modal>
diff --git a/frontend/src/lib/components/details/ClipboardPanel.svelte b/frontend/src/lib/components/details/ClipboardPanel.svelte
index cb5e0d535f..1a2e6d3d41 100644
--- a/frontend/src/lib/components/details/ClipboardPanel.svelte
+++ b/frontend/src/lib/components/details/ClipboardPanel.svelte
@@ -1,3 +1,4 @@
+<!-- @migration-task Error while migrating Svelte code: $$props is used together with named props in a way that cannot be automatically migrated. -->
 <script lang="ts">
 	import { copyToClipboard } from '$lib/utils'
 	import { Clipboard } from 'lucide-svelte'
diff --git a/frontend/src/lib/components/details/CopyableCodeBlock.svelte b/frontend/src/lib/components/details/CopyableCodeBlock.svelte
index e9e5c13808..5440cc9a9d 100644
--- a/frontend/src/lib/components/details/CopyableCodeBlock.svelte
+++ b/frontend/src/lib/components/details/CopyableCodeBlock.svelte
@@ -4,17 +4,21 @@
 	import Highlight from 'svelte-highlight'
 	import type { LanguageType } from 'svelte-highlight/languages'
 
-	export let code: string
-	export let language: LanguageType<string>
-	export let disabled = false
+	interface Props {
+		code: string;
+		language: LanguageType<string>;
+		disabled?: boolean;
+	}
+
+	let { code, language, disabled = false }: Props = $props();
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <div
 	class="flex flex-col flex-1 border rounded-md relative"
 	class:cursor-not-allowed={disabled}
-	on:click={(e) => {
+	onclick={(e) => {
 		if (disabled) {
 			return
 		}
diff --git a/frontend/src/lib/components/details/ErrorHandlerToggleButton.svelte b/frontend/src/lib/components/details/ErrorHandlerToggleButton.svelte
index bb9aee5987..9c0b964c9f 100644
--- a/frontend/src/lib/components/details/ErrorHandlerToggleButton.svelte
+++ b/frontend/src/lib/components/details/ErrorHandlerToggleButton.svelte
@@ -7,10 +7,19 @@
 	import { workspaceStore } from '$lib/stores'
 	import Tooltip from '../Tooltip.svelte'
 
-	export let kind: 'script' | 'flow'
-	export let scriptOrFlowPath: string
-	export let errorHandlerMuted: boolean | undefined
-	export let iconOnly: boolean = true
+	interface Props {
+		kind: 'script' | 'flow';
+		scriptOrFlowPath: string;
+		errorHandlerMuted: boolean | undefined;
+		iconOnly?: boolean;
+	}
+
+	let {
+		kind,
+		scriptOrFlowPath,
+		errorHandlerMuted = $bindable(),
+		iconOnly = true
+	}: Props = $props();
 
 	async function toggleErrorHandler(): Promise<void> {
 		if ($workspaceStore !== undefined) {
diff --git a/frontend/src/lib/components/details/ErrorHandlerToggleButtonV2.svelte b/frontend/src/lib/components/details/ErrorHandlerToggleButtonV2.svelte
index ea1d610918..51cb389616 100644
--- a/frontend/src/lib/components/details/ErrorHandlerToggleButtonV2.svelte
+++ b/frontend/src/lib/components/details/ErrorHandlerToggleButtonV2.svelte
@@ -5,13 +5,23 @@
 	import { sendUserToast } from '$lib/toast'
 	import { workspaceStore } from '$lib/stores'
 
-	export let kind: 'script' | 'flow'
-	export let scriptOrFlowPath: string
-	export let errorHandlerMuted: boolean | undefined
-	export let textDisabled = false
-	let toggleState = errorHandlerMuted
+	interface Props {
+		kind: 'script' | 'flow'
+		scriptOrFlowPath: string
+		errorHandlerMuted: boolean | undefined
+		textDisabled?: boolean
+		color?: 'nord' | 'red' | 'blue' | undefined
+	}
 
-	export let color: 'nord' | 'red' | 'blue' | undefined = undefined
+	let {
+		kind,
+		scriptOrFlowPath,
+		errorHandlerMuted = $bindable(),
+		textDisabled = false,
+		color = undefined
+	}: Props = $props()
+
+	let toggleState = $state(errorHandlerMuted)
 
 	async function toggleErrorHandler(): Promise<void> {
 		toggleState = !toggleState
diff --git a/frontend/src/lib/components/flows/CreateActionsApp.svelte b/frontend/src/lib/components/flows/CreateActionsApp.svelte
index 9f0ad43a41..5dde33785e 100644
--- a/frontend/src/lib/components/flows/CreateActionsApp.svelte
+++ b/frontend/src/lib/components/flows/CreateActionsApp.svelte
@@ -10,10 +10,10 @@
 
 	import YAML from 'yaml'
 
-	let drawer: Drawer | undefined = undefined
-	let pendingRaw: string = ''
+	let drawer: Drawer | undefined = $state(undefined)
+	let pendingRaw: string = $state('')
 
-	let importType: 'yaml' | 'json' = 'yaml'
+	let importType: 'yaml' | 'json' = $state('yaml')
 
 	async function importRaw() {
 		$importStore = importType === 'yaml' ? YAML.parse(pendingRaw) : JSON.parse(pendingRaw)
diff --git a/frontend/src/lib/components/flows/content/AgentToolWrapper.svelte b/frontend/src/lib/components/flows/content/AgentToolWrapper.svelte
index 7933e06048..f47590af8e 100644
--- a/frontend/src/lib/components/flows/content/AgentToolWrapper.svelte
+++ b/frontend/src/lib/components/flows/content/AgentToolWrapper.svelte
@@ -1,3 +1,5 @@
+<!-- @migration-task Error while migrating Svelte code: Can only bind to an Identifier or MemberExpression or a `{get, set}` pair
+https://svelte.dev/e/bind_invalid_expression -->
 <script lang="ts">
 	import type { AgentTool } from '../agentToolUtils'
 	import { isFlowModuleTool, isMcpTool, type McpTool } from '../agentToolUtils'
diff --git a/frontend/src/lib/components/flows/content/DynamicInputHelpBox.svelte b/frontend/src/lib/components/flows/content/DynamicInputHelpBox.svelte
index cdaf75abf2..93bfd2d533 100644
--- a/frontend/src/lib/components/flows/content/DynamicInputHelpBox.svelte
+++ b/frontend/src/lib/components/flows/content/DynamicInputHelpBox.svelte
@@ -3,7 +3,8 @@
 	import Button from '$lib/components/common/button/Button.svelte'
 	import { ChevronDown } from 'lucide-svelte'
 
-	$: opened = false
+	let opened = $state(false);
+	
 </script>
 
 <div class="text-xs flex flex-row-reverse">
diff --git a/frontend/src/lib/components/flows/content/FlowFailureModule.svelte b/frontend/src/lib/components/flows/content/FlowFailureModule.svelte
index d8745aa8d9..69a30dbe84 100644
--- a/frontend/src/lib/components/flows/content/FlowFailureModule.svelte
+++ b/frontend/src/lib/components/flows/content/FlowFailureModule.svelte
@@ -4,10 +4,14 @@
 	import FlowModuleWrapper from './FlowModuleWrapper.svelte'
 	import type { FlowModule } from '$lib/gen'
 
-	export let noEditor = false
-	export let savedModule: FlowModule | undefined = undefined
+	interface Props {
+		noEditor?: boolean;
+		savedModule?: FlowModule | undefined;
+	}
 
-	const { flowStore } = getContext<FlowEditorContext>('FlowEditorContext')
+	let { noEditor = false, savedModule = undefined }: Props = $props();
+
+	const { flowStore } = $state(getContext<FlowEditorContext>('FlowEditorContext'))
 </script>
 
 {#if flowStore.val.value.failure_module}
diff --git a/frontend/src/lib/components/flows/content/FlowInputsFlow.svelte b/frontend/src/lib/components/flows/content/FlowInputsFlow.svelte
index faee8fb3d9..ff7db36edd 100644
--- a/frontend/src/lib/components/flows/content/FlowInputsFlow.svelte
+++ b/frontend/src/lib/components/flows/content/FlowInputsFlow.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy'
+
 	import { Badge, Skeleton } from '$lib/components/common'
 	import NoItemFound from '$lib/components/home/NoItemFound.svelte'
 	import SearchItems from '$lib/components/SearchItems.svelte'
@@ -9,25 +11,35 @@
 	import { createEventDispatcher } from 'svelte'
 	import { flip } from 'svelte/animate'
 	import { fade } from 'svelte/transition'
+	interface Props {
+		children?: import('svelte').Snippet
+	}
+
+	let { children }: Props = $props()
 
 	// export let failureModule: boolean
 	const dispatch = createEventDispatcher()
 
-	let items: Flow[] | undefined = undefined
-	let filteredItems: (Flow & { marked?: string })[] | undefined = undefined
-	let filter = ''
-	$: $workspaceStore && loadFlows()
+	let items: Flow[] | undefined = $state(undefined)
+	let filteredItems: (Flow & { marked?: string })[] | undefined = $state(undefined)
+	let filter = $state('')
 
-	let ownerFilter: string | undefined = undefined
-	$: prefilteredItems = ownerFilter ? items?.filter((x) => x.path.startsWith(ownerFilter!)) : items
-
-	$: owners = Array.from(
-		new Set(filteredItems?.map((x) => x.path.split('/').slice(0, 2).join('/')) ?? [])
-	).sort()
+	let ownerFilter: string | undefined = $state(undefined)
 
 	async function loadFlows() {
 		items = await FlowService.listFlows({ workspace: $workspaceStore! })
 	}
+	run(() => {
+		$workspaceStore && loadFlows()
+	})
+	let prefilteredItems = $derived.by(() =>
+		ownerFilter ? items?.filter((x) => x.path.startsWith(ownerFilter!)) : items
+	)
+	let owners = $derived.by(() =>
+		Array.from(
+			new Set(filteredItems?.map((x) => x.path.split('/').slice(0, 2).join('/')) ?? [])
+		).sort()
+	)
 </script>
 
 <SearchItems
@@ -39,7 +51,7 @@
 <div class="flex flex-col min-h-0 p-4">
 	<h3 class="mb-4">Pick a Workspace Flow</h3>
 	<div class="w-full flex mt-1 items-center gap-2 mb-3">
-		<slot />
+		{@render children?.()}
 
 		<input
 			type="text"
@@ -78,7 +90,7 @@
 				<li class="flex flex-row w-full">
 					<button
 						class="p-4 gap-1 flex flex-row grow hover:bg-surface-hover bg-surface transition-all text-primary"
-						on:click={() => {
+						onclick={() => {
 							dispatch('pick', { path })
 						}}
 					>
diff --git a/frontend/src/lib/components/flows/content/FlowInputsFlowQuick.svelte b/frontend/src/lib/components/flows/content/FlowInputsFlowQuick.svelte
index 0c7dc25bd7..22df2997dd 100644
--- a/frontend/src/lib/components/flows/content/FlowInputsFlowQuick.svelte
+++ b/frontend/src/lib/components/flows/content/FlowInputsFlowQuick.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy'
+
 	import { Skeleton } from '$lib/components/common'
 	import SearchItems from '$lib/components/SearchItems.svelte'
 	import { FlowService, type Flow } from '$lib/gen'
@@ -10,22 +12,32 @@
 	// export let failureModule: boolean
 	const dispatch = createEventDispatcher()
 
-	let items: Flow[] | undefined = undefined
-	let filteredItems: (Flow & { marked?: string })[] | undefined = undefined
-	export let filter = ''
-	$: $workspaceStore && loadFlows()
+	let items: Flow[] | undefined = $state(undefined)
+	let filteredItems: (Flow & { marked?: string })[] | undefined = $state(undefined)
 
 	let ownerFilter: string | undefined = undefined
-	$: prefilteredItems = ownerFilter ? items?.filter((x) => x.path.startsWith(ownerFilter!)) : items
 
-	export let owners: string[] = []
-	$: owners = Array.from(
-		new Set(filteredItems?.map((x) => x.path.split('/').slice(0, 2).join('/')) ?? [])
-	).sort()
+	interface Props {
+		filter?: string
+		owners?: string[]
+	}
+
+	let { filter = '', owners = $bindable([]) }: Props = $props()
 
 	async function loadFlows() {
 		items = await FlowService.listFlows({ workspace: $workspaceStore! })
 	}
+	run(() => {
+		$workspaceStore && loadFlows()
+	})
+	let prefilteredItems = $derived.by(() =>
+		ownerFilter ? items?.filter((x) => x.path.startsWith(ownerFilter!)) : items
+	)
+	run(() => {
+		owners = Array.from(
+			new Set(filteredItems?.map((x) => x.path.split('/').slice(0, 2).join('/')) ?? [])
+		).sort()
+	})
 </script>
 
 <SearchItems
@@ -46,7 +58,7 @@
 				<li class="flex flex-row w-full">
 					<button
 						class="px-3 py-2 gap-2 flex flex-row w-full hover:bg-surface-hover bg-surface transition-all items-center rounded-md text-left text-2xs text-primary font-normal"
-						on:click={async () => {
+						onclick={async () => {
 							dispatch('pickFlow', {
 								path,
 								summary
diff --git a/frontend/src/lib/components/flows/content/FlowModuleMockTransitionMessage.svelte b/frontend/src/lib/components/flows/content/FlowModuleMockTransitionMessage.svelte
index 08d08a48c0..34384cc506 100644
--- a/frontend/src/lib/components/flows/content/FlowModuleMockTransitionMessage.svelte
+++ b/frontend/src/lib/components/flows/content/FlowModuleMockTransitionMessage.svelte
@@ -4,7 +4,7 @@
 	import DarkModeObserver from '$lib/components/DarkModeObserver.svelte'
 	import { Info } from 'lucide-svelte'
 
-	let darkMode = true
+	let darkMode = $state(true)
 
 	function openFullscreen(event: MouseEvent) {
 		const img = event.target as HTMLImageElement
@@ -59,13 +59,13 @@
 					<div
 						class="border rounded-md p-1 bg-white dark:bg-slate-800 h-56 overflow-hidden shadow-sm group-hover:shadow transition-shadow"
 					>
-						<!--svelte-ignore a11y-click-events-have-key-events-->
-						<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+						<!--svelte-ignore a11y_click_events_have_key_events-->
+						<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 						<img
 							class="w-full h-full object-contain opacity-70 hover:opacity-100 cursor-pointer"
 							src={darkMode ? `${base}/pin-history-dark.png` : `${base}/pin-history.png`}
 							alt="History picker"
-							on:click={openFullscreen}
+							onclick={openFullscreen}
 						/>
 					</div>
 				</div>
@@ -82,13 +82,13 @@
 					<div
 						class="border rounded-md p-1 bg-white dark:bg-slate-800 h-56 overflow-hidden shadow-sm group-hover:shadow transition-shadow"
 					>
-						<!--svelte-ignore a11y-click-events-have-key-events-->
-						<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+						<!--svelte-ignore a11y_click_events_have_key_events-->
+						<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 						<img
 							class="w-full h-full object-contain opacity-70 hover:opacity-100 cursor-pointer"
 							src={darkMode ? `${base}/pin-pin-dark.png` : `${base}/pin-pin.png`}
 							alt="Pin action"
-							on:click={openFullscreen}
+							onclick={openFullscreen}
 						/>
 					</div>
 				</div>
@@ -105,13 +105,13 @@
 					<div
 						class="border rounded-md p-1 bg-white dark:bg-slate-800 h-56 overflow-hidden shadow-sm group-hover:shadow transition-shadow"
 					>
-						<!--svelte-ignore a11y-click-events-have-key-events-->
-						<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+						<!--svelte-ignore a11y_click_events_have_key_events-->
+						<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 						<img
 							class="w-full h-full object-contain opacity-70 hover:opacity-100 cursor-pointer"
 							src={darkMode ? `${base}/pin-restore-dark.png` : `${base}/pin-restore.png`}
 							alt="Recover pins"
-							on:click={openFullscreen}
+							onclick={openFullscreen}
 						/>
 					</div>
 				</div>
@@ -129,13 +129,13 @@
 					<div
 						class="border rounded-md p-1 bg-white dark:bg-slate-800 h-56 overflow-hidden shadow-sm group-hover:shadow transition-shadow"
 					>
-						<!--svelte-ignore a11y-click-events-have-key-events-->
-						<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+						<!--svelte-ignore a11y_click_events_have_key_events-->
+						<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 						<img
 							class="w-full h-full object-contain opacity-70 hover:opacity-100 cursor-pointer"
 							src={darkMode ? `${base}/pin-flow-view-dark.png` : `${base}/pin-flow-view.png`}
 							alt="Flow view pinning"
-							on:click={openFullscreen}
+							onclick={openFullscreen}
 						/>
 					</div>
 				</div>
diff --git a/frontend/src/lib/components/flows/content/FlowPathViewer.svelte b/frontend/src/lib/components/flows/content/FlowPathViewer.svelte
index 31593fbf43..c1c4b5c9de 100644
--- a/frontend/src/lib/components/flows/content/FlowPathViewer.svelte
+++ b/frontend/src/lib/components/flows/content/FlowPathViewer.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import Skeleton from '$lib/components/common/skeleton/Skeleton.svelte'
 	import FlowGraphViewer from '$lib/components/FlowGraphViewer.svelte'
 	import type { TriggerContext } from '$lib/components/triggers'
@@ -8,10 +10,14 @@
 	import { setContext } from 'svelte'
 	import { writable } from 'svelte/store'
 
-	export let path: string
-	export let noSide = false
+	interface Props {
+		path: string;
+		noSide?: boolean;
+	}
 
-	let flow: Flow | undefined = undefined
+	let { path, noSide = false }: Props = $props();
+
+	let flow: Flow | undefined = $state(undefined)
 
 	const triggersCount = writable<TriggersCount | undefined>(undefined)
 	setContext<TriggerContext>('TriggerContext', {
@@ -28,7 +34,9 @@
 		)
 	}
 
-	$: path && loadFlow(path)
+	run(() => {
+		path && loadFlow(path)
+	});
 </script>
 
 <div class="flex flex-col flex-1 h-full overflow-auto">
diff --git a/frontend/src/lib/components/flows/content/FlowPreprocessorModule.svelte b/frontend/src/lib/components/flows/content/FlowPreprocessorModule.svelte
index b074b90685..24534b53db 100644
--- a/frontend/src/lib/components/flows/content/FlowPreprocessorModule.svelte
+++ b/frontend/src/lib/components/flows/content/FlowPreprocessorModule.svelte
@@ -4,10 +4,14 @@
 	import FlowModuleWrapper from './FlowModuleWrapper.svelte'
 	import type { FlowModule } from '$lib/gen'
 
-	export let noEditor = false
-	export let savedModule: FlowModule | undefined = undefined
+	interface Props {
+		noEditor?: boolean;
+		savedModule?: FlowModule | undefined;
+	}
 
-	const { flowStore } = getContext<FlowEditorContext>('FlowEditorContext')
+	let { noEditor = false, savedModule = undefined }: Props = $props();
+
+	const { flowStore } = $state(getContext<FlowEditorContext>('FlowEditorContext'))
 </script>
 
 {#if flowStore.val.value.preprocessor_module}
diff --git a/frontend/src/lib/components/flows/content/FlowSettings.svelte b/frontend/src/lib/components/flows/content/FlowSettings.svelte
index 9ee3f25e92..bb260c404d 100644
--- a/frontend/src/lib/components/flows/content/FlowSettings.svelte
+++ b/frontend/src/lib/components/flows/content/FlowSettings.svelte
@@ -1,3 +1,5 @@
+<!-- @migration-task Error while migrating Svelte code: Can only bind to an Identifier or MemberExpression or a `{get, set}` pair
+https://svelte.dev/e/bind_invalid_expression -->
 <script lang="ts">
 	import { run, createBubbler } from 'svelte/legacy'
 
diff --git a/frontend/src/lib/components/flows/content/GenAiQuick.svelte b/frontend/src/lib/components/flows/content/GenAiQuick.svelte
index 39ae79d0cf..e0e681d568 100644
--- a/frontend/src/lib/components/flows/content/GenAiQuick.svelte
+++ b/frontend/src/lib/components/flows/content/GenAiQuick.svelte
@@ -1,10 +1,17 @@
 <script lang="ts">
+	import { createBubbler } from 'svelte/legacy';
+
+	const bubble = createBubbler();
 	import { Wand2 } from 'lucide-svelte'
 	import { createEventDispatcher } from 'svelte'
 
-	export let funcDesc: string
-	export let selected: boolean
-	export let lang: string
+	interface Props {
+		funcDesc: string;
+		selected: boolean;
+		lang: string;
+	}
+
+	let { funcDesc, selected, lang }: Props = $props();
 	const dispatch = createEventDispatcher()
 
 	const onKeyDown = (e: KeyboardEvent) => {
@@ -15,12 +22,12 @@
 	}
 </script>
 
-<svelte:window on:keydown={onKeyDown} />
+<svelte:window onkeydown={onKeyDown} />
 <button
 	class="px-3 py-2 gap-2 w-full text-left hover:bg-surface-hover flex flex-row items-center transition-all rounded-md {selected
 		? 'bg-surface-hover'
 		: ''}"
-	on:click
+	onclick={bubble('click')}
 >
 	<Wand2 size={14} class="text-ai" />
 
diff --git a/frontend/src/lib/components/flows/content/ScriptEditorDrawer.svelte b/frontend/src/lib/components/flows/content/ScriptEditorDrawer.svelte
index 99ad0c4a9a..a98212405f 100644
--- a/frontend/src/lib/components/flows/content/ScriptEditorDrawer.svelte
+++ b/frontend/src/lib/components/flows/content/ScriptEditorDrawer.svelte
@@ -214,9 +214,11 @@
 					{args}
 				>
 					<!-- @migration-task: migrate this slot by hand, `editor_bar_right` is an invalid identifier -->
-					<div slot="editor_bar_right">
-						<WorkerTagSelect bind:tag={script.tag} />
-					</div>
+					{#snippet editor_bar_right()}
+						<div>
+							<WorkerTagSelect bind:tag={script!.tag} />
+						</div>
+					{/snippet}
 				</ScriptEditor>
 			{/key}
 		{:else}
diff --git a/frontend/src/lib/components/flows/content/SuspendDrawer.svelte b/frontend/src/lib/components/flows/content/SuspendDrawer.svelte
index 209f4d059d..3577f3c6fa 100644
--- a/frontend/src/lib/components/flows/content/SuspendDrawer.svelte
+++ b/frontend/src/lib/components/flows/content/SuspendDrawer.svelte
@@ -6,18 +6,24 @@
 	import DrawerContent from '../../common/drawer/DrawerContent.svelte'
 	import TabContent from '$lib/components/common/tabs/TabContent.svelte'
 
-	let drawer: Drawer
+	let drawer: Drawer | undefined = $state()
 
-	export let text: string = 'Approval Help'
+	interface Props {
+		text?: string
+	}
+
+	let { text = 'Approval Help' }: Props = $props()
 </script>
 
 <Button
 	size="xs"
 	variant="default"
 	on:click={() => {
-		drawer.openDrawer()
+		drawer?.openDrawer()
 	}}
-	>{text} <HelpCircle size={12} />
+>
+	{text}
+	<HelpCircle size={12} />
 </Button>
 
 <Drawer bind:this={drawer}>
diff --git a/frontend/src/lib/components/flows/map/FlowJobsMenu.svelte b/frontend/src/lib/components/flows/map/FlowJobsMenu.svelte
index 39e232b7b9..1760e0cf53 100644
--- a/frontend/src/lib/components/flows/map/FlowJobsMenu.svelte
+++ b/frontend/src/lib/components/flows/map/FlowJobsMenu.svelte
@@ -1,3 +1,5 @@
+<!-- @migration-task Error while migrating Svelte code: Identifier 'onSelectedIteration' has already been declared
+https://svelte.dev/e/js_parse_error -->
 <script lang="ts">
 	import { Menu, Menubar, MenuItem, MeltButton } from '$lib/components/meltComponents'
 	import { ListFilter, Lock, LockOpen } from 'lucide-svelte'
diff --git a/frontend/src/lib/components/flows/map/MapItem.svelte b/frontend/src/lib/components/flows/map/MapItem.svelte
index 9ebc959278..3e71d5ae50 100644
--- a/frontend/src/lib/components/flows/map/MapItem.svelte
+++ b/frontend/src/lib/components/flows/map/MapItem.svelte
@@ -1,3 +1,5 @@
+<!-- @migration-task Error while migrating Svelte code: Identifier 'onSelectedIteration' has already been declared
+https://svelte.dev/e/js_parse_error -->
 <script lang="ts">
 	import { Button } from '$lib/components/common'
 	import type { FlowModule, Job } from '$lib/gen'
diff --git a/frontend/src/lib/components/flows/pickers/FlowScriptPickerQuick.svelte b/frontend/src/lib/components/flows/pickers/FlowScriptPickerQuick.svelte
index 70bdd7a831..e93512d456 100644
--- a/frontend/src/lib/components/flows/pickers/FlowScriptPickerQuick.svelte
+++ b/frontend/src/lib/components/flows/pickers/FlowScriptPickerQuick.svelte
@@ -5,11 +5,21 @@
 	import { sendUserToast } from '$lib/toast'
 	import { createEventDispatcher } from 'svelte'
 
-	export let label: string
-	export let lang: SupportedLanguage | 'docker' | 'javascript' | undefined = undefined
-	export let selected = false
-	export let eeRestricted: boolean
-	export let enterpriseLangs: string[] = []
+	interface Props {
+		label: string;
+		lang?: SupportedLanguage | 'docker' | 'javascript' | undefined;
+		selected?: boolean;
+		eeRestricted: boolean;
+		enterpriseLangs?: string[];
+	}
+
+	let {
+		label,
+		lang = undefined,
+		selected = false,
+		eeRestricted,
+		enterpriseLangs = []
+	}: Props = $props();
 
 	const dispatch = createEventDispatcher()
 	function handleKeydown(event: KeyboardEvent & { currentTarget: EventTarget & Window }) {
@@ -30,7 +40,7 @@
 	}
 </script>
 
-<svelte:window on:keydown={handleKeydown} />
+<svelte:window onkeydown={handleKeydown} />
 
 <Button
 	id={`flow-editor-new-${lang}`}
diff --git a/frontend/src/lib/components/flows/pickers/FlowToplevelNode.svelte b/frontend/src/lib/components/flows/pickers/FlowToplevelNode.svelte
index 1729063698..1b0e6ae58a 100644
--- a/frontend/src/lib/components/flows/pickers/FlowToplevelNode.svelte
+++ b/frontend/src/lib/components/flows/pickers/FlowToplevelNode.svelte
@@ -2,8 +2,12 @@
 	import { createEventDispatcher } from 'svelte'
 	import TopLevelNode from './TopLevelNode.svelte'
 
-	export let label: string
-	export let selected = false
+	interface Props {
+		label: string;
+		selected?: boolean;
+	}
+
+	let { label, selected = false }: Props = $props();
 	const dispatch = createEventDispatcher()
 	function handleKeydown(event: KeyboardEvent & { currentTarget: EventTarget & Window }) {
 		if (selected && event.key === 'Enter') {
@@ -17,6 +21,6 @@
 	}
 </script>
 
-<svelte:window on:keydown={handleKeydown} />
+<svelte:window onkeydown={handleKeydown} />
 
 <TopLevelNode {label} {selected} returnIcon onSelect={click} />
diff --git a/frontend/src/lib/components/flows/pickers/WorkspaceScriptPicker.svelte b/frontend/src/lib/components/flows/pickers/WorkspaceScriptPicker.svelte
index def0c1e58e..baff32e728 100644
--- a/frontend/src/lib/components/flows/pickers/WorkspaceScriptPicker.svelte
+++ b/frontend/src/lib/components/flows/pickers/WorkspaceScriptPicker.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy'
+
 	import { workspaceStore } from '$lib/stores'
 	import { createEventDispatcher } from 'svelte'
 	import { ScriptService } from '$lib/gen'
@@ -11,10 +13,6 @@
 	import NoItemFound from '$lib/components/home/NoItemFound.svelte'
 	import TextInput from '$lib/components/text_input/TextInput.svelte'
 
-	export let kind: 'script' | 'trigger' | 'approval' | 'failure' = 'script'
-	export let isTemplate: boolean | undefined = undefined
-	export let displayLock = false
-
 	type Item = {
 		path: string
 		summary?: string
@@ -22,12 +20,24 @@
 		hash?: string
 	}
 
-	let items: Item[] | undefined = undefined
+	let items: Item[] | undefined = $state(undefined)
 
-	let filteredItems: (Item & { marked?: string })[] | undefined = undefined
-	export let filter = ''
+	let filteredItems: (Item & { marked?: string })[] | undefined = $state(undefined)
+	interface Props {
+		kind?: 'script' | 'trigger' | 'approval' | 'failure'
+		isTemplate?: boolean | undefined
+		displayLock?: boolean
+		filter?: string
+		children?: import('svelte').Snippet
+	}
 
-	$: $workspaceStore && kind && loadItems()
+	let {
+		kind = 'script',
+		isTemplate = undefined,
+		displayLock = false,
+		filter = $bindable(''),
+		children
+	}: Props = $props()
 
 	async function loadItems(): Promise<void> {
 		items = await ScriptService.listScripts({
@@ -37,18 +47,26 @@
 		})
 	}
 
-	let ownerFilter: string | undefined = undefined
-	$: if ($workspaceStore) {
-		ownerFilter = undefined
-	}
-	$: prefilteredItems = ownerFilter ? items?.filter((x) => x.path.startsWith(ownerFilter!)) : items
-
-	$: owners = Array.from(
-		new Set(filteredItems?.map((x) => x.path.split('/').slice(0, 2).join('/')) ?? [])
-	).sort()
+	let ownerFilter: string | undefined = $state(undefined)
 
 	const dispatch = createEventDispatcher()
-	let lockHash = false
+	let lockHash = $state(false)
+	run(() => {
+		$workspaceStore && kind && loadItems()
+	})
+	run(() => {
+		if ($workspaceStore) {
+			ownerFilter = undefined
+		}
+	})
+	let prefilteredItems = $derived.by(() =>
+		ownerFilter ? items?.filter((x) => x.path.startsWith(ownerFilter!)) : items
+	)
+	let owners = $derived.by(() =>
+		Array.from(
+			new Set(filteredItems?.map((x) => x.path.split('/').slice(0, 2).join('/')) ?? [])
+		).sort()
+	)
 </script>
 
 <SearchItems
@@ -59,7 +77,7 @@
 />
 <div class="flex flex-col min-h-0">
 	<div class="w-full flex items-center gap-2 mb-3">
-		<slot />
+		{@render children?.()}
 
 		<TextInput
 			inputProps={{
@@ -109,7 +127,7 @@
 				<li class="flex flex-row w-full">
 					<button
 						class="p-4 gap-1 flex flex-row grow hover:bg-surface-hover bg-surface transition-all text-primary"
-						on:click={() => {
+						onclick={() => {
 							dispatch('pick', { path, hash: lockHash ? hash : undefined })
 						}}
 					>
diff --git a/frontend/src/lib/components/flows/propPicker/FlowPropPicker.svelte b/frontend/src/lib/components/flows/propPicker/FlowPropPicker.svelte
index 5a0524eae7..66486e814f 100644
--- a/frontend/src/lib/components/flows/propPicker/FlowPropPicker.svelte
+++ b/frontend/src/lib/components/flows/propPicker/FlowPropPicker.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+	import { run, preventDefault, stopPropagation, createBubbler } from 'svelte/legacy'
+
+	const bubble = createBubbler()
 	import ObjectViewer from '$lib/components/propertyPicker/ObjectViewer.svelte'
 	import AnimatedButton from '$lib/components/common/button/AnimatedButton.svelte'
 	import Popover from '$lib/components/meltComponents/Popover.svelte'
@@ -10,10 +13,14 @@
 
 	import { tick } from 'svelte'
 
-	export let json = {}
-	export let prefix = ''
+	interface Props {
+		json?: any
+		prefix?: string
+	}
 
-	let isConnecting = false
+	let { json = {}, prefix = '' }: Props = $props()
+
+	let isConnecting = $state(false)
 
 	const { flowPropPickerConfig } = getContext<PropPickerContext>('PropPickerContext')
 
@@ -22,15 +29,20 @@
 		isConnecting = $flowPropPickerConfig?.insertionMode === 'connect'
 	}
 
-	$: $flowPropPickerConfig, updateConnecting()
+	run(() => {
+		$flowPropPickerConfig
+		updateConnecting()
+	})
 </script>
 
 <button
-	on:click|preventDefault|stopPropagation={(e) => {
-		e.preventDefault()
-		e.stopPropagation()
-	}}
-	on:keydown|preventDefault|stopPropagation
+	onclick={stopPropagation(
+		preventDefault((e) => {
+			e.preventDefault()
+			e.stopPropagation()
+		})
+	)}
+	onkeydown={stopPropagation(preventDefault(bubble('keydown')))}
 	data-prop-picker
 	title=""
 >
@@ -44,9 +56,11 @@
 			floatingConfig={{ strategy: 'fixed', placement: 'bottom-start' }}
 			closeOnOtherPopoverOpen={true}
 		>
-			<svelte:fragment slot="trigger" let:isOpen>
+			{#snippet trigger({ isOpen })}
 				<Tooltip disablePopup={isOpen}>
-					<svelte:fragment slot="text">node outputs</svelte:fragment>
+					{#snippet text()}
+						node outputs
+					{/snippet}
 					<button
 						class={twMerge(
 							'rounded-full center-center h-[18px] w-[18px]',
@@ -58,8 +72,8 @@
 						<Plug size={12} strokeWidth={2} />
 					</button>
 				</Tooltip>
-			</svelte:fragment>
-			<svelte:fragment slot="content">
+			{/snippet}
+			{#snippet content()}
 				<div class="p-4 max-h-[50vh] overflow-y-auto" data-prop-picker>
 					<ObjectViewer
 						{json}
@@ -74,7 +88,7 @@
 						allowCopy={!$flowPropPickerConfig}
 					/>
 				</div>
-			</svelte:fragment>
+			{/snippet}
 		</Popover>
 	</AnimatedButton>
 </button>
diff --git a/frontend/src/lib/components/flows/propPicker/JobPickerLight.svelte b/frontend/src/lib/components/flows/propPicker/JobPickerLight.svelte
index e99112804f..ff4e3cf800 100644
--- a/frontend/src/lib/components/flows/propPicker/JobPickerLight.svelte
+++ b/frontend/src/lib/components/flows/propPicker/JobPickerLight.svelte
@@ -4,7 +4,11 @@
 	import type { Job } from '$lib/gen'
 	import OutputBadge from './OutputBadge.svelte'
 
-	export let job: Job | undefined
+	interface Props {
+		job: Job | undefined;
+	}
+
+	let { job }: Props = $props();
 </script>
 
 {#if job}
diff --git a/frontend/src/lib/components/flows/propPicker/OutputBadge.svelte b/frontend/src/lib/components/flows/propPicker/OutputBadge.svelte
index b9d2412b30..0eb402c1a6 100644
--- a/frontend/src/lib/components/flows/propPicker/OutputBadge.svelte
+++ b/frontend/src/lib/components/flows/propPicker/OutputBadge.svelte
@@ -1,3 +1,4 @@
+<!-- @migration-task Error while migrating Svelte code: $$props is used together with named props in a way that cannot be automatically migrated. -->
 <script lang="ts">
 	import type { Job } from '$lib/gen'
 	import { twMerge } from 'tailwind-merge'
diff --git a/frontend/src/lib/components/git_sync/GitSyncModalManager.svelte b/frontend/src/lib/components/git_sync/GitSyncModalManager.svelte
index 9da776cb96..15e23f7e1e 100644
--- a/frontend/src/lib/components/git_sync/GitSyncModalManager.svelte
+++ b/frontend/src/lib/components/git_sync/GitSyncModalManager.svelte
@@ -5,7 +5,7 @@
 	import GitSyncSuccessModal from '$lib/components/git_sync/GitSyncSuccessModal.svelte'
 	import { sendUserToast } from '$lib/toast'
 
-	const gitSyncContext = getGitSyncContext()
+	const gitSyncContext = $state(getGitSyncContext())
 
 	function handlePushSuccess() {
 		const pushModal = gitSyncContext.activeModals.push
diff --git a/frontend/src/lib/components/graph/FlowGraphV2.svelte b/frontend/src/lib/components/graph/FlowGraphV2.svelte
index d9d8a5d0ae..484b0ad073 100644
--- a/frontend/src/lib/components/graph/FlowGraphV2.svelte
+++ b/frontend/src/lib/components/graph/FlowGraphV2.svelte
@@ -1,3 +1,5 @@
+<!-- @migration-task Error while migrating Svelte code: Identifier 'onSelectedIteration' has already been declared
+https://svelte.dev/e/js_parse_error -->
 <script lang="ts">
 	import { FlowService, type FlowModule, type Job } from '../../gen'
 	import { NODE, type GraphModuleState } from '.'
diff --git a/frontend/src/lib/components/graph/renderers/edges/HiddenBaseEdge.svelte b/frontend/src/lib/components/graph/renderers/edges/HiddenBaseEdge.svelte
index a6032a2af1..00d996e271 100644
--- a/frontend/src/lib/components/graph/renderers/edges/HiddenBaseEdge.svelte
+++ b/frontend/src/lib/components/graph/renderers/edges/HiddenBaseEdge.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
 	import { BaseEdge } from '@xyflow/svelte'
-	export let markerEnd: string | undefined = undefined
+	interface Props {
+		markerEnd?: string | undefined;
+	}
+
+	let { markerEnd = undefined }: Props = $props();
 </script>
 
 <BaseEdge path={''} {markerEnd} class="hidden" />
diff --git a/frontend/src/lib/components/graph/renderers/nodes/AssetNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/AssetNode.svelte
index 3d82c81367..886ba3de13 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/AssetNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/AssetNode.svelte
@@ -281,7 +281,9 @@
 				{#if data.asset.kind === 'resource' && cachedResourceMetadata === undefined}
 					<Tooltip class={'pr-1 flex items-center justify-center'}>
 						<AlertTriangle size={16} class="text-orange-500" />
-						<svelte:fragment slot="text">Could not find resource</svelte:fragment>
+						{#snippet text()}
+												Could not find resource
+											{/snippet}
 					</Tooltip>
 				{:else if isSelected && assetCanBeExplored(data.asset, cachedResourceMetadata) && !$userStore?.operator}
 					<div transition:slide={{ axis: 'x', duration: 100 }}>
@@ -297,27 +299,29 @@
 					</div>
 				{/if}
 			</div>
-			<svelte:fragment slot="text">
-				{#if usageCount !== undefined}
-					Used in {pluralize(usageCount, 'step')}<br />
-				{/if}
-				<a
-					href={undefined}
-					class={twMerge(
-						'text-xs',
-						data.asset.kind === 'resource' ? 'text-accent cursor-pointer' : 'text-hint'
-					)}
-					onclick={() => {
-						if (data.asset.kind === 'resource')
-							flowGraphAssetsCtx?.val.resourceEditorDrawer?.initEdit(data.asset.path)
-					}}
-				>
-					{data.asset.path}
-				</a><br />
-				<span class="text-hint text-xs">
-					{formatAssetKind({ ...data.asset, metadata: cachedResourceMetadata })}</span
-				>
-			</svelte:fragment>
+			{#snippet text()}
+					
+					{#if usageCount !== undefined}
+						Used in {pluralize(usageCount, 'step')}<br />
+					{/if}
+					<a
+						href={undefined}
+						class={twMerge(
+							'text-xs',
+							data.asset.kind === 'resource' ? 'text-accent cursor-pointer' : 'text-hint'
+						)}
+						onclick={() => {
+							if (data.asset.kind === 'resource')
+								flowGraphAssetsCtx?.val.resourceEditorDrawer?.initEdit(data.asset.path)
+						}}
+					>
+						{data.asset.path}
+					</a><br />
+					<span class="text-hint text-xs">
+						{formatAssetKind({ ...data.asset, metadata: cachedResourceMetadata })}</span
+					>
+				
+					{/snippet}
 		</Tooltip>
 	{/snippet}
 </NodeWrapper>
diff --git a/frontend/src/lib/components/graph/renderers/nodes/AssetsOverflowedNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/AssetsOverflowedNode.svelte
index 9c637dd819..0d4f9bbca8 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/AssetsOverflowedNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/AssetsOverflowedNode.svelte
@@ -49,18 +49,22 @@
 			)}
 			placement="top"
 		>
-			<svelte:fragment slot="trigger">
-				+{data.overflowedAssets.length}
-			</svelte:fragment>
-			<svelte:fragment slot="content">
-				<ul>
-					{#each data.overflowedAssets as asset}
-						<li class="w-48">
-							<AssetNode data={{ asset }} />
-						</li>
-					{/each}
-				</ul>
-			</svelte:fragment>
+			{#snippet trigger()}
+					
+					+{data.overflowedAssets.length}
+				
+					{/snippet}
+			{#snippet content()}
+					
+					<ul>
+						{#each data.overflowedAssets as asset}
+							<li class="w-48">
+								<AssetNode data={{ asset }} />
+							</li>
+						{/each}
+					</ul>
+				
+					{/snippet}
 		</Popover>
 	{/snippet}
 </NodeWrapper>
diff --git a/frontend/src/lib/components/graph/renderers/nodes/TriggersNode.svelte b/frontend/src/lib/components/graph/renderers/nodes/TriggersNode.svelte
index 7283739b5f..a244f0a64a 100644
--- a/frontend/src/lib/components/graph/renderers/nodes/TriggersNode.svelte
+++ b/frontend/src/lib/components/graph/renderers/nodes/TriggersNode.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { preventDefault, stopPropagation } from 'svelte/legacy';
+
 	import NodeWrapper from './NodeWrapper.svelte'
 	import TriggersWrapper from '../triggers/TriggersWrapper.svelte'
 	import type { FlowModule, TriggersCount } from '$lib/gen'
@@ -12,7 +14,8 @@
 	import { tick } from 'svelte'
 	import type { GraphEventHandlers, SimplifiableFlow } from '../../graphBuilder.svelte'
 
-	export let data: {
+	interface Props {
+		data: {
 		path: string
 		isEditor: boolean
 		newFlow: boolean
@@ -22,13 +25,16 @@
 		index: number
 		disableAi: boolean
 		simplifiableFlow: SimplifiableFlow
+	};
 	}
 
+	let { data }: Props = $props();
+
 	const { selectedId } = getContext<{
 		selectedId: Writable<string | undefined>
 	}>('FlowGraphContext')
 
-	const { triggersCount, triggersState } = getContext<TriggerContext>('TriggerContext')
+	const { triggersCount, triggersState } = $state(getContext<TriggerContext>('TriggerContext'))
 
 	function getScheduleCfg(primary: Trigger | undefined, triggersCount: TriggersCount | undefined) {
 		return primary?.draftConfig
@@ -44,7 +50,7 @@
 					}
 	}
 
-	$: colorClasses = getNodeColorClasses('_VirtualItem', $selectedId == 'triggers')
+	let colorClasses = $derived(getNodeColorClasses('_VirtualItem', $selectedId == 'triggers'))
 </script>
 
 <NodeWrapper>
@@ -116,7 +122,7 @@
 				{:else}
 					<button
 						class="px-2 py-1 hover:bg-surface-inverse w-full hover:text-primary-inverse"
-						on:click={() => {
+						onclick={() => {
 							setScheduledPollSchedule(triggersState, triggersCount)
 						}}
 					>
@@ -129,8 +135,8 @@
 			<button
 				class="absolute -top-[10px] -right-[10px] rounded-full h-[20px] w-[20px] trash center-center text-secondary
 outline-[1px] outline dark:outline-gray-500 outline-gray-300 bg-surface duration-0 hover:bg-nord-950 hover:text-white"
-				on:click|preventDefault|stopPropagation={() =>
-					data?.eventHandlers?.simplifyFlow(!data.simplifiableFlow?.simplifiedFlow)}
+				onclick={stopPropagation(preventDefault(() =>
+					data?.eventHandlers?.simplifyFlow(!data.simplifiableFlow?.simplifiedFlow)))}
 				title={data.simplifiableFlow?.simplifiedFlow
 					? 'Expand to full flow view'
 					: 'Simplify flow view for scheduled poll'}
diff --git a/frontend/src/lib/components/graph/renderers/triggers/TriggerButton.svelte b/frontend/src/lib/components/graph/renderers/triggers/TriggerButton.svelte
index ef82a1b17d..c518081f1b 100644
--- a/frontend/src/lib/components/graph/renderers/triggers/TriggerButton.svelte
+++ b/frontend/src/lib/components/graph/renderers/triggers/TriggerButton.svelte
@@ -1,15 +1,23 @@
 <script lang="ts">
+	import { createBubbler } from 'svelte/legacy';
+
+	const bubble = createBubbler();
 	import { twMerge } from 'tailwind-merge'
 
-	export let selected: boolean
+	interface Props {
+		selected: boolean;
+		children?: import('svelte').Snippet;
+	}
+
+	let { selected, children }: Props = $props();
 </script>
 
 <button
-	on:click
+	onclick={bubble('click')}
 	class={twMerge(
 		'hover:bg-surface-hover rounded-md border text-xs w-[23px] h-[23px] relative center-center cursor-pointer bg-surface',
 		selected ? 'outline-1 outline-tertiary outline' : 'outline-0'
 	)}
 >
-	<slot />
+	{@render children?.()}
 </button>
diff --git a/frontend/src/lib/components/graph/renderers/triggers/TriggerCount.svelte b/frontend/src/lib/components/graph/renderers/triggers/TriggerCount.svelte
index c08cfcc056..62eadd5d90 100644
--- a/frontend/src/lib/components/graph/renderers/triggers/TriggerCount.svelte
+++ b/frontend/src/lib/components/graph/renderers/triggers/TriggerCount.svelte
@@ -1,7 +1,11 @@
 <script lang="ts">
 	import { Loader2 } from 'lucide-svelte'
 
-	export let count: number | undefined = undefined
+	interface Props {
+		count?: number | undefined;
+	}
+
+	let { count = undefined }: Props = $props();
 </script>
 
 {#if count && count > 0}
diff --git a/frontend/src/lib/components/home/FlowIcon.svelte b/frontend/src/lib/components/home/FlowIcon.svelte
index f9822b063f..257b84010f 100644
--- a/frontend/src/lib/components/home/FlowIcon.svelte
+++ b/frontend/src/lib/components/home/FlowIcon.svelte
@@ -1,3 +1,4 @@
+<!-- @migration-task Error while migrating Svelte code: $$props is used together with named props in a way that cannot be automatically migrated. -->
 <script lang="ts">
 	import BarsStaggered from '$lib/components/icons/BarsStaggered.svelte'
 	import { twMerge } from 'tailwind-merge'
diff --git a/frontend/src/lib/components/home/Item.svelte b/frontend/src/lib/components/home/Item.svelte
index 91ef63179d..20fc294866 100644
--- a/frontend/src/lib/components/home/Item.svelte
+++ b/frontend/src/lib/components/home/Item.svelte
@@ -11,21 +11,26 @@
 	import { createEventDispatcher } from 'svelte'
 	import { ArrowBigUp } from 'lucide-svelte'
 
-	export let item
-	export let depth: number = 0
-
 	const dispatch = createEventDispatcher()
 
-	let deleteConfirmedCallback: (() => void) | undefined = undefined
-	let shareModal: ShareModal
-	let moveDrawer: MoveDrawer
-	let deploymentDrawer: DeployWorkspaceDrawer
+	let deleteConfirmedCallback: (() => void) | undefined = $state(undefined)
+	let shareModal: ShareModal | undefined = $state()
+	let moveDrawer: MoveDrawer | undefined = $state()
+	let deploymentDrawer: DeployWorkspaceDrawer | undefined = $state()
 
-	let menuOpen: boolean = false
-	export let showCode: (path: string, summary: string) => void
+	let menuOpen: boolean = $state(false)
+	interface Props {
+		item: any
+		depth?: number
+		showCode: (path: string, summary: string) => void
+	}
+
+	let { item, depth = 0, showCode }: Props = $props()
 </script>
 
-{#if item.type == 'script'}
+{#if !shareModal || !moveDrawer || !deploymentDrawer}
+	<!-- For type safety -->
+{:else if item.type == 'script'}
 	<ScriptRow
 		bind:deleteConfirmedCallback
 		starred={item.starred ?? false}
diff --git a/frontend/src/lib/components/home/ItemsList.svelte b/frontend/src/lib/components/home/ItemsList.svelte
index 8e35713d4f..68017e59d1 100644
--- a/frontend/src/lib/components/home/ItemsList.svelte
+++ b/frontend/src/lib/components/home/ItemsList.svelte
@@ -32,7 +32,7 @@
 	import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte'
 	import FlowIcon from './FlowIcon.svelte'
 	import { canWrite, getLocalSetting, storeLocalSetting } from '$lib/utils'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import { setQuery } from '$lib/navigation'
 	import Drawer from '../common/drawer/Drawer.svelte'
 	import HighlightCode from '../HighlightCode.svelte'
@@ -73,7 +73,7 @@
 	let filteredItems: (TableScript | TableFlow | TableApp | TableRawApp)[] = $state([])
 
 	let itemKind = $state(
-		($page.url.searchParams.get('kind') as 'script' | 'flow' | 'app' | 'all') ?? 'all'
+		(page.url.searchParams.get('kind') as 'script' | 'flow' | 'app' | 'all') ?? 'all'
 	)
 
 	let loading = $state(true)
@@ -375,7 +375,7 @@
 					if (itemKind != 'all') {
 						subtab = v
 					}
-					setQuery($page.url, 'kind', v)
+					setQuery(page.url, 'kind', v)
 				}}
 			>
 				{#snippet children({ item })}
diff --git a/frontend/src/lib/components/home/ListFiltersQuick.svelte b/frontend/src/lib/components/home/ListFiltersQuick.svelte
index 6a36338094..ed80815700 100644
--- a/frontend/src/lib/components/home/ListFiltersQuick.svelte
+++ b/frontend/src/lib/components/home/ListFiltersQuick.svelte
@@ -4,13 +4,16 @@
 	import { createEventDispatcher } from 'svelte'
 	import { Button } from '../common'
 
-	export let filters: string[]
-	export let selectedFilter:
-		| { kind: 'owner' | 'integrations'; name: string | undefined }
-		| undefined = undefined
-	$: selectedAppFilter = selectedFilter?.kind === 'integrations' ? selectedFilter?.name : undefined
 
-	export let resourceType = false
+	interface Props {
+		filters: string[];
+		selectedFilter?: 
+		| { kind: 'owner' | 'integrations'; name: string | undefined }
+		| undefined;
+		resourceType?: boolean;
+	}
+
+	let { filters, selectedFilter = $bindable(undefined), resourceType = false }: Props = $props();
 
 	function getIconComponent(name: string, resourceType: boolean) {
 		if (resourceType) {
@@ -29,6 +32,7 @@
 	}
 
 	const dispatch = createEventDispatcher()
+	let selectedAppFilter = $derived(selectedFilter?.kind === 'integrations' ? selectedFilter?.name : undefined)
 </script>
 
 {#if Array.isArray(filters) && filters.length > 0}
diff --git a/frontend/src/lib/components/icons/RubyIcon.svelte b/frontend/src/lib/components/icons/RubyIcon.svelte
index 307fde1a3d..5f2623dddf 100644
--- a/frontend/src/lib/components/icons/RubyIcon.svelte
+++ b/frontend/src/lib/components/icons/RubyIcon.svelte
@@ -24,7 +24,7 @@
 			<cc:Work rdf:about=""
 				><dc:format>image/svg+xml</dc:format>
 				<!-- svelte-ignore element_invalid_self_closing_tag -->
-				<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work
+				<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"></dc:type></cc:Work
 			></rdf:RDF
 		></metadata
 	><defs id="defs3489"
@@ -326,7 +326,7 @@
 		guidetolerance="10"
 		id="namedview3487"
 		showgrid="false"
-	/>
+	></sodipodi:namedview>
 	<linearGradient
 		id="XMLID_17_"
 		gradientUnits="userSpaceOnUse"
diff --git a/frontend/src/lib/components/meltComponents/MeltButton.svelte b/frontend/src/lib/components/meltComponents/MeltButton.svelte
index 920680f99a..9b5664a4f6 100644
--- a/frontend/src/lib/components/meltComponents/MeltButton.svelte
+++ b/frontend/src/lib/components/meltComponents/MeltButton.svelte
@@ -1,3 +1,4 @@
+<!-- @migration-task Error while migrating Svelte code: $$props is used together with named props in a way that cannot be automatically migrated. -->
 <script lang="ts">
 	import { type AnyMeltElement } from '@melt-ui/svelte'
 	import { conditionalMelt } from '$lib/utils'
diff --git a/frontend/src/lib/components/meltComponents/Menubar.svelte b/frontend/src/lib/components/meltComponents/Menubar.svelte
index b6a34f07a7..2d498cf4e0 100644
--- a/frontend/src/lib/components/meltComponents/Menubar.svelte
+++ b/frontend/src/lib/components/meltComponents/Menubar.svelte
@@ -1,5 +1,11 @@
 <script lang="ts">
 	import { createMenubar, melt } from '@melt-ui/svelte'
+	interface Props {
+		children?: import('svelte').Snippet<[any]>;
+		[key: string]: any
+	}
+
+	let { ...props }: Props = $props();
 
 	const {
 		elements: { menubar },
@@ -7,6 +13,6 @@
 	} = createMenubar()
 </script>
 
-<div use:melt={$menubar} class={$$props.class}>
-	<slot {createMenu} />
+<div use:melt={$menubar} class={props.class}>
+	{@render props.children?.({ createMenu, })}
 </div>
diff --git a/frontend/src/lib/components/meltComponents/Popover.svelte b/frontend/src/lib/components/meltComponents/Popover.svelte
index 0f1012cd76..9eaa11d6c6 100644
--- a/frontend/src/lib/components/meltComponents/Popover.svelte
+++ b/frontend/src/lib/components/meltComponents/Popover.svelte
@@ -1,3 +1,4 @@
+<!-- @migration-task Error while migrating Svelte code: $$props is used together with named props in a way that cannot be automatically migrated. -->
 <script context="module" lang="ts">
 	import { writable } from 'svelte/store'
 	const activePopover = writable<{ id: string | null; close: (() => void) | null }>({
diff --git a/frontend/src/lib/components/meltComponents/Tooltip.svelte b/frontend/src/lib/components/meltComponents/Tooltip.svelte
index 297709b672..8c8166e1a0 100644
--- a/frontend/src/lib/components/meltComponents/Tooltip.svelte
+++ b/frontend/src/lib/components/meltComponents/Tooltip.svelte
@@ -1,3 +1,4 @@
+<!-- @migration-task Error while migrating Svelte code: $$props is used together with named props in a way that cannot be automatically migrated. -->
 <script lang="ts">
 	import type { Placement } from '@floating-ui/core'
 	import { InfoIcon } from 'lucide-svelte'
diff --git a/frontend/src/lib/components/propertyPicker/ObjectViewerWrapper.svelte b/frontend/src/lib/components/propertyPicker/ObjectViewerWrapper.svelte
index 69b476279f..60f82093ee 100644
--- a/frontend/src/lib/components/propertyPicker/ObjectViewerWrapper.svelte
+++ b/frontend/src/lib/components/propertyPicker/ObjectViewerWrapper.svelte
@@ -1,3 +1,5 @@
+<!-- @migration-task Error while migrating Svelte code: migrating this component would require adding a `$props` rune but there's already a variable named props.
+     Rename the variable and try again or migrate by hand. -->
 <script lang="ts">
 	import ObjectViewer from './ObjectViewer.svelte'
 	import { createEventDispatcher, onMount } from 'svelte'
diff --git a/frontend/src/lib/components/propertyPicker/PropPicker.svelte b/frontend/src/lib/components/propertyPicker/PropPicker.svelte
index 5620a1ef62..c6e8c4df25 100644
--- a/frontend/src/lib/components/propertyPicker/PropPicker.svelte
+++ b/frontend/src/lib/components/propertyPicker/PropPicker.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { ResourceService, VariableService } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
-	import { getContext, onDestroy } from 'svelte'
+	import { getContext, onDestroy, untrack } from 'svelte'
 	import { Badge, Button } from '../common'
 	import type { PropPickerWrapperContext } from '../flows/propPicker/PropPickerWrapper.svelte'
 
@@ -13,18 +13,28 @@
 	import type { PropPickerContext } from '../prop_picker'
 	import Scrollable from '../Scrollable.svelte'
 
-	export let pickableProperties: PickableProperties
-	export let displayContext = true
-	export let error: boolean = false
-	export let allowCopy = false
-	export let previousId: string | undefined = undefined
+	interface Props {
+		pickableProperties: PickableProperties
+		displayContext?: boolean
+		error?: boolean
+		allowCopy?: boolean
+		previousId?: string | undefined
+	}
 
-	let variables: Record<string, string> = {}
-	let resources: Record<string, any> = {}
-	let displayVariable = false
-	let displayResources = false
+	let {
+		pickableProperties,
+		displayContext = true,
+		error = false,
+		allowCopy = false,
+		previousId = undefined
+	}: Props = $props()
 
-	let allResultsCollapsed = true
+	let variables: Record<string, string> = $state({})
+	let resources: Record<string, any> = $state({})
+	let displayVariable = $state(false)
+	let displayResources = $state(false)
+
+	let allResultsCollapsed = $state(true)
 	let collapsableInitialState:
 		| {
 				allResultsCollapsed: boolean
@@ -33,19 +43,21 @@
 		  }
 		| undefined
 
-	let filterActive = false
+	let filterActive = $state(false)
 
 	const EMPTY_STRING = ''
-	let search = ''
+	let search = $state('')
 
 	const { propPickerConfig, inputMatches } =
 		getContext<PropPickerWrapperContext>('PropPickerWrapper')
 
 	const { pickablePropertiesFiltered } = getContext<PropPickerContext>('PropPickerContext')
-	$: $pickablePropertiesFiltered = pickableProperties
+	$effect(() => {
+		$pickablePropertiesFiltered = pickableProperties
+	})
 
-	let flowInputsFiltered: any = pickableProperties.flow_input
-	let resultByIdFiltered: any = pickableProperties.priorIds
+	let flowInputsFiltered: any = $state(pickableProperties.flow_input)
+	let resultByIdFiltered: any = $state(pickableProperties.priorIds)
 
 	let timeout: number | undefined
 	function onSearch(search: string) {
@@ -66,11 +78,14 @@
 		}, 50)
 	}
 
-	$: suggestedPropsFiltered =
+	let suggestedPropsFiltered = $derived(
 		$propPickerConfig && $propPickerConfig.propName
 			? keepByKey(pickableProperties.priorIds, $propPickerConfig.propName ?? '')
 			: undefined
-	$: search != undefined && onSearch(search)
+	)
+	$effect(() => {
+		search != undefined && onSearch(search)
+	})
 
 	async function loadVariables() {
 		variables = Object.fromEntries(
@@ -92,7 +107,7 @@
 		)
 	}
 
-	let filteringFlowInputsOrResult = ''
+	let filteringFlowInputsOrResult = $state('')
 	async function filterPickableProperties() {
 		if (!$propPickerConfig || !filterActive) {
 			if (search === EMPTY_STRING) {
@@ -192,7 +207,10 @@
 		await updateCollapsable()
 	}
 
-	$: (search, $inputMatches, $propPickerConfig, pickableProperties, updateState())
+	$effect(() => {
+		;[search, $inputMatches, $propPickerConfig, pickableProperties]
+		untrack(() => updateState())
+	})
 
 	onDestroy(() => {
 		clearTimeout(timeout)
diff --git a/frontend/src/lib/components/propertyPicker/PropPickerResult.svelte b/frontend/src/lib/components/propertyPicker/PropPickerResult.svelte
index cbb2f9c33c..e1ab8d48a9 100644
--- a/frontend/src/lib/components/propertyPicker/PropPickerResult.svelte
+++ b/frontend/src/lib/components/propertyPicker/PropPickerResult.svelte
@@ -1,10 +1,19 @@
 <script lang="ts">
 	import ObjectViewer from './ObjectViewer.svelte'
 
-	export let allowCopy = false
-	export let result: any
-	export let extraResults: any = undefined
-	export let flow_input: any = undefined
+	interface Props {
+		allowCopy?: boolean;
+		result: any;
+		extraResults?: any;
+		flow_input?: any;
+	}
+
+	let {
+		allowCopy = false,
+		result,
+		extraResults = undefined,
+		flow_input = undefined
+	}: Props = $props();
 </script>
 
 <div class="w-full px-2">
diff --git a/frontend/src/lib/components/runs/MobileFilters.svelte b/frontend/src/lib/components/runs/MobileFilters.svelte
index 8271897001..74bbfdacc5 100644
--- a/frontend/src/lib/components/runs/MobileFilters.svelte
+++ b/frontend/src/lib/components/runs/MobileFilters.svelte
@@ -4,17 +4,26 @@
 	import { Filter } from 'lucide-svelte'
 	import { Button } from '../common'
 	import Popover from '$lib/components/meltComponents/Popover.svelte'
+	interface Props {
+		filters?: import('svelte').Snippet;
+	}
+
+	let { filters }: Props = $props();
 </script>
 
 <Popover floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}>
-	<svelte:fragment slot="trigger">
-		<Button variant="accent" size="xs" nonCaptureEvent={true} startIcon={{ icon: Filter }}>
-			Filters
-		</Button>
-	</svelte:fragment>
-	<svelte:fragment slot="content">
-		<div class="flex flex-col w-80 p-4">
-			<slot name="filters" />
-		</div>
-	</svelte:fragment>
+	{#snippet trigger()}
+	
+			<Button variant="accent" size="xs" nonCaptureEvent={true} startIcon={{ icon: Filter }}>
+				Filters
+			</Button>
+		
+	{/snippet}
+	{#snippet content()}
+	
+			<div class="flex flex-col w-80 p-4">
+				{@render filters?.()}
+			</div>
+		
+	{/snippet}
 </Popover>
diff --git a/frontend/src/lib/components/runs/PreprocessedArgsDisplay.svelte b/frontend/src/lib/components/runs/PreprocessedArgsDisplay.svelte
index 19d373beae..7dea3dcbca 100644
--- a/frontend/src/lib/components/runs/PreprocessedArgsDisplay.svelte
+++ b/frontend/src/lib/components/runs/PreprocessedArgsDisplay.svelte
@@ -7,16 +7,21 @@
 	// import Button from '$lib/components/common/button/Button.svelte'
 	// import { json } from 'svelte-highlight/languages'
 	// import { copyToClipboard } from '$lib/utils'
-	// import { deepEqual } from 'fast-equals'
+	
 
-	export let preprocessed: boolean | undefined
+	interface Props {
+		// import { deepEqual } from 'fast-equals'
+		preprocessed: boolean | undefined;
+	}
+
+	let { preprocessed }: Props = $props();
 
 	// $: args =
 	// 	'_metadata' in flowStatus && 'original_args' in flowStatus['_metadata']
 	// 		? flowStatus['_metadata']['original_args']
 	// 		: undefined
 
-	$: hasPreprocessedArgs = preprocessed === true
+	let hasPreprocessedArgs = $derived(preprocessed === true)
 
 	// $: argsStr = args !== undefined ? JSON.stringify(args, null, 4) : undefined
 
diff --git a/frontend/src/lib/components/runs/QueuePopover.svelte b/frontend/src/lib/components/runs/QueuePopover.svelte
index bede71a09a..936fae1041 100644
--- a/frontend/src/lib/components/runs/QueuePopover.svelte
+++ b/frontend/src/lib/components/runs/QueuePopover.svelte
@@ -5,8 +5,12 @@
 	import Skeleton from '../common/skeleton/Skeleton.svelte'
 	import { displayDate } from '$lib/utils'
 
-	let jobs: QueuedJob[] | undefined = undefined
-	export let allWorkspaces: boolean = false
+	let jobs: QueuedJob[] | undefined = $state(undefined)
+	interface Props {
+		allWorkspaces?: boolean;
+	}
+
+	let { allWorkspaces = false }: Props = $props();
 
 	getQueuedJobs()
 	async function getQueuedJobs() {
diff --git a/frontend/src/lib/components/schema/AddProperty.svelte b/frontend/src/lib/components/schema/AddProperty.svelte
index f5a7b2b8b7..81270b6fd8 100644
--- a/frontend/src/lib/components/schema/AddProperty.svelte
+++ b/frontend/src/lib/components/schema/AddProperty.svelte
@@ -5,7 +5,11 @@
 	import SimpleEditor from '../SimpleEditor.svelte'
 	import AddPropertyForm from './AddPropertyForm.svelte'
 
-	export let schema: Schema | any = emptySchema()
+	interface Props {
+		schema?: Schema | any;
+	}
+
+	let { schema = $bindable(emptySchema()) }: Props = $props();
 
 	export const DEFAULT_PROPERTY: ModalSchemaProperty = {
 		selectedType: 'string',
diff --git a/frontend/src/lib/components/schema/AddPropertyForm.svelte b/frontend/src/lib/components/schema/AddPropertyForm.svelte
index 7e745a706b..a9c1d7f27f 100644
--- a/frontend/src/lib/components/schema/AddPropertyForm.svelte
+++ b/frontend/src/lib/components/schema/AddPropertyForm.svelte
@@ -4,7 +4,7 @@
 	import { Plus } from 'lucide-svelte'
 	import TextInput from '../text_input/TextInput.svelte'
 
-	let name: string = ''
+	let name: string = $state('')
 
 	const dispatch = createEventDispatcher()
 
diff --git a/frontend/src/lib/components/schema/RunningJobSchemaPicker.svelte b/frontend/src/lib/components/schema/RunningJobSchemaPicker.svelte
index 35256d0259..3073e0ea7b 100644
--- a/frontend/src/lib/components/schema/RunningJobSchemaPicker.svelte
+++ b/frontend/src/lib/components/schema/RunningJobSchemaPicker.svelte
@@ -9,13 +9,22 @@
 	import { Cell, Row } from '$lib/components/table'
 	import { twMerge } from 'tailwind-merge'
 
-	export let job: any
-	export let selected = false
-	export let payloadData: any | undefined = undefined
 	const dispatch = createEventDispatcher()
-	export let hovering = false
+	interface Props {
+		job: any;
+		selected?: boolean;
+		payloadData?: any | undefined;
+		hovering?: boolean;
+	}
 
-	let loadingArgs = true
+	let {
+		job,
+		selected = false,
+		payloadData = $bindable(undefined),
+		hovering = $bindable(false)
+	}: Props = $props();
+
+	let loadingArgs = $state(true)
 	loadArgsFromRunningJob(job.id)
 
 	async function loadArgsFromRunningJob(id: string | undefined) {
@@ -48,29 +57,33 @@
 		on:hover={(e) => (hovering = e.detail ? true : false)}
 	>
 		<SchemaPickerRow {payloadData} date={job.created_at} {hovering}>
-			<svelte:fragment slot="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>
-			</svelte:fragment>
-			<svelte:fragment slot="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>
-			</svelte:fragment>
+			{#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}
+			{#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}
 		</SchemaPickerRow>
 	</Row>
 {/if}
diff --git a/frontend/src/lib/components/schema/SchemaPicker.svelte b/frontend/src/lib/components/schema/SchemaPicker.svelte
index 41c8a86089..25aa800304 100644
--- a/frontend/src/lib/components/schema/SchemaPicker.svelte
+++ b/frontend/src/lib/components/schema/SchemaPicker.svelte
@@ -5,13 +5,25 @@
 	import ObjectViewer from '$lib/components/propertyPicker/ObjectViewer.svelte'
 	import { twMerge } from 'tailwind-merge'
 
-	export let payloadData: Record<string, any>
-	export let date: string | undefined
-	export let selected = false
+	interface Props {
+		payloadData: Record<string, any>;
+		date: string | undefined;
+		selected?: boolean;
+		start?: import('svelte').Snippet;
+		extra?: import('svelte').Snippet;
+	}
+
+	let {
+		payloadData,
+		date,
+		selected = false,
+		start,
+		extra
+	}: Props = $props();
 
 	const dispatch = createEventDispatcher()
 
-	let hovering = false
+	let hovering = $state(false)
 	function formatDate(dateString: string | undefined): string {
 		if (!dateString) return ''
 		const date = new Date(dateString)
@@ -31,18 +43,18 @@
 		hovering ? 'bg-surface-hover' : '',
 		selected ? 'bg-surface-selected' : ''
 	)}
-	on:click={() => {
+	onclick={() => {
 		dispatch('select')
 	}}
-	on:mouseenter={() => {
+	onmouseenter={() => {
 		hovering = true
 	}}
-	on:mouseleave={() => {
+	onmouseleave={() => {
 		hovering = false
 	}}
 >
 	<div class="flex flex-row gap-2">
-		<slot name="start" />
+		{@render start?.()}
 
 		<div
 			class="text-2xs font-normal text-left p-2 rounded-md overflow-auto grow-0 text-ellipsis whitespace-nowrap scrollbar-none"
@@ -52,34 +64,36 @@
 		</div>
 
 		<CustomPopover class="grow min-w-12 ">
-			<!-- svelte-ignore a11y-click-events-have-key-events -->
-			<!-- svelte-ignore a11y-no-static-element-interactions -->
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<div
 				class={twMerge(
 					'text-xs border font-normal text-left p-1 rounded-md overflow-auto grow whitespace-nowrap scrollbar-none',
 					hovering && 'border-surface'
 				)}
-				on:click={() => {
+				onclick={() => {
 					if (selected) {
 						copyToClipboard(JSON.stringify(payloadData))
 					}
 				}}
-				on:mouseenter={() => {
+				onmouseenter={() => {
 					hovering = true
 				}}
-				on:mouseleave={() => {
+				onmouseleave={() => {
 					hovering = false
 				}}
 			>
 				{JSON.stringify(payloadData)}
 			</div>
-			<svelte:fragment slot="overlay">
-				<ObjectViewer json={payloadData} />
-			</svelte:fragment>
+			{#snippet overlay()}
+					
+					<ObjectViewer json={payloadData} />
+				
+					{/snippet}
 		</CustomPopover>
 
 		{#if hovering}
-			<slot name="extra" />
+			{@render extra?.()}
 		{/if}
 	</div>
 </button>
diff --git a/frontend/src/lib/components/select/SelectDropdown.svelte b/frontend/src/lib/components/select/SelectDropdown.svelte
index 4a620873cd..65179a50df 100644
--- a/frontend/src/lib/components/select/SelectDropdown.svelte
+++ b/frontend/src/lib/components/select/SelectDropdown.svelte
@@ -128,7 +128,7 @@
 </script>
 
 <svelte:window
-	on:keydown={(e) => {
+	onkeydown={(e) => {
 		if (!uiState.visible || !processedItems?.length) return
 		if (e.key === 'ArrowUp' && keyArrowPos !== undefined && processedItems.length > 0) {
 			keyArrowPos = keyArrowPos <= 0 ? undefined : keyArrowPos - 1
diff --git a/frontend/src/lib/components/settings/ChangeWorkspaceColor.svelte b/frontend/src/lib/components/settings/ChangeWorkspaceColor.svelte
index c3fbf9644d..9befb0e9c0 100644
--- a/frontend/src/lib/components/settings/ChangeWorkspaceColor.svelte
+++ b/frontend/src/lib/components/settings/ChangeWorkspaceColor.svelte
@@ -100,14 +100,16 @@
 		</label>
 	</div>
 
-	<svelte:fragment slot="actions">
-		<Button
-			size="sm"
-			on:click={() => {
-				changeWorkspaceColor()
-			}}
-		>
-			Save
-		</Button>
-	</svelte:fragment>
+	{#snippet actions()}
+	
+			<Button
+				size="sm"
+				on:click={() => {
+					changeWorkspaceColor()
+				}}
+			>
+				Save
+			</Button>
+		
+	{/snippet}
 </Modal>
diff --git a/frontend/src/lib/components/settings/ChangeWorkspaceId.svelte b/frontend/src/lib/components/settings/ChangeWorkspaceId.svelte
index 52333e7036..26965a8bb7 100644
--- a/frontend/src/lib/components/settings/ChangeWorkspaceId.svelte
+++ b/frontend/src/lib/components/settings/ChangeWorkspaceId.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { workspaceStore, superadmin } from '$lib/stores'
 	import Alert from '../common/alert/Alert.svelte'
 	import Button from '../common/button/Button.svelte'
@@ -8,14 +10,12 @@
 	import { Pen } from 'lucide-svelte'
 	import { isCloudHosted } from '$lib/cloud'
 
-	let newName = ''
-	let newId = ''
-	let checking = false
-	let errorId = ''
+	let newName = $state('')
+	let newId = $state('')
+	let checking = $state(false)
+	let errorId = $state('')
 
-	$: newId = newName.toLowerCase().replace(/\s/gi, '-')
 
-	$: validateName(newId)
 
 	async function validateName(id: string): Promise<void> {
 		checking = true
@@ -30,7 +30,7 @@
 		checking = false
 	}
 
-	let loading = false
+	let loading = $state(false)
 	async function renameWorkspace() {
 		try {
 			loading = true
@@ -53,7 +53,17 @@
 		}
 	}
 
-	export let open = false
+	interface Props {
+		open?: boolean;
+	}
+
+	let { open = $bindable(false) }: Props = $props();
+	run(() => {
+		newId = newName.toLowerCase().replace(/\s/gi, '-')
+	});
+	run(() => {
+		validateName(newId)
+	});
 </script>
 
 <div class="flex flex-col gap-1">
@@ -100,16 +110,18 @@
 		</label>
 	</div>
 
-	<svelte:fragment slot="actions">
-		<Button
-			size="sm"
-			disabled={checking || errorId.length > 0 || !newName || !newId}
-			{loading}
-			on:click={() => {
-				renameWorkspace()
-			}}
-		>
-			Save
-		</Button>
-	</svelte:fragment>
+	{#snippet actions()}
+	
+			<Button
+				size="sm"
+				disabled={checking || errorId.length > 0 || !newName || !newId}
+				{loading}
+				on:click={() => {
+					renameWorkspace()
+				}}
+			>
+				Save
+			</Button>
+		
+	{/snippet}
 </Modal>
diff --git a/frontend/src/lib/components/settings/ChangeWorkspaceName.svelte b/frontend/src/lib/components/settings/ChangeWorkspaceName.svelte
index 15dc554623..ddad45f11c 100644
--- a/frontend/src/lib/components/settings/ChangeWorkspaceName.svelte
+++ b/frontend/src/lib/components/settings/ChangeWorkspaceName.svelte
@@ -71,15 +71,17 @@
 		</label>
 	</div>
 
-	<svelte:fragment slot="actions">
-		<Button
-			size="sm"
-			disabled={!newName}
-			on:click={() => {
-				renameWorkspace()
-			}}
-		>
-			Save
-		</Button>
-	</svelte:fragment>
+	{#snippet actions()}
+	
+			<Button
+				size="sm"
+				disabled={!newName}
+				on:click={() => {
+					renameWorkspace()
+				}}
+			>
+				Save
+			</Button>
+		
+	{/snippet}
 </Modal>
diff --git a/frontend/src/lib/components/settings/PremiumInfo.svelte b/frontend/src/lib/components/settings/PremiumInfo.svelte
index 8683ca2356..33047d5802 100644
--- a/frontend/src/lib/components/settings/PremiumInfo.svelte
+++ b/frontend/src/lib/components/settings/PremiumInfo.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { base } from '$lib/base'
 	import { capitalize, pluralize, sendUserToast } from '$lib/utils'
 	import DataTable from '$lib/components/table/DataTable.svelte'
@@ -14,8 +16,12 @@
 	import Modal from '../common/modal/Modal.svelte'
 	import { slide } from 'svelte/transition'
 
-	export let plan: string | undefined
-	export let customer_id: string | undefined
+	interface Props {
+		plan: string | undefined;
+		customer_id: string | undefined;
+	}
+
+	let { plan, customer_id }: Props = $props();
 
 	let users: User[] | undefined = undefined
 
@@ -33,7 +39,7 @@
 				is_past_due: boolean
 				max_tolerated_executions?: number
 		  }
-		| undefined = undefined
+		| undefined = $state(undefined)
 	const plans = {
 		Free: [
 			'Users use their individual global free-tier quotas when doing executions in this workspace',
@@ -55,13 +61,6 @@
 		]
 	}
 
-	$: {
-		if ($workspaceStore) {
-			loadPremiumInfo()
-			listUsers()
-			getThresholdAlert()
-		}
-	}
 
 	async function listUsers(): Promise<void> {
 		users = await UserService.listUsers({ workspace: $workspaceStore! })
@@ -91,10 +90,10 @@
 				threshold_alert_amount?: number
 				last_alert_sent?: string
 		  }
-		| undefined = undefined
-	let newThresholdAlertAmount: number | undefined = undefined
+		| undefined = $state(undefined)
+	let newThresholdAlertAmount: number | undefined = $state(undefined)
 
-	let thresholdAlertOpen = false
+	let thresholdAlertOpen = $state(false)
 	async function getThresholdAlert() {
 		thresholdAlert = await WorkspaceService.getThresholdAlert({ workspace: $workspaceStore! })
 	}
@@ -112,19 +111,28 @@
 		}
 	}
 
-	let estimatedDevs = 1
-	let estimatedOps = 0
+	let estimatedDevs = $state(1)
+	let estimatedOps = $state(0)
 
-	$: estimatedSeats = estimatedDevs + Math.ceil(estimatedOps / 2)
 
-	let estimatedExecs = 1
+	let estimatedExecs = $state(1)
 
 	function updateExecs() {
 		if (estimatedExecs < estimatedSeats) {
 			estimatedExecs = estimatedSeats
 		}
 	}
-	$: estimatedSeats && updateExecs()
+	run(() => {
+		if ($workspaceStore) {
+			loadPremiumInfo()
+			listUsers()
+			getThresholdAlert()
+		}
+	});
+	let estimatedSeats = $derived(estimatedDevs + Math.ceil(estimatedOps / 2))
+	run(() => {
+		estimatedSeats && updateExecs()
+	});
 </script>
 
 <Modal bind:open={thresholdAlertOpen} title="Threshold alert">
@@ -135,17 +143,19 @@
 		</label>
 	</div>
 
-	<svelte:fragment slot="actions">
-		<Button
-			size="sm"
-			on:click={() => {
-				setThresholdAlert()
-				thresholdAlertOpen = false
-			}}
-		>
-			Save
-		</Button>
-	</svelte:fragment>
+	{#snippet actions()}
+	
+			<Button
+				size="sm"
+				on:click={() => {
+					setThresholdAlert()
+					thresholdAlertOpen = false
+				}}
+			>
+				Save
+			</Button>
+		
+	{/snippet}
 </Modal>
 
 <div class="flex flex-col gap-4 mt-8">
@@ -372,7 +382,7 @@
 					{#if premiumInfo?.premium && plan === 'team'}
 						<button
 							class="text-xs text-blue-500 underline"
-							on:click={() => {
+							onclick={() => {
 								newThresholdAlertAmount = (estimatedSeats + (estimatedExecs - estimatedSeats)) * 10
 								thresholdAlertOpen = true
 							}}
diff --git a/frontend/src/lib/components/settings/TokensTable.svelte b/frontend/src/lib/components/settings/TokensTable.svelte
index 8076b9a17a..13df46bb76 100644
--- a/frontend/src/lib/components/settings/TokensTable.svelte
+++ b/frontend/src/lib/components/settings/TokensTable.svelte
@@ -81,7 +81,8 @@
 	<div class="overflow-auto grow min-h-64 max-h-2/3">
 		<TableCustom>
 			<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
-			<tr slot="header-row">
+			<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
+	<tr slot="header-row">
 				<th>Prefix</th>
 				<th>Label</th>
 				<th>Expiration</th>
diff --git a/frontend/src/lib/components/sidebar/CriticalAlertModal.svelte b/frontend/src/lib/components/sidebar/CriticalAlertModal.svelte
index 948381f76c..641328fc5b 100644
--- a/frontend/src/lib/components/sidebar/CriticalAlertModal.svelte
+++ b/frontend/src/lib/components/sidebar/CriticalAlertModal.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy'
+
 	import { onMount, onDestroy } from 'svelte'
 	import CriticalAlertModalInner from './CriticalAlertModalInner.svelte'
 	import { SettingService, type CriticalAlert } from '$lib/gen'
@@ -19,16 +21,20 @@
 	import { base } from '$lib/base'
 	import Notification from '$lib/components/common/alert/Notification.svelte'
 
-	export let open: boolean = false
-	export let numUnacknowledgedCriticalAlerts: number = 0
-	export let muteSettings
-	let workspaceContext = false
-	let childRef
-
-	$: {
-		setupApiFunctions(workspaceContext)
+	interface Props {
+		open?: boolean
+		numUnacknowledgedCriticalAlerts?: number
+		muteSettings: any
 	}
 
+	let {
+		open = $bindable(false),
+		numUnacknowledgedCriticalAlerts = $bindable(0),
+		muteSettings = $bindable()
+	}: Props = $props()
+	let workspaceContext = $state(false)
+	let childRef: any = $state() // TODO type
+
 	function setupApiFunctions(_ctx?) {
 		getCriticalAlerts = withSuperadminLogic(
 			SettingService.getCriticalAlerts,
@@ -46,9 +52,6 @@
 		)
 	}
 
-	$: isCriticalAlertsUIOpen.set(open)
-	$: if ($isCriticalAlertsUIOpen) open = $isCriticalAlertsUIOpen
-
 	let checkForNewAlertsInterval: ReturnType<typeof setInterval>
 	let checkingForNewAlerts = false
 
@@ -65,9 +68,9 @@
 		}
 	}
 
-	let getCriticalAlerts
-	let acknowledgeCriticalAlert
-	let acknowledgeAllCriticalAlerts
+	let getCriticalAlerts = $state()
+	let acknowledgeCriticalAlert: any = $state() // TODO type
+	let acknowledgeAllCriticalAlerts = $state()
 
 	setupApiFunctions()
 
@@ -169,12 +172,23 @@
 		await acknowledgeCriticalAlert({ id })
 		updateHasUnacknowledgedCriticalAlerts()
 	}
+	run(() => {
+		setupApiFunctions(workspaceContext)
+	})
+	run(() => {
+		if ($isCriticalAlertsUIOpen) open = $isCriticalAlertsUIOpen
+	})
+	run(() => {
+		isCriticalAlertsUIOpen.set(open)
+	})
 </script>
 
 <Modal2 bind:isOpen={open} title="Critical Alerts" target="#content" fixedSize="lg">
+	<!-- @migration-task: migrate this slot by hand, `header-left` is an invalid identifier -->
 	<svelte:fragment slot="header-left">
 		<Notification notificationCount={numUnacknowledgedCriticalAlerts} notificationLimit={9999} />
 	</svelte:fragment>
+	<!-- @migration-task: migrate this slot by hand, `header-right` is an invalid identifier -->
 	<svelte:fragment slot="header-right">
 		<List horizontal>
 			{#if $superadmin || $userStore?.is_admin}
@@ -183,7 +197,7 @@
 					portal="#mute-settings-button"
 					contentClasses="p-4"
 				>
-					<svelte:fragment slot="trigger">
+					{#snippet trigger()}
 						<div id="mute-settings-button">
 							<Button variant="default" nonCaptureEvent>
 								{#if muteSettings.global || muteSettings.workspace}
@@ -193,8 +207,8 @@
 								{/if}
 							</Button>
 						</div>
-					</svelte:fragment>
-					<svelte:fragment slot="content">
+					{/snippet}
+					{#snippet content()}
 						<List justify="start">
 							<div class="w-full">
 								{#if $superadmin}
@@ -220,7 +234,7 @@
 								/>
 							</div>
 						</List>
-					</svelte:fragment>
+					{/snippet}
 				</Popover>
 			{/if}
 
@@ -230,14 +244,14 @@
 					portal="#settings-button"
 					contentClasses="p-4"
 				>
-					<svelte:fragment slot="trigger">
+					{#snippet trigger()}
 						<div id="settings-button">
 							<Button variant="default" nonCaptureEvent>
 								<Settings size="16" />
 							</Button>
 						</div>
-					</svelte:fragment>
-					<svelte:fragment slot="content">
+					{/snippet}
+					{#snippet content()}
 						<List justify="start" gap="none">
 							<div class="w-full">
 								<Button
@@ -265,7 +279,7 @@
 								</Button>
 							</div>
 						</List>
-					</svelte:fragment>
+					{/snippet}
 				</Popover>
 			{:else}
 				<Button
diff --git a/frontend/src/lib/components/sidebar/CriticalAlertModalInner.svelte b/frontend/src/lib/components/sidebar/CriticalAlertModalInner.svelte
index b0ec41bc9e..ac123e6013 100644
--- a/frontend/src/lib/components/sidebar/CriticalAlertModalInner.svelte
+++ b/frontend/src/lib/components/sidebar/CriticalAlertModalInner.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run, preventDefault } from 'svelte/legacy'
+
 	import Toggle from '$lib/components/Toggle.svelte'
 	import { SettingService } from '$lib/gen'
 	import type { CriticalAlert } from '$lib/gen'
@@ -10,30 +12,34 @@
 	import Alert from '$lib/components/common/alert/Alert.svelte'
 	import { sendUserToast } from '$lib/toast'
 
-	export let updateHasUnacknowledgedCriticalAlerts
-	export let getCriticalAlerts
-	export let acknowledgeCriticalAlert
-	export let acknowledgeAllCriticalAlerts
-	export let numUnacknowledgedCriticalAlerts
+	let filteredAlerts: CriticalAlert[] = $state([])
 
-	let filteredAlerts: CriticalAlert[] = []
-
-	let isRefreshing = false
-	let hasCriticalAlertChannels = true
-
-	$: loading = isRefreshing
-
-	$: if (numUnacknowledgedCriticalAlerts) {
-		refreshAlerts()
-	}
+	let isRefreshing = $state(false)
+	let hasCriticalAlertChannels = $state(true)
 
 	// Pagination
-	let page = 1
+	let page = $state(1)
 	let pageSize = 10
-	let hasMore = true
+	let hasMore = $state(true)
 
-	let hideAcknowledged = false
-	export let workspaceContext = false
+	let hideAcknowledged = $state(false)
+	interface Props {
+		updateHasUnacknowledgedCriticalAlerts: any
+		getCriticalAlerts: any
+		acknowledgeCriticalAlert: any
+		acknowledgeAllCriticalAlerts: any
+		numUnacknowledgedCriticalAlerts: any
+		workspaceContext?: boolean
+	}
+
+	let {
+		updateHasUnacknowledgedCriticalAlerts,
+		getCriticalAlerts,
+		acknowledgeCriticalAlert,
+		acknowledgeAllCriticalAlerts,
+		numUnacknowledgedCriticalAlerts,
+		workspaceContext = $bindable(false)
+	}: Props = $props()
 
 	async function acknowledgeAll() {
 		await acknowledgeAllCriticalAlerts()
@@ -108,10 +114,18 @@
 		getAlerts(true)
 	}
 
+	let totalNumberOfAlerts = $state(0)
+	let loading = $derived(isRefreshing)
+	run(() => {
+		if (numUnacknowledgedCriticalAlerts) {
+			refreshAlerts()
+		}
+	})
 	// Update filter change handlers
-	$: (hideAcknowledged, workspaceContext, onFiltersChange())
-
-	let totalNumberOfAlerts = 0
+	run(() => {
+		;[hideAcknowledged, workspaceContext]
+		onFiltersChange()
+	})
 </script>
 
 <List gap="sm">
@@ -119,7 +133,7 @@
 		<div class="w-full">
 			<Alert title="No critical alert channels are set up" type="warning" size="xs">
 				Go to the
-				<a href="/#superadmin-settings" on:click|preventDefault={goToCoreTab}>Instance settings</a>
+				<a href="/#superadmin-settings" onclick={preventDefault(goToCoreTab)}>Instance settings</a>
 				page to configure critical alert channels.
 			</Alert>
 		</div>
diff --git a/frontend/src/lib/components/sidebar/CriticalAlertTable.svelte b/frontend/src/lib/components/sidebar/CriticalAlertTable.svelte
index edbb3329bd..6a60e00e07 100644
--- a/frontend/src/lib/components/sidebar/CriticalAlertTable.svelte
+++ b/frontend/src/lib/components/sidebar/CriticalAlertTable.svelte
@@ -10,19 +10,34 @@
 	import { Skeleton } from '../common'
 	import Linkify from './Linkify.svelte'
 
-	export let alerts: any[]
-	export let hideAcknowledged = false
-	export let goToNextPage: () => void
-	export let goToPreviousPage: () => void
-	export let acknowledgeAlert: (id: number) => void
-	export let acknowledgeAll: () => void
-	export let numUnacknowledgedCriticalAlerts: number
-	export let page = 1
-	export let hasMore = true
-	export let pageSize = 0
+	interface Props {
+		alerts: any[];
+		hideAcknowledged?: boolean;
+		goToNextPage: () => void;
+		goToPreviousPage: () => void;
+		acknowledgeAlert: (id: number) => void;
+		acknowledgeAll: () => void;
+		numUnacknowledgedCriticalAlerts: number;
+		page?: number;
+		hasMore?: boolean;
+		pageSize?: number;
+	}
 
-	let headerHeight = 0
-	let contentHeight = 0
+	let {
+		alerts,
+		hideAcknowledged = false,
+		goToNextPage,
+		goToPreviousPage,
+		acknowledgeAlert,
+		acknowledgeAll,
+		numUnacknowledgedCriticalAlerts,
+		page = $bindable(1),
+		hasMore = true,
+		pageSize = 0
+	}: Props = $props();
+
+	let headerHeight = $state(0)
+	let contentHeight = $state(0)
 
 	function formatDate(dateString: string | undefined): string {
 		if (!dateString) return ''
@@ -37,7 +52,7 @@
 		}).format(date)
 	}
 
-	$: availableHeight = (contentHeight - headerHeight - pageSize - 1) / pageSize
+	let availableHeight = $derived((contentHeight - headerHeight - pageSize - 1) / pageSize)
 </script>
 
 <div class="relative grow min-h-0 w-full">
diff --git a/frontend/src/lib/components/sidebar/DarkModeToggle.svelte b/frontend/src/lib/components/sidebar/DarkModeToggle.svelte
index 54a738350a..67543667ca 100644
--- a/frontend/src/lib/components/sidebar/DarkModeToggle.svelte
+++ b/frontend/src/lib/components/sidebar/DarkModeToggle.svelte
@@ -4,8 +4,12 @@
 
 	import DarkModeObserver from '../DarkModeObserver.svelte'
 
-	export let darkMode: boolean = document.documentElement.classList.contains('dark')
-	export let forcedDarkMode: boolean = true
+	interface Props {
+		darkMode?: boolean;
+		forcedDarkMode?: boolean;
+	}
+
+	let { darkMode = $bindable(document.documentElement.classList.contains('dark')), forcedDarkMode = true }: Props = $props();
 
 	export function toggle() {
 		if (!document.documentElement.classList.contains('dark')) {
@@ -23,7 +27,7 @@
 		'text-2xs text-white m-1 p-2 rounded-lg flex flex-row gap-2 justify-center hover:bg-gray-600',
 		forcedDarkMode ? 'text-white hover:bg-gray-600' : 'text-primary hover:bg-surface-hover'
 	)}
-	on:click={toggle}
+	onclick={toggle}
 >
 	{#if darkMode}
 		<Sun class="w-4 h-4" />
diff --git a/frontend/src/lib/components/sidebar/MultiplayerMenu.svelte b/frontend/src/lib/components/sidebar/MultiplayerMenu.svelte
index 0c0297c5bb..5bbf8d2854 100644
--- a/frontend/src/lib/components/sidebar/MultiplayerMenu.svelte
+++ b/frontend/src/lib/components/sidebar/MultiplayerMenu.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { enterpriseLicense, userStore, workspaceStore, awarenessStore } from '$lib/stores'
 	import { BROWSER } from 'esm-env'
 
@@ -10,10 +12,10 @@
 
 	const wsProtocol = BROWSER && window.location.protocol == 'https:' ? 'wss' : 'ws'
 
-	let awareness: Awareness | undefined = undefined
+	let awareness: Awareness | undefined = $state(undefined)
 	let wsProvider: WebsocketProvider | undefined = undefined
 
-	let connected = false
+	let connected = $state(false)
 	function connectWorkspace(workspace: string) {
 		const ydoc = new Y.Doc()
 		wsProvider = new WebsocketProvider(
@@ -45,11 +47,15 @@
 			setPeers()
 		})
 	}
-	$: awareness?.setLocalState({
-		name: $userStore?.username,
-		url: $page.url.pathname
-	})
-	$: $enterpriseLicense && $workspaceStore && connectWorkspace($workspaceStore)
+	run(() => {
+		awareness?.setLocalState({
+			name: $userStore?.username,
+			url: $page.url.pathname
+		})
+	});
+	run(() => {
+		$enterpriseLicense && $workspaceStore && connectWorkspace($workspaceStore)
+	});
 
 	function showActivity(url: string) {
 		if (url.startsWith('/scripts/add')) {
diff --git a/frontend/src/lib/components/sidebar/SideBarNotification.svelte b/frontend/src/lib/components/sidebar/SideBarNotification.svelte
index fc32f1723e..33ccb39dcb 100644
--- a/frontend/src/lib/components/sidebar/SideBarNotification.svelte
+++ b/frontend/src/lib/components/sidebar/SideBarNotification.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
 	import Notification from '$lib/components/common/alert/Notification.svelte'
 
-	export let notificationCount = 0
-	export let small: boolean = false
+	interface Props {
+		notificationCount?: number;
+		small?: boolean;
+	}
+
+	let { notificationCount = 0, small = false }: Props = $props();
 </script>
 
 {#if !small}
diff --git a/frontend/src/lib/components/sidebar/SidebarContent.svelte b/frontend/src/lib/components/sidebar/SidebarContent.svelte
index 26b2bf8a74..875cde12c4 100644
--- a/frontend/src/lib/components/sidebar/SidebarContent.svelte
+++ b/frontend/src/lib/components/sidebar/SidebarContent.svelte
@@ -49,7 +49,7 @@
 	import { onMount } from 'svelte'
 	import { base } from '$lib/base'
 	import { type Changelog, changelogs } from './changelogs'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import SideBarNotification from './SideBarNotification.svelte'
 	import KafkaIcon from '../icons/KafkaIcon.svelte'
 	import NatsIcon from '../icons/NatsIcon.svelte'
@@ -297,12 +297,12 @@
 			aiDescription: 'Button to navigate to schedules'
 		},
 		...defaultExtraTriggerLinks.filter(
-			(link) => $usedTriggerKinds.includes(link.kind) || $page.url.pathname.includes(link.href)
+			(link) => $usedTriggerKinds.includes(link.kind) || page.url.pathname.includes(link.href)
 		)
 	])
 	let extraTriggerLinks = $derived(
 		defaultExtraTriggerLinks.filter((link) => {
-			return !$page.url.pathname.includes(link.href) && !$usedTriggerKinds.includes(link.kind)
+			return !page.url.pathname.includes(link.href) && !$usedTriggerKinds.includes(link.kind)
 		})
 	)
 	let secondaryMenuLinks = $derived([
diff --git a/frontend/src/lib/components/sidebar/WorkspaceMenu.svelte b/frontend/src/lib/components/sidebar/WorkspaceMenu.svelte
index 7b1503e027..8e884bfbd6 100644
--- a/frontend/src/lib/components/sidebar/WorkspaceMenu.svelte
+++ b/frontend/src/lib/components/sidebar/WorkspaceMenu.svelte
@@ -14,7 +14,7 @@
 	import { Menu, MenuItem } from '$lib/components/meltComponents'
 	import { goto } from '$lib/navigation'
 	import { base } from '$lib/base'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import { switchWorkspace } from '$lib/storeUtils'
 	import MultiplayerMenu from './MultiplayerMenu.svelte'
 	import { enterpriseLicense } from '$lib/stores'
@@ -53,12 +53,12 @@
 			'/flows/get/',
 			'/apps/get/'
 		]
-		const isOnEditPage = editPages.some((editPage) => $page.route.id?.includes(editPage) ?? false)
+		const isOnEditPage = editPages.some((editPage) => page.route.id?.includes(editPage) ?? false)
 
 		if (!isOnEditPage) {
 			switchWorkspace(id)
-			if ($page.url.searchParams.get('workspace')) {
-				$page.url.searchParams.set('workspace', id)
+			if (page.url.searchParams.get('workspace')) {
+				page.url.searchParams.set('workspace', id)
 			}
 		} else {
 			switchWorkspace(id)
diff --git a/frontend/src/lib/components/splitPanes/SplitPanesWrapper.svelte b/frontend/src/lib/components/splitPanes/SplitPanesWrapper.svelte
index 0a5d23bb15..ab4189c68d 100644
--- a/frontend/src/lib/components/splitPanes/SplitPanesWrapper.svelte
+++ b/frontend/src/lib/components/splitPanes/SplitPanesWrapper.svelte
@@ -1,3 +1,4 @@
+<!-- @migration-task Error while migrating Svelte code: Can't migrate code with afterUpdate. Please migrate by hand. -->
 <script lang="ts">
 	import { afterUpdate } from 'svelte'
 
diff --git a/frontend/src/lib/components/table/DownloadCsv.svelte b/frontend/src/lib/components/table/DownloadCsv.svelte
index 5069842afe..051ab2327f 100644
--- a/frontend/src/lib/components/table/DownloadCsv.svelte
+++ b/frontend/src/lib/components/table/DownloadCsv.svelte
@@ -3,8 +3,12 @@
 	import { Button } from '../common'
 	import { sendUserToast } from '$lib/toast'
 
-	export let getContent: () => string
-	export let customText: string | undefined = undefined
+	interface Props {
+		getContent: () => string;
+		customText?: string | undefined;
+	}
+
+	let { getContent, customText = undefined }: Props = $props();
 </script>
 
 <Button
diff --git a/frontend/src/lib/components/table/Head.svelte b/frontend/src/lib/components/table/Head.svelte
index 5d1dc1f922..d6aa443a58 100644
--- a/frontend/src/lib/components/table/Head.svelte
+++ b/frontend/src/lib/components/table/Head.svelte
@@ -1,6 +1,15 @@
+<script lang="ts">
+	interface Props {
+		children?: import('svelte').Snippet;
+		headerAction?: import('svelte').Snippet;
+	}
+
+	let { children, headerAction }: Props = $props();
+</script>
+
 <thead class="bg-surface-secondary sticky top-0 z-10 border-b">
-	<slot />
+	{@render children?.()}
 	<tr class="absolute top-2 right-2">
-		<slot name="headerAction" />
+		{@render headerAction?.()}
 	</tr>
 </thead>
diff --git a/frontend/src/lib/components/table/Row.svelte b/frontend/src/lib/components/table/Row.svelte
index 510e794a55..d8b5e86a57 100644
--- a/frontend/src/lib/components/table/Row.svelte
+++ b/frontend/src/lib/components/table/Row.svelte
@@ -1,3 +1,4 @@
+<!-- @migration-task Error while migrating Svelte code: $$props is used together with named props in a way that cannot be automatically migrated. -->
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte'
 	import { twMerge } from 'tailwind-merge'
diff --git a/frontend/src/lib/components/triggers/CaptureIcon.svelte b/frontend/src/lib/components/triggers/CaptureIcon.svelte
index 1b110992f2..db37ce41b2 100644
--- a/frontend/src/lib/components/triggers/CaptureIcon.svelte
+++ b/frontend/src/lib/components/triggers/CaptureIcon.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
 	import { ScanIcon } from 'lucide-svelte'
 
-	export let size = 14
-	export let variant: 'redDot' | undefined = undefined
+	interface Props {
+		size?: number;
+		variant?: 'redDot' | undefined;
+	}
+
+	let { size = 14, variant = undefined }: Props = $props();
 </script>
 
 <div class="relative">
diff --git a/frontend/src/lib/components/triggers/TestTriggerConnection.svelte b/frontend/src/lib/components/triggers/TestTriggerConnection.svelte
index 8561fae505..92cc39fa3a 100644
--- a/frontend/src/lib/components/triggers/TestTriggerConnection.svelte
+++ b/frontend/src/lib/components/triggers/TestTriggerConnection.svelte
@@ -13,10 +13,19 @@
 	import { sendUserToast } from '$lib/toast'
 	import Button from '../common/button/Button.svelte'
 
-	export let kind: 'websocket' | 'nats' | 'kafka' | 'postgres' | 'sqs' | 'mqtt' | 'gcp'
-	export let args: Record<string, any>
-	export let noButton = false
-	export let testLoading: boolean = false
+	interface Props {
+		kind: 'websocket' | 'nats' | 'kafka' | 'postgres' | 'sqs' | 'mqtt' | 'gcp';
+		args: Record<string, any>;
+		noButton?: boolean;
+		testLoading?: boolean;
+	}
+
+	let {
+		kind,
+		args,
+		noButton = false,
+		testLoading = $bindable(false)
+	}: Props = $props();
 
 	const kindToName: { [key: string]: string } = {
 		websocket: 'WebSocket',
diff --git a/frontend/src/lib/components/triggers/TriggerEditorToolbar.svelte b/frontend/src/lib/components/triggers/TriggerEditorToolbar.svelte
index 3540209ad5..4f88f85809 100644
--- a/frontend/src/lib/components/triggers/TriggerEditorToolbar.svelte
+++ b/frontend/src/lib/components/triggers/TriggerEditorToolbar.svelte
@@ -113,15 +113,17 @@
 				>
 					{trigger?.isDraft ? 'Deploy' : 'Update'}
 				</Button>
-				<span slot="text">
-					{#if !isDeployed}
-						Deploy the runnable to enable trigger creation
-					{:else if cloudDisabled}
-						This trigger is disabled in the multi-tenant cloud
-					{:else}
-						Enter a valid config to {trigger?.isDraft ? 'deploy' : 'update'} the trigger
-					{/if}
-				</span>
+				{#snippet text()}
+								<span >
+						{#if !isDeployed}
+							Deploy the runnable to enable trigger creation
+						{:else if cloudDisabled}
+							This trigger is disabled in the multi-tenant cloud
+						{:else}
+							Enter a valid config to {trigger?.isDraft ? 'deploy' : 'update'} the trigger
+						{/if}
+					</span>
+							{/snippet}
 			</Tooltip>
 		{/if}
 	</div>
diff --git a/frontend/src/lib/components/triggers/TriggerTokens.svelte b/frontend/src/lib/components/triggers/TriggerTokens.svelte
index b546a467a1..4cf1a5d027 100644
--- a/frontend/src/lib/components/triggers/TriggerTokens.svelte
+++ b/frontend/src/lib/components/triggers/TriggerTokens.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { FlowService, ScriptService, UserService, type TruncatedToken } from '$lib/gen'
 	import { userStore, workspaceStore } from '$lib/stores'
 	import { getContext } from 'svelte'
@@ -7,13 +9,17 @@
 	import type { TriggerContext } from '../triggers'
 	import { capitalize } from '$lib/utils'
 
-	export let isFlow: boolean
-	export let path: string
-	export let labelPrefix: 'email' | 'webhook'
+	interface Props {
+		isFlow: boolean;
+		path: string;
+		labelPrefix: 'email' | 'webhook';
+	}
+
+	let { isFlow, path, labelPrefix }: Props = $props();
 
 	const { triggersCount } = getContext<TriggerContext>('TriggerContext')
 
-	let tokens: TruncatedToken[] | undefined = undefined
+	let tokens: TruncatedToken[] | undefined = $state(undefined)
 
 	export async function listTokens() {
 		tokens = (
@@ -35,7 +41,9 @@
 		await listTokens()
 	}
 
-	$: $workspaceStore && listTokens()
+	run(() => {
+		$workspaceStore && listTokens()
+	});
 </script>
 
 <div class="flex flex-col gap-2">
@@ -62,7 +70,7 @@
 							</div>
 							{#if token.email == $userStore?.email}
 								<button
-									on:click={() => deleteToken(token.token_prefix)}
+									onclick={() => deleteToken(token.token_prefix)}
 									class="text-xs text-secondary">delete</button
 								>
 							{:else}
diff --git a/frontend/src/lib/components/triggers/email/EmailCapture.svelte b/frontend/src/lib/components/triggers/email/EmailCapture.svelte
index 828a32b0d0..f77c15b5bd 100644
--- a/frontend/src/lib/components/triggers/email/EmailCapture.svelte
+++ b/frontend/src/lib/components/triggers/email/EmailCapture.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { workspaceStore } from '$lib/stores'
 	import Label from '$lib/components/Label.svelte'
-	// import { page } from '$app/stores'
+	// import { page } from '$app/state'
 	import type { CaptureInfo } from '../CaptureSection.svelte'
 	import CaptureSection from '../CaptureSection.svelte'
 	import { fade } from 'svelte/transition'
diff --git a/frontend/src/lib/components/triggers/email/EmailTriggerEditorConfigSection.svelte b/frontend/src/lib/components/triggers/email/EmailTriggerEditorConfigSection.svelte
index 1ff7f10b01..54940b5710 100644
--- a/frontend/src/lib/components/triggers/email/EmailTriggerEditorConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/email/EmailTriggerEditorConfigSection.svelte
@@ -3,7 +3,7 @@
 	import Required from '$lib/components/Required.svelte'
 	import Section from '$lib/components/Section.svelte'
 	import { userStore, workspaceStore } from '$lib/stores'
-	// import { page } from '$app/stores'
+	// import { page } from '$app/state'
 	import { getEmailAddress, getEmailDomain } from './utils'
 	import { isCloudHosted } from '$lib/cloud'
 	import Toggle from '$lib/components/Toggle.svelte'
diff --git a/frontend/src/lib/components/triggers/http/RouteCapture.svelte b/frontend/src/lib/components/triggers/http/RouteCapture.svelte
index 983c6f3cd3..b1024573c9 100644
--- a/frontend/src/lib/components/triggers/http/RouteCapture.svelte
+++ b/frontend/src/lib/components/triggers/http/RouteCapture.svelte
@@ -3,7 +3,7 @@
 	import Label from '$lib/components/Label.svelte'
 	import CopyableCodeBlock from '$lib/components/details/CopyableCodeBlock.svelte'
 	import { bash } from 'svelte-highlight/languages'
-	// import { page } from '$app/stores'
+	// import { page } from '$app/state'
 	import { base } from '$lib/base'
 	import type { CaptureInfo } from '../CaptureSection.svelte'
 	import CaptureSection from '../CaptureSection.svelte'
diff --git a/frontend/src/lib/components/triggers/http/RouteEditorConfigSection.svelte b/frontend/src/lib/components/triggers/http/RouteEditorConfigSection.svelte
index 8bf579c34e..cbbaef9395 100644
--- a/frontend/src/lib/components/triggers/http/RouteEditorConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/http/RouteEditorConfigSection.svelte
@@ -6,7 +6,7 @@
 	import ToggleButtonGroup from '$lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import { userStore, workspaceStore } from '$lib/stores'
 	import { HttpTriggerService } from '$lib/gen'
-	// import { page } from '$app/stores'
+	// import { page } from '$app/state'
 	import { getHttpRoute } from './utils'
 	import { isCloudHosted } from '$lib/cloud'
 	import Toggle from '$lib/components/Toggle.svelte'
diff --git a/frontend/src/lib/components/triggers/postgres/CheckPostgresRequirement.svelte b/frontend/src/lib/components/triggers/postgres/CheckPostgresRequirement.svelte
index 92799b2685..07cfd2209f 100644
--- a/frontend/src/lib/components/triggers/postgres/CheckPostgresRequirement.svelte
+++ b/frontend/src/lib/components/triggers/postgres/CheckPostgresRequirement.svelte
@@ -6,7 +6,7 @@
 	import { sendUserToast } from '$lib/toast'
 	import { emptyString } from '$lib/utils'
 
-	let loadingConfiguration = false
+	let loadingConfiguration = $state(false)
 
 	const checkDatabaseConfiguration = async () => {
 		if (emptyString(postgres_resource_path)) {
@@ -47,9 +47,13 @@
 		loadingConfiguration = false
 	}
 
-	export let can_write: boolean
-	export let postgres_resource_path: string
-	export let checkConnection: any | undefined = undefined
+	interface Props {
+		can_write: boolean;
+		postgres_resource_path: string;
+		checkConnection?: any | undefined;
+	}
+
+	let { can_write, postgres_resource_path, checkConnection = undefined }: Props = $props();
 </script>
 
 {#if postgres_resource_path}
diff --git a/frontend/src/lib/components/triggers/postgres/PostgresTriggerEditorInner.svelte b/frontend/src/lib/components/triggers/postgres/PostgresTriggerEditorInner.svelte
index 0dba9b66ba..a2cd2c55bc 100644
--- a/frontend/src/lib/components/triggers/postgres/PostgresTriggerEditorInner.svelte
+++ b/frontend/src/lib/components/triggers/postgres/PostgresTriggerEditorInner.svelte
@@ -591,7 +591,7 @@
 							bind:value={postgres_resource_path}
 							resourceType={'postgresql'}
 						/>
-						<CheckPostgresRequirement bind:postgres_resource_path bind:can_write />
+						<CheckPostgresRequirement {postgres_resource_path} {can_write} />
 					</div>
 					{#if loadingPostgres}
 						<div class="flex flex-col items-center justify-center h-full w-full">
@@ -718,7 +718,7 @@
 															</div>
 														{:else}
 															<SlotPicker
-																bind:edit
+																{edit}
 																{postgres_resource_path}
 																bind:replication_slot_name
 																disabled={!can_write}
diff --git a/frontend/src/lib/components/triggers/postgres/PublicationPicker.svelte b/frontend/src/lib/components/triggers/postgres/PublicationPicker.svelte
index 3acdb82f8c..7513ed457d 100644
--- a/frontend/src/lib/components/triggers/postgres/PublicationPicker.svelte
+++ b/frontend/src/lib/components/triggers/postgres/PublicationPicker.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { Button } from '$lib/components/common'
 	import Select from '$lib/components/select/Select.svelte'
 	import { safeSelectItems } from '$lib/components/select/utils.svelte'
@@ -9,17 +11,29 @@
 	import { emptyString } from '$lib/utils'
 	import { RefreshCw } from 'lucide-svelte'
 
-	export let items: string[] = []
-	export let can_write: boolean = true
-	export let publication_name: string = ''
-	export let postgres_resource_path: string = ''
-	export let relations: Relations[] | undefined = undefined
-	export let transaction_to_track: string[] = []
-	export let disabled: boolean = false
+	interface Props {
+		items?: string[];
+		can_write?: boolean;
+		publication_name?: string;
+		postgres_resource_path?: string;
+		relations?: Relations[] | undefined;
+		transaction_to_track?: string[];
+		disabled?: boolean;
+	}
 
-	let loadingPublication: boolean = false
-	let deletingPublication: boolean = false
-	let updatingPublication: boolean = false
+	let {
+		items = $bindable([]),
+		can_write = true,
+		publication_name = $bindable(''),
+		postgres_resource_path = '',
+		relations = $bindable(undefined),
+		transaction_to_track = $bindable([]),
+		disabled = false
+	}: Props = $props();
+
+	let loadingPublication: boolean = $state(false)
+	let deletingPublication: boolean = $state(false)
+	let updatingPublication: boolean = $state(false)
 	async function listDatabasePublication() {
 		try {
 			loadingPublication = true
@@ -94,7 +108,9 @@
 	}
 
 	listDatabasePublication()
-	$: publication_name && getAllRelations()
+	run(() => {
+		publication_name && getAllRelations()
+	});
 </script>
 
 <div class="flex gap-1">
diff --git a/frontend/src/lib/components/triggers/postgres/SlotPicker.svelte b/frontend/src/lib/components/triggers/postgres/SlotPicker.svelte
index 677eff5abf..25f0863330 100644
--- a/frontend/src/lib/components/triggers/postgres/SlotPicker.svelte
+++ b/frontend/src/lib/components/triggers/postgres/SlotPicker.svelte
@@ -8,14 +8,23 @@
 	import { emptyString } from '$lib/utils'
 	import { RefreshCw } from 'lucide-svelte'
 
-	export let edit: boolean
-	export let replication_slot_name: string = ''
-	export let postgres_resource_path: string = ''
-	export let disabled: boolean = false
+	interface Props {
+		edit: boolean;
+		replication_slot_name?: string;
+		postgres_resource_path?: string;
+		disabled?: boolean;
+	}
 
-	let deletingSlot: boolean = false
-	let loadingSlot: boolean = false
-	let items: (string | undefined)[] = []
+	let {
+		edit,
+		replication_slot_name = $bindable(''),
+		postgres_resource_path = '',
+		disabled = false
+	}: Props = $props();
+
+	let deletingSlot: boolean = $state(false)
+	let loadingSlot: boolean = $state(false)
+	let items: (string | undefined)[] = $state([])
 	async function listDatabaseSlot() {
 		try {
 			loadingSlot = true
diff --git a/frontend/src/lib/components/triggers/testingBadge.svelte b/frontend/src/lib/components/triggers/testingBadge.svelte
index 2deb844f21..182c8cd05d 100644
--- a/frontend/src/lib/components/triggers/testingBadge.svelte
+++ b/frontend/src/lib/components/triggers/testingBadge.svelte
@@ -5,5 +5,7 @@
 
 <Tooltip>
 	<FlaskConical size={14} class="text-primary inline-block" />
-	<span slot="text">Config used for creating a testing endpoint</span>
+	{#snippet text()}
+		<span >Config used for creating a testing endpoint</span>
+	{/snippet}
 </Tooltip>
diff --git a/frontend/src/lib/components/triggers/webhook/WebhooksConfigSection.svelte b/frontend/src/lib/components/triggers/webhook/WebhooksConfigSection.svelte
index 15027bb15e..3d6edbce21 100644
--- a/frontend/src/lib/components/triggers/webhook/WebhooksConfigSection.svelte
+++ b/frontend/src/lib/components/triggers/webhook/WebhooksConfigSection.svelte
@@ -15,7 +15,7 @@
 	import { typescript } from 'svelte-highlight/languages'
 	import ClipboardPanel from '../../details/ClipboardPanel.svelte'
 	import { copyToClipboard, isObject, readFieldsRecursively } from '$lib/utils'
-	// import { page } from '$app/stores'
+	// import { page } from '$app/state'
 	import { base } from '$lib/base'
 	import TriggerTokens from '../TriggerTokens.svelte'
 	import { workspaceStore, userStore } from '$lib/stores'
diff --git a/frontend/src/lib/components/triggers/websocket/WebsocketCapture.svelte b/frontend/src/lib/components/triggers/websocket/WebsocketCapture.svelte
index ba64404e12..7fb8307c33 100644
--- a/frontend/src/lib/components/triggers/websocket/WebsocketCapture.svelte
+++ b/frontend/src/lib/components/triggers/websocket/WebsocketCapture.svelte
@@ -34,22 +34,24 @@
 		{isFlow}
 		{captureLoading}
 	>
-		<svelte:fragment slot="description">
-			{#if captureInfo.active}
-				{#if captureInfo.connectionInfo?.connected}
-					<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
-						Listenning to websocket events...
-					</p>
+		{#snippet description()}
+			
+				{#if captureInfo.active}
+					{#if captureInfo.connectionInfo?.connected}
+						<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
+							Listenning to websocket events...
+						</p>
+					{:else}
+						<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
+							Connecting to websocket...
+						</p>
+					{/if}
 				{:else}
 					<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
-						Connecting to websocket...
+						Start capturing to listen to websocket events.
 					</p>
 				{/if}
-			{:else}
-				<p in:fade={{ duration: 100, delay: 50 }} out:fade={{ duration: 50 }}>
-					Start capturing to listen to websocket events.
-				</p>
-			{/if}
-		</svelte:fragment>
+			
+			{/snippet}
 	</CaptureSection>
 {/if}
diff --git a/frontend/src/lib/components/tutorials/FlowBuilderTutorialBranchAll.svelte b/frontend/src/lib/components/tutorials/FlowBuilderTutorialBranchAll.svelte
index 9d3a1476b3..2a0c8074ba 100644
--- a/frontend/src/lib/components/tutorials/FlowBuilderTutorialBranchAll.svelte
+++ b/frontend/src/lib/components/tutorials/FlowBuilderTutorialBranchAll.svelte
@@ -7,7 +7,7 @@
 
 	const { flowStore } = getContext<FlowEditorContext>('FlowEditorContext')
 
-	let tutorial: Tutorial | undefined = undefined
+	let tutorial: Tutorial | undefined = $state(undefined)
 
 	export function runTutorial(indexToInsertAt?: number | undefined) {
 		tutorial?.runTutorial({ indexToInsertAt })
diff --git a/frontend/src/lib/components/tutorials/FlowBuilderTutorialBranchOne.svelte b/frontend/src/lib/components/tutorials/FlowBuilderTutorialBranchOne.svelte
index d1c7bbe066..ac25abf739 100644
--- a/frontend/src/lib/components/tutorials/FlowBuilderTutorialBranchOne.svelte
+++ b/frontend/src/lib/components/tutorials/FlowBuilderTutorialBranchOne.svelte
@@ -9,7 +9,7 @@
 	const { flowStore, flowStateStore } = getContext<FlowEditorContext>('FlowEditorContext')
 	const dispatch = createEventDispatcher()
 
-	let tutorial: Tutorial | undefined = undefined
+	let tutorial: Tutorial | undefined = $state(undefined)
 
 	export function runTutorial(indexToInsertAt?: number | undefined) {
 		tutorial?.runTutorial({ indexToInsertAt })
diff --git a/frontend/src/lib/components/tutorials/FlowBuilderTutorialErrorHandler.svelte b/frontend/src/lib/components/tutorials/FlowBuilderTutorialErrorHandler.svelte
index ea2cc009ce..fb75aa85b2 100644
--- a/frontend/src/lib/components/tutorials/FlowBuilderTutorialErrorHandler.svelte
+++ b/frontend/src/lib/components/tutorials/FlowBuilderTutorialErrorHandler.svelte
@@ -5,9 +5,9 @@
 	import { clickButtonBySelector, triggerPointerDown } from './utils'
 	import { updateProgress } from '$lib/tutorialUtils'
 
-	const { flowStore } = getContext<FlowEditorContext>('FlowEditorContext')
+	const { flowStore } = $state(getContext<FlowEditorContext>('FlowEditorContext'))
 
-	let tutorial: Tutorial | undefined = undefined
+	let tutorial: Tutorial | undefined = $state(undefined)
 
 	export function runTutorial() {
 		tutorial?.runTutorial()
diff --git a/frontend/src/lib/components/tutorials/FlowBuilderTutorialForLoop.svelte b/frontend/src/lib/components/tutorials/FlowBuilderTutorialForLoop.svelte
index db0b939141..4cd94632d3 100644
--- a/frontend/src/lib/components/tutorials/FlowBuilderTutorialForLoop.svelte
+++ b/frontend/src/lib/components/tutorials/FlowBuilderTutorialForLoop.svelte
@@ -9,9 +9,9 @@
 
 	const dispatch = createEventDispatcher()
 	const { flowStore, selectedId, flowStateStore } =
-		getContext<FlowEditorContext>('FlowEditorContext')
+		$state(getContext<FlowEditorContext>('FlowEditorContext'))
 
-	let tutorial: Tutorial | undefined = undefined
+	let tutorial: Tutorial | undefined = $state(undefined)
 
 	export function runTutorial(indexToInsertAt?: number | undefined) {
 		tutorial?.runTutorial({ indexToInsertAt })
diff --git a/frontend/src/lib/components/tutorials/FlowBuilderTutorialSimpleFlow.svelte b/frontend/src/lib/components/tutorials/FlowBuilderTutorialSimpleFlow.svelte
index 95e3523eb1..3cd21fcf58 100644
--- a/frontend/src/lib/components/tutorials/FlowBuilderTutorialSimpleFlow.svelte
+++ b/frontend/src/lib/components/tutorials/FlowBuilderTutorialSimpleFlow.svelte
@@ -13,10 +13,10 @@
 	import { refreshStateStore } from '$lib/svelte5Utils.svelte'
 	import { wait } from '$lib/utils'
 
-	const { flowStore } = getContext<FlowEditorContext>('FlowEditorContext')
+	const { flowStore } = $state(getContext<FlowEditorContext>('FlowEditorContext'))
 	const dispatch = createEventDispatcher()
 
-	let tutorial: Tutorial | undefined = undefined
+	let tutorial: Tutorial | undefined = $state(undefined)
 
 	export function runTutorial() {
 		tutorial?.runTutorial()
diff --git a/frontend/src/lib/components/tutorials/Tutorial.svelte b/frontend/src/lib/components/tutorials/Tutorial.svelte
index 1ef9e2b53c..fc95141f5c 100644
--- a/frontend/src/lib/components/tutorials/Tutorial.svelte
+++ b/frontend/src/lib/components/tutorials/Tutorial.svelte
@@ -8,20 +8,30 @@
 	import TutorialInner from './TutorialInner.svelte'
 	import { isCurrentlyInTutorial } from '$lib/stores'
 
-	export let index: number = 0
-	export let name: string = 'action'
-	export let tainted: boolean = false
-	export let onDestroyed: (() => void) | undefined = undefined
 
 	type Options = {
 		indexToInsertAt?: number
 		skipStepsCount?: number
 	}
 
-	export let getSteps: (driver: Driver, options?: Options | undefined) => DriveStep[] = () => []
+	interface Props {
+		index?: number;
+		name?: string;
+		tainted?: boolean;
+		onDestroyed?: (() => void) | undefined;
+		getSteps?: (driver: Driver, options?: Options | undefined) => DriveStep[];
+	}
+
+	let {
+		index = 0,
+		name = 'action',
+		tainted = false,
+		onDestroyed = undefined,
+		getSteps = () => []
+	}: Props = $props();
 
 	let totalSteps = 0
-	let tutorial: Driver | undefined = undefined
+	let tutorial: Driver | undefined = $state(undefined)
 	const dispatch = createEventDispatcher()
 
 	// Render controls needs to be exposed so steps that have a custom render can call it
diff --git a/frontend/src/lib/components/tutorials/TutorialControls.svelte b/frontend/src/lib/components/tutorials/TutorialControls.svelte
index 96c0b7385b..826e66d151 100644
--- a/frontend/src/lib/components/tutorials/TutorialControls.svelte
+++ b/frontend/src/lib/components/tutorials/TutorialControls.svelte
@@ -4,8 +4,12 @@
 	import { createEventDispatcher } from 'svelte'
 	import Alert from '../common/alert/Alert.svelte'
 
-	export let activeIndex: number | undefined = undefined
-	export let totalSteps: number | undefined = undefined
+	interface Props {
+		activeIndex?: number | undefined;
+		totalSteps?: number | undefined;
+	}
+
+	let { activeIndex = undefined, totalSteps = undefined }: Props = $props();
 
 	const dispatch = createEventDispatcher()
 </script>
diff --git a/frontend/src/lib/components/tutorials/app/AppTutorial.svelte b/frontend/src/lib/components/tutorials/app/AppTutorial.svelte
index 1b52905525..b5def6abc2 100644
--- a/frontend/src/lib/components/tutorials/app/AppTutorial.svelte
+++ b/frontend/src/lib/components/tutorials/app/AppTutorial.svelte
@@ -16,10 +16,14 @@
 	import { type DriveStep } from 'driver.js'
 	import { wait } from '$lib/utils'
 
-	export let name: string
-	export let index: number
+	interface Props {
+		name: string;
+		index: number;
+	}
 
-	let tutorial: Tutorial | undefined = undefined
+	let { name, index }: Props = $props();
+
+	let tutorial: Tutorial | undefined = $state(undefined)
 
 	const { app, selectedComponent, focusedGrid } = getContext<AppViewerContext>('AppViewerContext')
 	const { history } = getContext<AppEditorContext>('AppEditorContext')
diff --git a/frontend/src/lib/components/tutorials/app/BackgroundRunnablesTutorial.svelte b/frontend/src/lib/components/tutorials/app/BackgroundRunnablesTutorial.svelte
index 16524af0b5..f2e14afaa6 100644
--- a/frontend/src/lib/components/tutorials/app/BackgroundRunnablesTutorial.svelte
+++ b/frontend/src/lib/components/tutorials/app/BackgroundRunnablesTutorial.svelte
@@ -4,10 +4,14 @@
 	import Tutorial from '../Tutorial.svelte'
 	import { clickButtonBySelector } from '../utils'
 
-	export let name: string
-	export let index: number
+	interface Props {
+		name: string;
+		index: number;
+	}
 
-	let tutorial: Tutorial | undefined = undefined
+	let { name, index }: Props = $props();
+
+	let tutorial: Tutorial | undefined = $state(undefined)
 
 	export function runTutorial(skipStepsCount: number | undefined = undefined) {
 		tutorial?.runTutorial({ skipStepsCount })
diff --git a/frontend/src/lib/components/tutorials/app/ConnectionTutorial.svelte b/frontend/src/lib/components/tutorials/app/ConnectionTutorial.svelte
index 3044a6c973..8de12833dd 100644
--- a/frontend/src/lib/components/tutorials/app/ConnectionTutorial.svelte
+++ b/frontend/src/lib/components/tutorials/app/ConnectionTutorial.svelte
@@ -8,10 +8,14 @@
 	import { clickButtonBySelector } from '../utils'
 	import { updateProgress } from '$lib/tutorialUtils'
 
-	export let name: string
-	export let index: number
+	interface Props {
+		name: string;
+		index: number;
+	}
 
-	let tutorial: Tutorial | undefined = undefined
+	let { name, index }: Props = $props();
+
+	let tutorial: Tutorial | undefined = $state(undefined)
 
 	const { app, selectedComponent, focusedGrid } = getContext<AppViewerContext>('AppViewerContext')
 	const { history } = getContext<AppEditorContext>('AppEditorContext')
diff --git a/frontend/src/lib/components/tutorials/app/ExpressionEvaluationTutorial.svelte b/frontend/src/lib/components/tutorials/app/ExpressionEvaluationTutorial.svelte
index e986b05719..1e96e8b121 100644
--- a/frontend/src/lib/components/tutorials/app/ExpressionEvaluationTutorial.svelte
+++ b/frontend/src/lib/components/tutorials/app/ExpressionEvaluationTutorial.svelte
@@ -1,10 +1,14 @@
 <script lang="ts">
 	import Tutorial from '../Tutorial.svelte'
 
-	export let name: string
-	export let index: number
+	interface Props {
+		name: string;
+		index: number;
+	}
 
-	let tutorial: Tutorial | undefined = undefined
+	let { name, index }: Props = $props();
+
+	let tutorial: Tutorial | undefined = $state(undefined)
 
 	export function runTutorial() {
 		tutorial?.runTutorial()
diff --git a/frontend/src/lib/components/wizards/AppPicker.svelte b/frontend/src/lib/components/wizards/AppPicker.svelte
index b0369d3c96..e6ee5b3f25 100644
--- a/frontend/src/lib/components/wizards/AppPicker.svelte
+++ b/frontend/src/lib/components/wizards/AppPicker.svelte
@@ -8,12 +8,16 @@
 	import Alert from '../common/alert/Alert.svelte'
 	import Select from '../select/Select.svelte'
 
-	export let value = ''
-	let darkMode = false
+	interface Props {
+		value?: string;
+	}
+
+	let { value = $bindable('') }: Props = $props();
+	let darkMode = $state(false)
 
 	const { appPath } = getContext<AppViewerContext>('AppViewerContext')
 
-	let apps: ListableApp[] = []
+	let apps: ListableApp[] = $state([])
 
 	async function loadApps(): Promise<void> {
 		apps = (await AppService.listApps({ workspace: $workspaceStore!, includeDraftOnly: true })).map(
diff --git a/frontend/src/lib/components/workspaceSettings/CreateWorkspace.svelte b/frontend/src/lib/components/workspaceSettings/CreateWorkspace.svelte
index 72d5f12dc2..3cceef23d6 100644
--- a/frontend/src/lib/components/workspaceSettings/CreateWorkspace.svelte
+++ b/frontend/src/lib/components/workspaceSettings/CreateWorkspace.svelte
@@ -13,7 +13,7 @@
 	} from '$lib/gen'
 	import { validateUsername } from '$lib/utils'
 	import { logoutWithRedirect } from '$lib/logout'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import { usersWorkspaceStore, workspaceStore } from '$lib/stores'
 	import CenteredModal from '$lib/components/CenteredModal.svelte'
 	import { Button } from '$lib/components/common'
@@ -37,7 +37,7 @@
 
 	let { isFork = false }: Props = $props()
 
-	const rd = $page.url.searchParams.get('rd')
+	const rd = page.url.searchParams.get('rd')
 
 	let id = $state('')
 	let name = $state('')
@@ -85,7 +85,7 @@
 					requestBody: {
 						id: prefixed_id,
 						name,
-						color: colorEnabled && workspaceColor ? workspaceColor : undefined,
+						color: colorEnabled && workspaceColor ? workspaceColor : undefined
 					}
 				})
 
@@ -191,7 +191,7 @@
 			} catch {}
 		}
 		if (!$usersWorkspaceStore) {
-			const url = $page.url
+			const url = page.url
 			console.log('logout 2')
 			await logoutWithRedirect(url.href.replace(url.origin, ''))
 		}
diff --git a/frontend/src/lib/components/workspaceSettings/DucklakeSettings.svelte b/frontend/src/lib/components/workspaceSettings/DucklakeSettings.svelte
index 1910bca0e5..99e17b8e4f 100644
--- a/frontend/src/lib/components/workspaceSettings/DucklakeSettings.svelte
+++ b/frontend/src/lib/components/workspaceSettings/DucklakeSettings.svelte
@@ -300,24 +300,28 @@
 									closeOnOutsideClick
 									bind:this={instanceCatalogPopover}
 								>
-									<svelte:fragment slot="trigger">
-										<Button spacingSize="xs2" variant="default" btnClasses="h-6">
-											{#if !status}
-												<span class="text-yellow-600 dark:text-yellow-400">
-													Setup <ArrowRight class="inline" size={14} />
-												</span>
-											{:else if !status.success}
-												<span class="text-red-400 flex gap-1">
-													Error <TriangleAlert class="inline" size={16} />
-												</span>
-											{:else}
-												<div class="w-1.5 h-1.5 rounded-full bg-green-400"></div>
-											{/if}
-										</Button>
-									</svelte:fragment>
-									<svelte:fragment slot="content">
-										{@render instanceCatalogWizard(status, ducklake.catalog.resource_path ?? '')}
-									</svelte:fragment>
+									{#snippet trigger()}
+																	
+											<Button spacingSize="xs2" variant="default" btnClasses="h-6">
+												{#if !status}
+													<span class="text-yellow-600 dark:text-yellow-400">
+														Setup <ArrowRight class="inline" size={14} />
+													</span>
+												{:else if !status.success}
+													<span class="text-red-400 flex gap-1">
+														Error <TriangleAlert class="inline" size={16} />
+													</span>
+												{:else}
+													<div class="w-1.5 h-1.5 rounded-full bg-green-400"></div>
+												{/if}
+											</Button>
+										
+																	{/snippet}
+									{#snippet content()}
+																	
+											{@render instanceCatalogWizard(status, ducklake.catalog.resource_path ?? '')}
+										
+																	{/snippet}
 								</Popover>
 							{/if}
 						</div>
@@ -354,15 +358,19 @@
 							contentClasses="p-2 text-sm text-secondary italic"
 							class="cursor-not-allowed"
 						>
-							<svelte:fragment slot="trigger">
-								<ExploreAssetButton
-									class="h-9"
-									asset={{ kind: 'ducklake', path: ducklake.name }}
-									{dbManagerDrawer}
-									disabled
-								/>
-							</svelte:fragment>
-							<svelte:fragment slot="content">Please save settings first</svelte:fragment>
+							{#snippet trigger()}
+													
+									<ExploreAssetButton
+										class="h-9"
+										asset={{ kind: 'ducklake', path: ducklake.name }}
+										{dbManagerDrawer}
+										disabled
+									/>
+								
+													{/snippet}
+							{#snippet content()}
+														Please save settings first
+													{/snippet}
 						</Popover>
 					{:else}
 						<ExploreAssetButton
diff --git a/frontend/src/lib/components/workspaceSettings/StorageSettings.svelte b/frontend/src/lib/components/workspaceSettings/StorageSettings.svelte
index ff392f5447..acfe0ea6dc 100644
--- a/frontend/src/lib/components/workspaceSettings/StorageSettings.svelte
+++ b/frontend/src/lib/components/workspaceSettings/StorageSettings.svelte
@@ -228,96 +228,100 @@
 
 {#snippet permissionBtn(storage: NonNullable<S3ResourceSettings['secondaryStorage']>[number][1])}
 	<Popover closeOnOtherPopoverOpen placement="left">
-		<svelte:fragment slot="trigger">
-			<Button variant="default" wrapperClasses="h-full" btnClasses="px-2.5" size="sm">
-				<Shield size={16} /> Permissions <ChevronDown size={14} />
-			</Button>
-		</svelte:fragment>
-		<svelte:fragment slot="content">
-			<div class="flex flex-col gap-3 mx-4 pb-4 pt-5 w-[48rem]">
-				{#if !$enterpriseLicense}
-					<Alert
-						type={storage.advancedPermissions ? 'error' : 'info'}
-						title="Advanced permission rules are an Enterprise feature"
-					>
-						Consider upgrading to Windmill EE to use advanced permission rules to control access to
-						your object storage at a more granular level.</Alert
-					>
-				{/if}
-				<Toggle
-					bind:checked={
-						() => !!storage.advancedPermissions,
-						(v) => {
-							storage.advancedPermissions = v
-								? defaultS3AdvancedPermissions(!!$enterpriseLicense)
-								: undefined
-							if (v) storage.publicResource = false
-						}
-					}
-					options={{
-						right: 'Enable advanced permission rules',
-						rightTooltip: 'Control precisely which paths are allowed to your users.'
-					}}
-					disabled={!storage.advancedPermissions && !$enterpriseLicense}
-				/>
-				{#if storage.advancedPermissions}
-					{@render advancedPermissionsEditor(storage.advancedPermissions)}
-				{/if}
-				{#if !storage.advancedPermissions}
-					{#if storage.resourceType == 's3'}
-						<div class="flex flex-col mt-2 mb-1 gap-1">
-							<Toggle
-								disabled={emptyString(storage.resourcePath)}
-								bind:checked={storage.publicResource}
-								options={{
-									right:
-										'S3 resource details and content can be accessed by all users of this workspace',
-									rightTooltip:
-										'If set, all users of this workspace will have access the to entire content of the S3 bucket, as well as the resource details and the "open preview" button. This effectively by-pass the permissions set on the resource and makes it public to everyone.'
-								}}
-							/>
-							{#if storage.publicResource === true}
-								<div class="pt-2"></div>
-
-								<Alert
-									type="warning"
-									title="(Legacy) S3 bucket content and resource details are shared"
-								>
-									S3 resource public access is ON, which means that the entire content of the S3
-									bucket will be accessible to all the users of this workspace regardless of whether
-									they have access the resource or not. Similarly, certain Windmill SDK endpoints
-									can be used in scripts to access the resource details, including public and
-									private keys.
-								</Alert>
-							{/if}
-						</div>
-					{:else}
-						<div class="flex flex-col mt-5 mb-1 gap-1 max-w-[40rem]">
-							<Toggle
-								disabled={emptyString(storage.resourcePath)}
-								bind:checked={storage.publicResource}
-								options={{
-									right: 'object storage content can be accessed by all users of this workspace',
-									rightTooltip:
-										'If set, all users of this workspace will have access the to entire content of the object storage.'
-								}}
-							/>
-							{#if storage.publicResource === true}
-								<div class="pt-2"></div>
-								<Alert
-									type="warning"
-									title="(Legacy) Object storage content and resource details are shared"
-								>
-									object public access is ON, which means that the entire content of the object
-									store will be accessible to all the users of this workspace regardless of whether
-									they have access the resource or not.
-								</Alert>
-							{/if}
-						</div>
+		{#snippet trigger()}
+			
+				<Button variant="default" wrapperClasses="h-full" btnClasses="px-2.5" size="sm">
+					<Shield size={16} /> Permissions <ChevronDown size={14} />
+				</Button>
+			
+			{/snippet}
+		{#snippet content()}
+			
+				<div class="flex flex-col gap-3 mx-4 pb-4 pt-5 w-[48rem]">
+					{#if !$enterpriseLicense}
+						<Alert
+							type={storage.advancedPermissions ? 'error' : 'info'}
+							title="Advanced permission rules are an Enterprise feature"
+						>
+							Consider upgrading to Windmill EE to use advanced permission rules to control access to
+							your object storage at a more granular level.</Alert
+						>
 					{/if}
-				{/if}
-			</div>
-		</svelte:fragment>
+					<Toggle
+						bind:checked={
+							() => !!storage.advancedPermissions,
+							(v) => {
+								storage.advancedPermissions = v
+									? defaultS3AdvancedPermissions(!!$enterpriseLicense)
+									: undefined
+								if (v) storage.publicResource = false
+							}
+						}
+						options={{
+							right: 'Enable advanced permission rules',
+							rightTooltip: 'Control precisely which paths are allowed to your users.'
+						}}
+						disabled={!storage.advancedPermissions && !$enterpriseLicense}
+					/>
+					{#if storage.advancedPermissions}
+						{@render advancedPermissionsEditor(storage.advancedPermissions)}
+					{/if}
+					{#if !storage.advancedPermissions}
+						{#if storage.resourceType == 's3'}
+							<div class="flex flex-col mt-2 mb-1 gap-1">
+								<Toggle
+									disabled={emptyString(storage.resourcePath)}
+									bind:checked={storage.publicResource}
+									options={{
+										right:
+											'S3 resource details and content can be accessed by all users of this workspace',
+										rightTooltip:
+											'If set, all users of this workspace will have access the to entire content of the S3 bucket, as well as the resource details and the "open preview" button. This effectively by-pass the permissions set on the resource and makes it public to everyone.'
+									}}
+								/>
+								{#if storage.publicResource === true}
+									<div class="pt-2"></div>
+
+									<Alert
+										type="warning"
+										title="(Legacy) S3 bucket content and resource details are shared"
+									>
+										S3 resource public access is ON, which means that the entire content of the S3
+										bucket will be accessible to all the users of this workspace regardless of whether
+										they have access the resource or not. Similarly, certain Windmill SDK endpoints
+										can be used in scripts to access the resource details, including public and
+										private keys.
+									</Alert>
+								{/if}
+							</div>
+						{:else}
+							<div class="flex flex-col mt-5 mb-1 gap-1 max-w-[40rem]">
+								<Toggle
+									disabled={emptyString(storage.resourcePath)}
+									bind:checked={storage.publicResource}
+									options={{
+										right: 'object storage content can be accessed by all users of this workspace',
+										rightTooltip:
+											'If set, all users of this workspace will have access the to entire content of the object storage.'
+									}}
+								/>
+								{#if storage.publicResource === true}
+									<div class="pt-2"></div>
+									<Alert
+										type="warning"
+										title="(Legacy) Object storage content and resource details are shared"
+									>
+										object public access is ON, which means that the entire content of the object
+										store will be accessible to all the users of this workspace regardless of whether
+										they have access the resource or not.
+									</Alert>
+								{/if}
+							</div>
+						{/if}
+					{/if}
+				</div>
+			
+			{/snippet}
 	</Popover>
 {/snippet}
 
diff --git a/frontend/src/routes/(root)/(logged)/+layout.svelte b/frontend/src/routes/(root)/(logged)/+layout.svelte
index 329fbc6877..eb13f33af5 100644
--- a/frontend/src/routes/(root)/(logged)/+layout.svelte
+++ b/frontend/src/routes/(root)/(logged)/+layout.svelte
@@ -37,7 +37,7 @@
 	import UserSettings from '$lib/components/UserSettings.svelte'
 	import SuperadminSettings from '$lib/components/SuperadminSettings.svelte'
 	import WindmillIcon from '$lib/components/icons/WindmillIcon.svelte'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import FavoriteMenu from '$lib/components/sidebar/FavoriteMenu.svelte'
 	import { SUPERADMIN_SETTINGS_HASH, USER_SETTINGS_HASH } from '$lib/components/sidebar/settings'
 	import { isCloudHosted } from '$lib/cloud'
@@ -66,32 +66,32 @@
 	let superadminSettings: SuperadminSettings | undefined = $state()
 	let menuHidden = $state(false)
 
-	if ($page.status == 404) {
+	if (page.status == 404) {
 		goto('/user/login')
 	}
 
 	function onQueryChangeUserSettings() {
-		if (userSettings && $page.url.hash.startsWith(USER_SETTINGS_HASH)) {
-			const mcpMode = $page.url.hash.includes('-mcp')
+		if (userSettings && page.url.hash.startsWith(USER_SETTINGS_HASH)) {
+			const mcpMode = page.url.hash.includes('-mcp')
 			userSettings.openDrawer(mcpMode)
 		}
 	}
 
 	function onQueryChangeAdminSettings() {
-		if (superadminSettings && $page.url.hash === SUPERADMIN_SETTINGS_HASH) {
+		if (superadminSettings && page.url.hash === SUPERADMIN_SETTINGS_HASH) {
 			superadminSettings.openDrawer()
 		}
 	}
 
 	function onQueryChange() {
-		let queryWorkspace = $page.url.searchParams.get('workspace')
+		let queryWorkspace = page.url.searchParams.get('workspace')
 		if (queryWorkspace) {
 			$workspaceStore = queryWorkspace
 		}
 
 		menuHidden =
-			$page.url.searchParams.get('nomenubar') === 'true' ||
-			$page.url.pathname.startsWith('/oauth/callback/')
+			page.url.searchParams.get('nomenubar') === 'true' ||
+			page.url.pathname.startsWith('/oauth/callback/')
 	}
 
 	async function updateUserStore(workspace: string | undefined) {
@@ -259,7 +259,7 @@
 		}
 	}
 
-	let devOnly = $derived($page.url.pathname.startsWith(base + '/scripts/dev'))
+	let devOnly = $derived(page.url.pathname.startsWith(base + '/scripts/dev'))
 
 	async function loadDefaultScripts(workspace: string, user: UserExt | undefined) {
 		if (!user?.operator) {
@@ -335,13 +335,13 @@
 	}
 
 	$effect(() => {
-		$page.url && userSettings != undefined && untrack(() => onQueryChangeUserSettings())
+		page.url && userSettings != undefined && untrack(() => onQueryChangeUserSettings())
 	})
 	$effect(() => {
-		$page.url && superadminSettings != undefined && untrack(() => onQueryChangeAdminSettings())
+		page.url && superadminSettings != undefined && untrack(() => onQueryChangeAdminSettings())
 	})
 	$effect(() => {
-		$page.url && untrack(() => onQueryChange())
+		page.url && untrack(() => onQueryChange())
 	})
 	$effect(() => {
 		$workspaceStore
@@ -393,7 +393,7 @@
 <svelte:window bind:innerWidth />
 
 <UserSettings bind:this={userSettings} showMcpMode={true} />
-{#if $page.status == 404}
+{#if page.status == 404}
 	<CenteredModal title="Page not found, redirecting you to login">
 		<div class="w-full">
 			<div class="block m-auto w-20">
diff --git a/frontend/src/routes/(root)/(logged)/+page.svelte b/frontend/src/routes/(root)/(logged)/+page.svelte
index 1050248b69..70f985829c 100644
--- a/frontend/src/routes/(root)/(logged)/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/+page.svelte
@@ -32,30 +32,31 @@
 	import type { EditorBreakpoint } from '$lib/components/apps/types'
 	import { HOME_SHOW_HUB, HOME_SHOW_CREATE_FLOW, HOME_SHOW_CREATE_APP } from '$lib/consts'
 	import { setQuery } from '$lib/navigation'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import { goto, replaceState } from '$app/navigation'
 
 	type Tab = 'hub' | 'workspace'
 
-	let tab: Tab =
+	let tab: Tab = $state(
 		window.location.hash == '#workspace' || window.location.hash == '#hub'
 			? (window.location.hash?.replace('#', '') as Tab)
 			: 'workspace'
+	)
 
-	let subtab: 'flow' | 'script' | 'app' = 'script'
+	let subtab: 'flow' | 'script' | 'app' = $state('script')
 
-	let filter: string = ''
+	let filter: string = $state('')
 
-	let flowViewer: Drawer
-	let flowViewerFlow: { flow?: OpenFlow & { id?: number } } | undefined
+	let flowViewer: Drawer | undefined = $state()
+	let flowViewerFlow: { flow?: OpenFlow & { id?: number } } | undefined = $state()
 
-	let appViewer: Drawer
-	let appViewerApp: { app?: any & { id?: number } } | undefined
+	let appViewer: Drawer | undefined = $state()
+	let appViewerApp: { app?: any & { id?: number } } | undefined = $state()
 
-	let codeViewer: Drawer
-	let codeViewerContent: string = ''
-	let codeViewerLanguage: Script['language'] = 'deno'
-	let codeViewerObj: HubItem | undefined = undefined
+	let codeViewer: Drawer | undefined = $state()
+	let codeViewerContent: string = $state('')
+	let codeViewerLanguage: Script['language'] = $state('deno')
+	let codeViewerObj: HubItem | undefined = $state(undefined)
 
 	const breakpoint = writable<EditorBreakpoint>('lg')
 
@@ -68,7 +69,7 @@
 			codeViewerObj = obj
 		})
 
-		codeViewer.openDrawer?.()
+		codeViewer?.openDrawer?.()
 	}
 
 	async function viewFlow(obj: { flow_id: number }): Promise<void> {
@@ -77,7 +78,7 @@
 			delete hub['comments']
 			flowViewerFlow = hub
 		})
-		flowViewer.openDrawer?.()
+		flowViewer?.openDrawer?.()
 	}
 
 	async function viewApp(obj: { app_id: number }): Promise<void> {
@@ -86,7 +87,7 @@
 			delete hub['comments']
 			appViewerApp = hub
 		})
-		appViewer.openDrawer?.()
+		appViewer?.openDrawer?.()
 	}
 </script>
 
@@ -215,7 +216,7 @@
 						}}
 						summary={appViewerApp?.app.summary ?? ''}
 						noBackend
-						replaceStateFn={(path) => replaceState(path, $page.state)}
+						replaceStateFn={(path) => replaceState(path, page.state)}
 						gotoFn={(path, opt) => goto(path, opt)}
 					/>
 				{/await}
@@ -261,7 +262,7 @@
 					<ToggleButtonGroup
 						bind:selected={subtab}
 						onSelected={(v) => {
-							setQuery($page.url, 'kind', v, window.location.hash)
+							setQuery(page.url, 'kind', v, window.location.hash)
 						}}
 						noWFull
 					>
diff --git a/frontend/src/routes/(root)/(logged)/apps/add/+page.svelte b/frontend/src/routes/(root)/(logged)/apps/add/+page.svelte
index 254f854f40..51b23566e4 100644
--- a/frontend/src/routes/(root)/(logged)/apps/add/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/apps/add/+page.svelte
@@ -3,7 +3,7 @@
 
 	import AppEditor from '$lib/components/apps/editor/AppEditor.svelte'
 	import { AppService, type Policy } from '$lib/gen'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import { decodeState } from '$lib/utils'
 	import { userStore, workspaceStore } from '$lib/stores'
 	import type { App } from '$lib/components/apps/types'
@@ -15,10 +15,10 @@
 	import { DEFAULT_THEME } from '$lib/components/apps/editor/componentsPanel/themeUtils'
 	import { emptyApp } from '$lib/components/apps/editor/appUtils'
 
-	let nodraft = $page.url.searchParams.get('nodraft')
-	const hubId = $page.url.searchParams.get('hub')
-	const templatePath = $page.url.searchParams.get('template')
-	const templateId = $page.url.searchParams.get('template_id')
+	let nodraft = page.url.searchParams.get('nodraft')
+	const hubId = page.url.searchParams.get('hub')
+	const templatePath = page.url.searchParams.get('template')
+	const templateId = page.url.searchParams.get('template_id')
 
 	const importRaw = $importStore
 	if ($importStore) {
@@ -40,9 +40,9 @@
 	})
 	afterNavigate(() => {
 		if (nodraft) {
-			let url = new URL($page.url.href)
+			let url = new URL(page.url.href)
 			url.search = ''
-			replaceState(url.toString(), $page.state)
+			replaceState(url.toString(), page.state)
 		}
 	})
 	let policy: Policy = $state({
@@ -127,7 +127,7 @@
 				{policy}
 				fromHub={hubId != null}
 				newApp={true}
-				replaceStateFn={(path) => replaceState(path, $page.state)}
+				replaceStateFn={(path) => replaceState(path, page.state)}
 				gotoFn={(path, opt) => goto(path, opt)}
 			>
 				{#snippet unsavedConfirmationModal({
diff --git a/frontend/src/routes/(root)/(logged)/apps/get_raw/[version]/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/apps/get_raw/[version]/[...path]/+page.svelte
index 8d8d66ef9a..db7b7da001 100644
--- a/frontend/src/routes/(root)/(logged)/apps/get_raw/[version]/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/apps/get_raw/[version]/[...path]/+page.svelte
@@ -4,7 +4,7 @@
 	import { sendUserToast } from '$lib/toast'
 	import { onDestroy, onMount } from 'svelte'
 	import { page } from '$app/state'
-	let loaded = false
+	let loaded = $state(false)
 
 	onMount(async () => {
 		globalThis.windmill = {
diff --git a/frontend/src/routes/(root)/(logged)/apps_raw/add/+page.svelte b/frontend/src/routes/(root)/(logged)/apps_raw/add/+page.svelte
index b547827fc0..74a8d89fab 100644
--- a/frontend/src/routes/(root)/(logged)/apps_raw/add/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/apps_raw/add/+page.svelte
@@ -1,8 +1,10 @@
+<!-- @migration-task Error while migrating Svelte code: can't migrate `let summary = ''` to `$state` because there's a variable named state.
+     Rename the variable and try again or migrate by hand. -->
 <script lang="ts">
 	import { importStore } from '$lib/components/apps/store'
 
 	import { AppService, type Policy } from '$lib/gen'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import { decodeState } from '$lib/utils'
 	import { userStore, workspaceStore } from '$lib/stores'
 	import { afterNavigate, replaceState } from '$app/navigation'
@@ -15,9 +17,9 @@
 	import FileEditorIcon from '$lib/components/raw_apps/FileEditorIcon.svelte'
 	import { react18Template, react19Template, svelte5Template, vueTemplate } from './templates'
 
-	let nodraft = $page.url.searchParams.get('nodraft')
-	const templatePath = $page.url.searchParams.get('template')
-	const templateId = $page.url.searchParams.get('template_id')
+	let nodraft = page.url.searchParams.get('nodraft')
+	const templatePath = page.url.searchParams.get('template')
+	const templateId = page.url.searchParams.get('template_id')
 
 	const importRaw = $importStore
 	if ($importStore) {
@@ -30,9 +32,9 @@
 	let files: Record<string, string> = react19Template
 	afterNavigate(() => {
 		if (nodraft) {
-			let url = new URL($page.url.href)
+			let url = new URL(page.url.href)
 			url.search = ''
-			replaceState(url.toString(), $page.state)
+			replaceState(url.toString(), page.state)
 		}
 	})
 	let policy: Policy = {
diff --git a/frontend/src/routes/(root)/(logged)/apps_raw/edit/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/apps_raw/edit/[...path]/+page.svelte
index edf7f21740..8e6a69b439 100644
--- a/frontend/src/routes/(root)/(logged)/apps_raw/edit/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/apps_raw/edit/[...path]/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy'
+
 	import { AppService, DraftService } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
 	import { cleanValueProperties, decodeState, type Value } from '$lib/utils'
@@ -11,12 +13,12 @@
 	import { stateSnapshot } from '$lib/svelte5Utils.svelte'
 	import { page } from '$app/state'
 
-	let files: Record<string, string> | undefined = undefined
-	let runnables = {}
-	let newPath = ''
+	let files: Record<string, string> | undefined = $state(undefined)
+	let runnables = $state({})
+	let newPath = $state('')
 	// let lastVersion = 0
-	let policy: any = {}
-	let summary = ''
+	let policy: any = $state({})
+	let summary = $state('')
 
 	let savedApp:
 		| {
@@ -31,8 +33,8 @@
 				draft_only?: boolean
 				custom_path?: string
 		  }
-		| undefined = undefined
-	let redraw = 0
+		| undefined = $state(undefined)
+	let redraw = $state(0)
 	let path = page.params.path ?? ''
 
 	let nodraft = page.url.searchParams.get('nodraft')
@@ -95,8 +97,8 @@
 				actions.push({
 					label: 'Show diff',
 					callback: async () => {
-						diffDrawer.openDrawer()
-						diffDrawer.setDiff({
+						diffDrawer?.openDrawer()
+						diffDrawer?.setDiff({
 							mode: 'simple',
 							original: draftOrDeployed,
 							current: urlScript,
@@ -131,8 +133,8 @@
 					{
 						label: 'Show diff',
 						callback: async () => {
-							diffDrawer.openDrawer()
-							diffDrawer.setDiff({
+							diffDrawer?.openDrawer()
+							diffDrawer?.setDiff({
 								mode: 'simple',
 								original: deployed,
 								current: draft,
@@ -148,18 +150,18 @@
 		}
 	}
 
-	$: {
+	run(() => {
 		if ($workspaceStore) {
 			loadApp()
 		}
-	}
+	})
 
 	async function restoreDraft() {
 		if (!savedApp || !savedApp.draft) {
 			sendUserToast('Could not restore to draft', true)
 			return
 		}
-		diffDrawer.closeDrawer()
+		diffDrawer?.closeDrawer()
 		goto(`/apps/edit/${savedApp.draft.path}`)
 		await loadApp()
 		redraw++
@@ -170,7 +172,7 @@
 			sendUserToast('Could not restore to deployed', true)
 			return
 		}
-		diffDrawer.closeDrawer()
+		diffDrawer?.closeDrawer()
 		if (savedApp.draft) {
 			await DraftService.deleteDraft({
 				workspace: $workspaceStore!,
@@ -183,7 +185,7 @@
 		redraw++
 	}
 
-	let diffDrawer: DiffDrawer
+	let diffDrawer: DiffDrawer | undefined = $state()
 
 	function onRestore(ev: any) {
 		sendUserToast('App restored from previous deployment')
diff --git a/frontend/src/routes/(root)/(logged)/assets/+page.svelte b/frontend/src/routes/(root)/(logged)/assets/+page.svelte
index 6f7aab03af..f8c776bc76 100644
--- a/frontend/src/routes/(root)/(logged)/assets/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/assets/+page.svelte
@@ -82,7 +82,9 @@
 									fill=""
 									class="!fill-secondary !stroke-secondary"
 								/>
-								<svelte:fragment slot="text">{formatAssetKind(asset)}</svelte:fragment>
+								{#snippet text()}
+																{formatAssetKind(asset)}
+															{/snippet}
 							</Tooltip>
 						</Cell>
 						<Cell class="w-[75%] flex flex-col">
@@ -107,7 +109,9 @@
 							{#if asset.kind === 'resource' && asset.metadata === undefined}
 								<Tooltip class={'w-24 flex items-center justify-center'}>
 									<AlertTriangle size={20} class="text-orange-600 dark:text-orange-500" />
-									<svelte:fragment slot="text">Could not find resource</svelte:fragment>
+									{#snippet text()}
+																		Could not find resource
+																	{/snippet}
 								</Tooltip>
 							{/if}
 						</Cell>
diff --git a/frontend/src/routes/(root)/(logged)/concurrency_groups/+page.svelte b/frontend/src/routes/(root)/(logged)/concurrency_groups/+page.svelte
index a24a047866..f697269948 100644
--- a/frontend/src/routes/(root)/(logged)/concurrency_groups/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/concurrency_groups/+page.svelte
@@ -11,10 +11,10 @@
 	import { sleep } from '$lib/utils'
 	import { onDestroy, onMount } from 'svelte'
 
-	let concurrencyGroups: ConcurrencyGroup[] | undefined = undefined
+	let concurrencyGroups: ConcurrencyGroup[] | undefined = $state(undefined)
 
 	let doLoadConcurrencyGroups = false
-	let concurrencyGroupsLoading = false
+	let concurrencyGroupsLoading = $state(false)
 
 	onMount(() => {
 		doLoadConcurrencyGroups = true
@@ -78,40 +78,43 @@
 	{#if concurrencyGroups && concurrencyGroups.length > 0}
 		<div class="relative mb-20 pt-8">
 			<TableCustom>
-				<tr slot="header-row">
+				<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
+	<tr slot="header-row">
 					<th>Concurrency key</th>
 					<th>Jobs running</th>
 					<th></th>
 				</tr>
-				<tbody slot="body">
-					{#each concurrencyGroups as { concurrency_key, total_running }}
-						<tr>
-							<td>
-								<a
-									href={`${base}/runs/?job_kinds=all&graph=ConcurrencyChart&concurrency_key=${concurrency_key}`}
-									>{concurrency_key}
-								</a>
-							</td>
-							<td>
-								{total_running}
-							</td>
-							<td>
-								<div class="flex justify-center">
-									<Button
-										size="md"
-										color="light"
-										btnClasses="justify-center w-12"
-										startIcon={{ icon: Trash, classes: 'text-red-500' }}
-										on:click={() => {
-											deleteConcurrencyGroup(concurrency_key)
-										}}
-										iconOnly={true}
-									/>
-								</div>
-							</td>
-						</tr>
-					{/each}
-				</tbody>
+				{#snippet body()}
+								<tbody >
+						{#each concurrencyGroups as { concurrency_key, total_running }}
+							<tr>
+								<td>
+									<a
+										href={`${base}/runs/?job_kinds=all&graph=ConcurrencyChart&concurrency_key=${concurrency_key}`}
+										>{concurrency_key}
+									</a>
+								</td>
+								<td>
+									{total_running}
+								</td>
+								<td>
+									<div class="flex justify-center">
+										<Button
+											size="md"
+											color="light"
+											btnClasses="justify-center w-12"
+											startIcon={{ icon: Trash, classes: 'text-red-500' }}
+											on:click={() => {
+												deleteConcurrencyGroup(concurrency_key)
+											}}
+											iconOnly={true}
+										/>
+									</div>
+								</td>
+							</tr>
+						{/each}
+					</tbody>
+							{/snippet}
 			</TableCustom>
 		</div>
 	{/if}
diff --git a/frontend/src/routes/(root)/(logged)/flows/add/+page.svelte b/frontend/src/routes/(root)/(logged)/flows/add/+page.svelte
index af9d000561..26491b66e8 100644
--- a/frontend/src/routes/(root)/(logged)/flows/add/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/flows/add/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { goto } from '$lib/navigation'
 	import { afterNavigate, replaceState } from '$app/navigation'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 
 	import FlowBuilder from '$lib/components/FlowBuilder.svelte'
 	import UnsavedConfirmationModal from '$lib/components/common/confirmationModal/UnsavedConfirmationModal.svelte'
@@ -14,19 +14,19 @@
 	import { replaceScriptPlaceholderWithItsValues } from '$lib/hub'
 	import type { Trigger } from '$lib/components/triggers/utils'
 
-	let nodraft = $page.url.searchParams.get('nodraft')
+	let nodraft = page.url.searchParams.get('nodraft')
 
 	afterNavigate(() => {
 		if (nodraft) {
-			let url = new URL($page.url.href)
+			let url = new URL(page.url.href)
 			url.search = ''
-			replaceState(url.toString(), $page.state)
+			replaceState(url.toString(), page.state)
 		}
 	})
 
-	const hubId = $page.url.searchParams.get('hub')
-	const templatePath = $page.url.searchParams.get('template')
-	const templateId = $page.url.searchParams.get('template_id')
+	const hubId = page.url.searchParams.get('hub')
+	const templatePath = page.url.searchParams.get('template')
+	const templateId = page.url.searchParams.get('template_id')
 	const initialState = hubId || templatePath || nodraft ? undefined : localStorage.getItem('flow')
 
 	let selectedId: string = $state('settings-metadata')
@@ -72,7 +72,7 @@
 		}
 
 		let state = initialState ? decodeState(initialState) : undefined
-		const initialStateQuery = $page.url.hash != '' ? $page.url.hash.slice(1) : undefined
+		const initialStateQuery = page.url.hash != '' ? page.url.hash.slice(1) : undefined
 
 		if (initialStateQuery) {
 			state = decodeState(initialStateQuery)
diff --git a/frontend/src/routes/(root)/(logged)/instance_groups/+page.svelte b/frontend/src/routes/(root)/(logged)/instance_groups/+page.svelte
index 2ddd4f66c6..a55d892d0b 100644
--- a/frontend/src/routes/(root)/(logged)/instance_groups/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/instance_groups/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy'
+
 	import type { InstanceGroup } from '$lib/gen'
 	import { GroupService } from '$lib/gen'
 
@@ -11,9 +13,9 @@
 	import { Plus } from 'lucide-svelte'
 	import { sendUserToast } from '$lib/toast'
 
-	let newGroupName: string = ''
-	let instanceGroups: InstanceGroup[] | undefined = undefined
-	let groupDrawer: Drawer
+	let newGroupName: string = $state('')
+	let instanceGroups: InstanceGroup[] | undefined = $state(undefined)
+	let groupDrawer: Drawer | undefined = $state()
 
 	async function loadInstanceGroups(): Promise<void> {
 		try {
@@ -29,14 +31,14 @@
 		})
 		loadInstanceGroups()
 		editGroupName = newGroupName
-		groupDrawer.openDrawer()
+		groupDrawer?.openDrawer()
 	}
 
-	$: {
+	run(() => {
 		loadInstanceGroups()
-	}
+	})
 
-	let editGroupName: string = ''
+	let editGroupName: string = $state('')
 </script>
 
 <Drawer bind:this={groupDrawer}>
@@ -53,10 +55,10 @@
 					floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
 					containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
 				>
-					<svelte:fragment slot="trigger">
+					{#snippet trigger()}
 						<Button size="md" startIcon={{ icon: Plus }} nonCaptureEvent>New&nbsp;group</Button>
-					</svelte:fragment>
-					<svelte:fragment slot="content" let:close>
+					{/snippet}
+					{#snippet content({ close })}
 						<div class="flex-col flex gap-2 p-4">
 							<input class="mr-2" placeholder="New instance group name" bind:value={newGroupName} />
 							<Button
@@ -71,7 +73,7 @@
 								Create
 							</Button>
 						</div>
-					</svelte:fragment>
+					{/snippet}
 				</Popover>
 			</div>
 		</div>
@@ -80,43 +82,46 @@
 	{#if instanceGroups && instanceGroups.length > 0}
 		<div class="relative mb-20 pt-8">
 			<TableCustom>
+				<!-- @migration-task: migrate this slot by hand, `header-row` is an invalid identifier -->
 				<tr slot="header-row">
 					<th>Name</th>
 					<th>Summary</th>
 					<th>Members</th>
 					<th></th>
 				</tr>
-				<tbody slot="body">
-					{#each instanceGroups as { name, summary, emails }}
-						<tr>
-							<td>
-								<a
-									href="#{name}"
-									on:click={() => {
-										editGroupName = name
-										groupDrawer.openDrawer()
-									}}
-									>{name}
-								</a>
-							</td>
-							<td>
-								{summary ? summary.slice(0, 50) + (summary.length > 50 ? '...' : '') : '-'}
-							</td>
-							<td>{emails?.length ?? 0} members</td>
-							<td
-								><Button
-									variant="default"
-									destructive
-									on:click={async () => {
-										await GroupService.deleteInstanceGroup({ name })
-										sendUserToast(`Instance group ${name} deleted`)
-										loadInstanceGroups()
-									}}>Delete</Button
-								></td
-							>
-						</tr>
-					{/each}
-				</tbody>
+				{#snippet body()}
+					<tbody>
+						{#each instanceGroups as { name, summary, emails }}
+							<tr>
+								<td>
+									<a
+										href="#{name}"
+										onclick={() => {
+											editGroupName = name
+											groupDrawer?.openDrawer()
+										}}
+										>{name}
+									</a>
+								</td>
+								<td>
+									{summary ? summary.slice(0, 50) + (summary.length > 50 ? '...' : '') : '-'}
+								</td>
+								<td>{emails?.length ?? 0} members</td>
+								<td
+									><Button
+										variant="default"
+										destructive
+										on:click={async () => {
+											await GroupService.deleteInstanceGroup({ name })
+											sendUserToast(`Instance group ${name} deleted`)
+											loadInstanceGroups()
+										}}>Delete</Button
+									></td
+								>
+							</tr>
+						{/each}
+					</tbody>
+				{/snippet}
 			</TableCustom>
 		</div>
 	{/if}
diff --git a/frontend/src/routes/(root)/(logged)/oauth/callback_slack/+page.svelte b/frontend/src/routes/(root)/(logged)/oauth/callback_slack/+page.svelte
index 33530bd6cf..ed7061f6b5 100644
--- a/frontend/src/routes/(root)/(logged)/oauth/callback_slack/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/oauth/callback_slack/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { goto } from '$lib/navigation'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import { sendUserToast } from '$lib/toast'
 	import { onMount } from 'svelte'
 	import { OauthService } from '$lib/gen'
@@ -9,9 +9,9 @@
 	import PageHeader from '$lib/components/PageHeader.svelte'
 	import WindmillIcon from '$lib/components/icons/WindmillIcon.svelte'
 
-	let error = $page.url.searchParams.get('error')
-	let code = $page.url.searchParams.get('code') ?? undefined
-	let state = $page.url.searchParams.get('state') ?? undefined
+	let error = page.url.searchParams.get('error')
+	let code = page.url.searchParams.get('code') ?? undefined
+	let state = page.url.searchParams.get('state') ?? undefined
 
 	onMount(async () => {
 		if (error) {
diff --git a/frontend/src/routes/(root)/(logged)/oauth/callback_slack/instance/+page.svelte b/frontend/src/routes/(root)/(logged)/oauth/callback_slack/instance/+page.svelte
index a0ac2fc808..08dab7275b 100644
--- a/frontend/src/routes/(root)/(logged)/oauth/callback_slack/instance/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/oauth/callback_slack/instance/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { goto } from '$lib/navigation'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import { sendUserToast } from '$lib/toast'
 	import { onMount } from 'svelte'
 	import { OauthService } from '$lib/gen'
@@ -8,9 +8,9 @@
 	import PageHeader from '$lib/components/PageHeader.svelte'
 	import WindmillIcon from '$lib/components/icons/WindmillIcon.svelte'
 
-	let error = $page.url.searchParams.get('error')
-	let code = $page.url.searchParams.get('code') ?? undefined
-	let state = $page.url.searchParams.get('state') ?? undefined
+	let error = page.url.searchParams.get('error')
+	let code = page.url.searchParams.get('code') ?? undefined
+	let state = page.url.searchParams.get('state') ?? undefined
 
 	onMount(async () => {
 		if (error) {
diff --git a/frontend/src/routes/(root)/(logged)/oauth/callback_supabase/+page.svelte b/frontend/src/routes/(root)/(logged)/oauth/callback_supabase/+page.svelte
index 575cce2f5b..83bd448a13 100644
--- a/frontend/src/routes/(root)/(logged)/oauth/callback_supabase/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/oauth/callback_supabase/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { goto } from '$lib/navigation'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import { sendUserToast } from '$lib/toast'
 	import { onMount } from 'svelte'
 	import { OauthService } from '$lib/gen'
@@ -11,9 +11,9 @@
 
 	const client_name = 'supabase_wizard'
 
-	let error = $page.url.searchParams.get('error')
-	let code = $page.url.searchParams.get('code') ?? undefined
-	let state = $page.url.searchParams.get('state') ?? undefined
+	let error = page.url.searchParams.get('error')
+	let code = page.url.searchParams.get('code') ?? undefined
+	let state = page.url.searchParams.get('state') ?? undefined
 
 	onMount(async () => {
 		if (error) {
diff --git a/frontend/src/routes/(root)/(logged)/resources/+page.svelte b/frontend/src/routes/(root)/(logged)/resources/+page.svelte
index 0452b14ffe..f72c072e22 100644
--- a/frontend/src/routes/(root)/(logged)/resources/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/resources/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import AppConnect from '$lib/components/AppConnectDrawer.svelte'
 	import CenteredPage from '$lib/components/CenteredPage.svelte'
 	import { Alert, Badge, Button, Skeleton, Tab } from '$lib/components/common'
@@ -247,12 +247,12 @@
 	}
 
 	onMount(() => {
-		const callback = $page.url.searchParams.get('callback')
+		const callback = page.url.searchParams.get('callback')
 		if (callback == 'supabase_wizard') {
 			supabaseConnect?.open?.()
 		}
 
-		const connect_app = $page.url.searchParams.get('connect_app')
+		const connect_app = page.url.searchParams.get('connect_app')
 		if (connect_app) {
 			const rt = connect_app ?? undefined
 			if (rt == 'undefined') {
@@ -428,7 +428,7 @@
 	})
 
 	onMount(() => {
-		let hash = $page.url.hash
+		let hash = page.url.hash
 		if (hash.startsWith('#/resource/')) {
 			console.log('hash', hash)
 			let path = hash.slice(11)
diff --git a/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte b/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte
index b9bcfe9a6a..ff9bcd8a6e 100644
--- a/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/run/[...run]/+page.svelte
@@ -844,7 +844,7 @@
 		{/if}
 		{#if isNotFlow(job?.job_kind)}
 			{#if ['python3', 'bun', 'deno'].includes(job?.language ?? '') && (job?.job_kind == 'script' || isScriptPreview(job?.job_kind))}
-				<ExecutionDuration bind:job bind:longRunning={currentJobIsLongRunning} />
+				<ExecutionDuration {job} bind:longRunning={currentJobIsLongRunning} />
 			{/if}
 			<div class="max-w-7xl mx-auto w-full px-4 mb-10">
 				{#if job?.workflow_as_code_status && job.job_kind !== 'aiagent'}
@@ -909,7 +909,7 @@
 								{/if}
 							{:else if viewTab == 'stats'}
 								<div class="w-full">
-									<MemoryFootprintViewer jobId={job.id} bind:jobUpdateLastFetch />
+									<MemoryFootprintViewer jobId={job.id} {jobUpdateLastFetch} />
 								</div>
 							{:else if job !== undefined && (job.result_stream || (job.type == 'CompletedJob' && job.result !== undefined))}
 								<DisplayResult
diff --git a/frontend/src/routes/(root)/(logged)/scripts/add/+page.svelte b/frontend/src/routes/(root)/(logged)/scripts/add/+page.svelte
index d6f933ce2c..a7a77b03af 100644
--- a/frontend/src/routes/(root)/(logged)/scripts/add/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/scripts/add/+page.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { type NewScript, ScriptService, type Script } from '$lib/gen'
 
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import { defaultScripts, initialArgsStore, workspaceStore } from '$lib/stores'
 	import ScriptBuilder from '$lib/components/ScriptBuilder.svelte'
 	import type { Schema } from '$lib/common'
@@ -17,16 +17,16 @@
 	// Default
 	let schema: Schema = emptySchema()
 
-	const templatePath = $page.url.searchParams.get('template')
-	const hubPath = $page.url.searchParams.get('hub')
-	const showMeta = /true|1/i.test($page.url.searchParams.get('show_meta') ?? '0')
+	const templatePath = page.url.searchParams.get('template')
+	const hubPath = page.url.searchParams.get('hub')
+	const showMeta = /true|1/i.test(page.url.searchParams.get('show_meta') ?? '0')
 
 	let initialArgs = get(initialArgsStore) ?? {}
 	if (get(initialArgsStore)) $initialArgsStore = undefined
 
-	const path = $page.url.searchParams.get('path')
+	const path = page.url.searchParams.get('path')
 
-	const initialState = $page.url.hash != '' ? $page.url.hash.slice(1) : undefined
+	const initialState = page.url.hash != '' ? page.url.hash.slice(1) : undefined
 
 	let scriptBuilder: ScriptBuilder | undefined = $state(undefined)
 
@@ -110,10 +110,10 @@
 	onSaveInitial={(e) => {
 		goto(`/scripts/edit/${e.path}`)
 	}}
-	searchParams={$page.url.searchParams}
+	searchParams={page.url.searchParams}
 	bind:script
 	{showMeta}
-	replaceStateFn={(path) => replaceState(path, $page.state)}
+	replaceStateFn={(path) => replaceState(path, page.state)}
 >
 	<UnsavedConfirmationModal
 		getInitialAndModifiedValues={scriptBuilder?.getInitialAndModifiedValues}
diff --git a/frontend/src/routes/(root)/(logged)/service_logs/+page.svelte b/frontend/src/routes/(root)/(logged)/service_logs/+page.svelte
index df69e86e4a..cab2a14790 100644
--- a/frontend/src/routes/(root)/(logged)/service_logs/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/service_logs/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import { Alert } from '$lib/components/common'
 	import Popover from '$lib/components/Popover.svelte'
 	import ServiceLogsInner from '$lib/components/ServiceLogsInner.svelte'
@@ -7,7 +7,7 @@
 	import { devopsRole } from '$lib/stores'
 	import { Search, AlertTriangle } from 'lucide-svelte'
 
-	let searchTerm = $state($page.url.searchParams.get('query') ?? '')
+	let searchTerm = $state(page.url.searchParams.get('query') ?? '')
 	let queryParseErrors: string[] | undefined = $state(undefined)
 </script>
 
diff --git a/frontend/src/routes/(root)/(logged)/svix/create-webhook/+page@(root).svelte b/frontend/src/routes/(root)/(logged)/svix/create-webhook/+page@(root).svelte
index 30f8351330..2ad7ec0089 100644
--- a/frontend/src/routes/(root)/(logged)/svix/create-webhook/+page@(root).svelte
+++ b/frontend/src/routes/(root)/(logged)/svix/create-webhook/+page@(root).svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy'
+
 	import ScriptPicker from '$lib/components/ScriptPicker.svelte'
 	import { Button } from '$lib/components/common'
 	import { page } from '$app/stores'
@@ -10,16 +12,14 @@
 	import WorkspaceMenu from '$lib/components/sidebar/WorkspaceMenu.svelte'
 	import { Menubar } from '$lib/components/meltComponents'
 
-	let itemPath: string | undefined = undefined
-	let itemKind: 'script' | 'flow' | 'app' = 'script'
+	let itemPath: string | undefined = $state(undefined)
+	let itemKind: 'script' | 'flow' | 'app' = $state('script')
 	let clientName = $page.url.searchParams.get('domain') ?? undefined
 	let redirectURI = $page.url.searchParams.get('redirect_uri')
 
-	let userSettings: UserSettings
-	let token: string | undefined = undefined
-	let scopes: string[] = []
-
-	$: updateTokenAndScope(itemPath)
+	let userSettings: UserSettings | undefined = $state()
+	let token: string | undefined = $state(undefined)
+	let scopes: string[] = $state([])
 
 	async function createWebhook(path: string, kind: 'script' | 'flow' | 'app', token: string) {
 		try {
@@ -67,6 +67,9 @@
 
 		scopes = [`jobs:run:${itemKind}s:${scriptPath}`]
 	}
+	run(() => {
+		updateTokenAndScope(itemPath)
+	})
 </script>
 
 <UserSettings
@@ -97,8 +100,10 @@
 			<div class="flex flex-col items-center gap-3 w-full">
 				<div class="flex flex-row items-center justify-center w-full">
 					<span class="flex justify-end w-full items-right"> Selected Workspace: </span>
-					<Menubar let:createMenu>
-						<WorkspaceMenu strictWorkspaceSelect {createMenu} />
+					<Menubar>
+						{#snippet children({ createMenu })}
+							<WorkspaceMenu strictWorkspaceSelect {createMenu} />
+						{/snippet}
 					</Menubar>
 				</div>
 				<ScriptPicker
@@ -145,7 +150,7 @@
 						size="md"
 						btnClasses="whitespace-normal break-words flex flex-wrap"
 						disabled={itemPath == undefined}
-						on:click={() => userSettings.openDrawer()}
+						on:click={() => userSettings?.openDrawer()}
 					>
 						Generate webhook-specific Token
 					</Button>
diff --git a/frontend/src/routes/(root)/(logged)/user/(user)/accept_invite/+page.svelte b/frontend/src/routes/(root)/(logged)/user/(user)/accept_invite/+page.svelte
index 2cf363a3c9..b9955d585d 100644
--- a/frontend/src/routes/(root)/(logged)/user/(user)/accept_invite/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/user/(user)/accept_invite/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy';
+
 	import { goto } from '$lib/navigation'
 	import { base } from '$lib/base'
 
@@ -10,11 +12,10 @@
 	import { Button } from '$lib/components/common'
 
 	let workspace_id = $page.url.searchParams.get('workspace') ?? ''
-	let username = ''
-	let errorUsername = ''
-	let checking = false
+	let username = $state('')
+	let errorUsername = $state('')
+	let checking = $state(false)
 
-	$: validateName(username)
 
 	async function acceptInvite(): Promise<void> {
 		await UserService.acceptInvite({
@@ -47,7 +48,7 @@
 		}
 	}
 
-	let automateUsernameCreation = false
+	let automateUsernameCreation = $state(false)
 	async function getAutomateUsernameCreationSetting() {
 		automateUsernameCreation =
 			((await SettingService.getGlobal({ key: 'automate_username_creation' })) as any) ?? false
@@ -65,6 +66,9 @@
 		}
 	}
 	getAutomateUsernameCreationSetting()
+	run(() => {
+		validateName(username)
+	});
 </script>
 
 <!-- Enable submit form on enter -->
@@ -73,7 +77,7 @@
 	{#if !automateUsernameCreation}
 		<label class="block pb-2">
 			<span class="text-secondary text-sm">Your username in workspace {workspace_id}:</span>
-			<input on:keyup={handleKey} bind:value={username} class:input-error={errorUsername != ''} />
+			<input onkeyup={handleKey} bind:value={username} class:input-error={errorUsername != ''} />
 			{#if errorUsername}
 				<span class="text-red-500 text-xs">{errorUsername}</span>
 			{/if}
@@ -87,7 +91,7 @@
 			disabled={checking || (!automateUsernameCreation && (errorUsername != '' || !username))}
 			class="place-items-end bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 border rounded"
 			type="button"
-			on:click={acceptInvite}
+			onclick={acceptInvite}
 		>
 			Accept invite
 		</button>
diff --git a/frontend/src/routes/(root)/(logged)/user/(user)/instance_settings/+page.svelte b/frontend/src/routes/(root)/(logged)/user/(user)/instance_settings/+page.svelte
index 91a3f60e0c..900a2df0f5 100644
--- a/frontend/src/routes/(root)/(logged)/user/(user)/instance_settings/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/user/(user)/instance_settings/+page.svelte
@@ -4,7 +4,7 @@
 	import InstanceSettings from '$lib/components/InstanceSettings.svelte'
 	import { Button } from '$lib/components/common'
 
-	let saved = false
+	let saved = $state(false)
 </script>
 
 <CenteredModal large title="Instance settings">
diff --git a/frontend/src/routes/(root)/(logged)/user/(user)/login/+page.svelte b/frontend/src/routes/(root)/(logged)/user/(user)/login/+page.svelte
index 0094e66a40..e0aaa44fc8 100644
--- a/frontend/src/routes/(root)/(logged)/user/(user)/login/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/user/(user)/login/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { goto } from '$lib/navigation'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 
 	import { UserService, WorkspaceService } from '$lib/gen'
 	import {
@@ -20,13 +20,13 @@
 	import Login from '$lib/components/Login.svelte'
 	import { onMount } from 'svelte'
 
-	const email = $page.url.searchParams.get('email') ?? ''
-	const password = $page.url.searchParams.get('password') ?? ''
-	const error = $page.url.searchParams.get('error') ?? undefined
-	const rd = $page.url.searchParams.get('rd') ?? undefined
+	const email = page.url.searchParams.get('email') ?? ''
+	const password = page.url.searchParams.get('password') ?? ''
+	const error = page.url.searchParams.get('error') ?? undefined
+	const rd = page.url.searchParams.get('rd') ?? undefined
 
 	let showPassword = false
-	let firstTime = false
+	let firstTime = $state(false)
 
 	function clearWindmillCloudCookies() {
 		const domain = window.location.hostname
diff --git a/frontend/src/routes/(root)/(logged)/user/(user)/logout/+page@.svelte b/frontend/src/routes/(root)/(logged)/user/(user)/logout/+page@.svelte
index f960e8120c..fa3c7a5d5c 100644
--- a/frontend/src/routes/(root)/(logged)/user/(user)/logout/+page@.svelte
+++ b/frontend/src/routes/(root)/(logged)/user/(user)/logout/+page@.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
 	import { goto } from '$lib/navigation'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import CenteredModal from '$lib/components/CenteredModal.svelte'
 	import WindmillIcon from '$lib/components/icons/WindmillIcon.svelte'
 	import { clearUser } from '$lib/logout'
 	import { onMount } from 'svelte'
 
-	const rd = $page.url.searchParams.get('rd')
+	const rd = page.url.searchParams.get('rd')
 
 	onMount(async () => {
 		try {
@@ -14,7 +14,7 @@
 		} catch (err) {
 			console.error(err)
 		}
-		if ($page.url.pathname != '/user/logout' && $page.url.pathname != '/user/login') {
+		if (page.url.pathname != '/user/logout' && page.url.pathname != '/user/login') {
 			return
 		}
 
diff --git a/frontend/src/routes/(root)/(logged)/user/(user)/workspaces/+page.svelte b/frontend/src/routes/(root)/(logged)/user/(user)/workspaces/+page.svelte
index 045c904e27..26b681683e 100644
--- a/frontend/src/routes/(root)/(logged)/user/(user)/workspaces/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/user/(user)/workspaces/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy'
+
 	import { goto } from '$lib/navigation'
 	import { base } from '$app/paths'
 	import { page } from '$app/stores'
@@ -28,21 +30,24 @@
 	import { refreshSuperadmin } from '$lib/refreshUser'
 	import { buildWorkspaceHierarchy } from '$lib/utils/workspaceHierarchy'
 	import type { UserWorkspace } from '$lib/stores'
+	import { untrack } from 'svelte'
 
-	let invites: WorkspaceInvite[] = []
-	let list_all_as_super_admin: boolean = false
-	let workspaces: UserWorkspace[] | undefined = undefined
-	let showAllForks: boolean = false
+	let invites: WorkspaceInvite[] = $state([])
+	let list_all_as_super_admin: boolean = $state(false)
+	let workspaces: UserWorkspace[] | undefined = $state(undefined)
+	let showAllForks: boolean = $state(false)
 
-	let userSettings: UserSettings
-	let superadminSettings: SuperadminSettings
+	let userSettings: UserSettings | undefined = $state()
+	let superadminSettings: SuperadminSettings | undefined = $state()
 
-	$: rd = $page.url.searchParams.get('rd')
+	let rd = $derived($page.url.searchParams.get('rd'))
 
-	$: if (userSettings && $page.url.hash.startsWith(USER_SETTINGS_HASH)) {
-		const mcpMode = $page.url.hash.includes('-mcp')
-		userSettings.openDrawer(mcpMode)
-	}
+	run(() => {
+		if (userSettings && $page.url.hash.startsWith(USER_SETTINGS_HASH)) {
+			const mcpMode = $page.url.hash.includes('-mcp')
+			userSettings.openDrawer(mcpMode)
+		}
+	})
 
 	async function loadInvites() {
 		try {
@@ -82,22 +87,24 @@
 			workspaces = $userWorkspaces
 		}
 	}
-	$: list_all_as_super_admin != undefined && $userWorkspaces && handleListWorkspaces()
+	run(() => {
+		list_all_as_super_admin != undefined && $userWorkspaces && handleListWorkspaces()
+	})
 
-	$: adminsInstance = workspaces?.find((x) => x.id == 'admins') || $superadmin
+	let adminsInstance = $derived.by(() => workspaces?.find((x) => x.id == 'admins') || $superadmin)
 
 	// Complete workspace hierarchy with all forks
-	$: forkedWorkspacesHierarchy = (() => {
+	let forkedWorkspacesHierarchy = $derived.by(() => {
 		if (!workspaces) return []
 
 		// Filter out admin workspace
 		const nonAdminWorkspaces = workspaces.filter((x) => x.id !== 'admins')
 
 		return buildWorkspaceHierarchy(nonAdminWorkspaces)
-	})()
+	})
 
-	$: groupedNonAdminWorkspaces = forkedWorkspacesHierarchy
-	$: noWorkspaces = $superadmin && groupedNonAdminWorkspaces.length == 0
+	let groupedNonAdminWorkspaces = $derived(forkedWorkspacesHierarchy)
+	let noWorkspaces = $derived($superadmin && groupedNonAdminWorkspaces.length == 0)
 
 	async function getCreateWorkspaceRequireSuperadmin() {
 		const r = await fetch(base + '/api/workspaces/create_workspace_require_superadmin')
@@ -105,21 +112,27 @@
 		createWorkspace = t != 'true'
 	}
 
-	let createWorkspace = $superadmin || isCloudHosted()
+	let createWorkspace = $state($superadmin || isCloudHosted())
 
-	$: if ($superadmin) {
-		createWorkspace = true
-	}
+	run(() => {
+		if ($superadmin) {
+			createWorkspace = true
+		}
+	})
 
-	if (!createWorkspace) {
-		getCreateWorkspaceRequireSuperadmin()
-	}
+	$effect.pre(() => {
+		untrack(() => {
+			if (!createWorkspace) {
+				getCreateWorkspaceRequireSuperadmin()
+			}
+		})
+	})
 
 	refreshSuperadmin()
 	loadInvites()
 	loadWorkspaces()
 
-	let loading = false
+	let loading = $state(false)
 
 	async function speakFriendAndEnterWorkspace(workspaceId: string) {
 		loading = true
@@ -372,7 +385,7 @@
 
 					<button
 						class="text-red-700 font-semibold text-xs p-1"
-						on:click={async () => {
+						onclick={async () => {
 							await UserService.declineInvite({
 								requestBody: { workspace_id: invite.workspace_id }
 							})
@@ -392,7 +405,7 @@
 			<Button
 				variant="default"
 				size="sm"
-				on:click={superadminSettings.openDrawer}
+				on:click={() => superadminSettings?.openDrawer()}
 				startIcon={{ icon: Crown }}
 			>
 				Superadmin settings
@@ -401,7 +414,7 @@
 		<Button
 			variant="default"
 			size="sm"
-			on:click={() => userSettings.openDrawer()}
+			on:click={() => userSettings?.openDrawer()}
 			startIcon={{ icon: Settings }}
 		>
 			User settings
diff --git a/frontend/src/routes/(root)/(logged)/user/cli/+page.svelte b/frontend/src/routes/(root)/(logged)/user/cli/+page.svelte
index ab3c387cec..40caa4dd7e 100644
--- a/frontend/src/routes/(root)/(logged)/user/cli/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/user/cli/+page.svelte
@@ -1,15 +1,18 @@
 <script lang="ts">
 	import { UserService } from '$lib/gen'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import { base } from '$lib/base'
 	import CenteredModal from '$lib/components/CenteredModal.svelte'
 	import { Button } from '$lib/components/common'
 	import { workspaceStore } from '$lib/stores'
 
-	let port = Number($page.url.searchParams.get('port'))
-	let host: string = $page.url.searchParams.get('host') || 'localhost'
-	let scheme: string = $page.url.searchParams.get('scheme') || 'http'
-	port = port == 0 || Number.isNaN(port) ? 80 : port
+	function initPort() {
+		let port = Number(page.url.searchParams.get('port'))
+		return port == 0 || Number.isNaN(port) ? 80 : port
+	}
+	let port = $state(initPort())
+	let host: string = page.url.searchParams.get('host') || 'localhost'
+	let scheme: string = page.url.searchParams.get('scheme') || 'http'
 
 	async function authorizeToken(): Promise<void> {
 		const newToken = await UserService.createToken({
diff --git a/frontend/src/routes/(root)/(logged)/workers/+page.svelte b/frontend/src/routes/(root)/(logged)/workers/+page.svelte
index adf2d6744c..24f17a717c 100644
--- a/frontend/src/routes/(root)/(logged)/workers/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/workers/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { run } from 'svelte/legacy'
+
 	import AssignableTags from '$lib/components/AssignableTags.svelte'
 	import CenteredPage from '$lib/components/CenteredPage.svelte'
 	import { Alert, Button, Skeleton, Tab, Tabs } from '$lib/components/common'
@@ -36,13 +38,12 @@
 	import WorkerRepl from '$lib/components/WorkerRepl.svelte'
 	import Select from '$lib/components/select/Select.svelte'
 
-	let workers: WorkerPing[] | undefined = undefined
-	let workerGroups: Record<string, any> | undefined = undefined
-	let groupedWorkers: [string, [string, WorkerPing[]][]][] = []
+	let workers: WorkerPing[] | undefined = $state(undefined)
+	let workerGroups: Record<string, any> | undefined = $state(undefined)
+	let groupedWorkers: [string, [string, WorkerPing[]][]][] = $state([])
 	let intervalId: number | undefined
 	const splitter = '_%%%_'
-	let customTags: string[] | undefined = undefined
-	$: groupedWorkers = groupWorkers(workers, workerGroups)
+	let customTags: string[] | undefined = $state(undefined)
 
 	function groupWorkers(
 		workers: WorkerPing[] | undefined,
@@ -69,7 +70,7 @@
 		})
 		return grouped
 	}
-	let timeSinceLastPing = 0
+	let timeSinceLastPing = $state(0)
 
 	async function loadWorkers(): Promise<void> {
 		try {
@@ -99,8 +100,8 @@
 		}
 	}
 
-	let defaultTagPerWorkspace: boolean | undefined = undefined
-	let defaultTagWorkspaces: string[] = []
+	let defaultTagPerWorkspace: boolean | undefined = $state(undefined)
+	let defaultTagWorkspaces: string[] = $state([])
 	async function loadDefaultTagsPerWorkspace() {
 		try {
 			defaultTagPerWorkspace = await WorkerService.isDefaultTagsPerWorkspace()
@@ -125,7 +126,6 @@
 	loadWorkers()
 	loadWorkerGroups()
 	loadCustomTags()
-	$: ($superadmin || $devopsRole) && loadDefaultTagsPerWorkspace()
 
 	onDestroy(() => {
 		if (intervalId) {
@@ -136,16 +136,16 @@
 		}
 	})
 
-	let newConfigName = ''
+	let newConfigName = $state('')
 
 	async function addConfig() {
 		await ConfigService.updateConfig({ name: 'worker__' + newConfigName, requestBody: {} })
 		loadWorkerGroups()
 	}
 
-	let importConfigDrawer: Drawer | undefined = undefined
-	let importConfigCode = ''
-	let tag: string = ''
+	let importConfigDrawer: Drawer | undefined = $state(undefined)
+	let importConfigCode = $state('')
+	let tag: string = $state('')
 	async function importSingleWorkerConfig(c: any) {
 		if (typeof c === 'object' && c !== null) {
 			if (!c.name || typeof c.name !== 'string') {
@@ -195,10 +195,8 @@
 		await loadWorkerGroups()
 	}
 
-	let queueMetricsDrawer: QueueMetricsDrawer
-	let selectedTab: string = 'default'
-
-	$: groupedWorkers && selectedTab == 'default' && updateSelectedTabIfDefaultDoesNotExist()
+	let queueMetricsDrawer: QueueMetricsDrawer | undefined = $state()
+	let selectedTab: string = $state('default')
 
 	function updateSelectedTabIfDefaultDoesNotExist() {
 		if (selectedTab == 'default' && !groupedWorkers.some((x) => x[0] == 'default')) {
@@ -206,12 +204,7 @@
 		}
 	}
 
-	let search: string = ''
-
-	$: worker_group = filterWorkerGroupByNames(
-		groupedWorkers?.find((x) => x?.[0] == selectedTab),
-		search
-	)
+	let search: string = $state('')
 
 	function filterWorkerGroupByNames(
 		worker_group: [string, [string, WorkerPing[]][]] | undefined,
@@ -257,12 +250,27 @@
 
 		return Math.ceil(occupancy_rate * 100) + '%'
 	}
-	let newHttpAgentWorkerDrawer: Drawer | undefined = undefined
-	let replForWorkerDrawer: Drawer | undefined = undefined
+	let newHttpAgentWorkerDrawer: Drawer | undefined = $state(undefined)
+	let replForWorkerDrawer: Drawer | undefined = $state(undefined)
 
 	function isWorkerMaybeAlive(last_ping: number | undefined): boolean | undefined {
 		return last_ping != undefined ? last_ping < 60 : undefined
 	}
+	run(() => {
+		groupedWorkers = groupWorkers(workers, workerGroups)
+	})
+	run(() => {
+		;($superadmin || $devopsRole) && loadDefaultTagsPerWorkspace()
+	})
+	run(() => {
+		groupedWorkers && selectedTab == 'default' && updateSelectedTabIfDefaultDoesNotExist()
+	})
+	let worker_group = $derived(
+		filterWorkerGroupByNames(
+			groupedWorkers?.find((x) => x?.[0] == selectedTab),
+			search
+		)
+	)
 </script>
 
 {#if $superadmin || $devopsRole}
@@ -400,7 +408,7 @@
 							floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
 							containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
 						>
-							<svelte:fragment slot="trigger">
+							{#snippet trigger()}
 								<div class="flex items-center gap-2">
 									<Button
 										variant="accent"
@@ -445,8 +453,8 @@
 										</Tooltip>
 									</Button>
 								</div>
-							</svelte:fragment>
-							<svelte:fragment slot="content">
+							{/snippet}
+							{#snippet content()}
 								<div class="flex flex-col gap-2 p-4">
 									<input
 										class="mr-2 h-full"
@@ -469,7 +477,7 @@
 										Create
 									</Button>
 								</div>
-							</svelte:fragment>
+							{/snippet}
 						</Popover>
 					</div>
 				{/if}</div
diff --git a/frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte b/frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte
index fd4780ebb0..dcbc1d171a 100644
--- a/frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/workspace_settings/+page.svelte
@@ -653,7 +653,7 @@
 						platform="slack"
 						teamName={slack_team_name}
 						bind:scriptPath={slackScriptPath}
-						bind:initialPath={slackInitialPath}
+						initialPath={slackInitialPath}
 						bind:itemKind
 						onDisconnect={async () => {
 							await OauthService.disconnectSlack({ workspace: $workspaceStore ?? '' })
@@ -681,7 +681,7 @@
 						platform="teams"
 						teamName={teams_team_id}
 						bind:scriptPath={teamsScriptPath}
-						bind:initialPath={teamsInitialPath}
+						initialPath={teamsInitialPath}
 						bind:itemKind
 						onDisconnect={async () => {
 							await OauthService.disconnectTeams({ workspace: $workspaceStore ?? '' })
diff --git a/frontend/src/routes/(root)/(logged)/workspace_settings/checkout/+page.svelte b/frontend/src/routes/(root)/(logged)/workspace_settings/checkout/+page.svelte
index 3529c45ce4..11c3b2008c 100644
--- a/frontend/src/routes/(root)/(logged)/workspace_settings/checkout/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/workspace_settings/checkout/+page.svelte
@@ -30,7 +30,7 @@
 	}
 </script>
 
-<!-- svelte-ignore missing-declaration -->
+<!-- svelte-ignore missing_declaration -->
 <CenteredModal title="Subscription upgrade {success ? 'succeeded' : 'failed'}">
 	{#if !success}
 		<div class="my-2">
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index a54c75d5b8..efddd0f917 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 
 	import { SvelteToast } from '@zerodevx/svelte-toast'
 	import '$lib/assets/app.css'
@@ -32,7 +32,7 @@
 			src="https://snippet.meticulous.ai/v1/meticulous.js"
 		></script>
 	{/if} -->
-	<title>{$page.data?.stuff?.title ? `${$page.data?.stuff?.title} | ` : ''}Windmill</title>
+	<title>{page.data?.stuff?.title ? `${page.data?.stuff?.title} | ` : ''}Windmill</title>
 </svelte:head>
 
 {@render children?.()}
diff --git a/frontend/src/routes/apps_raw/[workspace]/[...version]/+page.svelte b/frontend/src/routes/apps_raw/[workspace]/[...version]/+page.svelte
index dcbd614a7a..38563cfbd9 100644
--- a/frontend/src/routes/apps_raw/[workspace]/[...version]/+page.svelte
+++ b/frontend/src/routes/apps_raw/[workspace]/[...version]/+page.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-	// import { page } from '$app/stores'
+	// import { page } from '$app/state'
 	// import RawAppPreview from '$lib/components/raw_apps/RawAppPreview.svelte'
 	// import { userStore } from '$lib/stores'
 </script>
 
 <!-- <RawAppPreview
-	workspace={$page.params.workspace}
+	workspace={page.params.workspace}
 	user={$userStore}
-	version={Number($page.params.version)}
+	version={Number(page.params.version)}
 /> -->
diff --git a/frontend/src/routes/flows/dev/+page.svelte b/frontend/src/routes/flows/dev/+page.svelte
index b7a51dad5a..83584a8b84 100644
--- a/frontend/src/routes/flows/dev/+page.svelte
+++ b/frontend/src/routes/flows/dev/+page.svelte
@@ -16,7 +16,7 @@
 	import FlowModuleSchemaMap from '$lib/components/flows/map/FlowModuleSchemaMap.svelte'
 	import FlowEditorPanel from '$lib/components/flows/content/FlowEditorPanel.svelte'
 	import { deepEqual } from 'fast-equals'
-	import { page } from '$app/stores'
+	import { page } from '$app/state'
 	import { userStore, workspaceStore } from '$lib/stores'
 	import { getUserExt } from '$lib/user'
 	import DarkModeToggle from '$lib/components/sidebar/DarkModeToggle.svelte'
@@ -27,14 +27,14 @@
 	import { StepsInputArgs } from '$lib/components/flows/stepsInputArgs.svelte'
 	import { ModulesTestStates } from '$lib/components/modulesTest.svelte'
 
-	let token = $page.url.searchParams.get('wm_token') ?? undefined
-	let workspace = $page.url.searchParams.get('workspace') ?? undefined
-	let themeDarkRaw = $page.url.searchParams.get('activeColorTheme')
+	let token = page.url.searchParams.get('wm_token') ?? undefined
+	let workspace = page.url.searchParams.get('workspace') ?? undefined
+	let themeDarkRaw = page.url.searchParams.get('activeColorTheme')
 	let themeDark = themeDarkRaw == '2' || themeDarkRaw == '4'
 
 	if (token) {
 		OpenAPI.WITH_CREDENTIALS = true
-		OpenAPI.TOKEN = $page.url.searchParams.get('wm_token')!
+		OpenAPI.TOKEN = page.url.searchParams.get('wm_token')!
 	}
 
 	if (workspace) {
diff --git a/frontend/src/routes/gh_success/+page.svelte b/frontend/src/routes/gh_success/+page.svelte
index 01234945d5..3886857126 100644
--- a/frontend/src/routes/gh_success/+page.svelte
+++ b/frontend/src/routes/gh_success/+page.svelte
@@ -3,9 +3,9 @@
 	import { CheckCircle, XCircle } from 'lucide-svelte'
 	import { sendUserToast } from '$lib/toast'
 
-	let isLoading = true
-	let isSuccess = false
-	let errorMessage = ''
+	let isLoading = $state(true)
+	let isSuccess = $state(false)
+	let errorMessage = $state('')
 
 	function closeWindow() {
 		window.close()
@@ -74,7 +74,7 @@
 					The GitHub app has been successfully installed. You can now close this window and return to Windmill to start using the GitHub integration.
 				</p>
 				<button
-					on:click={closeWindow}
+					onclick={closeWindow}
 					class="w-full py-2 px-4 bg-green-600 hover:bg-green-700 text-white font-medium rounded transition-colors"
 				>
 					Close this window
@@ -94,7 +94,7 @@
 					Please try again or contact your administrator for assistance.
 				</p>
 				<button
-					on:click={closeWindow}
+					onclick={closeWindow}
 					class="w-full py-2 px-4 bg-red-600 hover:bg-red-700 text-white font-medium rounded transition-colors"
 				>
 					Close this window
diff --git a/frontend/src/routes/scripts/p/[...path].svelte b/frontend/src/routes/scripts/p/[...path].svelte
index ee7c6eca42..41bd4749ce 100644
--- a/frontend/src/routes/scripts/p/[...path].svelte
+++ b/frontend/src/routes/scripts/p/[...path].svelte
@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
 	export function load({ params }) {
 		return {
 			stuff: { title: `Script ${params.path}` }