diff --git a/frontend/CLAUDE.md b/frontend/CLAUDE.md
index da207ec62a..6788ac10be 100644
--- a/frontend/CLAUDE.md
+++ b/frontend/CLAUDE.md
@@ -7,6 +7,75 @@
 - Keep components small and focused
 - Always use keys in {#each} blocks
 
+## Data Flow and State Management
+
+### Prefer Unidirectional Data Flow with Composable State
+
+When you can use unidirectional data flow with composable state, prefer that over two-way binding between components. Two-way binding between components creates confusing data flow - as the codebase grows, nothing guarantees that bound state won't be updated from multiple locations, leading to bugs and maintenance issues.
+
+**❌ AVOID: Two-way binding when composable state would work**
+
+```svelte
+<Loader bind:loading bind:items {args} />
+```
+
+**✅ PREFER: Unidirectional data flow with composables**
+
+```typescript
+// loader.svelte.ts
+function useLoader(argsGetter: () => Args) {
+  let args = $derived(argsGetter())
+  let items = $state([])
+  let loading = $state(false)
+
+  $effect(() => {
+    // Logic reactive to args changes
+  })
+
+  return {
+    get loading() { return loading },
+    get items() { return items }
+  }
+}
+
+// Component.svelte
+<script>
+  let loader = useLoader(() => args)
+  let loading = $derived(loader.loading)
+  let items = $derived(loader.items)
+</script>
+```
+
+This pattern ensures:
+- State responsibility is clearly owned by `useLoader`
+- Data flows in one direction (parent → child)
+- No ambiguity about where state can be modified
+- Better maintainability as the codebase scales
+
+### Async Data Fetching with Runed
+
+For async requests, **always use `resource()` from the Runed library** instead of manual state management:
+
+```typescript
+import { resource } from 'runed'
+
+let items = resource(() => args, (args) => YourService.route(args))
+
+// Access loading state
+items.loading
+
+// Access data
+items.current
+```
+
+The `resource()` utility:
+- Automatically handles loading states
+- Manages async lifecycle
+- Provides reactive updates when dependencies change
+- Eliminates boilerplate for common async patterns
+
+**Key Takeaway**: Prefer unidirectional data flow with composables over two-way binding between components. Two-way binding is acceptable for simple form inputs, but avoid it when composable state patterns can provide clearer state ownership.
+
 ## UI Guidelines
 
 ### Styling Guidelines
diff --git a/frontend/src/lib/components/ConcurrentJobsChart.svelte b/frontend/src/lib/components/ConcurrentJobsChart.svelte
index c401df4be6..d9d976bdb5 100644
--- a/frontend/src/lib/components/ConcurrentJobsChart.svelte
+++ b/frontend/src/lib/components/ConcurrentJobsChart.svelte
@@ -19,16 +19,16 @@
 	interface Props {
 		extendedJobs?: ExtendedJobs | undefined
 		maxIsNow?: boolean
-		minTimeSet?: string | undefined
-		maxTimeSet?: string | undefined
+		minTimeSet?: string | null
+		maxTimeSet?: string | null
 		onZoom: (zoom: { min: Date; max: Date }) => void
 	}
 
 	let {
 		extendedJobs = undefined,
 		maxIsNow = false,
-		minTimeSet = undefined,
-		maxTimeSet = undefined,
+		minTimeSet = null,
+		maxTimeSet = null,
 		onZoom
 	}: Props = $props()
 
@@ -157,8 +157,8 @@
 	}
 	function computeMinMaxTime(
 		intervals: AggregatedInterval[] | undefined,
-		minTimeSet: string | undefined,
-		maxTimeSet: string | undefined
+		minTimeSet: string | null,
+		maxTimeSet: string | null
 	) {
 		let minTimeSetDate = minTimeSet ? new Date(minTimeSet) : undefined
 		let maxTimeSetDate = maxTimeSet ? new Date(maxTimeSet) : undefined
@@ -235,7 +235,8 @@
 					display: false
 				},
 				min: minMaxTimes.min,
-				max: minMaxTimes.max
+				max: minMaxTimes.max,
+				ticks: { maxRotation: 0, minRotation: 0 }
 			},
 			y: {
 				grid: {
diff --git a/frontend/src/lib/components/HistoricInputs.svelte b/frontend/src/lib/components/HistoricInputs.svelte
index 2f3ac70672..e141400c4d 100644
--- a/frontend/src/lib/components/HistoricInputs.svelte
+++ b/frontend/src/lib/components/HistoricInputs.svelte
@@ -1,17 +1,17 @@
 <script lang="ts">
-	import { type RunnableType, type Job } from '$lib/gen/index.js'
+	import { type RunnableType } from '$lib/gen/index.js'
 	import { sendUserToast } from '$lib/utils.js'
 	import RunningJobSchemaPicker from '$lib/components/schema/RunningJobSchemaPicker.svelte'
 	import { createEventDispatcher, onDestroy } from 'svelte'
-	import JobsLoader from './runs/JobsLoader.svelte'
+	import { useJobsLoader, type UseJobLoaderArgs } from './runs/useJobsLoader.svelte'
 	import { DataTable } from '$lib/components/table'
 	import HistoricList from './HistoricList.svelte'
 	import { Loader2 } from 'lucide-svelte'
+	import { workspaceStore } from '$lib/stores'
 
 	interface Props {
 		runnableId?: string | undefined
 		runnableType?: RunnableType | undefined
-		loading?: boolean
 		selected?: string | undefined
 		showAuthor?: boolean
 		placement?: 'bottom-start' | 'top-start' | 'bottom-end' | 'top-end'
@@ -22,7 +22,6 @@
 	let {
 		runnableId = undefined,
 		runnableType = undefined,
-		loading = $bindable(false),
 		selected = $bindable(undefined),
 		showAuthor = false,
 		placement = 'top-end',
@@ -33,7 +32,6 @@
 	let historicList: HistoricList | undefined = $state(undefined)
 	const dispatch = createEventDispatcher()
 
-	let jobs: Job[] = $state([])
 	let hasMoreCurrentRuns = false
 	let page = $state(1)
 
@@ -54,6 +52,10 @@
 		}
 	}
 
+	export function loading(): boolean {
+		return jobsLoader?.loading ?? false
+	}
+
 	onDestroy(() => {
 		resetSelected(false)
 	})
@@ -95,40 +97,39 @@
 		}
 		return ''
 	}
+
+	let jobsLoader = useJobsLoader(
+		() =>
+			({
+				filters: {
+					show_skipped: false,
+					path: runnableId,
+					success: 'running',
+					arg: searchArgs ? JSON.stringify(searchArgs) : '',
+					per_page: 5
+				},
+				jobKinds: getJobKinds(runnableType),
+				syncQueuedRunsCount: false,
+				refreshRate: 10000,
+				computeMinAndMax: undefined,
+				currentWorkspace: $workspaceStore ?? '',
+				skip: !runnableId
+			}) satisfies UseJobLoaderArgs
+	)
+	let jobs = $derived(jobsLoader?.jobs ?? [])
 </script>
 
 <svelte:window onkeydown={handleKeydown} />
 
-{#if runnableId}
-	<JobsLoader
-		bind:jobs
-		path={runnableId}
-		showSkipped={false}
-		jobKinds={getJobKinds(runnableType)}
-		user={null}
-		label={null}
-		folder={null}
-		concurrencyKey={null}
-		tag={null}
-		success="running"
-		argFilter={searchArgs ? JSON.stringify(searchArgs) : undefined}
-		bind:loading
-		syncQueuedRunsCount={false}
-		refreshRate={10000}
-		computeMinAndMax={undefined}
-		perPage={5}
-	/>
-{/if}
-
 <div class="h-full max-h-full min-h-0 w-full flex flex-col gap-2 relative">
 	<div class="grow-0" data-schema-picker>
 		<DataTable size="xs" bind:currentPage={page} hasMore={hasMoreCurrentRuns} tableFixed={true}>
-			{#if loading}
+			{#if jobsLoader?.loading}
 				<div class="text-primary absolute top-2 right-2">
 					<Loader2 class="animate-spin" size={14} />
 				</div>
 			{/if}
-			{#if jobs?.length > 0}
+			{#if jobs.length > 0}
 				<colgroup>
 					<col class="w-8" />
 					<col class="w-16" />
@@ -144,7 +145,7 @@
 							on:select={(e) => handleSelected(e.detail)}
 						/>
 					{/each}
-					{#if jobs?.length == 5}
+					{#if jobs.length == 5}
 						<tr class="text-left text-primary text-xs w-full">
 							<td class="w-full px-2" colspan="3">limited to 5 runs</td>
 						</tr>
diff --git a/frontend/src/lib/components/RunChart.svelte b/frontend/src/lib/components/RunChart.svelte
index 78873a3537..73216c8284 100644
--- a/frontend/src/lib/components/RunChart.svelte
+++ b/frontend/src/lib/components/RunChart.svelte
@@ -12,7 +12,8 @@
 		LinearScale,
 		PointElement,
 		TimeScale,
-		LogarithmicScale
+		LogarithmicScale,
+		type ChartOptions
 	} from 'chart.js'
 	import type { CompletedJob } from '$lib/gen'
 	import { getDbClockNow } from '$lib/forLater'
@@ -23,8 +24,8 @@
 	interface Props {
 		jobs?: CompletedJob[] | undefined
 		maxIsNow?: boolean
-		minTimeSet?: string | undefined
-		maxTimeSet?: string | undefined
+		minTimeSet?: string | null
+		maxTimeSet?: string | null
 		selectedIds?: string[]
 		canSelect?: boolean
 		lastFetchWentToEnd?: boolean
@@ -37,8 +38,8 @@
 	let {
 		jobs = [],
 		maxIsNow = false,
-		minTimeSet = undefined,
-		maxTimeSet = undefined,
+		minTimeSet = null,
+		maxTimeSet = null,
 		selectedIds = $bindable([]),
 		canSelect = true,
 		lastFetchWentToEnd = false,
@@ -163,8 +164,8 @@
 
 	function computeMinMaxTime(
 		jobs: CompletedJob[] | undefined,
-		minTimeSet: string | undefined,
-		maxTimeSet: string | undefined
+		minTimeSet: string | null,
+		maxTimeSet: string | null
 	) {
 		let minTimeSetDate = minTimeSet ? new Date(minTimeSet) : undefined
 		let maxTimeSetDate = maxTimeSet ? new Date(maxTimeSet) : undefined
@@ -244,7 +245,7 @@
 
 	const minMaxTime = $derived.by(() => computeMinMaxTime(jobs, minTimeSet, maxTimeSet))
 
-	let scatterOptions = $derived({
+	let scatterOptions: ChartOptions<'scatter'> = $derived({
 		responsive: true,
 		maintainAspectRatio: false,
 		plugins: {
@@ -274,8 +275,9 @@
 				grid: {
 					display: false
 				},
-				min: minMaxTime.minTime,
-				max: minMaxTime.maxTime
+				min: minMaxTime.minTime.getTime(),
+				max: minMaxTime.maxTime.getTime(),
+				ticks: { maxRotation: 0, minRotation: 0 }
 			},
 			y: {
 				grid: {
@@ -285,11 +287,14 @@
 					display: true,
 					text: 'job duration (ms)'
 				},
-				type: 'logarithmic'
+				type: 'logarithmic',
+				afterFit: function (axis) {
+					axis.width = Math.max(axis.width, 65) // min width to prevent layout flickering
+				}
 			}
 		},
 		animation: false
-	} as any)
+	})
 </script>
 
 <DarkModeObserver bind:darkMode />
diff --git a/frontend/src/lib/components/RunsPage.svelte b/frontend/src/lib/components/RunsPage.svelte
index 5ad50f5eb0..fd9487ba1c 100644
--- a/frontend/src/lib/components/RunsPage.svelte
+++ b/frontend/src/lib/components/RunsPage.svelte
@@ -1,19 +1,12 @@
-<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,
-		type JobTriggerKind
+		OpenAPI
 	} from '$lib/gen'
 
 	import { sendUserToast } from '$lib/toast'
@@ -27,18 +20,15 @@
 
 	import RunsTable from '$lib/components/runs/RunsTable.svelte'
 	import { Pane, Splitpanes } from 'svelte-splitpanes'
-	import RunsFilter from '$lib/components/runs/RunsFilter.svelte'
+	import RunsFilter, { runsFiltersSchema } 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 { computeJobKinds, useJobsLoader } from '$lib/components/runs/useJobsLoader.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 { isJobSelectable, type RunsSelectionMode } from '$lib/utils'
 	import BatchReRunOptionsPane, {
 		type BatchReRunOptions
@@ -54,142 +44,23 @@
 	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'
+	import { useSearchParams, StaleWhileLoading } from '$lib/svelte5Utils.svelte'
 
-	let { perPage = $bindable() }: { perPage: number } = $props()
+	let filters = useSearchParams(runsFiltersSchema)
 
-	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
-	)
-
-	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
-	)
-	let jobTriggerKind: JobTriggerKind | undefined = $state(
-		(page.url.searchParams.get('job_trigger_kind') as JobTriggerKind) ?? 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
-		jobTriggerKind = (page.url.searchParams.get('job_trigger_kind') as JobTriggerKind) ?? 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 jobKinds: string | undefined = $derived(computeJobKinds(filters.job_kinds))
 	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 filterTimeout: ReturnType<typeof setInterval> | undefined = undefined
 	let selectedManualDate = $state(0)
 	let autoRefresh: boolean = $state(getAutoRefresh())
 	let runDrawer: Drawer | undefined = $state(undefined)
@@ -214,183 +85,57 @@
 		}
 	}
 
-	let innerWidth = $state(window.innerWidth)
-	let jobsLoader: JobsLoader | undefined = $state(undefined)
-	let externalJobs: Job[] | undefined = $state(undefined)
-
+	let manualDatePicker: ManuelDatePicker | 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 innerWidth = $state(window.innerWidth)
+	let jobsLoader = useJobsLoader(() => ({
+		filters,
+		computeMinAndMax: manualDatePicker?.computeMinMax,
+		jobKinds,
+		autoRefresh,
+		argError,
+		resultError,
+		lookback: graphIsRunsChart ? 0 : lookback,
+		onSetPerPage: (p) => (filters.per_page = p),
+		onSetMinMaxTs: (minTs, maxTs) => ((filters.min_ts = minTs), (filters.max_ts = maxTs)),
+		currentWorkspace: $workspaceStore ?? ''
+	}))
+	let lastFetchWentToEnd = $derived(jobsLoader.lastFetchWentToEnd)
+	let queue_count = $derived(jobsLoader.queue_count)
+	let suspended_count = $derived(jobsLoader.suspended_count)
+	let loading = $derived(jobsLoader.loading)
+	let externalJobs = $derived(jobsLoader.externalJobs)
+	let extendedJobs = $derived(jobsLoader.extendedJobs)
+	// Avoid flicker, but still show empty if loading takes too long
+	let debouncedCompletedJobs = new StaleWhileLoading(() => jobsLoader.completedJobs)
+	let debouncedJobs = new StaleWhileLoading(() => jobsLoader.jobs)
+	let completedJobs = $derived(jobsLoader.completedJobs ?? debouncedCompletedJobs.current)
+	let jobs = $derived(jobsLoader.jobs ?? debouncedJobs.current)
 
 	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 (jobTriggerKind) {
-			searchParams.set('job_trigger_kind', jobTriggerKind)
-		} else {
-			searchParams.delete('job_trigger_kind')
-		}
-
-		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)
+				jobsLoader?.loadJobs(true)
 			}, 2000)
 		}
 	}
 
 	function reset() {
-		path = page.params.path ?? null
-		minTs = undefined
-		maxTs = undefined
-		jobs = undefined
-		completedJobs = undefined
-		lastFetchWentToEnd = false
+		filters.min_ts = null
+		filters.max_ts = null
 		selectedManualDate = 0
 		selectedIds = []
-		schedulePath = undefined
+		filters.schedule_path = null
 		batchReRunOptions = { flow: {}, script: {} }
 		selectionMode = false
 		selectedWorkspace = undefined
-		jobsLoader?.loadJobs(minTs, maxTs, true)
+		jobsLoader?.loadJobs(true)
 	}
 
 	async function loadUsernames(): Promise<void> {
@@ -409,97 +154,28 @@
 		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 resetAndFilterBy(setter: (string) => void) {
+		return (e: CustomEvent<string>) => {
+			filters.path = null
+			filters.user = null
+			filters.folder = null
+			filters.label = null
+			filters.concurrency_key = null
+			filters.tag = null
+			filters.worker = null
+			filters.schedule_path = null
+			setter(e.detail)
+		}
 	}
 
-	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)
+	const filterByPath = resetAndFilterBy((s) => (filters.path = s))
+	const filterByUser = resetAndFilterBy((s) => (filters.user = s))
+	const filterByFolder = resetAndFilterBy((s) => (filters.folder = s))
+	const filterByLabel = resetAndFilterBy((s) => (filters.label = s))
+	const filterByConcurrencyKey = resetAndFilterBy((s) => (filters.concurrency_key = s))
+	const filterByTag = resetAndFilterBy((s) => (filters.tag = s))
+	const filterBySchedule = resetAndFilterBy((s) => (filters.schedule_path = s))
+	const filterByWorker = resetAndFilterBy((s) => (filters.worker = s))
 
 	function typeOfChart(s: string | null): 'RunChart' | 'ConcurrencyChart' {
 		switch (s) {
@@ -534,49 +210,54 @@
 	}
 
 	function getSelectedFilters() {
+		const argFilter = filters.arg && JSON.parse(filters.arg)
+		const resultFilter = filters.result && JSON.parse(filters.result)
 		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}/`,
+			startedBefore: filters.max_ts ?? undefined,
+			startedAfter: filters.min_ts ?? undefined,
+			schedulePath: filters.schedule_path ?? undefined,
+			scriptPathExact: filters.path === null || filters.path === '' ? undefined : filters.path,
+			createdBy: filters.user || undefined,
+			scriptPathStart: filters.folder ? `f/${filters.folder}/` : undefined,
 			jobKinds: jobKinds == '' ? undefined : jobKinds,
-			success: success == 'success' ? true : success == 'failure' ? false : undefined,
+			success:
+				filters.success == 'success' ? true : filters.success == 'failure' ? false : undefined,
 			running:
-				success == 'running' || success == 'suspended'
+				filters.success == 'running' || filters.success == 'suspended'
 					? true
-					: success == 'waiting'
+					: filters.success == 'waiting'
 						? false
 						: undefined,
-			isSkipped: showSkipped ? undefined : false,
+			isSkipped: filters.show_skipped ? 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'
+				filters.path != undefined || filters.path != undefined || filters.job_kinds != 'all'
 					? true
 					: undefined,
-			args:
-				argFilter && argFilter != '{}' && argFilter != '' && argError == '' ? argFilter : undefined,
-			result:
-				resultFilter && resultFilter != '{}' && resultFilter != '' && resultError == ''
-					? resultFilter
+			label: filters.label || undefined,
+			tag: filters.tag || undefined,
+			isNotSchedule: filters.show_schedules == false ? true : undefined,
+			suspended:
+				filters.success == 'waiting' ? false : filters.success == 'suspended' ? true : undefined,
+			scheduledForBeforeNow:
+				filters.show_future_jobs == false ||
+				filters.success == 'waiting' ||
+				filters.success == 'suspended'
+					? true
 					: undefined,
-			jobTriggerKind,
-			allWorkspaces: allWorkspaces ? true : undefined,
-			allowWildcards: allowWildcards ? true : undefined
+			args: argFilter && Object.keys(argFilter).length && !argError ? argFilter : undefined,
+			result:
+				resultFilter && Object.keys(resultFilter).length && !resultError ? resultFilter : undefined,
+			jobTriggerKind: filters.job_trigger_kind || undefined,
+			allWorkspaces: filters.all_workspaces || undefined,
+			allowWildcards: filters.allow_wildcards || undefined
 		}
 	}
 
 	$effect(() => {
-		if (jobTriggerKind === 'schedule' && !showSchedules) {
-			showSchedules = true
+		if (filters.job_trigger_kind === 'schedule' && !filters.show_schedules) {
+			filters.show_schedules = true
 		}
 	})
 
@@ -587,7 +268,7 @@
 			forceCancel: forceCancel
 		})
 		selectedIds = []
-		jobsLoader?.loadJobs(minTs, maxTs, true, true)
+		jobsLoader?.loadJobs(true, true)
 		sendUserToast(`Canceled ${uuids.length} jobs`)
 		selectionMode = false
 	}
@@ -694,7 +375,7 @@
 
 		selectedIds = []
 		batchReRunOptions = { flow: {}, script: {} }
-		jobsLoader?.loadJobs(minTs, maxTs, true, true)
+		jobsLoader?.loadJobs(true, true)
 		selectionMode = false
 	}
 
@@ -703,7 +384,7 @@
 		selectedIds = []
 		loadingSelectedIds = true
 
-		if (jobKindsCat !== 'runs') {
+		if (filters.job_kinds !== 'runs') {
 			sendUserToast('Batch re-run is only supported for scripts and flows', true)
 		}
 		selectedIds = await JobService.listFilteredJobsUuids({
@@ -730,67 +411,29 @@
 	}
 
 	async function loadExtra() {
-		if (jobsLoader) {
-			lastFetchWentToEnd = await jobsLoader.loadExtraJobs()
-		}
+		await jobsLoader?.loadExtraJobs()
 	}
 
 	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
+		filters.path = null
+		filters.user = null
+		filters.folder = null
+		filters.label = null
+		filters.concurrency_key = null
+		filters.tag = null
+		filters.worker = null
+		filters.schedule_path = null
+		if (filters.success == f) {
+			filters.success = null
 		} else {
-			success = f
+			filters.success = f
 		}
-		jobKindsCat = 'all'
+		filters.job_kinds = 'all'
 	}
 
 	$effect(() => {
 		loadingSelectedIds && selectedIds.length && setTimeout(() => (loadingSelectedIds = false), 250)
 	})
-	$effect(() => {
-		;[
-			user,
-			worker,
-			label,
-			folder,
-			path,
-			success !== undefined,
-			showSkipped,
-			showSchedules,
-			showFutureJobs,
-			argFilter,
-			resultFilter,
-			jobTriggerKind,
-			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(() => {
@@ -839,48 +482,10 @@
 	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`
+		`The exact number of concurrent jobs at the beginning of the time range may be incorrect as only the last ${filters.per_page} 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}
-	{showSkipped}
-	{argFilter}
-	{resultFilter}
-	{jobTriggerKind}
-	{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 ?? ''}
@@ -937,7 +542,6 @@
 <svelte:window
 	onpopstate={() => {
 		reset()
-		loadFromQuery()
 	}}
 />
 
@@ -971,7 +575,7 @@
 
 				<!-- Queue -->
 				<RunsQueue
-					{success}
+					success={filters.success}
 					{queue_count}
 					{suspended_count}
 					onJobsWaiting={() => {
@@ -988,70 +592,52 @@
 				<!-- Dates -->
 				<div class="flex flex-row gap-2">
 					<RunOption label="From" for="min-datetimes">
-						{#if minTs || maxTs}
+						{#if filters.min_ts || filters.max_ts}
 							<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'}
+								value={filters.min_ts
+									? new Date(filters.min_ts).toLocaleString()
+									: 'zoom x axis to set min'}
 								disabled
 								name="min-datetimes"
 							/>
 						{/if}
 						<CalendarPicker
 							clearable={true}
-							date={minTs}
+							bind:date={filters.min_ts}
+							on:clear={() => (filters.min_ts = null)}
 							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)
-							}}
+							class={filters.min_ts || filters.max_ts
+								? ''
+								: 'relative top-0 bottom-0 left-0 right-0 h-[34px]'}
 						/>
 					</RunOption>
 
 					<RunOption label="To" for="max-datetimes">
-						{#if maxTs || minTs}
+						{#if filters.max_ts || filters.min_ts}
 							<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'}
+								value={filters.max_ts
+									? new Date(filters.max_ts).toLocaleString()
+									: 'zoom x axis to set max'}
 								name="max-datetimes"
 								disabled
 							/>
 						{/if}
 						<CalendarPicker
 							clearable={true}
-							date={maxTs}
+							on:clear={() => (filters.max_ts = null)}
+							bind:date={filters.max_ts}
 							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)
-							}}
+							class={filters.min_ts || filters.max_ts
+								? ''
+								: 'relative top-0 bottom-0 left-0 right-0 h-[34px]'}
 						/>
 					</RunOption>
 
-					{#if minTs || maxTs}
+					{#if filters.min_ts || filters.max_ts}
 						<RunOption label="Reset" for="reset" noLabel>
 							<Button variant="default" size="xs" onClick={reset} btnClasses="h-9">Reset</Button>
 						</RunOption>
@@ -1061,28 +647,28 @@
 				<!-- 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:jobTriggerKind
+						bind:allowWildcards={filters.allow_wildcards}
+						bind:user={filters.user}
+						bind:folder={filters.folder}
+						bind:label={filters.label}
+						bind:concurrencyKey={filters.concurrency_key}
+						bind:tag={filters.tag}
+						bind:worker={filters.worker}
+						bind:showSkipped={filters.show_skipped}
+						bind:path={filters.path}
+						bind:success={filters.success}
+						bind:jobTriggerKind={filters.job_trigger_kind}
 						bind:argError
 						bind:resultError
-						bind:jobKindsCat
-						bind:allWorkspaces
-						bind:schedulePath
+						bind:jobKindsCat={filters.job_kinds}
+						bind:allWorkspaces={filters.all_workspaces}
+						bind:schedulePath={filters.schedule_path}
+						bind:argFilter={filters.arg}
+						bind:resultFilter={filters.result}
 						on:change={reloadJobsWithoutFilterError}
 						on:successChange={(e) => {
-							if (e.detail == 'running' && maxTs != undefined) {
-								maxTs = undefined
+							if (e.detail == 'running' && filters.max_ts != undefined) {
+								filters.max_ts = null
 							}
 						}}
 						{usernames}
@@ -1090,7 +676,7 @@
 						{paths}
 						mobile={innerWidth < verySmallScreenWidth}
 						small={innerWidth < smallScreenWidth}
-						calendarSmall={!minTs && !maxTs}
+						calendarSmall={!filters.min_ts && !filters.max_ts}
 					/>
 				</div>
 			</div>
@@ -1164,17 +750,17 @@
 					{lastFetchWentToEnd}
 					bind:selectedIds
 					canSelect={!selectionMode}
-					minTimeSet={minTs}
-					maxTimeSet={maxTs}
+					minTimeSet={filters.min_ts}
+					maxTimeSet={filters.max_ts}
 					totalRowsFetched={jobs?.length ?? 0}
-					maxIsNow={maxTs == undefined}
+					maxIsNow={filters.max_ts == undefined}
 					onLoadExtra={loadExtra}
 					jobs={completedJobs}
 					onZoom={async (zoom) => {
-						minTs = zoom.min.toISOString()
-						maxTs = zoom.max.toISOString()
+						filters.min_ts = zoom.min.toISOString()
+						filters.max_ts = zoom.max.toISOString()
 						manualDatePicker?.resetChoice()
-						jobsLoader?.loadJobs(minTs, maxTs, true)
+						jobsLoader?.loadJobs(true)
 					}}
 					onPointClicked={(ids) => {
 						runsTable?.scrollToRun(ids)
@@ -1182,14 +768,14 @@
 				/>
 			{:else if graph === 'ConcurrencyChart'}
 				<ConcurrentJobsChart
-					minTimeSet={minTs}
-					maxTimeSet={maxTs}
-					maxIsNow={maxTs == undefined}
+					minTimeSet={filters.min_ts}
+					maxTimeSet={filters.max_ts}
+					maxIsNow={filters.max_ts == undefined}
 					{extendedJobs}
 					onZoom={async (zoom) => {
-						minTs = zoom.min.toISOString()
-						maxTs = zoom.max.toISOString()
-						jobsLoader?.loadJobs(minTs, maxTs, true)
+						filters.min_ts = zoom.min.toISOString()
+						filters.max_ts = zoom.max.toISOString()
+						jobsLoader?.loadJobs(true)
 					}}
 				/>
 			{/if}
@@ -1242,17 +828,11 @@
 							</div>
 
 							<div class="flex flex-row gap-4 items-center">
-								{#if !jobTriggerKind}
+								{#if !filters.job_trigger_kind}
 									<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'
-												)
-											}}
+											bind:checked={filters.show_schedules}
 											options={tableTopBarWidth < 800 || selectionMode
 												? {}
 												: { right: 'Schedules' }}
@@ -1266,10 +846,7 @@
 								<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')
-										}}
+										bind:checked={filters.show_future_jobs}
 										id="planned-later"
 										options={tableTopBarWidth < 800 || selectionMode
 											? {}
@@ -1282,15 +859,14 @@
 								<div class="flex flex-row gap-2 items-center">
 									<ManuelDatePicker
 										on:loadJobs={() => {
-											lastFetchWentToEnd = false
-											jobsLoader?.loadJobs(minTs, maxTs, true)
+											jobsLoader?.loadJobs(true)
 										}}
-										bind:minTs
-										bind:maxTs
+										bind:minTs={filters.min_ts}
+										bind:maxTs={filters.max_ts}
 										bind:selectedManualDate
 										{loading}
 										bind:this={manualDatePicker}
-										numberOfLastJobsToFetch={perPage}
+										numberOfLastJobsToFetch={filters.per_page}
 									/>
 									<Toggle
 										size="sm"
@@ -1313,11 +889,11 @@
 									externalJobs={externalJobs ?? []}
 									omittedObscuredJobs={extendedJobs?.omitted_obscured_jobs ?? false}
 									showExternalJobs={!graphIsRunsChart}
-									activeLabel={label}
+									activeLabel={filters.label}
 									{selectionMode}
+									{lastFetchWentToEnd}
 									bind:selectedIds
 									bind:selectedWorkspace
-									bind:lastFetchWentToEnd
 									on:loadExtra={loadExtra}
 									on:filterByPath={filterByPath}
 									on:filterByUser={filterByUser}
@@ -1328,7 +904,7 @@
 									on:filterBySchedule={filterBySchedule}
 									on:filterByWorker={filterByWorker}
 									bind:this={runsTable}
-									{perPage}
+									perPage={filters.per_page}
 								></RunsTable>
 							{:else}
 								<div class="gap-1 flex flex-col">
@@ -1345,13 +921,13 @@
 							<Select
 								class="w-20"
 								bind:value={
-									() => perPage,
+									() => filters.per_page,
 									(newPerPage) => {
-										perPage = newPerPage
+										filters.per_page = newPerPage
 										if (newPerPage > (jobs?.length ?? 1000)) loadExtra()
 									}
 								}
-								onCreateItem={(v) => (perPage = parseInt(v))}
+								onCreateItem={(v) => (filters.per_page = parseInt(v))}
 								items={[
 									{ value: 25, label: '25' },
 									{ value: 100, label: '100' },
diff --git a/frontend/src/lib/components/SavedInputs.svelte b/frontend/src/lib/components/SavedInputs.svelte
deleted file mode 100644
index 242d430af3..0000000000
--- a/frontend/src/lib/components/SavedInputs.svelte
+++ /dev/null
@@ -1,460 +0,0 @@
-<script lang="ts">
-	import { Button } from '$lib/components/common'
-	import {
-		InputService,
-		type Input,
-		type RunnableType,
-		type Job,
-		JobService
-	} from '$lib/gen/index.js'
-	import { userStore, workspaceStore } from '$lib/stores.js'
-	import { base } from '$lib/base'
-	import { classNames, displayDateOnly, sendUserToast } from '$lib/utils.js'
-	import { createEventDispatcher, untrack } from 'svelte'
-	import { Pane, Splitpanes } from 'svelte-splitpanes'
-	import ObjectViewer from './propertyPicker/ObjectViewer.svelte'
-	import { ArrowLeftIcon, Edit, ExternalLink, X } from 'lucide-svelte'
-	import Toggle from './Toggle.svelte'
-	import Tooltip from './Tooltip.svelte'
-	import TimeAgo from './TimeAgo.svelte'
-	import JobsLoader from './runs/JobsLoader.svelte'
-	import Skeleton from './common/skeleton/Skeleton.svelte'
-	import SaveInputsButton from './SaveInputsButton.svelte'
-
-	interface Props {
-		scriptHash?: string | null
-		scriptPath?: string | null
-		flowPath?: string | null
-		canSaveInputs?: boolean
-		// Are the current Inputs valid and able to be saved?
-		isValid: boolean
-		args: object
-	}
-
-	let {
-		scriptHash = null,
-		scriptPath = null,
-		flowPath = null,
-		canSaveInputs = true,
-		isValid,
-		args
-	}: Props = $props()
-
-	interface EditableInput extends Input {
-		isEditing?: boolean
-		isSaving?: boolean
-	}
-
-	let previousInputs: Input[] | undefined = $state(undefined)
-	let savedInputs: EditableInput[] | undefined = $state(undefined)
-	let selectedInput = $state() as Input | null
-	let jobs: Job[] = $state([])
-	let loading: boolean = $state(false)
-	const dispatch = createEventDispatcher()
-
-	let runnableId = $derived(scriptHash || scriptPath || flowPath || undefined)
-
-	let runnableType: RunnableType | undefined = $derived(
-		scriptHash ? 'ScriptHash' : scriptPath ? 'ScriptPath' : flowPath ? 'FlowPath' : undefined
-	)
-
-	let hasAlreadyFailed = false
-	async function loadInputHistory() {
-		try {
-			previousInputs = await InputService.getInputHistory({
-				workspace: $workspaceStore!,
-				runnableId,
-				runnableType,
-				perPage: 10
-			})
-		} catch (e) {
-			console.error(e)
-			if (hasAlreadyFailed) return
-			hasAlreadyFailed = true
-			sendUserToast(`Failed to load input history: ${e}`, true)
-		}
-	}
-
-	async function loadSavedInputs() {
-		savedInputs = await InputService.listInputs({
-			workspace: $workspaceStore!,
-			runnableId,
-			runnableType,
-			perPage: 10
-		})
-	}
-
-	async function updateInput(input: EditableInput) {
-		input.isSaving = true
-
-		try {
-			await InputService.updateInput({
-				workspace: $workspaceStore!,
-				requestBody: {
-					id: input.id,
-					name: input.name,
-					is_public: input.is_public
-				}
-			})
-		} catch (err) {
-			console.error(err)
-			sendUserToast(`Failed to update Input: ${err}`, true)
-		}
-
-		input.isSaving = false
-	}
-
-	async function deleteInput(input: Input) {
-		try {
-			await InputService.deleteInput({
-				workspace: $workspaceStore!,
-				input: input.id
-			})
-			savedInputs = (savedInputs ?? []).filter((i) => i.id !== input.id)
-			if (selectedInput === input) {
-				selectedInput = null
-			}
-		} catch (err) {
-			console.error(err)
-			sendUserToast(`Failed to delete Input: ${err}`, true)
-		}
-	}
-
-	$effect(() => {
-		if ($workspaceStore && (scriptHash || scriptPath || flowPath)) {
-			untrack(() => {
-				loadInputHistory()
-				loadSavedInputs()
-			})
-		}
-	})
-
-	let previewArgs: any = $state(undefined)
-
-	function selectArgs(selected_args: any) {
-		previewArgs = selected_args
-	}
-
-	async function loadLargeArgs(
-		id: string | undefined,
-		input: boolean | undefined,
-		allowLarge: boolean
-	): Promise<any> {
-		if (!id) return
-		return await InputService.getArgsFromHistoryOrSavedInput({
-			jobOrInputId: id,
-			workspace: $workspaceStore!,
-			input,
-			allowLarge
-		})
-	}
-</script>
-
-{#if runnableId}
-	<JobsLoader
-		bind:jobs
-		path={runnableId}
-		showSkipped={false}
-		jobKindsCat="all"
-		user={null}
-		label={null}
-		folder={null}
-		concurrencyKey={null}
-		tag={null}
-		success="running"
-		argFilter={undefined}
-		bind:loading
-		syncQueuedRunsCount={false}
-		refreshRate={10000}
-		computeMinAndMax={undefined}
-		perPage={5}
-	/>
-{/if}
-
-<div class="min-w-[300px] h-full">
-	<Splitpanes horizontal={true}>
-		<Pane>
-			<div class="w-full flex flex-col gap-4 p-2">
-				<div class="w-full flex justify-between items-center gap-4 flex-wrap">
-					<span class="text-sm font-semibold flex-shrink-0"
-						>Saved Inputs<Tooltip
-							>Shared inputs are available to anyone with access to the script</Tooltip
-						></span
-					>
-					{#if canSaveInputs}
-						<SaveInputsButton
-							{args}
-							disabled={!isValid}
-							{runnableId}
-							{runnableType}
-							on:update={() => {
-								loadSavedInputs()
-							}}
-						/>
-					{/if}
-				</div>
-
-				<div class="w-full flex flex-col gap-1 h-full overflow-y-auto p">
-					{#if savedInputs === undefined}
-						<Skeleton layout={[[8]]} />
-					{:else if savedInputs?.length > 0}
-						{#each savedInputs as i}
-							<button
-								class={classNames(
-									`w-full flex items-center text-sm group justify-between gap-4 py-1.5 px-4 text-left border rounded-sm hover:bg-surface-hover transition-all`,
-									selectedInput === i ? 'border-blue-500 bg-blue-50 dark:bg-blue-900' : ''
-								)}
-								onclick={async () => {
-									if (!i.isEditing) {
-										if (selectedInput === i) {
-											selectedInput = null
-										} else {
-											selectedInput = i
-										}
-									}
-									selectArgs(await loadLargeArgs(i.id, true, false))
-								}}
-							>
-								<div class="w-full h-full items-center justify-between flex gap-1 min-w-0">
-									{#if i.isEditing}
-										<form
-											onsubmit={() => {
-												updateInput(i)
-												i.isEditing = false
-												i.isSaving = false
-											}}
-											class="w-full"
-										>
-											<input type="text" bind:value={i.name} class="text-secondary" />
-										</form>
-									{:else}
-										<small
-											class="whitespace-nowrap overflow-hidden text-ellipsis flex-shrink text-left"
-										>
-											{i.name}
-										</small>
-									{/if}
-									{#if i.created_by == $userStore?.username || $userStore?.is_admin || $userStore?.is_super_admin}
-										<div class="items-center flex gap-2">
-											{#if !i.isEditing}
-												<div class="group-hover:block hidden -my-2">
-													<Toggle
-														size="xs"
-														options={{ right: 'shared' }}
-														bind:checked={i.is_public}
-														on:change={() => {
-															updateInput(i)
-														}}
-													/>
-												</div>
-											{/if}
-
-											<Button
-												loading={i.isSaving}
-												size="xs"
-												variant="default"
-												spacingSize="xs2"
-												btnClasses={'group-hover:block hidden -my-2'}
-												on:click={(e) => {
-													e.stopPropagation()
-													i.isEditing = !i.isEditing
-													if (!i.isEditing) {
-														updateInput(i)
-														i.isSaving = false
-													}
-												}}
-											>
-												<Edit class="w-4 h-4" />
-											</Button>
-											<Button
-												size="xs"
-												spacingSize="xs2"
-												variant="default"
-												btnClasses={i.isEditing ? 'block' : 'group-hover:block hidden -my-2'}
-												on:click={() => deleteInput(i)}
-											>
-												<X class="w-4 h-4" />
-											</Button>
-										</div>
-									{:else}
-										<span class="text-xs text-primary">By {i.created_by}</span>
-									{/if}
-								</div>
-							</button>
-						{/each}
-					{:else}
-						<div class="text-center text-primary">No saved Inputs</div>
-					{/if}
-				</div>
-			</div>
-		</Pane>
-
-		<Pane>
-			<div class="w-full flex flex-col gap-4 p-2">
-				<span class="text-sm font-semibold">Previous runs</span>
-
-				<div class="w-full flex flex-col gap-1 p-0 h-full overflow-y-auto">
-					{#if loading && (jobs == undefined || jobs?.length == 0)}
-						<div class="text-left text-primary text-xs">Loading current runs...</div>
-					{:else if jobs?.length > 0}
-						{#each jobs as i (i.id)}
-							<button
-								class={classNames(
-									`w-full flex items-center justify-between gap-4 py-2 px-4 text-left border rounded-sm hover:bg-surface-hover transition-a`,
-									'border-orange-400'
-								)}
-								onclick={async () => {
-									if (!$workspaceStore) {
-										return
-									}
-
-									const args = await JobService.getJobArgs({
-										workspace: $workspaceStore,
-										id: i.id
-									})
-
-									selectedInput = {
-										id: i.id,
-										name: 'Running job: ' + i.id,
-										created_at: i.created_at ?? '',
-										created_by: i.created_by ?? '',
-										is_public: true
-									}
-
-									selectArgs(args)
-								}}
-							>
-								<div
-									class="w-full h-full items-center text-xs font-normal grid grid-cols-8 gap-4 min-w-0"
-								>
-									<div class="">
-										<div class="rounded-full w-2 h-2 bg-orange-400 animate-pulse"></div>
-									</div>
-									<div class="col-span-2 truncate">
-										{i.created_by}
-									</div>
-									<div
-										class="whitespace-nowrap col-span-3 !text-primary !text-2xs overflow-hidden text-ellipsis flex-shrink text-center"
-									>
-										<TimeAgo noDate date={i.started_at ?? ''} />
-									</div>
-									<div class="col-span-2">
-										<a
-											target="_blank"
-											href="{base}/run/{i.id}?workspace={$workspaceStore}"
-											class="text-right float-right text-secondary"
-											title="See run detail in a new tab"
-										>
-											<ExternalLink size={16} />
-										</a>
-									</div>
-								</div>
-							</button>
-						{/each}
-						{#if jobs?.length == 5}
-							<div class="text-left text-primary text-xs"
-								>... there may be more runs not displayed here as the limit is 5</div
-							>
-						{/if}
-					{:else}
-						<div class="text-left text-primary text-xs">No job currently running</div>
-					{/if}
-				</div>
-
-				<div class="w-full flex flex-col gap-1 p-0 h-full overflow-y-auto">
-					{#if previousInputs === undefined}
-						<Skeleton layout={[[8]]} />
-					{:else if previousInputs?.length > 0}
-						{#each previousInputs as i (i.id)}
-							<button
-								class={classNames(
-									`w-full flex items-center justify-between gap-4 py-2 px-4 text-left border rounded-sm hover:bg-surface-hover transition-a`,
-									selectedInput === i ? 'border-blue-500 bg-blue-50 dark:bg-blue-900' : ''
-								)}
-								onclick={async () => {
-									if (selectedInput === i) {
-										selectedInput = null
-									} else {
-										selectedInput = i
-									}
-									selectArgs(await loadLargeArgs(i.id, false, false))
-								}}
-							>
-								<div
-									class="w-full h-full items-center text-xs font-normal grid grid-cols-8 gap-4 min-w-0"
-								>
-									<div class="">
-										<div class="rounded-full w-2 h-2 {i.success ? 'bg-green-400' : 'bg-red-400'}"
-										></div>
-									</div>
-									<div class="col-span-2 truncate" title={i.created_by}>
-										{i.created_by}
-									</div>
-									<div
-										class="whitespace-nowrap col-span-2 !text-primary !text-2xs overflow-hidden text-ellipsis flex-shrink text-center"
-									>
-										{displayDateOnly(new Date(i.created_at))}
-									</div>
-									<div
-										class="whitespace-nowrap col-span-2 !text-primary !text-2xs overflow-hidden text-ellipsis flex-shrink text-center"
-									>
-										<TimeAgo noDate date={i.created_at ?? ''} />
-									</div>
-									<div class="col-span-1">
-										<a
-											target="_blank"
-											href="{base}/run/{i.id}?workspace={$workspaceStore}"
-											class="text-right float-right text-secondary"
-											title="See run detail in a new tab"
-										>
-											<ExternalLink size={16} />
-										</a>
-									</div>
-								</div>
-							</button>
-						{/each}
-					{:else}
-						<div class="text-center text-primary">No previous Runs</div>
-					{/if}
-				</div>
-			</div>
-		</Pane>
-
-		<Pane>
-			<div class="h-full overflow-hidden min-h-0 flex flex-col justify-between">
-				<div class="w-full flex flex-col min-h-0 gap-2 px-2 py-2 grow">
-					<div class="w-full flex flex-col">
-						<Button
-							color="blue"
-							btnClasses="w-full"
-							size="sm"
-							spacingSize="xl"
-							on:click={async () => {
-								dispatch('selected_args', await loadLargeArgs(selectedInput?.id, undefined, false))
-							}}
-							disabled={!selectedInput}
-						>
-							<ArrowLeftIcon class="w-4 h-4 mr-2" />
-							Use input
-						</Button>
-					</div>
-					<div class="w-full min-h-0 grow overflow-auto">
-						{#if typeof previewArgs == 'string' && previewArgs == 'WINDMILL_TOO_BIG'}
-							<div class="text-secondary mt-2">
-								Payload too big to preview but can still be loaded</div
-							>
-						{:else if Object.keys(previewArgs || {}).length > 0}
-							<div class=" overflow-auto h-full p-2">
-								<ObjectViewer json={previewArgs} />
-							</div>
-						{:else}
-							<div class="text-center text-primary">
-								Select an Input to preview scripts arguments
-							</div>
-						{/if}
-					</div>
-				</div>
-			</div></Pane
-		>
-	</Splitpanes>
-</div>
diff --git a/frontend/src/lib/components/SchemaFormWithArgPicker.svelte b/frontend/src/lib/components/SchemaFormWithArgPicker.svelte
index 4764a26e74..14d84b5fcb 100644
--- a/frontend/src/lib/components/SchemaFormWithArgPicker.svelte
+++ b/frontend/src/lib/components/SchemaFormWithArgPicker.svelte
@@ -83,7 +83,6 @@
 	let rightPanelOpen = false
 
 	let savedInputsPicker: SavedInputsPicker | undefined = undefined
-	let loading = false
 	let captureTable: CaptureTable | undefined = undefined
 	let historicInputs: HistoricInputs | undefined = undefined
 	$: (selectedTab, (dropdownItems = getDropdownItems()))
@@ -111,11 +110,13 @@
 						<FlowInputEditor title="History">
 							<svelete:fragment slot="action">
 								<div class="center-center">
-									<RefreshButton {loading} onClick={() => historicInputs?.refresh()} />
+									<RefreshButton
+										loading={historicInputs?.loading() ?? false}
+										onClick={() => historicInputs?.refresh()}
+									/>
 								</div>
 							</svelete:fragment>
 							<HistoricInputs
-								bind:loading
 								bind:this={historicInputs}
 								{runnableId}
 								{runnableType}
diff --git a/frontend/src/lib/components/ServiceLogsInner.svelte b/frontend/src/lib/components/ServiceLogsInner.svelte
index 1de3754b72..cdf2ed5c0f 100644
--- a/frontend/src/lib/components/ServiceLogsInner.svelte
+++ b/frontend/src/lib/components/ServiceLogsInner.svelte
@@ -153,8 +153,8 @@
 						if (searchTerm !== '') return
 						let minMax = manualPicker?.computeMinMax()
 						if (minMax) {
-							maxTsManual = minMax?.maxTs
-							minTsManual = minMax?.minTs
+							maxTsManual = minMax?.maxTs ?? undefined
+							minTsManual = minMax?.minTs ?? undefined
 						}
 						let maxTsPlus1 = maxTs ? new Date(new Date(maxTs).getTime() + 1000) : undefined
 						getAllLogs(maxTsPlus1?.toISOString(), undefined)
@@ -504,8 +504,8 @@
 					/>
 				</div>
 				<ManuelDatePicker
-					bind:minTs={minTsManual}
-					bind:maxTs={maxTsManual}
+					bind:minTs={() => minTsManual ?? null, (v) => (minTsManual = v ?? undefined)}
+					bind:maxTs={() => maxTsManual ?? null, (v) => (maxTsManual = v ?? undefined)}
 					bind:this={manualPicker}
 					{loading}
 					on:loadJobs={() => {
diff --git a/frontend/src/lib/components/common/calendarPicker/CalendarPicker.svelte b/frontend/src/lib/components/common/calendarPicker/CalendarPicker.svelte
index a228e207f1..0a3a89a3a7 100644
--- a/frontend/src/lib/components/common/calendarPicker/CalendarPicker.svelte
+++ b/frontend/src/lib/components/common/calendarPicker/CalendarPicker.svelte
@@ -6,7 +6,7 @@
 	import DateTimeInput from '$lib/components/DateTimeInput.svelte'
 	import { twMerge } from 'tailwind-merge'
 
-	export let date: string | undefined
+	export let date: string | null | undefined
 	export let label: string
 	export let useDropdown: boolean = false
 	export let clearable: boolean = false
diff --git a/frontend/src/lib/components/runs/ManuelDatePicker.svelte b/frontend/src/lib/components/runs/ManuelDatePicker.svelte
index aaf0d60063..ceb393799b 100644
--- a/frontend/src/lib/components/runs/ManuelDatePicker.svelte
+++ b/frontend/src/lib/components/runs/ManuelDatePicker.svelte
@@ -4,8 +4,8 @@
 	import { createEventDispatcher } from 'svelte'
 
 	interface Props {
-		minTs: string | undefined
-		maxTs: string | undefined
+		minTs: string | null
+		maxTs: string | null
 		loading?: boolean
 		selectedManualDate?: number
 		loadText?: string | undefined
@@ -23,7 +23,7 @@
 		numberOfLastJobsToFetch = 1000
 	}: Props = $props()
 
-	export function computeMinMax(): { minTs: string; maxTs: string | undefined } | undefined {
+	export function computeMinMax(): { minTs: string; maxTs: string | null } | undefined {
 		return manualDates[selectedManualDate].computeMinMax()
 	}
 
@@ -33,13 +33,13 @@
 
 	function computeMinMaxInc(inc: number) {
 		let minTs = new Date(new Date().getTime() - inc).toISOString()
-		let maxTs = undefined
+		let maxTs = null
 		return { minTs, maxTs }
 	}
 
 	const fixedManualDates: {
 		label: string
-		computeMinMax: () => { minTs: string; maxTs: string | undefined } | undefined
+		computeMinMax: () => { minTs: string; maxTs: string | null } | undefined
 	}[] = [
 		...(!serviceLogsChoices
 			? [
@@ -110,8 +110,8 @@
 					minTs = ts.minTs
 					maxTs = ts.maxTs
 				} else {
-					minTs = undefined
-					maxTs = undefined
+					minTs = null
+					maxTs = null
 				}
 				dispatch('loadJobs')
 			}
diff --git a/frontend/src/lib/components/runs/RunsFilter.svelte b/frontend/src/lib/components/runs/RunsFilter.svelte
index 2c7ea5251b..89fc83422b 100644
--- a/frontend/src/lib/components/runs/RunsFilter.svelte
+++ b/frontend/src/lib/components/runs/RunsFilter.svelte
@@ -1,3 +1,37 @@
+<script module lang="ts">
+	export const runsFiltersSchema = z.object({
+		path: z.string().nullable().default(null),
+		worker: z.string().nullable().default(null),
+		user: z.string().nullable().default(null),
+		folder: z.string().nullable().default(null),
+		label: z.string().nullable().default(null),
+		concurrency_key: z.string().nullable().default(null),
+		tag: z.string().nullable().default(null),
+		allow_wildcards: z.boolean().default(false),
+		show_future_jobs: z.boolean().default(true),
+		success: z
+			.enum(['running', 'suspended', 'waiting', 'success', 'failure'])
+			.nullable()
+			.default(null),
+		show_skipped: z.boolean().default(false),
+		show_schedules: z.boolean().default(true),
+		min_ts: z.string().nullable().default(null),
+		max_ts: z.string().nullable().default(null),
+		schedule_path: z.string().nullable().default(null),
+		job_kinds: z.string().default('runs'),
+		all_workspaces: z.boolean().default(false),
+		arg: z.string().default(''),
+		result: z.string().default(''),
+		job_trigger_kind: z
+			.string()
+			.transform((s) => s as JobTriggerKind)
+			.nullable()
+			.default(null),
+		per_page: z.number().default(1000)
+	})
+	export type RunsFilters = z.infer<typeof runsFiltersSchema>
+</script>
+
 <script lang="ts">
 	import { Button } from '../common'
 	import ToggleButton from '../common/toggleButton-v2/ToggleButton.svelte'
@@ -8,7 +42,7 @@
 	import Label from '../Label.svelte'
 	import Section from '../Section.svelte'
 	import { enterpriseLicense, workspaceStore } from '$lib/stores'
-	import { createEventDispatcher, untrack } from 'svelte'
+	import { createEventDispatcher } from 'svelte'
 	import ToggleButtonMore from '../common/toggleButton-v2/ToggleButtonMore.svelte'
 	import Popover from '$lib/components/meltComponents/Popover.svelte'
 	import Select from '../select/Select.svelte'
@@ -19,6 +53,8 @@
 	import TextInput from '../text_input/TextInput.svelte'
 	import { jobTriggerKinds, triggerDisplayNamesMap } from '../triggers/utils'
 	import type { JobTriggerKind } from '$lib/gen'
+	import { Debounced, watch } from 'runed'
+	import z from 'zod'
 
 	interface Props {
 		// Filters
@@ -27,18 +63,18 @@
 		concurrencyKey?: string | null
 		worker?: string | null
 		tag?: string | null
-		success?: 'running' | 'waiting' | 'suspended' | 'queued' | 'success' | 'failure' | undefined
+		success?: 'running' | 'waiting' | 'suspended' | 'queued' | 'success' | 'failure' | null
 		showSkipped?: boolean | undefined
 		argFilter: string
 		argError: string
 		resultFilter: string
-		jobTriggerKind: JobTriggerKind | undefined
+		jobTriggerKind: JobTriggerKind | null
 		resultError: string
 		jobKindsCat: string
 		user?: string | null
 		folder?: string | null
 		mobile?: boolean
-		schedulePath: string | undefined
+		schedulePath: string | null
 		allowWildcards?: boolean
 		// Autocomplete data
 		paths?: string[]
@@ -59,74 +95,81 @@
 	}
 
 	let {
-		path = $bindable(null),
-		label = $bindable(null),
-		concurrencyKey = $bindable(null),
-		worker = $bindable(null),
-		tag = $bindable(null),
-		success = $bindable(undefined),
-		showSkipped = $bindable(undefined),
+		path = $bindable(),
+		label = $bindable(),
+		concurrencyKey = $bindable(),
+		worker = $bindable(),
+		tag = $bindable(),
+		success = $bindable(),
+		showSkipped = $bindable(),
 		argFilter = $bindable(),
 		argError = $bindable(),
 		resultFilter = $bindable(),
 		jobTriggerKind = $bindable(),
 		resultError = $bindable(),
 		jobKindsCat = $bindable(),
-		user = $bindable(null),
-		folder = $bindable(null),
+		user = $bindable(),
+		folder = $bindable(),
 		mobile = false,
 		schedulePath = $bindable(),
-		allowWildcards = $bindable(false),
+		allowWildcards = $bindable(),
 		paths = [],
 		usernames = [],
 		folders = [],
-		allWorkspaces = $bindable(false),
-		filterBy = $bindable('path'),
+		allWorkspaces = $bindable(),
+		filterBy = $bindable(),
 		small = false,
 		calendarSmall = false
 	}: Props = $props()
 
-	let copyArgFilter = $state(argFilter)
-	let copyResultFilter = $state(resultFilter)
-
 	const dispatch = createEventDispatcher()
 
 	function autosetFilter() {
-		if (path !== null && path !== '' && filterBy !== 'path') {
+		if (path && filterBy !== 'path') {
 			filterBy = 'path'
-		} else if (user !== null && user !== '' && filterBy !== 'user') {
+		} else if (user && filterBy !== 'user') {
 			filterBy = 'user'
-		} else if (folder !== null && folder !== '' && filterBy !== 'folder') {
+		} else if (folder && filterBy !== 'folder') {
 			filterBy = 'folder'
-		} else if (label !== null && label !== '' && filterBy !== 'label') {
+		} else if (label && filterBy !== 'label') {
 			filterBy = 'label'
-		} else if (concurrencyKey !== null && concurrencyKey !== '' && filterBy !== 'concurrencyKey') {
+		} else if (concurrencyKey && filterBy !== 'concurrencyKey') {
 			filterBy = 'concurrencyKey'
-		} else if (tag !== null && tag !== '' && filterBy !== 'tag') {
+		} else if (tag && filterBy !== 'tag') {
 			filterBy = 'tag'
-		} else if (schedulePath !== undefined && schedulePath !== '' && filterBy !== 'schedulePath') {
+		} else if (schedulePath && filterBy !== 'schedulePath') {
 			filterBy = 'schedulePath'
-		} else if (worker !== null && worker !== '' && filterBy !== 'worker') {
+		} else if (worker && filterBy !== 'worker') {
 			filterBy = 'worker'
 		}
 	}
 
-	let labelTimeout: number | undefined = $state(undefined)
-	let concurrencyKeyTimeout: number | undefined = $state(undefined)
-	let tagTimeout: number | undefined = $state(undefined)
-	let workerTimeout: number | undefined = $state(undefined)
+	let labelTimeout: ReturnType<typeof setInterval> | undefined = $state()
+	let concurrencyKeyTimeout: ReturnType<typeof setInterval> | undefined = $state(undefined)
+	let tagTimeout: ReturnType<typeof setInterval> | undefined = $state(undefined)
+	let workerTimeout: ReturnType<typeof setInterval> | undefined = $state(undefined)
 
 	let allWorkspacesValue = $state(allWorkspaces ? 'all' : 'admins')
 	let displayedLabel = $derived(label)
 	let displayedConcurrencyKey = $derived(concurrencyKey)
 	let displayedTag = $derived(tag)
-	let displayedSchedule = $derived(schedulePath)
+	let displayedSchedule = $derived(schedulePath ?? undefined)
 	let displayedWorker = $derived(worker)
-	$effect(() => {
-		;(path || user || folder || label || worker || concurrencyKey || tag || schedulePath) &&
-			untrack(() => autosetFilter())
+
+	watch([() => [path, user, folder, label, worker, concurrencyKey, tag, schedulePath]], () => {
+		autosetFilter()
 	})
 
+	let [copyArgFilter, copyResultFilter] = $state([argFilter, resultFilter])
+	let debouncedArgAndResultFilters = new Debounced(() => [copyArgFilter, copyResultFilter], 500)
+	watch(
+		() => debouncedArgAndResultFilters.current,
+		() => {
+			if (!argError) argFilter = copyArgFilter || ''
+			if (!resultError) resultFilter = copyResultFilter || ''
+		}
+	)
+
 	function resetFilter() {
 		path = null
 		user = null
@@ -134,7 +177,7 @@
 		label = null
 		concurrencyKey = null
 		tag = null
-		schedulePath = undefined
+		schedulePath = null
 		worker = null
 	}
 </script>
@@ -407,7 +450,7 @@
 							<button
 								class="absolute top-2 right-2 z-50"
 								onclick={() => {
-									schedulePath = undefined
+									schedulePath = null
 									dispatch('reset')
 								}}
 							>
@@ -426,7 +469,7 @@
 									}
 
 									tagTimeout = setTimeout(() => {
-										schedulePath = displayedSchedule
+										schedulePath = displayedSchedule ?? null
 									}, 1000)
 								},
 								id: 'schedulePath'
@@ -580,7 +623,7 @@
 		<ToggleButtonGroup
 			selected={success ?? 'all'}
 			on:selected={({ detail }) => {
-				success = detail === 'all' ? undefined : detail
+				success = detail === 'all' ? null : detail
 				dispatch('successChange', success)
 			}}
 			id="status"
@@ -687,7 +730,7 @@
 										label = null
 										concurrencyKey = null
 										tag = null
-										schedulePath = undefined
+										schedulePath = null
 									}
 								}}
 							>
@@ -924,7 +967,7 @@
 						<Label label="Status">
 							<ToggleButtonGroup
 								selected={success ?? 'all'}
-								on:selected={({ detail }) => (success = detail === 'all' ? undefined : detail)}
+								on:selected={({ detail }) => (success = detail === 'all' ? null : detail)}
 							>
 								{#snippet children({ item })}
 									<ToggleButton value={'all'} label="All" {item} />
@@ -969,49 +1012,23 @@
 								label: triggerDisplayNamesMap[value],
 								value
 							}))}
-							bind:value={jobTriggerKind}
+							bind:value={() => jobTriggerKind ?? undefined, (v) => (jobTriggerKind = v ?? null)}
 							clearable
 						/>
 					</Label>
 
-					<div class="flex flex-col gap-6">
-						<Label label="Filter by args">
-							<span class="text-2xs text-secondary">
-								{`Filter by a json being a subset of the args/result. Try '\{"foo": "bar"\}'`}
-							</span>
-							<JsonEditor bind:error={argError} bind:code={copyArgFilter} />
-						</Label>
-						<Label label="Filter by result">
-							<span class="text-2xs text-secondary">
-								{`Filter by a json being a subset of the args/result. Try '\{"foo": "bar"\}'`}
-							</span>
-							<JsonEditor bind:error={resultError} bind:code={copyResultFilter} />
-						</Label>
-					</div>
-
-					<div class="flex flex-row gap-2 justify-between">
-						<Button
-							unifiedSize="md"
-							variant="default"
-							on:click={() => {
-								argFilter = ''
-								resultFilter = ''
-							}}
-						>
-							Clear
-						</Button>
-
-						<Button
-							unifiedSize="md"
-							variant="accent"
-							on:click={() => {
-								argFilter = copyArgFilter
-								resultFilter = copyResultFilter
-							}}
-						>
-							Set args/result filter
-						</Button>
-					</div>
+					<Label label="Filter by args">
+						<span class="text-2xs text-secondary">
+							{`Filter by a json being a subset of the args/result. Try '\{"foo": "bar"\}'`}
+						</span>
+						<JsonEditor bind:error={argError} bind:code={copyArgFilter} />
+					</Label>
+					<Label label="Filter by result">
+						<span class="text-2xs text-secondary">
+							{`Filter by a json being a subset of the args/result. Try '\{"foo": "bar"\}'`}
+						</span>
+						<JsonEditor bind:error={resultError} bind:code={copyResultFilter} />
+					</Label>
 				</div>
 			</Section>
 		{/snippet}
diff --git a/frontend/src/lib/components/runs/RunsQueue.svelte b/frontend/src/lib/components/runs/RunsQueue.svelte
index 1a7f7ff410..b0c5ed5adb 100644
--- a/frontend/src/lib/components/runs/RunsQueue.svelte
+++ b/frontend/src/lib/components/runs/RunsQueue.svelte
@@ -8,7 +8,7 @@
 	interface Props {
 		queue_count?: Tweened<number> | undefined
 		suspended_count?: Tweened<number> | undefined
-		success: string | undefined
+		success: string | null
 		small?: boolean
 		onJobsWaiting?: () => void
 		onJobsSuspended?: () => void
diff --git a/frontend/src/lib/components/runs/RunsTable.svelte b/frontend/src/lib/components/runs/RunsTable.svelte
index acb484ee90..f9051caa0e 100644
--- a/frontend/src/lib/components/runs/RunsTable.svelte
+++ b/frontend/src/lib/components/runs/RunsTable.svelte
@@ -34,7 +34,7 @@
 		selectedIds = $bindable([]),
 		selectedWorkspace = $bindable(undefined),
 		activeLabel = null,
-		lastFetchWentToEnd = $bindable(false),
+		lastFetchWentToEnd = false,
 		perPage = 1000
 	}: Props = $props()
 
diff --git a/frontend/src/lib/components/runs/JobsLoader.svelte b/frontend/src/lib/components/runs/useJobsLoader.svelte.ts
similarity index 65%
rename from frontend/src/lib/components/runs/JobsLoader.svelte
rename to frontend/src/lib/components/runs/useJobsLoader.svelte.ts
index 2868390c9f..f719e2732e 100644
--- a/frontend/src/lib/components/runs/JobsLoader.svelte
+++ b/frontend/src/lib/components/runs/useJobsLoader.svelte.ts
@@ -1,102 +1,114 @@
-<script lang="ts">
-	import { onDestroy, onMount, untrack } from 'svelte'
-	import {
-		JobService,
-		type Job,
-		type CompletedJob,
-		type ExtendedJobs,
-		ConcurrencyGroupsService,
-		type ObscuredJob,
-		CancelablePromise,
-		CancelError,
-		type JobTriggerKind
-	} from '$lib/gen'
+import { onDestroy, onMount, untrack } from 'svelte'
+import {
+	JobService,
+	type Job,
+	type CompletedJob,
+	type ExtendedJobs,
+	ConcurrencyGroupsService,
+	type ObscuredJob,
+	CancelablePromise,
+	CancelError
+} from '$lib/gen'
 
-	import { sendUserToast } from '$lib/toast'
-	import { workspaceStore } from '$lib/stores'
+import { sendUserToast } from '$lib/toast'
 
-	import { tweened, type Tweened } from 'svelte/motion'
-	import { subtractDaysFromDateString } from '$lib/utils'
-	import { CancelablePromiseUtils } from '$lib/cancelable-promise-utils'
+import { tweened, type Tweened } from 'svelte/motion'
+import { subtractDaysFromDateString } from '$lib/utils'
+import { CancelablePromiseUtils } from '$lib/cancelable-promise-utils'
+import type { RunsFilters } from './RunsFilter.svelte'
 
-	interface Props {
-		jobs: Job[] | undefined
-		user: string | null
-		label?: string | null
-		worker?: string | null
-		folder: string | null
-		path: string | null
-		success?: 'success' | 'suspended' | 'waiting' | 'failure' | 'running' | undefined
-		showSchedules?: boolean
-		showFutureJobs?: boolean
-		argFilter: string | undefined
-		resultFilter?: string | undefined
-		jobTriggerKind?: JobTriggerKind | undefined
-		schedulePath?: string | undefined
-		jobKindsCat?: string | undefined
-		minTs?: string | undefined
-		maxTs?: string | undefined
-		jobKinds?: string
-		queue_count?: Tweened<number> | undefined
-		suspended_count?: Tweened<number> | undefined
-		autoRefresh?: boolean
-		completedJobs?: CompletedJob[] | undefined
-		externalJobs?: Job[] | undefined
-		concurrencyKey: string | null
-		tag: string | null
-		showSkipped?: boolean
-		extendedJobs?: ExtendedJobs | undefined
-		argError?: string
-		resultError?: string
-		loading?: boolean
-		refreshRate?: number
-		syncQueuedRunsCount?: boolean
-		allWorkspaces?: boolean
-		computeMinAndMax: (() => { minTs: string; maxTs: string | undefined } | undefined) | undefined
-		lookback?: number
-		perPage?: number
-		allowWildcards?: boolean
+export function computeJobKinds(jobKindsCat: string | null): string {
+	if (jobKindsCat == 'all') {
+		return ''
+	} else if (jobKindsCat == 'dependencies') {
+		let kinds: CompletedJob['job_kind'][] = ['dependencies', 'flowdependencies', 'appdependencies']
+		return kinds.join(',')
+	} else if (jobKindsCat == 'previews') {
+		let kinds: CompletedJob['job_kind'][] = ['preview', 'flowpreview']
+		return kinds.join(',')
+	} else if (jobKindsCat == 'deploymentcallbacks') {
+		let kinds: CompletedJob['job_kind'][] = ['deploymentcallback']
+		return kinds.join(',')
+	} else if (jobKindsCat == 'runs') {
+		let kinds: CompletedJob['job_kind'][] = ['script', 'flow', 'singlestepflow']
+		return kinds.join(',')
+	} else {
+		let kinds: CompletedJob['job_kind'][] = [
+			'script',
+			'flow',
+			'flowscript',
+			'flownode',
+			'appscript'
+		]
+		return kinds.join(',')
 	}
+}
 
-	let {
-		jobs = $bindable(),
-		user,
-		label = null,
-		worker = null,
-		folder,
-		path,
-		success = undefined,
-		showSkipped = false,
-		showSchedules = true,
-		showFutureJobs = true,
-		argFilter,
-		resultFilter = undefined,
-		jobTriggerKind = undefined,
-		schedulePath = undefined,
-		jobKindsCat = undefined,
-		minTs = $bindable(undefined),
-		maxTs = $bindable(undefined),
-		jobKinds = $bindable(undefined),
-		queue_count = $bindable(undefined),
-		suspended_count = $bindable(undefined),
-		autoRefresh = true,
-		completedJobs = $bindable(undefined),
-		externalJobs = $bindable(undefined),
-		concurrencyKey,
-		tag,
-		extendedJobs = $bindable(undefined),
-		argError = '',
-		resultError = '',
-		loading = $bindable(false),
-		refreshRate = 5000,
-		syncQueuedRunsCount = true,
-		allWorkspaces = false,
-		computeMinAndMax,
-		lookback = 0,
-		perPage = $bindable(1000),
-		allowWildcards = false
-	}: Props = $props()
-	let intervalId: number | undefined = $state()
+export interface UseJobLoaderArgs {
+	currentWorkspace: string
+	filters?: Partial<RunsFilters>
+	jobKinds?: string
+	autoRefresh?: boolean
+	argError?: string
+	resultError?: string
+	refreshRate?: number
+	syncQueuedRunsCount?: boolean
+	skip?: boolean
+	computeMinAndMax?: (() => { minTs: string; maxTs: string | null } | undefined) | undefined
+	lookback?: number
+	onSetMinMaxTs?: (minTs: string | null, maxTs: string | null) => void
+	onSetPerPage?: (perPage: number) => void
+}
+
+export function useJobsLoader(args: () => UseJobLoaderArgs) {
+	let _args = $derived(args())
+
+	let currentWorkspace = $derived(_args.currentWorkspace)
+	let filters = $derived(_args.filters)
+	let jobKinds = $derived(_args.jobKinds)
+	let autoRefresh = $derived(_args.autoRefresh ?? true)
+	let argError = $derived(_args.argError ?? '')
+	let resultError = $derived(_args.resultError ?? '')
+	let refreshRate = $derived(_args.refreshRate ?? 5000)
+	let syncQueuedRunsCount = $derived(_args.syncQueuedRunsCount ?? true)
+	let computeMinAndMax = $derived(_args.computeMinAndMax)
+	let lookback = $derived(_args.lookback ?? 0)
+	let onSetMinMaxTs = $derived(_args.onSetMinMaxTs)
+	let onSetPerPage = $derived(_args.onSetPerPage)
+
+	let label = $derived(filters?.label ?? null)
+	let worker = $derived(filters?.worker ?? null)
+	let success = $derived(filters?.success ?? null)
+	let showSkipped = $derived(filters?.show_skipped ?? false)
+	let showSchedules = $derived(filters?.show_schedules ?? true)
+	let showFutureJobs = $derived(filters?.show_future_jobs ?? true)
+	let resultFilter = $derived(filters?.result)
+	let jobTriggerKind = $derived(filters?.job_trigger_kind ?? null)
+	let schedulePath = $derived(filters?.schedule_path ?? null)
+	let jobKindsCat = $derived(filters?.job_kinds ?? null)
+	let allWorkspaces = $derived(filters?.all_workspaces ?? false)
+	let allowWildcards = $derived(filters?.allow_wildcards ?? false)
+	let concurrencyKey = $derived(filters?.concurrency_key)
+	let tag = $derived(filters?.tag)
+	let user = $derived(filters?.user)
+	let folder = $derived(filters?.folder)
+	let path = $derived(filters?.path)
+	let argFilter = $derived(filters?.arg)
+	let minTs = $derived(filters?.min_ts ?? null)
+	let maxTs = $derived(filters?.max_ts ?? null)
+	let perPage = $derived(filters?.per_page ?? 100)
+
+	let queue_count: Tweened<number> | undefined = $state()
+	let suspended_count: Tweened<number> | undefined = $state()
+	let loading = $state(false)
+	let lastFetchWentToEnd = $state(false)
+
+	let completedJobs: CompletedJob[] | undefined = $state()
+	let externalJobs: Job[] | undefined = $state()
+	let extendedJobs: ExtendedJobs | undefined = $state()
+	let jobs: Job[] | undefined = $state()
+
+	let intervalId: ReturnType<typeof setInterval> | undefined = $state()
 	let sync = true
 
 	function onParamChanges() {
@@ -106,8 +118,8 @@
 			sendUserToast(
 				'Loading jobs is taking longer than expected...',
 				true,
-				perPage > 25
-					? [{ label: 'Reduce to 25 items per page', callback: () => (perPage = 25) }]
+				perPage > 25 && onSetPerPage
+					? [{ label: 'Reduce to 25 items per page', callback: () => onSetPerPage(25) }]
 					: []
 			)
 		})
@@ -120,43 +132,9 @@
 		return promise
 	}
 
-	function computeJobKinds(jobKindsCat: string | undefined): string {
-		if (jobKindsCat == undefined && jobKinds != undefined) {
-			return jobKinds
-		}
-		if (jobKindsCat == 'all') {
-			return ''
-		} else if (jobKindsCat == 'dependencies') {
-			let kinds: CompletedJob['job_kind'][] = [
-				'dependencies',
-				'flowdependencies',
-				'appdependencies'
-			]
-			return kinds.join(',')
-		} else if (jobKindsCat == 'previews') {
-			let kinds: CompletedJob['job_kind'][] = ['preview', 'flowpreview']
-			return kinds.join(',')
-		} else if (jobKindsCat == 'deploymentcallbacks') {
-			let kinds: CompletedJob['job_kind'][] = ['deploymentcallback']
-			return kinds.join(',')
-		} else if (jobKindsCat == 'runs') {
-			let kinds: CompletedJob['job_kind'][] = ['script', 'flow', 'singlestepflow']
-			return kinds.join(',')
-		} else {
-			let kinds: CompletedJob['job_kind'][] = [
-				'script',
-				'flow',
-				'flowscript',
-				'flownode',
-				'appscript'
-			]
-			return kinds.join(',')
-		}
-	}
-
 	let loadingFetch = false
 
-	export async function loadExtraJobs(): Promise<boolean> {
+	async function loadExtraJobs(): Promise<void> {
 		if (jobs && jobs.length > 0) {
 			let minQueueTs: string | undefined = undefined
 			let minCompletedTs: string | undefined = undefined
@@ -178,33 +156,36 @@
 
 			if (!ts) {
 				sendUserToast('No jobs to load from')
-				return false
+				lastFetchWentToEnd = false
+				return
 			}
 			// const minCreated = lastJob?.created_at
 			const minCreated = new Date(new Date(ts).getTime() - 1).toISOString()
 
 			let olderJobs = await fetchJobs(minCreated, minTs, undefined)
-			jobs = jobs?.concat(olderJobs)
+			jobs = updateWithNewJobs(olderJobs ?? [], jobs ?? [])
 			computeCompletedJobs()
-			return olderJobs?.length < perPage
+			lastFetchWentToEnd = olderJobs?.length < perPage
+		} else {
+			lastFetchWentToEnd = false
 		}
-		return false
 	}
 
 	function fetchJobs(
-		completedBefore: string | undefined,
-		completedAfter: string | undefined,
+		completedBefore: string | null,
+		completedAfter: string | null,
 		createdAfterQueue: string | undefined
 	): CancelablePromise<Job[]> {
+		if (_args.skip) return CancelablePromiseUtils.pure<Job[]>([])
 		loadingFetch = true
 		let scriptPathStart = folder === null || folder === '' ? undefined : `f/${folder}/`
 		let scriptPathExact = path === null || path === '' ? undefined : path
 		let promise = JobService.listJobs({
-			workspace: $workspaceStore!,
-			completedBefore,
-			completedAfter,
+			workspace: currentWorkspace,
+			completedBefore: completedBefore ?? undefined,
+			completedAfter: completedAfter ?? undefined,
 			createdAfterQueue,
-			schedulePath,
+			schedulePath: schedulePath ?? undefined,
 			scriptPathExact,
 			createdBy: user === null || user === '' ? undefined : user,
 			scriptPathStart: scriptPathStart,
@@ -234,7 +215,7 @@
 				resultFilter && resultFilter != '{}' && resultFilter != '' && resultError == ''
 					? resultFilter
 					: undefined,
-			triggerKind: jobTriggerKind,
+			triggerKind: jobTriggerKind ?? undefined,
 			allWorkspaces: allWorkspaces ? true : undefined,
 			perPage,
 			allowWildcards: allowWildcards ? true : undefined
@@ -243,7 +224,7 @@
 			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 CancelablePromiseUtils.pure([] as Job[])
+			return CancelablePromiseUtils.pure<Job[]>([])
 		})
 		CancelablePromiseUtils.pipe(promise, () => {
 			loadingFetch = false
@@ -253,20 +234,22 @@
 
 	function fetchExtendedJobs(
 		concurrencyKey: string | null,
-		createdBeforeQueue: string | undefined,
-		completedAfter: string | undefined
+		createdBeforeQueue: string | null,
+		completedAfter: string | null
 	): CancelablePromise<ExtendedJobs> {
+		if (_args.skip)
+			return CancelablePromiseUtils.pure<ExtendedJobs>({ jobs: [], obscured_jobs: [] })
 		loadingFetch = true
 		let promise = ConcurrencyGroupsService.listExtendedJobs({
 			rowLimit: perPage,
 			concurrencyKey: concurrencyKey == null || concurrencyKey == '' ? undefined : concurrencyKey,
-			workspace: $workspaceStore!,
-			completedAfter,
-			createdBeforeQueue: createdBeforeQueue,
+			workspace: currentWorkspace,
+			completedAfter: completedAfter ?? undefined,
+			createdBeforeQueue: createdBeforeQueue ?? undefined,
 			// createdOrStartedBefore: startedBefore,
 			// createdOrStartedAfter: startedAfter,
 			// createdOrStartedAfterCompletedJobs: startedAfterCompletedJobs,
-			schedulePath,
+			schedulePath: schedulePath ?? undefined,
 			scriptPathExact: path === null || path === '' ? undefined : path,
 			createdBy: user === null || user === '' ? undefined : user,
 			scriptPathStart: folder === null || folder === '' ? undefined : `f/${folder}/`,
@@ -285,7 +268,7 @@
 				resultFilter && resultFilter != '{}' && resultFilter != '' && resultError == ''
 					? resultFilter
 					: undefined,
-			triggerKind: jobTriggerKind,
+			triggerKind: jobTriggerKind ?? undefined,
 			allWorkspaces: allWorkspaces ? true : undefined,
 			perPage,
 			allowWildcards
@@ -301,17 +284,8 @@
 		return promise
 	}
 
-	export async function loadJobs(
-		nMinTs: string | undefined,
-		nMaxTs: string | undefined,
-		reset: boolean,
-		shouldGetCount?: boolean
-	): Promise<void> {
-		minTs = nMinTs
-		maxTs = nMaxTs
-		if (reset) {
-			resetJobs()
-		}
+	async function loadJobs(reset: boolean, shouldGetCount?: boolean): Promise<void> {
+		if (reset) resetJobs()
 		await loadJobsIntern(shouldGetCount)
 	}
 
@@ -320,6 +294,7 @@
 		completedJobs = undefined
 		externalJobs = undefined
 		extendedJobs = undefined
+		lastFetchWentToEnd = false
 		intervalId && clearInterval(intervalId)
 		intervalId = setInterval(syncer, refreshRate)
 	}
@@ -334,7 +309,7 @@
 		const extendedMinTs = subtractDaysFromDateString(minTs, lookback)
 
 		if (concurrencyKey == null || concurrencyKey === '') {
-			return CancelablePromiseUtils.map(fetchJobs(maxTs, undefined, extendedMinTs), (newJobs) => {
+			return CancelablePromiseUtils.map(fetchJobs(maxTs, null, extendedMinTs), (newJobs) => {
 				extendedJobs = { jobs: newJobs, obscured_jobs: [] } as ExtendedJobs
 
 				// Filter on minTs here and not in the backend
@@ -346,7 +321,7 @@
 			})
 		} else {
 			return CancelablePromiseUtils.map(
-				fetchExtendedJobs(concurrencyKey, maxTs, extendedMinTs),
+				fetchExtendedJobs(concurrencyKey, maxTs, extendedMinTs ?? null),
 				(newExtendedJobs) => {
 					extendedJobs = newExtendedJobs
 					const newJobs = newExtendedJobs.jobs
@@ -378,8 +353,9 @@
 	}
 
 	async function getCount() {
+		if (_args.skip) return
 		const { database_length, suspended } = await JobService.getQueueCount({
-			workspace: $workspaceStore!,
+			workspace: currentWorkspace,
 			allWorkspaces
 		})
 
@@ -399,8 +375,7 @@
 
 	async function syncer() {
 		if (success == 'waiting') {
-			minTs = undefined
-			maxTs = undefined
+			onSetMinMaxTs?.(null, null)
 		}
 		if (loadingFetch) {
 			return
@@ -410,14 +385,11 @@
 				getCount()
 			}
 
-			if (computeMinAndMax) {
-				const ts = computeMinAndMax()
-				if (ts) {
-					minTs = ts.minTs
-					maxTs = ts.maxTs
-					if (maxTs != undefined) {
-						loadJobsIntern(false)
-					}
+			const ts = computeMinAndMax?.()
+			if (ts) {
+				onSetMinMaxTs?.(ts.minTs, ts.maxTs)
+				if (maxTs != undefined) {
+					loadJobsIntern(false)
 				}
 			}
 
@@ -426,7 +398,7 @@
 					loadJobsIntern(false)
 				} else {
 					let minQueueCreatedAt: string | undefined = undefined
-					let completedTs: string | undefined = undefined
+					let completedTs: string | null = null
 
 					let cursor = 0
 
@@ -491,8 +463,8 @@
 		return ret
 	}
 
-	function sortMinDate(minTs: string | undefined, jobs: Job[]) {
-		if (minTs != undefined) {
+	function sortMinDate(minTs: string | null, jobs: Job[]) {
+		if (minTs) {
 			const minDate = new Date(minTs)
 			return jobs.filter((x) =>
 				x.started_at
@@ -559,32 +531,7 @@
 		}
 	})
 	$effect(() => {
-		jobKinds = computeJobKinds(jobKindsCat)
-	})
-	$effect(() => {
-		;[
-			$workspaceStore,
-			path,
-			label,
-			success,
-			worker,
-			showSkipped,
-			jobKinds,
-			concurrencyKey,
-			tag,
-			lookback,
-			user,
-			folder,
-			allowWildcards,
-			schedulePath,
-			showFutureJobs,
-			showSchedules,
-			allWorkspaces,
-			argFilter,
-			resultFilter,
-			jobTriggerKind,
-			perPage
-		]
+		Object.keys(filters ?? {}).map((k) => filters?.[k as keyof RunsFilters])
 		let p = untrack(() => onParamChanges())
 		return () => p.cancel()
 	})
@@ -605,4 +552,33 @@
 			}
 		})
 	})
-</script>
+
+	return {
+		loadExtraJobs,
+		loadJobs,
+		get queue_count() {
+			return queue_count
+		},
+		get suspended_count() {
+			return suspended_count
+		},
+		get loading() {
+			return loading
+		},
+		get completedJobs() {
+			return completedJobs
+		},
+		get externalJobs() {
+			return externalJobs
+		},
+		get extendedJobs() {
+			return extendedJobs
+		},
+		get jobs() {
+			return jobs
+		},
+		get lastFetchWentToEnd() {
+			return lastFetchWentToEnd
+		}
+	}
+}
diff --git a/frontend/src/lib/svelte5Utils.svelte.ts b/frontend/src/lib/svelte5Utils.svelte.ts
index 1b3300530f..8388a54fce 100644
--- a/frontend/src/lib/svelte5Utils.svelte.ts
+++ b/frontend/src/lib/svelte5Utils.svelte.ts
@@ -3,7 +3,9 @@
 import { untrack } from 'svelte'
 import { deepEqual } from 'fast-equals'
 import { type StateStore } from './utils'
-import { resource, type ResourceReturn } from 'runed'
+import { resource, watch, type ResourceReturn } from 'runed'
+import * as runed from 'runed/kit'
+import type z from 'zod'
 
 export function withProps<Component, Props>(component: Component, props: Props) {
 	const ret = $state({
@@ -187,3 +189,54 @@ export class ChangeOnDeepInequality<T> {
 		return this._cached!
 	}
 }
+
+// The original from runed has a weird behavior with dedup reads causing duplicate effect runs
+// (Every field has to be derived to avoid it : https://runed.dev/docs/utilities/use-search-params)
+export function useSearchParams<S extends z.ZodType>(
+	schema: S,
+	options?: runed.SearchParamsOptions
+): runed.ReturnUseSearchParams<S> {
+	let params = runed.useSearchParams(schema, options)
+	let keys = Object.keys((schema as any).shape ?? {})
+	let obj = { ...params }
+	for (const key of keys) {
+		// Somehow using $derived does not trigger reactivity sometimes ...
+		// (e.g: filters.arg in RunsPage.svelte updates in the URL but does not trigger reactivity)
+		let derivedVal = $state(params[key])
+		Object.defineProperty(obj, key, {
+			get: () => {
+				if (typeof derivedVal === 'string') return decodeURIComponent(derivedVal)
+				return derivedVal
+			},
+			set: (v) => {
+				const val = typeof v === 'string' ? encodeURIComponent(v) : v
+				params[key] = val
+				derivedVal = val
+			},
+			enumerable: true,
+			configurable: true
+		})
+	}
+	return obj
+}
+
+// Prevents flickering when data is unloaded (undefined) then reloaded quickly
+// But still becomes undefined if data is not reloaded within the timeout
+// so the user has feedback that the data is not available anymore.
+export class StaleWhileLoading<T> {
+	private _current: T | undefined = $state()
+	private _currentTimeout: ReturnType<typeof setTimeout> | undefined
+	constructor(getter: () => T, timeout = 400) {
+		watch(getter, (value) => {
+			if (this._currentTimeout) clearTimeout(this._currentTimeout)
+			if (value === undefined) {
+				this._currentTimeout = setTimeout(() => (this._current = undefined), timeout)
+			} else {
+				this._current = value
+			}
+		})
+	}
+	get current(): T | undefined {
+		return this._current
+	}
+}
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index d548772fd0..b6587cdc70 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -146,7 +146,7 @@ export function retrieveCommonWorkerPrefix(workerName: string): string {
 }
 
 export function subtractDaysFromDateString(
-	dateString: string | undefined,
+	dateString: string | null,
 	days: number
 ): string | undefined {
 	if (dateString == undefined) {
diff --git a/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte b/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte
index 85c1d8367e..6a3bd00e27 100644
--- a/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/runs/[...path]/+page.svelte
@@ -3,13 +3,9 @@
 <script lang="ts">
 	import { page } from '$app/state'
 	import { onMount } from 'svelte'
-	import RunsPage, { DEFAULT_RUNS_PER_PAGE } from '../../../../../lib/components/RunsPage.svelte'
+	import RunsPage from '../../../../../lib/components/RunsPage.svelte'
 	import RunsTutorial from '$lib/components/tutorials/RunsTutorial.svelte'
 
-	let perPage = $state(
-		parseInt(page.url.searchParams.get('per_page') ?? DEFAULT_RUNS_PER_PAGE.toString())
-	)
-
 	let runsTutorial: RunsTutorial
 
 	onMount(() => {
@@ -24,8 +20,6 @@
 	})
 </script>
 
-{#key perPage}
-	<RunsPage bind:perPage />
-{/key}
+<RunsPage />
 
 <RunsTutorial bind:this={runsTutorial} index={7} />