From 0f65df24d2cabd9d8daa71c103969e6392e37b4f Mon Sep 17 00:00:00 2001
From: Guilhem <guilhemlemouel@gmail.com>
Date: Sat, 3 Oct 2026 20:18:44 +0200
Subject: [PATCH] feat: redesign the service logs page (#11506)

* feat: redesign the service logs page

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

* fix: drop a stale jump after a cached host switch and remove unused max_lines

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

* fix: keep focus on url sync and expose host selection and new logs to assistive tech

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

* fix: reset the tail on dropdown host picks, resume refresh after search, key log cache by host

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

* fix: clear the pending jump when a host switch needs no fetch

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../lib/components/LogSnippetViewer.svelte    |   13 +-
 .../lib/components/ServiceLogsInner.svelte    | 1036 +++++++++++------
 .../(root)/(logged)/service_logs/+page.svelte |   76 +-
 3 files changed, 680 insertions(+), 445 deletions(-)

diff --git a/frontend/src/lib/components/LogSnippetViewer.svelte b/frontend/src/lib/components/LogSnippetViewer.svelte
index 8aa1ad9dec..ce913cb6c2 100644
--- a/frontend/src/lib/components/LogSnippetViewer.svelte
+++ b/frontend/src/lib/components/LogSnippetViewer.svelte
@@ -36,9 +36,10 @@
 	let html = highlightSnippet(untrack(() => content))
 </script>
 
-<button onclick={onClick} class="font-light !m-0 !p-0">
-	<pre
-		class="bg-surface-secondary hover:bg-surface px-2 py-1 text-secondary text-xs w-[100%] whitespace-pre border min-w-full text-start">
-{@html html}
-</pre>
-</button>
+<button
+	type="button"
+	onclick={onClick}
+	title="Show in context"
+	class="block w-full min-w-full px-3 py-0.5 text-left font-mono text-2xs text-primary whitespace-pre hover:bg-surface-hover focus-visible:bg-surface-hover focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-border-accent"
+	>{@html html}</button
+>
diff --git a/frontend/src/lib/components/ServiceLogsInner.svelte b/frontend/src/lib/components/ServiceLogsInner.svelte
index 16bdd7d2ad..85c6cf7fb9 100644
--- a/frontend/src/lib/components/ServiceLogsInner.svelte
+++ b/frontend/src/lib/components/ServiceLogsInner.svelte
@@ -1,7 +1,4 @@
 <script lang="ts">
-	import { createBubbler, preventDefault } from 'svelte/legacy'
-
-	const bubble = createBubbler()
 	import { IndexSearchService, ServiceLogsService, type LogSearchHit } from '$lib/gen'
 
 	import TimeframeSelect, {
@@ -11,13 +8,25 @@
 	import CalendarPicker from './common/calendarPicker/CalendarPicker.svelte'
 	import LogViewer from './LogViewer.svelte'
 	import Toggle from './Toggle.svelte'
+	import TextInput from './text_input/TextInput.svelte'
+	import Popover from './Popover.svelte'
 	import { sendUserToast } from '$lib/toast'
-	import { onDestroy, tick } from 'svelte'
-	import { Loader2 } from 'lucide-svelte'
+	import { onDestroy, tick, type Snippet } from 'svelte'
+	import { fade } from 'svelte/transition'
+	import {
+		AlertTriangle,
+		ArrowDown,
+		ChevronLeft,
+		ChevronRight,
+		ClipboardCopy,
+		Loader2,
+		ScrollText,
+		Search,
+		SearchX
+	} from 'lucide-svelte'
 	import { copyToClipboard, scroll_into_view_if_needed_polyfill, truncateRev } from '$lib/utils'
 	import LogSnippetViewer from './LogSnippetViewer.svelte'
-	import { Alert, Button, Drawer, DrawerContent } from './common'
-	import ClipboardCopy from 'lucide-svelte/icons/clipboard-copy'
+	import { Alert, Button, Drawer, DrawerContent, EmptyState, Skeleton } from './common'
 	import { AnsiUp } from 'ansi_up'
 	import SplitPanesOrColumnOnMobile from './splitPanes/SplitPanesOrColumnOnMobile.svelte'
 	import Select from './select/Select.svelte'
@@ -27,17 +36,18 @@
 
 	interface Props {
 		searchTerm: string
-		queryParseErrors?: string[]
 		tagLabel?: string
+		/** Rendered at the start of the toolbar row, so the page title shares it. */
+		title?: Snippet
 	}
 
-	let { searchTerm, queryParseErrors = $bindable(), tagLabel }: Props = $props()
+	let { searchTerm = $bindable(), tagLabel, title }: Props = $props()
+
+	let queryParseErrors: string[] | undefined = $state(undefined)
 
 	let minTs: undefined | string = $state(undefined)
 	let maxTs: undefined | string = $state(undefined)
 
-	let max_lines: undefined | number = $state(undefined)
-
 	// let lastSeen: undefined | string = undefined
 
 	let withError = $state(false)
@@ -57,6 +67,7 @@
 	type ByMode = Record<string, ByWorkerGroup>
 
 	let timeout: number | undefined = $state(undefined)
+	const REFRESH_OVERLAP_MS = 2 * 60 * 1000
 
 	let allLogs: ByMode | undefined = $state(undefined)
 
@@ -115,19 +126,22 @@
 					if (!allLogs[log.mode][wg][hn]) {
 						allLogs[log.mode][wg][hn] = []
 					}
-					allLogs[log.mode][wg][hn].push({
+					const files = allLogs[log.mode][wg][hn]
+					// Refreshes overlap the previous window, so a file can come back twice.
+					if (files.some((f) => f.file_path === log.file_path)) {
+						return
+					}
+					files.push({
 						ts: ts,
 						file_path: log.file_path,
 						ok_lines: log.ok_lines ?? 1,
 						err_lines: log.err_lines ?? 0,
 						json_fmt: log.json_fmt
 					})
-					if (
-						log.ok_lines != undefined &&
-						log.err_lines != undefined &&
-						(max_lines == undefined || log.ok_lines + log.err_lines > max_lines)
-					) {
-						max_lines = log.ok_lines + log.err_lines
+					// A late file can be older than one already listed; readers take the
+					// last entries as the newest.
+					if (files.length > 1 && files[files.length - 2].ts > ts) {
+						files.sort((a, b) => a.ts - b.ts)
 					}
 				})
 
@@ -154,13 +168,19 @@
 				if (autoRefresh && searchTerm === '' && !maxTsManual) {
 					timeout = setTimeout(() => {
 						if (searchTerm !== '') return
-						let maxTsPlus1 = maxTs ? new Date(new Date(maxTs).getTime() + 1000) : undefined
-						getAllLogs(maxTsPlus1?.toISOString(), undefined)
+						// Each host's file for a minute is written when that host compacts it, so
+						// files for a minute already seen elsewhere keep landing for a while after.
+						let refreshFrom = maxTs
+							? new Date(new Date(maxTs).getTime() - REFRESH_OVERLAP_MS)
+							: undefined
+						getAllLogs(refreshFrom?.toISOString(), undefined)
 					}, 5000)
 				}
 			})
 			.catch((e) => {
-				sendUserToast('Failed to load service logs: ' + e.body, true)
+				// Only an API error has a body; a network failure or an exception in the
+				// handler above carries its cause in `message`.
+				sendUserToast('Failed to load service logs: ' + (e?.body ?? e?.message ?? e), true)
 				console.error(e)
 				loading = false
 				autoRefresh = false
@@ -168,32 +188,44 @@
 	}
 
 	type Selected = { mode: string; workerGroup: string; hostname: string }
+	// Servers and indexers have no worker group, so the URL omits it for them.
 	let initialSelected =
-		page.url.searchParams.get('mode') &&
-		page.url.searchParams.get('workerGroup') &&
-		page.url.searchParams.get('hostname')
+		page.url.searchParams.get('mode') && page.url.searchParams.get('hostname')
 			? {
 					mode: page.url.searchParams.get('mode')!,
-					workerGroup: page.url.searchParams.get('workerGroup')!,
+					workerGroup: page.url.searchParams.get('workerGroup') ?? '',
 					hostname: page.url.searchParams.get('hostname')!
 				}
 			: undefined
 	let selected: Selected | undefined = $state(initialSelected)
 
 	let logsContent: Record<string, { content?: string; error?: string }> = $state({})
-	export async function getLogFile(hostname: string, path: string) {
-		if (logsContent[path]) {
-			return
-		}
-		try {
-			const res = await ServiceLogsService.getLogFile({ path: `${hostname}/${path}` })
-			logsContent[path] = { content: res }
-		} catch (e) {
-			logsContent[path] = { error: `${e.message}: ${e.body}` }
-		}
+	// Files are fetched from the render path, which runs again before a fetch returns.
+	const fetchingFiles = new Set<string>()
+
+	/** Resolves to true when this call fetched the file, false when it was already there. */
+	// File names are per-minute timestamps, the same on every host, so a file is only
+	// identified by its host and name together.
+	function fileKey(hostname: string, path: string): string {
+		return `${hostname}/${path}`
 	}
 
-	getAllLogs(undefined, undefined)
+	export async function getLogFile(hostname: string, path: string): Promise<boolean> {
+		const key = fileKey(hostname, path)
+		if (logsContent[key] || fetchingFiles.has(key)) {
+			return false
+		}
+		fetchingFiles.add(key)
+		try {
+			const res = await ServiceLogsService.getLogFile({ path: key })
+			logsContent[key] = { content: res }
+		} catch (e) {
+			logsContent[key] = { error: `${e.message}: ${e.body}` }
+		} finally {
+			fetchingFiles.delete(key)
+		}
+		return true
+	}
 
 	function getLogs(selected: Selected, upTo: string | undefined) {
 		if (!selected) {
@@ -217,8 +249,15 @@
 	}
 
 	async function getFiles(hostname: string, logs: string[]) {
-		await Promise.all(logs.map((x) => getLogFile(hostname, x)))
-		scrollToBottom()
+		const fetched = await Promise.all(logs.map((x) => getLogFile(hostname, x)))
+		if (fetched.some(Boolean)) {
+			await tick()
+			onLogsAppended()
+		} else {
+			// Every file was cached: `jumpToEnd` already landed, and the next file that
+			// arrives extends the view, so it should animate.
+			jumpPending = false
+		}
 	}
 
 	function getLatestUpTo(selected: Selected): any {
@@ -232,13 +271,83 @@
 		return logs[logs.length - 1]?.ts
 	}
 
-	function scrollToBottom() {
-		const el = document.querySelector('#logviewer')
-		if (el) {
-			el.scrollTop = el.scrollHeight
+	// Within this distance of the end, the reader is following the tail.
+	const AT_END_PX = 24
+	let logPane: HTMLDivElement | undefined = $state()
+	let followTail = $state(true)
+	let showScrollToEnd = $state(false)
+	let hasNewLogs = $state(false)
+	// Set by an explicit navigation (host, time range); the next content lands at the end
+	// without animation, since it replaces the view rather than extending it.
+	let jumpPending = true
+	// A smooth scroll emits scroll events for its whole duration, all short of the end;
+	// until it lands, those are ours and must not read as the reader leaving the tail.
+	let autoScrollUntil = 0
+
+	function distanceToEnd(): number {
+		return logPane ? logPane.scrollHeight - logPane.scrollTop - logPane.clientHeight : 0
+	}
+
+	function scrollToEnd(smooth: boolean) {
+		if (!logPane) return
+		autoScrollUntil = smooth ? Date.now() + 1000 : 0
+		logPane.scrollTo({ top: logPane.scrollHeight, behavior: smooth ? 'smooth' : 'auto' })
+		followTail = true
+		hasNewLogs = false
+		showScrollToEnd = false
+	}
+
+	async function jumpToEnd() {
+		jumpPending = true
+		followTail = true
+		hasNewLogs = false
+		await tick()
+		scrollToEnd(false)
+	}
+
+	function onLogsAppended() {
+		if (jumpPending) {
+			jumpPending = false
+			scrollToEnd(false)
+		} else if (followTail) {
+			scrollToEnd(true)
+		} else {
+			// Older files fetched while browsing back in time are not news.
+			if (upToIsLatest) hasNewLogs = true
+			showScrollToEnd = distanceToEnd() > AT_END_PX
 		}
 	}
 
+	let lastScrollTop = 0
+	let lastScrollHeight = 0
+
+	function onLogPaneScroll() {
+		const atEnd = distanceToEnd() <= AT_END_PX
+		const movedUp = (logPane?.scrollTop ?? 0) < lastScrollTop
+		const contentChanged = (logPane?.scrollHeight ?? 0) !== lastScrollHeight
+		lastScrollTop = logPane?.scrollTop ?? 0
+		lastScrollHeight = logPane?.scrollHeight ?? 0
+		// Files added or dropped make the browser shift the scroll position to keep the
+		// visible lines in place. That is not the reader moving, so it must not change
+		// whether they follow the tail.
+		if (contentChanged) {
+			if (!followTail) showScrollToEnd = !atEnd
+			return
+		}
+		// An automatic scroll only moves down, so moving up during one is the reader.
+		if (Date.now() < autoScrollUntil && !movedUp) {
+			if (atEnd) autoScrollUntil = 0
+			return
+		}
+		autoScrollUntil = 0
+		followTail = atEnd
+		showScrollToEnd = !atEnd
+		if (atEnd) hasNewLogs = false
+		// A jump whose files were all cached never reaches `onLogsAppended`; once the
+		// reader leaves the end, a later refresh must not carry it out.
+		else jumpPending = false
+	}
+
 	onDestroy(() => {
 		timeout && clearTimeout(timeout)
 	})
@@ -290,10 +399,7 @@
 					delete obj['message']
 					Object.keys(obj).forEach((key) => {
 						nl +=
-							key +
-							'=' +
-							(typeof obj[key] == 'object' ? JSON.stringify(obj[key]) : obj[key]) +
-							' '
+							key + '=' + (typeof obj[key] == 'object' ? JSON.stringify(obj[key]) : obj[key]) + ' '
 					})
 					res += nl + '\n'
 				}
@@ -333,6 +439,18 @@
 	let sumOtherDocCount: number = $state(0)
 	let searchError: string | undefined = $state(undefined)
 
+	// `searchLogs` runs on every refresh too, so leaving a search is detected as a
+	// transition rather than on each empty-term call.
+	let searching = false
+
+	// A search stops the refresh poll and replaces the files with hits.
+	function leaveSearch() {
+		if (autoRefresh && !maxTsManual && maxTs) {
+			getAllLogs(new Date(new Date(maxTs).getTime() - REFRESH_OVERLAP_MS).toISOString(), undefined)
+		}
+		jumpToEnd()
+	}
+
 	async function searchLogs(
 		searchTerm: string,
 		selected: Selected | undefined,
@@ -345,7 +463,9 @@
 		if (selected?.mode) params.set('mode', selected.mode)
 		if (selected?.workerGroup) params.set('workerGroup', selected.workerGroup)
 		if (selected?.hostname) params.set('hostname', selected.hostname)
-		goto(`?${params.toString()}`)
+		// Only syncs the URL: a navigation resets focus by default, which would pull it off
+		// the host button or search field the reader is using.
+		goto(`?${params.toString()}`, { keepFocus: true, noScroll: true })
 		if (searchTerm.trim() === '') {
 			debounceTimeout && clearTimeout(debounceTimeout)
 			logs = undefined
@@ -354,8 +474,13 @@
 			loadingLogs = false
 			loadingLogCounts = false
 			searchError = undefined
+			if (searching) {
+				searching = false
+				leaveSearch()
+			}
 			return
 		}
+		searching = true
 		timeout && clearTimeout(timeout)
 
 		loadingLogCounts = true
@@ -402,7 +527,6 @@
 				logs = undefined
 				countsPerHost = undefined
 				sumOtherDocCount = 0
-				sendUserToast('Service logs search failed: ' + message, true)
 				console.error(e)
 			} finally {
 				loadingLogs = false
@@ -476,6 +600,58 @@
 		)
 	}
 
+	function formatTime(ts: string | number): string {
+		return new Date(ts).toLocaleTimeString([], {
+			day: '2-digit',
+			month: '2-digit',
+			hour: '2-digit',
+			minute: '2-digit'
+		})
+	}
+
+	// Time of day only when both ends fall on the same day, so the axis fits a narrow pane.
+	function formatAxisTime(ts: string, other: string): string {
+		const sameDay = new Date(ts).toDateString() === new Date(other).toDateString()
+		return sameDay
+			? new Date(ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
+			: formatTime(ts)
+	}
+
+	// The API returns hosts in log order, which reshuffles the list on every refresh.
+	function sortedEntries<T>(o: Record<string, T>): [string, T][] {
+		return Object.entries(o).sort(([a], [b]) => a.localeCompare(b))
+	}
+
+	function modeLabel(mode: string, plural: boolean): string {
+		return mode.charAt(0).toUpperCase() + mode.slice(1) + (plural ? 's' : '')
+	}
+
+	function isSelected(mode: string, wg: string, hn: string): boolean {
+		return selected?.mode === mode && selected?.workerGroup === wg && selected?.hostname === hn
+	}
+
+	function selectHost(mode: string, wg: string, hn: string) {
+		selected = { mode, workerGroup: wg, hostname: hn }
+		upToIsLatest = true
+		upTo = getLatestUpTo(selected)
+		jumpToEnd()
+	}
+
+	function visibleHosts(mode: string, wg: string, hosts: ByHostname): [string, LogFile[]][] {
+		return Object.entries(hosts).filter(([hn]) => {
+			if (isSelected(mode, wg, hn)) return true
+			const count = countsPerHost?.[`${mode},${wg},${hn}`]?.doc_count
+			return !countsPerHost || (count != undefined && count > 0)
+		})
+	}
+
+	function shiftUpTo(minutes: number) {
+		if (!upTo) return
+		upToIsLatest = false
+		upTo = new Date(new Date(upTo).getTime() + minutes * 60 * 1000).toISOString()
+		jumpToEnd()
+	}
+
 	watch(
 		() => timeframe,
 		() => {
@@ -495,365 +671,461 @@
 </script>
 
 <Drawer bind:this={logDrawer} bind:open={logDrawerOpen} size="1400px">
-	<DrawerContent title="See context" on:close={logDrawer.closeDrawer}>
+	<DrawerContent title="Log context" on:close={logDrawer.closeDrawer}>
 		{#snippet actions()}
 			<Button
-				on:click={() => copyToClipboard(content)}
-				color="light"
-				size="xs"
-				startIcon={{
-					icon: ClipboardCopy
-				}}
+				onClick={() => copyToClipboard(content)}
+				variant="default"
+				unifiedSize="md"
+				startIcon={{ icon: ClipboardCopy }}
 			>
 				Copy to clipboard
 			</Button>
 		{/snippet}
-		<div class="w-fit">
-			<pre
-				class="bg-surface-secondary text-secondary text-xs w-full p-2 whitespace-pre border rounded-md"
-				>...<br />{#each content.split('\n') as line, index}<div
-						id={`log-line-${index}`}
-						class={index === hitLineNumber ? 'bg-yellow-200 bg-opacity-20' : ''}>{@html line}</div
-					>{/each}...</pre
-			>
-		</div>
+		<pre
+			class="w-fit min-w-full rounded-md border border-border-light bg-surface-secondary p-2 font-mono text-2xs text-primary whitespace-pre"
+			>{#each content.split('\n') as line, index}<div
+					id={`log-line-${index}`}
+					class={index === hitLineNumber ? 'bg-surface-accent-selected' : ''}>{@html line}</div
+				>{/each}</pre
+		>
 	</DrawerContent>
 </Drawer>
 
-<SplitPanesOrColumnOnMobile>
-	{#snippet left_pane()}
-		<div class="p-1">
-			<div
-				class="flex flex-col lg:flex-row gap-y-1 justify-between w-full relative pb-4 gap-x-0.5"
-				id="service-logs-date-pickers"
-			>
-				<TimeframeSelect
-					items={serviceLogsTimeframes}
-					bind:value={timeframe}
-					{loading}
-					wrapperClasses="w-full"
-					onClick={() => {
-						minTs = undefined
-						maxTs = undefined
-						allLogs = undefined
-						const ts = timeframe.computeMinMax()
-						getAllLogs(ts.minTs ?? undefined, ts.maxTs ?? undefined)
-					}}
-				/>
-			</div>
-			<div class="flex w-full flex-row-reverse pb-4 -mt-2 gap-2"
-				><Toggle
-					size="xs"
-					bind:checked={withError}
-					options={{ right: 'errors > 0' }}
-					on:change={() => {
-						allLogs = undefined
-						getAllLogs(minTs, maxTs)
-					}}
-				/>
-				<Toggle
-					size="xs"
-					bind:checked={autoRefresh}
-					disabled={searchTerm != ''}
-					on:change={(e) => {
-						if (e.detail) {
-							getAllLogs(maxTs, undefined)
-						} else {
-							timeout && clearTimeout(timeout)
-						}
-					}}
-					options={{ right: 'auto-refresh' }}
-				/></div
-			>
-			{#if searchError}
-				<div class="pb-4">
-					<Alert type="warning" title="Service logs search unavailable" size="xs">
-						{searchError}
-					</Alert>
+<div class="flex flex-col grow min-h-0 min-w-0 gap-2 pb-2">
+	<div class="flex flex-wrap items-center gap-x-4 gap-y-2 pt-4 pb-2">
+		{@render title?.()}
+		<div class="relative grow min-w-64">
+			<Search
+				size={16}
+				class="absolute left-2 top-1/2 -translate-y-1/2 text-hint pointer-events-none z-10"
+			/>
+			<TextInput
+				bind:value={searchTerm}
+				size="md"
+				class="pl-8 pr-8"
+				inputProps={{
+					id: 'quickSearchInput',
+					placeholder: 'Search service logs',
+					autocomplete: 'off',
+					autofocus: true
+				}}
+			/>
+			{#if searchTerm !== '' && queryParseErrors && queryParseErrors.length > 0}
+				<div class="absolute right-2 top-1/2 -translate-y-1/2 z-10 flex">
+					<Popover notClickable placement="bottom-end">
+						<AlertTriangle size={16} class="text-yellow-500" />
+						{#snippet text()}
+							<div class="flex flex-col gap-1 text-xs">
+								<span>Some search terms were ignored because they could not be parsed:</span>
+								<ul class="list-disc pl-4">
+									{#each queryParseErrors ?? [] as msg}
+										<li>{msg}</li>
+									{/each}
+								</ul>
+							</div>
+						{/snippet}
+					</Popover>
 				</div>
 			{/if}
-			{#if allLogs == undefined}
-				<div class="text-center pb-2"><Loader2 class="animate-spin" /></div>
-			{:else if Object.keys(allLogs).length == 0}
-				<div class="flex flex-col justify-center items-center h-full gap-2">
-					<span>No logs</span>
-					<span class="text-2xs text-tertiary"
-						>Search only covers a recent time window, configurable in instance settings under
-						Indexer.</span
-					>
-				</div>
-			{:else if minTs && maxTs}
-				{@const minTsN = new Date(minTs).getTime()}
-				{@const maxTsN = new Date(maxTs).getTime()}
-				{@const diff = maxTsN - minTsN}
-				{#if searchTerm === ''}
-					<div class="flex w-full text-2xs text-primary pb-6">
-						<div style="width: 60px;"></div>
+		</div>
+		<TimeframeSelect
+			items={serviceLogsTimeframes}
+			bind:value={timeframe}
+			{loading}
+			wrapperClasses="w-64"
+			onClick={() => {
+				minTs = undefined
+				maxTs = undefined
+				allLogs = undefined
+				const ts = timeframe.computeMinMax()
+				getAllLogs(ts.minTs ?? undefined, ts.maxTs ?? undefined)
+			}}
+		/>
+		<div class="flex items-center gap-4">
+			<Toggle
+				size="sm"
+				bind:checked={withError}
+				options={{
+					right: 'With errors only',
+					rightTooltip: 'Only list the log files that contain at least one error line'
+				}}
+				on:change={() => {
+					allLogs = undefined
+					getAllLogs(minTs, maxTs)
+				}}
+			/>
+			<Toggle
+				size="sm"
+				bind:checked={autoRefresh}
+				disabled={searchTerm != ''}
+				on:change={(e) => {
+					if (e.detail) {
+						getAllLogs(maxTs, undefined)
+					} else {
+						timeout && clearTimeout(timeout)
+					}
+				}}
+				options={{
+					right: 'Auto-refresh',
+					rightTooltip: 'Fetch new log files every 5 seconds. Paused while searching.'
+				}}
+			/>
+		</div>
+	</div>
 
-						<div class="flex justify-between w-full"
-							><div
-								>{new Date(minTs).toLocaleTimeString([], {
-									day: '2-digit',
-									month: '2-digit',
-									hour: '2-digit',
-									minute: '2-digit'
-								})}</div
-							><div
-								>{new Date(maxTs).toLocaleTimeString([], {
-									day: '2-digit',
-									month: '2-digit',
-									hour: '2-digit',
-									minute: '2-digit'
-								})}</div
-							></div
-						>
-					</div>
-				{/if}
-				<div class="mr-0.5 mb-2">
-					<Select
-						bind:value={selected}
-						items={getSelectItems(allLogs, countsPerHost)}
-						onClear={() => {
-							selected = undefined
-						}}
-						placeholder="Select a service"
-					/>
+	{#if searchError}
+		<Alert type="warning" title="Service logs search unavailable" size="xs">
+			{searchError}
+		</Alert>
+	{/if}
+
+	<div class="flex grow min-h-0 min-w-0 service-logs-splitpanes">
+		<SplitPanesOrColumnOnMobile leftPaneSize={28} leftPaneMinSize={20} rightPaneSize={72}>
+			{#snippet left_pane()}
+				<div
+					class="flex flex-col h-full min-h-0 overflow-y-auto mb-2 md:mb-0 md:mr-2 rounded-md border bg-surface-tertiary"
+				>
+					{#if allLogs == undefined}
+						<div class="flex flex-col gap-2 p-3">
+							{#each new Array(6) as _}
+								<Skeleton layout={[[2]]} />
+							{/each}
+						</div>
+					{:else if Object.keys(allLogs).length == 0}
+						<div class="flex grow items-center justify-center p-3">
+							<EmptyState
+								icon={ScrollText}
+								title="No log files"
+								description="No service wrote a log file in this time range."
+							/>
+						</div>
+					{:else}
+						<div class="px-3 pt-3">
+							<Select
+								bind:value={
+									() => selected,
+									(v) => (v ? selectHost(v.mode, v.workerGroup, v.hostname) : (selected = v))
+								}
+								items={getSelectItems(allLogs, countsPerHost)}
+								onClear={() => {
+									selected = undefined
+								}}
+								size="sm"
+								placeholder="Find a host"
+							/>
+						</div>
+						{@const minTsN = minTs ? new Date(minTs).getTime() : 0}
+						{@const diff = maxTs && minTs ? new Date(maxTs).getTime() - minTsN || 1 : 1}
+						<div class="flex flex-col gap-4 p-3">
+							{#if searchTerm === '' && minTs && maxTs}
+								<!-- Same columns as a host row, so the labels sit over the bars they measure. -->
+								<div
+									class="flex gap-2 px-2 -mb-2 text-2xs text-secondary whitespace-nowrap"
+									title="{formatTime(minTs)} – {formatTime(maxTs)}"
+								>
+									<span class="w-24 shrink-0"></span>
+									<div class="flex grow min-w-0 justify-between gap-2">
+										<span class="truncate">{formatAxisTime(minTs, maxTs)}</span>
+										<span class="truncate">{formatAxisTime(maxTs, minTs)}</span>
+									</div>
+								</div>
+							{/if}
+							{#each sortedEntries(allLogsOrQueryResults(allLogs, countsPerHost)) as [mode, o1]}
+								<section class="flex flex-col gap-2">
+									<h2 class="text-sm font-semibold text-emphasis">{modeLabel(mode, true)}</h2>
+									{#each sortedEntries(o1) as [wg, o2]}
+										{@const hosts = visibleHosts(mode, wg, o2)}
+										{#if hosts.length > 0}
+											<div class="flex flex-col gap-0.5">
+												{#if wg}
+													<span class="text-2xs text-secondary px-2">{wg}</span>
+												{/if}
+												{#each hosts as [hn, files]}
+													{@const hostKey = `${mode},${wg},${hn}`}
+													{@const hostMax = Math.max(
+														1,
+														...files.map((f) => f.ok_lines + f.err_lines)
+													)}
+													<Button
+														variant="subtle"
+														unifiedSize="md"
+														selected={isSelected(mode, wg, hn)}
+														aria-current={isSelected(mode, wg, hn) ? 'true' : undefined}
+														title={hn}
+														wrapperClasses="w-full"
+														btnClasses="w-full justify-start gap-2 px-2"
+														onClick={() => selectHost(mode, wg, hn)}
+													>
+														<span
+															class="w-24 shrink-0 truncate text-left font-mono text-2xs font-normal text-emphasis"
+															>{truncateRev(hn, 14)}</span
+														>
+														{#if loadingLogCounts}
+															<Loader2 size={16} class="ml-auto animate-spin text-secondary" />
+														{:else if countsPerHost}
+															<span class="ml-auto text-2xs text-secondary">
+																{countsPerHost[hostKey]?.doc_count ?? 0} matches
+															</span>
+														{:else}
+															<div
+																class="relative grow h-5 border-b border-border-light"
+																aria-hidden="true"
+															>
+																{#each files as file}
+																	{@const total = file.ok_lines + file.err_lines}
+																	{@const height =
+																		total > 0 ? Math.max(10, (100 * total) / hostMax) : 0}
+																	{@const errShare = total > 0 ? file.err_lines / total : 0}
+																	<div
+																		class="absolute bottom-0 w-1 -translate-x-1/2 flex flex-col"
+																		style="left: {((file.ts - minTsN) / diff) *
+																			100}%; height: {height}%"
+																	>
+																		<div class="bg-red-500" style="height: {errShare * 100}%"></div>
+																		<div class="bg-border-normal grow"></div>
+																	</div>
+																{/each}
+															</div>
+														{/if}
+													</Button>
+												{/each}
+											</div>
+										{/if}
+									{/each}
+								</section>
+							{/each}
+							{#if !loadingLogCounts && sumOtherDocCount != 0}
+								<span class="text-2xs text-secondary">
+									{sumOtherDocCount} more matches are not attributed to any of these hosts.
+								</span>
+							{/if}
+						</div>
+					{/if}
 				</div>
-				{#each Object.entries(allLogsOrQueryResults(allLogs, countsPerHost)) as [mode, o1]}
-					<div class="w-full pb-8">
-						<h2 class="pb-2 text-2xl">{mode}s</h2>
-						{#each Object.entries(o1) as [wg, o2]}
-							<div class="w-full px-1">
-								{#if wg && wg != ''}
-									<h4 class="pt-4">{wg}</h4>
+			{/snippet}
+			{#snippet right_pane()}
+				<div
+					class="flex flex-col h-full min-h-0 md:ml-2 rounded-md border bg-surface-tertiary overflow-hidden"
+				>
+					{#if selected}
+						<div
+							class="flex flex-wrap items-center justify-between gap-2 px-3 py-2 border-b border-border-light"
+						>
+							<div class="flex flex-col gap-0.5 min-w-0">
+								<div class="flex items-baseline gap-2 min-w-0">
+									<h2 class="text-sm font-semibold text-emphasis">
+										{modeLabel(selected.mode, false)}
+									</h2>
+									<span class="truncate font-mono text-2xs text-emphasis">{selected.hostname}</span>
+								</div>
+								{#if selected.workerGroup}
+									<span class="text-2xs text-secondary">
+										Worker group {selected.workerGroup}
+									</span>
 								{/if}
-								<div class="divide-y flex flex-col">
-									{#each Object.entries(o2).filter(([hn, files]) => {
-										if (selected && selected.mode === mode && selected.workerGroup === wg && selected.hostname === hn) {
-											return true
-										}
-										const hostKey = `${mode},${wg},${hn}`
-										if (countsPerHost && (countsPerHost[hostKey] == undefined || countsPerHost[hostKey].doc_count === 0)) {
-											return false
-										}
-										return true
-									}) as [hn, files]}
-										{@const hostKey = `${mode},${wg},${hn}`}
-										<!-- svelte-ignore a11y_click_events_have_key_events -->
-										<!-- svelte-ignore a11y_no_static_element_interactions -->
-										<div
-											class="w-full flex items-baseline justify-between rounded px-1 hover:bg-surface-hover cursor-pointer {selected &&
-											selected.mode == mode &&
-											selected.workerGroup == wg &&
-											selected.hostname == hn
-												? 'bg-surface-secondary'
-												: ''}"
-											onclick={() => {
-												selected = { mode, workerGroup: wg, hostname: hn }
-												upToIsLatest = true
-												upTo = getLatestUpTo(selected)
-												scrollToBottom()
+							</div>
+							{#if searchTerm == ''}
+								<div class="flex items-center gap-1">
+									<span class="text-xs text-secondary pr-1">Last 5 log files up to</span>
+									<Button
+										variant="subtle"
+										unifiedSize="sm"
+										iconOnly
+										startIcon={{ icon: ChevronLeft }}
+										title="5 minutes earlier"
+										disabled={!upTo}
+										onClick={() => shiftUpTo(-5)}
+									/>
+									<div class="relative flex w-40">
+										<TextInput
+											size="sm"
+											value={upTo ? formatTime(upTo) : ''}
+											class="pr-9 tabular-nums"
+											inputProps={{ readonly: true, 'aria-label': 'Logs up to' }}
+										/>
+										<CalendarPicker
+											bind:date={upTo}
+											label="Logs up to"
+											placement="bottom-end"
+											on:change={() => {
+												upToIsLatest = false
+												jumpToEnd()
 											}}
+										/>
+									</div>
+									<Button
+										variant="subtle"
+										unifiedSize="sm"
+										iconOnly
+										startIcon={{ icon: ChevronRight }}
+										title="5 minutes later"
+										disabled={!upTo}
+										onClick={() => shiftUpTo(5)}
+									/>
+									<Button
+										variant="default"
+										unifiedSize="sm"
+										selected={upToIsLatest}
+										onClick={() => {
+											upTo = new Date().toISOString()
+											upToIsLatest = true
+											jumpToEnd()
+										}}
+									>
+										Latest
+									</Button>
+								</div>
+							{:else if logs != undefined && !loadingLogs}
+								<span class="text-2xs text-secondary">
+									{(logs.hits ?? []).length} matches on this host
+								</span>
+							{/if}
+						</div>
+						{#if searchTerm == ''}
+							<span class="px-3 py-1 text-2xs text-secondary border-b border-border-light">
+								Logs appear about a minute after they are written, once their file is compacted.
+							</span>
+						{/if}
+						<div class="relative grow min-h-0 flex flex-col">
+							<div
+								class="grow min-h-0 overflow-auto"
+								id="logviewer"
+								bind:this={logPane}
+								onscroll={onLogPaneScroll}
+							>
+								{#if loadingLogs}
+									<div class="flex justify-center items-center h-48 text-secondary">
+										<Loader2 size={24} class="animate-spin" />
+									</div>
+								{:else if logs != undefined}
+									<div class="flex flex-col min-w-full w-fit py-1">
+										<!-- Keyed: LogSnippetViewer renders its html once at creation, so an
+										 index-reused instance would keep the previous search's line. -->
+										{#each logs.hits ?? [] as hit, i (`${i}:${hit.file_path}:${hit.line_no}`)}
+											<LogSnippetViewer
+												content={renderHit(hit)}
+												highlighted={[]}
+												onClick={() => seeLogContext(hit.line_no, hit.file_path, hit.host, true)}
+											/>
+										{/each}
+										{#if (logs.hits ?? []).length === 0}
+											<div class="flex items-center justify-center p-3 py-16">
+												<EmptyState
+													icon={SearchX}
+													title="No matches on this host"
+													description="Try another host, a wider time range or a broader search."
+												/>
+											</div>
+										{/if}
+										{#if (logs.hits ?? []).length === 1000}
+											<span class="px-3 py-3 text-2xs text-secondary">
+												Only the 1000 most recent matches are shown. Narrow the search or the time
+												range to see older ones.
+											</span>
+										{/if}
+									</div>
+								{:else}
+									<!-- Keyed: the window slides by one file at a time, and an index-reused
+									     block would swap its content in place, so the browser could not keep
+									     the line being read where it is. -->
+									{#each getLogs(selected, upTo) as file (file.file_path)}
+										{@const entry = logsContent[fileKey(selected.hostname, file.file_path)]}
+										<div
+											class="relative"
+											style="min-height: {entry
+												? 10
+												: Math.min(file.ok_lines + file.err_lines, 30) * 16}px;"
 										>
 											<div
-												class="text-sm pt-2 pl-0.5 whitespace-nowrap"
-												title={hn}
-												style="width: 90px;"
-												>{truncateRev(hn, countsPerHost || loadingLogs ? 40 : 8)}</div
+												class="sticky top-0 z-10 px-3 py-1 bg-surface-secondary border-b border-border-light text-2xs text-secondary"
 											>
-											{#if loadingLogCounts}
-												<Loader2 size={15} class="animate-spin" />
-											{:else if countsPerHost}
-												<div class="text-primary text-xs">
-													{countsPerHost[hostKey]?.doc_count ?? 0} matches
+												{formatTime(file.ts)}
+											</div>
+											{#if entry == undefined}
+												<div class="p-3"><Skeleton layout={[[4]]} /></div>
+											{:else if entry.error}
+												<div class="p-3">
+													{#if entry.error?.startsWith('Not Found')}
+														<Alert type="info" size="xs" title="Log file not reachable">
+															Servers and workers need a shared log volume, or the EE object storage
+															for logs set in the instance settings, for their log files to be
+															readable from here.
+														</Alert>
+													{:else}
+														<Alert type="error" size="xs" title="Could not load this log file">
+															{entry.error}
+														</Alert>
+													{/if}
 												</div>
+											{:else if entry.content}
+												<LogViewer
+													noAutoScroll
+													noMaxH
+													isLoading={false}
+													tag={undefined}
+													{tagLabel}
+													content={processLogWithJsonFmt(entry.content, file.json_fmt)}
+												/>
 											{:else}
-												<div class="relative grow h-8 mr-2">
-													{#each files as file}
-														{@const okHeight = 100.0 * ((file.ok_lines * 1.0) / (max_lines ?? 1))}
-														{@const errHeight = 100.0 * ((file.err_lines * 1.0) / (max_lines ?? 1))}
-														<div
-															class=" w-2 bg-red-400 absolute"
-															style="left: {((file.ts - minTsN) / diff) *
-																100}%; height: {errHeight}%; bottom: {okHeight}%;"
-														></div>
-														<div
-															class="w-2 bg-surface-secondary-inverse absolute bottom-0"
-															style="left: {((file.ts - minTsN) / diff) *
-																100}%; height: {okHeight}%"
-														></div>
-													{/each}
-												</div>
+												<p class="px-3 py-2 text-xs text-secondary">This log file is empty.</p>
 											{/if}
 										</div>
 									{/each}
-								</div>
-							</div>
-						{/each}
-					</div>
-				{/each}
-				{#if !loadingLogCounts && sumOtherDocCount != 0}
-					<div class="text-primary italic text-sm">
-						Note: {sumOtherDocCount} additional matches weren't grouped into any of the above hosts.
-					</div>
-				{/if}
-			{/if}
-		</div>
-	{/snippet}
-	{#snippet right_pane()}
-		<div class="relative h-full flex flex-col gap-1 pb-2">
-			{#if selected}
-				{#if !loadingLogs && logs == undefined}
-					<div class="w-full bg-surface-primary-inverse text-primary text-xs text-center">
-						1 min delay: logs are compacted before being available
-					</div>
-				{/if}
-				<div class="grow overflow-auto" id="logviewer">
-					{#if loadingLogs}
-						<div class="flex w-full justify-center items-center h-48">
-							<div class="text-primary text-center">
-								<Loader2 size={34} class="animate-spin" />
-							</div>
-						</div>
-					{:else if logs != undefined}
-						<div class="flex flex-col min-w-full w-fit">
-							<!-- Keyed: LogSnippetViewer renders its html once at creation, so an
-										 index-reused instance would keep the previous search's line. -->
-							{#each logs.hits ?? [] as hit, i (`${i}:${hit.file_path}:${hit.line_no}`)}
-								<LogSnippetViewer
-									content={renderHit(hit)}
-									highlighted={[]}
-									onClick={() => seeLogContext(hit.line_no, hit.file_path, hit.host, true)}
-								/>
-							{/each}
-							{#if (logs.hits ?? []).length === 0}
-								<div class="text-center py-20 text-bold text-xl text-primary"> No logs </div>
-							{/if}
-							{#if (logs.hits ?? []).length === 1000}
-								<div class="pl-6 py-6 text-sm text-secondary">
-									Older matches were truncated from this search, try refining your filters to get
-									more precise results.
-								</div>
-							{/if}
-							<div class="py-20"></div>
-						</div>
-					{:else}
-						{#each getLogs(selected, upTo) as file}
-							<div
-								style="min-height: {logsContent[file.file_path]
-									? 10
-									: Math.min(file.ok_lines + file.err_lines, 30) * 16}px;"
-							>
-								<div class="bg-surface-primary-inverse text-sm font-semibold px-1"
-									>{new Date(file.ts).toLocaleTimeString([], {
-										day: '2-digit',
-										month: '2-digit',
-										hour: '2-digit',
-										minute: '2-digit'
-									})}</div
-								>
-								{#if logsContent[file.file_path] == undefined}
-									<div
-										class="animate-skeleton dark:bg-frost-900/50 [animation-delay:1000ms] h-full w-full"
-									></div>
-								{:else if logsContent[file.file_path]}
-									{#if logsContent[file.file_path].error}
-										{#if logsContent[file.file_path].error?.startsWith('Not Found')}
-											<div class="text-xs pb-4 pt-2 text-secondary"
-												>Log file is missing. Log files require a shared log volume to be mounted
-												across servers and workers or to use the EE S3/object storage integration
-												for logs. To avoid mounting a shared volume, set the EE object store logs in
-												the instance settings</div
-											>
-										{:else}
-											<div class="text-xs text-red-400 pb-4"
-												>{logsContent[file.file_path].error}</div
-											>
-										{/if}
-									{:else if logsContent[file.file_path].content}
-										<!-- svelte-ignore a11y_click_events_have_key_events -->
-										<!-- svelte-ignore a11y_no_static_element_interactions -->
-										<div onclick={preventDefault(bubble('click'))} class="pr-2"
-											><LogViewer
-												noAutoScroll
-												noMaxH
-												isLoading={false}
-												tag={undefined}
-												{tagLabel}
-												content={processLogWithJsonFmt(
-													logsContent[file.file_path].content,
-													file.json_fmt
-												)}
-											/></div
-										>
-									{:else}
-										<div>No logs</div>
-									{/if}
 								{/if}
 							</div>
-						{/each}
+							{#if showScrollToEnd && logs == undefined}
+								<div
+									transition:fade={{ duration: 120 }}
+									class="absolute bottom-3 left-1/2 -translate-x-1/2 z-20 rounded-md bg-surface shadow-md"
+								>
+									<Button
+										variant={hasNewLogs ? 'accent' : 'default'}
+										unifiedSize="sm"
+										iconOnly={!hasNewLogs}
+										title="Scroll to latest logs"
+										aria-label={hasNewLogs ? 'New logs, scroll to latest' : 'Scroll to latest logs'}
+										startIcon={{ icon: ArrowDown }}
+										onClick={() => scrollToEnd(true)}
+									>
+										{#if hasNewLogs}New logs{/if}
+									</Button>
+									{#if hasNewLogs}
+										<span class="pointer-events-none absolute -top-1 -right-1 flex h-2.5 w-2.5">
+											<span
+												class="absolute inline-flex h-full w-full animate-ping rounded-full bg-surface-accent-primary opacity-75"
+											></span>
+											<span
+												class="relative inline-flex h-2.5 w-2.5 rounded-full border border-surface bg-surface-accent-primary"
+											></span>
+										</span>
+									{/if}
+								</div>
+							{/if}
+							<!-- The button is visual only; this tells screen readers new files arrived. -->
+							<span class="sr-only" aria-live="polite">
+								{hasNewLogs ? 'New logs available below' : ''}
+							</span>
+						</div>
+					{:else}
+						<div class="flex grow items-center justify-center p-3">
+							<EmptyState
+								icon={ScrollText}
+								title="Select a host"
+								description="Pick a server, worker or indexer on the left to read its logs."
+							/>
+						</div>
 					{/if}
 				</div>
-				{#if searchTerm == ''}
-					<div class="flex w-full items-center gap-4">
-						<div class="text-primary px-1 text-2xs">Last 5 log files up to:</div>
-						<div class="flex grow text-xs justify-center px-2 items-center gap-2">
-							{#if upTo}
-								<button
-									onclick={() => {
-										if (upTo) {
-											upToIsLatest = false
-											upTo = new Date(new Date(upTo).getTime() - 5 * 60 * 1000).toISOString()
-										}
-									}}>{'<'} 5m</button
-								>
-							{:else}
-								<div></div>
-							{/if}
+			{/snippet}
+		</SplitPanesOrColumnOnMobile>
+	</div>
+</div>
 
-							<div class="flex gap-1 relative items-center"
-								><div class="flex gap-1 relative">
-									<input
-										type="text"
-										value={upTo
-											? new Date(upTo).toLocaleTimeString([], {
-													day: '2-digit',
-													month: '2-digit',
-													hour: '2-digit',
-													minute: '2-digit'
-												})
-											: ''}
-										disabled
-									/><CalendarPicker bind:date={upTo} label="Logs up to" /></div
-								></div
-							>
-							{#if upTo}
-								<button
-									onclick={() => {
-										if (upTo) {
-											upToIsLatest = false
-											upTo = new Date(new Date(upTo).getTime() + 5 * 60 * 1000).toISOString()
-										}
-									}}>5m {'>'}</button
-								>
-							{:else}
-								<div></div>
-							{/if}
-						</div>
-						<div>
-							<button
-								class="text-xs"
-								onclick={() => {
-									upTo = new Date().toISOString()
-									upToIsLatest = true
-								}}>now</button
-							>
-						</div>
-					</div>
-				{/if}
-			{:else}
-				<div class="flex justify-center items-center pt-8">Select a host to see its logs</div>
-			{/if}</div
-		>
-	{/snippet}
-</SplitPanesOrColumnOnMobile>
+<style>
+	/* The two panes are separate cards; the splitter is the gap between them. */
+	:global(.service-logs-splitpanes .splitpanes__splitter) {
+		background-color: transparent !important;
+		border: none !important;
+	}
+</style>
diff --git a/frontend/src/routes/(root)/(logged)/service_logs/+page.svelte b/frontend/src/routes/(root)/(logged)/service_logs/+page.svelte
index cab2a14790..5b8e56b5a2 100644
--- a/frontend/src/routes/(root)/(logged)/service_logs/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/service_logs/+page.svelte
@@ -1,72 +1,34 @@
 <script lang="ts">
 	import { page } from '$app/state'
 	import { Alert } from '$lib/components/common'
-	import Popover from '$lib/components/Popover.svelte'
 	import ServiceLogsInner from '$lib/components/ServiceLogsInner.svelte'
 	import Tooltip from '$lib/components/Tooltip.svelte'
 	import { devopsRole } from '$lib/stores'
-	import { Search, AlertTriangle } from 'lucide-svelte'
 
-	let searchTerm = $state(page.url.searchParams.get('query') ?? '')
-	let queryParseErrors: string[] | undefined = $state(undefined)
+	// `query` is what the global search links with; `searchTerm` is what the page writes back.
+	let searchTerm = $state(
+		page.url.searchParams.get('searchTerm') ?? page.url.searchParams.get('query') ?? ''
+	)
 </script>
 
-<div class="flex flex-col w-full h-screen max-h-screen max-w-screen px-2">
-	<div class="px-2">
-		<div class="flex items-center space-x-2 flex-row justify-between">
-			<div class="flex flex-row flex-wrap justify-between py-2 my-4 px-4 gap-1 items-center">
-				<h1 class="!text-2xl font-semibold leading-6 tracking-tight">Service logs</h1>
-				<Tooltip>Explore and search Windmill service logs from within Windmill!</Tooltip>
-			</div>
-		</div>
+{#snippet title()}
+	<div class="flex items-center gap-2">
+		<h1 class="text-2xl font-semibold text-emphasis whitespace-nowrap">Service logs</h1>
+		<Tooltip documentationLink="https://www.windmill.dev/docs/core_concepts/service_logs">
+			Logs written by the servers, workers and indexers of this instance, grouped by host.
+		</Tooltip>
 	</div>
+{/snippet}
 
+<div class="flex flex-col w-full min-w-0 h-screen max-h-screen px-4">
 	{#if $devopsRole == false}
-		<Alert title="Service logs are only available to superadmins" type="warning">
-			Service logs are only available to superadmins (or devops)
-		</Alert>
-	{:else}
-		<div class="m-1 px-2 flex flex-row gap-1 items-center border-2 rounded-lg">
-			<Search size="16" />
-			<!-- svelte-ignore a11y_autofocus -->
-			<input
-				id="quickSearchInput"
-				type="text"
-				class="quick-search-input !bg-surface"
-				bind:value={searchTerm}
-				autocomplete="off"
-				autofocus
-			/>
-			{#if searchTerm !== '' && queryParseErrors && queryParseErrors.length > 0}
-				<Popover notClickable placement="bottom-start">
-					<AlertTriangle size={16} class="text-yellow-500" />
-					{#snippet text()}
-						Some of your search terms have been ignored because one or more parse errors:<br /><br
-						/>
-						{#if queryParseErrors}
-							<ul>
-								{#each queryParseErrors as msg}
-									<li>- {msg}</li>
-								{/each}
-							</ul>
-						{/if}
-					{/snippet}
-				</Popover>
-			{/if}
+		<div class="flex flex-col gap-2 pt-4">
+			{@render title()}
+			<Alert title="Service logs are only available to superadmins and devops users" type="warning">
+				Ask one of them to look at the logs, or to grant you the devops role.
+			</Alert>
 		</div>
-
-		<ServiceLogsInner {searchTerm} bind:queryParseErrors />
+	{:else}
+		<ServiceLogsInner bind:searchTerm {title} />
 	{/if}
 </div>
-
-<style>
-	.quick-search-input {
-		outline: none;
-		border: none !important;
-		box-shadow: none !important;
-	}
-
-	.quick-search-input:focus-visible {
-		outline: none !important;
-	}
-</style>