From 7d85fef60218f670716ddb0b23fc17d439cbfaf6 Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Sun, 5 Apr 2026 21:50:46 +0700
Subject: [PATCH] chore: update package dependencies and enhance AppShell
 component with new navigation items and tooltip support. Refactor API client
 for improved error handling and response parsing. Expand type definitions for
 modules, entries, and communities, and enhance UI components with better
 structure and accessibility features.

---
 web/components.json                           |  16 +
 web/package-lock.json                         |   5 +-
 web/package.json                              |   4 +-
 web/src/lib/AppShell.svelte                   | 140 ++-
 web/src/lib/api/client.ts                     |  72 +-
 web/src/lib/api/types.ts                      | 206 +++-
 .../alert-dialog/alert-dialog-action.svelte   |  27 +
 .../alert-dialog/alert-dialog-cancel.svelte   |  27 +
 .../alert-dialog/alert-dialog-content.svelte  |  32 +
 .../alert-dialog-description.svelte           |  17 +
 .../alert-dialog/alert-dialog-footer.svelte   |  23 +
 .../alert-dialog/alert-dialog-header.svelte   |  20 +
 .../ui/alert-dialog/alert-dialog-media.svelte |  20 +
 .../alert-dialog/alert-dialog-overlay.svelte  |  17 +
 .../alert-dialog/alert-dialog-portal.svelte   |   7 +
 .../ui/alert-dialog/alert-dialog-title.svelte |  17 +
 .../alert-dialog/alert-dialog-trigger.svelte  |   7 +
 .../ui/alert-dialog/alert-dialog.svelte       |   7 +
 .../lib/components/ui/alert-dialog/index.ts   |  40 +
 .../components/ui/alert/alert-action.svelte   |  20 +
 .../ui/alert/alert-description.svelte         |  23 +
 .../components/ui/alert/alert-title.svelte    |  23 +
 web/src/lib/components/ui/alert/alert.svelte  |  43 +
 web/src/lib/components/ui/alert/index.ts      |  17 +
 web/src/lib/components/ui/badge/badge.svelte  |  47 +-
 web/src/lib/components/ui/badge/index.ts      |   4 +-
 .../lib/components/ui/button/button.svelte    |  98 +-
 web/src/lib/components/ui/button/index.ts     |  13 +-
 .../lib/components/ui/card/card-action.svelte |  23 +
 .../components/ui/card/card-content.svelte    |  18 +-
 .../ui/card/card-description.svelte           |  18 +-
 .../lib/components/ui/card/card-footer.svelte |  20 +
 .../lib/components/ui/card/card-header.svelte |  21 +-
 .../lib/components/ui/card/card-title.svelte  |  18 +-
 web/src/lib/components/ui/card/card.svelte    |  17 +-
 web/src/lib/components/ui/card/index.ts       |  25 +-
 .../components/ui/dialog/dialog-close.svelte  |  11 +
 .../ui/dialog/dialog-content.svelte           |  48 +
 .../ui/dialog/dialog-description.svelte       |  17 +
 .../components/ui/dialog/dialog-footer.svelte |  32 +
 .../components/ui/dialog/dialog-header.svelte |  20 +
 .../ui/dialog/dialog-overlay.svelte           |  17 +
 .../components/ui/dialog/dialog-portal.svelte |   7 +
 .../components/ui/dialog/dialog-title.svelte  |  17 +
 .../ui/dialog/dialog-trigger.svelte           |  11 +
 .../lib/components/ui/dialog/dialog.svelte    |   7 +
 web/src/lib/components/ui/dialog/index.ts     |  34 +
 .../dropdown-menu-checkbox-group.svelte       |  16 +
 .../dropdown-menu-checkbox-item.svelte        |  44 +
 .../dropdown-menu-content.svelte              |  31 +
 .../dropdown-menu-group-heading.svelte        |  22 +
 .../dropdown-menu/dropdown-menu-group.svelte  |   7 +
 .../dropdown-menu/dropdown-menu-item.svelte   |  27 +
 .../dropdown-menu/dropdown-menu-label.svelte  |  24 +
 .../dropdown-menu/dropdown-menu-portal.svelte |   7 +
 .../dropdown-menu-radio-group.svelte          |  16 +
 .../dropdown-menu-radio-item.svelte           |  34 +
 .../dropdown-menu-separator.svelte            |  17 +
 .../dropdown-menu-shortcut.svelte             |  20 +
 .../dropdown-menu-sub-content.svelte          |  17 +
 .../dropdown-menu-sub-trigger.svelte          |  29 +
 .../ui/dropdown-menu/dropdown-menu-sub.svelte |   7 +
 .../dropdown-menu-trigger.svelte              |   7 +
 .../ui/dropdown-menu/dropdown-menu.svelte     |   7 +
 .../lib/components/ui/dropdown-menu/index.ts  |  54 ++
 web/src/lib/components/ui/input/index.ts      |   9 +-
 web/src/lib/components/ui/input/input.svelte  |  55 +-
 web/src/lib/components/ui/label/index.ts      |   9 +-
 web/src/lib/components/ui/label/label.svelte  |  23 +-
 web/src/lib/components/ui/popover/index.ts    |  28 +
 .../ui/popover/popover-close.svelte           |   7 +
 .../ui/popover/popover-content.svelte         |  31 +
 .../ui/popover/popover-description.svelte     |  20 +
 .../ui/popover/popover-header.svelte          |  20 +
 .../ui/popover/popover-portal.svelte          |   7 +
 .../ui/popover/popover-title.svelte           |  20 +
 .../ui/popover/popover-trigger.svelte         |  17 +
 .../lib/components/ui/popover/popover.svelte  |   7 +
 .../lib/components/ui/scroll-area/index.ts    |  12 +-
 .../scroll-area/scroll-area-scrollbar.svelte  |  30 +
 .../ui/scroll-area/scroll-area.svelte         |  41 +-
 web/src/lib/components/ui/select/index.ts     |  37 +
 .../ui/select/select-content.svelte           |  45 +
 .../ui/select/select-group-heading.svelte     |  21 +
 .../components/ui/select/select-group.svelte  |  17 +
 .../components/ui/select/select-item.svelte   |  38 +
 .../components/ui/select/select-label.svelte  |  20 +
 .../components/ui/select/select-portal.svelte |   7 +
 .../select/select-scroll-down-button.svelte   |  20 +
 .../ui/select/select-scroll-up-button.svelte  |  20 +
 .../ui/select/select-separator.svelte         |  18 +
 .../ui/select/select-trigger.svelte           |  29 +
 .../lib/components/ui/select/select.svelte    |  11 +
 web/src/lib/components/ui/separator/index.ts  |   9 +-
 .../components/ui/separator/separator.svelte  |  25 +-
 web/src/lib/components/ui/switch/index.ts     |   7 +
 .../lib/components/ui/switch/switch.svelte    |  31 +
 web/src/lib/components/ui/table/index.ts      |  30 +-
 .../lib/components/ui/table/table-body.svelte |  13 +-
 .../components/ui/table/table-caption.svelte  |  20 +
 .../lib/components/ui/table/table-cell.svelte |  24 +-
 .../components/ui/table/table-footer.svelte   |  20 +
 .../lib/components/ui/table/table-head.svelte |  19 +-
 .../components/ui/table/table-header.svelte   |  18 +-
 .../lib/components/ui/table/table-row.svelte  |  16 +-
 web/src/lib/components/ui/table/table.svelte  |  15 +-
 web/src/lib/components/ui/tabs/index.ts       |  18 +
 .../components/ui/tabs/tabs-content.svelte    |  17 +
 .../lib/components/ui/tabs/tabs-list.svelte   |  40 +
 .../components/ui/tabs/tabs-trigger.svelte    |  23 +
 web/src/lib/components/ui/tabs/tabs.svelte    |  19 +
 web/src/lib/components/ui/textarea/index.ts   |   7 +
 .../components/ui/textarea/textarea.svelte    |  23 +
 web/src/lib/components/ui/tooltip/index.ts    |  19 +
 .../ui/tooltip/tooltip-content.svelte         |  52 +
 .../ui/tooltip/tooltip-portal.svelte          |   7 +
 .../ui/tooltip/tooltip-provider.svelte        |   7 +
 .../ui/tooltip/tooltip-trigger.svelte         |   7 +
 .../lib/components/ui/tooltip/tooltip.svelte  |  10 +
 web/src/routes/+page.svelte                   | 176 ++--
 web/src/routes/directories/+page.svelte       | 372 +++++++
 web/src/routes/modules/+page.svelte           | 245 +++--
 .../routes/modules/[moduleId]/+page.svelte    | 909 ++++++++++++++++++
 web/src/routes/modules/[moduleId]/+page.ts    |   1 +
 web/src/routes/monitoring/+page.svelte        | 158 ++-
 web/src/routes/network/+page.svelte           | 372 +++++++
 web/src/routes/operations/+page.svelte        | 528 ++++++++++
 web/src/routes/peers/+page.svelte             | 119 +--
 web/src/routes/revisions/+page.svelte         |  81 +-
 web/src/routes/schedule/+page.svelte          | 198 ++--
 web/src/routes/settings/+page.svelte          |  98 +-
 131 files changed, 5319 insertions(+), 812 deletions(-)
 create mode 100644 web/components.json
 create mode 100644 web/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
 create mode 100644 web/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
 create mode 100644 web/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
 create mode 100644 web/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
 create mode 100644 web/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
 create mode 100644 web/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
 create mode 100644 web/src/lib/components/ui/alert-dialog/alert-dialog-media.svelte
 create mode 100644 web/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
 create mode 100644 web/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte
 create mode 100644 web/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
 create mode 100644 web/src/lib/components/ui/alert-dialog/alert-dialog-trigger.svelte
 create mode 100644 web/src/lib/components/ui/alert-dialog/alert-dialog.svelte
 create mode 100644 web/src/lib/components/ui/alert-dialog/index.ts
 create mode 100644 web/src/lib/components/ui/alert/alert-action.svelte
 create mode 100644 web/src/lib/components/ui/alert/alert-description.svelte
 create mode 100644 web/src/lib/components/ui/alert/alert-title.svelte
 create mode 100644 web/src/lib/components/ui/alert/alert.svelte
 create mode 100644 web/src/lib/components/ui/alert/index.ts
 create mode 100644 web/src/lib/components/ui/card/card-action.svelte
 create mode 100644 web/src/lib/components/ui/card/card-footer.svelte
 create mode 100644 web/src/lib/components/ui/dialog/dialog-close.svelte
 create mode 100644 web/src/lib/components/ui/dialog/dialog-content.svelte
 create mode 100644 web/src/lib/components/ui/dialog/dialog-description.svelte
 create mode 100644 web/src/lib/components/ui/dialog/dialog-footer.svelte
 create mode 100644 web/src/lib/components/ui/dialog/dialog-header.svelte
 create mode 100644 web/src/lib/components/ui/dialog/dialog-overlay.svelte
 create mode 100644 web/src/lib/components/ui/dialog/dialog-portal.svelte
 create mode 100644 web/src/lib/components/ui/dialog/dialog-title.svelte
 create mode 100644 web/src/lib/components/ui/dialog/dialog-trigger.svelte
 create mode 100644 web/src/lib/components/ui/dialog/dialog.svelte
 create mode 100644 web/src/lib/components/ui/dialog/index.ts
 create mode 100644 web/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte
 create mode 100644 web/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
 create mode 100644 web/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
 create mode 100644 web/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
 create mode 100644 web/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte
 create mode 100644 web/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
 create mode 100644 web/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
 create mode 100644 web/src/lib/components/ui/dropdown-menu/dropdown-menu-portal.svelte
 create mode 100644 web/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
 create mode 100644 web/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
 create mode 100644 web/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
 create mode 100644 web/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
 create mode 100644 web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
 create mode 100644 web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
 create mode 100644 web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub.svelte
 create mode 100644 web/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte
 create mode 100644 web/src/lib/components/ui/dropdown-menu/dropdown-menu.svelte
 create mode 100644 web/src/lib/components/ui/dropdown-menu/index.ts
 create mode 100644 web/src/lib/components/ui/popover/index.ts
 create mode 100644 web/src/lib/components/ui/popover/popover-close.svelte
 create mode 100644 web/src/lib/components/ui/popover/popover-content.svelte
 create mode 100644 web/src/lib/components/ui/popover/popover-description.svelte
 create mode 100644 web/src/lib/components/ui/popover/popover-header.svelte
 create mode 100644 web/src/lib/components/ui/popover/popover-portal.svelte
 create mode 100644 web/src/lib/components/ui/popover/popover-title.svelte
 create mode 100644 web/src/lib/components/ui/popover/popover-trigger.svelte
 create mode 100644 web/src/lib/components/ui/popover/popover.svelte
 create mode 100644 web/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
 create mode 100644 web/src/lib/components/ui/select/index.ts
 create mode 100644 web/src/lib/components/ui/select/select-content.svelte
 create mode 100644 web/src/lib/components/ui/select/select-group-heading.svelte
 create mode 100644 web/src/lib/components/ui/select/select-group.svelte
 create mode 100644 web/src/lib/components/ui/select/select-item.svelte
 create mode 100644 web/src/lib/components/ui/select/select-label.svelte
 create mode 100644 web/src/lib/components/ui/select/select-portal.svelte
 create mode 100644 web/src/lib/components/ui/select/select-scroll-down-button.svelte
 create mode 100644 web/src/lib/components/ui/select/select-scroll-up-button.svelte
 create mode 100644 web/src/lib/components/ui/select/select-separator.svelte
 create mode 100644 web/src/lib/components/ui/select/select-trigger.svelte
 create mode 100644 web/src/lib/components/ui/select/select.svelte
 create mode 100644 web/src/lib/components/ui/switch/index.ts
 create mode 100644 web/src/lib/components/ui/switch/switch.svelte
 create mode 100644 web/src/lib/components/ui/table/table-caption.svelte
 create mode 100644 web/src/lib/components/ui/table/table-footer.svelte
 create mode 100644 web/src/lib/components/ui/tabs/index.ts
 create mode 100644 web/src/lib/components/ui/tabs/tabs-content.svelte
 create mode 100644 web/src/lib/components/ui/tabs/tabs-list.svelte
 create mode 100644 web/src/lib/components/ui/tabs/tabs-trigger.svelte
 create mode 100644 web/src/lib/components/ui/tabs/tabs.svelte
 create mode 100644 web/src/lib/components/ui/textarea/index.ts
 create mode 100644 web/src/lib/components/ui/textarea/textarea.svelte
 create mode 100644 web/src/lib/components/ui/tooltip/index.ts
 create mode 100644 web/src/lib/components/ui/tooltip/tooltip-content.svelte
 create mode 100644 web/src/lib/components/ui/tooltip/tooltip-portal.svelte
 create mode 100644 web/src/lib/components/ui/tooltip/tooltip-provider.svelte
 create mode 100644 web/src/lib/components/ui/tooltip/tooltip-trigger.svelte
 create mode 100644 web/src/lib/components/ui/tooltip/tooltip.svelte
 create mode 100644 web/src/routes/directories/+page.svelte
 create mode 100644 web/src/routes/modules/[moduleId]/+page.svelte
 create mode 100644 web/src/routes/modules/[moduleId]/+page.ts
 create mode 100644 web/src/routes/network/+page.svelte
 create mode 100644 web/src/routes/operations/+page.svelte

diff --git a/web/components.json b/web/components.json
new file mode 100644
index 0000000..d5f55d3
--- /dev/null
+++ b/web/components.json
@@ -0,0 +1,16 @@
+{
+	"$schema": "https://www.shadcn-svelte.com/schema.json",
+	"tailwind": {
+		"css": "src/routes/layout.css",
+		"baseColor": "neutral"
+	},
+	"aliases": {
+		"components": "$lib/components",
+		"utils": "$lib/utils",
+		"ui": "$lib/components/ui",
+		"hooks": "$lib/hooks",
+		"lib": "$lib"
+	},
+	"typescript": true,
+	"iconLibrary": "lucide"
+}
diff --git a/web/package-lock.json b/web/package-lock.json
index 9dc33c8..5df0e35 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -8,8 +8,6 @@
 			"name": "web",
 			"version": "0.0.1",
 			"dependencies": {
-				"@internationalized/date": "^3.8.1",
-				"@lucide/svelte": "^1.7.0",
 				"bits-ui": "^2.17.2",
 				"clsx": "^2.1.1",
 				"svelte-sonner": "^1.1.0",
@@ -18,6 +16,8 @@
 				"tw-animate-css": "^1.4.0"
 			},
 			"devDependencies": {
+				"@internationalized/date": "^3.12.0",
+				"@lucide/svelte": "^1.7.0",
 				"@sveltejs/adapter-static": "^3.0.10",
 				"@sveltejs/kit": "^2.50.2",
 				"@sveltejs/vite-plugin-svelte": "^6.2.4",
@@ -531,6 +531,7 @@
 			"version": "1.7.0",
 			"resolved": "https://registry.npmjs.org/@lucide/svelte/-/svelte-1.7.0.tgz",
 			"integrity": "sha512-YytBKOUBGox7yWcykZnYxOkn5WpR5G1qYXLYXV/j1B79SOTTEKzB+s5yF5Rq9l9OkweDStNH2b4yTqfvhEhV8g==",
+			"dev": true,
 			"license": "ISC",
 			"peerDependencies": {
 				"svelte": "^5"
diff --git a/web/package.json b/web/package.json
index 5be9334..54a1a67 100644
--- a/web/package.json
+++ b/web/package.json
@@ -14,6 +14,8 @@
 		"format": "prettier --write ."
 	},
 	"devDependencies": {
+		"@internationalized/date": "^3.12.0",
+		"@lucide/svelte": "^1.7.0",
 		"@sveltejs/adapter-static": "^3.0.10",
 		"@sveltejs/kit": "^2.50.2",
 		"@sveltejs/vite-plugin-svelte": "^6.2.4",
@@ -28,8 +30,6 @@
 		"vite": "^7.3.1"
 	},
 	"dependencies": {
-		"@internationalized/date": "^3.8.1",
-		"@lucide/svelte": "^1.7.0",
 		"bits-ui": "^2.17.2",
 		"clsx": "^2.1.1",
 		"svelte-sonner": "^1.1.0",
diff --git a/web/src/lib/AppShell.svelte b/web/src/lib/AppShell.svelte
index 49f0c39..9115c8f 100644
--- a/web/src/lib/AppShell.svelte
+++ b/web/src/lib/AppShell.svelte
@@ -1,60 +1,158 @@
 <script lang="ts">
 	import { resolve } from '$app/paths';
 	import { page } from '$app/state';
-	import { buttonVariants } from '$lib/components/ui/button/button.svelte';
 	import { cn } from '$lib/utils.js';
+	import { buttonVariants } from '$lib/components/ui/button/button.svelte';
 	import { Separator } from '$lib/components/ui/separator/index.js';
+	import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '$lib/components/ui/tooltip/index.js';
+
 	import Activity from '@lucide/svelte/icons/activity';
 	import Boxes from '@lucide/svelte/icons/boxes';
-	import CalendarClock from '@lucide/svelte/icons/calendar-clock';
+	import BookOpen from '@lucide/svelte/icons/book-open';
 	import LayoutDashboard from '@lucide/svelte/icons/layout-dashboard';
 	import Network from '@lucide/svelte/icons/network';
 	import Settings from '@lucide/svelte/icons/settings';
 	import Gauge from '@lucide/svelte/icons/gauge';
+	import Zap from '@lucide/svelte/icons/zap';
+	import CalendarClock from '@lucide/svelte/icons/calendar-clock';
+	import PanelLeftClose from '@lucide/svelte/icons/panel-left-close';
+	import PanelLeftOpen from '@lucide/svelte/icons/panel-left-open';
 
 	const nav = [
 		{ href: '/', label: 'Обзор', icon: LayoutDashboard },
 		{ href: '/modules', label: 'Модули', icon: Boxes },
+		{ href: '/directories', label: 'Справочники', icon: BookOpen },
+		{ href: '/network', label: 'Сеть', icon: Network },
 		{ href: '/revisions', label: 'Ревизии', icon: Activity },
-		{ href: '/peers', label: 'Пиры и спикеры', icon: Network },
+		{ href: '/operations', label: 'Операции', icon: Zap },
 		{ href: '/schedule', label: 'Расписание', icon: CalendarClock },
 		{ href: '/monitoring', label: 'Мониторинг', icon: Gauge },
-		{ href: '/settings', label: 'Настройки', icon: Settings }
 	] as const;
 
+	const navBottom = [
+		{ href: '/settings', label: 'Настройки', icon: Settings },
+	] as const;
+
+	let collapsed = $state(false);
 	let { children } = $props();
+
+	function isActive(href: string) {
+		const pathname = page.url.pathname;
+		if (href === '/') return pathname === '/';
+		return pathname === href || pathname.startsWith(href + '/');
+	}
 </script>
 
+<TooltipProvider delayDuration={0}>
 <div class="bg-background flex min-h-screen">
 	<aside
-		class="border-border bg-card/30 flex w-56 shrink-0 flex-col border-r"
+		class={cn(
+			'border-border bg-sidebar flex shrink-0 flex-col border-r transition-all duration-200',
+			collapsed ? 'w-14' : 'w-56'
+		)}
 		aria-label="Основная навигация"
 	>
-		<div class="p-4">
-			<a href={resolve('/')} class="text-foreground font-semibold tracking-tight">EvoBGP</a>
-			<p class="text-muted-foreground mt-0.5 text-xs">Control plane</p>
+		<!-- Header -->
+		<div class={cn('flex items-center gap-2 p-3', collapsed && 'justify-center')}>
+			{#if !collapsed}
+				<div class="min-w-0 flex-1">
+					<a href={resolve('/')} class="text-sidebar-foreground block truncate font-semibold tracking-tight">EvoBGP</a>
+					<p class="text-sidebar-foreground/50 truncate text-xs">Control plane</p>
+				</div>
+			{/if}
+			<button
+				onclick={() => (collapsed = !collapsed)}
+				class={cn(
+					buttonVariants({ variant: 'ghost', size: 'icon-sm' }),
+					'text-sidebar-foreground/60 hover:text-sidebar-foreground shrink-0'
+				)}
+				aria-label={collapsed ? 'Развернуть меню' : 'Свернуть меню'}
+			>
+				{#if collapsed}
+					<PanelLeftOpen class="size-4" />
+				{:else}
+					<PanelLeftClose class="size-4" />
+				{/if}
+			</button>
 		</div>
 		<Separator />
+
+		<!-- Main nav -->
 		<nav class="flex flex-1 flex-col gap-0.5 p-2">
 			{#each nav as item (item.href)}
 				{@const Icon = item.icon}
-				<a
-					href={resolve(item.href)}
-					class={cn(
-						buttonVariants({
-							variant: page.url.pathname === item.href ? 'secondary' : 'ghost',
-							size: 'sm'
-						}),
-						'w-full justify-start gap-2 no-underline'
-					)}
-				>
-					<Icon class="size-4" />
-					{item.label}
-				</a>
+				{@const active = isActive(item.href)}
+				{#if collapsed}
+					<Tooltip>
+						<TooltipTrigger>
+							<a
+								href={resolve(item.href)}
+								class={cn(
+									buttonVariants({ variant: active ? 'secondary' : 'ghost', size: 'icon-sm' }),
+									'w-full no-underline flex items-center justify-center'
+								)}
+								aria-current={active ? 'page' : undefined}
+							>
+								<Icon class="size-4" />
+							</a>
+						</TooltipTrigger>
+						<TooltipContent side="right">{item.label}</TooltipContent>
+					</Tooltip>
+				{:else}
+					<a
+						href={resolve(item.href)}
+						class={cn(
+							buttonVariants({ variant: active ? 'secondary' : 'ghost', size: 'sm' }),
+							'w-full justify-start gap-2 no-underline'
+						)}
+						aria-current={active ? 'page' : undefined}
+					>
+						<Icon class="size-4" />
+						{item.label}
+					</a>
+				{/if}
 			{/each}
 		</nav>
+
+		<!-- Bottom nav -->
+		<div class="flex flex-col gap-0.5 p-2">
+			<Separator class="mb-2" />
+			{#each navBottom as item (item.href)}
+				{@const Icon = item.icon}
+				{@const active = isActive(item.href)}
+				{#if collapsed}
+					<Tooltip>
+						<TooltipTrigger>
+							<a
+								href={resolve(item.href)}
+								class={cn(
+									buttonVariants({ variant: active ? 'secondary' : 'ghost', size: 'icon-sm' }),
+									'w-full no-underline flex items-center justify-center'
+								)}
+							>
+								<Icon class="size-4" />
+							</a>
+						</TooltipTrigger>
+						<TooltipContent side="right">{item.label}</TooltipContent>
+					</Tooltip>
+				{:else}
+					<a
+						href={resolve(item.href)}
+						class={cn(
+							buttonVariants({ variant: active ? 'secondary' : 'ghost', size: 'sm' }),
+							'w-full justify-start gap-2 no-underline'
+						)}
+					>
+						<Icon class="size-4" />
+						{item.label}
+					</a>
+				{/if}
+			{/each}
+		</div>
 	</aside>
+
 	<main class="min-w-0 flex-1 p-6">
 		{@render children?.()}
 	</main>
 </div>
+</TooltipProvider>
diff --git a/web/src/lib/api/client.ts b/web/src/lib/api/client.ts
index f53f4b6..961192d 100644
--- a/web/src/lib/api/client.ts
+++ b/web/src/lib/api/client.ts
@@ -3,44 +3,84 @@ import { browser } from '$app/environment';
 export const TOKEN_STORAGE_KEY = 'evobgp_api_token';
 
 export type Problem = {
+	type?: string;
 	title?: string;
 	status?: number;
 	detail?: string;
 };
 
-function mergeHeaders(init?: RequestInit): Headers {
+function getToken(): string | null {
+	if (!browser) return null;
+	return localStorage.getItem(TOKEN_STORAGE_KEY);
+}
+
+function mergeHeaders(init?: RequestInit, extraHeaders?: Record<string, string>): Headers {
 	const h = new Headers(init?.headers);
-	if (!h.has('Accept')) {
-		h.set('Accept', 'application/json');
-	}
-	if (browser) {
-		const t = localStorage.getItem(TOKEN_STORAGE_KEY);
-		if (t && !h.has('Authorization')) {
-			h.set('Authorization', `Bearer ${t}`);
+	if (!h.has('Accept')) h.set('Accept', 'application/json');
+	const t = getToken();
+	if (t && !h.has('Authorization')) h.set('Authorization', `Bearer ${t}`);
+	if (extraHeaders) {
+		for (const [k, v] of Object.entries(extraHeaders)) {
+			if (!h.has(k)) h.set(k, v);
 		}
 	}
 	return h;
 }
 
-export async function apiFetch(path: string, init?: RequestInit): Promise<Response> {
-	if (!browser) {
-		throw new Error('API is only available in the browser');
+export class ApiError extends Error {
+	constructor(
+		public readonly status: number,
+		message: string,
+		public readonly problem?: Problem
+	) {
+		super(message);
 	}
+}
+
+export async function apiFetch(path: string, init?: RequestInit): Promise<Response> {
+	if (!browser) throw new Error('API is only available in the browser');
 	return fetch(path, { ...init, headers: mergeHeaders(init) });
 }
 
+/** GET / DELETE без тела */
 export async function apiJSON<T>(path: string, init?: RequestInit): Promise<T> {
 	const res = await apiFetch(path, init);
+	return parseResponse<T>(res);
+}
+
+/** POST / PATCH / PUT с JSON-телом и автоматическим Idempotency-Key */
+export async function apiMutate<T = void>(
+	path: string,
+	method: 'POST' | 'PATCH' | 'PUT' | 'DELETE',
+	body?: unknown,
+	opts?: { idempotent?: boolean }
+): Promise<T> {
+	const headers: Record<string, string> = {};
+	if (body !== undefined) headers['Content-Type'] = 'application/json';
+	if (opts?.idempotent !== false) {
+		headers['Idempotency-Key'] = crypto.randomUUID();
+	}
+	const res = await fetch(path, {
+		method,
+		headers: mergeHeaders({ headers }, headers),
+		body: body !== undefined ? JSON.stringify(body) : undefined
+	});
+	return parseResponse<T>(res);
+}
+
+async function parseResponse<T>(res: Response): Promise<T> {
+	if (res.status === 204 || res.status === 205) return undefined as T;
 	const text = await res.text();
 	if (!res.ok) {
-		let detail = text;
+		let problem: Problem | undefined;
+		let detail = `HTTP ${res.status}`;
 		try {
-			const j = JSON.parse(text) as Problem;
-			if (j?.detail) detail = j.detail;
+			problem = JSON.parse(text) as Problem;
+			detail = problem.detail ?? problem.title ?? detail;
 		} catch {
-			/* plain text */
+			if (text) detail = text;
 		}
-		throw new Error(detail || `HTTP ${res.status}`);
+		throw new ApiError(res.status, detail, problem);
 	}
 	if (!text) return undefined as T;
 	return JSON.parse(text) as T;
diff --git a/web/src/lib/api/types.ts b/web/src/lib/api/types.ts
index 555f829..eb91cf8 100644
--- a/web/src/lib/api/types.ts
+++ b/web/src/lib/api/types.ts
@@ -1,21 +1,152 @@
-export type ModuleRow = {
-	id: string;
-	type: string;
-	name: string;
-	enabled: boolean;
-	priority: number;
-	refresh_interval_sec: number;
-	cron_expr: string;
-	default_community_id: string | null;
-	doh_profile_id: string | null;
-};
-
-export type ModulesResponse = {
-	items: ModuleRow[];
+// ---- Pagination ----
+export type Page<T> = {
+	items: T[];
 	next_cursor: string | null;
 	has_more: boolean;
 };
 
+// ---- Modules ----
+export type ModuleType = 'AS_PREFIXES' | 'CDN_CIDRS' | 'DOMAINS' | 'IP_RANGES';
+
+export type ModuleRow = {
+	id: string;
+	type: ModuleType;
+	name: string;
+	enabled: boolean;
+	priority: number;
+	refresh_interval_sec: number | null;
+	cron_expr: string | null;
+	default_community_id: string | null;
+	doh_profile_id: string | null;
+};
+export type ModulesResponse = Page<ModuleRow>;
+
+export type ModuleCreate = {
+	type: ModuleType;
+	name: string;
+	enabled?: boolean;
+	priority?: number;
+	doh_profile_id?: string | null;
+	refresh_interval_sec?: number | null;
+	cron_expr?: string | null;
+	default_community_id?: string | null;
+};
+export type ModulePatch = Partial<Omit<ModuleCreate, 'type'>>;
+
+// ---- AS Entries ----
+export type AsEntry = {
+	id: string;
+	asn: number | null;
+	prefix: string | null;
+	community_id: string | null;
+};
+export type AsEntryCreate = {
+	asn?: number;
+	prefix?: string;
+	community_id?: string | null;
+};
+export type AsEntriesResponse = Page<AsEntry>;
+
+// ---- CDN Sources ----
+export type CdnSource = {
+	id: string;
+	url: string;
+	source_kind: string;
+	community_id: string | null;
+	refresh_interval_sec: number | null;
+};
+export type CdnSourceCreate = {
+	url: string;
+	source_kind: string;
+	community_id?: string | null;
+};
+export type CdnSourcePatch = Partial<CdnSourceCreate> & { refresh_interval_sec?: number | null };
+export type CdnSourcesResponse = Page<CdnSource>;
+
+// ---- Domain Entries ----
+export type DomainEntry = {
+	id: string;
+	fqdn: string;
+	community_id: string | null;
+};
+export type DomainEntryCreate = {
+	fqdn: string;
+	community_id?: string | null;
+};
+export type DomainEntriesResponse = Page<DomainEntry>;
+
+// ---- IP Range Entries ----
+export type IpRangeEntry = {
+	id: string;
+	prefix: string;
+	community_id: string;
+};
+export type IpRangeEntryCreate = {
+	prefix: string;
+	community_id: string;
+};
+export type IpRangeEntriesResponse = Page<IpRangeEntry>;
+
+// ---- DoH Profiles ----
+export type DohProfile = {
+	id: string;
+	url: string;
+	timeout_ms: number | null;
+	vault_secret_ref: string | null;
+};
+export type DohProfileCreate = {
+	url: string;
+	timeout_ms?: number | null;
+	vault_secret_ref?: string | null;
+};
+export type DohProfilePatch = Partial<DohProfileCreate>;
+export type DohProfilesResponse = Page<DohProfile>;
+
+// ---- Communities ----
+export type BgpCommunity = {
+	id: string;
+	name: string;
+	kind: string | null;
+};
+export type BgpCommunityCreate = {
+	name: string;
+	kind?: string;
+};
+export type BgpCommunityPatch = Partial<BgpCommunityCreate>;
+export type CommunitiesResponse = Page<BgpCommunity>;
+
+// ---- Peers ----
+export type PeerRow = {
+	id: string;
+	name?: string;
+	neighbor: string;
+	remote_asn?: number;
+	session_state: string;
+	bgp_speaker_id: string | null;
+};
+export type PeersResponse = Page<PeerRow>;
+export type BgpPeerCreate = {
+	neighbor: string;
+	remote_asn: number;
+	bgp_speaker_id?: string | null;
+};
+export type BgpPeerPatch = Partial<BgpPeerCreate>;
+
+// ---- Speakers ----
+export type SpeakerRow = {
+	id: string;
+	role: string;
+	endpoint: string;
+	last_applied_revision_id: string | null;
+};
+export type SpeakersResponse = Page<SpeakerRow>;
+export type BgpSpeakerCreate = {
+	endpoint: string;
+	role?: string;
+};
+export type BgpSpeakerPatch = Partial<BgpSpeakerCreate>;
+
+// ---- Revisions ----
 export type RevisionRow = {
 	id: string;
 	content_hash: string;
@@ -24,40 +155,27 @@ export type RevisionRow = {
 	materialized_prefix_count: number;
 	module_id: string | null;
 };
+export type RevisionsResponse = Page<RevisionRow>;
 
-export type RevisionsResponse = {
-	items: RevisionRow[];
-	next_cursor: string | null;
-	has_more: boolean;
+export type RevisionPrefix = {
+	prefix: string;
+	community_id?: string | null;
 };
+export type RevisionPrefixesResponse = Page<RevisionPrefix>;
 
-export type PeerRow = {
+export type RevisionPreview = {
 	id: string;
-	name: string;
-	neighbor: string;
-	session_state: string;
-	bgp_speaker_id: string | null;
+	prefixes?: RevisionPrefix[];
+	[key: string]: unknown;
 };
 
-export type PeersResponse = {
-	items: PeerRow[];
-	next_cursor: string | null;
-	has_more: boolean;
-};
-
-export type SpeakerRow = {
-	id: string;
-	role: string;
-	endpoint: string;
-	last_applied_revision_id: string | null;
-};
-
-export type SpeakersResponse = {
-	items: SpeakerRow[];
-	next_cursor: string | null;
-	has_more: boolean;
+export type RevisionDiff = {
+	added: RevisionPrefix[];
+	removed: RevisionPrefix[];
+	[key: string]: unknown;
 };
 
+// ---- Jobs ----
 export type JobRow = {
 	job_id: string;
 	kind: string;
@@ -69,9 +187,7 @@ export type JobRow = {
 	error?: string | null;
 	meta?: Record<string, unknown>;
 };
+export type JobsResponse = Page<JobRow>;
 
-export type JobsResponse = {
-	items: JobRow[];
-	next_cursor: string | null;
-	has_more: boolean;
-};
+// ---- Settings ----
+export type AppSettings = Record<string, unknown>;
diff --git a/web/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte b/web/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
new file mode 100644
index 0000000..7e63004
--- /dev/null
+++ b/web/src/lib/components/ui/alert-dialog/alert-dialog-action.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import {
+		buttonVariants,
+		type ButtonVariant,
+		type ButtonSize,
+	} from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "default",
+		size = "default",
+		...restProps
+	}: AlertDialogPrimitive.ActionProps & {
+		variant?: ButtonVariant;
+		size?: ButtonSize;
+	} = $props();
+</script>
+
+<AlertDialogPrimitive.Action
+	bind:ref
+	data-slot="alert-dialog-action"
+	class={cn(buttonVariants({ variant, size }), "cn-alert-dialog-action", className)}
+	{...restProps}
+/>
diff --git a/web/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte b/web/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
new file mode 100644
index 0000000..a4ce03c
--- /dev/null
+++ b/web/src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import {
+		buttonVariants,
+		type ButtonVariant,
+		type ButtonSize,
+	} from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "outline",
+		size = "default",
+		...restProps
+	}: AlertDialogPrimitive.CancelProps & {
+		variant?: ButtonVariant;
+		size?: ButtonSize;
+	} = $props();
+</script>
+
+<AlertDialogPrimitive.Cancel
+	bind:ref
+	data-slot="alert-dialog-cancel"
+	class={cn(buttonVariants({ variant, size }), "cn-alert-dialog-cancel", className)}
+	{...restProps}
+/>
diff --git a/web/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte b/web/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
new file mode 100644
index 0000000..c9b3eb3
--- /dev/null
+++ b/web/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import AlertDialogPortal from "./alert-dialog-portal.svelte";
+	import AlertDialogOverlay from "./alert-dialog-overlay.svelte";
+	import { cn, type WithoutChild, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		size = "default",
+		portalProps,
+		...restProps
+	}: WithoutChild<AlertDialogPrimitive.ContentProps> & {
+		size?: "default" | "sm";
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof AlertDialogPortal>>;
+	} = $props();
+</script>
+
+<AlertDialogPortal {...portalProps}>
+	<AlertDialogOverlay />
+	<AlertDialogPrimitive.Content
+		bind:ref
+		data-slot="alert-dialog-content"
+		data-size={size}
+		class={cn(
+			"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 bg-popover text-popover-foreground ring-foreground/10 gap-4 rounded-xl p-4 ring-1 duration-100 data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 outline-none",
+			className
+		)}
+		{...restProps}
+	/>
+</AlertDialogPortal>
diff --git a/web/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte b/web/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
new file mode 100644
index 0000000..5024f3f
--- /dev/null
+++ b/web/src/lib/components/ui/alert-dialog/alert-dialog-description.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.DescriptionProps = $props();
+</script>
+
+<AlertDialogPrimitive.Description
+	bind:ref
+	data-slot="alert-dialog-description"
+	class={cn("text-muted-foreground *:[a]:hover:text-foreground text-sm text-balance md:text-pretty *:[a]:underline *:[a]:underline-offset-3", className)}
+	{...restProps}
+/>
diff --git a/web/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte b/web/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
new file mode 100644
index 0000000..f4214db
--- /dev/null
+++ b/web/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-dialog-footer"
+	class={cn(
+		"bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/web/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte b/web/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
new file mode 100644
index 0000000..d6df4d3
--- /dev/null
+++ b/web/src/lib/components/ui/alert-dialog/alert-dialog-header.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-dialog-header"
+	class={cn("grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/web/src/lib/components/ui/alert-dialog/alert-dialog-media.svelte b/web/src/lib/components/ui/alert-dialog/alert-dialog-media.svelte
new file mode 100644
index 0000000..3f634f3
--- /dev/null
+++ b/web/src/lib/components/ui/alert-dialog/alert-dialog-media.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-dialog-media"
+	class={cn("bg-muted mb-2 inline-flex size-10 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/web/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte b/web/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
new file mode 100644
index 0000000..9ffcc85
--- /dev/null
+++ b/web/src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.OverlayProps = $props();
+</script>
+
+<AlertDialogPrimitive.Overlay
+	bind:ref
+	data-slot="alert-dialog-overlay"
+	class={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 z-50", className)}
+	{...restProps}
+/>
diff --git a/web/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte b/web/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte
new file mode 100644
index 0000000..f0a19a8
--- /dev/null
+++ b/web/src/lib/components/ui/alert-dialog/alert-dialog-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+	let { ...restProps }: AlertDialogPrimitive.PortalProps = $props();
+</script>
+
+<AlertDialogPrimitive.Portal {...restProps} />
diff --git a/web/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte b/web/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
new file mode 100644
index 0000000..652da33
--- /dev/null
+++ b/web/src/lib/components/ui/alert-dialog/alert-dialog-title.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.TitleProps = $props();
+</script>
+
+<AlertDialogPrimitive.Title
+	bind:ref
+	data-slot="alert-dialog-title"
+	class={cn("text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className)}
+	{...restProps}
+/>
diff --git a/web/src/lib/components/ui/alert-dialog/alert-dialog-trigger.svelte b/web/src/lib/components/ui/alert-dialog/alert-dialog-trigger.svelte
new file mode 100644
index 0000000..b22d1d5
--- /dev/null
+++ b/web/src/lib/components/ui/alert-dialog/alert-dialog-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: AlertDialogPrimitive.TriggerProps = $props();
+</script>
+
+<AlertDialogPrimitive.Trigger bind:ref data-slot="alert-dialog-trigger" {...restProps} />
diff --git a/web/src/lib/components/ui/alert-dialog/alert-dialog.svelte b/web/src/lib/components/ui/alert-dialog/alert-dialog.svelte
new file mode 100644
index 0000000..7ea78bb
--- /dev/null
+++ b/web/src/lib/components/ui/alert-dialog/alert-dialog.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: AlertDialogPrimitive.RootProps = $props();
+</script>
+
+<AlertDialogPrimitive.Root bind:open {...restProps} />
diff --git a/web/src/lib/components/ui/alert-dialog/index.ts b/web/src/lib/components/ui/alert-dialog/index.ts
new file mode 100644
index 0000000..ca81c2a
--- /dev/null
+++ b/web/src/lib/components/ui/alert-dialog/index.ts
@@ -0,0 +1,40 @@
+import Root from "./alert-dialog.svelte";
+import Portal from "./alert-dialog-portal.svelte";
+import Trigger from "./alert-dialog-trigger.svelte";
+import Title from "./alert-dialog-title.svelte";
+import Action from "./alert-dialog-action.svelte";
+import Cancel from "./alert-dialog-cancel.svelte";
+import Footer from "./alert-dialog-footer.svelte";
+import Header from "./alert-dialog-header.svelte";
+import Overlay from "./alert-dialog-overlay.svelte";
+import Content from "./alert-dialog-content.svelte";
+import Description from "./alert-dialog-description.svelte";
+import Media from "./alert-dialog-media.svelte";
+
+export {
+	Root,
+	Title,
+	Action,
+	Cancel,
+	Portal,
+	Footer,
+	Header,
+	Trigger,
+	Overlay,
+	Content,
+	Description,
+	Media,
+	//
+	Root as AlertDialog,
+	Title as AlertDialogTitle,
+	Action as AlertDialogAction,
+	Cancel as AlertDialogCancel,
+	Portal as AlertDialogPortal,
+	Footer as AlertDialogFooter,
+	Header as AlertDialogHeader,
+	Trigger as AlertDialogTrigger,
+	Overlay as AlertDialogOverlay,
+	Content as AlertDialogContent,
+	Description as AlertDialogDescription,
+	Media as AlertDialogMedia,
+};
diff --git a/web/src/lib/components/ui/alert/alert-action.svelte b/web/src/lib/components/ui/alert/alert-action.svelte
new file mode 100644
index 0000000..1877d38
--- /dev/null
+++ b/web/src/lib/components/ui/alert/alert-action.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-action"
+	class={cn("absolute top-2 right-2", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/web/src/lib/components/ui/alert/alert-description.svelte b/web/src/lib/components/ui/alert/alert-description.svelte
new file mode 100644
index 0000000..7ee6039
--- /dev/null
+++ b/web/src/lib/components/ui/alert/alert-description.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-description"
+	class={cn(
+		"text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/web/src/lib/components/ui/alert/alert-title.svelte b/web/src/lib/components/ui/alert/alert-title.svelte
new file mode 100644
index 0000000..3e339a3
--- /dev/null
+++ b/web/src/lib/components/ui/alert/alert-title.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert-title"
+	class={cn(
+		"font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/web/src/lib/components/ui/alert/alert.svelte b/web/src/lib/components/ui/alert/alert.svelte
new file mode 100644
index 0000000..abf7487
--- /dev/null
+++ b/web/src/lib/components/ui/alert/alert.svelte
@@ -0,0 +1,43 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const alertVariants = tv({
+		base: "grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 group/alert relative w-full",
+		variants: {
+			variant: {
+				default: "bg-card text-card-foreground",
+				destructive: "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type AlertVariant = VariantProps<typeof alertVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		variant = "default",
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		variant?: AlertVariant;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="alert"
+	role="alert"
+	class={cn(alertVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/web/src/lib/components/ui/alert/index.ts b/web/src/lib/components/ui/alert/index.ts
new file mode 100644
index 0000000..071b113
--- /dev/null
+++ b/web/src/lib/components/ui/alert/index.ts
@@ -0,0 +1,17 @@
+import Root from "./alert.svelte";
+import Description from "./alert-description.svelte";
+import Title from "./alert-title.svelte";
+import Action from "./alert-action.svelte";
+export { alertVariants, type AlertVariant } from "./alert.svelte";
+
+export {
+	Root,
+	Description,
+	Title,
+	Action,
+	//
+	Root as Alert,
+	Description as AlertDescription,
+	Title as AlertTitle,
+	Action as AlertAction,
+};
diff --git a/web/src/lib/components/ui/badge/badge.svelte b/web/src/lib/components/ui/badge/badge.svelte
index cb378f7..51bbc23 100644
--- a/web/src/lib/components/ui/badge/badge.svelte
+++ b/web/src/lib/components/ui/badge/badge.svelte
@@ -1,38 +1,49 @@
 <script lang="ts" module>
-	import { type VariantProps, tv } from 'tailwind-variants';
+	import { type VariantProps, tv } from "tailwind-variants";
 
 	export const badgeVariants = tv({
-		base: 'focus:ring-ring inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:ring-2 focus:ring-offset-2 focus:outline-none',
+		base: "h-5 gap-1 rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-colors focus-visible:ring-[3px] [&>svg]:pointer-events-none",
 		variants: {
 			variant: {
-				default: 'bg-primary text-primary-foreground border-transparent shadow hover:bg-primary/80',
-				secondary: 'bg-secondary text-secondary-foreground border-transparent hover:bg-secondary/80',
-				destructive:
-					'bg-destructive text-destructive-foreground border-transparent shadow hover:bg-destructive/80',
-				outline: 'text-foreground'
-			}
+				default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+				secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+				destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
+				outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+				ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
 		},
 		defaultVariants: {
-			variant: 'default'
-		}
+			variant: "default",
+		},
 	});
 
-	export type BadgeVariant = VariantProps<typeof badgeVariants>['variant'];
+	export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
 </script>
 
 <script lang="ts">
-	import { cn } from '$lib/utils.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import type { HTMLAnchorAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 
 	let {
+		ref = $bindable(null),
+		href,
 		class: className,
-		variant = 'default',
+		variant = "default",
 		children,
-		...rest
-	}: HTMLAttributes<HTMLSpanElement> & {
+		...restProps
+	}: WithElementRef<HTMLAnchorAttributes> & {
 		variant?: BadgeVariant;
-		children?: import('svelte').Snippet;
 	} = $props();
 </script>
 
-<span class={cn(badgeVariants({ variant }), className)} {...rest}>{@render children?.()}</span>
+<svelte:element
+	this={href ? "a" : "span"}
+	bind:this={ref}
+	data-slot="badge"
+	{href}
+	class={cn(badgeVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</svelte:element>
diff --git a/web/src/lib/components/ui/badge/index.ts b/web/src/lib/components/ui/badge/index.ts
index 5033951..64e0aa9 100644
--- a/web/src/lib/components/ui/badge/index.ts
+++ b/web/src/lib/components/ui/badge/index.ts
@@ -1,2 +1,2 @@
-import Root, { badgeVariants, type BadgeVariant } from './badge.svelte';
-export { Root, Root as Badge, badgeVariants, type BadgeVariant };
+export { default as Badge } from "./badge.svelte";
+export { badgeVariants, type BadgeVariant } from "./badge.svelte";
diff --git a/web/src/lib/components/ui/button/button.svelte b/web/src/lib/components/ui/button/button.svelte
index 9586b4d..89cedcb 100644
--- a/web/src/lib/components/ui/button/button.svelte
+++ b/web/src/lib/components/ui/button/button.svelte
@@ -1,54 +1,82 @@
 <script lang="ts" module>
-	import { type VariantProps, tv } from 'tailwind-variants';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
+	import { type VariantProps, tv } from "tailwind-variants";
 
 	export const buttonVariants = tv({
-		base: 'focus-visible:border-ring focus-visible:ring-ring/50 inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*="size-"])]:size-4',
+		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
 		variants: {
 			variant: {
-				default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
-				destructive:
-					'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
-				outline:
-					'border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:hover:bg-input/50',
-				secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
-				ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
-				link: 'text-primary underline-offset-4 hover:underline'
+				default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+				outline: "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+				secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+				ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+				destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
+				link: "text-primary underline-offset-4 hover:underline",
 			},
 			size: {
-				default: 'h-9 px-4 py-2 has-[>svg]:px-3',
-				sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',
-				lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
-				icon: 'size-9'
-			}
+				default: "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+				xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+				sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+				lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+				icon: "size-8",
+				"icon-xs": "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+				"icon-sm": "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+				"icon-lg": "size-9",
+			},
 		},
 		defaultVariants: {
-			variant: 'default',
-			size: 'default'
-		}
+			variant: "default",
+			size: "default",
+		},
 	});
 
-	export type ButtonVariant = VariantProps<typeof buttonVariants>['variant'];
-	export type ButtonSize = VariantProps<typeof buttonVariants>['size'];
+	export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
+	export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
+
+	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+		WithElementRef<HTMLAnchorAttributes> & {
+			variant?: ButtonVariant;
+			size?: ButtonSize;
+		};
 </script>
 
 <script lang="ts">
-	import { cn } from '$lib/utils.js';
-	import type { HTMLButtonAttributes } from 'svelte/elements';
-
 	let {
 		class: className,
-		variant = 'default',
-		size = 'default',
-		type = 'button',
+		variant = "default",
+		size = "default",
+		ref = $bindable(null),
+		href = undefined,
+		type = "button",
+		disabled,
 		children,
-		...rest
-	}: HTMLButtonAttributes & {
-		variant?: ButtonVariant;
-		size?: ButtonSize;
-		children?: import('svelte').Snippet;
-	} = $props();
+		...restProps
+	}: ButtonProps = $props();
 </script>
 
-<button class={cn(buttonVariants({ variant, size }), className)} {type} {...rest}
-	>{@render children?.()}</button
->
+{#if href}
+	<a
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		href={disabled ? undefined : href}
+		aria-disabled={disabled}
+		role={disabled ? "link" : undefined}
+		tabindex={disabled ? -1 : undefined}
+		{...restProps}
+	>
+		{@render children?.()}
+	</a>
+{:else}
+	<button
+		bind:this={ref}
+		data-slot="button"
+		class={cn(buttonVariants({ variant, size }), className)}
+		{type}
+		{disabled}
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
+{/if}
diff --git a/web/src/lib/components/ui/button/index.ts b/web/src/lib/components/ui/button/index.ts
index bbdc224..fb585d7 100644
--- a/web/src/lib/components/ui/button/index.ts
+++ b/web/src/lib/components/ui/button/index.ts
@@ -1,8 +1,17 @@
-import Root, { buttonVariants, type ButtonSize, type ButtonVariant } from './button.svelte';
+import Root, {
+	type ButtonProps,
+	type ButtonSize,
+	type ButtonVariant,
+	buttonVariants,
+} from "./button.svelte";
+
 export {
 	Root,
+	type ButtonProps as Props,
+	//
 	Root as Button,
 	buttonVariants,
+	type ButtonProps,
 	type ButtonSize,
-	type ButtonVariant
+	type ButtonVariant,
 };
diff --git a/web/src/lib/components/ui/card/card-action.svelte b/web/src/lib/components/ui/card/card-action.svelte
new file mode 100644
index 0000000..7c48844
--- /dev/null
+++ b/web/src/lib/components/ui/card/card-action.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-action"
+	class={cn(
+		"cn-card-action col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/web/src/lib/components/ui/card/card-content.svelte b/web/src/lib/components/ui/card/card-content.svelte
index 2dbed82..4f60ee3 100644
--- a/web/src/lib/components/ui/card/card-content.svelte
+++ b/web/src/lib/components/ui/card/card-content.svelte
@@ -1,12 +1,20 @@
 <script lang="ts">
-	import { cn } from '$lib/utils.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 
 	let {
+		ref = $bindable(null),
 		class: className,
 		children,
-		...rest
-	}: HTMLAttributes<HTMLDivElement> & { children?: import('svelte').Snippet } = $props();
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div class={cn('p-6 pt-0', className)} {...rest}>{@render children?.()}</div>
+<div
+	bind:this={ref}
+	data-slot="card-content"
+	class={cn("px-4 group-data-[size=sm]/card:px-3", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/web/src/lib/components/ui/card/card-description.svelte b/web/src/lib/components/ui/card/card-description.svelte
index 4527cde..9b20ac7 100644
--- a/web/src/lib/components/ui/card/card-description.svelte
+++ b/web/src/lib/components/ui/card/card-description.svelte
@@ -1,12 +1,20 @@
 <script lang="ts">
-	import { cn } from '$lib/utils.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 
 	let {
+		ref = $bindable(null),
 		class: className,
 		children,
-		...rest
-	}: HTMLAttributes<HTMLParagraphElement> & { children?: import('svelte').Snippet } = $props();
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
 </script>
 
-<p class={cn('text-muted-foreground text-sm', className)} {...rest}>{@render children?.()}</p>
+<p
+	bind:this={ref}
+	data-slot="card-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</p>
diff --git a/web/src/lib/components/ui/card/card-footer.svelte b/web/src/lib/components/ui/card/card-footer.svelte
new file mode 100644
index 0000000..1efff6d
--- /dev/null
+++ b/web/src/lib/components/ui/card/card-footer.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-footer"
+	class={cn("bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/web/src/lib/components/ui/card/card-header.svelte b/web/src/lib/components/ui/card/card-header.svelte
index 9094f13..7eb69e1 100644
--- a/web/src/lib/components/ui/card/card-header.svelte
+++ b/web/src/lib/components/ui/card/card-header.svelte
@@ -1,12 +1,23 @@
 <script lang="ts">
-	import { cn } from '$lib/utils.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
+		ref = $bindable(null),
 		class: className,
 		children,
-		...rest
-	}: HTMLAttributes<HTMLDivElement> & { children?: import('svelte').Snippet } = $props();
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div class={cn('flex flex-col gap-1.5 p-6', className)} {...rest}>{@render children?.()}</div>
+<div
+	bind:this={ref}
+	data-slot="card-header"
+	class={cn(
+		"gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/web/src/lib/components/ui/card/card-title.svelte b/web/src/lib/components/ui/card/card-title.svelte
index 0deb47b..1523fc5 100644
--- a/web/src/lib/components/ui/card/card-title.svelte
+++ b/web/src/lib/components/ui/card/card-title.svelte
@@ -1,14 +1,20 @@
 <script lang="ts">
-	import { cn } from '$lib/utils.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 
 	let {
+		ref = $bindable(null),
 		class: className,
 		children,
-		...rest
-	}: HTMLAttributes<HTMLHeadingElement> & { children?: import('svelte').Snippet } = $props();
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<h3 class={cn('leading-none font-semibold tracking-tight', className)} {...rest}>
+<div
+	bind:this={ref}
+	data-slot="card-title"
+	class={cn("text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", className)}
+	{...restProps}
+>
 	{@render children?.()}
-</h3>
+</div>
diff --git a/web/src/lib/components/ui/card/card.svelte b/web/src/lib/components/ui/card/card.svelte
index 0429da8..2b4f81a 100644
--- a/web/src/lib/components/ui/card/card.svelte
+++ b/web/src/lib/components/ui/card/card.svelte
@@ -1,17 +1,22 @@
 <script lang="ts">
-	import { cn } from '$lib/utils.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 
 	let {
+		ref = $bindable(null),
 		class: className,
 		children,
-		...rest
-	}: HTMLAttributes<HTMLDivElement> & { children?: import('svelte').Snippet } = $props();
+		size = "default",
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { size?: "default" | "sm" } = $props();
 </script>
 
 <div
-	class={cn('bg-card text-card-foreground rounded-xl border shadow-sm', className)}
-	{...rest}
+	bind:this={ref}
+	data-slot="card"
+	data-size={size}
+	class={cn("ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col", className)}
+	{...restProps}
 >
 	{@render children?.()}
 </div>
diff --git a/web/src/lib/components/ui/card/index.ts b/web/src/lib/components/ui/card/index.ts
index 318b5bb..4d3fce4 100644
--- a/web/src/lib/components/ui/card/index.ts
+++ b/web/src/lib/components/ui/card/index.ts
@@ -1,14 +1,25 @@
-import Root from './card.svelte';
-import Header from './card-header.svelte';
-import Title from './card-title.svelte';
-import Description from './card-description.svelte';
-import Content from './card-content.svelte';
+import Root from "./card.svelte";
+import Content from "./card-content.svelte";
+import Description from "./card-description.svelte";
+import Footer from "./card-footer.svelte";
+import Header from "./card-header.svelte";
+import Title from "./card-title.svelte";
+import Action from "./card-action.svelte";
 
 export {
 	Root,
+	Content,
+	Description,
+	Footer,
+	Header,
+	Title,
+	Action,
+	//
 	Root as Card,
+	Content as CardContent,
+	Description as CardDescription,
+	Footer as CardFooter,
 	Header as CardHeader,
 	Title as CardTitle,
-	Description as CardDescription,
-	Content as CardContent
+	Action as CardAction,
 };
diff --git a/web/src/lib/components/ui/dialog/dialog-close.svelte b/web/src/lib/components/ui/dialog/dialog-close.svelte
new file mode 100644
index 0000000..de68f2f
--- /dev/null
+++ b/web/src/lib/components/ui/dialog/dialog-close.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		type = "button",
+		...restProps
+	}: DialogPrimitive.CloseProps = $props();
+</script>
+
+<DialogPrimitive.Close bind:ref data-slot="dialog-close" {type} {...restProps} />
diff --git a/web/src/lib/components/ui/dialog/dialog-content.svelte b/web/src/lib/components/ui/dialog/dialog-content.svelte
new file mode 100644
index 0000000..c0551ee
--- /dev/null
+++ b/web/src/lib/components/ui/dialog/dialog-content.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import DialogPortal from "./dialog-portal.svelte";
+	import type { Snippet } from "svelte";
+	import * as Dialog from "./index.js";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+	import { Button } from "$lib/components/ui/button/index.js";
+	import XIcon from '@lucide/svelte/icons/x';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		portalProps,
+		children,
+		showCloseButton = true,
+		...restProps
+	}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DialogPortal>>;
+		children: Snippet;
+		showCloseButton?: boolean;
+	} = $props();
+</script>
+
+<DialogPortal {...portalProps}>
+	<Dialog.Overlay />
+	<DialogPrimitive.Content
+		bind:ref
+		data-slot="dialog-content"
+		class={cn(
+			"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-4 rounded-xl p-4 text-sm ring-1 duration-100 sm:max-w-sm fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		{#if showCloseButton}
+			<DialogPrimitive.Close data-slot="dialog-close">
+				{#snippet child({ props })}
+					<Button variant="ghost" class="absolute top-2 right-2" size="icon-sm" {...props}>
+						<XIcon  />
+						<span class="sr-only">Close</span>
+					</Button>
+				{/snippet}
+			</DialogPrimitive.Close>
+		{/if}
+	</DialogPrimitive.Content>
+</DialogPortal>
diff --git a/web/src/lib/components/ui/dialog/dialog-description.svelte b/web/src/lib/components/ui/dialog/dialog-description.svelte
new file mode 100644
index 0000000..0102d91
--- /dev/null
+++ b/web/src/lib/components/ui/dialog/dialog-description.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.DescriptionProps = $props();
+</script>
+
+<DialogPrimitive.Description
+	bind:ref
+	data-slot="dialog-description"
+	class={cn("text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3", className)}
+	{...restProps}
+/>
diff --git a/web/src/lib/components/ui/dialog/dialog-footer.svelte b/web/src/lib/components/ui/dialog/dialog-footer.svelte
new file mode 100644
index 0000000..e23160a
--- /dev/null
+++ b/web/src/lib/components/ui/dialog/dialog-footer.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { Button } from "$lib/components/ui/button/index.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		showCloseButton = false,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		showCloseButton?: boolean;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dialog-footer"
+	class={cn("bg-muted/50 -mx-4 -mb-4 rounded-b-xl border-t p-4 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+	{...restProps}
+>
+	{@render children?.()}
+	{#if showCloseButton}
+		<DialogPrimitive.Close>
+			{#snippet child({ props })}
+				<Button variant="outline" {...props}>Close</Button>
+			{/snippet}
+		</DialogPrimitive.Close>
+	{/if}
+</div>
diff --git a/web/src/lib/components/ui/dialog/dialog-header.svelte b/web/src/lib/components/ui/dialog/dialog-header.svelte
new file mode 100644
index 0000000..c3ce8a2
--- /dev/null
+++ b/web/src/lib/components/ui/dialog/dialog-header.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dialog-header"
+	class={cn("gap-2 flex flex-col", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/web/src/lib/components/ui/dialog/dialog-overlay.svelte b/web/src/lib/components/ui/dialog/dialog-overlay.svelte
new file mode 100644
index 0000000..19f69f0
--- /dev/null
+++ b/web/src/lib/components/ui/dialog/dialog-overlay.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.OverlayProps = $props();
+</script>
+
+<DialogPrimitive.Overlay
+	bind:ref
+	data-slot="dialog-overlay"
+	class={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs fixed inset-0 isolate z-50", className)}
+	{...restProps}
+/>
diff --git a/web/src/lib/components/ui/dialog/dialog-portal.svelte b/web/src/lib/components/ui/dialog/dialog-portal.svelte
new file mode 100644
index 0000000..ccfa79c
--- /dev/null
+++ b/web/src/lib/components/ui/dialog/dialog-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let { ...restProps }: DialogPrimitive.PortalProps = $props();
+</script>
+
+<DialogPrimitive.Portal {...restProps} />
diff --git a/web/src/lib/components/ui/dialog/dialog-title.svelte b/web/src/lib/components/ui/dialog/dialog-title.svelte
new file mode 100644
index 0000000..6ff1a4a
--- /dev/null
+++ b/web/src/lib/components/ui/dialog/dialog-title.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DialogPrimitive.TitleProps = $props();
+</script>
+
+<DialogPrimitive.Title
+	bind:ref
+	data-slot="dialog-title"
+	class={cn("text-base leading-none font-medium", className)}
+	{...restProps}
+/>
diff --git a/web/src/lib/components/ui/dialog/dialog-trigger.svelte b/web/src/lib/components/ui/dialog/dialog-trigger.svelte
new file mode 100644
index 0000000..589ee0c
--- /dev/null
+++ b/web/src/lib/components/ui/dialog/dialog-trigger.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		type = "button",
+		...restProps
+	}: DialogPrimitive.TriggerProps = $props();
+</script>
+
+<DialogPrimitive.Trigger bind:ref data-slot="dialog-trigger" {type} {...restProps} />
diff --git a/web/src/lib/components/ui/dialog/dialog.svelte b/web/src/lib/components/ui/dialog/dialog.svelte
new file mode 100644
index 0000000..211672c
--- /dev/null
+++ b/web/src/lib/components/ui/dialog/dialog.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: DialogPrimitive.RootProps = $props();
+</script>
+
+<DialogPrimitive.Root bind:open {...restProps} />
diff --git a/web/src/lib/components/ui/dialog/index.ts b/web/src/lib/components/ui/dialog/index.ts
new file mode 100644
index 0000000..076cef5
--- /dev/null
+++ b/web/src/lib/components/ui/dialog/index.ts
@@ -0,0 +1,34 @@
+import Root from "./dialog.svelte";
+import Portal from "./dialog-portal.svelte";
+import Title from "./dialog-title.svelte";
+import Footer from "./dialog-footer.svelte";
+import Header from "./dialog-header.svelte";
+import Overlay from "./dialog-overlay.svelte";
+import Content from "./dialog-content.svelte";
+import Description from "./dialog-description.svelte";
+import Trigger from "./dialog-trigger.svelte";
+import Close from "./dialog-close.svelte";
+
+export {
+	Root,
+	Title,
+	Portal,
+	Footer,
+	Header,
+	Trigger,
+	Overlay,
+	Content,
+	Description,
+	Close,
+	//
+	Root as Dialog,
+	Title as DialogTitle,
+	Portal as DialogPortal,
+	Footer as DialogFooter,
+	Header as DialogHeader,
+	Trigger as DialogTrigger,
+	Overlay as DialogOverlay,
+	Content as DialogContent,
+	Description as DialogDescription,
+	Close as DialogClose,
+};
diff --git a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte
new file mode 100644
index 0000000..e0e1971
--- /dev/null
+++ b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-group.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable([]),
+		...restProps
+	}: DropdownMenuPrimitive.CheckboxGroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.CheckboxGroup
+	bind:ref
+	bind:value
+	data-slot="dropdown-menu-checkbox-group"
+	{...restProps}
+/>
diff --git a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
new file mode 100644
index 0000000..a81b48d
--- /dev/null
+++ b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte
@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import MinusIcon from '@lucide/svelte/icons/minus';
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import type { Snippet } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		checked = $bindable(false),
+		indeterminate = $bindable(false),
+		class: className,
+		children: childrenProp,
+		...restProps
+	}: WithoutChildrenOrChild<DropdownMenuPrimitive.CheckboxItemProps> & {
+		children?: Snippet;
+	} = $props();
+</script>
+
+<DropdownMenuPrimitive.CheckboxItem
+	bind:ref
+	bind:checked
+	bind:indeterminate
+	data-slot="dropdown-menu-checkbox-item"
+	class={cn(
+		"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ checked, indeterminate })}
+		<span
+			class="absolute right-2 flex items-center justify-center pointer-events-none"
+			data-slot="dropdown-menu-checkbox-item-indicator"
+		>
+			{#if indeterminate}
+				<MinusIcon  />
+			{:else if checked}
+				<CheckIcon  />
+			{/if}
+		</span>
+		{@render childrenProp?.()}
+	{/snippet}
+</DropdownMenuPrimitive.CheckboxItem>
diff --git a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
new file mode 100644
index 0000000..261a5b0
--- /dev/null
+++ b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-content.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import DropdownMenuPortal from "./dropdown-menu-portal.svelte";
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		sideOffset = 4,
+		align = "start",
+		portalProps,
+		class: className,
+		...restProps
+	}: DropdownMenuPrimitive.ContentProps & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DropdownMenuPortal>>;
+	} = $props();
+</script>
+
+<DropdownMenuPortal {...portalProps}>
+	<DropdownMenuPrimitive.Content
+		bind:ref
+		data-slot="dropdown-menu-content"
+		{sideOffset}
+		{align}
+		class={cn(
+			"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 w-(--bits-dropdown-menu-anchor-width) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden",
+			className
+		)}
+		{...restProps}
+	/>
+</DropdownMenuPortal>
diff --git a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
new file mode 100644
index 0000000..433540f
--- /dev/null
+++ b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		...restProps
+	}: ComponentProps<typeof DropdownMenuPrimitive.GroupHeading> & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<DropdownMenuPrimitive.GroupHeading
+	bind:ref
+	data-slot="dropdown-menu-group-heading"
+	data-inset={inset}
+	class={cn("px-2 py-1.5 text-sm font-semibold data-[inset]:ps-8", className)}
+	{...restProps}
+/>
diff --git a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte
new file mode 100644
index 0000000..aca1f7b
--- /dev/null
+++ b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-group.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: DropdownMenuPrimitive.GroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Group bind:ref data-slot="dropdown-menu-group" {...restProps} />
diff --git a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
new file mode 100644
index 0000000..c425190
--- /dev/null
+++ b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { cn } from "$lib/utils.js";
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		variant = "default",
+		...restProps
+	}: DropdownMenuPrimitive.ItemProps & {
+		inset?: boolean;
+		variant?: "default" | "destructive";
+	} = $props();
+</script>
+
+<DropdownMenuPrimitive.Item
+	bind:ref
+	data-slot="dropdown-menu-item"
+	data-inset={inset}
+	data-variant={variant}
+	class={cn(
+		"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
new file mode 100644
index 0000000..e0c534f
--- /dev/null
+++ b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-label.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="dropdown-menu-label"
+	data-inset={inset}
+	class={cn("text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7 data-[inset]:pl-8", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-portal.svelte b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-portal.svelte
new file mode 100644
index 0000000..274cfef
--- /dev/null
+++ b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+	let { ...restProps }: DropdownMenuPrimitive.PortalProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Portal {...restProps} />
diff --git a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
new file mode 100644
index 0000000..189aef4
--- /dev/null
+++ b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-group.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		...restProps
+	}: DropdownMenuPrimitive.RadioGroupProps = $props();
+</script>
+
+<DropdownMenuPrimitive.RadioGroup
+	bind:ref
+	bind:value
+	data-slot="dropdown-menu-radio-group"
+	{...restProps}
+/>
diff --git a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
new file mode 100644
index 0000000..c8aa07b
--- /dev/null
+++ b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import CheckIcon from '@lucide/svelte/icons/check';
+	import { cn, type WithoutChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children: childrenProp,
+		...restProps
+	}: WithoutChild<DropdownMenuPrimitive.RadioItemProps> = $props();
+</script>
+
+<DropdownMenuPrimitive.RadioItem
+	bind:ref
+	data-slot="dropdown-menu-radio-item"
+	class={cn(
+		"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ checked })}
+		<span
+			class="absolute right-2 flex items-center justify-center pointer-events-none"
+			data-slot="dropdown-menu-radio-item-indicator"
+		>
+			{#if checked}
+				<CheckIcon  />
+			{/if}
+		</span>
+		{@render childrenProp?.({ checked })}
+	{/snippet}
+</DropdownMenuPrimitive.RadioItem>
diff --git a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
new file mode 100644
index 0000000..90f1b6f
--- /dev/null
+++ b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-separator.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DropdownMenuPrimitive.SeparatorProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Separator
+	bind:ref
+	data-slot="dropdown-menu-separator"
+	class={cn("bg-border -mx-1 my-1 h-px", className)}
+	{...restProps}
+/>
diff --git a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
new file mode 100644
index 0000000..ed7cc85
--- /dev/null
+++ b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-shortcut.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+	bind:this={ref}
+	data-slot="dropdown-menu-shortcut"
+	class={cn("text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</span>
diff --git a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
new file mode 100644
index 0000000..b5750d4
--- /dev/null
+++ b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DropdownMenuPrimitive.SubContentProps = $props();
+</script>
+
+<DropdownMenuPrimitive.SubContent
+	bind:ref
+	data-slot="dropdown-menu-sub-content"
+	class={cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-lg p-1 shadow-lg ring-1 duration-100 w-auto", className)}
+	{...restProps}
+/>
diff --git a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
new file mode 100644
index 0000000..fab0275
--- /dev/null
+++ b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		inset,
+		children,
+		...restProps
+	}: DropdownMenuPrimitive.SubTriggerProps & {
+		inset?: boolean;
+	} = $props();
+</script>
+
+<DropdownMenuPrimitive.SubTrigger
+	bind:ref
+	data-slot="dropdown-menu-sub-trigger"
+	data-inset={inset}
+	class={cn(
+		"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ChevronRightIcon class="ml-auto" />
+</DropdownMenuPrimitive.SubTrigger>
diff --git a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub.svelte b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub.svelte
new file mode 100644
index 0000000..f044581
--- /dev/null
+++ b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-sub.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: DropdownMenuPrimitive.SubProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Sub bind:open {...restProps} />
diff --git a/web/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte
new file mode 100644
index 0000000..cb05344
--- /dev/null
+++ b/web/src/lib/components/ui/dropdown-menu/dropdown-menu-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: DropdownMenuPrimitive.TriggerProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Trigger bind:ref data-slot="dropdown-menu-trigger" {...restProps} />
diff --git a/web/src/lib/components/ui/dropdown-menu/dropdown-menu.svelte b/web/src/lib/components/ui/dropdown-menu/dropdown-menu.svelte
new file mode 100644
index 0000000..cb4bc62
--- /dev/null
+++ b/web/src/lib/components/ui/dropdown-menu/dropdown-menu.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: DropdownMenuPrimitive.RootProps = $props();
+</script>
+
+<DropdownMenuPrimitive.Root bind:open {...restProps} />
diff --git a/web/src/lib/components/ui/dropdown-menu/index.ts b/web/src/lib/components/ui/dropdown-menu/index.ts
new file mode 100644
index 0000000..7850c6a
--- /dev/null
+++ b/web/src/lib/components/ui/dropdown-menu/index.ts
@@ -0,0 +1,54 @@
+import Root from "./dropdown-menu.svelte";
+import Sub from "./dropdown-menu-sub.svelte";
+import CheckboxGroup from "./dropdown-menu-checkbox-group.svelte";
+import CheckboxItem from "./dropdown-menu-checkbox-item.svelte";
+import Content from "./dropdown-menu-content.svelte";
+import Group from "./dropdown-menu-group.svelte";
+import Item from "./dropdown-menu-item.svelte";
+import Label from "./dropdown-menu-label.svelte";
+import RadioGroup from "./dropdown-menu-radio-group.svelte";
+import RadioItem from "./dropdown-menu-radio-item.svelte";
+import Separator from "./dropdown-menu-separator.svelte";
+import Shortcut from "./dropdown-menu-shortcut.svelte";
+import Trigger from "./dropdown-menu-trigger.svelte";
+import SubContent from "./dropdown-menu-sub-content.svelte";
+import SubTrigger from "./dropdown-menu-sub-trigger.svelte";
+import GroupHeading from "./dropdown-menu-group-heading.svelte";
+import Portal from "./dropdown-menu-portal.svelte";
+
+export {
+	CheckboxGroup,
+	CheckboxItem,
+	Content,
+	Portal,
+	Root as DropdownMenu,
+	CheckboxGroup as DropdownMenuCheckboxGroup,
+	CheckboxItem as DropdownMenuCheckboxItem,
+	Content as DropdownMenuContent,
+	Portal as DropdownMenuPortal,
+	Group as DropdownMenuGroup,
+	Item as DropdownMenuItem,
+	Label as DropdownMenuLabel,
+	RadioGroup as DropdownMenuRadioGroup,
+	RadioItem as DropdownMenuRadioItem,
+	Separator as DropdownMenuSeparator,
+	Shortcut as DropdownMenuShortcut,
+	Sub as DropdownMenuSub,
+	SubContent as DropdownMenuSubContent,
+	SubTrigger as DropdownMenuSubTrigger,
+	Trigger as DropdownMenuTrigger,
+	GroupHeading as DropdownMenuGroupHeading,
+	Group,
+	GroupHeading,
+	Item,
+	Label,
+	RadioGroup,
+	RadioItem,
+	Root,
+	Separator,
+	Shortcut,
+	Sub,
+	SubContent,
+	SubTrigger,
+	Trigger,
+};
diff --git a/web/src/lib/components/ui/input/index.ts b/web/src/lib/components/ui/input/index.ts
index f55e99c..f47b6d3 100644
--- a/web/src/lib/components/ui/input/index.ts
+++ b/web/src/lib/components/ui/input/index.ts
@@ -1,2 +1,7 @@
-import Root from './input.svelte';
-export { Root, Root as Input };
+import Root from "./input.svelte";
+
+export {
+	Root,
+	//
+	Root as Input,
+};
diff --git a/web/src/lib/components/ui/input/input.svelte b/web/src/lib/components/ui/input/input.svelte
index ca430ed..fe7db38 100644
--- a/web/src/lib/components/ui/input/input.svelte
+++ b/web/src/lib/components/ui/input/input.svelte
@@ -1,19 +1,48 @@
 <script lang="ts">
-	import { cn } from '$lib/utils.js';
-	import type { HTMLInputAttributes } from 'svelte/elements';
+	import type { HTMLInputAttributes, HTMLInputTypeAttribute } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	type InputType = Exclude<HTMLInputTypeAttribute, "file">;
+
+	type Props = WithElementRef<
+		Omit<HTMLInputAttributes, "type"> &
+			({ type: "file"; files?: FileList } | { type?: InputType; files?: undefined })
+	>;
 
 	let {
-		class: className,
+		ref = $bindable(null),
 		value = $bindable(),
-		...rest
-	}: HTMLInputAttributes = $props();
+		type,
+		files = $bindable(),
+		class: className,
+		"data-slot": dataSlot = "input",
+		...restProps
+	}: Props = $props();
 </script>
 
-<input
-	class={cn(
-		'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border px-3 py-1 text-base shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-[3px] focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-		className
-	)}
-	bind:value
-	{...rest}
-/>
+{#if type === "file"}
+	<input
+		bind:this={ref}
+		data-slot={dataSlot}
+		class={cn(
+			"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+			className
+		)}
+		type="file"
+		bind:files
+		bind:value
+		{...restProps}
+	/>
+{:else}
+	<input
+		bind:this={ref}
+		data-slot={dataSlot}
+		class={cn(
+			"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+			className
+		)}
+		{type}
+		bind:value
+		{...restProps}
+	/>
+{/if}
diff --git a/web/src/lib/components/ui/label/index.ts b/web/src/lib/components/ui/label/index.ts
index 2543553..8bfca0b 100644
--- a/web/src/lib/components/ui/label/index.ts
+++ b/web/src/lib/components/ui/label/index.ts
@@ -1,2 +1,7 @@
-import Root from './label.svelte';
-export { Root, Root as Label };
+import Root from "./label.svelte";
+
+export {
+	Root,
+	//
+	Root as Label,
+};
diff --git a/web/src/lib/components/ui/label/label.svelte b/web/src/lib/components/ui/label/label.svelte
index 407823c..d5e3086 100644
--- a/web/src/lib/components/ui/label/label.svelte
+++ b/web/src/lib/components/ui/label/label.svelte
@@ -1,15 +1,20 @@
 <script lang="ts">
-	import { cn } from '$lib/utils.js';
-	import type { HTMLLabelAttributes } from 'svelte/elements';
+	import { Label as LabelPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
+		ref = $bindable(null),
 		class: className,
-		children,
-		...rest
-	}: HTMLLabelAttributes & { children?: import('svelte').Snippet } = $props();
+		...restProps
+	}: LabelPrimitive.RootProps = $props();
 </script>
 
-<label
-	class={cn('text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70', className)}
-	{...rest}>{@render children?.()}</label
->
+<LabelPrimitive.Root
+	bind:ref
+	data-slot="label"
+	class={cn(
+		"gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/web/src/lib/components/ui/popover/index.ts b/web/src/lib/components/ui/popover/index.ts
new file mode 100644
index 0000000..5f18036
--- /dev/null
+++ b/web/src/lib/components/ui/popover/index.ts
@@ -0,0 +1,28 @@
+import Root from "./popover.svelte";
+import Close from "./popover-close.svelte";
+import Content from "./popover-content.svelte";
+import Description from "./popover-description.svelte";
+import Header from "./popover-header.svelte";
+import Title from "./popover-title.svelte";
+import Trigger from "./popover-trigger.svelte";
+import Portal from "./popover-portal.svelte";
+
+export {
+	Root,
+	Content,
+	Description,
+	Header,
+	Title,
+	Trigger,
+	Close,
+	Portal,
+	//
+	Root as Popover,
+	Content as PopoverContent,
+	Description as PopoverDescription,
+	Header as PopoverHeader,
+	Title as PopoverTitle,
+	Trigger as PopoverTrigger,
+	Close as PopoverClose,
+	Portal as PopoverPortal,
+};
diff --git a/web/src/lib/components/ui/popover/popover-close.svelte b/web/src/lib/components/ui/popover/popover-close.svelte
new file mode 100644
index 0000000..c360925
--- /dev/null
+++ b/web/src/lib/components/ui/popover/popover-close.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: PopoverPrimitive.CloseProps = $props();
+</script>
+
+<PopoverPrimitive.Close bind:ref data-slot="popover-close" {...restProps} />
diff --git a/web/src/lib/components/ui/popover/popover-content.svelte b/web/src/lib/components/ui/popover/popover-content.svelte
new file mode 100644
index 0000000..dd9a38f
--- /dev/null
+++ b/web/src/lib/components/ui/popover/popover-content.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from "bits-ui";
+	import PopoverPortal from "./popover-portal.svelte";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 4,
+		align = "center",
+		portalProps,
+		...restProps
+	}: PopoverPrimitive.ContentProps & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof PopoverPortal>>;
+	} = $props();
+</script>
+
+<PopoverPortal {...portalProps}>
+	<PopoverPrimitive.Content
+		bind:ref
+		data-slot="popover-content"
+		{sideOffset}
+		{align}
+		class={cn(
+			"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 flex flex-col gap-2.5 rounded-lg p-2.5 text-sm shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 z-50 w-72 origin-(--transform-origin) outline-hidden",
+			className
+		)}
+		{...restProps}
+	/>
+</PopoverPortal>
diff --git a/web/src/lib/components/ui/popover/popover-description.svelte b/web/src/lib/components/ui/popover/popover-description.svelte
new file mode 100644
index 0000000..c28ab23
--- /dev/null
+++ b/web/src/lib/components/ui/popover/popover-description.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="popover-description"
+	class={cn("text-muted-foreground", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/web/src/lib/components/ui/popover/popover-header.svelte b/web/src/lib/components/ui/popover/popover-header.svelte
new file mode 100644
index 0000000..69b85b1
--- /dev/null
+++ b/web/src/lib/components/ui/popover/popover-header.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="popover-header"
+	class={cn("flex flex-col gap-0.5 text-sm", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/web/src/lib/components/ui/popover/popover-portal.svelte b/web/src/lib/components/ui/popover/popover-portal.svelte
new file mode 100644
index 0000000..dd8265f
--- /dev/null
+++ b/web/src/lib/components/ui/popover/popover-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from "bits-ui";
+
+	let { ...restProps }: PopoverPrimitive.PortalProps = $props();
+</script>
+
+<PopoverPrimitive.Portal {...restProps} />
diff --git a/web/src/lib/components/ui/popover/popover-title.svelte b/web/src/lib/components/ui/popover/popover-title.svelte
new file mode 100644
index 0000000..ee9f2ff
--- /dev/null
+++ b/web/src/lib/components/ui/popover/popover-title.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="popover-title"
+	class={cn("font-medium", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/web/src/lib/components/ui/popover/popover-trigger.svelte b/web/src/lib/components/ui/popover/popover-trigger.svelte
new file mode 100644
index 0000000..586323c
--- /dev/null
+++ b/web/src/lib/components/ui/popover/popover-trigger.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { cn } from "$lib/utils.js";
+	import { Popover as PopoverPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: PopoverPrimitive.TriggerProps = $props();
+</script>
+
+<PopoverPrimitive.Trigger
+	bind:ref
+	data-slot="popover-trigger"
+	class={cn("", className)}
+	{...restProps}
+/>
diff --git a/web/src/lib/components/ui/popover/popover.svelte b/web/src/lib/components/ui/popover/popover.svelte
new file mode 100644
index 0000000..6b1aa5f
--- /dev/null
+++ b/web/src/lib/components/ui/popover/popover.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Popover as PopoverPrimitive } from "bits-ui";
+
+	let { open = $bindable(false), ...restProps }: PopoverPrimitive.RootProps = $props();
+</script>
+
+<PopoverPrimitive.Root bind:open {...restProps} />
diff --git a/web/src/lib/components/ui/scroll-area/index.ts b/web/src/lib/components/ui/scroll-area/index.ts
index bec8204..e86a25b 100644
--- a/web/src/lib/components/ui/scroll-area/index.ts
+++ b/web/src/lib/components/ui/scroll-area/index.ts
@@ -1,2 +1,10 @@
-import Root from './scroll-area.svelte';
-export { Root, Root as ScrollArea };
+import Scrollbar from "./scroll-area-scrollbar.svelte";
+import Root from "./scroll-area.svelte";
+
+export {
+	Root,
+	Scrollbar,
+	//,
+	Root as ScrollArea,
+	Scrollbar as ScrollAreaScrollbar,
+};
diff --git a/web/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte b/web/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
new file mode 100644
index 0000000..b9518f3
--- /dev/null
+++ b/web/src/lib/components/ui/scroll-area/scroll-area-scrollbar.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		orientation = "vertical",
+		children,
+		...restProps
+	}: WithoutChild<ScrollAreaPrimitive.ScrollbarProps> = $props();
+</script>
+
+<ScrollAreaPrimitive.Scrollbar
+	bind:ref
+	data-slot="scroll-area-scrollbar"
+	data-orientation={orientation}
+	{orientation}
+	class={cn(
+		"data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent flex touch-none p-px transition-colors select-none",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ScrollAreaPrimitive.Thumb
+		data-slot="scroll-area-thumb"
+		class="rounded-full bg-border relative flex-1"
+	/>
+</ScrollAreaPrimitive.Scrollbar>
diff --git a/web/src/lib/components/ui/scroll-area/scroll-area.svelte b/web/src/lib/components/ui/scroll-area/scroll-area.svelte
index 20825c1..d4d96d0 100644
--- a/web/src/lib/components/ui/scroll-area/scroll-area.svelte
+++ b/web/src/lib/components/ui/scroll-area/scroll-area.svelte
@@ -1,12 +1,43 @@
 <script lang="ts">
-	import { cn } from '$lib/utils.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { ScrollArea as ScrollAreaPrimitive } from "bits-ui";
+	import { Scrollbar } from "./index.js";
+	import { cn, type WithoutChild } from "$lib/utils.js";
 
 	let {
+		ref = $bindable(null),
+		viewportRef = $bindable(null),
 		class: className,
+		orientation = "vertical",
+		scrollbarXClasses = "",
+		scrollbarYClasses = "",
 		children,
-		...rest
-	}: HTMLAttributes<HTMLDivElement> & { children?: import('svelte').Snippet } = $props();
+		...restProps
+	}: WithoutChild<ScrollAreaPrimitive.RootProps> & {
+		orientation?: "vertical" | "horizontal" | "both" | undefined;
+		scrollbarXClasses?: string | undefined;
+		scrollbarYClasses?: string | undefined;
+		viewportRef?: HTMLElement | null;
+	} = $props();
 </script>
 
-<div class={cn('relative overflow-auto', className)} {...rest}>{@render children?.()}</div>
+<ScrollAreaPrimitive.Root
+	bind:ref
+	data-slot="scroll-area"
+	class={cn("relative", className)}
+	{...restProps}
+>
+	<ScrollAreaPrimitive.Viewport
+		bind:ref={viewportRef}
+		data-slot="scroll-area-viewport"
+		class="cn-scroll-area-viewport focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+	>
+		{@render children?.()}
+	</ScrollAreaPrimitive.Viewport>
+	{#if orientation === "vertical" || orientation === "both"}
+		<Scrollbar orientation="vertical" class={scrollbarYClasses} />
+	{/if}
+	{#if orientation === "horizontal" || orientation === "both"}
+		<Scrollbar orientation="horizontal" class={scrollbarXClasses} />
+	{/if}
+	<ScrollAreaPrimitive.Corner />
+</ScrollAreaPrimitive.Root>
diff --git a/web/src/lib/components/ui/select/index.ts b/web/src/lib/components/ui/select/index.ts
new file mode 100644
index 0000000..4dec358
--- /dev/null
+++ b/web/src/lib/components/ui/select/index.ts
@@ -0,0 +1,37 @@
+import Root from "./select.svelte";
+import Group from "./select-group.svelte";
+import Label from "./select-label.svelte";
+import Item from "./select-item.svelte";
+import Content from "./select-content.svelte";
+import Trigger from "./select-trigger.svelte";
+import Separator from "./select-separator.svelte";
+import ScrollDownButton from "./select-scroll-down-button.svelte";
+import ScrollUpButton from "./select-scroll-up-button.svelte";
+import GroupHeading from "./select-group-heading.svelte";
+import Portal from "./select-portal.svelte";
+
+export {
+	Root,
+	Group,
+	Label,
+	Item,
+	Content,
+	Trigger,
+	Separator,
+	ScrollDownButton,
+	ScrollUpButton,
+	GroupHeading,
+	Portal,
+	//
+	Root as Select,
+	Group as SelectGroup,
+	Label as SelectLabel,
+	Item as SelectItem,
+	Content as SelectContent,
+	Trigger as SelectTrigger,
+	Separator as SelectSeparator,
+	ScrollDownButton as SelectScrollDownButton,
+	ScrollUpButton as SelectScrollUpButton,
+	GroupHeading as SelectGroupHeading,
+	Portal as SelectPortal,
+};
diff --git a/web/src/lib/components/ui/select/select-content.svelte b/web/src/lib/components/ui/select/select-content.svelte
new file mode 100644
index 0000000..bb1e2ac
--- /dev/null
+++ b/web/src/lib/components/ui/select/select-content.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import SelectPortal from "./select-portal.svelte";
+	import SelectScrollUpButton from "./select-scroll-up-button.svelte";
+	import SelectScrollDownButton from "./select-scroll-down-button.svelte";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+	import type { WithoutChildrenOrChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 4,
+		portalProps,
+		children,
+		preventScroll = true,
+		...restProps
+	}: WithoutChild<SelectPrimitive.ContentProps> & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SelectPortal>>;
+	} = $props();
+</script>
+
+<SelectPortal {...portalProps}>
+	<SelectPrimitive.Content
+		bind:ref
+		{sideOffset}
+		{preventScroll}
+		data-slot="select-content"
+		class={cn(
+			"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 relative isolate z-50 overflow-x-hidden overflow-y-auto",
+			className
+		)}
+		{...restProps}
+	>
+		<SelectScrollUpButton />
+		<SelectPrimitive.Viewport
+			class={cn(
+				"h-(--bits-select-anchor-height) w-full min-w-(--bits-select-anchor-width) scroll-my-1"
+			)}
+		>
+			{@render children?.()}
+		</SelectPrimitive.Viewport>
+		<SelectScrollDownButton />
+	</SelectPrimitive.Content>
+</SelectPortal>
diff --git a/web/src/lib/components/ui/select/select-group-heading.svelte b/web/src/lib/components/ui/select/select-group-heading.svelte
new file mode 100644
index 0000000..1fab5f0
--- /dev/null
+++ b/web/src/lib/components/ui/select/select-group-heading.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: ComponentProps<typeof SelectPrimitive.GroupHeading> = $props();
+</script>
+
+<SelectPrimitive.GroupHeading
+	bind:ref
+	data-slot="select-group-heading"
+	class={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</SelectPrimitive.GroupHeading>
diff --git a/web/src/lib/components/ui/select/select-group.svelte b/web/src/lib/components/ui/select/select-group.svelte
new file mode 100644
index 0000000..f666cb2
--- /dev/null
+++ b/web/src/lib/components/ui/select/select-group.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SelectPrimitive.GroupProps = $props();
+</script>
+
+<SelectPrimitive.Group
+	bind:ref
+	data-slot="select-group"
+	class={cn("scroll-my-1 p-1", className)}
+	{...restProps}
+/>
diff --git a/web/src/lib/components/ui/select/select-item.svelte b/web/src/lib/components/ui/select/select-item.svelte
new file mode 100644
index 0000000..32fd5ce
--- /dev/null
+++ b/web/src/lib/components/ui/select/select-item.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+	import CheckIcon from '@lucide/svelte/icons/check';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		value,
+		label,
+		children: childrenProp,
+		...restProps
+	}: WithoutChild<SelectPrimitive.ItemProps> = $props();
+</script>
+
+<SelectPrimitive.Item
+	bind:ref
+	{value}
+	data-slot="select-item"
+	class={cn(
+		"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 focus:bg-accent data-highlighted:bg-accent data-highlighted:text-accent-foreground focus:text-accent-foreground relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		className
+	)}
+	{...restProps}
+>
+	{#snippet children({ selected, highlighted })}
+		<span class="absolute end-2 flex size-3.5 items-center justify-center">
+			{#if selected}
+				<CheckIcon class="cn-select-item-indicator-icon" />
+			{/if}
+		</span>
+		{#if childrenProp}
+			{@render childrenProp({ selected, highlighted })}
+		{:else}
+			{label || value}
+		{/if}
+	{/snippet}
+</SelectPrimitive.Item>
diff --git a/web/src/lib/components/ui/select/select-label.svelte b/web/src/lib/components/ui/select/select-label.svelte
new file mode 100644
index 0000000..69bcfdf
--- /dev/null
+++ b/web/src/lib/components/ui/select/select-label.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="select-label"
+	class={cn("text-muted-foreground px-1.5 py-1 text-xs", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/web/src/lib/components/ui/select/select-portal.svelte b/web/src/lib/components/ui/select/select-portal.svelte
new file mode 100644
index 0000000..424bcdd
--- /dev/null
+++ b/web/src/lib/components/ui/select/select-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+
+	let { ...restProps }: SelectPrimitive.PortalProps = $props();
+</script>
+
+<SelectPrimitive.Portal {...restProps} />
diff --git a/web/src/lib/components/ui/select/select-scroll-down-button.svelte b/web/src/lib/components/ui/select/select-scroll-down-button.svelte
new file mode 100644
index 0000000..94f41cd
--- /dev/null
+++ b/web/src/lib/components/ui/select/select-scroll-down-button.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<SelectPrimitive.ScrollDownButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollDownButton
+	bind:ref
+	data-slot="select-scroll-down-button"
+	class={cn("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full", className)}
+	{...restProps}
+>
+	<ChevronDownIcon  />
+</SelectPrimitive.ScrollDownButton>
diff --git a/web/src/lib/components/ui/select/select-scroll-up-button.svelte b/web/src/lib/components/ui/select/select-scroll-up-button.svelte
new file mode 100644
index 0000000..035ea09
--- /dev/null
+++ b/web/src/lib/components/ui/select/select-scroll-up-button.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+	import ChevronUpIcon from '@lucide/svelte/icons/chevron-up';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<SelectPrimitive.ScrollUpButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollUpButton
+	bind:ref
+	data-slot="select-scroll-up-button"
+	class={cn("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full", className)}
+	{...restProps}
+>
+	<ChevronUpIcon  />
+</SelectPrimitive.ScrollUpButton>
diff --git a/web/src/lib/components/ui/select/select-separator.svelte b/web/src/lib/components/ui/select/select-separator.svelte
new file mode 100644
index 0000000..3b24bab
--- /dev/null
+++ b/web/src/lib/components/ui/select/select-separator.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { Separator as SeparatorPrimitive } from "bits-ui";
+	import { Separator } from "$lib/components/ui/separator/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<Separator
+	bind:ref
+	data-slot="select-separator"
+	class={cn("bg-border -mx-1 my-1 h-px pointer-events-none", className)}
+	{...restProps}
+/>
diff --git a/web/src/lib/components/ui/select/select-trigger.svelte b/web/src/lib/components/ui/select/select-trigger.svelte
new file mode 100644
index 0000000..03d06d0
--- /dev/null
+++ b/web/src/lib/components/ui/select/select-trigger.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+	import { cn, type WithoutChild } from "$lib/utils.js";
+	import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		size = "default",
+		...restProps
+	}: WithoutChild<SelectPrimitive.TriggerProps> & {
+		size?: "sm" | "default";
+	} = $props();
+</script>
+
+<SelectPrimitive.Trigger
+	bind:ref
+	data-slot="select-trigger"
+	data-size={size}
+	class={cn(
+		"border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+	<ChevronDownIcon class="text-muted-foreground size-4 pointer-events-none" />
+</SelectPrimitive.Trigger>
diff --git a/web/src/lib/components/ui/select/select.svelte b/web/src/lib/components/ui/select/select.svelte
new file mode 100644
index 0000000..05eb663
--- /dev/null
+++ b/web/src/lib/components/ui/select/select.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+
+	let {
+		open = $bindable(false),
+		value = $bindable(),
+		...restProps
+	}: SelectPrimitive.RootProps = $props();
+</script>
+
+<SelectPrimitive.Root bind:open bind:value={value as never} {...restProps} />
diff --git a/web/src/lib/components/ui/separator/index.ts b/web/src/lib/components/ui/separator/index.ts
index 18cdeac..82442d2 100644
--- a/web/src/lib/components/ui/separator/index.ts
+++ b/web/src/lib/components/ui/separator/index.ts
@@ -1,2 +1,7 @@
-import Root from './separator.svelte';
-export { Root, Root as Separator };
+import Root from "./separator.svelte";
+
+export {
+	Root,
+	//
+	Root as Separator,
+};
diff --git a/web/src/lib/components/ui/separator/separator.svelte b/web/src/lib/components/ui/separator/separator.svelte
index e42befd..5fd8a42 100644
--- a/web/src/lib/components/ui/separator/separator.svelte
+++ b/web/src/lib/components/ui/separator/separator.svelte
@@ -1,20 +1,23 @@
 <script lang="ts">
-	import { cn } from '$lib/utils.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { Separator as SeparatorPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
+		ref = $bindable(null),
 		class: className,
-		orientation = 'horizontal',
-		...rest
-	}: HTMLAttributes<HTMLDivElement> & { orientation?: 'horizontal' | 'vertical' } = $props();
+		"data-slot": dataSlot = "separator",
+		...restProps
+	}: SeparatorPrimitive.RootProps = $props();
 </script>
 
-<div
-	role="separator"
+<SeparatorPrimitive.Root
+	bind:ref
+	data-slot={dataSlot}
 	class={cn(
-		'bg-border shrink-0',
-		orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',
+		"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px",
+		// this is different in shadcn/ui but self-stretch breaks things for us
+		"data-[orientation=vertical]:h-full",
 		className
 	)}
-	{...rest}
-></div>
+	{...restProps}
+/>
diff --git a/web/src/lib/components/ui/switch/index.ts b/web/src/lib/components/ui/switch/index.ts
new file mode 100644
index 0000000..f5533db
--- /dev/null
+++ b/web/src/lib/components/ui/switch/index.ts
@@ -0,0 +1,7 @@
+import Root from "./switch.svelte";
+
+export {
+	Root,
+	//
+	Root as Switch,
+};
diff --git a/web/src/lib/components/ui/switch/switch.svelte b/web/src/lib/components/ui/switch/switch.svelte
new file mode 100644
index 0000000..6aa57d5
--- /dev/null
+++ b/web/src/lib/components/ui/switch/switch.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Switch as SwitchPrimitive } from "bits-ui";
+	import { cn, type WithoutChildrenOrChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		checked = $bindable(false),
+		size = "default",
+		...restProps
+	}: WithoutChildrenOrChild<SwitchPrimitive.RootProps> & {
+		size?: "sm" | "default";
+	} = $props();
+</script>
+
+<SwitchPrimitive.Root
+	bind:ref
+	bind:checked
+	data-slot="switch"
+	data-size={size}
+	class={cn(
+		"data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+		className
+	)}
+	{...restProps}
+>
+	<SwitchPrimitive.Thumb
+		data-slot="switch-thumb"
+		class="bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 pointer-events-none block ring-0 transition-transform rtl:data-[state=checked]:translate-x-[calc(-100%)]"
+	/>
+</SwitchPrimitive.Root>
diff --git a/web/src/lib/components/ui/table/index.ts b/web/src/lib/components/ui/table/index.ts
index d80b74d..14695c8 100644
--- a/web/src/lib/components/ui/table/index.ts
+++ b/web/src/lib/components/ui/table/index.ts
@@ -1,16 +1,28 @@
-import Root from './table.svelte';
-import Header from './table-header.svelte';
-import Body from './table-body.svelte';
-import Row from './table-row.svelte';
-import Head from './table-head.svelte';
-import Cell from './table-cell.svelte';
+import Root from "./table.svelte";
+import Body from "./table-body.svelte";
+import Caption from "./table-caption.svelte";
+import Cell from "./table-cell.svelte";
+import Footer from "./table-footer.svelte";
+import Head from "./table-head.svelte";
+import Header from "./table-header.svelte";
+import Row from "./table-row.svelte";
 
 export {
 	Root,
+	Body,
+	Caption,
+	Cell,
+	Footer,
+	Head,
+	Header,
+	Row,
+	//
 	Root as Table,
-	Header as TableHeader,
 	Body as TableBody,
-	Row as TableRow,
+	Caption as TableCaption,
+	Cell as TableCell,
+	Footer as TableFooter,
 	Head as TableHead,
-	Cell as TableCell
+	Header as TableHeader,
+	Row as TableRow,
 };
diff --git a/web/src/lib/components/ui/table/table-body.svelte b/web/src/lib/components/ui/table/table-body.svelte
index 6d8168d..935feae 100644
--- a/web/src/lib/components/ui/table/table-body.svelte
+++ b/web/src/lib/components/ui/table/table-body.svelte
@@ -1,12 +1,15 @@
 <script lang="ts">
-	import { cn } from '$lib/utils.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
+		ref = $bindable(null),
 		class: className,
 		children,
-		...rest
-	}: HTMLAttributes<HTMLTableSectionElement> & { children?: import('svelte').Snippet } = $props();
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
 </script>
 
-<tbody class={cn('[&_tr:last-child]:border-0', className)} {...rest}>{@render children?.()}</tbody>
+<tbody bind:this={ref} data-slot="table-body" class={cn("[&_tr:last-child]:border-0", className)} {...restProps}>
+	{@render children?.()}
+</tbody>
diff --git a/web/src/lib/components/ui/table/table-caption.svelte b/web/src/lib/components/ui/table/table-caption.svelte
new file mode 100644
index 0000000..4696cff
--- /dev/null
+++ b/web/src/lib/components/ui/table/table-caption.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<caption
+	bind:this={ref}
+	data-slot="table-caption"
+	class={cn("text-muted-foreground mt-4 text-sm", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</caption>
diff --git a/web/src/lib/components/ui/table/table-cell.svelte b/web/src/lib/components/ui/table/table-cell.svelte
index c6283bd..a998bf6 100644
--- a/web/src/lib/components/ui/table/table-cell.svelte
+++ b/web/src/lib/components/ui/table/table-cell.svelte
@@ -1,23 +1,15 @@
 <script lang="ts">
-	import { cn } from '$lib/utils.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLTdAttributes } from "svelte/elements";
 
 	let {
+		ref = $bindable(null),
 		class: className,
-		colspan,
-		rowspan,
 		children,
-		...rest
-	}: HTMLAttributes<HTMLTableCellElement> & {
-		colspan?: number;
-		rowspan?: number;
-		children?: import('svelte').Snippet;
-	} = $props();
+		...restProps
+	}: WithElementRef<HTMLTdAttributes> = $props();
 </script>
 
-<td
-	class={cn('p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', className)}
-	{colspan}
-	{rowspan}
-	{...rest}>{@render children?.()}</td
->
+<td bind:this={ref} data-slot="table-cell" class={cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)} {...restProps}>
+	{@render children?.()}
+</td>
diff --git a/web/src/lib/components/ui/table/table-footer.svelte b/web/src/lib/components/ui/table/table-footer.svelte
new file mode 100644
index 0000000..b9b14eb
--- /dev/null
+++ b/web/src/lib/components/ui/table/table-footer.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
+</script>
+
+<tfoot
+	bind:this={ref}
+	data-slot="table-footer"
+	class={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</tfoot>
diff --git a/web/src/lib/components/ui/table/table-head.svelte b/web/src/lib/components/ui/table/table-head.svelte
index d9eaec8..267c4e0 100644
--- a/web/src/lib/components/ui/table/table-head.svelte
+++ b/web/src/lib/components/ui/table/table-head.svelte
@@ -1,18 +1,15 @@
 <script lang="ts">
-	import { cn } from '$lib/utils.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLThAttributes } from "svelte/elements";
 
 	let {
+		ref = $bindable(null),
 		class: className,
 		children,
-		...rest
-	}: HTMLAttributes<HTMLTableCellElement> & { children?: import('svelte').Snippet } = $props();
+		...restProps
+	}: WithElementRef<HTMLThAttributes> = $props();
 </script>
 
-<th
-	class={cn(
-		'text-muted-foreground h-10 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
-		className
-	)}
-	{...rest}>{@render children?.()}</th
->
+<th bind:this={ref} data-slot="table-head" class={cn("text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)} {...restProps}>
+	{@render children?.()}
+</th>
diff --git a/web/src/lib/components/ui/table/table-header.svelte b/web/src/lib/components/ui/table/table-header.svelte
index 0814de1..f47d259 100644
--- a/web/src/lib/components/ui/table/table-header.svelte
+++ b/web/src/lib/components/ui/table/table-header.svelte
@@ -1,12 +1,20 @@
 <script lang="ts">
-	import { cn } from '$lib/utils.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
+		ref = $bindable(null),
 		class: className,
 		children,
-		...rest
-	}: HTMLAttributes<HTMLTableSectionElement> & { children?: import('svelte').Snippet } = $props();
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
 </script>
 
-<thead class={cn('[&_tr]:border-b', className)} {...rest}>{@render children?.()}</thead>
+<thead
+	bind:this={ref}
+	data-slot="table-header"
+	class={cn("[&_tr]:border-b", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</thead>
diff --git a/web/src/lib/components/ui/table/table-row.svelte b/web/src/lib/components/ui/table/table-row.svelte
index 6dc7c3d..90b4e2a 100644
--- a/web/src/lib/components/ui/table/table-row.svelte
+++ b/web/src/lib/components/ui/table/table-row.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { cn } from '$lib/utils.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
+		ref = $bindable(null),
 		class: className,
 		children,
-		...rest
-	}: HTMLAttributes<HTMLTableRowElement> & { children?: import('svelte').Snippet } = $props();
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableRowElement>> = $props();
 </script>
 
-<tr
-	class={cn('hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors', className)}
-	{...rest}>{@render children?.()}</tr
->
+<tr bind:this={ref} data-slot="table-row" class={cn("hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors", className)} {...restProps}>
+	{@render children?.()}
+</tr>
diff --git a/web/src/lib/components/ui/table/table.svelte b/web/src/lib/components/ui/table/table.svelte
index 0d629ca..d95a02e 100644
--- a/web/src/lib/components/ui/table/table.svelte
+++ b/web/src/lib/components/ui/table/table.svelte
@@ -1,14 +1,17 @@
 <script lang="ts">
-	import { cn } from '$lib/utils.js';
-	import type { HTMLAttributes } from 'svelte/elements';
+	import type { HTMLTableAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from "$lib/utils.js";
 
 	let {
+		ref = $bindable(null),
 		class: className,
 		children,
-		...rest
-	}: HTMLAttributes<HTMLTableElement> & { children?: import('svelte').Snippet } = $props();
+		...restProps
+	}: WithElementRef<HTMLTableAttributes> = $props();
 </script>
 
-<div class="relative w-full overflow-auto">
-	<table class={cn('w-full caption-bottom text-sm', className)} {...rest}>{@render children?.()}</table>
+<div data-slot="table-container" class="relative w-full overflow-x-auto">
+	<table bind:this={ref} data-slot="table" class={cn("w-full caption-bottom text-sm", className)} {...restProps}>
+		{@render children?.()}
+	</table>
 </div>
diff --git a/web/src/lib/components/ui/tabs/index.ts b/web/src/lib/components/ui/tabs/index.ts
new file mode 100644
index 0000000..31267e5
--- /dev/null
+++ b/web/src/lib/components/ui/tabs/index.ts
@@ -0,0 +1,18 @@
+import Root from "./tabs.svelte";
+import Content from "./tabs-content.svelte";
+import List, { tabsListVariants, type TabsListVariant } from "./tabs-list.svelte";
+import Trigger from "./tabs-trigger.svelte";
+
+export {
+	Root,
+	Content,
+	List,
+	Trigger,
+	tabsListVariants,
+	type TabsListVariant,
+	//
+	Root as Tabs,
+	Content as TabsContent,
+	List as TabsList,
+	Trigger as TabsTrigger,
+};
diff --git a/web/src/lib/components/ui/tabs/tabs-content.svelte b/web/src/lib/components/ui/tabs/tabs-content.svelte
new file mode 100644
index 0000000..394ab3e
--- /dev/null
+++ b/web/src/lib/components/ui/tabs/tabs-content.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: TabsPrimitive.ContentProps = $props();
+</script>
+
+<TabsPrimitive.Content
+	bind:ref
+	data-slot="tabs-content"
+	class={cn("text-sm flex-1 outline-none", className)}
+	{...restProps}
+/>
diff --git a/web/src/lib/components/ui/tabs/tabs-list.svelte b/web/src/lib/components/ui/tabs/tabs-list.svelte
new file mode 100644
index 0000000..18dce00
--- /dev/null
+++ b/web/src/lib/components/ui/tabs/tabs-list.svelte
@@ -0,0 +1,40 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const tabsListVariants = tv({
+		base: "rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
+		variants: {
+			variant: {
+				default: "cn-tabs-list-variant-default bg-muted",
+				line: "cn-tabs-list-variant-line gap-1 bg-transparent",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type TabsListVariant = VariantProps<typeof tabsListVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		variant = "default",
+		class: className,
+		...restProps
+	}: TabsPrimitive.ListProps & {
+		variant?: TabsListVariant;
+	} = $props();
+</script>
+
+<TabsPrimitive.List
+	bind:ref
+	data-slot="tabs-list"
+	data-variant={variant}
+	class={cn(tabsListVariants({ variant }), className)}
+	{...restProps}
+/>
diff --git a/web/src/lib/components/ui/tabs/tabs-trigger.svelte b/web/src/lib/components/ui/tabs/tabs-trigger.svelte
new file mode 100644
index 0000000..8a0be4a
--- /dev/null
+++ b/web/src/lib/components/ui/tabs/tabs-trigger.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: TabsPrimitive.TriggerProps = $props();
+</script>
+
+<TabsPrimitive.Trigger
+	bind:ref
+	data-slot="tabs-trigger"
+	class={cn(
+		"gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+		"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+		"data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground",
+		"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+		className
+	)}
+	{...restProps}
+/>
diff --git a/web/src/lib/components/ui/tabs/tabs.svelte b/web/src/lib/components/ui/tabs/tabs.svelte
new file mode 100644
index 0000000..bfb900d
--- /dev/null
+++ b/web/src/lib/components/ui/tabs/tabs.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(""),
+		class: className,
+		...restProps
+	}: TabsPrimitive.RootProps = $props();
+</script>
+
+<TabsPrimitive.Root
+	bind:ref
+	bind:value
+	data-slot="tabs"
+	class={cn("gap-2 group/tabs flex data-[orientation=horizontal]:flex-col", className)}
+	{...restProps}
+/>
diff --git a/web/src/lib/components/ui/textarea/index.ts b/web/src/lib/components/ui/textarea/index.ts
new file mode 100644
index 0000000..ace797a
--- /dev/null
+++ b/web/src/lib/components/ui/textarea/index.ts
@@ -0,0 +1,7 @@
+import Root from "./textarea.svelte";
+
+export {
+	Root,
+	//
+	Root as Textarea,
+};
diff --git a/web/src/lib/components/ui/textarea/textarea.svelte b/web/src/lib/components/ui/textarea/textarea.svelte
new file mode 100644
index 0000000..2e779ff
--- /dev/null
+++ b/web/src/lib/components/ui/textarea/textarea.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef, type WithoutChildren } from "$lib/utils.js";
+	import type { HTMLTextareaAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		class: className,
+		"data-slot": dataSlot = "textarea",
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLTextareaAttributes>> = $props();
+</script>
+
+<textarea
+	bind:this={ref}
+	data-slot={dataSlot}
+	class={cn(
+		"border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-3 aria-invalid:ring-3 md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50",
+		className
+	)}
+	bind:value
+	{...restProps}
+></textarea>
diff --git a/web/src/lib/components/ui/tooltip/index.ts b/web/src/lib/components/ui/tooltip/index.ts
new file mode 100644
index 0000000..1718604
--- /dev/null
+++ b/web/src/lib/components/ui/tooltip/index.ts
@@ -0,0 +1,19 @@
+import Root from "./tooltip.svelte";
+import Trigger from "./tooltip-trigger.svelte";
+import Content from "./tooltip-content.svelte";
+import Provider from "./tooltip-provider.svelte";
+import Portal from "./tooltip-portal.svelte";
+
+export {
+	Root,
+	Trigger,
+	Content,
+	Provider,
+	Portal,
+	//
+	Root as Tooltip,
+	Content as TooltipContent,
+	Trigger as TooltipTrigger,
+	Provider as TooltipProvider,
+	Portal as TooltipPortal,
+};
diff --git a/web/src/lib/components/ui/tooltip/tooltip-content.svelte b/web/src/lib/components/ui/tooltip/tooltip-content.svelte
new file mode 100644
index 0000000..0cf0694
--- /dev/null
+++ b/web/src/lib/components/ui/tooltip/tooltip-content.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+	import TooltipPortal from "./tooltip-portal.svelte";
+	import type { ComponentProps } from "svelte";
+	import type { WithoutChildrenOrChild } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		sideOffset = 0,
+		side = "top",
+		children,
+		arrowClasses,
+		portalProps,
+		...restProps
+	}: TooltipPrimitive.ContentProps & {
+		arrowClasses?: string;
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof TooltipPortal>>;
+	} = $props();
+</script>
+
+<TooltipPortal {...portalProps}>
+	<TooltipPrimitive.Content
+		bind:ref
+		data-slot="tooltip-content"
+		{sideOffset}
+		{side}
+		class={cn(
+			"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm bg-foreground text-background z-50 w-fit max-w-xs origin-(--bits-tooltip-content-transform-origin)",
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<TooltipPrimitive.Arrow>
+			{#snippet child({ props })}
+				<div
+					class={cn(
+						"size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground z-50",
+						"data-[side=top]:translate-x-1/2 data-[side=top]:translate-y-[calc(-50%+2px)]",
+						"data-[side=bottom]:-translate-x-1/2 data-[side=bottom]:-translate-y-[calc(-50%+1px)]",
+						"data-[side=right]:translate-x-[calc(50%+2px)] data-[side=right]:translate-y-1/2",
+						"data-[side=left]:-translate-y-[calc(50%-3px)]",
+						arrowClasses
+					)}
+					{...props}
+				></div>
+			{/snippet}
+		</TooltipPrimitive.Arrow>
+	</TooltipPrimitive.Content>
+</TooltipPortal>
diff --git a/web/src/lib/components/ui/tooltip/tooltip-portal.svelte b/web/src/lib/components/ui/tooltip/tooltip-portal.svelte
new file mode 100644
index 0000000..d234f7d
--- /dev/null
+++ b/web/src/lib/components/ui/tooltip/tooltip-portal.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+	let { ...restProps }: TooltipPrimitive.PortalProps = $props();
+</script>
+
+<TooltipPrimitive.Portal {...restProps} />
diff --git a/web/src/lib/components/ui/tooltip/tooltip-provider.svelte b/web/src/lib/components/ui/tooltip/tooltip-provider.svelte
new file mode 100644
index 0000000..6dba9a6
--- /dev/null
+++ b/web/src/lib/components/ui/tooltip/tooltip-provider.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+	let { delayDuration = 0, ...restProps }: TooltipPrimitive.ProviderProps = $props();
+</script>
+
+<TooltipPrimitive.Provider {delayDuration} {...restProps} />
diff --git a/web/src/lib/components/ui/tooltip/tooltip-trigger.svelte b/web/src/lib/components/ui/tooltip/tooltip-trigger.svelte
new file mode 100644
index 0000000..1acdaa4
--- /dev/null
+++ b/web/src/lib/components/ui/tooltip/tooltip-trigger.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: TooltipPrimitive.TriggerProps = $props();
+</script>
+
+<TooltipPrimitive.Trigger bind:ref data-slot="tooltip-trigger" {...restProps} />
diff --git a/web/src/lib/components/ui/tooltip/tooltip.svelte b/web/src/lib/components/ui/tooltip/tooltip.svelte
new file mode 100644
index 0000000..44bee9f
--- /dev/null
+++ b/web/src/lib/components/ui/tooltip/tooltip.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	import { Tooltip as TooltipPrimitive } from "bits-ui";
+	import TooltipProvider from "./tooltip-provider.svelte";
+
+	let { open = $bindable(false), ...restProps }: TooltipPrimitive.RootProps = $props();
+</script>
+
+<TooltipProvider>
+	<TooltipPrimitive.Root bind:open {...restProps} />
+</TooltipProvider>
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index bc28a43..887395f 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -1,97 +1,121 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { apiFetch, apiJSON } from '$lib/api/client.js';
-	import type { ModulesResponse, PeersResponse, RevisionsResponse } from '$lib/api/types.js';
+	import { apiJSON, apiFetch } from '$lib/api/client.js';
+	import type { ModulesResponse, RevisionsResponse, PeersResponse, SpeakersResponse, JobsResponse } from '$lib/api/types.js';
 	import { Badge } from '$lib/components/ui/badge/index.js';
-	import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '$lib/components/ui/card/index.js';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '$lib/components/ui/card/index.js';
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const resolve = (path: string) => path as any;
+	import CheckCircle from '@lucide/svelte/icons/check-circle';
+	import XCircle from '@lucide/svelte/icons/x-circle';
+	import Boxes from '@lucide/svelte/icons/boxes';
+	import Network from '@lucide/svelte/icons/network';
+	import Activity from '@lucide/svelte/icons/activity';
+	import Clock from '@lucide/svelte/icons/clock';
+	import ArrowRight from '@lucide/svelte/icons/arrow-right';
 
-	let health = $state<'…' | 'ok' | 'err'>('…');
-	let modulesN = $state<number | '—'>('—');
-	let revN = $state<number | '—'>('—');
-	let peersN = $state<number | '—'>('—');
+	let healthy = $state<boolean | null>(null);
+	let modules = $state(0);
+	let revisions = $state(0);
+	let peers = $state(0);
+	let speakers = $state(0);
+	let runningJobs = $state(0);
+	let loading = $state(true);
 
 	onMount(async () => {
+		loading = true;
 		try {
 			const h = await apiFetch('/v1/health');
-			health = h.ok ? 'ok' : 'err';
+			healthy = h.ok;
 		} catch {
-			health = 'err';
+			healthy = false;
 		}
 		try {
-			const m = await apiJSON<ModulesResponse>('/v1/modules');
-			modulesN = m.items?.length ?? 0;
-		} catch {
-			modulesN = '—';
-		}
-		try {
-			const r = await apiJSON<RevisionsResponse>('/v1/revisions?limit=100');
-			revN = r.items?.length ?? 0;
-		} catch {
-			revN = '—';
-		}
-		try {
-			const p = await apiJSON<PeersResponse>('/v1/peers');
-			peersN = p.items?.length ?? 0;
-		} catch {
-			peersN = '—';
-		}
+			const [m, r, p, s, j] = await Promise.all([
+				apiJSON<ModulesResponse>('/v1/modules?limit=1'),
+				apiJSON<RevisionsResponse>('/v1/revisions?limit=1'),
+				apiJSON<PeersResponse>('/v1/peers?limit=1'),
+				apiJSON<SpeakersResponse>('/v1/speakers?limit=1'),
+				apiJSON<JobsResponse>('/v1/jobs?limit=100')
+			]);
+			modules = m.has_more ? 99 : (m.items?.length ?? 0);
+			revisions = r.has_more ? 99 : (r.items?.length ?? 0);
+			peers = p.has_more ? 99 : (p.items?.length ?? 0);
+			speakers = s.has_more ? 99 : (s.items?.length ?? 0);
+			runningJobs = (j.items ?? []).filter((i) => i.status === 'running' || i.status === 'queued').length;
+		} catch {/* ignore */}
+		loading = false;
 	});
+
+	const stats = $derived([
+		{ label: 'Модули', value: modules, href: '/modules', icon: Boxes, description: 'AS, CDN, домены, IP' },
+		{ label: 'Пиры', value: peers, href: '/network', icon: Network, description: 'BGP-соседи' },
+		{ label: 'Спикеры', value: speakers, href: '/network', icon: Network, description: 'BIRD-агенты' },
+		{ label: 'Ревизии', value: revisions, href: '/operations', icon: Activity, description: 'История конфигураций' },
+		{ label: 'Активных задач', value: runningJobs, href: '/operations', icon: Clock, description: 'Выполняются сейчас' },
+	]);
 </script>
 
-<div class="mx-auto max-w-4xl space-y-6">
+<div class="space-y-6">
 	<div>
 		<h1 class="text-2xl font-semibold tracking-tight">Обзор</h1>
-		<p class="text-muted-foreground mt-1 text-sm">
-			Краткая сводка по API. Укажите токен в разделе «Настройки», если запросы к защищённым путям
-			возвращают 401.
-		</p>
+		<p class="text-muted-foreground mt-1 text-sm">Состояние EvoBGP control plane.</p>
 	</div>
 
-	<div class="grid gap-4 sm:grid-cols-2">
-		<Card>
-			<CardHeader class="pb-2">
-				<CardTitle class="text-base">Health</CardTitle>
-				<CardDescription>GET /v1/health</CardDescription>
-			</CardHeader>
-			<CardContent>
-				{#if health === 'ok'}
-					<Badge>ok</Badge>
-				{:else if health === 'err'}
-					<Badge variant="destructive">недоступно</Badge>
-				{:else}
-					<span class="text-muted-foreground text-sm">проверка…</span>
-				{/if}
-			</CardContent>
-		</Card>
+	<!-- Health -->
+	<Card>
+		<CardContent class="flex items-center gap-3 py-4">
+			{#if healthy === null}
+				<div class="bg-muted size-3 animate-pulse rounded-full"></div>
+				<span class="text-muted-foreground text-sm">Проверка…</span>
+			{:else if healthy}
+				<CheckCircle class="size-5 text-green-500" />
+				<span class="font-medium text-green-700 dark:text-green-400">API работает</span>
+			{:else}
+				<XCircle class="size-5 text-red-500" />
+				<span class="font-medium text-red-700 dark:text-red-400">API недоступен</span>
+			{/if}
+		</CardContent>
+	</Card>
 
-		<Card>
-			<CardHeader class="pb-2">
-				<CardTitle class="text-base">Модули</CardTitle>
-				<CardDescription>GET /v1/modules</CardDescription>
-			</CardHeader>
-			<CardContent>
-				<p class="text-2xl font-semibold">{modulesN}</p>
-			</CardContent>
-		</Card>
-
-		<Card>
-			<CardHeader class="pb-2">
-				<CardTitle class="text-base">Ревизии</CardTitle>
-				<CardDescription>GET /v1/revisions</CardDescription>
-			</CardHeader>
-			<CardContent>
-				<p class="text-2xl font-semibold">{revN}</p>
-			</CardContent>
-		</Card>
-
-		<Card>
-			<CardHeader class="pb-2">
-				<CardTitle class="text-base">Пиры</CardTitle>
-				<CardDescription>GET /v1/peers</CardDescription>
-			</CardHeader>
-			<CardContent>
-				<p class="text-2xl font-semibold">{peersN}</p>
-			</CardContent>
-		</Card>
+	<!-- Stats grid -->
+	<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+		{#each stats as stat (stat.label)}
+			{@const Icon = stat.icon}
+			<Card class="hover:border-primary/40 transition-colors">
+				<CardHeader class="pb-2">
+					<div class="flex items-center justify-between">
+						<CardDescription class="flex items-center gap-1.5">
+							<Icon class="size-4" />
+							{stat.label}
+						</CardDescription>
+						<Button variant="ghost" size="icon-sm" href={resolve(stat.href)}>
+							<ArrowRight class="size-3.5" />
+						</Button>
+					</div>
+					<CardTitle class="text-3xl font-bold">
+						{loading ? '—' : stat.value}
+					</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<p class="text-muted-foreground text-xs">{stat.description}</p>
+				</CardContent>
+			</Card>
+		{/each}
 	</div>
+
+	<!-- Quick links -->
+	<Card>
+		<CardHeader>
+			<CardTitle class="text-base">Быстрые действия</CardTitle>
+		</CardHeader>
+		<CardContent class="flex flex-wrap gap-2">
+			<Button variant="outline" size="sm" href={resolve('/modules')}>Создать модуль</Button>
+			<Button variant="outline" size="sm" href={resolve('/directories')}>Добавить community</Button>
+			<Button variant="outline" size="sm" href={resolve('/network')}>Добавить пира</Button>
+			<Button variant="outline" size="sm" href={resolve('/operations')}>Деплой (Apply)</Button>
+			<Button variant="outline" size="sm" href={resolve('/monitoring')}>Мониторинг</Button>
+		</CardContent>
+	</Card>
 </div>
diff --git a/web/src/routes/directories/+page.svelte b/web/src/routes/directories/+page.svelte
new file mode 100644
index 0000000..3d0779a
--- /dev/null
+++ b/web/src/routes/directories/+page.svelte
@@ -0,0 +1,372 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { apiJSON, apiMutate } from '$lib/api/client.js';
+	import type {
+		BgpCommunity,
+		BgpCommunityCreate,
+		CommunitiesResponse,
+		DohProfile,
+		DohProfileCreate,
+		DohProfilesResponse
+	} 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, CardDescription } 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 { Tabs, TabsContent, TabsList, TabsTrigger } from '$lib/components/ui/tabs/index.js';
+	import {
+		Dialog,
+		DialogContent,
+		DialogHeader,
+		DialogTitle,
+		DialogFooter,
+		DialogDescription
+	} from '$lib/components/ui/dialog/index.js';
+	import {
+		AlertDialog,
+		AlertDialogContent,
+		AlertDialogHeader,
+		AlertDialogTitle,
+		AlertDialogDescription,
+		AlertDialogFooter,
+		AlertDialogCancel,
+		AlertDialogAction
+	} from '$lib/components/ui/alert-dialog/index.js';
+	import {
+		Table,
+		TableBody,
+		TableCell,
+		TableHead,
+		TableHeader,
+		TableRow
+	} from '$lib/components/ui/table/index.js';
+	import { toast } from 'svelte-sonner';
+	import Plus from '@lucide/svelte/icons/plus';
+	import Pencil from '@lucide/svelte/icons/pencil';
+	import Trash2 from '@lucide/svelte/icons/trash-2';
+	import RefreshCw from '@lucide/svelte/icons/refresh-cw';
+
+	// --- Communities ---
+	let communities = $state<BgpCommunity[]>([]);
+	let commLoading = $state(false);
+	let commDialog = $state(false);
+	let commEdit = $state<BgpCommunity | null>(null);
+	let commForm = $state<BgpCommunityCreate>({ name: '', kind: '' });
+	let commSaving = $state(false);
+	let commDeleteTarget = $state<BgpCommunity | null>(null);
+
+	// --- DoH Profiles ---
+	let dohProfiles = $state<DohProfile[]>([]);
+	let dohLoading = $state(false);
+	let dohDialog = $state(false);
+	let dohEdit = $state<DohProfile | null>(null);
+	let dohForm = $state<DohProfileCreate & { timeout_ms?: number | null }>({ url: '', timeout_ms: null, vault_secret_ref: null });
+	let dohSaving = $state(false);
+	let dohDeleteTarget = $state<DohProfile | null>(null);
+
+	async function loadComm() {
+		commLoading = true;
+		try {
+			const r = await apiJSON<CommunitiesResponse>('/v1/communities?limit=200');
+			communities = r.items;
+		} catch (e) {
+			toast.error(e instanceof Error ? e.message : String(e));
+		} finally {
+			commLoading = false;
+		}
+	}
+
+	async function loadDoh() {
+		dohLoading = true;
+		try {
+			const r = await apiJSON<DohProfilesResponse>('/v1/doh-profiles?limit=200');
+			dohProfiles = r.items;
+		} catch (e) {
+			toast.error(e instanceof Error ? e.message : String(e));
+		} finally {
+			dohLoading = false;
+		}
+	}
+
+	onMount(() => { loadComm(); loadDoh(); });
+
+	// --- Community actions ---
+	function openCommCreate() {
+		commEdit = null;
+		commForm = { name: '', kind: '' };
+		commDialog = true;
+	}
+	function openCommEdit(c: BgpCommunity) {
+		commEdit = c;
+		commForm = { name: c.name, kind: c.kind ?? '' };
+		commDialog = true;
+	}
+	async function saveComm() {
+		if (!commForm.name.trim()) { toast.error('Укажите название'); return; }
+		commSaving = true;
+		try {
+			const body = { ...commForm, kind: commForm.kind || undefined };
+			if (commEdit) {
+				await apiMutate(`/v1/communities/${commEdit.id}`, 'PATCH', body);
+				toast.success('Community обновлена');
+			} else {
+				await apiMutate('/v1/communities', 'POST', body);
+				toast.success('Community создана');
+			}
+			commDialog = false;
+			await loadComm();
+		} catch (e) {
+			toast.error(e instanceof Error ? e.message : String(e));
+		} finally {
+			commSaving = false;
+		}
+	}
+	async function deleteComm() {
+		if (!commDeleteTarget) return;
+		try {
+			await apiMutate(`/v1/communities/${commDeleteTarget.id}`, 'DELETE', undefined, { idempotent: false });
+			toast.success('Удалено');
+			commDeleteTarget = null;
+			await loadComm();
+		} catch (e) {
+			toast.error(e instanceof Error ? e.message : String(e));
+		}
+	}
+
+	// --- DoH actions ---
+	function openDohCreate() {
+		dohEdit = null;
+		dohForm = { url: '', timeout_ms: null, vault_secret_ref: null };
+		dohDialog = true;
+	}
+	function openDohEdit(d: DohProfile) {
+		dohEdit = d;
+		dohForm = { url: d.url, timeout_ms: d.timeout_ms, vault_secret_ref: d.vault_secret_ref };
+		dohDialog = true;
+	}
+	async function saveDoh() {
+		if (!dohForm.url.trim()) { toast.error('Укажите URL'); return; }
+		dohSaving = true;
+		try {
+			if (dohEdit) {
+				await apiMutate(`/v1/doh-profiles/${dohEdit.id}`, 'PATCH', dohForm);
+				toast.success('DoH профиль обновлён');
+			} else {
+				await apiMutate('/v1/doh-profiles', 'POST', dohForm);
+				toast.success('DoH профиль создан');
+			}
+			dohDialog = false;
+			await loadDoh();
+		} catch (e) {
+			toast.error(e instanceof Error ? e.message : String(e));
+		} finally {
+			dohSaving = false;
+		}
+	}
+	async function deleteDoh() {
+		if (!dohDeleteTarget) return;
+		try {
+			await apiMutate(`/v1/doh-profiles/${dohDeleteTarget.id}`, 'DELETE', undefined, { idempotent: false });
+			toast.success('Удалено');
+			dohDeleteTarget = null;
+			await loadDoh();
+		} catch (e) {
+			toast.error(e instanceof Error ? e.message : String(e));
+		}
+	}
+</script>
+
+<div class="space-y-6">
+	<div>
+		<h1 class="text-2xl font-semibold tracking-tight">Справочники</h1>
+		<p class="text-muted-foreground mt-1 text-sm">BGP Communities и DoH-профили для резолвинга доменов.</p>
+	</div>
+
+	<Tabs value="communities">
+		<TabsList>
+			<TabsTrigger value="communities">Communities</TabsTrigger>
+			<TabsTrigger value="doh">DoH профили</TabsTrigger>
+		</TabsList>
+
+		<!-- Communities -->
+		<TabsContent value="communities" class="mt-4">
+			<Card>
+				<CardHeader class="flex flex-row items-center justify-between pb-2">
+					<div>
+						<CardTitle class="text-base">BGP Communities</CardTitle>
+						<CardDescription>Используются для тегирования префиксов</CardDescription>
+					</div>
+					<div class="flex gap-2">
+						<Button variant="outline" size="sm" onclick={loadComm} disabled={commLoading}>
+							<RefreshCw class={commLoading ? 'animate-spin' : ''} />
+						</Button>
+						<Button size="sm" onclick={openCommCreate}><Plus />Добавить</Button>
+					</div>
+				</CardHeader>
+				<CardContent class="p-0">
+					<Table>
+						<TableHeader>
+							<TableRow>
+								<TableHead>Название</TableHead>
+								<TableHead>Вид</TableHead>
+								<TableHead>ID</TableHead>
+								<TableHead class="w-20"></TableHead>
+							</TableRow>
+						</TableHeader>
+						<TableBody>
+							{#each communities as c (c.id)}
+								<TableRow>
+									<TableCell class="font-medium">{c.name}</TableCell>
+									<TableCell>
+										{#if c.kind}
+											<Badge variant="outline">{c.kind}</Badge>
+										{:else}
+											<span class="text-muted-foreground text-sm">—</span>
+										{/if}
+									</TableCell>
+									<TableCell class="font-mono text-xs text-muted-foreground">{c.id}</TableCell>
+									<TableCell>
+										<div class="flex gap-1">
+											<Button variant="ghost" size="icon-sm" onclick={() => openCommEdit(c)}><Pencil class="size-3.5" /></Button>
+											<Button variant="ghost" size="icon-sm" class="text-destructive" onclick={() => (commDeleteTarget = c)}><Trash2 class="size-3.5" /></Button>
+										</div>
+									</TableCell>
+								</TableRow>
+							{:else}
+								<TableRow>
+									<TableCell colspan={4} class="text-muted-foreground text-center py-8">
+										{commLoading ? 'Загрузка…' : 'Нет communities. Создайте первую.'}
+									</TableCell>
+								</TableRow>
+							{/each}
+						</TableBody>
+					</Table>
+				</CardContent>
+			</Card>
+		</TabsContent>
+
+		<!-- DoH Profiles -->
+		<TabsContent value="doh" class="mt-4">
+			<Card>
+				<CardHeader class="flex flex-row items-center justify-between pb-2">
+					<div>
+						<CardTitle class="text-base">DoH профили</CardTitle>
+						<CardDescription>DNS-over-HTTPS серверы для резолвинга доменных модулей</CardDescription>
+					</div>
+					<div class="flex gap-2">
+						<Button variant="outline" size="sm" onclick={loadDoh} disabled={dohLoading}>
+							<RefreshCw class={dohLoading ? 'animate-spin' : ''} />
+						</Button>
+						<Button size="sm" onclick={openDohCreate}><Plus />Добавить</Button>
+					</div>
+				</CardHeader>
+				<CardContent class="p-0">
+					<Table>
+						<TableHeader>
+							<TableRow>
+								<TableHead>URL</TableHead>
+								<TableHead>Таймаут (мс)</TableHead>
+								<TableHead>ID</TableHead>
+								<TableHead class="w-20"></TableHead>
+							</TableRow>
+						</TableHeader>
+						<TableBody>
+							{#each dohProfiles as d (d.id)}
+								<TableRow>
+									<TableCell class="font-mono text-sm">{d.url}</TableCell>
+									<TableCell class="text-muted-foreground">{d.timeout_ms ?? '—'}</TableCell>
+									<TableCell class="font-mono text-xs text-muted-foreground">{d.id}</TableCell>
+									<TableCell>
+										<div class="flex gap-1">
+											<Button variant="ghost" size="icon-sm" onclick={() => openDohEdit(d)}><Pencil class="size-3.5" /></Button>
+											<Button variant="ghost" size="icon-sm" class="text-destructive" onclick={() => (dohDeleteTarget = d)}><Trash2 class="size-3.5" /></Button>
+										</div>
+									</TableCell>
+								</TableRow>
+							{:else}
+								<TableRow>
+									<TableCell colspan={4} class="text-muted-foreground text-center py-8">
+										{dohLoading ? 'Загрузка…' : 'Нет DoH профилей.'}
+									</TableCell>
+								</TableRow>
+							{/each}
+						</TableBody>
+					</Table>
+				</CardContent>
+			</Card>
+		</TabsContent>
+	</Tabs>
+</div>
+
+<!-- Community Dialog -->
+<Dialog bind:open={commDialog}>
+	<DialogContent class="sm:max-w-sm">
+		<DialogHeader>
+			<DialogTitle>{commEdit ? 'Редактировать' : 'Новая'} community</DialogTitle>
+		</DialogHeader>
+		<div class="space-y-4 py-2">
+			<div class="space-y-1.5">
+				<Label for="c-name">Название</Label>
+				<Input id="c-name" bind:value={commForm.name} placeholder="rt:65000:100" />
+			</div>
+			<div class="space-y-1.5">
+				<Label for="c-kind">Вид (опционально)</Label>
+				<Input id="c-kind" bind:value={commForm.kind} placeholder="large / standard" />
+			</div>
+		</div>
+		<DialogFooter>
+			<Button variant="outline" onclick={() => (commDialog = false)}>Отмена</Button>
+			<Button onclick={saveComm} disabled={commSaving}>{commSaving ? 'Сохранение…' : (commEdit ? 'Сохранить' : 'Создать')}</Button>
+		</DialogFooter>
+	</DialogContent>
+</Dialog>
+
+<AlertDialog open={!!commDeleteTarget} onOpenChange={(v) => { if (!v) commDeleteTarget = null; }}>
+	<AlertDialogContent>
+		<AlertDialogHeader>
+			<AlertDialogTitle>Удалить community «{commDeleteTarget?.name}»?</AlertDialogTitle>
+			<AlertDialogDescription>Это приведёт к удалению привязки во всех модулях.</AlertDialogDescription>
+		</AlertDialogHeader>
+		<AlertDialogFooter>
+			<AlertDialogCancel onclick={() => (commDeleteTarget = null)}>Отмена</AlertDialogCancel>
+			<AlertDialogAction onclick={deleteComm}>Удалить</AlertDialogAction>
+		</AlertDialogFooter>
+	</AlertDialogContent>
+</AlertDialog>
+
+<!-- DoH Dialog -->
+<Dialog bind:open={dohDialog}>
+	<DialogContent class="sm:max-w-sm">
+		<DialogHeader>
+			<DialogTitle>{dohEdit ? 'Редактировать' : 'Новый'} DoH профиль</DialogTitle>
+		</DialogHeader>
+		<div class="space-y-4 py-2">
+			<div class="space-y-1.5">
+				<Label for="doh-url">URL</Label>
+				<Input id="doh-url" bind:value={dohForm.url} placeholder="https://dns.google/dns-query" />
+			</div>
+			<div class="space-y-1.5">
+				<Label for="doh-timeout">Таймаут (мс)</Label>
+				<Input id="doh-timeout" type="number" bind:value={dohForm.timeout_ms} placeholder="5000" />
+			</div>
+		</div>
+		<DialogFooter>
+			<Button variant="outline" onclick={() => (dohDialog = false)}>Отмена</Button>
+			<Button onclick={saveDoh} disabled={dohSaving}>{dohSaving ? 'Сохранение…' : (dohEdit ? 'Сохранить' : 'Создать')}</Button>
+		</DialogFooter>
+	</DialogContent>
+</Dialog>
+
+<AlertDialog open={!!dohDeleteTarget} onOpenChange={(v) => { if (!v) dohDeleteTarget = null; }}>
+	<AlertDialogContent>
+		<AlertDialogHeader>
+			<AlertDialogTitle>Удалить DoH профиль?</AlertDialogTitle>
+			<AlertDialogDescription>{dohDeleteTarget?.url}</AlertDialogDescription>
+		</AlertDialogHeader>
+		<AlertDialogFooter>
+			<AlertDialogCancel onclick={() => (dohDeleteTarget = null)}>Отмена</AlertDialogCancel>
+			<AlertDialogAction onclick={deleteDoh}>Удалить</AlertDialogAction>
+		</AlertDialogFooter>
+	</AlertDialogContent>
+</AlertDialog>
diff --git a/web/src/routes/modules/+page.svelte b/web/src/routes/modules/+page.svelte
index 0f5cd5a..2ea48db 100644
--- a/web/src/routes/modules/+page.svelte
+++ b/web/src/routes/modules/+page.svelte
@@ -1,10 +1,27 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { apiJSON } from '$lib/api/client.js';
-	import type { ModuleRow, ModulesResponse } from '$lib/api/types.js';
+	import { apiJSON, apiMutate } from '$lib/api/client.js';
+	import type { ModuleRow, ModulesResponse, ModuleCreate } from '$lib/api/types.js';
 	import { Badge } from '$lib/components/ui/badge/index.js';
-	import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '$lib/components/ui/card/index.js';
-	import { ScrollArea } from '$lib/components/ui/scroll-area/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,
+		DialogContent,
+		DialogHeader,
+		DialogTitle,
+		DialogFooter,
+		DialogDescription
+	} from '$lib/components/ui/dialog/index.js';
+	import {
+		Select,
+		SelectContent,
+		SelectItem,
+		SelectTrigger,
+	} from '$lib/components/ui/select/index.js';
+	import { Switch } from '$lib/components/ui/switch/index.js';
 	import {
 		Table,
 		TableBody,
@@ -14,71 +31,185 @@
 		TableRow
 	} from '$lib/components/ui/table/index.js';
 	import { toast } from 'svelte-sonner';
+	import { resolve } from '$app/paths';
+	import Plus from '@lucide/svelte/icons/plus';
+	import RefreshCw from '@lucide/svelte/icons/refresh-cw';
+	import ExternalLink from '@lucide/svelte/icons/external-link';
 
 	let rows = $state<ModuleRow[]>([]);
-	let err = $state<string | null>(null);
+	let loading = $state(false);
+	let dialogOpen = $state(false);
+	let saving = $state(false);
 
-	onMount(async () => {
+	let form = $state<ModuleCreate>({
+		type: 'AS_PREFIXES',
+		name: '',
+		enabled: true,
+		priority: 0
+	});
+
+	const moduleTypes = [
+		{ value: 'AS_PREFIXES', label: 'AS Prefixes' },
+		{ value: 'CDN_CIDRS', label: 'CDN CIDRs' },
+		{ value: 'DOMAINS', label: 'Домены' },
+		{ value: 'IP_RANGES', label: 'IP Ranges' }
+	] as const;
+
+	async function load() {
+		loading = true;
 		try {
-			const m = await apiJSON<ModulesResponse>('/v1/modules');
+			const m = await apiJSON<ModulesResponse>('/v1/modules?limit=200');
 			rows = m.items ?? [];
 		} catch (e) {
-			err = e instanceof Error ? e.message : String(e);
-			toast.error(err);
+			toast.error(e instanceof Error ? e.message : String(e));
+		} finally {
+			loading = false;
 		}
-	});
+	}
+
+	onMount(load);
+
+	async function create() {
+		if (!form.name.trim()) {
+			toast.error('Укажите название модуля');
+			return;
+		}
+		saving = true;
+		try {
+			await apiMutate('/v1/modules', 'POST', form);
+			toast.success('Модуль создан');
+			dialogOpen = false;
+			form = { type: 'AS_PREFIXES', name: '', enabled: true, priority: 0 };
+			await load();
+		} catch (e) {
+			toast.error(e instanceof Error ? e.message : String(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';
+		}
+	}
 </script>
 
-<div class="space-y-4">
-	<div>
-		<h1 class="text-2xl font-semibold tracking-tight">Модули префиксов</h1>
-		<p class="text-muted-foreground mt-1 text-sm">Список экземпляров модулей tenant (из API).</p>
+<div class="space-y-6">
+	<div class="flex items-start justify-between">
+		<div>
+			<h1 class="text-2xl font-semibold tracking-tight">Модули префиксов</h1>
+			<p class="text-muted-foreground mt-1 text-sm">Управление модулями — AS, CDN, домены, IP-диапазоны.</p>
+		</div>
+		<div class="flex gap-2">
+			<Button variant="outline" size="sm" onclick={load} disabled={loading}>
+				<RefreshCw class={loading ? 'animate-spin' : ''} />
+				Обновить
+			</Button>
+			<Button size="sm" onclick={() => (dialogOpen = true)}>
+				<Plus />
+				Новый модуль
+			</Button>
+		</div>
 	</div>
 
 	<Card>
-		<CardHeader>
-			<CardTitle class="text-base">Модули</CardTitle>
-			<CardDescription>GET /v1/modules</CardDescription>
-		</CardHeader>
-		<CardContent>
-			{#if err}
-				<p class="text-destructive text-sm">{err}</p>
-			{:else}
-				<ScrollArea class="max-h-[min(70vh,560px)]">
-					<Table>
-						<TableHeader>
-							<TableRow>
-								<TableHead>Имя</TableHead>
-								<TableHead>Тип</TableHead>
-								<TableHead>Приоритет</TableHead>
-								<TableHead>Статус</TableHead>
-							</TableRow>
-						</TableHeader>
-						<TableBody>
-							{#each rows as m}
-								<TableRow>
-									<TableCell class="font-mono text-xs">{m.name}</TableCell>
-									<TableCell>
-										<Badge variant="outline">{m.type}</Badge>
-									</TableCell>
-									<TableCell>{m.priority}</TableCell>
-									<TableCell>
-										{#if m.enabled}
-											<Badge>вкл</Badge>
-										{:else}
-											<Badge variant="secondary">выкл</Badge>
-										{/if}
-									</TableCell>
-								</TableRow>
-							{:else}
-								<TableRow>
-									<TableCell colspan={4} class="text-muted-foreground">Нет данных</TableCell>
-								</TableRow>
-							{/each}
-						</TableBody>
-					</Table>
-				</ScrollArea>
-			{/if}
+		<CardContent class="p-0">
+			<Table>
+				<TableHeader>
+					<TableRow>
+						<TableHead>Название</TableHead>
+						<TableHead>Тип</TableHead>
+						<TableHead>Приоритет</TableHead>
+						<TableHead>Интервал</TableHead>
+						<TableHead>Статус</TableHead>
+						<TableHead class="w-16"></TableHead>
+					</TableRow>
+				</TableHeader>
+				<TableBody>
+					{#each rows as m (m.id)}
+						<TableRow>
+							<TableCell class="font-medium">{m.name}</TableCell>
+							<TableCell>
+								<Badge variant={typeBadgeVariant(m.type)}>{m.type}</Badge>
+							</TableCell>
+							<TableCell class="text-muted-foreground">{m.priority}</TableCell>
+							<TableCell class="text-muted-foreground font-mono text-xs">
+								{m.cron_expr ?? (m.refresh_interval_sec ? `${m.refresh_interval_sec}с` : '—')}
+							</TableCell>
+							<TableCell>
+								{#if m.enabled}
+									<Badge variant="default" class="text-xs">вкл</Badge>
+								{:else}
+									<Badge variant="secondary" class="text-xs">выкл</Badge>
+								{/if}
+							</TableCell>
+							<TableCell>
+								<Button variant="ghost" size="icon-sm" href={resolve(`/modules/${m.id}`)}>
+									<ExternalLink class="size-3.5" />
+								</Button>
+							</TableCell>
+						</TableRow>
+					{:else}
+						<TableRow>
+							<TableCell colspan={6} class="text-muted-foreground text-center py-8">
+								{loading ? 'Загрузка…' : 'Нет модулей. Создайте первый.'}
+							</TableCell>
+						</TableRow>
+					{/each}
+				</TableBody>
+			</Table>
 		</CardContent>
 	</Card>
 </div>
+
+<!-- Create Dialog -->
+<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}
+							<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 items-center gap-3">
+				<Switch id="m-enabled" bind:checked={form.enabled} />
+				<Label for="m-enabled">Включён</Label>
+			</div>
+		</div>
+		<DialogFooter>
+			<Button variant="outline" onclick={() => (dialogOpen = false)}>Отмена</Button>
+			<Button onclick={create} disabled={saving}>{saving ? 'Создание…' : 'Создать'}</Button>
+		</DialogFooter>
+	</DialogContent>
+</Dialog>
diff --git a/web/src/routes/modules/[moduleId]/+page.svelte b/web/src/routes/modules/[moduleId]/+page.svelte
new file mode 100644
index 0000000..e8a70e1
--- /dev/null
+++ b/web/src/routes/modules/[moduleId]/+page.svelte
@@ -0,0 +1,909 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { page } from '$app/state';
+	import { goto } from '$app/navigation';
+	import { resolve } from '$app/paths';
+	import { apiJSON, apiMutate } from '$lib/api/client.js';
+	import type {
+		ModuleRow,
+		ModulePatch,
+		AsEntry,
+		AsEntryCreate,
+		AsEntriesResponse,
+		CdnSource,
+		CdnSourceCreate,
+		CdnSourcesResponse,
+		DomainEntry,
+		DomainEntryCreate,
+		DomainEntriesResponse,
+		IpRangeEntry,
+		IpRangeEntryCreate,
+		IpRangeEntriesResponse,
+		BgpCommunity,
+		CommunitiesResponse,
+		DohProfile,
+		DohProfilesResponse
+	} 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, CardDescription } 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 { Tabs, TabsContent, TabsList, TabsTrigger } from '$lib/components/ui/tabs/index.js';
+	import {
+		Dialog,
+		DialogContent,
+		DialogHeader,
+		DialogTitle,
+		DialogFooter,
+		DialogDescription
+	} from '$lib/components/ui/dialog/index.js';
+	import {
+		AlertDialog,
+		AlertDialogContent,
+		AlertDialogHeader,
+		AlertDialogTitle,
+		AlertDialogDescription,
+		AlertDialogFooter,
+		AlertDialogCancel,
+		AlertDialogAction
+	} from '$lib/components/ui/alert-dialog/index.js';
+	import {
+		Select,
+		SelectContent,
+		SelectItem,
+		SelectTrigger,
+	} from '$lib/components/ui/select/index.js';
+	import { Switch } from '$lib/components/ui/switch/index.js';
+	import {
+		Table,
+		TableBody,
+		TableCell,
+		TableHead,
+		TableHeader,
+		TableRow
+	} from '$lib/components/ui/table/index.js';
+	import { toast } from 'svelte-sonner';
+	import ArrowLeft from '@lucide/svelte/icons/arrow-left';
+	import Plus from '@lucide/svelte/icons/plus';
+	import Pencil from '@lucide/svelte/icons/pencil';
+	import Trash2 from '@lucide/svelte/icons/trash-2';
+	import RefreshCw from '@lucide/svelte/icons/refresh-cw';
+	import Save from '@lucide/svelte/icons/save';
+
+	const moduleId = $derived(page.params.moduleId);
+
+	let mod = $state<ModuleRow | null>(null);
+	let communities = $state<BgpCommunity[]>([]);
+	let dohProfiles = $state<DohProfile[]>([]);
+	let loadingMod = $state(true);
+
+	// AS entries
+	let asEntries = $state<AsEntry[]>([]);
+	let asDialog = $state(false);
+	let asEdit = $state<AsEntry | null>(null);
+	let asForm = $state<AsEntryCreate>({ asn: undefined, prefix: undefined, community_id: null });
+	let asSaving = $state(false);
+	let asDeleteTarget = $state<AsEntry | null>(null);
+
+	// CDN sources
+	let cdnSources = $state<CdnSource[]>([]);
+	let cdnDialog = $state(false);
+	let cdnEdit = $state<CdnSource | null>(null);
+	let cdnForm = $state<CdnSourceCreate & { refresh_interval_sec?: number | null }>({ url: '', source_kind: '', community_id: null });
+	let cdnSaving = $state(false);
+	let cdnDeleteTarget = $state<CdnSource | null>(null);
+
+	// Domain entries
+	let domainEntries = $state<DomainEntry[]>([]);
+	let domainDialog = $state(false);
+	let domainEdit = $state<DomainEntry | null>(null);
+	let domainForm = $state<DomainEntryCreate>({ fqdn: '', community_id: null });
+	let domainSaving = $state(false);
+	let domainDeleteTarget = $state<DomainEntry | null>(null);
+
+	// IP Range entries
+	let ipEntries = $state<IpRangeEntry[]>([]);
+	let ipDialog = $state(false);
+	let ipEdit = $state<IpRangeEntry | null>(null);
+	let ipForm = $state<IpRangeEntryCreate>({ prefix: '', community_id: '' });
+	let ipSaving = $state(false);
+	let ipDeleteTarget = $state<IpRangeEntry | null>(null);
+
+	// Module edit
+	let editDialog = $state(false);
+	let editForm = $state<ModulePatch>({});
+	let editSaving = $state(false);
+	let deleteModDialog = $state(false);
+	let deletingMod = $state(false);
+
+	// Refresh
+	let refreshing = $state(false);
+
+	async function loadMod() {
+		loadingMod = true;
+		try {
+			mod = await apiJSON<ModuleRow>(`/v1/modules/${moduleId}`);
+			await loadEntries();
+		} catch (e) {
+			toast.error(e instanceof Error ? e.message : String(e));
+		} finally {
+			loadingMod = false;
+		}
+	}
+
+	async function loadEntries() {
+		if (!mod) return;
+		try {
+			[communities, dohProfiles] = await Promise.all([
+				apiJSON<CommunitiesResponse>('/v1/communities?limit=200').then((r) => r.items),
+				apiJSON<DohProfilesResponse>('/v1/doh-profiles?limit=200').then((r) => r.items)
+			]);
+		} catch { /* non-critical */ }
+
+		const type = mod.type;
+		try {
+			if (type === 'AS_PREFIXES') {
+				const r = await apiJSON<AsEntriesResponse>(`/v1/modules/${moduleId}/as-entries?limit=500`);
+				asEntries = r.items;
+			} else if (type === 'CDN_CIDRS') {
+				const r = await apiJSON<CdnSourcesResponse>(`/v1/modules/${moduleId}/cdn-sources?limit=200`);
+				cdnSources = r.items;
+			} else if (type === 'DOMAINS') {
+				const r = await apiJSON<DomainEntriesResponse>(`/v1/modules/${moduleId}/domain-entries?limit=500`);
+				domainEntries = r.items;
+			} else if (type === 'IP_RANGES') {
+				const r = await apiJSON<IpRangeEntriesResponse>(`/v1/modules/${moduleId}/ip-range-entries?limit=500`);
+				ipEntries = r.items;
+			}
+		} catch (e) {
+			toast.error(e instanceof Error ? e.message : String(e));
+		}
+	}
+
+	onMount(loadMod);
+
+	// --- Module Actions ---
+	async function openEditMod() {
+		if (!mod) return;
+		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_id: mod.doh_profile_id
+		};
+		editDialog = true;
+	}
+
+	async function saveMod() {
+		editSaving = true;
+		try {
+			mod = await apiMutate<ModuleRow>(`/v1/modules/${moduleId}`, 'PATCH', editForm);
+			toast.success('Модуль обновлён');
+			editDialog = false;
+		} catch (e) {
+			toast.error(e instanceof Error ? e.message : String(e));
+		} finally {
+			editSaving = false;
+		}
+	}
+
+	async function deleteMod() {
+		deletingMod = true;
+		try {
+			await apiMutate(`/v1/modules/${moduleId}`, 'DELETE', undefined, { idempotent: false });
+			toast.success('Модуль удалён');
+			goto(resolve('/modules'));
+		} catch (e) {
+			toast.error(e instanceof Error ? e.message : String(e));
+			deletingMod = false;
+		}
+	}
+
+	async function refreshMod() {
+		refreshing = true;
+		try {
+			const res = await fetch(`/v1/modules/${moduleId}/refresh`, {
+				method: 'POST',
+				headers: { Authorization: `Bearer ${localStorage.getItem('evobgp_api_token') ?? ''}` }
+			});
+			if (res.status === 204) toast.message('Refresh не требуется (IP_RANGES)');
+			else if (res.status === 202) toast.success('Задача поставлена в очередь');
+			else toast.error(`HTTP ${res.status}`);
+		} catch (e) {
+			toast.error(e instanceof Error ? e.message : String(e));
+		} finally {
+			refreshing = false;
+		}
+	}
+
+	// --- AS Entries ---
+	function openAsCreate() {
+		asEdit = null;
+		asForm = { asn: undefined, prefix: undefined, community_id: null };
+		asDialog = true;
+	}
+	function openAsEdit(entry: AsEntry) {
+		asEdit = entry;
+		asForm = { asn: entry.asn ?? undefined, prefix: entry.prefix ?? undefined, community_id: entry.community_id };
+		asDialog = true;
+	}
+	async function saveAs() {
+		asSaving = true;
+		try {
+			if (asEdit) {
+				await apiMutate(`/v1/modules/${moduleId}/as-entries/${asEdit.id}`, 'PATCH', asForm);
+				toast.success('Запись обновлена');
+			} else {
+				await apiMutate(`/v1/modules/${moduleId}/as-entries`, 'POST', asForm);
+				toast.success('Запись добавлена');
+			}
+			asDialog = false;
+			await loadEntries();
+		} catch (e) {
+			toast.error(e instanceof Error ? e.message : String(e));
+		} finally {
+			asSaving = false;
+		}
+	}
+	async function deleteAs() {
+		if (!asDeleteTarget) return;
+		try {
+			await apiMutate(`/v1/modules/${moduleId}/as-entries/${asDeleteTarget.id}`, 'DELETE', undefined, { idempotent: false });
+			toast.success('Удалено');
+			asDeleteTarget = null;
+			await loadEntries();
+		} catch (e) {
+			toast.error(e instanceof Error ? e.message : String(e));
+		}
+	}
+
+	// --- CDN Sources ---
+	function openCdnCreate() {
+		cdnEdit = null;
+		cdnForm = { url: '', source_kind: '', community_id: null };
+		cdnDialog = true;
+	}
+	function openCdnEdit(src: CdnSource) {
+		cdnEdit = src;
+		cdnForm = { url: src.url, source_kind: src.source_kind, community_id: src.community_id, refresh_interval_sec: src.refresh_interval_sec };
+		cdnDialog = true;
+	}
+	async function saveCdn() {
+		cdnSaving = true;
+		try {
+			if (cdnEdit) {
+				await apiMutate(`/v1/modules/${moduleId}/cdn-sources/${cdnEdit.id}`, 'PATCH', cdnForm);
+				toast.success('Источник обновлён');
+			} else {
+				await apiMutate(`/v1/modules/${moduleId}/cdn-sources`, 'POST', cdnForm);
+				toast.success('Источник добавлен');
+			}
+			cdnDialog = false;
+			await loadEntries();
+		} catch (e) {
+			toast.error(e instanceof Error ? e.message : String(e));
+		} finally {
+			cdnSaving = false;
+		}
+	}
+	async function deleteCdn() {
+		if (!cdnDeleteTarget) return;
+		try {
+			await apiMutate(`/v1/modules/${moduleId}/cdn-sources/${cdnDeleteTarget.id}`, 'DELETE', undefined, { idempotent: false });
+			toast.success('Удалено');
+			cdnDeleteTarget = null;
+			await loadEntries();
+		} catch (e) {
+			toast.error(e instanceof Error ? e.message : String(e));
+		}
+	}
+
+	// --- Domain Entries ---
+	function openDomainCreate() {
+		domainEdit = null;
+		domainForm = { fqdn: '', community_id: null };
+		domainDialog = true;
+	}
+	function openDomainEdit(entry: DomainEntry) {
+		domainEdit = entry;
+		domainForm = { fqdn: entry.fqdn, community_id: entry.community_id };
+		domainDialog = true;
+	}
+	async function saveDomain() {
+		domainSaving = true;
+		try {
+			if (domainEdit) {
+				await apiMutate(`/v1/modules/${moduleId}/domain-entries/${domainEdit.id}`, 'PATCH', domainForm);
+				toast.success('Домен обновлён');
+			} else {
+				await apiMutate(`/v1/modules/${moduleId}/domain-entries`, 'POST', domainForm);
+				toast.success('Домен добавлен');
+			}
+			domainDialog = false;
+			await loadEntries();
+		} catch (e) {
+			toast.error(e instanceof Error ? e.message : String(e));
+		} finally {
+			domainSaving = false;
+		}
+	}
+	async function deleteDomain() {
+		if (!domainDeleteTarget) return;
+		try {
+			await apiMutate(`/v1/modules/${moduleId}/domain-entries/${domainDeleteTarget.id}`, 'DELETE', undefined, { idempotent: false });
+			toast.success('Удалено');
+			domainDeleteTarget = null;
+			await loadEntries();
+		} catch (e) {
+			toast.error(e instanceof Error ? e.message : String(e));
+		}
+	}
+
+	// --- IP Range Entries ---
+	function openIpCreate() {
+		ipEdit = null;
+		ipForm = { prefix: '', community_id: '' };
+		ipDialog = true;
+	}
+	function openIpEdit(entry: IpRangeEntry) {
+		ipEdit = entry;
+		ipForm = { prefix: entry.prefix, community_id: entry.community_id };
+		ipDialog = true;
+	}
+	async function saveIp() {
+		ipSaving = true;
+		try {
+			if (ipEdit) {
+				await apiMutate(`/v1/modules/${moduleId}/ip-range-entries/${ipEdit.id}`, 'PATCH', ipForm);
+				toast.success('Диапазон обновлён');
+			} else {
+				await apiMutate(`/v1/modules/${moduleId}/ip-range-entries`, 'POST', ipForm);
+				toast.success('Диапазон добавлен');
+			}
+			ipDialog = false;
+			await loadEntries();
+		} catch (e) {
+			toast.error(e instanceof Error ? e.message : String(e));
+		} finally {
+			ipSaving = false;
+		}
+	}
+	async function deleteIp() {
+		if (!ipDeleteTarget) return;
+		try {
+			await apiMutate(`/v1/modules/${moduleId}/ip-range-entries/${ipDeleteTarget.id}`, 'DELETE', undefined, { idempotent: false });
+			toast.success('Удалено');
+			ipDeleteTarget = null;
+			await loadEntries();
+		} catch (e) {
+			toast.error(e instanceof Error ? e.message : String(e));
+		}
+	}
+
+	function communityName(id: string | null) {
+		if (!id) return '—';
+		return communities.find((c) => c.id === id)?.name ?? id.slice(0, 8) + '…';
+	}
+
+	const activeTab = $derived.by(() => {
+		if (!mod) return 'entries';
+		switch (mod.type) {
+			case 'AS_PREFIXES': return 'as';
+			case 'CDN_CIDRS': return 'cdn';
+			case 'DOMAINS': return 'domains';
+			case 'IP_RANGES': return 'ip';
+			default: return 'as';
+		}
+	});
+</script>
+
+{#if loadingMod}
+	<div class="text-muted-foreground flex h-32 items-center justify-center">Загрузка…</div>
+{:else if mod}
+	<div class="space-y-6">
+		<!-- Header -->
+		<div class="flex items-start justify-between">
+			<div class="flex items-start gap-3">
+				<Button variant="ghost" size="icon-sm" href={resolve('/modules')}>
+					<ArrowLeft class="size-4" />
+				</Button>
+				<div>
+					<div class="flex items-center gap-2">
+						<h1 class="text-2xl font-semibold tracking-tight">{mod.name}</h1>
+						<Badge variant="outline">{mod.type}</Badge>
+						{#if mod.enabled}
+							<Badge variant="default" class="text-xs">вкл</Badge>
+						{:else}
+							<Badge variant="secondary" class="text-xs">выкл</Badge>
+						{/if}
+					</div>
+					<p class="text-muted-foreground mt-0.5 text-sm font-mono text-xs">{mod.id}</p>
+				</div>
+			</div>
+			<div class="flex gap-2">
+				<Button variant="outline" size="sm" onclick={refreshMod} disabled={refreshing}>
+					<RefreshCw class={refreshing ? 'animate-spin' : ''} />
+					Refresh
+				</Button>
+				<Button variant="outline" size="sm" onclick={openEditMod}>
+					<Pencil />
+					Редактировать
+				</Button>
+				<Button variant="destructive" size="sm" onclick={() => (deleteModDialog = true)}>
+					<Trash2 />
+					Удалить
+				</Button>
+			</div>
+		</div>
+
+		<!-- Module metadata -->
+		<div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
+			<Card class="p-3">
+				<p class="text-muted-foreground text-xs">Приоритет</p>
+				<p class="font-semibold">{mod.priority}</p>
+			</Card>
+			<Card class="p-3">
+				<p class="text-muted-foreground text-xs">Интервал</p>
+				<p class="font-semibold font-mono text-sm">
+					{mod.cron_expr ?? (mod.refresh_interval_sec ? `${mod.refresh_interval_sec}с` : '—')}
+				</p>
+			</Card>
+			<Card class="p-3">
+				<p class="text-muted-foreground text-xs">DoH профиль</p>
+				<p class="font-semibold text-sm">{mod.doh_profile_id ? mod.doh_profile_id.slice(0, 8) + '…' : '—'}</p>
+			</Card>
+			<Card class="p-3">
+				<p class="text-muted-foreground text-xs">Community по умолч.</p>
+				<p class="font-semibold text-sm">{communityName(mod.default_community_id)}</p>
+			</Card>
+		</div>
+
+		<!-- Entries by type -->
+		{#if mod.type === 'AS_PREFIXES'}
+			<Card>
+				<CardHeader class="flex flex-row items-center justify-between pb-2">
+					<div>
+						<CardTitle class="text-base">AS-записи</CardTitle>
+						<CardDescription>ASN и/или префиксы для анонса</CardDescription>
+					</div>
+					<Button size="sm" onclick={openAsCreate}><Plus />Добавить</Button>
+				</CardHeader>
+				<CardContent class="p-0">
+					<Table>
+						<TableHeader>
+							<TableRow>
+								<TableHead>ASN</TableHead>
+								<TableHead>Префикс</TableHead>
+								<TableHead>Community</TableHead>
+								<TableHead class="w-20"></TableHead>
+							</TableRow>
+						</TableHeader>
+						<TableBody>
+							{#each asEntries as entry (entry.id)}
+								<TableRow>
+									<TableCell class="font-mono">{entry.asn ?? '—'}</TableCell>
+									<TableCell class="font-mono">{entry.prefix ?? '—'}</TableCell>
+									<TableCell class="text-muted-foreground text-sm">{communityName(entry.community_id)}</TableCell>
+									<TableCell>
+										<div class="flex gap-1">
+											<Button variant="ghost" size="icon-sm" onclick={() => openAsEdit(entry)}><Pencil class="size-3.5" /></Button>
+											<Button variant="ghost" size="icon-sm" class="text-destructive" onclick={() => (asDeleteTarget = entry)}><Trash2 class="size-3.5" /></Button>
+										</div>
+									</TableCell>
+								</TableRow>
+							{:else}
+								<TableRow>
+									<TableCell colspan={4} class="text-muted-foreground text-center py-6">Нет записей</TableCell>
+								</TableRow>
+							{/each}
+						</TableBody>
+					</Table>
+				</CardContent>
+			</Card>
+		{:else if mod.type === 'CDN_CIDRS'}
+			<Card>
+				<CardHeader class="flex flex-row items-center justify-between pb-2">
+					<div>
+						<CardTitle class="text-base">CDN-источники</CardTitle>
+						<CardDescription>URL источников для скачивания списков CIDR</CardDescription>
+					</div>
+					<Button size="sm" onclick={openCdnCreate}><Plus />Добавить</Button>
+				</CardHeader>
+				<CardContent class="p-0">
+					<Table>
+						<TableHeader>
+							<TableRow>
+								<TableHead>URL</TableHead>
+								<TableHead>Тип</TableHead>
+								<TableHead>Community</TableHead>
+								<TableHead>Интервал</TableHead>
+								<TableHead class="w-20"></TableHead>
+							</TableRow>
+						</TableHeader>
+						<TableBody>
+							{#each cdnSources as src (src.id)}
+								<TableRow>
+									<TableCell class="font-mono text-xs max-w-xs truncate">{src.url}</TableCell>
+									<TableCell><Badge variant="outline">{src.source_kind}</Badge></TableCell>
+									<TableCell class="text-muted-foreground text-sm">{communityName(src.community_id)}</TableCell>
+									<TableCell class="text-muted-foreground text-sm">{src.refresh_interval_sec ? `${src.refresh_interval_sec}с` : '—'}</TableCell>
+									<TableCell>
+										<div class="flex gap-1">
+											<Button variant="ghost" size="icon-sm" onclick={() => openCdnEdit(src)}><Pencil class="size-3.5" /></Button>
+											<Button variant="ghost" size="icon-sm" class="text-destructive" onclick={() => (cdnDeleteTarget = src)}><Trash2 class="size-3.5" /></Button>
+										</div>
+									</TableCell>
+								</TableRow>
+							{:else}
+								<TableRow>
+									<TableCell colspan={5} class="text-muted-foreground text-center py-6">Нет источников</TableCell>
+								</TableRow>
+							{/each}
+						</TableBody>
+					</Table>
+				</CardContent>
+			</Card>
+		{:else if mod.type === 'DOMAINS'}
+			<Card>
+				<CardHeader class="flex flex-row items-center justify-between pb-2">
+					<div>
+						<CardTitle class="text-base">Домены</CardTitle>
+						<CardDescription>FQDN для резолвинга через DoH</CardDescription>
+					</div>
+					<Button size="sm" onclick={openDomainCreate}><Plus />Добавить</Button>
+				</CardHeader>
+				<CardContent class="p-0">
+					<Table>
+						<TableHeader>
+							<TableRow>
+								<TableHead>FQDN</TableHead>
+								<TableHead>Community</TableHead>
+								<TableHead class="w-20"></TableHead>
+							</TableRow>
+						</TableHeader>
+						<TableBody>
+							{#each domainEntries as entry (entry.id)}
+								<TableRow>
+									<TableCell class="font-mono">{entry.fqdn}</TableCell>
+									<TableCell class="text-muted-foreground text-sm">{communityName(entry.community_id)}</TableCell>
+									<TableCell>
+										<div class="flex gap-1">
+											<Button variant="ghost" size="icon-sm" onclick={() => openDomainEdit(entry)}><Pencil class="size-3.5" /></Button>
+											<Button variant="ghost" size="icon-sm" class="text-destructive" onclick={() => (domainDeleteTarget = entry)}><Trash2 class="size-3.5" /></Button>
+										</div>
+									</TableCell>
+								</TableRow>
+							{:else}
+								<TableRow>
+									<TableCell colspan={3} class="text-muted-foreground text-center py-6">Нет доменов</TableCell>
+								</TableRow>
+							{/each}
+						</TableBody>
+					</Table>
+				</CardContent>
+			</Card>
+		{:else if mod.type === 'IP_RANGES'}
+			<Card>
+				<CardHeader class="flex flex-row items-center justify-between pb-2">
+					<div>
+						<CardTitle class="text-base">IP-диапазоны</CardTitle>
+						<CardDescription>Статические CIDR для анонса</CardDescription>
+					</div>
+					<Button size="sm" onclick={openIpCreate}><Plus />Добавить</Button>
+				</CardHeader>
+				<CardContent class="p-0">
+					<Table>
+						<TableHeader>
+							<TableRow>
+								<TableHead>Префикс (CIDR)</TableHead>
+								<TableHead>Community</TableHead>
+								<TableHead class="w-20"></TableHead>
+							</TableRow>
+						</TableHeader>
+						<TableBody>
+							{#each ipEntries as entry (entry.id)}
+								<TableRow>
+									<TableCell class="font-mono">{entry.prefix}</TableCell>
+									<TableCell class="text-muted-foreground text-sm">{communityName(entry.community_id)}</TableCell>
+									<TableCell>
+										<div class="flex gap-1">
+											<Button variant="ghost" size="icon-sm" onclick={() => openIpEdit(entry)}><Pencil class="size-3.5" /></Button>
+											<Button variant="ghost" size="icon-sm" class="text-destructive" onclick={() => (ipDeleteTarget = entry)}><Trash2 class="size-3.5" /></Button>
+										</div>
+									</TableCell>
+								</TableRow>
+							{:else}
+								<TableRow>
+									<TableCell colspan={3} class="text-muted-foreground text-center py-6">Нет диапазонов</TableCell>
+								</TableRow>
+							{/each}
+						</TableBody>
+					</Table>
+				</CardContent>
+			</Card>
+		{/if}
+	</div>
+{:else}
+	<p class="text-destructive">Модуль не найден</p>
+{/if}
+
+<!-- ================== Module Edit Dialog ================== -->
+<Dialog bind:open={editDialog}>
+	<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={editForm.default_community_id ?? ''} onValueChange={(v) => { editForm.default_community_id = v || null; }}>
+					<SelectTrigger id="e-comm" class="w-full">
+						{editForm.default_community_id ? communityName(editForm.default_community_id) : 'Не выбрано'}
+					</SelectTrigger>
+					<SelectContent>
+						<SelectItem value="">Не выбрано</SelectItem>
+						{#each communities as c}
+							<SelectItem value={c.id}>{c.name}</SelectItem>
+						{/each}
+					</SelectContent>
+				</Select>
+			</div>
+			<div class="space-y-1.5">
+				<Label for="e-doh">DoH профиль</Label>
+				<Select type="single" value={editForm.doh_profile_id ?? ''} onValueChange={(v) => { editForm.doh_profile_id = v || null; }}>
+					<SelectTrigger id="e-doh" class="w-full">
+						{editForm.doh_profile_id ? (dohProfiles.find(d => d.id === editForm.doh_profile_id)?.url ?? editForm.doh_profile_id) : 'Не выбрано'}
+					</SelectTrigger>
+					<SelectContent>
+						<SelectItem value="">Не выбрано</SelectItem>
+						{#each dohProfiles as d}
+							<SelectItem value={d.id}>{d.url}</SelectItem>
+						{/each}
+					</SelectContent>
+				</Select>
+			</div>
+			<div class="flex items-center gap-3">
+				<Switch id="e-enabled" bind:checked={editForm.enabled} />
+				<Label for="e-enabled">Включён</Label>
+			</div>
+		</div>
+		<DialogFooter>
+			<Button variant="outline" onclick={() => (editDialog = false)}>Отмена</Button>
+			<Button onclick={saveMod} disabled={editSaving}>{editSaving ? 'Сохранение…' : 'Сохранить'}</Button>
+		</DialogFooter>
+	</DialogContent>
+</Dialog>
+
+<!-- Delete module confirm -->
+<AlertDialog bind:open={deleteModDialog}>
+	<AlertDialogContent>
+		<AlertDialogHeader>
+			<AlertDialogTitle>Удалить модуль «{mod?.name}»?</AlertDialogTitle>
+			<AlertDialogDescription>Это действие необратимо. Модуль и все его записи будут удалены.</AlertDialogDescription>
+		</AlertDialogHeader>
+		<AlertDialogFooter>
+			<AlertDialogCancel>Отмена</AlertDialogCancel>
+			<AlertDialogAction onclick={deleteMod} disabled={deletingMod}>
+				{deletingMod ? 'Удаление…' : 'Удалить'}
+			</AlertDialogAction>
+		</AlertDialogFooter>
+	</AlertDialogContent>
+</AlertDialog>
+
+<!-- ================== AS Entry Dialog ================== -->
+<Dialog bind:open={asDialog}>
+	<DialogContent class="sm:max-w-sm">
+		<DialogHeader>
+			<DialogTitle>{asEdit ? 'Редактировать запись' : 'Новая AS-запись'}</DialogTitle>
+			<DialogDescription>ASN и/или префикс для анонса через BGP.</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={asForm.asn} />
+			</div>
+			<div class="space-y-1.5">
+				<Label for="as-prefix">Префикс</Label>
+				<Input id="as-prefix" placeholder="203.0.113.0/24" bind:value={asForm.prefix} />
+			</div>
+			<div class="space-y-1.5">
+				<Label for="as-comm">Community</Label>
+				<Select type="single" value={asForm.community_id ?? ''} onValueChange={(v) => { asForm.community_id = v || null; }}>
+					<SelectTrigger id="as-comm" class="w-full">
+						{asForm.community_id ? communityName(asForm.community_id) : 'Не выбрано'}
+					</SelectTrigger>
+					<SelectContent>
+						<SelectItem value="">Не выбрано</SelectItem>
+						{#each communities as c}
+							<SelectItem value={c.id}>{c.name}</SelectItem>
+						{/each}
+					</SelectContent>
+				</Select>
+			</div>
+		</div>
+		<DialogFooter>
+			<Button variant="outline" onclick={() => (asDialog = false)}>Отмена</Button>
+			<Button onclick={saveAs} disabled={asSaving}>{asSaving ? 'Сохранение…' : (asEdit ? 'Сохранить' : 'Добавить')}</Button>
+		</DialogFooter>
+	</DialogContent>
+</Dialog>
+
+<AlertDialog open={!!asDeleteTarget} onOpenChange={(v) => { if (!v) asDeleteTarget = null; }}>
+	<AlertDialogContent>
+		<AlertDialogHeader>
+			<AlertDialogTitle>Удалить запись?</AlertDialogTitle>
+			<AlertDialogDescription>ASN: {asDeleteTarget?.asn ?? '—'}, Префикс: {asDeleteTarget?.prefix ?? '—'}</AlertDialogDescription>
+		</AlertDialogHeader>
+		<AlertDialogFooter>
+			<AlertDialogCancel onclick={() => (asDeleteTarget = null)}>Отмена</AlertDialogCancel>
+			<AlertDialogAction onclick={deleteAs}>Удалить</AlertDialogAction>
+		</AlertDialogFooter>
+	</AlertDialogContent>
+</AlertDialog>
+
+<!-- ================== CDN Source Dialog ================== -->
+<Dialog bind:open={cdnDialog}>
+	<DialogContent class="sm:max-w-md">
+		<DialogHeader>
+			<DialogTitle>{cdnEdit ? 'Редактировать источник' : 'Новый 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={cdnForm.url} />
+			</div>
+			<div class="space-y-1.5">
+				<Label for="cdn-kind">Тип источника</Label>
+				<Input id="cdn-kind" placeholder="plaintext_cidr" bind:value={cdnForm.source_kind} />
+			</div>
+			<div class="space-y-1.5">
+				<Label for="cdn-comm">Community</Label>
+				<Select type="single" value={cdnForm.community_id ?? ''} onValueChange={(v) => { cdnForm.community_id = v || null; }}>
+					<SelectTrigger id="cdn-comm" class="w-full">
+						{cdnForm.community_id ? communityName(cdnForm.community_id) : 'Не выбрано'}
+					</SelectTrigger>
+					<SelectContent>
+						<SelectItem value="">Не выбрано</SelectItem>
+						{#each communities as c}
+							<SelectItem value={c.id}>{c.name}</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={cdnForm.refresh_interval_sec} />
+			</div>
+		</div>
+		<DialogFooter>
+			<Button variant="outline" onclick={() => (cdnDialog = false)}>Отмена</Button>
+			<Button onclick={saveCdn} disabled={cdnSaving}>{cdnSaving ? 'Сохранение…' : (cdnEdit ? 'Сохранить' : 'Добавить')}</Button>
+		</DialogFooter>
+	</DialogContent>
+</Dialog>
+
+<AlertDialog open={!!cdnDeleteTarget} onOpenChange={(v) => { if (!v) cdnDeleteTarget = null; }}>
+	<AlertDialogContent>
+		<AlertDialogHeader>
+			<AlertDialogTitle>Удалить CDN-источник?</AlertDialogTitle>
+			<AlertDialogDescription>{cdnDeleteTarget?.url}</AlertDialogDescription>
+		</AlertDialogHeader>
+		<AlertDialogFooter>
+			<AlertDialogCancel onclick={() => (cdnDeleteTarget = null)}>Отмена</AlertDialogCancel>
+			<AlertDialogAction onclick={deleteCdn}>Удалить</AlertDialogAction>
+		</AlertDialogFooter>
+	</AlertDialogContent>
+</AlertDialog>
+
+<!-- ================== Domain Entry Dialog ================== -->
+<Dialog bind:open={domainDialog}>
+	<DialogContent class="sm:max-w-sm">
+		<DialogHeader>
+			<DialogTitle>{domainEdit ? 'Редактировать домен' : 'Новый домен'}</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={domainForm.fqdn} />
+			</div>
+			<div class="space-y-1.5">
+				<Label for="dom-comm">Community</Label>
+				<Select type="single" value={domainForm.community_id ?? ''} onValueChange={(v) => { domainForm.community_id = v || null; }}>
+					<SelectTrigger id="dom-comm" class="w-full">
+						{domainForm.community_id ? communityName(domainForm.community_id) : 'Не выбрано'}
+					</SelectTrigger>
+					<SelectContent>
+						<SelectItem value="">Не выбрано</SelectItem>
+						{#each communities as c}
+							<SelectItem value={c.id}>{c.name}</SelectItem>
+						{/each}
+					</SelectContent>
+				</Select>
+			</div>
+		</div>
+		<DialogFooter>
+			<Button variant="outline" onclick={() => (domainDialog = false)}>Отмена</Button>
+			<Button onclick={saveDomain} disabled={domainSaving}>{domainSaving ? 'Сохранение…' : (domainEdit ? 'Сохранить' : 'Добавить')}</Button>
+		</DialogFooter>
+	</DialogContent>
+</Dialog>
+
+<AlertDialog open={!!domainDeleteTarget} onOpenChange={(v) => { if (!v) domainDeleteTarget = null; }}>
+	<AlertDialogContent>
+		<AlertDialogHeader>
+			<AlertDialogTitle>Удалить домен?</AlertDialogTitle>
+			<AlertDialogDescription>{domainDeleteTarget?.fqdn}</AlertDialogDescription>
+		</AlertDialogHeader>
+		<AlertDialogFooter>
+			<AlertDialogCancel onclick={() => (domainDeleteTarget = null)}>Отмена</AlertDialogCancel>
+			<AlertDialogAction onclick={deleteDomain}>Удалить</AlertDialogAction>
+		</AlertDialogFooter>
+	</AlertDialogContent>
+</AlertDialog>
+
+<!-- ================== IP Range Dialog ================== -->
+<Dialog bind:open={ipDialog}>
+	<DialogContent class="sm:max-w-sm">
+		<DialogHeader>
+			<DialogTitle>{ipEdit ? 'Редактировать диапазон' : 'Новый 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={ipForm.prefix} />
+			</div>
+			<div class="space-y-1.5">
+				<Label for="ip-comm">Community (обязательно)</Label>
+				<Select type="single" value={ipForm.community_id} onValueChange={(v) => { ipForm.community_id = v; }}>
+					<SelectTrigger id="ip-comm" class="w-full">
+						{ipForm.community_id ? communityName(ipForm.community_id) : 'Выберите community'}
+					</SelectTrigger>
+					<SelectContent>
+						{#each communities as c}
+							<SelectItem value={c.id}>{c.name}</SelectItem>
+						{/each}
+					</SelectContent>
+				</Select>
+			</div>
+		</div>
+		<DialogFooter>
+			<Button variant="outline" onclick={() => (ipDialog = false)}>Отмена</Button>
+			<Button onclick={saveIp} disabled={ipSaving}>{ipSaving ? 'Сохранение…' : (ipEdit ? 'Сохранить' : 'Добавить')}</Button>
+		</DialogFooter>
+	</DialogContent>
+</Dialog>
+
+<AlertDialog open={!!ipDeleteTarget} onOpenChange={(v) => { if (!v) ipDeleteTarget = null; }}>
+	<AlertDialogContent>
+		<AlertDialogHeader>
+			<AlertDialogTitle>Удалить диапазон?</AlertDialogTitle>
+			<AlertDialogDescription>{ipDeleteTarget?.prefix}</AlertDialogDescription>
+		</AlertDialogHeader>
+		<AlertDialogFooter>
+			<AlertDialogCancel onclick={() => (ipDeleteTarget = null)}>Отмена</AlertDialogCancel>
+			<AlertDialogAction onclick={deleteIp}>Удалить</AlertDialogAction>
+		</AlertDialogFooter>
+	</AlertDialogContent>
+</AlertDialog>
diff --git a/web/src/routes/modules/[moduleId]/+page.ts b/web/src/routes/modules/[moduleId]/+page.ts
new file mode 100644
index 0000000..d43d0cd
--- /dev/null
+++ b/web/src/routes/modules/[moduleId]/+page.ts
@@ -0,0 +1 @@
+export const prerender = false;
diff --git a/web/src/routes/monitoring/+page.svelte b/web/src/routes/monitoring/+page.svelte
index 75d6e72..f23c967 100644
--- a/web/src/routes/monitoring/+page.svelte
+++ b/web/src/routes/monitoring/+page.svelte
@@ -1,148 +1,122 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { apiFetch, apiJSON } from '$lib/api/client.js';
+	import { apiJSON, apiFetch } from '$lib/api/client.js';
 	import { Badge } from '$lib/components/ui/badge/index.js';
 	import { Button } from '$lib/components/ui/button/index.js';
-	import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '$lib/components/ui/card/index.js';
-	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
+	import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '$lib/components/ui/card/index.js';
+	import { toast } from 'svelte-sonner';
+	import RefreshCw from '@lucide/svelte/icons/refresh-cw';
 
-	type Ready = { status?: string; checks?: Record<string, string> };
-	type Version = { api_version?: string; git_sha?: string };
+	type HealthStatus = { status: string };
+	type ReadyStatus = { status: string; checks?: Record<string, unknown> };
+	type VersionInfo = { version?: string; git_sha?: string; build_time?: string; [k: string]: unknown };
 
-	let healthBody = $state<string>('');
-	let healthOk = $state<boolean | null>(null);
-	let ready = $state<Ready | null>(null);
-	let version = $state<Version | null>(null);
-	let metricsSnippet = $state<string>('');
-	let metricsErr = $state<string | null>(null);
+	let health = $state<{ ok: boolean; status?: string } | null>(null);
+	let ready = $state<ReadyStatus | null>(null);
+	let version = $state<VersionInfo | null>(null);
+	let loading = $state(false);
 
-	onMount(async () => {
+	async function load() {
+		loading = true;
 		try {
 			const h = await apiFetch('/v1/health');
-			healthOk = h.ok;
-			const txt = await h.text();
-			try {
-				healthBody = JSON.stringify(JSON.parse(txt), null, 2);
-			} catch {
-				healthBody = txt;
-			}
+			const hj = await h.json().catch(() => ({}));
+			health = { ok: h.ok, status: hj?.status };
 		} catch {
-			healthOk = false;
-			healthBody = '';
+			health = { ok: false };
 		}
 		try {
-			ready = await apiJSON<Ready>('/v1/ready');
+			ready = await apiJSON<ReadyStatus>('/v1/ready');
 		} catch {
 			ready = null;
 		}
 		try {
-			version = await apiJSON<Version>('/v1/version');
+			version = await apiJSON<VersionInfo>('/v1/version');
 		} catch {
 			version = null;
 		}
-	});
-
-	async function loadMetrics() {
-		metricsErr = null;
-		metricsSnippet = '';
-		try {
-			const r = await apiFetch('/metrics');
-			const t = await r.text();
-			if (!r.ok) {
-				metricsErr = `HTTP ${r.status}`;
-				return;
-			}
-			const lines = t.split('\n').filter((l) => l && !l.startsWith('#'));
-			metricsSnippet = lines.slice(0, 40).join('\n');
-		} catch (e) {
-			metricsErr = e instanceof Error ? e.message : String(e);
-		}
+		loading = false;
 	}
+
+	onMount(load);
 </script>
 
 <div class="space-y-6">
-	<div>
-		<h1 class="text-2xl font-semibold tracking-tight">Мониторинг</h1>
-		<p class="text-muted-foreground mt-1 text-sm">
-			Публичные системные эндпоинты и срез Prometheus-метрик (первые строки). Полный scrape обычно делает
-			Prometheus.
-		</p>
+	<div class="flex items-start justify-between">
+		<div>
+			<h1 class="text-2xl font-semibold tracking-tight">Мониторинг</h1>
+			<p class="text-muted-foreground mt-1 text-sm">Доступность API и версия сборки.</p>
+		</div>
+		<Button variant="outline" size="sm" onclick={load} disabled={loading}>
+			<RefreshCw class={loading ? 'animate-spin' : ''} />
+			Обновить
+		</Button>
 	</div>
 
-	<div class="grid gap-4 lg:grid-cols-2">
+	<div class="grid gap-4 sm:grid-cols-3">
+		<!-- Health -->
 		<Card>
 			<CardHeader>
-				<CardTitle class="text-base">Health</CardTitle>
+				<CardTitle class="text-base">Liveness</CardTitle>
 				<CardDescription>GET /v1/health</CardDescription>
 			</CardHeader>
-			<CardContent class="space-y-2">
-				{#if healthOk === true}
-					<Badge>OK</Badge>
-				{:else if healthOk === false}
-					<Badge variant="destructive">ошибка</Badge>
+			<CardContent>
+				{#if health === null}
+					<Badge variant="outline">—</Badge>
+				{:else if health.ok}
+					<Badge variant="default">OK</Badge>
+					{#if health.status}<p class="text-muted-foreground mt-1 text-xs">{health.status}</p>{/if}
 				{:else}
-					<span class="text-muted-foreground text-sm">…</span>
+					<Badge variant="destructive">FAIL</Badge>
 				{/if}
-				<pre class="bg-muted max-h-32 overflow-auto rounded-md p-3 text-xs">{healthBody || '—'}</pre>
 			</CardContent>
 		</Card>
 
+		<!-- Ready -->
 		<Card>
 			<CardHeader>
-				<CardTitle class="text-base">Ready</CardTitle>
+				<CardTitle class="text-base">Readiness</CardTitle>
 				<CardDescription>GET /v1/ready</CardDescription>
 			</CardHeader>
 			<CardContent>
-				{#if ready}
-					<pre class="bg-muted max-h-48 overflow-auto rounded-md p-3 text-xs">{JSON.stringify(
-							ready,
-							null,
-							2
-						)}</pre>
+				{#if ready === null}
+					<Badge variant="secondary">—</Badge>
 				{:else}
-					<p class="text-muted-foreground text-sm">Недоступно</p>
+					<Badge variant={ready.status === 'ok' ? 'default' : 'destructive'}>{ready.status}</Badge>
+					{#if ready.checks}
+						<div class="mt-2 space-y-1">
+							{#each Object.entries(ready.checks) as [k, v]}
+								<div class="flex items-center gap-2 text-xs">
+									<span class="text-muted-foreground">{k}</span>
+									<Badge variant="outline" class="text-xs">{JSON.stringify(v)}</Badge>
+								</div>
+							{/each}
+						</div>
+					{/if}
 				{/if}
 			</CardContent>
 		</Card>
 
+		<!-- Version -->
 		<Card>
 			<CardHeader>
 				<CardTitle class="text-base">Версия</CardTitle>
 				<CardDescription>GET /v1/version</CardDescription>
 			</CardHeader>
 			<CardContent>
-				{#if version}
-					<dl class="space-y-1 text-sm">
-						<div class="flex gap-2">
-							<dt class="text-muted-foreground w-28 shrink-0">api_version</dt>
-							<dd class="font-mono">{version.api_version ?? '—'}</dd>
-						</div>
-						<div class="flex gap-2">
-							<dt class="text-muted-foreground w-28 shrink-0">git_sha</dt>
-							<dd class="font-mono break-all">{version.git_sha ?? '—'}</dd>
-						</div>
-					</dl>
+				{#if version === null}
+					<Badge variant="outline">—</Badge>
 				{:else}
-					<p class="text-muted-foreground text-sm">Недоступно</p>
+					<div class="space-y-1 text-xs">
+						{#each Object.entries(version) as [k, v]}
+							<div class="grid grid-cols-[auto_1fr] gap-2">
+								<span class="text-muted-foreground">{k}</span>
+								<span class="font-mono truncate">{String(v)}</span>
+							</div>
+						{/each}
+					</div>
 				{/if}
 			</CardContent>
 		</Card>
-
-		<Card>
-			<CardHeader>
-				<CardTitle class="text-base">Метрики</CardTitle>
-				<CardDescription>GET /metrics (Prometheus)</CardDescription>
-			</CardHeader>
-			<CardContent class="space-y-3">
-				<Button type="button" variant="secondary" size="sm" onclick={loadMetrics}>Загрузить срез</Button>
-				{#if metricsErr}
-					<p class="text-destructive text-sm">{metricsErr}</p>
-				{/if}
-				<ScrollArea class="max-h-56">
-					<pre class="bg-muted rounded-md p-3 font-mono text-xs whitespace-pre-wrap">{metricsSnippet ||
-							'Нажмите «Загрузить срез»'}</pre>
-				</ScrollArea>
-			</CardContent>
-		</Card>
 	</div>
 </div>
diff --git a/web/src/routes/network/+page.svelte b/web/src/routes/network/+page.svelte
new file mode 100644
index 0000000..1106522
--- /dev/null
+++ b/web/src/routes/network/+page.svelte
@@ -0,0 +1,372 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { apiJSON, apiMutate } from '$lib/api/client.js';
+	import type {
+		PeerRow,
+		BgpPeerCreate,
+		PeersResponse,
+		SpeakerRow,
+		BgpSpeakerCreate,
+		SpeakersResponse
+	} 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, CardDescription } 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 { Tabs, TabsContent, TabsList, TabsTrigger } from '$lib/components/ui/tabs/index.js';
+	import {
+		Dialog,
+		DialogContent,
+		DialogHeader,
+		DialogTitle,
+		DialogFooter,
+		DialogDescription
+	} from '$lib/components/ui/dialog/index.js';
+	import {
+		AlertDialog,
+		AlertDialogContent,
+		AlertDialogHeader,
+		AlertDialogTitle,
+		AlertDialogDescription,
+		AlertDialogFooter,
+		AlertDialogCancel,
+		AlertDialogAction
+	} from '$lib/components/ui/alert-dialog/index.js';
+	import {
+		Table,
+		TableBody,
+		TableCell,
+		TableHead,
+		TableHeader,
+		TableRow
+	} from '$lib/components/ui/table/index.js';
+	import { toast } from 'svelte-sonner';
+	import Plus from '@lucide/svelte/icons/plus';
+	import Pencil from '@lucide/svelte/icons/pencil';
+	import Trash2 from '@lucide/svelte/icons/trash-2';
+	import RefreshCw from '@lucide/svelte/icons/refresh-cw';
+	import Play from '@lucide/svelte/icons/play';
+
+	// --- Peers ---
+	let peers = $state<PeerRow[]>([]);
+	let peersLoading = $state(false);
+	let peerDialog = $state(false);
+	let peerEdit = $state<PeerRow | null>(null);
+	let peerForm = $state<BgpPeerCreate & { bgp_speaker_id?: string | null }>({
+		neighbor: '',
+		remote_asn: 0,
+		bgp_speaker_id: null
+	});
+	let peerSaving = $state(false);
+	let peerDeleteTarget = $state<PeerRow | null>(null);
+
+	// --- Speakers ---
+	let speakers = $state<SpeakerRow[]>([]);
+	let speakersLoading = $state(false);
+	let speakerDialog = $state(false);
+	let speakerEdit = $state<SpeakerRow | null>(null);
+	let speakerForm = $state<BgpSpeakerCreate>({ endpoint: '', role: 'operator' });
+	let speakerSaving = $state(false);
+	let applyingId = $state<string | null>(null);
+
+	async function loadAll() {
+		peersLoading = true;
+		speakersLoading = true;
+		try {
+			const [pr, sr] = await Promise.all([
+				apiJSON<PeersResponse>('/v1/peers?limit=200'),
+				apiJSON<SpeakersResponse>('/v1/speakers?limit=200')
+			]);
+			peers = pr.items;
+			speakers = sr.items;
+		} catch (e) {
+			toast.error(e instanceof Error ? e.message : String(e));
+		} finally {
+			peersLoading = false;
+			speakersLoading = false;
+		}
+	}
+
+	onMount(loadAll);
+
+	// --- Peer actions ---
+	function openPeerCreate() {
+		peerEdit = null;
+		peerForm = { neighbor: '', remote_asn: 0, bgp_speaker_id: null };
+		peerDialog = true;
+	}
+	function openPeerEdit(p: PeerRow) {
+		peerEdit = p;
+		peerForm = { neighbor: p.neighbor, remote_asn: p.remote_asn ?? 0, bgp_speaker_id: p.bgp_speaker_id };
+		peerDialog = true;
+	}
+	async function savePeer() {
+		if (!peerForm.neighbor || !peerForm.remote_asn) {
+			toast.error('Укажите адрес и ASN');
+			return;
+		}
+		peerSaving = true;
+		try {
+			if (peerEdit) {
+				await apiMutate(`/v1/peers/${peerEdit.id}`, 'PATCH', peerForm);
+				toast.success('Пир обновлён');
+			} else {
+				await apiMutate('/v1/peers', 'POST', peerForm);
+				toast.success('Пир создан');
+			}
+			peerDialog = false;
+			await loadAll();
+		} catch (e) {
+			toast.error(e instanceof Error ? e.message : String(e));
+		} finally {
+			peerSaving = false;
+		}
+	}
+	async function deletePeer() {
+		if (!peerDeleteTarget) return;
+		try {
+			await apiMutate(`/v1/peers/${peerDeleteTarget.id}`, 'DELETE', undefined, { idempotent: false });
+			toast.success('Пир удалён');
+			peerDeleteTarget = null;
+			await loadAll();
+		} catch (e) {
+			toast.error(e instanceof Error ? e.message : String(e));
+		}
+	}
+
+	// --- Speaker actions ---
+	function openSpeakerCreate() {
+		speakerEdit = null;
+		speakerForm = { endpoint: '', role: 'operator' };
+		speakerDialog = true;
+	}
+	function openSpeakerEdit(s: SpeakerRow) {
+		speakerEdit = s;
+		speakerForm = { endpoint: s.endpoint, role: s.role };
+		speakerDialog = true;
+	}
+	async function saveSpeaker() {
+		if (!speakerForm.endpoint) { toast.error('Укажите endpoint'); return; }
+		speakerSaving = true;
+		try {
+			if (speakerEdit) {
+				await apiMutate(`/v1/speakers/${speakerEdit.id}`, 'PATCH', speakerForm);
+				toast.success('Спикер обновлён');
+			} else {
+				await apiMutate('/v1/speakers', 'POST', speakerForm);
+				toast.success('Спикер создан');
+			}
+			speakerDialog = false;
+			await loadAll();
+		} catch (e) {
+			toast.error(e instanceof Error ? e.message : String(e));
+		} finally {
+			speakerSaving = false;
+		}
+	}
+	async function applySpeaker(id: string) {
+		applyingId = id;
+		try {
+			await apiMutate(`/v1/speakers/${id}/apply`, 'POST', {});
+			toast.success('Apply запущен');
+		} catch (e) {
+			toast.error(e instanceof Error ? e.message : String(e));
+		} finally {
+			applyingId = null;
+		}
+	}
+
+	function sessionBadge(state: string) {
+		if (state === 'Established') return 'default';
+		if (state === 'Active' || state === 'Connect') return 'secondary';
+		return 'outline';
+	}
+</script>
+
+<div class="space-y-6">
+	<div>
+		<h1 class="text-2xl font-semibold tracking-tight">Сеть</h1>
+		<p class="text-muted-foreground mt-1 text-sm">BGP-пиры и спикеры (BIRD-агенты).</p>
+	</div>
+
+	<Tabs value="peers">
+		<TabsList>
+			<TabsTrigger value="peers">Пиры</TabsTrigger>
+			<TabsTrigger value="speakers">Спикеры</TabsTrigger>
+		</TabsList>
+
+		<!-- Peers -->
+		<TabsContent value="peers" class="mt-4">
+			<Card>
+				<CardHeader class="flex flex-row items-center justify-between pb-2">
+					<div>
+						<CardTitle class="text-base">BGP-пиры</CardTitle>
+						<CardDescription>Настройка BGP-соседей</CardDescription>
+					</div>
+					<div class="flex gap-2">
+						<Button variant="outline" size="sm" onclick={loadAll} disabled={peersLoading}>
+							<RefreshCw class={peersLoading ? 'animate-spin' : ''} />
+						</Button>
+						<Button size="sm" onclick={openPeerCreate}><Plus />Добавить</Button>
+					</div>
+				</CardHeader>
+				<CardContent class="p-0">
+					<Table>
+						<TableHeader>
+							<TableRow>
+								<TableHead>Адрес</TableHead>
+								<TableHead>Remote ASN</TableHead>
+								<TableHead>Состояние сессии</TableHead>
+								<TableHead>Спикер</TableHead>
+								<TableHead class="w-20"></TableHead>
+							</TableRow>
+						</TableHeader>
+						<TableBody>
+							{#each peers as p (p.id)}
+								<TableRow>
+									<TableCell class="font-mono">{p.neighbor}</TableCell>
+									<TableCell class="font-mono">{p.remote_asn ?? '—'}</TableCell>
+									<TableCell>
+										<Badge variant={sessionBadge(p.session_state)}>{p.session_state || '—'}</Badge>
+									</TableCell>
+									<TableCell class="text-muted-foreground font-mono text-xs">{p.bgp_speaker_id ? p.bgp_speaker_id.slice(0, 8) + '…' : '—'}</TableCell>
+									<TableCell>
+										<div class="flex gap-1">
+											<Button variant="ghost" size="icon-sm" onclick={() => openPeerEdit(p)}><Pencil class="size-3.5" /></Button>
+											<Button variant="ghost" size="icon-sm" class="text-destructive" onclick={() => (peerDeleteTarget = p)}><Trash2 class="size-3.5" /></Button>
+										</div>
+									</TableCell>
+								</TableRow>
+							{:else}
+								<TableRow>
+									<TableCell colspan={5} class="text-muted-foreground text-center py-8">
+										{peersLoading ? 'Загрузка…' : 'Нет пиров.'}
+									</TableCell>
+								</TableRow>
+							{/each}
+						</TableBody>
+					</Table>
+				</CardContent>
+			</Card>
+		</TabsContent>
+
+		<!-- Speakers -->
+		<TabsContent value="speakers" class="mt-4">
+			<Card>
+				<CardHeader class="flex flex-row items-center justify-between pb-2">
+					<div>
+						<CardTitle class="text-base">Спикеры</CardTitle>
+						<CardDescription>BIRD-агенты, применяющие конфигурацию</CardDescription>
+					</div>
+					<div class="flex gap-2">
+						<Button variant="outline" size="sm" onclick={loadAll} disabled={speakersLoading}>
+							<RefreshCw class={speakersLoading ? 'animate-spin' : ''} />
+						</Button>
+						<Button size="sm" onclick={openSpeakerCreate}><Plus />Добавить</Button>
+					</div>
+				</CardHeader>
+				<CardContent class="p-0">
+					<Table>
+						<TableHeader>
+							<TableRow>
+								<TableHead>Endpoint</TableHead>
+								<TableHead>Роль</TableHead>
+								<TableHead>Последняя ревизия</TableHead>
+								<TableHead class="w-32"></TableHead>
+							</TableRow>
+						</TableHeader>
+						<TableBody>
+							{#each speakers as s (s.id)}
+								<TableRow>
+									<TableCell class="font-mono text-sm">{s.endpoint}</TableCell>
+									<TableCell><Badge variant="outline">{s.role}</Badge></TableCell>
+									<TableCell class="font-mono text-xs text-muted-foreground">{s.last_applied_revision_id ? s.last_applied_revision_id.slice(0, 8) + '…' : '—'}</TableCell>
+									<TableCell>
+										<div class="flex gap-1">
+											<Button variant="outline" size="xs" onclick={() => applySpeaker(s.id)} disabled={applyingId === s.id}>
+												<Play class="size-3" />
+												{applyingId === s.id ? 'Apply…' : 'Apply'}
+											</Button>
+											<Button variant="ghost" size="icon-sm" onclick={() => openSpeakerEdit(s)}><Pencil class="size-3.5" /></Button>
+										</div>
+									</TableCell>
+								</TableRow>
+							{:else}
+								<TableRow>
+									<TableCell colspan={4} class="text-muted-foreground text-center py-8">
+										{speakersLoading ? 'Загрузка…' : 'Нет спикеров.'}
+									</TableCell>
+								</TableRow>
+							{/each}
+						</TableBody>
+					</Table>
+				</CardContent>
+			</Card>
+		</TabsContent>
+	</Tabs>
+</div>
+
+<!-- Peer Dialog -->
+<Dialog bind:open={peerDialog}>
+	<DialogContent class="sm:max-w-sm">
+		<DialogHeader>
+			<DialogTitle>{peerEdit ? 'Редактировать пира' : 'Новый пир'}</DialogTitle>
+			<DialogDescription>BGP-сосед для установки сессии</DialogDescription>
+		</DialogHeader>
+		<div class="space-y-4 py-2">
+			<div class="space-y-1.5">
+				<Label for="p-neighbor">Адрес соседа</Label>
+				<Input id="p-neighbor" placeholder="192.0.2.1" bind:value={peerForm.neighbor} />
+			</div>
+			<div class="space-y-1.5">
+				<Label for="p-asn">Remote ASN</Label>
+				<Input id="p-asn" type="number" placeholder="65000" bind:value={peerForm.remote_asn} />
+			</div>
+			<div class="space-y-1.5">
+				<Label for="p-speaker">Спикер (ID, опционально)</Label>
+				<Input id="p-speaker" placeholder="speaker-id" bind:value={peerForm.bgp_speaker_id} />
+			</div>
+		</div>
+		<DialogFooter>
+			<Button variant="outline" onclick={() => (peerDialog = false)}>Отмена</Button>
+			<Button onclick={savePeer} disabled={peerSaving}>{peerSaving ? 'Сохранение…' : (peerEdit ? 'Сохранить' : 'Создать')}</Button>
+		</DialogFooter>
+	</DialogContent>
+</Dialog>
+
+<AlertDialog open={!!peerDeleteTarget} onOpenChange={(v) => { if (!v) peerDeleteTarget = null; }}>
+	<AlertDialogContent>
+		<AlertDialogHeader>
+			<AlertDialogTitle>Удалить пира?</AlertDialogTitle>
+			<AlertDialogDescription>{peerDeleteTarget?.neighbor}</AlertDialogDescription>
+		</AlertDialogHeader>
+		<AlertDialogFooter>
+			<AlertDialogCancel onclick={() => (peerDeleteTarget = null)}>Отмена</AlertDialogCancel>
+			<AlertDialogAction onclick={deletePeer}>Удалить</AlertDialogAction>
+		</AlertDialogFooter>
+	</AlertDialogContent>
+</AlertDialog>
+
+<!-- Speaker Dialog -->
+<Dialog bind:open={speakerDialog}>
+	<DialogContent class="sm:max-w-sm">
+		<DialogHeader>
+			<DialogTitle>{speakerEdit ? 'Редактировать спикера' : 'Новый спикер'}</DialogTitle>
+		</DialogHeader>
+		<div class="space-y-4 py-2">
+			<div class="space-y-1.5">
+				<Label for="s-endpoint">Endpoint</Label>
+				<Input id="s-endpoint" placeholder="http://bird-agent:8081" bind:value={speakerForm.endpoint} />
+			</div>
+			<div class="space-y-1.5">
+				<Label for="s-role">Роль</Label>
+				<Input id="s-role" placeholder="operator" bind:value={speakerForm.role} />
+			</div>
+		</div>
+		<DialogFooter>
+			<Button variant="outline" onclick={() => (speakerDialog = false)}>Отмена</Button>
+			<Button onclick={saveSpeaker} disabled={speakerSaving}>{speakerSaving ? 'Сохранение…' : (speakerEdit ? 'Сохранить' : 'Создать')}</Button>
+		</DialogFooter>
+	</DialogContent>
+</Dialog>
diff --git a/web/src/routes/operations/+page.svelte b/web/src/routes/operations/+page.svelte
new file mode 100644
index 0000000..8e22f20
--- /dev/null
+++ b/web/src/routes/operations/+page.svelte
@@ -0,0 +1,528 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { apiJSON, apiMutate } from '$lib/api/client.js';
+	import type {
+		RevisionRow,
+		RevisionsResponse,
+		RevisionPrefixesResponse,
+		RevisionDiff,
+		JobRow,
+		JobsResponse
+	} 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, CardDescription } from '$lib/components/ui/card/index.js';
+	import { Tabs, TabsContent, TabsList, TabsTrigger } from '$lib/components/ui/tabs/index.js';
+	import {
+		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';
+	import {
+		Table,
+		TableBody,
+		TableCell,
+		TableHead,
+		TableHeader,
+		TableRow
+	} from '$lib/components/ui/table/index.js';
+	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
+	import { toast } from 'svelte-sonner';
+	import RefreshCw from '@lucide/svelte/icons/refresh-cw';
+	import Play from '@lucide/svelte/icons/play';
+	import Undo from '@lucide/svelte/icons/undo';
+	import Eye from '@lucide/svelte/icons/eye';
+	import X from '@lucide/svelte/icons/x';
+	import RotateCcw from '@lucide/svelte/icons/rotate-ccw';
+	import Bird from '@lucide/svelte/icons/bird';
+
+	// Revisions
+	let revisions = $state<RevisionRow[]>([]);
+	let revLoading = $state(false);
+	let rollbackTarget = $state<RevisionRow | null>(null);
+	let rollingBack = $state(false);
+
+	// Preview/Prefixes
+	let previewDialog = $state(false);
+	let previewRevision = $state<RevisionRow | null>(null);
+	let previewData = $state<unknown>(null);
+	let prefixesData = $state<string[]>([]);
+	let previewLoading = $state(false);
+
+	// Diff
+	let diffDialog = $state(false);
+	let diffRevA = $state<string>('');
+	let diffRevB = $state<string>('');
+	let diffData = $state<RevisionDiff | null>(null);
+	let diffLoading = $state(false);
+
+	// Jobs
+	let jobs = $state<JobRow[]>([]);
+	let jobsLoading = $state(false);
+	let cancelTarget = $state<JobRow | null>(null);
+	let cancelling = $state(false);
+	let jobDetailDialog = $state(false);
+	let jobDetail = $state<JobRow | null>(null);
+
+	// Global apply / bird reload
+	let applying = $state(false);
+	let reloading = $state(false);
+	let applyConfirm = $state(false);
+	let reloadConfirm = $state(false);
+
+	async function loadRevisions() {
+		revLoading = true;
+		try {
+			const r = await apiJSON<RevisionsResponse>('/v1/revisions?limit=100');
+			revisions = r.items;
+		} catch (e) {
+			toast.error(e instanceof Error ? e.message : String(e));
+		} finally {
+			revLoading = false;
+		}
+	}
+
+	async function loadJobs() {
+		jobsLoading = true;
+		try {
+			const j = await apiJSON<JobsResponse>('/v1/jobs?limit=100');
+			jobs = j.items;
+		} catch (e) {
+			toast.error(e instanceof Error ? e.message : String(e));
+		} finally {
+			jobsLoading = false;
+		}
+	}
+
+	onMount(() => { loadRevisions(); loadJobs(); });
+
+	async function openPreview(rev: RevisionRow) {
+		previewRevision = rev;
+		previewLoading = true;
+		previewDialog = true;
+		previewData = null;
+		prefixesData = [];
+		try {
+			const [prev, pfx] = await Promise.all([
+				apiJSON<unknown>(`/v1/revisions/${rev.id}/preview`),
+				apiJSON<RevisionPrefixesResponse>(`/v1/revisions/${rev.id}/prefixes`)
+			]);
+			previewData = prev;
+			prefixesData = (pfx.items ?? []).map((p: { prefix: string }) => p.prefix);
+		} catch (e) {
+			toast.error(e instanceof Error ? e.message : String(e));
+		} finally {
+			previewLoading = false;
+		}
+	}
+
+	async function loadDiff() {
+		if (!diffRevA || !diffRevB) { toast.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));
+		} finally {
+			diffLoading = false;
+		}
+	}
+
+	async function rollback() {
+		if (!rollbackTarget) return;
+		rollingBack = true;
+		try {
+			await apiMutate(`/v1/revisions/${rollbackTarget.id}/rollback`, 'POST', {});
+			toast.success('Rollback выполнен');
+			rollbackTarget = null;
+			await loadRevisions();
+		} catch (e) {
+			toast.error(e instanceof Error ? e.message : String(e));
+			rollingBack = false;
+		}
+	}
+
+	async function doApply() {
+		applying = true;
+		try {
+			await apiMutate('/v1/apply', 'POST', {});
+			toast.success('Apply запущен на всех спикерах');
+			applyConfirm = false;
+			await loadJobs();
+		} catch (e) {
+			toast.error(e instanceof Error ? e.message : String(e));
+		} finally {
+			applying = false;
+		}
+	}
+
+	async function doBirdReload() {
+		reloading = true;
+		try {
+			await apiMutate('/v1/bird/reload', 'POST', {});
+			toast.success('BIRD reload запущен');
+			reloadConfirm = false;
+		} catch (e) {
+			toast.error(e instanceof Error ? e.message : String(e));
+		} finally {
+			reloading = false;
+		}
+	}
+
+	async function cancelJob() {
+		if (!cancelTarget) return;
+		cancelling = true;
+		try {
+			await apiMutate(`/v1/jobs/${cancelTarget.job_id}/cancel`, 'POST', {});
+			toast.success('Задача отменена');
+			cancelTarget = null;
+			await loadJobs();
+		} catch (e) {
+			toast.error(e instanceof Error ? e.message : String(e));
+		} finally {
+			cancelling = false;
+		}
+	}
+
+	async function openJobDetail(job: JobRow) {
+		try {
+			jobDetail = await apiJSON<JobRow>(`/v1/jobs/${job.job_id}`);
+		} catch {
+			jobDetail = job;
+		}
+		jobDetailDialog = true;
+	}
+
+	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');
+	}
+</script>
+
+<div class="space-y-6">
+	<div>
+		<h1 class="text-2xl font-semibold tracking-tight">Операции</h1>
+		<p class="text-muted-foreground mt-1 text-sm">Деплой конфигурации, управление ревизиями и задачами.</p>
+	</div>
+
+	<!-- Quick actions -->
+	<div class="grid gap-3 sm:grid-cols-2">
+		<Card class="p-4">
+			<div class="flex items-center justify-between">
+				<div>
+					<p class="font-semibold">Apply all speakers</p>
+					<p class="text-muted-foreground text-sm">Применить текущую конфигурацию на всех спикерах</p>
+				</div>
+				<Button onclick={() => (applyConfirm = true)} disabled={applying}>
+					<Play />
+					Apply
+				</Button>
+			</div>
+		</Card>
+		<Card class="p-4">
+			<div class="flex items-center justify-between">
+				<div>
+					<p class="font-semibold">BIRD Reload</p>
+					<p class="text-muted-foreground text-sm">Перезагрузить конфигурацию BIRD на всех спикерах</p>
+				</div>
+				<Button variant="outline" onclick={() => (reloadConfirm = true)} disabled={reloading}>
+					<RotateCcw />
+					Reload
+				</Button>
+			</div>
+		</Card>
+	</div>
+
+	<Tabs value="revisions">
+		<TabsList>
+			<TabsTrigger value="revisions">Ревизии</TabsTrigger>
+			<TabsTrigger value="diff">Diff</TabsTrigger>
+			<TabsTrigger value="jobs">Задачи</TabsTrigger>
+		</TabsList>
+
+		<!-- Revisions -->
+		<TabsContent value="revisions" class="mt-4">
+			<Card>
+				<CardHeader class="flex flex-row items-center justify-between pb-2">
+					<div>
+						<CardTitle class="text-base">История ревизий</CardTitle>
+						<CardDescription>Автоматически создаются при apply</CardDescription>
+					</div>
+					<Button variant="outline" size="sm" onclick={loadRevisions} disabled={revLoading}>
+						<RefreshCw class={revLoading ? 'animate-spin' : ''} />
+					</Button>
+				</CardHeader>
+				<CardContent class="p-0">
+					<Table>
+						<TableHeader>
+							<TableRow>
+								<TableHead>ID</TableHead>
+								<TableHead>Создана</TableHead>
+								<TableHead>Префиксов</TableHead>
+								<TableHead>Хэш</TableHead>
+								<TableHead class="w-32"></TableHead>
+							</TableRow>
+						</TableHeader>
+						<TableBody>
+							{#each revisions as rev (rev.id)}
+								<TableRow>
+									<TableCell class="font-mono text-xs">{rev.id.slice(0, 8)}…</TableCell>
+									<TableCell class="text-sm">{formatDate(rev.created_at)}</TableCell>
+									<TableCell>{rev.materialized_prefix_count}</TableCell>
+									<TableCell class="font-mono text-xs text-muted-foreground">{rev.content_hash.slice(0, 12)}…</TableCell>
+									<TableCell>
+										<div class="flex gap-1">
+											<Button variant="ghost" size="icon-sm" onclick={() => openPreview(rev)}>
+												<Eye class="size-3.5" />
+											</Button>
+											<Button variant="ghost" size="icon-sm" onclick={() => (rollbackTarget = rev)}>
+												<Undo class="size-3.5" />
+											</Button>
+										</div>
+									</TableCell>
+								</TableRow>
+							{:else}
+								<TableRow>
+									<TableCell colspan={5} class="text-muted-foreground text-center py-8">
+										{revLoading ? 'Загрузка…' : 'Нет ревизий'}
+									</TableCell>
+								</TableRow>
+							{/each}
+						</TableBody>
+					</Table>
+				</CardContent>
+			</Card>
+		</TabsContent>
+
+		<!-- Diff -->
+		<TabsContent value="diff" class="mt-4">
+			<Card>
+				<CardHeader>
+					<CardTitle class="text-base">Сравнение ревизий</CardTitle>
+					<CardDescription>Выберите ID двух ревизий для сравнения</CardDescription>
+				</CardHeader>
+				<CardContent>
+					<div class="flex gap-2">
+						<select bind:value={diffRevA} class="border-border bg-background h-8 flex-1 rounded-md border px-2 text-sm">
+							<option value="">Ревизия A</option>
+							{#each revisions as rev}
+								<option value={rev.id}>{rev.id.slice(0, 8)}… ({formatDate(rev.created_at)})</option>
+							{/each}
+						</select>
+						<select bind:value={diffRevB} class="border-border bg-background h-8 flex-1 rounded-md border px-2 text-sm">
+							<option value="">Ревизия B</option>
+							{#each revisions as rev}
+								<option value={rev.id}>{rev.id.slice(0, 8)}… ({formatDate(rev.created_at)})</option>
+							{/each}
+						</select>
+						<Button size="sm" onclick={loadDiff} disabled={diffLoading}>
+							{diffLoading ? 'Загрузка…' : 'Сравнить'}
+						</Button>
+					</div>
+					{#if diffData}
+						<div class="mt-4 grid gap-3 sm:grid-cols-2">
+							<div>
+								<p class="text-sm font-medium text-green-600 mb-2">+ Добавлено ({diffData.added?.length ?? 0})</p>
+								<ScrollArea class="max-h-64 rounded border p-2">
+									{#each diffData.added ?? [] as p}
+										<p class="font-mono text-xs">{typeof p === 'string' ? p : (p as {prefix?: string}).prefix ?? JSON.stringify(p)}</p>
+									{:else}
+										<p class="text-muted-foreground text-xs">Нет изменений</p>
+									{/each}
+								</ScrollArea>
+							</div>
+							<div>
+								<p class="text-sm font-medium text-red-600 mb-2">- Удалено ({diffData.removed?.length ?? 0})</p>
+								<ScrollArea class="max-h-64 rounded border p-2">
+									{#each diffData.removed ?? [] as p}
+										<p class="font-mono text-xs">{typeof p === 'string' ? p : (p as {prefix?: string}).prefix ?? JSON.stringify(p)}</p>
+									{:else}
+										<p class="text-muted-foreground text-xs">Нет изменений</p>
+									{/each}
+								</ScrollArea>
+							</div>
+						</div>
+					{/if}
+				</CardContent>
+			</Card>
+		</TabsContent>
+
+		<!-- Jobs -->
+		<TabsContent value="jobs" class="mt-4">
+			<Card>
+				<CardHeader class="flex flex-row items-center justify-between pb-2">
+					<div>
+						<CardTitle class="text-base">Задачи</CardTitle>
+						<CardDescription>Фоновые задачи (ingest, apply, refresh)</CardDescription>
+					</div>
+					<Button variant="outline" size="sm" onclick={loadJobs} disabled={jobsLoading}>
+						<RefreshCw class={jobsLoading ? 'animate-spin' : ''} />
+					</Button>
+				</CardHeader>
+				<CardContent class="p-0">
+					<Table>
+						<TableHeader>
+							<TableRow>
+								<TableHead>Вид</TableHead>
+								<TableHead>Статус</TableHead>
+								<TableHead>Создана</TableHead>
+								<TableHead>Завершена</TableHead>
+								<TableHead class="w-24"></TableHead>
+							</TableRow>
+						</TableHeader>
+						<TableBody>
+							{#each jobs as job (job.job_id)}
+								<TableRow class="cursor-pointer" onclick={() => openJobDetail(job)}>
+									<TableCell class="font-medium">{job.kind}</TableCell>
+									<TableCell><Badge variant={jobStatusVariant(job.status)}>{job.status}</Badge></TableCell>
+									<TableCell class="text-sm">{formatDate(job.created_at)}</TableCell>
+									<TableCell class="text-sm">{formatDate(job.finished_at)}</TableCell>
+									<TableCell>
+										{#if job.status === 'running' || job.status === 'queued'}
+											<Button variant="ghost" size="icon-sm" class="text-destructive"
+												onclick={(e) => { e.stopPropagation(); cancelTarget = job; }}>
+												<X class="size-3.5" />
+											</Button>
+										{/if}
+									</TableCell>
+								</TableRow>
+							{:else}
+								<TableRow>
+									<TableCell colspan={5} class="text-muted-foreground text-center py-8">
+										{jobsLoading ? 'Загрузка…' : 'Нет задач'}
+									</TableCell>
+								</TableRow>
+							{/each}
+						</TableBody>
+					</Table>
+				</CardContent>
+			</Card>
+		</TabsContent>
+	</Tabs>
+</div>
+
+<!-- Apply confirm -->
+<AlertDialog bind:open={applyConfirm}>
+	<AlertDialogContent>
+		<AlertDialogHeader>
+			<AlertDialogTitle>Запустить Apply на всех спикерах?</AlertDialogTitle>
+			<AlertDialogDescription>Текущая конфигурация будет применена на всех BIRD-агентах. Требуется роль operator.</AlertDialogDescription>
+		</AlertDialogHeader>
+		<AlertDialogFooter>
+			<AlertDialogCancel>Отмена</AlertDialogCancel>
+			<AlertDialogAction onclick={doApply} disabled={applying}>{applying ? 'Apply…' : 'Применить'}</AlertDialogAction>
+		</AlertDialogFooter>
+	</AlertDialogContent>
+</AlertDialog>
+
+<!-- BIRD reload confirm -->
+<AlertDialog bind:open={reloadConfirm}>
+	<AlertDialogContent>
+		<AlertDialogHeader>
+			<AlertDialogTitle>Reload BIRD?</AlertDialogTitle>
+			<AlertDialogDescription>BIRD перезагрузит конфигурацию. Требуется роль operator.</AlertDialogDescription>
+		</AlertDialogHeader>
+		<AlertDialogFooter>
+			<AlertDialogCancel>Отмена</AlertDialogCancel>
+			<AlertDialogAction onclick={doBirdReload} disabled={reloading}>{reloading ? 'Reload…' : 'Reload'}</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?.kind} ({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="sm:max-w-2xl">
+		<DialogHeader>
+			<DialogTitle>Ревизия {previewRevision?.id.slice(0, 8)}…</DialogTitle>
+			<DialogDescription>Предпросмотр префиксов ревизии</DialogDescription>
+		</DialogHeader>
+		{#if previewLoading}
+			<p class="text-muted-foreground py-4 text-center text-sm">Загрузка…</p>
+		{:else}
+			<p class="text-sm mb-2"><span class="font-medium">Префиксов:</span> {prefixesData.length}</p>
+			<ScrollArea class="max-h-80 rounded border p-3">
+				{#each prefixesData as pfx}
+					<p class="font-mono text-xs">{pfx}</p>
+				{:else}
+					<p class="text-muted-foreground text-xs">Нет префиксов</p>
+				{/each}
+			</ScrollArea>
+		{/if}
+	</DialogContent>
+</Dialog>
+
+<!-- Job detail dialog -->
+<Dialog bind:open={jobDetailDialog}>
+	<DialogContent class="sm:max-w-lg">
+		<DialogHeader>
+			<DialogTitle>Задача: {jobDetail?.kind}</DialogTitle>
+		</DialogHeader>
+		{#if jobDetail}
+			<div class="space-y-2 text-sm">
+				<div class="grid grid-cols-2 gap-x-4 gap-y-1">
+					<span class="text-muted-foreground">ID</span><span class="font-mono">{jobDetail.job_id}</span>
+					<span class="text-muted-foreground">Статус</span><span><Badge variant={jobStatusVariant(jobDetail.status)}>{jobDetail.status}</Badge></span>
+					<span class="text-muted-foreground">Создана</span><span>{formatDate(jobDetail.created_at)}</span>
+					<span class="text-muted-foreground">Начата</span><span>{formatDate(jobDetail.started_at)}</span>
+					<span class="text-muted-foreground">Завершена</span><span>{formatDate(jobDetail.finished_at)}</span>
+					{#if jobDetail.error}
+						<span class="text-muted-foreground">Ошибка</span><span class="text-destructive">{jobDetail.error}</span>
+					{/if}
+				</div>
+				{#if jobDetail.meta && Object.keys(jobDetail.meta).length > 0}
+					<div>
+						<p class="text-muted-foreground mb-1">Meta</p>
+						<pre class="bg-muted rounded p-2 text-xs overflow-auto max-h-40">{JSON.stringify(jobDetail.meta, null, 2)}</pre>
+					</div>
+				{/if}
+			</div>
+		{/if}
+	</DialogContent>
+</Dialog>
diff --git a/web/src/routes/peers/+page.svelte b/web/src/routes/peers/+page.svelte
index c35cae0..1d74be7 100644
--- a/web/src/routes/peers/+page.svelte
+++ b/web/src/routes/peers/+page.svelte
@@ -1,118 +1,5 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
-	import { apiJSON } from '$lib/api/client.js';
-	import type { PeerRow, PeersResponse, SpeakerRow, SpeakersResponse } from '$lib/api/types.js';
-	import { Badge } from '$lib/components/ui/badge/index.js';
-	import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '$lib/components/ui/card/index.js';
-	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
-	import {
-		Table,
-		TableBody,
-		TableCell,
-		TableHead,
-		TableHeader,
-		TableRow
-	} from '$lib/components/ui/table/index.js';
-	import { toast } from 'svelte-sonner';
-
-	let peers = $state<PeerRow[]>([]);
-	let speakers = $state<SpeakerRow[]>([]);
-	let err = $state<string | null>(null);
-
-	onMount(async () => {
-		try {
-			const [p, s] = await Promise.all([
-				apiJSON<PeersResponse>('/v1/peers'),
-				apiJSON<SpeakersResponse>('/v1/speakers')
-			]);
-			peers = p.items ?? [];
-			speakers = s.items ?? [];
-		} catch (e) {
-			err = e instanceof Error ? e.message : String(e);
-			toast.error(err);
-		}
-	});
+	import { goto } from '$app/navigation';
+	import { resolve } from '$app/paths';
+	goto(resolve('/network'));
 </script>
-
-<div class="space-y-6">
-	<div>
-		<h1 class="text-2xl font-semibold tracking-tight">Пиры и спикеры</h1>
-		<p class="text-muted-foreground mt-1 text-sm">BGP-пиры и экземпляры BIRD.</p>
-	</div>
-
-	{#if err}
-		<p class="text-destructive text-sm">{err}</p>
-	{/if}
-
-	<Card>
-		<CardHeader>
-			<CardTitle class="text-base">Спикеры</CardTitle>
-			<CardDescription>GET /v1/speakers</CardDescription>
-		</CardHeader>
-		<CardContent>
-			<ScrollArea class="max-h-[320px]">
-				<Table>
-					<TableHeader>
-						<TableRow>
-							<TableHead>Роль</TableHead>
-							<TableHead>Endpoint</TableHead>
-							<TableHead>Последняя ревизия</TableHead>
-						</TableRow>
-					</TableHeader>
-					<TableBody>
-						{#each speakers as s}
-							<TableRow>
-								<TableCell><Badge variant="outline">{s.role}</Badge></TableCell>
-								<TableCell class="font-mono text-xs">{s.endpoint}</TableCell>
-								<TableCell class="max-w-[200px] truncate font-mono text-xs" title={s.last_applied_revision_id ?? ''}
-									>{s.last_applied_revision_id ?? '—'}</TableCell
-								>
-							</TableRow>
-						{:else}
-							<TableRow>
-								<TableCell colspan={3} class="text-muted-foreground">Нет данных</TableCell>
-							</TableRow>
-						{/each}
-					</TableBody>
-				</Table>
-			</ScrollArea>
-		</CardContent>
-	</Card>
-
-	<Card>
-		<CardHeader>
-			<CardTitle class="text-base">Пиры</CardTitle>
-			<CardDescription>GET /v1/peers</CardDescription>
-		</CardHeader>
-		<CardContent>
-			<ScrollArea class="max-h-[min(50vh,400px)]">
-				<Table>
-					<TableHeader>
-						<TableRow>
-							<TableHead>Имя</TableHead>
-							<TableHead>Neighbor</TableHead>
-							<TableHead>Сессия</TableHead>
-						</TableRow>
-					</TableHeader>
-					<TableBody>
-						{#each peers as p}
-							<TableRow>
-								<TableCell>{p.name}</TableCell>
-								<TableCell class="font-mono text-xs">{p.neighbor}</TableCell>
-								<TableCell>
-									<Badge variant={p.session_state === 'Established' ? 'default' : 'secondary'}
-										>{p.session_state}</Badge
-									>
-								</TableCell>
-							</TableRow>
-						{:else}
-							<TableRow>
-								<TableCell colspan={3} class="text-muted-foreground">Нет данных</TableCell>
-							</TableRow>
-						{/each}
-					</TableBody>
-				</Table>
-			</ScrollArea>
-		</CardContent>
-	</Card>
-</div>
diff --git a/web/src/routes/revisions/+page.svelte b/web/src/routes/revisions/+page.svelte
index 8ca56ff..b7f92f1 100644
--- a/web/src/routes/revisions/+page.svelte
+++ b/web/src/routes/revisions/+page.svelte
@@ -1,80 +1,5 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
-	import { apiJSON } from '$lib/api/client.js';
-	import type { RevisionRow, RevisionsResponse } from '$lib/api/types.js';
-	import { Badge } from '$lib/components/ui/badge/index.js';
-	import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '$lib/components/ui/card/index.js';
-	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
-	import {
-		Table,
-		TableBody,
-		TableCell,
-		TableHead,
-		TableHeader,
-		TableRow
-	} from '$lib/components/ui/table/index.js';
-	import { toast } from 'svelte-sonner';
-
-	let rows = $state<RevisionRow[]>([]);
-	let err = $state<string | null>(null);
-
-	onMount(async () => {
-		try {
-			const r = await apiJSON<RevisionsResponse>('/v1/revisions?limit=100');
-			rows = r.items ?? [];
-		} catch (e) {
-			err = e instanceof Error ? e.message : String(e);
-			toast.error(err);
-		}
-	});
+	import { goto } from '$app/navigation';
+	import { resolve } from '$app/paths';
+	goto(resolve('/operations'));
 </script>
-
-<div class="space-y-4">
-	<div>
-		<h1 class="text-2xl font-semibold tracking-tight">Ревизии</h1>
-		<p class="text-muted-foreground mt-1 text-sm">История конфигурации BIRD.</p>
-	</div>
-
-	<Card>
-		<CardHeader>
-			<CardTitle class="text-base">Ревизии</CardTitle>
-			<CardDescription>GET /v1/revisions</CardDescription>
-		</CardHeader>
-		<CardContent>
-			{#if err}
-				<p class="text-destructive text-sm">{err}</p>
-			{:else}
-				<ScrollArea class="max-h-[min(70vh,560px)]">
-					<Table>
-						<TableHeader>
-							<TableRow>
-								<TableHead>ID</TableHead>
-								<TableHead>Хэш</TableHead>
-								<TableHead>Префиксы</TableHead>
-								<TableHead>Создана</TableHead>
-							</TableRow>
-						</TableHeader>
-						<TableBody>
-							{#each rows as r}
-								<TableRow>
-									<TableCell class="max-w-[140px] truncate font-mono text-xs" title={r.id}
-										>{r.id}</TableCell
-									>
-									<TableCell class="max-w-[180px] truncate font-mono text-xs" title={r.content_hash}
-										>{r.content_hash}</TableCell
-									>
-									<TableCell>{r.materialized_prefix_count ?? '—'}</TableCell>
-									<TableCell class="whitespace-nowrap text-xs">{r.created_at}</TableCell>
-								</TableRow>
-							{:else}
-								<TableRow>
-									<TableCell colspan={4} class="text-muted-foreground">Нет данных</TableCell>
-								</TableRow>
-							{/each}
-						</TableBody>
-					</Table>
-				</ScrollArea>
-			{/if}
-		</CardContent>
-	</Card>
-</div>
diff --git a/web/src/routes/schedule/+page.svelte b/web/src/routes/schedule/+page.svelte
index 45debd5..51dad7a 100644
--- a/web/src/routes/schedule/+page.svelte
+++ b/web/src/routes/schedule/+page.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { apiFetch, apiJSON } from '$lib/api/client.js';
-	import type { JobsResponse, ModuleRow, ModulesResponse } from '$lib/api/types.js';
+	import type { JobRow, JobsResponse, 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, CardDescription, CardHeader, CardTitle } from '$lib/components/ui/card/index.js';
-	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
+	import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '$lib/components/ui/card/index.js';
 	import {
 		Table,
 		TableBody,
@@ -15,112 +14,115 @@
 		TableRow
 	} from '$lib/components/ui/table/index.js';
 	import { toast } from 'svelte-sonner';
+	import RefreshCw from '@lucide/svelte/icons/refresh-cw';
 
 	let modules = $state<ModuleRow[]>([]);
-	let jobs = $state<JobsResponse['items']>([]);
-	let loading = $state<Record<string, boolean>>({});
+	let jobs = $state<JobRow[]>([]);
+	let refreshing = $state<Record<string, boolean>>({});
+	let loading = $state(false);
 
 	async function load() {
+		loading = true;
 		try {
-			const m = await apiJSON<ModulesResponse>('/v1/modules');
+			const [m, j] = await Promise.all([
+				apiJSON<ModulesResponse>('/v1/modules?limit=200'),
+				apiJSON<JobsResponse>('/v1/jobs?limit=50')
+			]);
 			modules = m.items ?? [];
+			jobs = j.items ?? [];
 		} catch (e) {
 			toast.error(e instanceof Error ? e.message : String(e));
-		}
-		try {
-			const j = await apiJSON<JobsResponse>('/v1/jobs?limit=50');
-			jobs = j.items ?? [];
-		} catch {
-			jobs = [];
+		} finally {
+			loading = false;
 		}
 	}
 
 	onMount(load);
 
 	async function refreshModule(id: string) {
-		loading = { ...loading, [id]: true };
+		refreshing = { ...refreshing, [id]: true };
 		try {
-			const res = await apiFetch(`/v1/modules/${id}/refresh`, { method: 'POST' });
-			if (res.status === 204) {
-				toast.message('Refresh не требуется (например IP_RANGES)');
-			} else if (res.status === 202) {
-				toast.success('Задача поставлена в очередь');
-				await load();
-			} else {
-				const t = await res.text();
-				toast.error(t || `HTTP ${res.status}`);
-			}
+			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('Refresh не требуется (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 {
-			loading = { ...loading, [id]: false };
+			refreshing = { ...refreshing, [id]: false };
 		}
 	}
 
-	function intervalLabel(sec: number) {
+	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';
+	}
 </script>
 
 <div class="space-y-6">
-	<div>
-		<h1 class="text-2xl font-semibold tracking-tight">Расписание и задачи</h1>
-		<p class="text-muted-foreground mt-1 text-sm">
-			Интервалы обновления модулей (поля из API) и ручной refresh → ingest. Ниже — последние задачи из
-			<code class="bg-muted rounded px-1 text-xs">job_audit</code>.
-		</p>
+	<div class="flex items-start justify-between">
+		<div>
+			<h1 class="text-2xl font-semibold tracking-tight">Расписание и задачи</h1>
+			<p class="text-muted-foreground mt-1 text-sm">Интервалы обновления модулей и ручной запуск refresh.</p>
+		</div>
+		<Button variant="outline" size="sm" onclick={load} disabled={loading}>
+			<RefreshCw class={loading ? 'animate-spin' : ''} />
+			Обновить
+		</Button>
 	</div>
 
 	<Card>
 		<CardHeader>
-			<CardTitle class="text-base">Модули и refresh</CardTitle>
-			<CardDescription>
-				POST /v1/modules/&#123;id&#125;/refresh (роль editor+). CDN/домены/AS — очередь; IP_RANGES — 204.
-			</CardDescription>
+			<CardTitle class="text-base">Модули</CardTitle>
+			<CardDescription>Запустить refresh вручную (CDN/домены/AS → очередь; IP_RANGES → 204)</CardDescription>
 		</CardHeader>
-		<CardContent>
-			<ScrollArea class="max-h-[min(55vh,480px)]">
-				<Table>
-					<TableHeader>
+		<CardContent class="p-0">
+			<Table>
+				<TableHeader>
+					<TableRow>
+						<TableHead>Модуль</TableHead>
+						<TableHead>Тип</TableHead>
+						<TableHead>Интервал</TableHead>
+						<TableHead>Cron</TableHead>
+						<TableHead class="text-right w-28"></TableHead>
+					</TableRow>
+				</TableHeader>
+				<TableBody>
+					{#each modules as m (m.id)}
 						<TableRow>
-							<TableHead>Модуль</TableHead>
-							<TableHead>Тип</TableHead>
-							<TableHead>Интервал</TableHead>
-							<TableHead>Cron</TableHead>
-							<TableHead class="text-right">Действие</TableHead>
+							<TableCell class="font-medium">{m.name}</TableCell>
+							<TableCell><Badge variant="outline">{m.type}</Badge></TableCell>
+							<TableCell>{intervalLabel(m.refresh_interval_sec)}</TableCell>
+							<TableCell class="font-mono text-xs">{m.cron_expr || '—'}</TableCell>
+							<TableCell class="text-right">
+								<Button size="xs" variant="secondary" disabled={!!refreshing[m.id]} onclick={() => refreshModule(m.id)}>
+									<RefreshCw class={refreshing[m.id] ? 'animate-spin' : ''} />
+									{refreshing[m.id] ? '…' : 'Refresh'}
+								</Button>
+							</TableCell>
 						</TableRow>
-					</TableHeader>
-					<TableBody>
-						{#each modules as m}
-							<TableRow>
-								<TableCell>{m.name}</TableCell>
-								<TableCell>
-									<Badge variant="outline">{m.type}</Badge>
-								</TableCell>
-								<TableCell>{intervalLabel(m.refresh_interval_sec)}</TableCell>
-								<TableCell class="font-mono text-xs">{m.cron_expr || '—'}</TableCell>
-								<TableCell class="text-right">
-									<Button
-										size="sm"
-										variant="secondary"
-										disabled={!!loading[m.id]}
-										onclick={() => refreshModule(m.id)}
-									>
-										{loading[m.id] ? '…' : 'Refresh'}
-									</Button>
-								</TableCell>
-							</TableRow>
-						{:else}
-							<TableRow>
-								<TableCell colspan={5} class="text-muted-foreground">Нет модулей</TableCell>
-							</TableRow>
-						{/each}
-					</TableBody>
-				</Table>
-			</ScrollArea>
+					{:else}
+						<TableRow>
+							<TableCell colspan={5} class="text-muted-foreground text-center py-6">
+								{loading ? 'Загрузка…' : 'Нет модулей'}
+							</TableCell>
+						</TableRow>
+					{/each}
+				</TableBody>
+			</Table>
 		</CardContent>
 	</Card>
 
@@ -129,33 +131,33 @@
 			<CardTitle class="text-base">Последние задачи</CardTitle>
 			<CardDescription>GET /v1/jobs</CardDescription>
 		</CardHeader>
-		<CardContent>
-			<ScrollArea class="max-h-[min(45vh,360px)]">
-				<Table>
-					<TableHeader>
+		<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>
-							<TableHead>Вид</TableHead>
-							<TableHead>Статус</TableHead>
-							<TableHead>Создана</TableHead>
+							<TableCell class="font-medium">{j.kind}</TableCell>
+							<TableCell><Badge variant={jobStatusVariant(j.status)}>{j.status}</Badge></TableCell>
+							<TableCell class="text-xs text-muted-foreground">{j.created_at ? new Date(j.created_at).toLocaleString('ru') : '—'}</TableCell>
+							<TableCell class="text-xs text-destructive max-w-xs truncate">{j.error ?? ''}</TableCell>
 						</TableRow>
-					</TableHeader>
-					<TableBody>
-						{#each jobs as j}
-							<TableRow>
-								<TableCell class="font-mono text-xs">{j.kind}</TableCell>
-								<TableCell>
-									<Badge variant="outline">{j.status}</Badge>
-								</TableCell>
-								<TableCell class="text-xs whitespace-nowrap">{j.created_at ?? '—'}</TableCell>
-							</TableRow>
-						{:else}
-							<TableRow>
-								<TableCell colspan={3} class="text-muted-foreground">Нет задач</TableCell>
-							</TableRow>
-						{/each}
-					</TableBody>
-				</Table>
-			</ScrollArea>
+					{:else}
+						<TableRow>
+							<TableCell colspan={4} class="text-muted-foreground text-center py-6">
+								{loading ? 'Загрузка…' : 'Нет задач'}
+							</TableCell>
+						</TableRow>
+					{/each}
+				</TableBody>
+			</Table>
 		</CardContent>
 	</Card>
 </div>
diff --git a/web/src/routes/settings/+page.svelte b/web/src/routes/settings/+page.svelte
index bc7159f..0858b0f 100644
--- a/web/src/routes/settings/+page.svelte
+++ b/web/src/routes/settings/+page.svelte
@@ -1,13 +1,22 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
+	import { onMount } from 'svelte';
 	import { TOKEN_STORAGE_KEY } from '$lib/api/client.js';
+	import { apiJSON, apiMutate } from '$lib/api/client.js';
+	import type { AppSettings } from '$lib/api/types.js';
 	import { Button } from '$lib/components/ui/button/index.js';
-	import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '$lib/components/ui/card/index.js';
+	import { Card, CardContent, CardHeader, CardTitle, CardDescription } 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 { Textarea } from '$lib/components/ui/textarea/index.js';
 	import { toast } from 'svelte-sonner';
+	import Save from '@lucide/svelte/icons/save';
 
 	let token = $state('');
+	let apiSettings = $state<AppSettings | null>(null);
+	let settingsJson = $state('');
+	let loadingSettings = $state(false);
+	let savingSettings = $state(false);
 
 	$effect(() => {
 		if (browser) {
@@ -15,37 +24,102 @@
 		}
 	});
 
-	function save() {
+	function saveToken() {
 		if (!browser) return;
 		const t = token.trim();
 		if (t) localStorage.setItem(TOKEN_STORAGE_KEY, t);
 		else localStorage.removeItem(TOKEN_STORAGE_KEY);
-		toast.success('Токен сохранён в этом браузере');
+		toast.success('Токен сохранён');
 	}
+
+	async function loadApiSettings() {
+		loadingSettings = true;
+		try {
+			const s = await apiJSON<AppSettings>('/v1/settings');
+			apiSettings = s;
+			settingsJson = JSON.stringify(s, null, 2);
+		} catch (e) {
+			toast.error(e instanceof Error ? e.message : String(e));
+		} finally {
+			loadingSettings = false;
+		}
+	}
+
+	async function saveApiSettings() {
+		savingSettings = true;
+		try {
+			const parsed = JSON.parse(settingsJson);
+			await apiMutate('/v1/settings', 'PATCH', parsed);
+			toast.success('Настройки сохранены');
+			await loadApiSettings();
+		} catch (e) {
+			toast.error(e instanceof Error ? e.message : String(e));
+		} finally {
+			savingSettings = false;
+		}
+	}
+
+	onMount(loadApiSettings);
 </script>
 
-<div class="mx-auto max-w-lg space-y-6">
+<div class="mx-auto max-w-2xl space-y-6">
 	<div>
 		<h1 class="text-2xl font-semibold tracking-tight">Настройки</h1>
-		<p class="text-muted-foreground mt-1 text-sm">
-			Bearer-токен для заголовка <code class="bg-muted rounded px-1 py-0.5 text-xs">Authorization</code>. Для
-			локального демо с
-			<code class="bg-muted rounded px-1 py-0.5 text-xs">EVOBGP_DEV_INSECURE=1</code>
-			можно использовать токен <code class="bg-muted rounded px-1 py-0.5 text-xs">dev</code>.
-		</p>
+		<p class="text-muted-foreground mt-1 text-sm">Токен доступа и параметры API.</p>
 	</div>
 
+	<!-- Token -->
 	<Card>
 		<CardHeader>
 			<CardTitle class="text-base">API-ключ</CardTitle>
-			<CardDescription>Хранится только в localStorage</CardDescription>
+			<CardDescription>
+				Bearer-токен хранится только в localStorage браузера. Для локального демо с
+				<code class="bg-muted rounded px-1 py-0.5 text-xs">EVOBGP_DEV_INSECURE=1</code>
+				используйте токен <code class="bg-muted rounded px-1 py-0.5 text-xs">dev</code>.
+			</CardDescription>
 		</CardHeader>
 		<CardContent class="space-y-4">
 			<div class="space-y-2">
 				<Label for="token">Токен</Label>
 				<Input id="token" type="password" autocomplete="off" bind:value={token} placeholder="Bearer …" />
 			</div>
-			<Button type="button" onclick={save}>Сохранить</Button>
+			<Button onclick={saveToken}>
+				<Save />
+				Сохранить токен
+			</Button>
+		</CardContent>
+	</Card>
+
+	<!-- API Settings -->
+	<Card>
+		<CardHeader>
+			<CardTitle class="text-base">Настройки системы (API)</CardTitle>
+			<CardDescription>
+				<code class="text-xs">GET/PATCH /v1/settings</code> — глобальные параметры control plane.
+				Требуется роль operator.
+			</CardDescription>
+		</CardHeader>
+		<CardContent class="space-y-4">
+			{#if loadingSettings}
+				<p class="text-muted-foreground text-sm">Загрузка…</p>
+			{:else if apiSettings !== null}
+				<div class="space-y-2">
+					<Label for="settings-json">JSON настроек</Label>
+					<Textarea
+						id="settings-json"
+						bind:value={settingsJson}
+						rows={12}
+						class="font-mono text-xs"
+						spellcheck={false}
+					/>
+				</div>
+				<Button onclick={saveApiSettings} disabled={savingSettings}>
+					<Save />
+					{savingSettings ? 'Сохранение…' : 'Применить настройки'}
+				</Button>
+			{:else}
+				<Button variant="outline" onclick={loadApiSettings}>Загрузить настройки</Button>
+			{/if}
 		</CardContent>
 	</Card>
 </div>