feat(ui): refactor components and enhance UX

Updated various UI components to improve user experience and maintainability. Key changes include: - Refactored `PageHeader` to remove icon handling, simplifying its structure. - Replaced `KpiMetricsGrid` with `SectionCards` for better layout consistency. - Enhanced `AppShell` and navigation components to utilize a grouped navigation structure, improving accessibility and organization. - Introduced new properties in `crud-list-page` for handling empty states and loading indicators. - Updated styles and classes for better visual consistency across components. These changes streamline the UI and enhance the overall user experience across the application.
fix(data-table): prevent unnecessary page reset on data change
2026-07-01 00:42:50 +07:00 · 2026-07-01 00:27:39 +07:00 · 2026-07-01 00:11:16 +07:00 · 2026-06-30 23:54:28 +07:00 · 2026-06-12 22:44:39 +07:00 · 2026-06-12 21:56:36 +07:00
450 changed files with 15697 additions and 2767 deletions
@@ -0,0 +1,34 @@
+# shadcn-svelte в EvoBGP monorepo
+
+Использовать при добавлении примитивов, блоков, правке темы в `apps/web` / `packages/ui`.
+
+## Структура
+
+- Примитивы: `packages/ui/src/components/` → `@evobgp/ui/components/*`
+- Паттерны приложения: `apps/web/src/lib/components/patterns/`
+- CLI всегда из `apps/web/`
+
+## Workflow
+
+1. Проверить, есть ли компонент в `packages/ui/src/components/`
+2. `cd apps/web && pnpm dlx shadcn-svelte@latest add <name> -y -o`
+3. Если файлы в `apps/web/@evobgp/ui/` — перенести в `packages/ui/src/components/`
+4. Импорты shadcn в app: `@evobgp/ui/components/<name>/index.js`
+5. `pnpm --filter @evobgp/web check && pnpm --filter @evobgp/web lint`
+
+## Тема
+
+- `packages/ui/src/styles/globals.css` с `@source`
+- Импорт в `apps/web/src/routes/layout.css`: `@import '@evobgp/ui/styles/globals.css';`
+
+## Не использовать
+
+- React shadcn/ui примеры без адаптации под Svelte 5
+- ReUI (`@reui/*`) — только React
+- Legacy `$lib/components/ui/` re-exports
+
+## Документация
+
+- https://shadcn-svelte.com/docs
+- https://shadcn-svelte.com/llms.txt
+- Monorepo: `.cursor/rules/frontend-monorepo.mdc`
@@ -1,6 +1,6 @@
 {
-  "pid": 44608,
+  "pid": 46304,
  "version": "0.9.9",
  "socketPath": "\\\\.\\pipe\\codegraph-97b92efdcc5351da",
-  "startedAt": 1781240018712
+  "startedAt": 1782824332519
 }
@@ -0,0 +1,75 @@
+---
+description: shadcn-svelte Monorepo — apps/web + packages/ui + packages/shared, CLI workflow
+globs: apps/web/**/*,packages/ui/**/*,packages/shared/**/*
+alwaysApply: false
+---
+
+# Frontend Monorepo (shadcn-svelte)
+
+Структура по образцу vps-tracker, стек — **SvelteKit 2 + Svelte 5 + shadcn-svelte** (не React/ReUI).
+
+## Layout
+
+```
+apps/web/              # SvelteKit (routes, queries, domain components)
+packages/ui/           # @evobgp/ui — shadcn-svelte primitives (только CLI output)
+packages/shared/       # @evobgp/shared — Zod contracts, API types
+```
+
+Go API в корне репозитория (`internal/`, `cmd/`) без изменений.
+
+## Два components.json
+
+| Файл | Назначение |
+|------|------------|
+| `apps/web/components.json` | App aliases; `ui` → `@evobgp/ui/components` |
+| `packages/ui/components.json` | UI package aliases |
+
+**Синхронизировать:** `style`, `iconLibrary`, `baseColor` в обоих файлах.
+
+## CLI — только из apps/web
+
+```powershell
+cd apps/web
+pnpm dlx shadcn-svelte@latest add button -y -o
+pnpm dlx shadcn-svelte@latest add sidebar -y -o
+pnpm dlx shadcn-svelte@latest add breadcrumb -y -o
+```
+
+Перед обновлением существующих компонентов: `pnpm dlx shadcn-svelte@latest add button --dry-run`
+
+## Куда CLI кладёт файлы
+
+| Команда | Куда |
+|---------|------|
+| `add button` | `packages/ui/src/components/button/` |
+| `add sidebar` | `packages/ui/src/components/sidebar/` |
+
+Если CLI кладёт в `apps/web/@evobgp/ui/` — перенести в `packages/ui/src/components/`.
+
+## Импорты
+
+```svelte
+import { Button } from '@evobgp/ui/components/button/index.js';
+import { cn } from '@evobgp/ui/lib/utils';
+import '@evobgp/ui/styles/globals.css';   // только в routes/layout.css
+import type { ModuleRow } from '@evobgp/shared/types/api.js';
+import { moduleCreateSchema } from '@evobgp/shared/contracts/modules.js';
+```
+
+| Запрещено | Разрешено |
+|-----------|-----------|
+| `$lib/ui/core/*` | `@evobgp/ui/components/*` |
+| `apps/web/src/lib/components/ui/` (legacy re-export) | `packages/ui/src/components/` |
+| Ручное редактирование темы вне CLI | shadcn-svelte theming docs |
+
+## globals.css
+
+`packages/ui/src/styles/globals.css` с `@source` на `packages/ui` и `apps/web/src`.
+
+## Проверка после правок
+
+```powershell
+pnpm --filter @evobgp/web check
+pnpm --filter @evobgp/web lint
+```
@@ -0,0 +1,73 @@
+---
+description: UI-паттерны apps/web — shared components, spacing, матрица (Svelte, без ReUI)
+globs: apps/web/**/*
+alwaysApply: false
+---
+
+# Frontend UI Patterns (Svelte)
+
+Эталон UX: vps-tracker (`PageShell`, `QueryState`, `SectionCards`, `DataTableCard`). ReUI **не используется** — Data Table = shadcn-svelte + `AppDataTable` / `DataTableCard`.
+
+## Иерархия
+
+```
+@evobgp/ui/components/*     ← shadcn-svelte CLI (packages/ui)
+apps/web/src/lib/components/  ← shared + domain + layout
+  page-shell.svelte
+  query-state.svelte
+  section-cards.svelte
+  data-table-card.svelte
+  status-badge.svelte
+  form-sheet.svelte
+  crud-list-page.svelte
+  list-filters-bar.svelte
+  patterns/                   ← AppDataTable, FormField, ConfirmDialog, EmptyState
+  layout/app-shell.svelte
+  domain-*/                   ← modules, network, operations…
+```
+
+## Матрица
+
+| Элемент | Компонент | Primitive |
+|---------|-----------|-----------|
+| Page wrapper | `PageShell` | — |
+| Page title | `PageHeader` (`ui/app/page-header`) — **без icon** | — |
+| Stat metrics | `SectionCards` | `Card` |
+| Data list | `DataTableCard` + `AppDataTable` | `Table` |
+| Filters | `ListFiltersBar` | `Select`, `Badge` |
+| Empty | `EmptyState` | — |
+| Loading / Error | `QueryState` | `Skeleton`, `Alert` |
+| Status | `StatusBadge` | `Badge` |
+| Create/Edit form | `FormSheet` / Dialog | `Sheet`, `Field` |
+| Delete confirm | `ConfirmDialog` | `AlertDialog` |
+| Nav | `AppShell` + `navGroups` | `Sidebar` |
+| Breadcrumbs | `AppShell` header (parent route) | `Breadcrumb` |
+| Tabs (dashboard, ops) | `LINE_TAB_TRIGGER_CLASS` | `Tabs` |
+
+## Запрещено
+
+- `icon` / `iconClass` в `PageHeader`
+- `KpiMetricsGrid` — только `SectionCards`
+- `mx-auto max-w-*` на `PageShell` list-страниц
+- Голый `AppDataTable` без `DataTableCard` на list-экранах
+
+## Spacing
+
+- `flex` + `gap-*`, не `space-y-*`
+- Page: `gap-4 md:gap-6`, padding `p-4 md:p-6`
+- Loading страницы → `Skeleton`, не page-level `Spinner`
+- Max 1 primary CTA на экран
+
+## Docs
+
+- shadcn-svelte: https://shadcn-svelte.com/docs
+- llms.txt: https://shadcn-svelte.com/llms.txt
+- Data layer: `@tanstack/svelte-query` в `apps/web/src/lib/queries/`
+
+## Overlay
+
+| Сценарий | Компонент |
+|----------|-----------|
+| Create/edit | `Sheet` / `FormSheet` |
+| Destructive | `ConfirmDialog` |
+| Preview | `Dialog` |
@@ -1,126 +1,55 @@
 ---
-description: EvoBGP WebUI — shadcn-svelte, Svelte 5, слои ui/core|patterns|app
+description: EvoBGP WebUI — shadcn-svelte monorepo, Svelte 5, @evobgp/ui
 globs:
-  - web/**
+  - apps/web/**
+  - packages/ui/**
+  - packages/shared/**
 alwaysApply: false
 ---

-# Web UI — shadcn-svelte
+# Web UI — shadcn-svelte (monorepo)

-**Источник правды:** https://shadcn-svelte.com/docs (не React shadcn/ui, не Legacy Docs).
+**Источник правды:** https://shadcn-svelte.com/docs

-Общие правила Go/API: `.cursor/rules/engineering.mdc`. Локальная карта: `web/README.md`.
+Monorepo: [`frontend-monorepo.mdc`](frontend-monorepo.mdc), паттерны: [`frontend-ui-patterns.mdc`](frontend-ui-patterns.mdc). Skill: [`.agents/skills/shadcn-svelte/SKILL.md`](.agents/skills/shadcn-svelte/SKILL.md).

-## Слои UI
+## Слои

 | Слой | Путь | Назначение |
 |------|------|------------|
-| Примитивы | `src/lib/ui/core/` | shadcn-svelte (только CLI `add`) |
-| Паттерны | `src/lib/ui/patterns/` | FormField, AppDataTable, ConfirmDialog, EmptyState |
-| App chrome | `src/lib/ui/app/` | Layout, PageHeader, `notify` |
-| Legacy | `src/lib/components/ui/` | Re-export; **не добавлять новые файлы** |
+| Примитивы | `packages/ui/src/components/` | shadcn-svelte (только CLI) |
+| Паттерны | `apps/web/src/lib/components/patterns/` | AppDataTable, FormField, ConfirmDialog |
+| Shared UI | `apps/web/src/lib/components/` | PageShell, QueryState, SectionCards |
+| App chrome | `apps/web/src/lib/ui/app/` | PageHeader, toast, nav |
+| Контракты | `packages/shared/` | types + Zod |

-Тема: `src/routes/layout.css`, `src/lib/ui/app/tokens.md`. CLI из `web/`: `npx shadcn-svelte@latest add <component> -y -o`.
+Тема: `packages/ui/src/styles/globals.css` → импорт в `apps/web/src/routes/layout.css`.

---
+CLI из `apps/web/`:

-## Правила
-
-**WEB-01** | MUST | Перед новым UI — проверить https://shadcn-svelte.com/docs/components; использовать компонент, не HTML+CSS с нуля.
-*Rationale:* Open Code + единый дизайн.
-*Проверка:* review; нет голых `<button class=…>`.
-
-**WEB-02** | MUST | Отсутствующий примитив — `npx shadcn-svelte@latest add <component> -y -o` → `src/lib/ui/core/`.
-*Rationale:* Distribution через CLI и `components.json`.
-*Проверка:* файлы только в `ui/core`.
-
-**WEB-03** | NEVER | Альтернативные UI-kit'ы (Material, Vuetify, DaisyUI-only без shadcn-примитива).
-*Проверка:* `package.json` review.
-
-**WEB-04** | MUST | Комозиция по docs: все sub-компоненты (`DialogHeader`, `TableRow`, `Field`, …).
-*Проверка:* сверка со страницей компонента в docs.
-
-**WEB-05** | MUST | Формы — Formsnap + `sveltekit-superforms`; UI в `ui/patterns/form`, не ad-hoc валидация на странице.
-*Проверка:* https://shadcn-svelte.com/docs/components/form
-
-**WEB-06** | MUST | Таблицы — Data Table + `@tanstack/table-core`; на страницах — `AppDataTable` из patterns.
-*Проверка:* https://shadcn-svelte.com/docs/components/data-table
-
-**WEB-07** | MUST | Toast — Sonner через `notify` из `ui/app/toast.js`.
-*Проверка:* https://shadcn-svelte.com/docs/components/sonner
-
-**WEB-08** | MUST | Иконки — `@lucide/svelte` (`components.json` → `iconLibrary: lucide`).
-*Проверка:* imports.
-
-**WEB-09** | MUST | Цвета — CSS-переменные `layout.css` и токены `tokens.md`; не hex/rgb на страницах.
-*Проверка:* grep `#[0-9a-f]{3,6}` в `routes/`.
-
-**WEB-10** | SHOULD | Кастомизация — правка `ui/core` (Open Code), не `!important` поверх API.
-*Проверка:* review.
-
-**WEB-11** | MUST | `routes/**` — композиция `ui/core` + `ui/patterns` + `ui/app`; не копировать целые примитивы shadcn в route.
-*Проверка:* review.
-
-**WEB-12** | NEVER | Примеры React shadcn/ui или Svelte 4 Legacy без адаптации под https://shadcn-svelte.com/docs/migration/svelte-5
-*Проверка:* `npm run check`.
-
-**WEB-13** | MUST | Реактивность — Svelte 5 runes (`$state`, `$derived`, `$effect`); не `export let` для локального state страниц.
-*Проверка:* `npm run check`; Svelte MCP.
-
-**WEB-14** | SHOULD | Нетривиальный UI — прочитать страницу компонента (props, a11y).
-*Проверка:* PR description.
-
-**WEB-15** | MUST | Сомнения — https://shadcn-svelte.com/llms.txt , Svelte MCP, `npm run check`.
-*Проверка:* локально.
-
-**WEB-19** | MUST | **После любого изменения `web/**`** — перед завершением задачи агент **обязан** выполнить в `web/`:
 ```powershell
-npm run check
-npm run lint
+pnpm dlx shadcn-svelte@latest add <component> -y -o
 ```
-Если `npm run lint` падает (Prettier) — **сначала** `npx prettier --write <изменённые файлы>` или `npx prettier --write .`, затем снова `npm run check` и `npm run lint`. Не сдавать PR/ответ, пока обе команды не exit 0.
-*Rationale:* CI job `web` = `check` + `prettier --check`; `svelte-check` не ловит форматирование.
-*Проверка:* CI job `web`; pre-commit hook `prettier-web`.

-**WEB-16** | MUST | Подтверждение удаления — `ConfirmDialog` из patterns, не `window.confirm`.
-*Проверка:* review.
+## Правила (кратко)

-**WEB-17** | MUST | Пустые списки — `EmptyState` из patterns.
-*Проверка:* review.
+- **WEB-01** Новый UI — сначала shadcn-svelte docs; не HTML+CSS с нуля
+- **WEB-02** Примитивы только через CLI → `packages/ui`
+- **WEB-05** Формы — Formsnap + superforms; `patterns/form/`
+- **WEB-06** Таблицы — `AppDataTable` / `DataTableCard`
+- **WEB-07** Toast — `notify` из `ui/app/toast.ts`
+- **WEB-08** Иконки — `@lucide/svelte`
+- **WEB-09** Цвета — CSS variables; не hex в routes
+- **WEB-13** Svelte 5 runes
+- **WEB-16** Удаление — `ConfirmDialog`
+- **WEB-17** Пустые списки — `EmptyState`
+- **WEB-19** После правок `apps/web/**`:

-**WEB-18** | SHOULD | Повторяемая комбинация core (≥2 раза) — вынести в `ui/patterns/`.
-*Проверка:* review.
-
---
-
-## Documentation Sync (Web)
-
-**DOC-SYNC-06** | MUST | UI — первично https://shadcn-svelte.com/docs; при конфликте с блогами/Stack Overflow побеждает официальная страница компонента.
-**DOC-SYNC-07** | MUST | Перед `add` — сверить Installation/Theming с `web/components.json` и `src/routes/layout.css`.
-
-Tailwind v4: https://shadcn-svelte.com/docs/migration/tailwind-v4
-
---
+```powershell
+pnpm --filter @evobgp/web check
+pnpm --filter @evobgp/web lint
+```

 ## Enforcement

-**Обязательный финальный шаг агента при правках `web/**`:** `npm run check` **и** `npm run lint` (см. **WEB-19**). Только `check` недостаточно.
-
-```powershell
-cd web
-npm run check
-npm run lint
-# при warn/fail lint:
-npx prettier --write .
-npm run check
-npm run lint
-```
-
-**PR checklist `web/**`:**
- [ ] `npm run check` — exit 0
- [ ] `npm run lint` (prettier --check) — exit 0
- [ ] `ui/core` / `ui/patterns`, не дубли примитивов
- [ ] Новые примитивы через shadcn CLI
- [ ] Ссылка на docs компонента (если новый паттерн)
-
-**CI:** job `web` — `npm run check` + `npm run lint`.
+PR checklist: `check` + `lint` exit 0; примитивы в `@evobgp/ui`, не дубли в routes.
@@ -98,9 +98,9 @@ jobs:
                openapi=true
                go=true
                ;;
-              web/README.md|web/components.json)
+              apps/web/README.md|apps/web/components.json)
                ;;
-              web/*)
+              apps/web/*|packages/ui/*|packages/shared/*|pnpm-workspace.yaml|pnpm-lock.yaml)
                web=true
                ;;
              deploy/bird/*)
@@ -126,7 +126,7 @@ jobs:
              docs/*)
                go=true
                ;;
-              package.json|package-lock.json|.releaserc.json)
+              package.json|package-lock.json|pnpm-lock.yaml|pnpm-workspace.yaml|.releaserc.json)
                full_pipeline=true
                ;;
              *)
@@ -169,16 +169,16 @@ jobs:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
-          node-version: "20"
-          cache: npm
-          cache-dependency-path: web/package-lock.json
-      - name: npm ci, check, lint
+          node-version: "22"
+      - uses: pnpm/action-setup@v4
+        with:
+          version: 10.33.2
+      - name: pnpm install, check, lint
        run: |
          set -euxo pipefail
-          cd web
-          npm ci
-          npm run check
-          npm run lint
+          pnpm install --frozen-lockfile
+          pnpm --filter @evobgp/web check
+          pnpm --filter @evobgp/web lint

  # ---------------------------------------------------------------------------
  go:
@@ -17,3 +17,6 @@ Thumbs.db
 .env.*
 !.env.example
 !.env.*.example
+
+# Compose runtime log sidecar output (deploy/compose/runtime-logs)
+deploy/compose/runtime-logs/
@@ -13,7 +13,7 @@ repos:
    hooks:
      - id: prettier-web
        name: prettier (web)
-        entry: bash -c 'cd web && npx prettier --check .'
+        entry: bash -c 'pnpm --filter @evobgp/web lint'
        language: system
-        files: ^web/
+        files: ^apps/web/
        pass_filenames: false
@@ -1,70 +1,53 @@
-# Руководство для ИИ-агентов (экономия контекста)
+# EvoBGP — руководство для ИИ-агентов

-Краткие ориентиры по репозиторию **EvoBGP**, чтобы не тратить токены на полное сканирование дерева и повторное чтение одних и тех же файлов.
+Краткая карта репозитория. Полная архитектура: [docs/architecture.md](docs/architecture.md). HTTP: [docs/openapi.yaml](docs/openapi.yaml).

-## С чего начать (минимум чтения)
+## Monorepo (фронтенд)

-0. **Инженерные правила** — при изменении кода следовать [.cursor/rules/engineering.mdc](.cursor/rules/engineering.mdc); для `web/` — [.cursor/rules/web-shadcn.mdc](.cursor/rules/web-shadcn.mdc); для `birdfmt` / `pipeline` / BIRD — [.cursor/rules/networking-bird.mdc](.cursor/rules/networking-bird.mdc). **Context7 (документация библиотек)** — закреплённые ID стека: [.cursor/rules/context7-stack.mdc](.cursor/rules/context7-stack.mdc); скилл [.cursor/skills/context7-evobgp/SKILL.md](.cursor/skills/context7-evobgp/SKILL.md).
-1. **[docs/README.md](docs/README.md)** — оглавление и роли читателя.
-2. **[docs/architecture.md](docs/architecture.md)** — компоненты `cmd/`, карта `internal/`, потоки данных (одного этого файла обычно достаточно для ориентации).
-3. Задача-специфично: [docs/api.md](docs/api.md), [docs/access.md](docs/access.md), [web/README.md](web/README.md) — только если меняете API, доступ или фронт.
-
-Источник правды по HTTP-контракту: **[docs/openapi.yaml](docs/openapi.yaml)**. Не дублируйте длинные фрагменты спецификации в ответах — ссылайтесь на путь и тег/операцию.
-
-## Карта кода (куда смотреть)
-
-| Область | Где искать |
-|---------|------------|
-| REST, auth, CORS | `internal/httpapi/` |
-| Бизнес-слой и абстракция хранилища | `internal/store/` |
-| PostgreSQL | `internal/repository/`, `internal/db/`, `migrations/` |
-| Фоновые задачи | `internal/jobs/` |
-| Цепочка refresh модуля (ingest+render, BIRD preview) | `internal/pipeline/` |
-| Конфиг BIRD, `birdc` | `internal/birdfmt/`, `internal/birddeploy/` |
-| Бандлы и подписи | `internal/bundle/`, `internal/signing/` |
-| Точки входа процессов | `cmd/*/` |
-| Веб (SvelteKit) | `web/` |
-| Compose, деплой | `deploy/compose/` |
-
-Точки входа бинарников и их роли — в таблице в начале [docs/architecture.md](docs/architecture.md).
-
-## Как не раздувать контекст
-
- **Сначала узкий поиск:** `grep`/поиск по символу или короткий семантический запрос по одной папке (`internal/httpapi/`, `internal/pipeline/`, …), а не чтение всех `.go` подряд.
- **Читайте файлы целиком только при необходимости:** большие файлы — с `offset`/`limit` или по найденным строкам.
- **Не подтягивайте в контекст:** `web/node_modules/`, сгенерированные артефакты сборки, бинарники, полный `openapi.html`, если достаточно `openapi.yaml`.
- **Повторное использование:** если [docs/architecture.md](docs/architecture.md) уже описывает поток — не пересказывайте его длинно; укажите документ и конкретный подпункт задачи.
- **Длинные планы:** `.cursor/plans/*.plan.md` — для истории решений; для навигации пользователю достаточно `docs/`; не читайте план целиком без причины.
-
-## Коммиты (Conventional Commits)
-
-Если пользователь просит **коммит**, **commit message**, **закоммить**, **git commit**, **`/commit-message`** или это следует из плана — **сразу**:
-
-1. Shell: `powershell -NoProfile -File scripts/commit/staged-context.ps1` (первый вызов, до текста коммита).
-2. Скилл [.cursor/skills/commit-message/SKILL.md](.cursor/skills/commit-message/SKILL.md) и правило [.cursor/rules/conventional-commits.mdc](.cursor/rules/conventional-commits.mdc).
-
-Без вывода скрипта (exit 0) **не** придумывать сообщение коммита. Заголовок — EN, тело — RU; несвязанные области — auto-split (скилл).
-
-**Кнопка ✨ Generate commit message в Source Control** skill/rule **не** использует. Для сообщений по правилам EvoBGP — Agent Chat → **`/commit-message`** (см. [.cursor/commands/commit-message.md](.cursor/commands/commit-message.md)).
-
-## Команды и среда
-
- Консоль пользователя: **PowerShell**; пути в стиле `deploy\compose`.
- Быстрый старт и переменные: [docs/quickstart.md](docs/quickstart.md), [README.md](README.md).
- **Go:** после правок — `gofmt -w`, `go vet ./...`, `scripts/lint-go.ps1` (как CI golangci-lint).
-
-## Язык документации проекта
-
-Пользовательская документация в `docs/` — преимущественно на русском. Комментарии и имена в коде — в существующем стиле репозитория.
-
-## Svelte / фронтенд
-
-При правках `web/**/*.svelte` или Svelte-модулей следуйте [.cursor/rules/web-shadcn.mdc](.cursor/rules/web-shadcn.mdc) (**WEB-19**): перед завершением задачи **обязательно**:
-
-```powershell
-cd web
-npm run check
-npm run lint
+```
+EvoBGP/
+├── cmd/, internal/          # Go API /v1
+├── apps/web/                # SvelteKit SPA (@evobgp/web)
+├── packages/ui/             # @evobgp/ui — shadcn-svelte primitives
+├── packages/shared/         # @evobgp/shared — types, Zod contracts
+└── pnpm-workspace.yaml
 ```

-Если `lint` падает — `npx prettier --write .` и повторить обе команды. CI job `web` не пропускает без этого.
+| Слой | Импорт |
+|------|--------|
+| Примитивы | `@evobgp/ui/components/*` |
+| CSS | `@evobgp/ui/styles/globals.css` |
+| Типы/контракты | `@evobgp/shared/types/*`, `@evobgp/shared/contracts/*` |
+| Паттерны UI | `$lib/components/*`, `$lib/components/patterns/*` |
+| Queries | `$lib/queries/*` (`@tanstack/svelte-query`) |
+
+## С чего начать
+
+1. **Правила:** [engineering.mdc](.cursor/rules/engineering.mdc), [web-shadcn.mdc](.cursor/rules/web-shadcn.mdc), [frontend-monorepo.mdc](.cursor/rules/frontend-monorepo.mdc)
+2. **Фронт:** [apps/web/README.md](apps/web/README.md)
+3. **Go:** `internal/httpapi/`, `internal/store/`, `internal/pipeline/`
+
+## Команды
+
+```powershell
+pnpm install
+pnpm --filter @evobgp/web dev
+pnpm --filter @evobgp/web build
+pnpm --filter @evobgp/web check
+pnpm --filter @evobgp/web lint
+```
+
+После правок `apps/web/**` — **обязательно** `check` и `lint` (WEB-19).
+
+## UX-эталон (vps-tracker, без ReUI)
+
+- **Shell:** `layout/app-shell.svelte` — sidebar-07, `collapsible="icon"`, 5 nav-групп (`nav.ts`), `AppBrand`, `ThemeMenu` в top header, breadcrumb с parent
+- **Страница:** `PageShell` → `PageHeader` (без icon) → `QueryState` / контент
+- **Метрики:** `SectionCards` (не KpiMetricsGrid)
+- **Таблицы:** `DataTableCard` + `AppDataTable` (не голый `Card` + `Table`)
+- **Tabs:** line-variant через `LINE_TAB_TRIGGER_CLASS` (`$lib/ui/app/tabs.ts`)
+- **Тема:** `packages/ui/src/styles/globals.css` синхронизирован с vps-tracker (semantic tokens)
+
+## Коммиты
+
+При запросе коммита: [conventional-commits.mdc](.cursor/rules/conventional-commits.mdc), скилл `.cursor/skills/commit-message/SKILL.md`.
@@ -1,6 +1,6 @@
 # EvoBGP

-Control plane для управления префиксами, модулями ingest, ревизиями конфигурации BIRD и выкладкой на BGP-спикеры. Репозиторий включает HTTP API на Go, веб-интерфейс (`web/`), CLI для реплик (`evobgp-node`), агент и Docker Compose для локального и эталонного развёртывания.
+Control plane для управления префиксами, модулями ingest, ревизиями конфигурации BIRD и выкладкой на BGP-спикеры. Репозиторий включает HTTP API на Go, веб-интерфейс (`apps/web/`), CLI для реплик (`evobgp-node`), агент и Docker Compose для локального и эталонного развёртывания.

 ## Документация

@@ -0,0 +1,40 @@
+# EvoBGP WebUI (`@evobgp/web`)
+
+SvelteKit-панель управления EvoBGP. Monorepo: `apps/web` + `packages/ui` + `packages/shared`.
+
+Правила: [.cursor/rules/web-shadcn.mdc](../../.cursor/rules/web-shadcn.mdc), [frontend-monorepo.mdc](../../.cursor/rules/frontend-monorepo.mdc).
+
+## Структура
+
+| Путь                           | Назначение                                  |
+| ------------------------------ | ------------------------------------------- |
+| `packages/ui/src/components/`  | shadcn-svelte примитивы (`@evobgp/ui`)      |
+| `src/lib/components/`          | PageShell, QueryState, SectionCards, domain |
+| `src/lib/components/patterns/` | AppDataTable, FormField, ConfirmDialog      |
+| `src/lib/ui/app/`              | PageHeader, nav, toast                      |
+| `src/lib/queries/`             | TanStack Query factories                    |
+| `packages/shared/`             | API types + Zod contracts                   |
+
+## Разработка
+
+Из корня репозитория:
+
+```powershell
+pnpm install
+pnpm --filter @evobgp/web dev
+pnpm --filter @evobgp/web check
+pnpm --filter @evobgp/web lint
+pnpm --filter @evobgp/web build
+```
+
+Добавление shadcn-svelte (из `apps/web/`):
+
+```powershell
+pnpm dlx shadcn-svelte@latest add <component> -y -o
+```
+
+Тема: `packages/ui/src/styles/globals.css` → импорт в `src/routes/layout.css`.
+
+## Проверка перед PR
+
+`pnpm --filter @evobgp/web check` и `lint` — exit 0 (WEB-19).
@@ -1,13 +1,13 @@
 {
 	"$schema": "https://www.shadcn-svelte.com/schema.json",
 	"tailwind": {
-		"css": "src/routes/layout.css",
+		"css": "../../packages/ui/src/styles/globals.css",
 		"baseColor": "neutral"
 	},
 	"aliases": {
 		"components": "$lib/components",
 		"utils": "$lib/utils",
-		"ui": "$lib/ui/core",
+		"ui": "@evobgp/ui/components",
 		"hooks": "$lib/hooks",
 		"lib": "$lib"
 	},
@@ -1,5 +1,5 @@
 {
-	"name": "web",
+	"name": "@evobgp/web",
 	"private": true,
 	"version": "0.0.1",
 	"type": "module",
@@ -33,6 +33,9 @@
 		"vite": "^7.3.1"
 	},
 	"dependencies": {
+		"@evobgp/shared": "workspace:*",
+		"@evobgp/ui": "workspace:*",
+		"@tanstack/svelte-query": "^5.90.2",
 		"@tanstack/table-core": "^8.21.3",
 		"bits-ui": "^2.17.2",
 		"clsx": "^2.1.1",
@@ -0,0 +1 @@
+export * from '@evobgp/shared/types/api.js';
@@ -1,14 +1,14 @@
 <script lang="ts">
 	import { apiMutate } from '$lib/api/client.js';
 	import type { ApiKey, ApiKeyCreate, ApiKeyCreated, ApiKeyRole } from '$lib/api/types.js';
-	import { Button } from '$lib/ui/core/button/index.js';
+	import { Button } from '@evobgp/ui/components/button/index.js';
 	import {
 		Card,
 		CardContent,
 		CardDescription,
 		CardHeader,
 		CardTitle
-	} from '$lib/ui/core/card/index.js';
+	} from '@evobgp/ui/components/card/index.js';
 	import {
 		Dialog,
 		DialogContent,
@@ -16,12 +16,17 @@
 		DialogFooter,
 		DialogHeader,
 		DialogTitle
-	} from '$lib/ui/core/dialog/index.js';
-	import { Select, SelectContent, SelectItem, SelectTrigger } from '$lib/ui/core/select/index.js';
-	import FormField from '$lib/ui/patterns/form/form-field.svelte';
-	import AppInput from '$lib/ui/patterns/form/app-input.svelte';
-	import AppDataTable from '$lib/ui/patterns/data-table/app-data-table.svelte';
-	import { confirm } from '$lib/ui/patterns/confirm/confirm-state.svelte.js';
+	} from '@evobgp/ui/components/dialog/index.js';
+	import {
+		Select,
+		SelectContent,
+		SelectItem,
+		SelectTrigger
+	} from '@evobgp/ui/components/select/index.js';
+	import FormField from '$lib/components/patterns/form/form-field.svelte';
+	import AppInput from '$lib/components/patterns/form/app-input.svelte';
+	import AppDataTable from '$lib/components/patterns/data-table/app-data-table.svelte';
+	import { confirm } from '$lib/components/patterns/confirm/confirm-state.svelte.js';
 	import { notify, notifyApiError } from '$lib/ui/app/toast.js';
 	import Plus from '@lucide/svelte/icons/plus';
 	import Trash2 from '@lucide/svelte/icons/trash-2';
@@ -0,0 +1,73 @@
+<script lang="ts" generics="T">
+	import type { Snippet } from 'svelte';
+	import PageHeader from '$lib/ui/app/page-header/page-header.svelte';
+	import PageShell from '$lib/components/page-shell.svelte';
+	import QueryState from '$lib/components/query-state.svelte';
+	import TableSkeleton from '$lib/components/table-skeleton.svelte';
+
+	type Props = {
+		title: string;
+		description?: string;
+		actions?: Snippet;
+		data: T | undefined;
+		isLoading: boolean;
+		isError: boolean;
+		error?: unknown;
+		onRetry?: () => void;
+		empty?: boolean;
+		emptyTitle?: string;
+		emptyDescription?: string;
+		emptyAction?: Snippet;
+		skeleton?: Snippet;
+		sheet?: Snippet;
+		children: Snippet<[T]>;
+	};
+
+	let {
+		title,
+		description,
+		actions,
+		data,
+		isLoading,
+		isError,
+		error,
+		onRetry,
+		empty = false,
+		emptyTitle,
+		emptyDescription,
+		emptyAction,
+		skeleton,
+		sheet,
+		children
+	}: Props = $props();
+</script>
+
+<PageShell>
+	<PageHeader {title} {description}>
+		{#snippet actions()}
+			{#if actions}
+				{@render actions()}
+			{/if}
+		{/snippet}
+	</PageHeader>
+	<QueryState
+		{data}
+		{isLoading}
+		{isError}
+		{error}
+		{onRetry}
+		{empty}
+		{emptyTitle}
+		{emptyDescription}
+		{emptyAction}
+		skeleton={skeleton ?? tableSkeleton}
+		{children}
+	/>
+	{#if sheet}
+		{@render sheet()}
+	{/if}
+</PageShell>
+
+{#snippet tableSkeleton()}
+	<TableSkeleton />
+{/snippet}
@@ -0,0 +1,42 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import {
+		Card,
+		CardContent,
+		CardHeader,
+		CardTitle,
+		CardDescription
+	} from '@evobgp/ui/components/card/index.js';
+	import { cn } from '$lib/utils.js';
+
+	type Props = {
+		title?: string;
+		description?: string;
+		toolbar?: Snippet;
+		class?: string;
+		children: Snippet;
+	};
+
+	let { title, description, toolbar, class: className, children }: Props = $props();
+</script>
+
+<Card class={cn('gap-0 py-0', className)}>
+	{#if title || description || toolbar}
+		<CardHeader
+			class="flex flex-row flex-wrap items-start justify-between gap-2 border-b px-4 py-3"
+		>
+			<div class="flex min-w-0 flex-col gap-0.5">
+				{#if title}
+					<CardTitle class="text-base">{title}</CardTitle>
+				{/if}
+				{#if description}
+					<CardDescription>{description}</CardDescription>
+				{/if}
+			</div>
+			{#if toolbar}
+				<div class="flex shrink-0 items-center gap-2">{@render toolbar()}</div>
+			{/if}
+		</CardHeader>
+	{/if}
+	<CardContent class="p-0">{@render children()}</CardContent>
+</Card>
@@ -1,25 +1,25 @@
 <script lang="ts">
 	import { apiMutate } from '$lib/api/client.js';
 	import type { BgpCommunity, BgpCommunityCreate } from '$lib/api/types.js';
-	import { Button } from '$lib/ui/core/button/index.js';
+	import { Button } from '@evobgp/ui/components/button/index.js';
 	import {
 		Card,
 		CardContent,
 		CardHeader,
 		CardTitle,
 		CardDescription
-	} from '$lib/ui/core/card/index.js';
+	} from '@evobgp/ui/components/card/index.js';
 	import {
 		Dialog,
 		DialogContent,
 		DialogHeader,
 		DialogTitle,
 		DialogFooter
-	} from '$lib/ui/core/dialog/index.js';
-	import FormField from '$lib/ui/patterns/form/form-field.svelte';
-	import AppInput from '$lib/ui/patterns/form/app-input.svelte';
-	import AppDataTable from '$lib/ui/patterns/data-table/app-data-table.svelte';
-	import { confirm } from '$lib/ui/patterns/confirm/confirm-state.svelte.js';
+	} from '@evobgp/ui/components/dialog/index.js';
+	import FormField from '$lib/components/patterns/form/form-field.svelte';
+	import AppInput from '$lib/components/patterns/form/app-input.svelte';
+	import AppDataTable from '$lib/components/patterns/data-table/app-data-table.svelte';
+	import { confirm } from '$lib/components/patterns/confirm/confirm-state.svelte.js';
 	import { notify, notifyApiError } from '$lib/ui/app/toast.js';
 	import Plus from '@lucide/svelte/icons/plus';
 	import Pencil from '@lucide/svelte/icons/pencil';
@@ -1,25 +1,25 @@
 <script lang="ts">
 	import { apiMutate } from '$lib/api/client.js';
 	import type { DohProfile, DohProfileCreate } from '$lib/api/types.js';
-	import { Button } from '$lib/ui/core/button/index.js';
+	import { Button } from '@evobgp/ui/components/button/index.js';
 	import {
 		Card,
 		CardContent,
 		CardHeader,
 		CardTitle,
 		CardDescription
-	} from '$lib/ui/core/card/index.js';
+	} from '@evobgp/ui/components/card/index.js';
 	import {
 		Dialog,
 		DialogContent,
 		DialogHeader,
 		DialogTitle,
 		DialogFooter
-	} from '$lib/ui/core/dialog/index.js';
-	import FormField from '$lib/ui/patterns/form/form-field.svelte';
-	import AppInput from '$lib/ui/patterns/form/app-input.svelte';
-	import AppDataTable from '$lib/ui/patterns/data-table/app-data-table.svelte';
-	import { confirm } from '$lib/ui/patterns/confirm/confirm-state.svelte.js';
+	} from '@evobgp/ui/components/dialog/index.js';
+	import FormField from '$lib/components/patterns/form/form-field.svelte';
+	import AppInput from '$lib/components/patterns/form/app-input.svelte';
+	import AppDataTable from '$lib/components/patterns/data-table/app-data-table.svelte';
+	import { confirm } from '$lib/components/patterns/confirm/confirm-state.svelte.js';
 	import { notify, notifyApiError } from '$lib/ui/app/toast.js';
 	import Plus from '@lucide/svelte/icons/plus';
 	import Pencil from '@lucide/svelte/icons/pencil';
@@ -0,0 +1,46 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import * as Sheet from '@evobgp/ui/components/sheet/index.js';
+	import { Button } from '@evobgp/ui/components/button/index.js';
+
+	type Props = {
+		open: boolean;
+		title: string;
+		description?: string;
+		onOpenChange: (open: boolean) => void;
+		onSubmit?: () => void;
+		submitLabel?: string;
+		submitting?: boolean;
+		children: Snippet;
+	};
+
+	let {
+		open,
+		title,
+		description,
+		onOpenChange,
+		onSubmit,
+		submitLabel = 'Сохранить',
+		submitting = false,
+		children
+	}: Props = $props();
+</script>
+
+<Sheet.Root {open} {onOpenChange}>
+	<Sheet.Content class="flex w-full flex-col gap-0 sm:max-w-lg">
+		<Sheet.Header>
+			<Sheet.Title>{title}</Sheet.Title>
+			{#if description}
+				<Sheet.Description>{description}</Sheet.Description>
+			{/if}
+		</Sheet.Header>
+		<div class="flex flex-1 flex-col gap-4 overflow-y-auto px-4 py-4">
+			{@render children()}
+		</div>
+		{#if onSubmit}
+			<Sheet.Footer>
+				<Button onclick={onSubmit} disabled={submitting}>{submitLabel}</Button>
+			</Sheet.Footer>
+		{/if}
+	</Sheet.Content>
+</Sheet.Root>
@@ -0,0 +1,105 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { page } from '$app/state';
+	import { resolve } from '$app/paths';
+	import * as Sidebar from '@evobgp/ui/components/sidebar/index.js';
+	import * as Breadcrumb from '@evobgp/ui/components/breadcrumb/index.js';
+	import { Separator } from '@evobgp/ui/components/separator/index.js';
+	import type { ThemePreference } from '$lib/theme.js';
+	import { allNavItems, navGroups, parentRoute, routeLabels } from '$lib/ui/app/layout/nav.js';
+	import AppBrand from '$lib/ui/app/layout/app-brand.svelte';
+	import ThemeMenu from '$lib/ui/app/layout/theme-menu.svelte';
+	import AppVersion from '$lib/ui/app/layout/app-version.svelte';
+	import AppMobileNav from '$lib/ui/app/layout/app-mobile-nav.svelte';
+
+	type Props = {
+		children: Snippet;
+		theme?: ThemePreference;
+	};
+
+	let { children, theme = $bindable<ThemePreference>('system') }: Props = $props();
+
+	let mobileNavOpen = $state(false);
+
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	const navHref = (href: string) => resolve(href as any);
+
+	function isActive(href: string) {
+		const pathname = page.url.pathname;
+		if (href === '/') return pathname === '/';
+		return pathname === href || pathname.startsWith(href + '/');
+	}
+
+	const activeItem = $derived(allNavItems.find((i) => isActive(i.href)) ?? allNavItems[0]);
+
+	const parentHref = $derived(parentRoute[activeItem.href]);
+	const parentLabel = $derived(parentHref ? routeLabels[parentHref] : null);
+	const currentLabel = $derived(routeLabels[activeItem.href] ?? 'EvoBGP');
+</script>
+
+<Sidebar.Provider>
+	<Sidebar.Root collapsible="icon">
+		<Sidebar.Header>
+			<AppBrand />
+		</Sidebar.Header>
+		<Sidebar.Content>
+			{#each navGroups as group (group.label)}
+				<Sidebar.Group>
+					<Sidebar.GroupLabel>{group.label}</Sidebar.GroupLabel>
+					<Sidebar.GroupContent>
+						<Sidebar.Menu>
+							{#each group.items as item (item.href)}
+								{@const Icon = item.icon}
+								<Sidebar.MenuItem>
+									<Sidebar.MenuButton isActive={isActive(item.href)} tooltipContent={item.label}>
+										{#snippet child({ props })}
+											<a href={navHref(item.href)} {...props}>
+												<Icon class="size-4" />
+												<span>{item.label}</span>
+											</a>
+										{/snippet}
+									</Sidebar.MenuButton>
+								</Sidebar.MenuItem>
+							{/each}
+						</Sidebar.Menu>
+					</Sidebar.GroupContent>
+				</Sidebar.Group>
+			{/each}
+		</Sidebar.Content>
+		<Sidebar.Footer>
+			<AppVersion />
+		</Sidebar.Footer>
+		<Sidebar.Rail />
+	</Sidebar.Root>
+	<Sidebar.Inset>
+		<header
+			class="sticky top-0 z-10 flex h-16 shrink-0 items-center gap-2 border-b bg-background/95 px-4 backdrop-blur supports-[backdrop-filter]:bg-background/80"
+		>
+			<div class="flex items-center gap-2 md:hidden">
+				<AppMobileNav bind:open={mobileNavOpen} bind:theme />
+				<span class="font-semibold tracking-tight">EvoBGP</span>
+			</div>
+			<Sidebar.Trigger class="-ms-1 hidden md:flex" />
+			<Separator orientation="vertical" class="mr-2 hidden h-4 md:block" />
+			<Breadcrumb.Root class="hidden min-w-0 md:flex">
+				<Breadcrumb.List>
+					{#if parentLabel && parentHref}
+						<Breadcrumb.Item class="hidden md:block">
+							<Breadcrumb.Link href={navHref(parentHref)}>{parentLabel}</Breadcrumb.Link>
+						</Breadcrumb.Item>
+						<Breadcrumb.Separator class="hidden md:block" />
+					{/if}
+					<Breadcrumb.Item>
+						<Breadcrumb.Page>{currentLabel}</Breadcrumb.Page>
+					</Breadcrumb.Item>
+				</Breadcrumb.List>
+			</Breadcrumb.Root>
+			<div class="ml-auto flex items-center gap-2">
+				<ThemeMenu bind:theme class="hidden md:flex" />
+			</div>
+		</header>
+		<main class="flex flex-1 flex-col gap-4 p-4 md:gap-6 md:p-6">
+			{@render children()}
+		</main>
+	</Sidebar.Inset>
+</Sidebar.Provider>
@@ -0,0 +1,45 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { Badge } from '@evobgp/ui/components/badge/index.js';
+	import { Button } from '@evobgp/ui/components/button/index.js';
+	import X from '@lucide/svelte/icons/x';
+
+	export type FilterChip = {
+		id: string;
+		label: string;
+	};
+
+	type Props = {
+		chips?: FilterChip[];
+		onRemoveChip?: (id: string) => void;
+		onClear?: () => void;
+		children?: Snippet;
+	};
+
+	let { chips = [], onRemoveChip, onClear, children }: Props = $props();
+</script>
+
+<div class="flex flex-wrap items-center gap-2">
+	{#if children}
+		{@render children()}
+	{/if}
+	{#each chips as chip (chip.id)}
+		<Badge variant="secondary" class="gap-1 pr-1">
+			{chip.label}
+			{#if onRemoveChip}
+				<Button
+					variant="ghost"
+					size="icon-sm"
+					class="size-5"
+					onclick={() => onRemoveChip(chip.id)}
+					aria-label="Убрать фильтр {chip.label}"
+				>
+					<X class="size-3" />
+				</Button>
+			{/if}
+		</Badge>
+	{/each}
+	{#if chips.length > 0 && onClear}
+		<Button variant="ghost" size="sm" onclick={onClear}>Сбросить</Button>
+	{/if}
+</div>
@@ -8,17 +8,17 @@
 		supportsCsvIO
 	} from '$lib/components/modules/module-helpers.js';

-	import { Button } from '$lib/ui/core/button/index.js';
-	import { Checkbox } from '$lib/ui/core/checkbox/index.js';
+	import { Button } from '@evobgp/ui/components/button/index.js';
+	import { Checkbox } from '@evobgp/ui/components/checkbox/index.js';
 	import {
 		Card,
 		CardContent,
 		CardHeader,
 		CardTitle,
 		CardDescription
-	} from '$lib/ui/core/card/index.js';
-	import AppDataTable from '$lib/ui/patterns/data-table/app-data-table.svelte';
-	import { confirm } from '$lib/ui/patterns/confirm/confirm-state.svelte.js';
+	} from '@evobgp/ui/components/card/index.js';
+	import AppDataTable from '$lib/components/patterns/data-table/app-data-table.svelte';
+	import { confirm } from '$lib/components/patterns/confirm/confirm-state.svelte.js';
 	import { notify, notifyApiError } from '$lib/ui/app/toast.js';
 	import ModuleAsEntryDialog from '$lib/components/modules/ModuleAsEntryDialog.svelte';
 	import Plus from '@lucide/svelte/icons/plus';
@@ -8,9 +8,9 @@
 		NONE_OPTION,
 		nullableSelectValue
 	} from '$lib/components/modules/module-helpers.js';
-	import { Button } from '$lib/ui/core/button/index.js';
-	import { Input } from '$lib/ui/core/input/index.js';
-	import { Label } from '$lib/ui/core/label/index.js';
+	import { Button } from '@evobgp/ui/components/button/index.js';
+	import { Input } from '@evobgp/ui/components/input/index.js';
+	import { Label } from '@evobgp/ui/components/label/index.js';
 	import {
 		Dialog,
 		DialogContent,
@@ -18,8 +18,13 @@
 		DialogTitle,
 		DialogFooter,
 		DialogDescription
-	} from '$lib/ui/core/dialog/index.js';
-	import { Select, SelectContent, SelectItem, SelectTrigger } from '$lib/ui/core/select/index.js';
+	} from '@evobgp/ui/components/dialog/index.js';
+	import {
+		Select,
+		SelectContent,
+		SelectItem,
+		SelectTrigger
+	} from '@evobgp/ui/components/select/index.js';
 	import { notify, notifyApiError } from '$lib/ui/app/toast.js';

 	type Props = {
@@ -14,17 +14,22 @@
 		NONE_OPTION,
 		nullableSelectValue
 	} from '$lib/components/modules/module-helpers.js';
-	import { Button } from '$lib/ui/core/button/index.js';
-	import { Input } from '$lib/ui/core/input/index.js';
-	import { Label } from '$lib/ui/core/label/index.js';
+	import { Button } from '@evobgp/ui/components/button/index.js';
+	import { Input } from '@evobgp/ui/components/input/index.js';
+	import { Label } from '@evobgp/ui/components/label/index.js';
 	import {
 		Dialog,
 		DialogContent,
 		DialogHeader,
 		DialogTitle,
 		DialogFooter
-	} from '$lib/ui/core/dialog/index.js';
-	import { Select, SelectContent, SelectItem, SelectTrigger } from '$lib/ui/core/select/index.js';
+	} from '@evobgp/ui/components/dialog/index.js';
+	import {
+		Select,
+		SelectContent,
+		SelectItem,
+		SelectTrigger
+	} from '@evobgp/ui/components/select/index.js';
 	import { notify, notifyApiError } from '$lib/ui/app/toast.js';

 	type Props = {
@@ -6,18 +6,18 @@
 		communityLabel,
 		normalizeCdnSourceKind
 	} from '$lib/components/modules/module-helpers.js';
-	import { Badge } from '$lib/ui/core/badge/index.js';
-	import { Button } from '$lib/ui/core/button/index.js';
-	import { Checkbox } from '$lib/ui/core/checkbox/index.js';
+	import { Badge } from '@evobgp/ui/components/badge/index.js';
+	import { Button } from '@evobgp/ui/components/button/index.js';
+	import { Checkbox } from '@evobgp/ui/components/checkbox/index.js';
 	import {
 		Card,
 		CardContent,
 		CardHeader,
 		CardTitle,
 		CardDescription
-	} from '$lib/ui/core/card/index.js';
-	import AppDataTable from '$lib/ui/patterns/data-table/app-data-table.svelte';
-	import { confirm } from '$lib/ui/patterns/confirm/confirm-state.svelte.js';
+	} from '@evobgp/ui/components/card/index.js';
+	import AppDataTable from '$lib/components/patterns/data-table/app-data-table.svelte';
+	import { confirm } from '$lib/components/patterns/confirm/confirm-state.svelte.js';
 	import { notify, notifyApiError } from '$lib/ui/app/toast.js';
 	import ModuleCdnSourceDialog from '$lib/components/modules/ModuleCdnSourceDialog.svelte';
 	import Plus from '@lucide/svelte/icons/plus';
@@ -2,9 +2,9 @@
 	import { apiMutate } from '$lib/api/client.js';
 	import type { ModuleCreate } from '$lib/api/types.js';
 	import { moduleTypeRu } from '$lib/ui-labels.js';
-	import { Button } from '$lib/ui/core/button/index.js';
-	import { Input } from '$lib/ui/core/input/index.js';
-	import { Label } from '$lib/ui/core/label/index.js';
+	import { Button } from '@evobgp/ui/components/button/index.js';
+	import { Input } from '@evobgp/ui/components/input/index.js';
+	import { Label } from '@evobgp/ui/components/label/index.js';
 	import {
 		Dialog,
 		DialogContent,
@@ -12,9 +12,14 @@
 		DialogTitle,
 		DialogFooter,
 		DialogDescription
-	} from '$lib/ui/core/dialog/index.js';
-	import { Select, SelectContent, SelectItem, SelectTrigger } from '$lib/ui/core/select/index.js';
-	import { Switch } from '$lib/ui/core/switch/index.js';
+	} from '@evobgp/ui/components/dialog/index.js';
+	import {
+		Select,
+		SelectContent,
+		SelectItem,
+		SelectTrigger
+	} from '@evobgp/ui/components/select/index.js';
+	import { Switch } from '@evobgp/ui/components/switch/index.js';
 	import { notify, notifyApiError } from '$lib/ui/app/toast.js';

 	type Props = {
@@ -2,8 +2,8 @@
 	import { resolve } from '$app/paths';
 	import type { ModuleRow } from '$lib/api/types.js';
 	import { moduleEnabledRu, moduleEnabledBadgeVariant, moduleTypeRu } from '$lib/ui-labels.js';
-	import { Badge } from '$lib/ui/core/badge/index.js';
-	import { Button } from '$lib/ui/core/button/index.js';
+	import { Badge } from '@evobgp/ui/components/badge/index.js';
+	import { Button } from '@evobgp/ui/components/button/index.js';
 	import PageHeader from '$lib/ui/app/page-header/page-header.svelte';
 	import ArrowLeft from '@lucide/svelte/icons/arrow-left';
 	import Pencil from '@lucide/svelte/icons/pencil';
@@ -26,13 +26,7 @@
 	<Button variant="ghost" size="icon-sm" class="mt-1 shrink-0" href={resolve('/modules')}>
 		<ArrowLeft class="size-4" />
 	</Button>
-	<PageHeader
-		class="min-w-0 flex-1"
-		title={mod.name}
-		description={mod.id}
-		icon={Blocks}
-		iconClass="bg-chart-2/15 text-chart-2"
-	>
+	<PageHeader class="min-w-0 flex-1" title={mod.name} description={mod.id}>
 		{#snippet actions()}
 			<div class="flex flex-wrap items-center gap-2">
 				<Badge variant="outline">{moduleTypeRu(mod.type)}</Badge>
@@ -6,17 +6,17 @@
 		sanitizeFilenamePart,
 		supportsCsvIO
 	} from '$lib/components/modules/module-helpers.js';
-	import { Button } from '$lib/ui/core/button/index.js';
-	import { Checkbox } from '$lib/ui/core/checkbox/index.js';
+	import { Button } from '@evobgp/ui/components/button/index.js';
+	import { Checkbox } from '@evobgp/ui/components/checkbox/index.js';
 	import {
 		Card,
 		CardContent,
 		CardHeader,
 		CardTitle,
 		CardDescription
-	} from '$lib/ui/core/card/index.js';
-	import AppDataTable from '$lib/ui/patterns/data-table/app-data-table.svelte';
-	import { confirm } from '$lib/ui/patterns/confirm/confirm-state.svelte.js';
+	} from '@evobgp/ui/components/card/index.js';
+	import AppDataTable from '$lib/components/patterns/data-table/app-data-table.svelte';
+	import { confirm } from '$lib/components/patterns/confirm/confirm-state.svelte.js';
 	import { notify, notifyApiError } from '$lib/ui/app/toast.js';
 	import ModuleDomainEntryDialog from '$lib/components/modules/ModuleDomainEntryDialog.svelte';
 	import Plus from '@lucide/svelte/icons/plus';
@@ -8,17 +8,22 @@
 		NONE_OPTION,
 		nullableSelectValue
 	} from '$lib/components/modules/module-helpers.js';
-	import { Button } from '$lib/ui/core/button/index.js';
-	import { Input } from '$lib/ui/core/input/index.js';
-	import { Label } from '$lib/ui/core/label/index.js';
+	import { Button } from '@evobgp/ui/components/button/index.js';
+	import { Input } from '@evobgp/ui/components/input/index.js';
+	import { Label } from '@evobgp/ui/components/label/index.js';
 	import {
 		Dialog,
 		DialogContent,
 		DialogHeader,
 		DialogTitle,
 		DialogFooter
-	} from '$lib/ui/core/dialog/index.js';
-	import { Select, SelectContent, SelectItem, SelectTrigger } from '$lib/ui/core/select/index.js';
+	} from '@evobgp/ui/components/dialog/index.js';
+	import {
+		Select,
+		SelectContent,
+		SelectItem,
+		SelectTrigger
+	} from '@evobgp/ui/components/select/index.js';
 	import { notify, notifyApiError } from '$lib/ui/app/toast.js';

 	type Props = {
@@ -16,19 +16,24 @@
 		NONE_OPTION,
 		nullableSelectValue
 	} from '$lib/components/modules/module-helpers.js';
-	import { Button } from '$lib/ui/core/button/index.js';
-	import { Input } from '$lib/ui/core/input/index.js';
-	import { Label } from '$lib/ui/core/label/index.js';
-	import { Checkbox } from '$lib/ui/core/checkbox/index.js';
+	import { Button } from '@evobgp/ui/components/button/index.js';
+	import { Input } from '@evobgp/ui/components/input/index.js';
+	import { Label } from '@evobgp/ui/components/label/index.js';
+	import { Checkbox } from '@evobgp/ui/components/checkbox/index.js';
 	import {
 		Dialog,
 		DialogContent,
 		DialogHeader,
 		DialogTitle,
 		DialogFooter
-	} from '$lib/ui/core/dialog/index.js';
-	import { Select, SelectContent, SelectItem, SelectTrigger } from '$lib/ui/core/select/index.js';
-	import { Switch } from '$lib/ui/core/switch/index.js';
+	} from '@evobgp/ui/components/dialog/index.js';
+	import {
+		Select,
+		SelectContent,
+		SelectItem,
+		SelectTrigger
+	} from '@evobgp/ui/components/select/index.js';
+	import { Switch } from '@evobgp/ui/components/switch/index.js';
 	import { notify, notifyApiError } from '$lib/ui/app/toast.js';

 	const dohPolicyOptions: { value: DohResolverPolicy; label: string; hint: string }[] = [
@@ -2,17 +2,22 @@
 	import { apiMutate } from '$lib/api/client.js';
 	import type { BgpCommunity, IpRangeEntry, IpRangeEntryCreate } from '$lib/api/types.js';
 	import { communityLabel, communityOptionLabel } from '$lib/components/modules/module-helpers.js';
-	import { Button } from '$lib/ui/core/button/index.js';
-	import { Input } from '$lib/ui/core/input/index.js';
-	import { Label } from '$lib/ui/core/label/index.js';
+	import { Button } from '@evobgp/ui/components/button/index.js';
+	import { Input } from '@evobgp/ui/components/input/index.js';
+	import { Label } from '@evobgp/ui/components/label/index.js';
 	import {
 		Dialog,
 		DialogContent,
 		DialogHeader,
 		DialogTitle,
 		DialogFooter
-	} from '$lib/ui/core/dialog/index.js';
-	import { Select, SelectContent, SelectItem, SelectTrigger } from '$lib/ui/core/select/index.js';
+	} from '@evobgp/ui/components/dialog/index.js';
+	import {
+		Select,
+		SelectContent,
+		SelectItem,
+		SelectTrigger
+	} from '@evobgp/ui/components/select/index.js';
 	import { notify, notifyApiError } from '$lib/ui/app/toast.js';

 	type Props = {
@@ -6,17 +6,17 @@
 		sanitizeFilenamePart,
 		supportsCsvIO
 	} from '$lib/components/modules/module-helpers.js';
-	import { Button } from '$lib/ui/core/button/index.js';
-	import { Checkbox } from '$lib/ui/core/checkbox/index.js';
+	import { Button } from '@evobgp/ui/components/button/index.js';
+	import { Checkbox } from '@evobgp/ui/components/checkbox/index.js';
 	import {
 		Card,
 		CardContent,
 		CardHeader,
 		CardTitle,
 		CardDescription
-	} from '$lib/ui/core/card/index.js';
-	import AppDataTable from '$lib/ui/patterns/data-table/app-data-table.svelte';
-	import { confirm } from '$lib/ui/patterns/confirm/confirm-state.svelte.js';
+	} from '@evobgp/ui/components/card/index.js';
+	import AppDataTable from '$lib/components/patterns/data-table/app-data-table.svelte';
+	import { confirm } from '$lib/components/patterns/confirm/confirm-state.svelte.js';
 	import { notify, notifyApiError } from '$lib/ui/app/toast.js';
 	import ModuleIpRangeEntryDialog from '$lib/components/modules/ModuleIpRangeEntryDialog.svelte';
 	import Plus from '@lucide/svelte/icons/plus';
@@ -7,8 +7,8 @@
 		dohProfileLabel,
 		moduleDohProfileIds
 	} from '$lib/components/modules/module-helpers.js';
-	import { Card, CardContent, CardHeader, CardTitle } from '$lib/ui/core/card/index.js';
-	import CardSkeleton from '$lib/ui/patterns/feedback/card-skeleton.svelte';
+	import { Card, CardContent, CardHeader, CardTitle } from '@evobgp/ui/components/card/index.js';
+	import CardSkeleton from '$lib/components/patterns/feedback/card-skeleton.svelte';
 	import { cn } from '$lib/utils.js';
 	import ArrowDownUp from '@lucide/svelte/icons/arrow-down-up';
 	import Timer from '@lucide/svelte/icons/timer';
@@ -1,14 +1,14 @@
 <script lang="ts">
 	import { resolve } from '$app/paths';
 	import type { AsEntry, CdnSource, DomainEntry, IpRangeEntry, ModuleRow } from '$lib/api/types.js';
-	import { Button } from '$lib/ui/core/button/index.js';
+	import { Button } from '@evobgp/ui/components/button/index.js';
 	import {
 		Card,
 		CardContent,
 		CardHeader,
 		CardTitle,
 		CardDescription
-	} from '$lib/ui/core/card/index.js';
+	} from '@evobgp/ui/components/card/index.js';

 	type Props = {
 		mod: ModuleRow;
@@ -35,31 +35,31 @@
 		type ScheduleEditor,
 		type ScheduleMode
 	} from '$lib/maintenance/policy-schedule.js';
-	import { Button } from '$lib/ui/core/button/index.js';
+	import { Button } from '@evobgp/ui/components/button/index.js';
 	import {
 		Card,
 		CardContent,
 		CardHeader,
 		CardTitle,
 		CardDescription
-	} from '$lib/ui/core/card/index.js';
-	import { Badge } from '$lib/ui/core/badge/index.js';
-	import { Alert, AlertDescription, AlertTitle } from '$lib/ui/core/alert/index.js';
+	} from '@evobgp/ui/components/card/index.js';
+	import { Badge } from '@evobgp/ui/components/badge/index.js';
+	import { Alert, AlertDescription, AlertTitle } from '@evobgp/ui/components/alert/index.js';
 	import {
 		Dialog,
 		DialogContent,
 		DialogHeader,
 		DialogTitle,
 		DialogFooter
-	} from '$lib/ui/core/dialog/index.js';
-	import { Switch } from '$lib/ui/core/switch/index.js';
-	import { Label } from '$lib/ui/core/label/index.js';
-	import { Checkbox } from '$lib/ui/core/checkbox/index.js';
-	import FormField from '$lib/ui/patterns/form/form-field.svelte';
-	import AppInput from '$lib/ui/patterns/form/app-input.svelte';
-	import AppDataTable from '$lib/ui/patterns/data-table/app-data-table.svelte';
-	import type { DataTableColumn } from '$lib/ui/patterns/data-table/types.js';
-	import { confirm } from '$lib/ui/patterns/confirm/confirm-state.svelte.js';
+	} from '@evobgp/ui/components/dialog/index.js';
+	import { Switch } from '@evobgp/ui/components/switch/index.js';
+	import { Label } from '@evobgp/ui/components/label/index.js';
+	import { Checkbox } from '@evobgp/ui/components/checkbox/index.js';
+	import FormField from '$lib/components/patterns/form/form-field.svelte';
+	import AppInput from '$lib/components/patterns/form/app-input.svelte';
+	import AppDataTable from '$lib/components/patterns/data-table/app-data-table.svelte';
+	import type { DataTableColumn } from '$lib/components/patterns/data-table/types.js';
+	import { confirm } from '$lib/components/patterns/confirm/confirm-state.svelte.js';
 	import { notify, notifyApiError } from '$lib/ui/app/toast.js';
 	import Plus from '@lucide/svelte/icons/plus';
 	import Pencil from '@lucide/svelte/icons/pencil';
@@ -17,17 +17,17 @@
 		type PostgresMaintLog,
 		type CorrelationResponse
 	} from '$lib/monitoring/postgres.js';
-	import { Tabs, TabsContent, TabsList, TabsTrigger } from '$lib/ui/core/tabs/index.js';
+	import { Tabs, TabsContent, TabsList, TabsTrigger } from '@evobgp/ui/components/tabs/index.js';
 	import {
 		Card,
 		CardContent,
 		CardHeader,
 		CardTitle,
 		CardDescription
-	} from '$lib/ui/core/card/index.js';
-	import { Button } from '$lib/ui/core/button/index.js';
-	import { Badge } from '$lib/ui/core/badge/index.js';
-	import { Alert, AlertDescription, AlertTitle } from '$lib/ui/core/alert/index.js';
+	} from '@evobgp/ui/components/card/index.js';
+	import { Button } from '@evobgp/ui/components/button/index.js';
+	import { Badge } from '@evobgp/ui/components/badge/index.js';
+	import { Alert, AlertDescription, AlertTitle } from '@evobgp/ui/components/alert/index.js';
 	import {
 		Table,
 		TableBody,
@@ -35,9 +35,9 @@
 		TableHead,
 		TableHeader,
 		TableRow
-	} from '$lib/ui/core/table/index.js';
-	import { Switch } from '$lib/ui/core/switch/index.js';
-	import { Label } from '$lib/ui/core/label/index.js';
+	} from '@evobgp/ui/components/table/index.js';
+	import { Switch } from '@evobgp/ui/components/switch/index.js';
+	import { Label } from '@evobgp/ui/components/label/index.js';
 	import Database from '@lucide/svelte/icons/database';
 	import RefreshCw from '@lucide/svelte/icons/refresh-cw';

@@ -0,0 +1,451 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { apiJSON } from '$lib/api/client.js';
+	import type { AuthSession } from '$lib/api/types.js';
+	import {
+		cleanupRuntimeLogFile,
+		getRuntimeLogTail,
+		isRuntimeLogsUnavailable,
+		listRuntimeLogCleanupAudit,
+		listRuntimeLogFiles,
+		type RuntimeLogCleanupAudit,
+		type RuntimeLogCleanupMode,
+		type RuntimeLogFile
+	} from '$lib/runtime-logs/runtime-logs-api.js';
+	import { formatBytes } from '$lib/monitoring/postgres.js';
+	import { formatDateTime } from '$lib/modules/display.js';
+	import { Button } from '@evobgp/ui/components/button/index.js';
+	import { Badge } from '@evobgp/ui/components/badge/index.js';
+	import {
+		Card,
+		CardContent,
+		CardDescription,
+		CardHeader,
+		CardTitle
+	} from '@evobgp/ui/components/card/index.js';
+	import {
+		Dialog,
+		DialogContent,
+		DialogDescription,
+		DialogHeader,
+		DialogTitle
+	} from '@evobgp/ui/components/dialog/index.js';
+	import {
+		DropdownMenu,
+		DropdownMenuContent,
+		DropdownMenuItem,
+		DropdownMenuTrigger
+	} from '@evobgp/ui/components/dropdown-menu/index.js';
+	import { Tabs, TabsContent, TabsList, TabsTrigger } from '@evobgp/ui/components/tabs/index.js';
+	import AppDataTable from '$lib/components/patterns/data-table/app-data-table.svelte';
+	import type { DataTableColumn } from '$lib/components/patterns/data-table/types.js';
+	import EmptyState from '$lib/components/patterns/empty-state/empty-state.svelte';
+	import { confirm } from '$lib/components/patterns/confirm/confirm-state.svelte.js';
+	import ScrollPreBlock from '$lib/components/app/scroll-pre-block.svelte';
+	import { notify, notifyApiError } from '$lib/ui/app/toast.js';
+	import {
+		dialogBodyDocument,
+		dialogContentDocument,
+		dialogHeaderDocument
+	} from '$lib/dialog-layout.js';
+	import RefreshCw from '@lucide/svelte/icons/refresh-cw';
+	import Eye from '@lucide/svelte/icons/eye';
+	import Eraser from '@lucide/svelte/icons/eraser';
+	import Trash2 from '@lucide/svelte/icons/trash-2';
+	import HardDrive from '@lucide/svelte/icons/hard-drive';
+	import FileText from '@lucide/svelte/icons/file-text';
+	import MoreHorizontal from '@lucide/svelte/icons/more-horizontal';
+	import LoaderCircle from '@lucide/svelte/icons/loader-circle';
+
+	type SubTab = 'files' | 'audit';
+
+	let subTab = $state<SubTab>('files');
+	let session = $state<AuthSession | null>(null);
+	let filesUnavailable = $state(false);
+	let filesLoading = $state(true);
+	let files = $state<RuntimeLogFile[]>([]);
+
+	let auditLoading = $state(false);
+	let auditError = $state<string | null>(null);
+	let auditItems = $state<RuntimeLogCleanupAudit[]>([]);
+	let auditCursor = $state<string | undefined>(undefined);
+	let auditHasMore = $state(false);
+
+	let previewOpen = $state(false);
+	let previewFilename = $state('');
+	let previewLoading = $state(false);
+	let previewContent = $state('');
+	let previewTruncated = $state(false);
+	let previewLines = $state(0);
+
+	let cleaningFilename = $state<string | null>(null);
+
+	const isOperator = $derived(session?.role === 'operator');
+
+	const totalBytes = $derived(files.reduce((sum, f) => sum + (f.size_bytes ?? 0), 0));
+
+	const fileColumns: DataTableColumn<RuntimeLogFile>[] = [
+		{ id: 'name', label: 'Файл', sortable: true, sortValue: (f) => f.name },
+		{
+			id: 'size',
+			label: 'Размер',
+			sortable: true,
+			sortValue: (f) => f.size_bytes
+		},
+		{
+			id: 'modified',
+			label: 'Изменён',
+			sortable: true,
+			sortValue: (f) => f.modified_at
+		},
+		{ id: 'actions', label: '', class: 'w-36' }
+	];
+
+	const auditColumns: DataTableColumn<RuntimeLogCleanupAudit>[] = [
+		{
+			id: 'created',
+			label: 'Время',
+			sortable: true,
+			sortValue: (r) => r.created_at
+		},
+		{ id: 'source', label: 'Источник' },
+		{ id: 'actor', label: 'Actor' },
+		{ id: 'filename', label: 'Файл', sortable: true, sortValue: (r) => r.filename },
+		{ id: 'action', label: 'Действие' },
+		{ id: 'sizes', label: 'Размер' }
+	];
+
+	async function loadSession() {
+		try {
+			session = await apiJSON<AuthSession>('/v1/auth/session');
+		} catch {
+			session = null;
+		}
+	}
+
+	async function loadFiles() {
+		filesLoading = true;
+		try {
+			files = await listRuntimeLogFiles();
+			filesUnavailable = false;
+		} catch (e) {
+			if (isRuntimeLogsUnavailable(e)) {
+				filesUnavailable = true;
+				files = [];
+				return;
+			}
+			notifyApiError(e, 'Файловые логи');
+		} finally {
+			filesLoading = false;
+		}
+	}
+
+	async function loadAudit(reset = true) {
+		auditLoading = true;
+		if (reset) auditError = null;
+		try {
+			const page = await listRuntimeLogCleanupAudit({
+				limit: 20,
+				cursor: reset ? undefined : auditCursor
+			});
+			auditItems = reset ? (page.items ?? []) : [...auditItems, ...(page.items ?? [])];
+			auditCursor = page.next_cursor;
+			auditHasMore = Boolean(page.has_more && page.next_cursor);
+			auditError = null;
+		} catch (e) {
+			auditError = e instanceof Error ? e.message : 'Не удалось загрузить audit';
+			if (reset) auditItems = [];
+			notifyApiError(e, 'Audit очистки логов');
+		} finally {
+			auditLoading = false;
+		}
+	}
+
+	function auditSourceLabel(actor: string): string {
+		if (actor.startsWith('auto:')) return 'Авто';
+		if (actor.startsWith('op:')) return 'Оператор';
+		return '—';
+	}
+
+	async function refreshAll() {
+		await Promise.all([loadFiles(), loadAudit(true)]);
+	}
+
+	async function openPreview(file: RuntimeLogFile) {
+		previewFilename = file.name;
+		previewOpen = true;
+		previewLoading = true;
+		previewContent = '';
+		try {
+			const tail = await getRuntimeLogTail(file.name, { lines: 200 });
+			previewContent = tail.content;
+			previewTruncated = tail.truncated;
+			previewLines = tail.lines_returned;
+		} catch (e) {
+			notifyApiError(e);
+			previewOpen = false;
+		} finally {
+			previewLoading = false;
+		}
+	}
+
+	function requestCleanup(file: RuntimeLogFile, mode: RuntimeLogCleanupMode) {
+		const actionLabel = mode === 'delete' ? 'удалить файл' : 'обнулить (truncate)';
+		void confirm({
+			title: mode === 'delete' ? 'Удалить log-файл?' : 'Очистить log-файл?',
+			description: `${file.name} · ${formatBytes(file.size_bytes)}. Действие: ${actionLabel}. Операция синхронная.`,
+			confirmLabel: mode === 'delete' ? 'Удалить' : 'Очистить',
+			destructive: true,
+			onConfirm: async () => {
+				cleaningFilename = file.name;
+				try {
+					await cleanupRuntimeLogFile(file.name, mode);
+					notify.success(mode === 'delete' ? 'Файл удалён' : 'Файл обнулён');
+					await refreshAll();
+				} catch (e) {
+					notifyApiError(e);
+				} finally {
+					cleaningFilename = null;
+				}
+			}
+		});
+	}
+
+	function actionBadgeVariant(action: RuntimeLogCleanupMode): 'secondary' | 'destructive' {
+		return action === 'delete' ? 'destructive' : 'secondary';
+	}
+
+	onMount(() => {
+		void (async () => {
+			await loadSession();
+			await loadFiles();
+			await loadAudit(true);
+		})();
+	});
+</script>
+
+<div class="flex flex-col gap-4">
+	<div class="flex flex-wrap items-center justify-between gap-3">
+		<div class="flex items-center gap-2 text-sm text-muted-foreground">
+			<HardDrive class="size-4" />
+			<span>Файловые логи Docker-сервисов (sidecar stack-runtime-logs)</span>
+		</div>
+		<Button
+			variant="outline"
+			size="sm"
+			onclick={() => refreshAll()}
+			disabled={filesLoading || auditLoading}
+		>
+			<RefreshCw class={filesLoading || auditLoading ? 'animate-spin' : ''} />
+			Обновить
+		</Button>
+	</div>
+
+	{#if filesUnavailable}
+		<EmptyState
+			icon={HardDrive}
+			title="Файловые логи недоступны"
+			description="Список и очистка *.log доступны только на evobgp-all с примонтированным каталогом runtime-logs (EVOBGP_RUNTIME_LOGS_DIR и EVOBGP_SERVICE=evobgp-all). См. docs/access.md в репозитории. Вкладка audit очистки ниже работает без volume."
+		/>
+	{/if}
+
+	{#if !filesUnavailable}
+		<div class="grid gap-3 sm:grid-cols-2">
+			<Card>
+				<CardHeader class="pb-2">
+					<CardDescription>Файлов</CardDescription>
+					<CardTitle class="text-2xl tabular-nums">{files.length}</CardTitle>
+				</CardHeader>
+			</Card>
+			<Card>
+				<CardHeader class="pb-2">
+					<CardDescription>Суммарный размер</CardDescription>
+					<CardTitle class="text-2xl tabular-nums">{formatBytes(totalBytes)}</CardTitle>
+				</CardHeader>
+			</Card>
+		</div>
+	{/if}
+
+	<Tabs bind:value={subTab}>
+		<TabsList>
+			<TabsTrigger value="files">Файлы</TabsTrigger>
+			<TabsTrigger value="audit">Audit очистки</TabsTrigger>
+		</TabsList>
+
+		<TabsContent value="files" class="mt-4">
+			{#if filesUnavailable}
+				<EmptyState
+					icon={FileText}
+					title="FS API отключён"
+					description="Примонтируйте runtime-logs к evobgp-all и задайте EVOBGP_RUNTIME_LOGS_DIR."
+				/>
+			{:else}
+				<Card>
+					<CardHeader>
+						<CardTitle class="text-base">*.log на хосте</CardTitle>
+						<CardDescription>
+							Просмотр хвоста и синхронная очистка (truncate по умолчанию). Очистка — роль operator.
+						</CardDescription>
+					</CardHeader>
+					<CardContent class="min-w-0 p-4 pt-0">
+						<AppDataTable
+							columns={fileColumns}
+							rows={files}
+							rowKey={(f) => f.name}
+							loading={filesLoading}
+							emptyTitle="Нет log-файлов"
+							emptyDescription="Sidecar ещё не создал файлы или каталог пуст."
+						>
+							{#snippet cell({ row, column })}
+								{#if column.id === 'name'}
+									<span class="font-mono text-xs">{row.name}</span>
+								{:else if column.id === 'size'}
+									{formatBytes(row.size_bytes)}
+								{:else if column.id === 'modified'}
+									<span class="text-sm">{formatDateTime(row.modified_at)}</span>
+								{:else if column.id === 'actions'}
+									<div class="flex items-center justify-end gap-1">
+										<Button
+											variant="ghost"
+											size="icon-sm"
+											aria-label="Просмотр"
+											onclick={() => openPreview(row)}
+										>
+											<Eye class="size-3.5" />
+										</Button>
+										{#if isOperator}
+											<Button
+												variant="ghost"
+												size="icon-sm"
+												aria-label="Очистить (truncate)"
+												disabled={cleaningFilename === row.name}
+												onclick={() => requestCleanup(row, 'truncate')}
+											>
+												{#if cleaningFilename === row.name}
+													<LoaderCircle class="size-3.5 animate-spin" />
+												{:else}
+													<Eraser class="size-3.5" />
+												{/if}
+											</Button>
+											<DropdownMenu>
+												<DropdownMenuTrigger>
+													{#snippet child({ props })}
+														<Button {...props} variant="ghost" size="icon-sm" aria-label="Ещё">
+															<MoreHorizontal class="size-3.5" />
+														</Button>
+													{/snippet}
+												</DropdownMenuTrigger>
+												<DropdownMenuContent align="end">
+													<DropdownMenuItem
+														variant="destructive"
+														disabled={cleaningFilename === row.name}
+														onclick={() => requestCleanup(row, 'delete')}
+													>
+														<Trash2 class="size-4" />
+														Удалить файл
+													</DropdownMenuItem>
+												</DropdownMenuContent>
+											</DropdownMenu>
+										{/if}
+									</div>
+								{/if}
+							{/snippet}
+						</AppDataTable>
+					</CardContent>
+				</Card>
+			{/if}
+		</TabsContent>
+
+		<TabsContent value="audit" class="mt-4">
+			<Card>
+				<CardHeader>
+					<CardTitle class="text-base">История очистки</CardTitle>
+					<CardDescription>
+						Записи из <code class="text-xs">runtime_log_cleanup_audit</code> (viewer+).
+					</CardDescription>
+				</CardHeader>
+				<CardContent class="min-w-0 space-y-3 p-4 pt-0">
+					{#if auditError && auditItems.length === 0}
+						<EmptyState icon={FileText} title="Не удалось загрузить audit" description={auditError}>
+							{#snippet action()}
+								<Button variant="outline" size="sm" onclick={() => loadAudit(true)}>
+									Повторить
+								</Button>
+							{/snippet}
+						</EmptyState>
+					{:else}
+						<AppDataTable
+							columns={auditColumns}
+							rows={auditItems}
+							rowKey={(r) => r.id}
+							loading={auditLoading && auditItems.length === 0}
+							emptyTitle="Записей пока нет"
+							emptyDescription="Очистка появится после ручного DELETE или автоочистки. Настройки — Параметры → Файловые логи."
+						>
+							{#snippet cell({ row, column })}
+								{#if column.id === 'created'}
+									<span class="text-sm">{formatDateTime(row.created_at)}</span>
+								{:else if column.id === 'source'}
+									<Badge variant={row.actor_prefix.startsWith('auto:') ? 'secondary' : 'outline'}>
+										{auditSourceLabel(row.actor_prefix)}
+									</Badge>
+								{:else if column.id === 'actor'}
+									<span class="font-mono text-xs">{row.actor_prefix}</span>
+								{:else if column.id === 'filename'}
+									<span class="font-mono text-xs">{row.filename}</span>
+								{:else if column.id === 'action'}
+									<Badge variant={actionBadgeVariant(row.action)}>{row.action}</Badge>
+								{:else if column.id === 'sizes'}
+									<span class="text-xs tabular-nums">
+										{formatBytes(row.size_before)}
+										{#if row.size_after != null}
+											→ {formatBytes(row.size_after)}
+										{/if}
+									</span>
+								{/if}
+							{/snippet}
+						</AppDataTable>
+					{/if}
+					{#if auditHasMore}
+						<Button
+							variant="outline"
+							size="sm"
+							disabled={auditLoading}
+							onclick={() => loadAudit(false)}
+						>
+							{#if auditLoading}
+								<LoaderCircle class="size-4 animate-spin" />
+							{/if}
+							Загрузить ещё
+						</Button>
+					{/if}
+				</CardContent>
+			</Card>
+		</TabsContent>
+	</Tabs>
+</div>
+
+<Dialog bind:open={previewOpen}>
+	<DialogContent class={dialogContentDocument}>
+		<DialogHeader class={dialogHeaderDocument}>
+			<DialogTitle class="flex items-center gap-2">
+				<FileText class="size-4" />
+				{previewFilename}
+			</DialogTitle>
+			<DialogDescription>
+				{#if previewTruncated}
+					Показан усечённый хвост ({previewLines} строк).
+				{:else}
+					Хвост файла ({previewLines} строк).
+				{/if}
+			</DialogDescription>
+		</DialogHeader>
+		<div class={dialogBodyDocument}>
+			{#if previewLoading}
+				<p class="text-sm text-muted-foreground">Загрузка…</p>
+			{:else}
+				<ScrollPreBlock variant="preserve" text={previewContent || '—'} class="max-h-[70vh]" />
+			{/if}
+		</div>
+	</DialogContent>
+</Dialog>
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Label } from '$lib/ui/core/label/index.js';
-	import { Switch } from '$lib/ui/core/switch/index.js';
+	import { Label } from '@evobgp/ui/components/label/index.js';
+	import { Switch } from '@evobgp/ui/components/switch/index.js';
 	import { readNetworkAutoRefresh, writeNetworkAutoRefresh } from '$lib/network/network-metrics.js';

 	type Props = {
@@ -0,0 +1,80 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { resolve } from '$app/paths';
+	import { loadSettings, partitionSettings } from '$lib/settings/settings-api.js';
+	import { BIRD_SETTING_KEYS } from '$lib/settings/settings-known-keys.js';
+	import { Button } from '@evobgp/ui/components/button/index.js';
+	import {
+		Card,
+		CardContent,
+		CardDescription,
+		CardHeader,
+		CardTitle
+	} from '@evobgp/ui/components/card/index.js';
+	import { notifyApiError } from '$lib/ui/app/toast.js';
+	import ArrowRight from '@lucide/svelte/icons/arrow-right';
+	import SlidersHorizontal from '@lucide/svelte/icons/sliders-horizontal';
+
+	const labels: Record<string, string> = {
+		bird_router_id: 'Router ID',
+		bird_local_ipv4: 'Local IPv4',
+		bird_local_ipv6: 'Local IPv6',
+		bird_local_asn: 'Local ASN',
+		bird_bgp_source_ipv4: 'BGP source IPv4',
+		bird_bgp_source_ipv6: 'BGP source IPv6'
+	};
+
+	let loading = $state(true);
+	let values = $state<Record<string, string>>({});
+
+	onMount(() => {
+		void (async () => {
+			loading = true;
+			try {
+				const settings = await loadSettings();
+				const { partitioned } = partitionSettings(settings);
+				const out: Record<string, string> = {};
+				for (const key of BIRD_SETTING_KEYS) {
+					const v = String(partitioned.bird[key] ?? '').trim();
+					if (v) out[key] = v;
+				}
+				values = out;
+			} catch (e) {
+				notifyApiError(e);
+			} finally {
+				loading = false;
+			}
+		})();
+	});
+</script>
+
+<Card>
+	<CardHeader>
+		<CardTitle>BIRD (кратко)</CardTitle>
+		<CardDescription>
+			Глобальные параметры BIRD из tenant settings. Полная форма — в разделе «Параметры».
+		</CardDescription>
+	</CardHeader>
+	<CardContent class="space-y-4">
+		{#if loading}
+			<p class="text-sm text-muted-foreground">Загрузка…</p>
+		{:else if Object.keys(values).length === 0}
+			<p class="text-sm text-muted-foreground">Параметры BIRD ещё не заданы.</p>
+		{:else}
+			<dl class="grid gap-2 text-sm sm:grid-cols-2">
+				{#each Object.entries(values) as [key, value] (key)}
+					<div class="rounded-md border bg-muted/30 px-3 py-2">
+						<dt class="text-muted-foreground">{labels[key] ?? key}</dt>
+						<dd class="font-mono text-xs break-all">{value}</dd>
+					</div>
+				{/each}
+			</dl>
+		{/if}
+
+		<Button variant="outline" href={resolve('/tenant-settings?tab=bird')}>
+			<SlidersHorizontal class="size-4" />
+			Изменить параметры
+			<ArrowRight class="size-4" />
+		</Button>
+	</CardContent>
+</Card>
@@ -8,9 +8,10 @@
 		networkOverallStatusHint,
 		networkOverallStatusLabel
 	} from '$lib/network/network-metrics.js';
-	import { Alert, AlertDescription, AlertTitle } from '$lib/ui/core/alert/index.js';
-	import { Button } from '$lib/ui/core/button/index.js';
-	import KpiMetricsGrid from '$lib/ui/patterns/kpi/kpi-metrics-grid.svelte';
+	import { Alert, AlertDescription, AlertTitle } from '@evobgp/ui/components/alert/index.js';
+	import { Button } from '@evobgp/ui/components/button/index.js';
+	import SectionCards, { type SectionCardItem } from '$lib/components/section-cards.svelte';
+	import SectionCardsSkeleton from '$lib/components/section-cards-skeleton.svelte';
 	import NetworkSpeakerStatusCard from '$lib/components/network/NetworkSpeakerStatusCard.svelte';
 	import CheckCircle from '@lucide/svelte/icons/check-circle';
 	import AlertTriangle from '@lucide/svelte/icons/alert-triangle';
@@ -41,45 +42,6 @@
 		onSpeakerSelect
 	}: Props = $props();

-	const statAccents = [
-		{
-			border: 'border-l-chart-3',
-			bg: 'bg-chart-3/5',
-			iconBg: 'bg-chart-3/15',
-			iconText: 'text-chart-3'
-		},
-		{
-			border: 'border-l-chart-2',
-			bg: 'bg-chart-2/5',
-			iconBg: 'bg-chart-2/15',
-			iconText: 'text-chart-2'
-		},
-		{
-			border: 'border-l-chart-4',
-			bg: 'bg-chart-4/5',
-			iconBg: 'bg-chart-4/15',
-			iconText: 'text-chart-4'
-		},
-		{
-			border: 'border-l-warning',
-			bg: 'bg-warning/5',
-			iconBg: 'bg-warning/15',
-			iconText: 'text-warning'
-		},
-		{
-			border: 'border-l-destructive',
-			bg: 'bg-destructive/5',
-			iconBg: 'bg-destructive/15',
-			iconText: 'text-destructive'
-		},
-		{
-			border: 'border-l-info',
-			bg: 'bg-info/10',
-			iconBg: 'bg-info/15',
-			iconText: 'text-info'
-		}
-	] as const;
-
 	const metrics = $derived(aggregateNetworkMetrics(peers, speakers, bird));
 	const overallStatus = $derived(deriveNetworkOverallStatus(metrics));
 	const overallHint = $derived(networkOverallStatusHint(overallStatus, metrics));
@@ -91,76 +53,51 @@
 		return `${bird.bgp_established}/${bird.bgp_sessions_total}`;
 	});

-	const kpiCards = $derived.by(() => [
+	const sectionCards = $derived.by((): SectionCardItem[] => [
 		{
-			id: 'peers',
 			label: 'BGP-пиры',
 			value: initialLoading ? '—' : String(metrics.peersTotal),
-			description: initialLoading
+			hint: initialLoading
 				? ''
-				: `${metrics.peersEstablished} Established из ${metrics.peersEnabled} вкл.`,
+				: `${metrics.peersEstablished} Established / ${metrics.peersEnabled} вкл.`,
 			icon: Share2,
-			accent: statAccents[0],
-			badge: metrics.peersMismatch > 0 ? `mismatch ${metrics.peersMismatch}` : 'peers',
-			badgeClass:
-				metrics.peersMismatch > 0 ? 'border-warning/30 bg-warning/15 text-warning' : undefined
+			variant: metrics.peersMismatch > 0 ? 'warning' : 'default'
 		},
 		{
-			id: 'established',
 			label: 'Активные сессии',
 			value: initialLoading ? '—' : String(metrics.peersEstablished),
-			description: 'Established среди включённых пиров',
-			icon: CheckCircle2,
-			accent: statAccents[1],
-			badge: metrics.peersEstablished > 0 ? 'Established' : 'нет сессий',
-			badgeClass:
-				metrics.peersEstablished > 0 ? 'border-success/30 bg-success/15 text-success' : undefined
+			hint: 'Established',
+			icon: CheckCircle2
 		},
 		{
-			id: 'speakers',
 			label: 'Спикеры online',
 			value: initialLoading ? '—' : `${metrics.speakersOnline}/${metrics.speakersTotal}`,
-			description: 'agent + BGP poll',
+			hint: 'agent + BGP poll',
 			icon: Server,
-			accent: statAccents[2],
-			badge: metrics.speakersOnline === metrics.speakersTotal ? 'все online' : 'есть offline',
-			badgeClass:
-				metrics.speakersOnline === metrics.speakersTotal
-					? 'border-success/30 bg-success/15 text-success'
-					: 'border-warning/30 bg-warning/15 text-warning'
+			variant: metrics.speakersOnline < metrics.speakersTotal ? 'warning' : 'default'
 		},
 		{
-			id: 'drift',
 			label: 'Drift',
 			value: initialLoading ? '—' : String(metrics.speakersDrift),
-			description: 'applied ≠ published',
+			hint: 'applied ≠ published',
 			icon: GitBranch,
-			accent: statAccents[3],
-			badge: metrics.speakersDrift > 0 ? 'требует apply' : 'синхронно',
-			badgeVariant: metrics.speakersDrift > 0 ? ('secondary' as const) : ('outline' as const)
+			variant: metrics.speakersDrift > 0 ? 'warning' : 'default'
 		},
 		{
-			id: 'poll-errors',
 			label: 'Ошибки опроса',
 			value: initialLoading ? '—' : String(metrics.pollErrors),
-			description: 'agent или BGP poll',
+			hint: 'agent / BGP poll',
 			icon: Activity,
-			accent: statAccents[4],
-			badge: metrics.pollErrors > 0 ? 'ошибки' : 'ok',
-			badgeClass:
-				metrics.pollErrors === 0 ? 'border-success/30 bg-success/15 text-success' : undefined
+			variant: metrics.pollErrors > 0 ? 'destructive' : 'default'
 		},
 		{
-			id: 'cp-bird',
 			label: 'BGP на CP',
 			value: initialLoading ? '—' : birdText,
-			description: bird?.birdc_configured
-				? 'Established / total на API-хосте'
-				: (bird?.message ?? 'birdc не настроен'),
+			hint: bird?.birdc_configured ? 'Established / total' : (bird?.message ?? 'birdc N/A'),
 			icon: Bird,
-			accent: statAccents[5],
-			badge: !bird?.birdc_configured ? 'N/A' : bird?.healthy ? 'В норме' : 'Деградация',
-			href: '/monitoring' as const
+			onClick: () => {
+				window.location.href = resolve('/monitoring');
+			}
 		}
 	]);
 </script>
@@ -206,12 +143,11 @@
 		{/if}
 	{/if}

-	<KpiMetricsGrid
-		cards={kpiCards}
-		loading={initialLoading || loading}
-		skeletonCount={6}
-		class="sm:grid-cols-2 xl:grid-cols-3"
-	/>
+	{#if initialLoading || loading}
+		<SectionCardsSkeleton count={6} class="sm:grid-cols-2 xl:grid-cols-3" />
+	{:else}
+		<SectionCards items={sectionCards} class="sm:grid-cols-2 xl:grid-cols-3" />
+	{/if}

 	<section class="flex min-w-0 flex-col gap-4">
 		<div class="flex flex-wrap items-center justify-between gap-2">
@@ -1,16 +1,16 @@
 <script lang="ts">
 	import { apiMutate } from '$lib/api/client.js';
 	import type { PeerRow, BgpPeerCreate, SpeakerRow, PeerSessionOnSpeaker } from '$lib/api/types.js';
-	import { Badge } from '$lib/ui/core/badge/index.js';
-	import { Button } from '$lib/ui/core/button/index.js';
-	import { Label } from '$lib/ui/core/label/index.js';
+	import { Badge } from '@evobgp/ui/components/badge/index.js';
+	import { Button } from '@evobgp/ui/components/button/index.js';
+	import { Label } from '@evobgp/ui/components/label/index.js';
 	import {
 		Card,
 		CardContent,
 		CardHeader,
 		CardTitle,
 		CardDescription
-	} from '$lib/ui/core/card/index.js';
+	} from '@evobgp/ui/components/card/index.js';
 	import {
 		Dialog,
 		DialogContent,
@@ -18,13 +18,18 @@
 		DialogTitle,
 		DialogFooter,
 		DialogDescription
-	} from '$lib/ui/core/dialog/index.js';
-	import { Select, SelectContent, SelectItem, SelectTrigger } from '$lib/ui/core/select/index.js';
-	import { Switch } from '$lib/ui/core/switch/index.js';
-	import FormField from '$lib/ui/patterns/form/form-field.svelte';
-	import AppInput from '$lib/ui/patterns/form/app-input.svelte';
-	import AppDataTable from '$lib/ui/patterns/data-table/app-data-table.svelte';
-	import { confirm } from '$lib/ui/patterns/confirm/confirm-state.svelte.js';
+	} from '@evobgp/ui/components/dialog/index.js';
+	import {
+		Select,
+		SelectContent,
+		SelectItem,
+		SelectTrigger
+	} from '@evobgp/ui/components/select/index.js';
+	import { Switch } from '@evobgp/ui/components/switch/index.js';
+	import FormField from '$lib/components/patterns/form/form-field.svelte';
+	import AppInput from '$lib/components/patterns/form/app-input.svelte';
+	import AppDataTable from '$lib/components/patterns/data-table/app-data-table.svelte';
+	import { confirm } from '$lib/components/patterns/confirm/confirm-state.svelte.js';
 	import { notify, notifyApiError } from '$lib/ui/app/toast.js';
 	import Plus from '@lucide/svelte/icons/plus';
 	import Pencil from '@lucide/svelte/icons/pencil';
@@ -9,17 +9,17 @@
 		speakerLiveAgentError,
 		speakerLiveBgpError
 	} from '$lib/network/network-metrics.js';
-	import { Alert, AlertDescription, AlertTitle } from '$lib/ui/core/alert/index.js';
-	import { Badge } from '$lib/ui/core/badge/index.js';
-	import { Button } from '$lib/ui/core/button/index.js';
-	import { Separator } from '$lib/ui/core/separator/index.js';
+	import { Alert, AlertDescription, AlertTitle } from '@evobgp/ui/components/alert/index.js';
+	import { Badge } from '@evobgp/ui/components/badge/index.js';
+	import { Button } from '@evobgp/ui/components/button/index.js';
+	import { Separator } from '@evobgp/ui/components/separator/index.js';
 	import {
 		Sheet,
 		SheetContent,
 		SheetDescription,
 		SheetHeader,
 		SheetTitle
-	} from '$lib/ui/core/sheet/index.js';
+	} from '@evobgp/ui/components/sheet/index.js';
 	import {
 		Table,
 		TableBody,
@@ -27,7 +27,7 @@
 		TableHead,
 		TableHeader,
 		TableRow
-	} from '$lib/ui/core/table/index.js';
+	} from '@evobgp/ui/components/table/index.js';
 	import AlertTriangle from '@lucide/svelte/icons/alert-triangle';

 	type Props = {
@@ -6,14 +6,14 @@
 		speakerHasDrift,
 		speakerLabel
 	} from '$lib/network/network-metrics.js';
-	import { Badge } from '$lib/ui/core/badge/index.js';
+	import { Badge } from '@evobgp/ui/components/badge/index.js';
 	import {
 		Card,
 		CardContent,
 		CardHeader,
 		CardTitle,
 		CardDescription
-	} from '$lib/ui/core/card/index.js';
+	} from '@evobgp/ui/components/card/index.js';
 	import { cn } from '$lib/utils.js';
 	import Server from '@lucide/svelte/icons/server';

@@ -6,15 +6,15 @@
 		speakerDisplayStatus,
 		speakerHasDrift
 	} from '$lib/network/network-metrics.js';
-	import { Badge } from '$lib/ui/core/badge/index.js';
-	import { Button } from '$lib/ui/core/button/index.js';
+	import { Badge } from '@evobgp/ui/components/badge/index.js';
+	import { Button } from '@evobgp/ui/components/button/index.js';
 	import {
 		Card,
 		CardContent,
 		CardHeader,
 		CardTitle,
 		CardDescription
-	} from '$lib/ui/core/card/index.js';
+	} from '@evobgp/ui/components/card/index.js';
 	import {
 		Dialog,
 		DialogContent,
@@ -22,12 +22,12 @@
 		DialogTitle,
 		DialogFooter,
 		DialogDescription
-	} from '$lib/ui/core/dialog/index.js';
-	import { Checkbox } from '$lib/ui/core/checkbox/index.js';
-	import FormField from '$lib/ui/patterns/form/form-field.svelte';
-	import AppInput from '$lib/ui/patterns/form/app-input.svelte';
-	import AppDataTable from '$lib/ui/patterns/data-table/app-data-table.svelte';
-	import { confirm } from '$lib/ui/patterns/confirm/confirm-state.svelte.js';
+	} from '@evobgp/ui/components/dialog/index.js';
+	import { Checkbox } from '@evobgp/ui/components/checkbox/index.js';
+	import FormField from '$lib/components/patterns/form/form-field.svelte';
+	import AppInput from '$lib/components/patterns/form/app-input.svelte';
+	import AppDataTable from '$lib/components/patterns/data-table/app-data-table.svelte';
+	import { confirm } from '$lib/components/patterns/confirm/confirm-state.svelte.js';
 	import { notify, notifyApiError } from '$lib/ui/app/toast.js';
 	import Plus from '@lucide/svelte/icons/plus';
 	import Pencil from '@lucide/svelte/icons/pencil';
@@ -1,14 +1,19 @@
 <script lang="ts">
 	import type { RevisionDiff, RevisionPrefix, RevisionRow } from '$lib/api/types.js';
-	import { Button } from '$lib/ui/core/button/index.js';
+	import { Button } from '@evobgp/ui/components/button/index.js';
 	import {
 		Card,
 		CardContent,
 		CardDescription,
 		CardHeader,
 		CardTitle
-	} from '$lib/ui/core/card/index.js';
-	import { Select, SelectContent, SelectItem, SelectTrigger } from '$lib/ui/core/select/index.js';
+	} from '@evobgp/ui/components/card/index.js';
+	import {
+		Select,
+		SelectContent,
+		SelectItem,
+		SelectTrigger
+	} from '@evobgp/ui/components/select/index.js';
 	import { formatDateTime } from '$lib/modules/display.js';
 	import { sortRevisionDiffItems } from '$lib/sort-prefixes.js';

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Button } from '$lib/ui/core/button/index.js';
-	import { Input } from '$lib/ui/core/input/index.js';
-	import { Label } from '$lib/ui/core/label/index.js';
+	import { Button } from '@evobgp/ui/components/button/index.js';
+	import { Input } from '@evobgp/ui/components/input/index.js';
+	import { Label } from '@evobgp/ui/components/label/index.js';
 	import Filter from '@lucide/svelte/icons/filter';
 	import Search from '@lucide/svelte/icons/search';
 	import X from '@lucide/svelte/icons/x';
@@ -2,16 +2,16 @@
 	import { SvelteMap, SvelteSet } from 'svelte/reactivity';
 	import type { JobRow } from '$lib/api/types.js';
 	import type { JobDetailedReport, JobLogEntry } from './types.js';
-	import { Badge } from '$lib/ui/core/badge/index.js';
-	import { Button } from '$lib/ui/core/button/index.js';
+	import { Badge } from '@evobgp/ui/components/badge/index.js';
+	import { Button } from '@evobgp/ui/components/button/index.js';
 	import {
 		Card,
 		CardContent,
 		CardDescription,
 		CardHeader,
 		CardTitle
-	} from '$lib/ui/core/card/index.js';
-	import EmptyState from '$lib/ui/patterns/empty-state/empty-state.svelte';
+	} from '@evobgp/ui/components/card/index.js';
+	import EmptyState from '$lib/components/patterns/empty-state/empty-state.svelte';
 	import { formatDateTime } from '$lib/modules/display.js';
 	import RefreshCw from '@lucide/svelte/icons/refresh-cw';
 	import Eye from '@lucide/svelte/icons/eye';
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import type { BirdStatus } from '$lib/api/types.js';
-	import { Badge } from '$lib/ui/core/badge/index.js';
-	import { Button } from '$lib/ui/core/button/index.js';
-	import { Card } from '$lib/ui/core/card/index.js';
+	import { Badge } from '@evobgp/ui/components/badge/index.js';
+	import { Button } from '@evobgp/ui/components/button/index.js';
+	import { Card } from '@evobgp/ui/components/card/index.js';
 	import RefreshCw from '@lucide/svelte/icons/refresh-cw';
 	import Play from '@lucide/svelte/icons/play';
 	import RotateCcw from '@lucide/svelte/icons/rotate-ccw';
@@ -1,14 +1,14 @@
 <script lang="ts">
 	import type { RevisionRow } from '$lib/api/types.js';
-	import { Button } from '$lib/ui/core/button/index.js';
+	import { Button } from '@evobgp/ui/components/button/index.js';
 	import {
 		Card,
 		CardContent,
 		CardDescription,
 		CardHeader,
 		CardTitle
-	} from '$lib/ui/core/card/index.js';
-	import AppDataTable from '$lib/ui/patterns/data-table/app-data-table.svelte';
+	} from '@evobgp/ui/components/card/index.js';
+	import AppDataTable from '$lib/components/patterns/data-table/app-data-table.svelte';
 	import { formatDateTime } from '$lib/modules/display.js';
 	import RefreshCw from '@lucide/svelte/icons/refresh-cw';
 	import Undo from '@lucide/svelte/icons/undo';
@@ -6,9 +6,9 @@
 		getCoreRowModel,
 		getPaginationRowModel
 	} from '@tanstack/table-core';
-	import { createSvelteTable, FlexRender } from '$lib/ui/core/data-table/index.js';
-	import * as Table from '$lib/ui/core/table/index.js';
-	import { Button } from '$lib/ui/core/button/index.js';
+	import { createSvelteTable, FlexRender } from '@evobgp/ui/components/data-table/index.js';
+	import * as Table from '@evobgp/ui/components/table/index.js';
+	import { Button } from '@evobgp/ui/components/button/index.js';

 	type Props = {
 		rows: RowData[];
@@ -8,15 +8,15 @@
 		networkOverallStatusHint,
 		networkOverallStatusLabel
 	} from '$lib/network/network-metrics.js';
-	import { Alert, AlertDescription, AlertTitle } from '$lib/ui/core/alert/index.js';
-	import { Button } from '$lib/ui/core/button/index.js';
+	import { Alert, AlertDescription, AlertTitle } from '@evobgp/ui/components/alert/index.js';
+	import { Button } from '@evobgp/ui/components/button/index.js';
 	import {
 		Card,
 		CardContent,
 		CardHeader,
 		CardTitle,
 		CardDescription
-	} from '$lib/ui/core/card/index.js';
+	} from '@evobgp/ui/components/card/index.js';
 	import CheckCircle from '@lucide/svelte/icons/check-circle';
 	import AlertTriangle from '@lucide/svelte/icons/alert-triangle';
 	import XCircle from '@lucide/svelte/icons/x-circle';
@@ -0,0 +1,80 @@
+<script lang="ts">
+	import { resolve } from '$app/paths';
+	import type { JobRow } from '$lib/api/types.js';
+	import { formatDateTime } from '$lib/modules/display.js';
+	import { jobKindTitle } from '$lib/operations/job-kind-label.js';
+	import { jobStatusRu, jobStatusBadgeVariant } from '$lib/ui-labels.js';
+	import { Badge } from '@evobgp/ui/components/badge/index.js';
+	import { Button } from '@evobgp/ui/components/button/index.js';
+	import DataTableCard from '$lib/components/data-table-card.svelte';
+	import AppDataTable from '$lib/components/patterns/data-table/app-data-table.svelte';
+	import ArrowRight from '@lucide/svelte/icons/arrow-right';
+	import ExternalLink from '@lucide/svelte/icons/external-link';
+
+	type Props = {
+		items: JobRow[];
+		moduleNameById: ReadonlyMap<string, string>;
+		loading?: boolean;
+		initialLoading?: boolean;
+		error?: string | null;
+	};
+
+	let {
+		items,
+		moduleNameById,
+		loading = false,
+		initialLoading = false,
+		error = null
+	}: Props = $props();
+
+	const columns = [
+		{ id: 'kind', label: 'Вид', sortable: true, sortValue: (j: JobRow) => j.kind },
+		{
+			id: 'status',
+			label: 'Статус',
+			sortable: true,
+			sortValue: (j: JobRow) => j.status
+		},
+		{
+			id: 'created',
+			label: 'Создана',
+			sortable: true,
+			sortValue: (j: JobRow) => j.created_at ?? ''
+		},
+		{ id: 'actions', label: '', class: 'w-10' }
+	] as const;
+</script>
+
+<DataTableCard title="Последние задачи" description="Фоновые задачи ingest, refresh и apply">
+	{#snippet toolbar()}
+		<Button variant="outline" size="sm" href={resolve('/operations?tab=jobs')}>
+			Все
+			<ArrowRight class="size-3.5" />
+		</Button>
+	{/snippet}
+	<AppDataTable
+		columns={[...columns]}
+		rows={items}
+		rowKey={(j) => j.job_id}
+		loading={initialLoading || loading}
+		{error}
+		emptyTitle="Нет задач"
+		emptyDescription="Задачи появятся после refresh или деплоя."
+	>
+		{#snippet cell({ row: j, column })}
+			{#if column.id === 'kind'}
+				<span class="font-medium">{jobKindTitle(j, moduleNameById)}</span>
+			{:else if column.id === 'status'}
+				<Badge variant={jobStatusBadgeVariant(j.status)}>{jobStatusRu(j.status)}</Badge>
+			{:else if column.id === 'created'}
+				<span class="text-xs whitespace-nowrap text-muted-foreground">
+					{formatDateTime(j.created_at)}
+				</span>
+			{:else if column.id === 'actions'}
+				<Button variant="ghost" size="icon-sm" href={resolve('/operations?tab=jobs')}>
+					<ExternalLink class="size-3.5" />
+				</Button>
+			{/if}
+		{/snippet}
+	</AppDataTable>
+</DataTableCard>
@@ -0,0 +1,78 @@
+<script lang="ts">
+	import { resolve } from '$app/paths';
+	import type { RevisionRow } from '$lib/api/types.js';
+	import { formatDateTime } from '$lib/modules/display.js';
+	import { Button } from '@evobgp/ui/components/button/index.js';
+	import DataTableCard from '$lib/components/data-table-card.svelte';
+	import AppDataTable from '$lib/components/patterns/data-table/app-data-table.svelte';
+	import ArrowRight from '@lucide/svelte/icons/arrow-right';
+	import ExternalLink from '@lucide/svelte/icons/external-link';
+
+	type Props = {
+		items: RevisionRow[];
+		loading?: boolean;
+		initialLoading?: boolean;
+		error?: string | null;
+	};
+
+	let { items, loading = false, initialLoading = false, error = null }: Props = $props();
+
+	const columns = [
+		{
+			id: 'id',
+			label: 'ID',
+			sortable: true,
+			sortValue: (rev: RevisionRow) => rev.id
+		},
+		{
+			id: 'created',
+			label: 'Создана',
+			sortable: true,
+			sortValue: (rev: RevisionRow) => rev.created_at ?? ''
+		},
+		{
+			id: 'prefixes',
+			label: 'Префиксов',
+			sortable: true,
+			sortValue: (rev: RevisionRow) => rev.materialized_prefix_count ?? 0
+		},
+		{ id: 'actions', label: '', class: 'w-10' }
+	] as const;
+</script>
+
+<DataTableCard
+	title="Последние ревизии"
+	description="Снимки конфигурации BIRD после обновления модулей"
+>
+	{#snippet toolbar()}
+		<Button variant="outline" size="sm" href={resolve('/operations')}>
+			Все
+			<ArrowRight class="size-3.5" />
+		</Button>
+	{/snippet}
+	<AppDataTable
+		columns={[...columns]}
+		rows={items}
+		rowKey={(rev) => rev.id}
+		loading={initialLoading || loading}
+		{error}
+		emptyTitle="Нет ревизий"
+		emptyDescription="Ревизии появятся после обновления модулей."
+	>
+		{#snippet cell({ row: rev, column })}
+			{#if column.id === 'id'}
+				<span class="font-mono text-xs">{rev.id.slice(0, 8)}…</span>
+			{:else if column.id === 'created'}
+				<span class="text-sm whitespace-nowrap text-muted-foreground">
+					{formatDateTime(rev.created_at)}
+				</span>
+			{:else if column.id === 'prefixes'}
+				<span class="tabular-nums">{rev.materialized_prefix_count}</span>
+			{:else if column.id === 'actions'}
+				<Button variant="ghost" size="icon-sm" href={resolve('/operations')}>
+					<ExternalLink class="size-3.5" />
+				</Button>
+			{/if}
+		{/snippet}
+	</AppDataTable>
+</DataTableCard>
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { cn } from '$lib/utils.js';
+
+	type Props = {
+		children: Snippet;
+		class?: string;
+	};
+
+	let { children, class: className }: Props = $props();
+</script>
+
+<div class={cn('flex flex-col gap-4 md:gap-6', className)}>
+	{@render children()}
+</div>
@@ -8,7 +8,7 @@
 		AlertDialogFooter,
 		AlertDialogHeader,
 		AlertDialogTitle
-	} from '$lib/ui/core/alert-dialog/index.js';
+	} from '@evobgp/ui/components/alert-dialog/index.js';
 	import { closeConfirm, confirmState } from './confirm-state.svelte.js';

 	const state = $derived(confirmState.current);
@@ -39,7 +39,7 @@
 				</AlertDialogCancel>
 				<AlertDialogAction
 					class={state.destructive
-						? 'text-destructive-foreground bg-destructive hover:bg-destructive/90'
+						? 'bg-destructive text-destructive-foreground hover:bg-destructive/90'
 						: ''}
 					disabled={state.loading}
 					onclick={(e) => {
@@ -1,14 +1,14 @@
 <script lang="ts" generics="T extends Record<string, unknown>">
 	import type { Snippet } from 'svelte';
 	import { cn } from '$lib/utils.js';
-	import * as Table from '$lib/ui/core/table/index.js';
-	import { Skeleton } from '$lib/ui/core/skeleton/index.js';
-	import { Alert, AlertDescription, AlertTitle } from '$lib/ui/core/alert/index.js';
-	import EmptyState from '$lib/ui/patterns/empty-state/empty-state.svelte';
+	import * as Table from '@evobgp/ui/components/table/index.js';
+	import { Skeleton } from '@evobgp/ui/components/skeleton/index.js';
+	import { Alert, AlertDescription, AlertTitle } from '@evobgp/ui/components/alert/index.js';
+	import EmptyState from '$lib/components/patterns/empty-state/empty-state.svelte';
 	import ArrowUpDown from '@lucide/svelte/icons/arrow-up-down';
 	import ArrowUp from '@lucide/svelte/icons/arrow-up';
 	import ArrowDown from '@lucide/svelte/icons/arrow-down';
-	import { Button } from '$lib/ui/core/button/index.js';
+	import { Button } from '@evobgp/ui/components/button/index.js';
 	import type { DataTableColumn } from './types.js';

 	type Props = {
@@ -19,6 +19,8 @@
 		error?: string | null;
 		emptyTitle?: string;
 		emptyDescription?: string;
+		/** Client-side page size; 0 = all rows */
+		pageSize?: number;
 		toolbar?: Snippet;
 		cell: Snippet<[{ row: T; column: DataTableColumn<T> }]>;
 		class?: string;
@@ -32,6 +34,7 @@
 		error = null,
 		emptyTitle = 'Нет записей',
 		emptyDescription,
+		pageSize = 0,
 		toolbar,
 		cell,
 		class: className
@@ -39,6 +42,7 @@

 	let sortColumnId = $state<string | null>(null);
 	let sortDir = $state<'asc' | 'desc'>('asc');
+	let pageIndex = $state(0);

 	const sortedRows = $derived.by(() => {
 		if (!sortColumnId) return rows;
@@ -57,6 +61,21 @@
 		return copy;
 	});

+	const paginatedRows = $derived.by(() => {
+		if (!pageSize || pageSize <= 0) return sortedRows;
+		const start = pageIndex * pageSize;
+		return sortedRows.slice(start, start + pageSize);
+	});
+
+	const pageCount = $derived(
+		pageSize > 0 ? Math.max(1, Math.ceil(sortedRows.length / pageSize)) : 1
+	);
+
+	$effect(() => {
+		rows;
+		if (pageIndex !== 0) pageIndex = 0;
+	});
+
 	function toggleSort(col: DataTableColumn<T>) {
 		if (!col.sortable) return;
 		if (sortColumnId === col.id) {
@@ -131,7 +150,7 @@
 						</Table.Cell>
 					</Table.Row>
 				{:else}
-					{#each sortedRows as row (rowKey(row))}
+					{#each paginatedRows as row (rowKey(row))}
 						<Table.Row>
 							{#each columns as col (col.id)}
 								<Table.Cell class={col.class}>
@@ -144,4 +163,27 @@
 			</Table.Body>
 		</Table.Root>
 	</div>
+
+	{#if pageSize > 0 && sortedRows.length > pageSize}
+		<div class="flex items-center justify-between gap-2 text-sm text-muted-foreground">
+			<span>
+				{pageIndex * pageSize + 1}–{Math.min((pageIndex + 1) * pageSize, sortedRows.length)} из
+				{sortedRows.length}
+			</span>
+			<div class="flex gap-2">
+				<Button
+					variant="outline"
+					size="sm"
+					disabled={pageIndex === 0}
+					onclick={() => (pageIndex -= 1)}>Назад</Button
+				>
+				<Button
+					variant="outline"
+					size="sm"
+					disabled={pageIndex >= pageCount - 1}
+					onclick={() => (pageIndex += 1)}>Вперёд</Button
+				>
+			</div>
+		</div>
+	{/if}
 </div>
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Card, CardContent, CardHeader } from '$lib/ui/core/card/index.js';
-	import { Skeleton } from '$lib/ui/core/skeleton/index.js';
+	import { Card, CardContent, CardHeader } from '@evobgp/ui/components/card/index.js';
+	import { Skeleton } from '@evobgp/ui/components/skeleton/index.js';
 </script>

 <Card>
@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { Skeleton } from '$lib/ui/core/skeleton/index.js';
-	import * as Table from '$lib/ui/core/table/index.js';
+	import { Skeleton } from '@evobgp/ui/components/skeleton/index.js';
+	import * as Table from '@evobgp/ui/components/table/index.js';

 	type Props = {
 		columns?: number;
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Input } from '$lib/ui/core/input/index.js';
+	import { Input } from '@evobgp/ui/components/input/index.js';
 	import { cn } from '$lib/utils.js';
 	import type { ComponentProps } from 'svelte';

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Textarea } from '$lib/ui/core/textarea/index.js';
+	import { Textarea } from '@evobgp/ui/components/textarea/index.js';
 	import { cn } from '$lib/utils.js';
 	import type { ComponentProps } from 'svelte';

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import { cn } from '$lib/utils.js';
-	import { Label } from '$lib/ui/core/label/index.js';
+	import { Label } from '@evobgp/ui/components/label/index.js';

 	type Props = {
 		label: string;
@@ -0,0 +1,69 @@
+<script lang="ts" generics="T">
+	import type { Snippet } from 'svelte';
+	import AlertCircle from '@lucide/svelte/icons/alert-circle';
+	import RefreshCw from '@lucide/svelte/icons/refresh-cw';
+	import { Button } from '@evobgp/ui/components/button/index.js';
+	import { Skeleton } from '@evobgp/ui/components/skeleton/index.js';
+	import EmptyState from '$lib/components/patterns/empty-state/empty-state.svelte';
+
+	type Props = {
+		data: T | undefined;
+		isLoading: boolean;
+		isError: boolean;
+		error?: unknown;
+		empty?: boolean;
+		emptyTitle?: string;
+		emptyDescription?: string;
+		emptyAction?: Snippet;
+		onRetry?: () => void;
+		skeleton?: Snippet;
+		children: Snippet<[T]>;
+	};
+
+	let {
+		data,
+		isLoading,
+		isError,
+		error,
+		empty = false,
+		emptyTitle = 'Нет данных',
+		emptyDescription,
+		emptyAction,
+		onRetry,
+		skeleton,
+		children
+	}: Props = $props();
+
+	const errorMessage = $derived(
+		error instanceof Error ? error.message : 'Не удалось загрузить данные'
+	);
+</script>
+
+{#if isLoading}
+	{#if skeleton}
+		{@render skeleton()}
+	{:else}
+		<div class="flex flex-col gap-3">
+			<Skeleton class="h-8 w-48" />
+			<Skeleton class="h-32 w-full" />
+		</div>
+	{/if}
+{:else if isError}
+	<EmptyState
+		title="Ошибка загрузки"
+		description={errorMessage}
+		icon={AlertCircle}
+		action={onRetry ? retryAction : undefined}
+	/>
+{:else if empty || data == null}
+	<EmptyState title={emptyTitle} description={emptyDescription} action={emptyAction} />
+{:else}
+	{@render children(data)}
+{/if}
+
+{#snippet retryAction()}
+	<Button variant="outline" size="sm" onclick={onRetry}>
+		<RefreshCw class="size-4" />
+		Повторить
+	</Button>
+{/snippet}
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { Card, CardContent } from '@evobgp/ui/components/card/index.js';
+	import { Skeleton } from '@evobgp/ui/components/skeleton/index.js';
+	import { cn } from '$lib/utils.js';
+
+	type Props = {
+		count?: number;
+		class?: string;
+	};
+
+	let { count = 4, class: className }: Props = $props();
+</script>
+
+<div class={cn('grid gap-3 sm:grid-cols-2 lg:grid-cols-3', className)}>
+	{#each Array.from({ length: count }) as _, i (i)}
+		<Card>
+			<CardContent class="flex items-start gap-2.5 px-3 py-2.5">
+				<Skeleton class="size-7 shrink-0 rounded-md" />
+				<div class="flex flex-1 flex-col gap-2">
+					<Skeleton class="h-3 w-20" />
+					<Skeleton class="h-6 w-16" />
+				</div>
+			</CardContent>
+		</Card>
+	{/each}
+</div>
@@ -0,0 +1,111 @@
+<script lang="ts">
+	import type { Component, Snippet } from 'svelte';
+	import { Card, CardContent } from '@evobgp/ui/components/card/index.js';
+	import { cn } from '$lib/utils.js';
+
+	export type SectionCardItem = {
+		label: string | Snippet;
+		value: string | number | Snippet;
+		hint?: string | Snippet;
+		icon?: Component;
+		badge?: Snippet;
+		variant?: 'default' | 'warning' | 'destructive';
+		active?: boolean;
+		onClick?: () => void;
+	};
+
+	type Props = {
+		items: SectionCardItem[];
+		class?: string;
+	};
+
+	let { items, class: className }: Props = $props();
+
+	const variantClass: Record<NonNullable<SectionCardItem['variant']>, string> = {
+		default: '',
+		warning: 'border-warning/50',
+		destructive: 'border-destructive/50'
+	};
+
+	const valueVariantClass: Record<NonNullable<SectionCardItem['variant']>, string> = {
+		default: '',
+		warning: 'text-warning-foreground',
+		destructive: 'text-destructive'
+	};
+
+	function sectionGridClass(count: number): string {
+		if (count <= 1) return 'grid-cols-1';
+		if (count === 2) return 'sm:grid-cols-2';
+		if (count === 3) return 'sm:grid-cols-2 lg:grid-cols-3';
+		if (count === 4) return 'sm:grid-cols-2 lg:grid-cols-4';
+		if (count === 5) return 'sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5';
+		if (count === 6) return 'sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6';
+		return 'sm:grid-cols-2 lg:grid-cols-3';
+	}
+</script>
+
+<div class={cn('grid gap-3', sectionGridClass(items.length), className)}>
+	{#each items as item, idx (typeof item.label === 'string' ? item.label : idx)}
+		{@const clickable = Boolean(item.onClick)}
+		<Card
+			class={cn(
+				'gap-0',
+				variantClass[item.variant ?? 'default'],
+				item.active && 'border-primary ring-1 ring-primary/30',
+				clickable && 'cursor-pointer transition-colors hover:bg-muted/40'
+			)}
+			onclick={item.onClick}
+			role={clickable ? 'button' : undefined}
+			tabindex={clickable ? 0 : undefined}
+			onkeydown={(e) => {
+				if (clickable && (e.key === 'Enter' || e.key === ' ')) {
+					e.preventDefault();
+					item.onClick?.();
+				}
+			}}
+		>
+			<CardContent class="flex items-start gap-2.5 px-3 py-2.5">
+				{#if item.icon}
+					<span
+						class="flex size-7 shrink-0 items-center justify-center rounded-md bg-muted/60 text-muted-foreground"
+					>
+						<item.icon class="size-4" />
+					</span>
+				{/if}
+				<div class="flex min-w-0 flex-1 flex-col gap-0.5">
+					<div class="flex items-center justify-between gap-2">
+						{#if typeof item.label === 'string'}
+							<span class="truncate text-xs text-muted-foreground">{item.label}</span>
+						{:else}
+							<span class="truncate text-xs text-muted-foreground">{@render item.label()}</span>
+						{/if}
+						{#if item.badge}
+							<span class="shrink-0">{@render item.badge()}</span>
+						{/if}
+					</div>
+					<div class="flex min-w-0 items-baseline gap-1.5">
+						<span
+							class={cn(
+								'flex items-center gap-1 text-lg font-semibold tabular-nums',
+								valueVariantClass[item.variant ?? 'default']
+							)}
+						>
+							{#if typeof item.value === 'string' || typeof item.value === 'number'}
+								{item.value}
+							{:else}
+								{@render item.value()}
+							{/if}
+						</span>
+						{#if item.hint}
+							{#if typeof item.hint === 'string'}
+								<span class="truncate text-xs text-muted-foreground">· {item.hint}</span>
+							{:else}
+								<span class="truncate text-xs text-muted-foreground">· {@render item.hint()}</span>
+							{/if}
+						{/if}
+					</div>
+				</div>
+			</CardContent>
+		</Card>
+	{/each}
+</div>
@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { Badge } from '@evobgp/ui/components/badge/index.js';
+	import { cn } from '$lib/utils.js';
+	import type { BadgeVariant } from '@evobgp/ui/components/badge/badge.svelte';
+
+	type SemanticStatus = 'success' | 'warning' | 'info';
+
+	const STATUS_VARIANT: Record<string, BadgeVariant | SemanticStatus> = {
+		active: 'success',
+		ok: 'success',
+		enabled: 'success',
+		paid: 'success',
+		paused: 'secondary',
+		disabled: 'secondary',
+		archived: 'outline',
+		error: 'destructive',
+		failed: 'destructive',
+		running: 'info',
+		warning: 'warning',
+		stale: 'warning',
+		overdue: 'warning'
+	};
+
+	const SEMANTIC_CLASS: Record<SemanticStatus, string> = {
+		success: 'border-success/30 bg-success/10 text-success-foreground',
+		warning: 'border-warning/30 bg-warning/10 text-warning-foreground',
+		info: 'border-info/30 bg-info/10 text-info-foreground'
+	};
+
+	type Props = {
+		status: string;
+		label?: string;
+	};
+
+	let { status, label }: Props = $props();
+
+	const mapped = $derived(STATUS_VARIANT[status] ?? 'outline');
+	const isSemantic = $derived(mapped === 'success' || mapped === 'warning' || mapped === 'info');
+	const variant = $derived(isSemantic ? 'outline' : (mapped as BadgeVariant));
+	const text = $derived(label ?? status);
+</script>
+
+<Badge {variant} class={cn(isSemantic ? SEMANTIC_CLASS[mapped as SemanticStatus] : undefined)}>
+	{text}
+</Badge>
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Skeleton } from '@evobgp/ui/components/skeleton/index.js';
+	import * as Table from '@evobgp/ui/components/table/index.js';
+
+	type Props = {
+		columns?: number;
+		rows?: number;
+	};
+
+	let { columns = 4, rows = 5 }: Props = $props();
+</script>
+
+<div class="rounded-md border">
+	<Table.Root>
+		<Table.Body>
+			{#each Array(rows) as _, ri (ri)}
+				<Table.Row>
+					{#each Array(columns) as _, ci (ci)}
+						<Table.Cell>
+							<Skeleton class="h-5 w-full max-w-[10rem]" />
+						</Table.Cell>
+					{/each}
+				</Table.Row>
+			{/each}
+		</Table.Body>
+	</Table.Root>
+</div>
@@ -0,0 +1,149 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import {
+		loadSettings,
+		partitionSettings,
+		patchSettings,
+		type AdditionalSettingEntry
+	} from '$lib/settings/settings-api.js';
+	import { Button } from '@evobgp/ui/components/button/index.js';
+	import {
+		Card,
+		CardContent,
+		CardDescription,
+		CardHeader,
+		CardTitle
+	} from '@evobgp/ui/components/card/index.js';
+	import { Input } from '@evobgp/ui/components/input/index.js';
+	import EmptyState from '$lib/components/patterns/empty-state/empty-state.svelte';
+	import { confirm } from '$lib/components/patterns/confirm/confirm-state.svelte.js';
+	import { notify, notifyApiError } from '$lib/ui/app/toast.js';
+	import Save from '@lucide/svelte/icons/save';
+	import Plus from '@lucide/svelte/icons/plus';
+	import Trash2 from '@lucide/svelte/icons/trash-2';
+
+	let loading = $state(false);
+	let saving = $state(false);
+	let loaded = $state(false);
+	let additionalSettings = $state<AdditionalSettingEntry[]>([]);
+	let additionalIdCounter = $state(1);
+
+	let canSave = $derived.by(() => {
+		if (loading || saving || !loaded) return false;
+		return additionalSettings.some((entry) => entry.key.trim() !== '');
+	});
+
+	function addAdditionalSetting() {
+		additionalSettings.push({ id: additionalIdCounter++, key: '', value: '' });
+	}
+
+	function requestRemoveAdditionalSetting(entry: AdditionalSettingEntry) {
+		const key = entry.key.trim();
+		void confirm({
+			title: key ? `Удалить параметр «${key}»?` : 'Удалить строку?',
+			description: key
+				? 'Строка исчезнет из формы. Чтобы удалить ключ из tenant, сохраните без него или очистите значение и примените PATCH.'
+				: 'Несохранённая пустая строка будет удалена из формы.',
+			confirmLabel: 'Удалить',
+			destructive: Boolean(key),
+			onConfirm: async () => {
+				additionalSettings = additionalSettings.filter((row) => row.id !== entry.id);
+			}
+		});
+	}
+
+	async function load() {
+		loading = true;
+		try {
+			const settings = await loadSettings();
+			const { partitioned, nextId } = partitionSettings(settings, additionalIdCounter);
+			additionalSettings = partitioned.additional;
+			additionalIdCounter = nextId;
+			loaded = true;
+		} catch (e) {
+			notifyApiError(e);
+		} finally {
+			loading = false;
+		}
+	}
+
+	async function save() {
+		if (!canSave) {
+			notify.error('Нечего сохранять');
+			return;
+		}
+
+		const payload: Record<string, string> = {};
+		for (const entry of additionalSettings) {
+			const key = entry.key.trim();
+			if (!key) continue;
+			payload[key] = entry.value;
+		}
+
+		saving = true;
+		try {
+			await patchSettings(payload);
+			notify.success('Дополнительные параметры сохранены');
+			await load();
+		} catch (e) {
+			notifyApiError(e);
+		} finally {
+			saving = false;
+		}
+	}
+
+	onMount(() => {
+		void load();
+	});
+</script>
+
+<Card>
+	<CardHeader>
+		<div class="flex items-center justify-between gap-4">
+			<div class="space-y-1">
+				<CardTitle>Дополнительные параметры</CardTitle>
+				<CardDescription>Произвольные KV-пары в global_settings (operator).</CardDescription>
+			</div>
+			{#if loaded}
+				<Button variant="outline" size="sm" onclick={addAdditionalSetting}>
+					<Plus class="size-4" />
+					Добавить строку
+				</Button>
+			{/if}
+		</div>
+	</CardHeader>
+	<CardContent class="space-y-4">
+		{#if loading && !loaded}
+			<p class="text-sm text-muted-foreground">Загрузка…</p>
+		{:else if !loaded}
+			<Button variant="outline" onclick={load}>Загрузить настройки</Button>
+		{:else if additionalSettings.length === 0}
+			<EmptyState
+				title="Нет дополнительных параметров"
+				description="Добавьте KV-пару при необходимости."
+			/>
+		{:else}
+			<div class="space-y-2">
+				{#each additionalSettings as entry (entry.id)}
+					<div class="grid grid-cols-1 gap-2 md:grid-cols-[1fr_1fr_auto]">
+						<Input bind:value={entry.key} placeholder="Ключ (например, bird_log_level)" />
+						<Input bind:value={entry.value} placeholder="Значение (строка)" />
+						<Button
+							variant="ghost"
+							size="icon"
+							aria-label="Удалить строку"
+							onclick={() => requestRemoveAdditionalSetting(entry)}
+						>
+							<Trash2 class="size-4" />
+						</Button>
+					</div>
+				{/each}
+			</div>
+
+			<Button onclick={save} disabled={!canSave}>
+				<Save />
+				{saving ? 'Сохранение…' : 'Применить дополнительные параметры'}
+			</Button>
+		{/if}
+	</CardContent>
+</Card>
@@ -14,17 +14,17 @@
 		patchSettings
 	} from '$lib/settings/settings-api.js';
 	import { BIRD_SETTING_KEYS } from '$lib/settings/settings-known-keys.js';
-	import { Button } from '$lib/ui/core/button/index.js';
+	import { Button } from '@evobgp/ui/components/button/index.js';
 	import {
 		Card,
 		CardContent,
 		CardDescription,
 		CardHeader,
 		CardTitle
-	} from '$lib/ui/core/card/index.js';
-	import { Input } from '$lib/ui/core/input/index.js';
-	import { Alert, AlertDescription, AlertTitle } from '$lib/ui/core/alert/index.js';
-	import FormField from '$lib/ui/patterns/form/form-field.svelte';
+	} from '@evobgp/ui/components/card/index.js';
+	import { Input } from '@evobgp/ui/components/input/index.js';
+	import { Alert, AlertDescription, AlertTitle } from '@evobgp/ui/components/alert/index.js';
+	import FormField from '$lib/components/patterns/form/form-field.svelte';
 	import { notify, notifyApiError } from '$lib/ui/app/toast.js';
 	import Save from '@lucide/svelte/icons/save';
 	import Info from '@lucide/svelte/icons/info';
@@ -104,7 +104,7 @@

 <Card>
 	<CardHeader>
-		<CardTitle>Control plane</CardTitle>
+		<CardTitle>BIRD control plane</CardTitle>
 		<CardDescription>
 			Глобальные параметры BIRD для pipeline refresh/apply. Сохранение через
 			<code class="text-xs">PATCH /v1/settings</code> (роль operator).
@@ -115,8 +115,8 @@
 			<Info class="text-info" />
 			<AlertTitle>Подстановка в конфиг</AlertTitle>
 			<AlertDescription>
-				Значения используются при генерации BIRD-конфигурации в pipeline (router id, local AS,
-				адреса). Пиры и спикеры настраиваются на соседних вкладках.
+				Значения используются при генерации BIRD-конфигурации (router id, local AS, адреса). Пиры и
+				спикеры настраиваются в разделе «Сеть».
 			</AlertDescription>
 		</Alert>

@@ -205,7 +205,7 @@

 			<Button onclick={save} disabled={!canSave}>
 				<Save />
-				{saving ? 'Сохранение…' : 'Применить параметры'}
+				{saving ? 'Сохранение…' : 'Применить параметры BIRD'}
 			</Button>
 		{/if}
 	</CardContent>
@@ -0,0 +1,277 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { defaults, superForm } from 'sveltekit-superforms';
+	import { zod4 } from 'sveltekit-superforms/adapters';
+	import type { AuthSession } from '$lib/api/types.js';
+	import { apiJSON } from '$lib/api/client.js';
+	import {
+		emptyRevisionSettingsForm,
+		revisionSettingsSchema
+	} from '$lib/settings/revision-settings.schema.js';
+	import {
+		fetchRevisionPruneEstimate,
+		pruneRevisionsNow,
+		type RevisionPruneEstimate
+	} from '$lib/settings/revision-prune-api.js';
+	import {
+		buildPayloadFromFormFields,
+		loadSettings,
+		partitionSettings,
+		patchSettings
+	} from '$lib/settings/settings-api.js';
+	import { REVISION_SETTING_KEYS } from '$lib/settings/settings-known-keys.js';
+	import { formatBytes } from '$lib/monitoring/postgres.js';
+	import { Button } from '@evobgp/ui/components/button/index.js';
+	import {
+		Card,
+		CardContent,
+		CardDescription,
+		CardHeader,
+		CardTitle
+	} from '@evobgp/ui/components/card/index.js';
+	import { Input } from '@evobgp/ui/components/input/index.js';
+	import FormField from '$lib/components/patterns/form/form-field.svelte';
+	import { confirm } from '$lib/components/patterns/confirm/confirm-state.svelte.js';
+	import { notify, notifyApiError } from '$lib/ui/app/toast.js';
+	import Save from '@lucide/svelte/icons/save';
+	import Trash2 from '@lucide/svelte/icons/trash-2';
+
+	let loading = $state(false);
+	let saving = $state(false);
+	let pruning = $state(false);
+	let loaded = $state(false);
+	let session = $state<AuthSession | null>(null);
+	let estimateLoading = $state(false);
+	let estimate = $state<RevisionPruneEstimate | null>(null);
+
+	const { form, errors, reset, validateForm } = superForm(
+		defaults(emptyRevisionSettingsForm(), zod4(revisionSettingsSchema)),
+		{
+			validators: zod4(revisionSettingsSchema),
+			SPA: true,
+			dataType: 'json'
+		}
+	);
+
+	const isOperator = $derived(session?.role === 'operator');
+	const hasValidationErrors = $derived(Boolean($errors.revision_retention_minutes?.length));
+
+	const parsedRetentionMinutes = $derived.by(() => {
+		const s = String($form.revision_retention_minutes ?? '').trim();
+		if (s === '' || !/^\d+$/.test(s)) return null;
+		const n = Number(s);
+		if (!Number.isInteger(n) || n < 15 || n > 43200) return null;
+		return n;
+	});
+
+	const canSave = $derived.by(() => {
+		if (loading || saving || hasValidationErrors || !loaded) return false;
+		return String($form.revision_retention_minutes ?? '').trim() !== '';
+	});
+
+	const canPruneNow = $derived.by(() => {
+		if (!isOperator || !loaded || pruning || saving || parsedRetentionMinutes === null)
+			return false;
+		return (estimate?.revision_count ?? 0) > 0;
+	});
+
+	async function loadSession() {
+		try {
+			session = await apiJSON<AuthSession>('/v1/auth/session');
+		} catch {
+			session = null;
+		}
+	}
+
+	async function refreshEstimate(minutes: number) {
+		estimateLoading = true;
+		try {
+			estimate = await fetchRevisionPruneEstimate(minutes);
+		} catch (e) {
+			estimate = null;
+			notifyApiError(e, 'Не удалось рассчитать оценку очистки');
+		} finally {
+			estimateLoading = false;
+		}
+	}
+
+	$effect(() => {
+		const minutes = parsedRetentionMinutes;
+		if (!loaded || minutes === null) {
+			estimate = null;
+			return;
+		}
+		const handle = setTimeout(() => {
+			void refreshEstimate(minutes);
+		}, 400);
+		return () => clearTimeout(handle);
+	});
+
+	async function load() {
+		loading = true;
+		try {
+			const settings = await loadSettings();
+			const { partitioned } = partitionSettings(settings);
+			reset({ data: partitioned.revision });
+			loaded = true;
+		} catch (e) {
+			notifyApiError(e);
+		} finally {
+			loading = false;
+		}
+	}
+
+	async function save() {
+		const validation = await validateForm({ update: true });
+		if (!validation.valid) {
+			notify.error('Исправьте ошибки в полях настроек');
+			return;
+		}
+		if (!canSave) {
+			notify.error('Нечего сохранять или есть ошибки в полях');
+			return;
+		}
+
+		const payload = buildPayloadFromFormFields(
+			REVISION_SETTING_KEYS,
+			$form as Record<string, string>,
+			$errors as Partial<Record<string, string[]>>
+		);
+
+		saving = true;
+		try {
+			await patchSettings(payload);
+			notify.success('Параметры хранения ревизий сохранены');
+			await load();
+		} catch (e) {
+			notifyApiError(e);
+		} finally {
+			saving = false;
+		}
+	}
+
+	async function requestPruneNow() {
+		const minutes = parsedRetentionMinutes;
+		if (minutes === null) return;
+		let est: RevisionPruneEstimate;
+		try {
+			est = await fetchRevisionPruneEstimate(minutes);
+		} catch (e) {
+			notifyApiError(e);
+			return;
+		}
+		estimate = est;
+		if (est.revision_count === 0) {
+			notify.info('Нет ревизий для удаления по выбранному retention');
+			return;
+		}
+		void confirm({
+			title: 'Очистить старые ревизии?',
+			description: `Будет удалено ${est.revision_count} ревизий. Ориентировочно освободится ~${formatBytes(est.bytes_estimate)}. Действие необратимо.`,
+			confirmLabel: 'Очистить',
+			destructive: true,
+			onConfirm: async () => {
+				pruning = true;
+				try {
+					const res = await pruneRevisionsNow(minutes);
+					notify.success(
+						`Удалено ревизий: ${res.deleted_revisions}, освобождено ~${formatBytes(res.bytes_estimate)}`
+					);
+					await refreshEstimate(minutes);
+				} catch (e) {
+					notifyApiError(e);
+					throw e;
+				} finally {
+					pruning = false;
+				}
+			}
+		});
+	}
+
+	onMount(() => {
+		void loadSession();
+		void load();
+	});
+</script>
+
+<Card>
+	<CardHeader>
+		<CardTitle>Хранение ревизий</CardTitle>
+		<CardDescription>
+			Автоматическая очистка старых ревизий. Последняя ревизия и раскатанные на спикерах не
+			удаляются.
+		</CardDescription>
+	</CardHeader>
+	<CardContent class="space-y-4">
+		{#if loading && !loaded}
+			<p class="text-sm text-muted-foreground">Загрузка…</p>
+		{:else if !loaded}
+			<Button variant="outline" onclick={load}>Загрузить настройки</Button>
+		{:else}
+			<FormField
+				id="revision-retention-minutes"
+				label="Время жизни ревизий, мин (revision_retention_minutes)"
+				error={$errors.revision_retention_minutes?.[0]}
+				description="Допустимый диапазон: 15–43200 минут."
+			>
+				<Input
+					id="revision-retention-minutes"
+					type="number"
+					min="15"
+					max="43200"
+					bind:value={$form.revision_retention_minutes}
+					placeholder="43200"
+				/>
+			</FormField>
+
+			{#if parsedRetentionMinutes !== null}
+				<div class="space-y-1 rounded-md border bg-muted/30 p-4 text-sm">
+					<p class="font-medium">Оценка очистки по введённому retention</p>
+					{#if estimateLoading}
+						<p class="text-muted-foreground">Расчёт…</p>
+					{:else if estimate}
+						<p>
+							Будет удалено ревизий: <strong>{estimate.revision_count}</strong>
+						</p>
+						<p>
+							Освободится ориентировочно: <strong>~{formatBytes(estimate.bytes_estimate)}</strong>
+						</p>
+						{#if estimate.prefix_row_count > 0}
+							<p class="text-xs text-muted-foreground">
+								Строк префиксов в снимках: {estimate.prefix_row_count}
+								{#if estimate.orphan_snapshot_count > 0}
+									· снимков: {estimate.orphan_snapshot_count}
+								{/if}
+							</p>
+						{/if}
+					{:else}
+						<p class="text-muted-foreground">Оценка недоступна</p>
+					{/if}
+					<p class="pt-1 text-xs text-muted-foreground">
+						Учитываются те же правила, что при автоочистке: последняя ревизия и раскатанные на
+						спикерах не удаляются.
+					</p>
+				</div>
+			{/if}
+
+			{#if hasValidationErrors}
+				<p class="text-sm text-destructive">
+					Есть ошибки в полях. Исправьте их, чтобы сохранить изменения.
+				</p>
+			{/if}
+
+			<div class="flex flex-wrap gap-2">
+				<Button onclick={save} disabled={!canSave}>
+					<Save />
+					{saving ? 'Сохранение…' : 'Применить параметры ревизий'}
+				</Button>
+				{#if isOperator}
+					<Button variant="destructive" disabled={!canPruneNow} onclick={requestPruneNow}>
+						<Trash2 />
+						{pruning ? 'Очистка…' : 'Очистить сейчас'}
+					</Button>
+				{/if}
+			</div>
+		{/if}
+	</CardContent>
+</Card>
@@ -0,0 +1,345 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { defaults, superForm } from 'sveltekit-superforms';
+	import { zod4 } from 'sveltekit-superforms/adapters';
+	import type { AuthSession } from '$lib/api/types.js';
+	import { apiJSON } from '$lib/api/client.js';
+	import {
+		emptyRuntimeLogsSettingsForm,
+		runtimeLogsSettingsSchema
+	} from '$lib/settings/runtime-logs-settings.schema.js';
+	import {
+		buildPayloadFromFormFields,
+		loadSettings,
+		partitionSettings,
+		patchSettings
+	} from '$lib/settings/settings-api.js';
+	import { RUNTIME_LOGS_SETTING_KEYS } from '$lib/settings/settings-known-keys.js';
+	import {
+		fetchRuntimeLogAutoEstimate,
+		runRuntimeLogAutoCleanup,
+		type RuntimeLogAutoEstimate
+	} from '$lib/runtime-logs/runtime-logs-auto-api.js';
+	import { isRuntimeLogsUnavailable } from '$lib/runtime-logs/runtime-logs-api.js';
+	import { formatBytes } from '$lib/monitoring/postgres.js';
+	import { Button } from '@evobgp/ui/components/button/index.js';
+	import {
+		Card,
+		CardContent,
+		CardDescription,
+		CardHeader,
+		CardTitle
+	} from '@evobgp/ui/components/card/index.js';
+	import { Input } from '@evobgp/ui/components/input/index.js';
+	import { Switch } from '@evobgp/ui/components/switch/index.js';
+	import {
+		Select,
+		SelectContent,
+		SelectItem,
+		SelectTrigger
+	} from '@evobgp/ui/components/select/index.js';
+	import FormField from '$lib/components/patterns/form/form-field.svelte';
+	import { confirm } from '$lib/components/patterns/confirm/confirm-state.svelte.js';
+	import { notify, notifyApiError } from '$lib/ui/app/toast.js';
+	import Save from '@lucide/svelte/icons/save';
+	import Play from '@lucide/svelte/icons/play';
+
+	let loading = $state(false);
+	let saving = $state(false);
+	let running = $state(false);
+	let loaded = $state(false);
+	let session = $state<AuthSession | null>(null);
+	let estimateLoading = $state(false);
+	let estimate = $state<RuntimeLogAutoEstimate | null>(null);
+	let fsUnavailable = $state(false);
+
+	const { form, errors, reset, validateForm } = superForm(
+		defaults(emptyRuntimeLogsSettingsForm(), zod4(runtimeLogsSettingsSchema)),
+		{
+			validators: zod4(runtimeLogsSettingsSchema),
+			SPA: true,
+			dataType: 'json'
+		}
+	);
+
+	const isOperator = $derived(session?.role === 'operator');
+	const autoEnabled = $derived($form.runtime_logs_auto_enabled === 'true');
+	const hasValidationErrors = $derived(
+		Boolean(
+			$errors.runtime_logs_max_file_mb?.length ||
+			$errors.runtime_logs_auto_schedule?.length ||
+			$errors.runtime_logs_auto_mode?.length
+		)
+	);
+
+	const parsedMaxMb = $derived.by(() => {
+		const s = String($form.runtime_logs_max_file_mb ?? '').trim();
+		if (s === '' || !/^\d+$/.test(s)) return null;
+		const n = Number(s);
+		if (!Number.isInteger(n) || n < 1 || n > 512) return null;
+		return n;
+	});
+
+	const canSave = $derived.by(() => {
+		if (loading || saving || hasValidationErrors || !loaded || !isOperator) return false;
+		return true;
+	});
+
+	const canRunNow = $derived.by(() => {
+		if (!isOperator || !loaded || running || saving || parsedMaxMb === null || fsUnavailable)
+			return false;
+		return (estimate?.would_count ?? 0) > 0;
+	});
+
+	async function loadSession() {
+		try {
+			session = await apiJSON<AuthSession>('/v1/auth/session');
+		} catch {
+			session = null;
+		}
+	}
+
+	async function refreshEstimate() {
+		if (fsUnavailable || parsedMaxMb === null) {
+			estimate = null;
+			return;
+		}
+		estimateLoading = true;
+		try {
+			estimate = await fetchRuntimeLogAutoEstimate();
+			fsUnavailable = false;
+		} catch (e) {
+			estimate = null;
+			if (isRuntimeLogsUnavailable(e)) {
+				fsUnavailable = true;
+				return;
+			}
+			notifyApiError(e, 'Оценка автоочистки');
+		} finally {
+			estimateLoading = false;
+		}
+	}
+
+	$effect(() => {
+		if (!loaded || parsedMaxMb === null) {
+			estimate = null;
+			return;
+		}
+		const handle = setTimeout(() => {
+			void refreshEstimate();
+		}, 400);
+		return () => clearTimeout(handle);
+	});
+
+	async function load() {
+		loading = true;
+		try {
+			const settings = await loadSettings();
+			const { partitioned } = partitionSettings(settings);
+			reset({ data: partitioned.runtimeLogs });
+			loaded = true;
+		} catch (e) {
+			notifyApiError(e);
+		} finally {
+			loading = false;
+		}
+	}
+
+	async function save() {
+		const validation = await validateForm({ update: true });
+		if (!validation.valid) {
+			notify.error('Исправьте ошибки в полях настроек');
+			return;
+		}
+		const payload = buildPayloadFromFormFields(
+			RUNTIME_LOGS_SETTING_KEYS,
+			$form as Record<string, string>,
+			$errors as Partial<Record<string, string[]>>
+		);
+		if ($form.runtime_logs_auto_mode === 'truncate' || $form.runtime_logs_auto_mode === 'delete') {
+			payload.runtime_logs_auto_mode = $form.runtime_logs_auto_mode;
+		}
+
+		saving = true;
+		try {
+			await patchSettings(payload);
+			notify.success('Параметры автоочистки логов сохранены');
+			await load();
+		} catch (e) {
+			notifyApiError(e);
+		} finally {
+			saving = false;
+		}
+	}
+
+	async function requestRunNow() {
+		if (parsedMaxMb === null) return;
+		let est: RuntimeLogAutoEstimate;
+		try {
+			est = await fetchRuntimeLogAutoEstimate();
+		} catch (e) {
+			notifyApiError(e);
+			return;
+		}
+		estimate = est;
+		const count = est.would_count ?? 0;
+		if (count === 0) {
+			notify.info('Нет файлов выше порога для очистки');
+			return;
+		}
+		const mode = $form.runtime_logs_auto_mode === 'delete' ? 'удаление' : 'truncate';
+		void confirm({
+			title: 'Запустить автоочистку сейчас?',
+			description: `Будет затронуто файлов: ${count}. Режим: ${mode}. Записи появятся в Monitoring → Файловые логи → Audit.`,
+			confirmLabel: 'Запустить',
+			destructive: true,
+			onConfirm: async () => {
+				running = true;
+				try {
+					const res = await runRuntimeLogAutoCleanup(false);
+					notify.success(`Очищено файлов: ${res.cleaned_count ?? 0}`);
+					await refreshEstimate();
+				} catch (e) {
+					notifyApiError(e);
+					throw e;
+				} finally {
+					running = false;
+				}
+			}
+		});
+	}
+
+	onMount(() => {
+		void loadSession();
+		void load();
+	});
+</script>
+
+<Card>
+	<CardHeader>
+		<CardTitle>Файловые логи (runtime-logs)</CardTitle>
+		<CardDescription>
+			Автоочистка <code class="text-xs">*.log</code> на диске evobgp-all (sidecar
+			stack-runtime-logs). Требуется volume <code class="text-xs">EVOBGP_RUNTIME_LOGS_DIR</code>.
+		</CardDescription>
+	</CardHeader>
+	<CardContent class="space-y-4">
+		{#if loading && !loaded}
+			<p class="text-sm text-muted-foreground">Загрузка…</p>
+		{:else if !loaded}
+			<Button variant="outline" onclick={load}>Загрузить настройки</Button>
+		{:else}
+			<FormField
+				id="runtime-logs-auto-enabled"
+				label="Автоочистка по расписанию"
+				description="Scheduler в evobgp-all (UTC cron ниже)."
+			>
+				<Switch
+					id="runtime-logs-auto-enabled"
+					checked={autoEnabled}
+					disabled={!isOperator}
+					onCheckedChange={(v) => {
+						$form.runtime_logs_auto_enabled = v ? 'true' : 'false';
+					}}
+				/>
+			</FormField>
+
+			<FormField
+				id="runtime-logs-max-mb"
+				label="Порог размера файла, MiB"
+				error={$errors.runtime_logs_max_file_mb?.[0]}
+				description="Очищать файлы строго больше порога (1–512 MiB)."
+			>
+				<Input
+					id="runtime-logs-max-mb"
+					type="number"
+					min="1"
+					max="512"
+					bind:value={$form.runtime_logs_max_file_mb}
+					disabled={!isOperator}
+				/>
+			</FormField>
+
+			<FormField
+				id="runtime-logs-schedule"
+				label="Расписание (UTC cron)"
+				error={$errors.runtime_logs_auto_schedule?.[0]}
+				description="5 полей: минута час день месяц день_недели. По умолчанию каждые 6 часов."
+			>
+				<Input
+					id="runtime-logs-schedule"
+					bind:value={$form.runtime_logs_auto_schedule}
+					placeholder="0 */6 * * *"
+					disabled={!isOperator}
+				/>
+			</FormField>
+
+			<FormField id="runtime-logs-mode" label="Режим очистки">
+				<Select
+					type="single"
+					value={$form.runtime_logs_auto_mode || 'truncate'}
+					disabled={!isOperator}
+					onValueChange={(v) => {
+						if (v === 'truncate' || v === 'delete') $form.runtime_logs_auto_mode = v;
+					}}
+				>
+					<SelectTrigger id="runtime-logs-mode" class="w-full max-w-xs">
+						{$form.runtime_logs_auto_mode === 'delete'
+							? 'delete — удалить файл'
+							: 'truncate — обнулить'}
+					</SelectTrigger>
+					<SelectContent>
+						<SelectItem value="truncate">truncate — обнулить</SelectItem>
+						<SelectItem value="delete">delete — удалить файл</SelectItem>
+					</SelectContent>
+				</Select>
+			</FormField>
+
+			{#if fsUnavailable}
+				<p class="text-sm text-muted-foreground">
+					FS API недоступен (не evobgp-all или нет volume). Оценка и «Запустить сейчас» недоступны;
+					настройки сохраняются для будущего прогона scheduler.
+				</p>
+			{:else if parsedMaxMb !== null}
+				<div class="space-y-1 rounded-md border bg-muted/30 p-4 text-sm">
+					<p class="font-medium">Оценка по текущему порогу</p>
+					{#if estimateLoading}
+						<p class="text-muted-foreground">Расчёт…</p>
+					{:else if estimate}
+						<p>
+							Файлов к очистке: <strong>{estimate.would_count ?? 0}</strong>
+						</p>
+						{#if estimate.items?.length}
+							<ul class="mt-2 space-y-1 text-xs text-muted-foreground">
+								{#each estimate.items.filter((i) => i.would_cleanup) as item (item.filename)}
+									<li class="font-mono">
+										{item.filename} · {formatBytes(item.size_bytes)}
+									</li>
+								{/each}
+							</ul>
+						{/if}
+					{:else}
+						<p class="text-muted-foreground">Оценка недоступна</p>
+					{/if}
+				</div>
+			{/if}
+
+			{#if hasValidationErrors}
+				<p class="text-sm text-destructive">Исправьте ошибки в полях перед сохранением.</p>
+			{/if}
+
+			<div class="flex flex-wrap gap-2">
+				{#if isOperator}
+					<Button onclick={save} disabled={!canSave}>
+						<Save />
+						{saving ? 'Сохранение…' : 'Сохранить'}
+					</Button>
+					<Button variant="destructive" disabled={!canRunNow} onclick={requestRunNow}>
+						<Play />
+						{running ? 'Запуск…' : 'Запустить сейчас'}
+					</Button>
+				{/if}
+			</div>
+		{/if}
+	</CardContent>
+</Card>
@@ -0,0 +1,89 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
+	import PageShell from '$lib/components/page-shell.svelte';
+	import PageHeader from '$lib/ui/app/page-header/page-header.svelte';
+	import { Alert, AlertDescription, AlertTitle } from '@evobgp/ui/components/alert/index.js';
+	import { Tabs, TabsContent, TabsList, TabsTrigger } from '@evobgp/ui/components/tabs/index.js';
+	import TenantBirdSettingsCard from '$lib/components/tenant-settings/TenantBirdSettingsCard.svelte';
+	import TenantRevisionSettingsCard from '$lib/components/tenant-settings/TenantRevisionSettingsCard.svelte';
+	import TenantAdditionalSettingsCard from '$lib/components/tenant-settings/TenantAdditionalSettingsCard.svelte';
+	import TenantRuntimeLogsSettingsCard from '$lib/components/tenant-settings/TenantRuntimeLogsSettingsCard.svelte';
+	import { LINE_TAB_TRIGGER_CLASS } from '$lib/ui/app/tabs.js';
+	import Info from '@lucide/svelte/icons/info';
+
+	type TenantSettingsTab = 'bird' | 'revision' | 'runtime-logs' | 'additional';
+
+	function parseTenantSettingsTab(value: string | null): TenantSettingsTab {
+		if (value === 'revision' || value === 'runtime-logs' || value === 'additional') return value;
+		return 'bird';
+	}
+
+	let activeTab = $state<TenantSettingsTab>('bird');
+	let tabSyncReady = $state(false);
+
+	onMount(() => {
+		activeTab = parseTenantSettingsTab(page.url.searchParams.get('tab'));
+		tabSyncReady = true;
+	});
+
+	function syncTabToUrl(tab: TenantSettingsTab) {
+		if (!tabSyncReady) return;
+		const url = new URL(page.url);
+		if (tab === 'bird') url.searchParams.delete('tab');
+		else url.searchParams.set('tab', tab);
+		const next = `${url.pathname}${url.search}${url.hash}`;
+		if (next !== `${page.url.pathname}${page.url.search}${page.url.hash}`) {
+			void goto(next, { replaceState: true, keepFocus: true, noScroll: true });
+		}
+	}
+
+	$effect(() => {
+		if (!tabSyncReady) return;
+		syncTabToUrl(activeTab);
+	});
+</script>
+
+<PageShell>
+	<PageHeader
+		title="Параметры tenant"
+		description="Параметры control plane для текущего tenant (API /v1/settings). Токен и тема интерфейса — в разделе «Настройки»."
+	/>
+
+	<Alert class="border-info/30 bg-info/5">
+		<Info class="text-info" />
+		<AlertTitle>Operator-only</AlertTitle>
+		<AlertDescription>
+			Изменение значений через <code class="text-xs">PATCH /v1/settings</code> требует роли operator.
+			При отсутствии прав API вернёт 403.
+		</AlertDescription>
+	</Alert>
+
+	<Tabs bind:value={activeTab}>
+		<div class="border-b">
+			<TabsList class="h-auto w-full justify-start rounded-none bg-transparent p-0">
+				<TabsTrigger value="bird" class={LINE_TAB_TRIGGER_CLASS}>BIRD</TabsTrigger>
+				<TabsTrigger value="revision" class={LINE_TAB_TRIGGER_CLASS}>Ревизии</TabsTrigger>
+				<TabsTrigger value="runtime-logs" class={LINE_TAB_TRIGGER_CLASS}>Файловые логи</TabsTrigger>
+				<TabsTrigger value="additional" class={LINE_TAB_TRIGGER_CLASS}>Дополнительно</TabsTrigger>
+			</TabsList>
+		</div>
+
+		<TabsContent value="bird" class="mt-4">
+			<TenantBirdSettingsCard />
+		</TabsContent>
+
+		<TabsContent value="revision" class="mt-4">
+			<TenantRevisionSettingsCard />
+		</TabsContent>
+
+		<TabsContent value="runtime-logs" class="mt-4">
+			<TenantRuntimeLogsSettingsCard />
+		</TabsContent>
+
+		<TabsContent value="additional" class="mt-4">
+			<TenantAdditionalSettingsCard />
+		</TabsContent>
+	</Tabs>
+</PageShell>
@@ -33,6 +33,24 @@ export const maintenancePolicyPresets: MaintenancePolicyPreset[] = [
 			dry_run_enabled: true
 		}
 	},
+	{
+		id: 'runtime_log_cleanup_audit_retention',
+		label: 'Runtime log cleanup audit — 90d',
+		description:
+			'Удаляет записи runtime_log_cleanup_audit старше 90 дней (ручная и автоочистка FS).',
+		tableHint: 'runtime_log_cleanup_audit',
+		form: {
+			name: 'Runtime log cleanup audit (90d)',
+			table_name: 'runtime_log_cleanup_audit',
+			condition: 'true',
+			retention_period_sec: String(90 * DAY_SEC),
+			max_rows: '5000',
+			vacuum_strategy: 'none',
+			schedule: '0 4 * * *',
+			enabled: true,
+			dry_run_enabled: true
+		}
+	},
 	{
 		id: 'postgres_maintenance_audit_retention',
 		label: 'Maintenance audit — 30d',
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Denozordec	2fef952403	feat(ui): refactor components and enhance UX CI / changes (push) Successful in 11s Details CI / commitlint (push) Has been skipped Details CI / openapi (push) Has been skipped Details CI / web (push) Successful in 47s Details CI / go (push) Successful in 1m1s Details CI / bird2 (push) Successful in 17s Details CI / release (push) Successful in 4m36s Details Updated various UI components to improve user experience and maintainability. Key changes include: - Refactored `PageHeader` to remove icon handling, simplifying its structure. - Replaced `KpiMetricsGrid` with `SectionCards` for better layout consistency. - Enhanced `AppShell` and navigation components to utilize a grouped navigation structure, improving accessibility and organization. - Introduced new properties in `crud-list-page` for handling empty states and loading indicators. - Updated styles and classes for better visual consistency across components. These changes streamline the UI and enhance the overall user experience across the application.	2026-07-01 00:42:50 +07:00
Denozordec	07ee6acddb	fix(data-table): prevent unnecessary page reset on data change Updated the data table component to only reset the page index to 0 when it is not already at 0, improving user experience during data updates. Additionally, refactored the module selection logic to prune invalid selected module IDs more efficiently, enhancing the overall functionality of the module management interface.	2026-07-01 00:27:39 +07:00
Denozordec	1c7152a285	feat(docker): update BIRD build process and documentation CI / changes (push) Successful in 11s Details CI / commitlint (push) Has been skipped Details CI / openapi (push) Has been skipped Details CI / web (push) Has been skipped Details CI / go (push) Successful in 1m8s Details CI / bird2 (push) Successful in 17s Details CI / release (push) Successful in 5m10s Details Refined the BIRD build process in the Docker setup by consolidating the source download and extraction steps. Enhanced the `bird-from-source.sh` script to include a fallback mechanism for downloading the BIRD tarball from GitHub if the primary source fails. Updated the README documentation to clarify the build process and provide links to the BIRD source. This improves reliability and user understanding of the setup.	2026-07-01 00:11:16 +07:00
Denozordec	a37c931ee7	feat(monorepo): restructure web components and update configurations CI / changes (push) Successful in 10s Details CI / commitlint (push) Has been skipped Details CI / openapi (push) Successful in 27s Details CI / web (push) Successful in 38s Details CI / go (push) Successful in 2m36s Details CI / bird2 (push) Successful in 15s Details CI / release (push) Failing after 3m7s Details Refactored the project structure to support a monorepo setup, moving the web application to `apps/web/` and updating related configurations. Adjusted pre-commit hooks to use `pnpm` for linting and formatting. Updated CI workflows to reflect the new directory structure and dependencies. Removed legacy files and configurations from the previous `web/` directory, streamlining the project for better maintainability and clarity.	2026-06-30 23:54:28 +07:00
Denozordec	db75126bea	feat(runtime-logs): enhance auto-cleanup features and documentation CI / changes (push) Successful in 9s Details CI / commitlint (push) Has been skipped Details CI / openapi (push) Successful in 26s Details CI / web (push) Successful in 33s Details CI / go (push) Successful in 56s Details CI / bird2 (push) Successful in 14s Details CI / release (push) Successful in 20s Details Added new endpoints for estimating and executing runtime log auto-cleanup based on tenant settings. Introduced configuration options for auto-cleanup policies, including scheduling and file size limits. Updated the API documentation and UI components to reflect these changes, improving user interaction with runtime log management. Enhanced error handling and added new UI elements for better visibility of audit logs and cleanup actions.	2026-06-12 22:44:39 +07:00
Denozordec	f39df7c4bf	feat(revisions): add pruning estimate and cleanup endpoints CI / changes (push) Successful in 8s Details CI / commitlint (push) Has been skipped Details CI / openapi (push) Successful in 25s Details CI / web (push) Successful in 32s Details CI / go (push) Successful in 57s Details CI / bird2 (push) Successful in 15s Details CI / release (push) Successful in 3m18s Details Implemented new endpoints for estimating and pruning revisions, including detailed schemas for requests and responses. The `RevisionPruneEstimate` and `RevisionPruneResult` components were added to the OpenAPI documentation, enhancing the API's functionality for managing revision retention. Updated the backend to support these operations and integrated them into the tenant settings UI for improved user interaction.	2026-06-12 21:56:36 +07:00
DenozordecandCursor	5dbdac3d2c	feat(memory-bank): update active context and progress documentation CI / changes (push) Successful in 8s Details CI / commitlint (push) Has been skipped Details CI / openapi (push) Successful in 25s Details CI / web (push) Successful in 30s Details CI / go (push) Successful in 54s Details CI / bird2 (push) Successful in 14s Details CI / release (push) Successful in 3m43s Details Обновлены разделы активного контекста и прогресса для задачи `settings-ui-and-runtime-logs`. Упрощено отображение статуса завершённых фаз и добавлены ссылки на архив. Уточнены следующие шаги и активные задачи, улучшая ясность и доступность информации. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-06-12 21:11:15 +07:00
DenozordecandCursor	a0f78a3d21	feat(runtime-logs): update documentation and UI for runtime log management Обновлены разделы документации для управления файловыми логами, включая новые эндпоинты и параметры. Добавлены описания для вкладки «Файловые логи» в интерфейсе мониторинга и обновлены настройки tenant. Улучшен доступ к логам через API и интерфейс пользователя. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-06-12 21:04:29 +07:00
DenozordecandCursor	0c5502b5bb	feat(runtime-logs): enhance runtime log management and configuration Добавлены новые возможности для управления файловыми логами в Docker-сервисах: - Обновлены конфигурации для поддержки логов, включая переменные окружения и монтирование директорий. - Документация обновлена для описания новых эндпоинтов и параметров, связанных с логами. - Упрощен доступ к логам через API и интерфейс пользователя. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-06-12 19:18:50 +07:00
DenozordecandCursor	3f0dd6c234	docs(runtime-logs): implement runtime log management features Добавлены новые возможности для работы с файловыми логами Docker-сервисов: - Эндпоинты для получения списка логов и хвоста лог-файла. - Очистка лог-файлов с возможностью выбора режима (truncate или delete) и запись в аудит очистки. - Обновлена документация и конфигурация для поддержки новых функций. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-06-12 19:04:53 +07:00
DenozordecandCursor	1c39c65fc5	docs(memory-bank): add creative phase CP-4 path safety Решение: allowlist *.log, EvalSymlinks, проверка префикса root; creative phase завершён. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-06-12 18:58:16 +07:00
DenozordecandCursor	493575aca4	docs(memory-bank): add creative phase CP-3 runtime logs cleanup Решение: truncate по умолчанию, delete опционально, лимиты tail и max 512 MiB на sync cleanup. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-06-12 18:58:06 +07:00
DenozordecandCursor	e27936c072	docs(memory-bank): add creative phase CP-2 runtime logs UI Решение: вкладка «Файловые логи» в Monitoring с подвкладками files и audit. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-06-12 18:58:01 +07:00
DenozordecandCursor	ceb6f2f34f	docs(memory-bank): add creative phase CP-1 tenant settings UI Решение: /tenant-settings с вкладками BIRD/Ревизии/Дополнительно, пункт mainNav «Параметры», /settings остаётся frontend-only. Co-authored-by: Cursor <cursoragent@cursor.com>	2026-06-12 18:57:17 +07:00
				`@@ -0,0 +1 @@`
				`export * from '@evobgp/shared/types/api.js';`