refactor: comprehensive codebase review — security, performance, quality, UX

Security:
- Fix NUT protocol command injection (validate names against safe regex)
- Enable Jinja2 autoescape=True to prevent HTML injection via external data
- Add WebhookProviderConfig validation model

Performance:
- Shared aiohttp.ClientSession singleton (replaces 40+ per-request sessions)
- Fix 4 N+1 queries with batch IN loads (poller, scheduler, memory, broadcast)
- asyncio.gather for Gitea commands and notification dispatcher
- Add DB indexes on NotificationTrackerState.tracker_id, CommandTrackerListener
- LRU cache for compiled Jinja2 templates
- Daily EventLog cleanup job (90-day retention)
- 30s HTTP timeout on all external calls
- GROUP BY for target type counts (replaces 7 sequential queries)

Code quality:
- Extract get_owned_entity() helper (replaces 11 duplicate functions)
- Extract slot_helpers.py (load_slots, save_slots, render_template_preview)
- Extract command_utils.py (tracker lookup, last event, collection IDs)
- Extract http_session.py (shared session lifecycle)
- Provider connection validation dedup (3x → 1 helper)
- Command dispatch tables replacing if/elif chains
- Album+links fetch helper (fetch_albums_with_links)
- Provider dispatch polymorphism (list_provider_collections)
- Immutable _enrich_assets (no longer mutates in-place)
- Fix _format_assets return type + handler unpacking

Frontend:
- Fix 18+ hardcoded English strings → t() with new i18n keys (en + ru)
- Mobile "More" nav panel with provider filter and search
- Shared Button.svelte component (4 variants, 2 sizes)
- Shared ErrorBanner.svelte component (8 pages updated)
- SvelteKit goto() replacing window.location.href
- Dashboard grid fixed for 4 cards, paginator opacity consistency

Functionality:
- max_instances=1 on scheduler jobs (prevents duplicate events)
- Webhook provider in watcher (prevents error spam)
- Fix stale SQLModel reference in poller
- Gitea get_repo() direct API call

frontend/src/routes/+layout.svelte

@@ -215,15 +215,31 @@
 		});
 	}
 
-	// Mobile: flatten nav for bottom bar
+	// Mobile: flatten nav for bottom bar (first 4 + "More" button)
 	const mobileNavItems = $derived<NavItem[]>([
 		{ href: '/', key: 'nav.dashboard', icon: 'mdiViewDashboard' },
 		{ href: '/notification-trackers', key: 'nav.notification', icon: 'mdiBellOutline' },
 		{ href: '/command-trackers', key: 'nav.commands', icon: 'mdiConsoleLine' },
 		{ href: '/targets', key: 'nav.targets', icon: 'mdiTarget' },
-		{ href: '/bots?tab=telegram', key: 'nav.bots', icon: 'mdiRobot' },
 	]);
 
+	// "More" panel items — everything not in the bottom bar
+	const mobileMoreItems = $derived<NavItem[]>([
+		{ href: '/providers', key: 'nav.providers', icon: 'mdiServer' },
+		{ href: '/bots?tab=telegram', key: 'nav.bots', icon: 'mdiRobot' },
+		{ href: '/actions', key: 'nav.actions', icon: 'mdiPlayCircleOutline' },
+		{ href: '/tracking-configs', key: 'nav.configs', icon: 'mdiCog' },
+		{ href: '/template-configs', key: 'nav.templates', icon: 'mdiFileDocumentEdit' },
+		{ href: '/command-configs', key: 'nav.configs', icon: 'mdiConsoleLine' },
+		{ href: '/command-template-configs', key: 'nav.templates', icon: 'mdiCodeBracesBox' },
+		...(auth.isAdmin ? [
+			{ href: '/settings', key: 'nav.settings', icon: 'mdiCogOutline' },
+			{ href: '/users', key: 'nav.users', icon: 'mdiAccountGroup' },
+		] : []),
+	]);
+
+	let mobileMoreOpen = $state(false);
+
 	const isAuthPage = $derived(
 		page.url.pathname === '/login' || page.url.pathname === '/setup'
 	);
@@ -526,12 +542,50 @@
 					<MdiIcon name={item.icon} size={20} />
 				</a>
 			{/each}
-			<button onclick={logout} aria-label={t('nav.logout')}
-				class="flex flex-col items-center gap-0.5 px-2 py-1.5 text-xs" style="color: var(--color-muted-foreground);">
-				<MdiIcon name="mdiLogout" size={20} />
+			<button onclick={() => openSearch?.()} aria-label={t('searchPalette.placeholder')}
+				class="flex flex-col items-center gap-0.5 px-2 py-1.5 text-xs rounded-lg transition-all duration-200"
+				style="color: var(--color-muted-foreground);">
+				<MdiIcon name="mdiMagnify" size={20} />
+			</button>
+			<button onclick={() => mobileMoreOpen = !mobileMoreOpen} aria-label={t('nav.more')}
+				class="flex flex-col items-center gap-0.5 px-2 py-1.5 text-xs rounded-lg transition-all duration-200"
+				style="color: {mobileMoreOpen ? 'var(--color-primary)' : 'var(--color-muted-foreground)'};">
+				<MdiIcon name="mdiDotsHorizontal" size={20} />
 			</button>
 		</nav>
 
+		<!-- Mobile "More" panel -->
+		{#if mobileMoreOpen}
+			<div class="mobile-more-backdrop" style="position: fixed; inset: 0; z-index: 49; background: rgba(0,0,0,0.4); backdrop-filter: blur(2px);"
+				onclick={() => mobileMoreOpen = false} role="presentation"></div>
+			<div class="mobile-more-panel" style="position: fixed; bottom: 3.25rem; left: 0; right: 0; z-index: 50; background: var(--color-sidebar); border-top: 1px solid var(--color-border); border-radius: 1rem 1rem 0 0; padding: 1rem; max-height: 60vh; overflow-y: auto;"
+				transition:slide={{ duration: 200, easing: cubicOut }}>
+				{#if allProviders.length > 1}
+					<div class="mb-3 pb-3" style="border-bottom: 1px solid var(--color-border);">
+						<IconGridSelect items={providerFilterItems} bind:value={providerFilterValue} columns={Math.min(providerFilterItems.length, 4)} compact />
+					</div>
+				{/if}
+				<div class="grid grid-cols-3 gap-2">
+					{#each mobileMoreItems as item}
+						<a href={item.href}
+							onclick={() => mobileMoreOpen = false}
+							class="flex flex-col items-center gap-1 p-3 rounded-lg transition-all duration-200"
+							style="color: {isActive(item.href) ? 'var(--color-primary)' : 'var(--color-muted-foreground)'}; background: {isActive(item.href) ? 'var(--color-sidebar-active)' : 'transparent'};"
+						>
+							<MdiIcon name={item.icon} size={20} />
+							<span class="text-xs text-center leading-tight">{t(item.key)}</span>
+						</a>
+					{/each}
+					<button onclick={() => { mobileMoreOpen = false; logout(); }}
+						class="flex flex-col items-center gap-1 p-3 rounded-lg transition-all duration-200"
+						style="color: var(--color-muted-foreground);">
+						<MdiIcon name="mdiLogout" size={20} />
+						<span class="text-xs text-center leading-tight">{t('nav.logout')}</span>
+					</button>
+				</div>
+			</div>
+		{/if}
+
 		<!-- Main content -->
 		<main class="flex-1 overflow-auto pb-16 md:pb-0">
 			{#key page.url.pathname}
@@ -579,6 +633,10 @@
 <style>
 	@media (max-width: 767px) {
 		.mobile-nav { display: flex !important; }
+		.mobile-more-panel a:hover,
+		.mobile-more-panel button:hover {
+			background: var(--color-muted);
+		}
 	}
 
 	/* Provider filter chips */

frontend/src/routes/+page.svelte

@@ -231,7 +231,7 @@
 		</div>
 	</Card>
 {:else if status}
-	<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8 stagger-children">
+	<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8 stagger-children">
 		{#each statCards as card, i}
 			<div class="stat-card" style="--accent: {card.color};">
 				<div class="stat-card-inner">
@@ -289,7 +289,7 @@
 		<div class="flex items-center justify-center gap-1">
 			{#if totalPages > 1}
 				<button onclick={() => goToPage(currentPage - 1)} disabled={currentPage <= 1}
-					class="px-2 py-1 text-sm border border-[var(--color-border)] rounded-md hover:bg-[var(--color-muted)] transition-colors disabled:opacity-30 disabled:cursor-default">
+					class="px-2 py-1 text-sm border border-[var(--color-border)] rounded-md hover:bg-[var(--color-muted)] transition-colors disabled:opacity-50 disabled:cursor-default">
 					<MdiIcon name="mdiChevronLeft" size={16} />
 				</button>
 				{#each Array.from({ length: totalPages }, (_, i) => i + 1) as page}
@@ -305,7 +305,7 @@
 					{/if}
 				{/each}
 				<button onclick={() => goToPage(currentPage + 1)} disabled={currentPage >= totalPages}
-					class="px-2 py-1 text-sm border border-[var(--color-border)] rounded-md hover:bg-[var(--color-muted)] transition-colors disabled:opacity-30 disabled:cursor-default">
+					class="px-2 py-1 text-sm border border-[var(--color-border)] rounded-md hover:bg-[var(--color-muted)] transition-colors disabled:opacity-50 disabled:cursor-default">
 					<MdiIcon name="mdiChevronRight" size={16} />
 				</button>
 			{/if}

frontend/src/routes/bots/EmailBotTab.svelte

@@ -10,6 +10,8 @@
 	import ConfirmModal from '$lib/components/ConfirmModal.svelte';
 	import IconButton from '$lib/components/IconButton.svelte';
 	import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';
+	import Button from '$lib/components/Button.svelte';
+	import ErrorBanner from '$lib/components/ErrorBanner.svelte';
 	import type { EmailBot } from '$lib/types';
 
 	let { onreload }: { onreload: () => Promise<void> } = $props();
@@ -72,22 +74,21 @@
 		try {
 			const res = await api(`/email-bots/${botId}/test`, { method: 'POST' });
 			if (res.success) snackSuccess(t('snack.emailBotTestSent'));
-			else snackError(res.error || 'Failed');
+			else snackError(res.error || t('emailBot.operationFailed'));
 		} catch (err: any) { snackError(err.message); }
 		emailTesting = { ...emailTesting, [botId]: false };
 	}
 </script>
 
 <PageHeader title={t('emailBot.title')} description={t('emailBot.description')}>
-	<button onclick={() => { showEmailForm ? (showEmailForm = false, editingEmail = null) : openNewEmail(); }}
-		class="px-3 py-1.5 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90">
+	<Button size="sm" onclick={() => { showEmailForm ? (showEmailForm = false, editingEmail = null) : openNewEmail(); }}>
 		{showEmailForm ? t('common.cancel') : t('emailBot.addBot')}
-	</button>
+	</Button>
 </PageHeader>
 
 {#if showEmailForm}
 	<Card class="mb-6">
-		{#if error}<div class="bg-[var(--color-error-bg)] text-[var(--color-error-fg)] text-sm rounded-md p-3 mb-4">{error}</div>{/if}
+		<ErrorBanner message={error} />
 		<form onsubmit={saveEmailBot} class="space-y-3">
 			<div>
 				<label for="ebot-name" class="block text-sm font-medium mb-1">{t('emailBot.name')}</label>

frontend/src/routes/bots/MatrixBotTab.svelte

@@ -10,6 +10,8 @@
 	import ConfirmModal from '$lib/components/ConfirmModal.svelte';
 	import IconButton from '$lib/components/IconButton.svelte';
 	import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';
+	import Button from '$lib/components/Button.svelte';
+	import ErrorBanner from '$lib/components/ErrorBanner.svelte';
 	import type { MatrixBot } from '$lib/types';
 
 	let { onreload }: { onreload: () => Promise<void> } = $props();
@@ -70,22 +72,21 @@
 		try {
 			const res = await api(`/matrix-bots/${botId}/test`, { method: 'POST' });
 			if (res.success) snackSuccess(t('snack.matrixBotTestOk'));
-			else snackError(res.error || 'Failed');
+			else snackError(res.error || t('matrixBot.operationFailed'));
 		} catch (err: any) { snackError(err.message); }
 		matrixTesting = { ...matrixTesting, [botId]: false };
 	}
 </script>
 
 <PageHeader title={t('matrixBot.title')} description={t('matrixBot.description')}>
-	<button onclick={() => { showMatrixForm ? (showMatrixForm = false, editingMatrix = null) : openNewMatrix(); }}
-		class="px-3 py-1.5 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90">
+	<Button size="sm" onclick={() => { showMatrixForm ? (showMatrixForm = false, editingMatrix = null) : openNewMatrix(); }}>
 		{showMatrixForm ? t('common.cancel') : t('matrixBot.addBot')}
-	</button>
+	</Button>
 </PageHeader>
 
 {#if showMatrixForm}
 	<Card class="mb-6">
-		{#if error}<div class="bg-[var(--color-error-bg)] text-[var(--color-error-fg)] text-sm rounded-md p-3 mb-4">{error}</div>{/if}
+		<ErrorBanner message={error} />
 		<form onsubmit={saveMatrixBot} class="space-y-3">
 			<div>
 				<label for="mbot-name" class="block text-sm font-medium mb-1">{t('matrixBot.name')}</label>

frontend/src/routes/bots/TelegramBotTab.svelte

@@ -12,6 +12,8 @@
 	import IconButton from '$lib/components/IconButton.svelte';
 	import EntitySelect from '$lib/components/EntitySelect.svelte';
 	import { snackSuccess, snackError, snackInfo } from '$lib/stores/snackbar.svelte';
+	import Button from '$lib/components/Button.svelte';
+	import ErrorBanner from '$lib/components/ErrorBanner.svelte';
 	import type { TelegramBot, TelegramChat } from '$lib/types';
 
 	interface CommandTrackerSummary { id: number; name: string; icon?: string; enabled: boolean }
@@ -186,7 +188,7 @@
 		try {
 			const res = await api<ApiResult>(`/telegram-bots/${botId}/sync-commands`, { method: 'POST' });
 			if (res.success) snackSuccess(t('telegramBot.commandsSynced'));
-			else snackError(res.error || 'Failed');
+			else snackError(res.error || t('telegramBot.saveFailed'));
 		} catch (err: any) { snackError(err.message); }
 		modeChanging = { ...modeChanging, [botId]: false };
 	}
@@ -218,7 +220,7 @@
 				snackSuccess(res.verified ? t('telegramBot.webhookVerified') : t('telegramBot.webhookRegistered'));
 				await loadWebhookStatus(botId);
 			} else {
-				snackError(res.error || 'Failed to register webhook');
+				snackError(res.error || t('telegramBot.webhookFailed'));
 			}
 		} catch (err: any) { snackError(err.message); }
 		modeChanging = { ...modeChanging, [botId]: false };
@@ -229,7 +231,7 @@
 		try {
 			const res = await api<ApiResult>(`/telegram-bots/${botId}/webhook/unregister`, { method: 'POST' });
 			if (res.success) { snackSuccess(t('telegramBot.webhookUnregistered')); await loadWebhookStatus(botId); }
-			else snackError(res.error || 'Failed');
+			else snackError(res.error || t('telegramBot.saveFailed'));
 		} catch (err: any) { snackError(err.message); }
 		modeChanging = { ...modeChanging, [botId]: false };
 	}
@@ -260,7 +262,7 @@
 		try {
 			const res = await api<ApiResult>(`/telegram-bots/${botId}/chats/${chatId}/test?locale=${getLocale()}`, { method: 'POST' });
 			if (res.success) snackSuccess(t('snack.targetTestSent'));
-			else snackError(res.error || 'Failed');
+			else snackError(res.error || t('telegramBot.saveFailed'));
 		} catch (err: any) { snackError(err.message); }
 		chatTesting = { ...chatTesting, [key]: false };
 	}
@@ -277,15 +279,14 @@
 </script>
 
 <PageHeader title={t('telegramBot.title')} description={t('telegramBot.description')}>
-	<button onclick={() => { showForm ? (showForm = false, editing = null) : openNew(); }}
-		class="px-3 py-1.5 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90">
+	<Button size="sm" onclick={() => { showForm ? (showForm = false, editing = null) : openNew(); }}>
 		{showForm ? t('common.cancel') : t('telegramBot.addBot')}
-	</button>
+	</Button>
 </PageHeader>
 
 {#if showForm}
 	<Card class="mb-6">
-		{#if error}<div class="bg-[var(--color-error-bg)] text-[var(--color-error-fg)] text-sm rounded-md p-3 mb-4">{error}</div>{/if}
+		<ErrorBanner message={error} />
 		<form onsubmit={saveBot} class="space-y-3">
 			<div>
 				<label for="bot-name" class="block text-sm font-medium mb-1">{t('telegramBot.name')}</label>

frontend/src/routes/command-configs/+page.svelte

@@ -15,6 +15,7 @@
 	import IconGridSelect from '$lib/components/IconGridSelect.svelte';
 	import { providerTypeItems, providerTypeFilterItems, responseModeItems } from '$lib/grid-items';
 	import EntitySelect from '$lib/components/EntitySelect.svelte';
+	import Button from '$lib/components/Button.svelte';
 	import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';
 	import { highlightFromUrl } from '$lib/highlight';
 	import { globalProviderFilter } from '$lib/stores/provider-filter.svelte';
@@ -37,7 +38,7 @@
 	let cmdTemplateConfigs = $derived(commandTemplateConfigsCache.items);
 	const templateItems = $derived(cmdTemplateConfigs
 		.filter((c) => c.provider_type === form.provider_type)
-		.map((c) => ({ value: c.id, label: c.name + (c.user_id === 0 ? ' (System)' : ''), icon: c.icon || 'mdiCodeBracesBox', desc: c.provider_type }))
+		.map((c) => ({ value: c.id, label: c.name + (c.user_id === 0 ? t('common.systemSuffix') : ''), icon: c.icon || 'mdiCodeBracesBox', desc: c.provider_type }))
 	);
 	let loaded = $state(false);
 	let showForm = $state(false);
@@ -151,10 +152,9 @@
 </script>
 
 <PageHeader title={t('commandConfig.title')} description={t('commandConfig.description')}>
-	<button onclick={() => { showForm ? (showForm = false, editing = null) : openNew(); }}
-		class="px-3 py-1.5 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90">
+	<Button size="sm" onclick={() => { showForm ? (showForm = false, editing = null) : openNew(); }}>
 		{showForm ? t('common.cancel') : t('commandConfig.newConfig')}
-	</button>
+	</Button>
 </PageHeader>
 
 {#if !loaded}<Loading />{:else}

frontend/src/routes/login/+page.svelte

@@ -32,7 +32,7 @@
 			await login(username, password);
 			window.location.href = '/';
 		} catch (err: any) {
-			error = err.message || 'Login failed';
+			error = err.message || t('auth.loginFailed');
 		}
 		submitting = false;
 	}

frontend/src/routes/notification-trackers/+page.svelte

@@ -17,6 +17,8 @@
 	import { providerDefaultIcon } from '$lib/grid-items';
 	import { globalProviderFilter } from '$lib/stores/provider-filter.svelte';
 	import { getDescriptor } from '$lib/providers';
+	import Button from '$lib/components/Button.svelte';
+	import ErrorBanner from '$lib/components/ErrorBanner.svelte';
 	import type { Tracker, TrackerTarget, TrackingConfig, TemplateConfig, NotificationTarget } from '$lib/types';
 
 	import TrackerForm from './TrackerForm.svelte';
@@ -119,7 +121,7 @@
 				capabilitiesCache.fetch(),
 			]);
 		} catch (err: any) {
-			loadError = err.message || 'Failed to load data';
+			loadError = err.message || t('common.loadFailed');
 			snackError(loadError);
 		} finally { loaded = true; highlightFromUrl(); }
 	}
@@ -212,7 +214,7 @@
 				}
 			}
 		}
-		if (created > 0) snackSuccess(`Created ${created} public link(s)`);
+		if (created > 0) snackSuccess(t('notificationTracker.createdLinks').replace('{count}', String(created)));
 		linkWarning = null;
 		linkCreating = false;
 		await doSave();
@@ -361,17 +363,16 @@
 </script>
 
 <PageHeader title={t('notificationTracker.title')} description={t('notificationTracker.description')}>
-	<button onclick={() => { showForm ? (showForm = false, editing = null) : openNew(); }}
-		class="px-3 py-1.5 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90">
+	<Button size="sm" onclick={() => { showForm ? (showForm = false, editing = null) : openNew(); }}>
 		{showForm ? t('notificationTracker.cancel') : t('notificationTracker.newTracker')}
-	</button>
+	</Button>
 </PageHeader>
 
 {#if !loaded}
 <Loading />
 {:else if loadError}
 	<Card>
-		<div class="bg-[var(--color-error-bg)] text-[var(--color-error-fg)] text-sm rounded-md p-3">{loadError}</div>
+		<ErrorBanner message={loadError} class="mb-0" />
 	</Card>
 {:else if showForm}
 	<TrackerForm

frontend/src/routes/providers/+page.svelte

@@ -12,12 +12,14 @@
 	import EmptyState from '$lib/components/EmptyState.svelte';
 	import ConfirmModal from '$lib/components/ConfirmModal.svelte';
 	import IconButton from '$lib/components/IconButton.svelte';
+	import ErrorBanner from '$lib/components/ErrorBanner.svelte';
 	import IconGridSelect from '$lib/components/IconGridSelect.svelte';
 	import { providerTypeItems, providerDefaultIcon } from '$lib/grid-items';
 	import { globalProviderFilter } from '$lib/stores/provider-filter.svelte';
 	import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';
 	import { highlightFromUrl } from '$lib/highlight';
 	import { getDescriptor, buildProviderFormDefaults } from '$lib/providers';
+	import Button from '$lib/components/Button.svelte';
 	import type { ServiceProvider } from '$lib/types';
 
 	let allProviders = $derived(providersCache.items);
@@ -136,10 +138,9 @@
 </script>
 
 <PageHeader title={t('providers.title')} description={t('providers.description')}>
-	<button onclick={() => { showForm ? (showForm = false, editing = null) : openNew(); }}
-		class="px-3 py-1.5 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90">
+	<Button size="sm" onclick={() => { showForm ? (showForm = false, editing = null) : openNew(); }}>
 		{showForm ? t('providers.cancel') : t('providers.addProvider')}
-	</button>
+	</Button>
 </PageHeader>
 
 {#if !loaded}
@@ -158,9 +159,7 @@
 {#if showForm}
 	<div in:slide={{ duration: 200 }}>
 	<Card class="mb-6">
-		{#if error}
-			<div class="bg-[var(--color-error-bg)] text-[var(--color-error-fg)] text-sm rounded-md p-3 mb-4">{error}</div>
-		{/if}
+		<ErrorBanner message={error} />
 		<form onsubmit={save} class="space-y-3">
 			<div>
 				<label class="block text-sm font-medium mb-1">{t('providers.type')}</label>
@@ -211,10 +210,9 @@
 				<p class="text-xs text-[var(--color-muted-foreground)] mt-1">{t('providers.webhookUrlHint')}</p>
 			</div>
 			{/if}
-			<button type="submit" disabled={submitting}
-				class="px-4 py-2 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90 disabled:opacity-50">
+			<Button type="submit" disabled={submitting}>
 				{submitting ? t('providers.connecting') : (editing ? t('common.save') : t('providers.addProvider'))}
-			</button>
+			</Button>
 		</form>
 	</Card>
 	</div>

frontend/src/routes/providers/new/+page.svelte

@@ -5,8 +5,11 @@
 	import Card from '$lib/components/Card.svelte';
 	import IconPicker from '$lib/components/IconPicker.svelte';
 	import IconGridSelect from '$lib/components/IconGridSelect.svelte';
+	import { goto } from '$app/navigation';
 	import { providerTypeItems } from '$lib/grid-items';
 	import { getDescriptor, buildProviderFormDefaults } from '$lib/providers';
+	import Button from '$lib/components/Button.svelte';
+	import ErrorBanner from '$lib/components/ErrorBanner.svelte';
 
 	let form = $state(buildProviderFormDefaults());
 	let error = $state('');
@@ -16,7 +19,7 @@
 
 	async function testAndSave() {
 		const desc = descriptor;
-		if (!desc) { error = 'Select a provider type'; return; }
+		if (!desc) { error = t('providers.selectType'); return; }
 		const { config, error: buildError } = desc.buildConfig(form, false);
 		if (buildError) { error = t(buildError); snackError(error); return; }
 
@@ -32,22 +35,22 @@
 			if (!result.ok) {
 				await api(`/providers/${provider.id}`, { method: 'DELETE' }).catch(() => {});
 				createdId = null;
-				error = result.message || 'Connection test failed';
+				error = result.message || t('providers.testFailed');
 				snackError(error);
 			} else {
 				snackSuccess(t('snack.providerSaved'));
-				window.location.href = '/providers';
+				goto('/providers');
 			}
 		} catch (e: any) {
 			if (createdId) await api(`/providers/${createdId}`, { method: 'DELETE' }).catch(() => {});
-			error = e.message || 'Test failed'; snackError(error);
+			error = e.message || t('providers.testFailed'); snackError(error);
 		}
 		finally { testing = false; }
 	}
 
 	async function saveWithoutTest() {
 		const desc = descriptor;
-		if (!desc) { error = 'Select a provider type'; return; }
+		if (!desc) { error = t('providers.selectType'); return; }
 		const { config, error: buildError } = desc.buildConfig(form, false);
 		if (buildError) { error = t(buildError); snackError(error); return; }
 
@@ -58,8 +61,8 @@
 				body: JSON.stringify({ type: form.type, name: form.name || desc.defaultName, icon: form.icon, config }),
 			});
 			snackSuccess(t('snack.providerSaved'));
-			window.location.href = '/providers';
-		} catch (e: any) { error = e.message || 'Save failed'; snackError(error); }
+			goto('/providers');
+		} catch (e: any) { error = e.message || t('common.saveFailed'); snackError(error); }
 		finally { saving = false; }
 	}
 </script>
@@ -112,22 +115,18 @@
 			</div>
 		{/each}
 
-		{#if error}
-			<p class="text-sm text-[var(--color-error-fg)]">{error}</p>
-		{/if}
+		<ErrorBanner message={error} />
 
 		<div class="flex gap-3 pt-2">
-			<button onclick={testAndSave} disabled={testing || saving}
-				class="px-4 py-2 bg-[var(--color-primary)] text-[var(--color-primary-foreground)] rounded-md text-sm font-medium hover:opacity-90 disabled:opacity-50">
+			<Button onclick={testAndSave} disabled={testing || saving}>
 				{testing ? t('providers.connecting') : t('providers.testAndSave')}
-			</button>
-			<button onclick={saveWithoutTest} disabled={testing || saving}
-				class="px-4 py-2 bg-[var(--color-muted)] text-[var(--color-foreground)] rounded-md text-sm font-medium hover:opacity-80 disabled:opacity-50">
+			</Button>
+			<Button variant="secondary" onclick={saveWithoutTest} disabled={testing || saving}>
 				{saving ? t('common.loading') : t('providers.saveWithoutTest')}
-			</button>
-			<a href="/providers" class="px-4 py-2 bg-[var(--color-muted)] text-[var(--color-muted-foreground)] rounded-md text-sm font-medium hover:opacity-80">
+			</Button>
+			<Button variant="secondary" href="/providers">
 				{t('common.cancel')}
-			</a>
+			</Button>
 		</div>
 	</div>
 </Card>

frontend/src/routes/settings/+page.svelte

@@ -7,10 +7,12 @@
 	import Loading from '$lib/components/Loading.svelte';
 	import MdiIcon from '$lib/components/MdiIcon.svelte';
 	import Hint from '$lib/components/Hint.svelte';
+	import ErrorBanner from '$lib/components/ErrorBanner.svelte';
 	import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';
 
 	let loaded = $state(false);
 	let saving = $state(false);
+	let error = $state('');
 	let settings = $state({
 		external_url: '',
 		telegram_webhook_secret: '',
@@ -20,16 +22,16 @@
 	onMount(async () => {
 		try {
 			settings = await api('/settings');
-		} catch (err: any) { snackError(err.message); }
+		} catch (err: any) { error = err.message; snackError(err.message); }
 		finally { loaded = true; }
 	});
 
 	async function save() {
-		saving = true;
+		saving = true; error = '';
 		try {
 			settings = await api('/settings', { method: 'PUT', body: JSON.stringify(settings) });
 			snackSuccess(t('settings.saved'));
-		} catch (err: any) { snackError(err.message); }
+		} catch (err: any) { error = err.message; snackError(err.message); }
 		saving = false;
 	}
 </script>
@@ -39,6 +41,7 @@
 {#if !loaded}
 	<Loading />
 {:else}
+	<ErrorBanner message={error} />
 	<div class="space-y-6">
 		<!-- General section -->
 		<Card>

frontend/src/routes/setup/+page.svelte

@@ -25,7 +25,7 @@
 		try {
 			await setup(username, password);
 			window.location.href = '/';
-		} catch (err: any) { error = err.message || 'Setup failed'; }
+		} catch (err: any) { error = err.message || t('auth.setupFailed'); }
 		submitting = false;
 	}
 </script>

frontend/src/routes/targets/+page.svelte

@@ -15,6 +15,7 @@
 	import { chatActionItems } from '$lib/grid-items';
 	import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';
 	import { highlightFromUrl } from '$lib/highlight';
+	import ErrorBanner from '$lib/components/ErrorBanner.svelte';
 	import type { NotificationTarget, TargetReceiver, TelegramChat } from '$lib/types';
 
 	import TargetForm from './TargetForm.svelte';
@@ -419,7 +420,7 @@
 {#if !loaded}<Loading />{:else}
 
 {#if loadError}
-	<div class="mb-4 p-3 rounded-md text-sm bg-[var(--color-error-bg)] text-[var(--color-error-fg)]">{loadError}</div>
+	<ErrorBanner message={loadError} />
 {/if}
 
 {#if showForm}