feat: Discord/Slack/ntfy/Matrix targets, command templates, delete protection, email/matrix bots

- Discord, Slack, ntfy, Matrix notification target types with clients and dispatch - MatrixBot model + API + frontend in Bots tab - Command template system fully wired into all handler commands - Default command templates seeded (EN/RU, 14 slots each) - Command template editor with variables reference including child fields - Delete protection on all 10 entity types (409 with consumer details) - Provider type selector on template config forms - Target type selector as dropdown with all 7 types - Response template selector on command config form - CLAUDE.md: mandatory server restart rule, child properties rule
2026-03-21 20:36:12 +03:00
parent 846d480d38
commit 3e3a6f0777
64 changed files with 1861 additions and 180 deletions
@@ -178,7 +178,7 @@
 	},
 	"targets": {
 		"title": "Targets",
-		"description": "Notification destinations (Telegram, webhooks)",
+		"description": "Notification destinations (Telegram, Discord, Slack, Email, ntfy, Matrix, Webhooks)",
 		"addTarget": "Add Target",
 		"cancel": "Cancel",
 		"type": "Type",
@@ -203,7 +203,16 @@
 		"disableUrlPreview": "Disable link previews",
 		"sendLargeAsDocuments": "Send large photos as documents",
 		"chatAction": "Chat action",
-		"chatActionNone": "None (no action)"
+		"chatActionNone": "None (no action)",
+		"overrideUsername": "Override bot username",
+		"ntfyServer": "ntfy Server URL",
+		"ntfyTopic": "Topic",
+		"ntfyToken": "Auth Token",
+		"ntfyTokenPlaceholder": "Optional (for protected topics)",
+		"selectEmailBot": "Select Email Bot",
+		"selectMatrixBot": "Select Matrix Bot",
+		"recipientEmail": "Recipient Email",
+		"matrixRoomId": "Room ID"
 	},
 	"users": {
 		"title": "Users",
@@ -345,6 +354,7 @@
 	"templateConfig": {
 		"title": "Template Configs",
 		"description": "Define how notification messages are formatted",
+		"providerType": "Service Provider Type",
 		"newConfig": "New Config",
 		"name": "Name",
 		"namePlaceholder": "Default EN",
@@ -479,6 +489,21 @@
 		"botLocale": "Language for command descriptions in Telegram's menu and bot response messages.",
 		"rateLimits": "Cooldown in seconds between uses of each command category per chat. 0 = no limit."
 	},
+	"matrixBot": {
+		"title": "Matrix Bots",
+		"description": "Matrix homeserver connections for room notifications",
+		"addBot": "Add Matrix Bot",
+		"name": "Name",
+		"namePlaceholder": "Home Server Bot",
+		"homeserverUrl": "Homeserver URL",
+		"accessToken": "Access Token",
+		"tokenPlaceholder": "syt_...",
+		"tokenUnchanged": "(unchanged)",
+		"displayName": "Display Name",
+		"testConnection": "Test connection",
+		"noBots": "No Matrix bots yet.",
+		"confirmDelete": "Delete this Matrix bot?"
+	},
 	"emailBot": {
 		"title": "Email Bots",
 		"description": "SMTP email senders for notifications",
@@ -527,7 +552,9 @@
 		"defaultCooldown": "Default cooldown (s)",
 		"noConfigs": "No command configs yet.",
 		"confirmDelete": "Delete this command config?",
-		"commands": "commands"
+		"commands": "commands",
+		"responseTemplate": "Response Template",
+		"noTemplate": "Default (hardcoded)"
 	},
 	"commandTracker": {
 		"title": "Command Trackers",
@@ -595,7 +622,11 @@
 		"emailBotCreated": "Email bot created",
 		"emailBotUpdated": "Email bot updated",
 		"emailBotDeleted": "Email bot deleted",
-		"emailBotTestSent": "Test email sent successfully"
+		"emailBotTestSent": "Test email sent successfully",
+		"matrixBotCreated": "Matrix bot created",
+		"matrixBotUpdated": "Matrix bot updated",
+		"matrixBotDeleted": "Matrix bot deleted",
+		"matrixBotTestOk": "Matrix connection verified"
 	},
 	"common": {
 		"loading": "Loading...",
@@ -178,7 +178,7 @@
 	},
 	"targets": {
 		"title": "Получатели",
-		"description": "Адреса уведомлений (Telegram, вебхуки)",
+		"description": "Адреса уведомлений (Telegram, Discord, Slack, Email, ntfy, Matrix, вебхуки)",
 		"addTarget": "Добавить получателя",
 		"cancel": "Отмена",
 		"type": "Тип",
@@ -203,7 +203,16 @@
 		"disableUrlPreview": "Отключить превью ссылок",
 		"sendLargeAsDocuments": "Отправлять большие фото как документы",
 		"chatAction": "Действие в чате",
-		"chatActionNone": "Нет (без действия)"
+		"chatActionNone": "Нет (без действия)",
+		"overrideUsername": "Переопределить имя бота",
+		"ntfyServer": "URL сервера ntfy",
+		"ntfyTopic": "Тема",
+		"ntfyToken": "Токен авторизации",
+		"ntfyTokenPlaceholder": "Необязательно (для защищённых тем)",
+		"selectEmailBot": "Выберите Email бот",
+		"selectMatrixBot": "Выберите Matrix бот",
+		"recipientEmail": "Email получателя",
+		"matrixRoomId": "ID комнаты"
 	},
 	"users": {
 		"title": "Пользователи",
@@ -345,6 +354,7 @@
 	"templateConfig": {
 		"title": "Конфигурации шаблонов",
 		"description": "Определите формат уведомлений",
+		"providerType": "Тип сервис-провайдера",
 		"newConfig": "Новая конфигурация",
 		"name": "Название",
 		"namePlaceholder": "По умолчанию RU",
@@ -479,6 +489,21 @@
 		"botLocale": "Язык описаний команд в меню Telegram и ответов бота.",
 		"rateLimits": "Кулдаун в секундах между использованиями команд в каждом чате. 0 = без ограничений."
 	},
+	"matrixBot": {
+		"title": "Matrix боты",
+		"description": "Подключения к Matrix серверам для уведомлений в комнаты",
+		"addBot": "Добавить Matrix бот",
+		"name": "Название",
+		"namePlaceholder": "Бот для дома",
+		"homeserverUrl": "URL сервера",
+		"accessToken": "Токен доступа",
+		"tokenPlaceholder": "syt_...",
+		"tokenUnchanged": "(без изменений)",
+		"displayName": "Отображаемое имя",
+		"testConnection": "Проверить подключение",
+		"noBots": "Matrix ботов пока нет.",
+		"confirmDelete": "Удалить этот Matrix бот?"
+	},
 	"emailBot": {
 		"title": "Email боты",
 		"description": "SMTP отправители для уведомлений по email",
@@ -527,7 +552,9 @@
 		"defaultCooldown": "Кулдаун по умолчанию (с)",
 		"noConfigs": "Конфигураций команд пока нет.",
 		"confirmDelete": "Удалить эту конфигурацию команд?",
-		"commands": "команд"
+		"commands": "команд",
+		"responseTemplate": "Шаблон ответов",
+		"noTemplate": "По умолчанию (встроенный)"
 	},
 	"commandTracker": {
 		"title": "Трекеры команд",
@@ -595,7 +622,11 @@
 		"emailBotCreated": "Email бот создан",
 		"emailBotUpdated": "Email бот обновлён",
 		"emailBotDeleted": "Email бот удалён",
-		"emailBotTestSent": "Тестовое письмо отправлено"
+		"emailBotTestSent": "Тестовое письмо отправлено",
+		"matrixBotCreated": "Matrix бот создан",
+		"matrixBotUpdated": "Matrix бот обновлён",
+		"matrixBotDeleted": "Matrix бот удалён",
+		"matrixBotTestOk": "Подключение к Matrix проверено"
 	},
 	"common": {
 		"loading": "Загрузка...",
@@ -13,6 +13,7 @@
 	import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';

 	let configs = $state<any[]>([]);
+	let cmdTemplateConfigs = $state<any[]>([]);
 	let loaded = $state(false);
 	let showForm = $state(false);
 	let editing = $state<number | null>(null);
@@ -46,13 +47,17 @@
 		response_mode: 'media',
 		default_count: 5,
 		rate_limits: { search: 30, default: 10 },
+		command_template_config_id: null as number | null,
 	});
 	let form = $state(defaultForm());

 	onMount(load);
 	async function load() {
 		try {
-			configs = await api('/command-configs');
+			[configs, cmdTemplateConfigs] = await Promise.all([
+				api('/command-configs'),
+				api('/command-template-configs'),
+			]);
 		} catch (err: any) { error = err.message || t('common.loadError'); snackError(error); }
 		finally { loaded = true; }
 	}
@@ -68,6 +73,7 @@
 			response_mode: cfg.response_mode || 'media',
 			default_count: cfg.default_count || 5,
 			rate_limits: { search: cfg.rate_limits?.search || 30, default: cfg.rate_limits?.default || 10 },
+			command_template_config_id: cfg.command_template_config_id || null,
 		};
 		editing = cfg.id;
 		showForm = true;
@@ -157,6 +163,17 @@
 				</div>
 			</div>

+			<div>
+				<label for="cc-template" class="block text-sm font-medium mb-1">{t('commandConfig.responseTemplate')}</label>
+				<select id="cc-template" bind:value={form.command_template_config_id}
+					class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]">
+					<option value={null}>— {t('commandConfig.noTemplate')} —</option>
+					{#each cmdTemplateConfigs.filter((c: any) => c.provider_type === form.provider_type) as tpl}
+						<option value={tpl.id}>{tpl.name}{tpl.user_id === 0 ? ' (System)' : ''}</option>
+					{/each}
+				</select>
+			</div>
+
 			<div class="grid grid-cols-2 sm:grid-cols-4 gap-3">
 				<div>
 					<label class="block text-xs mb-1">{t('commandConfig.locale')}</label>
@@ -42,9 +42,15 @@
 	let slotErrorLines = $state<Record<string, number | null>>({});
 	let slotErrorTypes = $state<Record<string, string>>({});
 	let validateTimers: Record<string, ReturnType<typeof setTimeout>> = {};
+	let varsRef = $state<Record<string, any>>({});
+	let showVarsFor = $state<string | null>(null);

-	// Load command slot definitions from capabilities
-	let commandSlots = $state<SlotDef[]>([]);
+	// Provider capabilities
+	let allCapabilities = $state<Record<string, any>>({});
+	let providerTypes = $derived(Object.keys(allCapabilities));
+	let commandSlots = $derived<SlotDef[]>(
+		allCapabilities[form.provider_type]?.command_slots || []
+	);

 	const defaultForm = () => ({
 		provider_type: 'immich',
@@ -59,12 +65,14 @@

 	async function load() {
 		try {
-			const [cfgs, caps] = await Promise.all([
+			const [cfgs, caps, vars] = await Promise.all([
 				api('/command-template-configs'),
-				api('/providers/capabilities/immich'),
+				api('/providers/capabilities'),
+				api('/command-template-configs/variables'),
 			]);
 			configs = cfgs;
-			commandSlots = caps.command_slots || [];
+			allCapabilities = caps;
+			varsRef = vars;
 		} catch (err: any) {
 			error = err.message || t('common.loadError');
 			snackError(error);
@@ -218,6 +226,23 @@
 				class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
 		</div>

+		{#if !editing}
+		<div>
+			<label for="ct-provider" class="block text-sm font-medium mb-1">{t('templateConfig.providerType')}</label>
+			<select id="ct-provider" bind:value={form.provider_type}
+				class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]">
+				{#each providerTypes as pt}
+					<option value={pt}>{allCapabilities[pt]?.display_name || pt} ({pt})</option>
+				{/each}
+			</select>
+		</div>
+		{:else}
+		<div>
+			<span class="block text-sm font-medium mb-1">{t('templateConfig.providerType')}</span>
+			<span class="text-sm text-[var(--color-muted-foreground)]">{allCapabilities[form.provider_type]?.display_name || form.provider_type}</span>
+		</div>
+		{/if}
+
 		<fieldset class="border border-[var(--color-border)] rounded-md p-3">
 			<legend class="text-sm font-medium px-1">{t('cmdTemplateConfig.commandResponses')}</legend>
 			<p class="text-xs text-[var(--color-muted-foreground)] mb-3">{t('cmdTemplateConfig.commandResponsesHint')}</p>
@@ -225,8 +250,11 @@
 				{#each commandSlots as slot}
 					<div>
 						<div class="flex items-center justify-between mb-1">
-							<label class="text-xs text-[var(--color-muted-foreground)]">/{slot.name}</label>
-							<span class="text-xs text-[var(--color-muted-foreground)]">{slot.description}</span>
+							<label class="text-xs text-[var(--color-muted-foreground)]">/{slot.name} — {slot.description}</label>
+							{#if varsRef[slot.name]}
+								<button type="button" onclick={() => showVarsFor = slot.name}
+									class="text-xs text-[var(--color-muted-foreground)] hover:underline">{t('templateConfig.variables')}</button>
+							{/if}
 						</div>
 						<JinjaEditor
 							value={form.slots[slot.name] || ''}
@@ -272,6 +300,7 @@
 						<div class="flex items-center gap-2">
 							<span style="color: var(--color-primary);"><MdiIcon name={config.icon || 'mdiConsoleLine'} size={20} /></span>
 							<p class="font-medium">{config.name}</p>
+							<span class="text-xs px-1.5 py-0.5 rounded bg-[var(--color-muted)] text-[var(--color-muted-foreground)]">{config.provider_type}</span>
 							{#if config.user_id === 0}
 								<span class="text-xs px-1.5 py-0.5 rounded bg-[var(--color-muted)] text-[var(--color-muted-foreground)]">System</span>
 							{/if}
@@ -296,3 +325,37 @@

 <ConfirmModal open={confirmDelete !== null} message={t('cmdTemplateConfig.confirmDelete')}
 	onconfirm={() => confirmDelete?.onconfirm()} oncancel={() => confirmDelete = null} />
+
+<!-- Variables reference modal -->
+<Modal open={showVarsFor !== null} title="{t('templateConfig.variables')}: /{showVarsFor || ''}" onclose={() => showVarsFor = null}>
+	{#if showVarsFor && varsRef[showVarsFor]}
+		<p class="text-sm text-[var(--color-muted-foreground)] mb-3">{varsRef[showVarsFor].description}</p>
+		<div class="space-y-1">
+			<p class="text-xs font-medium mb-1">{t('templateConfig.variables')}:</p>
+			{#each Object.entries(varsRef[showVarsFor].variables || {}) as [name, desc]}
+				<div class="flex items-start gap-2 text-sm">
+					<code class="text-xs bg-[var(--color-muted)] px-1 py-0.5 rounded font-mono whitespace-nowrap">{'{{ ' + name + ' }}'}</code>
+					<span class="text-xs text-[var(--color-muted-foreground)]">{desc}</span>
+				</div>
+			{/each}
+		</div>
+		{#each [
+			['asset_fields', 'asset', 'Asset fields'],
+			['album_fields', 'album', 'Album fields'],
+			['command_fields', 'cmd', 'Command fields'],
+			['event_fields', 'event', 'Event fields'],
+		] as [fieldKey, prefix, title]}
+			{#if varsRef[showVarsFor][fieldKey]}
+				<div class="mt-3 pt-3 border-t border-[var(--color-border)]">
+					<p class="text-xs font-medium mb-1">{title} <span class="font-normal text-[var(--color-muted-foreground)]">(use {prefix}.field)</span>:</p>
+					{#each Object.entries(varsRef[showVarsFor][fieldKey]) as [name, desc]}
+						<div class="flex items-start gap-2 text-sm">
+							<code class="text-xs bg-[var(--color-muted)] px-1 py-0.5 rounded font-mono whitespace-nowrap">{'{{ ' + prefix + '.' + name + ' }}'}</code>
+							<span class="text-xs text-[var(--color-muted-foreground)]">{desc}</span>
+						</div>
+					{/each}
+				</div>
+			{/if}
+		{/each}
+	{/if}
+</Modal>
@@ -13,17 +13,35 @@
 	import Hint from '$lib/components/Hint.svelte';
 	import IconButton from '$lib/components/IconButton.svelte';
 	import { snackSuccess, snackError } from '$lib/stores/snackbar.svelte';
-	import type { NotificationTarget, TelegramBot, TelegramChat } from '$lib/types';
+	import type { NotificationTarget, TelegramBot, TelegramChat, EmailBot, MatrixBot } from '$lib/types';
+
+	const ALL_TYPES = ['telegram', 'webhook', 'email', 'discord', 'slack', 'ntfy', 'matrix'] as const;
+	type TargetType = typeof ALL_TYPES[number];
+	const TYPE_ICONS: Record<string, string> = {
+		telegram: 'mdiSend', webhook: 'mdiWebhook', email: 'mdiEmailOutline',
+		discord: 'mdiChat', slack: 'mdiSlack', ntfy: 'mdiBell', matrix: 'mdiMatrix',
+	};

 	let targets = $state<NotificationTarget[]>([]);
 	let bots = $state<TelegramBot[]>([]);
+	let emailBots = $state<EmailBot[]>([]);
+	let matrixBots = $state<MatrixBot[]>([]);
 	let botChats = $state<Record<number, TelegramChat[]>>({});
 	let showForm = $state(false);
 	let editing = $state<number | null>(null);
-	let formType = $state<'telegram' | 'webhook'>('telegram');
+	let formType = $state<TargetType>('telegram');
 	const defaultForm = () => ({ name: '', icon: '', bot_id: 0, chat_id: '', bot_token: '', url: '', headers: '',
 		max_media_to_send: 50, max_media_per_group: 10, media_delay: 500, max_asset_size: 50,
-		disable_url_preview: false, send_large_photos_as_documents: false, ai_captions: false, chat_action: 'typing' });
+		disable_url_preview: false, send_large_photos_as_documents: false, ai_captions: false, chat_action: 'typing',
+		// Discord/Slack
+		webhook_url: '', username: '',
+		// ntfy
+		server_url: 'https://ntfy.sh', topic: '', auth_token: '', priority: 3,
+		// Matrix
+		matrix_bot_id: 0, room_id: '',
+		// Email
+		email_bot_id: 0, email: '',
+	});
 	let form = $state(defaultForm());
 	let error = $state('');
 	let headersError = $state('');
@@ -36,7 +54,9 @@
 	onMount(load);
 	async function load() {
 		try {
-			[targets, bots] = await Promise.all([api('/targets'), api('/telegram-bots')]);
+			[targets, bots, emailBots, matrixBots] = await Promise.all([
+				api('/targets'), api('/telegram-bots'), api('/email-bots'), api('/matrix-bots'),
+			]);
 			loadError = '';
 		} catch (err: any) { loadError = err.message || t('common.loadError'); snackError(loadError); } finally { loaded = true; }
 	}
@@ -51,11 +71,24 @@
 		formType = tgt.type;
 		const c = tgt.config || {};
 		form = {
-			name: tgt.name, icon: tgt.icon || '', bot_id: c.bot_id || 0, bot_token: '', chat_id: c.chat_id || '', url: c.url || '', headers: '',
+			name: tgt.name, icon: tgt.icon || '',
+			// telegram
+			bot_id: c.bot_id || 0, bot_token: '', chat_id: c.chat_id || '',
 			max_media_to_send: c.max_media_to_send ?? 50, max_media_per_group: c.max_media_per_group ?? 10,
 			media_delay: c.media_delay ?? 500, max_asset_size: c.max_asset_size ?? 50,
 			disable_url_preview: c.disable_url_preview ?? false, send_large_photos_as_documents: c.send_large_photos_as_documents ?? false,
 			ai_captions: c.ai_captions ?? false, chat_action: c.chat_action ?? 'typing',
+			// webhook
+			url: c.url || '', headers: '',
+			// discord/slack
+			webhook_url: c.webhook_url || '', username: c.username || '',
+			// ntfy
+			server_url: c.server_url || 'https://ntfy.sh', topic: c.topic || '',
+			auth_token: c.auth_token || '', priority: c.priority ?? 3,
+			// email
+			email_bot_id: c.email_bot_id || 0, email: c.email || '',
+			// matrix
+			matrix_bot_id: c.matrix_bot_id || 0, room_id: c.room_id || '',
 		};
 		editing = tgt.id; showTelegramSettings = false; showForm = true;
 		if (form.bot_id) await loadBotChats();
@@ -66,24 +99,36 @@
 		if (submitting) return;
 		submitting = true;
 		try {
-			let botToken = form.bot_token;
-			if (formType === 'telegram' && form.bot_id && !botToken) {
-				const tokenRes = await api(`/telegram-bots/${form.bot_id}/token`);
-				botToken = tokenRes.token;
-			}
-			let parsedHeaders = {};
-			if (formType === 'webhook' && form.headers) {
-				try { parsedHeaders = JSON.parse(form.headers); }
-				catch { headersError = t('common.headersInvalid'); return; }
-			}
-			const config = formType === 'telegram'
-				? { ...(botToken ? { bot_token: botToken } : {}), chat_id: form.chat_id,
+			let config: Record<string, any> = {};
+
+			if (formType === 'telegram') {
+				let botToken = form.bot_token;
+				if (form.bot_id && !botToken) {
+					const tokenRes = await api(`/telegram-bots/${form.bot_id}/token`);
+					botToken = tokenRes.token;
+				}
+				config = { ...(botToken ? { bot_token: botToken } : {}), chat_id: form.chat_id,
 					bot_id: form.bot_id || undefined,
 					max_media_to_send: form.max_media_to_send, max_media_per_group: form.max_media_per_group,
 					media_delay: form.media_delay, max_asset_size: form.max_asset_size,
 					disable_url_preview: form.disable_url_preview, send_large_photos_as_documents: form.send_large_photos_as_documents,
-					ai_captions: form.ai_captions, chat_action: form.chat_action || undefined }
-				: { url: form.url, headers: parsedHeaders, ai_captions: form.ai_captions };
+					ai_captions: form.ai_captions, chat_action: form.chat_action || undefined };
+			} else if (formType === 'webhook') {
+				let parsedHeaders = {};
+				if (form.headers) {
+					try { parsedHeaders = JSON.parse(form.headers); }
+					catch { headersError = t('common.headersInvalid'); return; }
+				}
+				config = { url: form.url, headers: parsedHeaders, ai_captions: form.ai_captions };
+			} else if (formType === 'discord' || formType === 'slack') {
+				config = { webhook_url: form.webhook_url, username: form.username || undefined };
+			} else if (formType === 'ntfy') {
+				config = { server_url: form.server_url, topic: form.topic, auth_token: form.auth_token || undefined };
+			} else if (formType === 'email') {
+				config = { email_bot_id: form.email_bot_id, email: form.email };
+			} else if (formType === 'matrix') {
+				config = { matrix_bot_id: form.matrix_bot_id, room_id: form.room_id };
+			}
 			if (editing) {
 				await api(`/targets/${editing}`, { method: 'PUT', body: JSON.stringify({ name: form.name, icon: form.icon, config }) });
 			} else {
@@ -126,11 +171,13 @@
 		{#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}
 		<form onsubmit={save} class="space-y-4">
 			<div>
-				<span class="block text-sm font-medium mb-1">{t('targets.type')}</span>
-				<div class="flex gap-4">
-					<label class="flex items-center gap-1 text-sm"><input type="radio" bind:group={formType} value="telegram" /> Telegram</label>
-					<label class="flex items-center gap-1 text-sm"><input type="radio" bind:group={formType} value="webhook" /> Webhook</label>
-				</div>
+				<label for="tgt-type" class="block text-sm font-medium mb-1">{t('targets.type')}</label>
+				<select id="tgt-type" bind:value={formType}
+					class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]">
+					{#each ALL_TYPES as tt}
+						<option value={tt}>{tt.charAt(0).toUpperCase() + tt.slice(1)}</option>
+					{/each}
+				</select>
 			</div>
 			<div>
 				<label for="tgt-name" class="block text-sm font-medium mb-1">{t('targets.name')}</label>
@@ -216,7 +263,7 @@
 					</div>
 					{/if}
 				</div>
-			{:else}
+			{:else if formType === 'webhook'}
 				<div>
 					<label for="tgt-url" class="block text-sm font-medium mb-1">{t('targets.webhookUrl')}</label>
 					<input id="tgt-url" bind:value={form.url} required placeholder="https://..." class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
@@ -226,9 +273,72 @@
 					<input id="tgt-headers" bind:value={form.headers} placeholder={'{"Authorization": "Bearer ..."}'} class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" style={headersError ? 'border-color: var(--color-error-fg)' : ''} />
 					{#if headersError}<p class="text-xs text-[var(--color-error-fg)] mt-1">{headersError}</p>{/if}
 				</div>
+			{:else if formType === 'discord' || formType === 'slack'}
+				<div>
+					<label for="tgt-wh" class="block text-sm font-medium mb-1">{formType === 'discord' ? 'Discord' : 'Slack'} Webhook URL</label>
+					<input id="tgt-wh" bind:value={form.webhook_url} required placeholder={formType === 'discord' ? 'https://discord.com/api/webhooks/...' : 'https://hooks.slack.com/services/...'}
+						class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
+				</div>
+				<div>
+					<label for="tgt-user" class="block text-sm font-medium mb-1">{t('targets.overrideUsername')}</label>
+					<input id="tgt-user" bind:value={form.username} placeholder="Notify Bridge"
+						class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
+				</div>
+			{:else if formType === 'ntfy'}
+				<div>
+					<label for="tgt-ntfy-server" class="block text-sm font-medium mb-1">{t('targets.ntfyServer')}</label>
+					<input id="tgt-ntfy-server" bind:value={form.server_url} required placeholder="https://ntfy.sh"
+						class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
+				</div>
+				<div>
+					<label for="tgt-ntfy-topic" class="block text-sm font-medium mb-1">{t('targets.ntfyTopic')}</label>
+					<input id="tgt-ntfy-topic" bind:value={form.topic} required placeholder="my-notifications"
+						class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
+				</div>
+				<div>
+					<label for="tgt-ntfy-token" class="block text-sm font-medium mb-1">{t('targets.ntfyToken')}</label>
+					<input id="tgt-ntfy-token" bind:value={form.auth_token} placeholder={t('targets.ntfyTokenPlaceholder')}
+						class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
+				</div>
+			{:else if formType === 'email'}
+				<div>
+					<label for="tgt-emailbot" class="block text-sm font-medium mb-1">{t('targets.selectEmailBot')}</label>
+					<select id="tgt-emailbot" bind:value={form.email_bot_id} required
+						class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]">
+						<option value={0} disabled>— {t('targets.selectEmailBot')} —</option>
+						{#each emailBots as bot}<option value={bot.id}>{bot.name} ({bot.email})</option>{/each}
+					</select>
+					{#if emailBots.length === 0}
+						<p class="text-xs text-[var(--color-muted-foreground)] mt-1">{t('emailBot.noBots')} <a href="/telegram-bots" class="underline">→</a></p>
+					{/if}
+				</div>
+				<div>
+					<label for="tgt-email" class="block text-sm font-medium mb-1">{t('targets.recipientEmail')}</label>
+					<input id="tgt-email" bind:value={form.email} required type="email" placeholder="recipient@example.com"
+						class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
+				</div>
+			{:else if formType === 'matrix'}
+				<div>
+					<label for="tgt-mxbot" class="block text-sm font-medium mb-1">{t('targets.selectMatrixBot')}</label>
+					<select id="tgt-mxbot" bind:value={form.matrix_bot_id} required
+						class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]">
+						<option value={0} disabled>— {t('targets.selectMatrixBot')} —</option>
+						{#each matrixBots as bot}<option value={bot.id}>{bot.name} ({bot.homeserver_url})</option>{/each}
+					</select>
+					{#if matrixBots.length === 0}
+						<p class="text-xs text-[var(--color-muted-foreground)] mt-1">{t('matrixBot.noBots')} <a href="/telegram-bots" class="underline">→</a></p>
+					{/if}
+				</div>
+				<div>
+					<label for="tgt-room" class="block text-sm font-medium mb-1">{t('targets.matrixRoomId')}</label>
+					<input id="tgt-room" bind:value={form.room_id} required placeholder="!abc123:matrix.org"
+						class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)] font-mono" />
+				</div>
 			{/if}

-			<label class="flex items-center gap-2 text-sm"><input type="checkbox" bind:checked={form.ai_captions} /> {t('targets.aiCaptions')}<Hint text={t('hints.aiCaptions')} /></label>
+			{#if formType === 'telegram'}
+				<label class="flex items-center gap-2 text-sm"><input type="checkbox" bind:checked={form.ai_captions} /> {t('targets.aiCaptions')}<Hint text={t('hints.aiCaptions')} /></label>
+			{/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">{submitting ? t('common.loading') : (editing ? t('common.save') : t('targets.create'))}</button>
 		</form>
@@ -247,9 +357,10 @@
 				<div class="flex items-center justify-between">
 					<div>
 						<div class="flex items-center gap-2">
-							<span style="color: var(--color-primary);"><MdiIcon name={target.icon || (target.type === 'telegram' ? 'mdiSend' : 'mdiWebhook')} size={20} /></span>
+							<span style="color: var(--color-primary);"><MdiIcon name={target.icon || TYPE_ICONS[target.type] || 'mdiTarget'} size={20} /></span>
 							<p class="font-medium">{target.name}</p>
 							<span class="text-xs px-1.5 py-0.5 rounded bg-[var(--color-muted)] text-[var(--color-muted-foreground)]">{target.type}</span>
+							{#if target.receiver_count}<span class="text-xs px-1.5 py-0.5 rounded bg-[var(--color-muted)] text-[var(--color-muted-foreground)]">{target.receiver_count} receiver(s)</span>{/if}
 						</div>
 						<p class="text-sm text-[var(--color-muted-foreground)]">
 							{#if target.type === 'telegram'}
@@ -257,8 +368,16 @@
 								{#if target.config?.chat_action}
 									<span class="text-xs px-1.5 py-0.5 ml-1 rounded bg-[var(--color-muted)] text-[var(--color-muted-foreground)]">{target.config.chat_action}</span>
 								{/if}
-							{:else}
+							{:else if target.type === 'webhook'}
 								{target.config?.url || ''}
+							{:else if target.type === 'discord' || target.type === 'slack'}
+								{target.config?.webhook_url ? target.config.webhook_url.substring(0, 50) + '...' : ''}
+							{:else if target.type === 'ntfy'}
+								{target.config?.server_url || 'ntfy.sh'} / {target.config?.topic || ''}
+							{:else if target.type === 'email'}
+								{target.config?.email || ''}
+							{:else if target.type === 'matrix'}
+								{target.config?.room_id || ''}
 							{/if}
 						</p>
 					</div>
@@ -12,10 +12,11 @@
 	import ConfirmModal from '$lib/components/ConfirmModal.svelte';
 	import IconButton from '$lib/components/IconButton.svelte';
 	import { snackSuccess, snackError, snackInfo } from '$lib/stores/snackbar.svelte';
-	import type { TelegramBot, TelegramChat, EmailBot } from '$lib/types';
+	import type { TelegramBot, TelegramChat, EmailBot, MatrixBot } from '$lib/types';

 	let bots = $state<TelegramBot[]>([]);
 	let emailBots = $state<EmailBot[]>([]);
+	let matrixBots = $state<MatrixBot[]>([]);
 	let loaded = $state(false);
 	let showForm = $state(false);
 	let editing = $state<number | null>(null);
@@ -38,10 +39,11 @@
 	onMount(load);
 	async function load() {
 		try {
-			[bots, settings, emailBots] = await Promise.all([
+			[bots, settings, emailBots, matrixBots] = await Promise.all([
 				api('/telegram-bots'),
 				api('/settings'),
 				api('/email-bots'),
+				api('/matrix-bots'),
 			]);
 		} catch (err: any) { error = err.message || t('common.loadError'); snackError(error); }
 		finally { loaded = true; }
@@ -278,6 +280,65 @@
 		} catch (err: any) { snackError(err.message); }
 		emailTesting = { ...emailTesting, [botId]: false };
 	}
+
+	// --- Matrix Bot state ---
+	let showMatrixForm = $state(false);
+	let editingMatrix = $state<number | null>(null);
+	let matrixSubmitting = $state(false);
+	let matrixTesting = $state<Record<number, boolean>>({});
+	let confirmDeleteMatrix = $state<any>(null);
+	const defaultMatrixForm = () => ({
+		name: '', icon: '', homeserver_url: '', access_token: '', display_name: '',
+	});
+	let matrixForm = $state(defaultMatrixForm());
+
+	function openNewMatrix() { matrixForm = defaultMatrixForm(); editingMatrix = null; showMatrixForm = true; }
+	function editMatrixBot(bot: MatrixBot) {
+		matrixForm = {
+			name: bot.name, icon: bot.icon || '',
+			homeserver_url: bot.homeserver_url, access_token: '',
+			display_name: bot.display_name || '',
+		};
+		editingMatrix = bot.id; showMatrixForm = true;
+	}
+
+	async function saveMatrixBot(e: SubmitEvent) {
+		e.preventDefault(); error = ''; matrixSubmitting = true;
+		try {
+			const body = { ...matrixForm };
+			if (editingMatrix && !body.access_token) delete (body as any).access_token;
+			if (editingMatrix) {
+				await api(`/matrix-bots/${editingMatrix}`, { method: 'PUT', body: JSON.stringify(body) });
+				snackSuccess(t('snack.matrixBotUpdated'));
+			} else {
+				await api('/matrix-bots', { method: 'POST', body: JSON.stringify(body) });
+				snackSuccess(t('snack.matrixBotCreated'));
+			}
+			matrixForm = defaultMatrixForm(); showMatrixForm = false; editingMatrix = null; await load();
+		} catch (err: any) { error = err.message; snackError(err.message); }
+		finally { matrixSubmitting = false; }
+	}
+
+	function removeMatrix(id: number) {
+		confirmDeleteMatrix = {
+			id,
+			onconfirm: async () => {
+				try { await api(`/matrix-bots/${id}`, { method: 'DELETE' }); await load(); snackSuccess(t('snack.matrixBotDeleted')); }
+				catch (err: any) { error = err.message; snackError(err.message); }
+				finally { confirmDeleteMatrix = null; }
+			}
+		};
+	}
+
+	async function testMatrixBot(botId: number) {
+		matrixTesting = { ...matrixTesting, [botId]: true };
+		try {
+			const res = await api(`/matrix-bots/${botId}/test`, { method: 'POST' });
+			if (res.success) snackSuccess(t('snack.matrixBotTestOk'));
+			else snackError(res.error || 'Failed');
+		} catch (err: any) { snackError(err.message); }
+		matrixTesting = { ...matrixTesting, [botId]: false };
+	}
 </script>

 <PageHeader title={t('telegramBot.title')} description={t('telegramBot.description')}>
@@ -601,3 +662,85 @@

 <ConfirmModal open={confirmDeleteEmail !== null} message={t('emailBot.confirmDelete')}
 	onconfirm={() => confirmDeleteEmail?.onconfirm()} oncancel={() => confirmDeleteEmail = null} />
+
+<!-- ======= Matrix Bots Section ======= -->
+<div class="mt-8">
+<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">
+		{showMatrixForm ? t('common.cancel') : t('matrixBot.addBot')}
+	</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}
+		<form onsubmit={saveMatrixBot} class="space-y-3">
+			<div>
+				<label for="mbot-name" class="block text-sm font-medium mb-1">{t('matrixBot.name')}</label>
+				<div class="flex gap-2">
+					<IconPicker value={matrixForm.icon} onselect={(v: string) => matrixForm.icon = v} />
+					<input id="mbot-name" bind:value={matrixForm.name} required placeholder={t('matrixBot.namePlaceholder')}
+						class="flex-1 px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
+				</div>
+			</div>
+			<div>
+				<label for="mbot-hs" class="block text-sm font-medium mb-1">{t('matrixBot.homeserverUrl')}</label>
+				<input id="mbot-hs" bind:value={matrixForm.homeserver_url} required placeholder="https://matrix.org"
+					class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
+			</div>
+			<div>
+				<label for="mbot-token" class="block text-sm font-medium mb-1">{t('matrixBot.accessToken')}</label>
+				<input id="mbot-token" bind:value={matrixForm.access_token} type="password"
+					required={!editingMatrix}
+					placeholder={editingMatrix ? t('matrixBot.tokenUnchanged') : t('matrixBot.tokenPlaceholder')}
+					class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)] font-mono" />
+			</div>
+			<div>
+				<label for="mbot-display" class="block text-sm font-medium mb-1">{t('matrixBot.displayName')}</label>
+				<input id="mbot-display" bind:value={matrixForm.display_name} placeholder="Notify Bridge"
+					class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
+			</div>
+			<button type="submit" disabled={matrixSubmitting}
+				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">
+				{matrixSubmitting ? t('common.loading') : (editingMatrix ? t('common.save') : t('matrixBot.addBot'))}
+			</button>
+		</form>
+	</Card>
+{/if}
+
+{#if matrixBots.length === 0 && !showMatrixForm}
+	<Card>
+		<EmptyState icon="mdiMatrix" message={t('matrixBot.noBots')} />
+	</Card>
+{:else}
+	<div class="space-y-3 stagger-children">
+		{#each matrixBots as bot}
+			<Card hover>
+				<div class="flex items-center justify-between">
+					<div>
+						<div class="flex items-center gap-2">
+							<span style="color: var(--color-primary);"><MdiIcon name={bot.icon || 'mdiMatrix'} size={20} /></span>
+							<p class="font-medium">{bot.name}</p>
+						</div>
+						<div class="flex items-center gap-2 mt-1 flex-wrap">
+							<span class="text-xs text-[var(--color-muted-foreground)] font-mono">{bot.homeserver_url}</span>
+							{#if bot.display_name}
+								<span class="text-xs px-1.5 py-0.5 rounded bg-[var(--color-muted)] text-[var(--color-muted-foreground)]">{bot.display_name}</span>
+							{/if}
+						</div>
+					</div>
+					<div class="flex items-center gap-1">
+						<IconButton icon="mdiConnection" title={t('matrixBot.testConnection')} onclick={() => testMatrixBot(bot.id)} disabled={matrixTesting[bot.id]} />
+						<IconButton icon="mdiPencil" title={t('common.edit')} onclick={() => editMatrixBot(bot)} />
+						<IconButton icon="mdiDelete" title={t('common.delete')} onclick={() => removeMatrix(bot.id)} variant="danger" />
+					</div>
+				</div>
+			</Card>
+		{/each}
+	</div>
+{/if}
+</div>
+
+<ConfirmModal open={confirmDeleteMatrix !== null} message={t('matrixBot.confirmDelete')}
+	onconfirm={() => confirmDeleteMatrix?.onconfirm()} oncancel={() => confirmDeleteMatrix = null} />
@@ -105,31 +105,38 @@
 	let form = $state(defaultForm());
 	let previewTargetType = $state('telegram');

-	const templateSlots = [
-		{ group: 'eventMessages', slots: [
-			{ key: 'message_assets_added', label: 'assetsAdded', rows: 10 },
-			{ key: 'message_assets_removed', label: 'assetsRemoved', rows: 3 },
-			{ key: 'message_collection_renamed', label: 'albumRenamed', rows: 2 },
-			{ key: 'message_collection_deleted', label: 'albumDeleted', rows: 2 },
-			{ key: 'message_sharing_changed', label: 'sharingChanged', rows: 2 },
-		]},
-		{ group: 'scheduledMessages', slots: [
-			{ key: 'periodic_summary_message', label: 'periodicSummary', rows: 6 },
-			{ key: 'scheduled_assets_message', label: 'scheduledAssets', rows: 6 },
-			{ key: 'memory_mode_message', label: 'memoryMode', rows: 6 },
-		]},
+	// Provider capabilities: loaded dynamically
+	let allCapabilities = $state<Record<string, any>>({});
+	let providerTypes = $derived(Object.keys(allCapabilities));
+
+	// Dynamic slot definitions based on selected provider_type
+	let notificationSlots = $derived<{name: string, description: string}[]>(
+		allCapabilities[form.provider_type]?.notification_slots || []
+	);
+
+	// Group slots into event messages vs scheduled messages based on slot name prefix
+	let templateSlots = $derived([
+		{ group: 'eventMessages', slots: notificationSlots
+			.filter(s => s.name.startsWith('message_'))
+			.map(s => ({ key: s.name, label: s.name.replace('message_', '').replace(/_/g, ' '), description: s.description, rows: s.name === 'message_assets_added' ? 10 : 3 }))
+		},
+		{ group: 'scheduledMessages', slots: notificationSlots
+			.filter(s => !s.name.startsWith('message_'))
+			.map(s => ({ key: s.name, label: s.name.replace(/_/g, ' '), description: s.description, rows: 6 }))
+		},
 		{ group: 'settings', slots: [
-			{ key: 'date_format', label: 'dateFormat', rows: 1, isDateFormat: true },
-			{ key: 'date_only_format', label: 'dateOnlyFormat', rows: 1, isDateFormat: true },
+			{ key: 'date_format', label: 'dateFormat', description: 'Date+time format', rows: 1, isDateFormat: true },
+			{ key: 'date_only_format', label: 'dateOnlyFormat', description: 'Date-only format', rows: 1, isDateFormat: true },
 		]},
-	];
+	]);

 	onMount(load);
 	async function load() {
 		try {
-			[configs, varsRef] = await Promise.all([
+			[configs, varsRef, allCapabilities] = await Promise.all([
 				api('/template-configs'),
 				api('/template-configs/variables'),
+				api('/providers/capabilities'),
 			]);
 		} catch (err: any) { error = err.message || t('common.loadError'); snackError(error); }
 		finally { loaded = true; }
@@ -233,6 +240,23 @@
 				class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]" />
 		</div>

+		{#if !editing}
+		<div>
+			<label for="tpc-provider" class="block text-sm font-medium mb-1">{t('templateConfig.providerType')}</label>
+			<select id="tpc-provider" bind:value={form.provider_type}
+				class="w-full px-3 py-2 border border-[var(--color-border)] rounded-md text-sm bg-[var(--color-background)]">
+				{#each providerTypes as pt}
+					<option value={pt}>{allCapabilities[pt]?.display_name || pt} ({pt})</option>
+				{/each}
+			</select>
+		</div>
+		{:else}
+		<div>
+			<span class="block text-sm font-medium mb-1">{t('templateConfig.providerType')}</span>
+			<span class="text-sm text-[var(--color-muted-foreground)]">{allCapabilities[form.provider_type]?.display_name || form.provider_type}</span>
+		</div>
+		{/if}
+
 		<div class="flex items-center gap-2">
 			<label for="preview-target" class="text-sm font-medium">{t('templateConfig.previewAs')}:</label>
 			<select id="preview-target" bind:value={previewTargetType} onchange={refreshAllPreviews}
@@ -249,7 +273,7 @@
 					{#each group.slots as slot}
 						<div>
 							<div class="flex items-center justify-between mb-1">
-								<label class="text-xs text-[var(--color-muted-foreground)]">{t(`templateConfig.${slot.label}`)}</label>
+								<label class="text-xs text-[var(--color-muted-foreground)]">{slot.description || t(`templateConfig.${slot.label}`, slot.label)}</label>
 								<div class="flex items-center gap-2">
 									{#if varsRef[slot.key]}
 										<button type="button" onclick={() => showVarsFor = slot.key}
@@ -308,6 +332,7 @@
 						<div class="flex items-center gap-2">
 							<span style="color: var(--color-primary);"><MdiIcon name={config.icon || 'mdiFileDocumentEdit'} size={20} /></span>
 							<p class="font-medium">{config.name}</p>
+							<span class="text-xs px-1.5 py-0.5 rounded bg-[var(--color-muted)] text-[var(--color-muted-foreground)]">{config.provider_type}</span>
 							{#if config.user_id === 0}
 								<span class="text-xs px-1.5 py-0.5 rounded bg-[var(--color-muted)] text-[var(--color-muted-foreground)]">System</span>
 							{/if}