docs(ui): добавить план миграции на дизайн VPS-Tracker

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

docs/ui-design-contract.md

@@ -15,7 +15,7 @@ Project lock: **`surface: frame`**. Ops / list / dashboard / detail / settings
 export const UI_SURFACE = 'frame' as const
 ```
 
-Settings: секции через Frame + `gap` (без hairline `Separator` под PageHeader); `SettingRow` без `FieldSeparator` по умолчанию (`separated` opt-in). Preview: [settings-3](https://reui.io/preview/base/settings-3) · [settings-16](https://reui.io/preview/base/settings-16).
+Settings: **line-tabs сверху** (Общие / Синхронизация / Уведомления / Интеграции) вместо боковой навигации; секции через Frame + `gap` (без hairline `Separator` под PageHeader); `SettingRow` без `FieldSeparator` по умолчанию (`separated` opt-in). Preview: [settings-3](https://reui.io/preview/base/settings-3) · [settings-16](https://reui.io/preview/base/settings-16).
 
 ## Canonical PRO references
 
@@ -31,6 +31,10 @@ Settings: секции через Frame + `gap` (без hairline `Separator` п
 | Empty | `empty-state-14` (prefer) / `empty-state-12` | https://reui.io/preview/base/empty-state-14 · https://reui.io/preview/base/empty-state-12 |
 | Forms | `form-7` → Sheet/Drawer | https://reui.io/preview/base/form-7 |
 
+## Theme
+
+Палитра — нейтрали hue 264 (макет «VPS-Tracker»), шрифты **Geist / Geist Mono**. Оверрайд токенов — `apps/web/src/styles/theme.css` поверх `@cfdm/ui/globals.css` (globals — только вывод CLI). В светлой теме сайдбар остаётся тёмным. План миграции: [`ui-migration-plan.md`](ui-migration-plan.md).
+
 ## Kit API (`reui-kit/`)
 
 | Component | Role |
@@ -51,7 +55,7 @@ Settings: секции через Frame + `gap` (без hairline `Separator` п
 | App | Section order |
 |-----|---------------|
 | EvoBGP / CFDM / EvoFirewall | KPI → **QuickActionGrid** → charts / rest |
-| vps-tracker | banner → KPI → charts → attention → **QuickActionGrid** → CSV |
+| vps-tracker | banner → KPI → line-tabs «Проблемы» (QuickActionGrid → charts → attention) · «Последние VPS» · «Аккаунты» → CSV |
 | auth-portal | portal-specific; Quick Actions при наличии dashboard |
 
 Gating: DB `show_quick_actions` / `showQuickActions` / `ui_show_quick_actions` (default `true`).
@@ -67,8 +71,9 @@ Gating: DB `show_quick_actions` / `showQuickActions` / `ui_show_quick_actions` (
 | Sidebar / hover colors | theme `--sidebar` / `--sidebar-accent` — **без** AppShell `color-mix` override |
 | Header | `h-12`, `sticky`, `border-b`, `px-4 md:px-6` |
 | Header left | `SidebarTrigger` + `Separator` + Breadcrumb |
-| Header right | **AppsMenu** → **SystemMonitorPopover** (тема — в NavUser) |
-| Sidebar | AppSwitcher → groups → icons `size-4` → **NavUser** в `SidebarFooter` |
+| Header right | **SystemMonitorPopover** (пилюля «Внимание»/«Норма»; приложения — в AppSwitcher; тема — в NavUser) |
+| Sidebar | AppSwitcher (лого + подзаголовок + список приложений) → SpaceSwitcher → **сворачиваемые** группы (UPPERCASE label + шеврон, `collapsible`) → icons `size-4` → **NavUser** (muted-карточка) в `SidebarFooter` |
+| Проблемы в меню | точка `destructive`/`warning` у пункта (не числовой Badge) |
 | `main` | `gap-4 md:gap-6`, `px-4 py-4 md:px-6 md:py-5` |
 | Search | hotkey ⌘K / Ctrl+K only (не кнопка в header) |
 

docs/ui-migration-plan.md

@@ -0,0 +1,88 @@
+# План миграции UI vps-tracker на дизайн «VPS-Tracker»
+
+Источник: артефакт-канвас [VPS-Tracker](https://claude.ai/artifact/7kPVbQNXa4AWgFkSekZJiN#page-dcb81aee8d83), доски `Vps*.dc.html` + шаблон `TplVps.dc.html` + токены `reui-auth.css`.
+Канвас — макет, имитирующий ReUI; его CSS **не переносим**. Используем как спецификацию регионов и токенов, а реализуем на ReUI PRO + shadcn primitives (контракт: [`ui-design-contract.md`](ui-design-contract.md)).
+
+Лицензия ReUI PRO: `REUI_LICENSE_KEY` есть, премиум-реестр отвечает 200 (проверено на `app-shell-12`).
+
+## Что не является страницами
+
+- Блоки `states` («Справочник состояний · не часть страницы») — только спецификация empty/loading/error, на страницах не рендерим.
+- Доски `VpsCollapsed`, `VpsLight`, `VpsMobile`, `VpsPalette` — состояния одного экрана; используем для проверки (свёрнутый сайдбар, светлая тема, ширина телефона, ⌘K).
+- Инструменты канваса: полосы `wedit`, «звёздочки»/закрепы в меню, атрибуты density/contrast — пропускаем.
+
+## Сохраняем то, чего нет в макете
+
+`SpaceSwitcher` (пространства — реальная функция), `GlobalSearch` (⌘K), фильтры ReUI `Filters` в списках, CSV-экспорт, row actions. Макет их не отменяет.
+
+## Сопоставление блоков макета → ReUI
+
+| Блок макета | Реализация | ReUI / shadcn |
+|---|---|---|
+| sidebar `asbtn` (лого + «Учёт серверов и платежей») + поповер приложений | `AppSwitcher` (+ пункты бывшего `AppsMenu`) | shadcn `sidebar`, `dropdown-menu`; эталон [app-shell-12](https://reui.io/preview/base/app-shell-12) `brand.tsx` |
+| `grph` — сворачиваемые группы (UPPERCASE + шеврон) | `NavGroup` в `app-shell.tsx` | shadcn `sidebar` + `collapsible` (паттерн Collapsible SidebarGroup) |
+| `pdot` — точка проблем у пункта меню | `SidebarMenuBadge` / точка `bg-destructive` | shadcn `sidebar` |
+| `user` — NavUser карточкой | `NavUser` | [app-shell-1](https://reui.io/preview/base/app-shell-1) user menu |
+| header: trigger + crumbs + `statb` | `AppShell` header, без `AppsMenu` | shadcn `breadcrumb`, `popover` |
+| `statb` «Внимание · ●1 ●2» → монитор | триггер `SystemMonitorPopover` | `@reui/badge` (`warning-light`/`destructive-light`) |
+| h1 + sub + actions | `PageHeader` | — |
+| `banner` / `note` | `Alert` | `@reui/alert` |
+| `kpi` (иконка слева, label, value, chip) | `KpiStatGrid` | `@reui/icon-tile`, `@reui/badge`, Frame ([stats-12](https://reui.io/preview/base/stats-12)) |
+| `ptabs` — вкладки страницы со счётчиками | `CountedLineTabs` | shadcn `tabs` variant `line` (c-tabs-2) |
+| `seg` — сегменты вида/снимка | `ToggleGroup` | shadcn `toggle-group` |
+| `grid` — Frame: заголовок, поиск, колонки, виды, bulk, футер | `ResourcePage` / `FrameDataGrid` | `@reui/data-grid`, `@reui/filters`, `@reui/frame` ([data-grid-filtering-2](https://reui.io/preview/base/data-grid-filtering-2)) |
+| `cards` (быстрые действия) | `QuickActionGrid` | Frame tiles |
+| `chart` | Recharts через shadcn `chart` | — |
+| `kv` | `DetailPanel` | `@reui/frame` |
+| `timeline` | `Timeline` | `@reui/timeline` |
+| `form` (`frow`) | `SettingRow` | [settings-16](https://reui.io/preview/base/settings-16) |
+
+## Тема и шрифты
+
+- Палитра макета: нейтрали с оттенком **hue 264** (`--background: oklch(0.133 0.011 264.376)` и т.д.), `info` — фиолетовый, `chart-1..4` из макета; в светлой теме **сайдбар остаётся тёмным**.
+- Где живёт: `packages/ui/src/styles/globals.css` — только вывод `shadcn` CLI, руками не трогаем. Оверрайд — слой приложения **`apps/web/src/styles/theme.css`** (импорт после `@cfdm/ui/globals.css` в `main.tsx`): переопределяет переменные `:root`/`.dark` и `--sidebar*` для светлой темы. Компоненты ReUI не рестайлим — меняются только токены.
+- Шрифты: **Geist** / **Geist Mono** через `@fontsource-variable/geist` и `@fontsource-variable/geist-mono`; `--font-sans` / `--font-mono` в `theme.css`.
+
+## Изменения по экранам (`apps/web/src/routes/_auth/*`)
+
+| Маршрут | Доска | Изменения |
+|---|---|---|
+| `dashboard` | VpsDashboard | баннер → KPI (6) → **вкладки** «Проблемы» (быстрые действия, графики Платежи/Расходы, «Здоровье инвентаря») · «Последние VPS» · «Аккаунты» (под риском) |
+| `vps` | VpsList | заголовок «VPS / Виртуальные серверы», Alert несвязанных доменов, Frame-грид «Инвентарь VPS» с подзаголовком |
+| `vps.$vpsId` | VpsDetail | крошки VPS / IP, действия «К списку VPS» + «Редактировать», **вкладки** Обзор / Финансы / Заметки / Синк |
+| `accounts` | VpsAccounts | KPI (4) + грид, действия «Синхронизировать все» + «Добавить» |
+| `providers` | VpsProviders | грид «Хостеры» |
+| `projects`, `projects.$projectId` | VpsProjects / VpsProjectDetail | KPI (4) + грид |
+| `tariffs` | VpsTariffs | Alert расхождений + грид |
+| `payments` | VpsPayments | KPI (3) + грид |
+| `balance` | VpsBalance | KPI (3) + грид, футер с итогами |
+| `reports`, `resources` | VpsReports / VpsResources | сегмент периода, KPI, графики в Frame |
+| `renewals` | VpsRenewals | KPI (3) + грид |
+| `blocking`, `geo` | VpsBlocking / VpsGeo | KPI (4) + сегменты + вкладки Текущие / История |
+| `topology` | VpsTopology | без изменений структуры (холст) |
+| `spaces` | VpsSpaces | секции Frame |
+| `sync-journal` | VpsSync | грид «Запуски синхронизации» |
+| `audit` | VpsAudit | вкладки по действию + переключатель Лента / Таблица |
+| `settings/*` | VpsSettings | **вкладки сверху** Общие / Синхронизация / Уведомления / Интеграции вместо боковой навигации `SettingsShell` |
+
+## Общие компоненты
+
+- `layout/app-shell.tsx` — сворачиваемые группы, точки проблем, header без `AppsMenu`.
+- `app-switcher.tsx` — подзаголовок, приложения из `AppsMenu`; `layout/apps-menu.tsx` удаляется из header.
+- `layout/nav-user.tsx` — карточка (muted фон), меню Настройки / Тема / Выйти (без изменений логики).
+- `layout/system-monitor-popover.tsx` — триггер-пилюля «Внимание» со счётчиками ошибок/предупреждений, футер «Журнал синка».
+- `reui-kit/settings-shell.tsx` — line-tabs сверху.
+- `counted-line-tabs.tsx` — счётчик моноширинным текстом как в макете.
+
+## Порядок
+
+1. План + контракт (этот документ, [`ui-design-contract.md`](ui-design-contract.md)).
+2. Тема и шрифты (`theme.css`, fontsource).
+3. Shell: AppSwitcher, группы, NavUser, header, монитор.
+4. Kit: `CountedLineTabs`, `SettingsShell`.
+5. Экраны: dashboard → VPS detail → settings → audit → blocking/geo → прочие (тексты, колонки).
+6. Проверка: dev-сервер, 1440×1000 + свёрнутый сайдбар + светлая тема + телефон; `pnpm --filter web build`, `pnpm --filter web test`; `validate_usage`, `get_audit_checklist`.
+
+## Установка
+
+Новые ReUI-элементы не требуются: всё нужное уже установлено (`frame`, `badge`, `alert`, `data-grid`, `filters`, `timeline`, `icon-tile`) и shadcn (`sidebar`, `collapsible`, `tabs`, `toggle-group`). Добавляются только пакеты шрифтов. Если при реализации понадобится новый элемент — `cd apps/web && pnpm dlx shadcn@latest add @reui/<name>`.