feat(wireguard): implement WireGuard interface management and permissions

Added comprehensive support for managing WireGuard interfaces, including CRUD operations and peer management. Updated permissions to include access control for WireGuard routes. Enhanced the UI components to display and interact with WireGuard configurations, improving user experience and functionality. Introduced new tests for WireGuard-related functionalities to ensure reliability.

components/app-sidebar.tsx

@@ -102,7 +102,7 @@ const navStructure: { label: string; items: NavItemBase[] }[] = [
   },
 ]
 
-type LiveSidebarCounts = SidebarCountsDto & { greTunnels?: number; certificates?: number }
+type LiveSidebarCounts = SidebarCountsDto & { greTunnels?: number; certificates?: number; wireguard?: number }
 
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
   const { mode, backendUrl, prefsHydrated } = useDataSource()
@@ -165,8 +165,9 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
       if (url === "/uptime") return formatSidebarBadgeCount(liveCounts.monitoringItems)
       if (url === "/gre") return formatSidebarBadgeCount(liveCounts.greTunnels ?? 0)
       if (url === "/certificates") return formatSidebarBadgeCount(liveCounts.certificates ?? 0)
+      if (url === "/wireguard") return formatSidebarBadgeCount(liveCounts.wireguard ?? 0)
 
-      if (url === "/wireguard" || url === "/containers" || url === "/bgp") {
+      if (url === "/containers" || url === "/bgp") {
         return undefined
       }
 

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

@@ -33,7 +33,6 @@ import {
   ChevronRightIcon,
   CodeXmlIcon,
   MoreHorizontalIcon,
-  PencilIcon,
   PlusIcon,
   PowerIcon,
   ShieldCheckIcon,
@@ -49,9 +48,22 @@ export interface WgIfaceWithServer extends WireGuardInterface {
 interface WireguardDataGridProps {
   interfaces: WgIfaceWithServer[]
   onExport: (iface: WgIfaceWithServer) => void
+  onAddPeer?: (iface: WgIfaceWithServer) => void
+  onToggle?: (iface: WgIfaceWithServer) => void
+  onDelete?: (iface: WgIfaceWithServer) => void
+  onDeletePeer?: (iface: WgIfaceWithServer, peerId: string) => void
+  onExportPeer?: (iface: WgIfaceWithServer, peerId: string) => void
 }
 
-function WireguardDataGrid({ interfaces, onExport }: WireguardDataGridProps) {
+function WireguardDataGrid({
+  interfaces,
+  onExport,
+  onAddPeer,
+  onToggle,
+  onDelete,
+  onDeletePeer,
+  onExportPeer,
+}: WireguardDataGridProps) {
   const columns = useMemo<ColumnDef<WgIfaceWithServer>[]>(
     () => [
       {
@@ -82,7 +94,7 @@ function WireguardDataGrid({ interfaces, onExport }: WireguardDataGridProps) {
                   <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">
-                  <Flag code={iface.serverCountry} size={12} />
+                  <Flag code={iface.serverCountry || "UN"} size={12} />
                   {iface.serverName}
                 </div>
                 <p className="sr-only">
@@ -97,7 +109,11 @@ function WireguardDataGrid({ interfaces, onExport }: WireguardDataGridProps) {
           headerClassName: DATA_GRID_CELL_PAD_FIRST,
           cellClassName: DATA_GRID_CELL_PAD_FIRST,
           expandedContent: (row: WgIfaceWithServer) => (
-            <WireGuardPeersDetail peers={row.peers} />
+            <WireGuardPeersDetail
+              peers={row.peers}
+              onDeletePeer={onDeletePeer ? (peerId) => onDeletePeer(row, peerId) : undefined}
+              onExportPeer={onExportPeer ? (peerId) => onExportPeer(row, peerId) : undefined}
+            />
           ),
         },
       },
@@ -203,26 +219,32 @@ function WireguardDataGrid({ interfaces, onExport }: WireguardDataGridProps) {
                 <DropdownMenuContent side="bottom" align="end">
                   <DropdownMenuItem onClick={() => onExport(iface)}>
                     <CodeXmlIcon className="size-4" />
-                    Экспорт .rsc
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <PencilIcon className="size-4" />
-                    Редактировать
-                  </DropdownMenuItem>
-                  <DropdownMenuItem>
-                    <PlusIcon className="size-4" />
-                    Добавить пира
-                  </DropdownMenuItem>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem>
-                    <PowerIcon className="size-4" />
-                    {iface.enabled ? "Отключить" : "Включить"}
-                  </DropdownMenuItem>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem variant="destructive">
-                    <Trash2Icon className="size-4" />
-                    Удалить
+                    Экспорт
                   </DropdownMenuItem>
+                  {onAddPeer && (
+                    <DropdownMenuItem onClick={() => onAddPeer(iface)}>
+                      <PlusIcon className="size-4" />
+                      Добавить пира
+                    </DropdownMenuItem>
+                  )}
+                  {onToggle && (
+                    <>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem onClick={() => onToggle(iface)}>
+                        <PowerIcon className="size-4" />
+                        {iface.enabled ? "Отключить" : "Включить"}
+                      </DropdownMenuItem>
+                    </>
+                  )}
+                  {onDelete && (
+                    <>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem variant="destructive" onClick={() => onDelete(iface)}>
+                        <Trash2Icon className="size-4" />
+                        Удалить
+                      </DropdownMenuItem>
+                    </>
+                  )}
                 </DropdownMenuContent>
               </DropdownMenu>
             </div>
@@ -236,7 +258,7 @@ function WireguardDataGrid({ interfaces, onExport }: WireguardDataGridProps) {
         },
       },
     ],
-    [onExport],
+    [onExport, onAddPeer, onToggle, onDelete, onDeletePeer, onExportPeer],
   )
 
   const table = useReactTable({

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

@@ -2,10 +2,13 @@
 
 import type { WireGuardPeer } from "@/lib/data"
 import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
 import {
   ArrowDownIcon,
   ArrowUpIcon,
+  CodeXmlIcon,
   KeyRoundIcon,
+  Trash2Icon,
 } from "lucide-react"
 
 function fmtBytes(n: number | undefined): string {
@@ -21,7 +24,19 @@ function truncKey(key: string): string {
   return `${key.slice(0, 8)}…${key.slice(-8)}`
 }
 
-function WireGuardPeersDetail({ peers }: { peers: WireGuardPeer[] }) {
+function peerKey(peer: WireGuardPeer, index: number): string {
+  return peer.id ?? peer.rosId ?? peer.publicKey ?? String(index)
+}
+
+function WireGuardPeersDetail({
+  peers,
+  onDeletePeer,
+  onExportPeer,
+}: {
+  peers: WireGuardPeer[]
+  onDeletePeer?: (peerId: string) => void
+  onExportPeer?: (peerId: string) => void
+}) {
   if (peers.length === 0) {
     return (
       <div className="px-5 py-4 text-xs text-muted-foreground text-center border-t border-border/50">
@@ -32,48 +47,84 @@ function WireGuardPeersDetail({ peers }: { peers: WireGuardPeer[] }) {
 
   return (
     <div className="border-t border-border/50">
-      <div className="grid grid-cols-[1fr_1fr_auto_auto_auto] gap-3 px-5 py-1.5 bg-muted/10 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">
+      <div className="grid grid-cols-[1fr_1fr_auto_auto_auto_auto] gap-3 px-5 py-1.5 bg-muted/10 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">
         <span>Public Key</span>
         <span>Allowed IPs</span>
         <span>Последнее рукопожатие</span>
         <span>RX / TX</span>
         <span>Endpoint</span>
+        <span className="sr-only">Действия</span>
       </div>
-      {peers.map((peer) => (
-        <div
-          key={peer.publicKey}
-          className="grid grid-cols-[1fr_1fr_auto_auto_auto] gap-3 px-5 py-2.5 items-center text-xs border-t border-border/50 bg-muted/20"
-        >
-          <div className="flex items-center gap-1.5 min-w-0">
-            <KeyRoundIcon className="size-3 text-muted-foreground shrink-0" />
-            <span className="font-mono text-muted-foreground truncate" title={peer.publicKey}>
-              {truncKey(peer.publicKey)}
-            </span>
-          </div>
-          <div className="font-mono text-muted-foreground truncate">
-            {peer.allowedIps.join(", ")}
-          </div>
-          <span
-            className={cn(
-              "font-mono text-[11px] whitespace-nowrap",
-              peer.latestHandshake ? "text-emerald-600 dark:text-emerald-400" : "text-muted-foreground",
-            )}
+      {peers.map((peer, index) => {
+        const id = peerKey(peer, index)
+        return (
+          <div
+            key={id}
+            className="grid grid-cols-[1fr_1fr_auto_auto_auto_auto] gap-3 px-5 py-2.5 items-center text-xs border-t border-border/50 bg-muted/20"
           >
-            {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" />
-              {fmtBytes(peer.transferRx)}
-            </span>
-            <span className="flex items-center gap-0.5">
-              <ArrowUpIcon className="size-3 text-blue-400" />
-              {fmtBytes(peer.transferTx)}
+            <div className="flex items-center gap-1.5 min-w-0">
+              <KeyRoundIcon className="size-3 text-muted-foreground shrink-0" />
+              <span className="font-mono text-muted-foreground truncate" title={peer.publicKey}>
+                {truncKey(peer.publicKey)}
+              </span>
+            </div>
+            <div className="font-mono text-muted-foreground truncate">
+              {peer.allowedIps.join(", ")}
+            </div>
+            <span
+              className={cn(
+                "font-mono text-[11px] whitespace-nowrap",
+                peer.latestHandshake ? "text-emerald-600 dark:text-emerald-400" : "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" />
+                {fmtBytes(peer.transferRx)}
+              </span>
+              <span className="flex items-center gap-0.5">
+                <ArrowUpIcon className="size-3 text-blue-400" />
+                {fmtBytes(peer.transferTx)}
+              </span>
+            </div>
+            <span className="font-mono text-muted-foreground/60 text-[11px]">{peer.endpoint ?? "—"}</span>
+            <div className="flex items-center gap-1 justify-end">
+              {onExportPeer && (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="size-7"
+                  aria-label="Экспорт peer .conf"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    onExportPeer(id)
+                  }}
+                >
+                  <CodeXmlIcon className="size-3.5" />
+                </Button>
+              )}
+              {onDeletePeer && (
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="icon"
+                  className="size-7 text-destructive"
+                  aria-label="Удалить пира"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    onDeletePeer(id)
+                  }}
+                >
+                  <Trash2Icon className="size-3.5" />
+                </Button>
+              )}
+            </div>
           </div>
-          <span className="font-mono text-muted-foreground/60 text-[11px]">{peer.endpoint ?? "—"}</span>
-        </div>
-      ))}
+        )
+      })}
     </div>
   )
 }

components/wireguard/wg-create-sheet.tsx

@@ -0,0 +1,232 @@
+"use client"
+
+import { useMemo, useState } from "react"
+import { FormField, FormToggle, SectionTitle } from "@/components/form-kit"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import {
+  Sheet, SheetContent, SheetHeader, SheetTitle,
+  SheetDescription, SheetFooter, SheetClose,
+} from "@/components/ui/sheet"
+import { ChevronDownIcon, ChevronRightIcon } from "lucide-react"
+
+export type WgCreateFormState = {
+  serverId: string
+  name: string
+  listenPort: string
+  mtu: string
+  comment: string
+  address: string
+  enabled: boolean
+  showAdvanced: boolean
+  peerEnabled: boolean
+  peerPublicKey: string
+  peerAllowedIps: string
+  peerEndpoint: string
+  peerKeepalive: string
+  peerComment: string
+}
+
+export const defaultWgCreateForm = (): WgCreateFormState => ({
+  serverId: "",
+  name: "",
+  listenPort: "13231",
+  mtu: "1420",
+  comment: "",
+  address: "",
+  enabled: true,
+  showAdvanced: false,
+  peerEnabled: false,
+  peerPublicKey: "",
+  peerAllowedIps: "",
+  peerEndpoint: "",
+  peerKeepalive: "25",
+  peerComment: "",
+})
+
+type ServerOption = { id: string; name: string; host: string }
+
+function WgCreateSheet({
+  open,
+  onOpenChange,
+  servers,
+  busy,
+  onSubmit,
+}: {
+  open: boolean
+  onOpenChange: (v: boolean) => void
+  servers: ServerOption[]
+  busy?: boolean
+  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 }))
+
+  const canSubmit = useMemo(() => {
+    return Boolean(form.serverId && form.name.trim() && form.listenPort)
+  }, [form.serverId, form.name, form.listenPort])
+
+  return (
+    <Sheet
+      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>
+          <SheetDescription>
+            Создать интерфейс на выбранном MikroTik (ключи сгенерирует RouterOS)
+          </SheetDescription>
+        </SheetHeader>
+
+        <div className="flex-1 overflow-y-auto px-6 py-5 flex flex-col gap-5">
+          <div className="flex flex-col gap-4">
+            <SectionTitle>Основные</SectionTitle>
+            <FormField label="Сервер" required>
+              <select
+                className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]"
+                value={form.serverId}
+                onChange={(e) => set("serverId", e.target.value)}
+              >
+                <option value="">Выберите сервер…</option>
+                {servers.map((s) => (
+                  <option key={s.id} value={s.id}>
+                    {s.name} ({s.host})
+                  </option>
+                ))}
+              </select>
+            </FormField>
+            <FormField label="Имя интерфейса" required hint="Например wg-msk-spb">
+              <Input
+                className="font-mono"
+                placeholder="wg0"
+                value={form.name}
+                onChange={(e) => set("name", e.target.value)}
+              />
+            </FormField>
+            <div className="grid grid-cols-2 gap-3">
+              <FormField label="Listen port" required>
+                <Input
+                  className="font-mono"
+                  value={form.listenPort}
+                  onChange={(e) => set("listenPort", e.target.value)}
+                />
+              </FormField>
+              <FormField label="MTU">
+                <Input
+                  className="font-mono"
+                  value={form.mtu}
+                  onChange={(e) => set("mtu", e.target.value)}
+                />
+              </FormField>
+            </div>
+            <FormField label="Комментарий">
+              <Input
+                value={form.comment}
+                onChange={(e) => set("comment", e.target.value)}
+                placeholder="MSK → SPB overlay"
+              />
+            </FormField>
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm font-medium">Включён</p>
+                <p className="text-xs text-muted-foreground">disabled=no на роутере</p>
+              </div>
+              <FormToggle checked={form.enabled} onChange={(v) => set("enabled", v)} />
+            </div>
+          </div>
+
+          <button
+            type="button"
+            className="flex items-center gap-1.5 text-sm font-medium text-muted-foreground hover:text-foreground"
+            onClick={() => set("showAdvanced", !form.showAdvanced)}
+          >
+            {form.showAdvanced ? <ChevronDownIcon className="size-4" /> : <ChevronRightIcon className="size-4" />}
+            Дополнительно
+          </button>
+
+          {form.showAdvanced && (
+            <div className="flex flex-col gap-4">
+              <FormField label="IP на интерфейсе" hint="/ip address add, например 10.210.0.1/30">
+                <Input
+                  className="font-mono"
+                  placeholder="10.210.0.1/30"
+                  value={form.address}
+                  onChange={(e) => set("address", e.target.value)}
+                />
+              </FormField>
+
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm font-medium">Добавить первого пира</p>
+                  <p className="text-xs text-muted-foreground">Сразу после создания интерфейса</p>
+                </div>
+                <FormToggle checked={form.peerEnabled} onChange={(v) => set("peerEnabled", v)} />
+              </div>
+
+              {form.peerEnabled && (
+                <div className="flex flex-col gap-3 rounded-lg border border-border p-3">
+                  <FormField label="Public key пира" required>
+                    <Input
+                      className="font-mono text-xs"
+                      value={form.peerPublicKey}
+                      onChange={(e) => set("peerPublicKey", e.target.value)}
+                    />
+                  </FormField>
+                  <FormField label="Allowed IPs" required hint="Через запятую">
+                    <Input
+                      className="font-mono"
+                      placeholder="10.210.0.2/32"
+                      value={form.peerAllowedIps}
+                      onChange={(e) => set("peerAllowedIps", e.target.value)}
+                    />
+                  </FormField>
+                  <FormField label="Endpoint" hint="host:port">
+                    <Input
+                      className="font-mono"
+                      placeholder="1.2.3.4:13231"
+                      value={form.peerEndpoint}
+                      onChange={(e) => set("peerEndpoint", e.target.value)}
+                    />
+                  </FormField>
+                  <FormField label="Keepalive (сек)">
+                    <Input
+                      className="font-mono"
+                      value={form.peerKeepalive}
+                      onChange={(e) => set("peerKeepalive", e.target.value)}
+                    />
+                  </FormField>
+                  <FormField label="Комментарий пира">
+                    <Input
+                      value={form.peerComment}
+                      onChange={(e) => set("peerComment", e.target.value)}
+                    />
+                  </FormField>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+
+        <SheetFooter className="px-6 py-4 border-t shrink-0 flex-row gap-2">
+          <SheetClose render={<Button variant="outline" className="flex-1" disabled={busy} />}>
+            Отмена
+          </SheetClose>
+          <Button
+            className="flex-1"
+            disabled={!canSubmit || busy}
+            onClick={() => void onSubmit(form)}
+          >
+            {busy ? "Создание…" : "Создать туннель"}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  )
+}
+
+export { WgCreateSheet }

components/wireguard/wg-export-sheet.tsx

@@ -0,0 +1,219 @@
+"use client"
+
+import { useEffect, useMemo, useState } from "react"
+import type { WgIfaceWithServer } from "@/components/data-grids/wireguard-data-grid"
+import { Button } from "@/components/ui/button"
+import {
+  Sheet, SheetContent, SheetHeader, SheetTitle,
+  SheetDescription, SheetFooter, SheetClose,
+} from "@/components/ui/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,
+  iface,
+  onClose,
+  liveContent,
+  liveBusy,
+  onRequestLiveExport,
+}: {
+  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
+}) {
+  const [tab, setTab] = useState<"rsc" | "conf" | "peer">("rsc")
+  const [copied, setCopied] = useState(false)
+
+  useEffect(() => {
+    if (open) {
+      setTab("rsc")
+      setCopied(false)
+    }
+  }, [open, iface?.id])
+
+  const local = useMemo(() => {
+    if (!iface) return { rsc: "", conf: "", peerConf: "" }
+    const base = {
+      name: iface.name,
+      listenPort: iface.listenPort,
+      mtu: iface.mtu,
+      comment: iface.comment,
+      enabled: iface.enabled,
+      privateKey: iface.privateKey,
+      publicKey: iface.publicKey,
+      address: iface.address,
+      serverName: iface.serverName,
+      peers: iface.peers.map((p) => ({
+        publicKey: p.publicKey,
+        allowedIps: p.allowedIps,
+        endpoint: p.endpoint,
+        persistentKeepalive: p.persistentKeepalive,
+        persistent: p.persistent,
+        comment: p.comment,
+        name: p.name,
+        clientAddress: p.clientAddress,
+        clientDns: p.clientDns,
+        clientEndpoint: p.clientEndpoint,
+      })),
+    }
+    const peer = iface.peers[0]
+    return {
+      rsc: generateMikrotikRsc(base),
+      conf: generateNativeConf(base),
+      peerConf:
+        iface.publicKey && peer
+          ? generatePeerClientConf({
+              peerAddress: peer.clientAddress,
+              peerDns: peer.clientDns,
+              serverPublicKey: iface.publicKey,
+              allowedIps: peer.allowedIps,
+              endpoint:
+                peer.clientEndpoint ||
+                peer.endpoint ||
+                undefined,
+              persistentKeepalive: peer.persistentKeepalive ?? 25,
+            })
+          : "# Нет public-key интерфейса или пиров для клиентского .conf\n",
+    }
+  }, [iface])
+
+  const code =
+    tab === "rsc"
+      ? (liveContent?.rsc ?? local.rsc)
+      : tab === "conf"
+        ? (liveContent?.conf ?? local.conf)
+        : (liveContent?.peerConf ?? local.peerConf)
+
+  const filename =
+    tab === "rsc"
+      ? `${iface?.name ?? "wg"}.rsc`
+      : tab === "conf"
+        ? `${iface?.name ?? "wg"}.conf`
+        : `${iface?.name ?? "wg"}-peer.conf`
+
+  function handleCopy() {
+    void navigator.clipboard.writeText(code).then(() => {
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    })
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={(v) => { if (!v) onClose() }}>
+      <SheetContent className="flex flex-col overflow-hidden p-0 gap-0 sm:max-w-2xl">
+        <SheetHeader className="shrink-0 px-6 pt-5 pb-4 border-b">
+          <div className="flex items-start justify-between gap-4">
+            <div>
+              <SheetTitle>Экспорт WireGuard</SheetTitle>
+              <SheetDescription>
+                {iface ? `${iface.name} · ${iface.serverName}` : "—"}
+              </SheetDescription>
+            </div>
+            <div className="flex gap-2 shrink-0">
+              <Button variant="outline" size="sm" onClick={handleCopy}>
+                {copied
+                  ? <><CheckIcon className="size-3.5 text-emerald-500" />Скопировано</>
+                  : <><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>
+              )
+            })}
+          </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>
+  )
+}
+
+export { WgExportSheet }

components/wireguard/wg-import-sheet.tsx

@@ -0,0 +1,182 @@
+"use client"
+
+import { useMemo, useState } from "react"
+import { FormField, SectionTitle } from "@/components/form-kit"
+import { Button } from "@/components/ui/button"
+import {
+  Sheet, SheetContent, SheetHeader, SheetTitle,
+  SheetDescription, SheetFooter, SheetClose,
+} from "@/components/ui/sheet"
+import { detectWgConfigFormat, parseWgConfig, type WgParsedConfig } from "@/lib/wg-config"
+import { UploadIcon } from "lucide-react"
+
+type ServerOption = { id: string; name: string; host: string }
+
+function WgImportSheet({
+  open,
+  onOpenChange,
+  servers,
+  busy,
+  onImport,
+}: {
+  open: boolean
+  onOpenChange: (v: boolean) => void
+  servers: ServerOption[]
+  busy?: boolean
+  onImport: (args: {
+    serverId: string
+    content: string
+    format: "auto" | "rsc" | "conf"
+    dryRun: boolean
+  }) => Promise<void>
+}) {
+  const [serverId, setServerId] = useState("")
+  const [content, setContent] = useState("")
+  const [format, setFormat] = useState<"auto" | "rsc" | "conf">("auto")
+  const [preview, setPreview] = useState<WgParsedConfig | null>(null)
+  const [parseError, setParseError] = useState<string | null>(null)
+
+  const detected = useMemo(
+    () => (content.trim() ? detectWgConfigFormat(content) : null),
+    [content],
+  )
+
+  function runPreview() {
+    setParseError(null)
+    setPreview(null)
+    try {
+      setPreview(parseWgConfig(content, format))
+    } catch (e) {
+      setParseError(e instanceof Error ? e.message : "Ошибка разбора")
+    }
+  }
+
+  function onFile(file: File | null) {
+    if (!file) return
+    const reader = new FileReader()
+    reader.onload = () => {
+      setContent(String(reader.result ?? ""))
+      setPreview(null)
+      setParseError(null)
+    }
+    reader.readAsText(file)
+  }
+
+  return (
+    <Sheet
+      open={open}
+      onOpenChange={(v) => {
+        if (!v) {
+          setContent("")
+          setPreview(null)
+          setParseError(null)
+          setServerId("")
+        }
+        onOpenChange(v)
+      }}
+    >
+      <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>Импорт конфига WireGuard</SheetTitle>
+          <SheetDescription>
+            Native .conf или MikroTik .rsc → применить на выбранный роутер
+          </SheetDescription>
+        </SheetHeader>
+
+        <div className="flex-1 overflow-y-auto px-6 py-5 flex flex-col gap-5">
+          <FormField label="Сервер" required>
+            <select
+              className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]"
+              value={serverId}
+              onChange={(e) => setServerId(e.target.value)}
+            >
+              <option value="">Выберите сервер…</option>
+              {servers.map((s) => (
+                <option key={s.id} value={s.id}>
+                  {s.name} ({s.host})
+                </option>
+              ))}
+            </select>
+          </FormField>
+
+          <FormField label="Формат">
+            <select
+              className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm"
+              value={format}
+              onChange={(e) => setFormat(e.target.value as "auto" | "rsc" | "conf")}
+            >
+              <option value="auto">Авто{detected ? ` (${detected})` : ""}</option>
+              <option value="conf">Native WireGuard (.conf)</option>
+              <option value="rsc">MikroTik (.rsc)</option>
+            </select>
+          </FormField>
+
+          <div className="flex flex-col gap-2">
+            <SectionTitle>Содержимое</SectionTitle>
+            <label className="inline-flex items-center gap-2 text-sm text-muted-foreground cursor-pointer w-fit">
+              <UploadIcon className="size-4" />
+              Загрузить файл
+              <input
+                type="file"
+                accept=".conf,.rsc,.txt,text/plain"
+                className="sr-only"
+                onChange={(e) => onFile(e.target.files?.[0] ?? null)}
+              />
+            </label>
+            <textarea
+              className="min-h-40 w-full rounded-md border border-input bg-transparent px-3 py-2 font-mono text-xs leading-relaxed outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]"
+              placeholder={"[Interface]\nPrivateKey = …\n…\n\nили\n\n/interface wireguard add …"}
+              value={content}
+              onChange={(e) => {
+                setContent(e.target.value)
+                setPreview(null)
+                setParseError(null)
+              }}
+            />
+          </div>
+
+          <Button type="button" variant="outline" size="sm" onClick={runPreview} disabled={!content.trim()}>
+            Предпросмотр
+          </Button>
+
+          {parseError && <p className="text-sm text-destructive">{parseError}</p>}
+
+          {preview && (
+            <div className="rounded-lg border border-border bg-muted/20 px-4 py-3 text-sm flex flex-col gap-2">
+              <p className="font-medium">
+                {preview.format.toUpperCase()} · {preview.interface.name}
+              </p>
+              <p className="text-xs text-muted-foreground font-mono">
+                port={preview.interface.listenPort ?? "—"} · mtu={preview.interface.mtu ?? "—"}
+                {preview.interface.address ? ` · ${preview.interface.address}` : ""}
+              </p>
+              <p className="text-xs text-muted-foreground">Пиров: {preview.peers.length}</p>
+              {preview.peers.slice(0, 5).map((p, i) => (
+                <p key={i} className="text-[11px] font-mono text-muted-foreground truncate">
+                  {p.publicKey.slice(0, 16)}… → {p.allowedAddresses.join(", ")}
+                </p>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <SheetFooter className="px-6 py-4 border-t shrink-0 flex-col gap-2 sm:flex-col">
+          <div className="flex w-full gap-2">
+            <SheetClose render={<Button variant="outline" className="flex-1" disabled={busy} />}>
+              Отмена
+            </SheetClose>
+            <Button
+              className="flex-1"
+              disabled={!serverId || !content.trim() || busy}
+              onClick={() => void onImport({ serverId, content, format, dryRun: false })}
+            >
+              {busy ? "Импорт…" : "Применить на роутер"}
+            </Button>
+          </div>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  )
+}
+
+export { WgImportSheet }

components/wireguard/wg-peer-sheet.tsx

@@ -0,0 +1,114 @@
+"use client"
+
+import { useState } from "react"
+import { FormField, SectionTitle } from "@/components/form-kit"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import {
+  Sheet, SheetContent, SheetHeader, SheetTitle,
+  SheetDescription, SheetFooter, SheetClose,
+} from "@/components/ui/sheet"
+import type { WgIfaceWithServer } from "@/components/data-grids/wireguard-data-grid"
+
+export type WgPeerFormState = {
+  publicKey: string
+  allowedIps: string
+  endpoint: string
+  keepalive: string
+  comment: string
+}
+
+const emptyPeerForm = (): WgPeerFormState => ({
+  publicKey: "",
+  allowedIps: "",
+  endpoint: "",
+  keepalive: "25",
+  comment: "",
+})
+
+function WgPeerSheet({
+  open,
+  iface,
+  busy,
+  onOpenChange,
+  onSubmit,
+}: {
+  open: boolean
+  iface: WgIfaceWithServer | null
+  busy?: boolean
+  onOpenChange: (v: boolean) => void
+  onSubmit: (form: WgPeerFormState) => void | Promise<void>
+}) {
+  const [form, setForm] = useState<WgPeerFormState>(emptyPeerForm)
+  const set = <K extends keyof WgPeerFormState>(k: K, v: WgPeerFormState[K]) =>
+    setForm((f) => ({ ...f, [k]: v }))
+
+  return (
+    <Sheet
+      open={open}
+      onOpenChange={(v) => {
+        if (v) setForm(emptyPeerForm())
+        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>Добавить пира</SheetTitle>
+          <SheetDescription>
+            {iface ? `${iface.name} · ${iface.serverName}` : "WireGuard peer"}
+          </SheetDescription>
+        </SheetHeader>
+        <div className="flex-1 overflow-y-auto px-6 py-5 flex flex-col gap-4">
+          <SectionTitle>Параметры пира</SectionTitle>
+          <FormField label="Public key" required>
+            <Input
+              className="font-mono text-xs"
+              value={form.publicKey}
+              onChange={(e) => set("publicKey", e.target.value)}
+            />
+          </FormField>
+          <FormField label="Allowed IPs" required hint="Через запятую">
+            <Input
+              className="font-mono"
+              placeholder="10.210.0.2/32"
+              value={form.allowedIps}
+              onChange={(e) => set("allowedIps", e.target.value)}
+            />
+          </FormField>
+          <FormField label="Endpoint" hint="host:port">
+            <Input
+              className="font-mono"
+              placeholder="1.2.3.4:13231"
+              value={form.endpoint}
+              onChange={(e) => set("endpoint", e.target.value)}
+            />
+          </FormField>
+          <FormField label="Keepalive (сек)">
+            <Input
+              className="font-mono"
+              value={form.keepalive}
+              onChange={(e) => set("keepalive", e.target.value)}
+            />
+          </FormField>
+          <FormField label="Комментарий">
+            <Input value={form.comment} onChange={(e) => set("comment", e.target.value)} />
+          </FormField>
+        </div>
+        <SheetFooter className="px-6 py-4 border-t shrink-0 flex-row gap-2">
+          <SheetClose render={<Button variant="outline" className="flex-1" disabled={busy} />}>
+            Отмена
+          </SheetClose>
+          <Button
+            className="flex-1"
+            disabled={busy || !form.publicKey.trim() || !form.allowedIps.trim()}
+            onClick={() => void onSubmit(form)}
+          >
+            {busy ? "Сохранение…" : "Добавить"}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  )
+}
+
+export { WgPeerSheet }