feat(web): enhance module entry dialogs and selection handling

- Refactored module entry dialogs to reset forms based on edit state and improve state management.
- Updated selection logic in various components to utilize derived states for active selections, enhancing bulk operations.
- Improved dialog bindings for better state synchronization and user experience.
- Streamlined component structure for maintainability and clarity.

web/src/lib/components/modules/ModuleAsEntriesCard.svelte

@@ -0,0 +1,342 @@
+<script lang="ts">
+	import { apiFetch, apiMutate } from '$lib/api/client.js';
+	import type { AsEntry, BgpCommunity, ModuleRow } from '$lib/api/types.js';
+	import { formatDateTime } from '$lib/modules/display.js';
+	import {
+		communityLabel,
+		sanitizeFilenamePart,
+		supportsCsvIO
+	} from '$lib/components/modules/module-helpers.js';
+
+	import { Button } from '$lib/ui/core/button/index.js';
+	import { Checkbox } from '$lib/ui/core/checkbox/index.js';
+	import {
+		Card,
+		CardContent,
+		CardHeader,
+		CardTitle,
+		CardDescription
+	} from '$lib/ui/core/card/index.js';
+	import AppDataTable from '$lib/ui/patterns/data-table/app-data-table.svelte';
+	import { confirm } from '$lib/ui/patterns/confirm/confirm-state.svelte.js';
+	import { notify, notifyApiError } from '$lib/ui/app/toast.js';
+	import ModuleAsEntryDialog from '$lib/components/modules/ModuleAsEntryDialog.svelte';
+	import Plus from '@lucide/svelte/icons/plus';
+	import Pencil from '@lucide/svelte/icons/pencil';
+	import Trash2 from '@lucide/svelte/icons/trash-2';
+	import Upload from '@lucide/svelte/icons/upload';
+	import Download from '@lucide/svelte/icons/download';
+
+	type Props = {
+		moduleId: string;
+		mod: ModuleRow;
+		entries: AsEntry[];
+		communities: BgpCommunity[];
+		loading?: boolean;
+		onChanged: () => void | Promise<void>;
+	};
+
+	let { moduleId, mod, entries, communities, loading = false, onChanged }: Props = $props();
+
+	let dialogOpen = $state(false);
+	let editTarget = $state<AsEntry | null>(null);
+	let selectedIds = $state(new Set<string>());
+	let deletingBulk = $state(false);
+	let csvImporting = $state(false);
+	let csvExporting = $state(false);
+	let csvFileInput = $state<HTMLInputElement | null>(null);
+
+	const activeSelected = $derived.by(() => {
+		const allowed = new Set(entries.map((e) => e.id));
+		return [...selectedIds].filter((id) => allowed.has(id));
+	});
+	const selectedCount = $derived(activeSelected.length);
+
+	const allSelected = $derived(entries.length > 0 && entries.every((e) => selectedIds.has(e.id)));
+
+	const columns = [
+		{ id: 'select', label: '', class: 'w-10' },
+		{ id: 'asn', label: 'ASN', sortable: true, sortValue: (e: AsEntry) => e.asn },
+		{
+			id: 'name',
+			label: 'Название AS',
+			sortable: true,
+			sortValue: (e: AsEntry) => e.asn_name ?? ''
+		},
+		{
+			id: 'prefixes',
+			label: 'Префиксов',
+			sortable: true,
+			sortValue: (e: AsEntry) => e.prefix_count ?? 0,
+			class: 'text-right'
+		},
+		{
+			id: 'updated',
+			label: 'Обновлено',
+			sortable: true,
+			sortValue: (e: AsEntry) => e.asn_resolved_at ?? ''
+		},
+		{ id: 'community', label: 'Community' },
+		{ id: 'actions', label: '', class: 'w-20' }
+	] as const;
+
+	function toggleSelection(id: string) {
+		const next = new Set(selectedIds);
+		if (next.has(id)) next.delete(id);
+		else next.add(id);
+		selectedIds = next;
+	}
+
+	function toggleAll(checked: boolean) {
+		selectedIds = checked ? new Set(entries.map((e) => e.id)) : new Set<string>();
+	}
+
+	function openCreate() {
+		editTarget = null;
+		dialogOpen = true;
+	}
+
+	function openEdit(entry: AsEntry) {
+		editTarget = entry;
+		dialogOpen = true;
+	}
+
+	function requestDelete(entry: AsEntry) {
+		void confirm({
+			title: 'Удалить запись?',
+			description: `ASN: ${entry.asn}`,
+			confirmLabel: 'Удалить',
+			destructive: true,
+			onConfirm: async () => {
+				await apiMutate(`/v1/modules/${moduleId}/as-entries/${entry.id}`, 'DELETE', undefined, {
+					idempotent: false
+				});
+				notify.success('Удалено');
+				await onChanged();
+			}
+		});
+	}
+
+	function requestBulkDelete() {
+		if (selectedCount === 0) return;
+		void confirm({
+			title: 'Удалить выбранные AS-записи?',
+			description: `Будет удалено: ${selectedCount}`,
+			confirmLabel: 'Удалить',
+			destructive: true,
+			onConfirm: bulkDelete
+		});
+	}
+
+	async function bulkDelete() {
+		if (selectedCount === 0) return;
+		deletingBulk = true;
+		let deleted = 0;
+		try {
+			for (const id of activeSelected) {
+				try {
+					await apiMutate(`/v1/modules/${moduleId}/as-entries/${id}`, 'DELETE', undefined, {
+						idempotent: false
+					});
+					deleted += 1;
+				} catch (e) {
+					notifyApiError(e);
+				}
+			}
+			if (deleted > 0) notify.success(`Удалено AS-записей: ${deleted}`);
+			await onChanged();
+		} finally {
+			deletingBulk = false;
+		}
+	}
+
+	async function readErrorText(res: Response): Promise<string> {
+		const body = (await res.text()).trim();
+		return body || `HTTP ${res.status}`;
+	}
+
+	async function exportCsv() {
+		if (!supportsCsvIO(mod.type) || csvExporting) return;
+		csvExporting = true;
+		try {
+			const res = await apiFetch(`/v1/modules/${moduleId}/entries.csv`, {
+				method: 'GET',
+				headers: { Accept: 'text/csv' }
+			});
+			if (!res.ok) {
+				notify.error(await readErrorText(res));
+				return;
+			}
+			const blob = await res.blob();
+			const url = URL.createObjectURL(blob);
+			const a = document.createElement('a');
+			a.href = url;
+			a.download = `${sanitizeFilenamePart(mod.name)}-${mod.type.toLowerCase()}-entries.csv`;
+			document.body.appendChild(a);
+			a.click();
+			a.remove();
+			URL.revokeObjectURL(url);
+		} catch (e) {
+			notifyApiError(e);
+		} finally {
+			csvExporting = false;
+		}
+	}
+
+	function openImportPicker() {
+		if (!supportsCsvIO(mod.type) || csvImporting) return;
+		csvFileInput?.click();
+	}
+
+	async function handleImportChange(event: Event) {
+		const input = event.currentTarget as HTMLInputElement | null;
+		const file = input?.files?.[0];
+		if (!file || csvImporting) return;
+		csvImporting = true;
+		try {
+			const fileText = await file.text();
+			const res = await apiFetch(`/v1/modules/${moduleId}/entries.csv`, {
+				method: 'POST',
+				headers: { 'Content-Type': 'text/csv' },
+				body: fileText
+			});
+			if (!res.ok) {
+				notify.error(await readErrorText(res));
+				return;
+			}
+			const payload = (await res.json()) as { imported?: number };
+			notify.success(`Импортировано записей: ${payload.imported ?? 0}`);
+			await onChanged();
+		} catch (e) {
+			notifyApiError(e);
+		} finally {
+			csvImporting = false;
+			if (input) input.value = '';
+		}
+	}
+</script>
+
+<input
+	class="hidden"
+	type="file"
+	accept=".csv,text/csv"
+	bind:this={csvFileInput}
+	onchange={handleImportChange}
+/>
+
+<Card>
+	<CardHeader class="flex flex-col gap-3 pb-2 sm:flex-row sm:items-center sm:justify-between">
+		<div class="min-w-0 flex-1">
+			<CardTitle class="text-base">AS-записи</CardTitle>
+			<CardDescription>
+				Номер AS и community; имя, число префиксов и дата обновляются при успешном refresh
+				(RIPEstat).
+			</CardDescription>
+		</div>
+		<div class="flex shrink-0 flex-wrap items-center justify-end gap-2 self-start sm:self-auto">
+			<Button
+				variant="outline"
+				size="sm"
+				onclick={openImportPicker}
+				disabled={!supportsCsvIO(mod.type) || csvImporting || csvExporting}
+			>
+				<Upload />
+				{csvImporting ? 'Импорт…' : 'Импорт CSV'}
+			</Button>
+			<Button
+				variant="outline"
+				size="sm"
+				onclick={exportCsv}
+				disabled={!supportsCsvIO(mod.type) || csvExporting || csvImporting}
+			>
+				<Download />
+				{csvExporting ? 'Экспорт…' : 'Экспорт CSV'}
+			</Button>
+			<Button size="sm" onclick={openCreate}><Plus />Добавить</Button>
+			{#if selectedCount > 0}
+				<Button variant="destructive" size="sm" onclick={requestBulkDelete} disabled={deletingBulk}>
+					<Trash2 />
+					Удалить ({selectedCount})
+				</Button>
+			{/if}
+		</div>
+	</CardHeader>
+	<CardContent class="p-4 pt-0">
+		<AppDataTable
+			columns={[...columns]}
+			rows={entries}
+			rowKey={(e) => e.id}
+			{loading}
+			emptyTitle="Нет AS-записей"
+			emptyDescription="Добавьте ASN или импортируйте CSV."
+		>
+			{#snippet toolbar()}
+				{#if entries.length > 0}
+					<div class="flex items-center gap-2">
+						<Checkbox
+							checked={allSelected}
+							onCheckedChange={(v) => toggleAll(v === true)}
+							aria-label="Выбрать все AS-записи"
+						/>
+						<span class="text-sm text-muted-foreground">Выбрать все</span>
+					</div>
+				{/if}
+			{/snippet}
+			{#snippet cell({ row: entry, column })}
+				{#if column.id === 'select'}
+					<Checkbox
+						checked={selectedIds.has(entry.id)}
+						aria-label={`Выбрать AS ${entry.asn}`}
+						onCheckedChange={() => toggleSelection(entry.id)}
+					/>
+				{:else if column.id === 'asn'}
+					<span class="font-mono">{entry.asn}</span>
+				{:else if column.id === 'name'}
+					<span
+						class="max-w-[14rem] truncate text-sm text-muted-foreground"
+						title={entry.asn_name ?? ''}
+					>
+						{entry.asn_name?.trim() ? entry.asn_name : '—'}
+					</span>
+				{:else if column.id === 'prefixes'}
+					<span class="font-mono text-sm">
+						{entry.prefix_count != null ? entry.prefix_count : '—'}
+					</span>
+				{:else if column.id === 'updated'}
+					<span class="text-sm whitespace-nowrap text-muted-foreground">
+						{formatDateTime(entry.asn_resolved_at)}
+					</span>
+				{:else if column.id === 'community'}
+					<span class="text-sm text-muted-foreground">
+						{communityLabel(entry.community_id, communities)}
+					</span>
+				{:else if column.id === 'actions'}
+					<div class="flex gap-1">
+						<Button variant="ghost" size="icon-sm" onclick={() => openEdit(entry)}>
+							<Pencil class="size-3.5" />
+						</Button>
+						<Button
+							variant="ghost"
+							size="icon-sm"
+							class="text-destructive"
+							onclick={() => requestDelete(entry)}
+						>
+							<Trash2 class="size-3.5" />
+						</Button>
+					</div>
+				{/if}
+			{/snippet}
+		</AppDataTable>
+	</CardContent>
+</Card>
+
+<ModuleAsEntryDialog
+	bind:open={dialogOpen}
+	{moduleId}
+	edit={editTarget}
+	{communities}
+	onSaved={onChanged}
+	onClose={() => {
+		editTarget = null;
+	}}
+/>

web/src/lib/components/modules/ModuleAsEntryDialog.svelte

@@ -0,0 +1,137 @@
+<script lang="ts">
+	import { apiMutate } from '$lib/api/client.js';
+	import type { AsEntry, AsEntryCreate, AsEntryPatch, BgpCommunity } from '$lib/api/types.js';
+	import {
+		communityLabel,
+		communityOptionLabel,
+		fromNullableSelect,
+		NONE_OPTION,
+		nullableSelectValue
+	} from '$lib/components/modules/module-helpers.js';
+	import { Button } from '$lib/ui/core/button/index.js';
+	import { Input } from '$lib/ui/core/input/index.js';
+	import { Label } from '$lib/ui/core/label/index.js';
+	import {
+		Dialog,
+		DialogContent,
+		DialogHeader,
+		DialogTitle,
+		DialogFooter,
+		DialogDescription
+	} from '$lib/ui/core/dialog/index.js';
+	import { Select, SelectContent, SelectItem, SelectTrigger } from '$lib/ui/core/select/index.js';
+	import { notify, notifyApiError } from '$lib/ui/app/toast.js';
+
+	type Props = {
+		open: boolean;
+		moduleId: string;
+		edit: AsEntry | null;
+		communities: BgpCommunity[];
+		onSaved: () => void | Promise<void>;
+		onClose: () => void;
+	};
+
+	let { open = $bindable(), moduleId, edit, communities, onSaved, onClose }: Props = $props();
+
+	let saving = $state(false);
+	let form = $state<AsEntryCreate>({ asn: 0, community_id: null });
+	let initKey = $state('');
+
+	function resetForm() {
+		form = edit
+			? { asn: edit.asn, community_id: edit.community_id }
+			: { asn: 0, community_id: null };
+	}
+
+	$effect(() => {
+		if (!open) {
+			initKey = '';
+			return;
+		}
+		const nextKey = edit?.id ?? 'new';
+		if (nextKey !== initKey) {
+			initKey = nextKey;
+			resetForm();
+		}
+	});
+
+	async function save() {
+		const asn = Number(form.asn);
+		if (!Number.isFinite(asn) || asn < 1 || asn > 4294967295) {
+			notify.error('Укажите корректный ASN (1–4294967295)');
+			return;
+		}
+		saving = true;
+		try {
+			const body: AsEntryCreate | AsEntryPatch = { asn, community_id: form.community_id };
+			if (edit) {
+				await apiMutate(`/v1/modules/${moduleId}/as-entries/${edit.id}`, 'PATCH', body);
+				notify.success('Запись обновлена');
+			} else {
+				await apiMutate(`/v1/modules/${moduleId}/as-entries`, 'POST', body as AsEntryCreate);
+				notify.success('Запись добавлена');
+			}
+			open = false;
+			await onSaved();
+		} catch (e) {
+			notifyApiError(e);
+		} finally {
+			saving = false;
+		}
+	}
+
+	function handleOpenChange(next: boolean) {
+		open = next;
+		if (!next) onClose();
+	}
+</script>
+
+<Dialog bind:open onOpenChange={handleOpenChange}>
+	<DialogContent class="sm:max-w-sm">
+		<DialogHeader>
+			<DialogTitle>{edit ? 'Редактировать запись' : 'Новая AS-запись'}</DialogTitle>
+			<DialogDescription>
+				Номер автономной системы и community для политики анонса.
+			</DialogDescription>
+		</DialogHeader>
+		<div class="space-y-4 py-2">
+			<div class="space-y-1.5">
+				<Label for="as-asn">ASN</Label>
+				<Input
+					id="as-asn"
+					type="number"
+					placeholder="12345"
+					bind:value={form.asn}
+					min={1}
+					max={4294967295}
+				/>
+			</div>
+			<div class="space-y-1.5">
+				<Label for="as-comm">Community</Label>
+				<Select
+					type="single"
+					value={nullableSelectValue(form.community_id)}
+					onValueChange={(v) => {
+						form.community_id = fromNullableSelect(v);
+					}}
+				>
+					<SelectTrigger id="as-comm" class="w-full">
+						{form.community_id ? communityLabel(form.community_id, communities) : 'Не выбрано'}
+					</SelectTrigger>
+					<SelectContent>
+						<SelectItem value={NONE_OPTION}>Не выбрано</SelectItem>
+						{#each communities as c (c.id)}
+							<SelectItem value={c.id}>{communityOptionLabel(c)}</SelectItem>
+						{/each}
+					</SelectContent>
+				</Select>
+			</div>
+		</div>
+		<DialogFooter>
+			<Button variant="outline" onclick={() => handleOpenChange(false)}>Отмена</Button>
+			<Button onclick={save} disabled={saving}>
+				{saving ? 'Сохранение…' : edit ? 'Сохранить' : 'Добавить'}
+			</Button>
+		</DialogFooter>
+	</DialogContent>
+</Dialog>

web/src/lib/components/modules/ModuleCdnSourceDialog.svelte

@@ -0,0 +1,270 @@
+<script lang="ts">
+	import { apiMutate } from '$lib/api/client.js';
+	import type {
+		BgpCommunity,
+		CdnPreviewResponse,
+		CdnSource,
+		CdnSourceCreate
+	} from '$lib/api/types.js';
+	import {
+		communityLabel,
+		communityOptionLabel,
+		fromNullableSelect,
+		normalizeCdnSourceKind,
+		NONE_OPTION,
+		nullableSelectValue
+	} from '$lib/components/modules/module-helpers.js';
+	import { Button } from '$lib/ui/core/button/index.js';
+	import { Input } from '$lib/ui/core/input/index.js';
+	import { Label } from '$lib/ui/core/label/index.js';
+	import {
+		Dialog,
+		DialogContent,
+		DialogHeader,
+		DialogTitle,
+		DialogFooter
+	} from '$lib/ui/core/dialog/index.js';
+	import { Select, SelectContent, SelectItem, SelectTrigger } from '$lib/ui/core/select/index.js';
+	import { notify, notifyApiError } from '$lib/ui/app/toast.js';
+
+	type Props = {
+		open: boolean;
+		moduleId: string;
+		edit: CdnSource | null;
+		communities: BgpCommunity[];
+		onSaved: () => void | Promise<void>;
+		onClose: () => void;
+	};
+
+	let { open = $bindable(), moduleId, edit, communities, onSaved, onClose }: Props = $props();
+
+	let saving = $state(false);
+	let previewLoading = $state(false);
+	let previewItems = $state<string[]>([]);
+	let previewTotal = $state(0);
+	let previewTruncated = $state(false);
+	let previewError = $state<string | null>(null);
+	let previewOk = $state(false);
+	let form = $state<CdnSourceCreate & { refresh_interval_sec?: number | null }>({
+		url: '',
+		source_kind: 'plaintext',
+		prefix_path: '',
+		community_id: null
+	});
+	let initKey = $state('');
+
+	function clearPreview() {
+		previewLoading = false;
+		previewItems = [];
+		previewTotal = 0;
+		previewTruncated = false;
+		previewError = null;
+		previewOk = false;
+	}
+
+	function resetForm() {
+		clearPreview();
+		form = edit
+			? {
+					url: edit.url,
+					source_kind: normalizeCdnSourceKind(edit.source_kind),
+					prefix_path: edit.prefix_path ?? '',
+					community_id: edit.community_id,
+					refresh_interval_sec: edit.refresh_interval_sec
+				}
+			: { url: '', source_kind: 'plaintext', prefix_path: '', community_id: null };
+	}
+
+	$effect(() => {
+		if (!open) {
+			initKey = '';
+			return;
+		}
+		const nextKey = edit?.id ?? 'new';
+		if (nextKey !== initKey) {
+			initKey = nextKey;
+			resetForm();
+		}
+	});
+
+	async function previewCdn() {
+		const urlTrim = form.url.trim();
+		if (!urlTrim) {
+			notify.error('Укажите URL');
+			return;
+		}
+		previewLoading = true;
+		previewError = null;
+		previewOk = false;
+		try {
+			const res = await apiMutate<CdnPreviewResponse>(
+				`/v1/modules/${moduleId}/cdn-sources/preview`,
+				'POST',
+				{
+					url: urlTrim,
+					source_kind: form.source_kind,
+					prefix_path: form.prefix_path?.trim() ?? ''
+				}
+			);
+			previewItems = res.items;
+			previewTotal = res.total;
+			previewTruncated = res.truncated;
+			previewOk = true;
+		} catch (e) {
+			previewError = e instanceof Error ? e.message : String(e);
+			previewItems = [];
+			previewTotal = 0;
+			previewTruncated = false;
+			previewOk = false;
+		} finally {
+			previewLoading = false;
+		}
+	}
+
+	async function save() {
+		const urlTrim = form.url.trim();
+		if (!urlTrim) {
+			notify.error('Укажите URL');
+			return;
+		}
+		saving = true;
+		try {
+			const body = {
+				...form,
+				url: urlTrim,
+				source_kind: form.source_kind,
+				prefix_path: form.prefix_path?.trim() ?? ''
+			};
+			if (edit) {
+				await apiMutate(`/v1/modules/${moduleId}/cdn-sources/${edit.id}`, 'PATCH', body);
+				notify.success('Источник обновлён');
+			} else {
+				await apiMutate(`/v1/modules/${moduleId}/cdn-sources`, 'POST', body);
+				notify.success('Источник добавлен');
+			}
+			clearPreview();
+			open = false;
+			await onSaved();
+		} catch (e) {
+			notifyApiError(e);
+		} finally {
+			saving = false;
+		}
+	}
+
+	function handleOpenChange(next: boolean) {
+		open = next;
+		if (!next) {
+			clearPreview();
+			onClose();
+		}
+	}
+</script>
+
+<Dialog bind:open onOpenChange={handleOpenChange}>
+	<DialogContent class="sm:max-w-lg">
+		<DialogHeader>
+			<DialogTitle>{edit ? 'Редактировать источник' : 'Новый CDN-источник'}</DialogTitle>
+		</DialogHeader>
+		<div class="space-y-4 py-2">
+			<div class="space-y-1.5">
+				<Label for="cdn-url">URL</Label>
+				<Input id="cdn-url" placeholder="https://example.com/list.txt" bind:value={form.url} />
+			</div>
+			<div class="space-y-1.5">
+				<Label for="cdn-kind">Тип источника</Label>
+				<Select
+					type="single"
+					value={form.source_kind}
+					onValueChange={(v) => {
+						form.source_kind = v || 'plaintext';
+					}}
+				>
+					<SelectTrigger id="cdn-kind" class="w-full">
+						{form.source_kind === 'json' ? 'json' : 'plaintext'}
+					</SelectTrigger>
+					<SelectContent>
+						<SelectItem value="plaintext">plaintext</SelectItem>
+						<SelectItem value="json">json</SelectItem>
+					</SelectContent>
+				</Select>
+			</div>
+			<div class="space-y-1.5">
+				<Label for="cdn-prefix-path">JSON path (prefix_path)</Label>
+				<Input
+					id="cdn-prefix-path"
+					placeholder="напр. prefixes[] или data.items[].cidr"
+					bind:value={form.prefix_path}
+				/>
+				{#if form.source_kind === 'json' && !form.prefix_path?.trim()}
+					<p class="text-xs text-muted-foreground">
+						Для JSON укажите путь к полям с CIDR; пустой путь может не дать префиксов.
+					</p>
+				{/if}
+			</div>
+			<div class="space-y-1.5">
+				<Label for="cdn-comm">Community</Label>
+				<Select
+					type="single"
+					value={nullableSelectValue(form.community_id)}
+					onValueChange={(v) => {
+						form.community_id = fromNullableSelect(v);
+					}}
+				>
+					<SelectTrigger id="cdn-comm" class="w-full">
+						{form.community_id ? communityLabel(form.community_id, communities) : 'Не выбрано'}
+					</SelectTrigger>
+					<SelectContent>
+						<SelectItem value={NONE_OPTION}>Не выбрано</SelectItem>
+						{#each communities as c (c.id)}
+							<SelectItem value={c.id}>{communityOptionLabel(c)}</SelectItem>
+						{/each}
+					</SelectContent>
+				</Select>
+			</div>
+			<div class="space-y-1.5">
+				<Label for="cdn-interval">Интервал обновления (сек)</Label>
+				<Input
+					id="cdn-interval"
+					type="number"
+					placeholder="3600"
+					bind:value={form.refresh_interval_sec}
+				/>
+			</div>
+			<div class="flex flex-col gap-2 rounded-lg border border-border p-3">
+				<div class="flex flex-wrap items-center gap-2">
+					<Button
+						type="button"
+						variant="secondary"
+						size="sm"
+						onclick={previewCdn}
+						disabled={previewLoading}
+					>
+						{previewLoading ? 'Загрузка…' : 'Предпросмотр'}
+					</Button>
+					{#if previewError}
+						<span class="text-sm text-destructive">{previewError}</span>
+					{:else if previewOk}
+						<span class="text-sm text-muted-foreground">
+							Всего: {previewTotal}{#if previewTruncated}
+								<span class="text-amber-600 dark:text-amber-500"> (обрезано)</span>{/if}
+						</span>
+					{/if}
+				</div>
+				{#if previewItems.length}
+					<ul class="max-h-48 overflow-y-auto rounded-md border bg-muted/40 p-2 font-mono text-xs">
+						{#each previewItems as item, i (`${i}-${item}`)}
+							<li class="py-0.5">{item}</li>
+						{/each}
+					</ul>
+				{/if}
+			</div>
+		</div>
+		<DialogFooter>
+			<Button variant="outline" onclick={() => handleOpenChange(false)}>Отмена</Button>
+			<Button onclick={save} disabled={saving}>
+				{saving ? 'Сохранение…' : edit ? 'Сохранить' : 'Добавить'}
+			</Button>
+		</DialogFooter>
+	</DialogContent>
+</Dialog>

web/src/lib/components/modules/ModuleCdnSourcesCard.svelte

@@ -0,0 +1,237 @@
+<script lang="ts">
+	import { apiMutate } from '$lib/api/client.js';
+	import type { BgpCommunity, CdnSource } from '$lib/api/types.js';
+	import { formatDateTime } from '$lib/modules/display.js';
+	import {
+		communityLabel,
+		normalizeCdnSourceKind
+	} from '$lib/components/modules/module-helpers.js';
+	import { Badge } from '$lib/ui/core/badge/index.js';
+	import { Button } from '$lib/ui/core/button/index.js';
+	import { Checkbox } from '$lib/ui/core/checkbox/index.js';
+	import {
+		Card,
+		CardContent,
+		CardHeader,
+		CardTitle,
+		CardDescription
+	} from '$lib/ui/core/card/index.js';
+	import AppDataTable from '$lib/ui/patterns/data-table/app-data-table.svelte';
+	import { confirm } from '$lib/ui/patterns/confirm/confirm-state.svelte.js';
+	import { notify, notifyApiError } from '$lib/ui/app/toast.js';
+	import ModuleCdnSourceDialog from '$lib/components/modules/ModuleCdnSourceDialog.svelte';
+	import Plus from '@lucide/svelte/icons/plus';
+	import Pencil from '@lucide/svelte/icons/pencil';
+	import Trash2 from '@lucide/svelte/icons/trash-2';
+
+	type Props = {
+		moduleId: string;
+		sources: CdnSource[];
+		communities: BgpCommunity[];
+		loading?: boolean;
+		onChanged: () => void | Promise<void>;
+	};
+
+	let { moduleId, sources, communities, loading = false, onChanged }: Props = $props();
+
+	let dialogOpen = $state(false);
+	let editTarget = $state<CdnSource | null>(null);
+	let selectedIds = $state(new Set<string>());
+	let deletingBulk = $state(false);
+
+	const activeSelected = $derived.by(() => {
+		const allowed = new Set(sources.map((s) => s.id));
+		return [...selectedIds].filter((id) => allowed.has(id));
+	});
+	const selectedCount = $derived(activeSelected.length);
+	const allSelected = $derived(sources.length > 0 && sources.every((s) => selectedIds.has(s.id)));
+
+	const columns = [
+		{ id: 'select', label: '', class: 'w-10' },
+		{ id: 'url', label: 'URL', sortable: true, sortValue: (s: CdnSource) => s.url },
+		{ id: 'kind', label: 'Тип', sortable: true, sortValue: (s: CdnSource) => s.source_kind },
+		{ id: 'community', label: 'Community' },
+		{
+			id: 'interval',
+			label: 'Интервал',
+			sortable: true,
+			sortValue: (s: CdnSource) => s.refresh_interval_sec ?? 0
+		},
+		{
+			id: 'refreshed',
+			label: 'Последнее обновление',
+			sortable: true,
+			sortValue: (s: CdnSource) => s.last_refreshed_at ?? ''
+		},
+		{ id: 'actions', label: '', class: 'w-20' }
+	] as const;
+
+	function toggleSelection(id: string) {
+		const next = new Set(selectedIds);
+		if (next.has(id)) next.delete(id);
+		else next.add(id);
+		selectedIds = next;
+	}
+
+	function toggleAll(checked: boolean) {
+		selectedIds = checked ? new Set(sources.map((s) => s.id)) : new Set<string>();
+	}
+
+	function openCreate() {
+		editTarget = null;
+		dialogOpen = true;
+	}
+
+	function openEdit(src: CdnSource) {
+		editTarget = src;
+		dialogOpen = true;
+	}
+
+	function requestDelete(src: CdnSource) {
+		void confirm({
+			title: 'Удалить CDN-источник?',
+			description: src.url,
+			confirmLabel: 'Удалить',
+			destructive: true,
+			onConfirm: async () => {
+				await apiMutate(`/v1/modules/${moduleId}/cdn-sources/${src.id}`, 'DELETE', undefined, {
+					idempotent: false
+				});
+				notify.success('Удалено');
+				await onChanged();
+			}
+		});
+	}
+
+	function requestBulkDelete() {
+		if (selectedCount === 0) return;
+		void confirm({
+			title: 'Удалить выбранные CDN-источники?',
+			description: `Будет удалено: ${selectedCount}`,
+			confirmLabel: 'Удалить',
+			destructive: true,
+			onConfirm: bulkDelete
+		});
+	}
+
+	async function bulkDelete() {
+		if (selectedCount === 0) return;
+		deletingBulk = true;
+		let deleted = 0;
+		try {
+			for (const id of activeSelected) {
+				try {
+					await apiMutate(`/v1/modules/${moduleId}/cdn-sources/${id}`, 'DELETE', undefined, {
+						idempotent: false
+					});
+					deleted += 1;
+				} catch (e) {
+					notifyApiError(e);
+				}
+			}
+			if (deleted > 0) notify.success(`Удалено CDN-источников: ${deleted}`);
+			await onChanged();
+		} finally {
+			deletingBulk = false;
+		}
+	}
+</script>
+
+<Card>
+	<CardHeader class="flex flex-col gap-3 pb-2 sm:flex-row sm:items-center sm:justify-between">
+		<div class="min-w-0 flex-1">
+			<CardTitle class="text-base">CDN-источники</CardTitle>
+			<CardDescription>URL источников для скачивания списков CIDR.</CardDescription>
+		</div>
+		<div class="flex shrink-0 flex-wrap items-center justify-end gap-2 self-start sm:self-auto">
+			<Button size="sm" onclick={openCreate}><Plus />Добавить</Button>
+			{#if selectedCount > 0}
+				<Button variant="destructive" size="sm" onclick={requestBulkDelete} disabled={deletingBulk}>
+					<Trash2 />
+					Удалить ({selectedCount})
+				</Button>
+			{/if}
+		</div>
+	</CardHeader>
+	<CardContent class="p-4 pt-0">
+		<AppDataTable
+			columns={[...columns]}
+			rows={sources}
+			rowKey={(s) => s.id}
+			{loading}
+			emptyTitle="Нет CDN-источников"
+			emptyDescription="Добавьте URL для загрузки списков CIDR."
+		>
+			{#snippet toolbar()}
+				{#if sources.length > 0}
+					<div class="flex items-center gap-2">
+						<Checkbox
+							checked={allSelected}
+							onCheckedChange={(v) => toggleAll(v === true)}
+							aria-label="Выбрать все CDN-источники"
+						/>
+						<span class="text-sm text-muted-foreground">Выбрать все</span>
+					</div>
+				{/if}
+			{/snippet}
+			{#snippet cell({ row: src, column })}
+				{#if column.id === 'select'}
+					<Checkbox
+						checked={selectedIds.has(src.id)}
+						aria-label="Выбрать CDN-источник"
+						onCheckedChange={() => toggleSelection(src.id)}
+					/>
+				{:else if column.id === 'url'}
+					<span class="max-w-xs truncate font-mono text-xs" title={src.url}>{src.url}</span>
+				{:else if column.id === 'kind'}
+					<div class="flex flex-col gap-0.5">
+						<Badge variant="outline">{normalizeCdnSourceKind(src.source_kind)}</Badge>
+						{#if src.prefix_path?.trim()}
+							<span
+								class="font-mono text-xs break-all text-muted-foreground"
+								title={src.prefix_path}>{src.prefix_path}</span
+							>
+						{/if}
+					</div>
+				{:else if column.id === 'community'}
+					<span class="text-sm text-muted-foreground">
+						{communityLabel(src.community_id, communities)}
+					</span>
+				{:else if column.id === 'interval'}
+					<span class="text-sm text-muted-foreground">
+						{src.refresh_interval_sec != null ? `${src.refresh_interval_sec}с` : '—'}
+					</span>
+				{:else if column.id === 'refreshed'}
+					<span class="text-sm whitespace-nowrap text-muted-foreground">
+						{formatDateTime(src.last_refreshed_at)}
+					</span>
+				{:else if column.id === 'actions'}
+					<div class="flex gap-1">
+						<Button variant="ghost" size="icon-sm" onclick={() => openEdit(src)}>
+							<Pencil class="size-3.5" />
+						</Button>
+						<Button
+							variant="ghost"
+							size="icon-sm"
+							class="text-destructive"
+							onclick={() => requestDelete(src)}
+						>
+							<Trash2 class="size-3.5" />
+						</Button>
+					</div>
+				{/if}
+			{/snippet}
+		</AppDataTable>
+	</CardContent>
+</Card>
+
+<ModuleCdnSourceDialog
+	bind:open={dialogOpen}
+	{moduleId}
+	edit={editTarget}
+	{communities}
+	onSaved={onChanged}
+	onClose={() => {
+		editTarget = null;
+	}}
+/>

web/src/lib/components/modules/ModuleCreateDialog.svelte

@@ -0,0 +1,144 @@
+<script lang="ts">
+	import { apiMutate } from '$lib/api/client.js';
+	import type { ModuleCreate } from '$lib/api/types.js';
+	import { moduleTypeRu } from '$lib/ui-labels.js';
+	import { Button } from '$lib/ui/core/button/index.js';
+	import { Input } from '$lib/ui/core/input/index.js';
+	import { Label } from '$lib/ui/core/label/index.js';
+	import {
+		Dialog,
+		DialogContent,
+		DialogHeader,
+		DialogTitle,
+		DialogFooter,
+		DialogDescription
+	} from '$lib/ui/core/dialog/index.js';
+	import { Select, SelectContent, SelectItem, SelectTrigger } from '$lib/ui/core/select/index.js';
+	import { Switch } from '$lib/ui/core/switch/index.js';
+	import { notify, notifyApiError } from '$lib/ui/app/toast.js';
+
+	type Props = {
+		open: boolean;
+		onClose: () => void;
+		onCreated: () => void | Promise<void>;
+	};
+
+	let { open = $bindable(), onClose, onCreated }: Props = $props();
+
+	let saving = $state(false);
+	let form = $state<ModuleCreate>({
+		type: 'AS_PREFIXES',
+		name: '',
+		enabled: true,
+		priority: 0
+	});
+
+	const moduleTypes = [
+		{ value: 'AS_PREFIXES', label: moduleTypeRu('AS_PREFIXES') },
+		{ value: 'CDN_CIDRS', label: moduleTypeRu('CDN_CIDRS') },
+		{ value: 'DOMAINS', label: moduleTypeRu('DOMAINS') },
+		{ value: 'IP_RANGES', label: moduleTypeRu('IP_RANGES') }
+	] as const;
+
+	function resetForm() {
+		form = { type: 'AS_PREFIXES', name: '', enabled: true, priority: 0 };
+	}
+
+	async function create() {
+		if (!form.name.trim()) {
+			notify.error('Укажите название модуля');
+			return;
+		}
+		saving = true;
+		try {
+			await apiMutate('/v1/modules', 'POST', form);
+			notify.success('Модуль создан');
+			open = false;
+			resetForm();
+			await onCreated();
+		} catch (e) {
+			notifyApiError(e);
+		} finally {
+			saving = false;
+		}
+	}
+
+	function handleOpenChange(next: boolean) {
+		open = next;
+		if (!next) {
+			onClose();
+			resetForm();
+		}
+	}
+</script>
+
+<Dialog bind:open onOpenChange={handleOpenChange}>
+	<DialogContent class="sm:max-w-md">
+		<DialogHeader>
+			<DialogTitle>Новый модуль</DialogTitle>
+			<DialogDescription>Создание нового модуля префиксов.</DialogDescription>
+		</DialogHeader>
+		<div class="space-y-4 py-2">
+			<div class="space-y-1.5">
+				<Label for="m-name">Название</Label>
+				<Input id="m-name" bind:value={form.name} placeholder="my-asn-module" />
+			</div>
+			<div class="space-y-1.5">
+				<Label for="m-type">Тип</Label>
+				<Select
+					type="single"
+					value={form.type}
+					onValueChange={(v) => {
+						if (v) form.type = v as typeof form.type;
+					}}
+				>
+					<SelectTrigger id="m-type" class="w-full">
+						{moduleTypes.find((t) => t.value === form.type)?.label ?? 'Выберите тип'}
+					</SelectTrigger>
+					<SelectContent>
+						{#each moduleTypes as t (t.value)}
+							<SelectItem value={t.value}>{t.label}</SelectItem>
+						{/each}
+					</SelectContent>
+				</Select>
+			</div>
+			<div class="grid grid-cols-2 gap-4">
+				<div class="space-y-1.5">
+					<Label for="m-priority">Приоритет</Label>
+					<Input id="m-priority" type="number" bind:value={form.priority} />
+				</div>
+				<div class="space-y-1.5">
+					<Label for="m-interval">Интервал (сек)</Label>
+					<Input
+						id="m-interval"
+						type="number"
+						placeholder="3600"
+						bind:value={form.refresh_interval_sec}
+					/>
+				</div>
+			</div>
+			<div
+				class="flex flex-row items-center justify-between gap-4 rounded-lg border border-border bg-muted/30 p-3"
+			>
+				<div class="grid min-w-0 flex-1 gap-1 pr-2">
+					<Label for="m-enabled" class="leading-snug text-foreground">Включён</Label>
+					<p class="text-xs leading-snug text-muted-foreground">
+						Модуль участвует в сборке ревизий, если включён.
+					</p>
+				</div>
+				<Switch
+					id="m-enabled"
+					class="shrink-0"
+					checked={form.enabled !== false}
+					onCheckedChange={(v) => {
+						form = { ...form, enabled: v };
+					}}
+				/>
+			</div>
+		</div>
+		<DialogFooter>
+			<Button variant="outline" onclick={() => handleOpenChange(false)}>Отмена</Button>
+			<Button onclick={create} disabled={saving}>{saving ? 'Создание…' : 'Создать'}</Button>
+		</DialogFooter>
+	</DialogContent>
+</Dialog>

web/src/lib/components/modules/ModuleDetailHeader.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+	import { resolve } from '$app/paths';
+	import type { ModuleRow } from '$lib/api/types.js';
+	import { moduleEnabledRu, moduleEnabledBadgeVariant, moduleTypeRu } from '$lib/ui-labels.js';
+	import { Badge } from '$lib/ui/core/badge/index.js';
+	import { Button } from '$lib/ui/core/button/index.js';
+	import PageHeader from '$lib/ui/app/page-header/page-header.svelte';
+	import ArrowLeft from '@lucide/svelte/icons/arrow-left';
+	import Pencil from '@lucide/svelte/icons/pencil';
+	import Trash2 from '@lucide/svelte/icons/trash-2';
+	import RefreshCw from '@lucide/svelte/icons/refresh-cw';
+	import Blocks from '@lucide/svelte/icons/blocks';
+
+	type Props = {
+		mod: ModuleRow;
+		refreshing: boolean;
+		onRefresh: () => void;
+		onEdit: () => void;
+		onDelete: () => void;
+	};
+
+	let { mod, refreshing, onRefresh, onEdit, onDelete }: Props = $props();
+</script>
+
+<div class="flex min-w-0 items-start gap-2">
+	<Button variant="ghost" size="icon-sm" class="mt-1 shrink-0" href={resolve('/modules')}>
+		<ArrowLeft class="size-4" />
+	</Button>
+	<PageHeader
+		class="min-w-0 flex-1"
+		title={mod.name}
+		description={mod.id}
+		icon={Blocks}
+		iconClass="bg-chart-2/15 text-chart-2"
+	>
+		{#snippet actions()}
+			<div class="flex flex-wrap items-center gap-2">
+				<Badge variant="outline">{moduleTypeRu(mod.type)}</Badge>
+				<Badge variant={moduleEnabledBadgeVariant(!!mod.enabled)} class="text-xs">
+					{moduleEnabledRu(!!mod.enabled)}
+				</Badge>
+				<Button variant="outline" size="sm" onclick={() => onRefresh()} disabled={refreshing}>
+					<RefreshCw class={refreshing ? 'animate-spin' : ''} />
+					Обновить
+				</Button>
+				<Button variant="outline" size="sm" onclick={() => onEdit()}>
+					<Pencil />
+					Редактировать
+				</Button>
+				<Button variant="destructive" size="sm" onclick={() => onDelete()}>
+					<Trash2 />
+					Удалить
+				</Button>
+			</div>
+		{/snippet}
+	</PageHeader>
+</div>

web/src/lib/components/modules/ModuleDomainEntriesCard.svelte

@@ -0,0 +1,302 @@
+<script lang="ts">
+	import { apiFetch, apiMutate } from '$lib/api/client.js';
+	import type { BgpCommunity, DomainEntry, ModuleRow } from '$lib/api/types.js';
+	import {
+		communityLabel,
+		sanitizeFilenamePart,
+		supportsCsvIO
+	} from '$lib/components/modules/module-helpers.js';
+	import { Button } from '$lib/ui/core/button/index.js';
+	import { Checkbox } from '$lib/ui/core/checkbox/index.js';
+	import {
+		Card,
+		CardContent,
+		CardHeader,
+		CardTitle,
+		CardDescription
+	} from '$lib/ui/core/card/index.js';
+	import AppDataTable from '$lib/ui/patterns/data-table/app-data-table.svelte';
+	import { confirm } from '$lib/ui/patterns/confirm/confirm-state.svelte.js';
+	import { notify, notifyApiError } from '$lib/ui/app/toast.js';
+	import ModuleDomainEntryDialog from '$lib/components/modules/ModuleDomainEntryDialog.svelte';
+	import Plus from '@lucide/svelte/icons/plus';
+	import Pencil from '@lucide/svelte/icons/pencil';
+	import Trash2 from '@lucide/svelte/icons/trash-2';
+	import Upload from '@lucide/svelte/icons/upload';
+	import Download from '@lucide/svelte/icons/download';
+
+	type Props = {
+		moduleId: string;
+		mod: ModuleRow;
+		entries: DomainEntry[];
+		communities: BgpCommunity[];
+		loading?: boolean;
+		onChanged: () => void | Promise<void>;
+	};
+
+	let { moduleId, mod, entries, communities, loading = false, onChanged }: Props = $props();
+
+	let dialogOpen = $state(false);
+	let editTarget = $state<DomainEntry | null>(null);
+	let selectedIds = $state(new Set<string>());
+	let deletingBulk = $state(false);
+	let csvImporting = $state(false);
+	let csvExporting = $state(false);
+	let csvFileInput = $state<HTMLInputElement | null>(null);
+
+	const activeSelected = $derived.by(() => {
+		const allowed = new Set(entries.map((e) => e.id));
+		return [...selectedIds].filter((id) => allowed.has(id));
+	});
+	const selectedCount = $derived(activeSelected.length);
+	const allSelected = $derived(entries.length > 0 && entries.every((e) => selectedIds.has(e.id)));
+
+	const columns = [
+		{ id: 'select', label: '', class: 'w-10' },
+		{ id: 'fqdn', label: 'FQDN', sortable: true, sortValue: (e: DomainEntry) => e.fqdn },
+		{ id: 'community', label: 'Community' },
+		{ id: 'actions', label: '', class: 'w-20' }
+	] as const;
+
+	function toggleSelection(id: string) {
+		const next = new Set(selectedIds);
+		if (next.has(id)) next.delete(id);
+		else next.add(id);
+		selectedIds = next;
+	}
+
+	function toggleAll(checked: boolean) {
+		selectedIds = checked ? new Set(entries.map((e) => e.id)) : new Set<string>();
+	}
+
+	function openCreate() {
+		editTarget = null;
+		dialogOpen = true;
+	}
+
+	function openEdit(entry: DomainEntry) {
+		editTarget = entry;
+		dialogOpen = true;
+	}
+
+	function requestDelete(entry: DomainEntry) {
+		void confirm({
+			title: 'Удалить домен?',
+			description: entry.fqdn,
+			confirmLabel: 'Удалить',
+			destructive: true,
+			onConfirm: async () => {
+				await apiMutate(`/v1/modules/${moduleId}/domain-entries/${entry.id}`, 'DELETE', undefined, {
+					idempotent: false
+				});
+				notify.success('Удалено');
+				await onChanged();
+			}
+		});
+	}
+
+	function requestBulkDelete() {
+		if (selectedCount === 0) return;
+		void confirm({
+			title: 'Удалить выбранные домены?',
+			description: `Будет удалено: ${selectedCount}`,
+			confirmLabel: 'Удалить',
+			destructive: true,
+			onConfirm: bulkDelete
+		});
+	}
+
+	async function bulkDelete() {
+		if (selectedCount === 0) return;
+		deletingBulk = true;
+		let deleted = 0;
+		try {
+			for (const id of activeSelected) {
+				try {
+					await apiMutate(`/v1/modules/${moduleId}/domain-entries/${id}`, 'DELETE', undefined, {
+						idempotent: false
+					});
+					deleted += 1;
+				} catch (e) {
+					notifyApiError(e);
+				}
+			}
+			if (deleted > 0) notify.success(`Удалено доменов: ${deleted}`);
+			await onChanged();
+		} finally {
+			deletingBulk = false;
+		}
+	}
+
+	async function readErrorText(res: Response): Promise<string> {
+		const body = (await res.text()).trim();
+		return body || `HTTP ${res.status}`;
+	}
+
+	async function exportCsv() {
+		if (!supportsCsvIO(mod.type) || csvExporting) return;
+		csvExporting = true;
+		try {
+			const res = await apiFetch(`/v1/modules/${moduleId}/entries.csv`, {
+				method: 'GET',
+				headers: { Accept: 'text/csv' }
+			});
+			if (!res.ok) {
+				notify.error(await readErrorText(res));
+				return;
+			}
+			const blob = await res.blob();
+			const url = URL.createObjectURL(blob);
+			const a = document.createElement('a');
+			a.href = url;
+			a.download = `${sanitizeFilenamePart(mod.name)}-${mod.type.toLowerCase()}-entries.csv`;
+			document.body.appendChild(a);
+			a.click();
+			a.remove();
+			URL.revokeObjectURL(url);
+		} catch (e) {
+			notifyApiError(e);
+		} finally {
+			csvExporting = false;
+		}
+	}
+
+	function openImportPicker() {
+		if (!supportsCsvIO(mod.type) || csvImporting) return;
+		csvFileInput?.click();
+	}
+
+	async function handleImportChange(event: Event) {
+		const input = event.currentTarget as HTMLInputElement | null;
+		const file = input?.files?.[0];
+		if (!file || csvImporting) return;
+		csvImporting = true;
+		try {
+			const fileText = await file.text();
+			const res = await apiFetch(`/v1/modules/${moduleId}/entries.csv`, {
+				method: 'POST',
+				headers: { 'Content-Type': 'text/csv' },
+				body: fileText
+			});
+			if (!res.ok) {
+				notify.error(await readErrorText(res));
+				return;
+			}
+			const payload = (await res.json()) as { imported?: number };
+			notify.success(`Импортировано записей: ${payload.imported ?? 0}`);
+			await onChanged();
+		} catch (e) {
+			notifyApiError(e);
+		} finally {
+			csvImporting = false;
+			if (input) input.value = '';
+		}
+	}
+</script>
+
+<input
+	class="hidden"
+	type="file"
+	accept=".csv,text/csv"
+	bind:this={csvFileInput}
+	onchange={handleImportChange}
+/>
+
+<Card>
+	<CardHeader class="flex flex-col gap-3 pb-2 sm:flex-row sm:items-center sm:justify-between">
+		<div class="min-w-0 flex-1">
+			<CardTitle class="text-base">Домены</CardTitle>
+			<CardDescription>FQDN для резолвинга через DoH.</CardDescription>
+		</div>
+		<div class="flex shrink-0 flex-wrap items-center justify-end gap-2 self-start sm:self-auto">
+			<Button
+				variant="outline"
+				size="sm"
+				onclick={openImportPicker}
+				disabled={!supportsCsvIO(mod.type) || csvImporting || csvExporting}
+			>
+				<Upload />
+				{csvImporting ? 'Импорт…' : 'Импорт CSV'}
+			</Button>
+			<Button
+				variant="outline"
+				size="sm"
+				onclick={exportCsv}
+				disabled={!supportsCsvIO(mod.type) || csvExporting || csvImporting}
+			>
+				<Download />
+				{csvExporting ? 'Экспорт…' : 'Экспорт CSV'}
+			</Button>
+			<Button size="sm" onclick={openCreate}><Plus />Добавить</Button>
+			{#if selectedCount > 0}
+				<Button variant="destructive" size="sm" onclick={requestBulkDelete} disabled={deletingBulk}>
+					<Trash2 />
+					Удалить ({selectedCount})
+				</Button>
+			{/if}
+		</div>
+	</CardHeader>
+	<CardContent class="p-4 pt-0">
+		<AppDataTable
+			columns={[...columns]}
+			rows={entries}
+			rowKey={(e) => e.id}
+			{loading}
+			emptyTitle="Нет доменов"
+			emptyDescription="Добавьте FQDN или импортируйте CSV."
+		>
+			{#snippet toolbar()}
+				{#if entries.length > 0}
+					<div class="flex items-center gap-2">
+						<Checkbox
+							checked={allSelected}
+							onCheckedChange={(v) => toggleAll(v === true)}
+							aria-label="Выбрать все домены"
+						/>
+						<span class="text-sm text-muted-foreground">Выбрать все</span>
+					</div>
+				{/if}
+			{/snippet}
+			{#snippet cell({ row: entry, column })}
+				{#if column.id === 'select'}
+					<Checkbox
+						checked={selectedIds.has(entry.id)}
+						aria-label={`Выбрать домен ${entry.fqdn}`}
+						onCheckedChange={() => toggleSelection(entry.id)}
+					/>
+				{:else if column.id === 'fqdn'}
+					<span class="font-mono">{entry.fqdn}</span>
+				{:else if column.id === 'community'}
+					<span class="text-sm text-muted-foreground">
+						{communityLabel(entry.community_id, communities)}
+					</span>
+				{:else if column.id === 'actions'}
+					<div class="flex gap-1">
+						<Button variant="ghost" size="icon-sm" onclick={() => openEdit(entry)}>
+							<Pencil class="size-3.5" />
+						</Button>
+						<Button
+							variant="ghost"
+							size="icon-sm"
+							class="text-destructive"
+							onclick={() => requestDelete(entry)}
+						>
+							<Trash2 class="size-3.5" />
+						</Button>
+					</div>
+				{/if}
+			{/snippet}
+		</AppDataTable>
+	</CardContent>
+</Card>
+
+<ModuleDomainEntryDialog
+	bind:open={dialogOpen}
+	{moduleId}
+	edit={editTarget}
+	{communities}
+	onSaved={onChanged}
+	onClose={() => {
+		editTarget = null;
+	}}
+/>

web/src/lib/components/modules/ModuleDomainEntryDialog.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+	import { apiMutate } from '$lib/api/client.js';
+	import type { BgpCommunity, DomainEntry, DomainEntryCreate } from '$lib/api/types.js';
+	import {
+		communityLabel,
+		communityOptionLabel,
+		fromNullableSelect,
+		NONE_OPTION,
+		nullableSelectValue
+	} from '$lib/components/modules/module-helpers.js';
+	import { Button } from '$lib/ui/core/button/index.js';
+	import { Input } from '$lib/ui/core/input/index.js';
+	import { Label } from '$lib/ui/core/label/index.js';
+	import {
+		Dialog,
+		DialogContent,
+		DialogHeader,
+		DialogTitle,
+		DialogFooter
+	} from '$lib/ui/core/dialog/index.js';
+	import { Select, SelectContent, SelectItem, SelectTrigger } from '$lib/ui/core/select/index.js';
+	import { notify, notifyApiError } from '$lib/ui/app/toast.js';
+
+	type Props = {
+		open: boolean;
+		moduleId: string;
+		edit: DomainEntry | null;
+		communities: BgpCommunity[];
+		onSaved: () => void | Promise<void>;
+		onClose: () => void;
+	};
+
+	let { open = $bindable(), moduleId, edit, communities, onSaved, onClose }: Props = $props();
+
+	let saving = $state(false);
+	let form = $state<DomainEntryCreate>({ fqdn: '', community_id: null });
+	let initKey = $state('');
+
+	function resetForm() {
+		form = edit
+			? { fqdn: edit.fqdn, community_id: edit.community_id }
+			: { fqdn: '', community_id: null };
+	}
+
+	$effect(() => {
+		if (!open) {
+			initKey = '';
+			return;
+		}
+		const nextKey = edit?.id ?? 'new';
+		if (nextKey !== initKey) {
+			initKey = nextKey;
+			resetForm();
+		}
+	});
+
+	async function save() {
+		saving = true;
+		try {
+			if (edit) {
+				await apiMutate(`/v1/modules/${moduleId}/domain-entries/${edit.id}`, 'PATCH', form);
+				notify.success('Домен обновлён');
+			} else {
+				await apiMutate(`/v1/modules/${moduleId}/domain-entries`, 'POST', form);
+				notify.success('Домен добавлен');
+			}
+			open = false;
+			await onSaved();
+		} catch (e) {
+			notifyApiError(e);
+		} finally {
+			saving = false;
+		}
+	}
+
+	function handleOpenChange(next: boolean) {
+		open = next;
+		if (!next) onClose();
+	}
+</script>
+
+<Dialog bind:open onOpenChange={handleOpenChange}>
+	<DialogContent class="sm:max-w-sm">
+		<DialogHeader>
+			<DialogTitle>{edit ? 'Редактировать домен' : 'Новый домен'}</DialogTitle>
+		</DialogHeader>
+		<div class="space-y-4 py-2">
+			<div class="space-y-1.5">
+				<Label for="dom-fqdn">FQDN</Label>
+				<Input id="dom-fqdn" placeholder="example.com" bind:value={form.fqdn} />
+			</div>
+			<div class="space-y-1.5">
+				<Label for="dom-comm">Community</Label>
+				<Select
+					type="single"
+					value={nullableSelectValue(form.community_id)}
+					onValueChange={(v) => {
+						form.community_id = fromNullableSelect(v);
+					}}
+				>
+					<SelectTrigger id="dom-comm" class="w-full">
+						{form.community_id ? communityLabel(form.community_id, communities) : 'Не выбрано'}
+					</SelectTrigger>
+					<SelectContent>
+						<SelectItem value={NONE_OPTION}>Не выбрано</SelectItem>
+						{#each communities as c (c.id)}
+							<SelectItem value={c.id}>{communityOptionLabel(c)}</SelectItem>
+						{/each}
+					</SelectContent>
+				</Select>
+			</div>
+		</div>
+		<DialogFooter>
+			<Button variant="outline" onclick={() => handleOpenChange(false)}>Отмена</Button>
+			<Button onclick={save} disabled={saving}>
+				{saving ? 'Сохранение…' : edit ? 'Сохранить' : 'Добавить'}
+			</Button>
+		</DialogFooter>
+	</DialogContent>
+</Dialog>

web/src/lib/components/modules/ModuleEditDialog.svelte

@@ -0,0 +1,294 @@
+<script lang="ts">
+	import { apiMutate } from '$lib/api/client.js';
+	import type {
+		BgpCommunity,
+		DohProfile,
+		DohResolverPolicy,
+		ModulePatch,
+		ModuleRow
+	} from '$lib/api/types.js';
+	import { dohPolicyRu } from '$lib/ui-labels.js';
+	import {
+		communityLabel,
+		communityOptionLabel,
+		fromNullableSelect,
+		moduleDohProfileIds,
+		NONE_OPTION,
+		nullableSelectValue
+	} from '$lib/components/modules/module-helpers.js';
+	import { Button } from '$lib/ui/core/button/index.js';
+	import { Input } from '$lib/ui/core/input/index.js';
+	import { Label } from '$lib/ui/core/label/index.js';
+	import { Checkbox } from '$lib/ui/core/checkbox/index.js';
+	import {
+		Dialog,
+		DialogContent,
+		DialogHeader,
+		DialogTitle,
+		DialogFooter
+	} from '$lib/ui/core/dialog/index.js';
+	import { Select, SelectContent, SelectItem, SelectTrigger } from '$lib/ui/core/select/index.js';
+	import { Switch } from '$lib/ui/core/switch/index.js';
+	import { notify, notifyApiError } from '$lib/ui/app/toast.js';
+
+	const dohPolicyOptions: { value: DohResolverPolicy; label: string; hint: string }[] = [
+		{
+			value: 'primary_only',
+			label: 'Только первый',
+			hint: 'Используется первый выбранный DoH-профиль.'
+		},
+		{
+			value: 'failover',
+			label: 'Резервирование',
+			hint: 'Профили по порядку до первого успешного ответа.'
+		},
+		{
+			value: 'union',
+			label: 'Объединение',
+			hint: 'Все A/AAAA со всех профилей (geo-split DNS).'
+		}
+	];
+
+	type Props = {
+		open: boolean;
+		mod: ModuleRow;
+		moduleId: string;
+		communities: BgpCommunity[];
+		dohProfiles: DohProfile[];
+		onSaved: () => void | Promise<void>;
+		onClose: () => void;
+	};
+
+	let {
+		open = $bindable(),
+		mod,
+		moduleId,
+		communities,
+		dohProfiles,
+		onSaved,
+		onClose
+	}: Props = $props();
+
+	let editForm = $state<ModulePatch>({});
+	let editSaving = $state(false);
+	let initKey = $state('');
+
+	function resetEditForm() {
+		editForm = {
+			name: mod.name,
+			enabled: mod.enabled,
+			priority: mod.priority,
+			refresh_interval_sec: mod.refresh_interval_sec,
+			cron_expr: mod.cron_expr,
+			default_community_id: mod.default_community_id,
+			doh_profile_ids: moduleDohProfileIds(mod),
+			doh_resolver_policy: mod.doh_resolver_policy ?? 'primary_only'
+		};
+	}
+
+	$effect(() => {
+		if (!open) {
+			initKey = '';
+			return;
+		}
+		const nextKey = mod.id;
+		if (nextKey !== initKey) {
+			initKey = nextKey;
+			resetEditForm();
+		}
+	});
+
+	function toggleEditDohProfile(id: string, checked: boolean) {
+		let ids = [...(editForm.doh_profile_ids ?? [])];
+		if (checked) {
+			if (!ids.includes(id)) ids.push(id);
+		} else {
+			ids = ids.filter((x) => x !== id);
+		}
+		editForm = { ...editForm, doh_profile_ids: ids };
+	}
+
+	function isEditDohProfileSelected(id: string): boolean {
+		return (editForm.doh_profile_ids ?? []).includes(id);
+	}
+
+	async function saveMod() {
+		editSaving = true;
+		try {
+			const cron =
+				typeof editForm.cron_expr === 'string' ? editForm.cron_expr.trim() : editForm.cron_expr;
+			const intervalRaw = editForm.refresh_interval_sec;
+			const interval =
+				intervalRaw === null || intervalRaw === undefined ? null : Number(intervalRaw);
+			const payload: ModulePatch = {
+				...editForm,
+				cron_expr: cron ? cron : null,
+				refresh_interval_sec: Number.isFinite(interval) ? interval : null,
+				default_community_id: fromNullableSelect(
+					nullableSelectValue(editForm.default_community_id)
+				),
+				doh_profile_ids: editForm.doh_profile_ids ?? [],
+				doh_resolver_policy: editForm.doh_resolver_policy ?? 'primary_only'
+			};
+			await apiMutate<ModuleRow>(`/v1/modules/${moduleId}`, 'PATCH', payload);
+			notify.success('Модуль обновлён');
+			open = false;
+			await onSaved();
+		} catch (e) {
+			notifyApiError(e);
+		} finally {
+			editSaving = false;
+		}
+	}
+
+	function handleOpenChange(next: boolean) {
+		open = next;
+		if (!next) onClose();
+	}
+</script>
+
+<Dialog bind:open onOpenChange={handleOpenChange}>
+	<DialogContent class="sm:max-w-md">
+		<DialogHeader>
+			<DialogTitle>Редактировать модуль</DialogTitle>
+		</DialogHeader>
+		<div class="space-y-4 py-2">
+			<div class="space-y-1.5">
+				<Label for="e-name">Название</Label>
+				<Input id="e-name" bind:value={editForm.name} />
+			</div>
+			<div class="grid grid-cols-2 gap-4">
+				<div class="space-y-1.5">
+					<Label for="e-priority">Приоритет</Label>
+					<Input id="e-priority" type="number" bind:value={editForm.priority} />
+				</div>
+				<div class="space-y-1.5">
+					<Label for="e-interval">Интервал (сек)</Label>
+					<Input id="e-interval" type="number" bind:value={editForm.refresh_interval_sec} />
+				</div>
+			</div>
+			<div class="space-y-1.5">
+				<Label for="e-cron">Cron-выражение</Label>
+				<Input id="e-cron" placeholder="0 */6 * * *" bind:value={editForm.cron_expr} />
+			</div>
+			<div class="space-y-1.5">
+				<Label for="e-comm">Community по умолчанию</Label>
+				<Select
+					type="single"
+					value={nullableSelectValue(editForm.default_community_id)}
+					onValueChange={(v) => {
+						editForm.default_community_id = fromNullableSelect(v);
+					}}
+				>
+					<SelectTrigger id="e-comm" class="w-full">
+						{editForm.default_community_id
+							? communityLabel(editForm.default_community_id, communities)
+							: 'Не выбрано'}
+					</SelectTrigger>
+					<SelectContent>
+						<SelectItem value={NONE_OPTION}>Не выбрано</SelectItem>
+						{#each communities as c (c.id)}
+							<SelectItem value={c.id}>{communityOptionLabel(c)}</SelectItem>
+						{/each}
+					</SelectContent>
+				</Select>
+				<Button
+					type="button"
+					variant="ghost"
+					size="sm"
+					class="h-7 px-2"
+					onclick={() => {
+						editForm.default_community_id = null;
+					}}
+				>
+					Сбросить
+				</Button>
+			</div>
+			{#if mod.type === 'DOMAINS'}
+				<div class="space-y-1.5">
+					<Label for="e-doh-policy">Политика DoH</Label>
+					<Select
+						type="single"
+						value={editForm.doh_resolver_policy ?? 'primary_only'}
+						onValueChange={(v) => {
+							if (v) editForm.doh_resolver_policy = v as DohResolverPolicy;
+						}}
+					>
+						<SelectTrigger id="e-doh-policy" class="w-full">
+							{dohPolicyRu(editForm.doh_resolver_policy)}
+						</SelectTrigger>
+						<SelectContent>
+							{#each dohPolicyOptions as opt (opt.value)}
+								<SelectItem value={opt.value}>{opt.label}</SelectItem>
+							{/each}
+						</SelectContent>
+					</Select>
+					<p class="text-xs text-muted-foreground">
+						{dohPolicyOptions.find(
+							(o) => o.value === (editForm.doh_resolver_policy ?? 'primary_only')
+						)?.hint}
+					</p>
+				</div>
+				<div class="space-y-2">
+					<Label>DoH-профили</Label>
+					<p class="text-xs text-muted-foreground">
+						Порядок выбора = порядок в списке (сверху вниз).
+					</p>
+					<div class="max-h-40 space-y-2 overflow-y-auto rounded-md border p-3">
+						{#each dohProfiles as d (d.id)}
+							<label class="flex items-start gap-2 text-sm">
+								<Checkbox
+									checked={isEditDohProfileSelected(d.id)}
+									onCheckedChange={(v) => toggleEditDohProfile(d.id, v === true)}
+								/>
+								<span class="min-w-0 break-all">
+									<span class="font-medium">{d.name?.trim() ? d.name : d.url}</span>
+									{#if d.name?.trim()}
+										<span class="block font-mono text-xs text-muted-foreground">{d.url}</span>
+									{/if}
+								</span>
+							</label>
+						{:else}
+							<p class="text-xs text-muted-foreground">Нет профилей — создайте в справочниках.</p>
+						{/each}
+					</div>
+					<Button
+						type="button"
+						variant="ghost"
+						size="sm"
+						class="h-7 px-2"
+						onclick={() => {
+							editForm = { ...editForm, doh_profile_ids: [] };
+						}}
+					>
+						Сбросить профили
+					</Button>
+				</div>
+			{/if}
+			<div
+				class="flex flex-row items-center justify-between gap-4 rounded-lg border border-border bg-muted/30 p-3"
+			>
+				<div class="grid min-w-0 flex-1 gap-1 pr-2">
+					<Label for="e-enabled" class="leading-snug text-foreground">Включён</Label>
+					<p class="text-xs leading-snug text-muted-foreground">
+						Отключённые модули не участвуют в обновлении конфигурации.
+					</p>
+				</div>
+				<Switch
+					id="e-enabled"
+					class="shrink-0"
+					checked={editForm.enabled !== false}
+					onCheckedChange={(v) => {
+						editForm = { ...editForm, enabled: v };
+					}}
+				/>
+			</div>
+		</div>
+		<DialogFooter>
+			<Button variant="outline" onclick={() => handleOpenChange(false)}>Отмена</Button>
+			<Button onclick={saveMod} disabled={editSaving}>
+				{editSaving ? 'Сохранение…' : 'Сохранить'}
+			</Button>
+		</DialogFooter>
+	</DialogContent>
+</Dialog>

web/src/lib/components/modules/ModuleIpRangeEntryDialog.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+	import { apiMutate } from '$lib/api/client.js';
+	import type { BgpCommunity, IpRangeEntry, IpRangeEntryCreate } from '$lib/api/types.js';
+	import { communityLabel, communityOptionLabel } from '$lib/components/modules/module-helpers.js';
+	import { Button } from '$lib/ui/core/button/index.js';
+	import { Input } from '$lib/ui/core/input/index.js';
+	import { Label } from '$lib/ui/core/label/index.js';
+	import {
+		Dialog,
+		DialogContent,
+		DialogHeader,
+		DialogTitle,
+		DialogFooter
+	} from '$lib/ui/core/dialog/index.js';
+	import { Select, SelectContent, SelectItem, SelectTrigger } from '$lib/ui/core/select/index.js';
+	import { notify, notifyApiError } from '$lib/ui/app/toast.js';
+
+	type Props = {
+		open: boolean;
+		moduleId: string;
+		edit: IpRangeEntry | null;
+		communities: BgpCommunity[];
+		onSaved: () => void | Promise<void>;
+		onClose: () => void;
+	};
+
+	let { open = $bindable(), moduleId, edit, communities, onSaved, onClose }: Props = $props();
+
+	let saving = $state(false);
+	let form = $state<IpRangeEntryCreate>({ prefix: '', community_id: '' });
+	let initKey = $state('');
+
+	function resetForm() {
+		form = edit
+			? { prefix: edit.prefix, community_id: edit.community_id }
+			: { prefix: '', community_id: '' };
+	}
+
+	$effect(() => {
+		if (!open) {
+			initKey = '';
+			return;
+		}
+		const nextKey = edit?.id ?? 'new';
+		if (nextKey !== initKey) {
+			initKey = nextKey;
+			resetForm();
+		}
+	});
+
+	async function save() {
+		saving = true;
+		try {
+			if (edit) {
+				await apiMutate(`/v1/modules/${moduleId}/ip-range-entries/${edit.id}`, 'PATCH', form);
+				notify.success('Диапазон обновлён');
+			} else {
+				await apiMutate(`/v1/modules/${moduleId}/ip-range-entries`, 'POST', form);
+				notify.success('Диапазон добавлен');
+			}
+			open = false;
+			await onSaved();
+		} catch (e) {
+			notifyApiError(e);
+		} finally {
+			saving = false;
+		}
+	}
+
+	function handleOpenChange(next: boolean) {
+		open = next;
+		if (!next) onClose();
+	}
+</script>
+
+<Dialog bind:open onOpenChange={handleOpenChange}>
+	<DialogContent class="sm:max-w-sm">
+		<DialogHeader>
+			<DialogTitle>{edit ? 'Редактировать диапазон' : 'Новый IP-диапазон'}</DialogTitle>
+		</DialogHeader>
+		<div class="space-y-4 py-2">
+			<div class="space-y-1.5">
+				<Label for="ip-prefix">Префикс (CIDR)</Label>
+				<Input id="ip-prefix" placeholder="203.0.113.0/24" bind:value={form.prefix} />
+			</div>
+			<div class="space-y-1.5">
+				<Label for="ip-comm">Community (обязательно)</Label>
+				<Select
+					type="single"
+					value={form.community_id}
+					onValueChange={(v) => {
+						form.community_id = v;
+					}}
+				>
+					<SelectTrigger id="ip-comm" class="w-full">
+						{form.community_id
+							? communityLabel(form.community_id, communities)
+							: 'Выберите community'}
+					</SelectTrigger>
+					<SelectContent>
+						{#each communities as c (c.id)}
+							<SelectItem value={c.id}>{communityOptionLabel(c)}</SelectItem>
+						{/each}
+					</SelectContent>
+				</Select>
+			</div>
+		</div>
+		<DialogFooter>
+			<Button variant="outline" onclick={() => handleOpenChange(false)}>Отмена</Button>
+			<Button onclick={save} disabled={saving}>
+				{saving ? 'Сохранение…' : edit ? 'Сохранить' : 'Добавить'}
+			</Button>
+		</DialogFooter>
+	</DialogContent>
+</Dialog>

web/src/lib/components/modules/ModuleIpRangesCard.svelte

@@ -0,0 +1,310 @@
+<script lang="ts">
+	import { apiFetch, apiMutate } from '$lib/api/client.js';
+	import type { BgpCommunity, IpRangeEntry, ModuleRow } from '$lib/api/types.js';
+	import {
+		communityLabel,
+		sanitizeFilenamePart,
+		supportsCsvIO
+	} from '$lib/components/modules/module-helpers.js';
+	import { Button } from '$lib/ui/core/button/index.js';
+	import { Checkbox } from '$lib/ui/core/checkbox/index.js';
+	import {
+		Card,
+		CardContent,
+		CardHeader,
+		CardTitle,
+		CardDescription
+	} from '$lib/ui/core/card/index.js';
+	import AppDataTable from '$lib/ui/patterns/data-table/app-data-table.svelte';
+	import { confirm } from '$lib/ui/patterns/confirm/confirm-state.svelte.js';
+	import { notify, notifyApiError } from '$lib/ui/app/toast.js';
+	import ModuleIpRangeEntryDialog from '$lib/components/modules/ModuleIpRangeEntryDialog.svelte';
+	import Plus from '@lucide/svelte/icons/plus';
+	import Pencil from '@lucide/svelte/icons/pencil';
+	import Trash2 from '@lucide/svelte/icons/trash-2';
+	import Upload from '@lucide/svelte/icons/upload';
+	import Download from '@lucide/svelte/icons/download';
+
+	type Props = {
+		moduleId: string;
+		mod: ModuleRow;
+		entries: IpRangeEntry[];
+		communities: BgpCommunity[];
+		loading?: boolean;
+		onChanged: () => void | Promise<void>;
+	};
+
+	let { moduleId, mod, entries, communities, loading = false, onChanged }: Props = $props();
+
+	let dialogOpen = $state(false);
+	let editTarget = $state<IpRangeEntry | null>(null);
+	let selectedIds = $state(new Set<string>());
+	let deletingBulk = $state(false);
+	let csvImporting = $state(false);
+	let csvExporting = $state(false);
+	let csvFileInput = $state<HTMLInputElement | null>(null);
+
+	const activeSelected = $derived.by(() => {
+		const allowed = new Set(entries.map((e) => e.id));
+		return [...selectedIds].filter((id) => allowed.has(id));
+	});
+	const selectedCount = $derived(activeSelected.length);
+	const allSelected = $derived(entries.length > 0 && entries.every((e) => selectedIds.has(e.id)));
+
+	const columns = [
+		{ id: 'select', label: '', class: 'w-10' },
+		{
+			id: 'prefix',
+			label: 'Префикс (CIDR)',
+			sortable: true,
+			sortValue: (e: IpRangeEntry) => e.prefix
+		},
+		{ id: 'community', label: 'Community' },
+		{ id: 'actions', label: '', class: 'w-20' }
+	] as const;
+
+	function toggleSelection(id: string) {
+		const next = new Set(selectedIds);
+		if (next.has(id)) next.delete(id);
+		else next.add(id);
+		selectedIds = next;
+	}
+
+	function toggleAll(checked: boolean) {
+		selectedIds = checked ? new Set(entries.map((e) => e.id)) : new Set<string>();
+	}
+
+	function openCreate() {
+		editTarget = null;
+		dialogOpen = true;
+	}
+
+	function openEdit(entry: IpRangeEntry) {
+		editTarget = entry;
+		dialogOpen = true;
+	}
+
+	function requestDelete(entry: IpRangeEntry) {
+		void confirm({
+			title: 'Удалить диапазон?',
+			description: entry.prefix,
+			confirmLabel: 'Удалить',
+			destructive: true,
+			onConfirm: async () => {
+				await apiMutate(
+					`/v1/modules/${moduleId}/ip-range-entries/${entry.id}`,
+					'DELETE',
+					undefined,
+					{ idempotent: false }
+				);
+				notify.success('Удалено');
+				await onChanged();
+			}
+		});
+	}
+
+	function requestBulkDelete() {
+		if (selectedCount === 0) return;
+		void confirm({
+			title: 'Удалить выбранные диапазоны?',
+			description: `Будет удалено: ${selectedCount}`,
+			confirmLabel: 'Удалить',
+			destructive: true,
+			onConfirm: bulkDelete
+		});
+	}
+
+	async function bulkDelete() {
+		if (selectedCount === 0) return;
+		deletingBulk = true;
+		let deleted = 0;
+		try {
+			for (const id of activeSelected) {
+				try {
+					await apiMutate(`/v1/modules/${moduleId}/ip-range-entries/${id}`, 'DELETE', undefined, {
+						idempotent: false
+					});
+					deleted += 1;
+				} catch (e) {
+					notifyApiError(e);
+				}
+			}
+			if (deleted > 0) notify.success(`Удалено диапазонов: ${deleted}`);
+			await onChanged();
+		} finally {
+			deletingBulk = false;
+		}
+	}
+
+	async function readErrorText(res: Response): Promise<string> {
+		const body = (await res.text()).trim();
+		return body || `HTTP ${res.status}`;
+	}
+
+	async function exportCsv() {
+		if (!supportsCsvIO(mod.type) || csvExporting) return;
+		csvExporting = true;
+		try {
+			const res = await apiFetch(`/v1/modules/${moduleId}/entries.csv`, {
+				method: 'GET',
+				headers: { Accept: 'text/csv' }
+			});
+			if (!res.ok) {
+				notify.error(await readErrorText(res));
+				return;
+			}
+			const blob = await res.blob();
+			const url = URL.createObjectURL(blob);
+			const a = document.createElement('a');
+			a.href = url;
+			a.download = `${sanitizeFilenamePart(mod.name)}-${mod.type.toLowerCase()}-entries.csv`;
+			document.body.appendChild(a);
+			a.click();
+			a.remove();
+			URL.revokeObjectURL(url);
+		} catch (e) {
+			notifyApiError(e);
+		} finally {
+			csvExporting = false;
+		}
+	}
+
+	function openImportPicker() {
+		if (!supportsCsvIO(mod.type) || csvImporting) return;
+		csvFileInput?.click();
+	}
+
+	async function handleImportChange(event: Event) {
+		const input = event.currentTarget as HTMLInputElement | null;
+		const file = input?.files?.[0];
+		if (!file || csvImporting) return;
+		csvImporting = true;
+		try {
+			const fileText = await file.text();
+			const res = await apiFetch(`/v1/modules/${moduleId}/entries.csv`, {
+				method: 'POST',
+				headers: { 'Content-Type': 'text/csv' },
+				body: fileText
+			});
+			if (!res.ok) {
+				notify.error(await readErrorText(res));
+				return;
+			}
+			const payload = (await res.json()) as { imported?: number };
+			notify.success(`Импортировано записей: ${payload.imported ?? 0}`);
+			await onChanged();
+		} catch (e) {
+			notifyApiError(e);
+		} finally {
+			csvImporting = false;
+			if (input) input.value = '';
+		}
+	}
+</script>
+
+<input
+	class="hidden"
+	type="file"
+	accept=".csv,text/csv"
+	bind:this={csvFileInput}
+	onchange={handleImportChange}
+/>
+
+<Card>
+	<CardHeader class="flex flex-col gap-3 pb-2 sm:flex-row sm:items-center sm:justify-between">
+		<div class="min-w-0 flex-1">
+			<CardTitle class="text-base">IP-диапазоны</CardTitle>
+			<CardDescription>Статические CIDR для анонса.</CardDescription>
+		</div>
+		<div class="flex shrink-0 flex-wrap items-center justify-end gap-2 self-start sm:self-auto">
+			<Button
+				variant="outline"
+				size="sm"
+				onclick={openImportPicker}
+				disabled={!supportsCsvIO(mod.type) || csvImporting || csvExporting}
+			>
+				<Upload />
+				{csvImporting ? 'Импорт…' : 'Импорт CSV'}
+			</Button>
+			<Button
+				variant="outline"
+				size="sm"
+				onclick={exportCsv}
+				disabled={!supportsCsvIO(mod.type) || csvExporting || csvImporting}
+			>
+				<Download />
+				{csvExporting ? 'Экспорт…' : 'Экспорт CSV'}
+			</Button>
+			<Button size="sm" onclick={openCreate}><Plus />Добавить</Button>
+			{#if selectedCount > 0}
+				<Button variant="destructive" size="sm" onclick={requestBulkDelete} disabled={deletingBulk}>
+					<Trash2 />
+					Удалить ({selectedCount})
+				</Button>
+			{/if}
+		</div>
+	</CardHeader>
+	<CardContent class="p-4 pt-0">
+		<AppDataTable
+			columns={[...columns]}
+			rows={entries}
+			rowKey={(e) => e.id}
+			{loading}
+			emptyTitle="Нет диапазонов"
+			emptyDescription="Добавьте CIDR или импортируйте CSV."
+		>
+			{#snippet toolbar()}
+				{#if entries.length > 0}
+					<div class="flex items-center gap-2">
+						<Checkbox
+							checked={allSelected}
+							onCheckedChange={(v) => toggleAll(v === true)}
+							aria-label="Выбрать все диапазоны"
+						/>
+						<span class="text-sm text-muted-foreground">Выбрать все</span>
+					</div>
+				{/if}
+			{/snippet}
+			{#snippet cell({ row: entry, column })}
+				{#if column.id === 'select'}
+					<Checkbox
+						checked={selectedIds.has(entry.id)}
+						aria-label={`Выбрать диапазон ${entry.prefix}`}
+						onCheckedChange={() => toggleSelection(entry.id)}
+					/>
+				{:else if column.id === 'prefix'}
+					<span class="font-mono">{entry.prefix}</span>
+				{:else if column.id === 'community'}
+					<span class="text-sm text-muted-foreground">
+						{communityLabel(entry.community_id, communities)}
+					</span>
+				{:else if column.id === 'actions'}
+					<div class="flex gap-1">
+						<Button variant="ghost" size="icon-sm" onclick={() => openEdit(entry)}>
+							<Pencil class="size-3.5" />
+						</Button>
+						<Button
+							variant="ghost"
+							size="icon-sm"
+							class="text-destructive"
+							onclick={() => requestDelete(entry)}
+						>
+							<Trash2 class="size-3.5" />
+						</Button>
+					</div>
+				{/if}
+			{/snippet}
+		</AppDataTable>
+	</CardContent>
+</Card>
+
+<ModuleIpRangeEntryDialog
+	bind:open={dialogOpen}
+	{moduleId}
+	edit={editTarget}
+	{communities}
+	onSaved={onChanged}
+	onClose={() => {
+		editTarget = null;
+	}}
+/>

web/src/lib/components/modules/ModuleKpiCards.svelte

@@ -0,0 +1,155 @@
+<script lang="ts">
+	import type { AsEntry, BgpCommunity, DohProfile, ModuleRow } from '$lib/api/types.js';
+	import { formatDateTime, moduleIntervalLabel } from '$lib/modules/display.js';
+	import { dohPolicyRu } from '$lib/ui-labels.js';
+	import {
+		communityLabel,
+		dohProfileLabel,
+		moduleDohProfileIds
+	} from '$lib/components/modules/module-helpers.js';
+	import { Card, CardContent, CardHeader, CardTitle } from '$lib/ui/core/card/index.js';
+	import CardSkeleton from '$lib/ui/patterns/feedback/card-skeleton.svelte';
+	import { cn } from '$lib/utils.js';
+	import ArrowDownUp from '@lucide/svelte/icons/arrow-down-up';
+	import Timer from '@lucide/svelte/icons/timer';
+	import ShieldCheck from '@lucide/svelte/icons/shield-check';
+	import Network from '@lucide/svelte/icons/network';
+	import RefreshCw from '@lucide/svelte/icons/refresh-cw';
+
+	type Props = {
+		mod: ModuleRow | null;
+		communities: BgpCommunity[];
+		dohProfiles: DohProfile[];
+		asEntries: AsEntry[];
+		loading?: boolean;
+	};
+
+	let { mod, communities, dohProfiles, asEntries, loading = false }: Props = $props();
+
+	const asPrefixTotal = $derived(
+		asEntries.reduce((acc, entry) => acc + (entry.prefix_count ?? 0), 0)
+	);
+
+	const statAccents = [
+		{
+			border: 'border-l-chart-3',
+			bg: 'bg-chart-3/5',
+			iconBg: 'bg-chart-3/15',
+			iconText: 'text-chart-3'
+		},
+		{
+			border: 'border-l-chart-5',
+			bg: 'bg-chart-5/5',
+			iconBg: 'bg-chart-5/15',
+			iconText: 'text-chart-5'
+		},
+		{
+			border: 'border-l-chart-4',
+			bg: 'bg-chart-4/5',
+			iconBg: 'bg-chart-4/15',
+			iconText: 'text-chart-4'
+		},
+		{
+			border: 'border-l-chart-2',
+			bg: 'bg-chart-2/5',
+			iconBg: 'bg-chart-2/15',
+			iconText: 'text-chart-2'
+		},
+		{
+			border: 'border-l-muted-foreground',
+			bg: 'bg-muted/30',
+			iconBg: 'bg-muted',
+			iconText: 'text-muted-foreground'
+		}
+	] as const;
+
+	const kpiCards = $derived.by(() => {
+		if (!mod) return [];
+		const dohIds = moduleDohProfileIds(mod);
+		return [
+			{
+				id: 'priority',
+				label: 'Приоритет',
+				value: String(mod.priority ?? 0),
+				description: 'порядок в сборке ревизии',
+				icon: ArrowDownUp,
+				accent: statAccents[0]
+			},
+			{
+				id: 'interval',
+				label: 'Интервал',
+				value: moduleIntervalLabel(mod),
+				description: 'refresh_interval_sec / cron',
+				icon: Timer,
+				accent: statAccents[1],
+				mono: true
+			},
+			{
+				id: 'doh',
+				label: 'DoH',
+				value: mod.type === 'DOMAINS' ? dohPolicyRu(mod.doh_resolver_policy) : '—',
+				description:
+					mod.type === 'DOMAINS'
+						? dohIds.length
+							? dohIds.map((id) => dohProfileLabel(id, dohProfiles)).join('; ')
+							: 'Системный DNS'
+						: 'не применимо',
+				icon: Network,
+				accent: statAccents[2]
+			},
+			{
+				id: 'community',
+				label: 'Community по умолч.',
+				value: communityLabel(mod.default_community_id, communities),
+				description: 'для записей без своего community',
+				icon: ShieldCheck,
+				accent: statAccents[3]
+			},
+			{
+				id: 'refreshed',
+				label: 'Последнее обновление',
+				value: formatDateTime(mod.last_refreshed_at),
+				description:
+					mod.type === 'AS_PREFIXES'
+						? `ASN: ${asEntries.length}, префиксов: ${asPrefixTotal}`
+						: 'время последнего refresh',
+				icon: RefreshCw,
+				accent: statAccents[4]
+			}
+		];
+	});
+</script>
+
+<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-5">
+	{#if loading}
+		{#each Array(5) as _, i (i)}
+			<CardSkeleton />
+		{/each}
+	{:else}
+		{#each kpiCards as card (card.id)}
+			{@const Icon = card.icon}
+			{@const a = card.accent}
+			<Card class={cn('overflow-hidden border-l-4 shadow-sm', a.border, a.bg)}>
+				<CardHeader class="pb-2">
+					<p class="flex items-center gap-1.5 text-xs text-muted-foreground">
+						<span
+							class={cn('flex size-7 shrink-0 items-center justify-center rounded-md', a.iconBg)}
+							aria-hidden="true"
+						>
+							<Icon class={cn('size-3.5', a.iconText)} />
+						</span>
+						{card.label}
+					</p>
+					<CardTitle
+						class={cn('text-base font-semibold break-all', card.mono ? 'font-mono text-sm' : '')}
+					>
+						{card.value}
+					</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<p class="line-clamp-2 text-xs text-muted-foreground">{card.description}</p>
+				</CardContent>
+			</Card>
+		{/each}
+	{/if}
+</div>

web/src/lib/components/modules/ModuleSummaryCard.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+	import { resolve } from '$app/paths';
+	import type { AsEntry, CdnSource, DomainEntry, IpRangeEntry, ModuleRow } from '$lib/api/types.js';
+	import { Button } from '$lib/ui/core/button/index.js';
+	import {
+		Card,
+		CardContent,
+		CardHeader,
+		CardTitle,
+		CardDescription
+	} from '$lib/ui/core/card/index.js';
+
+	type Props = {
+		mod: ModuleRow;
+		asEntries: AsEntry[];
+		cdnSources: CdnSource[];
+		domainEntries: DomainEntry[];
+		ipEntries: IpRangeEntry[];
+	};
+
+	let { mod, asEntries, cdnSources, domainEntries, ipEntries }: Props = $props();
+
+	const asPrefixTotal = $derived(
+		asEntries.reduce((acc, entry) => acc + (entry.prefix_count ?? 0), 0)
+	);
+</script>
+
+<Card>
+	<CardHeader>
+		<CardTitle class="text-base">Операционный отчёт модуля</CardTitle>
+		<CardDescription>
+			Читаемая сводка по данным модуля: источники, объёмы и ожидаемый результат для
+			refresh/агрегации.
+		</CardDescription>
+	</CardHeader>
+	<CardContent class="grid gap-3 md:grid-cols-2">
+		{#if mod.type === 'DOMAINS'}
+			<div class="rounded-lg border p-3">
+				<p class="text-sm font-medium">Домены и ожидаемые IP</p>
+				<p class="text-xs text-muted-foreground">
+					После refresh домены резолвятся в IP и конвертируются в префиксы.
+				</p>
+				<div class="mt-2 space-y-1">
+					{#each domainEntries.slice(0, 8) as entry (entry.id)}
+						<p class="font-mono text-xs break-all">{entry.fqdn}</p>
+					{:else}
+						<p class="text-xs text-muted-foreground">Нет доменов</p>
+					{/each}
+					{#if domainEntries.length > 8}
+						<p class="text-xs text-muted-foreground">…и ещё {domainEntries.length - 8}</p>
+					{/if}
+				</div>
+			</div>
+		{:else if mod.type === 'AS_PREFIXES'}
+			<div class="rounded-lg border p-3">
+				<p class="text-sm font-medium">ASN и число полученных префиксов</p>
+				<p class="text-xs text-muted-foreground">
+					Счётчик префиксов обновляется после успешного refresh (RIPEstat).
+				</p>
+				<div class="mt-2 space-y-1">
+					<p class="text-xs">
+						Всего ASN: <span class="font-semibold">{asEntries.length}</span>
+					</p>
+					<p class="text-xs">
+						Сумма префиксов: <span class="font-semibold">{asPrefixTotal}</span>
+					</p>
+				</div>
+			</div>
+		{:else if mod.type === 'CDN_CIDRS'}
+			<div class="rounded-lg border p-3">
+				<p class="text-sm font-medium">CDN ссылки и импортируемые префиксы</p>
+				<p class="text-xs text-muted-foreground">
+					Каждый URL поставляет список CIDR для агрегации.
+				</p>
+				<div class="mt-2 space-y-1">
+					{#each cdnSources.slice(0, 6) as src (src.id)}
+						<p class="font-mono text-xs break-all">{src.url}</p>
+					{:else}
+						<p class="text-xs text-muted-foreground">Нет CDN источников</p>
+					{/each}
+					{#if cdnSources.length > 6}
+						<p class="text-xs text-muted-foreground">…и ещё {cdnSources.length - 6}</p>
+					{/if}
+				</div>
+			</div>
+		{:else if mod.type === 'IP_RANGES'}
+			<div class="rounded-lg border p-3">
+				<p class="text-sm font-medium">IP ranges для агрегации</p>
+				<p class="text-xs text-muted-foreground">
+					Статические CIDR, которые попадают в итоговую ревизию.
+				</p>
+				<div class="mt-2 space-y-1">
+					{#each ipEntries.slice(0, 8) as entry (entry.id)}
+						<p class="font-mono text-xs">{entry.prefix}</p>
+					{:else}
+						<p class="text-xs text-muted-foreground">Нет диапазонов</p>
+					{/each}
+					{#if ipEntries.length > 8}
+						<p class="text-xs text-muted-foreground">…и ещё {ipEntries.length - 8}</p>
+					{/if}
+				</div>
+			</div>
+		{/if}
+		<div class="rounded-lg border p-3">
+			<p class="text-sm font-medium">Результат операции</p>
+			<p class="text-xs text-muted-foreground">
+				Подробный результат по конкретному запуску refresh смотрите в Операции → Задачи →
+				module_refresh: там отображаются источники, количество префиксов и итог агрегации.
+			</p>
+			<Button variant="link" class="mt-2 h-auto p-0" href={resolve('/operations?tab=jobs')}>
+				Открыть задачи
+			</Button>
+		</div>
+	</CardContent>
+</Card>

web/src/lib/components/modules/module-helpers.ts

@@ -0,0 +1,60 @@
+import type { BgpCommunity, DohProfile, ModuleRow } from '$lib/api/types.js';
+
+export const NONE_OPTION = '__none__';
+
+export function supportsCsvIO(type: ModuleRow['type'] | null | undefined): boolean {
+	return type === 'AS_PREFIXES' || type === 'DOMAINS' || type === 'IP_RANGES';
+}
+
+export function sanitizeFilenamePart(v: string): string {
+	const cleaned = v
+		.trim()
+		.toLowerCase()
+		.replace(/[^a-z0-9._-]+/g, '-')
+		.replace(/-+/g, '-')
+		.replace(/^[-_.]+|[-_.]+$/g, '');
+	return cleaned || 'module';
+}
+
+export function communityLabel(id: string | null, communities: BgpCommunity[]): string {
+	if (!id) return '—';
+	const c = communities.find((x) => x.id === id);
+	if (!c) return id.slice(0, 8) + '…';
+	const t = c.title?.trim();
+	return t || c.community;
+}
+
+export function communityOptionLabel(c: BgpCommunity): string {
+	const t = c.title?.trim();
+	return t || c.community;
+}
+
+export function nullableSelectValue(value: string | null | undefined): string {
+	if (value === null || value === undefined || value === '') return NONE_OPTION;
+	return value;
+}
+
+export function fromNullableSelect(value: string): string | null {
+	if (value === NONE_OPTION || value === '') return null;
+	return value;
+}
+
+export function moduleDohProfileIds(modRow: ModuleRow | null): string[] {
+	if (!modRow) return [];
+	if (modRow.doh_profile_ids?.length) return modRow.doh_profile_ids;
+	return modRow.doh_profile_id ? [modRow.doh_profile_id] : [];
+}
+
+export function dohProfileLabel(id: string, dohProfiles: DohProfile[]): string {
+	const p = dohProfiles.find((d) => d.id === id);
+	return p ? (p.name?.trim() ? `${p.name} (${p.url})` : p.url) : id.slice(0, 8) + '…';
+}
+
+export function normalizeCdnSourceKind(k: string): 'plaintext' | 'json' {
+	return k.trim().toLowerCase() === 'json' ? 'json' : 'plaintext';
+}
+
+export function syncSelection(selected: Set<string>, existingIds: string[]): Set<string> {
+	const validIds = new Set(existingIds);
+	return new Set([...selected].filter((id) => validIds.has(id)));
+}

web/src/lib/components/operations/OperationsDiffTab.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
 	import type { RevisionDiff, RevisionPrefix, RevisionRow } from '$lib/api/types.js';
-	import { Button } from '$lib/components/ui/button/index.js';
+	import { Button } from '$lib/ui/core/button/index.js';
 	import {
 		Card,
 		CardContent,
 		CardDescription,
 		CardHeader,
 		CardTitle
-	} from '$lib/components/ui/card/index.js';
+	} from '$lib/ui/core/card/index.js';
+	import { Select, SelectContent, SelectItem, SelectTrigger } from '$lib/ui/core/select/index.js';
+	import { formatDateTime } from '$lib/modules/display.js';
 	import { sortRevisionDiffItems } from '$lib/sort-prefixes.js';
 
 	type Props = {
@@ -19,7 +21,6 @@
 		onDiffRevAChange: (value: string) => void;
 		onDiffRevBChange: (value: string) => void;
 		onLoadDiff: () => void;
-		formatDate: (d?: string | null) => string;
 	};
 
 	let {
@@ -30,11 +31,13 @@
 		diffLoading,
 		onDiffRevAChange,
 		onDiffRevBChange,
-		onLoadDiff,
+		onLoadDiff
-		formatDate
 	}: Props = $props();
 
-	/** Бэкенд отдаёт `prefixes.added` / `prefixes.removed`; верхний уровень added/removed — опционально. */
+	function revisionLabel(rev: RevisionRow): string {
+		return `${rev.id.slice(0, 8)}… (${formatDateTime(rev.created_at)})`;
+	}
+
 	function diffAddedRaw(d: RevisionDiff | null): (string | RevisionPrefix)[] {
 		if (!d) return [];
 		if (d.prefixes && Array.isArray(d.prefixes.added)) return d.prefixes.added;
@@ -82,26 +85,36 @@
 	</CardHeader>
 	<CardContent class="min-h-0 space-y-4">
 		<div class="flex flex-col gap-2 sm:flex-row">
-			<select
+			<Select type="single" value={diffRevA} onValueChange={(v) => onDiffRevAChange(v ?? '')}>
-				value={diffRevA}
+				<SelectTrigger class="min-w-0 flex-1">
-				onchange={(e) => onDiffRevAChange((e.currentTarget as HTMLSelectElement).value)}
+					{diffRevA
-				class="h-8 min-w-0 flex-1 rounded-md border border-border bg-background px-2 text-sm"
+						? revisions.find((r) => r.id === diffRevA)
-			>
+							? revisionLabel(revisions.find((r) => r.id === diffRevA)!)
-				<option value="">Ревизия A</option>
+							: diffRevA
-				{#each revisions as rev (rev.id)}
+						: 'Ревизия A'}
-					<option value={rev.id}>{rev.id.slice(0, 8)}… ({formatDate(rev.created_at)})</option>
+				</SelectTrigger>
-				{/each}
+				<SelectContent>
-			</select>
+					<SelectItem value="">Ревизия A</SelectItem>
-			<select
+					{#each revisions as rev (rev.id)}
-				value={diffRevB}
+						<SelectItem value={rev.id}>{revisionLabel(rev)}</SelectItem>
-				onchange={(e) => onDiffRevBChange((e.currentTarget as HTMLSelectElement).value)}
+					{/each}
-				class="h-8 min-w-0 flex-1 rounded-md border border-border bg-background px-2 text-sm"
+				</SelectContent>
-			>
+			</Select>
-				<option value="">Ревизия B</option>
+			<Select type="single" value={diffRevB} onValueChange={(v) => onDiffRevBChange(v ?? '')}>
-				{#each revisions as rev (rev.id)}
+				<SelectTrigger class="min-w-0 flex-1">
-					<option value={rev.id}>{rev.id.slice(0, 8)}… ({formatDate(rev.created_at)})</option>
+					{diffRevB
-				{/each}
+						? revisions.find((r) => r.id === diffRevB)
-			</select>
+							? revisionLabel(revisions.find((r) => r.id === diffRevB)!)
+							: diffRevB
+						: 'Ревизия B'}
+				</SelectTrigger>
+				<SelectContent>
+					<SelectItem value="">Ревизия B</SelectItem>
+					{#each revisions as rev (rev.id)}
+						<SelectItem value={rev.id}>{revisionLabel(rev)}</SelectItem>
+					{/each}
+				</SelectContent>
+			</Select>
 			<Button
 				size="sm"
 				class="shrink-0 self-start sm:self-auto"
@@ -117,10 +130,9 @@
 				class="grid min-h-0 grid-cols-1 overflow-hidden rounded-md border border-border sm:grid-cols-2"
 				style="scrollbar-gutter: stable;"
 			>
-				<!-- + Добавлено -->
 				<div class="flex min-h-0 min-w-0 flex-col border-b border-border sm:border-r sm:border-b-0">
 					<div
-						class="flex shrink-0 items-center border-b border-border bg-muted/60 px-3 py-2 font-mono text-xs font-semibold text-green-600 dark:text-green-400"
+						class="flex shrink-0 items-center border-b border-border bg-muted/60 px-3 py-2 font-mono text-xs font-semibold text-success"
 					>
 						<span class="mr-2 w-10 shrink-0 text-right text-muted-foreground select-none">+</span>
 						<span>Добавлено ({addedSorted.length})</span>
@@ -137,7 +149,7 @@
 								<tbody>
 									{#each addedSorted as line, i (`a-${i}-${line}`)}
 										<tr
-											class="border-b border-l-2 border-border/50 border-l-green-500/80 bg-green-500/[0.08] hover:bg-muted/30 dark:bg-green-500/15"
+											class="border-b border-l-2 border-success/30 bg-success/5 hover:bg-muted/30"
 										>
 											<td
 												class="w-10 shrink-0 border-r border-transparent py-0.5 pr-1 pl-2 text-right align-top text-[11px] text-muted-foreground tabular-nums select-none"
@@ -157,10 +169,9 @@
 					</div>
 				</div>
 
-				<!-- − Удалено -->
 				<div class="flex min-h-0 min-w-0 flex-col">
 					<div
-						class="flex shrink-0 items-center border-b border-border bg-muted/60 px-3 py-2 font-mono text-xs font-semibold text-red-600 dark:text-red-400"
+						class="flex shrink-0 items-center border-b border-border bg-muted/60 px-3 py-2 font-mono text-xs font-semibold text-destructive"
 					>
 						<span class="mr-2 w-10 shrink-0 text-right text-muted-foreground select-none">−</span>
 						<span>Удалено ({removedSorted.length})</span>
@@ -177,7 +188,7 @@
 								<tbody>
 									{#each removedSorted as line, i (`r-${i}-${line}`)}
 										<tr
-											class="border-b border-l-2 border-border/50 border-l-red-500/80 bg-red-500/[0.08] hover:bg-muted/30 dark:bg-red-500/15"
+											class="border-b border-l-2 border-destructive/30 bg-destructive/5 hover:bg-muted/30"
 										>
 											<td
 												class="w-10 shrink-0 border-r border-transparent py-0.5 pr-1 pl-2 text-right align-top text-[11px] text-muted-foreground tabular-nums select-none"

web/src/lib/components/operations/OperationsJobsFilters.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Button } from '$lib/components/ui/button/index.js';
+	import { Button } from '$lib/ui/core/button/index.js';
-	import { Input } from '$lib/components/ui/input/index.js';
+	import { Input } from '$lib/ui/core/input/index.js';
-	import { Label } from '$lib/components/ui/label/index.js';
+	import { Label } from '$lib/ui/core/label/index.js';
 	import Filter from '@lucide/svelte/icons/filter';
 	import Search from '@lucide/svelte/icons/search';
 	import X from '@lucide/svelte/icons/x';

web/src/lib/components/operations/OperationsJobsTab.svelte

@@ -2,15 +2,17 @@
 	import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 	import type { JobRow } from '$lib/api/types.js';
 	import type { JobDetailedReport, JobLogEntry } from './types.js';
-	import { Badge } from '$lib/components/ui/badge/index.js';
+	import { Badge } from '$lib/ui/core/badge/index.js';
-	import { Button } from '$lib/components/ui/button/index.js';
+	import { Button } from '$lib/ui/core/button/index.js';
 	import {
 		Card,
 		CardContent,
 		CardDescription,
 		CardHeader,
 		CardTitle
-	} from '$lib/components/ui/card/index.js';
+	} from '$lib/ui/core/card/index.js';
+	import EmptyState from '$lib/ui/patterns/empty-state/empty-state.svelte';
+	import { formatDateTime } from '$lib/modules/display.js';
 	import RefreshCw from '@lucide/svelte/icons/refresh-cw';
 	import Eye from '@lucide/svelte/icons/eye';
 	import X from '@lucide/svelte/icons/x';
@@ -49,7 +51,6 @@
 		getJobLogEntries: (job: JobRow) => JobLogEntry[];
 		getJobLogTotal: (job: JobRow, entries?: JobLogEntry[]) => number;
 		jobStatusVariant: (status: string) => 'default' | 'secondary' | 'outline' | 'destructive';
-		formatDate: (d?: string | null) => string;
 	};
 
 	let {
@@ -69,8 +70,7 @@
 		isJobExpanded,
 		getJobLogEntries,
 		getJobLogTotal,
-		jobStatusVariant,
+		jobStatusVariant
-		formatDate
 	}: Props = $props();
 
 	const reportCols = reportRowColumns as import('@tanstack/table-core').ColumnDef<
@@ -178,7 +178,7 @@
 								<CalendarClock class="size-3.5 shrink-0" aria-hidden="true" />
 								Создана
 							</p>
-							<p class="mt-1">{formatDate(job.created_at)}</p>
+							<p class="mt-1">{formatDateTime(job.created_at)}</p>
 						</div>
 						<div
 							class="rounded-md border border-chart-3/25 bg-chart-3/5 px-2.5 py-2 dark:bg-chart-3/10"
@@ -187,7 +187,7 @@
 								<PlayCircle class="size-3.5 shrink-0" aria-hidden="true" />
 								Запущена
 							</p>
-							<p class="mt-1">{formatDate(job.started_at)}</p>
+							<p class="mt-1">{formatDateTime(job.started_at)}</p>
 						</div>
 						<div
 							class="rounded-md border border-chart-4/25 bg-chart-4/5 px-2.5 py-2 dark:bg-chart-4/10"
@@ -196,7 +196,7 @@
 								<Flag class="size-3.5 shrink-0" aria-hidden="true" />
 								Завершена
 							</p>
-							<p class="mt-1">{formatDate(job.finished_at)}</p>
+							<p class="mt-1">{formatDateTime(job.finished_at)}</p>
 						</div>
 					</div>
 				</div>
@@ -450,9 +450,14 @@
 				{/if}
 			</div>
 		{:else}
-			<div class="text-muted-foreground py-10 text-center text-sm">
+			{#if jobsLoading}
-				{jobsLoading ? 'Загрузка…' : 'Нет задач'}
+				<div class="py-8 text-center text-sm text-muted-foreground">Загрузка…</div>
-			</div>
+			{:else}
+				<EmptyState
+					title="Нет задач"
+					description="Задачи появятся после refresh, apply или rollback."
+				/>
+			{/if}
 		{/each}
 	</CardContent>
 </Card>

web/src/lib/components/operations/OperationsQuickActions.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import type { BirdStatus } from '$lib/api/types.js';
-	import { Badge } from '$lib/components/ui/badge/index.js';
+	import { Badge } from '$lib/ui/core/badge/index.js';
-	import { Button } from '$lib/components/ui/button/index.js';
+	import { Button } from '$lib/ui/core/button/index.js';
-	import { Card } from '$lib/components/ui/card/index.js';
+	import { Card } from '$lib/ui/core/card/index.js';
 	import RefreshCw from '@lucide/svelte/icons/refresh-cw';
 	import Play from '@lucide/svelte/icons/play';
 	import RotateCcw from '@lucide/svelte/icons/rotate-ccw';
@@ -114,9 +114,14 @@
 					</div>
 					<p class="font-semibold">Состояние BIRD</p>
 					{#if birdStatus}
-						<Badge variant={birdHealthyBadgeVariant(birdStatus.healthy)}
+						<Badge
-							>{birdHealthyShortLabel(birdStatus.healthy)}</Badge
+							variant={birdHealthyBadgeVariant(birdStatus.healthy)}
+							class={birdStatus.healthy === true
+								? 'border-success/30 bg-success/15 text-success'
+								: undefined}
 						>
+							{birdHealthyShortLabel(birdStatus.healthy)}
+						</Badge>
 					{/if}
 				</div>
 				<p class="max-w-[56ch] text-sm text-foreground/80">

web/src/lib/components/operations/OperationsRevisionsTab.svelte

@@ -1,21 +1,15 @@
 <script lang="ts">
 	import type { RevisionRow } from '$lib/api/types.js';
-	import { Button } from '$lib/components/ui/button/index.js';
+	import { Button } from '$lib/ui/core/button/index.js';
 	import {
 		Card,
 		CardContent,
 		CardDescription,
 		CardHeader,
 		CardTitle
-	} from '$lib/components/ui/card/index.js';
+	} from '$lib/ui/core/card/index.js';
-	import {
+	import AppDataTable from '$lib/ui/patterns/data-table/app-data-table.svelte';
-		Table,
+	import { formatDateTime } from '$lib/modules/display.js';
-		TableBody,
-		TableCell,
-		TableHead,
-		TableHeader,
-		TableRow
-	} from '$lib/components/ui/table/index.js';
 	import RefreshCw from '@lucide/svelte/icons/refresh-cw';
 	import Undo from '@lucide/svelte/icons/undo';
 	import Eye from '@lucide/svelte/icons/eye';
@@ -28,7 +22,6 @@
 		onOpenPreview: (rev: RevisionRow) => void;
 		onRollbackRequest: (rev: RevisionRow) => void;
 		onDownloadDiagnosticLog: (rev: RevisionRow) => void;
-		formatDate: (d?: string | null) => string;
 	};
 
 	let {
@@ -37,9 +30,31 @@
 		onReload,
 		onOpenPreview,
 		onRollbackRequest,
-		onDownloadDiagnosticLog,
+		onDownloadDiagnosticLog
-		formatDate
 	}: Props = $props();
+
+	const columns = [
+		{
+			id: 'id',
+			label: 'ID',
+			sortable: true,
+			sortValue: (rev: RevisionRow) => rev.id
+		},
+		{
+			id: 'created',
+			label: 'Создана',
+			sortable: true,
+			sortValue: (rev: RevisionRow) => rev.created_at ?? ''
+		},
+		{
+			id: 'prefixes',
+			label: 'Префиксов',
+			sortable: true,
+			sortValue: (rev: RevisionRow) => rev.materialized_prefix_count ?? 0
+		},
+		{ id: 'hash', label: 'Хэш' },
+		{ id: 'actions', label: '', class: 'w-32' }
+	] as const;
 </script>
 
 <Card>
@@ -61,55 +76,45 @@
 			<RefreshCw class={revLoading ? 'animate-spin' : ''} />
 		</Button>
 	</CardHeader>
-	<CardContent class="min-w-0 p-0">
+	<CardContent class="min-w-0 p-4 pt-0">
-		<div class="max-w-full overflow-x-auto overscroll-x-contain [scrollbar-gutter:stable]">
+		<AppDataTable
-			<Table class="min-w-[44rem]">
+			columns={[...columns]}
-				<TableHeader>
+			rows={revisions}
-					<TableRow>
+			rowKey={(rev) => rev.id}
-						<TableHead>ID</TableHead>
+			loading={revLoading}
-						<TableHead>Создана</TableHead>
+			emptyTitle="Нет ревизий"
-						<TableHead>Префиксов</TableHead>
+			emptyDescription="Ревизии появятся после обновления модулей."
-						<TableHead>Хэш</TableHead>
+		>
-						<TableHead class="w-32"></TableHead>
+			{#snippet cell({ row: rev, column })}
-					</TableRow>
+				{#if column.id === 'id'}
-				</TableHeader>
+					<span class="font-mono text-xs">{rev.id.slice(0, 8)}…</span>
-				<TableBody>
+				{:else if column.id === 'created'}
-					{#each revisions as rev (rev.id)}
+					<span class="text-sm">{formatDateTime(rev.created_at)}</span>
-						<TableRow>
+				{:else if column.id === 'prefixes'}
-							<TableCell class="font-mono text-xs">{rev.id.slice(0, 8)}…</TableCell>
+					{rev.materialized_prefix_count}
-							<TableCell class="text-sm">{formatDate(rev.created_at)}</TableCell>
+				{:else if column.id === 'hash'}
-							<TableCell>{rev.materialized_prefix_count}</TableCell>
+					<span class="font-mono text-xs text-muted-foreground"
-							<TableCell class="font-mono text-xs text-muted-foreground"
+						>{rev.content_hash.slice(0, 12)}…</span
-								>{rev.content_hash.slice(0, 12)}…</TableCell
+					>
-							>
+				{:else if column.id === 'actions'}
-							<TableCell>
+					<div class="flex gap-1">
-								<div class="flex gap-1">
+						<Button variant="ghost" size="icon-sm" onclick={() => onOpenPreview(rev)}>
-									<Button variant="ghost" size="icon-sm" onclick={() => onOpenPreview(rev)}>
+							<Eye class="size-3.5" />
-										<Eye class="size-3.5" />
+						</Button>
-									</Button>
+						<Button variant="ghost" size="icon-sm" onclick={() => onRollbackRequest(rev)}>
-									<Button variant="ghost" size="icon-sm" onclick={() => onRollbackRequest(rev)}>
+							<Undo class="size-3.5" />
-										<Undo class="size-3.5" />
+						</Button>
-									</Button>
+						<Button
-									<Button
+							variant="ghost"
-										variant="ghost"
+							size="icon-sm"
-										size="icon-sm"
+							title="Скачать диагностический лог"
-										title="Скачать диагностический лог"
+							onclick={() => onDownloadDiagnosticLog(rev)}
-										onclick={() => onDownloadDiagnosticLog(rev)}
+						>
-									>
+							<Download class="size-3.5" />
-										<Download class="size-3.5" />
+						</Button>
-									</Button>
+					</div>
-								</div>
+				{/if}
-							</TableCell>
+			{/snippet}
-						</TableRow>
+		</AppDataTable>
-					{:else}
-						<TableRow>
-							<TableCell colspan={5} class="text-muted-foreground py-8 text-center">
-								{revLoading ? 'Загрузка…' : 'Нет ревизий'}
-							</TableCell>
-						</TableRow>
-					{/each}
-				</TableBody>
-			</Table>
-		</div>
 	</CardContent>
 </Card>

web/src/lib/components/operations/job-report-table-block.svelte

@@ -6,9 +6,9 @@
 		getCoreRowModel,
 		getPaginationRowModel
 	} from '@tanstack/table-core';
-	import { createSvelteTable, FlexRender } from '$lib/components/ui/data-table/index.js';
+	import { createSvelteTable, FlexRender } from '$lib/ui/core/data-table/index.js';
-	import * as Table from '$lib/components/ui/table/index.js';
+	import * as Table from '$lib/ui/core/table/index.js';
-	import { Button } from '$lib/components/ui/button/index.js';
+	import { Button } from '$lib/ui/core/button/index.js';
 
 	type Props = {
 		rows: RowData[];

web/src/lib/modules/display.ts

@@ -0,0 +1,43 @@
+import type { ModuleRow } from '$lib/api/types.js';
+
+/** Форматирование ISO-даты для таблиц модулей и расписания. */
+export function formatDateTime(value: string | null | undefined): string {
+	if (typeof value !== 'string' || value.trim().length === 0) return '—';
+	const parsed = new Date(value);
+	if (Number.isNaN(parsed.getTime())) return '—';
+	return parsed.toLocaleString('ru-RU');
+}
+
+/** Подпись интервала refresh: секунды, cron или комбинация. */
+export function moduleIntervalLabel(moduleRow: ModuleRow): string {
+	const cron = typeof moduleRow.cron_expr === 'string' ? moduleRow.cron_expr.trim() : '';
+	const raw = moduleRow.refresh_interval_sec as unknown;
+	const interval =
+		typeof raw === 'number'
+			? raw
+			: typeof raw === 'string' && raw.trim().length > 0
+				? Number(raw)
+				: null;
+	const intervalLabel = interval !== null && Number.isFinite(interval) ? `${interval}с` : '';
+	if (cron && intervalLabel) return `${intervalLabel} (${cron})`;
+	if (cron) return cron;
+	if (intervalLabel) return intervalLabel;
+	return '—';
+}
+
+export function moduleTypeBadgeVariant(
+	type: string
+): 'default' | 'secondary' | 'outline' | 'destructive' {
+	switch (type) {
+		case 'AS_PREFIXES':
+			return 'default';
+		case 'CDN_CIDRS':
+			return 'secondary';
+		case 'DOMAINS':
+			return 'outline';
+		case 'IP_RANGES':
+			return 'outline';
+		default:
+			return 'outline';
+	}
+}

web/src/lib/monitoring/status.ts

@@ -0,0 +1,169 @@
+/** Pure-helpers для страницы /monitoring. */
+
+export type OverallStatus = 'ok' | 'warn' | 'error' | 'unknown';
+
+export type JobsKpi = { running: number; failed: number; total: number };
+
+export type ReadyStatus = { status: string; checks?: Record<string, unknown> };
+
+export type HealthStatus = { ok: boolean; status?: string; error?: string };
+
+export type CheckBadge = {
+	label: string;
+	variant: 'default' | 'secondary' | 'destructive' | 'outline';
+	class?: string;
+	hint?: string;
+};
+
+export function toErrorMessage(error: unknown): string {
+	if (error instanceof Error && error.message.trim() !== '') return error.message;
+	return 'Ошибка запроса';
+}
+
+export function summarizeJobsStatuses(items: Array<{ status?: string }>): JobsKpi {
+	let running = 0;
+	let failed = 0;
+	for (const row of items) {
+		const status = String(row.status ?? '').toLowerCase();
+		if (status === 'queued' || status === 'running' || status === 'cancel_requested') {
+			running += 1;
+		}
+		if (status === 'failed' || status === 'error' || status === 'canceled') {
+			failed += 1;
+		}
+	}
+	return { running, failed, total: items.length };
+}
+
+export function deriveOverallStatus(input: {
+	health: HealthStatus | null;
+	ready: ReadyStatus | null;
+	jobs: JobsKpi | null;
+	birdConfigured: boolean;
+	birdHealthy: boolean | null;
+}): OverallStatus {
+	const { health, ready, jobs, birdConfigured, birdHealthy } = input;
+	if (health === null && ready === null && jobs === null) return 'unknown';
+	if (!health?.ok) return 'error';
+	if (ready !== null && ready.status !== 'ready') return 'error';
+	if (jobs !== null && jobs.failed > 0) return 'warn';
+	if (birdConfigured && birdHealthy === false) return 'warn';
+	return 'ok';
+}
+
+export function overallStatusLabel(status: OverallStatus): string {
+	switch (status) {
+		case 'ok':
+			return 'В норме';
+		case 'warn':
+			return 'Внимание';
+		case 'error':
+			return 'Ошибка';
+		default:
+			return 'Нет данных';
+	}
+}
+
+export function overallStatusHint(
+	status: OverallStatus,
+	input: {
+		healthOk: boolean | undefined;
+		jobsFailed: number;
+	}
+): string {
+	if (status === 'unknown') return 'Нет данных. Запустите обновление.';
+	if (status === 'error') {
+		if (!input.healthOk) return 'Проверьте доступность API и логи сервиса.';
+		return 'Readiness не в норме: проверьте postgres/store/jobs.';
+	}
+	if (status === 'warn') {
+		if (input.jobsFailed > 0) return 'Есть ошибки в задачах: откройте операции и последние jobs.';
+		return 'Проверьте BGP-сессии и вывод birdc.';
+	}
+	return 'Критичных отклонений не обнаружено.';
+}
+
+export function overallBadgeVariant(status: OverallStatus): CheckBadge['variant'] {
+	if (status === 'ok') return 'default';
+	if (status === 'warn') return 'secondary';
+	if (status === 'error') return 'destructive';
+	return 'outline';
+}
+
+export function overallBadgeClass(status: OverallStatus): string | undefined {
+	if (status === 'ok') return 'border-success/30 bg-success/15 text-success';
+	if (status === 'warn') return 'border-warning/30 bg-warning/15 text-warning';
+	return undefined;
+}
+
+/** Нормализация значений ready.checks и health/readiness в badge. */
+export function checkStatusBadge(value: unknown): CheckBadge {
+	const raw = String(value ?? '').trim();
+	const lower = raw.toLowerCase();
+
+	if (lower === 'ok' || lower === 'ready' || lower === 'true' || lower === 'up') {
+		return {
+			label: 'OK',
+			variant: 'default',
+			class: 'border-success/30 bg-success/15 text-success'
+		};
+	}
+	if (lower === 'memory') {
+		return {
+			label: 'In-memory',
+			variant: 'secondary',
+			hint: 'Очередь задач в памяти процесса, не shared между воркерами.'
+		};
+	}
+	if (
+		lower === 'failed' ||
+		lower === 'false' ||
+		lower === 'error' ||
+		lower === 'down' ||
+		lower === 'unavailable'
+	) {
+		return { label: 'Ошибка', variant: 'destructive' };
+	}
+	if (raw === '') {
+		return { label: '—', variant: 'outline' };
+	}
+	return { label: raw, variant: 'outline' };
+}
+
+/** Человекочитаемое имя проверки readiness. */
+export function checkDisplayName(key: string): string {
+	switch (key) {
+		case 'postgres':
+			return 'PostgreSQL';
+		case 'store':
+			return 'Хранилище';
+		case 'jobs':
+			return 'Очередь задач';
+		default:
+			return key;
+	}
+}
+
+export function livenessBadge(health: HealthStatus | null): CheckBadge {
+	if (health === null) return { label: '—', variant: 'outline' };
+	if (health.ok) {
+		return {
+			label: 'В норме',
+			variant: 'default',
+			class: 'border-success/30 bg-success/15 text-success'
+		};
+	}
+	return { label: 'Недоступен', variant: 'destructive' };
+}
+
+export function readinessBadge(ready: ReadyStatus | null): CheckBadge {
+	if (ready === null) return { label: '—', variant: 'outline' };
+	if (ready.status === 'ready') {
+		return {
+			label: 'Готов',
+			variant: 'default',
+			class: 'border-success/30 bg-success/15 text-success'
+		};
+	}
+	return { label: ready.status || 'Не готов', variant: 'destructive' };
+}

web/src/lib/ui-labels.ts

@@ -1,5 +1,3 @@
-/** Русские подписи для enum из API (задачи, модули, логи refresh). */
-
 export function jobStatusRu(status: string): string {
 	switch (status) {
 		case 'queued':
@@ -17,6 +15,18 @@ export function jobStatusRu(status: string): string {
 	}
 }
 
+/** Variant Badge для статуса задачи (shadcn). */
+export function jobStatusBadgeVariant(
+	status: string
+): 'default' | 'secondary' | 'outline' | 'destructive' {
+	const lower = status.toLowerCase();
+	if (lower === 'succeeded') return 'default';
+	if (lower === 'running' || lower === 'queued') return 'secondary';
+	if (lower === 'failed' || lower === 'error' || lower === 'canceled' || lower === 'cancelled')
+		return 'destructive';
+	return 'outline';
+}
+
 /** Подпись типа задачи для фильтров (значения API те же). */
 export function jobKindFilterRu(kind: string): string {
 	switch (kind) {
@@ -33,6 +43,32 @@ export function jobKindFilterRu(kind: string): string {
 	}
 }
 
+/** Включён / выключен модуль (поле enabled). */
+export function moduleEnabledRu(enabled: boolean): string {
+	return enabled ? 'Вкл' : 'Выкл';
+}
+
+/** Variant Badge для enabled модуля. */
+export function moduleEnabledBadgeVariant(
+	enabled: boolean
+): 'default' | 'secondary' | 'outline' | 'destructive' {
+	return enabled ? 'default' : 'secondary';
+}
+
+/** Политика DoH-резолвера для модулей DOMAINS. */
+export function dohPolicyRu(policy: string | null | undefined): string {
+	switch (policy) {
+		case 'primary_only':
+			return 'Только первый';
+		case 'failover':
+			return 'Резервирование';
+		case 'union':
+			return 'Объединение';
+		default:
+			return 'Только первый';
+	}
+}
+
 export function moduleTypeRu(type: string): string {
 	switch (type) {
 		case 'AS_PREFIXES':

web/src/lib/ui/app/layout/nav.ts

@@ -7,8 +7,6 @@ import Gauge from '@lucide/svelte/icons/gauge';
 import LayoutDashboard from '@lucide/svelte/icons/layout-dashboard';
 import Network from '@lucide/svelte/icons/network';
 import Settings from '@lucide/svelte/icons/settings';
-import Zap from '@lucide/svelte/icons/zap';
-
 export type NavItem = {
 	href: string;
 	label: string;
@@ -20,8 +18,7 @@ export const mainNav: NavItem[] = [
 	{ href: '/modules', label: 'Модули', icon: Boxes },
 	{ href: '/directories', label: 'Справочники', icon: BookOpen },
 	{ href: '/network', label: 'Сеть', icon: Network },
-	{ href: '/revisions', label: 'Ревизии', icon: Activity },
+	{ href: '/operations', label: 'Ревизии', icon: Activity },
-	{ href: '/operations', label: 'Операции', icon: Zap },
 	{ href: '/schedule', label: 'Расписание', icon: CalendarClock },
 	{ href: '/monitoring', label: 'Мониторинг', icon: Gauge }
 ];

web/src/lib/ui/patterns/confirm/confirm-dialog.svelte

@@ -15,7 +15,12 @@
 	const open = $derived(!!state?.open);
 
 	function onOpenChange(v: boolean) {
-		if (!v) closeConfirm();
+		if (!v && state && !state.loading) closeConfirm();
+	}
+
+	async function handleConfirm() {
+		if (!state || state.loading) return;
+		await state.onConfirm();
 	}
 </script>
 
@@ -37,7 +42,10 @@
 						? 'text-destructive-foreground bg-destructive hover:bg-destructive/90'
 						: ''}
 					disabled={state.loading}
-					onclick={state.onConfirm}
+					onclick={(e) => {
+						e.preventDefault();
+						void handleConfirm();
+					}}
 				>
 					{state.loading ? '…' : (state.confirmLabel ?? 'Подтвердить')}
 				</AlertDialogAction>

web/src/lib/ui/patterns/confirm/confirm-state.svelte.ts

@@ -21,8 +21,9 @@ export function confirm(options: ConfirmOptions) {
 			open: true,
 			loading: false,
 			onConfirm: async () => {
-				if (!confirmState.current) return;
+				const current = confirmState.current;
-				confirmState.current = { ...confirmState.current, loading: true };
+				if (!current || current.loading) return;
+				confirmState.current = { ...current, loading: true };
 				try {
 					await options.onConfirm();
 					resolve(true);

web/src/routes/modules/+page.svelte

@@ -1,65 +1,105 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
+	import { resolve } from '$app/paths';
 	import { apiJSON, apiMutate } from '$lib/api/client.js';
-	import type { ModuleRow, ModulesResponse, ModuleCreate } from '$lib/api/types.js';
+	import type { ModuleRow, ModulesResponse } from '$lib/api/types.js';
-	import { Badge } from '$lib/components/ui/badge/index.js';
-	import { Button } from '$lib/components/ui/button/index.js';
-	import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card/index.js';
-	import { Input } from '$lib/components/ui/input/index.js';
-	import { Label } from '$lib/components/ui/label/index.js';
 	import {
-		Dialog,
+		formatDateTime,
-		DialogContent,
+		moduleIntervalLabel,
-		DialogHeader,
+		moduleTypeBadgeVariant
-		DialogTitle,
+	} from '$lib/modules/display.js';
-		DialogFooter,
+	import { moduleEnabledRu, moduleEnabledBadgeVariant, moduleTypeRu } from '$lib/ui-labels.js';
-		DialogDescription
+	import { Badge } from '$lib/ui/core/badge/index.js';
-	} from '$lib/components/ui/dialog/index.js';
+	import { Button } from '$lib/ui/core/button/index.js';
 	import {
-		Select,
+		Card,
-		SelectContent,
+		CardContent,
-		SelectItem,
+		CardHeader,
-		SelectTrigger
+		CardTitle,
-	} from '$lib/components/ui/select/index.js';
+		CardDescription
-	import { Switch } from '$lib/components/ui/switch/index.js';
+	} from '$lib/ui/core/card/index.js';
+	import { Alert, AlertDescription, AlertTitle } from '$lib/ui/core/alert/index.js';
 	import { Checkbox } from '$lib/ui/core/checkbox/index.js';
 	import AppDataTable from '$lib/ui/patterns/data-table/app-data-table.svelte';
+	import CardSkeleton from '$lib/ui/patterns/feedback/card-skeleton.svelte';
 	import PageHeader from '$lib/ui/app/page-header/page-header.svelte';
 	import { confirm } from '$lib/ui/patterns/confirm/confirm-state.svelte.js';
 	import { notify, notifyApiError } from '$lib/ui/app/toast.js';
-	import { resolve } from '$app/paths';
+	import ModuleCreateDialog from '$lib/components/modules/ModuleCreateDialog.svelte';
+	import { cn } from '$lib/utils.js';
 	import Plus from '@lucide/svelte/icons/plus';
 	import RefreshCw from '@lucide/svelte/icons/refresh-cw';
 	import ExternalLink from '@lucide/svelte/icons/external-link';
 	import Trash2 from '@lucide/svelte/icons/trash-2';
-	import { moduleTypeRu } from '$lib/ui-labels.js';
 	import Boxes from '@lucide/svelte/icons/boxes';
+	import Info from '@lucide/svelte/icons/info';
+	import CheckCircle2 from '@lucide/svelte/icons/check-circle-2';
+	import CircleOff from '@lucide/svelte/icons/circle-off';
 
 	let rows = $state<ModuleRow[]>([]);
 	let loading = $state(false);
+	let initialLoading = $state(true);
 	let dialogOpen = $state(false);
-	let saving = $state(false);
-	let selectedModuleIds = $state(new Set<string>());
 	let deletingBulkModules = $state(false);
+	let selectedModuleIds = $state(new Set<string>());
+	let lastUpdated = $state<Date | null>(null);
 
 	const selectedModulesCount = $derived(selectedModuleIds.size);
 	const allModulesSelected = $derived(rows.length > 0 && selectedModuleIds.size === rows.length);
-	const someModulesSelected = $derived(selectedModuleIds.size > 0 && !allModulesSelected);
+	const enabledCount = $derived(rows.filter((m) => m.enabled).length);
+	const disabledCount = $derived(rows.filter((m) => !m.enabled).length);
 
-	let form = $state<ModuleCreate>({
+	const statAccents = [
-		type: 'AS_PREFIXES',
+		{
-		name: '',
+			border: 'border-l-chart-1',
-		enabled: true,
+			bg: 'bg-chart-1/5',
-		priority: 0
+			iconBg: 'bg-chart-1/15',
-	});
+			iconText: 'text-chart-1'
-
+		},
-	const moduleTypes = [
+		{
-		{ value: 'AS_PREFIXES', label: 'AS (номера)' },
+			border: 'border-l-chart-2',
-		{ value: 'CDN_CIDRS', label: 'CDN CIDRs' },
+			bg: 'bg-chart-2/5',
-		{ value: 'DOMAINS', label: 'Домены' },
+			iconBg: 'bg-chart-2/15',
-		{ value: 'IP_RANGES', label: 'IP Ranges' }
+			iconText: 'text-chart-2'
+		},
+		{
+			border: 'border-l-chart-4',
+			bg: 'bg-chart-4/5',
+			iconBg: 'bg-chart-4/15',
+			iconText: 'text-chart-4'
+		}
 	] as const;
 
+	const kpiCards = $derived.by(() => [
+		{
+			id: 'total',
+			label: 'Всего модулей',
+			value: initialLoading ? '—' : String(rows.length),
+			description: 'AS, CDN, домены, IP',
+			icon: Boxes,
+			accent: statAccents[0],
+			badge: 'в системе'
+		},
+		{
+			id: 'enabled',
+			label: 'Включено',
+			value: initialLoading ? '—' : String(enabledCount),
+			description: 'участвуют в ревизиях',
+			icon: CheckCircle2,
+			accent: statAccents[1],
+			badge: 'активных'
+		},
+		{
+			id: 'disabled',
+			label: 'Выключено',
+			value: initialLoading ? '—' : String(disabledCount),
+			description: disabledCount > 0 ? 'не участвуют в сборке' : 'все модули включены',
+			icon: CircleOff,
+			accent: statAccents[2],
+			badge: disabledCount > 0 ? 'отключены' : 'нет отключённых'
+		}
+	]);
+
 	const moduleColumns = [
 		{ id: 'select', label: '', class: 'w-10' },
 		{ id: 'name', label: 'Название', sortable: true, sortValue: (m: ModuleRow) => m.name },
@@ -82,78 +122,23 @@
 	] as const;
 
 	async function load() {
-		loading = true;
+		if (!initialLoading) loading = true;
 		try {
 			const m = await apiJSON<ModulesResponse>('/v1/modules?limit=200');
 			rows = m.items ?? [];
 			const validIds = new Set(rows.map((item) => item.id));
 			selectedModuleIds = new Set([...selectedModuleIds].filter((id) => validIds.has(id)));
+			lastUpdated = new Date();
 		} catch (e) {
 			notifyApiError(e);
 		} finally {
 			loading = false;
+			initialLoading = false;
 		}
 	}
 
 	onMount(load);
 
-	async function create() {
-		if (!form.name.trim()) {
-			notify.error('Укажите название модуля');
-			return;
-		}
-		saving = true;
-		try {
-			await apiMutate('/v1/modules', 'POST', form);
-			notify.success('Модуль создан');
-			dialogOpen = false;
-			form = { type: 'AS_PREFIXES', name: '', enabled: true, priority: 0 };
-			await load();
-		} catch (e) {
-			notifyApiError(e);
-		} finally {
-			saving = false;
-		}
-	}
-
-	function typeBadgeVariant(type: string) {
-		switch (type) {
-			case 'AS_PREFIXES':
-				return 'default';
-			case 'CDN_CIDRS':
-				return 'secondary';
-			case 'DOMAINS':
-				return 'outline';
-			case 'IP_RANGES':
-				return 'outline';
-			default:
-				return 'outline';
-		}
-	}
-
-	function moduleIntervalLabel(moduleRow: ModuleRow): string {
-		const cron = typeof moduleRow.cron_expr === 'string' ? moduleRow.cron_expr.trim() : '';
-		const raw = moduleRow.refresh_interval_sec as unknown;
-		const interval =
-			typeof raw === 'number'
-				? raw
-				: typeof raw === 'string' && raw.trim().length > 0
-					? Number(raw)
-					: null;
-		const intervalLabel = interval !== null && Number.isFinite(interval) ? `${interval}с` : '';
-		if (cron && intervalLabel) return `${intervalLabel} (${cron})`;
-		if (cron) return cron;
-		if (intervalLabel) return intervalLabel;
-		return '—';
-	}
-
-	function formatDateTime(value: string | null | undefined): string {
-		if (typeof value !== 'string' || value.trim().length === 0) return '—';
-		const parsed = new Date(value);
-		if (Number.isNaN(parsed.getTime())) return '—';
-		return parsed.toLocaleString('ru-RU');
-	}
-
 	function toggleModuleSelection(id: string) {
 		const next = new Set(selectedModuleIds);
 		if (next.has(id)) next.delete(id);
@@ -202,7 +187,9 @@
 <div class="flex flex-col gap-6">
 	<PageHeader
 		title="Модули префиксов"
-		description="Управление модулями — AS, CDN, домены, IP-диапазоны."
+		description={lastUpdated
+			? `Управление модулями — AS, CDN, домены, IP-диапазоны. Обновлено: ${lastUpdated.toLocaleTimeString('ru-RU')}`
+			: 'Управление модулями — AS, CDN, домены, IP-диапазоны.'}
 		icon={Boxes}
 		iconClass="bg-chart-1/15 text-chart-1"
 	>
@@ -218,9 +205,55 @@
 		{/snippet}
 	</PageHeader>
 
+	<Alert class="border-info/30 bg-info/5">
+		<Info class="text-info" />
+		<AlertTitle>О модулях префиксов</AlertTitle>
+		<AlertDescription>
+			Модули собирают префиксы из AS (RIPEstat), CDN URL, доменов (DoH) и статических CIDR.
+			Расписание и ручной refresh — на странице
+			<Button variant="link" class="h-auto p-0" href={resolve('/schedule')}>Расписание</Button>.
+			Результаты обновления и ревизии — в
+			<Button variant="link" class="h-auto p-0" href={resolve('/operations')}>Операциях</Button>.
+		</AlertDescription>
+	</Alert>
+
+	<div class="grid gap-4 sm:grid-cols-3">
+		{#if initialLoading}
+			{#each Array(3) as _, i (i)}
+				<CardSkeleton />
+			{/each}
+		{:else}
+			{#each kpiCards as card (card.id)}
+				{@const Icon = card.icon}
+				{@const a = card.accent}
+				<Card class={cn('overflow-hidden border-l-4 shadow-sm', a.border, a.bg)}>
+					<CardHeader class="pb-2">
+						<CardDescription class="flex min-w-0 items-center gap-2">
+							<span
+								class={cn('flex size-9 shrink-0 items-center justify-center rounded-lg', a.iconBg)}
+								aria-hidden="true"
+							>
+								<Icon class={cn('size-4', a.iconText)} />
+							</span>
+							<span class="truncate">{card.label}</span>
+						</CardDescription>
+						<CardTitle class="text-3xl font-bold tabular-nums">{card.value}</CardTitle>
+					</CardHeader>
+					<CardContent class="space-y-2">
+						<Badge variant="outline">{card.badge}</Badge>
+						<p class="text-xs text-muted-foreground">{card.description}</p>
+					</CardContent>
+				</Card>
+			{/each}
+		{/if}
+	</div>
+
 	<Card>
 		<CardHeader class="flex flex-wrap items-center justify-between gap-2 border-b py-3">
-			<CardTitle class="text-base">Список модулей</CardTitle>
+			<div>
+				<CardTitle class="text-base">Список модулей</CardTitle>
+				<CardDescription>Клик по названию открывает карточку модуля и его записи.</CardDescription>
+			</div>
 			{#if selectedModulesCount > 0}
 				<div class="flex flex-wrap items-center gap-2">
 					<span class="text-sm text-muted-foreground">Выбрано: {selectedModulesCount}</span>
@@ -241,10 +274,22 @@
 				columns={[...moduleColumns]}
 				{rows}
 				rowKey={(m) => m.id}
-				{loading}
+				loading={initialLoading || loading}
 				emptyTitle="Нет модулей"
 				emptyDescription="Создайте первый модуль."
 			>
+				{#snippet toolbar()}
+					{#if rows.length > 0}
+						<div class="flex items-center gap-2">
+							<Checkbox
+								checked={allModulesSelected}
+								onCheckedChange={(v) => toggleAllModules(v === true)}
+								aria-label="Выбрать все модули"
+							/>
+							<span class="text-sm text-muted-foreground">Выбрать все</span>
+						</div>
+					{/if}
+				{/snippet}
 				{#snippet cell({ row: m, column })}
 					{#if column.id === 'select'}
 						<Checkbox
@@ -253,9 +298,14 @@
 							onCheckedChange={() => toggleModuleSelection(m.id)}
 						/>
 					{:else if column.id === 'name'}
-						<span class="font-medium">{m.name}</span>
+						<div class="flex items-center gap-2">
+							<span class="font-medium">{m.name}</span>
+							<Button variant="ghost" size="icon-sm" href={resolve(`/modules/${m.id}`)}>
+								<ExternalLink class="size-3.5" aria-hidden="true" />
+							</Button>
+						</div>
 					{:else if column.id === 'type'}
-						<Badge variant={typeBadgeVariant(m.type)}>{moduleTypeRu(m.type)}</Badge>
+						<Badge variant={moduleTypeBadgeVariant(m.type)}>{moduleTypeRu(m.type)}</Badge>
 					{:else if column.id === 'priority'}
 						<span class="text-muted-foreground">{m.priority}</span>
 					{:else if column.id === 'interval'}
@@ -265,11 +315,9 @@
 							>{formatDateTime(m.last_refreshed_at)}</span
 						>
 					{:else if column.id === 'status'}
-						{#if m.enabled}
+						<Badge variant={moduleEnabledBadgeVariant(!!m.enabled)} class="text-xs">
-							<Badge variant="default" class="text-xs">вкл</Badge>
+							{moduleEnabledRu(!!m.enabled)}
-						{:else}
+						</Badge>
-							<Badge variant="secondary" class="text-xs">выкл</Badge>
-						{/if}
 					{:else if column.id === 'actions'}
 						<Button variant="ghost" size="icon-sm" href={resolve(`/modules/${m.id}`)}>
 							<ExternalLink class="size-3.5" />
@@ -281,74 +329,4 @@
 	</Card>
 </div>
 
-<!-- Create Dialog -->
+<ModuleCreateDialog bind:open={dialogOpen} onClose={() => {}} onCreated={load} />
-<Dialog bind:open={dialogOpen}>
-	<DialogContent class="sm:max-w-md">
-		<DialogHeader>
-			<DialogTitle>Новый модуль</DialogTitle>
-			<DialogDescription>Создание нового модуля префиксов.</DialogDescription>
-		</DialogHeader>
-		<div class="space-y-4 py-2">
-			<div class="space-y-1.5">
-				<Label for="m-name">Название</Label>
-				<Input id="m-name" bind:value={form.name} placeholder="my-asn-module" />
-			</div>
-			<div class="space-y-1.5">
-				<Label for="m-type">Тип</Label>
-				<Select
-					type="single"
-					value={form.type}
-					onValueChange={(v) => {
-						if (v) form.type = v as typeof form.type;
-					}}
-				>
-					<SelectTrigger id="m-type" class="w-full">
-						{moduleTypes.find((t) => t.value === form.type)?.label ?? 'Выберите тип'}
-					</SelectTrigger>
-					<SelectContent>
-						{#each moduleTypes as t (t.value)}
-							<SelectItem value={t.value}>{t.label}</SelectItem>
-						{/each}
-					</SelectContent>
-				</Select>
-			</div>
-			<div class="grid grid-cols-2 gap-4">
-				<div class="space-y-1.5">
-					<Label for="m-priority">Приоритет</Label>
-					<Input id="m-priority" type="number" bind:value={form.priority} />
-				</div>
-				<div class="space-y-1.5">
-					<Label for="m-interval">Интервал (сек)</Label>
-					<Input
-						id="m-interval"
-						type="number"
-						placeholder="3600"
-						bind:value={form.refresh_interval_sec}
-					/>
-				</div>
-			</div>
-			<div
-				class="flex flex-row items-center justify-between gap-4 rounded-lg border border-border bg-muted/30 p-3"
-			>
-				<div class="grid min-w-0 flex-1 gap-1 pr-2">
-					<Label for="m-enabled" class="leading-snug text-foreground">Включён</Label>
-					<p class="text-xs leading-snug text-muted-foreground">
-						Модуль участвует в сборке ревизий, если включён.
-					</p>
-				</div>
-				<Switch
-					id="m-enabled"
-					class="shrink-0"
-					checked={form.enabled !== false}
-					onCheckedChange={(v) => {
-						form = { ...form, enabled: v };
-					}}
-				/>
-			</div>
-		</div>
-		<DialogFooter>
-			<Button variant="outline" onclick={() => (dialogOpen = false)}>Отмена</Button>
-			<Button onclick={create} disabled={saving}>{saving ? 'Создание…' : 'Создать'}</Button>
-		</DialogFooter>
-	</DialogContent>
-</Dialog>

web/src/routes/monitoring/+page.svelte

@@ -1,21 +1,54 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
+	import { resolve } from '$app/paths';
 	import { apiJSON, apiFetch } from '$lib/api/client.js';
-	import type { BirdStatus, JobsResponse } from '$lib/api/types.js';
+	import type { BirdStatus, JobRow, JobsResponse } from '$lib/api/types.js';
 	import {
 		formatVersionHeadline,
 		resolveVersionString,
 		type VersionInfo
 	} from '$lib/api/version-info.js';
-	import { Badge } from '$lib/components/ui/badge/index.js';
+	import { jobKindTitle } from '$lib/operations/job-kind-label.js';
-	import { Button } from '$lib/components/ui/button/index.js';
+	import { jobStatusRu } from '$lib/ui-labels.js';
+	import {
+		checkDisplayName,
+		checkStatusBadge,
+		deriveOverallStatus,
+		livenessBadge,
+		overallBadgeClass,
+		overallBadgeVariant,
+		overallStatusHint,
+		overallStatusLabel,
+		readinessBadge,
+		summarizeJobsStatuses,
+		toErrorMessage,
+		type HealthStatus,
+		type JobsKpi,
+		type ReadyStatus
+	} from '$lib/monitoring/status.js';
+	import { Badge } from '$lib/ui/core/badge/index.js';
+	import { Button } from '$lib/ui/core/button/index.js';
 	import {
 		Card,
 		CardContent,
 		CardHeader,
 		CardTitle,
 		CardDescription
-	} from '$lib/components/ui/card/index.js';
+	} from '$lib/ui/core/card/index.js';
+	import { Alert, AlertDescription, AlertTitle } from '$lib/ui/core/alert/index.js';
+	import { Separator } from '$lib/ui/core/separator/index.js';
+	import {
+		Table,
+		TableBody,
+		TableCell,
+		TableHead,
+		TableHeader,
+		TableRow
+	} from '$lib/ui/core/table/index.js';
+	import CardSkeleton from '$lib/ui/patterns/feedback/card-skeleton.svelte';
+	import ScrollPreBlock from '$lib/components/app/scroll-pre-block.svelte';
+	import PageHeader from '$lib/ui/app/page-header/page-header.svelte';
+	import { cn } from '$lib/utils.js';
 	import RefreshCw from '@lucide/svelte/icons/refresh-cw';
 	import Gauge from '@lucide/svelte/icons/gauge';
 	import Activity from '@lucide/svelte/icons/activity';
@@ -23,80 +56,86 @@
 	import Server from '@lucide/svelte/icons/server';
 	import Hash from '@lucide/svelte/icons/hash';
 	import AlertTriangle from '@lucide/svelte/icons/alert-triangle';
-	import PageHeader from '$lib/ui/app/page-header/page-header.svelte';
+	import CheckCircle from '@lucide/svelte/icons/check-circle';
+	import XCircle from '@lucide/svelte/icons/x-circle';
+	import ArrowRight from '@lucide/svelte/icons/arrow-right';
+	import HeartPulse from '@lucide/svelte/icons/heart-pulse';
+	import ShieldCheck from '@lucide/svelte/icons/shield-check';
+	import Database from '@lucide/svelte/icons/database';
+	import HardDrive from '@lucide/svelte/icons/hard-drive';
+	import ListTodo from '@lucide/svelte/icons/list-todo';
+	import type { Component } from 'svelte';
 
-	type ReadyStatus = { status: string; checks?: Record<string, unknown> };
+	let health = $state<HealthStatus | null>(null);
-	type JobsKpi = { running: number; failed: number; total: number };
-
-	let health = $state<{ ok: boolean; status?: string; error?: string } | null>(null);
 	let ready = $state<ReadyStatus | null>(null);
 	let version = $state<VersionInfo | null>(null);
 	let bird = $state<BirdStatus | null>(null);
 	let jobs = $state<JobsKpi | null>(null);
+	let jobItems = $state<JobRow[]>([]);
 	let readyError = $state<string | null>(null);
 	let versionError = $state<string | null>(null);
 	let birdError = $state<string | null>(null);
 	let jobsError = $state<string | null>(null);
 	let lastUpdated = $state<Date | null>(null);
-	let loading = $state(false);
+	let initialLoading = $state(true);
+	let refreshing = $state(false);
 
-	function toErrorMessage(error: unknown): string {
+	const statAccents = [
-		if (error instanceof Error && error.message.trim() !== '') return error.message;
+		{
-		return 'Ошибка запроса';
+			border: 'border-l-chart-1',
-	}
+			bg: 'bg-chart-1/5',
-
+			iconBg: 'bg-chart-1/15',
-	function summarizeJobsStatuses(items: Array<{ status?: string }>): JobsKpi {
+			iconText: 'text-chart-1'
-		let running = 0;
+		},
-		let failed = 0;
+		{
-		for (const row of items) {
+			border: 'border-l-chart-2',
-			const status = String(row.status ?? '').toLowerCase();
+			bg: 'bg-chart-2/5',
-			if (status === 'queued' || status === 'running' || status === 'cancel_requested') {
+			iconBg: 'bg-chart-2/15',
-				running += 1;
+			iconText: 'text-chart-2'
-			}
+		},
-			if (status === 'failed' || status === 'error' || status === 'canceled') {
+		{
-				failed += 1;
+			border: 'border-l-chart-4',
-			}
+			bg: 'bg-chart-4/5',
+			iconBg: 'bg-chart-4/15',
+			iconText: 'text-chart-4'
+		},
+		{
+			border: 'border-l-info',
+			bg: 'bg-info/10',
+			iconBg: 'bg-info/15',
+			iconText: 'text-info'
 		}
-		return { running, failed, total: items.length };
+	] as const;
-	}
 
-	function overallBadgeVariant(status: 'ok' | 'warn' | 'error' | 'unknown') {
+	const overallStatus = $derived.by(() =>
-		if (status === 'ok') return 'default';
+		deriveOverallStatus({
-		if (status === 'warn') return 'secondary';
+			health,
-		if (status === 'error') return 'destructive';
+			ready,
-		return 'outline';
+			jobs,
-	}
+			birdConfigured: bird?.birdc_configured ?? false,
+			birdHealthy: bird?.healthy ?? null
+		})
+	);
 
-	const overallStatus = $derived.by(() => {
+	const overallHint = $derived.by(() =>
-		if (health === null && ready === null && bird === null && jobs === null) return 'unknown';
+		overallStatusHint(overallStatus, {
-		if (!health?.ok) return 'error';
+			healthOk: health?.ok,
-		if (ready !== null && ready.status !== 'ready') return 'error';
+			jobsFailed: jobs?.failed ?? 0
-		if (jobs !== null && jobs.failed > 0) return 'warn';
+		})
-		if (bird !== null && bird.birdc_configured && bird.healthy === false) return 'warn';
+	);
-		return 'ok';
-	});
-
-	const overallHint = $derived.by(() => {
-		if (overallStatus === 'unknown') return 'Нет данных. Запустите обновление.';
-		if (overallStatus === 'error') {
-			if (!health?.ok) return 'Проверьте доступность API и логи сервиса.';
-			return 'Readiness не в норме: проверьте postgres/store/jobs.';
-		}
-		if (overallStatus === 'warn') {
-			if (jobs && jobs.failed > 0)
-				return 'Есть ошибки в задачах: откройте операции и последние jobs.';
-			return 'Проверьте BGP-сессии и вывод birdc.';
-		}
-		return 'Критичных отклонений не обнаружено.';
-	});
 
 	const bgpText = $derived.by(() => {
 		if (!bird) return '—';
-		if (!bird.birdc_configured) return 'birdc не настроен';
+		if (!bird.birdc_configured) return '—';
-		if (bird.error) return 'ошибка birdc';
+		if (bird.error) return '—';
 		return `${bird.bgp_established}/${bird.bgp_sessions_total}`;
 	});
 
+	const bgpRatio = $derived.by(() => {
+		if (!bird?.birdc_configured || bird.bgp_sessions_total <= 0) return null;
+		return Math.round((bird.bgp_established / bird.bgp_sessions_total) * 100);
+	});
+
 	const versionText = $derived(formatVersionHeadline(version));
 
 	const versionFooter = $derived.by(() => {
@@ -109,46 +148,156 @@
 		return parts.join(' · ');
 	});
 
+	const failedJobs = $derived.by(() =>
+		jobItems
+			.filter((j) => {
+				const s = String(j.status ?? '').toLowerCase();
+				return s === 'failed' || s === 'error' || s === 'canceled';
+			})
+			.slice(0, 5)
+	);
+
+	const checkIconByKey: Record<string, Component> = {
+		postgres: Database,
+		store: HardDrive,
+		jobs: ListTodo
+	};
+
+	const kpiCards = $derived.by(() => [
+		{
+			id: 'overall',
+			label: 'Общий статус',
+			value: initialLoading ? '—' : overallStatusLabel(overallStatus),
+			description: overallHint,
+			icon: Server,
+			accent: statAccents[0],
+			badge: overallStatusLabel(overallStatus),
+			badgeVariant: overallBadgeVariant(overallStatus),
+			badgeClass: overallBadgeClass(overallStatus),
+			error: null as string | null,
+			href: undefined
+		},
+		{
+			id: 'bgp',
+			label: 'BGP сессии',
+			value: initialLoading ? '—' : bgpText,
+			description: bird?.birdc_configured
+				? 'Established / total на API-хосте'
+				: (bird?.message ?? 'birdc не настроен на API-хосте'),
+			icon: Bird,
+			accent: statAccents[1],
+			badge: !bird ? '—' : !bird.birdc_configured ? 'N/A' : bird.healthy ? 'В норме' : 'Деградация',
+			badgeVariant: !bird?.birdc_configured
+				? ('outline' as const)
+				: bird?.healthy
+					? ('default' as const)
+					: ('secondary' as const),
+			badgeClass:
+				bird?.birdc_configured && bird?.healthy
+					? 'border-success/30 bg-success/15 text-success'
+					: undefined,
+			error: birdError ?? bird?.error ?? null,
+			href: '/network' as const
+		},
+		{
+			id: 'jobs',
+			label: 'Задачи',
+			value: initialLoading ? '—' : String(jobs?.running ?? '—'),
+			description: `Активных из ${jobs?.total ?? '—'} последних`,
+			icon: Activity,
+			accent: statAccents[2],
+			badge: jobs && jobs.failed > 0 ? `ошибок ${jobs.failed}` : 'без ошибок',
+			badgeVariant: jobs && jobs.failed > 0 ? ('secondary' as const) : ('default' as const),
+			badgeClass:
+				jobs && jobs.failed === 0 ? 'border-success/30 bg-success/15 text-success' : undefined,
+			error: jobsError,
+			href: jobs && jobs.failed > 0 ? ('/operations' as const) : undefined
+		},
+		{
+			id: 'version',
+			label: 'Версия',
+			value: initialLoading ? '—' : versionText,
+			description: versionFooter || 'GET /v1/version',
+			icon: Hash,
+			accent: statAccents[3],
+			badge: version ? 'Загружена' : '—',
+			badgeVariant: version ? ('outline' as const) : ('secondary' as const),
+			badgeClass: undefined,
+			error: versionError,
+			href: undefined
+		}
+	]);
+
+	async function fetchHealth(): Promise<HealthStatus> {
+		const h = await apiFetch('/v1/health');
+		const hj = (await h.json().catch(() => ({}))) as { status?: string };
+		return { ok: h.ok, status: hj?.status, error: h.ok ? undefined : `HTTP ${h.status}` };
+	}
+
 	async function load() {
-		loading = true;
+		if (initialLoading) {
+			/* keep skeleton */
+		} else {
+			refreshing = true;
+		}
 		readyError = null;
 		versionError = null;
 		birdError = null;
 		jobsError = null;
-		try {
+
-			const h = await apiFetch('/v1/health');
+		const [healthRes, readyRes, versionRes, birdRes, jobsRes] = await Promise.allSettled([
-			const hj = await h.json().catch(() => ({}));
+			fetchHealth(),
-			health = { ok: h.ok, status: hj?.status, error: h.ok ? undefined : `HTTP ${h.status}` };
+			apiJSON<ReadyStatus>('/v1/ready'),
-		} catch (error) {
+			apiJSON<VersionInfo>('/v1/version'),
-			health = { ok: false, error: toErrorMessage(error) };
+			apiJSON<BirdStatus>('/v1/bird/status'),
+			apiJSON<JobsResponse>('/v1/jobs?limit=100')
+		]);
+
+		if (healthRes.status === 'fulfilled') {
+			health = healthRes.value;
+		} else {
+			health = { ok: false, error: toErrorMessage(healthRes.reason) };
 		}
-		try {
+
-			ready = await apiJSON<ReadyStatus>('/v1/ready');
+		if (readyRes.status === 'fulfilled') {
-		} catch (error) {
+			ready = readyRes.value;
+		} else {
 			ready = null;
-			readyError = toErrorMessage(error);
+			readyError = toErrorMessage(readyRes.reason);
 		}
-		try {
+
-			version = await apiJSON<VersionInfo>('/v1/version');
+		if (versionRes.status === 'fulfilled') {
-		} catch (error) {
+			version = versionRes.value;
+		} else {
 			version = null;
-			versionError = toErrorMessage(error);
+			versionError = toErrorMessage(versionRes.reason);
 		}
-		try {
+
-			bird = await apiJSON<BirdStatus>('/v1/bird/status');
+		if (birdRes.status === 'fulfilled') {
-		} catch (error) {
+			bird = birdRes.value;
+		} else {
 			bird = null;
-			birdError = toErrorMessage(error);
+			birdError = toErrorMessage(birdRes.reason);
 		}
-		try {
+
-			const jobsPage = await apiJSON<JobsResponse>('/v1/jobs?limit=100');
+		if (jobsRes.status === 'fulfilled') {
-			jobs = summarizeJobsStatuses(jobsPage.items ?? []);
+			const items = jobsRes.value.items ?? [];
-		} catch (error) {
+			jobItems = items;
+			jobs = summarizeJobsStatuses(items);
+		} else {
+			jobItems = [];
 			jobs = null;
-			jobsError = toErrorMessage(error);
+			jobsError = toErrorMessage(jobsRes.reason);
 		}
+
 		lastUpdated = new Date();
-		loading = false;
+		initialLoading = false;
+		refreshing = false;
+	}
+
+	function truncateError(error: string | null | undefined, max = 120): string {
+		if (!error) return '';
+		return error.length > max ? `${error.slice(0, max)}…` : error;
 	}
 
 	onMount(load);
@@ -164,189 +313,394 @@
 		iconClass="bg-info/15 text-info"
 	>
 		{#snippet actions()}
-			<Button variant="outline" size="sm" onclick={load} disabled={loading}>
+			<Button variant="outline" size="sm" onclick={load} disabled={refreshing}>
-				<RefreshCw class={loading ? 'animate-spin' : ''} />
+				<RefreshCw class={refreshing ? 'animate-spin' : ''} />
 				Обновить
 			</Button>
 		{/snippet}
 	</PageHeader>
 
-	<div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
+	{#if !initialLoading}
-		<Card class="border-l-4 border-l-chart-1 bg-chart-1/5 shadow-sm">
+		{#if overallStatus === 'ok'}
-			<CardHeader>
+			<Alert class="border-success/30 bg-success/5">
-				<CardTitle class="flex items-center gap-2 text-base">
+				<CheckCircle class="text-success" />
-					<Server class="size-4" />
+				<AlertTitle>Система в норме</AlertTitle>
-					Общий статус
+				<AlertDescription>{overallHint}</AlertDescription>
-				</CardTitle>
+			</Alert>
-				<CardDescription>Liveness + readiness + jobs/BGP</CardDescription>
+		{:else if overallStatus === 'warn'}
-			</CardHeader>
+			<Alert class="border-warning/30 bg-warning/5">
-			<CardContent>
+				<AlertTriangle class="text-warning" />
-				<div class="flex items-center justify-between gap-2">
+				<AlertTitle>Требуется внимание</AlertTitle>
-					<p class="text-2xl font-semibold uppercase">{overallStatus}</p>
+				<AlertDescription>{overallHint}</AlertDescription>
-					<Badge variant={overallBadgeVariant(overallStatus)}>{overallStatus}</Badge>
+			</Alert>
-				</div>
+		{:else if overallStatus === 'error'}
-				<p class="mt-2 text-xs text-muted-foreground">{overallHint}</p>
+			<Alert variant="destructive">
-			</CardContent>
+				<XCircle />
-		</Card>
+				<AlertTitle>Обнаружена проблема</AlertTitle>
+				<AlertDescription>{overallHint}</AlertDescription>
+			</Alert>
+		{/if}
+	{/if}
 
-		<Card class="border-l-4 border-l-chart-2 bg-chart-2/5 shadow-sm">
+	<div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
-			<CardHeader>
+		{#if initialLoading}
-				<CardTitle class="flex items-center gap-2 text-base">
+			{#each Array(4) as _, i (i)}
-					<Bird class="size-4" />
+				<CardSkeleton />
-					BGP сессии
+			{/each}
-				</CardTitle>
+		{:else}
-				<CardDescription>GET /v1/bird/status</CardDescription>
+			{#each kpiCards as card (card.id)}
-			</CardHeader>
+				{@const Icon = card.icon}
-			<CardContent>
+				{@const a = card.accent}
-				<div class="flex items-center justify-between gap-2">
+				<Card
-					<p class="text-2xl font-semibold">{bgpText}</p>
+					class={cn(
-					{#if bird?.birdc_configured}
+						'overflow-hidden border-l-4 shadow-sm transition-colors',
-						<Badge variant={bird.healthy ? 'default' : 'secondary'}
+						a.border,
-							>{bird.healthy ? 'healthy' : 'degraded'}</Badge
+						a.bg,
+						card.href ? 'hover:border-primary/35' : ''
+					)}
+				>
+					<CardHeader class="pb-2">
+						<div class="flex items-center justify-between gap-2">
+							<CardDescription class="flex min-w-0 items-center gap-2">
+								<span
+									class={cn(
+										'flex size-9 shrink-0 items-center justify-center rounded-lg',
+										a.iconBg
+									)}
+									aria-hidden="true"
+								>
+									<Icon class={cn('size-4', a.iconText)} />
+								</span>
+								<span class="truncate">{card.label}</span>
+							</CardDescription>
+							{#if card.href}
+								<Button variant="ghost" size="icon-sm" href={resolve(card.href)}>
+									<ArrowRight class="size-3.5" aria-hidden="true" />
+								</Button>
+							{/if}
+						</div>
+						<CardTitle
+							class={cn(
+								'font-bold tabular-nums',
+								card.id === 'version' ? 'font-mono text-xl' : 'text-3xl'
+							)}
 						>
-					{:else}
+							{card.value}
-						<Badge variant="outline">n/a</Badge>
+						</CardTitle>
-					{/if}
+					</CardHeader>
-				</div>
+					<CardContent class="space-y-2">
-				{#if birdError}
+						<div class="flex items-center justify-between gap-2">
-					<p class="mt-2 text-xs text-destructive">{birdError}</p>
+							<Badge variant={card.badgeVariant} class={card.badgeClass}>{card.badge}</Badge>
-				{:else if bird && !bird.birdc_configured}
+						</div>
-					<p class="mt-2 text-xs text-muted-foreground">
+						{#if card.error}
-						{bird.message ?? 'birdc не настроен на API-хосте.'}
+							<p class="text-xs text-destructive">{card.error}</p>
-					</p>
+						{:else}
-				{:else if bird?.error}
+							<p class="text-xs text-muted-foreground">{card.description}</p>
-					<p class="mt-2 text-xs text-destructive">{bird.error}</p>
+						{/if}
-				{:else}
+					</CardContent>
-					<p class="mt-2 text-xs text-muted-foreground">Established / total на API-хосте.</p>
+				</Card>
-				{/if}
+			{/each}
-			</CardContent>
+		{/if}
-		</Card>
-
-		<Card class="border-l-4 border-l-chart-4 bg-chart-4/5 shadow-sm">
-			<CardHeader>
-				<CardTitle class="flex items-center gap-2 text-base">
-					<Activity class="size-4" />
-					Задачи
-				</CardTitle>
-				<CardDescription>GET /v1/jobs?limit=100</CardDescription>
-			</CardHeader>
-			<CardContent>
-				<div class="flex items-center justify-between gap-2">
-					<p class="text-2xl font-semibold">{jobs ? jobs.running : '—'}</p>
-					<Badge variant={jobs && jobs.failed > 0 ? 'secondary' : 'default'}>
-						{jobs && jobs.failed > 0 ? `ошибок ${jobs.failed}` : 'без ошибок'}
-					</Badge>
-				</div>
-				{#if jobsError}
-					<p class="mt-2 text-xs text-destructive">{jobsError}</p>
-				{:else}
-					<p class="mt-2 text-xs text-muted-foreground">
-						Активных: {jobs?.running ?? '—'} из {jobs?.total ?? '—'} последних.
-					</p>
-				{/if}
-			</CardContent>
-		</Card>
-
-		<Card class="border-l-4 border-l-info bg-info/10 shadow-sm">
-			<CardHeader>
-				<CardTitle class="flex items-center gap-2 text-base">
-					<Hash class="size-4" />
-					Версия
-				</CardTitle>
-				<CardDescription>GET /v1/version</CardDescription>
-			</CardHeader>
-			<CardContent>
-				<div class="flex items-center justify-between gap-2">
-					<p class="font-mono text-2xl font-semibold">{versionText}</p>
-					<Badge variant={version ? 'outline' : 'secondary'}>{version ? 'loaded' : '—'}</Badge>
-				</div>
-				{#if versionError}
-					<p class="mt-2 text-xs text-destructive">{versionError}</p>
-				{:else if versionFooter}
-					<p class="mt-2 truncate text-xs text-muted-foreground">{versionFooter}</p>
-				{/if}
-			</CardContent>
-		</Card>
 	</div>
 
 	<div class="grid gap-4 lg:grid-cols-2">
-		<Card>
+		{#if initialLoading}
-			<CardHeader>
+			<CardSkeleton />
-				<CardTitle class="text-base">Доступность и готовность</CardTitle>
+			<CardSkeleton />
-				<CardDescription>GET /v1/health и GET /v1/ready</CardDescription>
+		{:else}
-			</CardHeader>
+			<Card>
-			<CardContent class="space-y-3">
+				<CardHeader>
-				<div class="flex items-center gap-2 text-sm">
+					<CardTitle class="text-base">Доступность и готовность</CardTitle>
-					<span class="text-muted-foreground">Liveness:</span>
+					<CardDescription>GET /v1/health · GET /v1/ready</CardDescription>
-					{#if health === null}
+				</CardHeader>
-						<Badge variant="outline">—</Badge>
+				<CardContent class="space-y-4">
-					{:else if health.ok}
+					{#if health?.error || readyError}
-						<Badge variant="default">ok</Badge>
+						<Alert variant="destructive">
-					{:else}
+							<XCircle />
-						<Badge variant="destructive">failed</Badge>
+							<AlertTitle>Ошибка проверки</AlertTitle>
+							<AlertDescription>
+								{#if health?.error}{health.error}{/if}
+								{#if health?.error && readyError}<br />{/if}
+								{#if readyError}{readyError}{/if}
+							</AlertDescription>
+						</Alert>
 					{/if}
-					{#if health?.status}
-						<span class="text-muted-foreground">{health.status}</span>
-					{/if}
-				</div>
 
-				<div class="flex items-center gap-2 text-sm">
+					<Table>
-					<span class="text-muted-foreground">Readiness:</span>
+						<TableHeader>
-					{#if ready === null}
+							<TableRow>
-						<Badge variant="outline">—</Badge>
+								<TableHead class="w-[55%]">Проверка</TableHead>
-					{:else}
+								<TableHead>Статус</TableHead>
-						<Badge variant={ready.status === 'ready' ? 'default' : 'destructive'}
+							</TableRow>
-							>{ready.status}</Badge
+						</TableHeader>
-						>
+						<TableBody>
-					{/if}
+							{@const liveBadge = livenessBadge(health)}
-				</div>
+							<TableRow>
+								<TableCell>
+									<div class="flex items-center gap-2">
+										<HeartPulse class="size-4 shrink-0 text-muted-foreground" aria-hidden="true" />
+										<div>
+											<p class="text-sm font-medium">Liveness</p>
+											<p class="text-xs text-muted-foreground">/v1/health</p>
+										</div>
+									</div>
+								</TableCell>
+								<TableCell>
+									<Badge variant={liveBadge.variant} class={liveBadge.class}
+										>{liveBadge.label}</Badge
+									>
+								</TableCell>
+							</TableRow>
+							{@const readyBadge = readinessBadge(ready)}
+							<TableRow>
+								<TableCell>
+									<div class="flex items-center gap-2">
+										<ShieldCheck class="size-4 shrink-0 text-muted-foreground" aria-hidden="true" />
+										<div>
+											<p class="text-sm font-medium">Readiness</p>
+											<p class="text-xs text-muted-foreground">/v1/ready</p>
+										</div>
+									</div>
+								</TableCell>
+								<TableCell>
+									<Badge variant={readyBadge.variant} class={readyBadge.class}
+										>{readyBadge.label}</Badge
+									>
+								</TableCell>
+							</TableRow>
+							{#if ready?.checks && Object.keys(ready.checks).length > 0}
+								<TableRow>
+									<TableCell colspan={2} class="bg-muted/30 py-2">
+										<p class="text-xs font-medium text-muted-foreground">Зависимости</p>
+									</TableCell>
+								</TableRow>
+								{#each Object.entries(ready.checks) as [key, value] (key)}
+									{@const badge = checkStatusBadge(value)}
+									{@const CheckIcon = checkIconByKey[key] ?? ListTodo}
+									<TableRow>
+										<TableCell>
+											<div class="flex items-center gap-2">
+												<CheckIcon
+													class="size-4 shrink-0 text-muted-foreground"
+													aria-hidden="true"
+												/>
+												<div>
+													<p class="text-sm font-medium">{checkDisplayName(key)}</p>
+													<p class="text-xs text-muted-foreground">{key}</p>
+												</div>
+											</div>
+										</TableCell>
+										<TableCell>
+											<div class="space-y-1">
+												<Badge variant={badge.variant} class={badge.class}>{badge.label}</Badge>
+												{#if badge.hint}
+													<p class="text-xs text-muted-foreground">{badge.hint}</p>
+												{/if}
+											</div>
+										</TableCell>
+									</TableRow>
+								{/each}
+							{/if}
+						</TableBody>
+					</Table>
 
-				{#if health?.error}
+					<p class="text-xs text-muted-foreground">
-					<p class="text-xs text-destructive">{health.error}</p>
+						HTTP 503 на readiness означает недоступность одной из зависимостей в checks.
-				{/if}
+					</p>
-				{#if readyError}
+				</CardContent>
-					<p class="text-xs text-destructive">{readyError}</p>
+			</Card>
-				{/if}
 
-				{#if ready?.checks}
+			<Card>
-					<div class="space-y-1">
+				<CardHeader>
-						{#each Object.entries(ready.checks) as [k, v] (k)}
+					<div class="flex items-start justify-between gap-2">
-							<div class="grid grid-cols-[auto_1fr] items-center gap-2 text-xs">
+						<div>
-								<span class="text-muted-foreground">{k}</span>
+							<CardTitle class="flex items-center gap-2 text-base">
-								<Badge variant="outline" class="justify-start font-normal">{String(v)}</Badge>
+								<Bird class="size-4" />
-							</div>
+								BGP на API-хосте
-						{/each}
+							</CardTitle>
+							<CardDescription>GET /v1/bird/status</CardDescription>
+						</div>
+						<Button variant="outline" size="sm" href={resolve('/network')}>Пиры и спикеры</Button>
 					</div>
-				{/if}
+				</CardHeader>
-			</CardContent>
+				<CardContent class="space-y-4">
-		</Card>
+					{#if birdError}
+						<Alert variant="destructive">
+							<XCircle />
+							<AlertTitle>Ошибка birdc</AlertTitle>
+							<AlertDescription>{birdError}</AlertDescription>
+						</Alert>
+					{:else if bird && !bird.birdc_configured}
+						<p class="text-sm text-muted-foreground">
+							{bird.message ?? 'birdc не настроен на API-хосте (EVOBGP_BIRDC_SOCKET).'}
+						</p>
+					{:else if bird}
+						<div class="space-y-2">
+							<div class="flex items-center justify-between text-sm">
+								<span class="text-muted-foreground">Established / total</span>
+								<span class="font-medium tabular-nums">
+									{bird.bgp_established} / {bird.bgp_sessions_total}
+									{#if bgpRatio !== null}
+										<span class="text-muted-foreground">({bgpRatio}%)</span>
+									{/if}
+								</span>
+							</div>
+							{#if bgpRatio !== null}
+								<div class="h-2 overflow-hidden rounded-full bg-muted">
+									<div
+										class={cn(
+											'h-full rounded-full transition-all',
+											bgpRatio >= 100
+												? 'bg-success'
+												: bgpRatio >= 50
+													? 'bg-warning'
+													: 'bg-destructive'
+										)}
+										style="width: {bgpRatio}%"
+									></div>
+								</div>
+							{/if}
+							{#if bird.error}
+								<p class="text-xs text-destructive">{bird.error}</p>
+							{/if}
+						</div>
+						{#if bird.protocols_excerpt}
+							<Separator />
+							<div class="space-y-2">
+								<p class="text-sm font-medium">Вывод birdc (protocols)</p>
+								<ScrollPreBlock variant="preserve" text={bird.protocols_excerpt} class="max-h-48" />
+							</div>
+						{/if}
+					{/if}
+				</CardContent>
+			</Card>
+		{/if}
+	</div>
 
-		<Card>
+	<div class="grid gap-4 lg:grid-cols-2">
-			<CardHeader>
+		{#if initialLoading}
-				<CardTitle class="flex items-center gap-2 text-base">
+			<CardSkeleton />
-					<AlertTriangle class="size-4 text-muted-foreground" />
+			<CardSkeleton />
-					Что проверять при деградации
+		{:else}
-				</CardTitle>
+			<Card>
-				<CardDescription>Короткая шпаргалка для triage</CardDescription>
+				<CardHeader>
-			</CardHeader>
+					<div class="flex items-start justify-between gap-2">
-			<CardContent class="space-y-2 text-sm">
+						<div>
-				<p>
+							<CardTitle class="flex items-center gap-2 text-base">
-					<span class="text-muted-foreground">Если </span><code>health=failed</code> — проверьте доступность
+								<Activity class="size-4" />
-					процесса API и его логи.
+								Задачи
-				</p>
+							</CardTitle>
-				<p>
+							<CardDescription>Последние 100 задач · GET /v1/jobs</CardDescription>
-					<span class="text-muted-foreground">Если </span><code>ready!=ready</code> — сначала `postgres`,
+						</div>
-					затем `store/jobs` в checks.
+						<Button variant="outline" size="sm" href={resolve('/operations')}>Все операции</Button>
-				</p>
+					</div>
-				<p>
+				</CardHeader>
-					<span class="text-muted-foreground">Если low BGP ratio</span> — проверьте `bird/status`, затем
+				<CardContent class="space-y-4">
-					BGP peer состояния.
+					{#if jobsError}
-				</p>
+						<Alert variant="destructive">
-				<p>
+							<XCircle />
-					<span class="text-muted-foreground">Если ошибки jobs</span> — откройте операции и проверьте
+							<AlertTitle>Не удалось загрузить задачи</AlertTitle>
-					последние неуспешные задачи.
+							<AlertDescription>{jobsError}</AlertDescription>
-				</p>
+						</Alert>
-			</CardContent>
+					{:else if jobs}
-		</Card>
+						<div class="flex flex-wrap gap-4 text-sm">
+							<div>
+								<p class="text-muted-foreground">Активных</p>
+								<p class="text-2xl font-bold tabular-nums">{jobs.running}</p>
+							</div>
+							<div>
+								<p class="text-muted-foreground">С ошибками</p>
+								<p
+									class={cn(
+										'text-2xl font-bold tabular-nums',
+										jobs.failed > 0 ? 'text-warning' : 'text-success'
+									)}
+								>
+									{jobs.failed}
+								</p>
+							</div>
+							<div>
+								<p class="text-muted-foreground">В выборке</p>
+								<p class="text-2xl font-bold tabular-nums">{jobs.total}</p>
+							</div>
+						</div>
+
+						<Separator />
+
+						{#if failedJobs.length > 0}
+							<div class="space-y-3">
+								<p class="text-sm font-medium">Последние ошибки</p>
+								<ul class="space-y-2">
+									{#each failedJobs as job (job.job_id)}
+										<li class="rounded-lg border px-3 py-2 text-sm">
+											<div class="flex items-start justify-between gap-2">
+												<p class="font-medium">{jobKindTitle(job)}</p>
+												<Badge variant="destructive">{jobStatusRu(job.status)}</Badge>
+											</div>
+											{#if job.error}
+												<p class="mt-1 text-xs text-muted-foreground">
+													{truncateError(job.error)}
+												</p>
+											{/if}
+										</li>
+									{/each}
+								</ul>
+							</div>
+						{:else}
+							<p class="text-sm text-muted-foreground">
+								Критичных сбоев в последних 100 задачах нет.
+							</p>
+						{/if}
+					{/if}
+				</CardContent>
+			</Card>
+
+			<Card>
+				<CardHeader>
+					<CardTitle class="flex items-center gap-2 text-base">
+						<AlertTriangle class="size-4 text-muted-foreground" />
+						Что проверять при деградации
+					</CardTitle>
+					<CardDescription>Короткая шпаргалка для triage</CardDescription>
+				</CardHeader>
+				<CardContent class="space-y-3">
+					<Alert>
+						<HeartPulse class="size-4" />
+						<AlertTitle>API недоступен</AlertTitle>
+						<AlertDescription>
+							Если <code class="text-xs">/v1/health</code> возвращает ошибку — проверьте процесс API и
+							его логи.
+						</AlertDescription>
+					</Alert>
+					<Alert>
+						<Database class="size-4" />
+						<AlertTitle>Readiness не «Готов»</AlertTitle>
+						<AlertDescription>
+							Сначала <code class="text-xs">postgres</code>, затем
+							<code class="text-xs">store</code> и <code class="text-xs">jobs</code> в checks.
+						</AlertDescription>
+					</Alert>
+					<Alert>
+						<Bird class="size-4" />
+						<AlertTitle>Низкий ratio BGP</AlertTitle>
+						<AlertDescription>
+							Проверьте <code class="text-xs">/v1/bird/status</code>, затем состояние пиров в
+							<Button variant="link" class="h-auto p-0" href={resolve('/network')}>Сети</Button>.
+						</AlertDescription>
+					</Alert>
+					<Alert>
+						<ListTodo class="size-4" />
+						<AlertTitle>Ошибки задач</AlertTitle>
+						<AlertDescription>
+							Откройте
+							<Button variant="link" class="h-auto p-0" href={resolve('/operations')}
+								>Операции</Button
+							>
+							и проверьте последние неуспешные jobs.
+						</AlertDescription>
+					</Alert>
+				</CardContent>
+			</Card>
+		{/if}
 	</div>
 </div>

web/src/routes/operations/+page.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
+	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
+	import { resolve } from '$app/paths';
 	import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 	import {
 		apiFetch,
@@ -23,28 +26,28 @@
 		ModulesResponse
 	} from '$lib/api/types.js';
 	import { jobKindTitle } from '$lib/operations/job-kind-label.js';
-	import { jobStatusRu } from '$lib/ui-labels.js';
+	import { jobStatusRu, jobStatusBadgeVariant } from '$lib/ui-labels.js';
-	import { Badge } from '$lib/components/ui/badge/index.js';
+	import { formatDateTime } from '$lib/modules/display.js';
-	import { Button } from '$lib/components/ui/button/index.js';
+	import { Badge } from '$lib/ui/core/badge/index.js';
-	import { Tabs, TabsContent, TabsList, TabsTrigger } from '$lib/components/ui/tabs/index.js';
+	import { Button } from '$lib/ui/core/button/index.js';
-	import {
+	import { Tabs, TabsContent, TabsList, TabsTrigger } from '$lib/ui/core/tabs/index.js';
-		AlertDialog,
-		AlertDialogContent,
-		AlertDialogHeader,
-		AlertDialogTitle,
-		AlertDialogDescription,
-		AlertDialogFooter,
-		AlertDialogCancel,
-		AlertDialogAction
-	} from '$lib/components/ui/alert-dialog/index.js';
 	import {
 		Dialog,
 		DialogContent,
 		DialogHeader,
 		DialogTitle,
 		DialogDescription
-	} from '$lib/components/ui/dialog/index.js';
+	} from '$lib/ui/core/dialog/index.js';
-	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
+	import { Select, SelectContent, SelectItem, SelectTrigger } from '$lib/ui/core/select/index.js';
+	import { Alert, AlertDescription, AlertTitle } from '$lib/ui/core/alert/index.js';
+	import {
+		Card,
+		CardContent,
+		CardDescription,
+		CardHeader,
+		CardTitle
+	} from '$lib/ui/core/card/index.js';
+	import { Skeleton } from '$lib/ui/core/skeleton/index.js';
 	import OperationsQuickActions from '$lib/components/operations/OperationsQuickActions.svelte';
 	import OperationsRevisionsTab from '$lib/components/operations/OperationsRevisionsTab.svelte';
 	import OperationsDiffTab from '$lib/components/operations/OperationsDiffTab.svelte';
@@ -56,6 +59,10 @@
 		ReportRow
 	} from '$lib/components/operations/types.js';
 	import ScrollPreBlock from '$lib/components/app/scroll-pre-block.svelte';
+	import CardSkeleton from '$lib/ui/patterns/feedback/card-skeleton.svelte';
+	import { confirm } from '$lib/ui/patterns/confirm/confirm-state.svelte.js';
+	import PageHeader from '$lib/ui/app/page-header/page-header.svelte';
+	import { notify, notifyApiError } from '$lib/ui/app/toast.js';
 	import {
 		dialogBodyDocument,
 		dialogBodyPanel,
@@ -65,14 +72,23 @@
 		dialogHeaderPanel
 	} from '$lib/dialog-layout.js';
 	import { cn } from '$lib/utils.js';
-	import { toast } from 'svelte-sonner';
+	import Activity from '@lucide/svelte/icons/activity';
-	import Zap from '@lucide/svelte/icons/zap';
+	import RefreshCw from '@lucide/svelte/icons/refresh-cw';
-	import PageHeader from '$lib/ui/app/page-header/page-header.svelte';
+	import Clock from '@lucide/svelte/icons/clock';
+	import AlertTriangle from '@lucide/svelte/icons/alert-triangle';
+	import Info from '@lucide/svelte/icons/info';
+	import ArrowRight from '@lucide/svelte/icons/arrow-right';
+
+	type OpsTab = 'revisions' | 'diff' | 'jobs';
+
+	function parseOpsTab(value: string | null): OpsTab {
+		if (value === 'diff' || value === 'jobs') return value;
+		return 'revisions';
+	}
 
 	// Revisions
 	let revisions = $state<RevisionRow[]>([]);
 	let revLoading = $state(false);
-	let rollbackTarget = $state<RevisionRow | null>(null);
 	let rollingBack = $state(false);
 
 	// Preview/Prefixes
@@ -115,8 +131,6 @@
 	let jobFilterModule = $state('');
 	let jobActiveOnly = $state(false);
 	let moduleNameById = $state(new Map<string, string>());
-	let cancelTarget = $state<JobRow | null>(null);
-	let cancelling = $state(false);
 	let jobDetailDialog = $state(false);
 	let jobDetail = $state<JobRow | null>(null);
 	let expandedJobIds = new SvelteSet<string>();
@@ -128,14 +142,18 @@
 	// Global apply / bird reload
 	let applying = $state(false);
 	let reloading = $state(false);
-	let applyConfirm = $state(false);
-	let reloadConfirm = $state(false);
 
 	// BIRD runtime status (birdc на хосте API, если настроен сокет)
 	let birdStatus = $state<BirdStatus | null>(null);
 	let birdLoading = $state(false);
 	let birdProtocolsOpen = $state(false);
 
+	let activeTab = $state<OpsTab>('revisions');
+	let initialLoading = $state(true);
+	let refreshing = $state(false);
+	let lastUpdated = $state<Date | null>(null);
+	let tabSyncReady = $state(false);
+
 	function summarizeJobBirdMeta(job: JobRow): string {
 		const check = job.meta?.bird_post_apply_check;
 		if (check === 'skipped_no_birdc_socket') {
@@ -156,7 +174,7 @@
 			birdStatus = await apiJSON<BirdStatus>('/v1/bird/status');
 		} catch (e) {
 			birdStatus = null;
-			toast.error(e instanceof Error ? e.message : String(e));
+			notifyApiError(e);
 		} finally {
 			birdLoading = false;
 		}
@@ -168,7 +186,7 @@
 			const r = await apiJSON<RevisionsResponse>('/v1/revisions?limit=100');
 			revisions = r.items;
 		} catch (e) {
-			toast.error(e instanceof Error ? e.message : String(e));
+			notifyApiError(e);
 		} finally {
 			revLoading = false;
 		}
@@ -211,7 +229,7 @@
 			link.remove();
 			URL.revokeObjectURL(objectUrl);
 		} catch (e) {
-			toast.error(e instanceof Error ? e.message : String(e));
+			notifyApiError(e);
 		}
 	}
 
@@ -225,7 +243,7 @@
 			const j = await apiJSON<JobsResponse>(`/v1/jobs?${params.toString()}`);
 			jobs = j.items;
 		} catch (e) {
-			toast.error(e instanceof Error ? e.message : String(e));
+			notifyApiError(e);
 		} finally {
 			jobsLoading = false;
 		}
@@ -314,17 +332,149 @@
 			}
 			moduleNameById = m;
 		} catch (e) {
-			toast.error(e instanceof Error ? e.message : String(e));
+			notifyApiError(e);
 		}
 	}
 
 	onMount(() => {
-		loadRevisions();
+		activeTab = parseOpsTab(page.url.searchParams.get('tab'));
-		loadJobs();
+		tabSyncReady = true;
-		loadBirdStatus();
+		void refreshAll(true);
-		loadModules();
 	});
 
+	const statAccents = [
+		{
+			border: 'border-l-chart-1',
+			bg: 'bg-chart-1/5',
+			iconBg: 'bg-chart-1/15',
+			iconText: 'text-chart-1'
+		},
+		{
+			border: 'border-l-chart-2',
+			bg: 'bg-chart-2/5',
+			iconBg: 'bg-chart-2/15',
+			iconText: 'text-chart-2'
+		},
+		{
+			border: 'border-l-chart-4',
+			bg: 'bg-chart-4/5',
+			iconBg: 'bg-chart-4/15',
+			iconText: 'text-chart-4'
+		}
+	] as const;
+
+	const runningJobsCount = $derived(
+		jobs.filter((j) => j.status === 'running' || j.status === 'queued').length
+	);
+
+	const failedJobsCount = $derived(
+		jobs.filter((j) => {
+			const s = String(j.status ?? '').toLowerCase();
+			return s === 'failed' || s === 'error' || s === 'canceled' || s === 'cancelled';
+		}).length
+	);
+
+	const kpiCards = $derived.by(() => [
+		{
+			id: 'revisions',
+			label: 'Ревизий',
+			value: initialLoading ? '—' : String(revisions.length),
+			description: 'в последней выборке',
+			icon: Activity,
+			accent: statAccents[0],
+			badge: 'история конфигов'
+		},
+		{
+			id: 'running',
+			label: 'Активных задач',
+			value: initialLoading ? '—' : String(runningJobsCount),
+			description: 'queued и running',
+			icon: Clock,
+			accent: statAccents[1],
+			badge: 'в работе'
+		},
+		{
+			id: 'failed',
+			label: 'Задач с ошибкой',
+			value: initialLoading ? '—' : String(failedJobsCount),
+			description: failedJobsCount > 0 ? 'требуют внимания' : 'критичных сбоев нет',
+			icon: AlertTriangle,
+			accent: statAccents[2],
+			badge: failedJobsCount > 0 ? 'есть ошибки' : 'без ошибок',
+			badgeClass:
+				failedJobsCount === 0 ? 'border-success/30 bg-success/15 text-success' : undefined,
+			href: failedJobsCount > 0 ? ('/schedule' as const) : undefined
+		}
+	]);
+
+	function syncTabToUrl(tab: OpsTab) {
+		if (!tabSyncReady) return;
+		const url = new URL(page.url);
+		if (tab === 'revisions') url.searchParams.delete('tab');
+		else url.searchParams.set('tab', tab);
+		const next = `${url.pathname}${url.search}${url.hash}`;
+		if (next !== `${page.url.pathname}${page.url.search}${page.url.hash}`) {
+			void goto(next, { replaceState: true, keepFocus: true, noScroll: true });
+		}
+	}
+
+	$effect(() => {
+		if (!tabSyncReady) return;
+		syncTabToUrl(activeTab);
+	});
+
+	async function refreshAll(isInitial = false) {
+		if (isInitial) initialLoading = true;
+		else refreshing = true;
+		await Promise.all([loadRevisions(), loadJobs(), loadBirdStatus(), loadModules()]);
+		lastUpdated = new Date();
+		initialLoading = false;
+		refreshing = false;
+	}
+
+	function requestApply() {
+		void confirm({
+			title: 'Применить конфигурацию на всех спикерах?',
+			description:
+				'Текущая конфигурация будет применена на всех BIRD-агентах. Требуется роль operator.',
+			confirmLabel: 'Применить',
+			onConfirm: doApply
+		});
+	}
+
+	function requestReload() {
+		void confirm({
+			title: 'Перезагрузить BIRD?',
+			description: 'BIRD перезагрузит конфигурацию. Требуется роль operator.',
+			confirmLabel: 'Перезагрузить',
+			onConfirm: doBirdReload
+		});
+	}
+
+	function requestRollback(rev: RevisionRow) {
+		void confirm({
+			title: `Откатиться к ревизии ${rev.id.slice(0, 8)}…?`,
+			description: 'Будет создана новая ревизия на основе выбранной. Требуется роль operator.',
+			confirmLabel: 'Откатить',
+			destructive: true,
+			onConfirm: async () => {
+				await rollback(rev);
+			}
+		});
+	}
+
+	function requestCancelJob(job: JobRow) {
+		void confirm({
+			title: 'Отменить задачу?',
+			description: `Задача: ${jobKindTitle(job, moduleNameById)} (${job.job_id.slice(0, 8)}…)`,
+			confirmLabel: 'Отменить',
+			destructive: true,
+			onConfirm: async () => {
+				await cancelJob(job);
+			}
+		});
+	}
+
 	async function openPreview(rev: RevisionRow) {
 		previewRevision = rev;
 		previewLoading = true;
@@ -343,7 +493,7 @@
 			const frags = asPreviewFragments(prev);
 			birdPreviewPath = defaultBirdPreviewPath(frags);
 		} catch (e) {
-			toast.error(e instanceof Error ? e.message : String(e));
+			notifyApiError(e);
 		} finally {
 			previewLoading = false;
 		}
@@ -351,29 +501,29 @@
 
 	async function loadDiff() {
 		if (!diffRevA || !diffRevB) {
-			toast.error('Выберите две ревизии');
+			notify.error('Выберите две ревизии');
 			return;
 		}
 		diffLoading = true;
 		try {
 			diffData = await apiJSON<RevisionDiff>(`/v1/revisions/${diffRevA}/diff/${diffRevB}`);
 		} catch (e) {
-			toast.error(e instanceof Error ? e.message : String(e));
+			notifyApiError(e);
 		} finally {
 			diffLoading = false;
 		}
 	}
 
-	async function rollback() {
+	async function rollback(rev: RevisionRow) {
-		if (!rollbackTarget) return;
 		rollingBack = true;
 		try {
-			await apiMutate(`/v1/revisions/${rollbackTarget.id}/rollback`, 'POST', {});
+			await apiMutate(`/v1/revisions/${rev.id}/rollback`, 'POST', {});
-			toast.success('Откат выполнен');
+			notify.success('Откат выполнен');
-			rollbackTarget = null;
 			await loadRevisions();
 		} catch (e) {
-			toast.error(e instanceof Error ? e.message : String(e));
+			notifyApiError(e);
+			throw e;
+		} finally {
 			rollingBack = false;
 		}
 	}
@@ -383,23 +533,22 @@
 		try {
 			const revId = revisions[0]?.id;
 			if (!revId) {
-				toast.error('Нет ревизий — сначала обновите модуль или дождитесь задачи render');
+				notify.error('Нет ревизий — сначала обновите модуль или дождитесь задачи render');
 				return;
 			}
 			const res = await apiMutate<{ job_id: string; status?: string }>('/v1/apply', 'POST', {
 				revision_id: revId
 			});
-			applyConfirm = false;
 			if (!res?.job_id) {
-				toast.error('Ответ API без job_id');
+				notify.error('Ответ API без job_id');
 				return;
 			}
 			const job = await waitForJob(res.job_id, { timeoutMs: 180000 });
 			const extra = summarizeJobBirdMeta(job);
 			if (job.status === 'succeeded') {
-				toast.success(extra ? `Применение успешно. ${extra}` : 'Конфигурация успешно применена');
+				notify.success(extra ? `Применение успешно. ${extra}` : 'Конфигурация успешно применена');
 			} else {
-				toast.error(
+				notify.error(
 					job.error
 						? `${jobStatusRu(job.status)}: ${job.error}`
 						: `Задача завершилась со статусом ${jobStatusRu(job.status)}`
@@ -408,7 +557,7 @@
 			await loadJobs();
 			await loadBirdStatus();
 		} catch (e) {
-			toast.error(e instanceof Error ? e.message : String(e));
+			notifyApiError(e);
 		} finally {
 			applying = false;
 		}
@@ -418,19 +567,18 @@
 		reloading = true;
 		try {
 			const res = await apiMutate<{ job_id: string }>('/v1/bird/reload', 'POST', {});
-			reloadConfirm = false;
 			if (!res?.job_id) {
-				toast.error('Ответ API без job_id');
+				notify.error('Ответ API без job_id');
 				return;
 			}
 			const job = await waitForJob(res.job_id, { timeoutMs: 120000 });
 			const extra = summarizeJobBirdMeta(job);
 			if (job.status === 'succeeded') {
-				toast.success(
+				notify.success(
 					extra ? `Перезагрузка успешна. ${extra}` : 'Команда birdc configure выполнена'
 				);
 			} else {
-				toast.error(
+				notify.error(
 					job.error
 						? `${jobStatusRu(job.status)}: ${job.error}`
 						: `Задача завершилась со статусом ${jobStatusRu(job.status)}`
@@ -439,24 +587,20 @@
 			await loadJobs();
 			await loadBirdStatus();
 		} catch (e) {
-			toast.error(e instanceof Error ? e.message : String(e));
+			notifyApiError(e);
 		} finally {
 			reloading = false;
 		}
 	}
 
-	async function cancelJob() {
+	async function cancelJob(job: JobRow) {
-		if (!cancelTarget) return;
-		cancelling = true;
 		try {
-			await apiMutate(`/v1/jobs/${cancelTarget.job_id}/cancel`, 'POST', {});
+			await apiMutate(`/v1/jobs/${job.job_id}/cancel`, 'POST', {});
-			toast.success('Задача отменена');
+			notify.success('Задача отменена');
-			cancelTarget = null;
 			await loadJobs();
 		} catch (e) {
-			toast.error(e instanceof Error ? e.message : String(e));
+			notifyApiError(e);
-		} finally {
+			throw e;
-			cancelling = false;
 		}
 	}
 
@@ -487,7 +631,7 @@
 			jobDetailsById.set(jobId, freshJob);
 			await ensureJobReport(freshJob);
 		} catch (e) {
-			toast.error(e instanceof Error ? e.message : String(e));
+			notifyApiError(e);
 		} finally {
 			jobDetailsLoading.delete(jobId);
 		}
@@ -625,7 +769,7 @@
 				ipRanges
 			});
 		} catch (e) {
-			toast.error(e instanceof Error ? e.message : String(e));
+			notifyApiError(e);
 		} finally {
 			jobReportsLoading.delete(jobId);
 		}
@@ -703,18 +847,6 @@
 		return safeEntries.reduce((acc, entry) => acc + entry.prefix_count, 0);
 	}
 
-	function jobStatusVariant(status: string): 'default' | 'secondary' | 'outline' | 'destructive' {
-		if (status === 'succeeded') return 'default';
-		if (status === 'running') return 'secondary';
-		if (status === 'failed') return 'destructive';
-		return 'outline';
-	}
-
-	function formatDate(d?: string | null) {
-		if (!d) return '—';
-		return new Date(d).toLocaleString('ru');
-	}
-
 	function birdHealthyBadgeVariant(
 		h: boolean | null | undefined
 	): 'default' | 'secondary' | 'outline' | 'destructive' {
@@ -724,7 +856,7 @@
 	}
 
 	function birdHealthyShortLabel(h: boolean | null | undefined): string {
-		if (h === true) return 'ОК';
+		if (h === true) return 'В норме';
 		if (h === false) return 'Проблема';
 		return 'Н/Д';
 	}
@@ -732,31 +864,100 @@
 
 <div class="flex flex-col gap-6">
 	<PageHeader
-		title="Операции"
+		title="Ревизии и операции"
-		description="Деплой конфигурации, управление ревизиями и задачами."
+		description={lastUpdated
-		icon={Zap}
+			? `Деплой, сравнение конфигураций и задачи. Обновлено: ${lastUpdated.toLocaleTimeString('ru-RU')}`
+			: 'Деплой конфигурации, управление ревизиями и задачами.'}
+		icon={Activity}
 		iconClass="bg-chart-2/15 text-chart-2"
-	/>
+	>
+		{#snippet actions()}
+			<Button variant="outline" size="sm" onclick={() => refreshAll()} disabled={refreshing}>
+				<RefreshCw class={refreshing ? 'animate-spin' : ''} />
+				Обновить
+			</Button>
+		{/snippet}
+	</PageHeader>
+
+	<Alert class="border-info/30 bg-info/5">
+		<Info class="text-info" />
+		<AlertTitle>Три раздела на одной странице</AlertTitle>
+		<AlertDescription>
+			<strong>Ревизии</strong> — история конфигов и откат; <strong>Сравнение</strong> — diff
+			префиксов;
+			<strong>Задачи</strong> — ingest, apply, rollback. Apply и Reload требуют operator. Сводный
+			мониторинг BGP — на
+			<Button variant="link" class="h-auto p-0" href={resolve('/monitoring')}>Мониторинг</Button>.
+		</AlertDescription>
+	</Alert>
+
+	<div class="grid gap-4 sm:grid-cols-3">
+		{#if initialLoading}
+			{#each Array(3) as _, i (i)}
+				<CardSkeleton />
+			{/each}
+		{:else}
+			{#each kpiCards as card (card.id)}
+				{@const Icon = card.icon}
+				{@const a = card.accent}
+				<Card
+					class={cn(
+						'overflow-hidden border-l-4 shadow-sm transition-colors',
+						a.border,
+						a.bg,
+						card.href ? 'hover:border-primary/35' : ''
+					)}
+				>
+					<CardHeader class="pb-2">
+						<div class="flex items-center justify-between gap-2">
+							<CardDescription class="flex min-w-0 items-center gap-2">
+								<span
+									class={cn(
+										'flex size-9 shrink-0 items-center justify-center rounded-lg',
+										a.iconBg
+									)}
+									aria-hidden="true"
+								>
+									<Icon class={cn('size-4', a.iconText)} />
+								</span>
+								<span class="truncate">{card.label}</span>
+							</CardDescription>
+							{#if card.href}
+								<Button variant="ghost" size="icon-sm" href={resolve(card.href)}>
+									<ArrowRight class="size-3.5" aria-hidden="true" />
+								</Button>
+							{/if}
+						</div>
+						<CardTitle class="text-3xl font-bold tabular-nums">{card.value}</CardTitle>
+					</CardHeader>
+					<CardContent class="space-y-2">
+						<Badge variant="outline" class={card.badgeClass}>{card.badge}</Badge>
+						<p class="text-xs text-muted-foreground">{card.description}</p>
+					</CardContent>
+				</Card>
+			{/each}
+		{/if}
+	</div>
 
 	<OperationsQuickActions
 		{applying}
 		{reloading}
 		{birdLoading}
 		{birdStatus}
-		onApply={() => (applyConfirm = true)}
+		onApply={requestApply}
-		onReload={() => (reloadConfirm = true)}
+		onReload={requestReload}
 		onRefreshBirdStatus={loadBirdStatus}
 		onOpenBirdProtocols={() => (birdProtocolsOpen = true)}
 		{birdHealthyBadgeVariant}
 		{birdHealthyShortLabel}
 	/>
 
-	<Tabs value="revisions">
+	<Tabs bind:value={activeTab}>
 		<div class="overflow-x-auto pb-1 [scrollbar-gutter:stable]">
 			<TabsList class="inline-flex min-w-max">
-				<TabsTrigger value="revisions">Ревизии</TabsTrigger>
+				<TabsTrigger value="revisions">Ревизии ({revisions.length})</TabsTrigger>
 				<TabsTrigger value="diff">Сравнение</TabsTrigger>
-				<TabsTrigger value="jobs">Задачи</TabsTrigger>
+				<TabsTrigger value="jobs">Задачи ({jobs.length})</TabsTrigger>
 			</TabsList>
 		</div>
 
@@ -766,9 +967,8 @@
 				{revLoading}
 				onReload={loadRevisions}
 				onOpenPreview={openPreview}
-				onRollbackRequest={(rev) => (rollbackTarget = rev)}
+				onRollbackRequest={requestRollback}
 				onDownloadDiagnosticLog={downloadRevisionDiagnosticLog}
-				{formatDate}
 			/>
 		</TabsContent>
 
@@ -782,7 +982,6 @@
 				onDiffRevAChange={(value) => (diffRevA = value)}
 				onDiffRevBChange={(value) => (diffRevB = value)}
 				onLoadDiff={loadDiff}
-				{formatDate}
 			/>
 		</TabsContent>
 
@@ -815,103 +1014,17 @@
 				{jobReportsLoading}
 				onReloadJobs={loadJobs}
 				onOpenJobDetail={openJobDetail}
-				onRequestCancelJob={(job) => (cancelTarget = job)}
+				onRequestCancelJob={requestCancelJob}
 				onToggleJobExpanded={toggleJobExpanded}
 				{isJobExpanded}
 				{getJobLogEntries}
 				{getJobLogTotal}
-				{jobStatusVariant}
+				jobStatusVariant={jobStatusBadgeVariant}
-				{formatDate}
 			/>
 		</TabsContent>
 	</Tabs>
 </div>
 
-<!-- Apply confirm -->
-<AlertDialog bind:open={applyConfirm}>
-	<AlertDialogContent>
-		<AlertDialogHeader>
-			<AlertDialogTitle>Применить конфигурацию на всех спикерах?</AlertDialogTitle>
-			<AlertDialogDescription
-				>Текущая конфигурация будет применена на всех BIRD-агентах. Требуется роль operator.</AlertDialogDescription
-			>
-		</AlertDialogHeader>
-		<AlertDialogFooter>
-			<AlertDialogCancel>Отмена</AlertDialogCancel>
-			<AlertDialogAction onclick={doApply} disabled={applying}
-				>{applying ? 'Применение…' : 'Применить'}</AlertDialogAction
-			>
-		</AlertDialogFooter>
-	</AlertDialogContent>
-</AlertDialog>
-
-<!-- BIRD reload confirm -->
-<AlertDialog bind:open={reloadConfirm}>
-	<AlertDialogContent>
-		<AlertDialogHeader>
-			<AlertDialogTitle>Перезагрузить BIRD?</AlertDialogTitle>
-			<AlertDialogDescription
-				>BIRD перезагрузит конфигурацию. Требуется роль operator.</AlertDialogDescription
-			>
-		</AlertDialogHeader>
-		<AlertDialogFooter>
-			<AlertDialogCancel>Отмена</AlertDialogCancel>
-			<AlertDialogAction onclick={doBirdReload} disabled={reloading}
-				>{reloading ? 'Перезагрузка…' : 'Перезагрузить'}</AlertDialogAction
-			>
-		</AlertDialogFooter>
-	</AlertDialogContent>
-</AlertDialog>
-
-<!-- Rollback confirm -->
-<AlertDialog
-	open={!!rollbackTarget}
-	onOpenChange={(v) => {
-		if (!v) rollbackTarget = null;
-	}}
->
-	<AlertDialogContent>
-		<AlertDialogHeader>
-			<AlertDialogTitle>Откатиться к ревизии {rollbackTarget?.id.slice(0, 8)}…?</AlertDialogTitle>
-			<AlertDialogDescription
-				>Будет создана новая ревизия на основе выбранной. Требуется роль operator.</AlertDialogDescription
-			>
-		</AlertDialogHeader>
-		<AlertDialogFooter>
-			<AlertDialogCancel onclick={() => (rollbackTarget = null)}>Отмена</AlertDialogCancel>
-			<AlertDialogAction onclick={rollback} disabled={rollingBack}
-				>{rollingBack ? 'Откат…' : 'Откатить'}</AlertDialogAction
-			>
-		</AlertDialogFooter>
-	</AlertDialogContent>
-</AlertDialog>
-
-<!-- Cancel job confirm -->
-<AlertDialog
-	open={!!cancelTarget}
-	onOpenChange={(v) => {
-		if (!v) cancelTarget = null;
-	}}
->
-	<AlertDialogContent>
-		<AlertDialogHeader>
-			<AlertDialogTitle>Отменить задачу?</AlertDialogTitle>
-			<AlertDialogDescription>
-				Задача: {cancelTarget ? jobKindTitle(cancelTarget, moduleNameById) : ''} ({cancelTarget?.job_id?.slice(
-					0,
-					8
-				)}…)
-			</AlertDialogDescription>
-		</AlertDialogHeader>
-		<AlertDialogFooter>
-			<AlertDialogCancel onclick={() => (cancelTarget = null)}>Нет</AlertDialogCancel>
-			<AlertDialogAction onclick={cancelJob} disabled={cancelling}
-				>{cancelling ? 'Отмена…' : 'Отменить'}</AlertDialogAction
-			>
-		</AlertDialogFooter>
-	</AlertDialogContent>
-</AlertDialog>
-
 <!-- Preview dialog -->
 <Dialog bind:open={previewDialog}>
 	<DialogContent class={dialogContentDocument}>
@@ -922,7 +1035,10 @@
 			</DialogDescription>
 		</DialogHeader>
 		{#if previewLoading}
-			<div class="px-6 py-10 text-center text-sm text-muted-foreground">Загрузка…</div>
+			<div class="space-y-3 px-6 py-6">
+				<Skeleton class="h-9 w-full max-w-md" />
+				<Skeleton class="h-48 w-full" />
+			</div>
 		{:else}
 			<div class={cn(dialogBodyDocument, 'min-h-[min(44vh,400px)]')}>
 				<Tabs bind:value={previewSubTab} class="flex min-h-0 min-w-0 flex-1 flex-col gap-3">
@@ -941,16 +1057,23 @@
 							</p>
 						{:else}
 							<div class="flex shrink-0 flex-wrap items-center gap-2">
-								<label for="bird-frag" class="text-sm text-muted-foreground">Файл</label>
+								<span class="text-sm text-muted-foreground">Файл</span>
-								<select
+								<Select
-									id="bird-frag"
+									type="single"
-									class="max-w-xl min-w-0 flex-1 rounded-md border border-input bg-background px-2 py-1.5 text-sm ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"
+									value={birdPreviewPath}
-									bind:value={birdPreviewPath}
+									onValueChange={(v) => {
+										if (v) birdPreviewPath = v;
+									}}
 								>
-									{#each Object.keys(frags).sort() as path (path)}
+									<SelectTrigger class="max-w-xl min-w-0 flex-1">
-										<option value={path}>{path}</option>
+										{birdPreviewPath || 'Выберите файл'}
-									{/each}
+									</SelectTrigger>
-								</select>
+									<SelectContent>
+										{#each Object.keys(frags).sort() as path (path)}
+											<SelectItem value={path}>{path}</SelectItem>
+										{/each}
+									</SelectContent>
+								</Select>
 							</div>
 							<p class="shrink-0 text-xs text-muted-foreground">
 								Совет: откройте <code class="rounded bg-muted px-1">_bird_full_expanded.conf</code>
@@ -1021,18 +1144,18 @@
 						>{jobDetail.job_id}</span
 					>
 					<span class="text-muted-foreground">Статус</span><span
-						><Badge variant={jobStatusVariant(jobDetail.status)}
+						><Badge variant={jobStatusBadgeVariant(jobDetail.status)}
 							>{jobStatusRu(jobDetail.status)}</Badge
 						></span
 					>
 					<span class="text-muted-foreground">Создана</span><span
-						>{formatDate(jobDetail.created_at)}</span
+						>{formatDateTime(jobDetail.created_at)}</span
 					>
 					<span class="text-muted-foreground">Начата</span><span
-						>{formatDate(jobDetail.started_at)}</span
+						>{formatDateTime(jobDetail.started_at)}</span
 					>
 					<span class="text-muted-foreground">Завершена</span><span
-						>{formatDate(jobDetail.finished_at)}</span
+						>{formatDateTime(jobDetail.finished_at)}</span
 					>
 					{#if jobDetail.error}
 						<span class="text-muted-foreground">Ошибка</span><span

web/src/routes/revisions/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { resolve } from '$app/paths';
-	goto(resolve('/operations'));
+
+	goto(`${resolve('/operations')}?tab=revisions`, { replaceState: true });
 </script>

web/src/routes/schedule/+page.svelte

@@ -1,258 +1,398 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { apiFetch, apiJSON } from '$lib/api/client.js';
+	import { resolve } from '$app/paths';
+	import { apiJSON, apiMutate } from '$lib/api/client.js';
 	import type { JobRow, JobsResponse, ModuleRow, ModulesResponse } from '$lib/api/types.js';
-	import { Badge } from '$lib/components/ui/badge/index.js';
+	import {
-	import { Button } from '$lib/components/ui/button/index.js';
+		formatDateTime,
+		moduleIntervalLabel,
+		moduleTypeBadgeVariant
+	} from '$lib/modules/display.js';
+	import { jobKindTitle } from '$lib/operations/job-kind-label.js';
+	import { jobStatusRu, jobStatusBadgeVariant, moduleTypeRu } from '$lib/ui-labels.js';
+	import { Badge } from '$lib/ui/core/badge/index.js';
+	import { Button } from '$lib/ui/core/button/index.js';
 	import {
 		Card,
 		CardContent,
 		CardHeader,
 		CardTitle,
 		CardDescription
-	} from '$lib/components/ui/card/index.js';
+	} from '$lib/ui/core/card/index.js';
-	import {
+	import { Alert, AlertDescription, AlertTitle } from '$lib/ui/core/alert/index.js';
-		Table,
+	import { Tabs, TabsContent, TabsList, TabsTrigger } from '$lib/ui/core/tabs/index.js';
-		TableBody,
+	import AppDataTable from '$lib/ui/patterns/data-table/app-data-table.svelte';
-		TableCell,
+	import CardSkeleton from '$lib/ui/patterns/feedback/card-skeleton.svelte';
-		TableHead,
+	import PageHeader from '$lib/ui/app/page-header/page-header.svelte';
-		TableHeader,
+	import { notify, notifyApiError } from '$lib/ui/app/toast.js';
-		TableRow
+	import { cn } from '$lib/utils.js';
-	} from '$lib/components/ui/table/index.js';
-	import { toast } from 'svelte-sonner';
 	import RefreshCw from '@lucide/svelte/icons/refresh-cw';
 	import CalendarClock from '@lucide/svelte/icons/calendar-clock';
-	import PageHeader from '$lib/ui/app/page-header/page-header.svelte';
+	import ListTodo from '@lucide/svelte/icons/list-todo';
-	import { jobStatusRu, moduleTypeRu } from '$lib/ui-labels.js';
+	import Clock from '@lucide/svelte/icons/clock';
-	import { jobKindTitle } from '$lib/operations/job-kind-label.js';
+	import AlertTriangle from '@lucide/svelte/icons/alert-triangle';
+	import ArrowRight from '@lucide/svelte/icons/arrow-right';
+	import ExternalLink from '@lucide/svelte/icons/external-link';
+	import Info from '@lucide/svelte/icons/info';
+
+	type JobsTab = 'all' | 'refresh' | 'failed';
 
 	let modules = $state<ModuleRow[]>([]);
 	let jobs = $state<JobRow[]>([]);
-	let refreshing = $state<Record<string, boolean>>({});
+	let moduleRefreshing = $state<Record<string, boolean>>({});
-	let loading = $state(false);
+	let loadError = $state<string | null>(null);
+	let lastUpdated = $state<Date | null>(null);
+	let initialLoading = $state(true);
+	let refreshing = $state(false);
+	let jobsTab = $state<JobsTab>('all');
+
+	const statAccents = [
+		{
+			border: 'border-l-chart-1',
+			bg: 'bg-chart-1/5',
+			iconBg: 'bg-chart-1/15',
+			iconText: 'text-chart-1'
+		},
+		{
+			border: 'border-l-chart-2',
+			bg: 'bg-chart-2/5',
+			iconBg: 'bg-chart-2/15',
+			iconText: 'text-chart-2'
+		},
+		{
+			border: 'border-l-chart-4',
+			bg: 'bg-chart-4/5',
+			iconBg: 'bg-chart-4/15',
+			iconText: 'text-chart-4'
+		}
+	] as const;
+
+	const moduleColumns = [
+		{ id: 'name', label: 'Модуль', sortable: true, sortValue: (m: ModuleRow) => m.name },
+		{ id: 'type', label: 'Тип', sortable: true, sortValue: (m: ModuleRow) => m.type },
+		{ id: 'schedule', label: 'Расписание' },
+		{
+			id: 'refreshed',
+			label: 'Последнее обновление',
+			sortable: true,
+			sortValue: (m: ModuleRow) => m.last_refreshed_at ?? ''
+		},
+		{ id: 'status', label: 'Статус' },
+		{ id: 'actions', label: '', class: 'w-32 text-right' }
+	] as const;
+
+	const jobColumns = [
+		{ id: 'kind', label: 'Вид' },
+		{ id: 'status', label: 'Статус', sortable: true, sortValue: (j: JobRow) => j.status },
+		{
+			id: 'created',
+			label: 'Создана',
+			sortable: true,
+			sortValue: (j: JobRow) => j.created_at ?? ''
+		},
+		{
+			id: 'finished',
+			label: 'Завершена',
+			sortable: true,
+			sortValue: (j: JobRow) => j.finished_at ?? ''
+		},
+		{ id: 'error', label: 'Ошибка', class: 'max-w-xs' }
+	] as const;
+
+	const moduleNameById = $derived(new Map(modules.map((m) => [m.id, m.name])));
+
+	const runningJobsCount = $derived(
+		jobs.filter((j) => j.status === 'running' || j.status === 'queued').length
+	);
+
+	const failedJobsCount = $derived(
+		jobs.filter((j) => {
+			const s = String(j.status ?? '').toLowerCase();
+			return s === 'failed' || s === 'error' || s === 'canceled';
+		}).length
+	);
+
+	const filteredJobs = $derived.by(() => {
+		if (jobsTab === 'refresh') return jobs.filter((j) => j.kind === 'module_refresh');
+		if (jobsTab === 'failed') {
+			return jobs.filter((j) => {
+				const s = String(j.status ?? '').toLowerCase();
+				return s === 'failed' || s === 'error' || s === 'canceled';
+			});
+		}
+		return jobs;
+	});
+
+	const kpiCards = $derived.by(() => [
+		{
+			id: 'total',
+			label: 'Всего задач',
+			value: initialLoading ? '—' : String(jobs.length),
+			description: 'в последней выборке',
+			icon: ListTodo,
+			accent: statAccents[0],
+			badge: 'в выборке',
+			href: '/operations' as const
+		},
+		{
+			id: 'running',
+			label: 'В работе',
+			value: initialLoading ? '—' : String(runningJobsCount),
+			description: 'queued и running',
+			icon: Clock,
+			accent: statAccents[1],
+			badge: 'активных',
+			href: undefined
+		},
+		{
+			id: 'failed',
+			label: 'С ошибкой',
+			value: initialLoading ? '—' : String(failedJobsCount),
+			description: failedJobsCount > 0 ? 'требуют внимания' : 'критичных сбоев нет',
+			icon: AlertTriangle,
+			accent: statAccents[2],
+			badge: failedJobsCount > 0 ? 'есть ошибки' : 'без ошибок',
+			badgeClass:
+				failedJobsCount === 0 ? 'border-success/30 bg-success/15 text-success' : undefined,
+			href: failedJobsCount > 0 ? ('/operations' as const) : undefined
+		}
+	]);
+
+	function truncateError(error: string | null | undefined, max = 120): string {
+		if (!error) return '';
+		return error.length > max ? `${error.slice(0, max)}…` : error;
+	}
 
 	async function load() {
-		loading = true;
+		if (!initialLoading) refreshing = true;
+		loadError = null;
 		try {
 			const [m, j] = await Promise.all([
 				apiJSON<ModulesResponse>('/v1/modules?limit=200'),
-				apiJSON<JobsResponse>('/v1/jobs?limit=50')
+				apiJSON<JobsResponse>('/v1/jobs?limit=100')
 			]);
 			modules = m.items ?? [];
 			jobs = j.items ?? [];
+			lastUpdated = new Date();
 		} catch (e) {
-			toast.error(e instanceof Error ? e.message : String(e));
+			loadError = e instanceof Error ? e.message : String(e);
+			notifyApiError(e);
 		} finally {
-			loading = false;
+			initialLoading = false;
+			refreshing = false;
+		}
+	}
+
+	async function refreshModule(id: string) {
+		moduleRefreshing = { ...moduleRefreshing, [id]: true };
+		try {
+			const result = await apiMutate<{ job_id?: string }>(`/v1/modules/${id}/refresh`, 'POST');
+			if (result === undefined) {
+				notify.message('Обновление не требуется (тип IP_RANGES)');
+			} else {
+				notify.success('Задача поставлена в очередь');
+				await load();
+			}
+		} catch (e) {
+			notifyApiError(e);
+		} finally {
+			moduleRefreshing = { ...moduleRefreshing, [id]: false };
 		}
 	}
 
 	onMount(load);
-
-	async function refreshModule(id: string) {
-		refreshing = { ...refreshing, [id]: true };
-		try {
-			const token = localStorage.getItem('evobgp_api_token') ?? '';
-			const res = await fetch(`/v1/modules/${id}/refresh`, {
-				method: 'POST',
-				headers: { Authorization: `Bearer ${token}` }
-			});
-			if (res.status === 204) toast.message('Обновление не требуется (тип IP_RANGES)');
-			else if (res.status === 202) {
-				toast.success('Задача поставлена в очередь');
-				await load();
-			} else toast.error(`HTTP ${res.status}`);
-		} catch (e) {
-			toast.error(e instanceof Error ? e.message : String(e));
-		} finally {
-			refreshing = { ...refreshing, [id]: false };
-		}
-	}
-
-	function intervalLabel(sec: number | null) {
-		if (!sec) return '—';
-		if (sec % 3600 === 0) return `${sec / 3600} ч`;
-		if (sec % 60 === 0) return `${sec / 60} мин`;
-		return `${sec} с`;
-	}
-
-	function jobStatusVariant(s: string): 'default' | 'secondary' | 'outline' | 'destructive' {
-		if (s === 'succeeded') return 'default';
-		if (s === 'running') return 'secondary';
-		if (s === 'failed') return 'destructive';
-		return 'outline';
-	}
-
-	const refreshJobs = $derived(jobs.filter((j) => j.kind === 'module_refresh'));
-	const moduleNameById = $derived(new Map(modules.map((m) => [m.id, m.name])));
-	const runningJobsCount = $derived(
-		jobs.filter((j) => j.status === 'running' || j.status === 'queued').length
-	);
-	const failedJobsCount = $derived(jobs.filter((j) => j.status === 'failed').length);
 </script>
 
 <div class="flex flex-col gap-6">
 	<PageHeader
 		title="Расписание и задачи"
-		description="Интервалы обновления модулей и ручной запуск обновления."
+		description={lastUpdated
+			? `Интервалы обновления модулей и ручной запуск. Обновлено: ${lastUpdated.toLocaleTimeString('ru-RU')}`
+			: 'Интервалы обновления модулей и ручной запуск обновления.'}
 		icon={CalendarClock}
 		iconClass="bg-chart-4/15 text-chart-4"
 	>
 		{#snippet actions()}
-			<Button variant="outline" size="sm" onclick={load} disabled={loading}>
+			<Button variant="outline" size="sm" onclick={load} disabled={refreshing}>
-				<RefreshCw class={loading ? 'animate-spin' : ''} />
+				<RefreshCw class={refreshing ? 'animate-spin' : ''} />
 				Обновить
 			</Button>
 		{/snippet}
 	</PageHeader>
 
-	<div class="grid gap-3 sm:grid-cols-3">
+	<Alert class="border-info/30 bg-info/5">
-		<Card class="p-4">
+		<Info class="text-info" />
-			<p class="text-xs text-muted-foreground">Всего задач</p>
+		<AlertTitle>Как работает расписание</AlertTitle>
-			<p class="text-lg font-semibold">{jobs.length}</p>
+		<AlertDescription>
-		</Card>
+			Планировщик использует <code class="text-xs">refresh_interval_sec</code> и опционально
-		<Card class="p-4">
+			<code class="text-xs">cron_expr</code>. Ручной запуск —
-			<p class="text-xs text-muted-foreground">В работе</p>
+			<code class="text-xs">POST /v1/modules&#123;id&#125;/refresh</code>; для модулей
-			<p class="text-lg font-semibold">{runningJobsCount}</p>
+			<code class="text-xs">IP_RANGES</code>
-		</Card>
+			сервер может вернуть <strong>204</strong>
-		<Card class="p-4">
+			(no-op). Полный список задач и деплой — на странице
-			<p class="text-xs text-muted-foreground">С ошибкой</p>
+			<Button variant="link" class="h-auto p-0" href={resolve('/operations')}>Операции</Button>.
-			<p class="text-lg font-semibold">{failedJobsCount}</p>
+		</AlertDescription>
-		</Card>
+	</Alert>
+
+	<div class="grid gap-4 sm:grid-cols-3">
+		{#if initialLoading}
+			{#each Array(3) as _, i (i)}
+				<CardSkeleton />
+			{/each}
+		{:else}
+			{#each kpiCards as card (card.id)}
+				{@const Icon = card.icon}
+				{@const a = card.accent}
+				<Card
+					class={cn(
+						'overflow-hidden border-l-4 shadow-sm transition-colors',
+						a.border,
+						a.bg,
+						card.href ? 'hover:border-primary/35' : ''
+					)}
+				>
+					<CardHeader class="pb-2">
+						<div class="flex items-center justify-between gap-2">
+							<CardDescription class="flex min-w-0 items-center gap-2">
+								<span
+									class={cn(
+										'flex size-9 shrink-0 items-center justify-center rounded-lg',
+										a.iconBg
+									)}
+									aria-hidden="true"
+								>
+									<Icon class={cn('size-4', a.iconText)} />
+								</span>
+								<span class="truncate">{card.label}</span>
+							</CardDescription>
+							{#if card.href}
+								<Button variant="ghost" size="icon-sm" href={resolve(card.href)}>
+									<ArrowRight class="size-3.5" aria-hidden="true" />
+								</Button>
+							{/if}
+						</div>
+						<CardTitle class="text-3xl font-bold tabular-nums">{card.value}</CardTitle>
+					</CardHeader>
+					<CardContent class="space-y-2">
+						<Badge variant="outline" class={card.badgeClass}>{card.badge}</Badge>
+						<p class="text-xs text-muted-foreground">{card.description}</p>
+					</CardContent>
+				</Card>
+			{/each}
+		{/if}
 	</div>
 
 	<Card>
 		<CardHeader>
 			<CardTitle class="text-base">Модули</CardTitle>
-			<CardDescription
+			<CardDescription>
-				>Запустить обновление вручную (CDN, домены, AS — в очередь; для IP_RANGES ответ 204)</CardDescription
+				Расписание обновления и ручной запуск ingest (CDN, домены, AS — в очередь; IP_RANGES — 204)
-			>
+			</CardDescription>
 		</CardHeader>
-		<CardContent class="p-0">
+		<CardContent class="p-4 pt-0">
-			<Table>
+			<AppDataTable
-				<TableHeader>
+				columns={[...moduleColumns]}
-					<TableRow>
+				rows={modules}
-						<TableHead>Модуль</TableHead>
+				rowKey={(m) => m.id}
-						<TableHead>Тип</TableHead>
+				loading={initialLoading}
-						<TableHead>Интервал</TableHead>
+				error={loadError}
-						<TableHead>Cron</TableHead>
+				emptyTitle="Нет модулей"
-						<TableHead class="w-28 text-right"></TableHead>
+				emptyDescription="Создайте модуль на странице «Модули»."
-					</TableRow>
+			>
-				</TableHeader>
+				{#snippet cell({ row: m, column })}
-				<TableBody>
+					{#if column.id === 'name'}
-					{#each modules as m (m.id)}
+						<div class="flex items-center gap-2">
-						<TableRow>
+							<span class="font-medium">{m.name}</span>
-							<TableCell class="font-medium">{m.name}</TableCell>
+							<Button variant="ghost" size="icon-sm" href={resolve(`/modules/${m.id}`)}>
-							<TableCell><Badge variant="outline">{moduleTypeRu(m.type)}</Badge></TableCell>
+								<ExternalLink class="size-3.5" aria-hidden="true" />
-							<TableCell>{intervalLabel(m.refresh_interval_sec)}</TableCell>
+							</Button>
-							<TableCell class="font-mono text-xs">{m.cron_expr || '—'}</TableCell>
+						</div>
-							<TableCell class="text-right">
+					{:else if column.id === 'type'}
-								<Button
+						<Badge variant={moduleTypeBadgeVariant(m.type)}>{moduleTypeRu(m.type)}</Badge>
-									size="xs"
+					{:else if column.id === 'schedule'}
-									variant="secondary"
+						<span class="font-mono text-xs text-muted-foreground">{moduleIntervalLabel(m)}</span>
-									disabled={!!refreshing[m.id]}
+					{:else if column.id === 'refreshed'}
-									onclick={() => refreshModule(m.id)}
+						<span class="text-sm whitespace-nowrap text-muted-foreground"
+							>{formatDateTime(m.last_refreshed_at)}</span
+						>
+					{:else if column.id === 'status'}
+						{#if m.enabled}
+							<Badge variant="default" class="text-xs">Вкл</Badge>
+						{:else}
+							<Badge variant="secondary" class="text-xs">Выкл</Badge>
+						{/if}
+					{:else if column.id === 'actions'}
+						<div class="text-right">
+							<Button
+								size="sm"
+								variant="secondary"
+								disabled={!!moduleRefreshing[m.id]}
+								onclick={() => refreshModule(m.id)}
+							>
+								<RefreshCw class={moduleRefreshing[m.id] ? 'animate-spin' : ''} />
+								{moduleRefreshing[m.id] ? '…' : 'Обновить'}
+							</Button>
+						</div>
+					{/if}
+				{/snippet}
+			</AppDataTable>
+		</CardContent>
+	</Card>
+
+	<Card>
+		<CardHeader>
+			<div class="flex flex-wrap items-start justify-between gap-3">
+				<div>
+					<CardTitle class="text-base">Задачи</CardTitle>
+					<CardDescription>Последние 100 задач из API</CardDescription>
+				</div>
+				<Button variant="outline" size="sm" href={resolve('/operations')}>Все операции</Button>
+			</div>
+		</CardHeader>
+		<CardContent class="space-y-4 p-4 pt-0">
+			<Tabs bind:value={jobsTab}>
+				<TabsList class="inline-flex min-w-max">
+					<TabsTrigger value="all">Все ({jobs.length})</TabsTrigger>
+					<TabsTrigger value="refresh">
+						Обновление модулей ({jobs.filter((j) => j.kind === 'module_refresh').length})
+					</TabsTrigger>
+					<TabsTrigger value="failed">С ошибкой ({failedJobsCount})</TabsTrigger>
+				</TabsList>
+
+				<TabsContent value={jobsTab} class="mt-4">
+					<AppDataTable
+						columns={[...jobColumns]}
+						rows={filteredJobs}
+						rowKey={(j) => j.job_id}
+						loading={initialLoading}
+						error={loadError}
+						emptyTitle="Нет задач"
+						emptyDescription={jobsTab === 'failed'
+							? 'В выборке нет задач с ошибкой.'
+							: jobsTab === 'refresh'
+								? 'Задач обновления модулей пока нет.'
+								: 'Задачи появятся после refresh или деплоя.'}
+					>
+						{#snippet cell({ row: j, column })}
+							{#if column.id === 'kind'}
+								<span class="font-medium">{jobKindTitle(j, moduleNameById)}</span>
+							{:else if column.id === 'status'}
+								<Badge variant={jobStatusBadgeVariant(j.status)}>{jobStatusRu(j.status)}</Badge>
+							{:else if column.id === 'created'}
+								<span class="text-xs whitespace-nowrap text-muted-foreground"
+									>{formatDateTime(j.created_at)}</span
 								>
-									<RefreshCw class={refreshing[m.id] ? 'animate-spin' : ''} />
+							{:else if column.id === 'finished'}
-									{refreshing[m.id] ? '…' : 'Обновить'}
+								<span class="text-xs whitespace-nowrap text-muted-foreground"
-								</Button>
+									>{formatDateTime(j.finished_at)}</span
-							</TableCell>
+								>
-						</TableRow>
+							{:else if column.id === 'error'}
-					{:else}
+								<span class="text-xs text-destructive">{truncateError(j.error)}</span>
-						<TableRow>
+							{/if}
-							<TableCell colspan={5} class="text-muted-foreground text-center py-6">
+						{/snippet}
-								{loading ? 'Загрузка…' : 'Нет модулей'}
+					</AppDataTable>
-							</TableCell>
+				</TabsContent>
-						</TableRow>
+			</Tabs>
-					{/each}
-				</TableBody>
-			</Table>
-		</CardContent>
-	</Card>
-
-	<Card>
-		<CardHeader>
-			<CardTitle class="text-base">Последние задачи</CardTitle>
-			<CardDescription>Задачи разложены по статусу и времени запуска.</CardDescription>
-		</CardHeader>
-		<CardContent class="p-0">
-			<Table>
-				<TableHeader>
-					<TableRow>
-						<TableHead>Вид</TableHead>
-						<TableHead>Статус</TableHead>
-						<TableHead>Создана</TableHead>
-						<TableHead>Ошибка</TableHead>
-					</TableRow>
-				</TableHeader>
-				<TableBody>
-					{#each jobs as j (j.job_id)}
-						<TableRow>
-							<TableCell class="font-medium">{jobKindTitle(j, moduleNameById)}</TableCell>
-							<TableCell
-								><Badge variant={jobStatusVariant(j.status)}>{jobStatusRu(j.status)}</Badge
-								></TableCell
-							>
-							<TableCell class="text-xs text-muted-foreground"
-								>{j.created_at ? new Date(j.created_at).toLocaleString('ru') : '—'}</TableCell
-							>
-							<TableCell class="max-w-xs truncate text-xs text-destructive"
-								>{j.error ?? ''}</TableCell
-							>
-						</TableRow>
-					{:else}
-						<TableRow>
-							<TableCell colspan={4} class="text-muted-foreground text-center py-6">
-								{loading ? 'Загрузка…' : 'Нет задач'}
-							</TableCell>
-						</TableRow>
-					{/each}
-				</TableBody>
-			</Table>
-		</CardContent>
-	</Card>
-
-	<Card>
-		<CardHeader>
-			<CardTitle class="text-base">Операции обновления модулей</CardTitle>
-			<CardDescription
-				>Отдельная лента задач обновления модулей для контроля по модулям.</CardDescription
-			>
-		</CardHeader>
-		<CardContent class="p-0">
-			<Table>
-				<TableHeader>
-					<TableRow>
-						<TableHead>Статус</TableHead>
-						<TableHead>Создана</TableHead>
-						<TableHead>Ревизия</TableHead>
-					</TableRow>
-				</TableHeader>
-				<TableBody>
-					{#each refreshJobs as j (j.job_id)}
-						<TableRow>
-							<TableCell
-								><Badge variant={jobStatusVariant(j.status)}>{jobStatusRu(j.status)}</Badge
-								></TableCell
-							>
-							<TableCell class="text-xs"
-								>{j.created_at ? new Date(j.created_at).toLocaleString('ru') : '—'}</TableCell
-							>
-							<TableCell class="font-mono text-xs"
-								>{typeof j.meta?.revision_id === 'string'
-									? `${j.meta.revision_id.slice(0, 12)}…`
-									: '—'}</TableCell
-							>
-						</TableRow>
-					{:else}
-						<TableRow>
-							<TableCell colspan={3} class="text-muted-foreground text-center py-6"
-								>Нет задач обновления модулей</TableCell
-							>
-						</TableRow>
-					{/each}
-				</TableBody>
-			</Table>
 		</CardContent>
 	</Card>
 </div>