fix(ui): подтверждать команды контейнеров ответом API

app/(main)/containers/page.tsx

@@ -10,6 +10,7 @@ import { KpiStatGrid } from "@/components/reui-kit/kpi-stat-grid"
 import { OpsPanel } from "@/components/ops-panel"
 import { Button } from "@/components/ui/button"
 import { Alert, AlertDescription } from "@/components/ui/alert"
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog"
 import { cn } from "@/lib/utils"
 import { toast } from "sonner"
 import {
@@ -24,8 +25,8 @@ import {
 } from "lucide-react"
 import { CodeExportSheet } from "@/components/reui-kit/code-export-sheet"
 import { useDataSource } from "@/lib/data-source"
-import { requestJson } from "@/shared/api/http-client"
-import { readContainersState } from "@/shared/api/containers"
+import { ApiClientError, requestJson } from "@/shared/api/http-client"
+import { mutateContainer, type ContainerAction, readContainersState } from "@/shared/api/containers"
 import { serverListSchema } from "@mmapp/contracts/servers"
 import type { ContainerServerState, ContainersState } from "@mmapp/contracts/containers"
 import { can } from "@/lib/auth"
@@ -320,6 +321,14 @@ function ContainersContent() {
   const [liveServers, setLiveServers] = useState<ContainerServer[]>([])
   const [loading, setLoading] = useState(isLive && (canRead || canReadServers))
   const [busyId, setBusyId] = useState<string | null>(null)
+  const [deleteTarget, setDeleteTarget] = useState<ContainerView | null>(null)
+  const [operationError, setOperationError] = useState<string | null>(null)
+  const [operationNotice, setOperationNotice] = useState<string | null>(null)
+  const [commandNeedsRead, setCommandNeedsRead] = useState(false)
+  const mutationLock = useRef(false)
+  const mutationController = useRef<AbortController | null>(null)
+  const alive = useRef(true)
+  useEffect(() => { alive.current = true; return () => { alive.current = false; mutationController.current?.abort() } }, [])
   const [liveError, setLiveError] = useState<string | null>(null)
   const [serversError, setServersError] = useState<string | null>(null)
   const [readAt, setReadAt] = useState<number | null>(null)
@@ -335,10 +344,13 @@ function ContainersContent() {
     const current = () => !controller.signal.aborted && loadRevision.current === revision
     setLoading(true)
     const signal = AbortSignal.any([controller.signal, AbortSignal.timeout(30_000)])
+    let stateComplete = !canRead
     const tasks = await Promise.allSettled([
       canRead ? readContainersState(backendUrl, { signal }).then(result => {
+        stateComplete = result.servers.every(node => node.availability !== "error")
         if (current()) {
           setState(result); setReadAt(Date.now()); setLiveError(null)
+          if (result.servers.every(node => node.availability !== "error")) setCommandNeedsRead(false)
           setLastStates(previous => Object.fromEntries(result.servers.map(node => [node.serverId, node.availability === "error" ? previous[node.serverId] ?? node : node])))
         }
       }).catch(error => { if (current()) setLiveError(userApiError(error)); throw error }) : Promise.resolve(),
@@ -349,7 +361,7 @@ function ContainersContent() {
       }).catch(error => { if (current()) setServersError(userApiError(error)); throw error }) : Promise.resolve(),
     ])
     if (current()) setLoading(false)
-    return current() && tasks.every(task => task.status === "fulfilled")
+    return current() && stateComplete && tasks.every(task => task.status === "fulfilled")
   }, [isLive, backendUrl, canRead, canReadServers])
   useEffect(() => { let cancelled = false; queueMicrotask(() => { if (!cancelled) void loadLive() }); return () => { cancelled = true; loadController.current?.abort() } }, [loadLive])
   const displayContainers: ContainerView[] = useMemo(() => isLive ? Object.values(lastStates).flatMap(node => node.containers) : mockContainers, [isLive, lastStates])
@@ -358,7 +370,7 @@ function ContainersContent() {
   const relevantStates = state?.servers.filter(node => selectedServerId === ALL_SERVERS_ID || String(node.serverId) === selectedServerId)
   const known = !isLive || !!state && (selectedServerId === ALL_SERVERS_ID || !!relevantStates?.length) && relevantStates!.every(node => node.availability !== "error")
   const stale = isLive && !!liveError
-  const writeReady = !isLive || canWrite && !loading && !stale && !!serversReadAt && !serversError
+  const writeReady = !isLive || canWrite && !commandNeedsRead && !loading && !stale && !!serversReadAt && !serversError
   const nodeFresh = (serverId: string) => !isLive || writeReady && state?.servers.some(node => String(node.serverId) === serverId && node.availability === "available" && displayServers.some(server => server.id === serverId))
   const scoped = useMemo(() => {
     if (effectiveServerId === ALL_SERVERS_ID) return displayContainers
@@ -401,25 +413,34 @@ function ContainersContent() {
   const stopped = scoped.filter((c) => c.status === "stopped").length
   const errors = scoped.filter((c) => c.status === "error").length
 
-  async function mutate(c: ContainerView, action: "start" | "stop" | "restart" | "remove") {
-    if (!isLive || !c.rosId || !canWrite || !nodeFresh(c.serverId)) {
-      toast.info("Действие доступно только в live-режиме")
-      return
-    }
-    if (action === "remove" && !window.confirm(`Удалить контейнер ${c.name}?`)) return
-    setBusyId(c.id)
+  async function mutate(c: ContainerView, action: ContainerAction) {
+    if (!isLive || !c.rosId || !canWrite || !nodeFresh(c.serverId) || mutationLock.current || !displayContainers.some(row => row.id === c.id && row.rosId === c.rosId && row.serverId === c.serverId)) return
+    mutationLock.current = true
+    const controller = new AbortController()
+    mutationController.current = controller
+    const current = () => alive.current && !controller.signal.aborted
+    setBusyId(c.id); setOperationError(null); setOperationNotice(null)
     try {
-      await requestJson(backendUrl, `/api/servers/${c.serverId}/containers/${action}`, {
-        method: "POST",
-        body: JSON.stringify({ rosId: c.rosId }),
-      })
-      const labels = { start: "запущен", stop: "остановлен", restart: "перезапущен", remove: "удалён" }
-      toast.success(`${c.name}: ${labels[action]}`)
-      await loadLive()
-    } catch (e) {
-      toast.error(e instanceof Error ? e.message : "Ошибка RouterOS")
+      await mutateContainer(backendUrl, c.serverId, c.rosId, action, { signal: AbortSignal.any([controller.signal, AbortSignal.timeout(30_000)]) })
+      if (!current()) return
+      const labels = { start: "запуск", stop: "остановка", restart: "перезапуск", remove: "удаление" }
+      const message = c.name + ": API подтвердил команду «" + labels[action] + "». Состояние проверяется повторным чтением."
+      setOperationNotice(message)
+      if (action === "remove") {
+        setLastStates(previous => Object.fromEntries(Object.entries(previous).map(([id, node]) => [id, { ...node, containers: node.containers.filter(row => row.id !== c.id) }])))
+        setDeleteTarget(null)
+      }
+      toast.success("Команда подтверждена API.")
+      const refreshed = await loadLive()
+      if (current() && !refreshed) setOperationNotice(message + " Обновление каталогов не удалось; повторите чтение.")
+    } catch (error) {
+      if (!current()) return
+      const uncertain = !(error instanceof ApiClientError && error.status >= 400 && error.status < 500)
+      setCommandNeedsRead(uncertain)
+      setOperationError(c.name + ": " + userApiError(error) + (uncertain ? " Результат команды не подтверждён; она могла выполниться частично. Обновите каталог перед новым действием." : " Команда отклонена API."))
     } finally {
-      setBusyId(null)
+      if (mutationController.current === controller) { mutationController.current = null; mutationLock.current = false }
+      if (alive.current) setBusyId(null)
     }
   }
 
@@ -457,6 +478,8 @@ function ContainersContent() {
     >
         <div className="flex flex-col gap-5">
 
+          {operationNotice && <p role="status" className="text-sm">{operationNotice}</p>}
+          {operationError && !deleteTarget && <Alert role="alert" aria-label="Команда контейнера" variant="warning"><AlertDescription>{operationError}</AlertDescription></Alert>}
           {isLive && !canRead && <p role="status">Для каталога контейнеров требуется mm:dashboard:read.</p>}
           {isLive && !canReadServers && <p role="status">Для каталога серверов требуется mm:servers:read. Команды недоступны.</p>}
           {isLive && loading && !state && <p role="status">Загрузка контейнеров…</p>}
@@ -561,12 +584,12 @@ function ContainersContent() {
                   container={c}
                   server={serverById[c.serverId]}
                   live={isLive && !!nodeFresh(c.serverId)}
-                  busy={busyId === c.id}
+                  busy={!!busyId}
                   onExport={() => setExportContainer(c)}
                   onStart={() => { void mutate(c, "start") }}
                   onStop={() => { void mutate(c, "stop") }}
                   onRestart={() => { void mutate(c, "restart") }}
-                  onRemove={() => { void mutate(c, "remove") }}
+                  onRemove={() => { setOperationError(null); setDeleteTarget(c) }}
                 />
               ))}
             </div>
@@ -633,6 +656,17 @@ function ContainersContent() {
         </div>
     </ServerRailLayout>
 
+      {deleteTarget && <AlertDialog open onOpenChange={open => { if (!open && !busyId) { setDeleteTarget(null); setOperationError(null) } }}>
+        <AlertDialogContent>
+          <AlertDialogHeader><AlertDialogTitle>Удалить контейнер?</AlertDialogTitle><AlertDialogDescription>{deleteTarget.name} · сервер {serverById[deleteTarget.serverId]?.name ?? deleteTarget.serverId}. Будет отправлена команда удаления в RouterOS.</AlertDialogDescription></AlertDialogHeader>
+          {operationError && <p role="alert" aria-label="Удаление контейнера" className="text-sm text-destructive [overflow-wrap:anywhere]">{operationError}</p>}
+          <AlertDialogFooter>
+            {commandNeedsRead && <Button type="button" variant="outline" disabled={loading || !!busyId} onClick={() => { void loadLive() }}>Обновить каталог</Button>}
+            <AlertDialogCancel disabled={!!busyId}>Отмена</AlertDialogCancel>
+            <AlertDialogAction type="button" variant="destructive" disabled={!!busyId || !nodeFresh(deleteTarget.serverId) || !displayContainers.some(row => row.id === deleteTarget.id && row.rosId === deleteTarget.rosId)} aria-busy={!!busyId} onClick={() => { void mutate(deleteTarget, "remove") }}>{busyId ? "Удаление…" : "Удалить"}</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>}
       <ExportSheet
         open={!!exportContainer}
         container={exportContainer}