feat(traffic): добавить приём Traffic Flow с jump-host

Чтобы видеть «кто с кем», а не только объём порта: IPFIX внутри WG на хосте Docker MM, REST-счётчики не трогаем.

Co-authored-by: Cursor <cursoragent@cursor.com>

components/traffic/flow-overlay-sheet.tsx

@@ -0,0 +1,119 @@
+"use client"
+
+import { useEffect, useMemo, useState } from "react"
+import { toast } from "sonner"
+import { FormField } from "@/components/form-kit"
+import { Button } from "@/components/ui/button"
+import { CopyIcon } from "lucide-react"
+import {
+  Sheet, SheetContent, SheetHeader, SheetTitle,
+  SheetDescription, SheetFooter, SheetClose,
+} from "@/components/ui/sheet"
+import { applyTrafficFlowOverlay } from "@/shared/api/traffic-flow"
+import type { ServerRead } from "@mmapp/contracts/servers"
+import type { TrafficFlowOverlayResult } from "@mmapp/contracts/traffic-flow"
+
+function FlowOverlaySheet({
+  open,
+  onOpenChange,
+  servers,
+  backendUrl,
+  onDone,
+}: {
+  open: boolean
+  onOpenChange: (v: boolean) => void
+  servers: ServerRead[]
+  backendUrl: string
+  onDone?: (result: TrafficFlowOverlayResult) => void
+}) {
+  const jumpHosts = useMemo(
+    () => servers.filter((s) => s.enabled && s.type === "jump-host"),
+    [servers],
+  )
+  const [serverId, setServerId] = useState("")
+  const [busy, setBusy] = useState(false)
+  const [result, setResult] = useState<TrafficFlowOverlayResult | null>(null)
+
+  useEffect(() => {
+    if (!open) return
+    setResult(null)
+    setServerId(jumpHosts[0] ? String(jumpHosts[0].id) : "")
+  }, [open, jumpHosts])
+
+  async function handleSubmit() {
+    if (!serverId) return
+    setBusy(true)
+    try {
+      const res = await applyTrafficFlowOverlay(backendUrl, serverId)
+      setResult(res)
+      toast.success(`wg-flow на ${res.address}`)
+      onDone?.(res)
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Не удалось подключить JH")
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <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>Подключить jump-host</SheetTitle>
+          <SheetDescription>
+            Создать wg-flow на выбранном MikroTik и направить Traffic Flow на collector MM. Хост Docker уже должен слушать WireGuard.
+          </SheetDescription>
+        </SheetHeader>
+        <div className="flex-1 overflow-y-auto px-6 py-5 flex flex-col gap-5">
+          <FormField label="Jump-host" 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"
+              value={serverId}
+              onChange={(e) => setServerId(e.target.value)}
+            >
+              <option value="">Выберите сервер…</option>
+              {jumpHosts.map((s) => (
+                <option key={s.id} value={s.id}>
+                  {s.name || s.host} ({s.host})
+                </option>
+              ))}
+            </select>
+          </FormField>
+          {result ? (
+            <div className="flex flex-col gap-2">
+              <div className="flex items-center justify-between gap-2">
+                <p className="text-xs text-muted-foreground">Пир для хоста MM (`wg set` или допишите conf):</p>
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="outline"
+                  onClick={() => {
+                    void navigator.clipboard.writeText(result.linuxPeerBlock)
+                    toast.success("Скопировано")
+                  }}
+                >
+                  <CopyIcon className="size-3.5" />
+                  Копировать
+                </Button>
+              </div>
+              <pre className="text-[11px] font-mono bg-muted/40 border rounded-md p-3 whitespace-pre-wrap">{result.linuxPeerBlock}</pre>
+              <ul className="text-xs text-muted-foreground flex flex-col gap-1">
+                {result.steps.map((s) => (
+                  <li key={s}>{s}</li>
+                ))}
+              </ul>
+            </div>
+          ) : null}
+        </div>
+        <SheetFooter className="px-6 py-4 border-t shrink-0 flex-row gap-2">
+          <SheetClose render={<Button variant="outline" />}>Закрыть</SheetClose>
+          <Button disabled={!serverId || busy} onClick={() => { void handleSubmit() }}>
+            {busy ? "Подключение…" : "Подключить"}
+          </Button>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  )
+}
+
+export { FlowOverlaySheet }