feat(traffic, users): enhance interface and peer management features

Added support for managing peer information in interface bindings, including new fields for peerPublicKey and peerName in the BoundIfaceTraffic interface. Updated the database schema to include these fields in user_interface_bindings and traffic_samples tables. Enhanced the UI components to display peer details alongside interface names, improving user experience and clarity in the traffic management system. Updated relevant functions and services to handle peer-specific logic, ensuring robust integration across the application.

app/(main)/backups/page.tsx

@@ -8,8 +8,7 @@ import { FileImportDialog } from "@/components/file-import-dialog"
 import { FormField, FormToggle, SegmentedControl } from "@/components/form-kit"
 import { StatusBadge } from "@/components/status-badge"
 import type { Backup, Server } from "@/lib/data"
-import { Frame, FramePanel } from "@/components/reui/frame"
+import { KpiStatGrid } from "@/components/reui-kit/kpi-stat-grid"
-import { IconTile } from "@/components/reui/icon-tile"
 import { OpsPanel } from "@/components/ops-panel"
 import { DataPageCard } from "@/components/data-page-card"
 import { Button } from "@/components/ui/button"
@@ -343,27 +342,39 @@ export default function BackupsPage() {
       <div className="flex-1 overflow-y-auto p-6">
         <div className="flex flex-col gap-5">
 
-          {/* Stats */}
+          <KpiStatGrid
-          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+            aria-label="Сводка бэкапов"
-            {[
+            items={[
-              { label: "Всего бэкапов",    value: backupList.length, icon: <HardDriveIcon className="size-4" /> },
+              {
-              { label: "Авто",             value: autoCount,         icon: <ClockIcon className="size-4" /> },
+                id: "all",
-              { label: "Вручную",          value: manualCount,       icon: <PlusIcon className="size-4" /> },
+                label: "Всего бэкапов",
-              { label: "Серверов охвачено",value: serverCount,        icon: <ServerIcon className="size-4" /> },
+                value: backupList.length,
-            ].map((s) => (
+                icon: <HardDriveIcon className="size-4" />,
-              <Frame key={s.label} className="h-full">
+                iconClassName: "text-muted-foreground",
-                <FramePanel className="relative isolate flex h-full items-center gap-3">
+              },
-                  <IconTile variant="elevated" aria-hidden="true" className="size-10.5 text-muted-foreground">
+              {
-                    {s.icon}
+                id: "auto",
-                  </IconTile>
+                label: "Авто",
-                  <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+                value: autoCount,
-                    <p className="text-muted-foreground text-sm font-medium">{s.label}</p>
+                icon: <ClockIcon className="size-4" />,
-                    <p className="text-2xl leading-none font-bold tabular-nums">{s.value}</p>
+                iconClassName: "text-info",
-                  </div>
+              },
-                </FramePanel>
+              {
-              </Frame>
+                id: "manual",
-            ))}
+                label: "Вручную",
-          </div>
+                value: manualCount,
+                icon: <PlusIcon className="size-4" />,
+                iconClassName: "text-muted-foreground",
+              },
+              {
+                id: "servers",
+                label: "Серверов охвачено",
+                value: serverCount,
+                icon: <ServerIcon className="size-4" />,
+                iconClassName: "text-primary",
+              },
+            ]}
+          />
 
           {/* Info bar */}
           <div className="flex items-center gap-4 text-xs text-muted-foreground px-1">

app/(main)/bgp/page.tsx

@@ -10,6 +10,7 @@ import { BGP_FILTER_FIELDS } from "@/lib/data-filters/bgp-filter-fields"
 import type { BgpSessionRow, BgpState, BgpType } from "@/lib/bgp/types"
 import { BGP_AS_NAMES } from "@/lib/bgp/types"
 import { Frame, FramePanel } from "@/components/reui/frame"
+import { KpiStatGrid } from "@/components/reui-kit/kpi-stat-grid"
 import { OpsPanel } from "@/components/ops-panel"
 import { DataPageCard } from "@/components/data-page-card"
 import { Button } from "@/components/ui/button"
@@ -20,7 +21,7 @@ import {
   RefreshCwIcon, DownloadIcon, SearchIcon,
   ActivityIcon, BarChart3Icon, ChevronRightIcon, ChevronDownIcon,
   ArrowDownIcon, ClipboardCopyIcon, ServerIcon,
-  XIcon, AlertCircleIcon,
+  XIcon, AlertCircleIcon, GitMergeIcon, CheckCircleIcon,
 } from "lucide-react"
 import { useDataSource } from "@/lib/data-source"
 import { requestJson } from "@/shared/api/http-client"
@@ -463,22 +464,39 @@ function AnalyticsTab({ sessions }: { sessions: BgpSession[] }) {
 
   return (
     <div className="flex flex-col gap-5">
-      {/* summary row */}
+      <KpiStatGrid
-      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
+        aria-label="Сводка префиксов BGP"
-        {[
+        items={[
-          { label: "Всего префиксов",   value: fmtNum(totalRx),     color: "text-emerald-600 dark:text-emerald-400" },
+          {
-          { label: "Активных маршрутов", value: fmtNum(totalActive), color: "text-sky-600 dark:text-sky-400" },
+            id: "rx",
-          { label: "eBGP сессий",        value: ebgpSessions,        color: "" },
+            label: "Всего префиксов",
-          { label: "iBGP сессий",        value: ibgpSessions,        color: "" },
+            value: fmtNum(totalRx),
-        ].map(s => (
+            icon: <DownloadIcon className="size-4" />,
-          <Frame key={s.label} className="h-full">
+            iconClassName: "text-success",
-            <FramePanel className="flex flex-col gap-0.5">
+          },
-              <p className="text-muted-foreground text-sm font-medium">{s.label}</p>
+          {
-              <p className={cn("text-2xl leading-none font-bold tabular-nums", s.color)}>{s.value}</p>
+            id: "active",
-            </FramePanel>
+            label: "Активных маршрутов",
-          </Frame>
+            value: fmtNum(totalActive),
-        ))}
+            icon: <GitMergeIcon className="size-4" />,
-      </div>
+            iconClassName: "text-info",
+          },
+          {
+            id: "ebgp",
+            label: "eBGP сессий",
+            value: ebgpSessions,
+            icon: <ActivityIcon className="size-4" />,
+            iconClassName: "text-muted-foreground",
+          },
+          {
+            id: "ibgp",
+            label: "iBGP сессий",
+            value: ibgpSessions,
+            icon: <ServerIcon className="size-4" />,
+            iconClassName: "text-muted-foreground",
+          },
+        ]}
+      />
 
       <div className="grid grid-cols-1 xl:grid-cols-[1fr_320px] gap-5">
         {/* prefixes by peer — horizontal bar chart */}
@@ -722,22 +740,40 @@ export default function BgpPage() {
             </span>
           )}
 
-          {/* KPI strip */}
+          <KpiStatGrid
-          <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
+            aria-label="Сводка BGP"
-            {[
+            items={[
-              { label: "Сессий всего",    value: sessions.length,   color: "" },
+              {
-              { label: "Established",     value: established,        color: "text-emerald-600 dark:text-emerald-400" },
+                id: "sessions",
-              { label: "Не установлено",  value: notEstab,           color: notEstab > 0 ? "text-amber-500" : "text-muted-foreground" },
+                label: "Сессий всего",
-              { label: "Получено префиксов", value: fmtNum(totalRx),color: "" },
+                value: sessions.length,
-            ].map(s => (
+                icon: <GitMergeIcon className="size-4" />,
-              <Frame key={s.label} className="h-full">
+                iconClassName: "text-muted-foreground",
-                <FramePanel className="flex flex-col gap-0.5">
+              },
-                  <p className="text-muted-foreground text-sm font-medium">{s.label}</p>
+              {
-                  <p className={cn("text-2xl leading-none font-bold tabular-nums", s.color)}>{s.value}</p>
+                id: "established",
-                </FramePanel>
+                label: "Established",
-              </Frame>
+                value: established,
-            ))}
+                icon: <CheckCircleIcon className="size-4" />,
-          </div>
+                iconClassName: "text-success",
+              },
+              {
+                id: "not-estab",
+                label: "Не установлено",
+                value: notEstab,
+                icon: <AlertCircleIcon className="size-4" />,
+                iconClassName: notEstab > 0 ? "text-warning" : "text-muted-foreground",
+                variant: notEstab > 0 ? "warning" : "default",
+              },
+              {
+                id: "prefixes",
+                label: "Получено префиксов",
+                value: fmtNum(totalRx),
+                icon: <DownloadIcon className="size-4" />,
+                iconClassName: "text-info",
+              },
+            ]}
+          />
 
           {/* alert: not-established sessions */}
           {notEstab > 0 && (

app/(main)/certificates/page.tsx

@@ -7,12 +7,13 @@ import { FileImportDialog } from "@/components/file-import-dialog"
 import { routerCertificates, servers as mockServers } from "@/lib/data"
 import type { CertStatus, Server } from "@/lib/data"
 import type { CertificateDto } from "@mmapp/contracts/certificates"
-import { Frame, FramePanel } from "@/components/reui/frame"
-import { IconTile } from "@/components/reui/icon-tile"
 import { OpsPanel } from "@/components/ops-panel"
 import { DataPageCard } from "@/components/data-page-card"
 import { DataPageToolbar } from "@/components/data-page-toolbar"
 import { CertificatesDataGrid } from "@/components/data-grids/certificates-data-grid"
+import { KpiStatGrid } from "@/components/reui-kit/kpi-stat-grid"
+import { ServerRailLayout, ServerRailMobileButton } from "@/components/server-rail-layout"
+import { ALL_SERVERS_ID, type ServerTileItem } from "@/components/server-tile-rail"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import {
@@ -119,42 +120,41 @@ function CertPartKpi({
   expired: CertificateDto[]
 }) {
   return (
-    <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+    <KpiStatGrid
-      {[
+      aria-label="Сводка сертификатов"
+      items={[
         {
+          id: "all",
           label: "Всего",
           value: displayCerts.length,
-          icon: <ShieldCheckIcon className="size-4 text-muted-foreground" />,
+          icon: <ShieldCheckIcon className="size-4" />,
+          iconClassName: "text-muted-foreground",
         },
         {
+          id: "valid",
           label: "Действующих",
           value: displayCerts.filter((c) => c.status === "valid").length,
-          icon: <BadgeCheckIcon className="size-4 text-emerald-500" />,
+          icon: <BadgeCheckIcon className="size-4" />,
+          iconClassName: "text-success",
         },
         {
+          id: "expiring",
           label: "Истекают",
           value: expiring.length,
-          icon: <AlertTriangleIcon className="size-4 text-amber-500" />,
+          icon: <AlertTriangleIcon className="size-4" />,
+          iconClassName: expiring.length > 0 ? "text-warning" : "text-muted-foreground",
+          variant: expiring.length > 0 ? "warning" : "default",
         },
         {
+          id: "expired",
           label: "Истёкших",
           value: expired.length,
-          icon: <AlertCircleIcon className="size-4 text-red-500" />,
+          icon: <AlertCircleIcon className="size-4" />,
+          iconClassName: expired.length > 0 ? "text-destructive" : "text-muted-foreground",
+          variant: expired.length > 0 ? "destructive" : "default",
         },
-      ].map((s) => (
+      ]}
-        <Frame key={s.label} className="h-full">
+    />
-          <FramePanel className="relative isolate flex h-full items-start gap-3">
-            <IconTile variant="elevated" aria-hidden="true" className="size-10.5 text-muted-foreground">
-              {s.icon}
-            </IconTile>
-            <div className="flex min-w-0 flex-1 flex-col gap-0.5">
-              <p className="text-muted-foreground text-sm font-medium">{s.label}</p>
-              <p className="text-2xl leading-none font-bold tabular-nums">{s.value}</p>
-            </div>
-          </FramePanel>
-        </Frame>
-      ))}
-    </div>
   )
 }
 
@@ -437,6 +437,8 @@ export default function CertificatesPage() {
   const [issueTrustWww, setIssueTrustWww] = useState(true)
   const [issueTrustApi, setIssueTrustApi] = useState(true)
 
+  const [selectedServerId, setSelectedServerId] = useState(ALL_SERVERS_ID)
+
   const [acmeDirectoryUrl, setAcmeDirectoryUrl] = useState(
     "https://acme-v02.api.letsencrypt.org/directory",
   )
@@ -451,6 +453,27 @@ export default function CertificatesPage() {
     return routerCertificates.map(mockToDto)
   }, [prefsHydrated, isLive, certificates])
 
+  const displayServers = isLive ? serverList : mockServers
+
+  const scopedCerts = useMemo(() => {
+    if (selectedServerId === ALL_SERVERS_ID) return displayCerts
+    return displayCerts.filter((c) => c.serverId === selectedServerId)
+  }, [displayCerts, selectedServerId])
+
+  const certRailItems = useMemo<ServerTileItem[]>(() => (
+    displayServers.map((s) => ({
+      id: s.id,
+      name: s.name,
+      host: s.host,
+      site: s.site,
+      country: s.country,
+      status: s.status,
+      type: s.type,
+      enabled: s.enabled,
+      meta: String(displayCerts.filter((c) => c.serverId === s.id).length),
+    }))
+  ), [displayServers, displayCerts])
+
   const serverById = useMemo(() => {
     const map = new Map<string, Server>()
     for (const s of isLive ? serverList : mockServers) map.set(s.id, s)
@@ -515,13 +538,13 @@ export default function CertificatesPage() {
   }, [isLive, loadLive, loadAcmeSettings])
 
   const expiring = useMemo(
-    () => displayCerts.filter((c) => c.status === "valid" && c.daysLeft >= 0 && c.daysLeft <= 30),
+    () => scopedCerts.filter((c) => c.status === "valid" && c.daysLeft >= 0 && c.daysLeft <= 30),
-    [displayCerts],
+    [scopedCerts],
   )
-  const expired = useMemo(() => displayCerts.filter((c) => c.status === "expired"), [displayCerts])
+  const expired = useMemo(() => scopedCerts.filter((c) => c.status === "expired"), [scopedCerts])
 
   const filtered = useMemo(() => {
-    return displayCerts.filter((c) => {
+    return scopedCerts.filter((c) => {
       if (statusFilter !== "all" && c.status !== statusFilter) return false
       if (!search) return true
       const q = search.toLowerCase()
@@ -532,7 +555,7 @@ export default function CertificatesPage() {
         c.sans.some((s) => s.includes(q))
       )
     })
-  }, [displayCerts, search, statusFilter])
+  }, [scopedCerts, search, statusFilter])
 
   async function handleRefresh() {
     if (!liveReady) return
@@ -625,35 +648,52 @@ export default function CertificatesPage() {
   }
 
   return (
-    <div className="flex flex-col h-full">
+    <>
-      <PageHeader
+    <ServerRailLayout
-        crumbs={[{ label: "Управление" }, { label: "Сертификаты" }]}
+      items={certRailItems}
-        actions={
+      selectedId={selectedServerId}
-          <>
+      onSelect={setSelectedServerId}
-            <Button
+      showAll
-              variant="outline"
+      allCount={displayServers.length}
-              size="sm"
+      loading={isLive && loadState === "loading" && displayServers.length === 0}
-              disabled={!liveReady || loadState === "loading"}
+      header={
-              onClick={() => {
+        <PageHeader
-                void handleRefresh()
+          crumbs={[{ label: "Управление" }, { label: "Сертификаты" }]}
-              }}
+          actions={
-            >
+            <>
-              <RefreshCwIcon className={cn("size-4", loadState === "loading" && "animate-spin")} />
+              <ServerRailMobileButton />
-              Обновить
+              <Button
-            </Button>
+                variant="outline"
-            <Button variant="outline" size="sm" onClick={() => setImportOpen(true)}>
+                size="sm"
-              <UploadIcon className="size-4" />
+                disabled={!liveReady || loadState === "loading"}
-              Импорт
+                onClick={() => {
-            </Button>
+                  void handleRefresh()
-            <Button size="sm" disabled={!liveReady || issueBusy} onClick={() => { setIssueStep(1); setIssueOpen(true) }}>
+                }}
-              <PlusIcon className="size-4" />
+              >
-              Выпустить сертификат
+                <RefreshCwIcon className={cn("size-4", loadState === "loading" && "animate-spin")} />
-            </Button>
+                Обновить
-          </>
+              </Button>
-        }
+              <Button variant="outline" size="sm" onClick={() => setImportOpen(true)}>
-      />
+                <UploadIcon className="size-4" />
-
+                Импорт
-      <div className="flex-1 overflow-y-auto p-6">
+              </Button>
+              <Button
+                size="sm"
+                disabled={!liveReady || issueBusy}
+                onClick={() => {
+                  setIssueStep(1)
+                  if (selectedServerId !== ALL_SERVERS_ID) setIssueServerId(selectedServerId)
+                  setIssueOpen(true)
+                }}
+              >
+                <PlusIcon className="size-4" />
+                Выпустить сертификат
+              </Button>
+            </>
+          }
+        />
+      }
+    >
         <div className="flex flex-col gap-5">
           {isLive && backendStatus === false && (
             <div className="rounded-lg border border-amber-500/30 bg-amber-500/5 px-4 py-3 text-sm text-amber-700 dark:text-amber-300">
@@ -673,7 +713,7 @@ export default function CertificatesPage() {
             </div>
           )}
 
-          <CertPartKpi displayCerts={displayCerts} expiring={expiring} expired={expired} />
+          <CertPartKpi displayCerts={scopedCerts} expiring={expiring} expired={expired} />
 
           {liveReady && (
             <CertPartAcmeSettings
@@ -720,7 +760,7 @@ export default function CertificatesPage() {
 
           <CertPartReference />
         </div>
-      </div>
+    </ServerRailLayout>
 
       <Sheet open={issueOpen} onOpenChange={(v) => { setIssueOpen(v); if (!v) setIssueStep(1) }}>
         <SheetContent side="right" className="w-full sm:max-w-lg flex flex-col gap-0 p-0">
@@ -753,7 +793,7 @@ export default function CertificatesPage() {
                 <StepperContent key={s} value={s}>
                   <CertPartIssueForm
                     step={s as 1 | 2 | 3 | 4}
-                    serverList={serverList}
+                    serverList={displayServers}
                     issueServerId={issueServerId}
                     setIssueServerId={setIssueServerId}
                     issueCertName={issueCertName}
@@ -812,6 +852,6 @@ export default function CertificatesPage() {
           toast.success(`Файл ${files[0]?.name} готов к импорту на роутер`)
         }}
       />
-    </div>
+    </>
   )
 }

app/(main)/communities/page.tsx

@@ -11,6 +11,7 @@ import {
   ACTION_COLOR,
 } from "@/components/data-grids/communities-data-grid"
 import { Frame, FramePanel } from "@/components/reui/frame"
+import { KpiStatGrid } from "@/components/reui-kit/kpi-stat-grid"
 import { OpsPanel } from "@/components/ops-panel"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
@@ -160,22 +161,39 @@ export default function CommunitiesPage() {
             </p>
           )}
 
-          {/* ── summary ── */}
+          <KpiStatGrid
-          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+            aria-label="Сводка communities"
-            {[
+            items={[
-              { label: "Всего communities", value: String(listData.length) },
+              {
-              { label: "Активных",          value: String(listData.filter(c => c.enabled).length) },
+                id: "all",
-              { label: "Стандартных",       value: String(listData.filter(c => c.type === "standard").length) },
+                label: "Всего communities",
-              { label: "Использует фильтры",value: String(new Set(listData.flatMap(c => c.filterIds)).size) },
+                value: String(listData.length),
-            ].map(({ label, value }) => (
+                icon: <TagIcon className="size-4" />,
-              <Frame key={label} className="h-full">
+                iconClassName: "text-muted-foreground",
-                <FramePanel className="flex flex-col gap-0.5">
+              },
-                  <p className="text-muted-foreground text-sm font-medium">{label}</p>
+              {
-                  <p className="text-2xl leading-none font-bold tabular-nums">{value}</p>
+                id: "enabled",
-                </FramePanel>
+                label: "Активных",
-              </Frame>
+                value: String(listData.filter((c) => c.enabled).length),
-            ))}
+                icon: <CheckIcon className="size-4" />,
-          </div>
+                iconClassName: "text-success",
+              },
+              {
+                id: "standard",
+                label: "Стандартных",
+                value: String(listData.filter((c) => c.type === "standard").length),
+                icon: <TagIcon className="size-4" />,
+                iconClassName: "text-info",
+              },
+              {
+                id: "filters",
+                label: "Использует фильтры",
+                value: String(new Set(listData.flatMap((c) => c.filterIds)).size),
+                icon: <FilterIcon className="size-4" />,
+                iconClassName: "text-primary",
+              },
+            ]}
+          />
 
           <div className="grid grid-cols-[1fr_320px] gap-5">
             {/* ── main table ── */}

app/(main)/containers/page.tsx

@@ -6,7 +6,7 @@ import { routerContainers, servers } from "@/lib/data"
 import type { RouterContainer } from "@/lib/data"
 import { Flag } from "@/components/flag"
 import { Frame, FramePanel } from "@/components/reui/frame"
-import { IconTile } from "@/components/reui/icon-tile"
+import { KpiStatGrid } from "@/components/reui-kit/kpi-stat-grid"
 import { OpsPanel } from "@/components/ops-panel"
 import { Button } from "@/components/ui/button"
 import { cn } from "@/lib/utils"
@@ -17,13 +17,14 @@ import {
 import {
   BoxIcon, PlayIcon, StopCircleIcon, SearchIcon,
   MoreHorizontalIcon, Trash2Icon, PencilIcon, PowerIcon,
-  CodeXmlIcon, CopyIcon, CheckIcon, ActivityIcon, ServerIcon,
+  CodeXmlIcon, ActivityIcon, ServerIcon,
   TerminalIcon, AlertCircleIcon,
 } from "lucide-react"
 import {
   Sheet, SheetContent, SheetHeader, SheetTitle,
   SheetDescription, SheetFooter, SheetClose,
 } from "@/components/ui/sheet"
+import { CodeExportSheet } from "@/components/reui-kit/code-export-sheet"
 
 // ─── helpers ──────────────────────────────────────────────────────────────────
 
@@ -104,57 +105,23 @@ function generateContainerRsc(c: RouterContainer): string {
 function ExportSheet({ open, container, onClose }: {
   open: boolean; container: RouterContainer | null; onClose: () => void
 }) {
-  const [copied, setCopied] = useState(false)
   const code = useMemo(() => container ? generateContainerRsc(container) : "", [container])
 
-  function handleCopy() {
-    navigator.clipboard.writeText(code).then(() => {
-      setCopied(true); setTimeout(() => setCopied(false), 2000)
-    })
-  }
-
   return (
-    <Sheet open={open} onOpenChange={(v) => { if (!v) onClose() }}>
+    <CodeExportSheet
-      <SheetContent className="flex flex-col overflow-hidden p-0 gap-0 sm:max-w-2xl">
+      open={open}
-        <SheetHeader className="shrink-0 px-6 pt-5 pb-4 border-b">
+      onClose={onClose}
-          <div className="flex items-start justify-between gap-4">
+      title="Экспорт Container"
-            <div>
+      description="RouterOS 7.4+ · /container · /interface/veth"
-              <SheetTitle>Экспорт Container</SheetTitle>
+      formats={[
-              <SheetDescription>RouterOS 7.4+ · /container · /interface/veth</SheetDescription>
+        {
-            </div>
+          id: "rsc",
-            <Button variant="outline" size="sm" className="shrink-0" onClick={handleCopy}>
+          label: "MikroTik .rsc",
-              {copied ? <><CheckIcon className="size-3.5 text-emerald-500" />Скопировано</> : <><CopyIcon className="size-3.5" />Копировать</>}
+          filename: `${container?.name ?? "container"}.rsc`,
-            </Button>
+          code,
-          </div>
+        },
-        </SheetHeader>
+      ]}
-        <div className="flex-1 overflow-y-auto">
+    />
-          <pre className="px-6 py-5 text-[12px] font-mono leading-relaxed text-foreground/85 whitespace-pre select-all">
-            {code.split("\n").map((line, i) => {
-              const isComment = line.startsWith("#")
-              const isCmd = /^\//.test(line.trimStart())
-              const isParam = /^\s+[a-z]/.test(line)
-              return (
-                <span key={i} className={
-                  isComment ? "text-muted-foreground"
-                  : isCmd    ? "text-sky-400"
-                  : isParam  ? "text-violet-300"
-                  : "text-foreground"
-                }>
-                  {line}{"\n"}
-                </span>
-              )
-            })}
-          </pre>
-        </div>
-        <SheetFooter className="shrink-0 px-6 py-4 border-t flex-row gap-2">
-          <SheetClose render={<Button variant="outline" className="flex-1" />}>Закрыть</SheetClose>
-          <Button className="flex-1" onClick={handleCopy}>
-            {copied ? <CheckIcon className="size-4" /> : <CopyIcon className="size-4" />}
-            {copied ? "Скопировано" : "Копировать .rsc"}
-          </Button>
-        </SheetFooter>
-      </SheetContent>
-    </Sheet>
   )
 }
 
@@ -319,27 +286,40 @@ export default function ContainersPage() {
       <div className="flex-1 overflow-y-auto p-6">
         <div className="flex flex-col gap-5">
 
-          {/* KPI */}
+          <KpiStatGrid
-          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+            aria-label="Сводка контейнеров"
-            {[
+            items={[
-              { label: "Всего",    value: routerContainers.length, icon: <BoxIcon className="size-4 text-muted-foreground" /> },
+              {
-              { label: "Running",  value: running,                 icon: <PlayIcon className="size-4 text-emerald-500" /> },
+                id: "all",
-              { label: "Stopped",  value: stopped,                 icon: <StopCircleIcon className="size-4 text-muted-foreground" /> },
+                label: "Всего",
-              { label: "Ошибок",   value: errors,                  icon: <AlertCircleIcon className="size-4 text-red-500" /> },
+                value: routerContainers.length,
-            ].map((s) => (
+                icon: <BoxIcon className="size-4" />,
-              <Frame key={s.label} className="h-full">
+                iconClassName: "text-muted-foreground",
-                <FramePanel className="relative isolate flex h-full items-start gap-3">
+              },
-                  <IconTile variant="elevated" aria-hidden="true" className="size-10.5 text-muted-foreground">
+              {
-                    {s.icon}
+                id: "running",
-                  </IconTile>
+                label: "Running",
-                  <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+                value: running,
-                    <p className="text-muted-foreground text-sm font-medium">{s.label}</p>
+                icon: <PlayIcon className="size-4" />,
-                    <p className="text-2xl leading-none font-bold tabular-nums">{s.value}</p>
+                iconClassName: "text-success",
-                  </div>
+              },
-                </FramePanel>
+              {
-              </Frame>
+                id: "stopped",
-            ))}
+                label: "Stopped",
-          </div>
+                value: stopped,
+                icon: <StopCircleIcon className="size-4" />,
+                iconClassName: "text-muted-foreground",
+              },
+              {
+                id: "errors",
+                label: "Ошибок",
+                value: errors,
+                icon: <AlertCircleIcon className="size-4" />,
+                iconClassName: "text-destructive",
+                variant: errors > 0 ? "destructive" : "default",
+              },
+            ]}
+          />
 
           {/* Info banner */}
           <div className="flex items-start gap-3 rounded-lg bg-violet-500/5 border border-violet-500/20 px-4 py-3 text-sm">

app/(main)/dashboard/page.tsx

@@ -1,15 +1,13 @@
 "use client"
 
-import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react"
+import { useCallback, useEffect, useMemo, useState } from "react"
 import { usePathname } from "next/navigation"
 import Link from "next/link"
 import { PageHeader } from "@/components/page-header"
 import { OpsPanel } from "@/components/ops-panel"
-import { Frame, FramePanel } from "@/components/reui/frame"
+import { KpiStatGrid } from "@/components/reui-kit/kpi-stat-grid"
-import { IconTile } from "@/components/reui/icon-tile"
 import { StatusDot } from "@/components/status-dot"
 import { StatusBadge } from "@/components/status-badge"
-import { Sparkline } from "@/components/sparkline"
 import { LatencyChart } from "@/components/dashboard/latency-chart"
 import { BandwidthChart } from "@/components/dashboard/bandwidth-chart"
 import { InternetPathMapCard } from "@/components/dashboard/internet-path-map"
@@ -47,49 +45,6 @@ function makeApiFetch(backendUrl: string) {
   }
 }
 
-function StatCard({
-  label, value, unit, delta, deltaDir, spark, sparkColor, icon,
-}: {
-  label: string; value: string; unit?: string; delta?: string
-  deltaDir?: "up" | "down"; spark?: number[]; sparkColor?: string
-  icon?: ReactNode
-}) {
-  return (
-    <Frame className="h-full">
-      <FramePanel className="relative isolate flex h-full flex-col overflow-hidden">
-        <div className="relative z-10 flex items-start gap-3">
-          {icon ? (
-            <IconTile
-              variant="elevated"
-              aria-hidden="true"
-              className="size-10.5 text-muted-foreground"
-            >
-              {icon}
-            </IconTile>
-          ) : null}
-          <div className="flex min-w-0 flex-1 flex-col gap-0.5">
-            <p className="text-muted-foreground text-sm font-medium">{label}</p>
-            <div className="flex items-baseline gap-1.5">
-              <span className="text-2xl leading-none font-bold tabular-nums tracking-tight">{value}</span>
-              {unit ? <span className="text-muted-foreground text-sm">{unit}</span> : null}
-            </div>
-            {delta ? (
-              <p className={`text-xs mt-1 flex items-center gap-1 ${deltaDir === "up" ? "text-[var(--status-online-fg)]" : deltaDir === "down" ? "text-[var(--status-offline-fg)]" : "text-muted-foreground"}`}>
-                {delta}
-              </p>
-            ) : null}
-          </div>
-        </div>
-        {spark && spark.length > 1 ? (
-          <div className="absolute right-4 bottom-4 opacity-60">
-            <Sparkline data={spark} width={80} height={32} color={sparkColor ?? "currentColor"} filled />
-          </div>
-        ) : null}
-      </FramePanel>
-    </Frame>
-  )
-}
-
 function fmtIntRu(n: number): string {
   return n.toLocaleString("ru-RU")
 }
@@ -725,49 +680,53 @@ export default function DashboardPage() {
       <div className="flex-1 overflow-y-auto">
         <div className="p-6 flex flex-col gap-6">
 
-          {/* KPI row */}
+          <KpiStatGrid
-          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+            aria-label="Сводка дашборда"
-            <StatCard
+            items={[
-              label="Серверы онлайн"
+              {
-              value={dashboardKpi.servers.value}
+                id: "servers",
-              unit={dashboardKpi.servers.unit}
+                label: "Серверы онлайн",
-              delta={dashboardKpi.servers.delta}
+                value: dashboardKpi.servers.unit
-              deltaDir={dashboardKpi.servers.deltaDir}
+                  ? `${dashboardKpi.servers.value} ${dashboardKpi.servers.unit}`
-              spark={dashboardKpi.servers.spark}
+                  : dashboardKpi.servers.value,
-              sparkColor={dashboardKpi.servers.sparkColor}
+                hint: dashboardKpi.servers.delta,
-              icon={<ServerIcon aria-hidden />}
+                icon: <ServerIcon className="size-4" />,
-            />
+                iconClassName: "text-muted-foreground",
-            <StatCard
+                variant: dashboardKpi.servers.deltaDir === "down" ? "warning" : "default",
-              label="Активные фильтры"
+              },
-              value={dashboardKpi.filters.value}
+              {
-              unit={dashboardKpi.filters.unit}
+                id: "filters",
-              delta={dashboardKpi.filters.delta}
+                label: "Активные фильтры",
-              deltaDir={dashboardKpi.filters.deltaDir}
+                value: dashboardKpi.filters.unit
-              spark={dashboardKpi.filters.spark}
+                  ? `${dashboardKpi.filters.value} ${dashboardKpi.filters.unit}`
-              sparkColor={dashboardKpi.filters.sparkColor}
+                  : dashboardKpi.filters.value,
-              icon={<FilterIcon aria-hidden />}
+                hint: dashboardKpi.filters.delta,
-            />
+                icon: <FilterIcon className="size-4" />,
-            <StatCard
+                iconClassName: "text-info",
-              label="BGP-префиксы"
+              },
-              value={dashboardKpi.bgp.value}
+              {
-              unit={dashboardKpi.bgp.unit}
+                id: "bgp",
-              delta={dashboardKpi.bgp.delta}
+                label: "BGP-префиксы",
-              deltaDir={dashboardKpi.bgp.deltaDir}
+                value: dashboardKpi.bgp.unit
-              spark={dashboardKpi.bgp.spark}
+                  ? `${dashboardKpi.bgp.value} ${dashboardKpi.bgp.unit}`
-              sparkColor={dashboardKpi.bgp.sparkColor}
+                  : dashboardKpi.bgp.value,
-              icon={<GitMergeIcon aria-hidden />}
+                hint: dashboardKpi.bgp.delta,
-            />
+                icon: <GitMergeIcon className="size-4" />,
-            <StatCard
+                iconClassName: "text-primary",
-              label="Активные алерты"
+              },
-              value={dashboardKpi.alerts.value}
+              {
-              unit={dashboardKpi.alerts.unit}
+                id: "alerts",
-              delta={dashboardKpi.alerts.delta}
+                label: "Активные алерты",
-              deltaDir={dashboardKpi.alerts.deltaDir}
+                value: dashboardKpi.alerts.unit
-              spark={dashboardKpi.alerts.spark}
+                  ? `${dashboardKpi.alerts.value} ${dashboardKpi.alerts.unit}`
-              sparkColor={dashboardKpi.alerts.sparkColor}
+                  : dashboardKpi.alerts.value,
-              icon={<BellIcon aria-hidden />}
+                hint: dashboardKpi.alerts.delta,
-            />
+                icon: <BellIcon className="size-4" />,
-          </div>
+                iconClassName: dashboardKpi.alerts.deltaDir === "down" ? "text-destructive" : "text-muted-foreground",
+                variant: dashboardKpi.alerts.deltaDir === "down" ? "destructive" : "default",
+              },
+            ]}
+          />
 
           {/* Latency chart + Events */}
           <div className="grid grid-cols-1 lg:grid-cols-[2fr_1fr] gap-4">

app/(main)/data-collection/page.tsx

@@ -4,10 +4,9 @@ import Link from "next/link"
 import { useCallback, useEffect, useMemo, useState } from "react"
 import { PageHeader } from "@/components/page-header"
 import { FormToggle } from "@/components/form-kit"
-import { Badge } from "@/components/ui/badge"
+import { Badge } from "@/components/reui/badge"
 import { Button, buttonVariants } from "@/components/ui/button"
-import { Frame, FramePanel } from "@/components/reui/frame"
+import { KpiStatGrid } from "@/components/reui-kit/kpi-stat-grid"
-import { IconTile } from "@/components/reui/icon-tile"
 import { OpsPanel } from "@/components/ops-panel"
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
 import {
@@ -104,7 +103,7 @@ function SnapshotTables({ snap }: { snap: SchedulerRunSnapshot }) {
   if (snap.job === "traffic") {
     const t = snap as TrafficRunSnapshot
     return (
-      <div className="space-y-3">
+      <div className="flex flex-col gap-3">
         {t.skipped ? (
           <p className="text-xs text-amber-600 dark:text-amber-400">Прогон пропущен: предыдущий сбор трафика ещё выполнялся.</p>
         ) : null}
@@ -126,7 +125,7 @@ function SnapshotTables({ snap }: { snap: SchedulerRunSnapshot }) {
   if (snap.job === "uptime_resources") {
     const u = snap as ResourcesRunSnapshot
     return (
-      <div className="space-y-3">
+      <div className="flex flex-col gap-3">
         {u.skipped ? (
           <p className="text-xs text-amber-600 dark:text-amber-400">Прогон пропущен: сбор ресурсов уже выполняется.</p>
         ) : null}
@@ -148,7 +147,7 @@ function SnapshotTables({ snap }: { snap: SchedulerRunSnapshot }) {
   if (snap.job === "servers_rest_ping") {
     const s = snap as ServersRestPingRunSnapshot
     return (
-      <div className="space-y-3">
+      <div className="flex flex-col gap-3">
         {s.skipped ? (
           <p className="text-xs text-amber-600 dark:text-amber-400">Прогон пропущен: предыдущая проверка API ещё выполнялась.</p>
         ) : null}
@@ -171,7 +170,7 @@ function SnapshotTables({ snap }: { snap: SchedulerRunSnapshot }) {
   if (snap.job === "uptime_ping") {
     const p = snap as PingRunSnapshot
     return (
-      <div className="space-y-3">
+      <div className="flex flex-col gap-3">
         {p.skipped ? (
           <p className="text-xs text-amber-600 dark:text-amber-400">Прогон пропущен: сбор ping уже выполняется.</p>
         ) : null}
@@ -196,7 +195,7 @@ function SnapshotTables({ snap }: { snap: SchedulerRunSnapshot }) {
   if (snap.job === "uptime_speed") {
     const s = snap as SpeedScheduledRunSnapshot
     return (
-      <div className="space-y-3">
+      <div className="flex flex-col gap-3">
         <p className="text-xs text-muted-foreground">
           Прогоны speed на <span className="font-mono tabular-nums">{new Date(s.sampledAt).toLocaleString("ru-RU")}</span> — по очереди для каждой включённой пробы
         </p>
@@ -209,7 +208,7 @@ function SnapshotTables({ snap }: { snap: SchedulerRunSnapshot }) {
   if (snap.job === "gre_bgp") {
     const g = snap as GreBgpSnapshotRunSnapshot
     return (
-      <div className="space-y-3">
+      <div className="flex flex-col gap-3">
         {g.skipped ? (
           <p className="text-xs text-amber-600 dark:text-amber-400">Прогон пропущен: предыдущий сбор GRE/BGP ещё выполнялся.</p>
         ) : null}
@@ -235,7 +234,7 @@ function SnapshotTables({ snap }: { snap: SchedulerRunSnapshot }) {
           </div>
         </dl>
         {g.errors?.length ? (
-          <div className="rounded-md border border-amber-500/40 bg-amber-500/10 px-3 py-2 text-xs text-amber-800 dark:text-amber-200 space-y-1">
+          <div className="rounded-md border border-amber-500/40 bg-amber-500/10 px-3 py-2 text-xs text-amber-800 dark:text-amber-200 flex flex-col gap-1">
             {g.errors.map((e, i) => (
               <p key={i} className="break-words">
                 {e}
@@ -249,7 +248,7 @@ function SnapshotTables({ snap }: { snap: SchedulerRunSnapshot }) {
   if (snap.job === "internet_path") {
     const p = snap as InternetPathRunSnapshot
     return (
-      <div className="space-y-3">
+      <div className="flex flex-col gap-3">
         <p className="text-xs text-muted-foreground">
           Снимок internet-path на{" "}
           <span className="font-mono tabular-nums">{new Date(p.sampledAt).toLocaleString("ru-RU")}</span>
@@ -276,7 +275,7 @@ function SnapshotTables({ snap }: { snap: SchedulerRunSnapshot }) {
   if (snap.job === "certificates_renew") {
     const c = snap as CertificatesRenewRunSnapshot
     return (
-      <div className="space-y-3">
+      <div className="flex flex-col gap-3">
         {c.skipped ? (
           <p className="text-xs text-amber-600 dark:text-amber-400">Прогон пропущен: предыдущая проверка ещё выполнялась или задача отключена.</p>
         ) : null}
@@ -299,7 +298,7 @@ function SnapshotTables({ snap }: { snap: SchedulerRunSnapshot }) {
           </div>
         </dl>
         {c.errors.length ? (
-          <div className="rounded-md border border-amber-500/40 bg-amber-500/10 px-3 py-2 text-xs text-amber-800 dark:text-amber-200 space-y-1">
+          <div className="rounded-md border border-amber-500/40 bg-amber-500/10 px-3 py-2 text-xs text-amber-800 dark:text-amber-200 flex flex-col gap-1">
             {c.errors.map((e, i) => (
               <p key={i} className="break-words">{e}</p>
             ))}
@@ -311,7 +310,7 @@ function SnapshotTables({ snap }: { snap: SchedulerRunSnapshot }) {
   if (snap.job === "backups") {
     const b = snap as BackupsRunSnapshot
     return (
-      <div className="space-y-3">
+      <div className="flex flex-col gap-3">
         <dl className="grid grid-cols-2 gap-3 text-xs sm:grid-cols-4">
           <div>
             <dt className="text-muted-foreground">Слот расписания</dt>
@@ -331,7 +330,7 @@ function SnapshotTables({ snap }: { snap: SchedulerRunSnapshot }) {
           </div>
         </dl>
         {b.errors?.length ? (
-          <div className="rounded-md border border-amber-500/40 bg-amber-500/10 px-3 py-2 text-xs text-amber-800 dark:text-amber-200 space-y-1">
+          <div className="rounded-md border border-amber-500/40 bg-amber-500/10 px-3 py-2 text-xs text-amber-800 dark:text-amber-200 flex flex-col gap-1">
             {b.errors.map((e, i) => (
               <p key={i} className="break-words">{e}</p>
             ))}
@@ -343,7 +342,7 @@ function SnapshotTables({ snap }: { snap: SchedulerRunSnapshot }) {
   if (snap.job === "alert_engine") {
     const a = snap as AlertEngineRunSnapshot
     return (
-      <div className="space-y-3">
+      <div className="flex flex-col gap-3">
         <p className="text-xs text-muted-foreground">
           Снимок на{" "}
           <span className="font-mono tabular-nums">{new Date(a.sampledAt).toLocaleString("ru-RU")}</span>
@@ -370,7 +369,7 @@ function SnapshotTables({ snap }: { snap: SchedulerRunSnapshot }) {
         {a.errors?.length ? (
           <Alert variant="destructive" className="py-2">
             <AlertCircleIcon />
-            <AlertDescription className="space-y-1 text-xs">
+            <AlertDescription className="flex flex-col gap-1 text-xs">
               {a.errors.map((e, i) => (
                 <p key={i} className="break-words">
                   {e}
@@ -380,7 +379,7 @@ function SnapshotTables({ snap }: { snap: SchedulerRunSnapshot }) {
           </Alert>
         ) : null}
         {a.ruleDiag && a.ruleDiag.length > 0 ? (
-          <div className="rounded-md border border-border bg-muted/20 px-3 py-2 space-y-2">
+          <div className="rounded-md border border-border bg-muted/20 px-3 py-2 flex flex-col gap-2">
             <p className="text-[11px] font-medium text-muted-foreground">По правилам (почему не ушло в Telegram)</p>
             <DataPageCard className="border-0 shadow-none bg-transparent">
               <AlertEngineRuleDiagGrid ruleDiag={a.ruleDiag} />
@@ -398,39 +397,39 @@ function RunRowDetail({ r }: { r: SchedulerRunRowDto }) {
   const jobDesc = SCHEDULER_JOB_DESCRIPTIONS[r.jobKey] ?? "—"
   const snapshot = useMemo(() => parseSchedulerRunSnapshot(r.resultJson ?? null), [r.resultJson])
   return (
-    <div className="space-y-4 text-sm">
+    <div className="flex flex-col gap-4 text-sm">
       <dl className="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-3">
-        <div className="space-y-1">
+        <div className="flex flex-col gap-1">
           <dt className="text-xs font-medium text-muted-foreground uppercase tracking-wide">ID записи</dt>
           <dd className="font-mono text-xs break-all bg-muted/60 rounded-md px-2 py-1.5 border border-border">{r.id}</dd>
         </div>
-        <div className="space-y-1">
+        <div className="flex flex-col gap-1">
           <dt className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Ключ задачи</dt>
           <dd className="font-mono text-xs">{r.jobKey}</dd>
         </div>
-        <div className="sm:col-span-2 space-y-1">
+        <div className="sm:col-span-2 flex flex-col gap-1">
           <dt className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Название и назначение</dt>
           <dd>
             <span className="font-medium">{jobTitle}</span>
             <p className="text-xs text-muted-foreground mt-1 leading-relaxed">{jobDesc}</p>
           </dd>
         </div>
-        <div className="space-y-1">
+        <div className="flex flex-col gap-1">
           <dt className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Старт</dt>
           <dd className="tabular-nums text-xs">{new Date(r.startedAt).toLocaleString("ru-RU")}</dd>
         </div>
-        <div className="space-y-1">
+        <div className="flex flex-col gap-1">
           <dt className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Завершение</dt>
           <dd className="tabular-nums text-xs">{new Date(r.finishedAt).toLocaleString("ru-RU")}</dd>
         </div>
-        <div className="space-y-1">
+        <div className="flex flex-col gap-1">
           <dt className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Длительность</dt>
           <dd className="tabular-nums">
             <span className="font-mono">{r.durationMs}</span> мс
             <span className="text-muted-foreground text-xs ml-2">({fmtMs(r.durationMs)})</span>
           </dd>
         </div>
-        <div className="space-y-1">
+        <div className="flex flex-col gap-1">
           <dt className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Результат</dt>
           <dd>
             <Badge
@@ -447,7 +446,7 @@ function RunRowDetail({ r }: { r: SchedulerRunRowDto }) {
         </div>
       </dl>
       {r.error ? (
-        <div className="space-y-1.5">
+        <div className="flex flex-col gap-1.5">
           <p className="text-xs font-medium text-destructive">Текст ошибки</p>
           <pre
             className="text-xs font-mono whitespace-pre-wrap break-words rounded-md border border-destructive/30 bg-destructive/5 px-3 py-2 max-h-48 overflow-y-auto"
@@ -461,7 +460,7 @@ function RunRowDetail({ r }: { r: SchedulerRunRowDto }) {
 
       <Separator />
 
-      <div className="space-y-2">
+      <div className="flex flex-col gap-2">
         <p className="text-xs font-medium text-muted-foreground uppercase tracking-wide">Результаты измерений</p>
         {snapshot ? (
           <SnapshotTables snap={snapshot} />
@@ -967,13 +966,13 @@ export default function DataCollectionPage() {
         sub: uptimeCollector?.scheduler?.jobs?.length
           ? "По сохранённым задачам планировщика"
           : "По переключателям на этой странице",
-        icon: <CalendarClockIcon className="size-4 text-muted-foreground" />,
+        icon: <CalendarClockIcon className="size-4" />,
       },
       {
         label: "Сейчас выполняется",
         value: String(runningJobsCount),
         sub: "Фоновые прогоны планировщика",
-        icon: <LoaderCircleIcon className="size-4 text-amber-500" />,
+        icon: <LoaderCircleIcon className="size-4" />,
       },
       {
         label: "Трафик — последний сбор",
@@ -982,16 +981,16 @@ export default function DataCollectionPage() {
           : "—",
         sub: trafficCollector?.lastError ? trafficCollector.lastError : trafficCollector?.lastDurationMs != null ? `${trafficCollector.lastDurationMs} мс` : "нет данных",
         icon: trafficCollector?.lastError ? (
-          <XCircleIcon className="size-4 text-destructive" />
+          <XCircleIcon className="size-4" />
         ) : (
-          <CheckCircleIcon className="size-4 text-emerald-500" />
+          <CheckCircleIcon className="size-4" />
         ),
       },
       {
         label: "Журнал (в списке)",
         value: String(schedulerRuns.length),
         sub: errorRunsInView ? `${errorRunsInView} с ошибкой` : "ошибок в показанных — нет",
-        icon: <DatabaseIcon className="size-4 text-sky-500" />,
+        icon: <DatabaseIcon className="size-4" />,
       },
     ],
     [
@@ -1064,22 +1063,32 @@ export default function DataCollectionPage() {
 
           {isLive && (
             <>
-              <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+              <KpiStatGrid
-                {stats.map((s) => (
+                aria-label="Сводка сбора данных"
-                  <Frame key={s.label} className="h-full">
+                items={stats.map((s, i) => ({
-                    <FramePanel className="relative isolate flex h-full items-start gap-3">
+                  id: `dc-${i}`,
-                      <IconTile variant="elevated" aria-hidden="true" className="size-10.5 text-muted-foreground">
+                  label: s.label,
-                        {s.icon}
+                  value: s.value,
-                      </IconTile>
+                  hint: s.sub,
-                      <div className="min-w-0 flex-1 flex flex-col gap-0.5">
+                  icon: s.icon,
-                        <p className="text-muted-foreground text-sm font-medium">{s.label}</p>
+                  iconClassName:
-                        <p className="text-xl leading-none font-bold tabular-nums truncate">{s.value}</p>
+                    s.label === "Трафик — последний сбор" && trafficCollector?.lastError
-                        <p className="text-[11px] text-muted-foreground mt-1 leading-snug line-clamp-2">{s.sub}</p>
+                      ? "text-destructive"
-                      </div>
+                      : s.label === "Сейчас выполняется" && runningJobsCount > 0
-                    </FramePanel>
+                        ? "text-warning"
-                  </Frame>
+                        : s.label === "Журнал (в списке)" && errorRunsInView
-                ))}
+                          ? "text-destructive"
-              </div>
+                          : s.label === "Трафик — последний сбор"
+                            ? "text-success"
+                            : "text-muted-foreground",
+                  variant:
+                    s.label === "Трафик — последний сбор" && trafficCollector?.lastError
+                      ? "destructive" as const
+                      : s.label === "Журнал (в списке)" && errorRunsInView
+                        ? "warning" as const
+                        : "default" as const,
+                }))}
+              />
 
               <DataPageCard>
                 <div className="border-b border-border px-5 py-4">
@@ -1090,7 +1099,7 @@ export default function DataCollectionPage() {
                 </div>
                 <DataCollectionSchedulerDataGrid rows={schedulerGridRows} />
                 <Separator />
-                <div className="space-y-3 px-5 py-4">
+                <div className="flex flex-col gap-3 px-5 py-4">
                     <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                       <div>
                         <p className="text-xs text-muted-foreground mb-1.5">Хранение сэмплов трафика (дней)</p>
@@ -1142,7 +1151,7 @@ export default function DataCollectionPage() {
                       {schedulerSaveBusy ? <LoaderCircleIcon className="size-4 animate-spin mr-2" /> : null}
                       Сохранить настройки планировщика
                     </Button>
-                    <div className="text-xs text-muted-foreground space-y-0.5 pt-1 border-t border-border/60">
+                    <div className="text-xs text-muted-foreground flex flex-col gap-0.5 pt-1 border-t border-border/60">
                       <p>
                         Трафик — последний сбор:{" "}
                         {trafficCollector?.lastCollectedAt

app/(main)/filters/page.tsx

@@ -35,6 +35,9 @@ import {
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
 import { toast } from "sonner"
+import { CodeExportSheet } from "@/components/reui-kit/code-export-sheet"
+import { ServerRailLayout, ServerRailMobileButton } from "@/components/server-rail-layout"
+import { type ServerTileItem } from "@/components/server-tile-rail"
 
 // ── helpers ────────────────────────────────────────────────────────────────────
 
@@ -754,13 +757,11 @@ function PreviewModal({ open, serverId, rulesets, onClose, serversList, tunnelsL
   tunnelsList: GreTunnel[]
   recRoutesByServer: Record<string, RecursiveRouteLite[]>
 }) {
-  const [copied, setCopied] = useState(false)
-
   const singleRuleset = useMemo(
     () => rulesets.filter(r => r.serverId === serverId),
     [rulesets, serverId],
   )
-  const server     = serversList.find(s => s.id === serverId)
+  const server = serversList.find(s => s.id === serverId)
   const totalRules = singleRuleset.reduce((s, r) => s + r.rules.length, 0)
 
   const config = useMemo(
@@ -771,93 +772,25 @@ function PreviewModal({ open, serverId, rulesets, onClose, serversList, tunnelsL
     [open, singleRuleset, serversList, tunnelsList, recRoutesByServer],
   )
 
-  const handleCopy = () => {
-    navigator.clipboard.writeText(config).catch(() => {})
-    setCopied(true); setTimeout(() => setCopied(false), 2000)
-  }
-  if (!open) return null
-
   return (
-    <div className="fixed inset-0 z-50 flex items-center justify-center">
+    <CodeExportSheet
-      <div className="absolute inset-0 bg-black/40 backdrop-blur-sm" onClick={onClose} />
+      open={open}
-      <div className="relative z-10 w-full max-w-2xl mx-4 bg-card rounded-xl border shadow-2xl flex flex-col max-h-[85vh]">
+      onClose={onClose}
-
+      title="RouterOS config"
-        {/* header */}
+      description={
-        <div className="flex items-center justify-between px-5 py-3.5 border-b shrink-0">
+        server
-          <div className="flex items-center gap-2.5">
+          ? `${server.name} · ${totalRules} правил`
-            <FileCodeIcon className="size-4 text-muted-foreground" />
+          : "Экспорт правил фильтрации"
-            <span className="text-sm font-semibold">RouterOS config</span>
+      }
-            {server && (
+      formats={[
-              <span className="flex items-center gap-1 text-[11px] text-muted-foreground bg-muted px-2 py-0.5 rounded-full">
+        {
-                <Flag code={server.country} size={11} />
+          id: "rsc",
-                <span className="font-mono">{server.name}</span>
+          label: "RouterOS",
-                <span>· {totalRules} правил</span>
+          filename: `filters-${server?.name ?? "server"}.rsc`,
-              </span>
+          code: config,
-            )}
+        },
-          </div>
+      ]}
-          <Button variant="ghost" size="icon-sm" onClick={onClose}><XIcon className="size-4" /></Button>
+    />
-        </div>
-
-        {/* code */}
-        <div className="flex-1 overflow-y-auto p-4 min-h-0">
-          <pre className="text-xs font-mono bg-[#0d1117] rounded-lg p-4 leading-[1.6] whitespace-pre overflow-x-auto">
-            {config.split("\n").map((line, i) => {
-              const trimmed = line.trimStart()
-              const cls =
-                // section dividers
-                trimmed.startsWith("# ═") || trimmed.startsWith("# ─")
-                  ? "text-[#444c56]" :
-                // inline comments inside rule body
-                trimmed.startsWith("# ")
-                  ? "text-[#8b949e]" :
-                // RouterOS scripting keywords
-                trimmed.startsWith(":local") || trimmed.startsWith(":log") || trimmed.startsWith(":foreach")
-                  ? "text-[#d2a8ff]" :
-                // :if identity branch / closing brace
-                trimmed.startsWith(":if") || (trimmed === "}" && line.length < 3)
-                  ? "text-[#ff7b72] font-semibold" :
-                // filter rule add command
-                trimmed.startsWith("/routing filter rule")
-                  ? "text-[#79c0ff]" :
-                // rule body: if/else if branches
-                trimmed.startsWith("if (") || trimmed.startsWith("} else if")
-                  ? "text-[#ff7b72]" :
-                // rule body: blackhole action
-                trimmed.startsWith("set type blackhole")
-                  ? "text-[#ff7b72] font-semibold" :
-                // rule body: set actions
-                trimmed.startsWith("set gw") || trimmed.startsWith("set gateway") || trimmed.startsWith("set out-interface")
-                  ? "text-[#a5d6ff]" :
-                // rule body: accept / rule close
-                trimmed.startsWith("accept") || trimmed === `}"` || trimmed.startsWith(`rule="`)
-                  ? "text-[#79c0ff]" :
-                // named params
-                trimmed.match(/^(chain|comment|bgp-communities)=/)
-                  ? "text-[#a5d6ff]" :
-                  "text-[#c9d1d9]"
-              return <span key={i} className={cn("block", cls)}>{line || " "}</span>
-            })}
-          </pre>
-        </div>
-
-        {/* footer */}
-        <div className="px-5 py-4 border-t bg-muted/30 shrink-0 space-y-3">
-          <div className="grid grid-cols-2 gap-x-6 gap-y-1 text-xs text-muted-foreground">
-            <p>1. Скопируйте скрипт в буфер обмена</p>
-            <p>3. Вставьте в терминал и нажмите Enter</p>
-            <p>2. Подключитесь к любому MikroTik (SSH / Winbox)</p>
-            <p>4. Скрипт сам определит свои правила по identity</p>
-          </div>
-          <div className="flex gap-2">
-            <Button variant="outline" onClick={onClose} className="flex-1">Закрыть</Button>
-            <Button onClick={handleCopy} className="flex-1">
-              {copied ? <CheckIcon className="size-4" /> : <CopyIcon className="size-4" />}
-              {copied ? "Скопировано!" : "Скопировать"}
-            </Button>
-          </div>
-        </div>
-      </div>
-    </div>
   )
 }
 
@@ -1470,6 +1403,25 @@ export default function FiltersPage() {
   const selectedServer = allServers.find(s => s.id === selectedServerId) ?? allServers[0]
   const totalRules     = rulesets.reduce((s, r) => s + r.rules.length, 0)
 
+  const filterRailItems = useMemo<ServerTileItem[]>(() => (
+    allServers.map((s) => ({
+      id: s.id,
+      name: s.name,
+      host: s.host,
+      site: s.site,
+      country: s.country,
+      status: s.status,
+      type: s.type,
+      enabled: s.enabled,
+      meta: String(rulesets.find((r) => r.serverId === s.id)?.rules.length ?? 0),
+    }))
+  ), [allServers, rulesets])
+
+  const handleSelectServer = useCallback((id: string) => {
+    setSelectedServerId(id)
+    setSearch("")
+  }, [])
+
   const currentRules = useMemo(
     () => rulesets.find(r => r.serverId === selectedServerId)?.rules ?? [],
     [rulesets, selectedServerId],
@@ -1635,142 +1587,117 @@ export default function FiltersPage() {
   }
 
   return (
-    <div className="flex flex-col h-full">
+    <>
-      <PageHeader
+    <ServerRailLayout
-        crumbs={[{ label: "Управление" }, { label: "Фильтры" }]}
+      items={filterRailItems}
-        actions={
+      selectedId={selectedServerId}
-          <>
+      onSelect={handleSelectServer}
-            {isLive && (
+      showAll={false}
-              <>
+      header={
-                <Button
+        <PageHeader
-                  variant="outline"
+          crumbs={[{ label: "Управление" }, { label: "Фильтры" }]}
-                  size="sm"
+          actions={
-                  onClick={syncFromRouter}
+            <>
-                  disabled={syncBusy !== null}
+              <ServerRailMobileButton />
-                  title="Синхронизация Router → БД"
+              {isLive && (
-                >
+                <>
-                  {syncBusy === "from" ? "Синк Router → DB…" : "Router → DB"}
+                  <Button
-                </Button>
+                    variant="outline"
-                <Button
+                    size="sm"
-                  variant="outline"
+                    onClick={syncFromRouter}
-                  size="sm"
+                    disabled={syncBusy !== null}
-                  onClick={syncToRouter}
+                    title="Синхронизация Router → БД"
-                  disabled={syncBusy !== null}
+                  >
-                  title="Синхронизация БД → Router"
+                    {syncBusy === "from" ? "Синк Router → DB…" : "Router → DB"}
-                >
+                  </Button>
-                  {syncBusy === "to" ? "Синк DB → Router…" : "DB → Router"}
+                  <Button
-                </Button>
+                    variant="outline"
-                <Button
+                    size="sm"
-                  variant="outline"
+                    onClick={syncToRouter}
-                  size="sm"
+                    disabled={syncBusy !== null}
-                  onClick={() => void fetchRouterCompare()}
+                    title="Синхронизация БД → Router"
-                  disabled={syncBusy !== null || routerCompareLoading}
+                  >
-                  title="Сравнить правила в БД с цепочкой bgp-in на MikroTik"
+                    {syncBusy === "to" ? "Синк DB → Router…" : "DB → Router"}
-                  className="gap-1.5"
+                  </Button>
-                >
+                  <Button
-                  {routerCompareLoading ? (
+                    variant="outline"
-                    <LoaderCircleIcon className="size-4 animate-spin" />
+                    size="sm"
-                  ) : (
+                    onClick={() => void fetchRouterCompare()}
-                    <RefreshCwIcon className="size-4" />
+                    disabled={syncBusy !== null || routerCompareLoading}
-                  )}
+                    title="Сравнить правила в БД с цепочкой bgp-in на MikroTik"
-                  Сверить
+                    className="gap-1.5"
-                </Button>
+                  >
-              </>
+                    {routerCompareLoading ? (
-            )}
+                      <LoaderCircleIcon className="size-4 animate-spin" />
-            <Button variant="outline" size="sm" onClick={() => setPreviewOpen(true)}>
+                    ) : (
-              <FileCodeIcon className="size-4" />RouterOS
+                      <RefreshCwIcon className="size-4" />
-            </Button>
+                    )}
-            <Button
+                    Сверить
-              variant="outline" size="sm"
+                  </Button>
-              onClick={() => setCopyOpen(true)}
+                </>
-              disabled={currentRules.length === 0}
+              )}
-              title="Копировать правила на другой сервер"
+              <Button variant="outline" size="sm" onClick={() => setPreviewOpen(true)}>
-            >
+                <FileCodeIcon className="size-4" />RouterOS
-              <CopyIcon className="size-4" />Копировать
+              </Button>
-            </Button>
+              <Button
-            <Button size="sm" onClick={openCreate}>
+                variant="outline" size="sm"
-              <PlusIcon className="size-4" />Новое правило
+                onClick={() => setCopyOpen(true)}
-            </Button>
+                disabled={currentRules.length === 0}
-          </>
+                title="Копировать правила на другой сервер"
-        }
+              >
-      />
+                <CopyIcon className="size-4" />Копировать
-
+              </Button>
-      {isLive && liveLoadState === "error" && (
+              <Button size="sm" onClick={openCreate}>
-        <div className="shrink-0 border-b border-destructive/30 bg-destructive/10 px-6 py-2.5 text-xs text-destructive flex items-center gap-2">
+                <PlusIcon className="size-4" />Новое правило
-          <AlertCircleIcon className="size-3.5 shrink-0" />
+              </Button>
-          Бекенд недоступен — показаны демо-данные из lib/data. Проверьте URL бекенда в настройках.
+            </>
-        </div>
-      )}
-
-      {/* ── summary bar + server chips (same pattern as monitoring) ── */}
-      <div className="border-b bg-muted/20 px-6 py-3 flex items-center gap-3 flex-wrap">
-        <div className="flex items-center gap-1.5 text-xs">
-          <span className="text-muted-foreground">Всего правил</span>
-          <span className="font-semibold tabular-nums">{totalRules}</span>
-        </div>
-        {(() => {
-          const bhTotal = rulesets.reduce((s, r) => s + r.rules.filter(x => x.action === "blackhole").length, 0)
-          if (bhTotal === 0) return null
-          return (
-            <span className="inline-flex items-center gap-1 text-[11px] font-medium px-2 py-0.5 rounded border
-              bg-red-500/10 text-red-600 dark:text-red-400 border-red-500/20">
-              ⊘ {bhTotal} blackhole
-            </span>
-          )
-        })()}
-
-        <div className="w-px h-4 bg-border mx-1 shrink-0" />
-
-        {allServers.map(s => {
-          const count  = rulesets.find(r => r.serverId === s.id)?.rules.length ?? 0
-          const active = selectedServerId === s.id
-          return (
-            <button key={s.id}
-              onClick={() => { setSelectedServerId(s.id); setSearch("") }}
-              className={cn(
-                "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-[11px] font-medium transition-all",
-                active
-                  ? "bg-foreground text-background border-foreground"
-                  : "border-border text-muted-foreground hover:text-foreground hover:border-foreground/40",
-                !s.enabled && !active && "opacity-40",
-              )}>
-              <StatusDot status={s.status} />
-              <Flag code={s.country} size={12} />
-              <span className="font-mono">{s.name}</span>
-              <TypeChip type={s.type} />
-              <span className={cn(
-                "tabular-nums font-semibold",
-                active ? "" : count > 0 ? "text-foreground" : "opacity-40",
-              )}>{count}</span>
-            </button>
-          )
-        })}
-      </div>
-
-      {/* ── toolbar ── */}
-      <div className="px-6 py-3 flex items-center gap-3 border-b flex-wrap shrink-0">
-        <div className="relative min-w-[200px] max-w-xs flex-1">
-          <SearchIcon className="absolute left-2.5 top-1/2 -translate-y-1/2 size-3.5 text-muted-foreground pointer-events-none" />
-          <Input className="pl-8 h-8 text-sm" placeholder="Community, gateway, описание…"
-            value={search} onChange={e => setSearch(e.target.value)} />
-          {search && (
-            <button onClick={() => setSearch("")}
-              className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground">
-              <XIcon className="size-3.5" />
-            </button>
-          )}
-        </div>
-
-        <p className="text-xs text-muted-foreground ml-auto">
-          {filteredRules.length !== currentRules.length
-            ? `${filteredRules.length} из ${currentRules.length} правил`
-            : `${currentRules.length} правил`
           }
-        </p>
+        />
-      </div>
+      }
-
+      banner={
-      {/* ── main content ── */}
+        <>
-      <div className="flex-1 overflow-y-auto p-6">
+          {isLive && liveLoadState === "error" && (
+            <div className="shrink-0 border-b border-destructive/30 bg-destructive/10 px-6 py-2.5 text-xs text-destructive flex items-center gap-2">
+              <AlertCircleIcon className="size-3.5 shrink-0" />
+              Бекенд недоступен — показаны демо-данные из lib/data. Проверьте URL бекенда в настройках.
+            </div>
+          )}
+          <div className="border-b px-4 py-3 flex items-center gap-3 flex-wrap shrink-0 md:px-6">
+            <div className="relative min-w-[200px] max-w-xs flex-1">
+              <SearchIcon className="absolute left-2.5 top-1/2 -translate-y-1/2 size-3.5 text-muted-foreground pointer-events-none" />
+              <Input className="pl-8 h-8 text-sm" placeholder="Community, gateway, описание…"
+                value={search} onChange={e => setSearch(e.target.value)} />
+              {search && (
+                <button onClick={() => setSearch("")}
+                  className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground">
+                  <XIcon className="size-3.5" />
+                </button>
+              )}
+            </div>
+            <div className="flex items-center gap-1.5 text-xs">
+              <span className="text-muted-foreground">Всего правил</span>
+              <span className="font-semibold tabular-nums">{totalRules}</span>
+            </div>
+            {(() => {
+              const bhTotal = rulesets.reduce((s, r) => s + r.rules.filter(x => x.action === "blackhole").length, 0)
+              if (bhTotal === 0) return null
+              return (
+                <span className="inline-flex items-center gap-1 text-[11px] font-medium px-2 py-0.5 rounded border
+                  bg-red-500/10 text-red-600 dark:text-red-400 border-red-500/20">
+                  ⊘ {bhTotal} blackhole
+                </span>
+              )
+            })()}
+            <p className="text-xs text-muted-foreground ml-auto">
+              {filteredRules.length !== currentRules.length
+                ? `${filteredRules.length} из ${currentRules.length} правил`
+                : `${currentRules.length} правил`
+              }
+            </p>
+          </div>
+        </>
+      }
+    >
         <div className="flex flex-col gap-4">
 
           {/* RouterOS 7.x BGP extensions — только демо из lib/data (моки) */}
@@ -1886,7 +1813,7 @@ export default function FiltersPage() {
           </DataPageCard>
 
         </div>
-      </div>
+    </ServerRailLayout>
 
       <RuleSheet
         key={`${sheetMode}-${editingId ?? "new"}-${selectedServerId}`}
@@ -1927,6 +1854,6 @@ export default function FiltersPage() {
         recRoutesByServer={recRoutesByServer}
         ensureRecursiveFor={ensureRecursiveRoutes}
       />
-    </div>
+    </>
   )
 }

app/(main)/gre/page.tsx

@@ -14,7 +14,7 @@ import { requestJson } from "@/shared/api/http-client"
 import { cn } from "@/lib/utils"
 import { toast } from "sonner"
 import { Frame, FramePanel } from "@/components/reui/frame"
-import { IconTile } from "@/components/reui/icon-tile"
+import { KpiStatGrid } from "@/components/reui-kit/kpi-stat-grid"
 import { OpsPanel } from "@/components/ops-panel"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
@@ -26,14 +26,16 @@ import {
   DropdownMenu, DropdownMenuTrigger, DropdownMenuContent,
   DropdownMenuItem, DropdownMenuSeparator, DropdownMenuLabel, DropdownMenuGroup,
 } from "@/components/ui/dropdown-menu"
-import { Flag } from "@/components/flag"
 import {
   PlusIcon, RefreshCwIcon, MoreHorizontalIcon,
   LockIcon, LockOpenIcon, ShieldCheckIcon, NetworkIcon,
   EyeIcon, EyeOffIcon, ChevronDownIcon, ChevronRightIcon,
-  CodeXmlIcon, PencilIcon, PowerIcon, Trash2Icon, CopyIcon, CheckIcon,
+  CodeXmlIcon, PencilIcon, PowerIcon, Trash2Icon,
   DatabaseIcon,
 } from "lucide-react"
+import { CodeExportSheet } from "@/components/reui-kit/code-export-sheet"
+import { ServerRailLayout, ServerRailMobileButton } from "@/components/server-rail-layout"
+import { ALL_SERVERS_ID, type ServerTileItem } from "@/components/server-tile-rail"
 
 // ─── label maps ─────────────────────────────────────────────────────────────
 
@@ -240,11 +242,11 @@ export default function GrePage() {
   const [pageTab,   setPageTab]   = useState<PageTab>("tunnels")
   const [tabFilter, setTabFilter] = useState<TabFilter>("all")
   const [search,    setSearch]    = useState("")
+  const [selectedServerId, setSelectedServerId] = useState(ALL_SERVERS_ID)
 
   const [tunnelOpen,      setTunnelOpen]      = useState(false)
   const [poolOpen,        setPoolOpen]        = useState(false)
   const [codePreviewTunnel, setCodePreviewTunnel] = useState<GreTunnel | null>(null)
-  const [copied,          setCopied]          = useState(false)
 
   const [tForm, setTForm] = useState(defaultTunnelForm)
   const [pForm, setPForm] = useState(defaultPoolForm)
@@ -293,6 +295,25 @@ export default function GrePage() {
     [isLive, displayTunnels],
   )
 
+  const greRailItems = useMemo<ServerTileItem[]>(() => (
+    displayServers.map((s) => ({
+      id: s.id,
+      name: s.name,
+      host: s.host,
+      site: s.site,
+      country: s.country,
+      status: s.status,
+      type: s.type,
+      enabled: s.enabled,
+      meta: String(displayTunnels.filter((t) => t.serverId === s.id).length),
+    }))
+  ), [displayServers, displayTunnels])
+
+  const scopedTunnels = useMemo(() => {
+    if (selectedServerId === ALL_SERVERS_ID) return displayTunnels
+    return displayTunnels.filter((t) => t.serverId === selectedServerId)
+  }, [displayTunnels, selectedServerId])
+
   const serverById = useMemo(
     () => Object.fromEntries(displayServers.map((s) => [s.id, s])),
     [displayServers],
@@ -341,7 +362,7 @@ export default function GrePage() {
   }, [dataError])
 
   const filtered = useMemo(() => {
-    return displayTunnels.filter((t) => {
+    return scopedTunnels.filter((t) => {
       if (tabFilter === "up"    && t.status !== "up") return false
       if (tabFilter === "ipsec" && !t.ipsec)          return false
       if (tabFilter === "plain" && t.ipsec)           return false
@@ -354,60 +375,68 @@ export default function GrePage() {
         serverById[t.serverId]?.name.toLowerCase().includes(q)
       )
     })
-  }, [tabFilter, search, displayTunnels, serverById])
+  }, [tabFilter, search, scopedTunnels, serverById])
 
   const upCount    = displayTunnels.filter((t) => t.status === "up").length
   const ipsecCount = displayTunnels.filter((t) => t.ipsec).length
+  const scopedUpCount    = scopedTunnels.filter((t) => t.status === "up").length
+  const scopedIpsecCount = scopedTunnels.filter((t) => t.ipsec).length
 
   const tunnelTabs: { value: TabFilter; label: string; count: number }[] = [
-    { value: "all",   label: "Все",       count: displayTunnels.length },
+    { value: "all",   label: "Все",       count: scopedTunnels.length },
-    { value: "up",    label: "Активные",  count: upCount           },
+    { value: "up",    label: "Активные",  count: scopedUpCount           },
-    { value: "ipsec", label: "С IPsec",   count: ipsecCount        },
+    { value: "ipsec", label: "С IPsec",   count: scopedIpsecCount        },
-    { value: "plain", label: "Без IPsec", count: displayTunnels.length - ipsecCount },
+    { value: "plain", label: "Без IPsec", count: scopedTunnels.length - scopedIpsecCount },
   ]
 
-  function handleCopy(code: string) {
+  const greExportCode = useMemo(
-    navigator.clipboard.writeText(code).then(() => {
+    () => (codePreviewTunnel ? generateRosCommands(codePreviewTunnel, serverById) : ""),
-      setCopied(true)
+    [codePreviewTunnel, serverById],
-      toast.success("Команды скопированы")
+  )
-      setTimeout(() => setCopied(false), 2000)
-    })
-  }
 
   return (
-    <div className="flex flex-col h-full">
+    <>
-      <PageHeader
+    <ServerRailLayout
-        crumbs={[{ label: "Управление" }, { label: "GRE-туннели" }]}
+      items={greRailItems}
-        actions={
+      selectedId={selectedServerId}
-          <>
+      onSelect={setSelectedServerId}
-            <Button
+      showAll
-              variant="outline"
+      allCount={displayServers.length}
-              size="sm"
+      loading={isLive && dataLoading && displayServers.length === 0}
-              onClick={() => { void loadLive() }}
+      header={
-              disabled={!isLive || dataLoading}
+        <PageHeader
-              title={!isLive ? "Включите Live и доступный бэкенд в настройках источника данных" : "Обновить список GRE с устройств"}
+          crumbs={[{ label: "Управление" }, { label: "GRE-туннели" }]}
-            >
+          actions={
-              <RefreshCwIcon className={cn("size-4", dataLoading && "animate-spin")} />
+            <>
-              Обновить
+              <ServerRailMobileButton />
-            </Button>
+              <Button
-            <Button
+                variant="outline"
-              variant="outline"
+                size="sm"
-              size="sm"
+                onClick={() => { void loadLive() }}
-              onClick={() => { void syncJhToDb() }}
+                disabled={!isLive || dataLoading}
-              disabled={!isLive || syncJhBusy || dataLoading}
+                title={!isLive ? "Включите Live и доступный бэкенд в настройках источника данных" : "Обновить список GRE с устройств"}
-              title="Загрузить правила фильтрации с каждого Jump Host в БД и обновить опрос GRE"
+              >
-            >
+                <RefreshCwIcon className={cn("size-4", dataLoading && "animate-spin")} />
-              <DatabaseIcon className={cn("size-4", syncJhBusy && "animate-pulse")} />
+                Обновить
-              JH → БД
+              </Button>
-            </Button>
+              <Button
-            <Button size="sm" onClick={() => { setTForm(defaultTunnelForm); setTunnelOpen(true) }}>
+                variant="outline"
-              <PlusIcon className="size-4" />Добавить туннель
+                size="sm"
-            </Button>
+                onClick={() => { void syncJhToDb() }}
-          </>
+                disabled={!isLive || syncJhBusy || dataLoading}
-        }
+                title="Загрузить правила фильтрации с каждого Jump Host в БД и обновить опрос GRE"
-      />
+              >
-
+                <DatabaseIcon className={cn("size-4", syncJhBusy && "animate-pulse")} />
-      <div className="flex-1 overflow-y-auto p-6">
+                JH → БД
+              </Button>
+              <Button size="sm" onClick={() => { setTForm(defaultTunnelForm); setTunnelOpen(true) }}>
+                <PlusIcon className="size-4" />Добавить туннель
+              </Button>
+            </>
+          }
+        />
+      }
+    >
         <div className="flex flex-col gap-5">
 
           {/* Legacy banner */}
@@ -424,27 +453,39 @@ export default function GrePage() {
             </div>
           </div>
 
-          {/* Stats */}
+          <KpiStatGrid
-          <div className="grid grid-cols-4 gap-4">
+            aria-label="Сводка GRE"
-            {[
+            items={[
-              { label: "Всего туннелей",  value: displayTunnels.length, icon: <NetworkIcon     className="size-4 text-muted-foreground" /> },
+              {
-              { label: "Активно",         value: upCount,             icon: <ShieldCheckIcon className="size-4 text-emerald-500" />     },
+                id: "tunnels",
-              { label: "Защищены IPsec",  value: ipsecCount,          icon: <LockIcon        className="size-4 text-violet-400" />      },
+                label: "Всего туннелей",
-              { label: "IP-пулов",        value: displayPools.length, icon: <NetworkIcon     className="size-4 text-sky-400" />         },
+                value: displayTunnels.length,
-            ].map((s) => (
+                icon: <NetworkIcon className="size-4" />,
-              <Frame key={s.label} className="h-full">
+                iconClassName: "text-muted-foreground",
-                <FramePanel className="relative isolate flex h-full items-start gap-3">
+              },
-                  <IconTile variant="elevated" aria-hidden="true" className="size-10.5 text-muted-foreground">
+              {
-                    {s.icon}
+                id: "up",
-                  </IconTile>
+                label: "Активно",
-                  <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+                value: upCount,
-                    <p className="text-muted-foreground text-sm font-medium">{s.label}</p>
+                icon: <ShieldCheckIcon className="size-4" />,
-                    <p className="text-2xl leading-none font-bold tabular-nums">{s.value}</p>
+                iconClassName: "text-success",
-                  </div>
+              },
-                </FramePanel>
+              {
-              </Frame>
+                id: "ipsec",
-            ))}
+                label: "Защищены IPsec",
-          </div>
+                value: ipsecCount,
+                icon: <LockIcon className="size-4" />,
+                iconClassName: "text-info",
+              },
+              {
+                id: "pools",
+                label: "IP-пулов",
+                value: displayPools.length,
+                icon: <DatabaseIcon className="size-4" />,
+                iconClassName: "text-primary",
+              },
+            ]}
+          />
 
           {/* Page tabs */}
           <div className="flex items-center gap-1 border-b">
@@ -548,85 +589,50 @@ export default function GrePage() {
               </div>
           </OpsPanel>
         </div>
-      </div>
+    </ServerRailLayout>
 
       {/* ══ Sheet: Code Preview ════════════════════════════════════════════════ */}
-      <Sheet open={!!codePreviewTunnel} onOpenChange={(open) => { if (!open) setCodePreviewTunnel(null) }}>
+      <CodeExportSheet
-        <SheetContent side="right" className="w-full sm:max-w-2xl flex flex-col gap-0 p-0">
+        open={!!codePreviewTunnel}
-          {codePreviewTunnel && (() => {
+        onClose={() => setCodePreviewTunnel(null)}
-            const code = generateRosCommands(codePreviewTunnel, serverById)
+        title={codePreviewTunnel?.name ?? "GRE"}
-            return (
+        description="Команды RouterOS 7.20+ для создания туннеля"
-              <>
+        formats={[
-                <SheetHeader className="px-6 pt-6 pb-4 border-b shrink-0">
+          {
-                  <div className="flex items-start justify-between gap-4">
+            id: "rsc",
-                    <div>
+            label: "RouterOS",
-                      <SheetTitle className="font-mono">{codePreviewTunnel.name}</SheetTitle>
+            filename: `${codePreviewTunnel?.name ?? "gre"}.rsc`,
-                      <SheetDescription>Команды RouterOS 7.20+ для создания туннеля</SheetDescription>
+            code: greExportCode,
-                    </div>
+          },
-                    <Button
+        ]}
-                      variant="outline" size="sm"
+        beforeCode={
-                      className="shrink-0 gap-1.5"
+          codePreviewTunnel ? (
-                      onClick={() => handleCopy(code)}
+            <div className="flex flex-wrap gap-3 text-xs shrink-0">
-                    >
+              <span className="flex items-center gap-1.5">
-                      {copied
+                <span className={`size-1.5 rounded-full ${STATUS_MAP[codePreviewTunnel.status].dot}`} />
-                        ? <><CheckIcon className="size-3.5 text-emerald-500" /> Скопировано</>
+                {STATUS_MAP[codePreviewTunnel.status].label}
-                        : <><CopyIcon  className="size-3.5" /> Копировать</>}
+              </span>
-                    </Button>
+              <span className="text-muted-foreground">·</span>
-                  </div>
+              <span>{serverById[codePreviewTunnel.serverId]?.name}</span>
-                </SheetHeader>
+              <span className="text-muted-foreground">·</span>
-
+              <span className="font-mono">
-                <div className="flex-1 overflow-y-auto">
+                {codePreviewTunnel.localAddress === "0.0.0.0" ? "авто" : codePreviewTunnel.localAddress}
-                  {/* meta strip */}
+                {" → "}
-                  <div className="flex flex-wrap gap-3 px-6 py-3 border-b bg-muted/30 text-xs">
+                {codePreviewTunnel.remoteAddress}
-                    <span className="flex items-center gap-1.5">
+              </span>
-                      <span className={`size-1.5 rounded-full ${STATUS_MAP[codePreviewTunnel.status].dot}`} />
+              {codePreviewTunnel.ipsec ? (
-                      {STATUS_MAP[codePreviewTunnel.status].label}
+                <>
-                    </span>
+                  <span className="text-muted-foreground">·</span>
-                    <span className="text-muted-foreground">·</span>
+                  <span className="flex items-center gap-1 text-success">
-                    <span>{serverById[codePreviewTunnel.serverId]?.name}</span>
+                    <LockIcon className="size-3" />
-                    <span className="text-muted-foreground">·</span>
+                    IPsec {IKE_LABELS[codePreviewTunnel.ipsec.ikeVersion]}
-                    <span className="font-mono">{codePreviewTunnel.localAddress === "0.0.0.0" ? "авто" : codePreviewTunnel.localAddress} → {codePreviewTunnel.remoteAddress}</span>
+                  </span>
-                    {codePreviewTunnel.ipsec && (
+                </>
-                      <>
+              ) : null}
-                        <span className="text-muted-foreground">·</span>
+            </div>
-                        <span className="flex items-center gap-1 text-emerald-400"><LockIcon className="size-3" /> IPsec {IKE_LABELS[codePreviewTunnel.ipsec.ikeVersion]}</span>
+          ) : null
-                      </>
+        }
-                    )}
+      />
-                  </div>
-
-                  {/* code block */}
-                  <pre className="px-6 py-5 text-xs font-mono leading-relaxed text-foreground/90 whitespace-pre overflow-x-auto select-all">
-                    {code.split("\n").map((line, i) => {
-                      const isComment  = line.startsWith("#")
-                      const isSection  = isComment && line.includes("──")
-                      const isKey      = /^\s+[a-z]/.test(line)
-                      return (
-                        <span key={i} className={
-                          isSection ? "text-muted-foreground/60"
-                          : isComment ? "text-muted-foreground"
-                          : isKey    ? "text-sky-400/90"
-                          : "text-foreground"
-                        }>
-                          {line}
-                          {"\n"}
-                        </span>
-                      )
-                    })}
-                  </pre>
-                </div>
-
-                <SheetFooter className="px-6 py-4 border-t shrink-0 flex-row gap-2">
-                  <SheetClose render={<Button variant="outline" className="flex-1" />}>Закрыть</SheetClose>
-                  <Button className="flex-1 gap-1.5" onClick={() => handleCopy(code)}>
-                    {copied ? <CheckIcon className="size-4" /> : <CopyIcon className="size-4" />}
-                    {copied ? "Скопировано" : "Копировать команды"}
-                  </Button>
-                </SheetFooter>
-              </>
-            )
-          })()}
-        </SheetContent>
-      </Sheet>
 
       {/* ══ Sheet: Add Tunnel ══════════════════════════════════════════════════ */}
       <Sheet open={tunnelOpen} onOpenChange={setTunnelOpen}>
@@ -839,6 +845,6 @@ export default function GrePage() {
           </SheetFooter>
         </SheetContent>
       </Sheet>
-    </div>
+    </>
   )
 }

app/(main)/ospf/page.tsx

@@ -7,17 +7,20 @@ import { OspfNeighborsDataGrid } from "@/components/data-grids/ospf-neighbors-da
 import { OspfRoutesDataGrid, routeTypeClass } from "@/components/data-grids/ospf-routes-data-grid"
 import { OspfBfdDataGrid } from "@/components/data-grids/ospf-bfd-data-grid"
 import { Frame, FramePanel } from "@/components/reui/frame"
+import { KpiStatGrid } from "@/components/reui-kit/kpi-stat-grid"
 import { Button } from "@/components/ui/button"
 import { Separator } from "@/components/ui/separator"
 import { toast } from "sonner"
 import {
   RefreshCwIcon, WandSparklesIcon, SaveIcon, GripVerticalIcon,
   NetworkIcon, RouteIcon, ShieldIcon, ActivityIcon, XIcon,
+  LayersIcon, RouterIcon, UsersIcon, CheckCircleIcon, AlertCircleIcon,
 } from "lucide-react"
 import { cn } from "@/lib/utils"
 import { useDataSource } from "@/lib/data-source"
 import { requestJson } from "@/shared/api/http-client"
-import { Flag } from "@/components/flag"
+import { ServerRailLayout, ServerRailMobileButton } from "@/components/server-rail-layout"
+import { ALL_SERVERS_ID, type ServerTileItem } from "@/components/server-tile-rail"
 import { readStoredRouteOptimizerSettings } from "@/lib/route-optimizer-data"
 
 // ─── types ────────────────────────────────────────────────────────────────────
@@ -707,7 +710,7 @@ function InterfacesTab({
   }, [grouped, isLive])
 
   const needsOptimize = !isLive && items.some(item => hints[item.key] && hints[item.key].optimalCost !== item.cost)
-  const canOptimizeLive = isLive && filterServerId !== "all"
+  const canOptimizeLive = isLive && filterServerId !== ALL_SERVERS_ID
   const uniqueLiveFallbackOpt = useMemo(() => {
     const out: Record<string, number> = {}
     const byRouter: Record<string, OspfItem[]> = {}
@@ -921,20 +924,33 @@ function NeighborsTab({
 
   return (
     <div className="flex flex-col gap-5">
-      <div className="grid grid-cols-3 gap-3">
+      <KpiStatGrid
-        {[
+        aria-label="Сводка соседей OSPF"
-          { label: "Всего соседей", value: neighbors.length,              color: "" },
+        items={[
-          { label: "Full",          value: fullCount,                      color: "text-[var(--status-online-fg)]" },
+          {
-          { label: "Не Full",       value: neighbors.length - fullCount,   color: neighbors.length - fullCount > 0 ? "text-[var(--status-degraded-fg)]" : "text-muted-foreground" },
+            id: "neighbors",
-        ].map(s => (
+            label: "Всего соседей",
-          <Frame key={s.label} className="h-full">
+            value: neighbors.length,
-            <FramePanel className="flex flex-col gap-0.5">
+            icon: <UsersIcon className="size-4" />,
-              <p className="text-muted-foreground text-sm font-medium">{s.label}</p>
+            iconClassName: "text-muted-foreground",
-              <p className={cn("text-2xl leading-none font-bold tabular-nums", s.color)}>{s.value}</p>
+          },
-            </FramePanel>
+          {
-          </Frame>
+            id: "full",
-        ))}
+            label: "Full",
-      </div>
+            value: fullCount,
+            icon: <CheckCircleIcon className="size-4" />,
+            iconClassName: "text-success",
+          },
+          {
+            id: "not-full",
+            label: "Не Full",
+            value: neighbors.length - fullCount,
+            icon: <AlertCircleIcon className="size-4" />,
+            iconClassName: neighbors.length - fullCount > 0 ? "text-warning" : "text-muted-foreground",
+            variant: neighbors.length - fullCount > 0 ? "warning" : "default",
+          },
+        ]}
+      />
 
       {graphNodes.length > 0 && (
         <div className="flex rounded-xl overflow-hidden border border-white/[0.06]">
@@ -1044,21 +1060,41 @@ function BfdTab({ sessions }: { sessions: BfdSession[] }) {
 
   return (
     <div className="flex flex-col gap-4">
-      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+      <KpiStatGrid
-        {[
+        aria-label="Сводка BFD"
-          { label: "Сессий BFD",    value: sessions.length, color: "" },
+        items={[
-          { label: "Up",            value: upCount,          color: "text-[var(--status-online-fg)]" },
+          {
-          { label: "Down / Admin",  value: downCount,        color: downCount > 0 ? "text-[var(--status-offline-fg)]" : "text-muted-foreground" },
+            id: "sessions",
-          { label: "Init / другие", value: initCount,        color: initCount > 0 ? "text-[var(--status-degraded-fg)]" : "text-muted-foreground" },
+            label: "Сессий BFD",
-        ].map(s => (
+            value: sessions.length,
-          <Frame key={s.label} className="h-full">
+            icon: <ActivityIcon className="size-4" />,
-            <FramePanel className="flex flex-col gap-0.5">
+            iconClassName: "text-muted-foreground",
-              <p className="text-muted-foreground text-sm font-medium">{s.label}</p>
+          },
-              <p className={cn("text-2xl leading-none font-bold tabular-nums", s.color)}>{s.value}</p>
+          {
-            </FramePanel>
+            id: "up",
-          </Frame>
+            label: "Up",
-        ))}
+            value: upCount,
-      </div>
+            icon: <CheckCircleIcon className="size-4" />,
+            iconClassName: "text-success",
+          },
+          {
+            id: "down",
+            label: "Down / Admin",
+            value: downCount,
+            icon: <AlertCircleIcon className="size-4" />,
+            iconClassName: downCount > 0 ? "text-destructive" : "text-muted-foreground",
+            variant: downCount > 0 ? "destructive" : "default",
+          },
+          {
+            id: "init",
+            label: "Init / другие",
+            value: initCount,
+            icon: <LayersIcon className="size-4" />,
+            iconClassName: initCount > 0 ? "text-warning" : "text-muted-foreground",
+            variant: initCount > 0 ? "warning" : "default",
+          },
+        ]}
+      />
 
       {sessions.length === 0 && (
         <div className="rounded-md border border-border bg-muted/30 px-4 py-8 text-center text-sm text-muted-foreground">
@@ -1096,7 +1132,7 @@ const TABS: Array<{ id: OspfTab; label: string; icon: React.ReactNode }> = [
 
 export default function OspfPage() {
   const [activeTab,      setActiveTab]      = useState<OspfTab>("interfaces")
-  const [filterServerId, setFilterServerId] = useState<string>("all")
+  const [filterServerId, setFilterServerId] = useState<string>(ALL_SERVERS_ID)
 
   const { mode, backendUrl } = useDataSource()
   const isLive = mode === "live"
@@ -1218,9 +1254,26 @@ export default function OspfPage() {
   }, [items, neighbors, bfdSessions])
 
   // ── filtered display data ─────────────────────────────────────────────────────
-  const displayItems       = filterServerId === "all" ? items       : items.filter(i => i.routerKey === filterServerId)
+  const displayItems       = filterServerId === ALL_SERVERS_ID ? items       : items.filter(i => i.routerKey === filterServerId)
-  const displayNeighbors   = filterServerId === "all" ? neighbors   : neighbors.filter(n => n.localRouter === filterServerId)
+  const displayNeighbors   = filterServerId === ALL_SERVERS_ID ? neighbors   : neighbors.filter(n => n.localRouter === filterServerId)
-  const displayBfdSessions = filterServerId === "all" ? bfdSessions : bfdSessions.filter(b => b.serverId === filterServerId)
+  const displayBfdSessions = filterServerId === ALL_SERVERS_ID ? bfdSessions : bfdSessions.filter(b => b.serverId === filterServerId)
+
+  const ospfRailItems = useMemo<ServerTileItem[]>(() => (
+    ospfServers.map((s) => {
+      const counts = serverCounts[s.id]
+      const host = s.label.replace(/^mt-/, "")
+      return {
+        id: s.id,
+        name: host,
+        host,
+        site: s.site,
+        country: s.country || undefined,
+        meta: counts
+          ? `${counts.neighbors}n · ${counts.ifaces}i${counts.bfd > 0 ? ` · ${counts.bfd}b` : ""}`
+          : undefined,
+      }
+    })
+  ), [ospfServers, serverCounts])
 
   // Graph always shows full topology (highlight is handled by node click inside tab)
   // KPIs reflect the current filter
@@ -1229,91 +1282,45 @@ export default function OspfPage() {
   const totalAreas      = new Set(displayItems.map(i => i.area)).size
 
   return (
-    <div className="flex flex-col h-full">
+    <ServerRailLayout
-      <PageHeader
+      items={ospfRailItems}
-        crumbs={[{ label: "Инструменты" }, { label: "OSPF" }]}
+      selectedId={filterServerId}
-        actions={
+      onSelect={setFilterServerId}
-          <Button variant="outline" size="sm" onClick={() => setFetchTick(t => t + 1)}>
+      showAll
-            <RefreshCwIcon className={cn("size-4", loading && "animate-spin")} />
+      allCount={ospfServers.length}
-            Обновить
+      loading={isLive && loading && ospfServers.length === 0}
-          </Button>
+      header={
-        }
+        <PageHeader
-      />
+          crumbs={[{ label: "Инструменты" }, { label: "OSPF" }]}
-
+          actions={
-      <div className="border-b bg-background shrink-0">
+            <>
-        <div className="flex items-center px-6">
+              <ServerRailMobileButton />
-          {TABS.map(t => (
+              <Button variant="outline" size="sm" onClick={() => setFetchTick(t => t + 1)}>
-            <button key={t.id} onClick={() => setActiveTab(t.id)}
+                <RefreshCwIcon className={cn("size-4", loading && "animate-spin")} />
-              className={cn(
+                Обновить
-                "flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors -mb-px",
+              </Button>
-                activeTab === t.id
+            </>
-                  ? "border-primary text-foreground"
+          }
-                  : "border-transparent text-muted-foreground hover:text-foreground hover:border-border",
+        />
-              )}>
+      }
-              {t.icon}{t.label}
+      banner={
-            </button>
+        <div className="border-b bg-background shrink-0">
-          ))}
+          <div className="flex items-center px-6">
-        </div>
+            {TABS.map(t => (
-      </div>
+              <button key={t.id} onClick={() => setActiveTab(t.id)}
-
-      {/* ── server filter chips (same pattern as Filters page) ─────────────── */}
-      {ospfServers.length > 0 && (
-        <div className="border-b bg-muted/20 px-6 py-2.5 flex items-center gap-2 flex-wrap shrink-0">
-          {/* "All" chip */}
-          <button
-            onClick={() => setFilterServerId("all")}
-            className={cn(
-              "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-[11px] font-medium transition-all",
-              filterServerId === "all"
-                ? "bg-foreground text-background border-foreground"
-                : "border-border text-muted-foreground hover:text-foreground hover:border-foreground/40",
-            )}>
-            Все серверы
-            <span className={cn(
-              "tabular-nums font-semibold",
-              filterServerId === "all" ? "" : "text-foreground/60",
-            )}>{items.length}</span>
-          </button>
-
-          <div className="w-px h-4 bg-border shrink-0" />
-
-          {ospfServers.map(s => {
-            const counts = serverCounts[s.id]
-            const active = filterServerId === s.id
-            return (
-              <button key={s.id} onClick={() => setFilterServerId(s.id)}
                 className={cn(
-                  "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-[11px] font-medium transition-all",
+                  "flex items-center gap-2 px-4 py-3 text-sm font-medium border-b-2 transition-colors -mb-px",
-                  active
+                  activeTab === t.id
-                    ? "bg-foreground text-background border-foreground"
+                    ? "border-primary text-foreground"
-                    : "border-border text-muted-foreground hover:text-foreground hover:border-foreground/40",
+                    : "border-transparent text-muted-foreground hover:text-foreground hover:border-border",
                 )}>
-                {s.country ? <Flag code={s.country} size={12} /> : null}
+                {t.icon}{t.label}
-                {s.site && (
-                  <span className={cn(
-                    "inline-block px-1 py-0 rounded text-[9px] font-bold leading-4",
-                    active
-                      ? "bg-white/20"
-                      : "bg-muted-foreground/15 text-foreground/70",
-                  )}>{s.site}</span>
-                )}
-                <span className="font-mono">{s.label.replace(/^mt-/, "")}</span>
-                {counts && (
-                  <span className={cn(
-                    "tabular-nums text-[10px]",
-                    active ? "opacity-80" : "text-foreground/50",
-                  )}>
-                    {counts.neighbors}n · {counts.ifaces}i
-                    {counts.bfd > 0 && ` · ${counts.bfd}b`}
-                  </span>
-                )}
               </button>
-            )
+            ))}
-          })}
+          </div>
         </div>
-      )}
+      }
-
+    >
-      <div className="flex-1 overflow-y-auto p-6">
         <div className="flex flex-col gap-5">
 
           {/* data source banner */}
@@ -1346,21 +1353,32 @@ export default function OspfPage() {
             </span>
           )}
 
-          {/* KPI strip */}
+          <KpiStatGrid
-          <div className="grid grid-cols-3 gap-3">
+            aria-label="Сводка OSPF"
-            {[
+            items={[
-              { label: "Роутеров",    value: totalRouters    },
+              {
-              { label: "Интерфейсов", value: totalInterfaces },
+                id: "routers",
-              { label: "Зон (Area)",  value: totalAreas      },
+                label: "Роутеров",
-            ].map(s => (
+                value: totalRouters,
-              <Frame key={s.label} className="h-full">
+                icon: <RouterIcon className="size-4" />,
-                <FramePanel className="flex flex-col gap-0.5">
+                iconClassName: "text-muted-foreground",
-                  <p className="text-muted-foreground text-sm font-medium">{s.label}</p>
+              },
-                  <p className="text-2xl leading-none font-bold tabular-nums">{s.value}</p>
+              {
-                </FramePanel>
+                id: "ifaces",
-              </Frame>
+                label: "Интерфейсов",
-            ))}
+                value: totalInterfaces,
-          </div>
+                icon: <NetworkIcon className="size-4" />,
+                iconClassName: "text-info",
+              },
+              {
+                id: "areas",
+                label: "Зон (Area)",
+                value: totalAreas,
+                icon: <LayersIcon className="size-4" />,
+                iconClassName: "text-primary",
+              },
+            ]}
+          />
 
           {activeTab === "interfaces" && (
             <InterfacesTab
@@ -1384,7 +1402,6 @@ export default function OspfPage() {
           {activeTab === "bfd"        && <BfdTab sessions={displayBfdSessions} />}
 
         </div>
-      </div>
+    </ServerRailLayout>
-    </div>
   )
 }

app/(main)/probes/page.tsx

@@ -17,6 +17,8 @@ import {
 } from "@/components/data-grids/probes-speed-probes-data-grid"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
+import { ServerRailLayout, ServerRailMobileButton } from "@/components/server-rail-layout"
+import { type ServerTileItem } from "@/components/server-tile-rail"
 import { servers, greTunnels, type GreTunnel, type Server } from "@/lib/data"
 import { useDataSource } from "@/lib/data-source"
 import {
@@ -480,19 +482,25 @@ function ScheduleTab({
   setRules,
   serverOptions,
   tunnelsForServer,
+  defaultSrc,
 }: {
   rules: SchedRule[]
   setRules: React.Dispatch<React.SetStateAction<SchedRule[]>>
   serverOptions: Server[]
   tunnelsForServer: (serverId: string) => GreTunnel[]
+  defaultSrc?: string
 }) {
   const [showAdd, setShowAdd] = useState(false)
-  const [addSrc,  setAddSrc]  = useState(serverOptions[0]?.id ?? "srv1")
+  const [addSrc,  setAddSrc]  = useState(defaultSrc ?? serverOptions[0]?.id ?? "srv1")
   const [addTun,  setAddTun]  = useState("")
   const [addType, setAddType] = useState<SchedType>("ping")
   const [addMin,  setAddMin]  = useState(10)
   const addTunnels = useMemo(() => tunnelsForServer(addSrc), [addSrc, tunnelsForServer])
 
+  useEffect(() => {
+    if (defaultSrc) setAddSrc(defaultSrc)
+  }, [defaultSrc])
+
   useEffect(() => {
     const list = tunnelsForServer(addSrc)
     if (list.length && !list.some(t => t.id === addTun)) {
@@ -630,6 +638,20 @@ export default function ProbesPage() {
     return liveServers
   }, [isLive, liveServers])
 
+  const probeRailItems = useMemo<ServerTileItem[]>(() => (
+    allServers.map((s) => ({
+      id: s.id,
+      name: s.name,
+      host: s.host,
+      site: s.site,
+      country: s.country,
+      status: s.status,
+      type: s.type,
+      enabled: s.enabled,
+      selectable: s.enabled,
+    }))
+  ), [allServers])
+
   useEffect(() => {
     if (!isLive) {
       setRosSrcV4(undefined)
@@ -887,24 +909,33 @@ export default function ProbesPage() {
   }
 
   return (
-    <div className="flex flex-col h-full">
+    <ServerRailLayout
-      <PageHeader
+      items={probeRailItems}
-        crumbs={[{ label: "Инструменты" }, { label: "Диагностика" }]}
+      selectedId={srcId}
-        actions={
+      onSelect={setSrcId}
-          running.length > 0
+      showAll={false}
-            ? <Button variant="outline" size="sm" onClick={() => {
+      loading={isLive && liveLoad === "loading" && allServers.length === 0}
-                liveProbeRunRef.current?.ctrl.abort()
+      header={
-                setTests(p => p.map(t => (t.status === "running"
+        <PageHeader
-                  ? { ...t, status: "done" as const, totalLines: t.lines.length }
+          crumbs={[{ label: "Инструменты" }, { label: "Диагностика" }]}
-                  : t)))
+          actions={
-              }}>
+            <>
-                <SquareIcon className="size-4" />Остановить все
+              <ServerRailMobileButton />
-              </Button>
+              {running.length > 0
-            : undefined
+                ? <Button variant="outline" size="sm" onClick={() => {
-        }
+                    liveProbeRunRef.current?.ctrl.abort()
-      />
+                    setTests(p => p.map(t => (t.status === "running"
-
+                      ? { ...t, status: "done" as const, totalLines: t.lines.length }
-      <div className="flex-1 overflow-y-auto p-6">
+                      : t)))
+                  }}>
+                    <SquareIcon className="size-4" />Остановить все
+                  </Button>
+                : null}
+            </>
+          }
+        />
+      }
+    >
         <div className="flex flex-col gap-4">
 
           {isLive && liveLoad === "error" && (
@@ -916,7 +947,7 @@ export default function ProbesPage() {
 
           {isLive && (
             <p className="text-xs text-muted-foreground">
-              Режим «Живые»: ping/traceroute/route/mtu/bandwidth выполняются на выбранном MikroTik; для «Источника» поле src-address — только IPv4 (FQDN резолвится на бекенде). Traceroute через REST: у MikroTik лимит сессии ~60 с (параметры команды это не продлевают); у нас timeout в формате HH:MM:SS, count=1, max-hops при необходимости уменьшается автоматически. «Стоп» прерывает HTTP к бекенду. DNS — резолвер приложения, не MikroTik.
+              Режим «Живые»: ping/traceroute/route/mtu/bandwidth выполняются на выбранном MikroTik; для источника поле src-address — только IPv4 (FQDN резолвится на бекенде). Traceroute через REST: у MikroTik лимит сессии ~60 с (параметры команды это не продлевают); у нас timeout в формате HH:MM:SS, count=1, max-hops при необходимости уменьшается автоматически. «Стоп» прерывает HTTP к бекенду. DNS — резолвер приложения, не MikroTik.
             </p>
           )}
 
@@ -945,16 +976,6 @@ export default function ProbesPage() {
               {/* main config row */}
               <div className="flex flex-wrap items-end gap-3">
 
-                {/* source server */}
-                <div>
-                  <OptionLabel>Источник</OptionLabel>
-                  <NativeSelect value={srcId} onChange={setSrcId} className="min-w-[175px]">
-                    {allServers.filter(s => s.enabled).map(s => (
-                      <option key={s.id} value={s.id}>{s.name}</option>
-                    ))}
-                  </NativeSelect>
-                </div>
-
                 {/* target — all tools except bandwidth */}
                 {tool !== "bandwidth" && (
                   <div className="flex-1 min-w-[140px]">
@@ -1169,13 +1190,13 @@ export default function ProbesPage() {
                       setRules={setRules}
                       serverOptions={allServers}
                       tunnelsForServer={sid => greTunnels.filter(t => t.serverId === sid)}
+                      defaultSrc={srcId}
                     />
                   )
               )}
             </div>
           </div>
         </div>
-      </div>
+    </ServerRailLayout>
-    </div>
   )
 }

app/(main)/recursive-routes/page.tsx

@@ -20,6 +20,8 @@ import { cn } from "@/lib/utils"
 import { servers as mockServers, type Server } from "@/lib/data"
 import { PlusIcon, SaveIcon, TrashIcon, SearchIcon, XIcon, PencilIcon, CheckIcon, AlertCircleIcon } from "lucide-react"
 import { requestJson } from "@/shared/api/http-client"
+import { ServerRailLayout, ServerRailMobileButton } from "@/components/server-rail-layout"
+import { type ServerTileItem } from "@/components/server-tile-rail"
 
 interface BackendServer {
   id: number
@@ -543,6 +545,18 @@ export default function RecursiveRoutesPage() {
   }
 
   const currentServer = servers.find(s => s.id === selectedServerId)
+  const rrRailItems = useMemo<ServerTileItem[]>(() => (
+    servers.map((s) => ({
+      id: s.id,
+      name: s.name,
+      host: s.host,
+      site: s.site,
+      country: s.country,
+      status: s.status,
+      type: s.type,
+      enabled: s.enabled,
+    }))
+  ), [servers])
   const filteredRows = useMemo(() => {
     const q = search.trim().toLowerCase()
     if (!q) return rows
@@ -574,82 +588,64 @@ export default function RecursiveRoutesPage() {
   }, [filteredRows])
 
   return (
-    <div className="flex h-full flex-col">
+    <>
-      <PageHeader
+    <ServerRailLayout
-        crumbs={[{ label: "Управление" }, { label: "Рекурсивные маршруты" }]}
+      items={rrRailItems}
-        actions={
+      selectedId={selectedServerId}
-          <>
+      onSelect={setSelectedServerId}
-            <Button variant="outline" size="sm" onClick={syncFromRouter} disabled={!isLive || busy !== null}>
+      showAll={false}
-              {busy === "from" ? "Синхронизация..." : "Router => DB"}
+      showCount={false}
-            </Button>
+      loading={isLive && !liveServerListReady}
-            <Button variant="outline" size="sm" onClick={syncToRouter} disabled={!isLive || busy !== null}>
+      header={
-              {busy === "to" ? "Применение..." : "DB => Router"}
+        <PageHeader
-            </Button>
+          crumbs={[{ label: "Управление" }, { label: "Рекурсивные маршруты" }]}
-            <Button variant="outline" size="sm" onClick={saveToDb} disabled={!isLive || busy !== null}>
+          actions={
-              <SaveIcon className="size-4" />Сохранить в БД
+            <>
-            </Button>
+              <ServerRailMobileButton />
-            <Button size="sm" onClick={openCreate} disabled={!isLive || busy !== null}>
+              <Button variant="outline" size="sm" onClick={syncFromRouter} disabled={!isLive || busy !== null}>
-              <PlusIcon className="size-4" />Добавить
+                {busy === "from" ? "Синхронизация..." : "Router => DB"}
-            </Button>
+              </Button>
-          </>
+              <Button variant="outline" size="sm" onClick={syncToRouter} disabled={!isLive || busy !== null}>
-        }
+                {busy === "to" ? "Применение..." : "DB => Router"}
-      />
+              </Button>
-
+              <Button variant="outline" size="sm" onClick={saveToDb} disabled={!isLive || busy !== null}>
-      <div className="border-b bg-muted/20 px-6 py-3 flex items-center gap-3 flex-wrap">
+                <SaveIcon className="size-4" />Сохранить в БД
-        <div className="flex items-center gap-1.5 text-xs">
+              </Button>
-          <span className="text-muted-foreground">Всего маршрутов</span>
+              <Button size="sm" onClick={openCreate} disabled={!isLive || busy !== null}>
-          <span className="font-semibold tabular-nums">{rows.length}</span>
+                <PlusIcon className="size-4" />Добавить
-        </div>
+              </Button>
-        <div className="w-px h-4 bg-border mx-1 shrink-0" />
+            </>
-        {servers.map((s) => {
+          }
-          const count  = s.id === selectedServerId ? rows.length : 0
+        />
-          const active = selectedServerId === s.id
+      }
-          return (
+      banner={
-            <button key={s.id}
+        <div className="border-b px-4 py-3 flex items-center gap-3 flex-wrap shrink-0 md:px-6">
-              onClick={() => setSelectedServerId(s.id)}
+          <div className="relative min-w-[200px] max-w-xs flex-1">
-              className={cn(
+            <SearchIcon className="absolute left-2.5 top-1/2 -translate-y-1/2 size-3.5 text-muted-foreground pointer-events-none" />
-                "inline-flex items-center gap-1.5 rounded-full border px-2.5 py-1 text-[11px] font-medium transition-all",
+            <Input className="pl-8 h-8 text-sm" placeholder="Dst, gateway, table, comment…"
-                active
+              value={search} onChange={(e) => setSearch(e.target.value)} />
-                  ? "bg-foreground text-background border-foreground"
+            {search && (
-                  : "border-border text-muted-foreground hover:text-foreground hover:border-foreground/40",
+              <button onClick={() => setSearch("")}
-                !s.enabled && !active && "opacity-40",
+                className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground">
-              )}>
+                <XIcon className="size-3.5" />
-              <StatusDot status={s.status} />
+              </button>
-              <Flag code={s.country} size={12} />
+            )}
-              <span className="font-mono">{s.name}</span>
+          </div>
-              <TypeChip type={s.type} />
+          <div className="flex items-center gap-1.5 text-xs">
-              <span className={cn(
+            <span className="text-muted-foreground">Всего маршрутов</span>
-                "tabular-nums font-semibold",
+            <span className="font-semibold tabular-nums">{rows.length}</span>
-                active ? "" : count > 0 ? "text-foreground" : "opacity-40",
+          </div>
-              )}>{count}</span>
+          <p className="text-xs text-muted-foreground ml-auto">
-            </button>
+            {filteredRows.length !== rows.length ? `${filteredRows.length} из ${rows.length} маршрутов` : `${rows.length} маршрутов`}
-          )
+          </p>
-        })}
+          {opError && (
-      </div>
+            <div className="w-full text-xs text-destructive bg-destructive/10 border border-destructive/20 rounded-md px-3 py-2">
-
+              {opError}
-      <div className="px-6 py-3 flex items-center gap-3 border-b flex-wrap shrink-0">
+            </div>
-        <div className="relative min-w-[200px] max-w-xs flex-1">
-          <SearchIcon className="absolute left-2.5 top-1/2 -translate-y-1/2 size-3.5 text-muted-foreground pointer-events-none" />
-          <Input className="pl-8 h-8 text-sm" placeholder="Dst, gateway, table, comment…"
-            value={search} onChange={(e) => setSearch(e.target.value)} />
-          {search && (
-            <button onClick={() => setSearch("")}
-              className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground">
-              <XIcon className="size-3.5" />
-            </button>
           )}
         </div>
-        <p className="text-xs text-muted-foreground ml-auto">
+      }
-          {filteredRows.length !== rows.length ? `${filteredRows.length} из ${rows.length} маршрутов` : `${rows.length} маршрутов`}
+    >
-        </p>
-        {opError && (
-          <div className="w-full text-xs text-destructive bg-destructive/10 border border-destructive/20 rounded-md px-3 py-2">
-            {opError}
-          </div>
-        )}
-      </div>
-
-      <div className="flex-1 overflow-y-auto p-6">
         {!isLive ? (
           <Frame dense className="w-full">
             <FramePanel className="p-6 text-sm text-muted-foreground">
@@ -692,7 +688,7 @@ export default function RecursiveRoutesPage() {
             </button>
           </DataPageCard>
         )}
-      </div>
+    </ServerRailLayout>
 
       <RouteSheet
         open={sheetOpen}
@@ -702,6 +698,6 @@ export default function RecursiveRoutesPage() {
         onClose={() => setSheetOpen(false)}
         gateways={gatewayOptions}
       />
-    </div>
+    </>
   )
 }

app/(main)/route-optimizer/page.tsx

@@ -10,7 +10,7 @@ import { RouteOptimizerCommRecsDataGrid } from "@/components/data-grids/route-op
 import { RouteOptimizerOspfPreviewDataGrid } from "@/components/data-grids/route-optimizer-ospf-preview-data-grid"
 import { FormToggle } from "@/components/form-kit"
 import { Frame, FramePanel } from "@/components/reui/frame"
-import { IconTile } from "@/components/reui/icon-tile"
+import { KpiStatGrid } from "@/components/reui-kit/kpi-stat-grid"
 import { OpsPanel } from "@/components/ops-panel"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
@@ -589,32 +589,25 @@ export default function RouteOptimizerPage() {
         label: "Home роутеров",
         value: homeCount,
         sub: `${wanCount} WAN-аплинков`,
-        icon: <MonitorIcon className="size-4 text-muted-foreground" />,
+        icon: <MonitorIcon className="size-4" />,
       },
       {
         label: "JumpHost",
         value: jh.length,
         sub: jhSub,
-        icon: <ServerIcon className="size-4 text-violet-400" />,
+        icon: <ServerIcon className="size-4" />,
       },
       {
         label: "Exit Node",
         value: ex.length,
         sub: exSub,
-        icon: <NetworkIcon className="size-4 text-emerald-500" />,
+        icon: <NetworkIcon className="size-4" />,
       },
       {
         label: "Переключений",
         value: totalSwitches,
         sub: totalSwitches > 0 ? "требуют применения" : "всё оптимально",
-        icon: (
+        icon: <ZapIcon className="size-4" />,
-          <ZapIcon
-            className={cn(
-              "size-4",
-              totalSwitches > 0 ? "text-amber-500" : "text-muted-foreground",
-            )}
-          />
-        ),
       },
     ]
   }, [useLiveData, data, liveJumpHosts, liveExitNodes, totalSwitches])
@@ -762,23 +755,24 @@ export default function RouteOptimizerPage() {
             )}
           </div>
 
-          {/* Stats chips */}
+          <KpiStatGrid
-          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+            aria-label="Сводка оптимизатора"
-            {statsChips.map((s) => (
+            items={statsChips.map((s, i) => ({
-              <Frame key={s.label} className="h-full">
+              id: `ro-${i}`,
-                <FramePanel className="relative isolate flex h-full items-start gap-3">
+              label: s.label,
-                  <IconTile variant="elevated" aria-hidden="true" className="size-10.5 text-muted-foreground">
+              value: s.value,
-                    {s.icon}
+              hint: s.sub,
-                  </IconTile>
+              icon: s.icon,
-                  <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+              iconClassName: s.label === "Переключений" && totalSwitches > 0
-                    <p className="text-muted-foreground text-sm font-medium">{s.label}</p>
+                ? "text-warning"
-                    <p className="text-xl leading-none font-bold tabular-nums">{s.value}</p>
+                : s.label === "Exit Node"
-                    <p className="text-[10px] text-muted-foreground">{s.sub}</p>
+                  ? "text-success"
-                  </div>
+                  : s.label === "JumpHost"
-                </FramePanel>
+                    ? "text-primary"
-              </Frame>
+                    : "text-muted-foreground",
-            ))}
+              variant: s.label === "Переключений" && totalSwitches > 0 ? "warning" as const : "default" as const,
-          </div>
+            }))}
+          />
 
           {error && (
             <div className="flex items-center gap-2 rounded-lg border border-destructive/30 bg-destructive/10 px-4 py-2.5 text-sm text-destructive">

app/(main)/servers/page.tsx

@@ -27,8 +27,7 @@ import {
 import { useDataSource } from "@/lib/data-source"
 import { Flag } from "@/components/flag"
 import { cn } from "@/lib/utils"
-import { Frame, FramePanel } from "@/components/reui/frame"
+import { KpiStatGrid } from "@/components/reui-kit/kpi-stat-grid"
-import { IconTile } from "@/components/reui/icon-tile"
 import { DataPageCard } from "@/components/data-page-card"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
@@ -491,27 +490,39 @@ export default function ServersPage() {
       <div className="flex-1 overflow-y-auto p-6">
         <div className="flex flex-col gap-5">
 
-          {/* Stats */}
+          <KpiStatGrid
-          <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
+            aria-label="Сводка серверов"
-            {[
+            items={[
-              { label: "Всего серверов",  value: counts.all,          icon: <ServerIcon  className="size-4" />, iconClass: "text-muted-foreground" },
+              {
-              { label: "Онлайн",          value: counts.online,        icon: <CheckCircleIcon className="size-4" />, iconClass: "text-[var(--status-online-fg)]" },
+                id: "all",
-              { label: "JH + Exit Node",  value: counts["jump-host"] + counts["exit-node"], icon: <NetworkIcon className="size-4" />, iconClass: "text-muted-foreground" },
+                label: "Всего серверов",
-              { label: "Home Router",     value: counts["home-router"],icon: <HomeIcon    className="size-4" />, iconClass: "text-muted-foreground" },
+                value: counts.all,
-            ].map(s => (
+                icon: <ServerIcon className="size-4" />,
-              <Frame key={s.label} className="h-full">
+                iconClassName: "text-muted-foreground",
-                <FramePanel className="relative isolate flex h-full items-start gap-3">
+              },
-                  <IconTile variant="elevated" aria-hidden="true" className={cn("size-10.5", s.iconClass)}>
+              {
-                    {s.icon}
+                id: "online",
-                  </IconTile>
+                label: "Онлайн",
-                  <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+                value: counts.online,
-                    <p className="text-muted-foreground text-sm font-medium">{s.label}</p>
+                icon: <CheckCircleIcon className="size-4" />,
-                    <p className="text-2xl leading-none font-bold tabular-nums">{s.value}</p>
+                iconClassName: "text-success",
-                  </div>
+              },
-                </FramePanel>
+              {
-              </Frame>
+                id: "jh-en",
-            ))}
+                label: "JH + Exit Node",
-          </div>
+                value: counts["jump-host"] + counts["exit-node"],
+                icon: <NetworkIcon className="size-4" />,
+                iconClassName: "text-muted-foreground",
+              },
+              {
+                id: "home",
+                label: "Home Router",
+                value: counts["home-router"],
+                icon: <HomeIcon className="size-4" />,
+                iconClassName: "text-muted-foreground",
+              },
+            ]}
+          />
 
           {/* Table */}
           <DataPageCard>

app/(main)/terminal/page.tsx

@@ -4,9 +4,22 @@ import { useState, useRef, useEffect, useCallback, useMemo } from "react"
 import { PageHeader } from "@/components/page-header"
 import { Button } from "@/components/ui/button"
 import { servers as mockServers } from "@/lib/data"
-import { Flag } from "@/components/flag"
+import type { ServerStatus } from "@/lib/data"
 import { useDataSource } from "@/lib/data-source"
 import { requestJson } from "@/shared/api/http-client"
+import { Badge } from "@/components/reui/badge"
+import {
+  Frame,
+  FrameFooter,
+  FrameHeader,
+  FramePanel,
+  FrameTitle,
+} from "@/components/reui/frame"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { ServerRailLayout, ServerRailMobileButton } from "@/components/server-rail-layout"
+import {
+  type ServerTileItem,
+} from "@/components/server-tile-rail"
 import {
   TrashIcon, RefreshCwIcon, CircleIcon, Loader2Icon,
 } from "lucide-react"
@@ -492,6 +505,64 @@ export default function TerminalPage() {
 
   const termKey = `${selectedUid}-${refreshKey}-${isLive ? "live" : "mock"}`
 
+  const railItems = useMemo<ServerTileItem[]>(() => {
+    return termServers.map((s) => ({
+      id: s.uid,
+      name: s.name,
+      host: s.host,
+      country: s.country || undefined,
+      status: (s.status ?? undefined) as ServerStatus | undefined,
+      enabled: s.enabled,
+      selectable: s.enabled && s.status !== "offline",
+      title: [s.name, s.host].filter(Boolean).join(" · "),
+    }))
+  }, [termServers])
+
+  const handleSelectServer = useCallback((id: string) => {
+    setSelectedUid(id)
+    setRefreshKey((k) => k + 1)
+  }, [])
+
+  const railHeaderRight = isLive && !serversLoading
+    ? <Badge variant="success-light" size="xs">LIVE</Badge>
+    : undefined
+
+  function QuickCmds() {
+    return (
+      <Frame dense spacing="sm" className="min-h-0 shrink-0">
+        <FramePanel className="flex max-h-56 flex-col gap-0 p-0">
+          <FrameHeader className="border-b px-3 py-2">
+            <FrameTitle className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+              Быстрые команды
+            </FrameTitle>
+          </FrameHeader>
+          <ScrollArea className="min-h-0 flex-1">
+            <div className="flex flex-col gap-0.5 p-1.5">
+              {QUICK_CMDS.map(({ cmd, label }) => (
+                <button
+                  key={cmd}
+                  type="button"
+                  className="truncate rounded-md px-2 py-1.5 text-left font-mono text-[11px] text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+                  onClick={() => injectCommand(cmd)}
+                  title={cmd}
+                >
+                  {label}
+                </button>
+              ))}
+            </div>
+          </ScrollArea>
+          <FrameFooter className="border-t text-[10px] text-muted-foreground/70">
+            <p>↑↓ — история команд</p>
+            <p>Ctrl+L — очистить экран</p>
+            {isLive
+              ? <p className="text-info">Команды выполняются на роутере</p>
+              : <p>Режим: mock-данные</p>}
+          </FrameFooter>
+        </FramePanel>
+      </Frame>
+    )
+  }
+
   function injectCommand(cmd: string) {
     const el = document.querySelector<HTMLInputElement>(".terminal-input-active")
     if (!el) return
@@ -502,108 +573,39 @@ export default function TerminalPage() {
   }
 
   return (
-    <div className="flex flex-col h-full">
+    <ServerRailLayout
-      <PageHeader
+      items={railItems}
-        crumbs={[{ label: "Инструменты" }, { label: "Терминал" }]}
+      selectedId={selected?.uid ?? selectedUid}
-        actions={
+      onSelect={handleSelectServer}
-          <Button variant="outline" size="sm" onClick={() => {
+      showAll={false}
-            setRefreshKey(k => k + 1)
+      showCount={false}
-            if (isLive) setSelectedUid("")
+      showType={false}
-          }}>
+      headerRight={railHeaderRight}
-            <RefreshCwIcon className="size-4" />Переподключить
+      loading={serversLoading}
-          </Button>
+      extra={<QuickCmds />}
-        }
+      contentClassName="overflow-hidden p-3 md:p-4"
-      />
+      header={
-
+        <PageHeader
-      <div className="flex-1 overflow-hidden p-6">
+          crumbs={[{ label: "Инструменты" }, { label: "Терминал" }]}
-        <div className="grid grid-cols-[220px_1fr] gap-5 h-full">
+          actions={
-
+            <>
-          {/* ── sidebar ── */}
+              <ServerRailMobileButton />
-          <div className="flex flex-col gap-4 overflow-y-auto min-h-0">
+              <Button
-
+                variant="outline"
-            {/* server picker */}
+                size="sm"
-            <div>
+                onClick={() => {
-              <div className="flex items-center gap-2 mb-2">
+                  setRefreshKey((k) => k + 1)
-                <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Узел</p>
+                  if (isLive) setSelectedUid("")
-                {isLive && serversLoading && (
+                }}
-                  <Loader2Icon className="size-3 animate-spin text-muted-foreground" />
+              >
-                )}
+                <RefreshCwIcon className="size-4" />
-                {isLive && !serversLoading && (
+                Переподключить
-                  <span className="inline-flex items-center gap-1 text-[10px] font-medium rounded border border-emerald-500/30 bg-emerald-500/10 text-emerald-400 px-1.5 py-0.5">
+              </Button>
-                    <span className="size-1 rounded-full bg-emerald-400" />LIVE
+            </>
-                  </span>
+          }
-                )}
+        />
-              </div>
+      }
-
+    >
-              {isLive && !serversLoading && liveServers.length === 0 && (
-                <p className="text-xs text-muted-foreground px-2.5">
-                  Нет доступных серверов
-                </p>
-              )}
-
-              <div className="space-y-1">
-                {termServers.map(s => {
-                  const isOffline  = s.status === "offline"
-                  const isSelected = s.uid === selectedUid
-                  return (
-                    <button
-                      key={s.uid}
-                      disabled={isOffline || !s.enabled}
-                      onClick={() => { setSelectedUid(s.uid); setRefreshKey(k => k + 1) }}
-                      className={cn(
-                        "w-full text-left rounded-md px-2.5 py-2 text-xs transition-colors",
-                        "flex items-center gap-2",
-                        isSelected
-                          ? "bg-primary text-primary-foreground"
-                          : "hover:bg-muted",
-                        (isOffline || !s.enabled) && "opacity-40 cursor-not-allowed",
-                      )}
-                    >
-                      <span className={cn(
-                        "inline-block size-1.5 rounded-full shrink-0",
-                        s.status === "online"   ? "bg-emerald-500" :
-                        s.status === "degraded" ? "bg-amber-400"   :
-                        s.status === null       ? "bg-sky-400"     : "bg-red-500",
-                      )} />
-                      {s.country && <Flag code={s.country} />}
-                      <span className="truncate font-mono">{s.name}</span>
-                    </button>
-                  )
-                })}
-              </div>
-            </div>
-
-            {/* quick commands */}
-            <div>
-              <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
-                Быстрые команды
-              </p>
-              <div className="space-y-1">
-                {QUICK_CMDS.map(({ cmd, label }) => (
-                  <button
-                    key={cmd}
-                    className="w-full text-left rounded-md px-2.5 py-1.5 text-[11px] font-mono text-muted-foreground hover:bg-muted hover:text-foreground transition-colors truncate block"
-                    onClick={() => injectCommand(cmd)}
-                    title={cmd}
-                  >
-                    {label}
-                  </button>
-                ))}
-              </div>
-            </div>
-
-            {/* hints */}
-            <div className="mt-auto text-[10px] text-muted-foreground/50 space-y-0.5 px-0.5">
-              <p>↑↓ — история команд</p>
-              <p>Ctrl+L — очистить экран</p>
-              {isLive
-                ? <p className="text-sky-400/60">Команды выполняются на роутере</p>
-                : <p>Режим: mock-данные</p>
-              }
-            </div>
-          </div>
-
-          {/* ── terminal ── */}
           {selected ? (
             <Terminal
               key={termKey}
@@ -612,12 +614,10 @@ export default function TerminalPage() {
               backendUrl={backendUrl}
             />
           ) : (
-            <div className="flex items-center justify-center bg-[#0d1117] rounded-lg border border-[#30363d] text-[#8b949e] text-sm font-mono">
+            <div className="flex h-full items-center justify-center rounded-lg border border-[#30363d] bg-[#0d1117] font-mono text-sm text-[#8b949e]">
               {serversLoading ? "Загрузка серверов…" : "Выберите сервер"}
             </div>
           )}
-        </div>
+    </ServerRailLayout>
-      </div>
-    </div>
   )
 }

app/(main)/uptime/page.tsx

@@ -4,7 +4,7 @@ import { useState, useMemo, useEffect, useRef, useCallback } from "react"
 import { PageHeader } from "@/components/page-header"
 import { FormField, FormToggle, SegmentedControl } from "@/components/form-kit"
 import { Frame, FramePanel } from "@/components/reui/frame"
-import { IconTile } from "@/components/reui/icon-tile"
+import { KpiStatGrid } from "@/components/reui-kit/kpi-stat-grid"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
@@ -961,29 +961,58 @@ function ResourcesTab({ resources, serversList, liveApi }: { resources: ServerRe
         </Alert>
       )}
 
-      {/* ── KPI summary ───────────────────────────────────────────────────── */}
+      <KpiStatGrid
-      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
+        aria-label="Сводка ресурсов"
-        {[
+        items={[
-          { icon: <ServerIcon      className="size-4 text-muted-foreground" />, label: String(rows.length), sub: "серверов всего",  color: "text-foreground" },
+          {
-          { icon: <CpuIcon         className="size-4" />,                       label: `${avgCpu}%`,         sub: "средний CPU",     color: resPctColor(avgCpu) },
+            id: "servers",
-          { icon: <HardDriveIcon   className="size-4" />,                       label: `${avgRam}%`,         sub: "средний RAM",     color: resPctColor(avgRam) },
+            label: "Серверов всего",
-          { icon: <AlertCircleIcon className="size-4" />,                       label: String(highCpu),      sub: "CPU > 85%",       color: highCpu > 0 ? "text-red-500"    : "text-muted-foreground" },
+            value: rows.length,
-          { icon: <AlertCircleIcon className="size-4" />,                       label: String(highRam),      sub: "RAM > 85%",       color: highRam > 0 ? "text-red-500"    : "text-muted-foreground" },
+            icon: <ServerIcon className="size-4" />,
-          { icon: <AlertCircleIcon className="size-4" />,                       label: String(highHdd),      sub: "Диск > 85%",      color: highHdd > 0 ? "text-amber-500"  : "text-muted-foreground" },
+            iconClassName: "text-muted-foreground",
-        ].map(kpi => (
+          },
-          <Frame key={kpi.sub} className="h-full">
+          {
-            <FramePanel className="relative isolate flex h-full items-start gap-3">
+            id: "cpu",
-              <IconTile variant="elevated" aria-hidden="true" className={cn("size-10.5", kpi.color)}>
+            label: "Средний CPU",
-                {kpi.icon}
+            value: `${avgCpu}%`,
-              </IconTile>
+            icon: <CpuIcon className="size-4" />,
-              <div className="min-w-0 flex flex-col gap-0.5">
+            iconClassName: avgCpu >= 85 ? "text-destructive" : avgCpu >= 70 ? "text-warning" : "text-success",
-                <p className={cn("text-xl leading-none font-bold tabular-nums", kpi.color)}>{kpi.label}</p>
+            variant: avgCpu >= 85 ? "destructive" : avgCpu >= 70 ? "warning" : "default",
-                <p className="text-[11px] text-muted-foreground">{kpi.sub}</p>
+          },
-              </div>
+          {
-            </FramePanel>
+            id: "ram",
-          </Frame>
+            label: "Средний RAM",
-        ))}
+            value: `${avgRam}%`,
-      </div>
+            icon: <HardDriveIcon className="size-4" />,
+            iconClassName: avgRam >= 85 ? "text-destructive" : avgRam >= 70 ? "text-warning" : "text-success",
+            variant: avgRam >= 85 ? "destructive" : avgRam >= 70 ? "warning" : "default",
+          },
+          {
+            id: "high-cpu",
+            label: "CPU > 85%",
+            value: highCpu,
+            icon: <AlertCircleIcon className="size-4" />,
+            iconClassName: highCpu > 0 ? "text-destructive" : "text-muted-foreground",
+            variant: highCpu > 0 ? "destructive" : "default",
+          },
+          {
+            id: "high-ram",
+            label: "RAM > 85%",
+            value: highRam,
+            icon: <AlertCircleIcon className="size-4" />,
+            iconClassName: highRam > 0 ? "text-destructive" : "text-muted-foreground",
+            variant: highRam > 0 ? "destructive" : "default",
+          },
+          {
+            id: "high-hdd",
+            label: "Диск > 85%",
+            value: highHdd,
+            icon: <AlertCircleIcon className="size-4" />,
+            iconClassName: highHdd > 0 ? "text-warning" : "text-muted-foreground",
+            variant: highHdd > 0 ? "warning" : "default",
+          },
+        ]}
+      />
 
       {/* ── Table ─────────────────────────────────────────────────────────── */}
       <DataPageCard>
@@ -2022,28 +2051,42 @@ export default function UptimePage() {
               const maxTx     = doneRuns.length ? Math.max(...doneRuns.map(r => r.txAvgMbps)) : null
               const maxRx     = doneRuns.length ? Math.max(...doneRuns.map(r => r.rxAvgMbps)) : null
               return (
-                <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 px-6 py-4 border-b bg-muted/10 shrink-0">
+                <div className="px-6 py-4 border-b bg-muted/10 shrink-0">
-                  {[
+                  <KpiStatGrid
-                    { label: "Speed-пробы",    value: speedProbes.length,           unit: "шт",   color: "" },
+                    aria-label="Сводка speed-проб"
-                    { label: "Тестов выполнено", value: doneRuns.length,             unit: "run",  color: "" },
+                    items={[
-                    { label: "Макс TX",         value: maxTx != null ? `${maxTx}` : "—", unit: maxTx != null ? "Мбит/с" : "", color: "text-[var(--chart-tx)]" },
+                      {
-                    { label: "Макс RX",         value: maxRx != null ? `${maxRx}` : "—", unit: maxRx != null ? "Мбит/с" : "", color: "text-[var(--chart-rx)]" },
+                        id: "probes",
-                  ].map(k => (
+                        label: "Speed-пробы",
-                    <Frame key={k.label} className="h-full">
+                        value: `${speedProbes.length} шт`,
-                      <FramePanel className="flex flex-col gap-0.5">
+                        icon: <ArrowUpDownIcon className="size-4" />,
-                        <p className="text-muted-foreground text-sm font-medium">{k.label}</p>
+                        iconClassName: "text-muted-foreground",
-                        <div className="flex items-baseline gap-1">
+                      },
-                          <span className={cn("text-2xl leading-none font-bold tabular-nums", k.color)}>{k.value}</span>
+                      {
-                          {k.unit && <span className="text-xs text-muted-foreground">{k.unit}</span>}
+                        id: "runs",
-                        </div>
+                        label: "Тестов выполнено",
-                        {runningCnt > 0 && k.label === "Тестов выполнено" && (
+                        value: `${doneRuns.length} run`,
-                          <p className="text-[11px] text-[var(--status-degraded-fg)] flex items-center gap-1 mt-0.5">
+                        hint: runningCnt > 0 ? `${runningCnt} выполняется` : undefined,
-                            <RefreshCwIcon className="size-2.5 animate-spin" />{runningCnt} выполняется
+                        icon: <PlayIcon className="size-4" />,
-                          </p>
+                        iconClassName: runningCnt > 0 ? "text-warning" : "text-muted-foreground",
-                        )}
+                        variant: runningCnt > 0 ? "warning" : "default",
-                      </FramePanel>
+                      },
-                    </Frame>
+                      {
-                  ))}
+                        id: "max-tx",
+                        label: "Макс TX",
+                        value: maxTx != null ? `${maxTx} Мбит/с` : "—",
+                        icon: <ArrowUpIcon className="size-4" />,
+                        iconClassName: "text-info",
+                      },
+                      {
+                        id: "max-rx",
+                        label: "Макс RX",
+                        value: maxRx != null ? `${maxRx} Мбит/с` : "—",
+                        icon: <ArrowDownIcon className="size-4" />,
+                        iconClassName: "text-success",
+                      },
+                    ]}
+                  />
                 </div>
               )
             })()}

app/(main)/users/page.tsx

@@ -0,0 +1,297 @@
+"use client"
+
+import { useCallback, useEffect, useState } from "react"
+import { PageHeader } from "@/components/page-header"
+import { DataPageCard } from "@/components/data-page-card"
+import { UsersDataGrid } from "@/components/data-grids/users-data-grid"
+import { KpiStatGrid } from "@/components/reui-kit/kpi-stat-grid"
+import { UserSheet } from "@/components/users/user-sheet"
+import { Button } from "@/components/ui/button"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
+import { servers as mockServers } from "@/lib/data"
+import { useDataSource } from "@/lib/data-source"
+import {
+  ALL_SECTIONS,
+  INIT_USERS,
+  bindingDiffKey,
+  userInitials,
+  type AppUser,
+  type AppUserForm,
+  type UserServerOption,
+} from "@/lib/users"
+import { listServers } from "@/shared/api/servers"
+import {
+  createAppUser,
+  createUserBinding,
+  deleteAppUser,
+  deleteUserBinding,
+  listAppUsers,
+  updateAppUser,
+} from "@/shared/api/users"
+import { ApiClientError } from "@/shared/api/http-client"
+import { toast } from "sonner"
+import {
+  CableIcon,
+  PlusIcon,
+  TrashIcon,
+  UserCheckIcon,
+  UsersIcon,
+} from "lucide-react"
+
+function toServerOptionsFromMock(): UserServerOption[] {
+  return mockServers.map((s) => ({
+    id: s.id,
+    name: s.name,
+    host: s.host,
+    site: s.site,
+    country: s.country,
+    status: s.status,
+  }))
+}
+
+export default function UsersPage() {
+  const { mode, backendUrl } = useDataSource()
+  const isLive = mode === "live"
+
+  const [users, setUsers] = useState<AppUser[]>(INIT_USERS)
+  const [serverOptions, setServerOptions] = useState<UserServerOption[]>(toServerOptionsFromMock)
+  const [loading, setLoading] = useState(false)
+  const [saving, setSaving] = useState(false)
+  const [sheetOpen, setSheetOpen] = useState(false)
+  const [editUser, setEditUser] = useState<AppUser | null>(null)
+  const [deleteTarget, setDeleteTarget] = useState<AppUser | null>(null)
+
+  const loadLive = useCallback(async () => {
+    setLoading(true)
+    try {
+      const [list, srvs] = await Promise.all([
+        listAppUsers(backendUrl),
+        listServers(backendUrl),
+      ])
+      setUsers(list)
+      setServerOptions(srvs.map((s) => ({
+        id: String(s.id),
+        name: s.name || s.host,
+        host: s.host,
+        site: s.site,
+        country: s.country,
+        status: s.status,
+      })))
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Не удалось загрузить пользователей")
+    } finally {
+      setLoading(false)
+    }
+  }, [backendUrl])
+
+  useEffect(() => {
+    if (!isLive) {
+      setUsers(INIT_USERS)
+      setServerOptions(toServerOptionsFromMock())
+      return
+    }
+    void loadLive()
+  }, [isLive, loadLive])
+
+  const boundCount = users.reduce((n, u) => n + u.bindings.length, 0)
+  const activeCount = users.filter((u) => u.active).length
+
+  const applyBindingsDiff = async (userId: string, next: AppUserForm["bindings"], prev: AppUser["bindings"]) => {
+    const nextKeys = new Set(next.map(bindingDiffKey))
+    const prevKeys = new Map(prev.map((b) => [bindingDiffKey(b), b] as const))
+    for (const b of prev) {
+      if (!nextKeys.has(bindingDiffKey(b))) {
+        await deleteUserBinding(backendUrl, userId, b.id)
+      }
+    }
+    for (const b of next) {
+      if (!prevKeys.has(bindingDiffKey(b))) {
+        await createUserBinding(backendUrl, userId, {
+          serverId: Number(b.serverId),
+          interfaceName: b.interfaceName,
+          interfaceType: b.interfaceType,
+          peerPublicKey: b.peerPublicKey,
+          peerName: b.peerName,
+          comment: b.comment,
+        })
+      }
+    }
+  }
+
+  const handleSave = async (form: AppUserForm) => {
+    if (!isLive) {
+      if (!editUser) {
+        const id = `u${Date.now()}`
+        const created: AppUser = {
+          id,
+          ...form,
+          last: "только что",
+          avatar: userInitials(form.name),
+          bindings: form.bindings.map((b, i) => ({ ...b, id: `b${id}-${i}`, userId: id })),
+        }
+        setUsers((prev) => [...prev, created])
+      } else {
+        setUsers((prev) => prev.map((u) => u.id === editUser.id ? { ...u, ...form, avatar: userInitials(form.name) } : u))
+      }
+      setSheetOpen(false)
+      toast.success(editUser ? "Пользователь сохранён" : "Пользователь создан")
+      return
+    }
+
+    setSaving(true)
+    try {
+      if (!editUser) {
+        const created = await createAppUser(backendUrl, {
+          name: form.name,
+          login: form.login,
+          email: form.email,
+          role: form.role,
+          active: form.active,
+          avatar: userInitials(form.name),
+          sections: form.sections,
+          servers: form.servers,
+        })
+        await applyBindingsDiff(created.id, form.bindings, [])
+        await loadLive()
+      } else {
+        await updateAppUser(backendUrl, editUser.id, {
+          name: form.name,
+          login: form.login,
+          email: form.email,
+          role: form.role,
+          active: form.active,
+          avatar: userInitials(form.name),
+          sections: form.sections,
+          servers: form.servers,
+        })
+        await applyBindingsDiff(editUser.id, form.bindings, editUser.bindings)
+        await loadLive()
+      }
+      setSheetOpen(false)
+      toast.success(editUser ? "Пользователь сохранён" : "Пользователь создан")
+    } catch (err) {
+      const msg = err instanceof ApiClientError ? err.message : err instanceof Error ? err.message : "Ошибка сохранения"
+      toast.error(msg)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleDelete = async () => {
+    if (!deleteTarget) return
+    if (!isLive) {
+      setUsers((prev) => prev.filter((u) => u.id !== deleteTarget.id))
+      setDeleteTarget(null)
+      toast.success("Пользователь удалён")
+      return
+    }
+    try {
+      await deleteAppUser(backendUrl, deleteTarget.id)
+      setDeleteTarget(null)
+      await loadLive()
+      toast.success("Пользователь удалён")
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Не удалось удалить")
+    }
+  }
+
+  return (
+    <div className="flex flex-col h-full">
+      <PageHeader
+        crumbs={[{ label: "Управление" }, { label: "Пользователи" }]}
+        actions={
+          <Button size="sm" onClick={() => { setEditUser(null); setSheetOpen(true) }}>
+            <PlusIcon className="size-4" />Пригласить
+          </Button>
+        }
+      />
+
+      <div className="flex-1 overflow-y-auto p-6 flex flex-col gap-5">
+        {/* Preview: https://reui.io/preview/base/stats-12 · https://reui.io/docs/components/base/icon-tile */}
+        <KpiStatGrid
+          aria-label="Сводка пользователей"
+          items={[
+            {
+              id: "all",
+              label: "Пользователи",
+              value: users.length,
+              icon: <UsersIcon className="size-4" />,
+              iconClassName: "text-muted-foreground",
+            },
+            {
+              id: "active",
+              label: "Активные",
+              value: activeCount,
+              icon: <UserCheckIcon className="size-4" />,
+              iconClassName: "text-success",
+            },
+            {
+              id: "ifaces",
+              label: "Привязанные ifaces",
+              value: boundCount,
+              icon: <CableIcon className="size-4" />,
+              iconClassName: "text-info",
+            },
+          ]}
+        />
+
+        {/* Preview: https://reui.io/preview/base/data-grid-filtering-2 · https://reui.io/docs/components/base/data-grid · https://reui.io/docs/components/base/frame */}
+        <DataPageCard>
+          <UsersDataGrid
+            users={users}
+            serversCount={serverOptions.length}
+            allSectionsCount={ALL_SECTIONS.length}
+            isLoading={loading}
+            onEdit={(u) => { setEditUser(u); setSheetOpen(true) }}
+            onDelete={setDeleteTarget}
+          />
+        </DataPageCard>
+      </div>
+
+      <UserSheet
+        key={sheetOpen ? (editUser?.id ?? "create") : "closed"}
+        open={sheetOpen}
+        user={editUser}
+        users={users}
+        servers={serverOptions}
+        isLive={isLive}
+        backendUrl={backendUrl}
+        saving={saving}
+        onSave={(f) => { void handleSave(f) }}
+        onClose={() => setSheetOpen(false)}
+      />
+
+      {deleteTarget && (
+        <AlertDialog open={!!deleteTarget} onOpenChange={(v) => { if (!v) setDeleteTarget(null) }}>
+          <AlertDialogContent size="default">
+            <AlertDialogHeader>
+              <AlertDialogMedia className="bg-destructive/10 text-destructive">
+                <TrashIcon />
+              </AlertDialogMedia>
+              <AlertDialogTitle>Удалить пользователя?</AlertDialogTitle>
+              <AlertDialogDescription>
+                {deleteTarget.name} · {deleteTarget.email || deleteTarget.login}. Привязки интерфейсов будут удалены.
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel onClick={() => setDeleteTarget(null)}>Отмена</AlertDialogCancel>
+              <AlertDialogAction variant="destructive" onClick={() => { void handleDelete() }}>
+                Удалить
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      )}
+    </div>
+  )
+}

app/(main)/vxlan/page.tsx

@@ -4,22 +4,16 @@ import { useMemo, useState } from "react"
 import { PageHeader } from "@/components/page-header"
 import { vxlanTunnels, servers } from "@/lib/data"
 import type { VxlanTunnel } from "@/lib/data"
-import { Frame, FramePanel } from "@/components/reui/frame"
+import { KpiStatGrid } from "@/components/reui-kit/kpi-stat-grid"
-import { IconTile } from "@/components/reui/icon-tile"
 import { OpsPanel } from "@/components/ops-panel"
 import { DataPageCard } from "@/components/data-page-card"
 import { DataPageToolbar } from "@/components/data-page-toolbar"
 import { VxlanDataGrid } from "@/components/data-grids/vxlan-data-grid"
 import { Button } from "@/components/ui/button"
-import { cn } from "@/lib/utils"
 import {
-  NetworkIcon, PlusIcon, CopyIcon, CheckIcon,
+  NetworkIcon, PlusIcon, CodeXmlIcon, LayersIcon,
-  CodeXmlIcon, LayersIcon,
 } from "lucide-react"
-import {
+import { CodeExportSheet } from "@/components/reui-kit/code-export-sheet"
-  Sheet, SheetContent, SheetHeader, SheetTitle,
-  SheetDescription, SheetFooter, SheetClose,
-} from "@/components/ui/sheet"
 
 // ─── helpers ──────────────────────────────────────────────────────────────────
 
@@ -70,57 +64,23 @@ function generateVxlanRsc(t: VxlanTunnel): string {
 function ExportSheet({ open, tunnel, onClose }: {
   open: boolean; tunnel: VxlanTunnel | null; onClose: () => void
 }) {
-  const [copied, setCopied] = useState(false)
   const code = useMemo(() => tunnel ? generateVxlanRsc(tunnel) : "", [tunnel])
 
-  function handleCopy() {
-    navigator.clipboard.writeText(code).then(() => {
-      setCopied(true); setTimeout(() => setCopied(false), 2000)
-    })
-  }
-
   return (
-    <Sheet open={open} onOpenChange={(v) => { if (!v) onClose() }}>
+    <CodeExportSheet
-      <SheetContent className="flex flex-col overflow-hidden p-0 gap-0 sm:max-w-2xl">
+      open={open}
-        <SheetHeader className="shrink-0 px-6 pt-5 pb-4 border-b">
+      onClose={onClose}
-          <div className="flex items-start justify-between gap-4">
+      title="Экспорт VXLAN"
-            <div>
+      description="RouterOS 7.x · /interface/vxlan + vteps"
-              <SheetTitle>Экспорт VXLAN</SheetTitle>
+      formats={[
-              <SheetDescription>RouterOS 7.x · /interface/vxlan + vteps</SheetDescription>
+        {
-            </div>
+          id: "rsc",
-            <Button variant="outline" size="sm" className="shrink-0" onClick={handleCopy}>
+          label: "MikroTik .rsc",
-              {copied ? <><CheckIcon className="size-3.5 text-emerald-500" />Скопировано</> : <><CopyIcon className="size-3.5" />Копировать</>}
+          filename: `${tunnel?.name ?? "vxlan"}.rsc`,
-            </Button>
+          code,
-          </div>
+        },
-        </SheetHeader>
+      ]}
-        <div className="flex-1 overflow-y-auto">
+    />
-          <pre className="px-6 py-5 text-[12px] font-mono leading-relaxed text-foreground/85 whitespace-pre select-all">
-            {code.split("\n").map((line, i) => {
-              const isComment = line.startsWith("#")
-              const isCmd = /^\//.test(line.trimStart())
-              const isParam = /^\s+[a-z]/.test(line)
-              return (
-                <span key={i} className={
-                  isComment ? "text-muted-foreground"
-                  : isCmd    ? "text-sky-400"
-                  : isParam  ? "text-violet-300"
-                  : "text-foreground"
-                }>
-                  {line}{"\n"}
-                </span>
-              )
-            })}
-          </pre>
-        </div>
-        <SheetFooter className="shrink-0 px-6 py-4 border-t flex-row gap-2">
-          <SheetClose render={<Button variant="outline" className="flex-1" />}>Закрыть</SheetClose>
-          <Button className="flex-1" onClick={handleCopy}>
-            {copied ? <CheckIcon className="size-4" /> : <CopyIcon className="size-4" />}
-            {copied ? "Скопировано" : "Копировать .rsc"}
-          </Button>
-        </SheetFooter>
-      </SheetContent>
-    </Sheet>
   )
 }
 
@@ -157,27 +117,39 @@ export default function VxlanPage() {
       <div className="flex-1 overflow-y-auto p-6">
         <div className="flex flex-col gap-5">
 
-          {/* KPI */}
+          <KpiStatGrid
-          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+            aria-label="Сводка VXLAN"
-            {[
+            items={[
-              { label: "Туннелей",     value: vxlanTunnels.length, icon: <NetworkIcon className="size-4 text-muted-foreground" /> },
+              {
-              { label: "Активных",     value: upCount,             icon: <LayersIcon className="size-4 text-emerald-500" /> },
+                id: "tunnels",
-              { label: "Уникальных VNI", value: vnis,              icon: <LayersIcon className="size-4 text-sky-400" /> },
+                label: "Туннелей",
-              { label: "Серверов",     value: new Set(vxlanTunnels.map((t) => t.serverId)).size, icon: <NetworkIcon className="size-4 text-violet-400" /> },
+                value: vxlanTunnels.length,
-            ].map((s) => (
+                icon: <NetworkIcon className="size-4" />,
-              <Frame key={s.label} className="h-full">
+                iconClassName: "text-muted-foreground",
-                <FramePanel className="relative isolate flex h-full items-start gap-3">
+              },
-                  <IconTile variant="elevated" aria-hidden="true" className="size-10.5 text-muted-foreground">
+              {
-                    {s.icon}
+                id: "up",
-                  </IconTile>
+                label: "Активных",
-                  <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+                value: upCount,
-                    <p className="text-muted-foreground text-sm font-medium">{s.label}</p>
+                icon: <LayersIcon className="size-4" />,
-                    <p className="text-2xl leading-none font-bold tabular-nums">{s.value}</p>
+                iconClassName: "text-success",
-                  </div>
+              },
-                </FramePanel>
+              {
-              </Frame>
+                id: "vni",
-            ))}
+                label: "Уникальных VNI",
-          </div>
+                value: vnis,
+                icon: <LayersIcon className="size-4" />,
+                iconClassName: "text-info",
+              },
+              {
+                id: "servers",
+                label: "Серверов",
+                value: new Set(vxlanTunnels.map((t) => t.serverId)).size,
+                icon: <NetworkIcon className="size-4" />,
+                iconClassName: "text-primary",
+              },
+            ]}
+          />
 
           {/* Info banner */}
           <div className="flex items-start gap-3 rounded-lg bg-sky-500/5 border border-sky-500/20 px-4 py-3 text-sm">

app/(main)/wireguard/page.tsx

@@ -10,10 +10,30 @@ import {
   WireguardDataGrid,
   type WgIfaceWithServer,
 } from "@/components/data-grids/wireguard-data-grid"
+import {
+  WireguardPeersGrid,
+  type WgPeerRow,
+} from "@/components/data-grids/wireguard-peers-grid"
 import { Button } from "@/components/ui/button"
-import { Frame, FramePanel } from "@/components/reui/frame"
+import {
-import { IconTile } from "@/components/reui/icon-tile"
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@/components/reui/alert"
+import { KpiStatGrid } from "@/components/reui-kit/kpi-stat-grid"
 import { OpsPanel } from "@/components/ops-panel"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
 import { useDataSource } from "@/lib/data-source"
 import { requestJson } from "@/shared/api/http-client"
 import {
@@ -31,12 +51,25 @@ import { WgCreateSheet, type WgCreateFormState } from "@/components/wireguard/wg
 import { WgImportSheet } from "@/components/wireguard/wg-import-sheet"
 import { WgExportSheet } from "@/components/wireguard/wg-export-sheet"
 import { WgPeerSheet, type WgPeerFormState } from "@/components/wireguard/wg-peer-sheet"
+import { ServerRailLayout, ServerRailMobileButton } from "@/components/server-rail-layout"
+import {
+  ALL_SERVERS_ID,
+  type ServerTileItem,
+} from "@/components/server-tile-rail"
 import { toast } from "sonner"
 import {
   ShieldCheckIcon, PlusIcon, KeyRoundIcon,
-  UsersIcon, ActivityIcon, RefreshCwIcon, UploadIcon,
+  UsersIcon, ActivityIcon, RefreshCwIcon, UploadIcon, InfoIcon,
+  Trash2Icon, CodeXmlIcon, AlertCircleIcon,
 } from "lucide-react"
 
+type WgWorkspaceTab = "interfaces" | "peers" | "cli"
+type WgStatusFilter = "all" | "up" | "down"
+type WgFailure = { serverId: string; serverName?: string; error: string }
+type PendingDelete =
+  | { kind: "iface"; iface: WgIfaceWithServer }
+  | { kind: "peer"; iface: WgIfaceWithServer; peerId: string }
+
 function collectMockInterfaces(): WgIfaceWithServer[] {
   const result: WgIfaceWithServer[] = []
   for (const srv of mockServers) {
@@ -94,7 +127,11 @@ interface BackendServer {
   name: string
   host: string
   country: string
+  type?: Server["type"]
   enabled: boolean
+  status?: Server["status"]
+  latency?: number | null
+  asn?: string
 }
 
 function mapBackendServer(s: BackendServer): Server {
@@ -106,11 +143,11 @@ function mapBackendServer(s: BackendServer): Server {
     os: "—",
     site: "",
     country: s.country || "UN",
-    asn: "",
+    asn: s.asn ?? "",
-    type: "exit-node",
+    type: s.type ?? "exit-node",
     enabled: s.enabled,
-    status: "online",
+    status: s.status ?? "online",
-    latency: null,
+    latency: s.latency ?? null,
     sessions: 0,
   }
 }
@@ -126,20 +163,31 @@ function parseEndpoint(endpoint: string): { address?: string; port?: number } {
   }
 }
 
+function peerRowId(iface: WgIfaceWithServer, peer: WgIfaceWithServer["peers"][number], index: number): string {
+  return peer.id ?? peer.rosId ?? `${iface.id}-${peer.publicKey}-${index}`
+}
+
 export default function WireGuardPage() {
   const { mode, backendUrl } = useDataSource()
   const isLive = mode === "live"
 
   const [liveIfaces, setLiveIfaces] = useState<WgIfaceWithServer[]>([])
   const [liveServers, setLiveServers] = useState<Server[]>([])
+  const [failures, setFailures] = useState<WgFailure[]>([])
   const [loading, setLoading] = useState(false)
   const [busy, setBusy] = useState(false)
 
+  const [selectedServerId, setSelectedServerId] = useState(ALL_SERVERS_ID)
+  const [workspaceTab, setWorkspaceTab] = useState<WgWorkspaceTab>("interfaces")
+  const [statusFilter, setStatusFilter] = useState<WgStatusFilter>("all")
   const [search, setSearch] = useState("")
   const [createOpen, setCreateOpen] = useState(false)
   const [importOpen, setImportOpen] = useState(false)
   const [exportIface, setExportIface] = useState<WgIfaceWithServer | null>(null)
+  const [exportInitialTab, setExportInitialTab] = useState<"rsc" | "conf" | "peer">("rsc")
+  const [exportPeerId, setExportPeerId] = useState<string | null>(null)
   const [peerIface, setPeerIface] = useState<WgIfaceWithServer | null>(null)
+  const [pendingDelete, setPendingDelete] = useState<PendingDelete | null>(null)
   const [liveExport, setLiveExport] = useState<{
     rsc?: string
     conf?: string
@@ -157,6 +205,7 @@ export default function WireGuardPage() {
       ])
       setLiveIfaces(wg.interfaces.map(dtoToRow))
       setLiveServers(servers.filter((s) => s.enabled).map(mapBackendServer))
+      setFailures(wg.failures ?? [])
       if (wg.failures?.length) {
         toast.warning(
           `Не удалось опросить: ${wg.failures.map((f) => f.serverName ?? f.serverId).join(", ")}`,
@@ -165,6 +214,7 @@ export default function WireGuardPage() {
     } catch (e) {
       toast.error(e instanceof Error ? e.message : "Ошибка загрузки WireGuard")
       setLiveIfaces([])
+      setFailures([])
     } finally {
       setLoading(false)
     }
@@ -175,6 +225,7 @@ export default function WireGuardPage() {
       queueMicrotask(() => {
         setLiveIfaces([])
         setLiveServers([])
+        setFailures([])
       })
       return
     }
@@ -186,10 +237,35 @@ export default function WireGuardPage() {
   const displayIfaces = isLive ? liveIfaces : collectMockInterfaces()
   const displayServers = isLive ? liveServers : mockServers.filter((s) => s.enabled)
 
-  const filtered = useMemo(() => {
+  const effectiveServerId =
-    if (!search) return displayIfaces
+    selectedServerId === ALL_SERVERS_ID || displayServers.some((s) => s.id === selectedServerId)
+      ? selectedServerId
+      : ALL_SERVERS_ID
+
+  const scopedIfaces = useMemo(() => {
+    if (effectiveServerId === ALL_SERVERS_ID) return displayIfaces
+    return displayIfaces.filter((i) => i.serverId === effectiveServerId)
+  }, [displayIfaces, effectiveServerId])
+
+  const statusCounts = useMemo(() => {
+    let up = 0
+    let down = 0
+    for (const iface of scopedIfaces) {
+      if (iface.status === "up") up += 1
+      else down += 1
+    }
+    return { all: scopedIfaces.length, up, down }
+  }, [scopedIfaces])
+
+  const statusFiltered = useMemo(() => {
+    if (statusFilter === "all") return scopedIfaces
+    return scopedIfaces.filter((i) => i.status === statusFilter)
+  }, [scopedIfaces, statusFilter])
+
+  const filteredIfaces = useMemo(() => {
+    if (!search) return statusFiltered
     const q = search.toLowerCase()
-    return displayIfaces.filter(
+    return statusFiltered.filter(
       (i) =>
         i.name.toLowerCase().includes(q) ||
         i.serverName.toLowerCase().includes(q) ||
@@ -199,14 +275,47 @@ export default function WireGuardPage() {
             (p.endpoint ?? "").includes(q),
         ),
     )
-  }, [displayIfaces, search])
+  }, [statusFiltered, search])
 
-  const totalPeers = displayIfaces.reduce((s, i) => s + i.peers.length, 0)
+  const peerRows = useMemo<WgPeerRow[]>(() => {
-  const onlinePeers = displayIfaces.reduce(
+    const q = search.toLowerCase()
+    const rows: WgPeerRow[] = []
+    for (const iface of scopedIfaces) {
+      iface.peers.forEach((peer, index) => {
+        const id = peerRowId(iface, peer, index)
+        if (q) {
+          const hay = [
+            peer.publicKey,
+            peer.name ?? "",
+            peer.endpoint ?? "",
+            peer.allowedIps.join(" "),
+            iface.name,
+            iface.serverName,
+          ].join(" ").toLowerCase()
+          if (!hay.includes(q)) return
+        }
+        rows.push({
+          ...peer,
+          id,
+          ifaceId: iface.id,
+          ifaceName: iface.name,
+          serverId: iface.serverId,
+          serverName: iface.serverName,
+          serverCountry: iface.serverCountry,
+        })
+      })
+    }
+    return rows
+  }, [scopedIfaces, search])
+
+  const totalPeers = scopedIfaces.reduce((s, i) => s + i.peers.length, 0)
+  const onlinePeers = scopedIfaces.reduce(
     (s, i) => s + i.peers.filter((p) => !!p.latestHandshake).length,
     0,
   )
-  const upIfaces = displayIfaces.filter((i) => i.status === "up").length
+  const upIfaces = scopedIfaces.filter((i) => i.status === "up").length
+  const compactServer = effectiveServerId !== ALL_SERVERS_ID
+  const sheetServerId = compactServer ? effectiveServerId : undefined
 
   const serverOptions = displayServers.map((s) => ({
     id: s.id,
@@ -214,6 +323,25 @@ export default function WireGuardPage() {
     host: s.host,
   }))
 
+  const railItems = useMemo<ServerTileItem[]>(() => {
+    const counts = new Map<string, number>()
+    for (const iface of displayIfaces) {
+      counts.set(iface.serverId, (counts.get(iface.serverId) ?? 0) + 1)
+    }
+    return displayServers.map((s) => ({
+      id: s.id,
+      name: s.name,
+      host: s.host,
+      site: s.site,
+      country: s.country,
+      status: s.status,
+      type: s.type,
+      count: counts.get(s.id) ?? 0,
+      enabled: s.enabled,
+      title: [s.name, s.host, s.asn].filter(Boolean).join(" · "),
+    }))
+  }, [displayServers, displayIfaces])
+
   async function handleCreate(form: WgCreateFormState) {
     if (!isLive) {
       toast.info("Создание на роутер доступно только в live-режиме")
@@ -302,15 +430,26 @@ export default function WireGuardPage() {
     }
   }
 
-  async function handleDelete(iface: WgIfaceWithServer) {
+  async function confirmDelete() {
-    if (!isLive || !iface.rosId) {
+    if (!pendingDelete) return
+    if (!isLive) {
       toast.info("Доступно только в live-режиме")
+      setPendingDelete(null)
       return
     }
-    if (!window.confirm(`Удалить интерфейс ${iface.name} на ${iface.serverName}?`)) return
     try {
-      await deleteWireGuardInterface(backendUrl, iface.serverId, iface.rosId)
+      if (pendingDelete.kind === "iface") {
-      toast.success("Удалено")
+        if (!pendingDelete.iface.rosId) {
+          toast.info("Доступно только в live-режиме")
+          return
+        }
+        await deleteWireGuardInterface(backendUrl, pendingDelete.iface.serverId, pendingDelete.iface.rosId)
+        toast.success("Удалено")
+      } else {
+        await deleteWireGuardPeer(backendUrl, pendingDelete.iface.serverId, pendingDelete.peerId)
+        toast.success("Пир удалён")
+      }
+      setPendingDelete(null)
       await loadLive()
     } catch (e) {
       toast.error(e instanceof Error ? e.message : "Ошибка удаления")
@@ -348,21 +487,6 @@ export default function WireGuardPage() {
     }
   }
 
-  async function handleDeletePeer(iface: WgIfaceWithServer, peerId: string) {
-    if (!isLive) {
-      toast.info("Доступно только в live-режиме")
-      return
-    }
-    if (!window.confirm("Удалить пира?")) return
-    try {
-      await deleteWireGuardPeer(backendUrl, iface.serverId, peerId)
-      toast.success("Пир удалён")
-      await loadLive()
-    } catch (e) {
-      toast.error(e instanceof Error ? e.message : "Ошибка")
-    }
-  }
-
   async function handleLiveExport(format: "rsc" | "conf" | "peer-conf") {
     if (!exportIface || !isLive) return
     setExportBusy(true)
@@ -372,6 +496,7 @@ export default function WireGuardPage() {
         interfaceName: exportIface.name,
         format,
         includePrivateKey: format !== "peer-conf",
+        peerId: format === "peer-conf" ? (exportPeerId ?? undefined) : undefined,
       })
       setLiveExport((prev) => ({
         ...prev,
@@ -389,149 +514,255 @@ export default function WireGuardPage() {
     }
   }
 
+  function openExport(iface: WgIfaceWithServer, tab: "rsc" | "conf" | "peer" = "rsc", peerId?: string) {
+    setLiveExport(null)
+    setExportInitialTab(tab)
+    setExportPeerId(peerId ?? null)
+    setExportIface(iface)
+  }
+
+  const emptyCreateAction = (
+    <Button size="sm" onClick={() => setCreateOpen(true)}>
+      <PlusIcon className="size-4" />
+      Новый интерфейс
+    </Button>
+  )
+
   return (
-    <div className="flex flex-col h-full">
+    <>
-      <PageHeader
+    <ServerRailLayout
-        crumbs={[{ label: "Управление" }, { label: "WireGuard" }]}
+      items={railItems}
-        actions={
+      selectedId={effectiveServerId}
-          <>
+      onSelect={setSelectedServerId}
-            {isLive && (
+      showAll
-              <Button
+      allCount={displayIfaces.length}
-                size="sm"
+      loading={isLive && loading && displayServers.length === 0}
-                variant="outline"
+      header={
-                disabled={loading}
+        <PageHeader
-                onClick={() => void loadLive()}
+          crumbs={[{ label: "Управление" }, { label: "WireGuard" }]}
-              >
+          actions={
-                <RefreshCwIcon className={`size-4 ${loading ? "animate-spin" : ""}`} />
+            <>
-                Обновить
+              <ServerRailMobileButton />
+              {isLive && (
+                <Button
+                  size="sm"
+                  variant="outline"
+                  disabled={loading}
+                  onClick={() => void loadLive()}
+                >
+                  <RefreshCwIcon className={`size-4 ${loading ? "animate-spin" : ""}`} />
+                  Обновить
+                </Button>
+              )}
+              <Button size="sm" variant="outline" onClick={() => setImportOpen(true)}>
+                <UploadIcon className="size-4" />
+                Импорт
               </Button>
-            )}
+              <Button size="sm" onClick={() => setCreateOpen(true)}>
-            <Button size="sm" variant="outline" onClick={() => setImportOpen(true)}>
+                <PlusIcon className="size-4" />
-              <UploadIcon className="size-4" />
+                Новый интерфейс
-              Импорт
+              </Button>
-            </Button>
+            </>
-            <Button size="sm" onClick={() => setCreateOpen(true)}>
+          }
-              <PlusIcon className="size-4" />
+        />
-              Новый интерфейс
+      }
-            </Button>
+    >
-          </>
+          <div className="flex flex-col gap-4">
-        }
+            <KpiStatGrid
-      />
+              aria-label="Сводка WireGuard"
+              items={[
+                {
+                  id: "ifaces",
+                  label: "Интерфейсов",
+                  value: scopedIfaces.length,
+                  icon: <ShieldCheckIcon className="size-4" />,
+                  iconClassName: "text-muted-foreground",
+                },
+                {
+                  id: "up",
+                  label: "Активных (UP)",
+                  value: upIfaces,
+                  icon: <ActivityIcon className="size-4" />,
+                  iconClassName: "text-success",
+                },
+                {
+                  id: "peers",
+                  label: "Всего пиров",
+                  value: totalPeers,
+                  icon: <UsersIcon className="size-4" />,
+                  iconClassName: "text-info",
+                },
+                {
+                  id: "online",
+                  label: "Пиров онлайн",
+                  value: `${onlinePeers}/${totalPeers}`,
+                  icon: <KeyRoundIcon className="size-4" />,
+                  iconClassName: "text-primary",
+                },
+              ]}
+            />
 
-      <div className="flex-1 overflow-y-auto p-6">
+            {failures.length > 0 ? (
-        <div className="flex flex-col gap-5">
+              <Alert variant="destructive">
-          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+                <AlertCircleIcon />
-            {[
+                <AlertTitle>Не удалось опросить часть роутеров</AlertTitle>
-              { label: "Интерфейсов", value: displayIfaces.length, icon: <ShieldCheckIcon className="size-4 text-muted-foreground" /> },
+                <AlertDescription>
-              { label: "Активных (UP)", value: upIfaces, icon: <ActivityIcon className="size-4 text-emerald-500" /> },
+                  {failures.map((f) => f.serverName ?? f.serverId).join(", ")}
-              { label: "Всего пиров", value: totalPeers, icon: <UsersIcon className="size-4 text-sky-400" /> },
+                </AlertDescription>
-              { label: "Пиров онлайн", value: `${onlinePeers}/${totalPeers}`, icon: <KeyRoundIcon className="size-4 text-violet-400" /> },
+              </Alert>
-            ].map((s) => (
+            ) : null}
-              <Frame key={s.label} className="h-full">
+
-                <FramePanel className="relative isolate flex h-full items-start gap-3">
+            {!isLive ? (
-                  <IconTile variant="elevated" aria-hidden="true" className="size-10.5 text-muted-foreground">
+              <Alert variant="info">
-                    {s.icon}
+                <InfoIcon />
-                  </IconTile>
+                <AlertTitle>Mock-режим</AlertTitle>
-                  <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+                <AlertDescription>
-                    <p className="text-muted-foreground text-sm font-medium">{s.label}</p>
+                  Переключитесь в live в настройках, чтобы применять изменения на MikroTik.
-                    <p className="text-2xl leading-none font-bold tabular-nums">{s.value}</p>
+                </AlertDescription>
+              </Alert>
+            ) : null}
+
+            <Tabs
+              value={workspaceTab}
+              onValueChange={(v) => setWorkspaceTab(v as WgWorkspaceTab)}
+              className="gap-3"
+            >
+              <TabsList variant="line">
+                <TabsTrigger value="interfaces" className="gap-1.5">
+                  <ShieldCheckIcon className="size-3.5" />
+                  Интерфейсы
+                </TabsTrigger>
+                <TabsTrigger value="peers" className="gap-1.5">
+                  <UsersIcon className="size-3.5" />
+                  Пиры
+                </TabsTrigger>
+                <TabsTrigger value="cli" className="gap-1.5">
+                  <CodeXmlIcon className="size-3.5" />
+                  CLI
+                </TabsTrigger>
+              </TabsList>
+
+              <TabsContent value="interfaces" className="mt-0 outline-none">
+                <DataPageCard>
+                  <DataPageToolbar
+                    search={search}
+                    onSearchChange={setSearch}
+                    searchPlaceholder="Поиск по имени, серверу, IP…"
+                    countLabel={`${filteredIfaces.length} интерфейсов`}
+                    segmented={{
+                      value: statusFilter,
+                      onChange: setStatusFilter,
+                      options: [
+                        { value: "all", label: "Все", count: statusCounts.all },
+                        { value: "up", label: "UP", count: statusCounts.up },
+                        { value: "down", label: "DOWN", count: statusCounts.down },
+                      ],
+                    }}
+                  />
+                  <WireguardDataGrid
+                    interfaces={filteredIfaces}
+                    compactServer={compactServer}
+                    emptyAction={emptyCreateAction}
+                    onExport={(iface) => openExport(iface, "rsc")}
+                    onAddPeer={setPeerIface}
+                    onToggle={handleToggle}
+                    onDelete={(iface) => setPendingDelete({ kind: "iface", iface })}
+                    onDeletePeer={(iface, peerId) => setPendingDelete({ kind: "peer", iface, peerId })}
+                    onExportPeer={(iface, peerId) => openExport(iface, "peer", peerId)}
+                  />
+                </DataPageCard>
+              </TabsContent>
+
+              <TabsContent value="peers" className="mt-0 outline-none">
+                <DataPageCard>
+                  <DataPageToolbar
+                    search={search}
+                    onSearchChange={setSearch}
+                    searchPlaceholder="Поиск по ключу, IP, endpoint…"
+                    countLabel={`${peerRows.length} пиров`}
+                  />
+                  <WireguardPeersGrid
+                    peers={peerRows}
+                    compactServer={compactServer}
+                    emptyAction={
+                      scopedIfaces.length === 1 ? (
+                        <Button size="sm" onClick={() => setPeerIface(scopedIfaces[0])}>
+                          <PlusIcon className="size-4" />
+                          Добавить пира
+                        </Button>
+                      ) : emptyCreateAction
+                    }
+                    onDeletePeer={(row) => {
+                      const iface = scopedIfaces.find((i) => i.id === row.ifaceId)
+                      if (!iface) return
+                      setPendingDelete({ kind: "peer", iface, peerId: row.id })
+                    }}
+                    onExportPeer={(row) => {
+                      const iface = scopedIfaces.find((i) => i.id === row.ifaceId)
+                      if (!iface) return
+                      openExport(iface, "peer", row.id)
+                    }}
+                  />
+                </DataPageCard>
+              </TabsContent>
+
+              <TabsContent value="cli" className="mt-0 outline-none">
+                <OpsPanel title="RouterOS 7 · /interface wireguard — быстрые команды" contentClassName="px-5 py-4">
+                  <div className="grid grid-cols-1 gap-4 font-mono text-xs sm:grid-cols-3">
+                    {[
+                      {
+                        title: "Создать интерфейс",
+                        lines: [
+                          "/interface wireguard add \\",
+                          "  name=wg0 \\",
+                          "  listen-port=13231 \\",
+                          "  mtu=1420",
+                        ],
+                      },
+                      {
+                        title: "Добавить пира",
+                        lines: [
+                          "/interface wireguard peers add \\",
+                          "  interface=wg0 \\",
+                          '  public-key="<ключ>" \\',
+                          "  allowed-address=10.0.0.2/32 \\",
+                          "  endpoint-address=1.2.3.4 \\",
+                          "  persistent-keepalive=25",
+                        ],
+                      },
+                      {
+                        title: "Назначить IP",
+                        lines: [
+                          "/ip address add \\",
+                          "  address=10.210.0.1/30 \\",
+                          "  interface=wg0",
+                          "",
+                          "# Статус:",
+                          "/interface wireguard print",
+                        ],
+                      },
+                    ].map((b) => (
+                      <div key={b.title}>
+                        <p className="mb-1.5 font-sans text-[11px] font-semibold uppercase tracking-wide text-foreground/80">
+                          {b.title}
+                        </p>
+                        <pre className="overflow-x-auto rounded-md bg-muted p-2.5 text-[11px] leading-relaxed text-muted-foreground">
+                          {b.lines.join("\n")}
+                        </pre>
+                      </div>
+                    ))}
                   </div>
-                </FramePanel>
+                </OpsPanel>
-              </Frame>
+              </TabsContent>
-            ))}
+            </Tabs>
           </div>
-
+    </ServerRailLayout>
-          <div className="flex items-start gap-3 rounded-lg bg-sky-500/5 border border-sky-500/20 px-4 py-3 text-sm">
-            <ShieldCheckIcon className="size-5 text-sky-500 shrink-0 mt-0.5" />
-            <div>
-              <p className="font-medium text-sky-600 dark:text-sky-400">
-                WireGuard — live-интеграция RouterOS 7.x
-              </p>
-              <p className="text-muted-foreground text-xs mt-0.5">
-                {isLive
-                  ? "Опрос /interface/wireguard на включённых серверах. Создание, импорт .rsc/.conf и экспорт с роутера."
-                  : "Сейчас mock-режим. Переключитесь в live в настройках, чтобы применять изменения на MikroTik."}
-              </p>
-            </div>
-          </div>
-
-          <DataPageCard>
-            <DataPageToolbar
-              search={search}
-              onSearchChange={setSearch}
-              searchPlaceholder="Поиск по имени, серверу, IP…"
-              countLabel={`${filtered.length} интерфейсов`}
-            />
-            <WireguardDataGrid
-              interfaces={filtered}
-              onExport={(iface) => {
-                setLiveExport(null)
-                setExportIface(iface)
-              }}
-              onAddPeer={setPeerIface}
-              onToggle={handleToggle}
-              onDelete={handleDelete}
-              onDeletePeer={handleDeletePeer}
-              onExportPeer={(iface) => {
-                setLiveExport(null)
-                setExportIface(iface)
-              }}
-            />
-          </DataPageCard>
-
-          <OpsPanel title="RouterOS 7 · /interface wireguard — быстрые команды" contentClassName="px-5 py-4">
-            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4 text-xs font-mono">
-              {[
-                {
-                  title: "Создать интерфейс",
-                  lines: [
-                    "/interface wireguard add \\",
-                    "  name=wg0 \\",
-                    "  listen-port=13231 \\",
-                    "  mtu=1420",
-                  ],
-                },
-                {
-                  title: "Добавить пира",
-                  lines: [
-                    "/interface wireguard peers add \\",
-                    "  interface=wg0 \\",
-                    '  public-key="<ключ>" \\',
-                    "  allowed-address=10.0.0.2/32 \\",
-                    "  endpoint-address=1.2.3.4 \\",
-                    "  persistent-keepalive=25",
-                  ],
-                },
-                {
-                  title: "Назначить IP",
-                  lines: [
-                    "/ip address add \\",
-                    "  address=10.210.0.1/30 \\",
-                    "  interface=wg0",
-                    "",
-                    "# Статус:",
-                    "/interface wireguard print",
-                  ],
-                },
-              ].map((b) => (
-                <div key={b.title}>
-                  <p className="font-sans font-semibold text-foreground/80 mb-1.5 text-[11px] uppercase tracking-wide">
-                    {b.title}
-                  </p>
-                  <pre className="bg-zinc-950 rounded-md p-2.5 text-zinc-300 text-[11px] leading-relaxed overflow-x-auto">
-                    {b.lines.join("\n")}
-                  </pre>
-                </div>
-              ))}
-            </div>
-          </OpsPanel>
-        </div>
-      </div>
 
       <WgCreateSheet
         open={createOpen}
         onOpenChange={setCreateOpen}
         servers={serverOptions}
+        defaultServerId={sheetServerId}
         busy={busy}
         onSubmit={handleCreate}
       />
@@ -539,6 +770,7 @@ export default function WireGuardPage() {
         open={importOpen}
         onOpenChange={setImportOpen}
         servers={serverOptions}
+        defaultServerId={sheetServerId}
         busy={busy}
         onImport={handleImport}
       />
@@ -552,14 +784,44 @@ export default function WireGuardPage() {
       <WgExportSheet
         open={!!exportIface}
         iface={exportIface}
+        initialTab={exportInitialTab}
+        peerId={exportPeerId}
         onClose={() => {
           setExportIface(null)
+          setExportPeerId(null)
+          setExportInitialTab("rsc")
           setLiveExport(null)
         }}
         liveContent={liveExport}
         liveBusy={exportBusy}
         onRequestLiveExport={isLive ? handleLiveExport : undefined}
       />
-    </div>
+
+      <AlertDialog open={!!pendingDelete} onOpenChange={(v) => { if (!v) setPendingDelete(null) }}>
+        <AlertDialogContent size="default">
+          <AlertDialogHeader>
+            <AlertDialogMedia className="bg-destructive/10 text-destructive">
+              <Trash2Icon />
+            </AlertDialogMedia>
+            <AlertDialogTitle>
+              {pendingDelete?.kind === "peer" ? "Удалить пира?" : "Удалить интерфейс?"}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {pendingDelete?.kind === "iface"
+                ? `${pendingDelete.iface.name} на ${pendingDelete.iface.serverName}. Вместе с интерфейсом будут удалены связанные пиры на роутере.`
+                : pendingDelete
+                  ? `Пир на ${pendingDelete.iface.name} (${pendingDelete.iface.serverName}).`
+                  : null}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel onClick={() => setPendingDelete(null)}>Отмена</AlertDialogCancel>
+            <AlertDialogAction variant="destructive" onClick={() => void confirmDelete()}>
+              Удалить
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
   )
 }

backend/package.json

@@ -12,7 +12,9 @@
     "db:migrate": "drizzle-kit migrate",
     "db:studio": "drizzle-kit studio",
     "test:auth": "tsx src/lib/permissions.test.ts && tsx src/plugins/auth.smoke.test.ts",
-    "test:wireguard": "npx tsx src/services/wireguard-config.test.ts"
+    "test:wireguard": "npx tsx src/services/wireguard-config.test.ts",
+    "test:traffic-rate": "tsx src/services/traffic-rate.test.ts",
+    "test:users": "tsx src/modules/users/iface-type.test.ts && tsx src/modules/users/bindings.test.ts"
   },
   "dependencies": {
     "@fastify/cors": "^11.2.0",

backend/src/db/index.ts

@@ -106,6 +106,7 @@ CREATE TABLE IF NOT EXISTS traffic_samples (
   id INTEGER PRIMARY KEY AUTOINCREMENT,
   server_id INTEGER NOT NULL,
   interface_name TEXT NOT NULL,
+  peer_public_key TEXT NOT NULL DEFAULT '',
   sampled_at TEXT NOT NULL,
   rx_bytes INTEGER NOT NULL DEFAULT 0,
   tx_bytes INTEGER NOT NULL DEFAULT 0,
@@ -511,9 +512,102 @@ CREATE TABLE IF NOT EXISTS alert_engine_cursor (
   last_source_finished_at TEXT,
   updated_at TEXT NOT NULL DEFAULT (datetime('now'))
 );
+
+CREATE TABLE IF NOT EXISTS app_users (
+  id TEXT PRIMARY KEY,
+  name TEXT NOT NULL DEFAULT '',
+  login TEXT NOT NULL UNIQUE,
+  email TEXT NOT NULL DEFAULT '',
+  role TEXT NOT NULL DEFAULT 'viewer',
+  active INTEGER NOT NULL DEFAULT 1,
+  avatar TEXT NOT NULL DEFAULT '',
+  last_seen TEXT,
+  sections_json TEXT NOT NULL DEFAULT '[]',
+  servers_json TEXT NOT NULL DEFAULT '[]',
+  created_at TEXT NOT NULL DEFAULT (datetime('now')),
+  updated_at TEXT NOT NULL DEFAULT (datetime('now'))
+);
+
+CREATE TABLE IF NOT EXISTS user_interface_bindings (
+  id TEXT PRIMARY KEY,
+  user_id TEXT NOT NULL,
+  server_id INTEGER NOT NULL,
+  interface_name TEXT NOT NULL,
+  interface_type TEXT NOT NULL DEFAULT 'other',
+  peer_public_key TEXT NOT NULL DEFAULT '',
+  peer_name TEXT NOT NULL DEFAULT '',
+  comment TEXT NOT NULL DEFAULT '',
+  created_at TEXT NOT NULL DEFAULT (datetime('now')),
+  updated_at TEXT NOT NULL DEFAULT (datetime('now')),
+  FOREIGN KEY (user_id) REFERENCES app_users(id) ON DELETE CASCADE,
+  FOREIGN KEY (server_id) REFERENCES servers(id) ON DELETE CASCADE,
+  UNIQUE (server_id, interface_name, peer_public_key)
+);
+CREATE INDEX IF NOT EXISTS idx_user_iface_bind_user
+  ON user_interface_bindings(user_id);
 `)
 
 // Lightweight schema evolution for existing databases without migrations
+{
+  const sampleCols = sqlite.prepare(`PRAGMA table_info('traffic_samples')`).all() as Array<{ name?: string }>
+  if (!sampleCols.some((c) => c.name === "peer_public_key")) {
+    sqlite.exec(`ALTER TABLE traffic_samples ADD COLUMN peer_public_key TEXT NOT NULL DEFAULT ''`)
+  }
+}
+
+{
+  const bindCols = sqlite.prepare(`PRAGMA table_info('user_interface_bindings')`).all() as Array<{ name?: string }>
+  if (!bindCols.some((c) => c.name === "peer_public_key")) {
+    sqlite.exec(`ALTER TABLE user_interface_bindings ADD COLUMN peer_public_key TEXT NOT NULL DEFAULT ''`)
+  }
+  if (!bindCols.some((c) => c.name === "peer_name")) {
+    sqlite.exec(`ALTER TABLE user_interface_bindings ADD COLUMN peer_name TEXT NOT NULL DEFAULT ''`)
+  }
+
+  const indexes = sqlite.prepare(`PRAGMA index_list('user_interface_bindings')`).all() as Array<{
+    name?: string
+    unique?: number
+  }>
+  let hasPeerUnique = false
+  for (const idx of indexes) {
+    if (!idx.name || !idx.unique) continue
+    const info = sqlite.prepare(`PRAGMA index_info(${JSON.stringify(idx.name)})`).all() as Array<{ name?: string }>
+    const names = info.map((c) => c.name)
+    if (names.includes("server_id") && names.includes("interface_name") && names.includes("peer_public_key")) {
+      hasPeerUnique = true
+    }
+  }
+  if (!hasPeerUnique) {
+    sqlite.exec(`PRAGMA foreign_keys = OFF`)
+    sqlite.exec(`
+      CREATE TABLE user_interface_bindings_new (
+        id TEXT PRIMARY KEY,
+        user_id TEXT NOT NULL,
+        server_id INTEGER NOT NULL,
+        interface_name TEXT NOT NULL,
+        interface_type TEXT NOT NULL DEFAULT 'other',
+        peer_public_key TEXT NOT NULL DEFAULT '',
+        peer_name TEXT NOT NULL DEFAULT '',
+        comment TEXT NOT NULL DEFAULT '',
+        created_at TEXT NOT NULL DEFAULT (datetime('now')),
+        updated_at TEXT NOT NULL DEFAULT (datetime('now')),
+        FOREIGN KEY (user_id) REFERENCES app_users(id) ON DELETE CASCADE,
+        FOREIGN KEY (server_id) REFERENCES servers(id) ON DELETE CASCADE,
+        UNIQUE (server_id, interface_name, peer_public_key)
+      );
+      INSERT INTO user_interface_bindings_new
+        (id, user_id, server_id, interface_name, interface_type, peer_public_key, peer_name, comment, created_at, updated_at)
+      SELECT id, user_id, server_id, interface_name, interface_type,
+        COALESCE(peer_public_key, ''), COALESCE(peer_name, ''), comment, created_at, updated_at
+      FROM user_interface_bindings;
+      DROP TABLE user_interface_bindings;
+      ALTER TABLE user_interface_bindings_new RENAME TO user_interface_bindings;
+      CREATE INDEX IF NOT EXISTS idx_user_iface_bind_user ON user_interface_bindings(user_id);
+    `)
+    sqlite.exec(`PRAGMA foreign_keys = ON`)
+  }
+}
+
 const recursiveCols = sqlite.prepare(`PRAGMA table_info('recursive_routes')`).all() as Array<{ name?: string }>
 const hasCountryColumn = recursiveCols.some((c) => c.name === "country")
 if (!hasCountryColumn) {

backend/src/db/schema.ts

@@ -4,6 +4,7 @@ import {
   real,
   sqliteTable,
   text,
+  uniqueIndex,
 } from "drizzle-orm/sqlite-core"
 
 // ── servers ────────────────────────────────────────────────────────────────────
@@ -163,6 +164,7 @@ export const trafficSamples = sqliteTable("traffic_samples", {
                   .notNull()
                   .references(() => servers.id, { onDelete: "cascade" }),
   interfaceName: text("interface_name").notNull(),
+  peerPublicKey: text("peer_public_key").notNull().default(""),
   sampledAt:     text("sampled_at").notNull(),
   rxBytes:       integer("rx_bytes").notNull().default(0),
   txBytes:       integer("tx_bytes").notNull().default(0),
@@ -540,6 +542,44 @@ export const internetPathSettings = sqliteTable("internet_path_settings", {
   updatedAt:      text("updated_at").notNull().default(sql`(datetime('now'))`),
 })
 
+// ── app users (local catalog, not portal JWT) ────────────────────────────────
+
+export const appUsers = sqliteTable("app_users", {
+  id:          text("id").primaryKey(),
+  name:        text("name").notNull().default(""),
+  login:       text("login").notNull().unique(),
+  email:       text("email").notNull().default(""),
+  role:        text("role", { enum: ["admin", "operator", "viewer"] }).notNull().default("viewer"),
+  active:      integer("active", { mode: "boolean" }).notNull().default(true),
+  avatar:      text("avatar").notNull().default(""),
+  lastSeen:    text("last_seen"),
+  sectionsJson: text("sections_json").notNull().default("[]"),
+  serversJson:  text("servers_json").notNull().default("[]"),
+  createdAt:   text("created_at").notNull().default(sql`(datetime('now'))`),
+  updatedAt:   text("updated_at").notNull().default(sql`(datetime('now'))`),
+})
+
+export const userInterfaceBindings = sqliteTable("user_interface_bindings", {
+  id:             text("id").primaryKey(),
+  userId:         text("user_id")
+                    .notNull()
+                    .references(() => appUsers.id, { onDelete: "cascade" }),
+  serverId:       integer("server_id")
+                    .notNull()
+                    .references(() => servers.id, { onDelete: "cascade" }),
+  interfaceName:  text("interface_name").notNull(),
+  interfaceType:  text("interface_type", { enum: ["ether", "gre", "wg", "other"] })
+                    .notNull()
+                    .default("other"),
+  peerPublicKey:  text("peer_public_key").notNull().default(""),
+  peerName:       text("peer_name").notNull().default(""),
+  comment:        text("comment").notNull().default(""),
+  createdAt:      text("created_at").notNull().default(sql`(datetime('now'))`),
+  updatedAt:      text("updated_at").notNull().default(sql`(datetime('now'))`),
+}, (t) => [
+  uniqueIndex("idx_user_iface_bind_server_name_peer").on(t.serverId, t.interfaceName, t.peerPublicKey),
+])
+
 export const internetPathSnapshots = sqliteTable("internet_path_snapshots", {
   id:          integer("id").primaryKey({ autoIncrement: true }),
   sampledAt:   text("sampled_at").notNull(),
@@ -582,3 +622,5 @@ export type AlertDestinationRow = typeof alertDestinations.$inferSelect
 export type AlertHistoryRow = typeof alertHistory.$inferSelect
 export type AlertOutboxRow = typeof alertOutbox.$inferSelect
 export type AlertEngineCursorRow = typeof alertEngineCursor.$inferSelect
+export type AppUserRow = typeof appUsers.$inferSelect
+export type UserInterfaceBindingRow = typeof userInterfaceBindings.$inferSelect

backend/src/index.ts

@@ -24,6 +24,8 @@ import certificatesRoutes from "./routes/certificates.js"
 import systemDatabaseRoutes from "./routes/system-database.js"
 import eventsRoutes from "./routes/events.js"
 import wireguardRoutes from "./routes/wireguard.js"
+import firewallRoutes from "./routes/firewall.js"
+import usersRoutes from "./routes/users.js"
 import { refreshScheduler, stopScheduler } from "./services/scheduler.js"
 
 export async function buildApp(opts?: {
@@ -105,6 +107,8 @@ export async function buildApp(opts?: {
   await app.register(systemDatabaseRoutes, { prefix: "/api" })
   await app.register(eventsRoutes, { prefix: "/api" })
   await app.register(wireguardRoutes, { prefix: "/api" })
+  await app.register(firewallRoutes, { prefix: "/api" })
+  await app.register(usersRoutes, { prefix: "/api" })
 
   if (opts?.startScheduler !== false) {
     refreshScheduler()

backend/src/lib/permissions.test.ts

@@ -17,6 +17,10 @@ assert.equal(
   permissionForRequest("GET", "/api/system/database/backup"),
   "mm:settings:admin",
 )
+assert.equal(
+  permissionForRequest("GET", "/api/traffic/servers/1/live"),
+  "mm:traffic:read",
+)
 assert.equal(
   permissionForRequest("GET", "/api/unknown-thing"),
   "mm:dashboard:read",
@@ -29,5 +33,20 @@ assert.equal(
   permissionForRequest("POST", "/api/wireguard/interfaces"),
   "mm:network:write",
 )
+assert.equal(
+  permissionForRequest("GET", "/api/firewall/all"),
+  "mm:network:read",
+)
+assert.equal(
+  permissionForRequest("GET", "/api/users"),
+  "mm:users:read",
+)
+assert.equal(
+  permissionForRequest("POST", "/api/users"),
+  "mm:users:write",
+)
+assert.equal(hasPermission(["mm:settings:admin"], "mm:users:read"), true)
+assert.equal(hasPermission(["mm:settings:admin"], "mm:users:write"), true)
+assert.equal(hasPermission(["mm:dashboard:read"], "mm:users:write"), false)
 
 console.log("permissions.test.ts: ok")

backend/src/lib/permissions.ts

@@ -17,6 +17,9 @@ export function hasPermission(
   required: string,
 ): boolean {
   if (granted.includes(required)) return true
+  if (required.startsWith("mm:users:") && granted.includes("mm:settings:admin")) {
+    return true
+  }
   const parts = required.split(":")
   if (parts.length !== 3) return false
   const [app, section, action] = parts
@@ -49,8 +52,17 @@ const RULES: Rule[] = [
   },
   {
     methods: ["GET"],
-    match: (p) =>
+    match: (p) => p.startsWith("/api/users"),
-      p.startsWith("/api/sidebar-counts") || p.startsWith("/api/events"),
+    permission: "mm:users:read",
+  },
+  {
+    methods: ["POST", "PUT", "PATCH", "DELETE"],
+    match: (p) => p.startsWith("/api/users"),
+    permission: "mm:users:write",
+  },
+  {
+    methods: ["GET"],
+    match: (p) => p.startsWith("/api/sidebar-counts") || p.startsWith("/api/events"),
     permission: "mm:dashboard:read",
   },
   {
@@ -142,7 +154,8 @@ const RULES: Rule[] = [
       p.startsWith("/api/probes") ||
       p.startsWith("/api/internet-path") ||
       p.startsWith("/api/exec") ||
-      p.startsWith("/api/wireguard"),
+      p.startsWith("/api/wireguard") ||
+      p.startsWith("/api/firewall"),
     permission: "mm:network:read",
   },
   {
@@ -154,7 +167,8 @@ const RULES: Rule[] = [
       p.startsWith("/api/probes") ||
       p.startsWith("/api/internet-path") ||
       p.startsWith("/api/exec") ||
-      p.startsWith("/api/wireguard"),
+      p.startsWith("/api/wireguard") ||
+      p.startsWith("/api/firewall"),
     permission: "mm:network:write",
   },
 ]

backend/src/modules/users/bindings.test.ts

@@ -0,0 +1,90 @@
+import assert from "node:assert/strict"
+import Database from "better-sqlite3"
+import { normalizeBindingPeer, PeerBindError } from "./peer-bind.js"
+
+const sqlite = new Database(":memory:")
+sqlite.pragma("foreign_keys = ON")
+sqlite.exec(`
+CREATE TABLE servers (
+  id INTEGER PRIMARY KEY,
+  name TEXT NOT NULL DEFAULT '',
+  host TEXT NOT NULL DEFAULT '127.0.0.1'
+);
+CREATE TABLE app_users (
+  id TEXT PRIMARY KEY,
+  name TEXT NOT NULL DEFAULT '',
+  login TEXT NOT NULL UNIQUE,
+  email TEXT NOT NULL DEFAULT '',
+  role TEXT NOT NULL DEFAULT 'viewer',
+  active INTEGER NOT NULL DEFAULT 1,
+  avatar TEXT NOT NULL DEFAULT '',
+  last_seen TEXT,
+  sections_json TEXT NOT NULL DEFAULT '[]',
+  servers_json TEXT NOT NULL DEFAULT '[]',
+  created_at TEXT NOT NULL DEFAULT (datetime('now')),
+  updated_at TEXT NOT NULL DEFAULT (datetime('now'))
+);
+CREATE TABLE user_interface_bindings (
+  id TEXT PRIMARY KEY,
+  user_id TEXT NOT NULL,
+  server_id INTEGER NOT NULL,
+  interface_name TEXT NOT NULL,
+  interface_type TEXT NOT NULL DEFAULT 'other',
+  peer_public_key TEXT NOT NULL DEFAULT '',
+  peer_name TEXT NOT NULL DEFAULT '',
+  comment TEXT NOT NULL DEFAULT '',
+  created_at TEXT NOT NULL DEFAULT (datetime('now')),
+  updated_at TEXT NOT NULL DEFAULT (datetime('now')),
+  FOREIGN KEY (user_id) REFERENCES app_users(id) ON DELETE CASCADE,
+  FOREIGN KEY (server_id) REFERENCES servers(id) ON DELETE CASCADE,
+  UNIQUE (server_id, interface_name, peer_public_key)
+);
+`)
+
+sqlite.prepare("INSERT INTO servers (id, name, host) VALUES (1, 'jh', '10.0.0.1')").run()
+sqlite.prepare("INSERT INTO app_users (id, name, login) VALUES ('u1', 'A', 'a.user')").run()
+sqlite.prepare("INSERT INTO app_users (id, name, login) VALUES ('u2', 'B', 'b.user')").run()
+sqlite.prepare(`
+  INSERT INTO user_interface_bindings (id, user_id, server_id, interface_name, interface_type)
+  VALUES ('b1', 'u1', 1, 'gre-office', 'gre')
+`).run()
+
+assert.throws(
+  () => sqlite.prepare(`
+    INSERT INTO user_interface_bindings (id, user_id, server_id, interface_name, interface_type)
+    VALUES ('b2', 'u2', 1, 'gre-office', 'gre')
+  `).run(),
+  /UNIQUE/i,
+  "один интерфейс на сервере — один пользователь",
+)
+
+sqlite.prepare(`
+  INSERT INTO user_interface_bindings (id, user_id, server_id, interface_name, interface_type, peer_public_key, peer_name)
+  VALUES ('wg1', 'u1', 1, 'wg-server', 'wg', 'peer-key-aaa', 'phone')
+`).run()
+sqlite.prepare(`
+  INSERT INTO user_interface_bindings (id, user_id, server_id, interface_name, interface_type, peer_public_key, peer_name)
+  VALUES ('wg2', 'u2', 1, 'wg-server', 'wg', 'peer-key-bbb', 'laptop')
+`).run()
+assert.throws(
+  () => sqlite.prepare(`
+    INSERT INTO user_interface_bindings (id, user_id, server_id, interface_name, interface_type, peer_public_key)
+    VALUES ('wg3', 'u2', 1, 'wg-server', 'wg', 'peer-key-aaa')
+  `).run(),
+  /UNIQUE/i,
+  "один пир — один пользователь",
+)
+
+assert.throws(
+  () => normalizeBindingPeer("wg", ""),
+  (err: unknown) => err instanceof PeerBindError && err.status === 400,
+  "WG без ключа — 400",
+)
+assert.equal(normalizeBindingPeer("ether", "ignored"), "")
+assert.equal(normalizeBindingPeer("wg", " abc "), "abc")
+
+sqlite.prepare("DELETE FROM app_users WHERE id = 'u1'").run()
+const leftover = sqlite.prepare("SELECT COUNT(*) AS n FROM user_interface_bindings").get() as { n: number }
+assert.equal(leftover.n, 1, "каскад: привязки u1 удаляются, пир u2 остаётся")
+
+console.log("users bindings unique+cascade tests ok")

backend/src/modules/users/iface-type.test.ts

@@ -0,0 +1,41 @@
+import assert from "node:assert/strict"
+import { mapRosInterfaceType, parseRawInterfaces, isUniqueConstraintError } from "./iface-type.js"
+
+assert.equal(mapRosInterfaceType("ether"), "ether")
+assert.equal(mapRosInterfaceType("ethernet"), "ether")
+assert.equal(mapRosInterfaceType("GRE"), "gre")
+assert.equal(mapRosInterfaceType("gre-tunnel"), "gre")
+assert.equal(mapRosInterfaceType("gre6-tunnel"), "gre")
+assert.equal(mapRosInterfaceType("wg"), "wg")
+assert.equal(mapRosInterfaceType("wireguard"), "wg")
+assert.equal(mapRosInterfaceType("vlan"), "other")
+assert.equal(mapRosInterfaceType(""), "other")
+assert.equal(mapRosInterfaceType("", "gre-tunnel1"), "gre")
+assert.equal(mapRosInterfaceType("", "MSK-DC"), "other")
+assert.equal(mapRosInterfaceType("gre-tunnel", "MSK-DC"), "gre")
+assert.equal(mapRosInterfaceType("", "wg-msk-spb"), "wg")
+assert.equal(mapRosInterfaceType("", "ether1"), "ether")
+
+const parsed = parseRawInterfaces(JSON.stringify([
+  { name: "ether1", type: "ether", running: "true", disabled: "false" },
+  { name: "gre-office", type: "gre-tunnel", running: "false", disabled: "false" },
+  { name: "wg-msk", type: "wg", running: true, disabled: false },
+  { name: "MSK-DC", type: "gre-tunnel", running: true, disabled: false },
+  { name: "", type: "ether" },
+]))
+assert.equal(parsed.length, 4)
+assert.equal(parsed[0]?.type, "ether")
+assert.equal(parsed[0]?.running, true)
+assert.equal(parsed[1]?.type, "gre")
+assert.equal(parsed[1]?.running, false)
+assert.equal(parsed[2]?.type, "wg")
+assert.equal(parsed[3]?.type, "gre")
+
+assert.equal(parseRawInterfaces("not-json").length, 0)
+assert.equal(parseRawInterfaces(null).length, 0)
+
+assert.equal(isUniqueConstraintError({ code: "SQLITE_CONSTRAINT_UNIQUE", message: "UNIQUE" }), true)
+assert.equal(isUniqueConstraintError({ message: "UNIQUE constraint failed: t.c" }), true)
+assert.equal(isUniqueConstraintError({ message: "other" }), false)
+
+console.log("users iface-type tests ok")

backend/src/modules/users/iface-type.ts

@@ -0,0 +1,60 @@
+export type InterfaceType = "ether" | "gre" | "wg" | "other"
+
+export function mapRosInterfaceType(raw: string | undefined | null, name?: string): InterfaceType {
+  const t = String(raw ?? "").trim().toLowerCase()
+  if (t === "ether" || t === "ethernet" || t.startsWith("ether")) return "ether"
+  // RouterOS /interface type for GRE is "gre-tunnel" (also gre, gre6, gre6-tunnel)
+  if (t === "gre" || t.startsWith("gre-") || t.startsWith("gre6")) return "gre"
+  if (t === "wg" || t === "wireguard") return "wg"
+
+  const n = String(name ?? "").trim().toLowerCase()
+  if (n.startsWith("gre") || n.includes("gre-tunnel")) return "gre"
+  if (n.startsWith("wg-") || n.startsWith("wireguard")) return "wg"
+  if (n.startsWith("ether") || n.startsWith("sfp")) return "ether"
+  return "other"
+}
+
+export interface ParsedRosIface {
+  name: string
+  type: InterfaceType
+  running: boolean
+  disabled: boolean
+}
+
+function asBool(raw: unknown): boolean {
+  if (typeof raw === "boolean") return raw
+  const s = String(raw ?? "").trim().toLowerCase()
+  return s === "true" || s === "yes" || s === "1"
+}
+
+export function parseRawInterfaces(json: string | null | undefined): ParsedRosIface[] {
+  if (!json) return []
+  try {
+    const parsed = JSON.parse(json) as unknown
+    const arr = Array.isArray(parsed) ? parsed : []
+    const out: ParsedRosIface[] = []
+    for (const item of arr) {
+      if (!item || typeof item !== "object") continue
+      const rec = item as Record<string, unknown>
+      const name = String(rec.name ?? "").trim()
+      if (!name) continue
+      out.push({
+        name,
+        type: mapRosInterfaceType(String(rec.type ?? ""), name),
+        running: asBool(rec.running),
+        disabled: asBool(rec.disabled),
+      })
+    }
+    return out
+  } catch {
+    return []
+  }
+}
+
+export function isUniqueConstraintError(err: unknown): boolean {
+  if (!err || typeof err !== "object") return false
+  const rec = err as { code?: unknown; message?: unknown }
+  const code = String(rec.code ?? "")
+  const msg = String(rec.message ?? "")
+  return code.includes("SQLITE_CONSTRAINT") || /unique constraint/i.test(msg)
+}

backend/src/modules/users/peer-bind.ts

@@ -0,0 +1,44 @@
+import type { InterfaceType } from "./iface-type.js"
+
+export class PeerBindError extends Error {
+  constructor(
+    message: string,
+    public readonly status: number,
+  ) {
+    super(message)
+    this.name = "PeerBindError"
+  }
+}
+
+export function truncPeerKey(key: string): string {
+  const k = key.trim()
+  if (k.length <= 20) return k
+  return `${k.slice(0, 8)}…${k.slice(-8)}`
+}
+
+export function peerDisplayName(opts: {
+  publicKey: string
+  name?: string | null
+  comment?: string | null
+}): string {
+  const name = (opts.name ?? "").trim()
+  if (name) return name
+  const comment = (opts.comment ?? "").trim()
+  if (comment) return comment
+  return truncPeerKey(opts.publicKey)
+}
+
+/** Ether/GRE — пустой ключ. WG — обязательный public-key. */
+export function normalizeBindingPeer(
+  type: InterfaceType,
+  peerPublicKey: string | undefined,
+): string {
+  const key = (peerPublicKey ?? "").trim()
+  if (type === "wg") {
+    if (!key) {
+      throw new PeerBindError("Для WireGuard укажите пир (public-key)", 400)
+    }
+    return key
+  }
+  return ""
+}

backend/src/modules/users/repository/users-repository.ts

@@ -0,0 +1,77 @@
+import { and, eq } from "drizzle-orm"
+import { db } from "../../../db/index.js"
+import { appUsers, userInterfaceBindings } from "../../../db/schema.js"
+
+export type AppUserRow = typeof appUsers.$inferSelect
+export type BindingRow = typeof userInterfaceBindings.$inferSelect
+
+export function listUserRows(): AppUserRow[] {
+  return db.select().from(appUsers).all()
+}
+
+export function getUserRowById(id: string): AppUserRow | undefined {
+  return db.select().from(appUsers).where(eq(appUsers.id, id)).limit(1).all()[0]
+}
+
+export function getUserRowByLogin(login: string): AppUserRow | undefined {
+  return db.select().from(appUsers).where(eq(appUsers.login, login)).limit(1).all()[0]
+}
+
+export function createUserRow(values: typeof appUsers.$inferInsert): AppUserRow {
+  const [inserted] = db.insert(appUsers).values(values).returning().all()
+  return inserted
+}
+
+export function updateUserRowById(
+  id: string,
+  values: Partial<AppUserRow>,
+): AppUserRow {
+  const [updated] = db.update(appUsers).set(values).where(eq(appUsers.id, id)).returning().all()
+  return updated
+}
+
+export function deleteUserRowById(id: string): void {
+  db.delete(appUsers).where(eq(appUsers.id, id)).run()
+}
+
+export function listBindingRows(): BindingRow[] {
+  return db.select().from(userInterfaceBindings).all()
+}
+
+export function listBindingRowsByUser(userId: string): BindingRow[] {
+  return db.select().from(userInterfaceBindings).where(eq(userInterfaceBindings.userId, userId)).all()
+}
+
+export function getBindingRowById(id: string): BindingRow | undefined {
+  return db.select().from(userInterfaceBindings).where(eq(userInterfaceBindings.id, id)).limit(1).all()[0]
+}
+
+export function getBindingByServerIfacePeer(
+  serverId: number,
+  interfaceName: string,
+  peerPublicKey = "",
+): BindingRow | undefined {
+  return db
+    .select()
+    .from(userInterfaceBindings)
+    .where(and(
+      eq(userInterfaceBindings.serverId, serverId),
+      eq(userInterfaceBindings.interfaceName, interfaceName),
+      eq(userInterfaceBindings.peerPublicKey, peerPublicKey),
+    ))
+    .limit(1)
+    .all()[0]
+}
+
+export function createBindingRow(values: typeof userInterfaceBindings.$inferInsert): BindingRow {
+  const [inserted] = db.insert(userInterfaceBindings).values(values).returning().all()
+  return inserted
+}
+
+export function deleteBindingRowById(id: string): void {
+  db.delete(userInterfaceBindings).where(eq(userInterfaceBindings.id, id)).run()
+}
+
+export function countUserRows(): number {
+  return db.select().from(appUsers).all().length
+}

backend/src/modules/users/service/users-service.ts

@@ -0,0 +1,343 @@
+import { randomUUID } from "node:crypto"
+import { desc, eq } from "drizzle-orm"
+import type {
+  AppUserCreate,
+  AppUserRead,
+  AppUserUpdate,
+  CatalogInterface,
+  InterfaceType,
+  SectionPerm,
+  ServerPerm,
+  UserBinding,
+  UserBindingCreate,
+} from "@mmapp/contracts/users"
+import { db } from "../../../db/index.js"
+import { servers, trafficSamples } from "../../../db/schema.js"
+import {
+  createBindingRow,
+  createUserRow,
+  deleteBindingRowById,
+  deleteUserRowById,
+  getBindingByServerIfacePeer,
+  getBindingRowById,
+  getUserRowById,
+  getUserRowByLogin,
+  listBindingRows,
+  listBindingRowsByUser,
+  listUserRows,
+  updateUserRowById,
+  type AppUserRow,
+  type BindingRow,
+} from "../repository/users-repository.js"
+import { getLatestSnapshot } from "../../servers/repository/servers-repository.js"
+import {
+  isUniqueConstraintError,
+  mapRosInterfaceType,
+  parseRawInterfaces,
+} from "../iface-type.js"
+import {
+  normalizeBindingPeer,
+  PeerBindError,
+  peerDisplayName,
+} from "../peer-bind.js"
+import { listWireGuardPeersForCatalog } from "../../../services/wireguard-live.js"
+
+export class UsersServiceError extends Error {
+  constructor(
+    message: string,
+    public readonly status: number,
+  ) {
+    super(message)
+    this.name = "UsersServiceError"
+  }
+}
+
+function parseJsonArray<T>(raw: string, fallback: T[]): T[] {
+  try {
+    const parsed = JSON.parse(raw) as unknown
+    return Array.isArray(parsed) ? (parsed as T[]) : fallback
+  } catch {
+    return fallback
+  }
+}
+
+function initials(name: string): string {
+  const parts = name.trim().split(/\s+/).filter(Boolean)
+  return parts.map((p) => p[0] ?? "").slice(0, 2).join("").toUpperCase() || "??"
+}
+
+function serverMeta(serverId: number): { name: string; site: string; country: string } {
+  const row = db.select().from(servers).where(eq(servers.id, serverId)).limit(1).all()[0]
+  return {
+    name: row?.name || row?.host || String(serverId),
+    site: row?.site || "—",
+    country: row?.country || "UN",
+  }
+}
+
+function toBindingDto(row: BindingRow): UserBinding {
+  const meta = serverMeta(row.serverId)
+  return {
+    id: row.id,
+    userId: row.userId,
+    serverId: row.serverId,
+    serverName: meta.name,
+    serverSite: meta.site,
+    serverCountry: meta.country,
+    interfaceName: row.interfaceName,
+    interfaceType: row.interfaceType,
+    peerPublicKey: row.peerPublicKey ?? "",
+    peerName: row.peerName ?? "",
+    comment: row.comment,
+    createdAt: row.createdAt,
+    updatedAt: row.updatedAt,
+  }
+}
+
+function toUserDto(row: AppUserRow, bindings: BindingRow[]): AppUserRead {
+  return {
+    id: row.id,
+    name: row.name,
+    login: row.login,
+    email: row.email,
+    role: row.role,
+    active: Boolean(row.active),
+    avatar: row.avatar,
+    lastSeen: row.lastSeen ?? null,
+    sections: parseJsonArray<SectionPerm>(row.sectionsJson, []),
+    servers: parseJsonArray<ServerPerm>(row.serversJson, []),
+    bindings: bindings.map(toBindingDto),
+    createdAt: row.createdAt,
+    updatedAt: row.updatedAt,
+  }
+}
+
+export function listUsers(): AppUserRead[] {
+  const users = listUserRows()
+  const allBindings = listBindingRows()
+  const byUser = new Map<string, BindingRow[]>()
+  for (const b of allBindings) {
+    const arr = byUser.get(b.userId) ?? []
+    arr.push(b)
+    byUser.set(b.userId, arr)
+  }
+  return users.map((u) => toUserDto(u, byUser.get(u.id) ?? []))
+}
+
+export function getUserById(id: string): AppUserRead | undefined {
+  const row = getUserRowById(id)
+  if (!row) return undefined
+  return toUserDto(row, listBindingRowsByUser(id))
+}
+
+export function createUser(input: AppUserCreate): AppUserRead {
+  const login = input.login.trim()
+  if (getUserRowByLogin(login)) {
+    throw new UsersServiceError("Логин уже занят", 409)
+  }
+  const now = new Date().toISOString()
+  const row = createUserRow({
+    id: randomUUID(),
+    name: input.name.trim(),
+    login,
+    email: input.email.trim(),
+    role: input.role ?? "viewer",
+    active: input.active ?? true,
+    avatar: (input.avatar ?? "").trim() || initials(input.name),
+    lastSeen: input.lastSeen ?? null,
+    sectionsJson: JSON.stringify(input.sections ?? []),
+    serversJson: JSON.stringify(input.servers ?? []),
+    createdAt: now,
+    updatedAt: now,
+  })
+  return toUserDto(row, [])
+}
+
+export function updateUser(id: string, input: AppUserUpdate): AppUserRead {
+  const existing = getUserRowById(id)
+  if (!existing) throw new UsersServiceError("Пользователь не найден", 404)
+  if (input.login != null) {
+    const other = getUserRowByLogin(input.login.trim())
+    if (other && other.id !== id) throw new UsersServiceError("Логин уже занят", 409)
+  }
+  const patch: Partial<AppUserRow> = { updatedAt: new Date().toISOString() }
+  if (input.name != null) patch.name = input.name.trim()
+  if (input.login != null) patch.login = input.login.trim()
+  if (input.email != null) patch.email = input.email.trim()
+  if (input.role != null) patch.role = input.role
+  if (input.active != null) patch.active = input.active
+  if (input.avatar != null) patch.avatar = input.avatar.trim() || existing.avatar
+  if (input.lastSeen !== undefined) patch.lastSeen = input.lastSeen
+  if (input.sections != null) patch.sectionsJson = JSON.stringify(input.sections)
+  if (input.servers != null) patch.serversJson = JSON.stringify(input.servers)
+  const updated = updateUserRowById(id, patch)
+  return toUserDto(updated, listBindingRowsByUser(id))
+}
+
+export function deleteUser(id: string): void {
+  const existing = getUserRowById(id)
+  if (!existing) throw new UsersServiceError("Пользователь не найден", 404)
+  deleteUserRowById(id)
+}
+
+export function addBinding(userId: string, input: UserBindingCreate): UserBinding {
+  const user = getUserRowById(userId)
+  if (!user) throw new UsersServiceError("Пользователь не найден", 404)
+  const server = db.select().from(servers).where(eq(servers.id, input.serverId)).limit(1).all()[0]
+  if (!server) throw new UsersServiceError("Сервер не найден", 404)
+  const ifaceName = input.interfaceName.trim()
+  if (!ifaceName) throw new UsersServiceError("Имя интерфейса обязательно", 400)
+  const type: InterfaceType = input.interfaceType ?? inferIfaceType(input.serverId, ifaceName)
+  let peerPublicKey = ""
+  try {
+    peerPublicKey = normalizeBindingPeer(type, input.peerPublicKey)
+  } catch (err) {
+    if (err instanceof PeerBindError) throw new UsersServiceError(err.message, err.status)
+    throw err
+  }
+  const peerName = type === "wg"
+    ? peerDisplayName({
+      publicKey: peerPublicKey,
+      name: input.peerName,
+    })
+    : ""
+  const taken = getBindingByServerIfacePeer(input.serverId, ifaceName, peerPublicKey)
+  if (taken) {
+    throw new UsersServiceError(
+      type === "wg"
+        ? "Этот пир уже привязан к другому пользователю"
+        : "Интерфейс уже привязан к другому пользователю",
+      409,
+    )
+  }
+  const now = new Date().toISOString()
+  try {
+    const row = createBindingRow({
+      id: randomUUID(),
+      userId,
+      serverId: input.serverId,
+      interfaceName: ifaceName,
+      interfaceType: type,
+      peerPublicKey,
+      peerName,
+      comment: (input.comment ?? "").trim(),
+      createdAt: now,
+      updatedAt: now,
+    })
+    return toBindingDto(row)
+  } catch (err) {
+    if (isUniqueConstraintError(err)) {
+      throw new UsersServiceError(
+        type === "wg"
+          ? "Этот пир уже привязан к другому пользователю"
+          : "Интерфейс уже привязан к другому пользователю",
+        409,
+      )
+    }
+    throw err
+  }
+}
+
+export function removeBinding(userId: string, bindingId: string): void {
+  const row = getBindingRowById(bindingId)
+  if (!row || row.userId !== userId) {
+    throw new UsersServiceError("Привязка не найдена", 404)
+  }
+  deleteBindingRowById(bindingId)
+}
+
+function inferIfaceType(serverId: number, ifaceName: string): InterfaceType {
+  const snap = getLatestSnapshot(serverId)
+  const parsed = parseRawInterfaces(snap?.rawInterfaces)
+  const found = parsed.find((i) => i.name === ifaceName)
+  return found?.type ?? "other"
+}
+
+export async function listInterfaceCatalog(serverId: number): Promise<CatalogInterface[]> {
+  const server = db.select().from(servers).where(eq(servers.id, serverId)).limit(1).all()[0]
+  if (!server) throw new UsersServiceError("Сервер не найден", 404)
+
+  const snap = getLatestSnapshot(serverId)
+  let ifaces = parseRawInterfaces(snap?.rawInterfaces)
+  if (ifaces.length === 0) {
+    const last = db
+      .select({ sampledAt: trafficSamples.sampledAt })
+      .from(trafficSamples)
+      .where(eq(trafficSamples.serverId, serverId))
+      .orderBy(desc(trafficSamples.sampledAt))
+      .limit(1)
+      .all()[0]
+    if (last) {
+      const rows = db
+        .select({
+          interfaceName: trafficSamples.interfaceName,
+          peerPublicKey: trafficSamples.peerPublicKey,
+          running: trafficSamples.running,
+          disabled: trafficSamples.disabled,
+        })
+        .from(trafficSamples)
+        .where(eq(trafficSamples.serverId, serverId))
+        .all()
+        .filter((r) => r.interfaceName && !/^(lo|loopback)/i.test(r.interfaceName) && !(r.peerPublicKey ?? ""))
+      const seen = new Set<string>()
+      ifaces = []
+      for (const r of rows) {
+        if (seen.has(r.interfaceName)) continue
+        seen.add(r.interfaceName)
+        ifaces.push({
+          name: r.interfaceName,
+          type: mapRosInterfaceType("", r.interfaceName),
+          running: Boolean(r.running),
+          disabled: Boolean(r.disabled),
+        })
+      }
+    }
+  }
+
+  const bindings = listBindingRows().filter((b) => b.serverId === serverId)
+  const usersById = new Map(listUserRows().map((u) => [u.id, u]))
+  const hasWg = ifaces.some((i) => i.type === "wg")
+  const wgLive = hasWg
+    ? await listWireGuardPeersForCatalog(serverId)
+    : { peers: [] as Awaited<ReturnType<typeof listWireGuardPeersForCatalog>>["peers"] }
+  const peersByIface = new Map<string, typeof wgLive.peers>()
+  for (const peer of wgLive.peers) {
+    const list = peersByIface.get(peer.interfaceName) ?? []
+    list.push(peer)
+    peersByIface.set(peer.interfaceName, list)
+  }
+
+  return ifaces.map((iface) => {
+    const ifaceBind = bindings.find((b) => b.interfaceName === iface.name && !(b.peerPublicKey ?? ""))
+    const owner = ifaceBind ? usersById.get(ifaceBind.userId) : undefined
+    const base: CatalogInterface = {
+      name: iface.name,
+      type: iface.type,
+      running: iface.running,
+      disabled: iface.disabled,
+      boundUserId: ifaceBind?.userId ?? null,
+      boundUserLogin: owner?.login ?? null,
+    }
+    if (iface.type !== "wg") return base
+    const livePeers = peersByIface.get(iface.name) ?? []
+    return {
+      ...base,
+      peersError: wgLive.error,
+      peers: livePeers.map((p) => {
+        const bind = bindings.find((b) => b.interfaceName === iface.name && b.peerPublicKey === p.publicKey)
+        const peerOwner = bind ? usersById.get(bind.userId) : undefined
+        return {
+          publicKey: p.publicKey,
+          name: peerDisplayName({ publicKey: p.publicKey, name: p.name, comment: p.comment }),
+          comment: p.comment,
+          allowedIps: p.allowedIps,
+          latestHandshake: p.latestHandshake,
+          boundUserId: bind?.userId ?? null,
+          boundUserLogin: peerOwner?.login ?? null,
+        }
+      }),
+    }
+  }).sort((a, b) => a.name.localeCompare(b.name))
+}
+
+export { parseRawInterfaces, mapRosInterfaceType }

backend/src/routes/firewall.ts

@@ -0,0 +1,294 @@
+import type { FastifyPluginAsyncZod } from "@fastify/type-provider-zod"
+import { z } from "zod"
+import { MikrotikClient, MikrotikError, encodeRosId, firewallRestPath } from "../services/mikrotik.js"
+import { getEnabledServerById } from "../services/wireguard-live.js"
+import { listFirewallAll } from "../services/firewall-live.js"
+import type { FirewallFamily, FirewallTable } from "../types/server.js"
+
+const FamilySchema = z.enum(["ip", "ip6"])
+const TableSchema = z.enum(["filter", "nat", "mangle", "raw"])
+
+const RuleKeySchema = z.object({
+  serverId: z.string().min(1),
+  family: FamilySchema,
+  table: TableSchema,
+  rosId: z.string().min(1),
+})
+
+const RuleWriteSchema = z.object({
+  serverId: z.string().min(1),
+  family: FamilySchema,
+  table: TableSchema,
+  rosId: z.string().min(1).optional(),
+  chain: z.string().min(1),
+  action: z.string().min(1),
+  protocol: z.string().optional(),
+  srcAddress: z.string().optional(),
+  dstAddress: z.string().optional(),
+  srcAddressList: z.string().optional(),
+  dstAddressList: z.string().optional(),
+  srcPort: z.string().optional(),
+  dstPort: z.string().optional(),
+  inInterface: z.string().optional(),
+  outInterface: z.string().optional(),
+  connectionState: z.string().optional(),
+  comment: z.string().optional(),
+  disabled: z.boolean().optional(),
+  log: z.boolean().optional(),
+  logPrefix: z.string().optional(),
+  tlsHost: z.string().optional(),
+  layer7Proto: z.string().optional(),
+})
+
+const RulePatchSchema = RuleKeySchema.extend({
+  disabled: z.boolean(),
+})
+
+const RuleMoveSchema = RuleKeySchema.extend({
+  destinationRosId: z.string().min(1).optional(),
+})
+
+const AddressKeySchema = z.object({
+  serverId: z.string().min(1),
+  family: FamilySchema,
+  rosId: z.string().min(1),
+})
+
+const AddressWriteSchema = z.object({
+  serverId: z.string().min(1),
+  family: FamilySchema,
+  rosId: z.string().min(1).optional(),
+  list: z.string().min(1),
+  address: z.string().min(1),
+  comment: z.string().optional(),
+  timeout: z.string().optional(),
+  disabled: z.boolean().optional(),
+})
+
+const AddressPatchSchema = AddressKeySchema.extend({
+  disabled: z.boolean(),
+})
+
+function toRosBody(obj: Record<string, string | undefined>): Record<string, string> {
+  const out: Record<string, string> = {}
+  for (const [k, v] of Object.entries(obj)) {
+    if (v !== undefined && v !== "") out[k] = v
+  }
+  return out
+}
+
+function ruleToRos(d: z.infer<typeof RuleWriteSchema>): Record<string, string> {
+  return toRosBody({
+    chain: d.chain,
+    action: d.action,
+    protocol: d.protocol && d.protocol !== "all" ? d.protocol : undefined,
+    "src-address": d.srcAddress,
+    "dst-address": d.dstAddress,
+    "src-address-list": d.srcAddressList,
+    "dst-address-list": d.dstAddressList,
+    "src-port": d.srcPort,
+    "dst-port": d.dstPort,
+    "in-interface": d.inInterface,
+    "out-interface": d.outInterface,
+    "connection-state": d.connectionState,
+    comment: d.comment,
+    disabled: d.disabled === true ? "yes" : d.disabled === false ? "no" : undefined,
+    log: d.log === true ? "yes" : d.log === false ? "no" : undefined,
+    "log-prefix": d.logPrefix,
+    "tls-host": d.tlsHost,
+    "layer7-protocol": d.layer7Proto,
+  })
+}
+
+function addressToRos(d: z.infer<typeof AddressWriteSchema>): Record<string, string> {
+  return toRosBody({
+    list: d.list,
+    address: d.address,
+    comment: d.comment,
+    timeout: d.timeout,
+    disabled: d.disabled === true ? "yes" : d.disabled === false ? "no" : undefined,
+  })
+}
+
+function rosErr(e: unknown): string {
+  if (e instanceof MikrotikError) return e.message
+  if (e instanceof Error) return e.message
+  return String(e)
+}
+
+function requireServer(serverId: string) {
+  return getEnabledServerById(serverId)
+}
+
+const firewallRoutes: FastifyPluginAsyncZod = async (app) => {
+  app.get("/firewall/all", async (_req, reply) => {
+    const data = await listFirewallAll()
+    return reply.send(data)
+  })
+
+  app.post("/firewall/rules", async (req, reply) => {
+    const parsed = RuleWriteSchema.safeParse(req.body ?? {})
+    if (!parsed.success) {
+      return reply.status(400).send({ error: "Некорректное тело запроса", details: parsed.error.flatten() })
+    }
+    const body = parsed.data
+    const server = requireServer(body.serverId)
+    if (!server) return reply.status(404).send({ error: "Сервер не найден" })
+    const client = MikrotikClient.fromServer(server)
+    const path = firewallRestPath(body.family as FirewallFamily, body.table as FirewallTable)
+    try {
+      await client.put(path, ruleToRos(body))
+      return reply.status(201).send({ ok: true })
+    } catch (e) {
+      return reply.status(502).send({ error: `RouterOS: ${rosErr(e)}` })
+    }
+  })
+
+  app.put("/firewall/rules", async (req, reply) => {
+    const parsed = RuleWriteSchema.extend({ rosId: z.string().min(1) }).safeParse(req.body ?? {})
+    if (!parsed.success) {
+      return reply.status(400).send({ error: "Некорректное тело запроса", details: parsed.error.flatten() })
+    }
+    const body = parsed.data
+    const server = requireServer(body.serverId)
+    if (!server) return reply.status(404).send({ error: "Сервер не найден" })
+    const client = MikrotikClient.fromServer(server)
+    const path = `${firewallRestPath(body.family as FirewallFamily, body.table as FirewallTable)}/${encodeRosId(body.rosId)}`
+    try {
+      await client.patch(path, ruleToRos(body))
+      return reply.send({ ok: true })
+    } catch (e) {
+      return reply.status(502).send({ error: `RouterOS: ${rosErr(e)}` })
+    }
+  })
+
+  app.patch("/firewall/rules", async (req, reply) => {
+    const parsed = RulePatchSchema.safeParse(req.body ?? {})
+    if (!parsed.success) {
+      return reply.status(400).send({ error: "Некорректное тело запроса", details: parsed.error.flatten() })
+    }
+    const body = parsed.data
+    const server = requireServer(body.serverId)
+    if (!server) return reply.status(404).send({ error: "Сервер не найден" })
+    const client = MikrotikClient.fromServer(server)
+    const path = `${firewallRestPath(body.family, body.table)}/${encodeRosId(body.rosId)}`
+    try {
+      await client.patch(path, { disabled: body.disabled ? "yes" : "no" })
+      return reply.send({ ok: true })
+    } catch (e) {
+      return reply.status(502).send({ error: `RouterOS: ${rosErr(e)}` })
+    }
+  })
+
+  app.delete("/firewall/rules", async (req, reply) => {
+    const parsed = RuleKeySchema.safeParse(req.body ?? {})
+    if (!parsed.success) {
+      return reply.status(400).send({ error: "Некорректное тело запроса", details: parsed.error.flatten() })
+    }
+    const body = parsed.data
+    const server = requireServer(body.serverId)
+    if (!server) return reply.status(404).send({ error: "Сервер не найден" })
+    const client = MikrotikClient.fromServer(server)
+    const path = `${firewallRestPath(body.family, body.table)}/${encodeRosId(body.rosId)}`
+    try {
+      await client.delete(path)
+      return reply.send({ ok: true })
+    } catch (e) {
+      return reply.status(502).send({ error: `RouterOS: ${rosErr(e)}` })
+    }
+  })
+
+  app.post("/firewall/rules/move", async (req, reply) => {
+    const parsed = RuleMoveSchema.safeParse(req.body ?? {})
+    if (!parsed.success) {
+      return reply.status(400).send({ error: "Некорректное тело запроса", details: parsed.error.flatten() })
+    }
+    const body = parsed.data
+    const server = requireServer(body.serverId)
+    if (!server) return reply.status(404).send({ error: "Сервер не найден" })
+    const client = MikrotikClient.fromServer(server)
+    const path = `${firewallRestPath(body.family, body.table)}/move`
+    try {
+      await client.post(path, {
+        numbers: body.rosId,
+        ...(body.destinationRosId ? { destination: body.destinationRosId } : {}),
+      })
+      return reply.send({ ok: true })
+    } catch (e) {
+      return reply.status(502).send({ error: `RouterOS: ${rosErr(e)}` })
+    }
+  })
+
+  app.post("/firewall/address-lists", async (req, reply) => {
+    const parsed = AddressWriteSchema.safeParse(req.body ?? {})
+    if (!parsed.success) {
+      return reply.status(400).send({ error: "Некорректное тело запроса", details: parsed.error.flatten() })
+    }
+    const body = parsed.data
+    const server = requireServer(body.serverId)
+    if (!server) return reply.status(404).send({ error: "Сервер не найден" })
+    const client = MikrotikClient.fromServer(server)
+    try {
+      await client.put(firewallRestPath(body.family, "address-list"), addressToRos(body))
+      return reply.status(201).send({ ok: true })
+    } catch (e) {
+      return reply.status(502).send({ error: `RouterOS: ${rosErr(e)}` })
+    }
+  })
+
+  app.put("/firewall/address-lists", async (req, reply) => {
+    const parsed = AddressWriteSchema.extend({ rosId: z.string().min(1) }).safeParse(req.body ?? {})
+    if (!parsed.success) {
+      return reply.status(400).send({ error: "Некорректное тело запроса", details: parsed.error.flatten() })
+    }
+    const body = parsed.data
+    const server = requireServer(body.serverId)
+    if (!server) return reply.status(404).send({ error: "Сервер не найден" })
+    const client = MikrotikClient.fromServer(server)
+    const path = `${firewallRestPath(body.family, "address-list")}/${encodeRosId(body.rosId)}`
+    try {
+      await client.patch(path, addressToRos(body))
+      return reply.send({ ok: true })
+    } catch (e) {
+      return reply.status(502).send({ error: `RouterOS: ${rosErr(e)}` })
+    }
+  })
+
+  app.patch("/firewall/address-lists", async (req, reply) => {
+    const parsed = AddressPatchSchema.safeParse(req.body ?? {})
+    if (!parsed.success) {
+      return reply.status(400).send({ error: "Некорректное тело запроса", details: parsed.error.flatten() })
+    }
+    const body = parsed.data
+    const server = requireServer(body.serverId)
+    if (!server) return reply.status(404).send({ error: "Сервер не найден" })
+    const client = MikrotikClient.fromServer(server)
+    const path = `${firewallRestPath(body.family, "address-list")}/${encodeRosId(body.rosId)}`
+    try {
+      await client.patch(path, { disabled: body.disabled ? "yes" : "no" })
+      return reply.send({ ok: true })
+    } catch (e) {
+      return reply.status(502).send({ error: `RouterOS: ${rosErr(e)}` })
+    }
+  })
+
+  app.delete("/firewall/address-lists", async (req, reply) => {
+    const parsed = AddressKeySchema.safeParse(req.body ?? {})
+    if (!parsed.success) {
+      return reply.status(400).send({ error: "Некорректное тело запроса", details: parsed.error.flatten() })
+    }
+    const body = parsed.data
+    const server = requireServer(body.serverId)
+    if (!server) return reply.status(404).send({ error: "Сервер не найден" })
+    const client = MikrotikClient.fromServer(server)
+    const path = `${firewallRestPath(body.family, "address-list")}/${encodeRosId(body.rosId)}`
+    try {
+      await client.delete(path)
+      return reply.send({ ok: true })
+    } catch (e) {
+      return reply.status(502).send({ error: `RouterOS: ${rosErr(e)}` })
+    }
+  })
+}
+
+export default firewallRoutes

backend/src/routes/sidebar-counts.ts

@@ -9,6 +9,7 @@ import {
   uptimeProbes,
   uptimeSpeedProbes,
 } from "../db/schema.js"
+import { listUsers } from "../modules/users/service/users-service.js"
 
 const sidebarCountsRoutes: FastifyPluginAsyncZod = async (app) => {
   app.get("/sidebar-counts", async (_req, reply) => {
@@ -20,6 +21,7 @@ const sidebarCountsRoutes: FastifyPluginAsyncZod = async (app) => {
       recursiveRoutesTotal,
       certificatesTotal,
       wireguardTotal,
+      usersTotal,
     ] = await Promise.all([
       Promise.resolve(db.select().from(servers).all().length),
       Promise.resolve(db.select().from(filterRules).all().length),
@@ -28,6 +30,7 @@ const sidebarCountsRoutes: FastifyPluginAsyncZod = async (app) => {
       Promise.resolve(db.select().from(recursiveRoutes).all().length),
       listCertificatesFromServers().then((res) => res.certificates.length),
       countWireGuardInterfaces().catch(() => 0),
+      Promise.resolve(listUsers().length),
     ])
 
     return reply.send({
@@ -39,6 +42,7 @@ const sidebarCountsRoutes: FastifyPluginAsyncZod = async (app) => {
       recursiveRoutes: recursiveRoutesTotal,
       certificates: certificatesTotal,
       wireguard: wireguardTotal,
+      users: usersTotal,
     })
   })
 }

backend/src/routes/traffic.ts

@@ -1,3 +1,4 @@
+import { env } from "../config.js"
 import { desc, eq } from "drizzle-orm"
 import type { FastifyPluginAsyncZod } from "@fastify/type-provider-zod"
 import { db } from "../db/index.js"
@@ -12,6 +13,19 @@ import {
 import { scheduleAlertEngineAfterDataCollectors } from "../services/alert-collector-hooks.js"
 import { refreshScheduler } from "../services/scheduler.js"
 import { appendEvent } from "../modules/events/service/events-service.js"
+import { MikrotikClient } from "../services/mikrotik.js"
+import { getEnabledServerById } from "../services/wireguard-live.js"
+import {
+  bpsToMbps,
+  buildTrafficFromSamples,
+  isLoopbackName,
+  parseMonitorTraffic,
+  rateBpsFromDelta,
+} from "../services/traffic-rate.js"
+import {
+  buildBoundInterfaceTraffic,
+  buildUserTrafficList,
+} from "../services/traffic-users.js"
 
 type SnapshotRow = typeof serverSnapshots.$inferSelect
 
@@ -40,6 +54,9 @@ interface TrafficInterfaceDto {
   txNow: number
 }
 
+const LIVE_TICK_MS = 1500
+const LIVE_ROS_TIMEOUT_MS = 4000
+
 function latestSnapshot(serverId: number): SnapshotRow | undefined {
   return db
     .select()
@@ -61,14 +78,6 @@ function rangeToMinutes(range: string | undefined): number {
   }
 }
 
-function toSeries(values: number[], target = 60): number[] {
-  if (values.length === 0) return Array(target).fill(0)
-  if (values.length === target) return values
-  if (values.length > target) return values.slice(values.length - target)
-  const head = Array(target - values.length).fill(values[0] ?? 0)
-  return [...head, ...values]
-}
-
 function buildServerTraffic(
   s: typeof servers.$inferSelect,
   status: TrafficServerDto["status"],
@@ -82,88 +91,135 @@ function buildServerTraffic(
     running: boolean
     disabled: boolean
   }>,
+  rangeStartMs: number,
+  rangeEndMs: number,
   onlyInterface?: string,
 ): TrafficServerDto {
-  const filteredRows = onlyInterface
+  const built = buildTrafficFromSamples(rows, rangeStartMs, rangeEndMs, onlyInterface)
-    ? rows.filter((r) => r.interfaceName === onlyInterface)
-    : rows
-
-  if (filteredRows.length === 0) {
-    return {
-      id: String(s.id),
-      name: s.name || s.host,
-      site: s.site || "—",
-      country: s.country || "UN",
-      status,
-      rxNow: 0,
-      txNow: 0,
-      rxPeak: 0,
-      txPeak: 0,
-      rxTotal: 0,
-      txTotal: 0,
-      sessions: 0,
-      rxSeries: Array(60).fill(0),
-      txSeries: Array(60).fill(0),
-    }
-  }
-
-  const bySampleTs = new Map<string, { rx: number; tx: number }>()
-  const byIface = new Map<string, typeof filteredRows>()
-  for (const r of filteredRows) {
-    const ts = r.sampledAt
-    const cur = bySampleTs.get(ts) ?? { rx: 0, tx: 0 }
-    cur.rx += Math.max(0, r.rxBps) / 1_000_000
-    cur.tx += Math.max(0, r.txBps) / 1_000_000
-    bySampleTs.set(ts, cur)
-    const arr = byIface.get(r.interfaceName) ?? []
-    arr.push(r)
-    byIface.set(r.interfaceName, arr)
-  }
-
-  const seriesPoints = [...bySampleTs.entries()]
-    .sort((a, b) => a[0].localeCompare(b[0]))
-    .map(([, v]) => ({ rx: Math.round(v.rx), tx: Math.round(v.tx) }))
-  const rxSeries = toSeries(seriesPoints.map((p) => p.rx))
-  const txSeries = toSeries(seriesPoints.map((p) => p.tx))
-  const rxNow = rxSeries[rxSeries.length - 1] ?? 0
-  const txNow = txSeries[txSeries.length - 1] ?? 0
-  const rxPeak = rxSeries.reduce((m, v) => Math.max(m, v), 0)
-  const txPeak = txSeries.reduce((m, v) => Math.max(m, v), 0)
-
-  let rxBytesDelta = 0
-  let txBytesDelta = 0
-  let sessions = 0
-  for (const arr of byIface.values()) {
-    const sorted = [...arr].sort((a, b) => a.sampledAt.localeCompare(b.sampledAt))
-    const first = sorted[0]
-    const last = sorted[sorted.length - 1]
-    if (first && last) {
-      const dRx = last.rxBytes - first.rxBytes
-      const dTx = last.txBytes - first.txBytes
-      rxBytesDelta += dRx >= 0 ? dRx : last.rxBytes
-      txBytesDelta += dTx >= 0 ? dTx : last.txBytes
-      if (last.running && !last.disabled) sessions += 1
-    }
-  }
-
   return {
     id: String(s.id),
     name: s.name || s.host,
     site: s.site || "—",
     country: s.country || "UN",
     status,
-    rxNow,
+    rxNow: built.rxNow,
-    txNow,
+    txNow: built.txNow,
-    rxPeak,
+    rxPeak: built.rxPeak,
-    txPeak,
+    txPeak: built.txPeak,
-    rxTotal: Number((rxBytesDelta / (1024 ** 3)).toFixed(1)),
+    rxTotal: built.rxTotalGiB,
-    txTotal: Number((txBytesDelta / (1024 ** 3)).toFixed(1)),
+    txTotal: built.txTotalGiB,
-    sessions,
+    sessions: built.sessions,
-    rxSeries,
+    rxSeries: built.rxSeries,
-    txSeries,
+    txSeries: built.txSeries,
   }
 }
 
+function snapshotStatus(serverId: number): TrafficServerDto["status"] {
+  const snap = latestSnapshot(serverId)
+  return snap?.status === "offline" ? "offline" : (snap?.status === "online" ? "online" : "degraded")
+}
+
+function ifaceNowMbps(
+  prev: { rxBytes: number; txBytes: number; sampledAt: string } | undefined,
+  last: { rxBytes: number; txBytes: number; sampledAt: string; rxBps: number; txBps: number },
+): { rxNow: number; txNow: number } {
+  if (!prev) {
+    return { rxNow: bpsToMbps(last.rxBps), txNow: bpsToMbps(last.txBps) }
+  }
+  const t0 = Date.parse(prev.sampledAt)
+  const t1 = Date.parse(last.sampledAt)
+  const rxBps = rateBpsFromDelta(prev.rxBytes, last.rxBytes, t0, t1)
+  const txBps = rateBpsFromDelta(prev.txBytes, last.txBytes, t0, t1)
+  return {
+    rxNow: bpsToMbps(rxBps ?? last.rxBps),
+    txNow: bpsToMbps(txBps ?? last.txBps),
+  }
+}
+
+function writeSse(raw: NodeJS.WritableStream, event: string, data: unknown) {
+  raw.write(`event: ${event}\ndata: ${JSON.stringify(data)}\n\n`)
+}
+
+function sleep(ms: number, signal: AbortSignal): Promise<void> {
+  return new Promise((resolve, reject) => {
+    if (signal.aborted) {
+      reject(new Error("aborted"))
+      return
+    }
+    const timer = setTimeout(() => {
+      signal.removeEventListener("abort", onAbort)
+      resolve()
+    }, ms)
+    const onAbort = () => {
+      clearTimeout(timer)
+      reject(new Error("aborted"))
+    }
+    signal.addEventListener("abort", onAbort, { once: true })
+  })
+}
+
+function flattenMonitor(raw: unknown): unknown[] {
+  if (Array.isArray(raw)) return raw
+  if (raw != null) return [raw]
+  return []
+}
+
+async function listRunningIfaceNames(client: MikrotikClient): Promise<string[]> {
+  const ifaces = await client.get<Array<{ name?: string; running?: string; disabled?: string }>>(
+    "/interface",
+    LIVE_ROS_TIMEOUT_MS,
+  )
+  return ifaces
+    .filter((i) => (i.running ?? "false") === "true"
+      && (i.disabled ?? "false") !== "true"
+      && !isLoopbackName(i.name ?? ""))
+    .map((i) => i.name ?? "")
+    .filter(Boolean)
+}
+
+async function monitorTrafficOnce(
+  client: MikrotikClient,
+  onlyInterface: string | undefined,
+  cache: { names: string[]; joinedFailed: boolean },
+  signal: AbortSignal,
+): Promise<unknown> {
+  if (onlyInterface) {
+    return client.post(
+      "/interface/monitor-traffic",
+      { interface: onlyInterface, once: "" },
+      LIVE_ROS_TIMEOUT_MS,
+      signal,
+    )
+  }
+  if (cache.names.length === 0) {
+    cache.names = await listRunningIfaceNames(client)
+  }
+  if (cache.names.length === 0) return []
+  if (!cache.joinedFailed) {
+    try {
+      return await client.post(
+        "/interface/monitor-traffic",
+        { interface: cache.names.join(","), once: "" },
+        LIVE_ROS_TIMEOUT_MS,
+        signal,
+      )
+    } catch {
+      cache.joinedFailed = true
+    }
+  }
+  const chunks = await Promise.all(
+    cache.names.map((name) =>
+      client.post(
+        "/interface/monitor-traffic",
+        { interface: name, once: "" },
+        LIVE_ROS_TIMEOUT_MS,
+        signal,
+      ).then(flattenMonitor).catch(() => [] as unknown[]),
+    ),
+  )
+  return chunks.flat()
+}
+
 const trafficRoutes: FastifyPluginAsyncZod = async (app) => {
   app.get("/traffic/settings", async (_req, reply) => {
     const settings = getTrafficSettings()
@@ -243,20 +299,77 @@ const trafficRoutes: FastifyPluginAsyncZod = async (app) => {
   app.get("/traffic/servers", async (req, reply) => {
     const q = req.query as { range?: string }
     const minutes = rangeToMinutes(q.range)
-    const sinceIso = new Date(Date.now() - minutes * 60_000).toISOString()
+    const rangeEndMs = Date.now()
+    const rangeStartMs = rangeEndMs - minutes * 60_000
+    const sinceIso = new Date(rangeStartMs).toISOString()
     const allServers = db.select().from(servers).where(eq(servers.enabled, true)).all()
     const data = allServers.map((s): TrafficServerDto => {
-      const snap = latestSnapshot(s.id)
-      const status: TrafficServerDto["status"] =
-        snap?.status === "offline" ? "offline" : (snap?.status === "online" ? "online" : "degraded")
-
       const rows = readServerSamplesInRange(s.id, sinceIso)
-      return buildServerTraffic(s, status, rows)
+      return buildServerTraffic(s, snapshotStatus(s.id), rows, rangeStartMs, rangeEndMs)
     })
 
     return reply.send({ servers: data })
   })
 
+  app.get("/traffic/servers/:id/live", async (req, reply) => {
+    const p = req.params as { id?: string | number }
+    const q = req.query as { iface?: string }
+    const server = getEnabledServerById(p.id ?? "")
+    if (!server || !server.enabled) return reply.status(404).send({ error: "Server not found" })
+
+    const onlyInterface = q.iface && q.iface !== "__all__" ? q.iface : undefined
+    const abort = new AbortController()
+    const onClose = () => abort.abort()
+    req.raw.on("close", onClose)
+
+    reply.hijack()
+    req.raw.setTimeout(0)
+    reply.raw.setTimeout(0)
+    const origin = typeof req.headers.origin === "string" ? req.headers.origin : ""
+    const allowed = env.CORS_ORIGIN
+    const sseHeaders: Record<string, string> = {
+      "Content-Type": "text/event-stream; charset=utf-8",
+      "Cache-Control": "no-cache, no-transform",
+      Connection: "keep-alive",
+      "X-Accel-Buffering": "no",
+    }
+    if (origin && (allowed === "*" || allowed === origin)) {
+      sseHeaders["Access-Control-Allow-Origin"] = origin
+      sseHeaders["Access-Control-Allow-Credentials"] = "true"
+      sseHeaders["Access-Control-Allow-Headers"] = "Authorization, Accept"
+      sseHeaders.Vary = "Origin"
+    }
+    reply.raw.writeHead(200, sseHeaders)
+    reply.raw.write(":\n\n")
+
+    const client = MikrotikClient.fromServer(server)
+    const cache = { names: onlyInterface ? [onlyInterface] : [] as string[], joinedFailed: false }
+
+    try {
+      while (!abort.signal.aborted) {
+        try {
+          const raw = await monitorTrafficOnce(client, onlyInterface, cache, abort.signal)
+          const sample = parseMonitorTraffic(raw, { onlyInterface })
+          writeSse(reply.raw, "sample", sample)
+        } catch (error) {
+          if (abort.signal.aborted) break
+          const msg = error instanceof Error ? error.message : String(error)
+          writeSse(reply.raw, "error", { error: msg })
+        }
+        await sleep(LIVE_TICK_MS, abort.signal)
+      }
+    } catch {
+      /* abort / disconnect */
+    } finally {
+      req.raw.off("close", onClose)
+      try {
+        reply.raw.end()
+      } catch {
+        /* already closed */
+      }
+    }
+  })
+
   app.get("/traffic/servers/:id/interfaces", async (req, reply) => {
     const p = req.params as { id?: string | number }
     const serverId = Number.parseInt(String(p.id ?? ""), 10)
@@ -270,6 +383,7 @@ const trafficRoutes: FastifyPluginAsyncZod = async (app) => {
     const rows = readServerSamplesInRange(serverId, sinceIso)
     const byIface = new Map<string, typeof rows>()
     for (const r of rows) {
+      if (isLoopbackName(r.interfaceName)) continue
       const arr = byIface.get(r.interfaceName) ?? []
       arr.push(r)
       byIface.set(r.interfaceName, arr)
@@ -277,12 +391,17 @@ const trafficRoutes: FastifyPluginAsyncZod = async (app) => {
     const interfaces: TrafficInterfaceDto[] = [...byIface.entries()].map(([name, arr]) => {
       const sorted = arr.sort((a, b) => a.sampledAt.localeCompare(b.sampledAt))
       const last = sorted[sorted.length - 1]
+      const prev = sorted[sorted.length - 2]
+      if (!last) {
+        return { name, running: false, disabled: true, rxNow: 0, txNow: 0 }
+      }
+      const now = ifaceNowMbps(prev, last)
       return {
         name,
-        running: Boolean(last?.running),
+        running: Boolean(last.running),
-        disabled: Boolean(last?.disabled),
+        disabled: Boolean(last.disabled),
-        rxNow: Math.round((last?.rxBps ?? 0) / 1_000_000),
+        rxNow: now.rxNow,
-        txNow: Math.round((last?.txBps ?? 0) / 1_000_000),
+        txNow: now.txNow,
       }
     }).sort((a, b) => (b.rxNow + b.txNow) - (a.rxNow + a.txNow))
 
@@ -298,15 +417,50 @@ const trafficRoutes: FastifyPluginAsyncZod = async (app) => {
     if (!server) return reply.status(404).send({ error: "Server not found" })
 
     const minutes = rangeToMinutes(q.range)
-    const sinceIso = new Date(Date.now() - minutes * 60_000).toISOString()
+    const rangeEndMs = Date.now()
+    const rangeStartMs = rangeEndMs - minutes * 60_000
+    const sinceIso = new Date(rangeStartMs).toISOString()
     const rows = readServerSamplesInRange(server.id, sinceIso)
-    const snap = latestSnapshot(server.id)
+    const data = buildServerTraffic(
-    const status: TrafficServerDto["status"] =
+      server,
-      snap?.status === "offline" ? "offline" : (snap?.status === "online" ? "online" : "degraded")
+      snapshotStatus(server.id),
-    const data = buildServerTraffic(server, status, rows, q.iface && q.iface !== "__all__" ? q.iface : undefined)
+      rows,
+      rangeStartMs,
+      rangeEndMs,
+      q.iface && q.iface !== "__all__" ? q.iface : undefined,
+    )
     return reply.send({ server: data })
   })
+
+  app.get("/traffic/users", async (req, reply) => {
+    const q = req.query as { range?: string }
+    const minutes = rangeToMinutes(q.range)
+    const rangeEndMs = Date.now()
+    const rangeStartMs = rangeEndMs - minutes * 60_000
+    return reply.send({ users: buildUserTrafficList(rangeStartMs, rangeEndMs) })
+  })
+
+  app.get("/traffic/users/:id", async (req, reply) => {
+    const p = req.params as { id?: string }
+    const q = req.query as { range?: string }
+    const id = String(p.id ?? "")
+    if (!id) return reply.status(400).send({ error: "id is required" })
+    const minutes = rangeToMinutes(q.range)
+    const rangeEndMs = Date.now()
+    const rangeStartMs = rangeEndMs - minutes * 60_000
+    const users = buildUserTrafficList(rangeStartMs, rangeEndMs)
+    const user = users.find((u) => u.id === id)
+    if (!user) return reply.status(404).send({ error: "Пользователь не найден" })
+    return reply.send({ user })
+  })
+
+  app.get("/traffic/bound-interfaces", async (req, reply) => {
+    const q = req.query as { range?: string }
+    const minutes = rangeToMinutes(q.range)
+    const rangeEndMs = Date.now()
+    const rangeStartMs = rangeEndMs - minutes * 60_000
+    return reply.send({ interfaces: buildBoundInterfaceTraffic(rangeStartMs, rangeEndMs) })
+  })
 }
 
 export default trafficRoutes
-

backend/src/routes/users.ts

@@ -0,0 +1,117 @@
+import type { FastifyPluginAsyncZod } from "@fastify/type-provider-zod"
+import {
+  appUserCreateSchema,
+  appUserIdParamSchema,
+  appUserUpdateSchema,
+  bindingIdParamSchema,
+  interfaceCatalogQuerySchema,
+  userBindingCreateSchema,
+  type AppUserCreate,
+  type AppUserUpdate,
+  type UserBindingCreate,
+} from "@mmapp/contracts/users"
+import {
+  addBinding,
+  createUser,
+  deleteUser,
+  getUserById,
+  listInterfaceCatalog,
+  listUsers,
+  removeBinding,
+  updateUser,
+  UsersServiceError,
+} from "../modules/users/service/users-service.js"
+
+function sendServiceError(reply: { status: (c: number) => { send: (b: unknown) => unknown } }, err: unknown) {
+  if (err instanceof UsersServiceError) {
+    return reply.status(err.status).send({ error: err.message })
+  }
+  throw err
+}
+
+const usersRoutes: FastifyPluginAsyncZod = async (app) => {
+  app.get("/users", async (_req, reply) => {
+    return reply.send({ users: listUsers() })
+  })
+
+  app.get("/users/interface-catalog", {
+    schema: { querystring: interfaceCatalogQuerySchema },
+  }, async (req, reply) => {
+    const q = req.query as { serverId: number }
+    try {
+      return reply.send({ interfaces: await listInterfaceCatalog(q.serverId) })
+    } catch (err) {
+      return sendServiceError(reply, err)
+    }
+  })
+
+  app.get("/users/:id", {
+    schema: { params: appUserIdParamSchema },
+  }, async (req, reply) => {
+    const { id } = req.params as { id: string }
+    const user = getUserById(id)
+    if (!user) return reply.status(404).send({ error: "Пользователь не найден" })
+    return reply.send({ user })
+  })
+
+  app.post("/users", {
+    schema: { body: appUserCreateSchema },
+  }, async (req, reply) => {
+    try {
+      const user = createUser(req.body as AppUserCreate)
+      return reply.status(201).send({ user })
+    } catch (err) {
+      return sendServiceError(reply, err)
+    }
+  })
+
+  app.patch("/users/:id", {
+    schema: { params: appUserIdParamSchema, body: appUserUpdateSchema },
+  }, async (req, reply) => {
+    const { id } = req.params as { id: string }
+    try {
+      const user = updateUser(id, req.body as AppUserUpdate)
+      return reply.send({ user })
+    } catch (err) {
+      return sendServiceError(reply, err)
+    }
+  })
+
+  app.delete("/users/:id", {
+    schema: { params: appUserIdParamSchema },
+  }, async (req, reply) => {
+    const { id } = req.params as { id: string }
+    try {
+      deleteUser(id)
+      return reply.status(204).send()
+    } catch (err) {
+      return sendServiceError(reply, err)
+    }
+  })
+
+  app.post("/users/:id/bindings", {
+    schema: { params: appUserIdParamSchema, body: userBindingCreateSchema },
+  }, async (req, reply) => {
+    const { id } = req.params as { id: string }
+    try {
+      const binding = addBinding(id, req.body as UserBindingCreate)
+      return reply.status(201).send({ binding })
+    } catch (err) {
+      return sendServiceError(reply, err)
+    }
+  })
+
+  app.delete("/users/:id/bindings/:bindingId", {
+    schema: { params: bindingIdParamSchema },
+  }, async (req, reply) => {
+    const { id, bindingId } = req.params as { id: string; bindingId: string }
+    try {
+      removeBinding(id, bindingId)
+      return reply.status(204).send()
+    } catch (err) {
+      return sendServiceError(reply, err)
+    }
+  })
+}
+
+export default usersRoutes

backend/src/services/firewall-live.ts

@@ -0,0 +1,198 @@
+import { eq } from "drizzle-orm"
+import { db } from "../db/index.js"
+import { servers } from "../db/schema.js"
+import {
+  MikrotikClient,
+  firewallRestPath,
+} from "./mikrotik.js"
+import type {
+  FirewallFamily,
+  FirewallTable,
+  RosFirewallAddressList,
+  RosFirewallFilter,
+} from "../types/server.js"
+
+type ServerRow = typeof servers.$inferSelect
+
+export interface FirewallRuleDto {
+  id: string
+  rosId: string
+  serverId: string
+  serverName: string
+  family: FirewallFamily
+  table: FirewallTable
+  chain: string
+  action: string
+  proto: string
+  src: string
+  dst: string
+  port: string
+  iface: string
+  comment: string
+  enabled: boolean
+  hits: number
+  log: boolean
+  logPrefix: string
+  tlsHost?: string
+  layer7Proto?: string
+}
+
+export interface FirewallAddressListDto {
+  id: string
+  rosId: string
+  serverId: string
+  serverName: string
+  family: FirewallFamily
+  list: string
+  address: string
+  comment: string
+  disabled: boolean
+  timeout?: string
+}
+
+const TABLES: FirewallTable[] = ["filter", "nat", "mangle", "raw"]
+const FAMILIES: FirewallFamily[] = ["ip", "ip6"]
+
+function dash(v: string | undefined): string {
+  const s = v?.trim() ?? ""
+  return s.length > 0 ? s : "—"
+}
+
+function rosDisabled(v: string | undefined): boolean {
+  return v === "true" || v === "yes"
+}
+
+function parseHits(raw: RosFirewallFilter): number {
+  const n = Number.parseInt(raw.packets ?? "0", 10)
+  return Number.isFinite(n) ? n : 0
+}
+
+export function ruleUiId(
+  serverId: string | number,
+  family: FirewallFamily,
+  table: FirewallTable,
+  rosId: string,
+): string {
+  return `${serverId}:${family}:${table}:${rosId}`
+}
+
+export function addressUiId(
+  serverId: string | number,
+  family: FirewallFamily,
+  rosId: string,
+): string {
+  return `${serverId}:${family}:address-list:${rosId}`
+}
+
+export function mapFirewallRule(
+  server: ServerRow,
+  family: FirewallFamily,
+  table: FirewallTable,
+  raw: RosFirewallFilter,
+  idx: number,
+): FirewallRuleDto {
+  const rosId = raw[".id"] || `*${idx}`
+  const src = raw["src-address"] || raw["src-address-list"]
+  const dst = raw["dst-address"] || raw["dst-address-list"]
+  const port = raw["dst-port"] || raw["src-port"]
+  const iface = raw["in-interface"] || raw["out-interface"]
+  return {
+    id: ruleUiId(server.id, family, table, rosId),
+    rosId,
+    serverId: String(server.id),
+    serverName: server.name || server.host,
+    family,
+    table,
+    chain: raw.chain || "",
+    action: raw.action || "",
+    proto: raw.protocol || "all",
+    src: dash(src),
+    dst: dash(dst),
+    port: dash(port),
+    iface: dash(iface),
+    comment: raw.comment ?? "",
+    enabled: !rosDisabled(raw.disabled),
+    hits: parseHits(raw),
+    log: raw.log === "true" || raw.log === "yes",
+    logPrefix: raw["log-prefix"] ?? "",
+    tlsHost: raw["tls-host"],
+    layer7Proto: raw["layer7-protocol"],
+  }
+}
+
+export function mapAddressList(
+  server: ServerRow,
+  family: FirewallFamily,
+  raw: RosFirewallAddressList,
+  idx: number,
+): FirewallAddressListDto {
+  const rosId = raw[".id"] || `*${idx}`
+  return {
+    id: addressUiId(server.id, family, rosId),
+    rosId,
+    serverId: String(server.id),
+    serverName: server.name || server.host,
+    family,
+    list: raw.list || "",
+    address: raw.address || "",
+    comment: raw.comment ?? "",
+    disabled: rosDisabled(raw.disabled),
+    timeout: raw.timeout,
+  }
+}
+
+async function safeGet<T>(fn: () => Promise<T[]>, fallback: T[] = []): Promise<T[]> {
+  try {
+    const rows = await fn()
+    return Array.isArray(rows) ? rows : fallback
+  } catch {
+    return fallback
+  }
+}
+
+export async function fetchServerFirewall(server: ServerRow): Promise<{
+  rules: FirewallRuleDto[]
+  addressLists: FirewallAddressListDto[]
+}> {
+  const client = MikrotikClient.fromServer(server)
+  const ruleJobs = FAMILIES.flatMap((family) =>
+    TABLES.map(async (table) => {
+      const raw = await safeGet(() => client.getFirewallRules(family, table))
+      return raw.map((row, idx) => mapFirewallRule(server, family, table, row, idx))
+    }),
+  )
+  const listJobs = FAMILIES.map(async (family) => {
+    const raw = await safeGet(() => client.getFirewallAddressList(family))
+    return raw.map((row, idx) => mapAddressList(server, family, row, idx))
+  })
+  const [ruleChunks, listChunks] = await Promise.all([
+    Promise.all(ruleJobs),
+    Promise.all(listJobs),
+  ])
+  return {
+    rules: ruleChunks.flat(),
+    addressLists: listChunks.flat(),
+  }
+}
+
+export async function listFirewallAll(): Promise<{
+  rules: FirewallRuleDto[]
+  addressLists: FirewallAddressListDto[]
+}> {
+  const allServers = db.select().from(servers).where(eq(servers.enabled, true)).all()
+  const perServer = await Promise.all(
+    allServers.map(async (server) => {
+      try {
+        return await fetchServerFirewall(server)
+      } catch {
+        return { rules: [] as FirewallRuleDto[], addressLists: [] as FirewallAddressListDto[] }
+      }
+    }),
+  )
+  return {
+    rules: perServer.flatMap((r) => r.rules),
+    addressLists: perServer.flatMap((r) => r.addressLists),
+  }
+}
+
+export { firewallRestPath, FAMILIES, TABLES }

backend/src/services/mikrotik.ts

@@ -7,7 +7,8 @@ import type {
   RosBgpSession,
   RosOspfNeighbor, RosOspfArea, RosOspfInterfaceTemplate, RosOspfInstance,
   RosBfdSession,
-  RosIpRoute, RosFirewallFilter, RosLogEntry, RosPingResult,
+  RosIpRoute, RosFirewallFilter, RosFirewallAddressList, RosLogEntry, RosPingResult,
+  FirewallFamily, FirewallTable,
 } from "../types/server.js"
 
 // ── connection params ─────────────────────────────────────────────────────────
@@ -338,6 +339,19 @@ function matchesUploadedFile(entryName: string, requested: string): boolean {
     || entryName.endsWith(`/${base}`)
 }
 
+export function firewallRestPath(
+  family: FirewallFamily,
+  table: FirewallTable | "address-list",
+): string {
+  const root = family === "ip6" ? "/ipv6/firewall" : "/ip/firewall"
+  return `${root}/${table}`
+}
+
+export function encodeRosId(rosId: string): string {
+  const id = rosId.startsWith("*") ? rosId : `*${rosId.replace(/^\*/, "")}`
+  return encodeURIComponent(id)
+}
+
 // ── MikrotikClient ─────────────────────────────────────────────────────────────
 
 export class MikrotikClient {
@@ -461,7 +475,15 @@ export class MikrotikClient {
   }
 
   async getFirewallFilters(): Promise<RosFirewallFilter[]> {
-    return this.get<RosFirewallFilter[]>("/ip/firewall/filter")
+    return this.getFirewallRules("ip", "filter")
+  }
+
+  async getFirewallRules(family: FirewallFamily, table: FirewallTable): Promise<RosFirewallFilter[]> {
+    return this.get<RosFirewallFilter[]>(firewallRestPath(family, table))
+  }
+
+  async getFirewallAddressList(family: FirewallFamily): Promise<RosFirewallAddressList[]> {
+    return this.get<RosFirewallAddressList[]>(firewallRestPath(family, "address-list"))
   }
 
   async getLogs(limit = 50): Promise<RosLogEntry[]> {

backend/src/services/traffic-collector.ts

@@ -1,9 +1,10 @@
-import { and, asc, eq, gte, lt } from "drizzle-orm"
+import { and, asc, desc, eq, gte, lt } from "drizzle-orm"
 import { db } from "../db/index.js"
 import { servers, trafficSamples, trafficSettings } from "../db/schema.js"
 import type { TrafficRunSnapshot } from "../types/scheduler-run-snapshot.js"
 import { SCHEDULER_RUN_SNAPSHOT_VERSION } from "../types/scheduler-run-snapshot.js"
 import { MikrotikClient } from "./mikrotik.js"
+import { bpsToMbps, rateBpsFromDelta, shouldIncludeIface } from "./traffic-rate.js"
 
 interface RosIfaceTraffic {
   name?: string
@@ -15,6 +16,38 @@ interface RosIfaceTraffic {
   "tx-bits-per-second"?: string
 }
 
+interface RosWgPeerTraffic {
+  interface?: string
+  name?: string
+  comment?: string
+  "public-key"?: string
+  rx?: string
+  tx?: string
+  disabled?: string
+}
+
+function waveKey(interfaceName: string, peerPublicKey = ""): string {
+  return `${interfaceName}\0${peerPublicKey}`
+}
+
+function sampleRate(
+  prevWave: Map<string, { rxBytes: number; txBytes: number; sampledAt: string }>,
+  key: string,
+  rxBytes: number,
+  txBytes: number,
+  nowMs: number,
+): { rxBps: number; txBps: number } {
+  const prev = prevWave.get(key)
+  const prevMs = prev ? Date.parse(prev.sampledAt) : NaN
+  const rxBps = prev && Number.isFinite(prevMs)
+    ? (rateBpsFromDelta(prev.rxBytes, rxBytes, prevMs, nowMs) ?? 0)
+    : 0
+  const txBps = prev && Number.isFinite(prevMs)
+    ? (rateBpsFromDelta(prev.txBytes, txBytes, prevMs, nowMs) ?? 0)
+    : 0
+  return { rxBps, txBps }
+}
+
 export interface TrafficCollectorState {
   running: boolean
   lastRunAt: string | null
@@ -50,6 +83,32 @@ function cleanupOldSamples(retentionDays: number) {
     .run()
 }
 
+function readPreviousWave(serverId: number): Map<string, { rxBytes: number; txBytes: number; sampledAt: string }> {
+  const last = db
+    .select({ sampledAt: trafficSamples.sampledAt })
+    .from(trafficSamples)
+    .where(eq(trafficSamples.serverId, serverId))
+    .orderBy(desc(trafficSamples.sampledAt))
+    .limit(1)
+    .all()[0]
+  if (!last) return new Map()
+  const rows = db
+    .select({
+      interfaceName: trafficSamples.interfaceName,
+      peerPublicKey: trafficSamples.peerPublicKey,
+      rxBytes: trafficSamples.rxBytes,
+      txBytes: trafficSamples.txBytes,
+      sampledAt: trafficSamples.sampledAt,
+    })
+    .from(trafficSamples)
+    .where(and(
+      eq(trafficSamples.serverId, serverId),
+      eq(trafficSamples.sampledAt, last.sampledAt),
+    ))
+    .all()
+  return new Map(rows.map((r) => [`${r.interfaceName}\0${r.peerPublicKey ?? ""}`, r]))
+}
+
 export async function collectTrafficOnce(): Promise<TrafficRunSnapshot> {
   const sampledAt = new Date().toISOString()
   if (collecting) {
@@ -80,26 +139,69 @@ export async function collectTrafficOnce(): Promise<TrafficRunSnapshot> {
       try {
         const client = MikrotikClient.fromServer(srv)
         const ifaces = await client.get<RosIfaceTraffic[]>("/interface")
-        let sumRx = 0
+        const prevWave = readPreviousWave(srv.id)
-        let sumTx = 0
+        const nowMs = Date.parse(now)
-        for (const i of ifaces) {
+        let sumRxMbps = 0
-          sumRx += toNum(i["rx-bits-per-second"]) / 1_000_000
+        let sumTxMbps = 0
-          sumTx += toNum(i["tx-bits-per-second"]) / 1_000_000
+        const rows = ifaces.map((i) => {
-        }
+          const interfaceName = i.name ?? "unknown"
-        if (ifaces.length > 0) {
+          const rxBytes = toNum(i["rx-byte"])
-          db.insert(trafficSamples).values(
+          const txBytes = toNum(i["tx-byte"])
-            ifaces.map((i) => ({
+          const running = (i.running ?? "false") === "true"
+          const disabled = (i.disabled ?? "false") === "true"
+          const { rxBps, txBps } = sampleRate(prevWave, waveKey(interfaceName), rxBytes, txBytes, nowMs)
+          if (shouldIncludeIface(interfaceName, running, disabled)) {
+            sumRxMbps += bpsToMbps(rxBps)
+            sumTxMbps += bpsToMbps(txBps)
+          }
+          return {
+            serverId: srv.id,
+            interfaceName,
+            peerPublicKey: "",
+            sampledAt: now,
+            rxBytes,
+            txBytes,
+            rxBps,
+            txBps,
+            running,
+            disabled,
+          }
+        })
+        try {
+          const peers = await client.get<RosWgPeerTraffic[]>("/interface/wireguard/peers")
+          for (const p of peers) {
+            const interfaceName = (p.interface ?? "").trim()
+            const peerPublicKey = (p["public-key"] ?? "").trim()
+            if (!interfaceName || !peerPublicKey) continue
+            const rxBytes = toNum(p.rx)
+            const txBytes = toNum(p.tx)
+            const disabled = (p.disabled ?? "false") === "true" || p.disabled === "yes"
+            const running = !disabled
+            const { rxBps, txBps } = sampleRate(
+              prevWave,
+              waveKey(interfaceName, peerPublicKey),
+              rxBytes,
+              txBytes,
+              nowMs,
+            )
+            rows.push({
               serverId: srv.id,
-              interfaceName: i.name ?? "unknown",
+              interfaceName,
+              peerPublicKey,
               sampledAt: now,
-              rxBytes: toNum(i["rx-byte"]),
+              rxBytes,
-              txBytes: toNum(i["tx-byte"]),
+              txBytes,
-              rxBps: toNum(i["rx-bits-per-second"]),
+              rxBps,
-              txBps: toNum(i["tx-bits-per-second"]),
+              txBps,
-              running: (i.running ?? "false") === "true",
+              running,
-              disabled: (i.disabled ?? "false") === "true",
+              disabled,
-            })),
+            })
-          ).run()
+          }
+        } catch {
+          /* WG peers optional — iface samples already recorded */
+        }
+        if (rows.length > 0) {
+          db.insert(trafficSamples).values(rows).run()
         }
         snapshot.servers.push({
           serverId: srv.id,
@@ -107,8 +209,8 @@ export async function collectTrafficOnce(): Promise<TrafficRunSnapshot> {
           host: srv.host,
           ok: true,
           interfaces: ifaces.length,
-          sumRxMbps: Math.round(sumRx),
+          sumRxMbps: Math.round(sumRxMbps * 1000) / 1000,
-          sumTxMbps: Math.round(sumTx),
+          sumTxMbps: Math.round(sumTxMbps * 1000) / 1000,
         })
       } catch (err) {
         snapshot.servers.push({

backend/src/services/traffic-rate.test.ts

@@ -0,0 +1,125 @@
+import assert from "node:assert/strict"
+import {
+  bpsToMbps,
+  bucketAvg,
+  buildTrafficFromSamples,
+  isLoopbackName,
+  mergeBuiltTraffic,
+  parseMonitorTraffic,
+  rateBpsFromDelta,
+  shouldIncludeIface,
+  type TrafficSampleLike,
+} from "./traffic-rate.js"
+
+assert.equal(isLoopbackName("lo"), true)
+assert.equal(isLoopbackName("loopback"), true)
+assert.equal(isLoopbackName("ether1"), false)
+assert.equal(shouldIncludeIface("lo", true, false), false)
+assert.equal(shouldIncludeIface("ether1", true, false), true)
+assert.equal(shouldIncludeIface("ether1", false, false), false)
+assert.equal(shouldIncludeIface("ether1", true, true), false)
+assert.equal(shouldIncludeIface("lo", true, false, "lo"), true)
+
+assert.equal(rateBpsFromDelta(1000, 2000, 0, 1000), 8000)
+assert.equal(rateBpsFromDelta(1000, 500, 0, 1000), null)
+assert.equal(rateBpsFromDelta(1000, 2000, 1000, 1000), null)
+assert.equal(bpsToMbps(1_500_000), 1.5)
+assert.equal(bpsToMbps(400_000), 0.4)
+
+const buckets = bucketAvg(
+  [
+    { t: 0, v: 10 },
+    { t: 1000, v: 20 },
+  ],
+  0,
+  1000,
+  4,
+)
+assert.equal(buckets.length, 4)
+assert.equal(buckets[0], 10)
+assert.equal(buckets[3], 20)
+assert.equal(buckets[1], 0)
+assert.equal(buckets[2], 0)
+
+const t0 = "2026-09-06T10:00:00.000Z"
+const t1 = "2026-09-06T10:00:30.000Z"
+const t2 = "2026-09-06T10:01:00.000Z"
+const start = Date.parse(t0)
+const end = Date.parse(t2)
+
+const samples: TrafficSampleLike[] = [
+  { interfaceName: "ether1", sampledAt: t0, rxBytes: 1_000_000, txBytes: 500_000, rxBps: 0, txBps: 0, running: true, disabled: false },
+  { interfaceName: "ether1", sampledAt: t1, rxBytes: 1_000_000 + 3_750_000, txBytes: 500_000 + 1_875_000, rxBps: 0, txBps: 0, running: true, disabled: false },
+  { interfaceName: "ether1", sampledAt: t2, rxBytes: 100, txBytes: 50, rxBps: 0, txBps: 0, running: true, disabled: false },
+  { interfaceName: "lo", sampledAt: t0, rxBytes: 0, txBytes: 0, rxBps: 0, txBps: 0, running: true, disabled: false },
+  { interfaceName: "lo", sampledAt: t1, rxBytes: 9_000_000, txBytes: 9_000_000, rxBps: 0, txBps: 0, running: true, disabled: false },
+]
+
+const built = buildTrafficFromSamples(samples, start, end)
+assert.ok(built.rxPeak > 0, "peak RX from delta")
+assert.equal(built.rxNow, 1, "last valid delta after reset skip")
+assert.ok(built.rxSeries.some((v) => v > 0), "bucket series not flat")
+assert.ok(built.rxPeak <= 1.1, "lo excluded from peak")
+
+const live = parseMonitorTraffic([
+  { name: "ether1", "rx-bits-per-second": "2000000", "tx-bits-per-second": "500000" },
+  { name: "lo", "rx-bits-per-second": "8000000", "tx-bits-per-second": "8000000" },
+])
+assert.equal(live.rxMbps, 2)
+assert.equal(live.txMbps, 0.5)
+
+const onceOnly = parseMonitorTraffic(
+  { name: "ether1", "rx-bits-per-second": "1000000", "tx-bits-per-second": "0" },
+  { onlyInterface: "ether1" },
+)
+assert.equal(onceOnly.rxMbps, 1)
+
+const boundOnly = buildTrafficFromSamples(samples, start, end, ["ether1", "lo"])
+assert.ok(boundOnly.rxPeak > 0, "bound list includes ether1")
+assert.ok(boundOnly.rxPeak > built.rxPeak, "lo included when listed")
+
+const merged = mergeBuiltTraffic([
+  buildTrafficFromSamples(samples, start, end, "ether1"),
+  buildTrafficFromSamples(samples, start, end, "ether1"),
+])
+assert.equal(merged.rxNow, built.rxNow * 2)
+
+const wgSamples: TrafficSampleLike[] = [
+  { interfaceName: "wg-msk", sampledAt: t0, rxBytes: 2_000_000, txBytes: 1_000_000, rxBps: 0, txBps: 0, running: true, disabled: false },
+  { interfaceName: "wg-msk", sampledAt: t1, rxBytes: 2_000_000 + 1_875_000, txBytes: 1_000_000 + 937_500, rxBps: 0, txBps: 0, running: true, disabled: false },
+  { interfaceName: "wg-msk", sampledAt: t2, rxBytes: 50, txBytes: 25, rxBps: 0, txBps: 0, running: true, disabled: false },
+]
+const userAgg = mergeBuiltTraffic([
+  buildTrafficFromSamples(samples, start, end, "ether1"),
+  buildTrafficFromSamples(wgSamples, start, end, "wg-msk"),
+])
+const listed = buildTrafficFromSamples([...samples, ...wgSamples], start, end, ["ether1", "wg-msk"])
+assert.equal(userAgg.rxNow, listed.rxNow, "сумма привязанных ifaces = фильтр по списку имён")
+assert.ok(userAgg.rxNow > built.rxNow, "агрегация пользователя больше одного iface")
+
+const peerA: TrafficSampleLike[] = [
+  { interfaceName: "wg-server", peerPublicKey: "peer-a", sampledAt: t0, rxBytes: 1_000_000, txBytes: 100_000, rxBps: 0, txBps: 0, running: true, disabled: false },
+  { interfaceName: "wg-server", peerPublicKey: "peer-a", sampledAt: t1, rxBytes: 1_000_000 + 3_750_000, txBytes: 100_000 + 375_000, rxBps: 0, txBps: 0, running: true, disabled: false },
+]
+const peerB: TrafficSampleLike[] = [
+  { interfaceName: "wg-server", peerPublicKey: "peer-b", sampledAt: t0, rxBytes: 500_000, txBytes: 50_000, rxBps: 0, txBps: 0, running: true, disabled: false },
+  { interfaceName: "wg-server", peerPublicKey: "peer-b", sampledAt: t1, rxBytes: 500_000 + 1_875_000, txBytes: 50_000 + 187_500, rxBps: 0, txBps: 0, running: true, disabled: false },
+]
+const ifaceWg: TrafficSampleLike[] = [
+  { interfaceName: "wg-server", sampledAt: t0, rxBytes: 10_000_000, txBytes: 2_000_000, rxBps: 0, txBps: 0, running: true, disabled: false },
+  { interfaceName: "wg-server", sampledAt: t1, rxBytes: 10_000_000 + 7_500_000, txBytes: 2_000_000 + 750_000, rxBps: 0, txBps: 0, running: true, disabled: false },
+]
+const mixed = [...peerA, ...peerB, ...ifaceWg]
+const rateA = buildTrafficFromSamples(mixed, start, end, "wg-server", "peer-a")
+const rateB = buildTrafficFromSamples(mixed, start, end, "wg-server", "peer-b")
+const rateIface = buildTrafficFromSamples(mixed, start, end, "wg-server")
+assert.ok(rateA.rxNow > 0 && rateB.rxNow > 0, "скорость по каждому пиру")
+assert.notEqual(rateA.rxNow, rateB.rxNow, "два пира одного iface — разный rate")
+assert.ok(rateIface.rxNow > rateA.rxNow, "iface-level не суммирует пиров")
+assert.equal(
+  buildTrafficFromSamples(mixed, start, end).rxNow,
+  rateIface.rxNow,
+  "режим сервера игнорирует семплы пиров",
+)
+
+console.log("traffic-rate tests ok")

backend/src/services/traffic-rate.ts

@@ -0,0 +1,282 @@
+/** Чистые формулы трафика: дельты счётчиков, корзины series, monitor-traffic. */
+
+export const SERIES_POINTS = 60
+
+export interface TrafficSampleLike {
+  interfaceName: string
+  peerPublicKey?: string
+  sampledAt: string
+  rxBytes: number
+  txBytes: number
+  rxBps: number
+  txBps: number
+  running: boolean
+  disabled: boolean
+}
+
+export interface RatePoint {
+  t: number
+  rxMbps: number
+  txMbps: number
+}
+
+export interface BuiltTrafficSeries {
+  rxNow: number
+  txNow: number
+  rxPeak: number
+  txPeak: number
+  rxTotalGiB: number
+  txTotalGiB: number
+  sessions: number
+  rxSeries: number[]
+  txSeries: number[]
+}
+
+export interface MonitorLiveSample {
+  rxMbps: number
+  txMbps: number
+  at: string
+}
+
+export function isLoopbackName(name: string): boolean {
+  return /^(lo|loopback)(\d+)?$/i.test(name.trim())
+}
+
+export function shouldIncludeIface(
+  name: string,
+  running: boolean,
+  disabled: boolean,
+  onlyInterface?: string,
+): boolean {
+  if (onlyInterface) return name === onlyInterface
+  if (isLoopbackName(name)) return false
+  return running && !disabled
+}
+
+export function bpsToMbps(bps: number): number {
+  if (!Number.isFinite(bps) || bps <= 0) return 0
+  return Math.round((bps / 1_000_000) * 1000) / 1000
+}
+
+/** bits/s из соседних счётчиков. null = нельзя (Δt≤0 или сброс). */
+export function rateBpsFromDelta(
+  prevBytes: number,
+  nextBytes: number,
+  prevAtMs: number,
+  nextAtMs: number,
+): number | null {
+  const dtSec = (nextAtMs - prevAtMs) / 1000
+  if (!(dtSec > 0) || !Number.isFinite(dtSec)) return null
+  if (nextBytes < prevBytes) return null
+  return Math.round(((nextBytes - prevBytes) * 8) / dtSec)
+}
+
+export function bucketAvg(
+  points: Array<{ t: number; v: number }>,
+  rangeStartMs: number,
+  rangeEndMs: number,
+  target = SERIES_POINTS,
+): number[] {
+  const buckets = Array.from({ length: target }, () => 0)
+  const counts = Array.from({ length: target }, () => 0)
+  const span = rangeEndMs - rangeStartMs
+  if (span <= 0 || points.length === 0) return buckets
+  for (const p of points) {
+    const ratio = (p.t - rangeStartMs) / span
+    const i = Math.min(target - 1, Math.max(0, Math.floor(ratio * target)))
+    buckets[i] += p.v
+    counts[i] += 1
+  }
+  return buckets.map((sum, i) => (counts[i] > 0 ? sum / counts[i] : 0))
+}
+
+function parseIsoMs(iso: string): number {
+  const t = Date.parse(iso)
+  return Number.isFinite(t) ? t : 0
+}
+
+export function sampleSeriesKey(interfaceName: string, peerPublicKey = ""): string {
+  return `${interfaceName}\0${peerPublicKey}`
+}
+
+export function buildTrafficFromSamples(
+  rows: TrafficSampleLike[],
+  rangeStartMs: number,
+  rangeEndMs: number,
+  onlyInterface?: string | readonly string[],
+  peerPublicKey?: string,
+): BuiltTrafficSeries {
+  const empty: BuiltTrafficSeries = {
+    rxNow: 0,
+    txNow: 0,
+    rxPeak: 0,
+    txPeak: 0,
+    rxTotalGiB: 0,
+    txTotalGiB: 0,
+    sessions: 0,
+    rxSeries: Array.from({ length: SERIES_POINTS }, () => 0),
+    txSeries: Array.from({ length: SERIES_POINTS }, () => 0),
+  }
+  if (rows.length === 0) return empty
+
+  const bySeries = new Map<string, TrafficSampleLike[]>()
+  for (const r of rows) {
+    const peer = r.peerPublicKey ?? ""
+    const arr = bySeries.get(sampleSeriesKey(r.interfaceName, peer)) ?? []
+    arr.push(r)
+    bySeries.set(sampleSeriesKey(r.interfaceName, peer), arr)
+  }
+
+  const allowList = Array.isArray(onlyInterface)
+    ? onlyInterface
+    : (typeof onlyInterface === "string" ? [onlyInterface] : null)
+
+  const rxPoints: Array<{ t: number; v: number }> = []
+  const txPoints: Array<{ t: number; v: number }> = []
+  const byTs = new Map<number, { rx: number; tx: number }>()
+
+  let rxBytesDelta = 0
+  let txBytesDelta = 0
+  let sessions = 0
+
+  for (const [key, arr] of bySeries) {
+    const sep = key.indexOf("\0")
+    const name = sep >= 0 ? key.slice(0, sep) : key
+    const peer = sep >= 0 ? key.slice(sep + 1) : ""
+    if (allowList) {
+      if (!allowList.includes(name)) continue
+    } else if (isLoopbackName(name)) {
+      continue
+    }
+    if (peerPublicKey === undefined) {
+      if (peer !== "") continue
+    } else if (peer !== peerPublicKey) {
+      continue
+    }
+
+    const sorted = [...arr].sort((a, b) => a.sampledAt.localeCompare(b.sampledAt))
+    const last = sorted[sorted.length - 1]
+    if (!last) continue
+    if (!allowList && (!last.running || last.disabled)) continue
+
+    if (last.running && !last.disabled) sessions += 1
+
+    const first = sorted[0]
+    if (first) {
+      const dRx = last.rxBytes - first.rxBytes
+      const dTx = last.txBytes - first.txBytes
+      rxBytesDelta += dRx >= 0 ? dRx : last.rxBytes
+      txBytesDelta += dTx >= 0 ? dTx : last.txBytes
+    }
+
+    for (let i = 1; i < sorted.length; i++) {
+      const prev = sorted[i - 1]
+      const cur = sorted[i]
+      if (!prev || !cur) continue
+      if (!allowList && (!cur.running || cur.disabled)) continue
+      const t0 = parseIsoMs(prev.sampledAt)
+      const t1 = parseIsoMs(cur.sampledAt)
+      const rxBps = rateBpsFromDelta(prev.rxBytes, cur.rxBytes, t0, t1)
+      const txBps = rateBpsFromDelta(prev.txBytes, cur.txBytes, t0, t1)
+      if (rxBps == null && txBps == null) continue
+      const rxMbps = bpsToMbps(rxBps ?? 0)
+      const txMbps = bpsToMbps(txBps ?? 0)
+      const acc = byTs.get(t1) ?? { rx: 0, tx: 0 }
+      acc.rx += rxMbps
+      acc.tx += txMbps
+      byTs.set(t1, acc)
+    }
+  }
+
+  for (const [t, v] of byTs) {
+    rxPoints.push({ t, v: v.rx })
+    txPoints.push({ t, v: v.tx })
+  }
+
+  const rxSeries = bucketAvg(rxPoints, rangeStartMs, rangeEndMs)
+  const txSeries = bucketAvg(txPoints, rangeStartMs, rangeEndMs)
+  const lastTs = [...byTs.keys()].sort((a, b) => a - b).at(-1)
+  const last = lastTs != null ? byTs.get(lastTs) : undefined
+  const rxPeak = rxPoints.reduce((m, p) => Math.max(m, p.v), 0)
+  const txPeak = txPoints.reduce((m, p) => Math.max(m, p.v), 0)
+
+  return {
+    rxNow: last?.rx ?? 0,
+    txNow: last?.tx ?? 0,
+    rxPeak,
+    txPeak,
+    rxTotalGiB: Number((rxBytesDelta / (1024 ** 3)).toFixed(1)),
+    txTotalGiB: Number((txBytesDelta / (1024 ** 3)).toFixed(1)),
+    sessions,
+    rxSeries,
+    txSeries,
+  }
+}
+
+export function mergeBuiltTraffic(parts: BuiltTrafficSeries[]): BuiltTrafficSeries {
+  const empty: BuiltTrafficSeries = {
+    rxNow: 0,
+    txNow: 0,
+    rxPeak: 0,
+    txPeak: 0,
+    rxTotalGiB: 0,
+    txTotalGiB: 0,
+    sessions: 0,
+    rxSeries: Array.from({ length: SERIES_POINTS }, () => 0),
+    txSeries: Array.from({ length: SERIES_POINTS }, () => 0),
+  }
+  if (parts.length === 0) return empty
+  const acc = {
+    rxNow: 0,
+    txNow: 0,
+    rxPeak: 0,
+    txPeak: 0,
+    rxTotalGiB: 0,
+    txTotalGiB: 0,
+    sessions: 0,
+    rxSeries: Array.from({ length: SERIES_POINTS }, () => 0),
+    txSeries: Array.from({ length: SERIES_POINTS }, () => 0),
+  }
+  for (const p of parts) {
+    acc.rxNow += p.rxNow
+    acc.txNow += p.txNow
+    acc.rxPeak += p.rxPeak
+    acc.txPeak += p.txPeak
+    acc.rxTotalGiB += p.rxTotalGiB
+    acc.txTotalGiB += p.txTotalGiB
+    acc.sessions += p.sessions
+    for (let i = 0; i < SERIES_POINTS; i++) {
+      acc.rxSeries[i] += p.rxSeries[i] ?? 0
+      acc.txSeries[i] += p.txSeries[i] ?? 0
+    }
+  }
+  acc.rxTotalGiB = Number(acc.rxTotalGiB.toFixed(1))
+  acc.txTotalGiB = Number(acc.txTotalGiB.toFixed(1))
+  return acc
+}
+
+export function parseMonitorTraffic(
+  raw: unknown,
+  opts?: { onlyInterface?: string },
+): MonitorLiveSample {
+  const items = Array.isArray(raw) ? raw : raw != null ? [raw] : []
+  let rxBps = 0
+  let txBps = 0
+  for (const item of items) {
+    if (!item || typeof item !== "object") continue
+    const rec = item as Record<string, unknown>
+    const name = String(rec.name ?? rec.interface ?? "")
+    if (opts?.onlyInterface) {
+      if (name && name !== opts.onlyInterface) continue
+    } else if (isLoopbackName(name)) {
+      continue
+    }
+    rxBps += Number.parseFloat(String(rec["rx-bits-per-second"] ?? 0)) || 0
+    txBps += Number.parseFloat(String(rec["tx-bits-per-second"] ?? 0)) || 0
+  }
+  return {
+    rxMbps: bpsToMbps(rxBps),
+    txMbps: bpsToMbps(txBps),
+    at: new Date().toISOString(),
+  }
+}

backend/src/services/traffic-users.ts

@@ -0,0 +1,133 @@
+import { eq } from "drizzle-orm"
+import { db } from "../db/index.js"
+import { servers } from "../db/schema.js"
+import { listUsers } from "../modules/users/service/users-service.js"
+import { readServerSamplesInRange } from "./traffic-collector.js"
+import {
+  buildTrafficFromSamples,
+  mergeBuiltTraffic,
+  type BuiltTrafficSeries,
+} from "./traffic-rate.js"
+
+export interface BoundIfaceTrafficDto {
+  id: string
+  bindingId: string
+  userId: string
+  userLogin: string
+  userName: string
+  interfaceName: string
+  interfaceType: string
+  peerPublicKey: string
+  peerName: string
+  comment: string
+  serverId: string
+  serverName: string
+  serverSite: string
+  serverCountry: string
+  rxNow: number
+  txNow: number
+  rxPeak: number
+  txPeak: number
+  rxTotal: number
+  txTotal: number
+  rxSeries: number[]
+  txSeries: number[]
+  status: "online" | "offline"
+}
+
+export interface UserTrafficDto {
+  id: string
+  login: string
+  displayName: string
+  role: string
+  active: boolean
+  interfaces: BoundIfaceTrafficDto[]
+  rxNow: number
+  txNow: number
+  rxPeak: number
+  txPeak: number
+  rxTotal: number
+  txTotal: number
+  rxSeries: number[]
+  txSeries: number[]
+}
+
+function seriesFromBuilt(built: BuiltTrafficSeries) {
+  return {
+    rxNow: built.rxNow,
+    txNow: built.txNow,
+    rxPeak: built.rxPeak,
+    txPeak: built.txPeak,
+    rxTotal: built.rxTotalGiB,
+    txTotal: built.txTotalGiB,
+    rxSeries: built.rxSeries,
+    txSeries: built.txSeries,
+  }
+}
+
+function serverStatus(serverId: number): "online" | "offline" {
+  const row = db.select().from(servers).where(eq(servers.id, serverId)).limit(1).all()[0]
+  if (!row?.enabled) return "offline"
+  return "online"
+}
+
+export function buildUserTrafficList(rangeStartMs: number, rangeEndMs: number): UserTrafficDto[] {
+  const sinceIso = new Date(rangeStartMs).toISOString()
+  const users = listUsers()
+  const sampleCache = new Map<number, ReturnType<typeof readServerSamplesInRange>>()
+
+  return users.map((user) => {
+    const parts: BuiltTrafficSeries[] = []
+    const interfaces: BoundIfaceTrafficDto[] = []
+
+    for (const b of user.bindings) {
+      let rows = sampleCache.get(b.serverId)
+      if (!rows) {
+        rows = readServerSamplesInRange(b.serverId, sinceIso)
+        sampleCache.set(b.serverId, rows)
+      }
+      const peerKey = b.peerPublicKey ?? ""
+      const built = buildTrafficFromSamples(rows, rangeStartMs, rangeEndMs, b.interfaceName, peerKey)
+      parts.push(built)
+      const last = [...rows.filter((r) =>
+        r.interfaceName === b.interfaceName && (r.peerPublicKey ?? "") === peerKey,
+      )]
+        .sort((a, c) => a.sampledAt.localeCompare(c.sampledAt))
+        .at(-1)
+      const running = Boolean(last?.running) && !last?.disabled
+      interfaces.push({
+        id: `${b.userId}:${b.serverId}:${b.interfaceName}:${peerKey || "_iface"}`,
+        bindingId: b.id,
+        userId: user.id,
+        userLogin: user.login,
+        userName: user.name,
+        interfaceName: b.interfaceName,
+        interfaceType: b.interfaceType,
+        peerPublicKey: peerKey,
+        peerName: b.peerName ?? "",
+        comment: b.comment,
+        serverId: String(b.serverId),
+        serverName: b.serverName,
+        serverSite: b.serverSite,
+        serverCountry: b.serverCountry,
+        ...seriesFromBuilt(built),
+        status: running && serverStatus(b.serverId) === "online" ? "online" : "offline",
+      })
+    }
+
+    const merged = mergeBuiltTraffic(parts)
+    return {
+      id: user.id,
+      login: user.login,
+      displayName: user.name,
+      role: user.role,
+      active: user.active,
+      interfaces,
+      ...seriesFromBuilt(merged),
+    }
+  })
+}
+
+export function buildBoundInterfaceTraffic(rangeStartMs: number, rangeEndMs: number): BoundIfaceTrafficDto[] {
+  return buildUserTrafficList(rangeStartMs, rangeEndMs).flatMap((u) => u.interfaces)
+}

backend/src/services/wireguard-live.ts

@@ -211,4 +211,51 @@ export function getEnabledServerById(serverId: string | number): ServerRow | nul
   return db.select().from(servers).where(eq(servers.id, id)).limit(1).all()[0] ?? null
 }
 
+export type CatalogWgPeer = {
+  interfaceName: string
+  publicKey: string
+  name: string
+  comment: string
+  allowedIps: string[]
+  latestHandshake?: string
+  disabled: boolean
+}
+
+const WG_CATALOG_TIMEOUT_MS = 5_000
+
+export async function listWireGuardPeersForCatalog(serverId: number): Promise<{
+  peers: CatalogWgPeer[]
+  error?: string
+}> {
+  const row = getEnabledServerById(serverId)
+  if (!row) return { peers: [], error: "Сервер не найден" }
+  try {
+    const client = MikrotikClient.fromServer(row)
+    const peersRaw = await Promise.race([
+      client.get<RosWireGuardPeer[]>("/interface/wireguard/peers"),
+      new Promise<never>((_, reject) => {
+        setTimeout(() => reject(new Error("Таймаут RouterOS")), WG_CATALOG_TIMEOUT_MS)
+      }),
+    ])
+    const peers: CatalogWgPeer[] = peersRaw.flatMap((p, idx) => {
+      const mapped = mapPeer(p, idx)
+      const interfaceName = (p.interface ?? "").trim()
+      const publicKey = mapped.publicKey.trim()
+      if (!interfaceName || !publicKey) return []
+      return [{
+        interfaceName,
+        publicKey,
+        name: mapped.name ?? "",
+        comment: mapped.comment ?? "",
+        allowedIps: mapped.allowedIps,
+        latestHandshake: mapped.latestHandshake,
+        disabled: mapped.disabled === true,
+      }]
+    })
+    return { peers }
+  } catch (e) {
+    return { peers: [], error: e instanceof Error ? e.message : String(e) }
+  }
+}
+
 export { type RosWireGuard, type RosWireGuardPeer }

backend/src/types/server.ts

@@ -345,8 +345,24 @@ export interface RosFirewallFilter {
   "dynamic"?:           string
   "bytes"?:             string
   "packets"?:           string
+  "log"?:               string
+  "log-prefix"?:        string
 }
 
+export interface RosFirewallAddressList {
+  ".id":             string
+  list:              string
+  address:           string
+  comment?:          string
+  disabled?:         string
+  timeout?:          string
+  dynamic?:          string
+  "creation-time"?:  string
+}
+
+export type FirewallFamily = "ip" | "ip6"
+export type FirewallTable = "filter" | "nat" | "mangle" | "raw"
+
 export interface RosLogEntry {
   ".id":     string
   "time":    string

components/app-sidebar.tsx

@@ -35,6 +35,7 @@ import {
   ShieldCheckIcon,
   BoxIcon,
   BadgeCheckIcon,
+  UsersIcon,
 } from "lucide-react"
 import { useDataSource } from "@/lib/data-source"
 import { useEvoBGP } from "@/lib/evobgp-context"
@@ -70,6 +71,7 @@ const navStructure: { label: string; items: NavItemBase[] }[] = [
     label: "Управление",
     items: [
       { title: "Серверы", url: "/servers", icon: <ServerIcon /> },
+      { title: "Пользователи", url: "/users", icon: <UsersIcon /> },
       { title: "Фильтры", url: "/filters", icon: <FilterIcon /> },
       { title: "Рекурсивные маршруты", url: "/recursive-routes", icon: <RouteIcon /> },
       { title: "Firewall", url: "/firewall", icon: <ShieldIcon /> },
@@ -102,7 +104,7 @@ const navStructure: { label: string; items: NavItemBase[] }[] = [
   },
 ]
 
-type LiveSidebarCounts = SidebarCountsDto & { greTunnels?: number; certificates?: number; wireguard?: number }
+type LiveSidebarCounts = SidebarCountsDto & { greTunnels?: number; certificates?: number; wireguard?: number; users?: number }
 
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
   const { mode, backendUrl, prefsHydrated } = useDataSource()
@@ -161,6 +163,7 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
       if (!liveCounts) return undefined
 
       if (url === "/servers") return formatSidebarBadgeCount(liveCounts.servers)
+      if (url === "/users") return formatSidebarBadgeCount(liveCounts.users ?? 0)
       if (url === "/filters") return formatSidebarBadgeCount(liveCounts.filterRules)
       if (url === "/uptime") return formatSidebarBadgeCount(liveCounts.monitoringItems)
       if (url === "/gre") return formatSidebarBadgeCount(liveCounts.greTunnels ?? 0)

components/command-palette.tsx

@@ -8,7 +8,7 @@ import {
   GlobeIcon, NetworkIcon, LayersIcon, TagIcon, ServerIcon, FilterIcon,
   ShieldIcon, ShieldCheckIcon, CableIcon, BoxIcon, BadgeCheckIcon,
   HardDriveIcon, RouteIcon, GitForkIcon, GitMergeIcon, ScanLineIcon,
-  TerminalIcon, BellIcon, SettingsIcon, DatabaseIcon,
+  TerminalIcon, BellIcon, SettingsIcon, DatabaseIcon, UsersIcon,
 } from "lucide-react"
 
 // ─── Command item definition ──────────────────────────────────────────────────
@@ -36,6 +36,7 @@ const ALL_ITEMS: CommandItem[] = [
   { id: "communities",  title: "BGP Communities",          group: "Данные",      url: "/communities",     icon: <TagIcon />, keywords: ["community","bgp","теги"] },
   // Управление
   { id: "servers",      title: "Серверы",                  group: "Управление",  url: "/servers",         icon: <ServerIcon />, keywords: ["router","mikrotik","сервер","routeros"] },
+  { id: "users",        title: "Пользователи",             group: "Управление",  url: "/users",           icon: <UsersIcon />, keywords: ["user","клиент","оператор","привязка","интерфейс"] },
   { id: "filters",      title: "Фильтры",                  group: "Управление",  url: "/filters",         icon: <FilterIcon />, keywords: ["filter","routing","маршрутизация"] },
   { id: "recursive-routes", title: "Рекурсивные маршруты",  group: "Управление",  url: "/recursive-routes", icon: <RouteIcon />, keywords: ["recursive","route","static","маршруты"] },
   { id: "firewall",     title: "Firewall",                 group: "Управление",  url: "/firewall",        icon: <ShieldIcon />, keywords: ["rules","правила","брандмауэр","acl"] },

components/data-grids/data-collection-scheduler-data-grid.tsx

@@ -8,7 +8,7 @@ import {
 } from "@tanstack/react-table"
 import type { SchedulerJobStatusDto } from "@/lib/scheduler-settings"
 import { FormToggle } from "@/components/form-kit"
-import { Badge } from "@/components/ui/badge"
+import { Badge } from "@/components/reui/badge"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"

components/data-grids/firewall-rules-data-grid.tsx

@@ -23,8 +23,11 @@ import {
   DATA_GRID_CELL_PAD,
   DATA_GRID_CELL_PAD_FIRST,
   DATA_GRID_CELL_PAD_LAST,
+  DATA_GRID_CONTAINER_CLASS,
 } from "@/components/data-grids/shared/data-grid-layout"
 import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+import { DataGridContainer, DataGridTableDndRowHandle, DataGridTableDndRows } from "@/components/reui/data-grid"
+import type { DragEndEvent } from "@dnd-kit/core"
 import { EmptyState } from "@/components/empty-state"
 import {
   CopyIcon,
@@ -89,16 +92,41 @@ interface FirewallRulesDataGridProps {
   rules: FirewallRule[]
   onToggle: (id: string) => void
   onEdit: (rule: FirewallRule) => void
+  onDelete?: (rule: FirewallRule) => void
+  onReorder?: (activeId: string, overId: string) => void
+  showServer?: boolean
 }
 
-function FirewallRulesDataGrid({ rules, onToggle, onEdit }: FirewallRulesDataGridProps) {
+function FirewallRulesDataGrid({
+  rules,
+  onToggle,
+  onEdit,
+  onDelete,
+  onReorder,
+  showServer = false,
+}: FirewallRulesDataGridProps) {
   const indexedRules = useMemo(
     () => rules.map((rule, index) => ({ ...rule, _index: index + 1 })),
     [rules],
   )
+  const reorderable = Boolean(onReorder)
+  const indexPad = reorderable ? DATA_GRID_CELL_PAD : DATA_GRID_CELL_PAD_FIRST
 
   const columns = useMemo<ColumnDef<FirewallRule & { _index: number }>[]>(
     () => [
+      ...(reorderable
+        ? [{
+            id: "drag",
+            header: () => <span className="sr-only">Порядок</span>,
+            enableSorting: false,
+            cell: () => <DataGridTableDndRowHandle />,
+            size: 40,
+            meta: {
+              headerClassName: DATA_GRID_CELL_PAD_FIRST,
+              cellClassName: DATA_GRID_CELL_PAD_FIRST,
+            },
+          } satisfies ColumnDef<FirewallRule & { _index: number }>]
+        : []),
       {
         id: "index",
         accessorKey: "_index",
@@ -114,10 +142,23 @@ function FirewallRulesDataGrid({ rules, onToggle, onEdit }: FirewallRulesDataGri
         ),
         size: 48,
         meta: {
-          headerClassName: DATA_GRID_CELL_PAD_FIRST,
+          headerClassName: indexPad,
-          cellClassName: DATA_GRID_CELL_PAD_FIRST,
+          cellClassName: indexPad,
         },
       },
+      ...(showServer
+        ? [{
+            id: "server",
+            accessorFn: (row: FirewallRule & { _index: number }) => row.serverName ?? row.serverId ?? "",
+            header: ({ column }) => <DataGridSortHeader column={column} title="Сервер" />,
+            cell: ({ row }) => (
+              <span className="font-mono text-xs text-muted-foreground truncate">
+                {row.original.serverName || row.original.serverId || "—"}
+              </span>
+            ),
+            meta: { headerTitle: "Сервер", headerClassName: DATA_GRID_CELL_PAD, cellClassName: DATA_GRID_CELL_PAD },
+          } satisfies ColumnDef<FirewallRule & { _index: number }>]
+        : []),
       {
         id: "chain",
         accessorKey: "chain",
@@ -261,7 +302,7 @@ function FirewallRulesDataGrid({ rules, onToggle, onEdit }: FirewallRulesDataGri
                     {r.enabled ? "Отключить" : "Включить"}
                   </DropdownMenuItem>
                   <DropdownMenuSeparator />
-                  <DropdownMenuItem variant="destructive">
+                  <DropdownMenuItem variant="destructive" onClick={() => onDelete?.(r)}>
                     <Trash2Icon className="size-4" />
                     Удалить правило
                   </DropdownMenuItem>
@@ -274,17 +315,24 @@ function FirewallRulesDataGrid({ rules, onToggle, onEdit }: FirewallRulesDataGri
         meta: { headerClassName: DATA_GRID_CELL_PAD_LAST, cellClassName: DATA_GRID_CELL_PAD_LAST },
       },
     ],
-    [onEdit, onToggle],
+    [onEdit, onToggle, onDelete, showServer, reorderable, indexPad],
   )
 
   const table = useReactTable({
     data: indexedRules,
     columns,
     getCoreRowModel: getCoreRowModel(),
-    getSortedRowModel: getSortedRowModel(),
+    ...(reorderable ? {} : { getSortedRowModel: getSortedRowModel() }),
+    enableSorting: !reorderable,
     getRowId: (row) => row.id,
   })
 
+  function handleDragEnd(event: DragEndEvent) {
+    const { active, over } = event
+    if (!over || active.id === over.id || !onReorder) return
+    onReorder(String(active.id), String(over.id))
+  }
+
   if (rules.length === 0) {
     return (
       <EmptyState
@@ -304,7 +352,16 @@ function FirewallRulesDataGrid({ rules, onToggle, onEdit }: FirewallRulesDataGri
         headerRow: "border-b border-border",
         bodyRow: cn("group/row", "[&:has([data-rule-disabled=true])]:opacity-40"),
       }}
-    />
+    >
+      {reorderable ? (
+        <DataGridContainer border={false} className={DATA_GRID_CONTAINER_CLASS}>
+          <DataGridTableDndRows
+            dataIds={indexedRules.map((r) => r.id)}
+            handleDragEnd={handleDragEnd}
+          />
+        </DataGridContainer>
+      ) : undefined}
+    </DataGridShell>
   )
 }
 

components/data-grids/settings-access-summary-data-grid.tsx

@@ -1,167 +0,0 @@
-"use client"
-
-import { useMemo } from "react"
-import type { Server } from "@/lib/data"
-import { CompactDataGrid, type CompactDataGridColumn } from "@/components/data-grids/compact-data-grid"
-import { cn } from "@/lib/utils"
-
-type PermLevel = "none" | "read" | "write"
-type Role = "admin" | "operator" | "viewer"
-
-interface SectionPerm {
-  section: string
-  level: PermLevel
-}
-
-interface ServerPerm {
-  serverId: string
-  level: PermLevel
-}
-
-export interface AccessSummaryUser {
-  id: string
-  name: string
-  avatar: string
-  active: boolean
-  role: Role
-  sections: SectionPerm[]
-  servers: ServerPerm[]
-}
-
-function AvatarCircle({ avatar, active }: { avatar: string; active: boolean }) {
-  return (
-    <div
-      className={cn(
-        "size-7 rounded-full flex items-center justify-center text-[10px] font-bold shrink-0",
-        active ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground",
-      )}
-    >
-      {avatar}
-    </div>
-  )
-}
-
-interface SettingsAccessSummaryDataGridProps {
-  users: AccessSummaryUser[]
-  servers: Server[]
-  allSectionsCount: number
-}
-
-function SettingsAccessSummaryDataGrid({
-  users,
-  servers,
-  allSectionsCount,
-}: SettingsAccessSummaryDataGridProps) {
-  const columns = useMemo<CompactDataGridColumn<AccessSummaryUser>[]>(
-    () => [
-      {
-        id: "name",
-        header: "Пользователь",
-        accessorKey: "name",
-        cell: (u) => (
-          <div className="flex items-center gap-2">
-            <AvatarCircle avatar={u.avatar} active={u.active} />
-            <span className="text-sm font-medium">{u.name}</span>
-          </div>
-        ),
-      },
-      {
-        id: "sections",
-        header: "Разделы",
-        enableSorting: false,
-        cell: (u) => {
-          const writeSections =
-            u.role === "admin"
-              ? []
-              : u.sections.filter((s) => s.level === "write").map((s) => s.section)
-          const readSections =
-            u.role === "admin"
-              ? []
-              : u.sections.filter((s) => s.level === "read").map((s) => s.section)
-          return (
-            <span className="text-xs text-muted-foreground">
-              {u.role === "admin" ? (
-                <span className="text-violet-600 dark:text-violet-400 font-medium">
-                  Все ({allSectionsCount})
-                </span>
-              ) : (
-                <span>{readSections.length + writeSections.length} из {allSectionsCount}</span>
-              )}
-            </span>
-          )
-        },
-      },
-      {
-        id: "servers",
-        header: "Серверы",
-        enableSorting: false,
-        cell: (u) => {
-          const accessServers =
-            u.role === "admin"
-              ? servers
-              : servers.filter((s) => u.servers.find((p) => p.serverId === s.id && p.level !== "none"))
-          return (
-            <span className="text-xs text-muted-foreground">
-              {u.role === "admin" ? (
-                <span className="text-violet-600 dark:text-violet-400 font-medium">
-                  Все ({servers.length})
-                </span>
-              ) : (
-                <span>
-                  {accessServers.length} из {servers.length}
-                </span>
-              )}
-            </span>
-          )
-        },
-      },
-      {
-        id: "write",
-        header: "Права записи",
-        enableSorting: false,
-        cell: (u) => {
-          const writeSections =
-            u.role === "admin"
-              ? []
-              : u.sections.filter((s) => s.level === "write").map((s) => s.section)
-          return (
-            <div className="flex flex-wrap gap-1">
-              {u.role === "admin" ? (
-                <span className="text-[10px] px-1.5 py-0.5 rounded bg-violet-500/10 text-violet-600 dark:text-violet-400 border border-violet-500/20">
-                  Полный доступ
-                </span>
-              ) : writeSections.length === 0 ? (
-                <span className="text-[10px] text-muted-foreground">Только просмотр</span>
-              ) : (
-                <>
-                  {writeSections.slice(0, 3).map((s) => (
-                    <span
-                      key={s}
-                      className="text-[10px] px-1.5 py-0.5 rounded bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border border-emerald-500/20"
-                    >
-                      {s}
-                    </span>
-                  ))}
-                  {writeSections.length > 3 && (
-                    <span className="text-[10px] text-muted-foreground">+{writeSections.length - 3}</span>
-                  )}
-                </>
-              )}
-            </div>
-          )
-        },
-      },
-    ],
-    [allSectionsCount, servers],
-  )
-
-  return (
-    <CompactDataGrid
-      data={users}
-      columns={columns}
-      emptyTitle="Нет пользователей"
-    />
-  )
-}
-
-export { SettingsAccessSummaryDataGrid, type SettingsAccessSummaryDataGridProps }

components/data-grids/snapshot-data-grid.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { Badge } from "@/components/ui/badge"
+import { Badge } from "@/components/reui/badge"
 import { cn } from "@/lib/utils"
 import {
   CompactDataGrid,
@@ -35,11 +35,11 @@ function SnapshotOkBadge({
   errLabel?: string
 }) {
   return ok ? (
-    <Badge variant="outline" className="text-[10px] border-emerald-500/40 text-emerald-700 dark:text-emerald-400">
+    <Badge variant="success-outline" size="sm" className="text-[10px]">
       {okLabel}
     </Badge>
   ) : (
-    <Badge variant="outline" className="text-[10px] border-destructive/50 text-destructive">
+    <Badge variant="destructive-outline" size="sm" className="text-[10px]">
       {errLabel}
     </Badge>
   )

components/data-grids/users-data-grid.tsx

@@ -0,0 +1,244 @@
+"use client"
+
+import { useMemo } from "react"
+import {
+  type ColumnDef,
+  getCoreRowModel,
+  getExpandedRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/reui/badge"
+import { cn } from "@/lib/utils"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import {
+  DATA_GRID_CELL_PAD,
+  DATA_GRID_CELL_PAD_FIRST,
+  DATA_GRID_CELL_PAD_LAST,
+} from "@/components/data-grids/shared/data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+import { UsersExpandedDetail } from "@/components/data-grids/users-expanded-detail"
+import { EmptyState } from "@/components/empty-state"
+import { ALL_SECTIONS, ROLE_LABEL, type AppUser } from "@/lib/users"
+import {
+  CableIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
+  PencilIcon,
+  TrashIcon,
+  UsersIcon,
+} from "lucide-react"
+
+function AvatarCircle({ avatar, active }: { avatar: string; active: boolean }) {
+  return (
+    <div
+      className={cn(
+        "size-8 rounded-full flex items-center justify-center text-white text-[10px] font-semibold shrink-0 bg-gradient-to-br from-blue-500 to-violet-500",
+        !active && "opacity-50",
+      )}
+    >
+      {avatar}
+    </div>
+  )
+}
+
+interface UsersDataGridProps {
+  users: AppUser[]
+  serversCount: number
+  allSectionsCount?: number
+  isLoading?: boolean
+  onEdit: (user: AppUser) => void
+  onDelete: (user: AppUser) => void
+}
+
+function UsersDataGrid({
+  users,
+  serversCount,
+  allSectionsCount = ALL_SECTIONS.length,
+  isLoading,
+  onEdit,
+  onDelete,
+}: UsersDataGridProps) {
+  const columns = useMemo<ColumnDef<AppUser>[]>(
+    () => [
+      {
+        id: "name",
+        accessorKey: "name",
+        header: ({ column }) => (
+          <DataGridSortHeader column={column} title="Пользователь" className="ml-1" />
+        ),
+        cell: ({ row }) => {
+          const u = row.original
+          const expanded = row.getIsExpanded()
+          return (
+            <div className="flex items-start gap-2 min-w-0">
+              {expanded ? (
+                <ChevronDownIcon className="size-3.5 mt-2 shrink-0 text-muted-foreground" />
+              ) : (
+                <ChevronRightIcon className="size-3.5 mt-2 shrink-0 text-muted-foreground/40" />
+              )}
+              <AvatarCircle avatar={u.avatar} active={u.active} />
+              <div className="min-w-0">
+                <p className="text-sm font-medium truncate">{u.name}</p>
+                <p className="text-xs font-mono text-muted-foreground truncate">{u.email || u.login}</p>
+              </div>
+            </div>
+          )
+        },
+        meta: {
+          headerTitle: "Пользователь",
+          headerClassName: DATA_GRID_CELL_PAD_FIRST,
+          cellClassName: DATA_GRID_CELL_PAD_FIRST,
+          expandedContent: (row: AppUser) => (
+            <UsersExpandedDetail
+              user={row}
+              serversCount={serversCount}
+              allSectionsCount={allSectionsCount}
+            />
+          ),
+        },
+      },
+      {
+        id: "role",
+        accessorKey: "role",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Роль" />,
+        cell: ({ row }) => (
+          <Badge
+            variant={row.original.role === "admin" ? "primary-light" : row.original.role === "operator" ? "info-light" : "outline"}
+            size="sm"
+          >
+            {ROLE_LABEL[row.original.role]}
+          </Badge>
+        ),
+        meta: {
+          headerTitle: "Роль",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "last",
+        accessorKey: "last",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Последний вход" />,
+        cell: ({ row }) => (
+          <span className="text-xs text-muted-foreground">{row.original.last}</span>
+        ),
+        meta: {
+          headerTitle: "Последний вход",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "ifaces",
+        accessorFn: (u) => u.bindings.length,
+        header: ({ column }) => <DataGridSortHeader column={column} title="Интерфейсы" />,
+        cell: ({ row }) => (
+          <span className="inline-flex items-center gap-1 text-xs text-muted-foreground tabular-nums">
+            <CableIcon className="size-3.5" />
+            {row.original.bindings.length}
+          </span>
+        ),
+        meta: {
+          headerTitle: "Интерфейсы",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "status",
+        accessorKey: "active",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Статус" />,
+        cell: ({ row }) => (
+          <span
+            className={cn(
+              "text-[11px] font-medium",
+              row.original.active ? "text-success" : "text-muted-foreground",
+            )}
+          >
+            {row.original.active ? "Активен" : "Заблокирован"}
+          </span>
+        ),
+        meta: {
+          headerTitle: "Статус",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "actions",
+        enableSorting: false,
+        header: () => <span className="sr-only">Действия</span>,
+        cell: ({ row }) => {
+          const u = row.original
+          return (
+            <div
+              className="flex items-center justify-end gap-0.5"
+              onClick={(e) => e.stopPropagation()}
+              onKeyDown={(e) => e.stopPropagation()}
+            >
+              <Button
+                size="sm"
+                variant="ghost"
+                className="size-7 p-0 text-muted-foreground hover:text-foreground"
+                onClick={() => onEdit(u)}
+                title="Редактировать"
+              >
+                <PencilIcon className="size-3.5" />
+              </Button>
+              <Button
+                size="sm"
+                variant="ghost"
+                className="size-7 p-0 text-muted-foreground hover:text-destructive"
+                onClick={() => onDelete(u)}
+                title="Удалить"
+              >
+                <TrashIcon className="size-3.5" />
+              </Button>
+            </div>
+          )
+        },
+        meta: {
+          headerTitle: "Действия",
+          headerClassName: DATA_GRID_CELL_PAD_LAST,
+          cellClassName: DATA_GRID_CELL_PAD_LAST,
+        },
+      },
+    ],
+    [allSectionsCount, onDelete, onEdit, serversCount],
+  )
+
+  const table = useReactTable({
+    data: users,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getExpandedRowModel: getExpandedRowModel(),
+    getRowId: (row) => row.id,
+    getRowCanExpand: () => true,
+  })
+
+  if (!isLoading && users.length === 0) {
+    return (
+      <EmptyState
+        icon={<UsersIcon className="size-4" />}
+        title="Нет пользователей"
+        description="Добавьте пользователя, чтобы привязать интерфейсы и учитывать трафик"
+        className="border-0 py-12"
+      />
+    )
+  }
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={users.length}
+      isLoading={isLoading}
+      loadingMode="skeleton"
+      onRowClick={(row) => table.getRow(row.id).toggleExpanded()}
+    />
+  )
+}
+
+export { UsersDataGrid, type UsersDataGridProps }

components/data-grids/users-expanded-detail.tsx

@@ -0,0 +1,132 @@
+"use client"
+
+import { Badge } from "@/components/reui/badge"
+import { IconTile } from "@/components/reui/icon-tile"
+import { Flag } from "@/components/flag"
+import { cn } from "@/lib/utils"
+import {
+  ALL_SECTIONS,
+  groupBindingsByServer,
+  IFACE_TYPE_LABEL,
+  summarizeUserAccess,
+  type AppUser,
+  type InterfaceType,
+} from "@/lib/users"
+import { CableIcon, KeyRoundIcon, NetworkIcon, ShieldIcon } from "lucide-react"
+
+const TYPE_VARIANT: Record<InterfaceType, "outline" | "info-light" | "success-light" | "secondary"> = {
+  ether: "outline",
+  gre: "info-light",
+  wg: "success-light",
+  other: "secondary",
+}
+
+const TYPE_ICON: Record<InterfaceType, { icon: typeof CableIcon; className: string }> = {
+  ether: { icon: CableIcon, className: "text-muted-foreground" },
+  gre: { icon: NetworkIcon, className: "text-info" },
+  wg: { icon: ShieldIcon, className: "text-success" },
+  other: { icon: CableIcon, className: "text-muted-foreground" },
+}
+
+interface UsersExpandedDetailProps {
+  user: AppUser
+  serversCount: number
+  allSectionsCount?: number
+}
+
+function UsersExpandedDetail({
+  user,
+  serversCount,
+  allSectionsCount = ALL_SECTIONS.length,
+}: UsersExpandedDetailProps) {
+  const access = summarizeUserAccess(user, serversCount, allSectionsCount)
+  const groups = groupBindingsByServer(user.bindings)
+
+  return (
+    <div className="flex flex-col gap-5 px-5 py-5 bg-muted/20">
+      <div className="flex flex-wrap items-center gap-x-6 gap-y-2 text-xs">
+        <span className="text-muted-foreground">
+          Разделы:{" "}
+          <span className="font-mono text-foreground">
+            {access.sectionsGranted}/{access.sectionsTotal}
+          </span>
+        </span>
+        <span className="text-muted-foreground">
+          Серверы:{" "}
+          <span className="font-mono text-foreground">
+            {access.serversGranted}/{access.serversTotal}
+          </span>
+        </span>
+        {access.writeKind === "full" ? (
+          <Badge variant="success-light" size="sm">Полный доступ</Badge>
+        ) : access.writeKind === "none" ? (
+          <Badge variant="outline" size="sm">Только просмотр</Badge>
+        ) : (
+          <span className="inline-flex flex-wrap items-center gap-1">
+            {access.writeSections.map((section) => (
+              <Badge key={section} variant="info-light" size="sm">{section}</Badge>
+            ))}
+          </span>
+        )}
+      </div>
+
+      {groups.length === 0 ? (
+        <p className="text-xs text-muted-foreground">Нет привязанных интерфейсов</p>
+      ) : (
+        groups.map((g) => {
+          const items = g.types.flatMap((tg) => tg.items)
+          return (
+            <div key={g.serverId}>
+              <div className="flex items-center gap-3 mb-3">
+                <p className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider">
+                  {g.serverName}
+                </p>
+                <Flag code={g.serverCountry} size={12} />
+                <span className="text-[11px] font-mono text-muted-foreground">{g.serverSite}</span>
+              </div>
+              <div className="grid grid-cols-2 sm:grid-cols-3 xl:grid-cols-5 gap-2">
+                {items.map((b) => {
+                  const meta = TYPE_ICON[b.interfaceType]
+                  const Icon = b.interfaceType === "wg" && b.peerPublicKey ? KeyRoundIcon : meta.icon
+                  const iconClass = b.interfaceType === "wg" && b.peerPublicKey ? "text-success" : meta.className
+                  return (
+                    <div
+                      key={b.id}
+                      className="flex items-start gap-2 rounded-md border px-3 py-2.5"
+                    >
+                      <IconTile variant="elevated" className={cn("size-10.5 shrink-0", iconClass)}>
+                        <Icon />
+                      </IconTile>
+                      <div className="min-w-0">
+                        <p className="text-xs font-mono font-medium leading-tight truncate">
+                          {b.interfaceType === "wg" && (b.peerName || b.peerPublicKey)
+                            ? `${b.peerName || "peer"} · ${b.interfaceName}`
+                            : b.interfaceName}
+                        </p>
+                        <div className="flex flex-wrap items-center gap-1 mt-0.5">
+                          <Badge variant={TYPE_VARIANT[b.interfaceType]} size="sm">
+                            {IFACE_TYPE_LABEL[b.interfaceType]}
+                          </Badge>
+                          {b.interfaceType === "wg" && !(b.peerPublicKey ?? "") ? (
+                            <Badge variant="warning-light" size="sm">весь интерфейс</Badge>
+                          ) : null}
+                          {b.comment ? (
+                            <span className="text-[10px] text-muted-foreground leading-tight truncate">
+                              {b.comment}
+                            </span>
+                          ) : null}
+                        </div>
+                      </div>
+                    </div>
+                  )
+                })}
+              </div>
+            </div>
+          )
+        })
+      )}
+    </div>
+  )
+}
+
+export { UsersExpandedDetail, TYPE_VARIANT, type UsersExpandedDetailProps }

components/data-grids/wireguard-data-grid.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useMemo } from "react"
+import { useMemo, type ReactNode } from "react"
 import {
   type ColumnDef,
   getCoreRowModel,
@@ -11,6 +11,7 @@ import {
 import type { WireGuardInterface } from "@/lib/data"
 import { Flag } from "@/components/flag"
 import { cn } from "@/lib/utils"
+import { Badge } from "@/components/reui/badge"
 import { Button } from "@/components/ui/button"
 import {
   DropdownMenu,
@@ -47,6 +48,8 @@ export interface WgIfaceWithServer extends WireGuardInterface {
 
 interface WireguardDataGridProps {
   interfaces: WgIfaceWithServer[]
+  compactServer?: boolean
+  emptyAction?: ReactNode
   onExport: (iface: WgIfaceWithServer) => void
   onAddPeer?: (iface: WgIfaceWithServer) => void
   onToggle?: (iface: WgIfaceWithServer) => void
@@ -57,6 +60,8 @@ interface WireguardDataGridProps {
 
 function WireguardDataGrid({
   interfaces,
+  compactServer = false,
+  emptyAction,
   onExport,
   onAddPeer,
   onToggle,
@@ -70,7 +75,11 @@ function WireguardDataGrid({
         id: "name",
         accessorKey: "name",
         header: ({ column }) => (
-          <DataGridSortHeader column={column} title="Интерфейс / Сервер" className="ml-1" />
+          <DataGridSortHeader
+            column={column}
+            title={compactServer ? "Интерфейс" : "Интерфейс / Сервер"}
+            className="ml-1"
+          />
         ),
         cell: ({ row }) => {
           const iface = row.original
@@ -88,15 +97,17 @@ function WireguardDataGrid({
                   <span
                     className={cn(
                       "size-2 rounded-full shrink-0",
-                      iface.status === "up" ? "bg-emerald-500 animate-pulse" : "bg-red-500",
+                      iface.status === "up" ? "bg-success animate-pulse" : "bg-destructive",
                     )}
                   />
                   <span className="font-mono font-semibold text-sm">{iface.name}</span>
                 </div>
-                <div className="flex items-center gap-1.5 mt-0.5 text-[11px] text-muted-foreground font-mono">
+                {!compactServer ? (
-                  <Flag code={iface.serverCountry || "UN"} size={12} />
+                  <div className="flex items-center gap-1.5 mt-0.5 text-[11px] text-muted-foreground font-mono">
-                  {iface.serverName}
+                    <Flag code={iface.serverCountry || "UN"} size={12} />
-                </div>
+                    {iface.serverName}
+                  </div>
+                ) : null}
                 <p className="sr-only">
                   {onlinePeers}/{iface.peers.length} пиров
                 </p>
@@ -105,7 +116,7 @@ function WireguardDataGrid({
           )
         },
         meta: {
-          headerTitle: "Интерфейс / Сервер",
+          headerTitle: compactServer ? "Интерфейс" : "Интерфейс / Сервер",
           headerClassName: DATA_GRID_CELL_PAD_FIRST,
           cellClassName: DATA_GRID_CELL_PAD_FIRST,
           expandedContent: (row: WgIfaceWithServer) => (
@@ -152,7 +163,7 @@ function WireguardDataGrid({
           const onlinePeers = iface.peers.filter((p) => !!p.latestHandshake).length
           return (
             <span className="font-mono text-sm text-center block">
-              <span className="text-emerald-600 dark:text-emerald-400">{onlinePeers}</span>
+              <span className="text-success">{onlinePeers}</span>
               <span className="text-muted-foreground">/{iface.peers.length}</span>
             </span>
           )
@@ -168,16 +179,13 @@ function WireguardDataGrid({
         accessorKey: "status",
         header: ({ column }) => <DataGridSortHeader column={column} title="Статус" />,
         cell: ({ row }) => (
-          <span
+          <Badge
-            className={cn(
+            variant={row.original.status === "up" ? "success-light" : "destructive-light"}
-              "text-[11px] font-mono px-2 py-0.5 rounded border",
+            size="sm"
-              row.original.status === "up"
+            className="font-mono"
-                ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20"
-                : "bg-red-500/10 text-red-500 border-red-500/20",
-            )}
           >
             {row.original.status === "up" ? "UP" : "DOWN"}
-          </span>
+          </Badge>
         ),
         meta: {
           headerTitle: "Статус",
@@ -258,7 +266,7 @@ function WireguardDataGrid({
         },
       },
     ],
-    [onExport, onAddPeer, onToggle, onDelete, onDeletePeer, onExportPeer],
+    [compactServer, onExport, onAddPeer, onToggle, onDelete, onDeletePeer, onExportPeer],
   )
 
   const table = useReactTable({
@@ -276,7 +284,8 @@ function WireguardDataGrid({
       <EmptyState
         icon={<ShieldCheckIcon className="size-4" />}
         title="Нет WireGuard интерфейсов"
-        description="Добавьте первый интерфейс или проверьте поиск"
+        description="Добавьте первый интерфейс или сбросьте фильтры"
+        action={emptyAction}
         className="border-0 py-16"
       />
     )

components/data-grids/wireguard-peers-detail.tsx

@@ -74,18 +74,18 @@ function WireGuardPeersDetail({
             <span
               className={cn(
                 "font-mono text-[11px] whitespace-nowrap",
-                peer.latestHandshake ? "text-emerald-600 dark:text-emerald-400" : "text-muted-foreground",
+                peer.latestHandshake ? "text-success" : "text-muted-foreground",
               )}
             >
               {peer.latestHandshake ?? "нет рукопожатия"}
             </span>
             <div className="flex items-center gap-2 text-muted-foreground whitespace-nowrap">
               <span className="flex items-center gap-0.5">
-                <ArrowDownIcon className="size-3 text-emerald-500" />
+                <ArrowDownIcon className="size-3 text-success" />
                 {fmtBytes(peer.transferRx)}
               </span>
               <span className="flex items-center gap-0.5">
-                <ArrowUpIcon className="size-3 text-blue-400" />
+                <ArrowUpIcon className="size-3 text-info" />
                 {fmtBytes(peer.transferTx)}
               </span>
             </div>

components/data-grids/wireguard-peers-grid.tsx

@@ -0,0 +1,268 @@
+"use client"
+
+import { useMemo, type ReactNode } from "react"
+import {
+  type ColumnDef,
+  getCoreRowModel,
+  getSortedRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import type { WireGuardPeer } from "@/lib/data"
+import { Flag } from "@/components/flag"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { DataGridShell } from "@/components/data-grids/shared/data-grid-shell"
+import {
+  DATA_GRID_CELL_PAD,
+  DATA_GRID_CELL_PAD_FIRST,
+  DATA_GRID_CELL_PAD_LAST,
+} from "@/components/data-grids/shared/data-grid-layout"
+import { DataGridSortHeader } from "@/components/data-grids/shared/data-grid-sort-header"
+import { EmptyState } from "@/components/empty-state"
+import { fmtBytes, truncKey } from "@/components/data-grids/wireguard-peers-detail"
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+  CodeXmlIcon,
+  KeyRoundIcon,
+  Trash2Icon,
+  UsersIcon,
+} from "lucide-react"
+
+export interface WgPeerRow extends WireGuardPeer {
+  id: string
+  ifaceId: string
+  ifaceName: string
+  serverId: string
+  serverName: string
+  serverCountry: string
+}
+
+interface WireguardPeersGridProps {
+  peers: WgPeerRow[]
+  compactServer?: boolean
+  emptyAction?: ReactNode
+  onDeletePeer?: (row: WgPeerRow) => void
+  onExportPeer?: (row: WgPeerRow) => void
+}
+
+function WireguardPeersGrid({
+  peers,
+  compactServer = false,
+  emptyAction,
+  onDeletePeer,
+  onExportPeer,
+}: WireguardPeersGridProps) {
+  const columns = useMemo<ColumnDef<WgPeerRow>[]>(() => {
+    const cols: ColumnDef<WgPeerRow>[] = [
+      {
+        id: "peer",
+        accessorKey: "publicKey",
+        header: ({ column }) => (
+          <DataGridSortHeader column={column} title="Пир" className="ml-1" />
+        ),
+        cell: ({ row }) => {
+          const peer = row.original
+          return (
+            <div className="flex min-w-0 items-center gap-1.5">
+              <KeyRoundIcon className="size-3.5 shrink-0 text-muted-foreground" />
+              <span className="truncate font-mono text-xs" title={peer.publicKey}>
+                {peer.name || truncKey(peer.publicKey)}
+              </span>
+            </div>
+          )
+        },
+        meta: {
+          headerTitle: "Пир",
+          headerClassName: DATA_GRID_CELL_PAD_FIRST,
+          cellClassName: DATA_GRID_CELL_PAD_FIRST,
+        },
+      },
+      {
+        id: "iface",
+        accessorKey: "ifaceName",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Интерфейс" />,
+        cell: ({ row }) => (
+          <span className="font-mono text-sm">{row.original.ifaceName}</span>
+        ),
+        meta: {
+          headerTitle: "Интерфейс",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+    ]
+
+    if (!compactServer) {
+      cols.push({
+        id: "server",
+        accessorKey: "serverName",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Сервер" />,
+        cell: ({ row }) => (
+          <div className="flex items-center gap-1.5 font-mono text-[11px] text-muted-foreground">
+            <Flag code={row.original.serverCountry || "UN"} size={12} />
+            {row.original.serverName}
+          </div>
+        ),
+        meta: {
+          headerTitle: "Сервер",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      })
+    }
+
+    cols.push(
+      {
+        id: "allowedIps",
+        accessorFn: (row) => row.allowedIps.join(", "),
+        header: ({ column }) => <DataGridSortHeader column={column} title="Allowed IPs" />,
+        cell: ({ row }) => (
+          <span className="block truncate font-mono text-xs text-muted-foreground">
+            {row.original.allowedIps.join(", ") || "—"}
+          </span>
+        ),
+        meta: {
+          headerTitle: "Allowed IPs",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "handshake",
+        accessorKey: "latestHandshake",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Handshake" />,
+        cell: ({ row }) => (
+          <span
+            className={cn(
+              "whitespace-nowrap font-mono text-[11px]",
+              row.original.latestHandshake ? "text-success" : "text-muted-foreground",
+            )}
+          >
+            {row.original.latestHandshake ?? "нет рукопожатия"}
+          </span>
+        ),
+        meta: {
+          headerTitle: "Handshake",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "transfer",
+        header: () => (
+          <span className="text-xs font-medium text-muted-foreground">RX / TX</span>
+        ),
+        enableSorting: false,
+        cell: ({ row }) => (
+          <div className="flex items-center gap-2 whitespace-nowrap text-xs text-muted-foreground">
+            <span className="flex items-center gap-0.5">
+              <ArrowDownIcon className="size-3 text-success" />
+              {fmtBytes(row.original.transferRx)}
+            </span>
+            <span className="flex items-center gap-0.5">
+              <ArrowUpIcon className="size-3 text-info" />
+              {fmtBytes(row.original.transferTx)}
+            </span>
+          </div>
+        ),
+        meta: {
+          headerTitle: "RX / TX",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "endpoint",
+        accessorKey: "endpoint",
+        header: ({ column }) => <DataGridSortHeader column={column} title="Endpoint" />,
+        cell: ({ row }) => (
+          <span className="font-mono text-[11px] text-muted-foreground">
+            {row.original.endpoint ?? "—"}
+          </span>
+        ),
+        meta: {
+          headerTitle: "Endpoint",
+          headerClassName: DATA_GRID_CELL_PAD,
+          cellClassName: DATA_GRID_CELL_PAD,
+        },
+      },
+      {
+        id: "actions",
+        header: () => <span className="sr-only">Действия</span>,
+        enableSorting: false,
+        size: 72,
+        cell: ({ row }) => {
+          const peer = row.original
+          return (
+            <div className="flex justify-end gap-0.5">
+              {onExportPeer ? (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="size-7"
+                  aria-label="Экспорт peer .conf"
+                  onClick={() => onExportPeer(peer)}
+                >
+                  <CodeXmlIcon className="size-3.5" />
+                </Button>
+              ) : null}
+              {onDeletePeer ? (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="size-7 text-destructive"
+                  aria-label="Удалить пира"
+                  onClick={() => onDeletePeer(peer)}
+                >
+                  <Trash2Icon className="size-3.5" />
+                </Button>
+              ) : null}
+            </div>
+          )
+        },
+        meta: {
+          headerClassName: DATA_GRID_CELL_PAD_LAST,
+          cellClassName: DATA_GRID_CELL_PAD_LAST,
+        },
+      },
+    )
+
+    return cols
+  }, [compactServer, onDeletePeer, onExportPeer])
+
+  const table = useReactTable({
+    data: peers,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getRowId: (row) => row.id,
+  })
+
+  if (peers.length === 0) {
+    return (
+      <EmptyState
+        icon={<UsersIcon className="size-4" />}
+        title="Нет пиров"
+        description="Добавьте пира к интерфейсу или сбросьте поиск"
+        action={emptyAction}
+        className="border-0 py-16"
+      />
+    )
+  }
+
+  return (
+    <DataGridShell
+      table={table}
+      recordCount={peers.length}
+      tableClassNames={{
+        headerRow: "border-b border-border",
+        bodyRow: cn("group/row"),
+      }}
+    />
+  )
+}
+
+export { WireguardPeersGrid, type WireguardPeersGridProps }

components/data-page-toolbar.tsx

@@ -31,6 +31,7 @@ function DataPageToolbarFrame({
 }
 
 interface DataPageToolbarProps<T extends string = string> {
+  leading?: ReactNode
   search?: string
   onSearchChange?: (value: string) => void
   searchPlaceholder?: string
@@ -48,6 +49,7 @@ interface DataPageToolbarProps<T extends string = string> {
 }
 
 function DataPageToolbar<T extends string = string>({
+  leading,
   search,
   onSearchChange,
   searchPlaceholder = "Поиск…",
@@ -61,6 +63,7 @@ function DataPageToolbar<T extends string = string>({
 }: DataPageToolbarProps<T>) {
   return (
     <DataPageToolbarFrame className={className}>
+      {leading}
       {segmented && (
         <SegmentedControl
           value={segmented.value}

components/release-notes-modal.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import Link from "next/link"
-import { Badge } from "@/components/ui/badge"
+import { Badge } from "@/components/reui/badge"
 import { Button } from "@/components/ui/button"
 import {
   Dialog,

components/reui-kit/code-export-sheet.tsx

@@ -0,0 +1,284 @@
+"use client"
+
+import { useEffect, useMemo, useState, type ReactNode } from "react"
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@/components/reui/alert"
+import { Badge } from "@/components/reui/badge"
+import { Frame, FramePanel } from "@/components/reui/frame"
+import { Button } from "@/components/ui/button"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import {
+  CheckIcon,
+  CopyIcon,
+  DownloadIcon,
+  LoaderCircleIcon,
+  RefreshCwIcon,
+  TriangleAlertIcon,
+} from "lucide-react"
+import { cn } from "@/lib/utils"
+
+export type CodeExportFormat = {
+  id: string
+  label: string
+  filename: string
+  code: string
+  /** Empty / unavailable — show warning instead of code */
+  emptyMessage?: string
+  /** Content came from live device fetch */
+  isLive?: boolean
+}
+
+function downloadText(filename: string, content: string) {
+  const blob = new Blob([content], { type: "text/plain;charset=utf-8" })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement("a")
+  a.href = url
+  a.download = filename
+  a.click()
+  URL.revokeObjectURL(url)
+}
+
+function highlightLine(line: string): string {
+  const trimmed = line.trimStart()
+  if (line.startsWith("#") || trimmed.startsWith(";")) return "text-muted-foreground"
+  if (trimmed.startsWith("[")) return "text-info"
+  if (trimmed.startsWith("/")) return "text-info"
+  if (/^\s+[a-zA-Z]/.test(line) || /^[A-Za-z][\w-]*=/.test(line)) return "text-foreground"
+  return "text-foreground/90"
+}
+
+function CodeBlock({ code }: { code: string }) {
+  const lines = code.length ? code.split("\n") : [""]
+  return (
+    <pre className="px-4 py-3.5 text-[12px] font-mono leading-[1.65] whitespace-pre-wrap break-all select-all">
+      {lines.map((line, i) => (
+        <span key={i} className={cn("block", highlightLine(line))}>
+          {line || " "}
+        </span>
+      ))}
+    </pre>
+  )
+}
+
+export interface CodeExportSheetProps {
+  open: boolean
+  onClose: () => void
+  title: string
+  description?: ReactNode
+  formats: CodeExportFormat[]
+  /** Initial format id when sheet opens */
+  initialFormatId?: string
+  /** Optional live fetch from device */
+  onLiveFetch?: (formatId: string) => void
+  liveBusy?: boolean
+  /** Short CTA — keep laconic */
+  liveLabel?: string
+  className?: string
+  /** Extra content under format tabs (e.g. meta strip) */
+  beforeCode?: ReactNode
+}
+
+/**
+ * Shared code export Sheet — ReUI Frame + sticky footer.
+ * Preview DNA: https://reui.io/preview/base/sheet-8 · Frame https://reui.io/docs/components/base/frame
+ * Alert: https://reui.io/docs/components/base/alert
+ */
+function CodeExportSheet({
+  open,
+  onClose,
+  title,
+  description,
+  formats,
+  initialFormatId,
+  onLiveFetch,
+  liveBusy,
+  liveLabel = "С роутера",
+  className,
+  beforeCode,
+}: CodeExportSheetProps) {
+  const firstId = formats[0]?.id ?? "default"
+  const [tab, setTab] = useState(initialFormatId ?? firstId)
+  const [copied, setCopied] = useState(false)
+
+  useEffect(() => {
+    if (!open) return
+    setTab(
+      initialFormatId && formats.some((f) => f.id === initialFormatId)
+        ? initialFormatId
+        : firstId,
+    )
+    setCopied(false)
+  }, [open, initialFormatId, firstId, formats])
+
+  const active = useMemo(
+    () => formats.find((f) => f.id === tab) ?? formats[0],
+    [formats, tab],
+  )
+
+  const code = active?.code ?? ""
+  const emptyMessage = active?.emptyMessage
+  const filename = active?.filename ?? "export.txt"
+  const canCopy = Boolean(code) && !emptyMessage
+  const isLive = Boolean(active?.isLive)
+  const showTabs = formats.length > 1
+
+  function handleCopy() {
+    if (!canCopy) return
+    void navigator.clipboard.writeText(code).then(() => {
+      setCopied(true)
+      setTimeout(() => setCopied(false), 1800)
+    })
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={(v) => { if (!v) onClose() }}>
+      <SheetContent
+        className={cn(
+          "flex w-full flex-col gap-0 overflow-hidden p-0 sm:max-w-xl",
+          className,
+        )}
+      >
+        <SheetHeader className="shrink-0 gap-1 border-b px-5 pt-5 pb-4 pr-12">
+          <SheetTitle className="text-base font-semibold tracking-tight">
+            {title}
+          </SheetTitle>
+          {description ? (
+            <SheetDescription className="font-mono text-xs">
+              {description}
+            </SheetDescription>
+          ) : null}
+        </SheetHeader>
+
+        <div className="flex min-h-0 flex-1 flex-col gap-3 px-5 py-4">
+          {showTabs ? (
+            <Tabs
+              value={tab}
+              onValueChange={(v) => setTab(String(v))}
+              className="shrink-0 gap-0"
+            >
+              <TabsList className="h-9 w-full">
+                {formats.map((f) => (
+                  <TabsTrigger key={f.id} value={f.id} className="flex-1 px-2 text-xs sm:text-sm">
+                    {f.label}
+                  </TabsTrigger>
+                ))}
+              </TabsList>
+            </Tabs>
+          ) : null}
+
+          {onLiveFetch || beforeCode ? (
+            <div className="flex shrink-0 flex-wrap items-center justify-between gap-2">
+              <div className="flex min-w-0 flex-wrap items-center gap-2">
+                {onLiveFetch ? (
+                  <Badge
+                    variant={isLive ? "success-light" : "secondary"}
+                    size="sm"
+                    radius="full"
+                  >
+                    {isLive ? "С роутера" : "Локально"}
+                  </Badge>
+                ) : null}
+                {beforeCode}
+              </div>
+              {onLiveFetch ? (
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  className="shrink-0"
+                  disabled={liveBusy}
+                  onClick={() => onLiveFetch(tab)}
+                  aria-label="Подтянуть конфиг с роутера с private-key"
+                >
+                  {liveBusy ? (
+                    <LoaderCircleIcon className="size-3.5 animate-spin" />
+                  ) : (
+                    <RefreshCwIcon className="size-3.5" />
+                  )}
+                  {liveBusy ? "Загрузка…" : liveLabel}
+                </Button>
+              ) : null}
+            </div>
+          ) : null}
+
+          <Frame dense className="flex min-h-0 flex-1 flex-col">
+            <FramePanel className="relative flex min-h-0 flex-1 flex-col overflow-hidden p-0">
+              {emptyMessage ? (
+                <div className="flex flex-1 items-center p-4">
+                  <Alert variant="warning" className="w-full">
+                    <TriangleAlertIcon />
+                    <AlertTitle>Нет данных</AlertTitle>
+                    <AlertDescription>{emptyMessage}</AlertDescription>
+                  </Alert>
+                </div>
+              ) : (
+                <ScrollArea className="h-full min-h-0 flex-1">
+                  <div className="min-h-[min(52vh,22rem)]">
+                    <CodeBlock code={code} />
+                  </div>
+                </ScrollArea>
+              )}
+            </FramePanel>
+          </Frame>
+
+          {onLiveFetch && !isLive ? (
+            <p className="text-muted-foreground shrink-0 text-[11px] leading-snug">
+              Локальный снимок. Подтяните с роутера, если нужен private-key с устройства.
+            </p>
+          ) : null}
+        </div>
+
+        <SheetFooter className="shrink-0 flex-row items-center justify-between gap-3 border-t px-5 py-3.5 sm:flex-row">
+          <SheetClose
+            render={
+              <Button type="button" variant="ghost" className="shrink-0 px-3" />
+            }
+          >
+            Закрыть
+          </SheetClose>
+          <div className="flex items-center gap-2">
+            <Button
+              type="button"
+              variant="outline"
+              size="default"
+              disabled={!canCopy}
+              onClick={() => downloadText(filename, code)}
+            >
+              <DownloadIcon className="size-4" />
+              Файл
+            </Button>
+            <Button
+              type="button"
+              size="default"
+              disabled={!canCopy}
+              onClick={handleCopy}
+              className="min-w-28"
+            >
+              {copied ? (
+                <CheckIcon className="size-4 text-success" />
+              ) : (
+                <CopyIcon className="size-4" />
+              )}
+              {copied ? "Скопировано" : "Копировать"}
+            </Button>
+          </div>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  )
+}
+
+export { CodeExportSheet, downloadText }

components/reui-kit/index.ts

@@ -0,0 +1,5 @@
+export { CodeExportSheet, downloadText } from "./code-export-sheet"
+export type { CodeExportFormat, CodeExportSheetProps } from "./code-export-sheet"
+export { KpiStatGrid, KpiStatCardTile, kpiStatItemKey } from "./kpi-stat-grid"
+export type { KpiStatItem, KpiStatCardData, KpiStatVariant } from "./kpi-stat-grid"
+export { kpiCols } from "./kpi-cols"

components/reui-kit/kpi-cols.ts

@@ -0,0 +1,12 @@
+/**
+ * Shared grid column classes for hybrid KPI tiles.
+ * @see https://reui.io/preview/base/stats-12
+ */
+export function kpiCols(count: number): string {
+  if (count <= 1) return "grid-cols-1"
+  if (count === 2) return "grid-cols-1 @xl:grid-cols-2"
+  if (count === 3) return "grid-cols-1 @3xl:grid-cols-3"
+  if (count === 4) return "grid-cols-1 @3xl:grid-cols-2 @6xl:grid-cols-4"
+  if (count <= 6) return "grid-cols-1 @xl:grid-cols-2 @4xl:grid-cols-3"
+  return "grid-cols-1 @xl:grid-cols-2 @4xl:grid-cols-3 @6xl:grid-cols-4"
+}

components/reui-kit/kpi-stat-grid.tsx

@@ -0,0 +1,307 @@
+"use client"
+
+import type { KeyboardEvent, ReactNode } from "react"
+import Link from "next/link"
+import { Frame, FramePanel } from "@/components/reui/frame"
+import { Badge } from "@/components/reui/badge"
+import { IconTile } from "@/components/reui/icon-tile"
+import { Skeleton } from "@/components/ui/skeleton"
+import { cn } from "@/lib/utils"
+import { kpiCols } from "./kpi-cols"
+
+export type KpiStatVariant = "default" | "warning" | "destructive"
+
+/**
+ * KPI tile — horizontal compact hybrid (icon left + label/Badge + value).
+ * @see https://reui.io/preview/base/stats-12
+ */
+export type KpiStatItem = {
+  id?: string
+  label: ReactNode
+  value: ReactNode
+  hint?: ReactNode
+  href?: string
+  onSelect?: () => void
+  onClick?: () => void
+  selected?: boolean
+  active?: boolean
+  icon?: ReactNode
+  iconClassName?: string
+  variant?: KpiStatVariant
+  footer?: ReactNode
+}
+
+export type KpiStatCardData = KpiStatItem & { id: string }
+
+const DEFAULT_ICON_CLASS = "text-muted-foreground [&_svg]:text-current"
+
+const VALUE_VARIANT_CLASS: Record<KpiStatVariant, string> = {
+  default: "text-foreground",
+  warning: "text-warning",
+  destructive: "text-destructive",
+}
+
+function handleCardKeyDown(onActivate: () => void, event: KeyboardEvent<HTMLDivElement>) {
+  if (event.key === "Enter" || event.key === " ") {
+    event.preventDefault()
+    onActivate()
+  }
+}
+
+function resolveActivate(item: KpiStatItem): (() => void) | undefined {
+  return item.onClick ?? item.onSelect
+}
+
+function isSelected(item: KpiStatItem): boolean {
+  return Boolean(item.selected ?? item.active)
+}
+
+function resolveFooter(item: KpiStatItem): ReactNode {
+  if (item.footer) return item.footer
+  if (typeof item.hint === "string") {
+    return (
+      <Badge variant="outline" size="sm" className="max-w-[min(100%,11rem)] truncate">
+        {item.hint}
+      </Badge>
+    )
+  }
+  if (item.hint) return item.hint
+  return null
+}
+
+function KpiStatCardBody({ item }: { item: KpiStatItem }) {
+  const footer = resolveFooter(item)
+  const valueVariant = item.variant ?? "default"
+
+  return (
+    <div className="@container relative z-10 flex h-full min-w-0 items-start gap-3">
+      {item.icon ? (
+        <IconTile
+          variant="elevated"
+          aria-hidden="true"
+          className={cn("size-10.5 shrink-0", item.iconClassName ?? DEFAULT_ICON_CLASS)}
+        >
+          {item.icon}
+        </IconTile>
+      ) : null}
+
+      <div className="flex min-w-0 flex-1 flex-col gap-0.5">
+        <div className="flex min-w-0 items-start justify-between gap-2">
+          <div className="text-muted-foreground min-w-0 truncate text-sm font-medium">
+            {item.label}
+          </div>
+          {footer ? (
+            <div className="hidden min-w-0 max-w-[min(100%,11rem)] shrink-0 @[20rem]:block">
+              {footer}
+            </div>
+          ) : null}
+        </div>
+        <div
+          className={cn(
+            "min-w-0 break-all text-2xl leading-none font-bold tabular-nums",
+            VALUE_VARIANT_CLASS[valueVariant],
+          )}
+        >
+          {item.value}
+        </div>
+        {footer ? (
+          <div className="min-w-0 max-w-full @[20rem]:hidden">{footer}</div>
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+function panelClassName(item: KpiStatItem, className?: string) {
+  const onActivate = resolveActivate(item)
+  const clickable = Boolean(item.href || onActivate)
+  const selected = isSelected(item)
+
+  return cn(
+    "relative isolate flex h-full min-w-0 flex-col",
+    clickable &&
+      "hover:bg-muted/40 focus-within:ring-ring cursor-pointer transition-colors focus-within:ring-2",
+    selected && "ring-primary/30 bg-muted/30 ring-1",
+    className,
+  )
+}
+
+export function KpiStatCardTile({
+  item,
+  embedded = false,
+  className,
+}: {
+  item: KpiStatItem
+  embedded?: boolean
+  className?: string
+}) {
+  const onActivate = resolveActivate(item)
+  const panelClass = panelClassName(item, className)
+
+  let panel: ReactNode
+
+  if (item.href) {
+    panel = (
+      <FramePanel className={panelClass}>
+        <Link href={item.href} className="focus-visible:outline-none">
+          <KpiStatCardBody item={item} />
+        </Link>
+      </FramePanel>
+    )
+  } else if (onActivate) {
+    panel = (
+      <FramePanel
+        className={panelClass}
+        onClick={onActivate}
+        role="button"
+        tabIndex={0}
+        onKeyDown={(e) => handleCardKeyDown(onActivate, e)}
+      >
+        <KpiStatCardBody item={item} />
+      </FramePanel>
+    )
+  } else {
+    panel = (
+      <FramePanel className={panelClass}>
+        <KpiStatCardBody item={item} />
+      </FramePanel>
+    )
+  }
+
+  if (embedded) {
+    return <Frame className="h-full ring-1 ring-foreground/10">{panel}</Frame>
+  }
+
+  return <Frame className="h-full">{panel}</Frame>
+}
+
+function KpiStatGridSkeleton({ count }: { count: number }) {
+  return (
+    <Frame className="@container w-full">
+      <div className={cn("grid gap-2", kpiCols(count))}>
+        {Array.from({ length: count }).map((_, index) => (
+          <FramePanel key={index} className="flex items-start gap-3">
+            <Skeleton className="size-10.5 shrink-0 rounded-lg" />
+            <div className="flex min-w-0 flex-1 flex-col gap-1.5">
+              <div className="flex items-center justify-between gap-2">
+                <Skeleton className="h-4 w-20" />
+                <Skeleton className="h-4.5 w-14 rounded-full" />
+              </div>
+              <Skeleton className="h-7 w-16" />
+            </div>
+          </FramePanel>
+        ))}
+      </div>
+    </Frame>
+  )
+}
+
+interface KpiStatGridProps {
+  items?: KpiStatItem[]
+  cards?: KpiStatCardData[]
+  isLoading?: boolean
+  emptyMessage?: ReactNode
+  emptyIcon?: ReactNode
+  className?: string
+  skeletonCount?: number
+  embedded?: boolean
+  "aria-label"?: string
+}
+
+function KpiStatCardItem({ item }: { item: KpiStatItem }) {
+  const onActivate = resolveActivate(item)
+  const panelClass = panelClassName(item)
+
+  if (item.href) {
+    return (
+      <FramePanel className={panelClass}>
+        <Link href={item.href} className="focus-visible:outline-none">
+          <KpiStatCardBody item={item} />
+        </Link>
+      </FramePanel>
+    )
+  }
+
+  if (onActivate) {
+    return (
+      <FramePanel
+        className={panelClass}
+        onClick={onActivate}
+        role="button"
+        tabIndex={0}
+        onKeyDown={(e) => handleCardKeyDown(onActivate, e)}
+      >
+        <KpiStatCardBody item={item} />
+      </FramePanel>
+    )
+  }
+
+  return (
+    <FramePanel className={panelClass}>
+      <KpiStatCardBody item={item} />
+    </FramePanel>
+  )
+}
+
+/**
+ * Hybrid KPI — horizontal compact layout (icon left).
+ * Preview: https://reui.io/preview/base/stats-12
+ */
+export function KpiStatGrid({
+  items,
+  cards,
+  isLoading = false,
+  emptyMessage,
+  emptyIcon,
+  className,
+  skeletonCount = 4,
+  embedded = false,
+  "aria-label": ariaLabel,
+}: KpiStatGridProps) {
+  if (isLoading) {
+    return <KpiStatGridSkeleton count={skeletonCount} />
+  }
+
+  const list = items ?? cards ?? []
+
+  if (list.length === 0 && (emptyMessage || emptyIcon)) {
+    return (
+      <Frame dense spacing="sm" className={cn("w-full", className)}>
+        <FramePanel className="flex items-center gap-3 p-4">
+          {emptyIcon}
+          {emptyMessage ? (
+            <p className="text-muted-foreground text-sm">{emptyMessage}</p>
+          ) : null}
+        </FramePanel>
+      </Frame>
+    )
+  }
+
+  if (embedded) {
+    return (
+      <section aria-label={ariaLabel} className={cn("@container w-full", className)}>
+        <div className={cn("grid gap-2", kpiCols(list.length || 1))}>
+          {list.map((item, index) => (
+            <KpiStatCardTile key={kpiStatItemKey(item, index)} item={item} embedded />
+          ))}
+        </div>
+      </section>
+    )
+  }
+
+  return (
+    <Frame className={cn("@container w-full min-w-0", className)} aria-label={ariaLabel}>
+      <div className={cn("grid gap-2", kpiCols(list.length || 1))}>
+        {list.map((item, index) => (
+          <KpiStatCardItem key={kpiStatItemKey(item, index)} item={item} />
+        ))}
+      </div>
+    </Frame>
+  )
+}
+
+export function kpiStatItemKey(item: KpiStatItem, index: number): string {
+  if (item.id) return item.id
+  if (typeof item.label === "string") return item.label
+  return `kpi-${index}`
+}

components/reui-kit/traffic-rx-tx-chart.tsx

@@ -0,0 +1,132 @@
+"use client"
+
+import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts"
+import { Frame, FramePanel } from "@/components/reui/frame"
+import { ChartContainer, ChartTooltip, type ChartConfig } from "@/components/ui/chart"
+import { fmtRate, formatRangeAgo, TRAFFIC_RANGE_MINUTES } from "@/lib/fmt-rate"
+
+/**
+ * История RX/TX — adapt ReUI PRO chart-23 (multi-line + tooltip).
+ * @see https://reui.io/preview/base/chart-23
+ * @see https://reui.io/blocks
+ */
+
+const chartConfig = {
+  rx: { label: "RX", color: "var(--chart-rx)" },
+  tx: { label: "TX", color: "var(--chart-tx)" },
+} satisfies ChartConfig
+
+function ChartLegendItem({ label, color }: { label: string; color: string }) {
+  return (
+    <div className="flex items-center gap-2">
+      <div className="size-2 rounded-full" style={{ backgroundColor: color }} />
+      <span className="text-muted-foreground text-xs font-medium">{label}</span>
+    </div>
+  )
+}
+
+function CustomTooltip({
+  active,
+  payload,
+}: {
+  active?: boolean
+  payload?: {
+    dataKey: string
+    color: string
+    value: number
+  }[]
+}) {
+  if (!active || !payload?.length) return null
+  return (
+    <div className="min-w-[120px] flex flex-col gap-1.5 rounded-lg bg-popover p-3 text-popover-foreground shadow-lg ring-1 ring-foreground/10">
+      {payload.map((item) => (
+        <div key={item.dataKey}>
+          <div className="text-[10px] font-medium tracking-wider uppercase opacity-70">
+            {item.dataKey === "rx" ? "RX" : "TX"}:
+          </div>
+          <div className="text-sm font-semibold tabular-nums">
+            {fmtRate(item.value)}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function toChartData(rx: number[], tx: number[], rangeMinutes: number) {
+  const n = Math.max(rx.length, tx.length, 1)
+  const denom = Math.max(n - 1, 1)
+  return Array.from({ length: n }, (_, i) => {
+    const minutesAgo = Math.round((1 - i / denom) * rangeMinutes)
+    return {
+      time: formatRangeAgo(minutesAgo),
+      rx: rx[i] ?? 0,
+      tx: tx[i] ?? 0,
+    }
+  })
+}
+
+export function TrafficRxTxChart({
+  rx,
+  tx,
+  range = "1h",
+}: {
+  rx: number[]
+  tx: number[]
+  range?: string
+}) {
+  const rangeMinutes = TRAFFIC_RANGE_MINUTES[range] ?? 60
+  const data = toChartData(rx, tx, rangeMinutes)
+  const tickEvery = Math.max(1, Math.ceil(data.length / 6))
+
+  return (
+    <Frame className="w-full">
+      <FramePanel className="flex flex-col gap-6">
+        <ChartContainer config={chartConfig} className="-ms-4 aspect-auto h-[220px] w-full">
+          <LineChart data={data} margin={{ top: 5, right: 5, left: 5, bottom: 5 }}>
+            <CartesianGrid
+              strokeDasharray="4 8"
+              vertical={false}
+              stroke="var(--border)"
+            />
+            <XAxis
+              dataKey="time"
+              axisLine={false}
+              tickLine={false}
+              tick={{ fontSize: 11 }}
+              tickMargin={10}
+              interval={tickEvery - 1}
+            />
+            <YAxis
+              axisLine={false}
+              tickLine={false}
+              tick={{ fontSize: 11 }}
+              tickFormatter={(v: number) => fmtRate(Number(v))}
+              tickMargin={8}
+              width={72}
+            />
+            <ChartTooltip content={<CustomTooltip />} />
+            <Line
+              dataKey="rx"
+              type="monotone"
+              stroke="var(--chart-rx)"
+              strokeWidth={2}
+              dot={false}
+            />
+            <Line
+              dataKey="tx"
+              type="monotone"
+              stroke="var(--chart-tx)"
+              strokeWidth={2}
+              dot={false}
+            />
+          </LineChart>
+        </ChartContainer>
+        <div className="mb-1 flex items-center justify-center gap-6">
+          <ChartLegendItem label="RX (входящий)" color="var(--chart-rx)" />
+          <ChartLegendItem label="TX (исходящий)" color="var(--chart-tx)" />
+        </div>
+      </FramePanel>
+    </Frame>
+  )
+}

components/server-rail-layout.tsx

@@ -0,0 +1,236 @@
+"use client"
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from "react"
+import { PanelLeftCloseIcon, ServerIcon } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import {
+  ALL_SERVERS_ID,
+  ServerTileRail,
+  hostnameOf,
+  type ServerTileItem,
+} from "@/components/server-tile-rail"
+import { cn } from "@/lib/utils"
+
+/** Preview: https://reui.io/preview/base/app-shell-12 · https://reui.io/preview/base/list-9 */
+
+const STORAGE_KEY = "mm:server-rail-collapsed"
+const DESKTOP_MQ = "(min-width: 768px)"
+
+function readCollapsed(): boolean {
+  try {
+    return window.localStorage.getItem(STORAGE_KEY) === "1"
+  } catch {
+    return false
+  }
+}
+
+function writeCollapsed(value: boolean) {
+  try {
+    window.localStorage.setItem(STORAGE_KEY, value ? "1" : "0")
+  } catch {
+    // quota / private mode
+  }
+}
+
+interface ServerRailContextValue {
+  openRail: () => void
+  expandRail: () => void
+  collapsed: boolean
+  selectedLabel: string
+}
+
+const ServerRailContext = createContext<ServerRailContextValue | null>(null)
+
+function useServerRail() {
+  const ctx = useContext(ServerRailContext)
+  if (!ctx) {
+    throw new Error("ServerRailMobileButton must be used inside ServerRailLayout")
+  }
+  return ctx
+}
+
+function ServerRailMobileButton() {
+  const { openRail, expandRail, collapsed, selectedLabel } = useServerRail()
+  return (
+    <Button
+      size="sm"
+      variant="outline"
+      className={collapsed ? undefined : "md:hidden"}
+      aria-label={collapsed ? "Показать список серверов" : "Серверы"}
+      onClick={() => {
+        if (window.matchMedia(DESKTOP_MQ).matches) {
+          expandRail()
+          return
+        }
+        openRail()
+      }}
+    >
+      <ServerIcon data-icon="inline-start" />
+      {selectedLabel}
+    </Button>
+  )
+}
+
+function ServerRailLayout({
+  items,
+  selectedId,
+  onSelect,
+  showAll = true,
+  allCount = 0,
+  showCount = true,
+  showType = true,
+  headerRight,
+  loading = false,
+  extra,
+  header,
+  banner,
+  contentClassName,
+  children,
+}: {
+  items: ServerTileItem[]
+  selectedId: string
+  onSelect: (id: string) => void
+  showAll?: boolean
+  allCount?: number
+  showCount?: boolean
+  showType?: boolean
+  headerRight?: ReactNode
+  loading?: boolean
+  extra?: ReactNode
+  header?: ReactNode
+  banner?: ReactNode
+  contentClassName?: string
+  children: ReactNode
+}) {
+  const [railOpen, setRailOpen] = useState(false)
+  const [collapsed, setCollapsed] = useState(false)
+  const [hydrated, setHydrated] = useState(false)
+
+  useEffect(() => {
+    setCollapsed(readCollapsed())
+    setHydrated(true)
+  }, [])
+
+  useEffect(() => {
+    if (!hydrated) return
+    writeCollapsed(collapsed)
+  }, [collapsed, hydrated])
+
+  const handleSelect = useCallback(
+    (id: string) => {
+      onSelect(id)
+      setRailOpen(false)
+    },
+    [onSelect],
+  )
+
+  const expandRail = useCallback(() => {
+    setCollapsed(false)
+  }, [])
+
+  const selectedLabel = useMemo(() => {
+    if (showAll && selectedId === ALL_SERVERS_ID) return "Все серверы"
+    const item = items.find((entry) => entry.id === selectedId)
+    return item ? hostnameOf(item) : "Сервер"
+  }, [items, selectedId, showAll])
+
+  const ctx = useMemo<ServerRailContextValue>(
+    () => ({
+      openRail: () => setRailOpen(true),
+      expandRail,
+      collapsed,
+      selectedLabel,
+    }),
+    [collapsed, expandRail, selectedLabel],
+  )
+
+  const railHeaderRight = (
+    <>
+      {headerRight}
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon-sm"
+        className="hidden md:inline-flex"
+        aria-label="Свернуть список серверов"
+        onClick={() => setCollapsed(true)}
+      >
+        <PanelLeftCloseIcon />
+      </Button>
+    </>
+  )
+
+  const rail = (
+    <ServerTileRail
+      items={items}
+      selectedId={selectedId}
+      onSelect={handleSelect}
+      showAll={showAll}
+      allCount={allCount}
+      showCount={showCount}
+      showType={showType}
+      headerRight={railHeaderRight}
+      loading={loading}
+      className="min-h-0 flex-1"
+    />
+  )
+
+  return (
+    <ServerRailContext.Provider value={ctx}>
+      <div className="flex h-full min-h-0 flex-col">
+        {header}
+        {banner}
+        <div className="flex min-h-0 flex-1">
+          {!collapsed ? (
+            <aside className="hidden min-h-0 w-60 shrink-0 flex-col gap-3 p-3 pr-0 md:flex">
+              {rail}
+              {extra}
+            </aside>
+          ) : null}
+          <div className={cn("min-w-0 flex-1 overflow-y-auto p-4 md:p-6", contentClassName)}>
+            {children}
+          </div>
+        </div>
+        <Sheet open={railOpen} onOpenChange={setRailOpen}>
+          <SheetContent side="left" className="flex w-72 flex-col gap-3 p-3" showCloseButton>
+            <SheetHeader className="px-1 pt-1">
+              <SheetTitle>Серверы</SheetTitle>
+            </SheetHeader>
+            <div className="flex min-h-0 flex-1 flex-col gap-3">
+              <ServerTileRail
+                items={items}
+                selectedId={selectedId}
+                onSelect={handleSelect}
+                showAll={showAll}
+                allCount={allCount}
+                showCount={showCount}
+                showType={showType}
+                showHeader={false}
+                headerRight={headerRight}
+                loading={loading}
+                className="min-h-0 flex-1"
+              />
+              {extra}
+            </div>
+          </SheetContent>
+        </Sheet>
+      </div>
+    </ServerRailContext.Provider>
+  )
+}
+
+export { ServerRailLayout, ServerRailMobileButton }

components/server-tile-rail.tsx

@@ -0,0 +1,385 @@
+"use client"
+
+import { useEffect, useMemo, useRef, useState, type KeyboardEvent, type ReactNode } from "react"
+import type { ServerStatus, ServerType } from "@/lib/data"
+import { Flag } from "@/components/flag"
+import { StatusDot } from "@/components/status-dot"
+import { Badge } from "@/components/reui/badge"
+import { IconTile } from "@/components/reui/icon-tile"
+import {
+  Frame,
+  FrameHeader,
+  FramePanel,
+  FrameTitle,
+} from "@/components/reui/frame"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemMedia,
+  ItemTitle,
+} from "@/components/ui/item"
+import { ScrollArea } from "@/components/ui/scroll-area"
+import { Spinner } from "@/components/ui/spinner"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/components/ui/input-group"
+import { cn } from "@/lib/utils"
+import { LayersIcon, SearchIcon, ServerIcon } from "lucide-react"
+
+/** Preview: https://reui.io/preview/base/list-9 · https://reui.io/docs/components/base/icon-tile · https://reui.io/docs/components/base/frame · https://reui.io/docs/components/base/badge */
+export const ALL_SERVERS_ID = "all"
+
+export interface ServerTileItem {
+  id: string
+  name: string
+  country?: string
+  status?: ServerStatus
+  type?: ServerType
+  count?: number
+  enabled?: boolean
+  selectable?: boolean
+  title?: string
+  site?: string
+  host?: string
+  meta?: string
+}
+
+function typeBadgeVariant(
+  type: ServerType,
+): "focus-light" | "info-light" | "success-light" {
+  if (type === "jump-host") return "focus-light"
+  if (type === "home-router") return "success-light"
+  return "info-light"
+}
+
+function typeBadgeLabel(type: ServerType): string {
+  if (type === "jump-host") return "JH"
+  if (type === "home-router") return "HR"
+  return "EN"
+}
+
+function ServerTypeBadge({ type }: { type: ServerType }) {
+  return (
+    <Badge variant={typeBadgeVariant(type)} size="xs" className="font-mono">
+      {typeBadgeLabel(type)}
+    </Badge>
+  )
+}
+
+function hostnameOf(item: ServerTileItem): string {
+  return item.name || item.host || ""
+}
+
+function matchesQuery(item: ServerTileItem, q: string): boolean {
+  if (!q) return true
+  const hay = [item.name, item.title ?? "", item.host ?? "", item.site ?? "", item.country ?? ""]
+    .join(" ")
+    .toLowerCase()
+  return hay.includes(q)
+}
+
+function isSelectable(item: ServerTileItem): boolean {
+  return item.selectable !== false
+}
+
+function ServerTileRail({
+  items,
+  selectedId,
+  onSelect,
+  allCount = 0,
+  showHeader = true,
+  showAll = true,
+  showCount = true,
+  showType = true,
+  headerRight,
+  loading = false,
+  className,
+}: {
+  items: ServerTileItem[]
+  selectedId: string
+  onSelect: (id: string) => void
+  allCount?: number
+  showHeader?: boolean
+  showAll?: boolean
+  showCount?: boolean
+  showType?: boolean
+  headerRight?: ReactNode
+  loading?: boolean
+  className?: string
+}) {
+  const [query, setQuery] = useState("")
+  const q = query.trim().toLowerCase()
+  const listRef = useRef<HTMLDivElement>(null)
+
+  const filtered = useMemo(
+    () => items.filter((item) => matchesQuery(item, q)),
+    [items, q],
+  )
+
+  const uniqueSites = useMemo(() => {
+    const sites = new Set(
+      filtered.map((item) => item.site?.trim()).filter((site): site is string => Boolean(site)),
+    )
+    return sites.size
+  }, [filtered])
+
+  const groupBySite = uniqueSites >= 2 && !q
+
+  const groups = useMemo(() => {
+    if (!groupBySite) {
+      return [{ site: "", items: filtered }]
+    }
+    const bySite = new Map<string, ServerTileItem[]>()
+    for (const item of filtered) {
+      const site = item.site?.trim() || "—"
+      const list = bySite.get(site)
+      if (list) list.push(item)
+      else bySite.set(site, [item])
+    }
+    return [...bySite.entries()].map(([site, siteItems]) => ({ site, items: siteItems }))
+  }, [filtered, groupBySite])
+
+  const showAllTile = showAll && !q
+
+  const resolvedId = useMemo(() => {
+    if (showAll && selectedId === ALL_SERVERS_ID) return ALL_SERVERS_ID
+    if (items.some((item) => item.id === selectedId)) return selectedId
+    if (showAll) return ALL_SERVERS_ID
+    return items.find(isSelectable)?.id ?? items[0]?.id ?? ""
+  }, [items, selectedId, showAll])
+
+  useEffect(() => {
+    if (resolvedId && resolvedId !== selectedId) onSelect(resolvedId)
+  }, [onSelect, resolvedId, selectedId])
+
+  const selectableIds = useMemo(() => {
+    const ids: string[] = []
+    if (showAllTile) ids.push(ALL_SERVERS_ID)
+    for (const item of filtered) {
+      if (isSelectable(item)) ids.push(item.id)
+    }
+    return ids
+  }, [filtered, showAllTile])
+
+  function moveSelection(delta: number) {
+    if (selectableIds.length === 0) return
+    const idx = selectableIds.indexOf(resolvedId)
+    const nextIdx =
+      idx < 0
+        ? delta > 0 ? 0 : selectableIds.length - 1
+        : Math.min(selectableIds.length - 1, Math.max(0, idx + delta))
+    const nextId = selectableIds[nextIdx]
+    if (nextId) onSelect(nextId)
+  }
+
+  function handleListKeyDown(event: KeyboardEvent<HTMLDivElement>) {
+    if (loading) return
+    if (event.key === "ArrowDown") {
+      event.preventDefault()
+      moveSelection(1)
+      return
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault()
+      moveSelection(-1)
+      return
+    }
+    if (event.key === "Home") {
+      event.preventDefault()
+      if (selectableIds[0]) onSelect(selectableIds[0])
+      return
+    }
+    if (event.key === "End") {
+      event.preventDefault()
+      const last = selectableIds[selectableIds.length - 1]
+      if (last) onSelect(last)
+    }
+  }
+
+  const allItem: ServerTileItem = {
+    id: ALL_SERVERS_ID,
+    name: "Все серверы",
+    title: "Все серверы",
+    count: allCount,
+    meta: String(allCount),
+  }
+
+  return (
+    <Frame dense spacing="sm" className={cn("flex h-full min-h-0 w-full flex-col", className)}>
+      <FramePanel className="flex min-h-0 flex-1 flex-col gap-0 p-0">
+        <FrameHeader className="flex flex-col gap-2 border-b px-3 py-2">
+          {showHeader ? (
+            <div className="flex items-center justify-between gap-2">
+              <FrameTitle className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+                Серверы
+              </FrameTitle>
+              <span className="flex items-center gap-1.5">
+                {loading ? <Spinner className="size-3.5 text-muted-foreground" /> : null}
+                {headerRight}
+              </span>
+            </div>
+          ) : headerRight || loading ? (
+            <div className="flex justify-end gap-1.5">
+              {loading ? <Spinner className="size-3.5 text-muted-foreground" /> : null}
+              {headerRight}
+            </div>
+          ) : null}
+          <InputGroup>
+            <InputGroupAddon>
+              <SearchIcon className="size-3.5" />
+            </InputGroupAddon>
+            <InputGroupInput
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="Поиск…"
+              aria-label="Поиск сервера"
+              disabled={loading}
+            />
+          </InputGroup>
+        </FrameHeader>
+        <ScrollArea className="min-h-0 flex-1">
+          <div
+            ref={listRef}
+            className="flex flex-col gap-0.5 p-1.5"
+            role="listbox"
+            aria-label="Серверы"
+            aria-activedescendant={resolvedId ? `server-tile-${resolvedId}` : undefined}
+            tabIndex={0}
+            onKeyDown={handleListKeyDown}
+          >
+            {showAllTile ? (
+              <ServerTileButton
+                item={allItem}
+                selected={resolvedId === ALL_SERVERS_ID}
+                onSelect={() => onSelect(ALL_SERVERS_ID)}
+                showCount={showCount}
+                showType={false}
+                icon={
+                  <IconTile variant="elevated" size="sm" aria-hidden="true">
+                    <LayersIcon className="text-muted-foreground" />
+                  </IconTile>
+                }
+              />
+            ) : null}
+            {groups.map((group) => (
+              <div key={group.site || "__flat__"} className="flex flex-col gap-0.5">
+                {groupBySite && group.site ? (
+                  <p className="sticky top-0 z-[1] bg-background/95 px-2 py-1 text-[10px] font-bold uppercase tracking-wide text-muted-foreground backdrop-blur-sm">
+                    {group.site}
+                  </p>
+                ) : null}
+                {group.items.map((item) => (
+                  <ServerTileButton
+                    key={item.id}
+                    item={item}
+                    selected={resolvedId === item.id}
+                    onSelect={() => onSelect(item.id)}
+                    showCount={showCount}
+                    showType={showType}
+                    showSite={!groupBySite}
+                    icon={
+                      <IconTile variant="elevated" size="sm" aria-hidden="true">
+                        {item.country ? (
+                          <Flag code={item.country} size={16} />
+                        ) : (
+                          <ServerIcon className="text-muted-foreground" />
+                        )}
+                      </IconTile>
+                    }
+                  />
+                ))}
+              </div>
+            ))}
+            {filtered.length === 0 && !showAllTile ? (
+              <p className="px-2 py-3 text-center text-xs text-muted-foreground">
+                {loading
+                  ? "Загрузка серверов…"
+                  : items.length === 0
+                    ? "Нет доступных серверов"
+                    : "Ничего не найдено"}
+              </p>
+            ) : null}
+          </div>
+        </ScrollArea>
+      </FramePanel>
+    </Frame>
+  )
+}
+
+function ServerTileButton({
+  item,
+  selected,
+  onSelect,
+  showCount,
+  showType,
+  showSite = true,
+  icon,
+}: {
+  item: ServerTileItem
+  selected: boolean
+  onSelect: () => void
+  showCount: boolean
+  showType: boolean
+  showSite?: boolean
+  icon: ReactNode
+}) {
+  const isAll = item.id === ALL_SERVERS_ID
+  const selectable = isSelectable(item)
+  const hostname = isAll ? "Все серверы" : hostnameOf(item)
+  const meta = item.meta ?? (showCount && item.count != null ? String(item.count) : undefined)
+  const showStatus = Boolean(item.status && item.status !== "online")
+
+  return (
+    <Item
+      id={`server-tile-${item.id}`}
+      size="xs"
+      variant={selected ? "muted" : "default"}
+      render={
+        <button
+          type="button"
+          role="option"
+          aria-selected={selected}
+          title={item.title ?? hostname}
+          disabled={!selectable}
+          onClick={onSelect}
+        />
+      }
+      className={cn(
+        "h-11 min-h-11 flex-nowrap rounded-md py-0",
+        selected && "ring-1 ring-border",
+        item.enabled === false && !selected && "opacity-40",
+        !selectable && "cursor-not-allowed opacity-40 hover:bg-transparent",
+      )}
+    >
+      <ItemMedia>{icon}</ItemMedia>
+      <ItemContent className="min-w-0">
+        <ItemTitle className="max-w-full min-w-0 gap-1.5 font-mono text-[11px]">
+          {showStatus ? <StatusDot status={item.status!} /> : null}
+          <span className="min-w-0 truncate">{hostname}</span>
+          {!isAll && showSite && item.site ? (
+            <Badge variant="outline" size="xs" className="shrink-0 font-mono uppercase">
+              {item.site}
+            </Badge>
+          ) : null}
+          {!isAll && showType && item.type ? <ServerTypeBadge type={item.type} /> : null}
+        </ItemTitle>
+      </ItemContent>
+      {meta ? (
+        <ItemActions>
+          <Badge
+            variant={selected ? "secondary" : "outline"}
+            size="xs"
+            className="tabular-nums"
+          >
+            {meta}
+          </Badge>
+        </ItemActions>
+      ) : null}
+    </Item>
+  )
+}
+
+export { ServerTileRail, ServerTypeBadge, hostnameOf }

components/ui/chart.tsx

@@ -0,0 +1,372 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "@/lib/utils"
+import * as RechartsPrimitive from "recharts"
+import type { TooltipValueType } from "recharts"
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const
+
+const INITIAL_DIMENSION = { width: 320, height: 200 } as const
+type TooltipNameType = number | string
+
+export type ChartConfig = Record<
+  string,
+  {
+    label?: React.ReactNode
+    icon?: React.ComponentType
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  )
+>
+
+type ChartContextProps = {
+  config: ChartConfig
+}
+
+const ChartContext = React.createContext<ChartContextProps | null>(null)
+
+function useChart() {
+  const context = React.useContext(ChartContext)
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />")
+  }
+
+  return context
+}
+
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  initialDimension = INITIAL_DIMENSION,
+  ...props
+}: React.ComponentProps<"div"> & {
+  config: ChartConfig
+  children: React.ComponentProps<
+    typeof RechartsPrimitive.ResponsiveContainer
+  >["children"]
+  initialDimension?: {
+    width: number
+    height: number
+  }
+}) {
+  const uniqueId = React.useId()
+  const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-slot="chart"
+        data-chart={chartId}
+        className={cn(
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          className
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer
+          initialDimension={initialDimension}
+        >
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  )
+}
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config]) => config.theme ?? config.color
+  )
+
+  if (!colorConfig.length) {
+    return null
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??
+      itemConfig.color
+    return color ? `  --color-${key}: ${color};` : null
+  })
+  .join("\n")}
+}
+`
+          )
+          .join("\n"),
+      }}
+    />
+  )
+}
+
+const ChartTooltip = RechartsPrimitive.Tooltip
+
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = "dot",
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey,
+}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+  React.ComponentProps<"div"> & {
+    hideLabel?: boolean
+    hideIndicator?: boolean
+    indicator?: "line" | "dot" | "dashed"
+    nameKey?: string
+    labelKey?: string
+  } & Omit<
+    RechartsPrimitive.DefaultTooltipContentProps<
+      TooltipValueType,
+      TooltipNameType
+    >,
+    "accessibilityLayer"
+  >) {
+  const { config } = useChart()
+
+  const tooltipLabel = React.useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null
+    }
+
+    const [item] = payload
+    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`
+    const itemConfig = getPayloadConfigFromPayload(config, item, key)
+    const value =
+      !labelKey && typeof label === "string"
+        ? (config[label]?.label ?? label)
+        : itemConfig?.label
+
+    if (labelFormatter) {
+      return (
+        <div className={cn("font-medium", labelClassName)}>
+          {labelFormatter(value, payload)}
+        </div>
+      )
+    }
+
+    if (!value) {
+      return null
+    }
+
+    return <div className={cn("font-medium", labelClassName)}>{value}</div>
+  }, [
+    label,
+    labelFormatter,
+    payload,
+    hideLabel,
+    labelClassName,
+    config,
+    labelKey,
+  ])
+
+  if (!active || !payload?.length) {
+    return null
+  }
+
+  const nestLabel = payload.length === 1 && indicator !== "dot"
+
+  return (
+    <div
+      className={cn(
+        "grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+        className
+      )}
+    >
+      {!nestLabel ? tooltipLabel : null}
+      <div className="grid gap-1.5">
+        {payload
+          .filter((item) => item.type !== "none")
+          .map((item, index) => {
+            const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`
+            const itemConfig = getPayloadConfigFromPayload(config, item, key)
+            const indicatorColor = color ?? item.payload?.fill ?? item.color
+
+            return (
+              <div
+                key={index}
+                className={cn(
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                  indicator === "dot" && "items-center"
+                )}
+              >
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn(
+                            "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+                            {
+                              "h-2.5 w-2.5": indicator === "dot",
+                              "w-1": indicator === "line",
+                              "w-0 border-[1.5px] border-dashed bg-transparent":
+                                indicator === "dashed",
+                              "my-0.5": nestLabel && indicator === "dashed",
+                            }
+                          )}
+                          style={
+                            {
+                              "--color-bg": indicatorColor,
+                              "--color-border": indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div
+                      className={cn(
+                        "flex flex-1 justify-between leading-none",
+                        nestLabel ? "items-end" : "items-center"
+                      )}
+                    >
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-muted-foreground">
+                          {itemConfig?.label ?? item.name}
+                        </span>
+                      </div>
+                      {item.value != null && (
+                        <span className="font-mono font-medium text-foreground tabular-nums">
+                          {typeof item.value === "number"
+                            ? item.value.toLocaleString()
+                            : String(item.value)}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            )
+          })}
+      </div>
+    </div>
+  )
+}
+
+const ChartLegend = RechartsPrimitive.Legend
+
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = "bottom",
+  nameKey,
+}: React.ComponentProps<"div"> & {
+  hideIcon?: boolean
+  nameKey?: string
+} & RechartsPrimitive.DefaultLegendContentProps) {
+  const { config } = useChart()
+
+  if (!payload?.length) {
+    return null
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center gap-4",
+        verticalAlign === "top" ? "pb-3" : "pt-3",
+        className
+      )}
+    >
+      {payload
+        .filter((item) => item.type !== "none")
+        .map((item, index) => {
+          const key = `${nameKey ?? item.dataKey ?? "value"}`
+          const itemConfig = getPayloadConfigFromPayload(config, item, key)
+
+          return (
+            <div
+              key={index}
+              className={cn(
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+              )}
+            >
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  style={{
+                    backgroundColor: item.color,
+                  }}
+                />
+              )}
+              {itemConfig?.label}
+            </div>
+          )
+        })}
+    </div>
+  )
+}
+
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined
+
+  let configLabelKey: string = key
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === "string"
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string
+  }
+
+  return configLabelKey in config ? config[configLabelKey] : config[key]
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+}

components/ui/combobox.tsx

@@ -0,0 +1,300 @@
+"use client"
+
+import * as React from "react"
+import { Combobox as ComboboxPrimitive } from "@base-ui/react/combobox"
+import { cn } from "@/lib/utils"
+
+import { Button } from "@/components/ui/button"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+} from "@/components/ui/input-group"
+import { ChevronDownIcon, XIcon, CheckIcon } from "lucide-react"
+
+const Combobox = ComboboxPrimitive.Root
+
+function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {
+  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />
+}
+
+function ComboboxTrigger({
+  className,
+  children,
+  ...props
+}: ComboboxPrimitive.Trigger.Props) {
+  return (
+    <ComboboxPrimitive.Trigger
+      data-slot="combobox-trigger"
+      className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+    </ComboboxPrimitive.Trigger>
+  )
+}
+
+function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
+  return (
+    <ComboboxPrimitive.Clear
+      data-slot="combobox-clear"
+      render={<InputGroupButton variant="ghost" size="icon-xs" />}
+      className={cn(className)}
+      {...props}
+    >
+      <XIcon className="pointer-events-none" />
+    </ComboboxPrimitive.Clear>
+  )
+}
+
+function ComboboxInput({
+  className,
+  children,
+  disabled = false,
+  showTrigger = true,
+  showClear = false,
+  ...props
+}: ComboboxPrimitive.Input.Props & {
+  showTrigger?: boolean
+  showClear?: boolean
+}) {
+  return (
+    <InputGroup className={cn("w-auto", className)}>
+      <ComboboxPrimitive.Input
+        render={<InputGroupInput disabled={disabled} />}
+        {...props}
+      />
+      <InputGroupAddon align="inline-end">
+        {showTrigger && (
+          <InputGroupButton
+            size="icon-xs"
+            variant="ghost"
+            render={<ComboboxTrigger />}
+            data-slot="input-group-button"
+            className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
+            disabled={disabled}
+          />
+        )}
+        {showClear && <ComboboxClear disabled={disabled} />}
+      </InputGroupAddon>
+      {children}
+    </InputGroup>
+  )
+}
+
+function ComboboxContent({
+  className,
+  side = "bottom",
+  sideOffset = 6,
+  align = "start",
+  alignOffset = 0,
+  anchor,
+  ...props
+}: ComboboxPrimitive.Popup.Props &
+  Pick<
+    ComboboxPrimitive.Positioner.Props,
+    "side" | "align" | "sideOffset" | "alignOffset" | "anchor"
+  >) {
+  return (
+    <ComboboxPrimitive.Portal>
+      <ComboboxPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        anchor={anchor}
+        className="isolate z-50"
+      >
+        <ComboboxPrimitive.Popup
+          data-slot="combobox-content"
+          data-chips={!!anchor}
+          className={cn(
+            "group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className,
+          )}
+          {...props}
+        />
+      </ComboboxPrimitive.Positioner>
+    </ComboboxPrimitive.Portal>
+  )
+}
+
+function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {
+  return (
+    <ComboboxPrimitive.List
+      data-slot="combobox-list"
+      className={cn(
+        "no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxItem({
+  className,
+  children,
+  ...props
+}: ComboboxPrimitive.Item.Props) {
+  return (
+    <ComboboxPrimitive.Item
+      data-slot="combobox-item"
+      className={cn(
+        "relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ComboboxPrimitive.ItemIndicator
+        render={
+          <span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
+        }
+      >
+        <CheckIcon className="pointer-events-none" />
+      </ComboboxPrimitive.ItemIndicator>
+    </ComboboxPrimitive.Item>
+  )
+}
+
+function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {
+  return (
+    <ComboboxPrimitive.Group
+      data-slot="combobox-group"
+      className={cn(className)}
+      {...props}
+    />
+  )
+}
+
+function ComboboxLabel({
+  className,
+  ...props
+}: ComboboxPrimitive.GroupLabel.Props) {
+  return (
+    <ComboboxPrimitive.GroupLabel
+      data-slot="combobox-label"
+      className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {
+  return (
+    <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />
+  )
+}
+
+function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
+  return (
+    <ComboboxPrimitive.Empty
+      data-slot="combobox-empty"
+      className={cn(
+        "hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxSeparator({
+  className,
+  ...props
+}: ComboboxPrimitive.Separator.Props) {
+  return (
+    <ComboboxPrimitive.Separator
+      data-slot="combobox-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
+      {...props}
+    />
+  )
+}
+
+function ComboboxChips({
+  className,
+  ...props
+}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &
+  ComboboxPrimitive.Chips.Props) {
+  return (
+    <ComboboxPrimitive.Chips
+      data-slot="combobox-chips"
+      className={cn(
+        "flex min-h-8 flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function ComboboxChip({
+  className,
+  children,
+  showRemove = true,
+  ...props
+}: ComboboxPrimitive.Chip.Props & {
+  showRemove?: boolean
+}) {
+  return (
+    <ComboboxPrimitive.Chip
+      data-slot="combobox-chip"
+      className={cn(
+        "flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm bg-muted px-1.5 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {showRemove && (
+        <ComboboxPrimitive.ChipRemove
+          render={<Button variant="ghost" size="icon-xs" />}
+          className="-ml-1 opacity-50 hover:opacity-100"
+          data-slot="combobox-chip-remove"
+        >
+          <XIcon className="pointer-events-none" />
+        </ComboboxPrimitive.ChipRemove>
+      )}
+    </ComboboxPrimitive.Chip>
+  )
+}
+
+function ComboboxChipsInput({
+  className,
+  ...props
+}: ComboboxPrimitive.Input.Props) {
+  return (
+    <ComboboxPrimitive.Input
+      data-slot="combobox-chip-input"
+      className={cn("min-w-16 flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+function useComboboxAnchor() {
+  return React.useRef<HTMLDivElement | null>(null)
+}
+
+export {
+  Combobox,
+  ComboboxInput,
+  ComboboxContent,
+  ComboboxList,
+  ComboboxItem,
+  ComboboxGroup,
+  ComboboxLabel,
+  ComboboxCollection,
+  ComboboxEmpty,
+  ComboboxSeparator,
+  ComboboxChips,
+  ComboboxChip,
+  ComboboxChipsInput,
+  ComboboxTrigger,
+  ComboboxValue,
+  useComboboxAnchor,
+}

components/ui/item.tsx

@@ -0,0 +1,203 @@
+"use client"
+
+import * as React from "react"
+import { mergeProps } from "@base-ui/react/merge-props"
+import { useRender } from "@base-ui/react/use-render"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "@/lib/utils"
+
+import { Separator } from "@/components/ui/separator"
+
+function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      role="list"
+      data-slot="item-group"
+      className={cn(
+        "group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="item-separator"
+      orientation="horizontal"
+      className={cn("my-2", className)}
+      {...props}
+    />
+  )
+}
+
+const itemVariants = cva(
+  "group/item flex w-full flex-wrap items-center rounded-lg border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent",
+        outline: "border-border",
+        muted: "border-transparent bg-muted/50",
+      },
+      size: {
+        default: "gap-2.5 px-3 py-2.5",
+        sm: "gap-2.5 px-3 py-2.5",
+        xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Item({
+  className,
+  variant = "default",
+  size = "default",
+  render,
+  ...props
+}: useRender.ComponentProps<"div"> & VariantProps<typeof itemVariants>) {
+  return useRender({
+    defaultTagName: "div",
+    props: mergeProps<"div">(
+      {
+        className: cn(itemVariants({ variant, size, className })),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "item",
+      variant,
+      size,
+    },
+  })
+}
+
+const itemMediaVariants = cva(
+  "flex shrink-0 items-center justify-center gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start [&_svg]:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "[&_svg:not([class*='size-'])]:size-4",
+        image:
+          "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function ItemMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>) {
+  return (
+    <div
+      data-slot="item-media"
+      data-variant={variant}
+      className={cn(itemMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-content"
+      className={cn(
+        "flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-title"
+      className={cn(
+        "line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="item-description"
+      className={cn(
+        "line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-actions"
+      className={cn("flex items-center gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-header"
+      className={cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-footer"
+      className={cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Item,
+  ItemMedia,
+  ItemContent,
+  ItemActions,
+  ItemGroup,
+  ItemSeparator,
+  ItemTitle,
+  ItemDescription,
+  ItemHeader,
+  ItemFooter,
+}

components/users/user-sheet.tsx

@@ -0,0 +1,689 @@
+"use client"
+
+import { useEffect, useMemo, useState, type ReactNode } from "react"
+import { FormField, FormToggle, SegmentedControl } from "@/components/form-kit"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import {
+  Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle,
+} from "@/components/ui/sheet"
+import {
+  Stepper,
+  StepperContent,
+  StepperIndicator,
+  StepperItem,
+  StepperNav,
+  StepperPanel,
+  StepperSeparator,
+  StepperTitle,
+  StepperTrigger,
+} from "@/components/reui/stepper"
+import { Badge } from "@/components/reui/badge"
+import { IconTile } from "@/components/reui/icon-tile"
+import { Frame, FramePanel } from "@/components/reui/frame"
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemMedia,
+  ItemTitle,
+} from "@/components/ui/item"
+import { Flag } from "@/components/flag"
+import { StatusDot } from "@/components/status-dot"
+import { cn } from "@/lib/utils"
+import { listInterfaceCatalog } from "@/shared/api/users"
+import { TYPE_VARIANT } from "@/components/data-grids/users-expanded-detail"
+import {
+  bindingDiffKey,
+  bindingTitle,
+  catalogForServer,
+  defaultSections,
+  defaultServers,
+  IFACE_TYPE_LABEL,
+  PERM_COLOR,
+  PERM_OPTS,
+  ROLE_LABEL,
+  SECTION_GROUP_DEFS,
+  type AppUser,
+  type AppUserForm,
+  type CatalogIface,
+  type InterfaceBinding,
+  type InterfaceType,
+  type PermLevel,
+  type Role,
+  type UserServerOption,
+} from "@/lib/users"
+import {
+  CableIcon, ChevronDownIcon, EyeIcon, KeyRoundIcon, LayoutDashboardIcon,
+  NetworkIcon, PlusIcon, ServerIcon, ShieldIcon, TrashIcon, WrenchIcon,
+} from "lucide-react"
+
+const IFACE_TILE: Record<InterfaceType, { icon: typeof CableIcon; className: string }> = {
+  ether: { icon: CableIcon, className: "text-muted-foreground" },
+  gre: { icon: NetworkIcon, className: "text-info" },
+  wg: { icon: ShieldIcon, className: "text-success" },
+  other: { icon: CableIcon, className: "text-muted-foreground" },
+}
+
+type CatalogPick = {
+  interfaceName: string
+  peerPublicKey: string
+  peerName?: string
+  type: InterfaceType
+}
+
+function pickKey(p: CatalogPick): string {
+  return `${p.interfaceName}\0${p.peerPublicKey}`
+}
+
+const SECTION_GROUP_ICONS: Record<string, ReactNode> = {
+  "Обзор": <LayoutDashboardIcon className="size-3" />,
+  "Данные": <EyeIcon className="size-3" />,
+  "Управление": <WrenchIcon className="size-3" />,
+  "Инструменты": <ShieldIcon className="size-3" />,
+  "Система": <ServerIcon className="size-3" />,
+}
+
+function PermPills({ value, onChange, disabled }: { value: PermLevel; onChange: (v: PermLevel) => void; disabled?: boolean }) {
+  return (
+    <div className={cn("flex rounded border border-input overflow-hidden h-6", disabled && "opacity-40 pointer-events-none")}>
+      {PERM_OPTS.map((o, i) => (
+        <button
+          key={o.v}
+          type="button"
+          onClick={() => onChange(o.v)}
+          className={cn(
+            "px-2 text-[11px] font-medium transition-colors",
+            i < PERM_OPTS.length - 1 && "border-r border-input",
+            value === o.v
+              ? o.v === "write" ? "bg-success text-white"
+              : o.v === "read" ? "bg-info text-white"
+              : "bg-muted-foreground/70 text-white"
+              : "text-muted-foreground hover:bg-muted",
+          )}
+        >
+          {o.label}
+        </button>
+      ))}
+    </div>
+  )
+}
+
+function emptyForm(serverList: UserServerOption[]): AppUserForm {
+  return {
+    name: "", login: "", email: "", role: "viewer", active: true,
+    sections: defaultSections("viewer"),
+    servers: defaultServers("viewer", serverList),
+    bindings: [],
+  }
+}
+
+function toForm(user: AppUser): AppUserForm {
+  return {
+    name: user.name, login: user.login, email: user.email, role: user.role, active: user.active,
+    sections: user.sections.map((s) => ({ ...s })),
+    servers: user.servers.map((s) => ({ ...s })),
+    bindings: user.bindings.map((b) => ({ ...b })),
+  }
+}
+
+function isValidEmail(value: string) {
+  const email = value.trim()
+  return email.length > 0 && email.includes("@")
+}
+
+interface UserSheetProps {
+  open: boolean
+  user: AppUser | null
+  users: AppUser[]
+  servers: UserServerOption[]
+  isLive: boolean
+  backendUrl: string
+  saving?: boolean
+  onSave: (form: AppUserForm) => void
+  onClose: () => void
+}
+
+function UserSheet({
+  open, user, users, servers, isLive, backendUrl, saving, onSave, onClose,
+}: UserSheetProps) {
+  const isCreate = user === null
+  const [sheetStep, setSheetStep] = useState(1)
+  const [form, setForm] = useState<AppUserForm>(() => (user ? toForm(user) : emptyForm(servers)))
+  const [errors, setErrors] = useState<Partial<Record<keyof AppUserForm, string>>>({})
+  const [catalogServerId, setCatalogServerId] = useState(servers[0]?.id ?? "")
+  const [catalog, setCatalog] = useState<CatalogIface[]>([])
+  const [selectedPicks, setSelectedPicks] = useState<CatalogPick[]>([])
+  const [expandedWg, setExpandedWg] = useState<string | null>(null)
+  const [newComment, setNewComment] = useState("")
+
+  useEffect(() => {
+    if (!open) return
+    setForm(user ? toForm(user) : emptyForm(servers))
+    setSheetStep(1)
+    setErrors({})
+    setCatalogServerId(servers[0]?.id ?? "")
+    setSelectedPicks([])
+    setExpandedWg(null)
+    setNewComment("")
+  }, [open, user, servers])
+
+  useEffect(() => {
+    if (!open || !catalogServerId) {
+      setCatalog([])
+      return
+    }
+    if (!isLive) {
+      const occupancy = users.map((u) =>
+        u.id === user?.id ? { ...u, bindings: form.bindings } : u,
+      )
+      const withDraft = user
+        ? occupancy
+        : [...occupancy, { id: "__draft__", name: "", login: "", email: "", role: "viewer" as const, last: "", avatar: "", active: true, sections: [], servers: [], bindings: form.bindings }]
+      setCatalog(catalogForServer(catalogServerId, withDraft))
+      return
+    }
+    let cancelled = false
+    void listInterfaceCatalog(backendUrl, catalogServerId)
+      .then((ifaces) => { if (!cancelled) setCatalog(ifaces) })
+      .catch(() => { if (!cancelled) setCatalog([]) })
+    return () => { cancelled = true }
+  }, [open, catalogServerId, isLive, backendUrl, users, user, form.bindings])
+
+  const setField = <K extends keyof AppUserForm>(k: K, v: AppUserForm[K]) => {
+    setForm((f) => ({ ...f, [k]: v }))
+    if (errors[k]) setErrors((e) => ({ ...e, [k]: undefined }))
+  }
+
+  const setRole = (role: Role) => {
+    setForm((f) => ({
+      ...f,
+      role,
+      sections: defaultSections(role),
+      servers: servers.map((s) => ({ serverId: s.id, level: role === "admin" ? "write" : "read" })),
+    }))
+  }
+
+  const setSectionPerm = (section: string, level: PermLevel) => {
+    setForm((f) => ({
+      ...f,
+      sections: f.sections.map((s) => s.section === section ? { ...s, level } : s),
+    }))
+  }
+
+  const setServerPerm = (serverId: string, level: PermLevel) => {
+    setForm((f) => ({
+      ...f,
+      servers: f.servers.map((s) => s.serverId === serverId ? { ...s, level } : s),
+    }))
+  }
+
+  const setAllSections = (level: PermLevel) => {
+    setForm((f) => ({ ...f, sections: f.sections.map((s) => ({ ...s, level })) }))
+  }
+
+  const setAllServers = (level: PermLevel) => {
+    setForm((f) => ({ ...f, servers: f.servers.map((s) => ({ ...s, level })) }))
+  }
+
+  const submit = () => {
+    const email = form.email.trim()
+    const e: Partial<Record<keyof AppUserForm, string>> = {}
+    if (!form.name.trim()) e.name = "Обязательное поле"
+    if (!isValidEmail(email)) e.email = email ? "Укажите корректный email" : "Обязательное поле"
+    setErrors(e)
+    if (Object.keys(e).length) {
+      setSheetStep(1)
+      return
+    }
+    onSave({ ...form, email, login: email })
+  }
+
+  const isAdmin = form.role === "admin"
+  const catalogSrv = servers.find((s) => s.id === catalogServerId)
+
+  const addSelectedBindings = () => {
+    if (!catalogSrv || selectedPicks.length === 0) return
+    const existing = new Set(form.bindings.map(bindingDiffKey))
+    const next: InterfaceBinding[] = [...form.bindings]
+    for (const pick of selectedPicks) {
+      const key = bindingDiffKey({
+        serverId: catalogSrv.id,
+        interfaceName: pick.interfaceName,
+        peerPublicKey: pick.peerPublicKey,
+      })
+      if (existing.has(key)) continue
+      next.push({
+        id: `pending-${catalogSrv.id}-${pick.interfaceName}-${pick.peerPublicKey || "iface"}`,
+        userId: user?.id ?? "",
+        serverId: catalogSrv.id,
+        serverName: catalogSrv.name,
+        serverSite: catalogSrv.site,
+        serverCountry: catalogSrv.country,
+        interfaceName: pick.interfaceName,
+        interfaceType: pick.type,
+        peerPublicKey: pick.peerPublicKey || undefined,
+        peerName: pick.peerName,
+        comment: newComment.trim(),
+      })
+    }
+    setForm((f) => ({ ...f, bindings: next }))
+    setSelectedPicks([])
+    setNewComment("")
+  }
+
+  const removeBinding = (id: string) => {
+    setForm((f) => ({ ...f, bindings: f.bindings.filter((b) => b.id !== id) }))
+  }
+
+  const togglePick = (pick: CatalogPick) => {
+    setSelectedPicks((prev) => {
+      const key = pickKey(pick)
+      return prev.some((p) => pickKey(p) === key)
+        ? prev.filter((p) => pickKey(p) !== key)
+        : [...prev, pick]
+    })
+  }
+
+  const alreadyBoundHere = useMemo(
+    () => new Set(
+      form.bindings
+        .filter((b) => b.serverId === catalogServerId)
+        .map((b) => `${b.interfaceName}\0${b.peerPublicKey ?? ""}`),
+    ),
+    [form.bindings, catalogServerId],
+  )
+
+  const selectedPickKeys = useMemo(() => new Set(selectedPicks.map(pickKey)), [selectedPicks])
+
+  return (
+    <Sheet open={open} onOpenChange={(v) => { if (!v) onClose() }}>
+      <SheetContent side="right" className="w-full sm:max-w-lg flex flex-col gap-0 p-0">
+        <SheetHeader className="px-6 pt-6 pb-4 border-b shrink-0">
+          <SheetTitle>{isCreate ? "Новый пользователь" : "Редактировать пользователя"}</SheetTitle>
+          <SheetDescription>
+            {isCreate ? "Профиль, права и привязка интерфейсов" : "Права доступа и привязка интерфейсов"}
+          </SheetDescription>
+        </SheetHeader>
+
+        <Stepper value={sheetStep} onValueChange={setSheetStep} className="flex-1 flex flex-col min-h-0 px-6 py-5">
+          <StepperNav className="mb-5">
+            <StepperItem step={1}>
+              <StepperTrigger>
+                <StepperIndicator>1</StepperIndicator>
+                <StepperTitle className="sr-only">Профиль</StepperTitle>
+              </StepperTrigger>
+              <StepperSeparator />
+            </StepperItem>
+            <StepperItem step={2}>
+              <StepperTrigger>
+                <StepperIndicator>2</StepperIndicator>
+                <StepperTitle className="sr-only">Разделы</StepperTitle>
+              </StepperTrigger>
+              <StepperSeparator />
+            </StepperItem>
+            <StepperItem step={3}>
+              <StepperTrigger>
+                <StepperIndicator>3</StepperIndicator>
+                <StepperTitle className="sr-only">Серверы</StepperTitle>
+              </StepperTrigger>
+              <StepperSeparator />
+            </StepperItem>
+            <StepperItem step={4}>
+              <StepperTrigger>
+                <StepperIndicator>4</StepperIndicator>
+                <StepperTitle className="sr-only">Интерфейсы</StepperTitle>
+              </StepperTrigger>
+            </StepperItem>
+          </StepperNav>
+          <StepperPanel className="flex-1 overflow-y-auto">
+            <StepperContent value={1} className="flex flex-col gap-4">
+              <FormField label="Полное имя" required error={errors.name}>
+                <Input value={form.name} onChange={(e) => setField("name", e.target.value)} placeholder="Иван Иванов" />
+              </FormField>
+              <FormField label="Email" required error={errors.email}>
+                <Input
+                  value={form.email}
+                  onChange={(e) => setField("email", e.target.value)}
+                  placeholder="[email protected]"
+                  type="email"
+                />
+              </FormField>
+              <FormField label="Роль" required>
+                <SegmentedControl
+                  value={form.role}
+                  onChange={setRole}
+                  options={[
+                    { value: "viewer", label: ROLE_LABEL.viewer },
+                    { value: "operator", label: ROLE_LABEL.operator },
+                    { value: "admin", label: ROLE_LABEL.admin },
+                  ]}
+                />
+              </FormField>
+              <div className="flex items-center justify-between">
+                <span className="text-sm font-medium">Активна</span>
+                <FormToggle checked={form.active} onChange={(v) => setField("active", v)} />
+              </div>
+            </StepperContent>
+
+            <StepperContent value={2} className="flex flex-col">
+              <div className="flex items-center gap-2 px-0 py-2.5 border-b bg-muted/30">
+                <span className="text-xs text-muted-foreground mr-1">Выбрать всё:</span>
+                {PERM_OPTS.map((o) => (
+                  <button
+                    key={o.v}
+                    type="button"
+                    onClick={() => setAllSections(o.v)}
+                    disabled={isAdmin}
+                    className={cn(
+                      "text-[11px] px-2 py-0.5 rounded border transition-colors",
+                      isAdmin ? "opacity-30 cursor-not-allowed" : "hover:bg-muted cursor-pointer",
+                      PERM_COLOR[o.v], "border-border",
+                    )}
+                  >
+                    {o.label}
+                  </button>
+                ))}
+                {isAdmin && (
+                  <span className="ml-auto text-[11px] text-muted-foreground flex items-center gap-1">
+                    <ShieldIcon className="size-3" />Администратор имеет полный доступ
+                  </span>
+                )}
+              </div>
+              {SECTION_GROUP_DEFS.map((group) => (
+                <div key={group.group}>
+                  <div className="flex items-center gap-2 py-1.5 bg-muted/20 border-b">
+                    <span className="text-muted-foreground">{SECTION_GROUP_ICONS[group.group]}</span>
+                    <span className="text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">
+                      {group.group}
+                    </span>
+                  </div>
+                  <div className="divide-y divide-border/60">
+                    {group.items.map((section) => {
+                      const perm = form.sections.find((s) => s.section === section)
+                      const level = perm?.level ?? "none"
+                      return (
+                        <div key={section} className="flex items-center justify-between py-2.5 hover:bg-muted/20 transition-colors">
+                          <span className="text-sm">{section}</span>
+                          <PermPills value={level} onChange={(v) => setSectionPerm(section, v)} disabled={isAdmin} />
+                        </div>
+                      )
+                    })}
+                  </div>
+                </div>
+              ))}
+            </StepperContent>
+
+            <StepperContent value={3} className="flex flex-col">
+              <div className="flex items-center gap-2 py-2.5 border-b bg-muted/30">
+                <span className="text-xs text-muted-foreground mr-1">Выбрать всё:</span>
+                {PERM_OPTS.map((o) => (
+                  <button
+                    key={o.v}
+                    type="button"
+                    onClick={() => setAllServers(o.v)}
+                    disabled={isAdmin}
+                    className={cn(
+                      "text-[11px] px-2 py-0.5 rounded border transition-colors",
+                      isAdmin ? "opacity-30 cursor-not-allowed" : "hover:bg-muted cursor-pointer",
+                      PERM_COLOR[o.v], "border-border",
+                    )}
+                  >
+                    {o.label}
+                  </button>
+                ))}
+              </div>
+              <div className="divide-y divide-border/60">
+                {servers.map((srv) => {
+                  const perm = form.servers.find((s) => s.serverId === srv.id)
+                  const level = perm?.level ?? "none"
+                  return (
+                    <div key={srv.id} className="flex items-center justify-between gap-3 py-2.5 hover:bg-muted/20 transition-colors">
+                      <div className="flex items-center gap-2.5 min-w-0">
+                        {srv.status ? <StatusDot status={srv.status} /> : null}
+                        {srv.country ? <Flag code={srv.country} size={14} /> : null}
+                        <div className="min-w-0">
+                          <p className="text-sm font-medium truncate leading-tight">{srv.name}</p>
+                          <p className="text-[11px] font-mono text-muted-foreground">{srv.host} · {srv.site}</p>
+                        </div>
+                      </div>
+                      <PermPills value={level} onChange={(v) => setServerPerm(srv.id, v)} disabled={isAdmin} />
+                    </div>
+                  )
+                })}
+              </div>
+            </StepperContent>
+
+            <StepperContent value={4} className="flex flex-col">
+              <p className="text-[11px] text-muted-foreground py-2.5 border-b">
+                Ethernet и GRE — целиком. WireGuard — только пир (public-key).
+              </p>
+
+              <div className="py-3 flex flex-col gap-3 border-b">
+                <label className="text-[10px] text-muted-foreground">Сервер</label>
+                <select
+                  className="h-8 rounded-md border bg-background px-2 text-xs font-mono"
+                  value={catalogServerId}
+                  onChange={(e) => { setCatalogServerId(e.target.value); setSelectedPicks([]); setExpandedWg(null) }}
+                >
+                  {servers.map((s) => (
+                    <option key={s.id} value={s.id}>{s.name} · {s.site}</option>
+                  ))}
+                </select>
+                <Frame dense spacing="sm">
+                  <FramePanel className="max-h-64 overflow-y-auto p-1.5">
+                    {catalog.length === 0 && (
+                      <p className="px-2 py-3 text-center text-[11px] text-muted-foreground">Нет интерфейсов в каталоге</p>
+                    )}
+                    <div className="flex flex-col gap-0.5">
+                      {catalog.map((iface) => {
+                        const tile = IFACE_TILE[iface.type]
+                        const Icon = tile.icon
+                        if (iface.type === "wg") {
+                          const open = expandedWg === iface.name
+                          const legacyTaken = Boolean(iface.boundUserId && iface.boundUserId !== user?.id)
+                          const legacyMine = alreadyBoundHere.has(`${iface.name}\0`)
+                          return (
+                            <div key={iface.name} className="flex flex-col gap-0.5">
+                              <Item
+                                size="xs"
+                                variant={open ? "muted" : "default"}
+                                render={<button type="button" onClick={() => setExpandedWg(open ? null : iface.name)} />}
+                                className="h-11 min-h-11 flex-nowrap rounded-md py-0"
+                              >
+                                <ItemMedia>
+                                  <IconTile variant="elevated" className={cn("size-10.5 shrink-0", tile.className)}>
+                                    <Icon />
+                                  </IconTile>
+                                </ItemMedia>
+                                <ItemContent className="min-w-0">
+                                  <ItemTitle className="max-w-full min-w-0 gap-1.5 font-mono text-[11px]">
+                                    <span className="min-w-0 truncate">{iface.name}</span>
+                                    <Badge variant={TYPE_VARIANT.wg} size="sm">WireGuard</Badge>
+                                  </ItemTitle>
+                                </ItemContent>
+                                <ItemActions>
+                                  {legacyMine ? (
+                                    <Badge variant="warning-light" size="xs">весь интерфейс</Badge>
+                                  ) : null}
+                                  <ChevronDownIcon className={cn("size-3.5 text-muted-foreground transition-transform", open && "rotate-180")} />
+                                </ItemActions>
+                              </Item>
+                              {open ? (
+                                <div className="ml-4 flex flex-col gap-0.5 border-l pl-2">
+                                  {iface.peersError ? (
+                                    <p className="px-2 py-1.5 text-[11px] text-muted-foreground">Не удалось загрузить пиры</p>
+                                  ) : null}
+                                  {(iface.peers ?? []).length === 0 && !iface.peersError ? (
+                                    <p className="px-2 py-1.5 text-[11px] text-muted-foreground">Нет пиров на интерфейсе</p>
+                                  ) : null}
+                                  {(iface.peers ?? []).map((peer) => {
+                                    const pick: CatalogPick = {
+                                      interfaceName: iface.name,
+                                      peerPublicKey: peer.publicKey,
+                                      peerName: peer.name,
+                                      type: "wg",
+                                    }
+                                    const taken = Boolean(peer.boundUserId && peer.boundUserId !== user?.id)
+                                    const mine = alreadyBoundHere.has(`${iface.name}\0${peer.publicKey}`)
+                                    const disabled = taken || mine || legacyTaken
+                                    const selected = selectedPickKeys.has(pickKey(pick))
+                                    return (
+                                      <Item
+                                        key={peer.publicKey}
+                                        size="xs"
+                                        variant={selected ? "muted" : "default"}
+                                        render={
+                                          <button
+                                            type="button"
+                                            disabled={disabled}
+                                            onClick={() => togglePick(pick)}
+                                          />
+                                        }
+                                        className={cn(
+                                          "h-11 min-h-11 flex-nowrap rounded-md py-0",
+                                          selected && "ring-1 ring-border",
+                                          disabled && "cursor-not-allowed opacity-50",
+                                        )}
+                                      >
+                                        <ItemMedia>
+                                          <IconTile variant="elevated" className="size-10.5 shrink-0 text-success">
+                                            <KeyRoundIcon />
+                                          </IconTile>
+                                        </ItemMedia>
+                                        <ItemContent className="min-w-0">
+                                          <ItemTitle className="max-w-full min-w-0 gap-1.5 font-mono text-[11px]">
+                                            <span className="min-w-0 truncate">{peer.name || peer.publicKey}</span>
+                                            {peer.latestHandshake ? (
+                                              <Badge variant="success-light" size="xs">handshake</Badge>
+                                            ) : null}
+                                          </ItemTitle>
+                                        </ItemContent>
+                                        <ItemActions>
+                                          {taken ? (
+                                            <span className="max-w-28 truncate text-[10px] text-muted-foreground">{peer.boundUserLogin}</span>
+                                          ) : mine ? (
+                                            <span className="text-[10px] text-muted-foreground">уже привязан</span>
+                                          ) : selected ? (
+                                            <Badge variant="secondary" size="xs">Выбран</Badge>
+                                          ) : null}
+                                        </ItemActions>
+                                      </Item>
+                                    )
+                                  })}
+                                </div>
+                              ) : null}
+                            </div>
+                          )
+                        }
+
+                        const pick: CatalogPick = { interfaceName: iface.name, peerPublicKey: "", type: iface.type }
+                        const taken = Boolean(iface.boundUserId && iface.boundUserId !== user?.id)
+                        const mine = alreadyBoundHere.has(`${iface.name}\0`)
+                        const disabled = taken || mine
+                        const selected = selectedPickKeys.has(pickKey(pick))
+                        return (
+                          <Item
+                            key={iface.name}
+                            size="xs"
+                            variant={selected ? "muted" : "default"}
+                            render={
+                              <button
+                                type="button"
+                                disabled={disabled}
+                                onClick={() => togglePick(pick)}
+                              />
+                            }
+                            className={cn(
+                              "h-11 min-h-11 flex-nowrap rounded-md py-0",
+                              selected && "ring-1 ring-border",
+                              disabled && "cursor-not-allowed opacity-50",
+                            )}
+                          >
+                            <ItemMedia>
+                              <IconTile variant="elevated" className={cn("size-10.5 shrink-0", tile.className)}>
+                                <Icon />
+                              </IconTile>
+                            </ItemMedia>
+                            <ItemContent className="min-w-0">
+                              <ItemTitle className="max-w-full min-w-0 gap-1.5 font-mono text-[11px]">
+                                {iface.running ? <StatusDot status="online" /> : <StatusDot status="offline" />}
+                                <span className="min-w-0 truncate">{iface.name}</span>
+                                <Badge variant={TYPE_VARIANT[iface.type]} size="sm">
+                                  {IFACE_TYPE_LABEL[iface.type]}
+                                </Badge>
+                              </ItemTitle>
+                            </ItemContent>
+                            <ItemActions>
+                              {taken ? (
+                                <span className="max-w-28 truncate text-[10px] text-muted-foreground">{iface.boundUserLogin}</span>
+                              ) : mine ? (
+                                <span className="text-[10px] text-muted-foreground">уже привязан</span>
+                              ) : selected ? (
+                                <Badge variant="secondary" size="xs">Выбран</Badge>
+                              ) : null}
+                            </ItemActions>
+                          </Item>
+                        )
+                      })}
+                    </div>
+                  </FramePanel>
+                </Frame>
+                <Input
+                  className="h-8 text-xs"
+                  placeholder="Комментарий (необязательно)"
+                  value={newComment}
+                  onChange={(e) => setNewComment(e.target.value)}
+                />
+                <Button size="sm" disabled={selectedPicks.length === 0} onClick={addSelectedBindings}>
+                  <PlusIcon className="size-3.5" />Привязать
+                </Button>
+              </div>
+
+              <div className="flex flex-col gap-1.5 py-3">
+                {form.bindings.length === 0 && (
+                  <p className="text-xs text-muted-foreground">Нет привязанных интерфейсов</p>
+                )}
+                {form.bindings.map((b) => (
+                  <div key={b.id} className="flex items-center gap-2 py-1">
+                    <Flag code={b.serverCountry} size={12} />
+                    <span className="font-mono text-xs truncate">{bindingTitle(b)}</span>
+                    <Badge variant={TYPE_VARIANT[b.interfaceType]} size="sm">{IFACE_TYPE_LABEL[b.interfaceType]}</Badge>
+                    {b.interfaceType === "wg" && !(b.peerPublicKey ?? "") ? (
+                      <Badge variant="warning-light" size="sm">весь интерфейс</Badge>
+                    ) : null}
+                    <span className="text-[10px] text-muted-foreground truncate">{b.serverName}</span>
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      className="size-7 p-0 ml-auto text-muted-foreground hover:text-destructive"
+                      onClick={() => removeBinding(b.id)}
+                    >
+                      <TrashIcon className="size-3.5" />
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            </StepperContent>
+          </StepperPanel>
+        </Stepper>
+
+        <SheetFooter className="px-6 py-4 border-t shrink-0 flex-row gap-2">
+          <SheetClose render={<Button variant="outline" />}>Отмена</SheetClose>
+          {sheetStep > 1 && (
+            <Button variant="outline" onClick={() => setSheetStep((s) => s - 1)}>Назад</Button>
+          )}
+          {sheetStep < 4 ? (
+            <Button className="ml-auto" onClick={() => setSheetStep((s) => s + 1)}>Далее</Button>
+          ) : (
+            <Button className="ml-auto" disabled={saving} onClick={submit}>
+              {isCreate ? "Создать" : "Сохранить"}
+            </Button>
+          )}
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  )
+}
+
+export { UserSheet, type UserSheetProps }

components/wireguard/wg-create-sheet.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useMemo, useState } from "react"
+import { useEffect, useMemo, useState } from "react"
 import { FormField, FormToggle, SectionTitle } from "@/components/form-kit"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
@@ -51,30 +51,31 @@ function WgCreateSheet({
   onOpenChange,
   servers,
   busy,
+  defaultServerId,
   onSubmit,
 }: {
   open: boolean
   onOpenChange: (v: boolean) => void
   servers: ServerOption[]
   busy?: boolean
+  defaultServerId?: string
   onSubmit: (form: WgCreateFormState) => void | Promise<void>
 }) {
   const [form, setForm] = useState<WgCreateFormState>(defaultWgCreateForm)
   const set = <K extends keyof WgCreateFormState>(k: K, v: WgCreateFormState[K]) =>
     setForm((f) => ({ ...f, [k]: v }))
 
+  useEffect(() => {
+    if (!open) return
+    setForm({ ...defaultWgCreateForm(), serverId: defaultServerId ?? "" })
+  }, [open, defaultServerId])
+
   const canSubmit = useMemo(() => {
     return Boolean(form.serverId && form.name.trim() && form.listenPort)
   }, [form.serverId, form.name, form.listenPort])
 
   return (
-    <Sheet
+    <Sheet open={open} onOpenChange={onOpenChange}>
-      open={open}
-      onOpenChange={(v) => {
-        if (v) setForm(defaultWgCreateForm())
-        onOpenChange(v)
-      }}
-    >
       <SheetContent side="right" className="w-full sm:max-w-md flex flex-col gap-0 p-0">
         <SheetHeader className="px-6 pt-6 pb-4 border-b shrink-0">
           <SheetTitle>Быстрый туннель WireGuard</SheetTitle>

components/wireguard/wg-export-sheet.tsx

@@ -1,29 +1,16 @@
 "use client"
 
-import { useEffect, useMemo, useState } from "react"
+import { useMemo } from "react"
 import type { WgIfaceWithServer } from "@/components/data-grids/wireguard-data-grid"
-import { Button } from "@/components/ui/button"
 import {
-  Sheet, SheetContent, SheetHeader, SheetTitle,
+  CodeExportSheet,
-  SheetDescription, SheetFooter, SheetClose,
+  type CodeExportFormat,
-} from "@/components/ui/sheet"
+} from "@/components/reui-kit/code-export-sheet"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import {
   generateMikrotikRsc,
   generateNativeConf,
   generatePeerClientConf,
 } from "@/lib/wg-config"
-import { CheckIcon, CopyIcon, DownloadIcon } from "lucide-react"
-
-function downloadText(filename: string, content: string) {
-  const blob = new Blob([content], { type: "text/plain;charset=utf-8" })
-  const url = URL.createObjectURL(blob)
-  const a = document.createElement("a")
-  a.href = url
-  a.download = filename
-  a.click()
-  URL.revokeObjectURL(url)
-}
 
 function WgExportSheet({
   open,
@@ -32,27 +19,34 @@ function WgExportSheet({
   liveContent,
   liveBusy,
   onRequestLiveExport,
+  initialTab = "rsc",
+  peerId,
 }: {
   open: boolean
   iface: WgIfaceWithServer | null
   onClose: () => void
-  /** Optional server-fetched content (with private key) keyed by format */
   liveContent?: { rsc?: string; conf?: string; peerConf?: string } | null
   liveBusy?: boolean
   onRequestLiveExport?: (format: "rsc" | "conf" | "peer-conf") => void
+  initialTab?: "rsc" | "conf" | "peer"
+  /** Selected peer for Peer .conf (defaults to first peer) */
+  peerId?: string | null
 }) {
-  const [tab, setTab] = useState<"rsc" | "conf" | "peer">("rsc")
+  const formats = useMemo((): CodeExportFormat[] => {
-  const [copied, setCopied] = useState(false)
+    if (!iface) {
-
+      return [
-  useEffect(() => {
+        { id: "rsc", label: ".rsc", filename: "wg.rsc", code: "" },
-    if (open) {
+        { id: "conf", label: ".conf", filename: "wg.conf", code: "" },
-      setTab("rsc")
+        {
-      setCopied(false)
+          id: "peer",
+          label: "Peer",
+          filename: "wg-peer.conf",
+          code: "",
+          emptyMessage: "Интерфейс не выбран",
+        },
+      ]
     }
-  }, [open, iface?.id])
 
-  const local = useMemo(() => {
-    if (!iface) return { rsc: "", conf: "", peerConf: "" }
     const base = {
       name: iface.name,
       listenPort: iface.listenPort,
@@ -76,143 +70,77 @@ function WgExportSheet({
         clientEndpoint: p.clientEndpoint,
       })),
     }
-    const peer = iface.peers[0]
+
-    return {
+    const peer =
-      rsc: generateMikrotikRsc(base),
+      (peerId
-      conf: generateNativeConf(base),
+        ? iface.peers.find((p) => p.id === peerId || p.rosId === peerId)
-      peerConf:
+        : undefined) ?? iface.peers[0]
-        iface.publicKey && peer
+
-          ? generatePeerClientConf({
+    const localRsc = generateMikrotikRsc(base)
-              peerAddress: peer.clientAddress,
+    const localConf = generateNativeConf(base)
-              peerDns: peer.clientDns,
+
-              serverPublicKey: iface.publicKey,
+    let peerConf = ""
-              allowedIps: peer.allowedIps,
+    let peerEmpty: string | undefined
-              endpoint:
+    if (!iface.publicKey) {
-                peer.clientEndpoint ||
+      peerEmpty = "Нет public-key интерфейса для клиентского .conf"
-                peer.endpoint ||
+    } else if (!peer) {
-                undefined,
+      peerEmpty = "Нет пиров для экспорта Peer .conf"
-              persistentKeepalive: peer.persistentKeepalive ?? 25,
+    } else {
-            })
+      peerConf = generatePeerClientConf({
-          : "# Нет public-key интерфейса или пиров для клиентского .conf\n",
+        peerAddress: peer.clientAddress,
+        peerDns: peer.clientDns,
+        serverPublicKey: iface.publicKey,
+        allowedIps: peer.allowedIps,
+        endpoint: peer.clientEndpoint || peer.endpoint || undefined,
+        persistentKeepalive: peer.persistentKeepalive ?? 25,
+      })
     }
-  }, [iface])
 
-  const code =
+    return [
-    tab === "rsc"
+      {
-      ? (liveContent?.rsc ?? local.rsc)
+        id: "rsc",
-      : tab === "conf"
+        label: ".rsc",
-        ? (liveContent?.conf ?? local.conf)
+        filename: `${iface.name}.rsc`,
-        : (liveContent?.peerConf ?? local.peerConf)
+        code: liveContent?.rsc ?? localRsc,
-
+        isLive: Boolean(liveContent?.rsc),
-  const filename =
+      },
-    tab === "rsc"
+      {
-      ? `${iface?.name ?? "wg"}.rsc`
+        id: "conf",
-      : tab === "conf"
+        label: ".conf",
-        ? `${iface?.name ?? "wg"}.conf`
+        filename: `${iface.name}.conf`,
-        : `${iface?.name ?? "wg"}-peer.conf`
+        code: liveContent?.conf ?? localConf,
-
+        isLive: Boolean(liveContent?.conf),
-  function handleCopy() {
+      },
-    void navigator.clipboard.writeText(code).then(() => {
+      {
-      setCopied(true)
+        id: "peer",
-      setTimeout(() => setCopied(false), 2000)
+        label: "Peer",
-    })
+        filename: `${iface.name}-peer.conf`,
-  }
+        code: liveContent?.peerConf ?? peerConf,
+        emptyMessage: liveContent?.peerConf ? undefined : peerEmpty,
+        isLive: Boolean(liveContent?.peerConf),
+      },
+    ]
+  }, [iface, liveContent, peerId])
 
   return (
-    <Sheet open={open} onOpenChange={(v) => { if (!v) onClose() }}>
+    <CodeExportSheet
-      <SheetContent className="flex flex-col overflow-hidden p-0 gap-0 sm:max-w-2xl">
+      open={open}
-        <SheetHeader className="shrink-0 px-6 pt-5 pb-4 border-b">
+      onClose={onClose}
-          <div className="flex items-start justify-between gap-4">
+      title="Экспорт WireGuard"
-            <div>
+      description={iface ? `${iface.name} · ${iface.serverName}` : "—"}
-              <SheetTitle>Экспорт WireGuard</SheetTitle>
+      formats={formats}
-              <SheetDescription>
+      initialFormatId={initialTab}
-                {iface ? `${iface.name} · ${iface.serverName}` : "—"}
+      liveBusy={liveBusy}
-              </SheetDescription>
+      liveLabel="С роутера"
-            </div>
+      onLiveFetch={
-            <div className="flex gap-2 shrink-0">
+        onRequestLiveExport
-              <Button variant="outline" size="sm" onClick={handleCopy}>
+          ? (formatId) =>
-                {copied
+              onRequestLiveExport(
-                  ? <><CheckIcon className="size-3.5 text-emerald-500" />Скопировано</>
+                formatId === "peer" ? "peer-conf" : formatId === "conf" ? "conf" : "rsc",
-                  : <><CopyIcon className="size-3.5" />Копировать</>}
-              </Button>
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={() => downloadText(filename, code)}
-              >
-                <DownloadIcon className="size-3.5" />
-                Файл
-              </Button>
-            </div>
-          </div>
-        </SheetHeader>
-
-        <div className="px-6 pt-3 shrink-0">
-          <Tabs value={tab} onValueChange={(v) => setTab(v as typeof tab)}>
-            <TabsList>
-              <TabsTrigger value="rsc">MikroTik .rsc</TabsTrigger>
-              <TabsTrigger value="conf">Native .conf</TabsTrigger>
-              <TabsTrigger value="peer">Peer .conf</TabsTrigger>
-            </TabsList>
-            {onRequestLiveExport && (
-              <div className="mt-2">
-                <Button
-                  type="button"
-                  variant="ghost"
-                  size="sm"
-                  disabled={liveBusy}
-                  onClick={() =>
-                    onRequestLiveExport(
-                      tab === "peer" ? "peer-conf" : tab === "conf" ? "conf" : "rsc",
-                    )
-                  }
-                >
-                  {liveBusy ? "Загрузка с роутера…" : "Подтянуть с роутера (с private-key)"}
-                </Button>
-              </div>
-            )}
-            <TabsContent value="rsc" className="mt-0" />
-            <TabsContent value="conf" className="mt-0" />
-            <TabsContent value="peer" className="mt-0" />
-          </Tabs>
-        </div>
-
-        <div className="flex-1 overflow-y-auto">
-          <pre className="px-6 py-5 text-[12px] font-mono leading-relaxed text-foreground/85 whitespace-pre select-all">
-            {code.split("\n").map((line, i) => {
-              const isComment = line.startsWith("#")
-              const isCmd = line.trimStart().startsWith("/interface") || line.trimStart().startsWith("/ip")
-              const isSection = line.startsWith("[")
-              const isParam = /^\s+[a-z]/.test(line) || /^[A-Za-z]+=/.test(line)
-              return (
-                <span
-                  key={i}
-                  className={
-                    isComment
-                      ? "text-muted-foreground"
-                      : isCmd || isSection
-                        ? "text-sky-400"
-                        : isParam
-                          ? "text-violet-300"
-                          : "text-foreground"
-                  }
-                >
-                  {line}{"\n"}
-                </span>
               )
-            })}
+          : undefined
-          </pre>
+      }
-        </div>
+    />
-
-        <SheetFooter className="shrink-0 px-6 py-4 border-t flex-row gap-2">
-          <SheetClose render={<Button variant="outline" className="flex-1" />}>Закрыть</SheetClose>
-          <Button className="flex-1" onClick={handleCopy}>
-            {copied ? <CheckIcon className="size-4" /> : <CopyIcon className="size-4" />}
-            {copied ? "Скопировано" : "Копировать"}
-          </Button>
-        </SheetFooter>
-      </SheetContent>
-    </Sheet>
   )
 }
 

components/wireguard/wg-import-sheet.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useMemo, useState } from "react"
+import { useEffect, useMemo, useState } from "react"
 import { FormField, SectionTitle } from "@/components/form-kit"
 import { Button } from "@/components/ui/button"
 import {
@@ -17,12 +17,14 @@ function WgImportSheet({
   onOpenChange,
   servers,
   busy,
+  defaultServerId,
   onImport,
 }: {
   open: boolean
   onOpenChange: (v: boolean) => void
   servers: ServerOption[]
   busy?: boolean
+  defaultServerId?: string
   onImport: (args: {
     serverId: string
     content: string
@@ -41,6 +43,11 @@ function WgImportSheet({
     [content],
   )
 
+  useEffect(() => {
+    if (!open) return
+    setServerId(defaultServerId ?? "")
+  }, [open, defaultServerId])
+
   function runPreview() {
     setParseError(null)
     setPreview(null)
@@ -66,7 +73,9 @@ function WgImportSheet({
     <Sheet
       open={open}
       onOpenChange={(v) => {
-        if (!v) {
+        if (v) {
+          setServerId(defaultServerId ?? "")
+        } else {
           setContent("")
           setPreview(null)
           setParseError(null)

docs/ui-design-contract.md

@@ -0,0 +1,83 @@
+# UI Design Contract (MikrotikManager)
+
+Surface: **ReUI Frame**. Kit: `components/reui-kit/`.  
+Иерархия: **ReUI PRO > shadcn primitives**.  
+Стек: Next.js 16 App Router + Turbopack + shadcn **base-nova** + ReUI `@reui`.
+
+Карта: [docs](https://reui.io/docs) · [llms.txt](https://reui.io/llms.txt) · [Get Started](https://reui.io/docs/get-started) · [Styling](https://reui.io/docs/styling) · [Blocks](https://reui.io/blocks) · [MCP](https://reui.io/docs/mcp)
+
+## Surface
+
+Project lock: **`surface: frame`**. Ops / list / dashboard / detail / settings — только **Frame**, не shadcn Card как page shell. Не смешивать Card и Frame на одном ops-экране.
+
+Эталон CRUD: [`app/(main)/servers`](../app/(main)/servers).  
+Оболочка списков: `DataPageCard` → Frame. Панели: `OpsPanel` → Frame.
+
+## Canonical PRO references
+
+| Зона | Preview |
+|------|---------|
+| Shell | https://reui.io/preview/base/app-shell-12 |
+| KPI | https://reui.io/preview/base/stats-12 · https://reui.io/docs/components/base/icon-tile |
+| Lists | https://reui.io/preview/base/data-grid-filtering-2 |
+| Server rail | https://reui.io/preview/base/list-9 · https://reui.io/docs/components/base/frame · https://reui.io/docs/components/base/icon-tile |
+| Settings | https://reui.io/preview/base/settings-16 · https://reui.io/preview/base/settings-3 |
+| Forms / Sheet | https://reui.io/preview/base/form-7 · https://reui.io/preview/base/sheet-8 |
+| Alert / Badge | https://reui.io/docs/components/base/alert · https://reui.io/docs/components/base/badge |
+| Empty | https://reui.io/preview/base/empty-state-12 |
+
+## Kit (`components/reui-kit/`)
+
+| Component | Role |
+|-----------|------|
+KPI: только `KpiStatGrid` (hybrid IconTile elevated `size-10.5`, эталон `/wireguard`). Не hand-roll Frame KPI.
+| `CodeExportSheet` | Экспорт кода (.rsc / .conf) — Sheet + Frame + ScrollArea |
+
+Переключение сервера (ops-контекст): **`ServerTileRail` + `ServerRailLayout`** (`w-60` = `--sidebar-width`). Desktop rail сворачивается (persist `mm:server-rail-collapsed`); mobile — Sheet. Не Combobox. Страницы: OSPF, Filters, GRE, Recursive Routes, WireGuard, Terminal, Certificates, Probes, **Firewall** (live `/api/firewall`). Combobox — generic primitive, не доменный селектор хостов.
+
+Слои:
+
+| Слой | Путь |
+|------|------|
+| shadcn | `components/ui/` |
+| ReUI CLI | `components/reui/` |
+| Kit | `components/reui-kit/` |
+| Domain grids | `components/data-grids/` |
+
+## Shared App Shell chrome
+
+| Токен / зона | Значение |
+|--------------|----------|
+| `--sidebar-width` | `240px` |
+| Header right | AppsMenu → SystemMonitorPopover (тема — в NavUser) |
+| Search | ⌘K / Ctrl+K only |
+| `main` | `gap-4 md:gap-6`, `px-4 py-4 md:px-6 md:py-5` |
+
+## Spacing & tokens
+
+- `flex` + `gap-*` — не `space-y-*` / `space-x-*`
+- Semantic tokens / ReUI Badge variants — не raw `bg-emerald-*` / hex
+- Max 1 primary CTA на экран
+
+## Exceptions (не Frame ops shell)
+
+- `network-map` — canvas / topology UX
+- `terminal` — terminal chrome
+
+## Forbidden
+
+- Card как ops list/dashboard shell
+- Hand-roll data-grid / KPI / code-export при наличии kit
+- Дубль Copy в header + footer export sheet
+- Mixing Card и Frame на одном ops-экране
+- Radix-варианты docs — только Base UI (`base-nova`)
+- Combobox / toolbar-фильтр как переключатель сервера (SoT — `ServerTileRail`)
+
+## License
+
+```env
+# .env.local (gitignored)
+REUI_LICENSE_KEY=
+```
+
+`components.json` → `@reui` с `Authorization: Bearer ${REUI_LICENSE_KEY}`.

hooks/use-traffic-live.ts

@@ -0,0 +1,93 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { resolveApiUrl, withAuthHeaders } from "@/shared/api/http-client"
+
+export interface TrafficLiveSample {
+  rxMbps: number
+  txMbps: number
+  at: string
+}
+
+function parseSseBlock(block: string): { event: string; data: string } {
+  let event = "message"
+  const dataLines: string[] = []
+  for (const line of block.split("\n")) {
+    if (line.startsWith("event:")) event = line.slice(6).trim()
+    else if (line.startsWith("data:")) dataLines.push(line.slice(5).trim())
+  }
+  return { event, data: dataLines.join("\n") }
+}
+
+export function useTrafficLive(opts: {
+  enabled: boolean
+  backendUrl: string
+  serverId: string
+  iface: string
+}): { sample: TrafficLiveSample | null; error: string | null } {
+  const [sample, setSample] = useState<TrafficLiveSample | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!opts.enabled || !opts.serverId) {
+      setSample(null)
+      setError(null)
+      return
+    }
+
+    const ac = new AbortController()
+    setSample(null)
+    setError(null)
+    const ifaceQ =
+      opts.iface && opts.iface !== "__all__"
+        ? `?iface=${encodeURIComponent(opts.iface)}`
+        : ""
+    const path = `/api/traffic/servers/${encodeURIComponent(opts.serverId)}/live${ifaceQ}`
+    const url = resolveApiUrl(opts.backendUrl, path)
+
+    let buf = ""
+    setError(null)
+
+    void (async () => {
+      try {
+        const res = await fetch(url, {
+          headers: withAuthHeaders({ Accept: "text/event-stream" }),
+          signal: ac.signal,
+          credentials: "include",
+        })
+        if (!res.ok || !res.body) {
+          setError(`live HTTP ${res.status}`)
+          return
+        }
+        const reader = res.body.getReader()
+        const decoder = new TextDecoder()
+        while (!ac.signal.aborted) {
+          const { done, value } = await reader.read()
+          if (done) break
+          buf += decoder.decode(value, { stream: true })
+          const parts = buf.split("\n\n")
+          buf = parts.pop() ?? ""
+          for (const raw of parts) {
+            if (!raw.trim() || raw.trim().startsWith(":")) continue
+            const ev = parseSseBlock(raw)
+            if (ev.event === "sample" && ev.data) {
+              const parsed = JSON.parse(ev.data) as TrafficLiveSample
+              setSample(parsed)
+              setError(null)
+            } else if (ev.event === "error" && ev.data) {
+              const parsed = JSON.parse(ev.data) as { error?: string }
+              setError(parsed.error ?? "live error")
+            }
+          }
+        }
+      } catch (e) {
+        if (ac.signal.aborted) return
+        setError(e instanceof Error ? e.message : "live error")
+      }
+    })()
+
+    return () => ac.abort()
+  }, [opts.enabled, opts.backendUrl, opts.serverId, opts.iface])
+
+  return { sample, error }
+}

lib/auth.ts

@@ -197,6 +197,9 @@ export function hasPermission(
   required: string,
 ): boolean {
   if (granted.includes(required)) return true
+  if (required.startsWith("mm:users:") && granted.includes("mm:settings:admin")) {
+    return true
+  }
   const parts = required.split(":")
   if (parts.length !== 3) return false
   const [app, section, action] = parts
@@ -241,6 +244,7 @@ export function permissionForPath(pathname: string): string | null {
   ) {
     return "mm:network:read"
   }
+  if (pathname.startsWith("/users")) return "mm:users:read"
   if (pathname.startsWith("/settings")) return "mm:settings:admin"
   return "mm:dashboard:read"
 }
@@ -249,6 +253,7 @@ export function firstAllowedPath(): string {
   const candidates = [
     "/dashboard",
     "/servers",
+    "/users",
     "/filters",
     "/uptime",
     "/traffic",

lib/data.ts

@@ -146,6 +146,8 @@ export type FirewallAction =
   | "fasttrack-connection" | "nfqueue" | "passthrough" | "return"
   | "add-src-to-address-list" | "add-dst-to-address-list"
 
+export type FirewallTable = "filter" | "nat" | "mangle" | "raw"
+
 export interface FirewallRule {
   id: string
   chain: string
@@ -158,16 +160,32 @@ export interface FirewallRule {
   comment: string
   enabled: boolean
   hits: number
-  // RouterOS 7.x extras
   family?: "ip" | "ip6" | "any"
-  tlsHost?: string                  // tls-host matcher (SNI)
+  table?: FirewallTable
-  connRateLimit?: string            // connection-rate e.g. "100/s"
+  serverId?: string
-  layer7Proto?: string              // /ip firewall layer7-protocol
+  serverName?: string
+  rosId?: string
+  tlsHost?: string
+  connRateLimit?: string
+  layer7Proto?: string
   nfqueueId?: number
   log?: boolean
   logPrefix?: string
 }
 
+export interface FirewallAddressListEntry {
+  id: string
+  list: string
+  address: string
+  comment: string
+  disabled: boolean
+  timeout?: string
+  family?: "ip" | "ip6"
+  serverId?: string
+  serverName?: string
+  rosId?: string
+}
+
 export interface Backup {
   id: string
   server: string
@@ -438,12 +456,14 @@ export const asns: Asn[] = [
 ]
 
 export const firewallRules: FirewallRule[] = [
-  { id: "fw1", chain: "forward", action: "accept",       proto: "tcp", src: "youtube-bypass",  dst: "0.0.0.0/0",           port: "443",        iface: "wan-bgp",    comment: "YouTube bypass traffic",      enabled: true,  hits: 188421    },
+  { id: "fw1", table: "filter", family: "ip", serverId: "srv1", serverName: "mt-msk-core-01", rosId: "*1", chain: "forward", action: "accept",       proto: "tcp", src: "youtube-bypass",  dst: "0.0.0.0/0",           port: "443",        iface: "wan-bgp",    comment: "YouTube bypass traffic",      enabled: true,  hits: 188421    },
-  { id: "fw2", chain: "forward", action: "mark-routing", proto: "tcp", src: "10.10.0.0/24",    dst: "cdn-bypass",           port: "—",          iface: "lan",        comment: "CDN routing mark",            enabled: true,  hits: 4128821   },
+  { id: "fw2", table: "mangle", family: "ip", serverId: "srv1", serverName: "mt-msk-core-01", rosId: "*1", chain: "forward", action: "mark-routing", proto: "tcp", src: "10.10.0.0/24",    dst: "cdn-bypass",           port: "—",          iface: "lan",        comment: "CDN routing mark",            enabled: true,  hits: 4128821   },
-  { id: "fw3", chain: "srcnat",  action: "masquerade",   proto: "all", src: "10.10.0.0/16",    dst: "0.0.0.0/0",           port: "—",          iface: "wan-msk",    comment: "Main NAT rule",               enabled: true,  hits: 12889241  },
+  { id: "fw3", table: "nat",    family: "ip", serverId: "srv1", serverName: "mt-msk-core-01", rosId: "*1", chain: "srcnat",  action: "masquerade",   proto: "all", src: "10.10.0.0/16",    dst: "0.0.0.0/0",           port: "—",          iface: "wan-msk",    comment: "Main NAT rule",               enabled: true,  hits: 12889241  },
-  { id: "fw4", chain: "forward", action: "drop",         proto: "tcp", src: "0.0.0.0/0",       dst: "social-block-school",  port: "—",          iface: "lan-school", comment: "School social block",         enabled: true,  hits: 4218      },
+  { id: "fw4", table: "filter", family: "ip", serverId: "srv1", serverName: "mt-msk-core-01", rosId: "*2", chain: "forward", action: "drop",         proto: "tcp", src: "0.0.0.0/0",       dst: "social-block-school",  port: "—",          iface: "lan-school", comment: "School social block",         enabled: true,  hits: 4218      },
-  { id: "fw5", chain: "input",   action: "accept",       proto: "tcp", src: "10.10.0.0/16",    dst: "—",                   port: "22,443,8291",iface: "—",          comment: "Management access",           enabled: true,  hits: 18412     },
+  { id: "fw5", table: "filter", family: "ip", serverId: "srv1", serverName: "mt-msk-core-01", rosId: "*3", chain: "input",   action: "accept",       proto: "tcp", src: "10.10.0.0/16",    dst: "—",                   port: "22,443,8291",iface: "—",          comment: "Management access",           enabled: true,  hits: 18412     },
-  { id: "fw6", chain: "input",   action: "drop",         proto: "tcp", src: "0.0.0.0/0",       dst: "—",                   port: "22",         iface: "wan-msk",    comment: "Block SSH from WAN",          enabled: true,  hits: 882412    },
+  { id: "fw6", table: "filter", family: "ip", serverId: "srv1", serverName: "mt-msk-core-01", rosId: "*4", chain: "input",   action: "drop",         proto: "tcp", src: "0.0.0.0/0",       dst: "—",                   port: "22",         iface: "wan-msk",    comment: "Block SSH from WAN",          enabled: true,  hits: 882412    },
+  { id: "fw7", table: "filter", family: "ip6", serverId: "srv1", serverName: "mt-msk-core-01", rosId: "*1", chain: "input",   action: "accept",      proto: "icmpv6", src: "fe80::/10", dst: "—", port: "—", iface: "—", comment: "IPv6 link-local ICMPv6", enabled: true, hits: 1204 },
+  { id: "fw8", table: "filter", family: "ip6", serverId: "srv1", serverName: "mt-msk-core-01", rosId: "*2", chain: "forward", action: "accept",      proto: "tcp", src: "2a01:4f8::/32", dst: "::/0", port: "443", iface: "wan-bgp", comment: "IPv6 HTTPS forward", enabled: true, hits: 88421 },
 ]
 
 export const backups: Backup[] = [

lib/fmt-rate.ts

@@ -0,0 +1,28 @@
+/** Формат скорости: Кбит/с при < 1 Мбит/с, иначе Мбит/с / Гбит/с. */
+export function fmtRate(v: number): string {
+  if (!Number.isFinite(v) || v <= 0) return "0 Кбит/с"
+  if (v >= 1000) return `${(v / 1000).toFixed(2)} Гбит/с`
+  if (v < 1) return `${Math.round(v * 1000)} Кбит/с`
+  if (v < 10) return `${v.toFixed(2)} Мбит/с`
+  if (v < 100) return `${v.toFixed(1)} Мбит/с`
+  return `${Math.round(v)} Мбит/с`
+}
+
+export function fmtGB(v: number): string {
+  if (v >= 1000) return `${(v / 1000).toFixed(2)} ТБ`
+  return `${v.toFixed(1)} ГБ`
+}
+
+export const TRAFFIC_RANGE_MINUTES: Record<string, number> = {
+  "5m": 5,
+  "15m": 15,
+  "1h": 60,
+  "4h": 240,
+  "24h": 1440,
+}
+
+export function formatRangeAgo(minutesAgo: number): string {
+  if (minutesAgo <= 0) return "сейчас"
+  if (minutesAgo < 60) return `−${minutesAgo}м`
+  return `−${Math.round(minutesAgo / 60)}ч`
+}

lib/sidebar-badges.ts

@@ -1,3 +1,4 @@
+import { INIT_USERS } from "@/lib/users"
 import {
   asns,
   domains,
@@ -36,6 +37,7 @@ export function mockSidebarBadgesByUrl(): Record<string, string> {
     "/ip-ranges": formatSidebarBadgeCount(ipRanges.length),
     "/asns": formatSidebarBadgeCount(asns.length),
     "/servers": formatSidebarBadgeCount(servers.length),
+    "/users": formatSidebarBadgeCount(INIT_USERS.length),
     "/filters": formatSidebarBadgeCount(filters.length),
     "/wireguard": formatSidebarBadgeCount(mockWireGuardIfacesCount()),
     "/gre": formatSidebarBadgeCount(greTunnels.length),
@@ -54,4 +56,5 @@ export interface SidebarCountsDto {
   recursiveRoutes: number
   certificates?: number
   wireguard?: number
+  users?: number
 }

lib/users.ts

@@ -0,0 +1,356 @@
+import { servers } from "@/lib/data"
+import type { InterfaceType, PermLevel, AppUserRole as Role } from "@mmapp/contracts/users"
+
+export type { InterfaceType, PermLevel, Role }
+
+export interface SectionPerm { section: string; level: PermLevel }
+export interface ServerPerm { serverId: string; level: PermLevel }
+
+export interface InterfaceBinding {
+  id: string
+  userId: string
+  serverId: string
+  serverName: string
+  serverSite: string
+  serverCountry: string
+  interfaceName: string
+  interfaceType: InterfaceType
+  peerPublicKey?: string
+  peerName?: string
+  comment: string
+}
+
+export interface CatalogPeer {
+  publicKey: string
+  name: string
+  comment: string
+  allowedIps: string[]
+  latestHandshake?: string
+  boundUserId: string | null
+  boundUserLogin: string | null
+}
+
+export interface CatalogIface {
+  name: string
+  type: InterfaceType
+  running: boolean
+  disabled: boolean
+  boundUserId: string | null
+  boundUserLogin: string | null
+  peers?: CatalogPeer[]
+  peersError?: string
+}
+
+export interface AppUserForm {
+  name: string
+  login: string
+  email: string
+  role: Role
+  active: boolean
+  sections: SectionPerm[]
+  servers: ServerPerm[]
+  bindings: InterfaceBinding[]
+}
+
+export interface AppUser {
+  id: string
+  name: string
+  login: string
+  email: string
+  role: Role
+  last: string
+  avatar: string
+  active: boolean
+  sections: SectionPerm[]
+  servers: ServerPerm[]
+  bindings: InterfaceBinding[]
+}
+
+export interface UserServerOption {
+  id: string
+  name: string
+  host: string
+  site: string
+  country: string
+  status?: "online" | "offline" | "degraded" | null
+}
+
+export const IFACE_TYPE_LABEL: Record<InterfaceType, string> = {
+  ether: "Ethernet",
+  gre: "GRE",
+  wg: "WireGuard",
+  other: "Прочие",
+}
+
+export const IFACE_TYPE_ORDER: InterfaceType[] = ["ether", "gre", "wg", "other"]
+
+export const ROLE_LABEL: Record<Role, string> = {
+  admin: "Администратор",
+  operator: "Оператор",
+  viewer: "Наблюдатель",
+}
+
+export const ROLE_COLOR: Record<Role, string> = {
+  admin: "bg-violet-500/10 text-violet-600 dark:text-violet-400 border border-violet-500/20",
+  operator: "bg-sky-500/10 text-sky-600 dark:text-sky-400 border border-sky-500/20",
+  viewer: "bg-muted text-muted-foreground border border-border",
+}
+
+export const PERM_OPTS: { v: PermLevel; label: string }[] = [
+  { v: "none", label: "Нет" },
+  { v: "read", label: "Просмотр" },
+  { v: "write", label: "Управление" },
+]
+
+export const PERM_COLOR: Record<PermLevel, string> = {
+  none: "bg-muted text-muted-foreground",
+  read: "bg-sky-500/10 text-sky-600 dark:text-sky-400",
+  write: "bg-success/10 text-success",
+}
+
+export const SECTION_GROUP_DEFS: { group: string; items: string[] }[] = [
+  { group: "Обзор", items: ["Дашборд", "Трафик", "Карта сети", "Мониторинг"] },
+  { group: "Данные", items: ["Домены", "IP-диапазоны", "ASN", "Communities"] },
+  { group: "Управление", items: ["Серверы", "Фильтры", "Firewall", "GRE-туннели", "Бэкапы"] },
+  { group: "Инструменты", items: ["Оптимизатор маршрутов", "OSPF", "Диагностика GRE", "Терминал"] },
+  { group: "Система", items: ["Оповещения", "Сбор данных", "Пользователи", "Настройки"] },
+]
+
+export const ALL_SECTIONS = SECTION_GROUP_DEFS.flatMap((g) => g.items)
+
+export function defaultSections(role: Role): SectionPerm[] {
+  return ALL_SECTIONS.map((section) => {
+    let level: PermLevel = "none"
+    if (role === "admin") level = "write"
+    else if (role === "operator") {
+      level = ["Серверы", "Пользователи", "Фильтры", "Firewall", "GRE-туннели", "Бэкапы", "Диагностика GRE", "Оптимизатор маршрутов", "OSPF"].includes(section)
+        ? "write"
+        : "read"
+    } else if (role === "viewer") {
+      level = ["Настройки", "Терминал"].includes(section) ? "none" : "read"
+    }
+    return { section, level }
+  })
+}
+
+export function defaultServers(role: Role, serverList: { id: string }[] = servers): ServerPerm[] {
+  return serverList.map((s) => ({
+    serverId: s.id,
+    level: role === "admin" ? "write" : "read",
+  }))
+}
+
+export function userInitials(name: string): string {
+  return name.trim().split(/\s+/).map((p) => p[0] ?? "").slice(0, 2).join("").toUpperCase() || "??"
+}
+
+export const MOCK_IFACE_CATALOG: Record<string, CatalogIface[]> = {
+  srv1: [
+    { name: "ether1", type: "ether", running: true, disabled: false, boundUserId: "u1", boundUserLogin: "[email protected]" },
+    { name: "ether2", type: "ether", running: true, disabled: false, boundUserId: null, boundUserLogin: null },
+    { name: "gre-office-msk", type: "gre", running: true, disabled: false, boundUserId: "u1", boundUserLogin: "[email protected]" },
+    { name: "gre-datacenter", type: "gre", running: true, disabled: false, boundUserId: "u1", boundUserLogin: "[email protected]" },
+    { name: "gre-spb-branch", type: "gre", running: true, disabled: false, boundUserId: "u2", boundUserLogin: "[email protected]" },
+    { name: "gre-retail-01", type: "gre", running: false, disabled: false, boundUserId: "u4", boundUserLogin: "[email protected]" },
+    {
+      name: "wg-msk-spb", type: "wg", running: true, disabled: false, boundUserId: null, boundUserLogin: null,
+      peers: [
+        { publicKey: "mockPeerKeyAAAA0123456789", name: "phone-ak", comment: "", allowedIps: ["10.8.0.2/32"], boundUserId: "u1", boundUserLogin: "[email protected]" },
+        { publicKey: "mockPeerKeyBBBB0123456789", name: "laptop-ak", comment: "", allowedIps: ["10.8.0.3/32"], boundUserId: null, boundUserLogin: null, latestHandshake: "12s" },
+      ],
+    },
+  ],
+  srv7: [
+    { name: "ether1", type: "ether", running: true, disabled: false, boundUserId: null, boundUserLogin: null },
+    { name: "gre-office-msk", type: "gre", running: true, disabled: false, boundUserId: "u1", boundUserLogin: "[email protected]" },
+    { name: "gre-warehouse", type: "gre", running: false, disabled: false, boundUserId: "u1", boundUserLogin: "[email protected]" },
+    { name: "gre-spb-branch", type: "gre", running: true, disabled: false, boundUserId: "u2", boundUserLogin: "[email protected]" },
+    {
+      name: "wg-lab", type: "wg", running: true, disabled: false, boundUserId: null, boundUserLogin: null,
+      peers: [
+        { publicKey: "mockPeerKeyLABB0123456789", name: "lab-peer", comment: "", allowedIps: ["10.9.0.2/32"], boundUserId: null, boundUserLogin: null },
+      ],
+    },
+  ],
+}
+
+export function bindingDiffKey(b: Pick<InterfaceBinding, "serverId" | "interfaceName" | "peerPublicKey">): string {
+  return `${b.serverId}::${b.interfaceName}::${b.peerPublicKey ?? ""}`
+}
+
+export function bindingTitle(b: Pick<InterfaceBinding, "interfaceName" | "interfaceType" | "peerName" | "peerPublicKey">): string {
+  if (b.interfaceType === "wg" && (b.peerName || b.peerPublicKey)) {
+    return `${b.peerName || "peer"} · ${b.interfaceName}`
+  }
+  return b.interfaceName
+}
+
+function bind(
+  id: string,
+  userId: string,
+  serverId: string,
+  interfaceName: string,
+  interfaceType: InterfaceType,
+  comment: string,
+  peer?: { publicKey: string; name: string },
+): InterfaceBinding {
+  const srv = servers.find((s) => s.id === serverId)
+  return {
+    id,
+    userId,
+    serverId,
+    serverName: srv?.name ?? serverId,
+    serverSite: srv?.site ?? "—",
+    serverCountry: srv?.country ?? "UN",
+    interfaceName,
+    interfaceType,
+    peerPublicKey: peer?.publicKey,
+    peerName: peer?.name,
+    comment,
+  }
+}
+
+export const INIT_USERS: AppUser[] = [
+  {
+    id: "u1", name: "Александр Коротаев", login: "[email protected]", email: "[email protected]",
+    role: "admin", last: "сейчас", avatar: "АК", active: true,
+    sections: defaultSections("admin"), servers: defaultServers("admin"),
+    bindings: [
+      bind("b1", "u1", "srv1", "ether1", "ether", "Uplink MSK"),
+      bind("b2", "u1", "srv1", "gre-office-msk", "gre", "Офис MSK"),
+      bind("b3", "u1", "srv1", "gre-datacenter", "gre", "ЦОД"),
+      bind("b4", "u1", "srv1", "wg-msk-spb", "wg", "Overlay SPB", { publicKey: "mockPeerKeyAAAA0123456789", name: "phone-ak" }),
+      bind("b5", "u1", "srv7", "gre-office-msk", "gre", "Офис LAB"),
+      bind("b6", "u1", "srv7", "gre-warehouse", "gre", "Склад"),
+    ],
+  },
+  {
+    id: "u2", name: "Дмитрий Фёдоров", login: "[email protected]", email: "[email protected]",
+    role: "operator", last: "2ч назад", avatar: "ДФ", active: true,
+    sections: defaultSections("operator"), servers: defaultServers("operator"),
+    bindings: [
+      bind("b7", "u2", "srv1", "gre-spb-branch", "gre", "Филиал SPB"),
+      bind("b8", "u2", "srv7", "gre-spb-branch", "gre", "Филиал LAB"),
+    ],
+  },
+  {
+    id: "u3", name: "Мария Соколова", login: "[email protected]", email: "[email protected]",
+    role: "viewer", last: "вчера", avatar: "МС", active: true,
+    sections: defaultSections("viewer"), servers: defaultServers("viewer"),
+    bindings: [],
+  },
+  {
+    id: "u4", name: "Игорь Петров", login: "[email protected]", email: "[email protected]",
+    role: "operator", last: "3 дн назад", avatar: "ИП", active: false,
+    sections: defaultSections("operator"), servers: defaultServers("operator"),
+    bindings: [
+      bind("b9", "u4", "srv1", "gre-retail-01", "gre", "Магазин #1"),
+    ],
+  },
+]
+
+export function catalogForServer(serverId: string, users: AppUser[]): CatalogIface[] {
+  const base = MOCK_IFACE_CATALOG[serverId] ?? []
+  return base.map((iface) => {
+    if (iface.type === "wg") {
+      const peers = (iface.peers ?? []).map((peer) => {
+        const owner = users.find((u) =>
+          u.bindings.some((b) =>
+            b.serverId === serverId
+            && b.interfaceName === iface.name
+            && (b.peerPublicKey ?? "") === peer.publicKey,
+          ),
+        )
+        if (!owner) return { ...peer, boundUserId: null, boundUserLogin: null }
+        return { ...peer, boundUserId: owner.id, boundUserLogin: owner.email || owner.login }
+      })
+      const legacy = users.find((u) =>
+        u.bindings.some((b) =>
+          b.serverId === serverId
+          && b.interfaceName === iface.name
+          && !(b.peerPublicKey ?? ""),
+        ),
+      )
+      return {
+        ...iface,
+        boundUserId: legacy?.id ?? null,
+        boundUserLogin: legacy ? (legacy.email || legacy.login) : null,
+        peers,
+      }
+    }
+    const owner = users.find((u) =>
+      u.bindings.some((b) => b.serverId === serverId && b.interfaceName === iface.name && !(b.peerPublicKey ?? "")),
+    )
+    if (!owner) return { ...iface, boundUserId: null, boundUserLogin: null }
+    return { ...iface, boundUserId: owner.id, boundUserLogin: owner.email || owner.login }
+  })
+}
+
+export function groupBindingsByServer(bindings: InterfaceBinding[]): Array<{
+  serverId: string
+  serverName: string
+  serverSite: string
+  serverCountry: string
+  types: Array<{ type: InterfaceType; items: InterfaceBinding[] }>
+}> {
+  const byServer = new Map<string, InterfaceBinding[]>()
+  for (const b of bindings) {
+    const arr = byServer.get(b.serverId) ?? []
+    arr.push(b)
+    byServer.set(b.serverId, arr)
+  }
+  return [...byServer.entries()].map(([serverId, items]) => {
+    const first = items[0]
+    const types = IFACE_TYPE_ORDER
+      .map((type) => ({ type, items: items.filter((i) => i.interfaceType === type) }))
+      .filter((g) => g.items.length > 0)
+    return {
+      serverId,
+      serverName: first?.serverName ?? serverId,
+      serverSite: first?.serverSite ?? "—",
+      serverCountry: first?.serverCountry ?? "UN",
+      types,
+    }
+  })
+}
+
+export type UserAccessWriteKind = "full" | "none" | "partial"
+
+export interface UserAccessSummary {
+  sectionsGranted: number
+  sectionsTotal: number
+  serversGranted: number
+  serversTotal: number
+  writeKind: UserAccessWriteKind
+  writeSections: string[]
+}
+
+export function summarizeUserAccess(
+  user: Pick<AppUser, "role" | "sections" | "servers">,
+  serversTotal: number,
+  sectionsTotal = ALL_SECTIONS.length,
+): UserAccessSummary {
+  const isAdmin = user.role === "admin"
+  const sectionsGranted = isAdmin
+    ? sectionsTotal
+    : user.sections.filter((s) => s.level !== "none").length
+  const serversGranted = isAdmin
+    ? serversTotal
+    : user.servers.filter((s) => s.level !== "none").length
+  const writeSections = isAdmin
+    ? []
+    : user.sections.filter((s) => s.level === "write").map((s) => s.section)
+  const writeKind: UserAccessWriteKind = isAdmin
+    ? "full"
+    : writeSections.length === 0
+      ? "none"
+      : "partial"
+  return {
+    sectionsGranted,
+    sectionsTotal,
+    serversGranted,
+    serversTotal,
+    writeKind,
+    writeSections,
+  }
+}

package-lock.json

@@ -24,10 +24,12 @@
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "cmdk": "^1.1.1",
+        "cn": "^0.2.5",
         "lucide-react": "^1.11.0",
         "next": "16.2.4",
         "react": "19.2.4",
         "react-dom": "19.2.4",
+        "recharts": "^3.8.0",
         "shadcn": "^4.5.0",
         "sonner": "^2.0.7",
         "tailwind-merge": "^3.5.0",
@@ -3694,6 +3696,42 @@
         }
       }
     },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.12.0.tgz",
+      "integrity": "sha512-KiT+RzZbp6mQET+Mg+h2c97+9j1sNflUxQkIHI7Yuzf6Peu+OYpmkn6nbHWmLLWj+1ZODUJFwGZ7gx3L9R9EOw==",
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
+        "@standard-schema/utils": "^0.3.0",
+        "immer": "^11.0.0",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@reduxjs/toolkit/node_modules/immer": {
+      "version": "11.1.18",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-11.1.18.tgz",
+      "integrity": "sha512-EQyQtLiYW029lyoczMl/Hh4Xu7cDecSc58JRYpHyL4tIAu3eqd1yJzQX04d2BZHDkzFFvm6qJEJWOtfDSWAXbQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -3719,6 +3757,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "license": "MIT"
+    },
+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+      "license": "MIT"
+    },
     "node_modules/@swc/helpers": {
       "version": "0.5.15",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
@@ -4219,6 +4269,69 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
+      "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-kVd74ta9eof3eJOvbNd1vGKS/XERRyQbT26Og63hIsvDO84cjD5gEOhsXf26w3FSoNlPVz84DOFcKv/oou+fMw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -4284,6 +4397,12 @@
       "integrity": "sha512-xMAgYwceFhRA2zY+XbEA7mxYbA093wdiW8Vu6gZPGWy9cmOyU9XesH1tNcEWsKFd5Vzrqx5T3D38PWx1FIIXkA==",
       "license": "MIT"
     },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+      "license": "MIT"
+    },
     "node_modules/@types/validate-npm-package-name": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/@types/validate-npm-package-name/-/validate-npm-package-name-4.0.2.tgz",
@@ -5777,6 +5896,18 @@
         "react-dom": "^18 || ^19 || ^19.0.0-rc"
       }
     },
+    "node_modules/cn": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/cn/-/cn-0.2.5.tgz",
+      "integrity": "sha512-OCjZtMeQfXbI4Es1+EIjkd77gvWzaE689gD8KhfexlqjClC06qR1MQBR+Z35ZMSPNEBWyHiItW1Soy0UvwNv9w==",
+      "license": "MIT",
+      "bin": {
+        "cn": "bin/cn.mjs"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
     "node_modules/code-block-writer": {
       "version": "13.0.3",
       "resolved": "https://registry.npmjs.org/code-block-writer/-/code-block-writer-13.0.3.tgz",
@@ -5958,6 +6089,127 @@
       "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
+      "integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -6055,6 +6307,12 @@
         }
       }
     },
+    "node_modules/decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
+      "license": "MIT"
+    },
     "node_modules/decompress-response": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
@@ -6684,6 +6942,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/es-toolkit": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.52.0.tgz",
+      "integrity": "sha512-XTNEJQh1tY1ZJVcf6ayP/2n4ZPyaHlW2FWs7xvw5ddPuhUVjLD3olQVQS7kf58JbAB48iL0uL/jerTrjtV3lDA==",
+      "license": "MIT",
+      "workspaces": [
+        "docs",
+        "benchmarks",
+        "tests/types",
+        "tests/browser-compat"
+      ]
+    },
     "node_modules/esbuild": {
       "version": "0.25.12",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
@@ -7182,6 +7452,12 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.4.tgz",
+      "integrity": "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==",
+      "license": "MIT"
+    },
     "node_modules/eventsource": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-3.0.7.tgz",
@@ -8350,6 +8626,16 @@
         "node": ">= 4"
       }
     },
+    "node_modules/immer": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.2.0.tgz",
+      "integrity": "sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/import-fresh": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -8403,6 +8689,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/ip-address": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-10.1.0.tgz",
@@ -11031,9 +11326,31 @@
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/react-redux": {
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.3.0.tgz",
+      "integrity": "sha512-KQopgqFo/p/fgmAs5qz6p5RWaNAzq40WAu7fJIXnQpYxFPbJYtsJPWvGeF2rOBaY/kEuV77AVsX8TsQzKm+A/g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.6",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25 || ^19",
+        "react": "^18.0 || ^19",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-remove-scroll": {
       "version": "2.7.2",
       "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.2.tgz",
@@ -11142,6 +11459,51 @@
         "node": ">= 4"
       }
     },
+    "node_modules/recharts": {
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.8.0.tgz",
+      "integrity": "sha512-Z/m38DX3L73ExO4Tpc9/iZWHmHnlzWG4njQbxsF5aSjwqmHNDDIm0rdEBArkwsBvR8U6EirlEHiQNYWCVh9sGQ==",
+      "license": "MIT",
+      "workspaces": [
+        "www"
+      ],
+      "dependencies": {
+        "@reduxjs/toolkit": "^1.9.0 || 2.x.x",
+        "clsx": "^2.1.1",
+        "decimal.js-light": "^2.5.1",
+        "es-toolkit": "^1.39.3",
+        "eventemitter3": "^5.0.1",
+        "immer": "^10.1.1",
+        "react-redux": "8.x.x || 9.x.x",
+        "reselect": "5.1.1",
+        "tiny-invariant": "^1.3.3",
+        "use-sync-external-store": "^1.2.2",
+        "victory-vendor": "^37.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+      "license": "MIT"
+    },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
     "node_modules/reflect-metadata": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.2.2.tgz",
@@ -13487,6 +13849,28 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/victory-vendor": {
+      "version": "37.3.6",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-37.3.6.tgz",
+      "integrity": "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==",
+      "license": "MIT AND ISC",
+      "dependencies": {
+        "@types/d3-array": "^3.0.3",
+        "@types/d3-ease": "^3.0.0",
+        "@types/d3-interpolate": "^3.0.1",
+        "@types/d3-scale": "^4.0.2",
+        "@types/d3-shape": "^3.1.0",
+        "@types/d3-time": "^3.0.0",
+        "@types/d3-timer": "^3.0.0",
+        "d3-array": "^3.1.6",
+        "d3-ease": "^3.0.1",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.1.0",
+        "d3-time": "^3.0.0",
+        "d3-timer": "^3.0.1"
+      }
+    },
     "node_modules/web-streams-polyfill": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",

package.json

@@ -26,10 +26,12 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
+    "cn": "^0.2.5",
     "lucide-react": "^1.11.0",
     "next": "16.2.4",
     "react": "19.2.4",
     "react-dom": "19.2.4",
+    "recharts": "^3.8.0",
     "shadcn": "^4.5.0",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.5.0",

packages/contracts/package.json

@@ -37,6 +37,10 @@
     "./wireguard": {
       "types": "./dist/wireguard.d.ts",
       "default": "./dist/wireguard.js"
+    },
+    "./users": {
+      "types": "./dist/users.d.ts",
+      "default": "./dist/users.js"
     }
   },
   "dependencies": {

packages/contracts/src/index.ts

@@ -4,3 +4,4 @@ export * from "./events.js"
 export * from "./certificates.js"
 export * from "./backups.js"
 export * from "./wireguard.js"
+export * from "./users.js"

packages/contracts/src/users.ts

@@ -0,0 +1,119 @@
+import { z } from "zod"
+
+export const appUserRoleSchema = z.enum(["admin", "operator", "viewer"])
+export const permLevelSchema = z.enum(["none", "read", "write"])
+export const interfaceTypeSchema = z.enum(["ether", "gre", "wg", "other"])
+
+export const sectionPermSchema = z.object({
+  section: z.string().min(1),
+  level: permLevelSchema,
+})
+
+export const serverPermSchema = z.object({
+  serverId: z.string().min(1),
+  level: permLevelSchema,
+})
+
+export const userBindingSchema = z.object({
+  id: z.string().min(1),
+  userId: z.string().min(1),
+  serverId: z.number().int().positive(),
+  serverName: z.string(),
+  serverSite: z.string(),
+  serverCountry: z.string(),
+  interfaceName: z.string().min(1),
+  interfaceType: interfaceTypeSchema,
+  peerPublicKey: z.string().default(""),
+  peerName: z.string().default(""),
+  comment: z.string(),
+  createdAt: z.string(),
+  updatedAt: z.string(),
+})
+
+export const appUserReadSchema = z.object({
+  id: z.string().min(1),
+  name: z.string(),
+  login: z.string(),
+  email: z.string(),
+  role: appUserRoleSchema,
+  active: z.boolean(),
+  avatar: z.string(),
+  lastSeen: z.string().nullable(),
+  sections: z.array(sectionPermSchema),
+  servers: z.array(serverPermSchema),
+  bindings: z.array(userBindingSchema),
+  createdAt: z.string(),
+  updatedAt: z.string(),
+})
+
+export const appUserCreateSchema = z.object({
+  name: z.string().min(1),
+  login: z.string().min(1),
+  email: z.string().min(1),
+  role: appUserRoleSchema.default("viewer"),
+  active: z.boolean().default(true),
+  avatar: z.string().optional(),
+  lastSeen: z.string().nullable().optional(),
+  sections: z.array(sectionPermSchema).default([]),
+  servers: z.array(serverPermSchema).default([]),
+})
+
+export const appUserUpdateSchema = appUserCreateSchema.partial()
+
+export const appUserIdParamSchema = z.object({
+  id: z.string().min(1),
+})
+
+export const bindingIdParamSchema = z.object({
+  id: z.string().min(1),
+  bindingId: z.string().min(1),
+})
+
+export const userBindingCreateSchema = z.object({
+  serverId: z.coerce.number().int().positive(),
+  interfaceName: z.string().min(1),
+  interfaceType: interfaceTypeSchema.optional(),
+  peerPublicKey: z.string().optional(),
+  peerName: z.string().optional(),
+  comment: z.string().optional(),
+})
+
+export const interfaceCatalogQuerySchema = z.object({
+  serverId: z.coerce.number().int().positive(),
+})
+
+export const catalogPeerSchema = z.object({
+  publicKey: z.string(),
+  name: z.string(),
+  comment: z.string(),
+  allowedIps: z.array(z.string()),
+  latestHandshake: z.string().optional(),
+  boundUserId: z.string().nullable(),
+  boundUserLogin: z.string().nullable(),
+})
+
+export const catalogInterfaceSchema = z.object({
+  name: z.string(),
+  type: interfaceTypeSchema,
+  running: z.boolean(),
+  disabled: z.boolean(),
+  boundUserId: z.string().nullable(),
+  boundUserLogin: z.string().nullable(),
+  peers: z.array(catalogPeerSchema).optional(),
+  peersError: z.string().optional(),
+})
+
+export const appUserListSchema = z.array(appUserReadSchema)
+
+export type AppUserRole = z.infer<typeof appUserRoleSchema>
+export type PermLevel = z.infer<typeof permLevelSchema>
+export type InterfaceType = z.infer<typeof interfaceTypeSchema>
+export type SectionPerm = z.infer<typeof sectionPermSchema>
+export type ServerPerm = z.infer<typeof serverPermSchema>
+export type UserBinding = z.infer<typeof userBindingSchema>
+export type AppUserRead = z.infer<typeof appUserReadSchema>
+export type AppUserCreate = z.infer<typeof appUserCreateSchema>
+export type AppUserUpdate = z.infer<typeof appUserUpdateSchema>
+export type UserBindingCreate = z.infer<typeof userBindingCreateSchema>
+export type CatalogPeer = z.infer<typeof catalogPeerSchema>
+export type CatalogInterface = z.infer<typeof catalogInterfaceSchema>

shared/api/users.ts

@@ -0,0 +1,107 @@
+import {
+  appUserReadSchema,
+  catalogInterfaceSchema,
+  userBindingSchema,
+  type AppUserCreate,
+  type AppUserRead,
+  type AppUserUpdate,
+  type CatalogInterface,
+  type UserBinding,
+  type UserBindingCreate,
+} from "@mmapp/contracts/users"
+import { z } from "zod"
+import { requestJson } from "@/shared/api/http-client"
+import type { AppUser, CatalogIface, InterfaceBinding } from "@/lib/users"
+
+const usersListPayload = z.object({ users: z.array(appUserReadSchema) })
+const userPayload = z.object({ user: appUserReadSchema })
+const bindingPayload = z.object({ binding: userBindingSchema })
+const catalogPayload = z.object({ interfaces: z.array(catalogInterfaceSchema) })
+
+export function toFrontendBinding(b: UserBinding): InterfaceBinding {
+  return {
+    id: b.id,
+    userId: b.userId,
+    serverId: String(b.serverId),
+    serverName: b.serverName,
+    serverSite: b.serverSite,
+    serverCountry: b.serverCountry,
+    interfaceName: b.interfaceName,
+    interfaceType: b.interfaceType,
+    peerPublicKey: b.peerPublicKey || undefined,
+    peerName: b.peerName || undefined,
+    comment: b.comment,
+  }
+}
+
+export function toFrontendUser(u: AppUserRead): AppUser {
+  return {
+    id: u.id,
+    name: u.name,
+    login: u.login,
+    email: u.email,
+    role: u.role,
+    last: u.lastSeen ?? "—",
+    avatar: u.avatar,
+    active: u.active,
+    sections: u.sections,
+    servers: u.servers,
+    bindings: u.bindings.map(toFrontendBinding),
+  }
+}
+
+export async function listAppUsers(baseUrl: string): Promise<AppUser[]> {
+  const payload = await requestJson<unknown>(baseUrl, "/api/users")
+  return usersListPayload.parse(payload).users.map(toFrontendUser)
+}
+
+export async function createAppUser(baseUrl: string, data: AppUserCreate): Promise<AppUser> {
+  const payload = await requestJson<unknown>(baseUrl, "/api/users", {
+    method: "POST",
+    body: JSON.stringify(data),
+  })
+  return toFrontendUser(userPayload.parse(payload).user)
+}
+
+export async function updateAppUser(baseUrl: string, id: string, data: AppUserUpdate): Promise<AppUser> {
+  const payload = await requestJson<unknown>(baseUrl, `/api/users/${id}`, {
+    method: "PATCH",
+    body: JSON.stringify(data),
+  })
+  return toFrontendUser(userPayload.parse(payload).user)
+}
+
+export async function deleteAppUser(baseUrl: string, id: string): Promise<void> {
+  await requestJson<void>(baseUrl, `/api/users/${id}`, { method: "DELETE" })
+}
+
+export async function createUserBinding(
+  baseUrl: string,
+  userId: string,
+  data: UserBindingCreate,
+): Promise<InterfaceBinding> {
+  const payload = await requestJson<unknown>(baseUrl, `/api/users/${userId}/bindings`, {
+    method: "POST",
+    body: JSON.stringify(data),
+  })
+  return toFrontendBinding(bindingPayload.parse(payload).binding)
+}
+
+export async function deleteUserBinding(
+  baseUrl: string,
+  userId: string,
+  bindingId: string,
+): Promise<void> {
+  await requestJson<void>(baseUrl, `/api/users/${userId}/bindings/${bindingId}`, { method: "DELETE" })
+}
+
+export async function listInterfaceCatalog(
+  baseUrl: string,
+  serverId: string,
+): Promise<CatalogIface[]> {
+  const payload = await requestJson<unknown>(
+    baseUrl,
+    `/api/users/interface-catalog?serverId=${encodeURIComponent(serverId)}`,
+  )
+  return catalogPayload.parse(payload).interfaces as CatalogInterface[]
+}