fix(ui): выровнять экспорт WireGuard под ReUI Frame

Убрать дубль копирования, вынести CodeExportSheet и семантические токены.
Открывать вкладку Peer при экспорте пира. Мигрировать VXLAN/Firewall/Containers/GRE.

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

app/(main)/wireguard/page.tsx

@@ -11,8 +11,12 @@ import {
   type WgIfaceWithServer,
 } from "@/components/data-grids/wireguard-data-grid"
 import { Button } from "@/components/ui/button"
-import { Frame, FramePanel } from "@/components/reui/frame"
-import { IconTile } from "@/components/reui/icon-tile"
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+} from "@/components/reui/alert"
+import { KpiStatGrid } from "@/components/reui-kit/kpi-stat-grid"
 import { OpsPanel } from "@/components/ops-panel"
 import { useDataSource } from "@/lib/data-source"
 import { requestJson } from "@/shared/api/http-client"
@@ -34,7 +38,7 @@ import { WgPeerSheet, type WgPeerFormState } from "@/components/wireguard/wg-pee
 import { toast } from "sonner"
 import {
   ShieldCheckIcon, PlusIcon, KeyRoundIcon,
-  UsersIcon, ActivityIcon, RefreshCwIcon, UploadIcon,
+  UsersIcon, ActivityIcon, RefreshCwIcon, UploadIcon, InfoIcon,
 } from "lucide-react"
 
 function collectMockInterfaces(): WgIfaceWithServer[] {
@@ -139,6 +143,8 @@ export default function WireGuardPage() {
   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 [liveExport, setLiveExport] = useState<{
     rsc?: string
@@ -372,6 +378,7 @@ export default function WireGuardPage() {
         interfaceName: exportIface.name,
         format,
         includePrivateKey: format !== "peer-conf",
+        peerId: format === "peer-conf" ? (exportPeerId ?? undefined) : undefined,
       })
       setLiveExport((prev) => ({
         ...prev,
@@ -389,6 +396,13 @@ export default function WireGuardPage() {
     }
   }
 
+  function openExport(iface: WgIfaceWithServer, tab: "rsc" | "conf" | "peer" = "rsc", peerId?: string) {
+    setLiveExport(null)
+    setExportInitialTab(tab)
+    setExportPeerId(peerId ?? null)
+    setExportIface(iface)
+  }
+
   return (
     <div className="flex flex-col h-full">
       <PageHeader
@@ -420,40 +434,49 @@ export default function WireGuardPage() {
 
       <div className="flex-1 overflow-y-auto p-6">
         <div className="flex flex-col gap-5">
-          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
-            {[
-              { label: "Интерфейсов", value: displayIfaces.length, icon: <ShieldCheckIcon className="size-4 text-muted-foreground" /> },
-              { label: "Активных (UP)", value: upIfaces, icon: <ActivityIcon className="size-4 text-emerald-500" /> },
-              { label: "Всего пиров", value: totalPeers, icon: <UsersIcon className="size-4 text-sky-400" /> },
-              { label: "Пиров онлайн", value: `${onlinePeers}/${totalPeers}`, icon: <KeyRoundIcon className="size-4 text-violet-400" /> },
-            ].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>
+          <KpiStatGrid
+            aria-label="Сводка WireGuard"
+            items={[
+              {
+                id: "ifaces",
+                label: "Интерфейсов",
+                value: displayIfaces.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 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>
+          <Alert variant="info">
+            <InfoIcon />
+            <AlertTitle>WireGuard — live-интеграция RouterOS 7.x</AlertTitle>
+            <AlertDescription>
+              {isLive
+                ? "Опрос /interface/wireguard на включённых серверах. Создание, импорт .rsc/.conf и экспорт с роутера."
+                : "Сейчас mock-режим. Переключитесь в live в настройках, чтобы применять изменения на MikroTik."}
+            </AlertDescription>
+          </Alert>
 
           <DataPageCard>
             <DataPageToolbar
@@ -464,18 +487,12 @@ export default function WireGuardPage() {
             />
             <WireguardDataGrid
               interfaces={filtered}
-              onExport={(iface) => {
-                setLiveExport(null)
-                setExportIface(iface)
-              }}
+              onExport={(iface) => openExport(iface, "rsc")}
               onAddPeer={setPeerIface}
               onToggle={handleToggle}
               onDelete={handleDelete}
               onDeletePeer={handleDeletePeer}
-              onExportPeer={(iface) => {
-                setLiveExport(null)
-                setExportIface(iface)
-              }}
+              onExportPeer={(iface, peerId) => openExport(iface, "peer", peerId)}
             />
           </DataPageCard>
 
@@ -518,7 +535,7 @@ export default function WireGuardPage() {
                   <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">
+                  <pre className="bg-muted rounded-md p-2.5 text-muted-foreground text-[11px] leading-relaxed overflow-x-auto">
                     {b.lines.join("\n")}
                   </pre>
                 </div>
@@ -552,8 +569,12 @@ export default function WireGuardPage() {
       <WgExportSheet
         open={!!exportIface}
         iface={exportIface}
+        initialTab={exportInitialTab}
+        peerId={exportPeerId}
         onClose={() => {
           setExportIface(null)
+          setExportPeerId(null)
+          setExportInitialTab("rsc")
           setLiveExport(null)
         }}
         liveContent={liveExport}