diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 0730eb96b7cf4..542e1a1579455 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -24,7 +24,7 @@
 				"@redocly/json-to-json-schema": "^0.0.1",
 				"@scalar/openapi-parser": "^0.15.0",
 				"@tanstack/svelte-table": "npm:tanstack-table-8-svelte-5@^0.1",
-				"@tutorlatin/svelte-tiny-virtual-list": "^3.0.2",
+				"@tutorlatin/svelte-tiny-virtual-list": "^3.0.16",
 				"@windmill-labs/svelte-dnd-action": "^0.9.44",
 				"@xterm/addon-fit": "^0.10.0",
 				"@xyflow/svelte": "^1.0.0",
@@ -3020,9 +3020,9 @@
 			}
 		},
 		"node_modules/@tutorlatin/svelte-tiny-virtual-list": {
-			"version": "3.0.15",
-			"resolved": "https://registry.npmjs.org/@tutorlatin/svelte-tiny-virtual-list/-/svelte-tiny-virtual-list-3.0.15.tgz",
-			"integrity": "sha512-ew61aZNXGf0b5X+UjbOAhiNwzI21vijhB/mtBs8bpNOVYQ50TG6Qx00t+fR5C72eGnmdzguewZ2WP6QPNOTQJg==",
+			"version": "3.0.16",
+			"resolved": "https://registry.npmjs.org/@tutorlatin/svelte-tiny-virtual-list/-/svelte-tiny-virtual-list-3.0.16.tgz",
+			"integrity": "sha512-JQSmhRDAFZbq2rTlzn+kFXJayi5VPLxeGjD01ZVyV2ti7PlQE/ov6rQFR1c8s7Y3B1OiTcv3oEWGi3ib69V8eQ==",
 			"license": "MIT",
 			"engines": {
 				"node": ">=20.17.0"
diff --git a/frontend/package.json b/frontend/package.json
index 70cf96e75451c..fa0dc042be7d1 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -89,7 +89,7 @@
 		"@redocly/json-to-json-schema": "^0.0.1",
 		"@scalar/openapi-parser": "^0.15.0",
 		"@tanstack/svelte-table": "npm:tanstack-table-8-svelte-5@^0.1",
-		"@tutorlatin/svelte-tiny-virtual-list": "^3.0.2",
+		"@tutorlatin/svelte-tiny-virtual-list": "^3.0.16",
 		"@windmill-labs/svelte-dnd-action": "^0.9.44",
 		"@xterm/addon-fit": "^0.10.0",
 		"@xyflow/svelte": "^1.0.0",
diff --git a/frontend/src/lib/cancelable-promise-utils.ts b/frontend/src/lib/cancelable-promise-utils.ts
new file mode 100644
index 0000000000000..17e8be5a93e64
--- /dev/null
+++ b/frontend/src/lib/cancelable-promise-utils.ts
@@ -0,0 +1,84 @@
+import { CancelablePromise } from './gen'
+
+export namespace CancelablePromiseUtils {
+	export function then<T, U>(
+		promise: CancelablePromise<T>,
+		f: (value: T) => CancelablePromise<U>
+	): CancelablePromise<U> {
+		let promiseToBeCanceled: CancelablePromise<any> = promise
+		let p = new CancelablePromise<U>((resolve, reject) => {
+			promise
+				.then((value1) => {
+					let promise2 = f(value1)
+					promiseToBeCanceled = promise2
+					promise2.then((value2) => resolve(value2)).catch((err) => reject(err))
+				})
+				.catch((err) => reject(err))
+		})
+		p.cancel = () => promiseToBeCanceled.cancel()
+		return p
+	}
+
+	export function pure<T>(value: T): CancelablePromise<T> {
+		return new CancelablePromise((resolve) => resolve(value))
+	}
+
+	export function err<T>(error: any): CancelablePromise<T> {
+		return new CancelablePromise((_, reject) => reject(error))
+	}
+
+	export function map<T, U>(
+		promise: CancelablePromise<T>,
+		f: (value: T) => U
+	): CancelablePromise<U> {
+		return then(promise, (value) => pure(f(value)))
+	}
+
+	export function pipe<T>(
+		promise: CancelablePromise<T>,
+		f: (value: T) => void
+	): CancelablePromise<T> {
+		promise.then((value) => {
+			f(value)
+		})
+		return promise
+	}
+
+	export function catchErr<T, U>(
+		promise: CancelablePromise<T>,
+		f: (error: any) => CancelablePromise<U>
+	): CancelablePromise<T | U> {
+		let promiseToBeCanceled: CancelablePromise<any> = promise
+		let p = new CancelablePromise<T | U>((resolve, reject) => {
+			promise
+				.then((value) => resolve(value))
+				.catch((err) => {
+					let promise2 = f(err)
+					promiseToBeCanceled = promise2
+					return promise2.then((value2) => resolve(value2)).catch((err2) => reject(err2))
+				})
+				.catch((err) => reject(err))
+		})
+		p.cancel = () => promiseToBeCanceled.cancel()
+		return p
+	}
+
+	export function finallyDo<T>(promise: CancelablePromise<T>, f: () => void): CancelablePromise<T> {
+		promise = map(promise, (value) => (f(), value))
+		promise = catchErr(promise, (e) => (f(), err(e)))
+		return promise
+	}
+
+	// Calls onTimeout if the promise does not settle within timeoutMs milliseconds
+	export function onTimeout<T>(
+		promise: CancelablePromise<T>,
+		timeoutMs: number,
+		onTimeout: () => void
+	): CancelablePromise<T> {
+		let timeoutId: number | undefined = setTimeout(onTimeout, timeoutMs)
+		promise = finallyDo(promise, () => {
+			if (timeoutId !== undefined) clearTimeout(timeoutId)
+		})
+		return promise
+	}
+}
diff --git a/frontend/src/lib/components/RunChart.svelte b/frontend/src/lib/components/RunChart.svelte
index d40cddc8080e2..78873a3537941 100644
--- a/frontend/src/lib/components/RunChart.svelte
+++ b/frontend/src/lib/components/RunChart.svelte
@@ -28,6 +28,7 @@
 		selectedIds?: string[]
 		canSelect?: boolean
 		lastFetchWentToEnd?: boolean
+		totalRowsFetched: number
 		onPointClicked: (ids: string[]) => void
 		onLoadExtra: () => void
 		onZoom: (zoom: { min: Date; max: Date }) => void
@@ -41,6 +42,7 @@
 		selectedIds = $bindable([]),
 		canSelect = true,
 		lastFetchWentToEnd = false,
+		totalRowsFetched,
 		onPointClicked,
 		onLoadExtra,
 		onZoom
@@ -301,13 +303,14 @@
 <!-- {JSON.stringify(jobs?.map((x) => x.started_at))} -->
 <div class="relative max-h-40">
 	{#if !lastFetchWentToEnd}
-		<div class="absolute top-[-28px] left-[220px]"
-			><Button size="xs" color="transparent" variant="contained" on:click={() => onLoadExtra()}
-				>Load more <Tooltip2
-					>There are more jobs to load but only the first 1000 were fetched</Tooltip2
-				></Button
-			></div
-		>
+		<div class="absolute top-[-28px] left-[220px]">
+			<Button size="xs" color="transparent" variant="contained" on:click={() => onLoadExtra()}>
+				Load more
+				<Tooltip2>
+					There are more jobs to load but only the first {totalRowsFetched} were fetched
+				</Tooltip2>
+			</Button>
+		</div>
 	{/if}
 	<Scatter {data} options={scatterOptions} />
 </div>
diff --git a/frontend/src/lib/components/RunsPage.svelte b/frontend/src/lib/components/RunsPage.svelte
new file mode 100644
index 0000000000000..75d97f2d6f745
--- /dev/null
+++ b/frontend/src/lib/components/RunsPage.svelte
@@ -0,0 +1,1366 @@
+<script module lang="ts">
+	export let DEFAULT_RUNS_PER_PAGE = 1000
+</script>
+
+<script lang="ts">
+	import {
+		JobService,
+		type Job,
+		type CompletedJob,
+		UserService,
+		FolderService,
+		ScriptService,
+		FlowService,
+		type ExtendedJobs,
+		OpenAPI
+	} from '$lib/gen'
+
+	import { sendUserToast } from '$lib/toast'
+	import { userStore, workspaceStore, userWorkspaces } from '$lib/stores'
+	import { Button, Drawer, DrawerContent, Skeleton } from '$lib/components/common'
+	import RunChart from '$lib/components/RunChart.svelte'
+
+	import JobRunsPreview from '$lib/components/runs/JobRunsPreview.svelte'
+	import Tooltip from '$lib/components/Tooltip.svelte'
+	import CalendarPicker from '$lib/components/common/calendarPicker/CalendarPicker.svelte'
+
+	import RunsTable from '$lib/components/runs/RunsTable.svelte'
+	import { Pane, Splitpanes } from 'svelte-splitpanes'
+	import RunsFilter from '$lib/components/runs/RunsFilter.svelte'
+	import Toggle from '$lib/components/Toggle.svelte'
+	import ConfirmationModal from '$lib/components/common/confirmationModal/ConfirmationModal.svelte'
+	import type { Tweened } from 'svelte/motion'
+	import RunsQueue from '$lib/components/runs/RunsQueue.svelte'
+	import { twMerge } from 'tailwind-merge'
+	import ManuelDatePicker from '$lib/components/runs/ManuelDatePicker.svelte'
+	import JobsLoader from '$lib/components/runs/JobsLoader.svelte'
+	import { Calendar, Clock, TriangleAlert } from 'lucide-svelte'
+	import ConcurrentJobsChart from '$lib/components/ConcurrentJobsChart.svelte'
+	import { goto } from '$app/navigation'
+	import { base } from '$app/paths'
+	import type { RunsSelectionMode } from '$lib/components/runs/RunsBatchActionsDropdown.svelte'
+	import { isJobSelectable } from '$lib/utils'
+	import BatchReRunOptionsPane, {
+		type BatchReRunOptions
+	} from '$lib/components/runs/BatchReRunOptionsPane.svelte'
+	import { untrack } from 'svelte'
+	import { page } from '$app/state'
+	import RunOption from '$lib/components/runs/RunOption.svelte'
+	import TooltipV2 from '$lib/components/meltComponents/Tooltip.svelte'
+	import DropdownSelect from '$lib/components/DropdownSelect.svelte'
+	import RunsBatchActionsDropdown from '$lib/components/runs/RunsBatchActionsDropdown.svelte'
+	import { createBubbler } from 'svelte/legacy'
+	import ToggleButtonGroup from '$lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte'
+	import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte'
+	import Select from '$lib/components/select/Select.svelte'
+	import AnimatedPane from '$lib/components/splitPanes/AnimatedPane.svelte'
+
+	let { perPage = $bindable() }: { perPage: number } = $props()
+
+	let jobs: Job[] | undefined = $state()
+	let selectedIds: string[] = $state([])
+	let loadingSelectedIds = $state(false)
+	let selectedWorkspace: string | undefined = $state(undefined)
+
+	let batchReRunOptions: BatchReRunOptions = $state({ flow: {}, script: {} })
+
+	// All Filters
+	// Filter by
+	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
+			| 'running'
+			| 'success'
+			| 'failure'
+			| undefined
+	)
+	let isSkipped: boolean | undefined = $state(
+		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'
+			: 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'
+			: 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') ?? '{}'))
+			: undefined
+	)
+	let resultFilter: any = $state(
+		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 lastFetchWentToEnd = $state(false)
+
+	function loadFromQuery() {
+		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
+			| 'running'
+			| 'success'
+			| 'failure'
+			| undefined
+		isSkipped =
+			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'
+				: 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'
+				: localStorage.getItem('show_future_jobs') == 'false'
+					? false
+					: true
+
+		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') ?? '{}'))
+			: 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
+		perPage = parseInt(page.url.searchParams.get('per_page') ?? DEFAULT_RUNS_PER_PAGE.toString())
+		jobKindsCat = page.url.searchParams.get('job_kinds') ?? 'runs'
+		allWorkspaces = page.url.searchParams.get('all_workspaces') == 'true'
+	}
+
+	let queue_count: Tweened<number> | undefined = $state(undefined)
+	let suspended_count: Tweened<number> | undefined = $state(undefined)
+
+	let jobKinds: string | undefined = $state(undefined)
+	let loading: boolean = $state(false)
+	let paths: string[] = $state([])
+	let usernames: string[] = $state([])
+	let folders: string[] = $state([])
+	let completedJobs: CompletedJob[] | undefined = $state(undefined)
+	let extendedJobs: ExtendedJobs | undefined = $state(undefined)
+	let argError = $state('')
+	let resultError = $state('')
+	let filterTimeout: number | undefined = undefined
+	let selectedManualDate = $state(0)
+	let autoRefresh: boolean = $state(getAutoRefresh())
+	let runDrawer: Drawer | undefined = $state(undefined)
+	let lookback: number = $state(1)
+	let askingForConfirmation:
+		| undefined
+		| {
+				title: string
+				confirmBtnText: string
+				loading?: boolean
+				preContent?: string
+				onConfirm?: (forceCancel: boolean) => void
+				type?: ConfirmationModal['$$prop_def']['type']
+		  } = $state(undefined)
+
+	function getAutoRefresh() {
+		try {
+			return localStorage.getItem('auto_refresh_in_runs') != 'false'
+		} catch (e) {
+			console.error('Error getting auto refresh', e)
+			return true
+		}
+	}
+
+	let innerWidth = $state(window.innerWidth)
+	let jobsLoader: JobsLoader | undefined = $state(undefined)
+	let externalJobs: Job[] | undefined = $state(undefined)
+
+	let graph: 'RunChart' | 'ConcurrencyChart' = $state(
+		typeOfChart(page.url.searchParams.get('graph'))
+	)
+	let graphIsRunsChart: boolean = $state(untrack(() => graph) === 'RunChart')
+
+	let manualDatePicker: ManuelDatePicker | undefined = $state(undefined)
+
+	let runsTable: RunsTable | undefined = $state(undefined)
+
+	function setQuery(replaceState: boolean) {
+		let searchParams = new URLSearchParams()
+
+		if (user) {
+			searchParams.set('user', user)
+		} else {
+			searchParams.delete('user')
+		}
+
+		if (worker) {
+			searchParams.set('worker', worker)
+		} else {
+			searchParams.delete('worker')
+		}
+
+		if (folder) {
+			searchParams.set('folder', folder)
+		} else {
+			searchParams.delete('folder')
+		}
+
+		if (success !== undefined) {
+			searchParams.set('success', success.toString())
+		} else {
+			searchParams.delete('success')
+		}
+
+		if (isSkipped) {
+			searchParams.set('is_skipped', isSkipped.toString())
+		} else {
+			searchParams.delete('is_skipped')
+		}
+
+		if (showSchedules) {
+			searchParams.set('show_schedules', showSchedules.toString())
+		} else {
+			searchParams.delete('show_schedules')
+		}
+
+		if (showFutureJobs) {
+			searchParams.set('show_future_jobs', showFutureJobs.toString())
+		} else {
+			searchParams.delete('show_future_jobs')
+		}
+
+		if (allWorkspaces && $workspaceStore == 'admins') {
+			searchParams.set('all_workspaces', allWorkspaces.toString())
+			searchParams.set('workspace', 'admins')
+		} else {
+			searchParams.delete('all_workspaces')
+		}
+
+		// ArgFilter is an object. Encode it to a string
+		if (argFilter) {
+			searchParams.set('arg', encodeURIComponent(JSON.stringify(argFilter)))
+		} else {
+			searchParams.delete('arg')
+		}
+
+		if (resultFilter) {
+			searchParams.set('result', encodeURIComponent(JSON.stringify(resultFilter)))
+		} else {
+			searchParams.delete('result')
+		}
+		if (schedulePath) {
+			searchParams.set('schedule_path', schedulePath)
+		} else {
+			searchParams.delete('schedule_path')
+		}
+		if (jobKindsCat != 'runs') {
+			searchParams.set('job_kinds', jobKindsCat)
+		} else {
+			searchParams.delete('job_kinds')
+		}
+
+		if (minTs) {
+			searchParams.set('min_ts', minTs)
+		} else {
+			searchParams.delete('min_ts')
+		}
+
+		if (maxTs) {
+			searchParams.set('max_ts', maxTs)
+		} else {
+			searchParams.delete('max_ts')
+		}
+		if (concurrencyKey) {
+			searchParams.set('concurrency_key', concurrencyKey)
+		} else {
+			searchParams.delete('concurrency_key')
+		}
+
+		if (tag) {
+			searchParams.set('tag', tag)
+		} else {
+			searchParams.delete('tag')
+		}
+
+		if (label) {
+			searchParams.set('label', label)
+		} else {
+			searchParams.delete('label')
+		}
+
+		if (allowWildcards) {
+			searchParams.set('allow_wildcards', allowWildcards.toString())
+		} else {
+			searchParams.delete('allow_wildcards')
+		}
+
+		if (graph != 'RunChart') {
+			searchParams.set('graph', graph)
+		} else {
+			searchParams.delete('graph')
+		}
+
+		if (perPage != DEFAULT_RUNS_PER_PAGE) {
+			searchParams.set('per_page', perPage.toString())
+		} else {
+			searchParams.delete('per_page')
+		}
+
+		let newPath = path ? `/${path}` : ''
+
+		let newUrl = `${base}/runs${newPath}?${searchParams.toString()}`
+		if (
+			page.url.searchParams.toString() != searchParams.toString() ||
+			page.url.pathname != newUrl.split('?')[0]
+		) {
+			// replaceState(newUrl.toString(), $page.state)
+			goto(newUrl.toString(), { replaceState: replaceState, keepFocus: true })
+		}
+	}
+
+	function reloadJobsWithoutFilterError() {
+		if (resultError == '' && argError == '') {
+			filterTimeout && clearTimeout(filterTimeout)
+			filterTimeout = setTimeout(() => {
+				jobsLoader?.loadJobs(minTs, maxTs, true)
+			}, 2000)
+		}
+	}
+
+	function reset() {
+		path = page.params.path ?? null
+		minTs = undefined
+		maxTs = undefined
+		jobs = undefined
+		completedJobs = undefined
+		lastFetchWentToEnd = false
+		selectedManualDate = 0
+		selectedIds = []
+		schedulePath = undefined
+		batchReRunOptions = { flow: {}, script: {} }
+		selectionMode = false
+		selectedWorkspace = undefined
+		jobsLoader?.loadJobs(minTs, maxTs, true)
+	}
+
+	async function loadUsernames(): Promise<void> {
+		usernames = await UserService.listUsernames({ workspace: $workspaceStore! })
+	}
+
+	async function loadFolders(): Promise<void> {
+		folders = await FolderService.listFolders({
+			workspace: $workspaceStore!
+		}).then((x) => x.map((y) => y.name))
+	}
+
+	async function loadPaths() {
+		const npaths_scripts = await ScriptService.listScriptPaths({ workspace: $workspaceStore ?? '' })
+		const npaths_flows = await FlowService.listFlowPaths({ workspace: $workspaceStore ?? '' })
+		paths = npaths_scripts.concat(npaths_flows).sort()
+	}
+
+	function filterByPath(e: CustomEvent<string>) {
+		path = e.detail
+		user = null
+		folder = null
+		label = null
+		concurrencyKey = null
+		tag = null
+		schedulePath = undefined
+		worker = null
+	}
+
+	function filterByUser(e: CustomEvent<string>) {
+		path = null
+		folder = null
+		user = e.detail
+		label = null
+		concurrencyKey = null
+		tag = null
+		schedulePath = undefined
+	}
+
+	function filterByFolder(e: CustomEvent<string>) {
+		path = null
+		user = null
+		folder = e.detail
+		label = null
+		concurrencyKey = null
+		tag = null
+		schedulePath = undefined
+		worker = null
+	}
+
+	function filterByLabel(e: CustomEvent<string>) {
+		path = null
+		user = null
+		folder = null
+		label = e.detail
+		concurrencyKey = null
+		tag = null
+		schedulePath = undefined
+		worker = null
+		allowWildcards = false
+	}
+
+	function filterByConcurrencyKey(e: CustomEvent<string>) {
+		path = null
+		user = null
+		folder = null
+		label = null
+		concurrencyKey = e.detail
+		tag = null
+		schedulePath = undefined
+		worker = null
+	}
+
+	function filterByTag(e: CustomEvent<string>) {
+		path = null
+		user = null
+		folder = null
+		label = null
+		concurrencyKey = null
+		tag = e.detail
+		schedulePath = undefined
+		worker = null
+		allowWildcards = false
+	}
+
+	function filterBySchedule(e: CustomEvent<string>) {
+		path = null
+		user = null
+		folder = null
+		label = null
+		concurrencyKey = null
+		tag = null
+		schedulePath = e.detail
+		worker = null
+	}
+
+	function filterByWorker(e: CustomEvent<string>) {
+		path = null
+		user = null
+		folder = null
+		label = null
+		concurrencyKey = null
+		tag = null
+		schedulePath = undefined
+		worker = e.detail
+		allowWildcards = false
+	}
+
+	let calendarChangeTimeout: number | undefined = $state(undefined)
+
+	function typeOfChart(s: string | null): 'RunChart' | 'ConcurrencyChart' {
+		switch (s) {
+			case 'RunChart':
+				return 'RunChart'
+			case 'ConcurrencyChart':
+				return 'ConcurrencyChart'
+			default:
+				return 'RunChart'
+		}
+	}
+
+	let selectionMode: RunsSelectionMode | false = $state(false)
+
+	async function onSetSelectionMode(mode: RunsSelectionMode | false) {
+		selectionMode = mode
+		if (!mode) {
+			selectedIds = []
+			batchReRunOptions = { flow: {}, script: {} }
+			return
+		}
+		const selectableIds = jobs?.filter(isJobSelectable(mode)).map((j) => j.id) ?? []
+		selectedIds = []
+
+		if (!selectableIds?.length) {
+			sendUserToast(
+				'There are no visible jobs that can be ' +
+					{ cancel: 'cancelled', 're-run': 're-ran' }[mode],
+				true
+			)
+		}
+	}
+
+	function getSelectedFilters() {
+		return {
+			workspace: $workspaceStore ?? '',
+			startedBefore: maxTs,
+			startedAfter: minTs,
+			schedulePath,
+			scriptPathExact: path === null || path === '' ? undefined : path,
+			createdBy: user === null || user === '' ? undefined : user,
+			scriptPathStart: folder === null || folder === '' ? undefined : `f/${folder}/`,
+			jobKinds: jobKinds == '' ? undefined : jobKinds,
+			success: success == 'success' ? true : success == 'failure' ? false : undefined,
+			running:
+				success == 'running' || success == 'suspended'
+					? true
+					: success == 'waiting'
+						? false
+						: undefined,
+			isSkipped: isSkipped ? undefined : false,
+			// isFlowStep: jobKindsCat != 'all' ? false : undefined,
+			hasNullParent:
+				path != undefined || path != undefined || jobKindsCat != 'all' ? true : undefined,
+			label: label === null || label === '' ? undefined : label,
+			tag: tag === null || tag === '' ? undefined : tag,
+			isNotSchedule: showSchedules == false ? true : undefined,
+			suspended: success == 'waiting' ? false : success == 'suspended' ? true : undefined,
+			scheduledForBeforeNow:
+				showFutureJobs == false || success == 'waiting' || success == 'suspended'
+					? true
+					: undefined,
+			args:
+				argFilter && argFilter != '{}' && argFilter != '' && argError == '' ? argFilter : undefined,
+			result:
+				resultFilter && resultFilter != '{}' && resultFilter != '' && resultError == ''
+					? resultFilter
+					: undefined,
+			allWorkspaces: allWorkspaces ? true : undefined,
+			allowWildcards: allowWildcards ? true : undefined
+		}
+	}
+
+	async function cancelJobs(uuidsToCancel: string[], forceCancel: boolean = false) {
+		const uuids = await JobService.cancelSelection({
+			workspace: $workspaceStore ?? '',
+			requestBody: uuidsToCancel,
+			forceCancel: forceCancel
+		})
+		selectedIds = []
+		jobsLoader?.loadJobs(minTs, maxTs, true, true)
+		sendUserToast(`Canceled ${uuids.length} jobs`)
+		selectionMode = false
+	}
+
+	async function onCancelFilteredJobs() {
+		forceCancelInPopup = false
+		askingForConfirmation = {
+			title: 'Confirm cancelling all jobs corresponding to the selected filters',
+			confirmBtnText: 'Loading...',
+			loading: true
+		}
+
+		const selectedFilters = getSelectedFilters()
+		const selectedFiltersString = JSON.stringify(selectedFilters, null, 4)
+		const jobIdsToCancel = await JobService.listFilteredQueueUuids(selectedFilters)
+
+		askingForConfirmation = {
+			title: `Confirm cancelling all jobs corresponding to the selected filters (${jobIdsToCancel.length} jobs)`,
+			confirmBtnText: `Cancel ${jobIdsToCancel.length} jobs that matched the filters`,
+			preContent: selectedFiltersString,
+			onConfirm: (forceCancel) => {
+				cancelJobs(jobIdsToCancel, forceCancel)
+			}
+		}
+	}
+
+	async function onCancelSelectedJobs() {
+		forceCancelInPopup = true
+		askingForConfirmation = {
+			confirmBtnText: `Cancel ${selectedIds.length} jobs`,
+			title: 'Confirm cancelling the selected jobs',
+			onConfirm: (forceCancel) => {
+				cancelJobs(selectedIds, forceCancel)
+			}
+		}
+	}
+
+	async function reRunJobs(jobIdsToReRun: string[]) {
+		if (!$workspaceStore) return
+
+		if (askingForConfirmation) {
+			askingForConfirmation.loading = true
+		}
+
+		const body: Parameters<typeof JobService.batchReRunJobs>[0]['requestBody'] = {
+			job_ids: jobIdsToReRun,
+			script_options_by_path: batchReRunOptions.script,
+			flow_options_by_path: batchReRunOptions.flow
+		}
+
+		// workaround because EventSource does not support POST requests
+		// https://medium.com/@david.richards.tech/sse-server-sent-events-using-a-post-request-without-eventsource-1c0bd6f14425
+		const response = await fetch(`${OpenAPI.BASE}/w/${$workspaceStore}/jobs/run/batch_rerun_jobs`, {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify(body)
+		})
+		await new Promise(async (resolve) => {
+			const reader = response?.body?.pipeThrough(new TextDecoderStream()).getReader()
+			let reRanUuids: string[] = []
+			if (reader) {
+				while (true) {
+					const { value, done } = await reader.read()
+					if (value) {
+						// It is possible get multiple values at once in case of buffering
+						const receivedUuids: string[] = []
+						for (const line of value.split('\n')) {
+							if (!line) continue
+							else if (line.startsWith('Error:')) {
+								console.error(line)
+							} else {
+								receivedUuids.push(line)
+							}
+						}
+						if (receivedUuids.length) {
+							reRanUuids.push(...receivedUuids)
+							if (askingForConfirmation) {
+								askingForConfirmation.confirmBtnText = `${reRanUuids.length}/${jobIdsToReRun.length}`
+							}
+						}
+					}
+
+					if (done || !value) {
+						if (reRanUuids.length) {
+							sendUserToast(`Re-ran ${reRanUuids.length}/${jobIdsToReRun.length} jobs`)
+						}
+						if (reRanUuids.length !== jobIdsToReRun.length) {
+							sendUserToast(
+								`Failed to re-run ${jobIdsToReRun.length - reRanUuids.length} jobs. Check console for details`,
+								true
+							)
+							// We do not get explicit error from backend if the job script don't exist
+							for (const jobId of jobIdsToReRun) {
+								if (reRanUuids.includes(jobId)) continue
+								console.error('Could not re-run job ' + jobId)
+							}
+						}
+						break
+					}
+				}
+			}
+			resolve(undefined)
+		})
+
+		selectedIds = []
+		batchReRunOptions = { flow: {}, script: {} }
+		jobsLoader?.loadJobs(minTs, maxTs, true, true)
+		selectionMode = false
+	}
+
+	async function onReRunFilteredJobs() {
+		const selectedFilters = getSelectedFilters()
+		selectedIds = []
+		loadingSelectedIds = true
+
+		if (jobKindsCat !== 'runs') {
+			sendUserToast('Batch re-run is only supported for scripts and flows', true)
+		}
+		selectedIds = await JobService.listFilteredJobsUuids({
+			...selectedFilters,
+			jobKinds: 'script,flow'
+		})
+		selectionMode = 're-run'
+	}
+
+	async function onReRunSelectedJobs() {
+		const jobIdsToReRun = selectedIds
+		askingForConfirmation = {
+			title: `Confirm re-running the selected jobs`,
+			confirmBtnText: `Re-run ${jobIdsToReRun.length} jobs`,
+			type: 'reload',
+			onConfirm: async () => {
+				await reRunJobs(jobIdsToReRun)
+			}
+		}
+	}
+
+	function setLookback(lookbackInDays: number) {
+		lookback = lookbackInDays
+	}
+
+	async function loadExtra() {
+		if (jobsLoader) {
+			lastFetchWentToEnd = await jobsLoader.loadExtraJobs()
+			console.log(lastFetchWentToEnd)
+		}
+	}
+
+	function jobsFilter(f: 'waiting' | 'suspended') {
+		path = null
+		user = null
+		folder = null
+		label = null
+		concurrencyKey = null
+		schedulePath = undefined
+		path = null
+		tag = null
+		worker = null
+		if (success == f) {
+			success = undefined
+		} else {
+			success = f
+		}
+		jobKindsCat = 'all'
+	}
+
+	$effect(() => {
+		loadingSelectedIds && selectedIds.length && setTimeout(() => (loadingSelectedIds = false), 250)
+	})
+	$effect(() => {
+		;[
+			user,
+			worker,
+			label,
+			folder,
+			path,
+			success !== undefined,
+			isSkipped,
+			showSchedules,
+			showFutureJobs,
+			argFilter,
+			resultFilter,
+			schedulePath,
+			jobKindsCat,
+			concurrencyKey,
+			tag,
+			graph,
+			maxTs,
+			minTs,
+			allWorkspaces,
+			allowWildcards,
+			$workspaceStore,
+			perPage
+		]
+
+		untrack(() => setQuery(false))
+	})
+	$effect(() => {
+		minTs || untrack(() => setQuery(true))
+	})
+	$effect(() => {
+		maxTs || untrack(() => setQuery(true))
+	})
+	$effect(() => {
+		if ($workspaceStore) {
+			untrack(() => {
+				loadUsernames()
+				loadFolders()
+				loadPaths()
+			})
+		}
+	})
+	let warnJobLimit = $derived.by(() => {
+		let extended = extendedJobs as ExtendedJobs | undefined
+		return (
+			graph === 'ConcurrencyChart' &&
+			extended !== undefined &&
+			extended.jobs.length + extended.obscured_jobs.length >= 1000
+		)
+	})
+
+	const bubble = createBubbler()
+
+	function selectAll() {
+		if (!selectionMode) return
+		if (allSelected) {
+			allSelected = false
+			selectedIds = []
+		} else {
+			allSelected = true
+			selectedIds = jobs?.filter(isJobSelectable(selectionMode)).map((j) => j.id) ?? []
+		}
+	}
+
+	let allSelected = $derived.by(() => {
+		return selectionMode && selectedIds.length === selectableJobCount
+	})
+
+	const selectableJobCount = $derived.by(() => {
+		if (!selectionMode) return 0
+		return jobs?.filter(isJobSelectable(selectionMode)).length ?? 0
+	})
+
+	let tableTopBarWidth = $state(0)
+
+	const smallScreenWidth = 1920
+	const verySmallScreenWidth = 1300
+
+	let forceCancelInPopup = $state(false)
+
+	const warnJobLimitMsg = $derived(
+		`The exact number of concurrent jobs at the beginning of the time range may be incorrect as only the last ${perPage} jobs are taken into account: a job that was started earlier than this limit will not be taken into account`
+	)
+</script>
+
+<JobsLoader
+	{allowWildcards}
+	{allWorkspaces}
+	bind:jobs
+	{user}
+	{folder}
+	{path}
+	{worker}
+	{label}
+	{success}
+	{isSkipped}
+	{argFilter}
+	{resultFilter}
+	{showSchedules}
+	{showFutureJobs}
+	{schedulePath}
+	{jobKindsCat}
+	computeMinAndMax={manualDatePicker?.computeMinMax}
+	bind:minTs
+	bind:maxTs
+	bind:jobKinds
+	bind:queue_count
+	bind:suspended_count
+	{autoRefresh}
+	bind:completedJobs
+	bind:externalJobs
+	bind:extendedJobs
+	{concurrencyKey}
+	{argError}
+	{resultError}
+	{tag}
+	bind:perPage
+	bind:loading
+	bind:this={jobsLoader}
+	lookback={graphIsRunsChart ? 0 : lookback}
+/>
+
+<ConfirmationModal
+	title={askingForConfirmation?.title ?? ''}
+	confirmationText={askingForConfirmation?.confirmBtnText ?? ''}
+	open={!!askingForConfirmation}
+	on:confirmed={async () => {
+		const func = askingForConfirmation?.onConfirm
+		await func?.(forceCancelInPopup)
+		askingForConfirmation = undefined
+	}}
+	type={askingForConfirmation?.type}
+	loading={askingForConfirmation?.loading}
+	on:canceled={() => {
+		askingForConfirmation = undefined
+	}}
+>
+	{#if askingForConfirmation?.preContent}
+		<pre>{askingForConfirmation.preContent}</pre>
+		<Toggle
+			size="xs"
+			class="mt-4"
+			color="red"
+			bind:checked={forceCancelInPopup}
+			options={{
+				right: 'Force cancel',
+				rightTooltip:
+					'Only use this for jobs that refuse to gracefully cancel. This is dangerous, only do this if you have no alternatives!'
+			}}
+		></Toggle>
+		{#if forceCancelInPopup}
+			<div class="mt-4 text-red-500 p-2 text-sm">
+				<p>
+					Force cancel is enabled. This is dangerous, only do this if you have no alternatives.
+					Instead of being gracefully cancelled, all jobs will be immediately sent to the completed
+					job table regardless of them being processed or not or part of running flows. You may end
+					up in an inconsistent state.
+				</p>
+			</div>
+		{/if}
+	{/if}
+</ConfirmationModal>
+
+<Drawer bind:this={runDrawer}>
+	<DrawerContent title="Run details" on:close={runDrawer.closeDrawer}>
+		{#if selectedIds.length === 1}
+			{#if selectedIds[0] === '-'}
+				<div class="p-4">There is no information available for this job</div>
+			{:else}
+				<JobRunsPreview blankLink id={selectedIds[0]} workspace={selectedWorkspace} />
+			{/if}
+		{/if}
+	</DrawerContent>
+</Drawer>
+
+<svelte:window
+	onpopstate={() => {
+		reset()
+		loadFromQuery()
+	}}
+/>
+
+{#if $userStore?.operator && $workspaceStore && !$userWorkspaces.find((_) => _.id === $workspaceStore)?.operator_settings?.runs}
+	<div class="bg-red-100 border-l-4 border-red-600 text-orange-700 p-4 m-4 mt-12" role="alert">
+		<p class="font-bold">Unauthorized</p>
+		<p>Page not available for operators</p>
+	</div>
+{:else}
+	<div class="w-full h-screen flex flex-col" bind:clientWidth={innerWidth}>
+		<!-- Header and filters -->
+		<div class="flex flex-row items-start w-full border-b px-4 gap-8">
+			<div class="flex flex-row items-center h-full gap-6">
+				<div class="flex flex-row items-center gap-1">
+					<h1
+						class={twMerge(
+							'!text-2xl font-semibold leading-6 tracking-tight',
+							$userStore?.operator ? 'pl-10' : ''
+						)}
+					>
+						Runs
+					</h1>
+
+					<Tooltip
+						documentationLink="https://www.windmill.dev/docs/core_concepts/monitor_past_and_future_runs"
+					>
+						All past and schedule executions of scripts and flows, including previews. You only see
+						your own runs or runs of groups you belong to unless you are an admin.
+					</Tooltip>
+				</div>
+
+				<!-- Queue -->
+				<RunsQueue
+					{success}
+					{queue_count}
+					{suspended_count}
+					onJobsWaiting={() => {
+						jobsFilter('waiting')
+					}}
+					onJobsSuspended={() => {
+						jobsFilter('suspended')
+					}}
+					small={innerWidth < smallScreenWidth}
+				/>
+			</div>
+
+			<div class="py-2 flex items-start gap-x-4 gap-y-2 flex-row grow min-w-0 justify-end">
+				<!-- Dates -->
+				<div class="flex flex-row gap-2">
+					<RunOption label="From" for="min-datetimes">
+						{#if minTs || maxTs}
+							<input
+								type="text"
+								class="!text-sm text-primary !bg-surface-secondary h-9 !border-none"
+								value={minTs ? new Date(minTs).toLocaleString() : 'zoom x axis to set min'}
+								disabled
+								name="min-datetimes"
+							/>
+						{/if}
+						<CalendarPicker
+							clearable={true}
+							date={minTs}
+							label="From"
+							class={minTs || maxTs ? '' : 'relative top-0 bottom-0 left-0 right-0 h-[34px]'}
+							on:change={async ({ detail }) => {
+								minTs = new Date(detail).toISOString()
+								calendarChangeTimeout && clearTimeout(calendarChangeTimeout)
+								calendarChangeTimeout = setTimeout(() => {
+									jobsLoader?.loadJobs(minTs, maxTs, true)
+								}, 1000)
+							}}
+							on:clear={async () => {
+								minTs = undefined
+								calendarChangeTimeout && clearTimeout(calendarChangeTimeout)
+								calendarChangeTimeout = setTimeout(() => {
+									jobsLoader?.loadJobs(minTs, maxTs, true)
+								}, 1000)
+							}}
+						/>
+					</RunOption>
+
+					<RunOption label="To" for="max-datetimes">
+						{#if maxTs || minTs}
+							<input
+								type="text"
+								class="!text-sm text-primary !bg-surface-secondary h-9 !border-none"
+								value={maxTs ? new Date(maxTs).toLocaleString() : 'zoom x axis to set max'}
+								name="max-datetimes"
+								disabled
+							/>
+						{/if}
+						<CalendarPicker
+							clearable={true}
+							date={maxTs}
+							label="To"
+							class={minTs || maxTs ? '' : 'relative top-0 bottom-0 left-0 right-0 h-[34px]'}
+							on:change={async ({ detail }) => {
+								maxTs = new Date(detail).toISOString()
+								calendarChangeTimeout && clearTimeout(calendarChangeTimeout)
+								calendarChangeTimeout = setTimeout(() => {
+									jobsLoader?.loadJobs(minTs, maxTs, true)
+								}, 1000)
+							}}
+							on:clear={async () => {
+								maxTs = undefined
+								calendarChangeTimeout && clearTimeout(calendarChangeTimeout)
+								calendarChangeTimeout = setTimeout(() => {
+									jobsLoader?.loadJobs(minTs, maxTs, true)
+								}, 1000)
+							}}
+						/>
+					</RunOption>
+
+					{#if minTs || maxTs}
+						<RunOption label="Reset" for="reset" noLabel>
+							<Button variant="default" size="xs" onClick={reset} btnClasses="h-9">Reset</Button>
+						</RunOption>
+					{/if}
+				</div>
+
+				<!-- Filters 1 -->
+				<div class="flex flex-row gap-2">
+					<RunsFilter
+						bind:allowWildcards
+						bind:isSkipped
+						bind:user
+						bind:folder
+						bind:label
+						bind:concurrencyKey
+						bind:tag
+						bind:worker
+						bind:path
+						bind:success
+						bind:argFilter
+						bind:resultFilter
+						bind:argError
+						bind:resultError
+						bind:jobKindsCat
+						bind:allWorkspaces
+						bind:schedulePath
+						on:change={reloadJobsWithoutFilterError}
+						on:successChange={(e) => {
+							if (e.detail == 'running' && maxTs != undefined) {
+								maxTs = undefined
+							}
+						}}
+						{usernames}
+						{folders}
+						{paths}
+						mobile={innerWidth < verySmallScreenWidth}
+						small={innerWidth < smallScreenWidth}
+						calendarSmall={!minTs && !maxTs}
+					/>
+				</div>
+			</div>
+		</div>
+
+		<!-- Graph -->
+		<div class="p-2 px-4 pt-8 w-full border-b">
+			<div class="relative z-10">
+				<div class="absolute left-0 -top-7 flex flex-row gap-2 items-center min-w-24">
+					<ToggleButtonGroup
+						selected={graph}
+						on:selected={({ detail }) => {
+							graph = detail
+							graphIsRunsChart = graph === 'RunChart'
+						}}
+					>
+						{#snippet children({ item })}
+							<ToggleButton value="RunChart" label="Duration" {item} />
+							<ToggleButton
+								{item}
+								value="ConcurrencyChart"
+								label="Concurrency"
+								icon={warnJobLimit ? TriangleAlert : undefined}
+								tooltip={warnJobLimit ? warnJobLimitMsg : undefined}
+							/>
+						{/snippet}
+					</ToggleButtonGroup>
+
+					{#if !graphIsRunsChart}
+						<DropdownSelect
+							items={[
+								{
+									displayName: 'None',
+									action: () => setLookback(0),
+									id: '0'
+								},
+								{
+									displayName: '1 day',
+									action: () => setLookback(1),
+									id: '1'
+								},
+								{
+									displayName: '3 days',
+									action: () => setLookback(3),
+									id: '3'
+								},
+								{
+									displayName: '7 days',
+									action: () => setLookback(7),
+									id: '7'
+								}
+							]}
+							selected={lookback.toString()}
+							selectedDisplayName={`${lookback} days lookback`}
+						>
+							{#snippet extraLabel()}
+								<TooltipV2>
+									{#snippet text()}
+										How far behind the min datetime to start considering jobs for the concurrency
+										graph. Change this value to include jobs started before the set time window for
+										the computation of the graph
+									{/snippet}
+								</TooltipV2>
+							{/snippet}
+						</DropdownSelect>
+					{/if}
+				</div>
+			</div>
+			{#if graph === 'RunChart'}
+				<RunChart
+					{lastFetchWentToEnd}
+					bind:selectedIds
+					canSelect={!selectionMode}
+					minTimeSet={minTs}
+					maxTimeSet={maxTs}
+					totalRowsFetched={jobs?.length ?? 0}
+					maxIsNow={maxTs == undefined}
+					onLoadExtra={loadExtra}
+					jobs={completedJobs}
+					onZoom={async (zoom) => {
+						minTs = zoom.min.toISOString()
+						maxTs = zoom.max.toISOString()
+						manualDatePicker?.resetChoice()
+						jobsLoader?.loadJobs(minTs, maxTs, true)
+					}}
+					onPointClicked={(ids) => {
+						runsTable?.scrollToRun(ids)
+					}}
+				/>
+			{:else if graph === 'ConcurrencyChart'}
+				<ConcurrentJobsChart
+					minTimeSet={minTs}
+					maxTimeSet={maxTs}
+					maxIsNow={maxTs == undefined}
+					{extendedJobs}
+					onZoom={async (zoom) => {
+						minTs = zoom.min.toISOString()
+						maxTs = zoom.max.toISOString()
+						jobsLoader?.loadJobs(minTs, maxTs, true)
+					}}
+				/>
+			{/if}
+		</div>
+
+		<div class="grow min-h-0">
+			<Splitpanes>
+				<Pane minSize={40}>
+					<div class="flex flex-col h-full">
+						<!-- Runs table top bar -->
+						<div
+							class="flex flex-row gap-4 items-center px-2 py-1 grow-0 justify-between"
+							bind:clientWidth={tableTopBarWidth}
+						>
+							<div class="flex flex-row gap-4 items-center">
+								{#if selectionMode && selectableJobCount}
+									<div class="flex flex-row items-center font-semibold text-sm">
+										<div class="px-2">
+											<input
+												onfocus={bubble('focus')}
+												type="checkbox"
+												checked={allSelected}
+												id="select-all"
+												class={twMerge(
+													'cursor-pointer',
+													allSelected ? 'bg-blue-50 dark:bg-blue-900/50' : '',
+													'flex flex-row items-center p-2 pr-4 top-0 font-semibold text-sm'
+												)}
+												onclick={selectAll}
+											/>
+										</div>
+										<label
+											class="cursor-pointer whitespace-nowrap text-xs text-emphasis font-semibold"
+											for="select-all">Select all</label
+										>
+									</div>
+								{/if}
+
+								<RunsBatchActionsDropdown
+									isLoading={loadingSelectedIds}
+									{selectionMode}
+									selectionCount={selectedIds.length}
+									{onSetSelectionMode}
+									{onCancelFilteredJobs}
+									{onCancelSelectedJobs}
+									{onReRunFilteredJobs}
+									{onReRunSelectedJobs}
+									small={tableTopBarWidth < 800}
+								/>
+							</div>
+
+							<div class="flex flex-row gap-4 items-center">
+								<div class="flex flex-row gap-1 items-center">
+									<Toggle
+										id="cron-schedules"
+										bind:checked={showSchedules}
+										on:change={() => {
+											localStorage.setItem(
+												'show_schedules_in_run',
+												showSchedules ? 'true' : 'false'
+											)
+										}}
+										options={tableTopBarWidth < 800 || selectionMode
+											? {}
+											: { right: 'Cron schedules' }}
+									/>
+									<span title="Cron schedules">
+										<Calendar size="14" />
+									</span>
+								</div>
+
+								<div class="flex flex-row gap-1 items-center">
+									<Toggle
+										size="sm"
+										bind:checked={showFutureJobs}
+										on:change={() => {
+											localStorage.setItem('show_future_jobs', showFutureJobs ? 'true' : 'false')
+										}}
+										id="planned-later"
+										options={tableTopBarWidth < 800 || selectionMode
+											? {}
+											: { right: 'Planned later' }}
+									/>
+									<span title="Planned later">
+										<Clock size={14} />
+									</span>
+								</div>
+								<div class="flex flex-row gap-2 items-center">
+									<ManuelDatePicker
+										on:loadJobs={() => {
+											lastFetchWentToEnd = false
+											jobsLoader?.loadJobs(minTs, maxTs, true)
+										}}
+										bind:minTs
+										bind:maxTs
+										bind:selectedManualDate
+										{loading}
+										bind:this={manualDatePicker}
+										numberOfLastJobsToFetch={perPage}
+									/>
+									<Toggle
+										size="sm"
+										bind:checked={autoRefresh}
+										on:change={() => {
+											localStorage.setItem('auto_refresh_in_runs', autoRefresh ? 'true' : 'false')
+										}}
+										options={{ right: 'Auto-refresh' }}
+										textClass="whitespace-nowrap"
+									/>
+								</div>
+							</div>
+						</div>
+
+						<!-- Runs table. Add overflow-hidden because scroll is handled inside the runs table based on this wrapper height -->
+						<div class="grow min-h-0 overflow-y-hidden overflow-x-auto">
+							{#if jobs}
+								<RunsTable
+									{jobs}
+									externalJobs={externalJobs ?? []}
+									omittedObscuredJobs={extendedJobs?.omitted_obscured_jobs ?? false}
+									showExternalJobs={!graphIsRunsChart}
+									activeLabel={label}
+									{selectionMode}
+									bind:selectedIds
+									bind:selectedWorkspace
+									bind:lastFetchWentToEnd
+									on:loadExtra={loadExtra}
+									on:filterByPath={filterByPath}
+									on:filterByUser={filterByUser}
+									on:filterByFolder={filterByFolder}
+									on:filterByLabel={filterByLabel}
+									on:filterByConcurrencyKey={filterByConcurrencyKey}
+									on:filterByTag={filterByTag}
+									on:filterBySchedule={filterBySchedule}
+									on:filterByWorker={filterByWorker}
+									bind:this={runsTable}
+									{perPage}
+								></RunsTable>
+							{:else}
+								<div class="gap-1 flex flex-col">
+									{#each new Array(8) as _}
+										<Skeleton layout={[[3]]} />
+									{/each}
+								</div>
+							{/if}
+						</div>
+						<div
+							class="bg-surface-secondary border-t flex text-xs px-2 py-1 items-center justify-end gap-2"
+						>
+							Per page:
+							<Select
+								class="w-20"
+								bind:value={
+									() => perPage,
+									(newPerPage) => {
+										perPage = newPerPage
+										if (newPerPage > (jobs?.length ?? 1000)) loadExtra()
+									}
+								}
+								onCreateItem={(v) => (perPage = parseInt(v))}
+								items={[
+									{ value: 25, label: '25' },
+									{ value: 100, label: '100' },
+									{ value: 1000, label: '1000' },
+									{ value: 10000, label: '10000' }
+								]}
+							/>
+						</div>
+					</div>
+				</Pane>
+				<AnimatedPane size={40} minSize={15} class="flex flex-col" opened={selectedIds.length > 0}>
+					{#if selectionMode === 're-run'}
+						<BatchReRunOptionsPane {selectedIds} bind:options={batchReRunOptions} />
+					{:else if selectedIds.length === 1}
+						{#if selectedIds[0] === '-'}
+							<div class="p-4">There is no information available for this job</div>
+						{:else}
+							<JobRunsPreview
+								on:filterByConcurrencyKey={filterByConcurrencyKey}
+								on:filterByWorker={filterByWorker}
+								id={selectedIds[0]}
+								workspace={selectedWorkspace}
+							/>
+						{/if}
+					{:else if selectedIds.length > 1}
+						<div class="text-xs m-4"
+							>There are {selectedIds.length} jobs selected. Choose 1 to see detailed information</div
+						>
+					{/if}
+				</AnimatedPane>
+			</Splitpanes>
+		</div>
+	</div>
+{/if}
diff --git a/frontend/src/lib/components/auditLogs/AuditLogsFilters.svelte b/frontend/src/lib/components/auditLogs/AuditLogsFilters.svelte
index b6dee8b22630a..169c1cf245d98 100644
--- a/frontend/src/lib/components/auditLogs/AuditLogsFilters.svelte
+++ b/frontend/src/lib/components/auditLogs/AuditLogsFilters.svelte
@@ -26,22 +26,23 @@
 		UserService,
 		ScriptService,
 		FlowService,
-		AppService
+		AppService,
+		CancelError
 	} from '$lib/gen'
 
 	import { userStore, workspaceStore } from '$lib/stores'
 	import { ChevronDown, Loader2, RefreshCcw } from 'lucide-svelte'
-	import { onDestroy, tick, untrack } from 'svelte'
+	import { onDestroy, untrack } from 'svelte'
 	import ToggleButtonGroup from '../common/toggleButton-v2/ToggleButtonGroup.svelte'
 	import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte'
 	import Select from '../select/Select.svelte'
 	import { usePromise } from '$lib/svelte5Utils.svelte'
 	import { safeSelectItems } from '../select/utils.svelte'
+	import { CancelablePromiseUtils } from '$lib/cancelable-promise-utils'
+	import { sendUserToast } from '$lib/toast'
 
 	let usernames: string[] | undefined = $state()
 	let resources = usePromise(() => loadResources($workspaceStore!), { loadInit: false })
-	let loading: boolean = $state(false)
-	let page: number | undefined = undefined
 
 	interface Props {
 		logs?: AuditLog[]
@@ -55,6 +56,7 @@
 		resource?: string | undefined
 		actionKind?: ActionKind | 'all'
 		scope?: undefined | 'all_workspaces' | 'instance'
+		loading?: boolean
 	}
 
 	let {
@@ -68,7 +70,8 @@
 		operation = $bindable(),
 		resource = $bindable() as string | undefined,
 		actionKind = $bindable(undefined),
-		scope = $bindable(undefined)
+		scope = $bindable(undefined),
+		loading = $bindable(false)
 	}: Props = $props()
 
 	$effect.pre(() => {
@@ -86,50 +89,45 @@
 		}
 	})
 
-	async function loadLogs(
-		username: string | undefined,
-		page: number | undefined,
-		perPage: number | undefined,
-		before: string | undefined,
-		after: string | undefined,
-		operation: string | undefined,
-		resource: string | undefined,
-		actionKind: ActionKind | undefined | 'all',
-		scope: undefined | 'all_workspaces' | 'instance'
-	): Promise<void> {
+	function loadLogs() {
 		loading = true
 
-		if (username == 'all') {
-			username = undefined
-		}
-		if (operation == 'all' || operation == '') {
-			operation = undefined
-		}
-
-		// @ts-ignore
-		if (actionKind == 'all' || actionKind == '') {
-			actionKind = undefined
-		}
-
-		if (resource == 'all' || resource == '') {
-			resource = undefined
-		}
+		let username_ = username == 'all' ? undefined : username
+		let operation_ = operation == 'all' || operation == '' ? undefined : operation
+		let actionKind_ = actionKind == 'all' ? undefined : actionKind
+		let resource_ = resource == 'all' || resource == '' ? undefined : resource
 
-		logs = await AuditService.listAuditLogs({
+		let _promise = AuditService.listAuditLogs({
 			workspace: scope === 'instance' ? 'global' : $workspaceStore!,
-			page,
+			page: pageIndex,
 			perPage,
 			before,
 			after,
-			username,
-			operation,
-			resource,
-			actionKind,
+			username: username_,
+			operation: operation_,
+			resource: resource_,
+			actionKind: actionKind_,
 			allWorkspaces: scope === 'all_workspaces'
 		})
-		hasMore = logs.length > 0 && logs.length === perPage
-
-		loading = false
+		let promise = CancelablePromiseUtils.map(_promise, (value) => {
+			logs = value
+			hasMore = !logs || (logs.length > 0 && logs.length === perPage)
+			loading = false
+		})
+		promise = CancelablePromiseUtils.onTimeout(promise, 4000, () => {
+			sendUserToast(
+				'Loading audit logs is taking longer than expected...',
+				true,
+				perPage > 25
+					? [{ label: 'Reduce to 25 items per page', callback: () => (perPage = 25) }]
+					: []
+			)
+		})
+		promise = CancelablePromiseUtils.catchErr(promise, (e) => {
+			if (e instanceof CancelError) return CancelablePromiseUtils.pure<void>(undefined)
+			return CancelablePromiseUtils.err<void>(e)
+		})
+		return promise
 	}
 
 	async function loadUsers() {
@@ -139,17 +137,7 @@
 				: [$userStore?.username ?? '']
 	}
 
-	let initialLoad = true
-	function refreshLogs() {
-		loadUsers()
-		resources.refresh()
-		loadLogs(username, page, perPage, before, after, operation, resource, actionKind, scope)
-		tick().then(() => {
-			initialLoad = false
-		})
-	}
-
-	function updateLogs() {
+	function updateQueryParams() {
 		const queryParams: string[] = []
 
 		function addQueryParam(key: string, value: string | number | undefined | null) {
@@ -159,7 +147,7 @@
 		}
 
 		addQueryParam('username', username)
-		addQueryParam('page', page)
+		addQueryParam('page', pageIndex)
 		addQueryParam('perPage', perPage)
 		addQueryParam('before', before)
 		addQueryParam('after', after)
@@ -172,25 +160,6 @@
 		}
 		const query = '?' + queryParams.join('&')
 		goto(query, { replaceState: true, keepFocus: true })
-
-		loadLogs(username, page, perPage, before, after, operation, resource, actionKind, scope)
-	}
-
-	function updateQueryParams() {
-		if (initialLoad) {
-			return
-		}
-		page = 1
-		pageIndex = 1
-		updateLogs()
-	}
-
-	function updatePageQueryParams(pageIndex?: number | undefined) {
-		if (initialLoad) {
-			return
-		}
-		page = pageIndex
-		updateLogs()
 	}
 
 	window.addEventListener('popstate', handlePopState)
@@ -307,18 +276,22 @@
 		WORKSPACES_DELETE: 'workspaces.delete'
 	}
 
-	let refresh = $state(1)
-	$effect(() => {
-		$workspaceStore && refresh && untrack(() => refreshLogs())
-	})
+	let refresh = $state(0)
+	let lastRefresh = $state(-1)
+
 	// observe all the variables that should trigger an update
 	$effect(() => {
-		;[username, perPage, before, after, operation, resource, actionKind, scope]
-		updateQueryParams()
-	})
-	// observe the pageIndex variable that should trigger an update
-	$effect(() => {
-		updatePageQueryParams(pageIndex)
+		;[refresh, username, perPage, before, after, operation, resource, actionKind, scope, pageIndex]
+		return untrack(() => {
+			if (refresh !== lastRefresh) {
+				loadUsers()
+				resources.refresh()
+				lastRefresh = refresh
+			}
+			updateQueryParams()
+			let promise = loadLogs()
+			return () => promise?.cancel()
+		})
 	})
 </script>
 
@@ -390,25 +363,30 @@
 
 	<div class="flex gap-1 relative w-full">
 		<span class="text-xs absolute font-semibold text-emphasis -top-4">Username</span>
-		<select bind:value={username}>
-			{#if usernames}
-				{#if $userStore?.is_admin || $userStore?.is_super_admin}
-					<option selected>all</option>
-				{/if}
-				{#each usernames as e}
-					{#if e == username || $userStore?.is_admin || $userStore?.is_super_admin}
-						<option>{e}</option>
-					{:else}
-						<option disabled>{e}</option>
-					{/if}
-				{/each}
-			{/if}
-		</select>
+		<Select
+			bind:value={username}
+			class="w-full"
+			disablePortal
+			RightIcon={ChevronDown}
+			items={usernames
+				? [
+						...($userStore?.is_admin || $userStore?.is_super_admin
+							? [{ value: 'all', label: 'all' }]
+							: []),
+						...usernames.map((e) => ({
+							value: e,
+							label: e,
+							disabled: e !== username && !$userStore?.is_admin && !$userStore?.is_super_admin
+						}))
+					]
+				: []}
+		/>
 	</div>
 	<div class="flex gap-1 relative w-full">
 		<span class="text-xs absolute font-semibold text-emphasis -top-4">Resource</span>
 
 		<Select
+			disablePortal
 			onCreateItem={(r) => (resources.value?.push(r), (resource = r))}
 			createText="Press enter to use this value"
 			bind:value={resource}
@@ -423,6 +401,7 @@
 		<span class="text-xs absolute font-semibold text-emphasis -top-4">Operation</span>
 
 		<Select
+			disablePortal
 			bind:value={operation}
 			items={['all', ...Object.values(operations)].map((r) => ({ value: r, label: r }))}
 			inputClass="dark:!bg-gray-700"
@@ -434,12 +413,19 @@
 	<div class="flex gap-1 relative w-full">
 		<span class="text-xs absolute font-semibold text-emphasis -top-4">Action</span>
 
-		<select class="!truncate" bind:value={actionKind}>
-			<option selected value="all">all</option>
-			{#each ['Create', 'Update', 'Delete', 'Execute'] as e}
-				<option value={e.toLocaleLowerCase()}>{e}</option>
-			{/each}
-		</select>
+		<Select
+			class="w-full"
+			bind:value={actionKind}
+			disablePortal
+			RightIcon={ChevronDown}
+			items={[
+				{ value: 'all', label: 'all' },
+				{ value: 'create', label: 'Create' },
+				{ value: 'update', label: 'Update' },
+				{ value: 'delete', label: 'Delete' },
+				{ value: 'execute', label: 'Execute' }
+			]}
+		/>
 	</div>
 
 	<div class="flex flex-row gap-1">
diff --git a/frontend/src/lib/components/auditLogs/AuditLogsTable.svelte b/frontend/src/lib/components/auditLogs/AuditLogsTable.svelte
index 7170b9bb5a2c2..3219f4950400b 100644
--- a/frontend/src/lib/components/auditLogs/AuditLogsTable.svelte
+++ b/frontend/src/lib/components/auditLogs/AuditLogsTable.svelte
@@ -4,7 +4,7 @@
 	import { displayDate } from '$lib/utils'
 	import { onMount, tick } from 'svelte'
 	import Button from '../common/button/Button.svelte'
-	import { ChevronLeft, ChevronRight, ListFilterPlus } from 'lucide-svelte'
+	import { ChevronLeft, ChevronRight, ListFilterPlus, Loader2 } from 'lucide-svelte'
 	import VirtualList from '@tutorlatin/svelte-tiny-virtual-list'
 	import { twMerge } from 'tailwind-merge'
 
@@ -19,13 +19,14 @@
 		usernameFilter?: string | undefined
 		resourceFilter?: string | undefined
 		showWorkspace?: boolean
+		loading?: boolean
 		onselect?: (id: number) => void
 	}
 
 	let {
 		logs = [],
 		pageIndex = $bindable(1),
-		perPage = $bindable(100),
+		perPage = $bindable(1000),
 		hasMore = $bindable(true),
 		actionKind = $bindable(),
 		operation = $bindable(),
@@ -33,7 +34,8 @@
 		usernameFilter = $bindable(),
 		resourceFilter = $bindable(),
 		showWorkspace = false,
-		onselect
+		onselect,
+		loading
 	}: Props = $props()
 
 	function groupLogsByDay(logs: AuditLog[]): Record<string, AuditLog[]> {
@@ -120,6 +122,7 @@
 		}
 		return 'gray'
 	}
+	let height = $derived(tableHeight - headerHeight - footerHeight)
 </script>
 
 <svelte:window onresize={() => computeHeight()} />
@@ -139,12 +142,22 @@
 			<div class="w-2/12">Resource</div>
 		</div>
 	</div>
-	{#if logs?.length == 0}
-		<div class="text-xs text-secondary p-8"> No logs found for the selected filters. </div>
+
+	{#if loading}
+		<div style="height: {height}px;" class="flex justify-center items-center">
+			<Loader2 class="animate-spin" />
+		</div>
+	{:else if !logs?.length}
+		<div
+			class="text-xs text-secondary p-8 flex justify-center items-center"
+			style="height: {height}px;"
+		>
+			No logs found for the selected filters.
+		</div>
 	{:else}
 		<VirtualList
 			width="100%"
-			height={tableHeight - headerHeight - footerHeight}
+			{height}
 			itemCount={flatLogs?.length ?? 0}
 			itemSize={(index) => {
 				if (flatLogs?.[index]?.type === 'date') {
diff --git a/frontend/src/lib/components/auditLogs/AuditLogsTimeline.svelte b/frontend/src/lib/components/auditLogs/AuditLogsTimeline.svelte
index e2f7fc2365a10..4275b49e3b0de 100644
--- a/frontend/src/lib/components/auditLogs/AuditLogsTimeline.svelte
+++ b/frontend/src/lib/components/auditLogs/AuditLogsTimeline.svelte
@@ -550,7 +550,7 @@
 	)
 </script>
 
-<div class="p-4 bg-surface mb-4 h-full">
+<div class="p-4 bg-surface mb-4 h-full text-xs">
 	{#if logs.length === 0}
 		<div class="text-center py-8 text-secondary"> No audit logs to display </div>
 	{:else if !groupedData || groupedData.status === 'loading'}
diff --git a/frontend/src/lib/components/runs/JobsLoader.svelte b/frontend/src/lib/components/runs/JobsLoader.svelte
index 22ee0750b4cb4..22c9284654ace 100644
--- a/frontend/src/lib/components/runs/JobsLoader.svelte
+++ b/frontend/src/lib/components/runs/JobsLoader.svelte
@@ -6,7 +6,9 @@
 		type CompletedJob,
 		type ExtendedJobs,
 		ConcurrencyGroupsService,
-		type ObscuredJob
+		type ObscuredJob,
+		CancelablePromise,
+		CancelError
 	} from '$lib/gen'
 
 	import { sendUserToast } from '$lib/toast'
@@ -14,6 +16,7 @@
 
 	import { tweened, type Tweened } from 'svelte/motion'
 	import { subtractDaysFromDateString } from '$lib/utils'
+	import { CancelablePromiseUtils } from '$lib/cancelable-promise-utils'
 
 	interface Props {
 		jobs: Job[] | undefined
@@ -49,7 +52,7 @@
 		allWorkspaces?: boolean
 		computeMinAndMax: (() => { minTs: string; maxTs: string | undefined } | undefined) | undefined
 		lookback?: number
-		perPage?: number | undefined
+		perPage?: number
 		allowWildcards?: boolean
 	}
 
@@ -87,7 +90,7 @@
 		allWorkspaces = false,
 		computeMinAndMax,
 		lookback = 0,
-		perPage = undefined,
+		perPage = $bindable(1000),
 		allowWildcards = false
 	}: Props = $props()
 	let intervalId: number | undefined = $state()
@@ -95,7 +98,23 @@
 
 	function onParamChanges() {
 		resetJobs()
-		loadJobsIntern(true)
+		let promise = loadJobsIntern(true)
+		promise = CancelablePromiseUtils.onTimeout(promise, 4000, () => {
+			sendUserToast(
+				'Loading jobs is taking longer than expected...',
+				true,
+				perPage > 25
+					? [{ label: 'Reduce to 25 items per page', callback: () => (perPage = 25) }]
+					: []
+			)
+		})
+		promise = CancelablePromiseUtils.catchErr(promise, (e) => {
+			if (e instanceof CancelError) {
+				return CancelablePromiseUtils.pure<void>(undefined)
+			}
+			return CancelablePromiseUtils.err(e)
+		})
+		return promise
 	}
 
 	function computeJobKinds(jobKindsCat: string | undefined): string {
@@ -162,123 +181,119 @@
 			const minCreated = new Date(new Date(ts).getTime() - 1).toISOString()
 
 			let olderJobs = await fetchJobs(minCreated, minTs, undefined)
-			jobs = jobs.concat(olderJobs)
+			jobs = jobs?.concat(olderJobs)
 			computeCompletedJobs()
-			return olderJobs?.length < 1000
+			return olderJobs?.length < perPage
 		}
 		return false
 	}
 
-	async function fetchJobs(
+	function fetchJobs(
 		completedBefore: string | undefined,
 		completedAfter: string | undefined,
 		createdAfterQueue: string | undefined
-	): Promise<Job[]> {
+	): CancelablePromise<Job[]> {
 		loadingFetch = true
-		try {
-			let scriptPathStart = folder === null || folder === '' ? undefined : `f/${folder}/`
-			let scriptPathExact = path === null || path === '' ? undefined : path
-			return JobService.listJobs({
-				workspace: $workspaceStore!,
-				completedBefore,
-				completedAfter,
-				createdAfterQueue,
-				schedulePath,
-				scriptPathExact,
-				createdBy: user === null || user === '' ? undefined : user,
-				scriptPathStart: scriptPathStart,
-				jobKinds: jobKindsCat == 'all' || jobKinds == '' ? undefined : jobKinds,
-				success: success == 'success' ? true : success == 'failure' ? false : undefined,
-				running:
-					success == 'running' || success == 'suspended'
-						? true
-						: success == 'waiting'
-							? false
-							: undefined,
-				isSkipped: showSkipped ? undefined : false,
-				// isFlowStep: jobKindsCat != 'all' ? false : undefined,
-				hasNullParent: jobKindsCat != 'all' ? true : undefined,
-				label: label === null || label === '' ? undefined : label,
-				tag: tag === null || tag === '' ? undefined : tag,
-				worker: worker === null || worker === '' ? undefined : worker,
-				isNotSchedule: showSchedules == false ? true : undefined,
-				suspended: success == 'waiting' ? false : success == 'suspended' ? true : undefined,
-				scheduledForBeforeNow:
-					showFutureJobs == false || success == 'waiting' || success == 'suspended'
-						? true
-						: undefined,
-				args:
-					argFilter && argFilter != '{}' && argFilter != '' && argError == ''
-						? argFilter
-						: undefined,
-				result:
-					resultFilter && resultFilter != '{}' && resultFilter != '' && resultError == ''
-						? resultFilter
+		let scriptPathStart = folder === null || folder === '' ? undefined : `f/${folder}/`
+		let scriptPathExact = path === null || path === '' ? undefined : path
+		let promise = JobService.listJobs({
+			workspace: $workspaceStore!,
+			completedBefore,
+			completedAfter,
+			createdAfterQueue,
+			schedulePath,
+			scriptPathExact,
+			createdBy: user === null || user === '' ? undefined : user,
+			scriptPathStart: scriptPathStart,
+			jobKinds: jobKindsCat == 'all' || jobKinds == '' ? undefined : jobKinds,
+			success: success == 'success' ? true : success == 'failure' ? false : undefined,
+			running:
+				success == 'running' || success == 'suspended'
+					? true
+					: success == 'waiting'
+						? false
 						: undefined,
-				allWorkspaces: allWorkspaces ? true : undefined,
-				perPage,
-				allowWildcards: allowWildcards ? true : undefined
-			})
-		} catch (e) {
+			isSkipped: showSkipped ? undefined : false,
+			// isFlowStep: jobKindsCat != 'all' ? false : undefined,
+			hasNullParent: jobKindsCat != 'all' ? true : undefined,
+			label: label === null || label === '' ? undefined : label,
+			tag: tag === null || tag === '' ? undefined : tag,
+			worker: worker === null || worker === '' ? undefined : worker,
+			isNotSchedule: showSchedules == false ? true : undefined,
+			suspended: success == 'waiting' ? false : success == 'suspended' ? true : undefined,
+			scheduledForBeforeNow:
+				showFutureJobs == false || success == 'waiting' || success == 'suspended'
+					? true
+					: undefined,
+			args:
+				argFilter && argFilter != '{}' && argFilter != '' && argError == '' ? argFilter : undefined,
+			result:
+				resultFilter && resultFilter != '{}' && resultFilter != '' && resultError == ''
+					? resultFilter
+					: undefined,
+			allWorkspaces: allWorkspaces ? true : undefined,
+			perPage,
+			allowWildcards: allowWildcards ? true : undefined
+		})
+		promise = CancelablePromiseUtils.catchErr(promise, (e) => {
+			if (e instanceof CancelError) return CancelablePromiseUtils.err(e)
 			sendUserToast('There was an issue loading jobs, see browser console for more details', true)
 			console.error(e)
-			return []
-		} finally {
+			return CancelablePromiseUtils.pure([] as Job[])
+		})
+		CancelablePromiseUtils.pipe(promise, () => {
 			loadingFetch = false
-		}
+		})
+		return promise
 	}
 
-	async function fetchExtendedJobs(
+	function fetchExtendedJobs(
 		concurrencyKey: string | null,
 		createdBeforeQueue: string | undefined,
 		completedAfter: string | undefined
-	): Promise<ExtendedJobs> {
+	): CancelablePromise<ExtendedJobs> {
 		loadingFetch = true
-		try {
-			return ConcurrencyGroupsService.listExtendedJobs({
-				rowLimit: 1000,
-				concurrencyKey: concurrencyKey == null || concurrencyKey == '' ? undefined : concurrencyKey,
-				workspace: $workspaceStore!,
-				completedAfter,
-				createdBeforeQueue: createdBeforeQueue,
-				// createdOrStartedBefore: startedBefore,
-				// createdOrStartedAfter: startedAfter,
-				// createdOrStartedAfterCompletedJobs: startedAfterCompletedJobs,
-				schedulePath,
-				scriptPathExact: path === null || path === '' ? undefined : path,
-				createdBy: user === null || user === '' ? undefined : user,
-				scriptPathStart: folder === null || folder === '' ? undefined : `f/${folder}/`,
-				jobKinds: jobKindsCat == 'all' || jobKinds == '' ? undefined : jobKinds,
-				success: success == 'success' ? true : success == 'failure' ? false : undefined,
-				running: success == 'running' ? true : undefined,
-				isSkipped: showSkipped ? undefined : false,
-				isFlowStep: jobKindsCat != 'all' ? false : undefined,
-				label: label === null || label === '' ? undefined : label,
-				tag: tag === null || tag === '' ? undefined : tag,
-				isNotSchedule: showSchedules == false ? true : undefined,
-				scheduledForBeforeNow: showFutureJobs == false ? true : undefined,
-				args:
-					argFilter && argFilter != '{}' && argFilter != '' && argError == ''
-						? argFilter
-						: undefined,
-				result:
-					resultFilter && resultFilter != '{}' && resultFilter != '' && resultError == ''
-						? resultFilter
-						: undefined,
-				allWorkspaces: allWorkspaces ? true : undefined,
-				perPage,
-				allowWildcards
-			})
-		} catch (e) {
+		let promise = ConcurrencyGroupsService.listExtendedJobs({
+			rowLimit: perPage,
+			concurrencyKey: concurrencyKey == null || concurrencyKey == '' ? undefined : concurrencyKey,
+			workspace: $workspaceStore!,
+			completedAfter,
+			createdBeforeQueue: createdBeforeQueue,
+			// createdOrStartedBefore: startedBefore,
+			// createdOrStartedAfter: startedAfter,
+			// createdOrStartedAfterCompletedJobs: startedAfterCompletedJobs,
+			schedulePath,
+			scriptPathExact: path === null || path === '' ? undefined : path,
+			createdBy: user === null || user === '' ? undefined : user,
+			scriptPathStart: folder === null || folder === '' ? undefined : `f/${folder}/`,
+			jobKinds: jobKindsCat == 'all' || jobKinds == '' ? undefined : jobKinds,
+			success: success == 'success' ? true : success == 'failure' ? false : undefined,
+			running: success == 'running' ? true : undefined,
+			isSkipped: showSkipped ? undefined : false,
+			isFlowStep: jobKindsCat != 'all' ? false : undefined,
+			label: label === null || label === '' ? undefined : label,
+			tag: tag === null || tag === '' ? undefined : tag,
+			isNotSchedule: showSchedules == false ? true : undefined,
+			scheduledForBeforeNow: showFutureJobs == false ? true : undefined,
+			args:
+				argFilter && argFilter != '{}' && argFilter != '' && argError == '' ? argFilter : undefined,
+			result:
+				resultFilter && resultFilter != '{}' && resultFilter != '' && resultError == ''
+					? resultFilter
+					: undefined,
+			allWorkspaces: allWorkspaces ? true : undefined,
+			perPage,
+			allowWildcards
+		})
+		promise = CancelablePromiseUtils.catchErr(promise, (e) => {
 			sendUserToast('There was an issue loading jobs, see browser console for more details', true)
 			console.error(e)
-			return {
-				jobs: [],
-				obscured_jobs: []
-			}
-		} finally {
+			return CancelablePromiseUtils.pure({ jobs: [], obscured_jobs: [] } as ExtendedJobs)
+		})
+		promise = CancelablePromiseUtils.pipe(promise, () => {
 			loadingFetch = false
-		}
+		})
+		return promise
 	}
 
 	export async function loadJobs(
@@ -303,54 +318,57 @@
 		intervalId && clearInterval(intervalId)
 		intervalId = setInterval(syncer, refreshRate)
 	}
-	async function loadJobsIntern(shouldGetCount?: boolean): Promise<void> {
+	function loadJobsIntern(shouldGetCount?: boolean): CancelablePromise<void> {
 		if (shouldGetCount) {
 			getCount()
 		}
 		loading = true
-		try {
-			// Extend MinTs to fetch jobs mefore minTs and show a correct concurrency graph
-			// TODO: when an ended_at column is created on the completed_job table,
-			// lookback won't be needed anymore (just filter ended_at > minTs instead
-			const extendedMinTs = subtractDaysFromDateString(minTs, lookback)
-			if (concurrencyKey == null || concurrencyKey === '') {
-				let newJobs = await fetchJobs(maxTs, undefined, extendedMinTs)
+		// Extend MinTs to fetch jobs mefore minTs and show a correct concurrency graph
+		// TODO: when an ended_at column is created on the completed_job table,
+		// lookback won't be needed anymore (just filter ended_at > minTs instead
+		const extendedMinTs = subtractDaysFromDateString(minTs, lookback)
+
+		if (concurrencyKey == null || concurrencyKey === '') {
+			return CancelablePromiseUtils.map(fetchJobs(maxTs, undefined, extendedMinTs), (newJobs) => {
 				extendedJobs = { jobs: newJobs, obscured_jobs: [] } as ExtendedJobs
 
 				// Filter on minTs here and not in the backend
 				// to get enough data for the concurrency graph
 				jobs = sortMinDate(minTs, newJobs)
 				externalJobs = []
-			} else {
-				extendedJobs = await fetchExtendedJobs(concurrencyKey, maxTs, extendedMinTs)
-				const newJobs = extendedJobs.jobs
-				const newExternalJobs = extendedJobs.obscured_jobs
-
-				// Filter on minTs here and not in the backend
-				// to get enough data for the concurrency graph
-				if (minTs != undefined) {
-					const minDate = new Date(minTs)
-					jobs = newJobs.filter((x) =>
-						x.started_at
-							? new Date(x.started_at) > minDate
-							: x.created_at
-								? new Date(x.created_at) > minDate
-								: false
-					)
-					externalJobs = computeExternalJobs(
-						newExternalJobs.filter((x) => x.started_at && new Date(x.started_at) > minDate)
-					)
-				} else {
-					jobs = newJobs
-					externalJobs = computeExternalJobs(newExternalJobs)
+				loading = false
+			})
+		} else {
+			return CancelablePromiseUtils.map(
+				fetchExtendedJobs(concurrencyKey, maxTs, extendedMinTs),
+				(newExtendedJobs) => {
+					extendedJobs = newExtendedJobs
+					const newJobs = newExtendedJobs.jobs
+					const newExternalJobs = newExtendedJobs.obscured_jobs
+
+					// Filter on minTs here and not in the backend
+					// to get enough data for the concurrency graph
+					if (minTs != undefined) {
+						const minDate = new Date(minTs)
+						jobs = newJobs.filter((x) =>
+							x.started_at
+								? new Date(x.started_at) > minDate
+								: x.created_at
+									? new Date(x.created_at) > minDate
+									: false
+						)
+						externalJobs = computeExternalJobs(
+							newExternalJobs.filter((x) => x.started_at && new Date(x.started_at) > minDate)
+						)
+					} else {
+						jobs = newJobs
+						externalJobs = computeExternalJobs(newExternalJobs)
+					}
+					computeCompletedJobs()
+					loading = false
 				}
-			}
-			computeCompletedJobs()
-		} catch (err) {
-			sendUserToast(`There was a problem fetching jobs: ${err}`, true)
-			console.error(JSON.stringify(err))
+			)
 		}
-		loading = false
 	}
 
 	async function getCount() {
@@ -557,10 +575,11 @@
 			showSchedules,
 			allWorkspaces,
 			argFilter,
-			resultFilter
+			resultFilter,
+			perPage
 		]
-
-		untrack(() => onParamChanges())
+		let p = untrack(() => onParamChanges())
+		return () => p.cancel()
 	})
 	$effect(() => {
 		;[autoRefresh, refreshRate]
diff --git a/frontend/src/lib/components/runs/ManuelDatePicker.svelte b/frontend/src/lib/components/runs/ManuelDatePicker.svelte
index 0af1b9d10eb76..aaf0d600636dc 100644
--- a/frontend/src/lib/components/runs/ManuelDatePicker.svelte
+++ b/frontend/src/lib/components/runs/ManuelDatePicker.svelte
@@ -4,12 +4,13 @@
 	import { createEventDispatcher } from 'svelte'
 
 	interface Props {
-		minTs: string | undefined;
-		maxTs: string | undefined;
-		loading?: boolean;
-		selectedManualDate?: number;
-		loadText?: string | undefined;
-		serviceLogsChoices?: boolean;
+		minTs: string | undefined
+		maxTs: string | undefined
+		loading?: boolean
+		selectedManualDate?: number
+		loadText?: string | undefined
+		serviceLogsChoices?: boolean
+		numberOfLastJobsToFetch?: number
 	}
 
 	let {
@@ -18,8 +19,9 @@
 		loading = false,
 		selectedManualDate = $bindable(0),
 		loadText = undefined,
-		serviceLogsChoices = false
-	}: Props = $props();
+		serviceLogsChoices = false,
+		numberOfLastJobsToFetch = 1000
+	}: Props = $props()
 
 	export function computeMinMax(): { minTs: string; maxTs: string | undefined } | undefined {
 		return manualDates[selectedManualDate].computeMinMax()
@@ -75,7 +77,7 @@
 
 	let manualDates = $derived([
 		{
-			label: loadText ?? 'Last 1000 runs',
+			label: loadText ?? `Last ${numberOfLastJobsToFetch} runs`,
 			computeMinMax: () => {
 				return undefined
 			}
diff --git a/frontend/src/lib/components/runs/RunsTable.svelte b/frontend/src/lib/components/runs/RunsTable.svelte
index 341d40d834cc8..3eb22b2af290d 100644
--- a/frontend/src/lib/components/runs/RunsTable.svelte
+++ b/frontend/src/lib/components/runs/RunsTable.svelte
@@ -22,6 +22,7 @@
 		activeLabel?: string | null
 		// const loadMoreQuantity: number = 100
 		lastFetchWentToEnd?: boolean
+		perPage?: number
 	}
 
 	let {
@@ -33,7 +34,8 @@
 		selectedIds = $bindable([]),
 		selectedWorkspace = $bindable(undefined),
 		activeLabel = null,
-		lastFetchWentToEnd = $bindable(false)
+		lastFetchWentToEnd = $bindable(false),
+		perPage = 1000
 	}: Props = $props()
 
 	function getTime(job: Job): string | undefined {
@@ -116,7 +118,7 @@
 	let tableHeight: number = $state(0)
 	let headerHeight: number = $state(0)
 	let containerWidth: number = $state(0)
-	// const MAX_ITEMS = 1000
+	// const MAX_ITEMS = perPage
 
 	/*
 	function infiniteHandler({ detail: { loaded, error, complete } }) {
@@ -139,7 +141,7 @@
 			return ''
 		}
 		const jc = jobCount
-		const isTruncated = jc >= 1000 && !lastFetchWentToEnd
+		const isTruncated = jc >= perPage && !lastFetchWentToEnd
 
 		return `${jc}${isTruncated ? '+' : ''} job${jc != 1 ? 's' : ''}`
 	}
@@ -338,13 +340,15 @@
 			{/snippet}
 			{#snippet footer()}
 				<div
-					>{#if !lastFetchWentToEnd && jobs && jobs.length >= 1000}
+					>{#if !lastFetchWentToEnd && jobs && jobs.length >= perPage}
 						<button
-							class="text-xs text-blue-600 text-center w-full pb-2"
+							class="text-xs text-accent text-center w-full pb-2"
 							onclick={() => {
 								dispatch('loadExtra')
-							}}>Load next 1000 jobs</button
+							}}
 						>
+							Load next {perPage} jobs
+						</button>
 					{/if}</div
 				>
 			{/snippet}
diff --git a/frontend/src/lib/components/select/Select.svelte b/frontend/src/lib/components/select/Select.svelte
index 287c620a7b769..0327444bcf634 100644
--- a/frontend/src/lib/components/select/Select.svelte
+++ b/frontend/src/lib/components/select/Select.svelte
@@ -1,4 +1,7 @@
-<script lang="ts" generics="Item extends { label?: string; value: any; subtitle?: string }">
+<script
+	lang="ts"
+	generics="Item extends { label?: string; value: any; subtitle?: string; disabled?: boolean }"
+>
 	import { clickOutside } from '$lib/utils'
 	import { twMerge } from 'tailwind-merge'
 	import CloseButton from '../common/CloseButton.svelte'
diff --git a/frontend/src/lib/components/select/SelectDropdown.svelte b/frontend/src/lib/components/select/SelectDropdown.svelte
index 18b9612ef0abf..48f72ffae8ba7 100644
--- a/frontend/src/lib/components/select/SelectDropdown.svelte
+++ b/frontend/src/lib/components/select/SelectDropdown.svelte
@@ -198,11 +198,12 @@
 											: item.value === value
 												? 'bg-surface-hover/60'
 												: 'hover:bg-surface-hover',
-										itemButtonWrapperClasses
+										itemButtonWrapperClasses,
+										item.disabled ? 'cursor-not-allowed text-disabled' : ''
 									)}
 									onclick={(e) => {
 										e.stopImmediatePropagation()
-										onSelectValue(item)
+										if (!item.disabled) onSelectValue(item)
 									}}
 								>
 									{@render startSnippet?.({ item, close: () => (open = false) })}
diff --git a/frontend/src/lib/components/select/utils.svelte.ts b/frontend/src/lib/components/select/utils.svelte.ts
index 6527917f49a83..8a5671a6e420f 100644
--- a/frontend/src/lib/components/select/utils.svelte.ts
+++ b/frontend/src/lib/components/select/utils.svelte.ts
@@ -44,6 +44,7 @@ export type ProcessedItem<T> = {
 	label: string
 	value: T
 	subtitle?: string
+	disabled?: boolean
 }
 
 export function getLabel<T>(item: { label?: string; value: T } | undefined): string | undefined {
@@ -51,7 +52,7 @@ export function getLabel<T>(item: { label?: string; value: T } | undefined): str
 	if (item.label) return item.label
 	if (typeof item.value === 'string') return item.value
 	if (typeof item.value == 'number' || typeof item.value == 'boolean') return item.value.toString()
-	if (item.value == null) { return undefined }
+	if (item.value == null) return undefined
 	return JSON.stringify(item.value)
 }
 
diff --git a/frontend/src/routes/(root)/(logged)/audit_logs/+page.svelte b/frontend/src/routes/(root)/(logged)/audit_logs/+page.svelte
index 63153f69ed594..ac1195f8e5131 100644
--- a/frontend/src/routes/(root)/(logged)/audit_logs/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/audit_logs/+page.svelte
@@ -18,11 +18,12 @@
 	import AuditLogsTimeline from '$lib/components/auditLogs/AuditLogsTimeline.svelte'
 
 	let username: string = $state(page.url.searchParams.get('username') ?? 'all')
-	let pageIndex: number | undefined = $state(Number(page.url.searchParams.get('page')) || 0)
+	let pageIndex: number | undefined = $state(Number(page.url.searchParams.get('page')) || 1)
 	let before: string | undefined = $state(page.url.searchParams.get('before') ?? undefined)
 	let hasMore: boolean = $state(false)
+	let loading: boolean = $state(false)
 	let after: string | undefined = $state(page.url.searchParams.get('after') ?? undefined)
-	let perPage: number | undefined = $state(Number(page.url.searchParams.get('perPage')) || 100)
+	let perPage: number | undefined = $state(Number(page.url.searchParams.get('perPage')) || 1000)
 	let operation: string = $state(page.url.searchParams.get('operation') ?? 'all')
 	let resource: string | undefined = $state(page.url.searchParams.get('resource') ?? undefined)
 	let scope: undefined | 'all_workspaces' | 'instance' = $state(
@@ -107,6 +108,7 @@
 						bind:perPage
 						bind:scope
 						bind:hasMore
+						bind:loading
 					/>
 				</div>
 				<div class="2xl:hidden">
@@ -161,6 +163,7 @@
 					<Pane size={70} minSize={50}>
 						{#if logs}
 							<AuditLogsTable
+								{loading}
 								{logs}
 								{selectedId}
 								bind:pageIndex
diff --git a/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte
index 79a6e89882aab..8d6c5dd9fe6b7 100644
--- a/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte
@@ -1,1323 +1,13 @@
-<script lang="ts">
-	import {
-		JobService,
-		type Job,
-		type CompletedJob,
-		UserService,
-		FolderService,
-		ScriptService,
-		FlowService,
-		type ExtendedJobs,
-		OpenAPI
-	} from '$lib/gen'
+<!-- TODO : Refactor the runs page to separate state from UI so I don't need to do the {#key trick} -->
 
-	import { sendUserToast } from '$lib/toast'
-	import { userStore, workspaceStore, userWorkspaces } from '$lib/stores'
-	import { Button, Drawer, DrawerContent, Skeleton } from '$lib/components/common'
-	import RunChart from '$lib/components/RunChart.svelte'
-
-	import JobRunsPreview from '$lib/components/runs/JobRunsPreview.svelte'
-	import Tooltip from '$lib/components/Tooltip.svelte'
-	import CalendarPicker from '$lib/components/common/calendarPicker/CalendarPicker.svelte'
-
-	import RunsTable from '$lib/components/runs/RunsTable.svelte'
-	import { Pane, Splitpanes } from 'svelte-splitpanes'
-	import RunsFilter from '$lib/components/runs/RunsFilter.svelte'
-	import Toggle from '$lib/components/Toggle.svelte'
-	import ConfirmationModal from '$lib/components/common/confirmationModal/ConfirmationModal.svelte'
-	import type { Tweened } from 'svelte/motion'
-	import RunsQueue from '$lib/components/runs/RunsQueue.svelte'
-	import { twMerge } from 'tailwind-merge'
-	import ManuelDatePicker from '$lib/components/runs/ManuelDatePicker.svelte'
-	import JobsLoader from '$lib/components/runs/JobsLoader.svelte'
-	import { Calendar, Clock, TriangleAlert } from 'lucide-svelte'
-	import ConcurrentJobsChart from '$lib/components/ConcurrentJobsChart.svelte'
-	import { goto } from '$app/navigation'
-	import { base } from '$app/paths'
-	import type { RunsSelectionMode } from '$lib/components/runs/RunsBatchActionsDropdown.svelte'
-	import { isJobSelectable } from '$lib/utils'
-	import BatchReRunOptionsPane, {
-		type BatchReRunOptions
-	} from '$lib/components/runs/BatchReRunOptionsPane.svelte'
-	import { untrack } from 'svelte'
+<script>
 	import { page } from '$app/state'
-	import RunOption from '$lib/components/runs/RunOption.svelte'
-	import TooltipV2 from '$lib/components/meltComponents/Tooltip.svelte'
-	import DropdownSelect from '$lib/components/DropdownSelect.svelte'
-	import RunsBatchActionsDropdown from '$lib/components/runs/RunsBatchActionsDropdown.svelte'
-	import { createBubbler } from 'svelte/legacy'
-	import ToggleButtonGroup from '$lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte'
-	import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte'
-	import AnimatedPane from '$lib/components/splitPanes/AnimatedPane.svelte'
-
-	let jobs: Job[] | undefined = $state()
-	let selectedIds: string[] = $state([])
-	let loadingSelectedIds = $state(false)
-	let selectedWorkspace: string | undefined = $state(undefined)
-
-	let batchReRunOptions: BatchReRunOptions = $state({ flow: {}, script: {} })
-
-	// All Filters
-	// Filter by
-	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
-			| 'running'
-			| 'success'
-			| 'failure'
-			| undefined
-	)
-	let showSkipped: boolean | undefined = $state(
-		page.url.searchParams.get('show_skipped') != undefined
-			? page.url.searchParams.get('show_skipped') == 'true'
-			: false
+	import RunsPage, { DEFAULT_RUNS_PER_PAGE } from '../../../../../lib/components/RunsPage.svelte'
+	let perPage = $state(
+		parseInt(page.url.searchParams.get('per_page') ?? DEFAULT_RUNS_PER_PAGE.toString())
 	)
-
-	let showSchedules: boolean = $state(
-		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'
-			: 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') ?? '{}'))
-			: undefined
-	)
-	let resultFilter: any = $state(
-		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 lastFetchWentToEnd = $state(false)
-
-	function loadFromQuery() {
-		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
-			| 'running'
-			| 'success'
-			| 'failure'
-			| undefined
-		showSkipped =
-			page.url.searchParams.get('show_skipped') != undefined
-				? page.url.searchParams.get('show_skipped') == 'true'
-				: false
-
-		showSchedules =
-			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'
-				: localStorage.getItem('show_future_jobs') == 'false'
-					? false
-					: true
-
-		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') ?? '{}'))
-			: 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'
-	}
-
-	let queue_count: Tweened<number> | undefined = $state(undefined)
-	let suspended_count: Tweened<number> | undefined = $state(undefined)
-
-	let jobKinds: string | undefined = $state(undefined)
-	let loading: boolean = $state(false)
-	let paths: string[] = $state([])
-	let usernames: string[] = $state([])
-	let folders: string[] = $state([])
-	let completedJobs: CompletedJob[] | undefined = $state(undefined)
-	let extendedJobs: ExtendedJobs | undefined = $state(undefined)
-	let argError = $state('')
-	let resultError = $state('')
-	let filterTimeout: number | undefined = undefined
-	let selectedManualDate = $state(0)
-	let autoRefresh: boolean = $state(getAutoRefresh())
-	let runDrawer: Drawer | undefined = $state(undefined)
-	let lookback: number = $state(1)
-	let askingForConfirmation:
-		| undefined
-		| {
-				title: string
-				confirmBtnText: string
-				loading?: boolean
-				preContent?: string
-				onConfirm?: (forceCancel: boolean) => void
-				type?: ConfirmationModal['$$prop_def']['type']
-		  } = $state(undefined)
-
-	function getAutoRefresh() {
-		try {
-			return localStorage.getItem('auto_refresh_in_runs') != 'false'
-		} catch (e) {
-			console.error('Error getting auto refresh', e)
-			return true
-		}
-	}
-
-	let innerWidth = $state(window.innerWidth)
-	let jobsLoader: JobsLoader | undefined = $state(undefined)
-	let externalJobs: Job[] | undefined = $state(undefined)
-
-	let graph: 'RunChart' | 'ConcurrencyChart' = $state(
-		typeOfChart(page.url.searchParams.get('graph'))
-	)
-	let graphIsRunsChart: boolean = $state(untrack(() => graph) === 'RunChart')
-
-	let manualDatePicker: ManuelDatePicker | undefined = $state(undefined)
-
-	let runsTable: RunsTable | undefined = $state(undefined)
-
-	function setQuery(replaceState: boolean) {
-		let searchParams = new URLSearchParams()
-
-		if (user) {
-			searchParams.set('user', user)
-		} else {
-			searchParams.delete('user')
-		}
-
-		if (worker) {
-			searchParams.set('worker', worker)
-		} else {
-			searchParams.delete('worker')
-		}
-
-		if (folder) {
-			searchParams.set('folder', folder)
-		} else {
-			searchParams.delete('folder')
-		}
-
-		if (success !== undefined) {
-			searchParams.set('success', success.toString())
-		} else {
-			searchParams.delete('success')
-		}
-
-		if (showSkipped) {
-			searchParams.set('show_skipped', showSkipped.toString())
-		} else {
-			searchParams.delete('show_skipped')
-		}
-
-		if (showSchedules) {
-			searchParams.set('show_schedules', showSchedules.toString())
-		} else {
-			searchParams.delete('show_schedules')
-		}
-
-		if (showFutureJobs) {
-			searchParams.set('show_future_jobs', showFutureJobs.toString())
-		} else {
-			searchParams.delete('show_future_jobs')
-		}
-
-		if (allWorkspaces && $workspaceStore == 'admins') {
-			searchParams.set('all_workspaces', allWorkspaces.toString())
-			searchParams.set('workspace', 'admins')
-		} else {
-			searchParams.delete('all_workspaces')
-		}
-
-		// ArgFilter is an object. Encode it to a string
-		if (argFilter) {
-			searchParams.set('arg', encodeURIComponent(JSON.stringify(argFilter)))
-		} else {
-			searchParams.delete('arg')
-		}
-
-		if (resultFilter) {
-			searchParams.set('result', encodeURIComponent(JSON.stringify(resultFilter)))
-		} else {
-			searchParams.delete('result')
-		}
-		if (schedulePath) {
-			searchParams.set('schedule_path', schedulePath)
-		} else {
-			searchParams.delete('schedule_path')
-		}
-		if (jobKindsCat != 'runs') {
-			searchParams.set('job_kinds', jobKindsCat)
-		} else {
-			searchParams.delete('job_kinds')
-		}
-
-		if (minTs) {
-			searchParams.set('min_ts', minTs)
-		} else {
-			searchParams.delete('min_ts')
-		}
-
-		if (maxTs) {
-			searchParams.set('max_ts', maxTs)
-		} else {
-			searchParams.delete('max_ts')
-		}
-		if (concurrencyKey) {
-			searchParams.set('concurrency_key', concurrencyKey)
-		} else {
-			searchParams.delete('concurrency_key')
-		}
-
-		if (tag) {
-			searchParams.set('tag', tag)
-		} else {
-			searchParams.delete('tag')
-		}
-
-		if (label) {
-			searchParams.set('label', label)
-		} else {
-			searchParams.delete('label')
-		}
-
-		if (allowWildcards) {
-			searchParams.set('allow_wildcards', allowWildcards.toString())
-		} else {
-			searchParams.delete('allow_wildcards')
-		}
-
-		if (graph != 'RunChart') {
-			searchParams.set('graph', graph)
-		} else {
-			searchParams.delete('graph')
-		}
-
-		let newPath = path ? `/${path}` : ''
-
-		let newUrl = `${base}/runs${newPath}?${searchParams.toString()}`
-		if (
-			page.url.searchParams.toString() != searchParams.toString() ||
-			page.url.pathname != newUrl.split('?')[0]
-		) {
-			// replaceState(newUrl.toString(), $page.state)
-			goto(newUrl.toString(), { replaceState: replaceState, keepFocus: true })
-		}
-	}
-
-	function reloadJobsWithoutFilterError() {
-		if (resultError == '' && argError == '') {
-			filterTimeout && clearTimeout(filterTimeout)
-			filterTimeout = setTimeout(() => {
-				jobsLoader?.loadJobs(minTs, maxTs, true)
-			}, 2000)
-		}
-	}
-
-	function reset() {
-		path = page.params.path ?? null
-		minTs = undefined
-		maxTs = undefined
-		jobs = undefined
-		completedJobs = undefined
-		lastFetchWentToEnd = false
-		selectedManualDate = 0
-		selectedIds = []
-		schedulePath = undefined
-		batchReRunOptions = { flow: {}, script: {} }
-		selectionMode = false
-		selectedWorkspace = undefined
-		jobsLoader?.loadJobs(minTs, maxTs, true)
-	}
-
-	async function loadUsernames(): Promise<void> {
-		usernames = await UserService.listUsernames({ workspace: $workspaceStore! })
-	}
-
-	async function loadFolders(): Promise<void> {
-		folders = await FolderService.listFolders({
-			workspace: $workspaceStore!
-		}).then((x) => x.map((y) => y.name))
-	}
-
-	async function loadPaths() {
-		const npaths_scripts = await ScriptService.listScriptPaths({ workspace: $workspaceStore ?? '' })
-		const npaths_flows = await FlowService.listFlowPaths({ workspace: $workspaceStore ?? '' })
-		paths = npaths_scripts.concat(npaths_flows).sort()
-	}
-
-	function filterByPath(e: CustomEvent<string>) {
-		path = e.detail
-		user = null
-		folder = null
-		label = null
-		concurrencyKey = null
-		tag = null
-		schedulePath = undefined
-		worker = null
-	}
-
-	function filterByUser(e: CustomEvent<string>) {
-		path = null
-		folder = null
-		user = e.detail
-		label = null
-		concurrencyKey = null
-		tag = null
-		schedulePath = undefined
-	}
-
-	function filterByFolder(e: CustomEvent<string>) {
-		path = null
-		user = null
-		folder = e.detail
-		label = null
-		concurrencyKey = null
-		tag = null
-		schedulePath = undefined
-		worker = null
-	}
-
-	function filterByLabel(e: CustomEvent<string>) {
-		path = null
-		user = null
-		folder = null
-		label = e.detail
-		concurrencyKey = null
-		tag = null
-		schedulePath = undefined
-		worker = null
-		allowWildcards = false
-	}
-
-	function filterByConcurrencyKey(e: CustomEvent<string>) {
-		path = null
-		user = null
-		folder = null
-		label = null
-		concurrencyKey = e.detail
-		tag = null
-		schedulePath = undefined
-		worker = null
-	}
-
-	function filterByTag(e: CustomEvent<string>) {
-		path = null
-		user = null
-		folder = null
-		label = null
-		concurrencyKey = null
-		tag = e.detail
-		schedulePath = undefined
-		worker = null
-		allowWildcards = false
-	}
-
-	function filterBySchedule(e: CustomEvent<string>) {
-		path = null
-		user = null
-		folder = null
-		label = null
-		concurrencyKey = null
-		tag = null
-		schedulePath = e.detail
-		worker = null
-	}
-
-	function filterByWorker(e: CustomEvent<string>) {
-		path = null
-		user = null
-		folder = null
-		label = null
-		concurrencyKey = null
-		tag = null
-		schedulePath = undefined
-		worker = e.detail
-		allowWildcards = false
-	}
-
-	let calendarChangeTimeout: number | undefined = $state(undefined)
-
-	function typeOfChart(s: string | null): 'RunChart' | 'ConcurrencyChart' {
-		switch (s) {
-			case 'RunChart':
-				return 'RunChart'
-			case 'ConcurrencyChart':
-				return 'ConcurrencyChart'
-			default:
-				return 'RunChart'
-		}
-	}
-
-	let selectionMode: RunsSelectionMode | false = $state(false)
-
-	async function onSetSelectionMode(mode: RunsSelectionMode | false) {
-		selectionMode = mode
-		if (!mode) {
-			selectedIds = []
-			batchReRunOptions = { flow: {}, script: {} }
-			return
-		}
-		const selectableIds = jobs?.filter(isJobSelectable(mode)).map((j) => j.id) ?? []
-		selectedIds = []
-
-		if (!selectableIds?.length) {
-			sendUserToast(
-				'There are no visible jobs that can be ' +
-					{ cancel: 'cancelled', 're-run': 're-ran' }[mode],
-				true
-			)
-		}
-	}
-
-	function getSelectedFilters() {
-		return {
-			workspace: $workspaceStore ?? '',
-			startedBefore: maxTs,
-			startedAfter: minTs,
-			schedulePath,
-			scriptPathExact: path === null || path === '' ? undefined : path,
-			createdBy: user === null || user === '' ? undefined : user,
-			scriptPathStart: folder === null || folder === '' ? undefined : `f/${folder}/`,
-			jobKinds: jobKinds == '' ? undefined : jobKinds,
-			success: success == 'success' ? true : success == 'failure' ? false : undefined,
-			running:
-				success == 'running' || success == 'suspended'
-					? true
-					: success == 'waiting'
-						? false
-						: undefined,
-			isSkipped: showSkipped ? undefined : false,
-			// isFlowStep: jobKindsCat != 'all' ? false : undefined,
-			hasNullParent:
-				path != undefined || path != undefined || jobKindsCat != 'all' ? true : undefined,
-			label: label === null || label === '' ? undefined : label,
-			tag: tag === null || tag === '' ? undefined : tag,
-			isNotSchedule: showSchedules == false ? true : undefined,
-			suspended: success == 'waiting' ? false : success == 'suspended' ? true : undefined,
-			scheduledForBeforeNow:
-				showFutureJobs == false || success == 'waiting' || success == 'suspended'
-					? true
-					: undefined,
-			args:
-				argFilter && argFilter != '{}' && argFilter != '' && argError == '' ? argFilter : undefined,
-			result:
-				resultFilter && resultFilter != '{}' && resultFilter != '' && resultError == ''
-					? resultFilter
-					: undefined,
-			allWorkspaces: allWorkspaces ? true : undefined,
-			allowWildcards: allowWildcards ? true : undefined
-		}
-	}
-
-	async function cancelJobs(uuidsToCancel: string[], forceCancel: boolean = false) {
-		const uuids = await JobService.cancelSelection({
-			workspace: $workspaceStore ?? '',
-			requestBody: uuidsToCancel,
-			forceCancel: forceCancel
-		})
-		selectedIds = []
-		jobsLoader?.loadJobs(minTs, maxTs, true, true)
-		sendUserToast(`Canceled ${uuids.length} jobs`)
-		selectionMode = false
-	}
-
-	async function onCancelFilteredJobs() {
-		forceCancelInPopup = false
-		askingForConfirmation = {
-			title: 'Confirm cancelling all jobs corresponding to the selected filters',
-			confirmBtnText: 'Loading...',
-			loading: true
-		}
-
-		const selectedFilters = getSelectedFilters()
-		const selectedFiltersString = JSON.stringify(selectedFilters, null, 4)
-		const jobIdsToCancel = await JobService.listFilteredQueueUuids(selectedFilters)
-
-		askingForConfirmation = {
-			title: `Confirm cancelling all jobs corresponding to the selected filters (${jobIdsToCancel.length} jobs)`,
-			confirmBtnText: `Cancel ${jobIdsToCancel.length} jobs that matched the filters`,
-			preContent: selectedFiltersString,
-			onConfirm: (forceCancel) => {
-				cancelJobs(jobIdsToCancel, forceCancel)
-			}
-		}
-	}
-
-	async function onCancelSelectedJobs() {
-		forceCancelInPopup = true
-		askingForConfirmation = {
-			confirmBtnText: `Cancel ${selectedIds.length} jobs`,
-			title: 'Confirm cancelling the selected jobs',
-			onConfirm: (forceCancel) => {
-				cancelJobs(selectedIds, forceCancel)
-			}
-		}
-	}
-
-	async function reRunJobs(jobIdsToReRun: string[]) {
-		if (!$workspaceStore) return
-
-		if (askingForConfirmation) {
-			askingForConfirmation.loading = true
-		}
-
-		const body: Parameters<typeof JobService.batchReRunJobs>[0]['requestBody'] = {
-			job_ids: jobIdsToReRun,
-			script_options_by_path: batchReRunOptions.script,
-			flow_options_by_path: batchReRunOptions.flow
-		}
-
-		// workaround because EventSource does not support POST requests
-		// https://medium.com/@david.richards.tech/sse-server-sent-events-using-a-post-request-without-eventsource-1c0bd6f14425
-		const response = await fetch(`${OpenAPI.BASE}/w/${$workspaceStore}/jobs/run/batch_rerun_jobs`, {
-			method: 'POST',
-			headers: { 'Content-Type': 'application/json' },
-			body: JSON.stringify(body)
-		})
-		await new Promise(async (resolve) => {
-			const reader = response?.body?.pipeThrough(new TextDecoderStream()).getReader()
-			let reRanUuids: string[] = []
-			if (reader) {
-				while (true) {
-					const { value, done } = await reader.read()
-					if (value) {
-						// It is possible get multiple values at once in case of buffering
-						const receivedUuids: string[] = []
-						for (const line of value.split('\n')) {
-							if (!line) continue
-							else if (line.startsWith('Error:')) {
-								console.error(line)
-							} else {
-								receivedUuids.push(line)
-							}
-						}
-						if (receivedUuids.length) {
-							reRanUuids.push(...receivedUuids)
-							if (askingForConfirmation) {
-								askingForConfirmation.confirmBtnText = `${reRanUuids.length}/${jobIdsToReRun.length}`
-							}
-						}
-					}
-
-					if (done || !value) {
-						if (reRanUuids.length) {
-							sendUserToast(`Re-ran ${reRanUuids.length}/${jobIdsToReRun.length} jobs`)
-						}
-						if (reRanUuids.length !== jobIdsToReRun.length) {
-							sendUserToast(
-								`Failed to re-run ${jobIdsToReRun.length - reRanUuids.length} jobs. Check console for details`,
-								true
-							)
-							// We do not get explicit error from backend if the job script don't exist
-							for (const jobId of jobIdsToReRun) {
-								if (reRanUuids.includes(jobId)) continue
-								console.error('Could not re-run job ' + jobId)
-							}
-						}
-						break
-					}
-				}
-			}
-			resolve(undefined)
-		})
-
-		selectedIds = []
-		batchReRunOptions = { flow: {}, script: {} }
-		jobsLoader?.loadJobs(minTs, maxTs, true, true)
-		selectionMode = false
-	}
-
-	async function onReRunFilteredJobs() {
-		const selectedFilters = getSelectedFilters()
-		selectedIds = []
-		loadingSelectedIds = true
-
-		if (jobKindsCat !== 'runs') {
-			sendUserToast('Batch re-run is only supported for scripts and flows', true)
-		}
-		selectedIds = await JobService.listFilteredJobsUuids({
-			...selectedFilters,
-			jobKinds: 'script,flow'
-		})
-		selectionMode = 're-run'
-	}
-
-	async function onReRunSelectedJobs() {
-		const jobIdsToReRun = selectedIds
-		askingForConfirmation = {
-			title: `Confirm re-running the selected jobs`,
-			confirmBtnText: `Re-run ${jobIdsToReRun.length} jobs`,
-			type: 'reload',
-			onConfirm: async () => {
-				await reRunJobs(jobIdsToReRun)
-			}
-		}
-	}
-
-	function setLookback(lookbackInDays: number) {
-		lookback = lookbackInDays
-	}
-
-	async function loadExtra() {
-		if (jobsLoader) {
-			lastFetchWentToEnd = await jobsLoader.loadExtraJobs()
-			console.log(lastFetchWentToEnd)
-		}
-	}
-
-	const warnJobLimitMsg =
-		'The exact number of concurrent jobs at the beginning of the time range may be incorrect as only the last 1000 jobs are taken into account: a job that was started earlier than this limit will not be taken into account'
-
-	function jobsFilter(f: 'waiting' | 'suspended') {
-		path = null
-		user = null
-		folder = null
-		label = null
-		concurrencyKey = null
-		schedulePath = undefined
-		path = null
-		tag = null
-		worker = null
-		if (success == f) {
-			success = undefined
-		} else {
-			success = f
-		}
-		jobKindsCat = 'all'
-	}
-
-	$effect(() => {
-		loadingSelectedIds && selectedIds.length && setTimeout(() => (loadingSelectedIds = false), 250)
-	})
-	$effect(() => {
-		;[
-			user,
-			worker,
-			label,
-			folder,
-			path,
-			success !== undefined,
-			showSkipped,
-			showSchedules,
-			showFutureJobs,
-			argFilter,
-			resultFilter,
-			schedulePath,
-			jobKindsCat,
-			concurrencyKey,
-			tag,
-			graph,
-			maxTs,
-			minTs,
-			allWorkspaces,
-			allowWildcards,
-			$workspaceStore
-		]
-
-		untrack(() => setQuery(false))
-	})
-	$effect(() => {
-		minTs || untrack(() => setQuery(true))
-	})
-	$effect(() => {
-		maxTs || untrack(() => setQuery(true))
-	})
-	$effect(() => {
-		if ($workspaceStore) {
-			untrack(() => {
-				loadUsernames()
-				loadFolders()
-				loadPaths()
-			})
-		}
-	})
-	let warnJobLimit = $derived.by(() => {
-		let extended = extendedJobs as ExtendedJobs | undefined
-		return (
-			graph === 'ConcurrencyChart' &&
-			extended !== undefined &&
-			extended.jobs.length + extended.obscured_jobs.length >= 1000
-		)
-	})
-
-	const bubble = createBubbler()
-
-	function selectAll() {
-		if (!selectionMode) return
-		if (allSelected) {
-			allSelected = false
-			selectedIds = []
-		} else {
-			allSelected = true
-			selectedIds = jobs?.filter(isJobSelectable(selectionMode)).map((j) => j.id) ?? []
-		}
-	}
-
-	let allSelected = $derived.by(() => {
-		return selectionMode && selectedIds.length === selectableJobCount
-	})
-
-	const selectableJobCount = $derived.by(() => {
-		if (!selectionMode) return 0
-		return jobs?.filter(isJobSelectable(selectionMode)).length ?? 0
-	})
-
-	let tableTopBarWidth = $state(0)
-
-	const smallScreenWidth = 1920
-	const verySmallScreenWidth = 1300
-
-	let forceCancelInPopup = $state(false)
 </script>
 
-<JobsLoader
-	{allowWildcards}
-	{allWorkspaces}
-	bind:jobs
-	{user}
-	{folder}
-	{path}
-	{worker}
-	{label}
-	{success}
-	{showSkipped}
-	{argFilter}
-	{resultFilter}
-	{showSchedules}
-	{showFutureJobs}
-	{schedulePath}
-	{jobKindsCat}
-	computeMinAndMax={manualDatePicker?.computeMinMax}
-	bind:minTs
-	bind:maxTs
-	bind:jobKinds
-	bind:queue_count
-	bind:suspended_count
-	{autoRefresh}
-	bind:completedJobs
-	bind:externalJobs
-	bind:extendedJobs
-	{concurrencyKey}
-	{argError}
-	{resultError}
-	{tag}
-	bind:loading
-	bind:this={jobsLoader}
-	lookback={graphIsRunsChart ? 0 : lookback}
-/>
-
-<ConfirmationModal
-	title={askingForConfirmation?.title ?? ''}
-	confirmationText={askingForConfirmation?.confirmBtnText ?? ''}
-	open={!!askingForConfirmation}
-	on:confirmed={async () => {
-		const func = askingForConfirmation?.onConfirm
-		await func?.(forceCancelInPopup)
-		askingForConfirmation = undefined
-	}}
-	type={askingForConfirmation?.type}
-	loading={askingForConfirmation?.loading}
-	on:canceled={() => {
-		askingForConfirmation = undefined
-	}}
->
-	{#if askingForConfirmation?.preContent}
-		<pre>{askingForConfirmation.preContent}</pre>
-		<Toggle
-			size="xs"
-			class="mt-4"
-			color="red"
-			bind:checked={forceCancelInPopup}
-			options={{
-				right: 'Force cancel',
-				rightTooltip:
-					'Only use this for jobs that refuse to gracefully cancel. This is dangerous, only do this if you have no alternatives!'
-			}}
-		></Toggle>
-		{#if forceCancelInPopup}
-			<div class="mt-4 text-red-500 p-2 text-sm">
-				<p>
-					Force cancel is enabled. This is dangerous, only do this if you have no alternatives.
-					Instead of being gracefully cancelled, all jobs will be immediately sent to the completed
-					job table regardless of them being processed or not or part of running flows. You may end
-					up in an inconsistent state.
-				</p>
-			</div>
-		{/if}
-	{/if}
-</ConfirmationModal>
-
-<Drawer bind:this={runDrawer}>
-	<DrawerContent title="Run details" on:close={runDrawer.closeDrawer}>
-		{#if selectedIds.length === 1}
-			{#if selectedIds[0] === '-'}
-				<div class="p-4">There is no information available for this job</div>
-			{:else}
-				<JobRunsPreview blankLink id={selectedIds[0]} workspace={selectedWorkspace} />
-			{/if}
-		{/if}
-	</DrawerContent>
-</Drawer>
-
-<svelte:window
-	onpopstate={() => {
-		reset()
-		loadFromQuery()
-	}}
-/>
-
-{#if $userStore?.operator && $workspaceStore && !$userWorkspaces.find((_) => _.id === $workspaceStore)?.operator_settings?.runs}
-	<div class="bg-red-100 border-l-4 border-red-600 text-orange-700 p-4 m-4 mt-12" role="alert">
-		<p class="font-bold">Unauthorized</p>
-		<p>Page not available for operators</p>
-	</div>
-{:else}
-	<div class="w-full h-screen flex flex-col" bind:clientWidth={innerWidth}>
-		<!-- Header and filters -->
-		<div class="flex flex-row items-start w-full border-b px-4 gap-8">
-			<div class="flex flex-row items-center h-full gap-6">
-				<div class="flex flex-row items-center gap-1">
-					<h1
-						class={twMerge(
-							'!text-2xl font-semibold leading-6 tracking-tight',
-							$userStore?.operator ? 'pl-10' : ''
-						)}
-					>
-						Runs
-					</h1>
-
-					<Tooltip
-						documentationLink="https://www.windmill.dev/docs/core_concepts/monitor_past_and_future_runs"
-					>
-						All past and schedule executions of scripts and flows, including previews. You only see
-						your own runs or runs of groups you belong to unless you are an admin.
-					</Tooltip>
-				</div>
-
-				<!-- Queue -->
-				<RunsQueue
-					{success}
-					{queue_count}
-					{suspended_count}
-					onJobsWaiting={() => {
-						jobsFilter('waiting')
-					}}
-					onJobsSuspended={() => {
-						jobsFilter('suspended')
-					}}
-					small={innerWidth < smallScreenWidth}
-				/>
-			</div>
-
-			<div class="py-2 flex items-start gap-x-4 gap-y-2 flex-row grow min-w-0 justify-end">
-				<!-- Dates -->
-				<div class="flex flex-row gap-2">
-					<RunOption label="From" for="min-datetimes">
-						{#if minTs || maxTs}
-							<input
-								type="text"
-								class="!text-sm text-primary !bg-surface-secondary h-9 !border-none"
-								value={minTs ? new Date(minTs).toLocaleString() : 'zoom x axis to set min'}
-								disabled
-								name="min-datetimes"
-							/>
-						{/if}
-						<CalendarPicker
-							clearable={true}
-							date={minTs}
-							label="From"
-							class={minTs || maxTs ? '' : 'relative top-0 bottom-0 left-0 right-0 h-[34px]'}
-							on:change={async ({ detail }) => {
-								minTs = new Date(detail).toISOString()
-								calendarChangeTimeout && clearTimeout(calendarChangeTimeout)
-								calendarChangeTimeout = setTimeout(() => {
-									jobsLoader?.loadJobs(minTs, maxTs, true)
-								}, 1000)
-							}}
-							on:clear={async () => {
-								minTs = undefined
-								calendarChangeTimeout && clearTimeout(calendarChangeTimeout)
-								calendarChangeTimeout = setTimeout(() => {
-									jobsLoader?.loadJobs(minTs, maxTs, true)
-								}, 1000)
-							}}
-						/>
-					</RunOption>
-
-					<RunOption label="To" for="max-datetimes">
-						{#if maxTs || minTs}
-							<input
-								type="text"
-								class="!text-sm text-primary !bg-surface-secondary h-9 !border-none"
-								value={maxTs ? new Date(maxTs).toLocaleString() : 'zoom x axis to set max'}
-								name="max-datetimes"
-								disabled
-							/>
-						{/if}
-						<CalendarPicker
-							clearable={true}
-							date={maxTs}
-							label="To"
-							class={minTs || maxTs ? '' : 'relative top-0 bottom-0 left-0 right-0 h-[34px]'}
-							on:change={async ({ detail }) => {
-								maxTs = new Date(detail).toISOString()
-								calendarChangeTimeout && clearTimeout(calendarChangeTimeout)
-								calendarChangeTimeout = setTimeout(() => {
-									jobsLoader?.loadJobs(minTs, maxTs, true)
-								}, 1000)
-							}}
-							on:clear={async () => {
-								maxTs = undefined
-								calendarChangeTimeout && clearTimeout(calendarChangeTimeout)
-								calendarChangeTimeout = setTimeout(() => {
-									jobsLoader?.loadJobs(minTs, maxTs, true)
-								}, 1000)
-							}}
-						/>
-					</RunOption>
-
-					{#if minTs || maxTs}
-						<RunOption label="Reset" for="reset" noLabel>
-							<Button variant="default" size="xs" onClick={reset} btnClasses="h-9">Reset</Button>
-						</RunOption>
-					{/if}
-				</div>
-
-				<!-- Filters 1 -->
-				<div class="flex flex-row gap-2">
-					<RunsFilter
-						bind:allowWildcards
-						bind:showSkipped
-						bind:user
-						bind:folder
-						bind:label
-						bind:concurrencyKey
-						bind:tag
-						bind:worker
-						bind:path
-						bind:success
-						bind:argFilter
-						bind:resultFilter
-						bind:argError
-						bind:resultError
-						bind:jobKindsCat
-						bind:allWorkspaces
-						bind:schedulePath
-						on:change={reloadJobsWithoutFilterError}
-						on:successChange={(e) => {
-							if (e.detail == 'running' && maxTs != undefined) {
-								maxTs = undefined
-							}
-						}}
-						{usernames}
-						{folders}
-						{paths}
-						mobile={innerWidth < verySmallScreenWidth}
-						small={innerWidth < smallScreenWidth}
-						calendarSmall={!minTs && !maxTs}
-					/>
-				</div>
-			</div>
-		</div>
-
-		<!-- Graph -->
-		<div class="p-2 px-4 pt-8 w-full border-b">
-			<div class="relative z-10">
-				<div class="absolute left-0 -top-7 flex flex-row gap-2 items-center min-w-24">
-					<ToggleButtonGroup
-						selected={graph}
-						on:selected={({ detail }) => {
-							graph = detail
-							graphIsRunsChart = graph === 'RunChart'
-						}}
-					>
-						{#snippet children({ item })}
-							<ToggleButton value="RunChart" label="Duration" {item} />
-							<ToggleButton
-								{item}
-								value="ConcurrencyChart"
-								label="Concurrency"
-								icon={warnJobLimit ? TriangleAlert : undefined}
-								tooltip={warnJobLimit ? warnJobLimitMsg : undefined}
-							/>
-						{/snippet}
-					</ToggleButtonGroup>
-
-					{#if !graphIsRunsChart}
-						<DropdownSelect
-							items={[
-								{
-									displayName: 'None',
-									action: () => setLookback(0),
-									id: '0'
-								},
-								{
-									displayName: '1 day',
-									action: () => setLookback(1),
-									id: '1'
-								},
-								{
-									displayName: '3 days',
-									action: () => setLookback(3),
-									id: '3'
-								},
-								{
-									displayName: '7 days',
-									action: () => setLookback(7),
-									id: '7'
-								}
-							]}
-							selected={lookback.toString()}
-							selectedDisplayName={`${lookback} days lookback`}
-						>
-							{#snippet extraLabel()}
-								<TooltipV2>
-									{#snippet text()}
-										How far behind the min datetime to start considering jobs for the concurrency
-										graph. Change this value to include jobs started before the set time window for
-										the computation of the graph
-									{/snippet}
-								</TooltipV2>
-							{/snippet}
-						</DropdownSelect>
-					{/if}
-				</div>
-			</div>
-			{#if graph === 'RunChart'}
-				<RunChart
-					{lastFetchWentToEnd}
-					bind:selectedIds
-					canSelect={!selectionMode}
-					minTimeSet={minTs}
-					maxTimeSet={maxTs}
-					maxIsNow={maxTs == undefined}
-					onLoadExtra={loadExtra}
-					jobs={completedJobs}
-					onZoom={async (zoom) => {
-						minTs = zoom.min.toISOString()
-						maxTs = zoom.max.toISOString()
-						manualDatePicker?.resetChoice()
-						jobsLoader?.loadJobs(minTs, maxTs, true)
-					}}
-					onPointClicked={(ids) => {
-						runsTable?.scrollToRun(ids)
-					}}
-				/>
-			{:else if graph === 'ConcurrencyChart'}
-				<ConcurrentJobsChart
-					minTimeSet={minTs}
-					maxTimeSet={maxTs}
-					maxIsNow={maxTs == undefined}
-					{extendedJobs}
-					onZoom={async (zoom) => {
-						minTs = zoom.min.toISOString()
-						maxTs = zoom.max.toISOString()
-						jobsLoader?.loadJobs(minTs, maxTs, true)
-					}}
-				/>
-			{/if}
-		</div>
-
-		<div class="grow min-h-0">
-			<Splitpanes>
-				<Pane minSize={40}>
-					<div class="flex flex-col h-full">
-						<!-- Runs table top bar -->
-						<div
-							class="flex flex-row gap-4 items-center px-2 py-1 grow-0 justify-between"
-							bind:clientWidth={tableTopBarWidth}
-						>
-							<div class="flex flex-row gap-4 items-center">
-								{#if selectionMode && selectableJobCount}
-									<div class="flex flex-row items-center font-semibold text-sm">
-										<div class="px-2">
-											<input
-												onfocus={bubble('focus')}
-												type="checkbox"
-												checked={allSelected}
-												id="select-all"
-												class={twMerge(
-													'cursor-pointer',
-													allSelected ? 'bg-blue-50 dark:bg-blue-900/50' : '',
-													'flex flex-row items-center p-2 pr-4 top-0 font-semibold text-sm'
-												)}
-												onclick={selectAll}
-											/>
-										</div>
-										<label
-											class="cursor-pointer whitespace-nowrap text-xs text-emphasis font-semibold"
-											for="select-all">Select all</label
-										>
-									</div>
-								{/if}
-
-								<RunsBatchActionsDropdown
-									isLoading={loadingSelectedIds}
-									{selectionMode}
-									selectionCount={selectedIds.length}
-									{onSetSelectionMode}
-									{onCancelFilteredJobs}
-									{onCancelSelectedJobs}
-									{onReRunFilteredJobs}
-									{onReRunSelectedJobs}
-									small={tableTopBarWidth < 800}
-								/>
-							</div>
-
-							<div class="flex flex-row gap-4 items-center">
-								<div class="flex flex-row gap-1 items-center">
-									<Toggle
-										id="cron-schedules"
-										bind:checked={showSchedules}
-										on:change={() => {
-											localStorage.setItem(
-												'show_schedules_in_run',
-												showSchedules ? 'true' : 'false'
-											)
-										}}
-										options={tableTopBarWidth < 800 || selectionMode
-											? {}
-											: { right: 'Cron schedules' }}
-									/>
-									<span title="Cron schedules">
-										<Calendar size="14" />
-									</span>
-								</div>
-
-								<div class="flex flex-row gap-1 items-center">
-									<Toggle
-										size="sm"
-										bind:checked={showFutureJobs}
-										on:change={() => {
-											localStorage.setItem('show_future_jobs', showFutureJobs ? 'true' : 'false')
-										}}
-										id="planned-later"
-										options={tableTopBarWidth < 800 || selectionMode
-											? {}
-											: { right: 'Planned later' }}
-									/>
-									<span title="Planned later">
-										<Clock size={14} />
-									</span>
-								</div>
-								<div class="flex flex-row gap-2 items-center">
-									<ManuelDatePicker
-										on:loadJobs={() => {
-											lastFetchWentToEnd = false
-											jobsLoader?.loadJobs(minTs, maxTs, true)
-										}}
-										bind:minTs
-										bind:maxTs
-										bind:selectedManualDate
-										{loading}
-										bind:this={manualDatePicker}
-									/>
-									<Toggle
-										size="sm"
-										bind:checked={autoRefresh}
-										on:change={() => {
-											localStorage.setItem('auto_refresh_in_runs', autoRefresh ? 'true' : 'false')
-										}}
-										options={{ right: 'Auto-refresh' }}
-										textClass="whitespace-nowrap"
-									/>
-								</div>
-							</div>
-						</div>
-
-						<!-- Runs table. Add overflow-hidden because scroll is handled inside the runs table based on this wrapper height -->
-						<div class="grow min-h-0 overflow-y-hidden overflow-x-auto">
-							{#if jobs}
-								<RunsTable
-									{jobs}
-									externalJobs={externalJobs ?? []}
-									omittedObscuredJobs={extendedJobs?.omitted_obscured_jobs ?? false}
-									showExternalJobs={!graphIsRunsChart}
-									activeLabel={label}
-									{selectionMode}
-									bind:selectedIds
-									bind:selectedWorkspace
-									bind:lastFetchWentToEnd
-									on:loadExtra={loadExtra}
-									on:filterByPath={filterByPath}
-									on:filterByUser={filterByUser}
-									on:filterByFolder={filterByFolder}
-									on:filterByLabel={filterByLabel}
-									on:filterByConcurrencyKey={filterByConcurrencyKey}
-									on:filterByTag={filterByTag}
-									on:filterBySchedule={filterBySchedule}
-									on:filterByWorker={filterByWorker}
-									bind:this={runsTable}
-								></RunsTable>
-							{:else}
-								<div class="gap-1 flex flex-col">
-									{#each new Array(8) as _}
-										<Skeleton layout={[[3]]} />
-									{/each}
-								</div>
-							{/if}
-						</div>
-					</div>
-				</Pane>
-				<AnimatedPane size={40} minSize={15} class="flex flex-col" opened={selectedIds.length > 0}>
-					{#if selectionMode === 're-run'}
-						<BatchReRunOptionsPane {selectedIds} bind:options={batchReRunOptions} />
-					{:else if selectedIds.length === 1}
-						{#if selectedIds[0] === '-'}
-							<div class="p-4">There is no information available for this job</div>
-						{:else}
-							<JobRunsPreview
-								on:filterByConcurrencyKey={filterByConcurrencyKey}
-								on:filterByWorker={filterByWorker}
-								id={selectedIds[0]}
-								workspace={selectedWorkspace}
-							/>
-						{/if}
-					{:else if selectedIds.length > 1}
-						<div class="text-xs m-4"
-							>There are {selectedIds.length} jobs selected. Choose 1 to see detailed information</div
-						>
-					{/if}
-				</AnimatedPane>
-			</Splitpanes>
-		</div>
-	</div>
-{/if}
+{#key perPage}
+	<RunsPage bind:perPage />
+{/key}