feat: UX improvements — secure webhooks, locale fixes, dynamic languages, UI polish

- Remove top paginator from dashboard events, keep only bottom
- Fix test message locale: pass UI locale to email/matrix bot tests
- Convert webhook auth mode from text input to icon grid selector
- Generate secure UUID tokens for webhook URLs instead of sequential IDs
- Move Recent Payloads into per-provider expandable container (lazy-loaded)
- Make template config languages dynamic via app settings instead of hardcoded
- Change default dev port to 5175

frontend/src/routes/+page.svelte

@@ -319,10 +319,6 @@
 		</div>
 	{/snippet}
 
-	<div class="mb-3">
-		{@render paginator()}
-	</div>
-
 	{#if eventsLoading}
 		<Card><p class="text-sm text-center py-4" style="color: var(--color-muted-foreground);">{t('dashboard.loadingEvents')}</p></Card>
 	{:else if status.recent_events.length === 0}

frontend/src/routes/bots/EmailBotTab.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { api } from '$lib/api';
-	import { t } from '$lib/i18n';
+	import { t, getLocale } from '$lib/i18n';
 	import { emailBotsCache } from '$lib/stores/caches.svelte';
 	import PageHeader from '$lib/components/PageHeader.svelte';
 	import Card from '$lib/components/Card.svelte';
@@ -72,7 +72,7 @@
 	async function testEmailBot(botId: number) {
 		emailTesting = { ...emailTesting, [botId]: true };
 		try {
-			const res = await api(`/email-bots/${botId}/test`, { method: 'POST' });
+			const res = await api(`/email-bots/${botId}/test?locale=${getLocale()}`, { method: 'POST' });
 			if (res.success) snackSuccess(t('snack.emailBotTestSent'));
 			else snackError(res.error || t('emailBot.operationFailed'));
 		} catch (err: any) { snackError(err.message); }

frontend/src/routes/bots/MatrixBotTab.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { api } from '$lib/api';
-	import { t } from '$lib/i18n';
+	import { t, getLocale } from '$lib/i18n';
 	import { matrixBotsCache } from '$lib/stores/caches.svelte';
 	import PageHeader from '$lib/components/PageHeader.svelte';
 	import Card from '$lib/components/Card.svelte';
@@ -70,7 +70,7 @@
 	async function testMatrixBot(botId: number) {
 		matrixTesting = { ...matrixTesting, [botId]: true };
 		try {
-			const res = await api(`/matrix-bots/${botId}/test`, { method: 'POST' });
+			const res = await api(`/matrix-bots/${botId}/test?locale=${getLocale()}`, { method: 'POST' });
 			if (res.success) snackSuccess(t('snack.matrixBotTestOk'));
 			else snackError(res.error || t('matrixBot.operationFailed'));
 		} catch (err: any) { snackError(err.message); }

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

@@ -4,7 +4,7 @@
 	import { api } from '$lib/api';
 	import { t } from '$lib/i18n';
 	import { sanitizePreview } from '$lib/sanitize';
-	import { commandTemplateConfigsCache } from '$lib/stores/caches.svelte';
+	import { commandTemplateConfigsCache, supportedLocalesCache } from '$lib/stores/caches.svelte';
 	import PageHeader from '$lib/components/PageHeader.svelte';
 	import Card from '$lib/components/Card.svelte';
 	import Loading from '$lib/components/Loading.svelte';
@@ -38,7 +38,7 @@
 		description: string;
 	}
 
-	const LOCALES = ['en', 'ru'] as const;
+	let LOCALES = $derived(supportedLocalesCache.items);
 
 	let allCmdTplConfigs = $state<CmdTemplateConfig[]>([]);
 	let filterText = $state('');
@@ -132,6 +132,7 @@
 				commandTemplateConfigsCache.fetch(true),
 				api('/providers/capabilities'),
 				api('/command-template-configs/variables'),
+				supportedLocalesCache.fetch(),
 			]);
 			allCmdTplConfigs = cfgs;
 			allCapabilities = caps;

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

@@ -14,7 +14,9 @@
 	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 { providerTypeItems, providerDefaultIcon, webhookAuthModeItems } from '$lib/grid-items';
+
+	const gridItemSources: Record<string, () => any[]> = { webhookAuthModeItems };
 	import { globalProviderFilter } from '$lib/stores/provider-filter.svelte';
 	import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';
 	import { highlightFromUrl } from '$lib/highlight';
@@ -189,7 +191,9 @@
 					{t(editing && field.editLabel ? field.editLabel : field.label)}
 					{#if field.optional}<span class="text-xs text-[var(--color-muted-foreground)]">({t('providers.optional')})</span>{/if}
 				</label>
-				{#if field.type === 'number'}
+				{#if field.type === 'grid-select' && field.gridItems}
+					<IconGridSelect items={gridItemSources[field.gridItems]()} bind:value={form[field.key]} columns={field.gridColumns ?? 2} compact />
+				{:else if field.type === 'number'}
 					<input id="prv-{field.key}" type="number" bind:value={form[field.key]}
 						min={field.min} max={field.max}
 						class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
@@ -207,7 +211,7 @@
 			{#if descriptor?.webhookUrlPattern && editing}
 			<div class="bg-[var(--color-muted)] rounded-md p-3">
 				<label class="block text-sm font-medium mb-1">{t('providers.webhookUrl')}</label>
-				<code class="text-xs select-all break-all">{descriptor.webhookUrlPattern.replace('{id}', String(editing))}</code>
+				<code class="text-xs select-all break-all">{descriptor.webhookUrlPattern.replace('{token}', providers.find(p => p.id === editing)?.webhook_token ?? '')}</code>
 				<p class="text-xs text-[var(--color-muted-foreground)] mt-1">{t('providers.webhookUrlHint')}</p>
 			</div>
 			{/if}
@@ -254,7 +258,7 @@
 								<p class="text-xs text-[var(--color-muted-foreground)] font-mono">{provider.config.host}:{provider.config.port || 3493}</p>
 							{/if}
 							{#if provDesc?.webhookUrlPattern}
-								<p class="text-xs text-[var(--color-muted-foreground)] font-mono mt-0.5">{t('providers.webhookUrl')}: <span class="select-all">{provDesc.webhookUrlPattern.replace('{id}', String(provider.id))}</span></p>
+								<p class="text-xs text-[var(--color-muted-foreground)] font-mono mt-0.5">{t('providers.webhookUrl')}: <span class="select-all">{provDesc.webhookUrlPattern.replace('{token}', provider.webhook_token)}</span></p>
 							{/if}
 						</div>
 					</div>
@@ -263,10 +267,10 @@
 						<IconButton icon="mdiDelete" title={t('common.delete')} onclick={() => startDelete(provider)} variant="danger" />
 					</div>
 				</div>
+				{#if provDesc?.payloadHistory && !showForm}
+					<WebhookPayloadHistory providerId={provider.id} />
+				{/if}
 			</Card>
-			{#if provDesc?.payloadHistory && !showForm}
-				<WebhookPayloadHistory providerId={provider.id} />
-			{/if}
 		{/each}
 	</div>
 {/if}

frontend/src/routes/providers/WebhookPayloadHistory.svelte

@@ -2,7 +2,6 @@
 	import { t } from '$lib/i18n';
 	import { api } from '$lib/api';
 	import MdiIcon from '$lib/components/MdiIcon.svelte';
-	import Card from '$lib/components/Card.svelte';
 	import ConfirmModal from '$lib/components/ConfirmModal.svelte';
 	import type { WebhookPayloadLog } from '$lib/types';
 
@@ -12,7 +11,9 @@
 	let { providerId }: Props = $props();
 
 	let logs = $state<WebhookPayloadLog[]>([]);
-	let loading = $state(true);
+	let loading = $state(false);
+	let loaded = $state(false);
+	let expanded = $state(false);
 	let expandedId = $state<number | null>(null);
 	let showClearConfirm = $state(false);
 
@@ -25,6 +26,12 @@
 			logs = [];
 		}
 		loading = false;
+		loaded = true;
+	}
+
+	function toggle() {
+		expanded = !expanded;
+		if (expanded && !loaded) loadLogs();
 	}
 
 	async function clearLogs() {
@@ -60,102 +67,96 @@
 	function formatTime(iso: string): string {
 		return new Date(iso).toLocaleString();
 	}
-
-	$effect(() => {
-		void providerId;
-		loadLogs();
-	});
 </script>
 
-<Card>
-	<div class="flex items-center justify-between mb-3">
-		<div class="flex items-center gap-2">
-			<h3 class="text-sm font-semibold">{t('webhookLogs.title')}</h3>
-			{#if logs.length > 0}
-				<span class="text-xs px-1.5 py-0.5 rounded-full bg-[var(--color-muted)] text-[var(--color-muted-foreground)]">{logs.length}</span>
+<div class="border-t border-[var(--color-border)] mt-3 pt-2">
+	<button onclick={toggle} class="w-full flex items-center gap-2 text-sm font-medium py-1 hover:opacity-80 transition-opacity">
+		<MdiIcon name={expanded ? 'mdiChevronDown' : 'mdiChevronRight'} size={16} />
+		{t('webhookLogs.title')}
+		{#if loaded && logs.length > 0}
+			<span class="text-xs px-1.5 py-0.5 rounded-full bg-[var(--color-muted)] text-[var(--color-muted-foreground)]">{logs.length}</span>
+		{/if}
+	</button>
+
+	{#if expanded}
+		<div class="mt-2">
+			{#if loading}
+				<div class="text-sm text-[var(--color-muted-foreground)] py-3 text-center">{t('common.loading')}</div>
+			{:else if logs.length === 0}
+				<div class="text-sm text-[var(--color-muted-foreground)] py-3 text-center">{t('webhookLogs.empty')}</div>
+			{:else}
+				<div class="flex justify-end mb-2">
+					<button
+						onclick={() => showClearConfirm = true}
+						class="text-xs px-2 py-1 rounded-md transition-colors hover:bg-[var(--color-error-bg)] text-[var(--color-error-fg)]"
+					>
+						{t('webhookLogs.clear')}
+					</button>
+				</div>
+				<div class="space-y-1">
+					{#each logs as log}
+						<button
+							onclick={() => toggleExpand(log.id)}
+							class="w-full text-left px-3 py-2 rounded-md text-sm transition-colors hover:bg-[var(--color-sidebar-active)]"
+							style="background: {expandedId === log.id ? 'var(--color-sidebar-active)' : 'transparent'};"
+						>
+							<div class="flex items-center gap-2">
+								<MdiIcon name={expandedId === log.id ? 'mdiChevronDown' : 'mdiChevronRight'} size={14} />
+								<span class="text-xs text-[var(--color-muted-foreground)] tabular-nums">{formatTime(log.created_at)}</span>
+								<span class="text-xs font-mono px-1 py-0.5 rounded bg-[var(--color-muted)]">{log.method}</span>
+								<span class="flex items-center gap-1" style="color: {statusColor(log.status)};">
+									<MdiIcon name={statusIcon(log.status)} size={14} />
+									<span class="text-xs font-medium">{statusLabel(log.status)}</span>
+								</span>
+								{#if log.error_message && log.status === 'error'}
+									<span class="text-xs text-[var(--color-muted-foreground)] truncate max-w-[200px]">{log.error_message}</span>
+								{/if}
+							</div>
+						</button>
+
+						{#if expandedId === log.id}
+							<div class="ml-6 mr-2 mb-2 space-y-2">
+								{#if Object.keys(log.headers).length > 0}
+									<div>
+										<div class="text-xs font-medium text-[var(--color-muted-foreground)] mb-1">{t('webhookLogs.headers')}</div>
+										<div class="bg-[var(--color-background)] border border-[var(--color-border)] rounded-md p-2 text-xs font-mono">
+											{#each Object.entries(log.headers) as [key, value]}
+												<div><span class="text-[var(--color-primary)]">{key}</span>: {value}</div>
+											{/each}
+										</div>
+									</div>
+								{/if}
+
+								<div>
+									<div class="text-xs font-medium text-[var(--color-muted-foreground)] mb-1">{t('webhookLogs.body')}</div>
+									<pre class="bg-[var(--color-background)] border border-[var(--color-border)] rounded-md p-2 text-xs font-mono overflow-x-auto whitespace-pre-wrap break-all" style="max-height: 300px; overflow-y: auto;">{JSON.stringify(log.body, null, 2)}</pre>
+								</div>
+
+								{#if log.status === 'matched' && Object.keys(log.extracted_fields).length > 0}
+									<div>
+										<div class="text-xs font-medium text-[var(--color-muted-foreground)] mb-1">{t('webhookLogs.extractedFields')}</div>
+										<div class="bg-[var(--color-background)] border border-[var(--color-border)] rounded-md p-2 text-xs font-mono">
+											{#each Object.entries(log.extracted_fields) as [key, value]}
+												<div><span class="text-[var(--color-primary)]">{key}</span>: {typeof value === 'object' ? JSON.stringify(value) : String(value)}</div>
+											{/each}
+										</div>
+									</div>
+								{/if}
+
+								{#if log.status === 'error' && log.error_message}
+									<div>
+										<div class="text-xs font-medium text-[var(--color-error-fg)] mb-1">{t('webhookLogs.errorMessage')}</div>
+										<div class="bg-[var(--color-error-bg)] text-[var(--color-error-fg)] rounded-md p-2 text-xs">{log.error_message}</div>
+									</div>
+								{/if}
+							</div>
+						{/if}
+					{/each}
+				</div>
 			{/if}
 		</div>
-		{#if logs.length > 0}
-			<button
-				onclick={() => showClearConfirm = true}
-				class="text-xs px-2 py-1 rounded-md transition-colors hover:bg-[var(--color-error-bg)] text-[var(--color-error-fg)]"
-			>
-				{t('webhookLogs.clear')}
-			</button>
-		{/if}
-	</div>
-
-	{#if loading}
-		<div class="text-sm text-[var(--color-muted-foreground)] py-4 text-center">{t('common.loading')}</div>
-	{:else if logs.length === 0}
-		<div class="text-sm text-[var(--color-muted-foreground)] py-4 text-center">{t('webhookLogs.empty')}</div>
-	{:else}
-		<div class="space-y-1">
-			{#each logs as log}
-				<button
-					onclick={() => toggleExpand(log.id)}
-					class="w-full text-left px-3 py-2 rounded-md text-sm transition-colors hover:bg-[var(--color-sidebar-active)]"
-					style="background: {expandedId === log.id ? 'var(--color-sidebar-active)' : 'transparent'};"
-				>
-					<div class="flex items-center gap-2">
-						<MdiIcon name={expandedId === log.id ? 'mdiChevronDown' : 'mdiChevronRight'} size={14} />
-						<span class="text-xs text-[var(--color-muted-foreground)] tabular-nums">{formatTime(log.created_at)}</span>
-						<span class="text-xs font-mono px-1 py-0.5 rounded bg-[var(--color-muted)]">{log.method}</span>
-						<span class="flex items-center gap-1" style="color: {statusColor(log.status)};">
-							<MdiIcon name={statusIcon(log.status)} size={14} />
-							<span class="text-xs font-medium">{statusLabel(log.status)}</span>
-						</span>
-						{#if log.error_message && log.status === 'error'}
-							<span class="text-xs text-[var(--color-muted-foreground)] truncate max-w-[200px]">{log.error_message}</span>
-						{/if}
-					</div>
-				</button>
-
-				{#if expandedId === log.id}
-					<div class="ml-6 mr-2 mb-2 space-y-2">
-						<!-- Headers -->
-						{#if Object.keys(log.headers).length > 0}
-							<div>
-								<div class="text-xs font-medium text-[var(--color-muted-foreground)] mb-1">{t('webhookLogs.headers')}</div>
-								<div class="bg-[var(--color-background)] border border-[var(--color-border)] rounded-md p-2 text-xs font-mono">
-									{#each Object.entries(log.headers) as [key, value]}
-										<div><span class="text-[var(--color-primary)]">{key}</span>: {value}</div>
-									{/each}
-								</div>
-							</div>
-						{/if}
-
-						<!-- Body -->
-						<div>
-							<div class="text-xs font-medium text-[var(--color-muted-foreground)] mb-1">{t('webhookLogs.body')}</div>
-							<pre class="bg-[var(--color-background)] border border-[var(--color-border)] rounded-md p-2 text-xs font-mono overflow-x-auto whitespace-pre-wrap break-all" style="max-height: 300px; overflow-y: auto;">{JSON.stringify(log.body, null, 2)}</pre>
-						</div>
-
-						<!-- Extracted fields -->
-						{#if log.status === 'matched' && Object.keys(log.extracted_fields).length > 0}
-							<div>
-								<div class="text-xs font-medium text-[var(--color-muted-foreground)] mb-1">{t('webhookLogs.extractedFields')}</div>
-								<div class="bg-[var(--color-background)] border border-[var(--color-border)] rounded-md p-2 text-xs font-mono">
-									{#each Object.entries(log.extracted_fields) as [key, value]}
-										<div><span class="text-[var(--color-primary)]">{key}</span>: {typeof value === 'object' ? JSON.stringify(value) : String(value)}</div>
-									{/each}
-								</div>
-							</div>
-						{/if}
-
-						<!-- Error message -->
-						{#if log.status === 'error' && log.error_message}
-							<div>
-								<div class="text-xs font-medium text-[var(--color-error-fg)] mb-1">{t('webhookLogs.errorMessage')}</div>
-								<div class="bg-[var(--color-error-bg)] text-[var(--color-error-fg)] rounded-md p-2 text-xs">{log.error_message}</div>
-							</div>
-						{/if}
-					</div>
-				{/if}
-			{/each}
-		</div>
 	{/if}
-</Card>
+</div>
 
 <ConfirmModal
 	open={showClearConfirm}

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

@@ -6,7 +6,9 @@
 	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 { providerTypeItems, webhookAuthModeItems } from '$lib/grid-items';
+
+	const gridItemSources: Record<string, () => any[]> = { webhookAuthModeItems };
 	import { getDescriptor, buildProviderFormDefaults } from '$lib/providers';
 	import Button from '$lib/components/Button.svelte';
 	import ErrorBanner from '$lib/components/ErrorBanner.svelte';
@@ -100,7 +102,9 @@
 					{t(field.label)}
 					{#if field.optional}<span class="text-xs text-[var(--color-muted-foreground)]">({t('providers.optional')})</span>{/if}
 				</label>
-				{#if field.type === 'number'}
+				{#if field.type === 'grid-select' && field.gridItems}
+					<IconGridSelect items={gridItemSources[field.gridItems]()} bind:value={form[field.key]} columns={field.gridColumns ?? 2} compact />
+				{:else if field.type === 'number'}
 					<input id="prv-{field.key}" type="number" bind:value={form[field.key]} min={field.min} max={field.max}
 						class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
 				{:else}

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

@@ -18,6 +18,7 @@
 		external_url: '',
 		telegram_webhook_secret: '',
 		telegram_cache_ttl_hours: '48',
+		supported_locales: 'en,ru',
 	});
 
 	onMount(async () => {
@@ -79,6 +80,21 @@
 			</div>
 		</Card>
 
+		<!-- Locales section -->
+		<Card>
+			<h3 class="text-sm font-semibold mb-4 flex items-center gap-2">
+				<MdiIcon name="mdiTranslate" size={18} />
+				{t('settings.locales')}
+			</h3>
+			<div class="space-y-3">
+				<div>
+					<label class="block text-xs font-medium mb-1">{t('settings.supportedLocales')}<Hint text={t('settings.supportedLocalesHint')} /></label>
+					<input bind:value={settings.supported_locales} placeholder="en,ru,de,fr"
+						class="w-full max-w-md px-3 py-1.5 text-sm border border-[var(--color-border)] rounded-md bg-[var(--color-background)] font-mono" />
+				</div>
+			</div>
+		</Card>
+
 		<Button onclick={save} disabled={saving}>
 			{saving ? t('common.loading') : t('common.save')}
 		</Button>

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

@@ -4,7 +4,7 @@
 	import { api } from '$lib/api';
 	import { t } from '$lib/i18n';
 	import { sanitizePreview } from '$lib/sanitize';
-	import { templateConfigsCache, capabilitiesCache } from '$lib/stores/caches.svelte';
+	import { templateConfigsCache, capabilitiesCache, supportedLocalesCache } from '$lib/stores/caches.svelte';
 	import PageHeader from '$lib/components/PageHeader.svelte';
 	import Card from '$lib/components/Card.svelte';
 	import Loading from '$lib/components/Loading.svelte';
@@ -57,7 +57,7 @@
 	let slotFilter = $state('');
 	let showPreviewFor = $state<Set<string>>(new Set());
 
-	const LOCALES = ['en', 'ru'] as const;
+	let LOCALES = $derived(supportedLocalesCache.items);
 	let activeLocale = $state<string>('en');
 
 	function toggleSlot(key: string) {
@@ -202,6 +202,7 @@
 				templateConfigsCache.fetch(true),
 				api('/template-configs/variables'),
 				capabilitiesCache.fetch(),
+				supportedLocalesCache.fetch(),
 			]);
 		} catch (err: any) { error = err.message || t('common.loadError'); snackError(error); }
 		finally { loaded = true; highlightFromUrl(); }