migrate to state

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

@@ -7,7 +7,6 @@
 		DraftService
 	} from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
-	import { page } from '$app/stores'
 	import { cleanValueProperties, decodeState, type Value } from '$lib/utils'
 	import { afterNavigate, replaceState } from '$app/navigation'
 	import { goto } from '$lib/navigation'
@@ -17,6 +16,7 @@
 	import UnsavedConfirmationModal from '$lib/components/common/confirmationModal/UnsavedConfirmationModal.svelte'
 	import { stateSnapshot } from '$lib/svelte5Utils.svelte'
 	import { untrack } from 'svelte'
+	import { page } from '$app/state'
 
 	let app = $state(
 		undefined as (AppWithLastVersion & { draft_only?: boolean; value: any }) | undefined
@@ -33,18 +33,18 @@
 		  }
 		| undefined = $state(undefined)
 	let redraw = $state(0)
-	let path = $page.params.path
+	let path = page.params.path ?? ''
 
-	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 initialState = nodraft ? undefined : localStorage.getItem(`app-${$page.params.path}`)
+	const initialState = nodraft ? undefined : localStorage.getItem(`app-${page.params.path}`)
 	let stateLoadedFromLocalStorage =
 		initialState != undefined ? decodeState(initialState) : undefined
 
@@ -229,13 +229,13 @@
 				summary={app.summary}
 				app={app.value}
 				newPath={app.path}
-				path={$page.params.path}
+				path={page.params.path ?? ''}
 				policy={app.policy}
 				bind:savedApp
 				{diffDrawer}
 				version={app.versions ? app.versions[app.versions.length - 1] : undefined}
 				newApp={false}
-				replaceStateFn={(path) => replaceState(path, $page.state)}
+				replaceStateFn={(path) => replaceState(path, page.state)}
 				gotoFn={(path, opt) => goto(path, opt)}
 			>
 				{#snippet unsavedConfirmationModal({

frontend/src/routes/(root)/(logged)/apps/get/[...path]/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { goto } from '$app/navigation'
-	import { page } from '$app/stores'
 	import { base } from '$lib/base'
 	import AppPreview from '$lib/components/apps/editor/AppPreview.svelte'
 	import type { EditorBreakpoint } from '$lib/components/apps/types'
@@ -12,20 +11,20 @@
 	import { Pen } from 'lucide-svelte'
 	import { writable } from 'svelte/store'
 	import { twMerge } from 'tailwind-merge'
-
+	import { page } from '$app/state'
 	let app: (AppWithLastVersion & { value: any }) | undefined = undefined
 	let can_write = false
 
 	async function loadApp() {
 		app = await AppService.getAppLiteByPath({
 			workspace: $workspaceStore!,
-			path: $page.params.path
+			path: page.params.path ?? ''
 		})
 		can_write = canWrite(app?.path, app?.extra_perms!, $userStore)
 	}
 
-	$: if ($workspaceStore && $page.params.path) {
-		if (app && $page.params.path === app.path) {
+	$: if ($workspaceStore && page.params.path) {
+		if (app && page.params.path === app.path) {
 			console.log('App already loaded')
 		} else {
 			loadApp()
@@ -34,8 +33,8 @@
 
 	const breakpoint = writable<EditorBreakpoint>('lg')
 
-	const hideRefreshBar = $page.url.searchParams.get('hideRefreshBar') === 'true'
-	const hideEditBtn = $page.url.searchParams.get('hideEditBtn') === 'true'
+	const hideRefreshBar = page.url.searchParams.get('hideRefreshBar') === 'true'
+	const hideEditBtn = page.url.searchParams.get('hideEditBtn') === 'true'
 </script>
 
 {#if app}
@@ -54,13 +53,13 @@
 					name: $userStore?.name,
 					username: $userStore?.username,
 					groups: $userStore?.groups,
-					query: Object.fromEntries($page.url.searchParams.entries()),
-					hash: $page.url.hash.substring(1)
+					query: Object.fromEntries(page.url.searchParams.entries()),
+					hash: page.url.hash.substring(1)
 				}}
 				workspace={$workspaceStore ?? ''}
 				summary={app.summary}
 				app={app.value}
-				appPath={$page.params.path}
+				appPath={page.params.path}
 				{breakpoint}
 				policy={app.policy}
 				isEditor={false}

frontend/src/routes/(root)/(logged)/apps/get_raw/[version]/[...path]/+page.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
-	import { page } from '$app/stores'
 	import { Skeleton } from '$lib/components/common'
 	import { userStore, workspaceStore } from '$lib/stores'
 	import { sendUserToast } from '$lib/toast'
 	import { onDestroy, onMount } from 'svelte'
-
+	import { page } from '$app/state'
 	let loaded = false
 
 	onMount(async () => {
@@ -19,7 +18,7 @@
 		/* @vite-ignore */
 		await import(
 			/* webpackIgnore: true */
-			`/api/w/${$workspaceStore}/raw_apps/get_data/${$page.params.version}/${$page.params.path}`
+			`/api/w/${$workspaceStore}/raw_apps/get_data/${page.params.version}/${page.params.path}`
 		)
 		try {
 			globalThis.render()

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

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { AppService, DraftService } from '$lib/gen'
 	import { workspaceStore } from '$lib/stores'
-	import { page } from '$app/stores'
 	import { cleanValueProperties, decodeState, type Value } from '$lib/utils'
 	import { afterNavigate, replaceState } from '$app/navigation'
 	import { goto } from '$lib/navigation'
@@ -10,6 +9,7 @@
 	import type { HiddenRunnable } from '$lib/components/apps/types'
 	import RawAppEditor from '$lib/components/raw_apps/RawAppEditor.svelte'
 	import { stateSnapshot } from '$lib/svelte5Utils.svelte'
+	import { page } from '$app/state'
 
 	let files: Record<string, string> | undefined = undefined
 	let runnables = {}
@@ -33,15 +33,15 @@
 		  }
 		| undefined = undefined
 	let redraw = 0
-	let path = $page.params.path
+	let path = page.params.path ?? ''
 
-	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)
 		}
 	})
 
@@ -54,7 +54,7 @@
 		newPath = app.path
 	}
 
-	const initialState = nodraft ? undefined : localStorage.getItem(`rawapp-${$page.params.path}`)
+	const initialState = nodraft ? undefined : localStorage.getItem(`rawapp-${page.params.path}`)
 	let stateLoadedFromLocalStorage =
 		initialState != undefined ? decodeState(initialState) : undefined
 
@@ -215,7 +215,7 @@
 				initRunnables={runnables}
 				{summary}
 				{newPath}
-				path={$page.params.path}
+				path={page.params.path ?? ''}
 				{policy}
 				bind:savedApp
 				{diffDrawer}

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

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { base } from '$app/paths'
-	import { page } from '$app/stores'
 	import { Button, Skeleton } from '$lib/components/common'
 	import { AppService, type AppWithLastVersion } from '$lib/gen'
 	import { userStore, workspaceStore } from '$lib/stores'
@@ -8,22 +7,25 @@
 	import { Pen } from 'lucide-svelte'
 	import RawAppPreview from '$lib/components/raw_apps/RawAppPreview.svelte'
 	import type { HiddenRunnable } from '$lib/components/apps/types'
+	import { page } from '$app/state'
 
-	const hideEditBtn = $page.url.searchParams.get('hideEditBtn') === 'true'
+	const hideEditBtn = page.url.searchParams.get('hideEditBtn') === 'true'
 
-	let app: AppWithLastVersion | undefined = undefined
+	let app = $state(undefined) as AppWithLastVersion | undefined
 
 	async function loadApp() {
 		console.log('Loading app')
 		app = await AppService.getAppLiteByPath({
 			workspace: $workspaceStore!,
-			path: $page.params.path
+			path: page.params.path ?? ''
 		})
 	}
 
-	$: $workspaceStore && loadApp()
+	$effect(() => {
+		$workspaceStore && loadApp()
+	})
 
-	$: can_write = canWrite($page.params.path, app?.extra_perms ?? {}, $userStore)
+	let can_write = $derived(canWrite(page.params.path ?? '', app?.extra_perms ?? {}, $userStore))
 	function getRunnables(app: AppWithLastVersion) {
 		return (app?.value?.runnables ?? {}) as Record<string, HiddenRunnable>
 	}
@@ -37,7 +39,7 @@
 		<Skeleton layout={[10]} />
 	{:else}
 		<RawAppPreview
-			path={$page.params.path}
+			path={page.params.path ?? ''}
 			workspace={$workspaceStore}
 			user={$userStore}
 			runnables={getRunnables(app)}
@@ -51,7 +53,7 @@
 				startIcon={{ icon: Pen }}
 				variant="border"
 				btnClasses="bg-white"
-				href="{base}/apps_raw/edit/{$page.params.path}?nodraft=true">Edit</Button
+				href="{base}/apps_raw/edit/{page.params.path}?nodraft=true">Edit</Button
 			>
 		</div>
 	{/if}

frontend/src/routes/(root)/(logged)/deploy/[kind]/[...path]/+page.svelte

@@ -1,18 +1,17 @@
 <script lang="ts">
-	import { page } from '$app/stores'
 	import CenteredPage from '$lib/components/CenteredPage.svelte'
 	import DeployWorkspace from '$lib/components/DeployWorkspace.svelte'
-
-	$: kind = asKind($page.params.kind)
+	import { page } from '$app/state'
 
 	function asKind(
 		kind: string
 	): 'script' | 'resource' | 'schedule' | 'variable' | 'flow' | 'app' | 'raw_app' {
 		return kind as 'script' | 'resource' | 'schedule' | 'variable' | 'flow' | 'app' | 'raw_app'
 	}
+	let kind = $derived(asKind(page.params.kind ?? ''))
 </script>
 
 <CenteredPage>
-	<h1 class="mt-6">Deploy {$page.params.kind} {$page.params.path}</h1>
-	<DeployWorkspace {kind} initialPath={$page.params.path} />
+	<h1 class="mt-6">Deploy {page.params.kind} {page.params.path}</h1>
+	<DeployWorkspace {kind} initialPath={page.params.path} />
 </CenteredPage>

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

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { FlowService, type Flow, DraftService } from '$lib/gen'
 
-	import { page } from '$app/stores'
 	import FlowBuilder from '$lib/components/FlowBuilder.svelte'
 	import { initialArgsStore, workspaceStore } from '$lib/stores'
 	import {
@@ -23,10 +22,11 @@
 	import type { Trigger } from '$lib/components/triggers/utils'
 	import { untrack } from 'svelte'
 	import type { stepState } from '$lib/components/stepHistoryLoader.svelte'
+	import { page } from '$app/state'
 
 	let version: undefined | number = $state(undefined)
-	let nodraft = $page.url.searchParams.get('nodraft')
-	const initialState = nodraft ? undefined : localStorage.getItem(`flow-${$page.params.path}`)
+	let nodraft = page.url.searchParams.get('nodraft')
+	const initialState = nodraft ? undefined : localStorage.getItem(`flow-${page.params.path}`)
 	let stateLoadedFromUrl = initialState != undefined ? decodeState(initialState) : undefined
 	let initialArgs = $state({})
 	if ($initialArgsStore) {
@@ -42,9 +42,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)
 		}
 	})
 
@@ -85,7 +85,7 @@
 		loading = true
 		let flow: Flow
 		let statePath = stateLoadedFromUrl?.path
-		if (stateLoadedFromUrl != undefined && statePath == $page.params.path) {
+		if (stateLoadedFromUrl != undefined && statePath == page.params.path) {
 			// Currently there is no way to get version of flow with flow.
 			// So we have to request it here
 			version = (
@@ -155,13 +155,13 @@
 			version = (
 				await FlowService.getFlowLatestVersion({
 					workspace: $workspaceStore!,
-					path: $page.params.path
+					path: page.params.path ?? ''
 				})
 			).id
 
 			const flowWithDraft = await FlowService.getFlowByPathWithDraft({
 				workspace: $workspaceStore!,
-				path: $page.params.path
+				path: page.params.path ?? ''
 			})
 			savedFlow = {
 				...structuredClone($state.snapshot(flowWithDraft)),
@@ -223,7 +223,7 @@
 
 		await initFlow(flow, flowStore, flowStateStore)
 		loading = false
-		selectedId = stateLoadedFromUrl?.selectedId ?? $page.url.searchParams.get('selected')
+		selectedId = stateLoadedFromUrl?.selectedId ?? page.url.searchParams.get('selected')
 		flowBuilder?.loadFlowState()
 	}
 
@@ -270,7 +270,7 @@
 <DiffDrawer bind:this={diffDrawer} {restoreDeployed} {restoreDraft} />
 {#if notFound}
 	<div class="flex flex-col items-center justify-center h-full">
-		<h1 class="text-2xl font-bold">Flow not found at path {$page.params.path}</h1>
+		<h1 class="text-2xl font-bold">Flow not found at path {page.params.path}</h1>
 		<p class="text-gray-500">The flow you are looking for does not exist.</p>
 	</div>
 {:else}
@@ -289,7 +289,7 @@
 		}}
 		{flowStore}
 		{flowStateStore}
-		initialPath={$page.params.path}
+		initialPath={page.params.path ?? ''}
 		newFlow={false}
 		{selectedId}
 		{initialArgs}

frontend/src/routes/(root)/(logged)/flows/get/[...path]/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { page } from '$app/stores'
 	import {
 		FlowService,
 		JobService,
@@ -63,6 +62,7 @@
 	import FlowAssetsHandler, {
 		initFlowGraphAssetsCtx
 	} from '$lib/components/flows/FlowAssetsHandler.svelte'
+	import { page } from '$app/state'
 
 	let flow: Flow | undefined = $state()
 	let can_write = false
@@ -385,7 +385,7 @@
 	let rightPaneSelected = $state('saved_inputs')
 	let savedInputsV2: SavedInputsV2 | undefined = $state(undefined)
 	let flowHistory: FlowHistory | undefined = $state(undefined)
-	let path = $derived($page.params.path)
+	let path = $derived(page.params.path ?? '')
 	$effect(() => {
 		const cliTrigger = triggersState.triggers.find((t) => t.type === 'cli')
 		if (cliTrigger) {
@@ -395,7 +395,7 @@
 		}
 	})
 	$effect(() => {
-		if ($workspaceStore && $userStore && $page.params.path) {
+		if ($workspaceStore && $userStore && page.params.path) {
 			if (previousPath !== path) {
 				previousPath = path
 				untrack(() => {

frontend/src/routes/(root)/(logged)/oauth/callback/[client_name]/+page.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { page } from '$app/stores'
 	import { onMount } from 'svelte'
 	import { OauthService } from '$lib/gen'
 	import CenteredPage from '$lib/components/CenteredPage.svelte'
 	import PageHeader from '$lib/components/PageHeader.svelte'
 	import { Loader2 } from 'lucide-svelte'
 	import { sendUserToast } from '$lib/toast'
+	import { page } from '$app/state'
 
-	let client_name = $page.params.client_name
-	let error = $page.url.searchParams.get('error')
-	let code = $page.url.searchParams.get('code') ?? undefined
-	let state = $page.url.searchParams.get('state') ?? undefined
+	let client_name = page.params.client_name
+	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) {
@@ -29,12 +29,12 @@
 		} else if (code && state) {
 			try {
 				const extraParams = Object.fromEntries(
-					Array.from($page.url.searchParams.entries()).filter(
+					Array.from(page.url.searchParams.entries()).filter(
 						([key]) => key !== 'code' && key !== 'state' && key !== 'error'
 					)
 				)
 				const res = await OauthService.connectCallback({
-					clientName: client_name,
+					clientName: client_name ?? '',
 					requestBody: { code, state }
 				})
 				const message = { type: 'success', res, resource_type: client_name, extra: extraParams }

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

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { stopPropagation } from 'svelte/legacy'
 
-	import { page } from '$app/stores'
 	import { base } from '$lib/base'
 	import {
 		JobService,
@@ -96,7 +95,7 @@
 		initFlowGraphAssetsCtx
 	} from '$lib/components/flows/FlowAssetsHandler.svelte'
 	import JobAssetsViewer from '$lib/components/assets/JobAssetsViewer.svelte'
-
+	import { page } from '$app/state'
 	let job: (Job & { result?: any; result_stream?: string }) | undefined = $state()
 	let jobUpdateLastFetch: Date | undefined = $state()
 
@@ -183,7 +182,7 @@
 	}
 
 	async function getJob() {
-		await jobLoader?.watchJob($page.params.run, {
+		await jobLoader?.watchJob(page.params.run ?? '', {
 			change(job: Job & { result_stream?: string }) {
 				if (!manuallySetLogs && viewTab == 'logs' && job.result_stream) {
 					viewTab = 'result'
@@ -378,10 +377,10 @@
 		job?.id && lastJobId !== job.id && untrack(() => getConcurrencyKey(job))
 	})
 	$effect(() => {
-		$workspaceStore && $page.params.run && untrack(() => onRunsPageChange())
+		$workspaceStore && page.params.run && untrack(() => onRunsPageChange())
 	})
 	$effect(() => {
-		$workspaceStore && $page.params.run && jobLoader && untrack(() => onRunsPageChangeWithLoader())
+		$workspaceStore && page.params.run && jobLoader && untrack(() => onRunsPageChangeWithLoader())
 	})
 	$effect(() => {
 		selectedJobStep !== undefined && untrack(() => onSelectedJobStepChange())
@@ -445,7 +444,7 @@
 {#if notfound || (job?.workspace_id != undefined && $workspaceStore != undefined && job?.workspace_id != $workspaceStore)}
 	<div class="max-w-7xl px-4 mx-auto w-full">
 		<div class="flex flex-col gap-6">
-			<h1 class="text-red-400 mt-6">Job {$page.params.run} not found in {$workspaceStore}</h1>
+			<h1 class="text-red-400 mt-6">Job {page.params.run} not found in {$workspaceStore}</h1>
 			<h2>Are you in the right workspace?</h2>
 			<div class="flex flex-col gap-2">
 				{#each $userWorkspaces as workspace}
@@ -453,7 +452,7 @@
 						<Button
 							variant="border"
 							on:click={() => {
-								goto(`/run/${$page.params.run}?workspace=${workspace.id}`)
+								goto(`/run/${page.params.run}?workspace=${workspace.id}`)
 							}}
 						>
 							See in {workspace.name}

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

@@ -11,7 +11,6 @@
 		OpenAPI
 	} from '$lib/gen'
 
-	import { page } from '$app/stores'
 	import { sendUserToast } from '$lib/toast'
 	import { userStore, workspaceStore, userWorkspaces } from '$lib/stores'
 	import { Button, Drawer, DrawerContent, Skeleton } from '$lib/components/common'
@@ -46,6 +45,7 @@
 		type BatchReRunOptions
 	} from '$lib/components/runs/BatchReRunOptionsPane.svelte'
 	import { untrack } from 'svelte'
+	import { page } from '$app/state'
 
 	let jobs: Job[] | undefined = $state()
 	let selectedIds: string[] = $state([])
@@ -56,108 +56,108 @@
 
 	// All Filters
 	// Filter by
-	let path: string | null = $state($page.params.path)
-	let worker: string | null = $state($page.url.searchParams.get('worker'))
-	let user: string | null = $state($page.url.searchParams.get('user'))
-	let folder: string | null = $state($page.url.searchParams.get('folder'))
-	let label: string | null = $state($page.url.searchParams.get('label'))
-	let allowWildcards: boolean = $state($page.url.searchParams.get('allow_wildcards') == 'true')
-	let concurrencyKey: string | null = $state($page.url.searchParams.get('concurrency_key'))
-	let tag: string | null = $state($page.url.searchParams.get('tag'))
+	let path: string | null = $state(page.params.path ?? null)
+	let worker: string | null = $state(page.url.searchParams.get('worker'))
+	let user: string | null = $state(page.url.searchParams.get('user'))
+	let folder: string | null = $state(page.url.searchParams.get('folder'))
+	let label: string | null = $state(page.url.searchParams.get('label'))
+	let allowWildcards: boolean = $state(page.url.searchParams.get('allow_wildcards') == 'true')
+	let concurrencyKey: string | null = $state(page.url.searchParams.get('concurrency_key'))
+	let tag: string | null = $state(page.url.searchParams.get('tag'))
 	// Rest of filters handled by RunsFilter
 	let success: 'running' | 'suspended' | 'waiting' | 'success' | 'failure' | undefined = $state(
-		($page.url.searchParams.get('success') ?? undefined) as
+		(page.url.searchParams.get('success') ?? undefined) as
 			| 'running'
 			| 'success'
 			| 'failure'
 			| undefined
 	)
 	let isSkipped: boolean | undefined = $state(
-		$page.url.searchParams.get('is_skipped') != undefined
-			? $page.url.searchParams.get('is_skipped') == 'true'
+		page.url.searchParams.get('is_skipped') != undefined
+			? page.url.searchParams.get('is_skipped') == 'true'
 			: false
 	)
 
 	let showSchedules: boolean = $state(
-		$page.url.searchParams.get('show_schedules') != undefined
-			? $page.url.searchParams.get('show_schedules') == 'true'
+		page.url.searchParams.get('show_schedules') != undefined
+			? page.url.searchParams.get('show_schedules') == 'true'
 			: localStorage.getItem('show_schedules_in_run') == 'false'
 				? false
 				: true
 	)
 	let showFutureJobs: boolean = $state(
-		$page.url.searchParams.get('show_future_jobs') != undefined
-			? $page.url.searchParams.get('show_future_jobs') == 'true'
+		page.url.searchParams.get('show_future_jobs') != undefined
+			? page.url.searchParams.get('show_future_jobs') == 'true'
 			: localStorage.getItem('show_future_jobs') == 'false'
 				? false
 				: true
 	)
 
 	let argFilter: any = $state(
-		$page.url.searchParams.get('arg')
-			? JSON.parse(decodeURIComponent($page.url.searchParams.get('arg') ?? '{}'))
+		page.url.searchParams.get('arg')
+			? JSON.parse(decodeURIComponent(page.url.searchParams.get('arg') ?? '{}'))
 			: undefined
 	)
 	let resultFilter: any = $state(
-		$page.url.searchParams.get('result')
-			? JSON.parse(decodeURIComponent($page.url.searchParams.get('result') ?? '{}'))
+		page.url.searchParams.get('result')
+			? JSON.parse(decodeURIComponent(page.url.searchParams.get('result') ?? '{}'))
 			: undefined
 	)
 
 	// Handled on the main page
-	let minTs = $state($page.url.searchParams.get('min_ts') ?? undefined)
-	let maxTs = $state($page.url.searchParams.get('max_ts') ?? undefined)
-	let schedulePath = $state($page.url.searchParams.get('schedule_path') ?? undefined)
-	let jobKindsCat = $state($page.url.searchParams.get('job_kinds') ?? 'runs')
-	let allWorkspaces = $state($page.url.searchParams.get('all_workspaces') == 'true')
+	let minTs = $state(page.url.searchParams.get('min_ts') ?? undefined)
+	let maxTs = $state(page.url.searchParams.get('max_ts') ?? undefined)
+	let schedulePath = $state(page.url.searchParams.get('schedule_path') ?? undefined)
+	let jobKindsCat = $state(page.url.searchParams.get('job_kinds') ?? 'runs')
+	let allWorkspaces = $state(page.url.searchParams.get('all_workspaces') == 'true')
 	let lastFetchWentToEnd = $state(false)
 
 	function loadFromQuery() {
-		path = $page.params.path
-		user = $page.url.searchParams.get('user')
-		folder = $page.url.searchParams.get('folder')
-		label = $page.url.searchParams.get('label')
-		concurrencyKey = $page.url.searchParams.get('concurrency_key')
-		tag = $page.url.searchParams.get('tag')
-		worker = $page.url.searchParams.get('worker')
-		allowWildcards = $page.url.searchParams.get('allow_wildcards') == 'true'
+		path = page.params.path ?? null
+		user = page.url.searchParams.get('user')
+		folder = page.url.searchParams.get('folder')
+		label = page.url.searchParams.get('label')
+		concurrencyKey = page.url.searchParams.get('concurrency_key')
+		tag = page.url.searchParams.get('tag')
+		worker = page.url.searchParams.get('worker')
+		allowWildcards = page.url.searchParams.get('allow_wildcards') == 'true'
 		// Rest of filters handled by RunsFilter
-		success = ($page.url.searchParams.get('success') ?? undefined) as
+		success = (page.url.searchParams.get('success') ?? undefined) as
 			| 'running'
 			| 'success'
 			| 'failure'
 			| undefined
 		isSkipped =
-			$page.url.searchParams.get('is_skipped') != undefined
-				? $page.url.searchParams.get('is_skipped') == 'true'
+			page.url.searchParams.get('is_skipped') != undefined
+				? page.url.searchParams.get('is_skipped') == 'true'
 				: false
 
 		showSchedules =
-			$page.url.searchParams.get('show_schedules') != undefined
-				? $page.url.searchParams.get('show_schedules') == 'true'
+			page.url.searchParams.get('show_schedules') != undefined
+				? page.url.searchParams.get('show_schedules') == 'true'
 				: localStorage.getItem('show_schedules_in_run') == 'false'
 					? false
 					: true
 		showFutureJobs =
-			$page.url.searchParams.get('show_future_jobs') != undefined
-				? $page.url.searchParams.get('show_future_jobs') == 'true'
+			page.url.searchParams.get('show_future_jobs') != undefined
+				? page.url.searchParams.get('show_future_jobs') == 'true'
 				: localStorage.getItem('show_future_jobs') == 'false'
 					? false
 					: true
 
-		argFilter = $page.url.searchParams.get('arg')
-			? JSON.parse(decodeURIComponent($page.url.searchParams.get('arg') ?? '{}'))
+		argFilter = page.url.searchParams.get('arg')
+			? JSON.parse(decodeURIComponent(page.url.searchParams.get('arg') ?? '{}'))
 			: undefined
-		resultFilter = $page.url.searchParams.get('result')
-			? JSON.parse(decodeURIComponent($page.url.searchParams.get('result') ?? '{}'))
+		resultFilter = page.url.searchParams.get('result')
+			? JSON.parse(decodeURIComponent(page.url.searchParams.get('result') ?? '{}'))
 			: undefined
 
 		// Handled on the main page
-		minTs = $page.url.searchParams.get('min_ts') ?? undefined
-		maxTs = $page.url.searchParams.get('max_ts') ?? undefined
-		schedulePath = $page.url.searchParams.get('schedule_path') ?? undefined
-		jobKindsCat = $page.url.searchParams.get('job_kinds') ?? 'runs'
-		allWorkspaces = $page.url.searchParams.get('all_workspaces') == 'true'
+		minTs = page.url.searchParams.get('min_ts') ?? undefined
+		maxTs = page.url.searchParams.get('max_ts') ?? undefined
+		schedulePath = page.url.searchParams.get('schedule_path') ?? undefined
+		jobKindsCat = page.url.searchParams.get('job_kinds') ?? 'runs'
+		allWorkspaces = page.url.searchParams.get('all_workspaces') == 'true'
 	}
 
 	let queue_count: Tweened<number> | undefined = $state(undefined)
@@ -202,7 +202,7 @@
 	let externalJobs: Job[] | undefined = $state(undefined)
 
 	let graph: 'RunChart' | 'ConcurrencyChart' = $state(
-		typeOfChart($page.url.searchParams.get('graph'))
+		typeOfChart(page.url.searchParams.get('graph'))
 	)
 	let graphIsRunsChart: boolean = $state(untrack(() => graph) === 'RunChart')
 
@@ -330,8 +330,8 @@
 
 		let newUrl = `${base}/runs${newPath}?${searchParams.toString()}`
 		if (
-			$page.url.searchParams.toString() != searchParams.toString() ||
-			$page.url.pathname != newUrl.split('?')[0]
+			page.url.searchParams.toString() != searchParams.toString() ||
+			page.url.pathname != newUrl.split('?')[0]
 		) {
 			// replaceState(newUrl.toString(), $page.state)
 			goto(newUrl.toString(), { replaceState: replaceState, keepFocus: true })

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

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { ScriptService, type NewScript, type NewScriptWithDraft, DraftService } from '$lib/gen'
 
-	import { page } from '$app/stores'
 	import { initialArgsStore, workspaceStore } from '$lib/stores'
 	import ScriptBuilder from '$lib/components/ScriptBuilder.svelte'
 	import { decodeState, cleanValueProperties, orderedJsonStringify } from '$lib/utils'
@@ -14,14 +13,15 @@
 	import type { Trigger } from '$lib/components/triggers/utils'
 	import { get } from 'svelte/store'
 	import { untrack } from 'svelte'
+	import { page } from '$app/state'
 
 	let initialState = window.location.hash != '' ? window.location.hash.slice(1) : undefined
 	let initialArgs = get(initialArgsStore) ?? {}
 	if (get(initialArgsStore)) $initialArgsStore = undefined
 
-	let topHash = $page.url.searchParams.get('topHash') ?? undefined
+	let topHash = page.url.searchParams.get('topHash') ?? undefined
 
-	let hash = $page.url.searchParams.get('hash') ?? undefined
+	let hash = page.url.searchParams.get('hash') ?? undefined
 
 	let scriptLoadedFromUrl = initialState != undefined ? decodeState(initialState) : undefined
 
@@ -40,7 +40,7 @@
 
 	async function loadScript(): Promise<void> {
 		fullyLoaded = false
-		if (scriptLoadedFromUrl != undefined && scriptLoadedFromUrl.path == $page.params.path) {
+		if (scriptLoadedFromUrl != undefined && scriptLoadedFromUrl.path == page.params.path) {
 			script = scriptLoadedFromUrl
 			reloadAction = async () => {
 				scriptLoadedFromUrl = undefined
@@ -92,7 +92,7 @@
 			} else {
 				const scriptWithDraft = await ScriptService.getScriptByPathWithDraft({
 					workspace: $workspaceStore!,
-					path: $page.params.path
+					path: page.params.path ?? ''
 				})
 				savedScript = structuredClone($state.snapshot(scriptWithDraft))
 				if (scriptWithDraft.draft != undefined) {
@@ -145,7 +145,7 @@
 		// hash
 		// ? await ScriptService.getScriptByHash({
 		// 		workspace: $workspaceStore!,
-		// 		hash: $page.params.hash
+		// 		hash: page.params.hash
 		//   })
 		// : await ScriptService.getScriptByPathWithDraft({
 		// 		workspace: $workspaceStore!,
@@ -212,7 +212,7 @@
 		{initialArgs}
 		{diffDrawer}
 		{savedPrimarySchedule}
-		searchParams={$page.url.searchParams}
+		searchParams={page.url.searchParams}
 		onDeploy={(e) => {
 			goto(`/scripts/get/${e.hash}?workspace=${$workspaceStore}`)
 		}}
@@ -223,7 +223,7 @@
 			goto(`/scripts/get/${e.path}?workspace=${$workspaceStore}`)
 		}}
 		replaceStateFn={(path) => {
-			replaceState(path, $page.state)
+			replaceState(path, page.state)
 		}}
 	>
 		<UnsavedConfirmationModal

frontend/src/routes/(root)/(logged)/scripts/get/[...hash]/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { page } from '$app/stores'
 	import { base } from '$lib/base'
 	import {
 		JobService,
@@ -83,6 +82,7 @@
 	import TriggersBadge from '$lib/components/graph/renderers/triggers/TriggersBadge.svelte'
 	import TriggersEditor from '$lib/components/triggers/TriggersEditor.svelte'
 	import { Triggers } from '$lib/components/triggers/triggers.svelte'
+	import { page } from '$app/state'
 
 	let script: Script | undefined = $state()
 	let topHash: string | undefined = $state()
@@ -516,9 +516,9 @@
 	let loading = $derived(!script)
 	$effect(() => {
 		if ($workspaceStore) {
-			if (previousHash != $page.params.hash) {
-				previousHash = $page.params.hash
-				untrack(() => loadScript($page.params.hash))
+			if (previousHash != page.params.hash) {
+				previousHash = page.params.hash
+				untrack(() => loadScript(page.params.hash ?? ''))
 			}
 		}
 	})
@@ -529,7 +529,7 @@
 	bind:this={moveDrawer}
 	on:update={async (e) => {
 		await goto('/scripts/get/' + e.detail + `?workspace=${$workspaceStore}`)
-		loadScript($page.params.hash)
+		loadScript(page.params.hash ?? '')
 	}}
 />
 

frontend/src/routes/a/[...path]/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { BROWSER } from 'esm-env'
-	import { page } from '$app/stores'
 	import { base } from '$lib/base'
 	import AppPreview from '$lib/components/apps/editor/AppPreview.svelte'
 	import { IS_APP_PUBLIC_CONTEXT_KEY, type EditorBreakpoint } from '$lib/components/apps/types'
@@ -20,6 +19,7 @@
 	import { User, UserRoundX } from 'lucide-svelte'
 	import { goto } from '$app/navigation'
 	import { sendUserToast } from '$lib/toast'
+	import { page } from '$app/state'
 
 	let app: (AppWithLastVersion & { value: any }) | undefined = undefined
 	let notExists = false
@@ -55,7 +55,7 @@
 		}
 	}
 
-	const parsedCustomPath = parseCustomPath($page.params.path)
+	const parsedCustomPath = parseCustomPath(page.params.path ?? '')
 
 	async function loadApp() {
 		if (parsedCustomPath.jwt) {
@@ -142,7 +142,7 @@
 					app = app
 				}}
 				popup
-				rd={$page.url.toString()}
+				rd={page.url.toString()}
 			/>
 		{/if}
 	</div>
@@ -163,10 +163,10 @@
 					name: $userStore?.name,
 					groups: $userStore?.groups,
 					username: $userStore?.username,
-					query: Object.fromEntries($page.url.searchParams.entries()),
-					hash: $page.url.hash.substring(1)
+					query: Object.fromEntries(page.url.searchParams.entries()),
+					hash: page.url.hash.substring(1)
 				}}
-				workspace={$page.params.workspace}
+				workspace={page.params.workspace}
 				summary={app.summary}
 				app={app.value}
 				appPath={app.path}

frontend/src/routes/approve/[workspace]/[job]/[resume]/[hmac]/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { type Job, JobService } from '$lib/gen'
-	import { page } from '$app/stores'
 	import { base } from '$lib/base'
 	import Button from '$lib/components/common/button/Button.svelte'
 	import CenteredModal from '$lib/components/CenteredModal.svelte'
@@ -20,13 +19,14 @@
 	import DisplayResult from '$lib/components/DisplayResult.svelte'
 	import ScheduleEditor from '$lib/components/triggers/schedules/ScheduleEditor.svelte'
 	import FlowGraphV2 from '$lib/components/graph/FlowGraphV2.svelte'
+	import { page } from '$app/state'
 
-	$workspaceStore = $page.params.workspace
-	let rd = $page.url.href.replace($page.url.origin, '')
+	$workspaceStore = page.params.workspace
+	let rd = page.url.href.replace(page.url.origin, '')
 
 	let job: Job | undefined = $state(undefined)
 	let currentApprovers: { resume_id: number; approver: string }[] = $state([])
-	let approver = $page.url.searchParams.get('approver') ?? undefined
+	let approver = page.url.searchParams.get('approver') ?? undefined
 
 	let completed: boolean = $state(false)
 
@@ -78,9 +78,9 @@
 		let job_result = (await JobService.getCompletedJobResult({
 			workspace: job?.workspace_id ?? '',
 			id: jobId,
-			secret: $page.params.hmac,
-			suspendedJob: $page.params.job,
-			resumeId: new Number($page.params.resume).valueOf(),
+			secret: page.params.hmac,
+			suspendedJob: page.params.job,
+			resumeId: new Number(page.params.resume).valueOf(),
 			approver
 		})) as any
 		description = job_result?.description
@@ -93,10 +93,10 @@
 
 	async function getJob() {
 		const suspendedJobFlow = await JobService.getSuspendedJobFlow({
-			workspace: $page.params.workspace,
-			id: $page.params.job,
-			resumeId: new Number($page.params.resume).valueOf(),
-			signature: $page.params.hmac,
+			workspace: page.params.workspace ?? '',
+			id: page.params.job ?? '',
+			resumeId: new Number(page.params.resume).valueOf(),
+			signature: page.params.hmac ?? '',
 			approver
 		})
 		job = suspendedJobFlow.job as Job
@@ -105,10 +105,10 @@
 
 	async function resume() {
 		await JobService.resumeSuspendedJobPost({
-			workspace: $page.params.workspace,
-			id: $page.params.job,
-			resumeId: new Number($page.params.resume).valueOf(),
-			signature: $page.params.hmac,
+			workspace: page.params.workspace ?? '',
+			id: page.params.job ?? '',
+			resumeId: new Number(page.params.resume).valueOf(),
+			signature: page.params.hmac ?? '',
 			approver,
 			requestBody: default_payload
 		})
@@ -118,10 +118,10 @@
 
 	async function cancel() {
 		await JobService.cancelSuspendedJobPost({
-			workspace: $page.params.workspace,
-			id: $page.params.job,
-			resumeId: new Number($page.params.resume).valueOf(),
-			signature: $page.params.hmac,
+			workspace: page.params.workspace ?? '',
+			id: page.params.job ?? '',
+			resumeId: new Number(page.params.resume).valueOf(),
+			signature: page.params.hmac ?? '',
 			approver,
 			requestBody: {}
 		})
@@ -130,7 +130,7 @@
 	}
 
 	async function loadUser() {
-		userStore.set(await getUserExt($page.params.workspace))
+		userStore.set(await getUserExt(page.params.workspace ?? ''))
 	}
 
 	let scheduleEditor: ScheduleEditor | undefined = $state(undefined)
@@ -138,7 +138,9 @@
 		completed = job?.type == 'CompletedJob'
 	})
 	let alreadyResumed = $derived(
-		currentApprovers.map((x) => x.resume_id).includes(new Number($page.params.resume).valueOf())
+		currentApprovers
+			.map((x) => x.resume_id)
+			.includes(new Number(page.params.resume ?? '').valueOf())
 	)
 	let approvalStep = $derived.by(() => (job?.flow_status?.step ?? 1) - 1)
 	let schema = $derived.by(

frontend/src/routes/public/[workspace]/[...secret]/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { BROWSER } from 'esm-env'
-	import { page } from '$app/stores'
 	import { base } from '$lib/base'
 	import AppPreview from '$lib/components/apps/editor/AppPreview.svelte'
 	import { IS_APP_PUBLIC_CONTEXT_KEY, type EditorBreakpoint } from '$lib/components/apps/types'
@@ -21,6 +20,7 @@
 	import { sendUserToast } from '$lib/toast'
 	import Alert from '$lib/components/common/alert/Alert.svelte'
 	import Skeleton from '$lib/components/common/skeleton/Skeleton.svelte'
+	import { page } from '$app/state'
 
 	let app: (AppWithLastVersion & { value: any }) | undefined = undefined
 	let notExists = false
@@ -37,12 +37,12 @@
 		}
 	}
 
-	const parsedSecret = parseSecret($page.params.secret)
+	const parsedSecret = parseSecret(page.params.secret ?? '')
 
 	async function loadApp() {
 		try {
 			app = await AppService.getPublicAppBySecret({
-				workspace: $page.params.workspace,
+				workspace: page.params.workspace ?? '',
 				path: parsedSecret.secret
 			})
 			noPermission = false
@@ -69,7 +69,7 @@
 			jwtError = false
 		}
 		try {
-			userStore.set(await getUserExt($page.params.workspace))
+			userStore.set(await getUserExt(page.params.workspace ?? ''))
 			if (!$userStore && parsedSecret.jwt) {
 				jwtError = true
 				sendUserToast('Could not authentify user with jwt token', true)
@@ -130,7 +130,7 @@
 					app = app
 				}}
 				popup
-				rd={$page.url.toString()}
+				rd={page.url.toString()}
 			/>
 		{/if}
 	</div>
@@ -151,10 +151,10 @@
 					name: $userStore?.name,
 					groups: $userStore?.groups,
 					username: $userStore?.username,
-					query: Object.fromEntries($page.url.searchParams.entries()),
-					hash: $page.url.hash.substring(1)
+					query: Object.fromEntries(page.url.searchParams.entries()),
+					hash: page.url.hash.substring(1)
 				}}
-				workspace={$page.params.workspace}
+				workspace={page.params.workspace}
 				summary={app.summary}
 				app={app.value}
 				appPath={app.path}

frontend/src/routes/scripts/p/[...path].svelte

@@ -7,22 +7,22 @@
 </script>
 
 <script lang="ts">
-	import { page } from '$app/stores'
 	import { workspaceStore } from '$lib/stores'
 	import { goto } from '$lib/navigation'
 	import { goto as gotoUrl } from '$app/navigation'
 	import CenteredModal from '$lib/components/CenteredModal.svelte'
 	import { WindmillIcon } from '$lib/components/icons'
 	import { ScriptService } from '$lib/gen'
+	import { page } from '$app/state'
 
 	async function redirectMe() {
 		if ($workspaceStore) {
 			const script = await ScriptService.getScriptByPath({
 				workspace: $workspaceStore,
-				path: $page.params.path
+				path: page.params.path ?? ''
 			})
-			const url = new URL($page.url.origin + '/scripts/get/' + script.hash)
-			$page.url.searchParams.forEach((v, k) => url.searchParams.append(k, v))
+			const url = new URL(page.url.origin + '/scripts/get/' + script.hash)
+			page.url.searchParams.forEach((v, k) => url.searchParams.append(k, v))
 			await gotoUrl(url)
 		} else {
 			await goto('/user/workspaces')

frontend/src/routes/user/login_callback/[client_name]/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { goto } from '$lib/navigation'
-	import { page } from '$app/stores'
 	import { sendUserToast } from '$lib/toast'
 	import { onMount } from 'svelte'
 	import { UserService, WorkspaceService } from '$lib/gen'
@@ -11,11 +10,12 @@
 	import { logoutWithRedirect } from '$lib/logout'
 	import WindmillIcon from '$lib/components/icons/WindmillIcon.svelte'
 	import { parseQueryParams } from '$lib/utils'
+	import { page } from '$app/state'
 
-	let error = $page.url.searchParams.get('error')
-	let clientName = $page.params.client_name
-	let code = $page.url.searchParams.get('code') ?? undefined
-	let state = $page.url.searchParams.get('state') ?? undefined
+	let error = page.url.searchParams.get('error')
+	let clientName = page.params.client_name ?? ''
+	let code = page.url.searchParams.get('code') ?? undefined
+	let state = page.url.searchParams.get('state') ?? undefined
 
 	onMount(async () => {
 		const rd = localStorage.getItem('rd')