diff --git a/frontend/src/lib/components/runs/RunBadges.svelte b/frontend/src/lib/components/runs/RunBadges.svelte
index 7f32cbe588..197b939751 100644
--- a/frontend/src/lib/components/runs/RunBadges.svelte
+++ b/frontend/src/lib/components/runs/RunBadges.svelte
@@ -2,7 +2,7 @@
 	import Tooltip from '$lib/components/meltComponents/Tooltip.svelte'
 	import PreprocessedArgsDisplay from '$lib/components/runs/PreprocessedArgsDisplay.svelte'
 	import { truncateHash } from '$lib/utils'
-	import { base } from '$app/paths'
+	import { base } from '$lib/base'
 	import { truncateRev } from '$lib/utils'
 	import { workspaceStore } from '$lib/stores'
 	import Badge from '$lib/components/common/badge/Badge.svelte'
diff --git a/frontend/src/lib/components/runs/TimeframeSelect.svelte b/frontend/src/lib/components/runs/TimeframeSelect.svelte
index feb223f213..c992500509 100644
--- a/frontend/src/lib/components/runs/TimeframeSelect.svelte
+++ b/frontend/src/lib/components/runs/TimeframeSelect.svelte
@@ -1,53 +1,11 @@
 <script module lang="ts">
-	function computeMinMaxInc(inc: number) {
-		let minTs = new Date(new Date().getTime() - inc).toISOString()
-		let maxTs = new Date().toISOString()
-		return { minTs, maxTs }
-	}
-
-	export type Timeframe =
-		| {
-				label: string
-				computeMinMax: () => { minTs: string | null; maxTs: string | null }
-				type: 'dynamic'
-		  }
-		| {
-				label: string
-				computeMinMax: () => { minTs: string | null; maxTs: string | null }
-				minTs: string | null
-				maxTs: string | null
-				type: 'manual'
-		  }
-
-	export function buildManualTimeframe(minTs: string | null, maxTs: string | null): Timeframe {
-		return {
-			label: formatDateRange(minTs ?? undefined, maxTs ?? undefined),
-			minTs,
-			maxTs,
-			type: 'manual',
-			computeMinMax: () => ({ minTs, maxTs })
-		}
-	}
-
-	export const serviceLogsTimeframes: Timeframe[] = [
-		{ label: '1000 last service logs', computeMinMax: () => ({ minTs: null, maxTs: null }) },
-		{ label: 'Within last 5 minutes', computeMinMax: () => computeMinMaxInc(5 * 60 * 1000) },
-		{ label: 'Within last 30 minutes', computeMinMax: () => computeMinMaxInc(30 * 60 * 1000) },
-		{ label: 'Within last 24 hours', computeMinMax: () => computeMinMaxInc(24 * 60 * 60 * 1000) },
-		{ label: 'Within last 7 days', computeMinMax: () => computeMinMaxInc(7 * 24 * 60 * 60 * 1000) },
-		{ label: 'Within last month', computeMinMax: () => computeMinMaxInc(30 * 24 * 60 * 60 * 1000) }
-	].map((item) => ({ ...item, type: 'dynamic' }))
-
-	export const runsTimeframes: Timeframe[] = [
-		{ label: 'Latest runs', computeMinMax: () => ({ minTs: null, maxTs: null }) },
-		{ label: 'Within 30 seconds', computeMinMax: () => computeMinMaxInc(30 * 1000) },
-		{ label: 'Within last minute', computeMinMax: () => computeMinMaxInc(60 * 1000) },
-		{ label: 'Within last 5 minutes', computeMinMax: () => computeMinMaxInc(5 * 60 * 1000) },
-		{ label: 'Within last 30 minutes', computeMinMax: () => computeMinMaxInc(30 * 60 * 1000) },
-		{ label: 'Within last 24 hours', computeMinMax: () => computeMinMaxInc(24 * 60 * 60 * 1000) },
-		{ label: 'Within last 7 days', computeMinMax: () => computeMinMaxInc(7 * 24 * 60 * 60 * 1000) },
-		{ label: 'Within last month', computeMinMax: () => computeMinMaxInc(30 * 24 * 60 * 60 * 1000) }
-	].map((item) => ({ ...item, type: 'dynamic' }))
+	export {
+		type Timeframe,
+		buildManualTimeframe,
+		serviceLogsTimeframes,
+		runsTimeframes
+	} from './timeframes'
+	import { type Timeframe, buildManualTimeframe } from './timeframes'
 
 	export function useUrlSyncedTimeframe(timeframes: Timeframe[]) {
 		let obj = $state({ timeframe: timeframes[0] })
diff --git a/frontend/src/lib/components/runs/runsFilter.ts b/frontend/src/lib/components/runs/runsFilter.ts
index 3aaa9a2842..cbece7aefb 100644
--- a/frontend/src/lib/components/runs/runsFilter.ts
+++ b/frontend/src/lib/components/runs/runsFilter.ts
@@ -16,7 +16,7 @@ import {
 } from 'lucide-svelte'
 import { triggerDisplayNamesMap } from '../triggers/utils'
 import type { FilterInstanceRec, FilterSchemaRec } from '../FilterSearchbar.svelte'
-import { runsTimeframes } from './TimeframeSelect.svelte'
+import { runsTimeframes } from './timeframes'
 
 export function buildRunsFilterSearchbarSchema({
 	paths,
diff --git a/frontend/src/lib/components/runs/timeframes.ts b/frontend/src/lib/components/runs/timeframes.ts
new file mode 100644
index 0000000000..9e46dd1bd8
--- /dev/null
+++ b/frontend/src/lib/components/runs/timeframes.ts
@@ -0,0 +1,51 @@
+import { formatDateRange } from '$lib/utils'
+
+function computeMinMaxInc(inc: number) {
+	let minTs = new Date(new Date().getTime() - inc).toISOString()
+	let maxTs = new Date().toISOString()
+	return { minTs, maxTs }
+}
+
+export type Timeframe =
+	| {
+			label: string
+			computeMinMax: () => { minTs: string | null; maxTs: string | null }
+			type: 'dynamic'
+	  }
+	| {
+			label: string
+			computeMinMax: () => { minTs: string | null; maxTs: string | null }
+			minTs: string | null
+			maxTs: string | null
+			type: 'manual'
+	  }
+
+export function buildManualTimeframe(minTs: string | null, maxTs: string | null): Timeframe {
+	return {
+		label: formatDateRange(minTs ?? undefined, maxTs ?? undefined),
+		minTs,
+		maxTs,
+		type: 'manual',
+		computeMinMax: () => ({ minTs, maxTs })
+	}
+}
+
+export const serviceLogsTimeframes: Timeframe[] = [
+	{ label: '1000 last service logs', computeMinMax: () => ({ minTs: null, maxTs: null }) },
+	{ label: 'Within last 5 minutes', computeMinMax: () => computeMinMaxInc(5 * 60 * 1000) },
+	{ label: 'Within last 30 minutes', computeMinMax: () => computeMinMaxInc(30 * 60 * 1000) },
+	{ label: 'Within last 24 hours', computeMinMax: () => computeMinMaxInc(24 * 60 * 60 * 1000) },
+	{ label: 'Within last 7 days', computeMinMax: () => computeMinMaxInc(7 * 24 * 60 * 60 * 1000) },
+	{ label: 'Within last month', computeMinMax: () => computeMinMaxInc(30 * 24 * 60 * 60 * 1000) }
+].map((item) => ({ ...item, type: 'dynamic' }))
+
+export const runsTimeframes: Timeframe[] = [
+	{ label: 'Latest runs', computeMinMax: () => ({ minTs: null, maxTs: null }) },
+	{ label: 'Within 30 seconds', computeMinMax: () => computeMinMaxInc(30 * 1000) },
+	{ label: 'Within last minute', computeMinMax: () => computeMinMaxInc(60 * 1000) },
+	{ label: 'Within last 5 minutes', computeMinMax: () => computeMinMaxInc(5 * 60 * 1000) },
+	{ label: 'Within last 30 minutes', computeMinMax: () => computeMinMaxInc(30 * 60 * 1000) },
+	{ label: 'Within last 24 hours', computeMinMax: () => computeMinMaxInc(24 * 60 * 60 * 1000) },
+	{ label: 'Within last 7 days', computeMinMax: () => computeMinMaxInc(7 * 24 * 60 * 60 * 1000) },
+	{ label: 'Within last month', computeMinMax: () => computeMinMaxInc(30 * 24 * 60 * 60 * 1000) }
+].map((item) => ({ ...item, type: 'dynamic' }))
diff --git a/frontend/src/lib/components/runs/useJobsLoader.svelte.ts b/frontend/src/lib/components/runs/useJobsLoader.svelte.ts
index de100937fc..74578a037c 100644
--- a/frontend/src/lib/components/runs/useJobsLoader.svelte.ts
+++ b/frontend/src/lib/components/runs/useJobsLoader.svelte.ts
@@ -15,7 +15,7 @@ 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 type { Timeframe } from './TimeframeSelect.svelte'
+import type { Timeframe } from './timeframes'
 import { allowWildcards as _allowWildcards, type RunsFilterInstance } from './runsFilter'
 
 export function computeJobKinds(jobKindsCat: string | null): string {