small ui polish: loading state, relative timestamps, log-marker formatting, wider tooltips, type tidy-ups

src/lib/components/ExecutionHistoryList.svelte

@@ -7,7 +7,7 @@
 	 * the Schedules view uses.
 	 */
 	import { Check, X, AlertTriangle, Clock, CheckCheck, AlertCircle, Timer, Hand, Webhook, ChevronDown, FileText, Loader2 } from 'lucide-svelte';
-	import { formatDateTime } from '$lib/stores/settings';
+	import { formatDateTime, formatRelativeTime } from '$lib/stores/settings';
 	import { formatBytes } from '$lib/utils/format';
 	import { getRepoTypeIcon } from '$lib/utils/backup';
 	import type { Execution } from '$lib/utils/execution-tally';
@@ -72,7 +72,7 @@
 {#if loading && executions.length === 0}
 	<div class="flex justify-center py-8"><Loader2 class="h-5 w-5 animate-spin text-muted-foreground" /></div>
 {:else if executions.length === 0}
-	<div class="flex flex-col items-center justify-center py-10 text-center">
+	<div class="flex min-h-[60vh] flex-col items-center justify-center py-10 text-center">
 		<Clock class="mb-3 h-10 w-10 text-muted-foreground/40" />
 		<p class="text-sm text-muted-foreground">No backup runs yet.</p>
 		<p class="mt-1 text-xs text-muted-foreground">Run a backup — its history appears here.</p>
@@ -99,13 +99,13 @@
 					{@const isFail = exec.status === 'failed'}
 					{@const isOpen = expanded.has(exec.id)}
 					<tr class="border-b text-xs last:border-0 hover:bg-muted/30">
-						<td class="py-1.5 pl-2 font-mono">{exec.triggeredAt ? formatDateTime(exec.triggeredAt, true) : '—'}</td>
+						<td class="py-1.5 pl-2">{#if exec.triggeredAt}{formatDateTime(exec.triggeredAt, true)} <span class="text-muted-foreground opacity-60">({formatRelativeTime(exec.triggeredAt)})</span>{:else}—{/if}</td>
 						<td class="py-1.5 pl-2 text-center">
 							<span class="inline-flex h-5 w-5 items-center justify-center rounded bg-muted text-muted-foreground" title={triggerLabel(exec.triggeredBy)}>
 								<TrigIcon class="h-3 w-3" />
 							</span>
 						</td>
-						<td class="py-1.5 pl-2 font-mono text-muted-foreground">{formatDuration(exec.duration)}</td>
+						<td class="py-1.5 pl-2 text-muted-foreground">{formatDuration(exec.duration)}</td>
 						<td class="py-1.5 pl-2 text-center">
 							<span class="inline-flex h-5 w-5 items-center justify-center rounded {badge.cls}" title={exec.status}>
 								<BadgeIcon class="h-3 w-3 {exec.status === 'running' ? 'animate-spin' : ''}" />

src/lib/components/ui/loading-state/index.ts

@@ -0,0 +1,3 @@
+import LoadingState from './loading-state.svelte';
+
+export { LoadingState };

src/lib/components/ui/loading-state/loading-state.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { Loader2 } from 'lucide-svelte';
+	import { cn } from '$lib/utils.js';
+
+	interface Props {
+		/** Optional label under the spinner, e.g. "Loading snapshots...". */
+		label?: string;
+		/** Extra classes on the wrapper (e.g. `h-full` to fill a flex parent). */
+		class?: string;
+		/** Spinner size class. Defaults to a large centered spinner. */
+		spinnerClass?: string;
+	}
+
+	let { label, class: className, spinnerClass = 'w-10 h-10' }: Props = $props();
+</script>
+
+<div class={cn('flex min-h-[200px] flex-col items-center justify-center gap-3 text-muted-foreground', className)}>
+	<Loader2 class={cn('animate-spin', spinnerClass)} />
+	{#if label}
+		<span class="text-sm">{label}</span>
+	{/if}
+</div>

src/lib/components/ui/tooltip/tooltip-content.svelte

@@ -21,7 +21,7 @@
 	{sideOffset}
 	{side}
 	class={cn(
-		"bg-popover text-popover-foreground border shadow-lg animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 origin-(--bits-tooltip-content-transform-origin) z-[200] w-fit fixed text-balance rounded-md px-3 py-1.5 text-xs",
+		"bg-popover text-popover-foreground border shadow-lg animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-end-2 data-[side=right]:slide-in-from-start-2 data-[side=top]:slide-in-from-bottom-2 origin-(--bits-tooltip-content-transform-origin) z-[200] w-max max-w-lg fixed whitespace-normal rounded-md px-3 py-1.5 text-xs",
 		className
 	)}
 	{...restProps}

src/lib/utils/format.ts

@@ -17,3 +17,40 @@ export function formatBytesCompact(bytes: number, decimals = 1): string {
 	const i = Math.floor(Math.log(bytes) / Math.log(1024));
 	return `${(bytes / Math.pow(1024, i)).toFixed(i === 0 ? 0 : decimals)}${units[i]}`;
 }
+
+/**
+ * Make a long single-line error readable by putting each `[NNNN]` log marker on
+ * its own line. Scanner/CLI output (grype, trivy, restic) crams a whole log
+ * stream into one line prefixed by numeric markers like `[0026]`; splitting on
+ * those turns the wall of text into one line per log entry.
+ *
+ * Only NUMERIC brackets are split — `[]` (an empty compose field path such as
+ * `environment.[]`) is left attached so a field name is never torn in half.
+ */
+export function formatErrorLines(msg: string | null | undefined): string {
+	if (!msg) return '';
+	return msg.replace(/\s*(\[\d+\])/g, '\n$1').trim();
+}
+
+/**
+ * Compact relative time like "just now", "5m ago", "2d ago", "3mo ago". Returns ''
+ * for an unparseable/NaN date and "in the future" for a timestamp ahead of now.
+ * Kept in this import-light module so it is unit-testable; stores/settings re-exports it.
+ */
+export function formatRelativeTime(date: Date | string | number): string {
+	const d = date instanceof Date ? date : new Date(date);
+	const ms = d.getTime();
+	if (isNaN(ms)) return '';
+	const sec = Math.round((Date.now() - ms) / 1000);
+	if (sec < 0) return 'in the future';
+	if (sec < 45) return 'just now';
+	const min = Math.round(sec / 60);
+	if (min < 60) return `${min}m ago`;
+	const hr = Math.round(min / 60);
+	if (hr < 24) return `${hr}h ago`;
+	const day = Math.round(hr / 24);
+	if (day < 30) return `${day}d ago`;
+	const mo = Math.round(day / 30);
+	if (mo < 12) return `${mo}mo ago`;
+	return `${Math.round(mo / 12)}y ago`;
+}