Fixed all type errors

frontend/src/lib/components/AppConnectDrawer.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
+	import { run } from 'svelte/legacy'
 
 	import { createEventDispatcher } from 'svelte'
 	import { Button, Drawer } from './common'
@@ -9,12 +9,12 @@
 	import DarkModeObserver from './DarkModeObserver.svelte'
 
 	interface Props {
-		expressOAuthSetup?: boolean;
+		expressOAuthSetup?: boolean
 	}
 
-	let { expressOAuthSetup = false }: Props = $props();
+	let { expressOAuthSetup = false }: Props = $props()
 
-	let drawer: Drawer = $state()
+	let drawer: Drawer | undefined = $state()
 	let resourceType = $state('')
 	let step = $state(1)
 	let disabled = $state(false)
@@ -26,10 +26,9 @@
 	let rtToLoad: string | undefined = $state('')
 	export async function open(rt?: string) {
 		rtToLoad = rt
-		drawer.openDrawer?.()
+		drawer?.openDrawer?.()
 	}
 
-
 	function onRtToLoadChange(rtToLoad: string | undefined) {
 		appConnectInner?.open(rtToLoad)
 	}
@@ -39,7 +38,7 @@
 	let darkMode: boolean = $state(false)
 	run(() => {
 		appConnectInner && onRtToLoadChange(rtToLoad)
-	});
+	})
 </script>
 
 <DarkModeObserver bind:darkMode />

frontend/src/lib/components/ContextualVariableEditor.svelte

@@ -21,17 +21,17 @@
 		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 = $state()
+	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}

frontend/src/lib/components/DefaultScripts.svelte

@@ -6,7 +6,7 @@
 	import DrawerContent from './common/drawer/DrawerContent.svelte'
 	import DefaultScriptsInner from './DefaultScriptsInner.svelte'
 
-	let drawer: Drawer = $state()
+	let drawer: Drawer | undefined = $state()
 
 	interface Props {
 		placement?: 'left' | 'right';

frontend/src/lib/components/Dev.svelte

@@ -598,9 +598,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(() => {

frontend/src/lib/components/FlowGraphViewerStep.svelte

@@ -27,7 +27,7 @@
 	}
 
 	let { schema = undefined, stepDetail = undefined, jobScriptHash = undefined }: Props = $props();
-	let codeViewer: Drawer = $state()
+	let codeViewer: Drawer | undefined = $state()
 </script>
 
 <HighlightTheme />

frontend/src/lib/components/HighlightCode.svelte

@@ -100,6 +100,8 @@
 	}
 
 	const lang = $derived(highlightLanguage ?? getLang(language))
+	// Cast needed: svelte-highlight types not updated for Svelte 5 snippets
+	const HighlightWithSnippet = Highlight as any
 </script>
 
 <HighlightTheme />
@@ -134,11 +136,11 @@
 			{#if !lines}
 				<Highlight class="nowrap {className}" language={lang} {code} />
 			{:else}
-				<Highlight class="nowrap {className}" language={lang} {code} >
+					<HighlightWithSnippet class="nowrap {className}" language={lang} {code} >
 					{#snippet children({ highlighted })}
 										<LineNumbers {highlighted} />
 														{/snippet}
-								</Highlight>
+								</HighlightWithSnippet>
 			{/if}
 		{:else}
 			<pre class="overflow-auto max-h-screen text-xs {className}"

frontend/src/lib/components/InstanceNameEditor.svelte

@@ -114,8 +114,8 @@
 							class="!w-auto grow"
 							onclick={stopPropagation(() => {})}
 							onkeydown={stopPropagation(bubble('keydown'))}
-							onkeypress={stopPropagation(({ key }) => {
-							if (key === 'Enter') {
+							onkeypress={stopPropagation((e: Event) => {
+							if ((e as KeyboardEvent).key === 'Enter') {
 								savePassword()
 							}
 						})}
@@ -144,8 +144,8 @@
 							class="!w-auto grow"
 							onclick={stopPropagation(() => {})}
 							onkeydown={stopPropagation(bubble('keydown'))}
-							onkeypress={stopPropagation(({ key }) => {
-							if (key === 'Enter') {
+							onkeypress={stopPropagation((e: Event) => {
+							if ((e as KeyboardEvent).key === 'Enter') {
 								saveLoginType()
 							}
 						})}

frontend/src/lib/components/OauthScopes.svelte

@@ -10,15 +10,15 @@
 </script>
 
 {#if scopes && Array.isArray(scopes)}
-	{#each scopes as v}
+	{#each scopes as _, 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"
 				btnClasses="mx-6"
 				on:click={() => {
-					scopes = scopes.filter((el) => el != v)
+					scopes = scopes.filter((_, idx) => idx != i)
 				}}
 				startIcon={{ icon: Minus }}
 				iconOnly

frontend/src/lib/components/ParqetCsvTableRenderer.svelte

@@ -106,7 +106,7 @@
 		toggleRow(rows[0])
 	}
 
-	let eGui: HTMLDivElement = $state()
+	let eGui: HTMLDivElement | undefined = $state()
 
 
 	let error: string | undefined = $state(undefined)

frontend/src/lib/components/PersistentScriptDrawer.svelte

@@ -10,9 +10,9 @@
 	import { Hourglass, Loader2, Play, RefreshCw } from 'lucide-svelte'
 
 	let dispatch = createEventDispatcher()
-	let drawer: Drawer = $state()
+	let drawer: Drawer | undefined = $state()
 
-	let script: Script = $state()
+	let script: Script | undefined = $state()
 	let loadQueuedJobs = $state(true)
 	let queuedJobsLoading = $state(false)
 	let queuedJobs: {
@@ -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,7 +117,7 @@
 	>
 		<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} />
@@ -133,7 +133,7 @@
 				</tr>
 			{/snippet}
 			{#snippet body()}
-						<tbody >
+				<tbody>
 					{#each queuedJobs as { jobId, status, scriptHash, scheduledFor }}
 						<tr class="">
 							<td class="text-xs">
@@ -146,8 +146,10 @@
 								</a>
 							</td>
 							<td class="text-xs">
-								<a class="pr-3" href="{base}/run/{jobId}?workspace={$workspaceStore}" target="_blank"
-									>{jobId.substring(24)}</a
+								<a
+									class="pr-3"
+									href="{base}/run/{jobId}?workspace={$workspaceStore}"
+									target="_blank">{jobId.substring(24)}</a
 								>
 							</td>
 							<td class="text-xs">
@@ -165,7 +167,7 @@
 						</tr>
 					{/each}
 				</tbody>
-					{/snippet}
+			{/snippet}
 		</TableCustom>
 
 		{#snippet actions()}

frontend/src/lib/components/QueueMetricsDrawer.svelte

@@ -3,7 +3,7 @@
 	import QueueMetricsDrawerInner from './QueueMetricsDrawerInner.svelte'
 	import QueueAlerts from './QueueAlerts.svelte'
 
-	let drawer: Drawer = $state()
+	let drawer: Drawer | undefined = $state()
 	export function openDrawer() {
 		drawer?.openDrawer()
 	}

frontend/src/lib/components/Range.svelte

@@ -28,7 +28,7 @@
 
 	let step: number = 1
 
-	let slider: HTMLElement = $state()
+	let slider: HTMLElement | undefined = $state()
 
 	function calculateAxisStep(min: number, max: number): number {
 		const range = max - min

frontend/src/lib/components/ResourceEditorDrawer.svelte

@@ -1,13 +1,11 @@
 <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'
 
-	let drawer: Drawer = $state()
+	let drawer: Drawer | undefined = $state()
 	let canSave = $state(true)
 	let resource_type: string | undefined = $state(undefined)
 	let defaultValues: Record<string, any> | undefined = $state(undefined)
@@ -22,7 +20,7 @@
 		resource_type = undefined
 		newResource = false
 		path = p
-		drawer.openDrawer?.()
+		drawer?.openDrawer?.()
 	}
 
 	export async function initNew(
@@ -33,20 +31,16 @@
 		path = undefined
 		resource_type = resourceType
 		defaultValues = nDefaultValues
-		drawer.openDrawer?.()
+		drawer?.openDrawer?.()
 	}
 
-	let mode: 'edit' | 'new' = $state(newResource ? 'new' : 'edit')
-
-	run(() => {
-		path ? (mode = 'edit') : (mode = 'new')
-	});
+	let mode: 'edit' | 'new' = $derived(path ? 'edit' : 'new')
 </script>
 
 <Drawer bind:this={drawer} size="800px">
 	<DrawerContent
 		title={mode == 'edit' ? 'Edit ' + path : 'Add a resource'}
-		on:close={drawer.closeDrawer}
+		on:close={drawer?.closeDrawer}
 	>
 		{#await import('./ResourceEditor.svelte')}
 			<Loader2 class="animate-spin" />
@@ -72,7 +66,7 @@
 					} else {
 						resourceEditor?.createResource()
 					}
-					drawer.closeDrawer()
+					drawer?.closeDrawer()
 				}}
 				disabled={!canSave}
 			>

frontend/src/lib/components/S3ObjectPicker.svelte

@@ -20,8 +20,8 @@
 
 	const dispatch = createEventDispatcher()
 
-	let s3FilePicker: S3FilePicker = $state()
-	let s3FileUploadRawMode: false = $state()
+	let s3FilePicker: S3FilePicker | undefined = $state()
+	let s3FileUploadRawMode: false | undefined = $state()
 	let el: HTMLTextAreaElement | undefined = undefined
 	let rawValue: string | undefined = $state(undefined)
 

frontend/src/lib/components/Scrollable.svelte

@@ -6,20 +6,15 @@
 	let isScrollable = $state(false)
 
 	interface Props {
-		id?: string | null | undefined;
-		scrollableClass?: string;
-		shiftedShadow?: boolean;
-		children?: import('svelte').Snippet;
+		id?: string | null | undefined
+		scrollableClass?: string
+		shiftedShadow?: boolean
+		children?: import('svelte').Snippet
 	}
 
-	let {
-		id = undefined,
-		scrollableClass = '',
-		shiftedShadow = false,
-		children
-	}: Props = $props();
+	let { id = undefined, scrollableClass = '', shiftedShadow = false, children }: Props = $props()
 	let mutationObserver: MutationObserver
-	let el: HTMLDivElement = $state()
+	let el: HTMLDivElement | undefined = $state()
 
 	function handleScroll(event) {
 		const scrollableElement = event.target
@@ -43,7 +38,7 @@
 	}
 
 	export function scrollIntoView(top: number) {
-		el.scrollTo({ top, behavior: 'smooth' })
+		el?.scrollTo({ top, behavior: 'smooth' })
 	}
 	onMount(() => {
 		observeScrollability(el)

frontend/src/lib/components/SupabaseConnect.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
+	import { run } from 'svelte/legacy'
 
 	import { Loader2, RotateCwIcon } from 'lucide-svelte'
 
@@ -17,11 +17,11 @@
 	import { createEventDispatcher } from 'svelte'
 	import HighlightTheme from './HighlightTheme.svelte'
 
-	let drawer: Drawer = $state()
+	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 = ''
 	}
@@ -50,7 +50,7 @@
 
 	run(() => {
 		token != undefined && listDatabases()
-	});
+	})
 
 	let selectedDatabase: undefined | Database = $state(undefined)
 
@@ -64,9 +64,9 @@
 	 * host is in the format of `aws-0-${region}.pooler.supabase.com`
 	 * user is in the format of `postgres.${id}`
 	 */
-	let resourceValue = $derived({
-		host: `aws-0-${selectedDatabase?.region}.pooler.supabase.com`,
-		user: `postgres.${selectedDatabase?.id}`,
+	let resourceValue: Record<string, any> = $derived({
+		host: `aws-0-${(selectedDatabase as Database | undefined)?.region}.pooler.supabase.com`,
+		user: `postgres.${(selectedDatabase as Database | undefined)?.id}`,
 		port: 5432,
 		dbname: 'postgres',
 		sslmode: 'prefer',
@@ -99,14 +99,14 @@
 		})
 		sendUserToast('Saved postgres resource')
 		dispatch('refresh')
-		drawer.closeDrawer?.()
+		drawer?.closeDrawer?.()
 	}
 </script>
 
 <HighlightTheme />
 
 <Drawer bind:this={drawer} size="800px">
-	<DrawerContent title="Add a Supabase Database" on:close={drawer.closeDrawer}>
+	<DrawerContent title="Add a Supabase Database" on:close={drawer?.closeDrawer}>
 		{#if step === 'init' || selectedDatabase == undefined}
 			<h2
 				>Connect an existing database <div class="inline-block ml-2"

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

@@ -14,7 +14,7 @@
 	import Tab from '$lib/components/common/tabs/Tab.svelte'
 	import HighlightTheme from '$lib/components/HighlightTheme.svelte'
 
-	let jsonViewerDrawer: Drawer = $state()
+	let jsonViewerDrawer: Drawer | undefined = $state()
 
 	let app: any | undefined = $state(undefined)
 
@@ -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" />

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

@@ -10,7 +10,7 @@
 	import { createEventDispatcher } from 'svelte'
 	import { Globe, Loader2, Save } from 'lucide-svelte'
 
-	let jsonViewerDrawer: Drawer = $state()
+	let jsonViewerDrawer: Drawer | undefined = $state()
 
 	let code: string = $state('')
 	let path: string = ''
@@ -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>

frontend/src/lib/components/apps/editor/componentsPanel/CustomComponentsList.svelte

@@ -44,7 +44,7 @@
 							}
 						},
 						name: nameField,
-						js: await files[0].text()
+						js: await files![0].text()
 					}
 				}
 			})
@@ -63,7 +63,7 @@
 
 	let nameField: string = $state('')
 	let reactVersion: string = $state('18.2.0')
-	let files: FileList = $state()
+	let files: FileList | undefined = $state()
 	let useReact = $state(true)
 
 	getCustomComponents()

frontend/src/lib/components/details/ErrorHandlerToggleButtonV2.svelte

@@ -5,8 +5,6 @@
 	import { sendUserToast } from '$lib/toast'
 	import { workspaceStore } from '$lib/stores'
 
-	let toggleState = $state(errorHandlerMuted)
-
 	interface Props {
 		kind: 'script' | 'flow';
 		scriptOrFlowPath: string;
@@ -23,6 +21,8 @@
 		color = undefined
 	}: Props = $props();
 
+	let toggleState = $state(errorHandlerMuted)
+
 	async function toggleErrorHandler(): Promise<void> {
 		toggleState = !toggleState
 		if ($workspaceStore !== undefined) {

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

@@ -6,26 +6,26 @@
 	import DrawerContent from '../../common/drawer/DrawerContent.svelte'
 	import TabContent from '$lib/components/common/tabs/TabContent.svelte'
 
-	let drawer: Drawer = $state()
+	let drawer: Drawer | undefined = $state()
 
 	interface Props {
-		text?: string;
+		text?: string
 	}
 
-	let { text = 'Approval Help' }: Props = $props();
+	let { text = 'Approval Help' }: Props = $props()
 </script>
 
 <Button
 	size="xs"
 	variant="default"
 	on:click={() => {
-		drawer.openDrawer()
+		drawer?.openDrawer()
 	}}
 	>{text} <HelpCircle size={12} />
 </Button>
 
 <Drawer bind:this={drawer}>
-	<DrawerContent title="Suspend/Approval/Prompt help" on:close={drawer.closeDrawer}>
+	<DrawerContent title="Suspend/Approval/Prompt help" on:close={drawer?.closeDrawer}>
 		<div class="flex flex-col gap-y-6 text-xs text-primary font-normal">
 			<Section label="Form/Payload">
 				To add a form, go to the <b>Form</b> tab, inside the Advanced {'->'} Suspend tab, and add a form.

frontend/src/lib/components/home/ItemsList.svelte

@@ -367,7 +367,7 @@
 					if (itemKind != 'all') {
 						subtab = v
 					}
-					setQuery($page.url, 'kind', v)
+					setQuery(page.url, 'kind', v)
 				}}
 			>
 				{#snippet children({ item })}

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

@@ -553,7 +553,7 @@
 				<Popover
 					floatingConfig={{ strategy: 'absolute', placement: 'bottom-end' }}
 					usePointerDownOutside
-					floatingClass="!z-20"
+					contentClasses="!z-20"
 				>
 					{#snippet trigger()}
 						<Button

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
+	import { run } from 'svelte/legacy'
 
 	import type { InstanceGroup } from '$lib/gen'
 	import { GroupService } from '$lib/gen'
@@ -15,7 +15,7 @@
 
 	let newGroupName: string = $state('')
 	let instanceGroups: InstanceGroup[] | undefined = $state(undefined)
-	let groupDrawer: Drawer = $state()
+	let groupDrawer: Drawer | undefined = $state()
 
 	async function loadInstanceGroups(): Promise<void> {
 		try {
@@ -31,18 +31,18 @@
 		})
 		loadInstanceGroups()
 		editGroupName = newGroupName
-		groupDrawer.openDrawer()
+		groupDrawer?.openDrawer()
 	}
 
 	run(() => {
 		loadInstanceGroups()
-	});
+	})
 
 	let editGroupName: string = $state('')
 </script>
 
 <Drawer bind:this={groupDrawer}>
-	<DrawerContent title="Instance Group {editGroupName}" on:close={groupDrawer.closeDrawer}>
+	<DrawerContent title="Instance Group {editGroupName}" on:close={groupDrawer?.closeDrawer}>
 		<InstanceGroupEditor on:update={loadInstanceGroups} name={editGroupName} />
 	</DrawerContent>
 </Drawer>
@@ -56,28 +56,24 @@
 					containerClasses="border rounded-lg shadow-lg p-4 bg-surface"
 				>
 					{#snippet trigger()}
-									
-							<Button size="md" startIcon={{ icon: Plus }} nonCaptureEvent>New&nbsp;group</Button>
-						
-									{/snippet}
+						<Button size="md" startIcon={{ icon: Plus }} nonCaptureEvent>New&nbsp;group</Button>
+					{/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
-									size="md"
-									startIcon={{ icon: Plus }}
-									disabled={!newGroupName}
-									on:click={() => {
-										addInstanceGroup()
-										close()
-									}}
-								>
-									Create
-								</Button>
-							</div>
-						
-									{/snippet}
+						<div class="flex-col flex gap-2 p-4">
+							<input class="mr-2" placeholder="New instance group name" bind:value={newGroupName} />
+							<Button
+								size="md"
+								startIcon={{ icon: Plus }}
+								disabled={!newGroupName}
+								on:click={() => {
+									addInstanceGroup()
+									close()
+								}}
+							>
+								Create
+							</Button>
+						</div>
+					{/snippet}
 				</Popover>
 			</div>
 		</div>
@@ -95,16 +91,16 @@
 					</tr>
 				{/snippet}
 				{#snippet body()}
-								<tbody >
+					<tbody>
 						{#each instanceGroups as { name, summary, emails }}
 							<tr>
 								<td>
 									<a
 										href="#{name}"
 										onclick={() => {
-										editGroupName = name
-										groupDrawer.openDrawer()
-									}}
+											editGroupName = name
+											groupDrawer?.openDrawer()
+										}}
 										>{name}
 									</a>
 								</td>
@@ -126,7 +122,7 @@
 							</tr>
 						{/each}
 					</tbody>
-							{/snippet}
+				{/snippet}
 			</TableCustom>
 		</div>
 	{/if}

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

@@ -336,12 +336,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') {
@@ -546,7 +546,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)

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
+	import { run } from 'svelte/legacy'
 
 	import ScriptPicker from '$lib/components/ScriptPicker.svelte'
 	import { Button } from '$lib/components/common'
@@ -17,11 +17,10 @@
 	let clientName = $page.url.searchParams.get('domain') ?? undefined
 	let redirectURI = $page.url.searchParams.get('redirect_uri')
 
-	let userSettings: UserSettings = $state()
+	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 {
 			let webhook: string
@@ -70,7 +69,7 @@
 	}
 	run(() => {
 		updateTokenAndScope(itemPath)
-	});
+	})
 </script>
 
 <UserSettings
@@ -101,11 +100,11 @@
 			<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 >
+					<Menubar>
 						{#snippet children({ createMenu })}
-												<WorkspaceMenu strictWorkspaceSelect {createMenu} />
-																	{/snippet}
-										</Menubar>
+							<WorkspaceMenu strictWorkspaceSelect {createMenu} />
+						{/snippet}
+					</Menubar>
 				</div>
 				<ScriptPicker
 					allowEdit={false}
@@ -151,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>

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { run } from 'svelte/legacy';
+	import { run } from 'svelte/legacy'
 
 	import { goto } from '$lib/navigation'
 	import { base } from '$app/paths'
@@ -44,8 +44,8 @@
 	let workspaceHasForks = $state(false)
 	let workspaceTreeView: WorkspaceTreeView | undefined = $state(undefined)
 
-	let userSettings: UserSettings = $state()
-	let superadminSettings: SuperadminSettings = $state()
+	let userSettings: UserSettings | undefined = $state()
+	let superadminSettings: SuperadminSettings | undefined = $state()
 
 	let rd = $derived($page.url.searchParams.get('rd'))
 
@@ -54,7 +54,7 @@
 			const mcpMode = $page.url.hash.includes('-mcp')
 			userSettings.openDrawer(mcpMode)
 		}
-	});
+	})
 
 	async function loadInvites() {
 		try {
@@ -96,9 +96,9 @@
 	}
 	run(() => {
 		list_all_as_super_admin != undefined && $userWorkspaces && handleListWorkspaces()
-	});
+	})
 
-	let allWorkspaces = $derived(workspaces || [])
+	let allWorkspaces: UserWorkspace[] = $derived(workspaces || [])
 	let noWorkspaces = $derived($superadmin && allWorkspaces.length == 0)
 	let onlyAdminsWorkspace = $derived(allWorkspaces.length === 1 && allWorkspaces[0].id === 'admins')
 
@@ -114,11 +114,13 @@
 		if ($superadmin) {
 			createWorkspace = true
 		}
-	});
+	})
 
-	if (!createWorkspace) {
-		getCreateWorkspaceRequireSuperadmin()
-	}
+	$effect(() => {
+		if (!createWorkspace) {
+			getCreateWorkspaceRequireSuperadmin()
+		}
+	})
 
 	refreshSuperadmin()
 	loadInvites()
@@ -265,7 +267,13 @@
 
 		{#if createWorkspace}
 			<div class="flex flex-row-reverse pt-4 w-full">
-				<AnimatedButton animate={onlyAdminsWorkspace} baseRadius="6px" animationDuration="2s" marginWidth="2px" wrapperClasses="w-full">
+				<AnimatedButton
+					animate={onlyAdminsWorkspace}
+					baseRadius="6px"
+					animationDuration="2s"
+					marginWidth="2px"
+					wrapperClasses="w-full"
+				>
 					<Button
 						unifiedSize="sm"
 						href="{base}/user/create_workspace{rd ? `?rd=${encodeURIComponent(rd)}` : ''}"
@@ -406,12 +414,12 @@
 				<Button
 					variant="default"
 					unifiedSize="md"
-					on:click={superadminSettings.openDrawer}
+					on:click={() => superadminSettings?.openDrawer()}
 					startIcon={{ icon: Settings }}
 					dropdownItems={[
 						{
 							label: 'User settings',
-							onClick: () => userSettings.openDrawer(),
+							onClick: () => userSettings?.openDrawer(),
 							icon: User
 						}
 					]}
@@ -422,7 +430,7 @@
 				<Button
 					variant="default"
 					unifiedSize="md"
-					onClick={() => userSettings.openDrawer()}
+					onClick={() => userSettings?.openDrawer()}
 					startIcon={{ icon: Settings }}
 				>
 					User settings

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

@@ -6,10 +6,10 @@
 	import { Button } from '$lib/components/common'
 	import { userStore, workspaceStore } from '$lib/stores'
 
-	let port = $state(Number(page.url.searchParams.get('port')))
+	const rawPort = Number(page.url.searchParams.get('port'))
+	let port = $state(rawPort == 0 || Number.isNaN(rawPort) ? 80 : rawPort)
 	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
 
 	async function authorizeToken(): Promise<void> {
 		const username = $userStore?.username