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/monitoring.tsx

@@ -0,0 +1,457 @@
+import { createFileRoute, useSearch } from '@tanstack/react-router'
+import { useQuery } from '@tanstack/react-query'
+import { Activity, AlertTriangle, Bird, Database, Gauge, HardDrive, HeartPulse, Info, ListTodo, RefreshCw, ShieldCheck } from 'lucide-react'
+
+import { Alert, AlertDescription, AlertTitle } from '@evobgp/ui/components/alert'
+import { Badge } from '@evobgp/ui/components/badge'
+import { Button } from '@evobgp/ui/components/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@evobgp/ui/components/card'
+import { Separator } from '@evobgp/ui/components/separator'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@evobgp/ui/components/tabs'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@evobgp/ui/components/table'
+
+import { PageHeader } from '@/components/page-header'
+import { QueryState } from '@/components/query-state'
+import { SectionCards, type SectionCardItem } from '@/components/section-cards'
+import { SectionCardsSkeleton } from '@/components/skeletons'
+
+import {
+  monitoringHealthQueryOptions,
+  monitoringReadyQueryOptions,
+  monitoringVersionQueryOptions,
+  type ReadyStatus,
+  type VersionInfo,
+} from '@/queries/monitoring'
+import { networkBirdQueryOptions } from '@/queries/network'
+import { operationsJobsQueryOptions } from '@/queries/operations'
+
+export const Route = createFileRoute('/_auth/monitoring')({
+  component: MonitoringComponent,
+  validateSearch: (search: Record<string, unknown>) => ({
+    tab: (search.tab === 'postgres' || search.tab === 'runtime-logs' ? search.tab : 'system') as
+      | 'system'
+      | 'postgres'
+      | 'runtime-logs',
+  }),
+})
+
+function MonitoringComponent() {
+  const search = useSearch({ from: '/_auth/monitoring' })
+  const healthQ = useQuery(monitoringHealthQueryOptions())
+  const readyQ = useQuery(monitoringReadyQueryOptions())
+  const versionQ = useQuery(monitoringVersionQueryOptions())
+  const birdQ = useQuery(networkBirdQueryOptions())
+  const jobsQ = useQuery(operationsJobsQueryOptions())
+
+  const refreshing =
+    healthQ.isFetching ||
+    readyQ.isFetching ||
+    versionQ.isFetching ||
+    birdQ.isFetching ||
+    jobsQ.isFetching
+
+  const jobs = jobsQ.data?.items ?? []
+  const running = jobs.filter((j) => j.status === 'running' || j.status === 'queued').length
+  const failed = jobs.filter((j) =>
+    ['failed', 'error', 'cancelled'].includes(j.status.toLowerCase()),
+  ).length
+
+  const versionText = formatVersion(versionQ.data)
+
+  const items: SectionCardItem[] = [
+    {
+      label: 'Общий статус',
+      value: overallStatusLabel({ health: healthQ.data, ready: readyQ.data, jobsFailed: failed }),
+      icon: <Gauge className="size-4" />,
+      hint: overallHint({ health: healthQ.data, jobsFailed: failed }),
+    },
+    {
+      label: 'BGP сессии',
+      value: birdQ.data
+        ? `${birdQ.data.bgp_established}/${birdQ.data.bgp_sessions_total}`
+        : '—',
+      icon: <Bird className="size-4" />,
+      hint: birdQ.data?.birdc_configured
+        ? 'Established / total на API-хосте'
+        : 'birdc не настроен',
+    },
+    {
+      label: 'Задачи',
+      value: running,
+      icon: <Activity className="size-4" />,
+      hint: `активных из ${jobs.length}`,
+      variant: failed > 0 ? 'warning' : 'default',
+    },
+    {
+      label: 'Версия',
+      value: versionText,
+      icon: <Gauge className="size-4" />,
+      hint: versionQ.data?.git_sha ?? versionQ.data?.build_time ?? 'GET /v1/version',
+    },
+  ]
+
+  function refetchAll() {
+    void healthQ.refetch()
+    void readyQ.refetch()
+    void versionQ.refetch()
+    void birdQ.refetch()
+    void jobsQ.refetch()
+  }
+
+  const failedJobs = jobs
+    .filter((j) => ['failed', 'error', 'cancelled'].includes(j.status.toLowerCase()))
+    .slice(0, 5)
+
+  return (
+    <div className="flex flex-col gap-6">
+      <PageHeader
+        title="Мониторинг"
+        description="Состояние API, BGP и задач для диагностики инцидентов"
+        actions={
+          <Button variant="outline" size="sm" onClick={refetchAll} disabled={refreshing}>
+            <RefreshCw className={refreshing ? 'animate-spin' : ''} />
+            Обновить
+          </Button>
+        }
+      />
+
+      <Tabs defaultValue={search.tab}>
+        <TabsList>
+          <TabsTrigger value="system">Система</TabsTrigger>
+          <TabsTrigger value="postgres">PostgreSQL</TabsTrigger>
+          <TabsTrigger value="runtime-logs">Файловые логи</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="system" className="mt-4 flex flex-col gap-6">
+          {refreshing ? <SectionCardsSkeleton count={4} /> : <SectionCards items={items} />}
+
+          <div className="grid gap-4 lg:grid-cols-2">
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-base">Доступность и готовность</CardTitle>
+                <CardDescription>GET /v1/health · GET /v1/ready</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <QueryState
+                  data={readyQ.data}
+                  isLoading={readyQ.isLoading}
+                  isError={readyQ.isError}
+                  error={readyQ.error}
+                  skeleton={<div className="h-40" />}
+                  onRetry={() => readyQ.refetch()}
+                >
+                  {(ready) => <ReadyTable health={healthQ.data} ready={ready} />}
+                </QueryState>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2 text-base">
+                  <Bird className="size-4" />
+                  BGP на API-хосте
+                </CardTitle>
+                <CardDescription>GET /v1/bird/status</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <QueryState
+                  data={birdQ.data}
+                  isLoading={birdQ.isLoading}
+                  isError={birdQ.isError}
+                  error={birdQ.error}
+                  skeleton={<div className="h-40" />}
+                  onRetry={() => birdQ.refetch()}
+                >
+                  {(bird) => <BirdSummary bird={bird} />}
+                </QueryState>
+              </CardContent>
+            </Card>
+          </div>
+
+          <div className="grid gap-4 lg:grid-cols-2">
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2 text-base">
+                  <Activity className="size-4" />
+                  Задачи
+                </CardTitle>
+                <CardDescription>Последние 100 задач · GET /v1/jobs</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="flex flex-wrap gap-4 text-sm">
+                  <Metric label="Активных" value={running} />
+                  <Metric
+                    label="С ошибками"
+                    value={failed}
+                    valueClass={failed > 0 ? 'text-warning' : 'text-success'}
+                  />
+                  <Metric label="В выборке" value={jobs.length} />
+                </div>
+                <Separator />
+                {failedJobs.length > 0 ? (
+                  <div className="space-y-3">
+                    <p className="text-sm font-medium">Последние ошибки</p>
+                    <ul className="space-y-2">
+                      {failedJobs.map((job) => (
+                        <li key={job.job_id} className="rounded-lg border px-3 py-2 text-sm">
+                          <div className="flex items-start justify-between gap-2">
+                            <p className="font-medium">{job.kind}</p>
+                            <Badge variant="destructive">{job.status}</Badge>
+                          </div>
+                          {job.error ? (
+                            <p className="mt-1 text-xs text-muted-foreground">
+                              {job.error.slice(0, 120)}
+                              {job.error.length > 120 ? '…' : ''}
+                            </p>
+                          ) : null}
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                ) : (
+                  <p className="text-sm text-muted-foreground">
+                    Критичных сбоев в последних 100 задачах нет.
+                  </p>
+                )}
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2 text-base">
+                  <AlertTriangle className="size-4 text-muted-foreground" />
+                  Что проверять при деградации
+                </CardTitle>
+                <CardDescription>Короткая шпаргалка для triage</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-3">
+                <Alert>
+                  <HeartPulse className="size-4" />
+                  <AlertTitle>API недоступен</AlertTitle>
+                  <AlertDescription>
+                    Если <code className="text-xs">/v1/health</code> возвращает ошибку — проверьте процесс
+                    API и его логи.
+                  </AlertDescription>
+                </Alert>
+                <Alert>
+                  <Database className="size-4" />
+                  <AlertTitle>Readiness не «Готов»</AlertTitle>
+                  <AlertDescription>
+                    Сначала <code className="text-xs">postgres</code>, затем{' '}
+                    <code className="text-xs">store</code> и <code className="text-xs">jobs</code> в checks.
+                  </AlertDescription>
+                </Alert>
+                <Alert>
+                  <Bird className="size-4" />
+                  <AlertTitle>Низкий ratio BGP</AlertTitle>
+                  <AlertDescription>
+                    Проверьте <code className="text-xs">/v1/bird/status</code>, затем состояние пиров в Сети.
+                  </AlertDescription>
+                </Alert>
+                <Alert>
+                  <ListTodo className="size-4" />
+                  <AlertTitle>Ошибки задач</AlertTitle>
+                  <AlertDescription>
+                    Откройте Операции и проверьте последние неуспешные jobs.
+                  </AlertDescription>
+                </Alert>
+              </CardContent>
+            </Card>
+          </div>
+        </TabsContent>
+
+        <TabsContent value="postgres" className="mt-4">
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">PostgreSQL</CardTitle>
+              <CardDescription>Статус соединения и пул</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Alert>
+                <Database className="size-4" />
+                <AlertTitle>Статус готовности</AlertTitle>
+                <AlertDescription>
+                  PostgreSQL-соединение отображается в readiness-проверке на вкладке «Система» (check{' '}
+                  <code className="text-xs">postgres</code>).
+                </AlertDescription>
+              </Alert>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="runtime-logs" className="mt-4">
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">Файловые логи</CardTitle>
+              <CardDescription>Логи API и pipeline</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Alert>
+                <Info className="size-4" />
+                <AlertTitle>Логи на сервере</AlertTitle>
+                <AlertDescription>
+                  Файловые логи настраиваются переменной <code className="text-xs">EVOBGP_LOG_*</code> и
+                  управляются tenant-settings на странице «Настройки BIRD».
+                </AlertDescription>
+              </Alert>
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}
+
+function Metric({ label, value, valueClass }: { label: string; value: number | string; valueClass?: string }) {
+  return (
+    <div>
+      <p className="text-muted-foreground">{label}</p>
+      <p className={`text-2xl font-bold tabular-nums ${valueClass ?? ''}`}>{value}</p>
+    </div>
+  )
+}
+
+function formatVersion(version?: VersionInfo | null): string {
+  if (!version) return '—'
+  return version.version ?? version.app ?? '—'
+}
+
+interface OverallInput {
+  health?: { ok?: boolean } | null
+  ready?: ReadyStatus | null
+  jobsFailed: number
+}
+
+function overallStatusLabel(input: OverallInput): string {
+  if (!input.health?.ok) return 'Ошибка'
+  if (input.jobsFailed > 0) return 'Внимание'
+  if (input.ready?.status && input.ready.status !== 'ok') return 'Внимание'
+  return 'В норме'
+}
+
+function overallHint(input: OverallInput): string {
+  if (!input.health?.ok) return 'API недоступен или возвращает ошибку'
+  if (input.jobsFailed > 0) return `Есть провальные задачи (${input.jobsFailed})`
+  return 'Все системы работают в штатном режиме'
+}
+
+function ReadyTable({
+  health,
+  ready,
+}: {
+  health?: { ok?: boolean; status?: string; error?: string } | null
+  ready: ReadyStatus
+}) {
+  const checks = ready.checks ?? {}
+  const iconByKey: Record<string, typeof Database> = {
+    postgres: Database,
+    store: HardDrive,
+    jobs: ListTodo,
+  }
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead className="w-[55%]">Проверка</TableHead>
+          <TableHead>Статус</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow>
+          <TableCell>
+            <div className="flex items-center gap-2">
+              <HeartPulse className="size-4 shrink-0 text-muted-foreground" />
+              <div>
+                <p className="text-sm font-medium">Liveness</p>
+                <p className="text-xs text-muted-foreground">/v1/health</p>
+              </div>
+            </div>
+          </TableCell>
+          <TableCell>
+            <Badge variant={health?.ok ? 'default' : 'destructive'}>
+              {health?.ok ? 'OK' : 'Ошибка'}
+            </Badge>
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>
+            <div className="flex items-center gap-2">
+              <ShieldCheck className="size-4 shrink-0 text-muted-foreground" />
+              <div>
+                <p className="text-sm font-medium">Readiness</p>
+                <p className="text-xs text-muted-foreground">/v1/ready</p>
+              </div>
+            </div>
+          </TableCell>
+          <TableCell>
+            <Badge variant={ready.status === 'ok' ? 'default' : 'secondary'}>
+              {ready.status ?? '—'}
+            </Badge>
+          </TableCell>
+        </TableRow>
+        {Object.entries(checks).map(([key, value]) => {
+          const ok = typeof value === 'boolean' ? value : value?.ok !== false
+          const Icon = iconByKey[key] ?? ListTodo
+          return (
+            <TableRow key={key}>
+              <TableCell>
+                <div className="flex items-center gap-2">
+                  <Icon className="size-4 shrink-0 text-muted-foreground" />
+                  <div>
+                    <p className="text-sm font-medium">{key}</p>
+                  </div>
+                </div>
+              </TableCell>
+              <TableCell>
+                <Badge variant={ok ? 'default' : 'destructive'}>{ok ? 'OK' : 'Ошибка'}</Badge>
+              </TableCell>
+            </TableRow>
+          )
+        })}
+      </TableBody>
+    </Table>
+  )
+}
+
+function BirdSummary({ bird }: { bird: import('@/types/api').BirdStatus }) {
+  if (!bird.birdc_configured) {
+    return (
+      <p className="text-sm text-muted-foreground">
+        {bird.message ?? 'birdc не настроен на API-хосте (EVOBGP_BIRDC_SOCKET).'}
+      </p>
+    )
+  }
+  const ratio =
+    bird.bgp_sessions_total > 0
+      ? Math.round((bird.bgp_established / bird.bgp_sessions_total) * 100)
+      : null
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between text-sm">
+        <span className="text-muted-foreground">Established / total</span>
+        <span className="font-medium tabular-nums">
+          {bird.bgp_established} / {bird.bgp_sessions_total}
+          {ratio !== null ? <span className="text-muted-foreground"> ({ratio}%)</span> : null}
+        </span>
+      </div>
+      {ratio !== null ? (
+        <div className="h-2 overflow-hidden rounded-full bg-muted">
+          <div
+            className={`h-full rounded-full transition-all ${
+              ratio >= 100 ? 'bg-success' : ratio >= 50 ? 'bg-warning' : 'bg-destructive'
+            }`}
+            style={{ width: `${ratio}%` }}
+          />
+        </div>
+      ) : null}
+      {bird.error ? <p className="text-xs text-destructive">{bird.error}</p> : null}
+    </div>
+  )
+}