feat(db): implement PostgreSQL monitoring and maintenance features

Added PostgreSQL monitoring and maintenance capabilities to the API, including new endpoints for instance-level metrics, maintenance operations, and job scheduling. Updated the HTTP API to support PostgreSQL monitoring routes and integrated a background scheduler for metrics collection. Enhanced the CLI with database commands for maintenance tasks. Updated documentation to reflect these changes.

web/src/lib/components/monitoring/MonitoringPostgresTab.svelte

@@ -0,0 +1,500 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { apiJSON, apiMutate } from '$lib/api/client.js';
+	import type { AuthSession } from '$lib/api/types.js';
+	import { notify, notifyApiError } from '$lib/ui/app/toast.js';
+	import { confirm } from '$lib/ui/patterns/confirm/confirm-state.svelte.js';
+	import {
+		POSTGRES_POLL_MS,
+		POSTGRES_SLOW_POLL_MS,
+		formatBytes,
+		connUsagePct,
+		type PostgresOverview,
+		type PostgresQueriesResponse,
+		type PostgresLockRow,
+		type PostgresTableRow,
+		type PostgresRecommendationsResponse,
+		type PostgresMaintLog,
+		type CorrelationResponse
+	} from '$lib/monitoring/postgres.js';
+	import { Tabs, TabsContent, TabsList, TabsTrigger } from '$lib/ui/core/tabs/index.js';
+	import {
+		Card,
+		CardContent,
+		CardHeader,
+		CardTitle,
+		CardDescription
+	} from '$lib/ui/core/card/index.js';
+	import { Button } from '$lib/ui/core/button/index.js';
+	import { Badge } from '$lib/ui/core/badge/index.js';
+	import { Alert, AlertDescription, AlertTitle } from '$lib/ui/core/alert/index.js';
+	import {
+		Table,
+		TableBody,
+		TableCell,
+		TableHead,
+		TableHeader,
+		TableRow
+	} from '$lib/ui/core/table/index.js';
+	import { Switch } from '$lib/ui/core/switch/index.js';
+	import { Label } from '$lib/ui/core/label/index.js';
+	import Database from '@lucide/svelte/icons/database';
+	import RefreshCw from '@lucide/svelte/icons/refresh-cw';
+
+	let pgTab = $state('overview');
+	let autoRefresh = $state(true);
+	let session = $state<AuthSession | null>(null);
+	let unavailable = $state(false);
+
+	let overview = $state<PostgresOverview | null>(null);
+	let queries = $state<PostgresQueriesResponse | null>(null);
+	let locks = $state<PostgresLockRow[]>([]);
+	let tables = $state<PostgresTableRow[]>([]);
+	let recommendations = $state<PostgresRecommendationsResponse | null>(null);
+	let maintLogs = $state<PostgresMaintLog[]>([]);
+	let correlation = $state<CorrelationResponse | null>(null);
+	let loading = $state(true);
+
+	async function loadCore() {
+		try {
+			overview = await apiJSON<PostgresOverview>('/v1/monitoring/postgres/overview');
+			locks = (await apiJSON<{ items: PostgresLockRow[] }>('/v1/monitoring/postgres/locks')).items;
+			unavailable = false;
+		} catch (e) {
+			unavailable = true;
+			overview = null;
+			throw e;
+		}
+	}
+
+	async function loadSlow() {
+		queries = await apiJSON<PostgresQueriesResponse>('/v1/monitoring/postgres/queries?limit=20');
+		tables = (
+			await apiJSON<{ items: PostgresTableRow[] }>('/v1/monitoring/postgres/tables?limit=30')
+		).items;
+		recommendations = await apiJSON<PostgresRecommendationsResponse>(
+			'/v1/monitoring/postgres/recommendations'
+		);
+		correlation = await apiJSON<CorrelationResponse>('/v1/monitoring/correlation?window=60');
+		maintLogs = (
+			await apiJSON<{ items: PostgresMaintLog[] }>('/v1/postgres/maintenance/logs?limit=20')
+		).items;
+	}
+
+	async function loadAll() {
+		loading = true;
+		try {
+			await loadCore();
+			await loadSlow();
+		} catch (e) {
+			notifyApiError(e, 'PostgreSQL monitoring');
+		} finally {
+			loading = false;
+		}
+	}
+
+	onMount(() => {
+		void (async () => {
+			try {
+				session = await apiJSON<AuthSession>('/v1/auth/session');
+			} catch {
+				session = null;
+			}
+			await loadAll();
+		})();
+	});
+
+	$effect(() => {
+		if (!autoRefresh || unavailable) return;
+		const fast = setInterval(() => {
+			void loadCore().catch(() => {});
+		}, POSTGRES_POLL_MS);
+		const slow = setInterval(() => {
+			void loadSlow().catch(() => {});
+		}, POSTGRES_SLOW_POLL_MS);
+		return () => {
+			clearInterval(fast);
+			clearInterval(slow);
+		};
+	});
+
+	const isOperator = $derived(session?.role === 'operator');
+
+	function runMaint(
+		title: string,
+		path: string,
+		body: Record<string, unknown>,
+		destructive = true
+	) {
+		void confirm({
+			title,
+			description: body.dry_run
+				? 'Dry-run: изменения не применяются, только план.'
+				: 'Операция выполняется асинхронно через jobs. Убедитесь, что выбрано maintenance-окно.',
+			confirmLabel: body.dry_run ? 'Dry-run' : 'Выполнить',
+			destructive,
+			onConfirm: async () => {
+				try {
+					const res = await apiMutate<{ job_id: string; status: string }>(path, 'POST', body);
+					notify.success(`Задача ${res.job_id} (${res.status})`);
+					await loadSlow();
+				} catch (e) {
+					notifyApiError(e, title);
+				}
+			}
+		});
+	}
+</script>
+
+<div class="flex flex-wrap items-center justify-between gap-3">
+	<div class="flex items-center gap-2 text-sm text-muted-foreground">
+		<Database class="size-4" />
+		<span>Instance-level PostgreSQL (control plane)</span>
+	</div>
+	<div class="flex items-center gap-4">
+		<div class="flex items-center gap-2">
+			<Switch id="pg-auto" bind:checked={autoRefresh} />
+			<Label for="pg-auto">Автообновление</Label>
+		</div>
+		<Button variant="outline" size="sm" onclick={() => loadAll()} disabled={loading}>
+			<RefreshCw class="mr-1 size-4 {loading ? 'animate-spin' : ''}" />
+			Обновить
+		</Button>
+	</div>
+</div>
+
+{#if unavailable}
+	<Alert variant="destructive" class="mt-4">
+		<AlertTitle>PostgreSQL недоступен</AlertTitle>
+		<AlertDescription>
+			Мониторинг требует <code class="text-xs">EVOBGP_DATABASE_URL</code> (не memory backend).
+		</AlertDescription>
+	</Alert>
+{:else}
+	<Tabs bind:value={pgTab} class="mt-4">
+		<TabsList>
+			<TabsTrigger value="overview">Обзор</TabsTrigger>
+			<TabsTrigger value="queries">Запросы</TabsTrigger>
+			<TabsTrigger value="locks">Блокировки</TabsTrigger>
+			<TabsTrigger value="tables">Таблицы</TabsTrigger>
+			<TabsTrigger value="maintenance">Обслуживание</TabsTrigger>
+			<TabsTrigger value="correlation">Корреляция</TabsTrigger>
+		</TabsList>
+
+		<TabsContent value="overview" class="mt-4 space-y-4">
+			{#if overview}
+				<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+					<Card>
+						<CardHeader class="pb-2">
+							<CardTitle class="text-sm font-medium">Подключения</CardTitle>
+						</CardHeader>
+						<CardContent>
+							<p class="text-2xl font-semibold tabular-nums">
+								{overview.connections.active} / {overview.connections.max_connections}
+							</p>
+							<div class="mt-2 h-2 overflow-hidden rounded-full bg-muted">
+								<div
+									class="h-full bg-chart-1 transition-all"
+									style="width: {connUsagePct(overview)}%"
+								></div>
+							</div>
+							<p class="mt-1 text-xs text-muted-foreground">
+								idle {overview.connections.idle}, total {overview.connections.total}
+							</p>
+						</CardContent>
+					</Card>
+					<Card>
+						<CardHeader class="pb-2">
+							<CardTitle class="text-sm font-medium">Cache hit</CardTitle>
+						</CardHeader>
+						<CardContent>
+							<p class="text-2xl font-semibold tabular-nums">
+								{overview.database.cache_hit_pct ?? '—'}%
+							</p>
+							<div class="mt-2 h-2 overflow-hidden rounded-full bg-muted">
+								<div
+									class="h-full bg-chart-2 transition-all"
+									style="width: {overview.database.cache_hit_pct ?? 0}%"
+								></div>
+							</div>
+						</CardContent>
+					</Card>
+					<Card>
+						<CardHeader class="pb-2">
+							<CardTitle class="text-sm font-medium">TPS (commits)</CardTitle>
+						</CardHeader>
+						<CardContent>
+							<p class="text-2xl font-semibold tabular-nums">
+								{overview.database.xact_commit.toLocaleString()}
+							</p>
+							<p class="text-xs text-muted-foreground">
+								rollback {overview.database.xact_rollback.toLocaleString()}, deadlocks {overview
+									.database.deadlocks}
+							</p>
+						</CardContent>
+					</Card>
+					<Card>
+						<CardHeader class="pb-2">
+							<CardTitle class="text-sm font-medium">Размер БД</CardTitle>
+						</CardHeader>
+						<CardContent>
+							<p class="text-2xl font-semibold">{formatBytes(overview.database_size_bytes)}</p>
+							<p class="text-xs text-muted-foreground">
+								shared_buffers {overview.memory_settings.shared_buffers}
+							</p>
+						</CardContent>
+					</Card>
+				</div>
+				{#if overview.replication?.length}
+					<Card>
+						<CardHeader>
+							<CardTitle>Репликация</CardTitle>
+						</CardHeader>
+						<CardContent>
+							<Table>
+								<TableHeader>
+									<TableRow>
+										<TableHead>Адрес</TableHead>
+										<TableHead>Состояние</TableHead>
+										<TableHead>Lag ms</TableHead>
+									</TableRow>
+								</TableHeader>
+								<TableBody>
+									{#each overview.replication as r (r.client_addr ?? r.state)}
+										<TableRow>
+											<TableCell>{r.client_addr ?? '—'}</TableCell>
+											<TableCell>{r.state}</TableCell>
+											<TableCell>{r.lag_ms ?? '—'}</TableCell>
+										</TableRow>
+									{/each}
+								</TableBody>
+							</Table>
+						</CardContent>
+					</Card>
+				{/if}
+			{/if}
+		</TabsContent>
+
+		<TabsContent value="queries" class="mt-4">
+			<Card>
+				<CardHeader>
+					<CardTitle>Медленные запросы</CardTitle>
+					<CardDescription>
+						Источник: {queries?.source ?? '—'}
+						{#if overview && !overview.pg_stat_statements_enabled}
+							· pg_stat_statements не включён
+						{/if}
+					</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<Table>
+						<TableHeader>
+							<TableRow>
+								<TableHead>mean ms</TableHead>
+								<TableHead>calls</TableHead>
+								<TableHead>query</TableHead>
+							</TableRow>
+						</TableHeader>
+						<TableBody>
+							{#each queries?.items ?? [] as q (q.queryid ?? q.query)}
+								<TableRow>
+									<TableCell class="tabular-nums">{q.mean_exec_ms.toFixed(1)}</TableCell>
+									<TableCell>{q.calls}</TableCell>
+									<TableCell class="max-w-md truncate font-mono text-xs">{q.query}</TableCell>
+								</TableRow>
+							{:else}
+								<TableRow>
+									<TableCell colspan={3} class="text-muted-foreground">Нет данных</TableCell>
+								</TableRow>
+							{/each}
+						</TableBody>
+					</Table>
+				</CardContent>
+			</Card>
+		</TabsContent>
+
+		<TabsContent value="locks" class="mt-4">
+			<Card>
+				<CardHeader>
+					<CardTitle>Блокировки</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<Table>
+						<TableHeader>
+							<TableRow>
+								<TableHead>pid</TableHead>
+								<TableHead>mode</TableHead>
+								<TableHead>granted</TableHead>
+								<TableHead>query</TableHead>
+							</TableRow>
+						</TableHeader>
+						<TableBody>
+							{#each locks as l (l.pid)}
+								<TableRow>
+									<TableCell>{l.pid}</TableCell>
+									<TableCell>
+										<Badge variant={l.blocked ? 'destructive' : 'secondary'}>{l.mode}</Badge>
+									</TableCell>
+									<TableCell>{l.granted ? 'да' : 'нет'}</TableCell>
+									<TableCell class="max-w-lg truncate font-mono text-xs">{l.query ?? '—'}</TableCell
+									>
+								</TableRow>
+							{:else}
+								<TableRow>
+									<TableCell colspan={4} class="text-muted-foreground"
+										>Нет активных блокировок</TableCell
+									>
+								</TableRow>
+							{/each}
+						</TableBody>
+					</Table>
+				</CardContent>
+			</Card>
+		</TabsContent>
+
+		<TabsContent value="tables" class="mt-4 space-y-4">
+			<Card>
+				<CardHeader>
+					<CardTitle>Таблицы и хранилище</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<Table>
+						<TableHeader>
+							<TableRow>
+								<TableHead>table</TableHead>
+								<TableHead>size</TableHead>
+								<TableHead>seq_scan</TableHead>
+								<TableHead>idx_scan</TableHead>
+								<TableHead>bloat</TableHead>
+							</TableRow>
+						</TableHeader>
+						<TableBody>
+							{#each tables as t (t.relname)}
+								<TableRow>
+									<TableCell class="font-mono text-xs">{t.relname}</TableCell>
+									<TableCell>{formatBytes(t.total_bytes)}</TableCell>
+									<TableCell>{t.seq_scan}</TableCell>
+									<TableCell>{t.idx_scan}</TableCell>
+									<TableCell>{(t.bloat_ratio ?? 0).toFixed(2)}</TableCell>
+								</TableRow>
+							{/each}
+						</TableBody>
+					</Table>
+				</CardContent>
+			</Card>
+			{#if recommendations?.items?.length}
+				<Card>
+					<CardHeader>
+						<CardTitle>Рекомендации</CardTitle>
+					</CardHeader>
+					<CardContent class="space-y-2">
+						{#each recommendations.items as item (item.code + item.title)}
+							<Alert>
+								<AlertTitle>{item.title}</AlertTitle>
+								<AlertDescription>{item.detail}</AlertDescription>
+							</Alert>
+						{/each}
+					</CardContent>
+				</Card>
+			{/if}
+		</TabsContent>
+
+		<TabsContent value="maintenance" class="mt-4 space-y-4">
+			{#if !isOperator}
+				<Alert>
+					<AlertTitle>Только operator</AlertTitle>
+					<AlertDescription>Обслуживание БД доступно с ролью operator.</AlertDescription>
+				</Alert>
+			{:else}
+				<Card>
+					<CardHeader>
+						<CardTitle>Операции</CardTitle>
+						<CardDescription>Все операции — async job (202). По умолчанию dry-run.</CardDescription>
+					</CardHeader>
+					<CardContent class="flex flex-wrap gap-2">
+						<Button
+							variant="outline"
+							onclick={() => runMaint('VACUUM', '/v1/postgres/vacuum', { dry_run: true })}
+						>
+							Vacuum (dry-run)
+						</Button>
+						<Button
+							variant="outline"
+							onclick={() => runMaint('ANALYZE', '/v1/postgres/analyze', { dry_run: true })}
+						>
+							Analyze (dry-run)
+						</Button>
+						<Button
+							variant="destructive"
+							onclick={() => runMaint('VACUUM', '/v1/postgres/vacuum', { dry_run: false }, true)}
+						>
+							Vacuum
+						</Button>
+						<Button
+							variant="destructive"
+							onclick={() =>
+								runMaint('Cleanup job_audit', '/v1/postgres/cleanup', {
+									policy: 'job_audit_retention',
+									dry_run: true,
+									limit: 10000
+								})}
+						>
+							Cleanup audit (dry-run)
+						</Button>
+					</CardContent>
+				</Card>
+			{/if}
+			<Card>
+				<CardHeader>
+					<CardTitle>Журнал обслуживания</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<Table>
+						<TableHeader>
+							<TableRow>
+								<TableHead>время</TableHead>
+								<TableHead>kind</TableHead>
+								<TableHead>status</TableHead>
+								<TableHead>dry_run</TableHead>
+							</TableRow>
+						</TableHeader>
+						<TableBody>
+							{#each maintLogs as log (log.id)}
+								<TableRow>
+									<TableCell class="text-xs">{log.created_at}</TableCell>
+									<TableCell>{log.kind}</TableCell>
+									<TableCell>{log.status}</TableCell>
+									<TableCell>{log.dry_run ? 'да' : 'нет'}</TableCell>
+								</TableRow>
+							{:else}
+								<TableRow>
+									<TableCell colspan={4} class="text-muted-foreground">Пусто</TableCell>
+								</TableRow>
+							{/each}
+						</TableBody>
+					</Table>
+				</CardContent>
+			</Card>
+		</TabsContent>
+
+		<TabsContent value="correlation" class="mt-4">
+			<Card>
+				<CardHeader>
+					<CardTitle>Корреляция (1ч)</CardTitle>
+					<CardDescription>Pipeline refresh p99 vs cache hit по минутам</CardDescription>
+				</CardHeader>
+				<CardContent class="space-y-3">
+					{#each correlation?.points ?? [] as p (p.timestamp)}
+						<div class="grid gap-2 rounded-md border p-2 text-xs md:grid-cols-3">
+							<span>{p.timestamp}</span>
+							<span>p99 refresh: {p.pipeline_refresh_p99_ms?.toFixed(0) ?? '—'} ms</span>
+							<span>cache hit: {p.cache_hit_pct?.toFixed(1) ?? '—'}%</span>
+						</div>
+					{:else}
+						<p class="text-muted-foreground">Нет точек за окно</p>
+					{/each}
+				</CardContent>
+			</Card>
+		</TabsContent>
+	</Tabs>
+{/if}

web/src/lib/monitoring/postgres.ts

@@ -0,0 +1,116 @@
+/** Types and helpers for PostgreSQL monitoring API. */
+
+export const POSTGRES_POLL_MS = 20_000;
+export const POSTGRES_SLOW_POLL_MS = 60_000;
+
+export type PostgresOverview = {
+	collected_at: string;
+	connections: {
+		active: number;
+		idle: number;
+		total: number;
+		max_connections: number;
+	};
+	database: {
+		backends: number;
+		xact_commit: number;
+		xact_rollback: number;
+		deadlocks: number;
+		blks_hit: number;
+		blks_read: number;
+		cache_hit_pct: number;
+	};
+	database_size_bytes: number;
+	memory_settings: {
+		shared_buffers: string;
+		work_mem: string;
+		effective_cache_size: string;
+	};
+	replication: Array<{
+		client_addr?: string;
+		state: string;
+		sync_state?: string;
+		lag_ms?: number;
+	}>;
+	pg_stat_statements_enabled: boolean;
+};
+
+export type PostgresQueryRow = {
+	queryid?: number;
+	query: string;
+	calls: number;
+	total_exec_ms: number;
+	mean_exec_ms: number;
+	rows: number;
+};
+
+export type PostgresQueriesResponse = {
+	collected_at: string;
+	source: string;
+	items: PostgresQueryRow[];
+};
+
+export type PostgresLockRow = {
+	locktype: string;
+	mode: string;
+	granted: boolean;
+	pid: number;
+	usename?: string;
+	state?: string;
+	query?: string;
+	blocked: boolean;
+};
+
+export type PostgresTableRow = {
+	relname: string;
+	total_bytes: number;
+	idx_scan: number;
+	seq_scan: number;
+	n_dead_tup: number;
+	bloat_ratio?: number;
+	last_autovacuum?: string;
+};
+
+export type PostgresRecommendation = {
+	severity: string;
+	code: string;
+	title: string;
+	detail: string;
+	refs?: string[];
+};
+
+export type PostgresRecommendationsResponse = {
+	collected_at: string;
+	items: PostgresRecommendation[];
+};
+
+export type PostgresMaintLog = {
+	id: string;
+	kind: string;
+	target_table?: string;
+	dry_run: boolean;
+	status: string;
+	error?: string;
+	created_at: string;
+};
+
+export type CorrelationResponse = {
+	window_minutes: number;
+	points: Array<{
+		timestamp: string;
+		pipeline_refresh_p99_ms?: number;
+		cache_hit_pct?: number;
+	}>;
+};
+
+export function formatBytes(n: number): string {
+	if (n >= 1 << 30) return `${(n / (1 << 30)).toFixed(1)} GiB`;
+	if (n >= 1 << 20) return `${(n / (1 << 20)).toFixed(1)} MiB`;
+	if (n >= 1 << 10) return `${(n / (1 << 10)).toFixed(1)} KiB`;
+	return `${n} B`;
+}
+
+export function connUsagePct(ov: PostgresOverview | null): number {
+	if (!ov?.connections.max_connections) return 0;
+	return Math.min(100, (ov.connections.total / ov.connections.max_connections) * 100);
+}

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

@@ -49,6 +49,8 @@
 	import KpiMetricsGrid from '$lib/ui/patterns/kpi/kpi-metrics-grid.svelte';
 	import ScrollPreBlock from '$lib/components/app/scroll-pre-block.svelte';
 	import PageHeader from '$lib/ui/app/page-header/page-header.svelte';
+	import MonitoringPostgresTab from '$lib/components/monitoring/MonitoringPostgresTab.svelte';
+	import { Tabs, TabsContent, TabsList, TabsTrigger } from '$lib/ui/core/tabs/index.js';
 	import { cn } from '$lib/utils.js';
 	import RefreshCw from '@lucide/svelte/icons/refresh-cw';
 	import Gauge from '@lucide/svelte/icons/gauge';
@@ -80,6 +82,7 @@
 	let lastUpdated = $state<Date | null>(null);
 	let initialLoading = $state(true);
 	let refreshing = $state(false);
+	let mainTab = $state('system');
 
 	const statAccents = [
 		{
@@ -322,337 +325,362 @@
 		{/snippet}
 	</PageHeader>
 
-	{#if !initialLoading}
-		{#if overallStatus === 'ok'}
-			<Alert class="border-success/30 bg-success/5">
-				<CheckCircle class="text-success" />
-				<AlertTitle>Система в норме</AlertTitle>
-				<AlertDescription>{overallHint}</AlertDescription>
-			</Alert>
-		{:else if overallStatus === 'warn'}
-			<Alert class="border-warning/30 bg-warning/5">
-				<AlertTriangle class="text-warning" />
-				<AlertTitle>Требуется внимание</AlertTitle>
-				<AlertDescription>{overallHint}</AlertDescription>
-			</Alert>
-		{:else if overallStatus === 'error'}
-			<Alert variant="destructive">
-				<XCircle />
-				<AlertTitle>Обнаружена проблема</AlertTitle>
-				<AlertDescription>{overallHint}</AlertDescription>
-			</Alert>
-		{/if}
-	{/if}
+	<Tabs bind:value={mainTab}>
+		<TabsList>
+			<TabsTrigger value="system">Система</TabsTrigger>
+			<TabsTrigger value="postgres">PostgreSQL</TabsTrigger>
+		</TabsList>
 
-	<KpiMetricsGrid
-		cards={kpiCards}
-		loading={initialLoading}
-		skeletonCount={4}
-		class="sm:grid-cols-2 xl:grid-cols-4"
-	/>
+		<TabsContent value="system" class="mt-4 flex flex-col gap-6">
+			{#if !initialLoading}
+				{#if overallStatus === 'ok'}
+					<Alert class="border-success/30 bg-success/5">
+						<CheckCircle class="text-success" />
+						<AlertTitle>Система в норме</AlertTitle>
+						<AlertDescription>{overallHint}</AlertDescription>
+					</Alert>
+				{:else if overallStatus === 'warn'}
+					<Alert class="border-warning/30 bg-warning/5">
+						<AlertTriangle class="text-warning" />
+						<AlertTitle>Требуется внимание</AlertTitle>
+						<AlertDescription>{overallHint}</AlertDescription>
+					</Alert>
+				{:else if overallStatus === 'error'}
+					<Alert variant="destructive">
+						<XCircle />
+						<AlertTitle>Обнаружена проблема</AlertTitle>
+						<AlertDescription>{overallHint}</AlertDescription>
+					</Alert>
+				{/if}
+			{/if}
 
-	<div class="grid gap-4 lg:grid-cols-2">
-		{#if initialLoading}
-			<CardSkeleton />
-			<CardSkeleton />
-		{:else}
-			<Card>
-				<CardHeader>
-					<CardTitle class="text-base">Доступность и готовность</CardTitle>
-					<CardDescription>GET /v1/health · GET /v1/ready</CardDescription>
-				</CardHeader>
-				<CardContent class="space-y-4">
-					{#if health?.error || readyError}
-						<Alert variant="destructive">
-							<XCircle />
-							<AlertTitle>Ошибка проверки</AlertTitle>
-							<AlertDescription>
-								{#if health?.error}{health.error}{/if}
-								{#if health?.error && readyError}<br />{/if}
-								{#if readyError}{readyError}{/if}
-							</AlertDescription>
-						</Alert>
-					{/if}
+			<KpiMetricsGrid
+				cards={kpiCards}
+				loading={initialLoading}
+				skeletonCount={4}
+				class="sm:grid-cols-2 xl:grid-cols-4"
+			/>
 
-					<Table>
-						<TableHeader>
-							<TableRow>
-								<TableHead class="w-[55%]">Проверка</TableHead>
-								<TableHead>Статус</TableHead>
-							</TableRow>
-						</TableHeader>
-						<TableBody>
-							{@const liveBadge = livenessBadge(health)}
-							<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}
+			<div class="grid gap-4 lg:grid-cols-2">
+				{#if initialLoading}
+					<CardSkeleton />
+					<CardSkeleton />
+				{:else}
+					<Card>
+						<CardHeader>
+							<CardTitle class="text-base">Доступность и готовность</CardTitle>
+							<CardDescription>GET /v1/health · GET /v1/ready</CardDescription>
+						</CardHeader>
+						<CardContent class="space-y-4">
+							{#if health?.error || readyError}
+								<Alert variant="destructive">
+									<XCircle />
+									<AlertTitle>Ошибка проверки</AlertTitle>
+									<AlertDescription>
+										{#if health?.error}{health.error}{/if}
+										{#if health?.error && readyError}<br />{/if}
+										{#if readyError}{readyError}{/if}
+									</AlertDescription>
+								</Alert>
+							{/if}
+
+							<Table>
+								<TableHeader>
+									<TableRow>
+										<TableHead class="w-[55%]">Проверка</TableHead>
+										<TableHead>Статус</TableHead>
+									</TableRow>
+								</TableHeader>
+								<TableBody>
+									{@const liveBadge = livenessBadge(health)}
 									<TableRow>
 										<TableCell>
 											<div class="flex items-center gap-2">
-												<CheckIcon
+												<HeartPulse
 													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>
+													<p class="text-sm font-medium">Liveness</p>
+													<p class="text-xs text-muted-foreground">/v1/health</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>
+											<Badge variant={liveBadge.variant} class={liveBadge.class}
+												>{liveBadge.label}</Badge
+											>
 										</TableCell>
 									</TableRow>
-								{/each}
-							{/if}
-						</TableBody>
-					</Table>
-
-					<p class="text-xs text-muted-foreground">
-						HTTP 503 на readiness означает недоступность одной из зависимостей в checks.
-					</p>
-				</CardContent>
-			</Card>
-
-			<Card>
-				<CardHeader>
-					<div class="flex items-start justify-between gap-2">
-						<div>
-							<CardTitle class="flex items-center gap-2 text-base">
-								<Bird class="size-4" />
-								BGP на API-хосте
-							</CardTitle>
-							<CardDescription>GET /v1/bird/status</CardDescription>
-						</div>
-						<Button variant="outline" size="sm" href={resolve('/network?tab=overview')}
-							>Пиры и спикеры</Button
-						>
-					</div>
-				</CardHeader>
-				<CardContent class="space-y-4">
-					{#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>
-
-	<div class="grid gap-4 lg:grid-cols-2">
-		{#if initialLoading}
-			<CardSkeleton />
-			<CardSkeleton />
-		{:else}
-			<Card>
-				<CardHeader>
-					<div class="flex items-start justify-between gap-2">
-						<div>
-							<CardTitle class="flex items-center gap-2 text-base">
-								<Activity class="size-4" />
-								Задачи
-							</CardTitle>
-							<CardDescription>Последние 100 задач · GET /v1/jobs</CardDescription>
-						</div>
-						<Button variant="outline" size="sm" href={resolve('/operations')}>Все операции</Button>
-					</div>
-				</CardHeader>
-				<CardContent class="space-y-4">
-					{#if jobsError}
-						<Alert variant="destructive">
-							<XCircle />
-							<AlertTitle>Не удалось загрузить задачи</AlertTitle>
-							<AlertDescription>{jobsError}</AlertDescription>
-						</Alert>
-					{:else if jobs}
-						<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>
+									{@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>
-											{#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>
+										</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>
 
-			<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?tab=overview')}
-								>Сети</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>
+							<p class="text-xs text-muted-foreground">
+								HTTP 503 на readiness означает недоступность одной из зависимостей в checks.
+							</p>
+						</CardContent>
+					</Card>
+
+					<Card>
+						<CardHeader>
+							<div class="flex items-start justify-between gap-2">
+								<div>
+									<CardTitle class="flex items-center gap-2 text-base">
+										<Bird class="size-4" />
+										BGP на API-хосте
+									</CardTitle>
+									<CardDescription>GET /v1/bird/status</CardDescription>
+								</div>
+								<Button variant="outline" size="sm" href={resolve('/network?tab=overview')}
+									>Пиры и спикеры</Button
+								>
+							</div>
+						</CardHeader>
+						<CardContent class="space-y-4">
+							{#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>
+
+			<div class="grid gap-4 lg:grid-cols-2">
+				{#if initialLoading}
+					<CardSkeleton />
+					<CardSkeleton />
+				{:else}
+					<Card>
+						<CardHeader>
+							<div class="flex items-start justify-between gap-2">
+								<div>
+									<CardTitle class="flex items-center gap-2 text-base">
+										<Activity class="size-4" />
+										Задачи
+									</CardTitle>
+									<CardDescription>Последние 100 задач · GET /v1/jobs</CardDescription>
+								</div>
+								<Button variant="outline" size="sm" href={resolve('/operations')}
+									>Все операции</Button
+								>
+							</div>
+						</CardHeader>
+						<CardContent class="space-y-4">
+							{#if jobsError}
+								<Alert variant="destructive">
+									<XCircle />
+									<AlertTitle>Не удалось загрузить задачи</AlertTitle>
+									<AlertDescription>{jobsError}</AlertDescription>
+								</Alert>
+							{:else if jobs}
+								<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?tab=overview')}
+										>Сети</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>
+		</TabsContent>
+
+		<TabsContent value="postgres" class="mt-4">
+			<MonitoringPostgresTab />
+		</TabsContent>
+	</Tabs>
 </div>