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/lib/grid-items.ts

@@ -58,6 +58,14 @@ export const memorySourceItems = (): GridItem[] => [
 	{ value: 'native', icon: 'mdiMemory', label: t('trackingConfig.memorySourceNative'), desc: t('gridDesc.memorySourceNative') },
 ];
 
+// --- Webhook auth mode ---
+
+export const webhookAuthModeItems = (): GridItem[] => [
+	{ value: 'none', icon: 'mdiLockOpen', label: t('providers.authNone'), desc: t('gridDesc.authNone') },
+	{ value: 'bearer_token', icon: 'mdiKey', label: t('providers.authBearer'), desc: t('gridDesc.authBearer') },
+	{ value: 'hmac_sha256', icon: 'mdiShieldKey', label: t('providers.authHmac'), desc: t('gridDesc.authHmac') },
+];
+
 // --- Locale ---
 
 export const localeItems = (): GridItem[] => [

frontend/src/lib/i18n/en.json

@@ -133,6 +133,9 @@
 		"plankaWebhookUrlHint": "Set this as the Webhook URL in Planka environment config (relative to your bridge host).",
 		"authMode": "Authentication Mode",
 		"authModeHint": "Choose hmac_sha256, bearer_token, or none",
+		"authNone": "None",
+		"authBearer": "Bearer Token",
+		"authHmac": "HMAC-SHA256",
 		"genericWebhookSecretHint": "Secret for HMAC-SHA256 or Bearer token authentication. Leave empty for no authentication.",
 		"maxStoredPayloads": "Max stored payloads",
 		"maxStoredPayloadsHint": "Number of recent payloads to keep for debugging (0 = disabled, max 100)",
@@ -658,6 +661,9 @@
 		"webhookSecretHint": "Secret token to verify webhook requests from Telegram",
 		"cacheTtl": "Media Cache TTL (hours)",
 		"cacheTtlHint": "How long to cache uploaded Telegram file_ids before re-uploading",
+		"locales": "Template Languages",
+		"supportedLocales": "Supported Locales",
+		"supportedLocalesHint": "Comma-separated locale codes for template editing (e.g. en,ru,de,fr)",
 		"saved": "Settings saved"
 	},
 	"hints": {
@@ -926,6 +932,9 @@
 		"message_ups_overload": "UPS load exceeded capacity"
 	},
 	"gridDesc": {
+		"authNone": "No authentication required",
+		"authBearer": "Verify requests with a Bearer token",
+		"authHmac": "Verify payload signature with HMAC-SHA256",
 		"sortNone": "No sorting applied",
 		"sortDate": "Sort by creation date",
 		"sortRating": "Sort by star rating",

frontend/src/lib/i18n/ru.json

@@ -133,6 +133,9 @@
 		"plankaWebhookUrlHint": "Укажите этот URL в конфигурации Planka (относительно хоста bridge).",
 		"authMode": "Режим аутентификации",
 		"authModeHint": "Выберите hmac_sha256, bearer_token или none",
+		"authNone": "Без аутентификации",
+		"authBearer": "Bearer Token",
+		"authHmac": "HMAC-SHA256",
 		"genericWebhookSecretHint": "Секрет для HMAC-SHA256 или Bearer token аутентификации. Оставьте пустым для режима без аутентификации.",
 		"maxStoredPayloads": "Макс. сохранённых запросов",
 		"maxStoredPayloadsHint": "Количество сохраняемых запросов для отладки (0 = отключено, макс. 100)",
@@ -658,6 +661,9 @@
 		"webhookSecretHint": "Секретный токен для проверки запросов вебхука от Telegram",
 		"cacheTtl": "TTL кэша медиа (часы)",
 		"cacheTtlHint": "Сколько хранить кэш Telegram file_id перед повторной загрузкой",
+		"locales": "Языки шаблонов",
+		"supportedLocales": "Поддерживаемые локали",
+		"supportedLocalesHint": "Коды локалей через запятую для редактирования шаблонов (например en,ru,de,fr)",
 		"saved": "Настройки сохранены"
 	},
 	"hints": {
@@ -926,6 +932,9 @@
 		"message_ups_overload": "ИБП перегружен"
 	},
 	"gridDesc": {
+		"authNone": "Аутентификация не требуется",
+		"authBearer": "Проверка запросов по Bearer-токену",
+		"authHmac": "Проверка подписи через HMAC-SHA256",
 		"sortNone": "Без сортировки",
 		"sortDate": "По дате создания",
 		"sortRating": "По рейтингу",

frontend/src/lib/providers/gitea.ts

@@ -56,5 +56,5 @@ export const giteaDescriptor: ProviderDescriptor = {
 		desc: () => '',
 	},
 
-	webhookUrlPattern: '/api/webhooks/gitea/{id}',
+	webhookUrlPattern: '/api/webhooks/gitea/{token}',
 };

frontend/src/lib/providers/planka.ts

@@ -62,5 +62,5 @@ export const plankaDescriptor: ProviderDescriptor = {
 		desc: () => '',
 	},
 
-	webhookUrlPattern: '/api/webhooks/planka/{id}',
+	webhookUrlPattern: '/api/webhooks/planka/{token}',
 };

frontend/src/lib/providers/types.ts

@@ -20,7 +20,10 @@ export interface ConfigField {
 	configKey?: string;
 	/** i18n key for the field label. */
 	label: string;
-	type: 'text' | 'password' | 'number';
+	type: 'text' | 'password' | 'number' | 'grid-select';
+	/** Grid-select item source function name from grid-items.ts. */
+	gridItems?: string;
+	gridColumns?: number;
 	placeholder?: string;
 	/**
 	 * - `true`  → always required

frontend/src/lib/providers/webhook.ts

@@ -10,10 +10,10 @@ export const webhookDescriptor: ProviderDescriptor = {
 		{
 			key: 'auth_mode', configKey: 'auth_mode',
 			label: 'providers.authMode',
-			type: 'text',
-			placeholder: 'hmac_sha256 | bearer_token | none',
+			type: 'grid-select',
+			gridItems: 'webhookAuthModeItems',
+			gridColumns: 3,
 			defaultValue: 'none',
-			hint: 'providers.authModeHint',
 		},
 		{
 			key: 'webhook_secret', configKey: 'webhook_secret',
@@ -57,6 +57,6 @@ export const webhookDescriptor: ProviderDescriptor = {
 
 	collectionMeta: null,
 	webhookBased: true,
-	webhookUrlPattern: '/api/webhooks/webhook/{id}',
+	webhookUrlPattern: '/api/webhooks/webhook/{token}',
 	payloadHistory: true,
 };

frontend/src/lib/stores/caches.svelte.ts

@@ -74,6 +74,23 @@ export const capabilitiesCache = (() => {
 	};
 })();
 
+/** Supported template locales — fetched from app settings. */
+export const supportedLocalesCache = (() => {
+	let data = $state<string[]>(['en', 'ru']);
+	let fetchedAt = $state(0);
+	const TTL = 300_000; // 5 minutes
+	return {
+		get items() { return data; },
+		async fetch(force = false): Promise<string[]> {
+			if (!force && fetchedAt > 0 && Date.now() - fetchedAt < TTL) return data;
+			const { api } = await import('$lib/api');
+			data = await api('/settings/locales');
+			fetchedAt = Date.now();
+			return data;
+		},
+	};
+})();
+
 /**
  * All caches keyed by entity type — for search palette and crosslink resolution.
  */

frontend/src/lib/types.ts

@@ -6,6 +6,7 @@ export interface ServiceProvider {
 	name: string;
 	icon: string;
 	config: Record<string, any>;
+	webhook_token: string;
 	created_at: string;
 }
 

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(); }