windmill-components 1.623.2 → 1.655.0

package/package/components/RunsPage.svelte

@@ -1,115 +1,111 @@
 <script lang="ts">import { JobService, UserService, FolderService, ScriptService, FlowService, OpenAPI } from '../gen';
 import { sendUserToast } from '../toast';
-import { userStore, workspaceStore, userWorkspaces } from '../stores';
-import { Button, Drawer, DrawerContent, Skeleton } from './common';
+import { userStore, workspaceStore, userWorkspaces, superadmin } from '../stores';
+import { Button, ButtonType, Drawer, DrawerContent, Skeleton, Tab, Tabs } from './common';
 import RunChart from './RunChart.svelte';
 import JobRunsPreview from './runs/JobRunsPreview.svelte';
 import Tooltip from './Tooltip.svelte';
-import CalendarPicker from './common/calendarPicker/CalendarPicker.svelte';
 import RunsTable from './runs/RunsTable.svelte';
 import { Pane, Splitpanes } from 'svelte-splitpanes';
-import RunsFilter, { runsFiltersSchema } from './runs/RunsFilter.svelte';
+import { allowWildcards, buildRunsFilterSearchbarSchema, buildRunsFilterPresets } from './runs/runsFilter';
 import Toggle from './Toggle.svelte';
 import ConfirmationModal from './common/confirmationModal/ConfirmationModal.svelte';
 import RunsQueue from './runs/RunsQueue.svelte';
 import { twMerge } from 'tailwind-merge';
-import ManuelDatePicker from './runs/ManuelDatePicker.svelte';
 import { computeJobKinds, useJobsLoader } from './runs/useJobsLoader.svelte';
-import { Calendar, Clock, TriangleAlert } from 'lucide-svelte';
 import ConcurrentJobsChart from './ConcurrentJobsChart.svelte';
-import { isJobSelectable } from '../utils';
+import { pluralize } from '../utils';
 import BatchReRunOptionsPane, {} from './runs/BatchReRunOptionsPane.svelte';
 import { untrack } from 'svelte';
 import { page } from '$app/state';
-import RunOption from './runs/RunOption.svelte';
-import TooltipV2 from './meltComponents/Tooltip.svelte';
-import DropdownSelect from './DropdownSelect.svelte';
-import RunsBatchActionsDropdown from './runs/RunsBatchActionsDropdown.svelte';
-import { createBubbler } from 'svelte/legacy';
-import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
-import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
 import Select from './select/Select.svelte';
 import AnimatedPane from './splitPanes/AnimatedPane.svelte';
-import { useSearchParams } from '../svelte5UtilsKit.svelte';
-import { StaleWhileLoading } from '../svelte5Utils.svelte';
+import { StaleWhileLoading, useLocalStorageValue } from '../svelte5Utils.svelte';
+import { Calendar, CircleAlert, CircleCheck, CirclePlay, Clock, Hourglass, TriangleAlertIcon } from 'lucide-svelte';
+import DropdownV2 from './DropdownV2.svelte';
+import TimeframeSelect, { buildManualTimeframe, runsTimeframes, useSyncedTimeframe } from './runs/TimeframeSelect.svelte';
+import FilterSearchbar, { useUrlSyncedFilterInstance } from './FilterSearchbar.svelte';
+import { jobTriggerKinds } from './triggers/utils';
+import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
+import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
+import ToggleButtonMore from './common/toggleButton-v2/ToggleButtonMore.svelte';
+let paths = $state([]);
+let usernames = $state([]);
+let folders = $state([]);
+let runsFilterSearchbarSchema = $derived(buildRunsFilterSearchbarSchema({
+    paths,
+    usernames,
+    folders,
+    jobTriggerKinds,
+    isSuperAdmin: !!$superadmin,
+    isAdminsWorkspace: $workspaceStore === 'admins'
+}));
+let perPage = useLocalStorageValue('runs_per_page', 1000, 'number');
+let showSchedulesStorage = useLocalStorageValue('runs_show_schedules', true, 'boolean');
+let showFutureJobsStorage = useLocalStorageValue('runs_show_future_jobs', true, 'boolean');
+let filters = useUrlSyncedFilterInstance(untrack(() => runsFilterSearchbarSchema));
 let { initialPath } = $props();
-let filters = useSearchParams(runsFiltersSchema);
+let batchRerunOptionsIsOpen = $state(false);
 // Initialize path filter from route param if provided and not already set via query params
-if (initialPath && !filters.path) {
-    filters.path = initialPath;
+if (untrack(() => initialPath) && !filters.val.path) {
+    filters.val.path = untrack(() => initialPath);
 }
-// Initialize toggle filters from localStorage if not set via URL params
-// Check if URL has the params explicitly set; if not, use localStorage values
-const urlParams = new URLSearchParams(window.location.search);
-if (!urlParams.has('show_schedules')) {
-    filters.show_schedules = getShowSchedules();
+// Apply persistent toggle values from local storage if URL doesn't specify them
+if (!page.url.searchParams.has('job_trigger_kind') && showSchedulesStorage.val === false) {
+    filters.val.job_trigger_kind = '!schedule';
 }
-if (!urlParams.has('show_future_jobs')) {
-    filters.show_future_jobs = getShowFutureJobs();
+if (!page.url.searchParams.has('show_future_jobs') && showFutureJobsStorage.val === false) {
+    filters.val.show_future_jobs = false;
 }
+// Sync toggle state back to local storage when filters change
+$effect(() => {
+    if (!filters.val.job_trigger_kind || filters.val.job_trigger_kind === '!schedule') {
+        showSchedulesStorage.val = filters.val.job_trigger_kind !== '!schedule';
+    }
+});
+$effect(() => {
+    showFutureJobsStorage.val = filters.val.show_future_jobs !== false;
+});
 let selectedIds = $state([]);
-let loadingSelectedIds = $state(false);
 let selectedWorkspace = $state(undefined);
-let batchReRunOptions = $state({ flow: {}, script: {} });
-let jobKinds = $derived(computeJobKinds(filters.job_kinds));
-let paths = $state([]);
-let usernames = $state([]);
-let folders = $state([]);
+let jobKinds = $derived(computeJobKinds(filters.val.job_kinds ?? null));
 let argError = $state('');
 let resultError = $state('');
-let filterTimeout = undefined;
-let selectedManualDate = $state(0);
-let autoRefresh = $state(getAutoRefresh());
+let autoRefresh = useLocalStorageValue('auto_refresh_in_runs', true, 'boolean');
 let runDrawer = $state(undefined);
 let lookback = $state(1);
 let askingForConfirmation = $state(undefined);
-function getAutoRefresh() {
-    try {
-        return localStorage.getItem('auto_refresh_in_runs') != 'false';
-    }
-    catch (e) {
-        console.error('Error getting auto refresh', e);
-        return true;
-    }
-}
-function getShowSchedules() {
-    try {
-        return localStorage.getItem('show_schedules_in_runs') != 'false';
-    }
-    catch (e) {
-        console.error('Error getting show schedules', e);
-        return true;
-    }
-}
-function getShowFutureJobs() {
-    try {
-        return localStorage.getItem('show_future_jobs_in_runs') != 'false';
-    }
-    catch (e) {
-        console.error('Error getting show future jobs', e);
-        return true;
-    }
-}
-let manualDatePicker = $state(undefined);
+let _timeframe = useSyncedTimeframe(runsTimeframes, () => ({
+    maxTs: filters.val.max_ts?.toISOString(),
+    minTs: filters.val.min_ts?.toISOString(),
+    timeframe: filters.val.timeframe
+}), (v) => {
+    v.maxTs ? (filters.val.max_ts = new Date(v.maxTs)) : delete filters.val.max_ts;
+    v.minTs ? (filters.val.min_ts = new Date(v.minTs)) : delete filters.val.min_ts;
+    v.timeframe && v.timeframe !== 'Latest runs'
+        ? (filters.val.timeframe = v.timeframe)
+        : delete filters.val.timeframe;
+});
+let timeframe = $derived(_timeframe.val);
+let manualTimeframe = $derived(timeframe.type === 'manual' ? timeframe : undefined);
 let graph = $state(typeOfChart(page.url.searchParams.get('graph')));
-let graphIsRunsChart = $state(untrack(() => graph) === 'RunChart');
 let innerWidth = $state(window.innerWidth);
 let jobsLoader = useJobsLoader(() => ({
-    filters,
-    computeMinAndMax: manualDatePicker?.computeMinMax,
+    filters: filters.val,
+    timeframe,
     jobKinds,
-    autoRefresh,
+    autoRefresh: autoRefresh.val,
     argError,
     resultError,
-    lookback: graphIsRunsChart ? 0 : lookback,
-    onSetPerPage: (p) => (filters.per_page = p),
-    onSetMinMaxTs: (minTs, maxTs) => ((filters.min_ts = minTs), (filters.max_ts = maxTs)),
+    perPage: perPage.val,
+    lookback: graph === 'RunChart' ? 0 : lookback,
     currentWorkspace: $workspaceStore ?? ''
 }));
+let batchProgress = $derived(jobsLoader.batchProgress);
+let currentBatchSize = $derived(jobsLoader.currentBatchSize);
 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
@@ -118,22 +114,10 @@ let debouncedJobs = new StaleWhileLoading(() => jobsLoader.jobs);
 let completedJobs = $derived(jobsLoader.completedJobs ?? debouncedCompletedJobs.current);
 let jobs = $derived(jobsLoader.jobs ?? debouncedJobs.current);
 let runsTable = $state(undefined);
-function reloadJobsWithoutFilterError() {
-    if (resultError == '' && argError == '') {
-        filterTimeout && clearTimeout(filterTimeout);
-        filterTimeout = setTimeout(() => {
-            jobsLoader?.loadJobs(true);
-        }, 2000);
-    }
-}
 function reset() {
-    filters.min_ts = null;
-    filters.max_ts = null;
-    selectedManualDate = 0;
+    _timeframe.val = { ...runsTimeframes[0] };
     selectedIds = [];
-    filters.schedule_path = null;
-    batchReRunOptions = { flow: {}, script: {} };
-    selectionMode = false;
+    delete filters.val.schedule_path;
     selectedWorkspace = undefined;
     jobsLoader?.loadJobs(true);
 }
@@ -152,25 +136,25 @@ async function loadPaths() {
 }
 function resetAndFilterBy(setter) {
     return (e) => {
-        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;
+        delete filters.val.path;
+        delete filters.val.user;
+        delete filters.val.folder;
+        delete filters.val.label;
+        delete filters.val.concurrency_key;
+        delete filters.val.tag;
+        delete filters.val.worker;
+        delete filters.val.schedule_path;
         setter(e.detail);
     };
 }
-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));
+const filterByPath = resetAndFilterBy((s) => (filters.val.path = s));
+const filterByUser = resetAndFilterBy((s) => (filters.val.user = s));
+const filterByFolder = resetAndFilterBy((s) => (filters.val.folder = s));
+const filterByLabel = resetAndFilterBy((s) => (filters.val.label = s));
+const filterByConcurrencyKey = resetAndFilterBy((s) => (filters.val.concurrency_key = s));
+const filterByTag = resetAndFilterBy((s) => (filters.val.tag = s));
+const filterBySchedule = resetAndFilterBy((s) => (filters.val.schedule_path = s));
+const filterByWorker = resetAndFilterBy((s) => (filters.val.worker = s));
 function typeOfChart(s) {
     switch (s) {
         case 'RunChart':
@@ -181,72 +165,55 @@ function typeOfChart(s) {
             return 'RunChart';
     }
 }
-let selectionMode = $state(false);
-async function onSetSelectionMode(mode) {
-    selectionMode = mode;
-    if (!mode) {
-        selectedIds = [];
-        batchReRunOptions = { flow: {}, script: {} };
-        return;
-    }
-    const selectableIds = jobs?.filter(isJobSelectable(mode)).map((j) => j.id) ?? [];
-    selectedIds = [];
-    if (!selectableIds?.length) {
-        sendUserToast('There are no visible jobs that can be ' +
-            { cancel: 'cancelled', 're-run': 're-ran' }[mode], true);
-    }
-}
 function getSelectedFilters() {
-    const argFilter = filters.arg && JSON.parse(filters.arg);
-    const resultFilter = filters.result && JSON.parse(filters.result);
+    const argFilter = filters.val.arg && JSON.parse(filters.val.arg);
+    const resultFilter = filters.val.result && JSON.parse(filters.val.result);
+    const { minTs, maxTs } = timeframe.computeMinMax();
     return {
         workspace: $workspaceStore ?? '',
-        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,
+        startedBefore: maxTs ?? undefined,
+        startedAfter: minTs ?? undefined,
+        schedulePath: filters.val.schedule_path ?? undefined,
+        scriptPathExact: filters.val.path === null || filters.val.path === '' ? undefined : filters.val.path,
+        createdBy: filters.val.user || undefined,
+        scriptPathStart: filters.val.folder ? `f/${filters.val.folder}/` : undefined,
         jobKinds: jobKinds == '' ? undefined : jobKinds,
-        success: filters.success == 'success' ? true : filters.success == 'failure' ? false : undefined,
-        running: filters.success == 'running' || filters.success == 'suspended'
+        success: filters.val.status == 'success'
+            ? true
+            : filters.val.status == 'failure'
+                ? false
+                : undefined,
+        running: filters.val.status == 'running' || filters.val.status == 'suspended'
             ? true
-            : filters.success == 'waiting'
+            : filters.val.status == 'waiting'
                 ? false
                 : undefined,
-        isSkipped: filters.show_skipped ? undefined : false,
+        isSkipped: filters.val.show_skipped ? undefined : false,
         // isFlowStep: jobKindsCat != 'all' ? false : undefined,
-        hasNullParent: filters.path != undefined || filters.path != undefined || filters.job_kinds != 'all'
+        hasNullParent: filters.val.path != undefined ||
+            filters.val.path != undefined ||
+            filters.val.job_kinds != 'all'
             ? true
             : undefined,
-        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'
+        label: filters.val.label || undefined,
+        tag: filters.val.tag || undefined,
+        suspended: filters.val.status == 'waiting'
+            ? false
+            : filters.val.status == 'suspended'
+                ? true
+                : undefined,
+        scheduledForBeforeNow: filters.val.show_future_jobs == false ||
+            filters.val.status == 'waiting' ||
+            filters.val.status == 'suspended'
             ? 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
+        jobTriggerKind: filters.val.job_trigger_kind || undefined,
+        allWorkspaces: filters.val.all_workspaces || undefined,
+        allowWildcards: allowWildcards(filters.val) || undefined
     };
 }
-$effect(() => {
-    if (filters.job_trigger_kind === 'schedule' && !filters.show_schedules) {
-        filters.show_schedules = true;
-    }
-});
-// Persist toggle filters to localStorage
-$effect(() => {
-    localStorage.setItem('show_schedules_in_runs', filters.show_schedules ? 'true' : 'false');
-});
-$effect(() => {
-    localStorage.setItem('show_future_jobs_in_runs', filters.show_future_jobs ? 'true' : 'false');
-});
 async function cancelJobs(uuidsToCancel, forceCancel = false) {
     const uuids = await JobService.cancelSelection({
         workspace: $workspaceStore ?? '',
@@ -256,9 +223,8 @@ async function cancelJobs(uuidsToCancel, forceCancel = false) {
     selectedIds = [];
     jobsLoader?.loadJobs(true, true);
     sendUserToast(`Canceled ${uuids.length} jobs`);
-    selectionMode = false;
 }
-async function onCancelFilteredJobs() {
+async function onCancelAllJobsMatchingFilters() {
     forceCancelInPopup = false;
     askingForConfirmation = {
         title: 'Confirm cancelling all jobs corresponding to the selected filters',
@@ -277,17 +243,17 @@ async function onCancelFilteredJobs() {
         }
     };
 }
-async function onCancelSelectedJobs() {
+async function onCancelSelectedJobs(jobIdsToCancel) {
     forceCancelInPopup = true;
     askingForConfirmation = {
-        confirmBtnText: `Cancel ${selectedIds.length} jobs`,
-        title: 'Confirm cancelling the selected jobs',
+        confirmBtnText: `Cancel ${jobIdsToCancel.length} jobs`,
+        title: `Confirm cancelling ${jobIdsToCancel.length} jobs`,
         onConfirm: (forceCancel) => {
-            cancelJobs(selectedIds, forceCancel);
+            cancelJobs(jobIdsToCancel, forceCancel);
         }
     };
 }
-async function reRunJobs(jobIdsToReRun) {
+async function reRunJobs(jobIdsToReRun, batchReRunOptions) {
     if (!$workspaceStore)
         return;
     if (askingForConfirmation) {
@@ -295,8 +261,8 @@ async function reRunJobs(jobIdsToReRun) {
     }
     const body = {
         job_ids: jobIdsToReRun,
-        script_options_by_path: batchReRunOptions.script,
-        flow_options_by_path: batchReRunOptions.flow
+        script_options_by_path: batchReRunOptions.script ?? {},
+        flow_options_by_path: batchReRunOptions.flow ?? {}
     };
     // workaround because EventSource does not support POST requests
     // https://medium.com/@david.richards.tech/sse-server-sent-events-using-a-post-request-without-eventsource-1c0bd6f14425
@@ -351,60 +317,50 @@ async function reRunJobs(jobIdsToReRun) {
         resolve(undefined);
     });
     selectedIds = [];
-    batchReRunOptions = { flow: {}, script: {} };
     jobsLoader?.loadJobs(true, true);
-    selectionMode = false;
 }
-async function onReRunFilteredJobs() {
+async function onRerunAllJobsMatchingFilters() {
     const selectedFilters = getSelectedFilters();
     selectedIds = [];
-    loadingSelectedIds = true;
-    if (filters.job_kinds !== 'runs') {
+    const loadingToast = sendUserToast('Loading job ids', 'info');
+    if (filters.val.job_kinds !== 'runs') {
         sendUserToast('Batch re-run is only supported for scripts and flows', true);
+        loadingToast.destroy();
+        return;
     }
     selectedIds = await JobService.listFilteredJobsUuids({
         ...selectedFilters,
         jobKinds: 'script,flow'
     });
-    selectionMode = 're-run';
+    loadingToast.destroy();
+    batchRerunOptionsIsOpen = true;
 }
-async function onReRunSelectedJobs() {
+async function onReRunSelectedJobs(batchReRunOptions) {
     const jobIdsToReRun = selectedIds;
     askingForConfirmation = {
         title: `Confirm re-running the selected jobs`,
         confirmBtnText: `Re-run ${jobIdsToReRun.length} jobs`,
         type: 'reload',
         onConfirm: async () => {
-            await reRunJobs(jobIdsToReRun);
+            await reRunJobs(jobIdsToReRun, batchReRunOptions);
         }
     };
 }
-function setLookback(lookbackInDays) {
-    lookback = lookbackInDays;
-}
 async function loadExtra() {
     await jobsLoader?.loadExtraJobs();
 }
 function jobsFilter(f) {
-    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 {
-        filters.success = f;
-    }
-    filters.job_kinds = 'all';
+    delete filters.val.path;
+    delete filters.val.user;
+    delete filters.val.folder;
+    delete filters.val.label;
+    delete filters.val.concurrency_key;
+    delete filters.val.tag;
+    delete filters.val.worker;
+    delete filters.val.schedule_path;
+    filters.val.status = filters.val.status == f ? undefined : f;
+    filters.val.job_kinds = 'all';
 }
-$effect(() => {
-    loadingSelectedIds && selectedIds.length && setTimeout(() => (loadingSelectedIds = false), 250);
-});
 $effect(() => {
     if ($workspaceStore) {
         untrack(() => {
@@ -420,32 +376,10 @@ let warnJobLimit = $derived.by(() => {
         extended !== undefined &&
         extended.jobs.length + extended.obscured_jobs.length >= 1000);
 });
-const bubble = createBubbler();
-function selectAll() {
-    if (!selectionMode)
-        return;
-    if (allSelected) {
-        allSelected = false;
-        selectedIds = [];
-    }
-    else {
-        allSelected = true;
-        selectedIds = jobs?.filter(isJobSelectable(selectionMode)).map((j) => j.id) ?? [];
-    }
-}
-let allSelected = $derived.by(() => {
-    return selectionMode && selectedIds.length === selectableJobCount;
-});
-const selectableJobCount = $derived.by(() => {
-    if (!selectionMode)
-        return 0;
-    return jobs?.filter(isJobSelectable(selectionMode)).length ?? 0;
-});
-let tableTopBarWidth = $state(0);
 const smallScreenWidth = 1920;
-const verySmallScreenWidth = 1300;
 let forceCancelInPopup = $state(false);
-const warnJobLimitMsg = $derived(`The exact number of concurrent jobs at the beginning of the time range may be incorrect as only the last ${filters.per_page} jobs are taken into account: a job that was started earlier than this limit will not be taken into account`);
+const warnJobLimitMsg = $derived(`The exact number of concurrent jobs at the beginning of the time range may be incorrect as only the last ${perPage.val} jobs are taken into account: a job that was started earlier than this limit will not be taken into account`);
+let manualSelectionMode = $state();
 </script>
 
 <ConfirmationModal
@@ -495,7 +429,7 @@ const warnJobLimitMsg = $derived(`The exact number of concurrent jobs at the beg
 			{#if selectedIds[0] === '-'}
 				<div class="p-4">There is no information available for this job</div>
 			{:else}
-				<JobRunsPreview blankLink id={selectedIds[0]} workspace={selectedWorkspace} />
+				<JobRunsPreview id={selectedIds[0]} workspace={selectedWorkspace} />
 			{/if}
 		{/if}
 	</DrawerContent>
@@ -515,29 +449,27 @@ const warnJobLimitMsg = $derived(`The exact number of concurrent jobs at the beg
 {:else}
 	<div class="w-full h-screen flex flex-col" bind:clientWidth={innerWidth}>
 		<!-- Header and filters -->
-		<div class="flex flex-row items-start w-full border-b px-4 gap-8">
-			<div class="flex flex-row items-center h-full gap-6">
-				<div class="flex flex-row items-center gap-1">
-					<h1
-						class={twMerge(
-							'!text-2xl font-semibold leading-6 tracking-tight',
-							$userStore?.operator ? 'pl-10' : ''
-						)}
-					>
-						Runs
-					</h1>
+		<div class="flex flex-row items-start w-full px-4 gap-3 py-4 flex-wrap">
+			<div class="flex flex-row items-center gap-6">
+				<h1
+					class={twMerge(
+						'!text-2xl font-semibold leading-6 tracking-tight',
+						$userStore?.operator ? 'pl-10' : ''
+					)}
+				>
+					Runs
+				</h1>
 
-					<Tooltip
-						documentationLink="https://www.windmill.dev/docs/core_concepts/monitor_past_and_future_runs"
-					>
-						All past and schedule executions of scripts and flows, including previews. You only see
-						your own runs or runs of groups you belong to unless you are an admin.
-					</Tooltip>
-				</div>
+				<Tooltip
+					documentationLink="https://www.windmill.dev/docs/core_concepts/monitor_past_and_future_runs"
+				>
+					All past and schedule executions of scripts and flows, including previews. You only see
+					your own runs or runs of groups you belong to unless you are an admin.
+				</Tooltip>
 
 				<!-- Queue -->
 				<RunsQueue
-					success={filters.success}
+					success={filters.val.status ?? null}
 					{queue_count}
 					{suspended_count}
 					onJobsWaiting={() => {
@@ -550,179 +482,220 @@ const warnJobLimitMsg = $derived(`The exact number of concurrent jobs at the beg
 				/>
 			</div>
 
-			<div class="py-2 flex items-start gap-x-4 gap-y-2 flex-row grow min-w-0 justify-end">
-				<!-- Dates -->
-				<div class="flex flex-row gap-2">
-					<RunOption label="From" for="min-datetimes">
-						{#if filters.min_ts || filters.max_ts}
-							<input
-								type="text"
-								class="!text-sm text-primary !bg-surface-secondary h-9 !border-none"
-								value={filters.min_ts
-									? new Date(filters.min_ts).toLocaleString()
-									: 'zoom x axis to set min'}
-								disabled
-								name="min-datetimes"
-							/>
-						{/if}
-						<CalendarPicker
-							clearable={true}
-							bind:date={filters.min_ts}
-							on:clear={() => (filters.min_ts = null)}
-							label="From"
-							class={filters.min_ts || filters.max_ts
-								? ''
-								: 'relative top-0 bottom-0 left-0 right-0 h-[34px]'}
+			<div class="hidden xl:flex gap-2 ml-6">
+				<ToggleButtonGroup
+					tabListClass="hidden xl:flex"
+					bind:selected={
+						() => filters.val.job_kinds ?? 'runs',
+						(v) => (v === 'runs' ? delete filters.val.job_kinds : (filters.val.job_kinds = v))
+					}
+				>
+					{#snippet children({ item })}
+						<ToggleButton value="all" label="All" {item} />
+						<ToggleButton
+							value="runs"
+							label="Runs"
+							tooltip="Runs are jobs that have no parent jobs (flows are jobs that are parent of the jobs they start), they have been triggered through the UI, a schedule or webhook"
+							{item}
 						/>
-					</RunOption>
-
-					<RunOption label="To" for="max-datetimes">
-						{#if filters.max_ts || filters.min_ts}
-							<input
-								type="text"
-								class="!text-sm text-primary !bg-surface-secondary h-9 !border-none"
-								value={filters.max_ts
-									? new Date(filters.max_ts).toLocaleString()
-									: 'zoom x axis to set max'}
-								name="max-datetimes"
-								disabled
+						<ToggleButton
+							value="dependencies"
+							label="Deps"
+							tooltip="Deploying a script, flow or an app launch a dependency job that create and then attach the lockfile to the deployed item. This mechanism ensure that logic is always executed with the exact same direct and indirect dependencies."
+							{item}
+						/>
+						<ToggleButtonMore
+							hideSelectedOption={innerWidth < smallScreenWidth}
+							togglableItems={[
+								{
+									label: 'Previews',
+									value: 'previews',
+									tooltip: "Previews are jobs that have been started in the editor as 'Tests'"
+								},
+								{
+									label: 'Sync',
+									value: 'deploymentcallbacks',
+									tooltip:
+										'Sync jobs that are triggered on every script deployment to sync the workspace with the Git repository configured in the the workspace settings'
+								}
+							]}
+							{item}
+							bind:selected={filters.val.job_kinds}
+						/>
+					{/snippet}
+				</ToggleButtonGroup>
+				<ToggleButtonGroup
+					bind:selected={
+						() => filters.val.status ?? 'all',
+						(v) => (v === 'all' ? delete filters.val.status : (filters.val.status = v))
+					}
+					id="status"
+				>
+					{#snippet children({ item })}
+						<ToggleButton value={'all'} label="All" {item} />
+						<ToggleButton
+							value={'running'}
+							tooltip="Running"
+							class="whitespace-nowrap"
+							icon={CirclePlay}
+							iconProps={{
+								class:
+									'group-data-[state=on]:text-yellow-600 dark:group-data-[state=on]:text-yellow-400'
+							}}
+							{item}
+						/>
+						<ToggleButton
+							value={'success'}
+							tooltip="Success"
+							class="whitespace-nowrap"
+							icon={CircleCheck}
+							iconProps={{
+								class:
+									'group-data-[state=on]:text-green-500 dark:group-data-[state=on]:text-green-300'
+							}}
+							{item}
+						/>
+						<ToggleButton
+							value={'failure'}
+							tooltip="Failure"
+							class="whitespace-nowrap"
+							icon={CircleAlert}
+							iconProps={{
+								class: 'group-data-[state=on]:text-red-500 dark:group-data-[state=on]:text-red-300'
+							}}
+							{item}
+						/>
+						{#if filters.val.status == 'waiting'}
+							<ToggleButton
+								value={'waiting'}
+								tooltip="Waiting"
+								class="whitespace-nowrap"
+								icon={Hourglass}
+								selectedColor="blue"
+								{item}
+							/>
+						{:else if filters.val.status == 'suspended'}
+							<ToggleButton
+								value={'suspended'}
+								tooltip="Suspended"
+								class="whitespace-nowrap"
+								icon={Hourglass}
+								selectedColor="purple"
+								{item}
 							/>
 						{/if}
-						<CalendarPicker
-							clearable={true}
-							on:clear={() => (filters.max_ts = null)}
-							bind:date={filters.max_ts}
-							label="To"
-							class={filters.min_ts || filters.max_ts
-								? ''
-								: 'relative top-0 bottom-0 left-0 right-0 h-[34px]'}
-						/>
-					</RunOption>
-
-					{#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>
-					{/if}
-				</div>
+					{/snippet}
+				</ToggleButtonGroup>
+			</div>
 
-				<!-- Filters 1 -->
-				<div class="flex flex-row gap-2">
-					<RunsFilter
-						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={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' && filters.max_ts != undefined) {
-								filters.max_ts = null
+			<div class="hidden xl:flex gap-2 items-center min-h-8 ml-2">
+				{#if !filters.val.job_trigger_kind || filters.val.job_trigger_kind === '!schedule'}
+					<div class="flex items-center gap-1" title="Show schedules">
+						<Toggle
+							size="xs"
+							color="nord"
+							id="show-schedules"
+							bind:checked={
+								() => filters.val.job_trigger_kind !== '!schedule',
+								(v) =>
+									v
+										? delete filters.val.job_trigger_kind
+										: (filters.val.job_trigger_kind = '!schedule')
 							}
-						}}
-						{usernames}
-						{folders}
-						{paths}
-						mobile={innerWidth < verySmallScreenWidth}
-						small={innerWidth < smallScreenWidth}
-						calendarSmall={!filters.min_ts && !filters.max_ts}
+						/>
+						<Calendar size={14} />
+					</div>
+				{/if}
+				<div class="flex items-center gap-1" title="Show future jobs">
+					<Toggle
+						size="xs"
+						color="nord"
+						id="show-future-jobs"
+						bind:checked={
+							() => filters.val.show_future_jobs !== false,
+							(v) =>
+								v ? delete filters.val.show_future_jobs : (filters.val.show_future_jobs = false)
+						}
 					/>
+					<Clock size={14} />
 				</div>
 			</div>
+
+			<TimeframeSelect
+				wrapperClasses="ml-auto"
+				onClick={() => jobsLoader?.loadJobs(true)}
+				loading={jobsLoader?.loading}
+				items={runsTimeframes}
+				bind:value={_timeframe.val}
+			/>
+			<FilterSearchbar
+				class={twMerge(
+					'flex-1 relative min-w-[18rem]',
+					Object.keys(filters.val).length <= 3
+						? 'max-w-[20rem] 2xl:max-w-[28rem]'
+						: 'max-w-[34rem]',
+					ButtonType.UnifiedMinHeightClasses.md
+				)}
+				schema={runsFilterSearchbarSchema}
+				presets={buildRunsFilterPresets({
+					isSuperadmin: !!$superadmin,
+					isAdminsWorkspace: $workspaceStore === 'admins'
+				})}
+				bind:value={filters.val}
+				placeholder="Filter runs..."
+			/>
 		</div>
 
 		<!-- Graph -->
-		<div class="p-2 px-4 pt-8 w-full border-b">
-			<div class="relative z-10">
-				<div class="absolute left-0 -top-7 flex flex-row gap-2 items-center min-w-24">
-					<ToggleButtonGroup
-						selected={graph}
-						on:selected={({ detail }) => {
-							graph = detail
-							graphIsRunsChart = graph === 'RunChart'
-						}}
-					>
-						{#snippet children({ item })}
-							<ToggleButton value="RunChart" label="Duration" {item} />
-							<ToggleButton
-								{item}
-								value="ConcurrencyChart"
-								label="Concurrency"
-								icon={warnJobLimit ? TriangleAlert : undefined}
-								tooltip={warnJobLimit ? warnJobLimitMsg : undefined}
-							/>
+		<div class="p-2 px-4 bg-surface-tertiary mx-4 border rounded-md">
+			<div class="relative z-10 mb-2 flex gap-2">
+				<Tabs bind:selected={graph}>
+					<Tab value="RunChart" label="Duration" />
+					<Tab value="ConcurrencyChart" label="Concurrency">
+						{#snippet extra()}
+							{#if warnJobLimit}
+								<Tooltip Icon={TriangleAlertIcon}>{warnJobLimitMsg}</Tooltip>
+							{/if}
 						{/snippet}
-					</ToggleButtonGroup>
+					</Tab>
+				</Tabs>
 
-					{#if !graphIsRunsChart}
-						<DropdownSelect
-							items={[
-								{
-									displayName: 'None',
-									action: () => setLookback(0),
-									id: '0'
-								},
-								{
-									displayName: '1 day',
-									action: () => setLookback(1),
-									id: '1'
-								},
-								{
-									displayName: '3 days',
-									action: () => setLookback(3),
-									id: '3'
-								},
-								{
-									displayName: '7 days',
-									action: () => setLookback(7),
-									id: '7'
-								}
-							]}
-							selected={lookback.toString()}
-							selectedDisplayName={`${lookback} days lookback`}
-						>
-							{#snippet extraLabel()}
-								<TooltipV2>
-									{#snippet text()}
-										How far behind the min datetime to start considering jobs for the concurrency
-										graph. Change this value to include jobs started before the set time window for
-										the computation of the graph
-									{/snippet}
-								</TooltipV2>
-							{/snippet}
-						</DropdownSelect>
-					{/if}
-				</div>
+				{#if graph !== 'RunChart'}
+					<Select
+						class="ml-2"
+						bind:value={lookback}
+						items={[
+							{ label: 'None', value: 0 },
+							{ label: '1 day', value: 1 },
+							{ label: '3 days', value: 3 },
+							{ label: '7 days', value: 7 }
+						]}
+						transformInputSelectedText={(_, v) => `${pluralize(v, 'day')} lookback`}
+						tooltip={'How far behind the min datetime to start considering jobs for the concurrency graph. Change this value to include jobs started before the set time window for the computation of the graph'}
+					/>
+				{:else if !lastFetchWentToEnd && (jobs?.length ?? 0) >= (perPage.val ?? 1000)}
+					<Button
+						wrapperClasses="ml-2"
+						unifiedSize="md"
+						loading={jobsLoader.loadingExtra}
+						onClick={() => jobsLoader.loadExtraJobs()}
+					>
+						Load more
+						<Tooltip>There are more jobs to load</Tooltip>
+					</Button>
+				{/if}
 			</div>
 			{#if graph === 'RunChart'}
+				{@const manualTimeframe = timeframe.type === 'manual' ? timeframe : undefined}
 				<RunChart
-					{lastFetchWentToEnd}
 					bind:selectedIds
-					canSelect={!selectionMode}
-					minTimeSet={filters.min_ts}
-					maxTimeSet={filters.max_ts}
-					totalRowsFetched={jobs?.length ?? 0}
-					maxIsNow={filters.max_ts == undefined}
-					onLoadExtra={loadExtra}
+					canSelect
+					minTimeSet={manualTimeframe?.minTs}
+					maxTimeSet={manualTimeframe?.maxTs}
+					maxIsNow={manualTimeframe?.maxTs == undefined}
 					jobs={completedJobs}
-					onZoom={async (zoom) => {
-						filters.min_ts = zoom.min.toISOString()
-						filters.max_ts = zoom.max.toISOString()
-						manualDatePicker?.resetChoice()
-						jobsLoader?.loadJobs(true)
+					onZoom={(zoom) => {
+						_timeframe.val = buildManualTimeframe(zoom.min.toISOString(), zoom.max.toISOString())
 					}}
 					onPointClicked={(ids) => {
 						runsTable?.scrollToRun(ids)
@@ -730,197 +703,221 @@ const warnJobLimitMsg = $derived(`The exact number of concurrent jobs at the beg
 				/>
 			{:else if graph === 'ConcurrencyChart'}
 				<ConcurrentJobsChart
-					minTimeSet={filters.min_ts}
-					maxTimeSet={filters.max_ts}
-					maxIsNow={filters.max_ts == undefined}
+					minTimeSet={manualTimeframe?.minTs}
+					maxTimeSet={manualTimeframe?.maxTs}
+					maxIsNow={manualTimeframe?.maxTs == undefined}
 					{extendedJobs}
-					onZoom={async (zoom) => {
-						filters.min_ts = zoom.min.toISOString()
-						filters.max_ts = zoom.max.toISOString()
-						jobsLoader?.loadJobs(true)
+					onZoom={(zoom) => {
+						_timeframe.val = buildManualTimeframe(zoom.min.toISOString(), zoom.max.toISOString())
 					}}
 				/>
 			{/if}
 		</div>
 
-		<div class="grow min-h-0">
+		<div class="grow min-h-0 bottom-splitpane-wrapper">
 			<Splitpanes>
 				<Pane minSize={40}>
-					<div class="flex flex-col h-full">
-						<!-- Runs table top bar -->
-						<div
-							class="flex flex-row gap-4 items-center px-2 py-1 grow-0 justify-between"
-							bind:clientWidth={tableTopBarWidth}
-						>
-							<div class="flex flex-row gap-4 items-center">
-								{#if selectionMode && selectableJobCount}
-									<div class="flex flex-row items-center font-semibold text-sm">
-										<div class="px-2">
-											<input
-												onfocus={bubble('focus')}
-												type="checkbox"
-												checked={allSelected}
-												id="select-all"
-												class={twMerge(
-													'cursor-pointer',
-													allSelected ? 'bg-blue-50 dark:bg-blue-900/50' : '',
-													'flex flex-row items-center p-2 pr-4 top-0 font-semibold text-sm'
-												)}
-												onclick={selectAll}
-											/>
-										</div>
-										<label
-											class="cursor-pointer whitespace-nowrap text-xs text-emphasis font-semibold"
-											for="select-all">Select all</label
-										>
+					<div class="h-full flex">
+						<div class="flex flex-col flex-1 m-4 mt-2 mr-2">
+							{#if batchProgress}
+								<div class="flex items-center gap-3 px-1 pb-2 text-xs text-secondary">
+									<span>Loading jobs: {batchProgress.loaded} of {batchProgress.total}...</span>
+									<div class="flex-1 bg-surface-hover rounded-full h-1.5">
+										<div
+											class="bg-blue-500 h-1.5 rounded-full transition-all duration-300"
+											style="width: {Math.round(
+												(batchProgress.loaded / batchProgress.total) * 100
+											)}%"
+										></div>
 									</div>
-								{/if}
-
-								<RunsBatchActionsDropdown
-									isLoading={loadingSelectedIds}
-									{selectionMode}
-									selectionCount={selectedIds.length}
-									{onSetSelectionMode}
-									{onCancelFilteredJobs}
-									{onCancelSelectedJobs}
-									{onReRunFilteredJobs}
-									{onReRunSelectedJobs}
-									small={tableTopBarWidth < 800}
-								/>
-							</div>
-
-							<div class="flex flex-row gap-4 items-center">
-								{#if !filters.job_trigger_kind}
-									<div class="flex flex-row gap-1 items-center">
-										<Toggle
-											id="cron-schedules"
-											bind:checked={filters.show_schedules}
-											options={tableTopBarWidth < 800 || selectionMode
-												? {}
-												: { right: 'Schedules' }}
+									{#if currentBatchSize != null}
+										<span class="whitespace-nowrap shrink-0">Batch size:</span>
+										<input
+											type="number"
+											min="1"
+											max="1000"
+											value={currentBatchSize}
+											class="!w-14 shrink-0 text-xs px-1 py-0.5 border rounded text-center"
+											onchange={(e) => {
+												const v = parseInt(e.currentTarget.value)
+												if (v >= 1 && v <= 1000) {
+													jobsLoader.restreamWithBatchSize(v)
+												}
+											}}
 										/>
-										<span title="Schedules">
-											<Calendar size="14" />
-										</span>
+									{/if}
+									<Button size="xs" destructive onClick={() => jobsLoader.stopBatchLoading()}>
+										Stop
+									</Button>
+								</div>
+							{/if}
+							<!-- Runs table. Add overflow-hidden because scroll is handled inside the runs table based on this wrapper height -->
+							<div class="grow min-h-0 overflow-y-hidden overflow-x-auto">
+								{#if jobs}
+									<RunsTable
+										{jobs}
+										externalJobs={externalJobs ?? []}
+										omittedObscuredJobs={extendedJobs?.omitted_obscured_jobs ?? false}
+										showExternalJobs={graph !== 'RunChart'}
+										activeLabel={filters.val.label}
+										{lastFetchWentToEnd}
+										loadingExtra={jobsLoader.loadingExtra}
+										bind:selectedIds
+										bind:selectedWorkspace
+										on:loadExtra={loadExtra}
+										on:filterByPath={filterByPath}
+										on:filterByUser={filterByUser}
+										on:filterByFolder={filterByFolder}
+										on:filterByLabel={filterByLabel}
+										on:filterByConcurrencyKey={filterByConcurrencyKey}
+										on:filterByTag={filterByTag}
+										on:filterBySchedule={filterBySchedule}
+										on:filterByWorker={filterByWorker}
+										bind:this={runsTable}
+										perPage={perPage.val}
+										bind:batchRerunOptionsIsOpen
+										onCancelJobs={onCancelSelectedJobs}
+										{manualSelectionMode}
+									></RunsTable>
+								{:else}
+									<div class="gap-1 flex flex-col">
+										{#each new Array(8) as _}
+											<Skeleton layout={[[3]]} />
+										{/each}
 									</div>
 								{/if}
-
-								<div class="flex flex-row gap-1 items-center">
-									<Toggle
-										size="sm"
-										bind:checked={filters.show_future_jobs}
-										id="planned-later"
-										options={tableTopBarWidth < 800 || selectionMode
-											? {}
-											: { right: 'Planned later' }}
-									/>
-									<span title="Planned later">
-										<Clock size={14} />
-									</span>
-								</div>
-								<div class="flex flex-row gap-2 items-center">
-									<ManuelDatePicker
-										on:loadJobs={() => {
-											jobsLoader?.loadJobs(true)
-										}}
-										bind:minTs={filters.min_ts}
-										bind:maxTs={filters.max_ts}
-										bind:selectedManualDate
-										{loading}
-										bind:this={manualDatePicker}
-										numberOfLastJobsToFetch={filters.per_page}
+							</div>
+							<div
+								class="bg-surface-tertiary border rounded-b-md flex text-xs px-2 py-1 items-center gap-4"
+							>
+								{#if !manualSelectionMode}
+									<DropdownV2
+										btnText="Batch actions"
+										size="xs"
+										items={[
+											{
+												displayName: 'Cancel jobs',
+												action: () => ((manualSelectionMode = 'cancel'), (selectedIds = []))
+											},
+											{
+												displayName: 'Re-run jobs',
+												action: () => {
+													manualSelectionMode = 'rerun'
+													selectedIds = []
+													batchRerunOptionsIsOpen = true
+												}
+											},
+											{
+												displayName: 'Cancel all jobs matching filters',
+												action: () => onCancelAllJobsMatchingFilters()
+											},
+											{
+												displayName: 'Re-run all jobs matching filters',
+												action: () => onRerunAllJobsMatchingFilters()
+											}
+										]}
 									/>
-									<Toggle
-										size="sm"
-										bind:checked={autoRefresh}
-										on:change={() => {
-											localStorage.setItem('auto_refresh_in_runs', autoRefresh ? 'true' : 'false')
+								{:else}
+									<Button
+										size="xs"
+										destructive
+										onClick={() => {
+											manualSelectionMode = undefined
+											batchRerunOptionsIsOpen = false
 										}}
-										options={{ right: 'Auto-refresh' }}
-										textClass="whitespace-nowrap"
-									/>
-								</div>
-							</div>
-						</div>
-
-						<!-- Runs table. Add overflow-hidden because scroll is handled inside the runs table based on this wrapper height -->
-						<div class="grow min-h-0 overflow-y-hidden overflow-x-auto">
-							{#if jobs}
-								<RunsTable
-									{jobs}
-									externalJobs={externalJobs ?? []}
-									omittedObscuredJobs={extendedJobs?.omitted_obscured_jobs ?? false}
-									showExternalJobs={!graphIsRunsChart}
-									activeLabel={filters.label}
-									{selectionMode}
-									{lastFetchWentToEnd}
-									bind:selectedIds
-									bind:selectedWorkspace
-									on:loadExtra={loadExtra}
-									on:filterByPath={filterByPath}
-									on:filterByUser={filterByUser}
-									on:filterByFolder={filterByFolder}
-									on:filterByLabel={filterByLabel}
-									on:filterByConcurrencyKey={filterByConcurrencyKey}
-									on:filterByTag={filterByTag}
-									on:filterBySchedule={filterBySchedule}
-									on:filterByWorker={filterByWorker}
-									bind:this={runsTable}
-									perPage={filters.per_page}
-								></RunsTable>
-							{:else}
-								<div class="gap-1 flex flex-col">
-									{#each new Array(8) as _}
-										<Skeleton layout={[[3]]} />
-									{/each}
-								</div>
-							{/if}
-						</div>
-						<div
-							class="bg-surface-secondary border-t flex text-xs px-2 py-1 items-center justify-end gap-2"
-						>
-							Per page:
-							<Select
-								class="w-20"
-								bind:value={
-									() => filters.per_page,
-									(newPerPage) => {
-										filters.per_page = newPerPage
-										if (newPerPage > (jobs?.length ?? 1000)) loadExtra()
+									>
+										Exit selection mode
+									</Button>
+								{/if}
+								<div class="flex-1"></div>
+								<Toggle
+									size="xs"
+									color="nord"
+									bind:checked={autoRefresh.val}
+									options={{ right: 'Auto-refresh' }}
+									textClass="whitespace-nowrap"
+								/>
+								<Select
+									class="w-24"
+									bind:value={
+										() => perPage.val,
+										(newPerPage) => {
+											perPage.val = newPerPage
+											if (newPerPage > (jobs?.length ?? 1000)) loadExtra()
+										}
 									}
-								}
-								onCreateItem={(v) => (filters.per_page = parseInt(v))}
-								items={[
-									{ value: 25, label: '25' },
-									{ value: 100, label: '100' },
-									{ value: 1000, label: '1000' },
-									{ value: 10000, label: '10000' }
-								]}
-							/>
+									onCreateItem={(v) => (perPage.val = parseInt(v))}
+									items={[
+										{ value: 25, label: '25' },
+										{ value: 100, label: '100' },
+										{ value: 1000, label: '1000' },
+										{ value: 10000, label: '10000' }
+									]}
+									transformInputSelectedText={(_, v) => `${v} / page`}
+								/>
+							</div>
 						</div>
 					</div>
 				</Pane>
-				<AnimatedPane size={40} minSize={15} class="flex flex-col" opened={selectedIds.length > 0}>
-					{#if selectionMode === 're-run'}
-						<BatchReRunOptionsPane {selectedIds} bind:options={batchReRunOptions} />
-					{:else if selectedIds.length === 1}
-						{#if selectedIds[0] === '-'}
-							<div class="p-4">There is no information available for this job</div>
-						{:else}
-							<JobRunsPreview
-								on:filterByConcurrencyKey={filterByConcurrencyKey}
-								on:filterByWorker={filterByWorker}
-								id={selectedIds[0]}
-								workspace={selectedWorkspace}
+				<AnimatedPane
+					size={40}
+					minSize={15}
+					class="flex flex-col"
+					opened={selectedIds.length > 0 || !!manualSelectionMode}
+				>
+					<div class="mt-12 overflow-y-auto pr-4 ml-2 relative flex-1">
+						{#if manualSelectionMode === 'cancel'}
+							<div
+								class="rounded-md bg-surface-tertiary border absolute inset-0 mb-4 flex flex-col items-center justify-center"
+							>
+								<Button
+									destructive
+									variant="accent"
+									disabled={!selectedIds.length}
+									onClick={() => onCancelSelectedJobs(selectedIds)}
+								>
+									Cancel {selectedIds.length} jobs
+								</Button>
+							</div>
+						{:else if batchRerunOptionsIsOpen}
+							<BatchReRunOptionsPane
+								{selectedIds}
+								onCancel={() => (
+									(batchRerunOptionsIsOpen = false),
+									(manualSelectionMode = undefined)
+								)}
+								onConfirm={async (options) => {
+									await onReRunSelectedJobs(options)
+								}}
 							/>
+						{:else if selectedIds.length === 1}
+							{#if selectedIds[0] === '-'}
+								<div class="p-4">There is no information available for this job</div>
+							{:else}
+								<JobRunsPreview
+									id={selectedIds[0]}
+									workspace={selectedWorkspace}
+									on:filterByConcurrencyKey={filterByConcurrencyKey}
+									on:filterByWorker={filterByWorker}
+								/>
+							{/if}
+						{:else if selectedIds.length > 1}
+							<div
+								class="rounded-md bg-surface-tertiary border absolute inset-0 mb-4 flex items-center justify-center"
+							>
+								<div class="text-xs m-4"> {selectedIds.length} jobs selected</div>
+							</div>
 						{/if}
-					{:else if selectedIds.length > 1}
-						<div class="text-xs m-4"
-							>There are {selectedIds.length} jobs selected. Choose 1 to see detailed information</div
-						>
-					{/if}
+					</div>
 				</AnimatedPane>
 			</Splitpanes>
 		</div>
 	</div>
 {/if}
+
+<style>
+	:global(.bottom-splitpane-wrapper .splitpanes__splitter) {
+		background-color: transparent !important;
+		border: none !important;
+		/* opacity: 0 !important; */
+	}</style>