feat!(web): migrate UI from SvelteKit to React + shadcn/ui + ReUI

Web UI полностью переведён с SvelteKit на новый стек: React 19,
TanStack Router/Query/Table/Virtual, shadcn/ui (base-nova) и ReUI
enterprise-компоненты (data-grid, filters, autocomplete). Новый код
разложен по слоям: packages/ui (shadcn-примитивы), apps/web
(роуты, shared-обёртки, ReUI-адаптации).

BREAKING CHANGE: меняется структура и инструментинг фронтенда.

- apps/web/ — новый Vite + React-проект (@evobgp/web), file-based
  роуты TanStack Router; экраны dashboard, modules, monitoring,
  network, operations, schedule, settings, tenant-settings, access,
  directories.
- packages/ui/ — shadcn/ui-примитивы (@evobgp/ui) с общими стилями
  globals.css и cn-утилитой; CLI shadcn запускается из apps/web.
- apps/web/src/components/reui/ — enterprise-паттерны ReUI.
- pnpm workspace (pnpm-workspace.yaml, pnpm-lock.yaml, tsconfig.base.json)
  заменяет npm-проект в web/.
- web/ переименован в web-legacy-svelte/ (архив-референс для миграции);
  импорты оттуда запрещены правилом WEB-22.
- CI (.gitea/workflows/ci.yaml): job web переведён на Node 22 + pnpm 10
  (typecheck/lint/build через pnpm --filter @evobgp/web); пути триггеров
  обновлены под apps/web|packages/ui.
- deploy/docker/evobgp-web/Dockerfile: сборка из корня репозитория,
  pnpm install --frozen-lockfile, выход dist из apps/web/dist.
- .cursor/rules/web-shadcn.mdc, context7-stack.mdc, engineering.mdc,
  AGENTS.md — обновлены под React-стек (WEB-01..WEB-22, DOC-SYNC-06/07).

Проверки WEB-19 локально: typecheck, lint, build — exit 0.

Co-authored-by: Cursor <[email protected]>

apps/web/src/routes/_auth/dashboard.tsx

@@ -0,0 +1,400 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { useQueries } from '@tanstack/react-query'
+import {
+  Boxes,
+  CheckCircle,
+  Clock,
+  GitBranch,
+  Info,
+  Network,
+  Play,
+  Plus,
+  Radio,
+  RefreshCw,
+  Activity,
+  Share2,
+  Tags,
+  Gauge,
+  XCircle,
+} from 'lucide-react'
+import { Link } from '@tanstack/react-router'
+import { useState } from 'react'
+
+import { Alert, AlertDescription, AlertTitle } from '@evobgp/ui/components/alert'
+import { Button } from '@evobgp/ui/components/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@evobgp/ui/components/card'
+import { Skeleton } from '@evobgp/ui/components/skeleton'
+
+import { PageHeader } from '@/components/page-header'
+import { SectionCards, type SectionCardItem } from '@/components/section-cards'
+import { SectionCardsSkeleton } from '@/components/skeletons'
+
+import {
+  aggregateNetworkMetrics,
+  moduleNameById,
+  overviewHealthQueryOptions,
+  overviewJobsQueryOptions,
+  overviewModulesQueryOptions,
+  overviewPeersQueryOptions,
+  overviewRevisionsQueryOptions,
+  overviewSpeakersQueryOptions,
+  runningJobCount,
+} from '@/queries/overview'
+
+export const Route = createFileRoute('/_auth/dashboard')({
+  component: DashboardComponent,
+})
+
+function DashboardComponent() {
+  const [lastUpdated, setLastUpdated] = useState<Date | null>(null)
+
+  const results = useQueries({
+    queries: [
+      overviewHealthQueryOptions(),
+      overviewModulesQueryOptions(),
+      overviewPeersQueryOptions(),
+      overviewSpeakersQueryOptions(),
+      overviewRevisionsQueryOptions(),
+      overviewJobsQueryOptions(),
+    ],
+  })
+
+  const [healthQ, modulesQ, peersQ, speakersQ, revisionsQ, jobsQ] = results
+  const initialLoading =
+    modulesQ.isLoading || peersQ.isLoading || speakersQ.isLoading || revisionsQ.isLoading || jobsQ.isLoading
+  const refreshing = results.some((r) => r.isFetching && !r.isLoading)
+
+  if (!lastUpdated && !initialLoading && results.every((r) => r.isSuccess || r.isError)) {
+    setTimeout(() => setLastUpdated(new Date()), 0)
+  }
+
+  function refetchAll() {
+    setLastUpdated(null)
+    results.forEach((r) => r.refetch())
+  }
+
+  const modules = modulesQ.data?.items ?? []
+  const peers = peersQ.data?.items ?? []
+  const speakers = speakersQ.data?.items ?? []
+  const revisions = revisionsQ.data?.items ?? []
+  const jobs = jobsQ.data?.items ?? []
+  const modulesHasMore = modulesQ.data?.has_more ?? false
+  const peersHasMore = peersQ.data?.has_more ?? false
+  const speakersHasMore = speakersQ.data?.has_more ?? false
+  const revisionsHasMore = revisionsQ.data?.has_more ?? false
+
+  const net = aggregateNetworkMetrics(peers, speakers)
+  const running = runningJobCount(jobs)
+  const nameById = moduleNameById(modules)
+
+  const countBadge = (n: number, hasMore: boolean, suffix: string) => (hasMore ? '200+' : suffix)
+
+  const items: SectionCardItem[] = [
+    {
+      label: 'Модули',
+      value: initialLoading ? '—' : String(modules.length),
+      icon: <Boxes className="size-4" />,
+      hint: countBadge(modules.length, modulesHasMore, 'AS, CDN, домены, IP'),
+      onClick: () => window.location.assign('/modules'),
+    },
+    {
+      label: 'Пиры',
+      value: initialLoading ? '—' : `${net.peersEstablished}/${net.peersEnabled}`,
+      icon: <GitBranch className="size-4" />,
+      hint: countBadge(peers.length, peersHasMore, 'Established / включённых'),
+      badge: net.peersMismatch > 0 ? `mismatch ${net.peersMismatch}` : undefined,
+      variant: net.peersMismatch > 0 ? 'warning' : 'default',
+      onClick: () => window.location.assign('/network?tab=peers'),
+    },
+    {
+      label: 'Спикеры',
+      value: initialLoading ? '—' : `${net.speakersOnline}/${net.speakersTotal}`,
+      icon: <Radio className="size-4" />,
+      hint: countBadge(speakers.length, speakersHasMore, 'online / всего'),
+      variant: net.speakersOnline < net.speakersTotal ? 'warning' : 'default',
+      onClick: () => window.location.assign('/network?tab=overview'),
+    },
+    {
+      label: 'Ревизии',
+      value: initialLoading ? '—' : String(revisions.length),
+      icon: <Activity className="size-4" />,
+      hint: countBadge(revisions.length, revisionsHasMore, 'configs'),
+      onClick: () => window.location.assign('/operations'),
+    },
+    {
+      label: 'Активных задач',
+      value: initialLoading ? '—' : String(running),
+      icon: <Clock className="size-4" />,
+      hint: 'queued и running',
+      onClick: () => window.location.assign('/operations?tab=jobs'),
+    },
+  ]
+
+  return (
+    <div className="flex flex-col gap-6">
+      <PageHeader
+        title="Обзор"
+        description={
+          lastUpdated
+            ? `Состояние панели управления EvoBGP. Обновлено: ${lastUpdated.toLocaleTimeString('ru-RU')}`
+            : 'Состояние панели управления EvoBGP.'
+        }
+        actions={
+          <Button variant="outline" size="sm" onClick={refetchAll} disabled={refreshing}>
+            <RefreshCw className={refreshing ? 'animate-spin' : ''} />
+            Обновить
+          </Button>
+        }
+      />
+
+      <Alert className="border-info/30 bg-info/5">
+        <Info className="text-info" />
+        <AlertTitle>Панель управления EvoBGP</AlertTitle>
+        <AlertDescription>
+          Сводка по модулям, сети и фоновым задачам. BGP и ноды — «Сеть», префиксы — «Модули»,
+          деплой — «Операции», здоровье API — «Мониторинг».
+        </AlertDescription>
+      </Alert>
+
+      <HealthAlert
+        loading={healthQ.isLoading}
+        ok={healthQ.data === true}
+        loadError={modulesQ.isError || peersQ.isError ? 'Некоторые данные не загружены' : null}
+      />
+
+      {initialLoading ? <SectionCardsSkeleton count={5} /> : <SectionCards items={items} />}
+
+      <div className="grid gap-4 lg:grid-cols-3">
+        <RecentJobsCard jobs={jobs} nameById={nameById} loading={refreshing} />
+        <RecentRevisionsCard revisions={revisions} loading={refreshing} />
+        <NetworkStatusCard peers={peers} speakers={speakers} loading={refreshing} />
+      </div>
+
+      <Card>
+        <CardHeader className="border-b py-3">
+          <CardTitle className="text-base">Быстрые действия</CardTitle>
+          <CardDescription>Частые переходы к настройке и деплою</CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-wrap gap-2 p-4">
+          <Button variant="outline" size="sm" render={<Link to="/modules" />}>
+            <Plus className="size-4" />
+            Создать модуль
+          </Button>
+          <Button variant="outline" size="sm" onClick={() => (window.location.href = '/directories')}>
+            <Tags className="size-4" />
+            Добавить community
+          </Button>
+          <Button variant="outline" size="sm" onClick={() => (window.location.href = '/network?tab=overview')}>
+            <Network className="size-4" />
+            Сеть
+          </Button>
+          <Button variant="outline" size="sm" onClick={() => (window.location.href = '/network?tab=peers')}>
+            <Share2 className="size-4" />
+            Добавить пира
+          </Button>
+          <Button variant="outline" size="sm" onClick={() => (window.location.href = '/operations')}>
+            <Play className="size-4" />
+            Деплой (Apply)
+          </Button>
+          <Button variant="outline" size="sm" onClick={() => (window.location.href = '/monitoring')}>
+            <Gauge className="size-4" />
+            Мониторинг
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+
+function HealthAlert({
+  loading,
+  ok,
+  loadError,
+}: {
+  loading: boolean
+  ok: boolean | undefined
+  loadError: string | null
+}) {
+  if (loading) {
+    return (
+      <Alert>
+        <Skeleton className="size-5 rounded-full" />
+        <AlertTitle>Проверка API…</AlertTitle>
+        <AlertDescription>
+          Запрос к <code className="text-xs">/v1/health</code>
+        </AlertDescription>
+      </Alert>
+    )
+  }
+  if (ok && !loadError) {
+    return (
+      <Alert className="border-success/30 bg-success/5">
+        <CheckCircle className="text-success" />
+        <AlertTitle>API работает</AlertTitle>
+        <AlertDescription>Сервер отвечает на запросы health-check.</AlertDescription>
+      </Alert>
+    )
+  }
+  if (ok && loadError) {
+    return (
+      <Alert className="border-warning/30 bg-warning/5">
+        <Info className="text-warning" />
+        <AlertTitle>API доступен, данные не загружены</AlertTitle>
+        <AlertDescription>{loadError}. Проверьте Bearer-токен в «Настройках».</AlertDescription>
+      </Alert>
+    )
+  }
+  return (
+    <Alert variant="destructive" className="border-destructive/30 bg-destructive/5">
+      <XCircle className="text-destructive" />
+      <AlertTitle>API недоступен</AlertTitle>
+      <AlertDescription>
+        Не удалось получить ответ от сервера. Проверьте, что API запущен (порт 8080) и в dev работает
+        прокси Vite.
+      </AlertDescription>
+    </Alert>
+  )
+}
+
+function RecentJobsCard({
+  jobs,
+  nameById,
+  loading,
+}: {
+  jobs: import('@/types/api').JobRow[]
+  nameById: Map<string, string>
+  loading: boolean
+}) {
+  return (
+    <Card>
+      <CardHeader className="border-b py-3">
+        <CardTitle className="text-base">Недавние задачи</CardTitle>
+        <CardDescription>Последние фоновые операции</CardDescription>
+      </CardHeader>
+      <CardContent className="p-3">
+        {loading && jobs.length === 0 ? (
+          <Skeleton className="h-24 w-full" />
+        ) : jobs.length === 0 ? (
+          <p className="px-2 py-6 text-center text-sm text-muted-foreground">Нет задач</p>
+        ) : (
+          <ul className="flex flex-col gap-1">
+            {jobs.slice(0, 8).map((j) => (
+              <li
+                key={j.job_id}
+                className="flex items-center justify-between gap-2 rounded px-2 py-1 text-sm hover:bg-muted/40"
+              >
+                <span className="flex min-w-0 flex-col gap-0.5">
+                  <span className="truncate font-mono text-xs text-muted-foreground">{j.kind}</span>
+                  <span className="truncate text-xs">
+                    {j.meta?.module_id ? nameById.get(String(j.meta.module_id)) ?? '' : ''}
+                  </span>
+                </span>
+                <span
+                  className={
+                    j.status === 'succeeded'
+                      ? 'text-xs text-success'
+                      : j.status === 'failed'
+                        ? 'text-xs text-destructive'
+                        : 'text-xs text-muted-foreground'
+                  }
+                >
+                  {j.status}
+                </span>
+              </li>
+            ))}
+          </ul>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+function RecentRevisionsCard({
+  revisions,
+  loading,
+}: {
+  revisions: import('@/types/api').RevisionRow[]
+  loading: boolean
+}) {
+  return (
+    <Card>
+      <CardHeader className="border-b py-3">
+        <CardTitle className="text-base">Последние ревизии</CardTitle>
+        <CardDescription>История конфигураций</CardDescription>
+      </CardHeader>
+      <CardContent className="p-3">
+        {loading && revisions.length === 0 ? (
+          <Skeleton className="h-24 w-full" />
+        ) : revisions.length === 0 ? (
+          <p className="px-2 py-6 text-center text-sm text-muted-foreground">Нет ревизий</p>
+        ) : (
+          <ul className="flex flex-col gap-1">
+            {revisions.slice(0, 8).map((r) => (
+              <li
+                key={r.id}
+                className="flex items-center justify-between gap-2 rounded px-2 py-1 text-sm hover:bg-muted/40"
+              >
+                <span className="truncate font-mono text-xs text-muted-foreground">{r.id.slice(0, 10)}…</span>
+                <span className="text-xs text-muted-foreground">
+                  {new Date(r.created_at).toLocaleString('ru-RU')}
+                </span>
+              </li>
+            ))}
+          </ul>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+function NetworkStatusCard({
+  peers,
+  speakers,
+  loading,
+}: {
+  peers: import('@/types/api').PeerRow[]
+  speakers: import('@/types/api').SpeakerRow[]
+  loading: boolean
+}) {
+  const m = aggregateNetworkMetrics(peers, speakers)
+  return (
+    <Card>
+      <CardHeader className="border-b py-3">
+        <CardTitle className="text-base">Состояние сети</CardTitle>
+        <CardDescription>BGP-сессии и спикеры</CardDescription>
+      </CardHeader>
+      <CardContent className="p-3">
+        {loading && peers.length === 0 && speakers.length === 0 ? (
+          <Skeleton className="h-24 w-full" />
+        ) : (
+          <div className="flex flex-col gap-2 px-1 py-1 text-sm">
+            <Row label="Пиры Established" value={`${m.peersEstablished} / ${m.peersEnabled}`} />
+            <Row label="Спикеры online" value={`${m.speakersOnline} / ${m.speakersTotal}`} />
+            {m.peersMismatch > 0 ? (
+              <Row label="Mismatches" value={String(m.peersMismatch)} variant="warning" />
+            ) : null}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+function Row({
+  label,
+  value,
+  variant = 'default',
+}: {
+  label: string
+  value: string
+  variant?: 'default' | 'warning'
+}) {
+  return (
+    <div className="flex items-center justify-between gap-2">
+      <span className="text-muted-foreground">{label}</span>
+      <span className={variant === 'warning' ? 'font-medium text-warning-foreground' : 'font-medium tabular-nums'}>
+        {value}
+      </span>
+    </div>
+  )
+}