"use client"

import type React from "react"

import { useState, useMemo, useEffect, useRef } from "react"
import { fetchLxcApps, getLxcAppsCached, invalidateLxcApps, seedLxcAppsCache, setLxcAppsCached } from "../lib/lxc-apps-cache"
import { parseTags, stringifyTags, tagToColor } from "../lib/pve-tag-color"
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card"
import { Badge } from "./ui/badge"
import { Progress } from "./ui/progress"
import { Button } from "./ui/button"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from "./ui/dialog"
import { Server, Play, Square, Cpu, MemoryStick, HardDrive, Network, Power, RotateCcw, StopCircle, Container, ChevronDown, ChevronUp, ChevronRight, Terminal, Archive, Plus, PlusCircle, Loader2, Clock, Database, Shield, Bell, FileText, Settings2, Activity, Package, RefreshCw, EthernetPort, ArrowUpCircle, Info, CheckCircle2, EyeOff, Eye, Trash2, Check, X, AlertTriangle, AlertCircle, ExternalLink, Tag as TagIcon } from 'lucide-react'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select"
import { Checkbox } from "./ui/checkbox"
import { Switch } from "./ui/switch"
import { Textarea } from "./ui/textarea"
import { Input } from "./ui/input"
import { Label } from "./ui/label"
import useSWR from "swr"
import { MetricsView } from "./metrics-dialog"
import { LxcTerminalModal } from "./lxc-terminal-modal"
import { ScriptTerminalModal } from "./script-terminal-modal"
import { LxcAppPanel, ThemeAwareLogo } from "./lxc-app-panel"
import { formatStorage } from "../lib/utils"
import { formatNetworkTraffic, getNetworkUnit } from "../lib/format-network"
import { fetchApi } from "../lib/api-config"
import DOMPurify from "dompurify"
import { marked } from "marked"
import { useT } from "@/lib/i18n/provider"

// Sent by /api/vms only for LXC rows, only when the user has enabled
// `lxc_updates_available` notifications. The Monitor populates this
// from managed_installs registry → frontend uses it to render the
// inline update badge + the modal's "Pending updates" section.
interface LxcPackageUpdate {
  name: string
  current: string
  latest: string
  security: boolean
}
interface LxcUpdateCheck {
  available: boolean
  count: number
  security_count: number
  last_check: string | null
  latest: string | null
  error: string | null
  packages: LxcPackageUpdate[]
  // Added Phase 2a/b — surfaced by managed_installs when the CT
  // originates from an OCI image (apt/apk detection is suppressed
  // for those) or when the community-scripts convention
  // /usr/bin/update is present in the CT.
  is_oci_lxc?: boolean
  app_updater_present?: boolean
  // ProxMenux-managed OCI app id (e.g. "secure-gateway") — when set,
  // this CT is driven by the OCI dashboard's own updater and the
  // Updates modal redirects there instead of running our apt flow.
  managed_oci_app?: string | null
  // Community-scripts identity + updateable-known flag. Backed by the
  // ProxMenux helpers_cache (46 apps flagged updateable:false at
  // last count). The modal renders three shapes:
  //   • helper_updateable_known=true + app_updater_present=true → Apply button
  //   • helper_updateable_known=true + app_updater_present=false → "not updateable" note
  //   • helper_updateable_known=false → neutral hint (unknown/unlisted app)
  helper_slug?: string | null
  helper_slug_source?: "update_wrapper" | "tag_hostname" | null
  helper_app_name?: string | null
  helper_updateable_known?: boolean
  os_family?: string | null
}

// Summary attached to LXC rows in /api/vms when the user has
// registered an application watch for the CT. Populates the header
// badge + the Updates modal "App upstream" row.
interface LxcAppPort {
  port: number
  description?: string
  scheme?: "http" | "https"
  web_path?: string
  logo_url?: string | null
}
interface LxcAppWatch {
  id: string
  name: string | null
  installed_via?: string | null
  ports?: LxcAppPort[]
  logo_url?: string | null
  health_path?: string | null
  installed_version: string | null
  latest_version: string | null
  update_available: boolean | null
  error: string | null
  checked_at: string | null
  has_repo?: boolean
  // Set for the synthetic entry that represents a ProxMenux-managed
  // OCI app (Secure Gateway). The frontend renders it read-only +
  // wires the Update action to /api/oci/installed/<id>/update.
  managed_oci_app_id?: string | null
  packages?: Array<{ name: string; current?: string; latest?: string }>
  // Updates tab: freeform bash the user wired up as the app's own
  // update method. When set, the Updates tab renders an "Apply {app}"
  // button that runs `pct exec vmid -- sh -c "$update_command"`.
  update_command?: string
  // Updates tab: per-app dismiss for the "no update method defined"
  // notice. Only hides the notice — the App tab still shows purple ⬆
  // when an update is available upstream.
  hide_no_updater_notice?: boolean
  // Community-scripts slug set by the App tab Register flow. Lets the
  // Updates tab helper-scripts section find its matching registered
  // app to pull installed/upstream version data from.
  helper_slug?: string
  // Per-app opt-out of the CT's aggregate updates badge (default:
  // included). Independent from the app's notification toggle.
  exclude_from_badge?: boolean
  // Per-app opt-out for the `app_update_available` notification.
  notifications_enabled?: boolean
}

interface LxcDockerComposeTarget {
  kind: "compose"
  project: string
  services: string[]
  working_dir: string
  config_files: string[]
  update_command: string
  dependencies?: Record<string, string[]>
}

interface LxcDockerUpdateUnit {
  id: string
  kind: "compose" | "standalone"
  project?: string | null
  primary_service?: string | null
  services: string[]
  dependent_services?: string[]
  references: string[]
  primary_reference?: string | null
  display_name?: string | null
  logo_url?: string | null
  working_dir?: string | null
  config_files?: string[]
  update_command?: string
  standalone_containers?: string[]
  update_available?: boolean | null
}

interface LxcDockerImageUpdate {
  reference: string
  tag: string
  display_name?: string | null
  logo_url?: string | null
  installed_version?: string | null
  available_version?: string | null
  local_digest: string | null
  remote_digest: string | null
  used_by: string[]
  update_targets?: LxcDockerComposeTarget[]
  standalone_containers?: string[]
  update_available: boolean | null
  error: string | null
}

interface LxcDockerInventory {
  available: boolean
  refreshing?: boolean
  engine_version: string | null
  images: LxcDockerImageUpdate[]
  compose_projects?: LxcDockerComposeTarget[]
  update_units?: LxcDockerUpdateUnit[]
  update_count: number
  checked_at: string | null
  error: string | null
}

interface VMData {
  vmid: number
  name: string
  status: string
  type: string
  cpu: number
  maxcpu?: number
  mem: number
  maxmem: number
  disk: number
  maxdisk: number
  uptime: number
  netin?: number
  netout?: number
  diskread?: number
  diskwrite?: number
  ip?: string
  update_check?: LxcUpdateCheck
  // Proxmox tags as a raw string ("prod;web;monitoring" — PVE
  // separator is ';' but ',' is also accepted). Rendered as
  // coloured dots next to the ID in the list cards and as full
  // pills inside the modal.
  tags?: string
  // List of registered apps (0..N). Managed entries (Secure Gateway)
  // always come first when present.
  app_watches?: LxcAppWatch[]
  // Read-only Docker image digest inventory. Separate from app_watches
  // because engine updates and image updates are independent lifecycles.
  docker_inventory?: LxcDockerInventory
  // Incremented by the server after it has rebuilt this guest's complete
  // modal/app/Docker snapshot following a start, reboot or restore.
  modal_cache_revision?: number
}

function buildRegisteredAppUrl(vm: VMData, port?: LxcAppPort): string | null {
  const rawIp = (vm.ip || "").trim().split("/")[0]
  if (!rawIp || rawIp === "DHCP" || !port?.port) return null
  const host = rawIp.includes(":") && !rawIp.startsWith("[") ? `[${rawIp}]` : rawIp
  const scheme = port.scheme || ([443, 8443, 9443].includes(port.port) ? "https" : "http")
  const path = port.web_path ? `/${port.web_path.replace(/^\/+/, "")}` : ""
  return `${scheme}://${host}:${port.port}${path}`
}

interface VMConfig {
  cores?: number
  memory?: number
  swap?: number
  rootfs?: string
  net0?: string
  net1?: string
  net2?: string
  nameserver?: string
  searchdomain?: string
  onboot?: number
  unprivileged?: number
  features?: string
  ostype?: string
  arch?: string
  hostname?: string
  // VM specific
  sockets?: number
  scsi0?: string
  ide0?: string
  boot?: string
  description?: string // Added for notes
  // Hardware specific
  numa?: boolean
  bios?: string
  machine?: string
  vga?: string
  agent?: boolean
  tablet?: boolean
  localtime?: boolean
  // Storage specific
  scsihw?: string
  efidisk0?: string
  tpmstate0?: string
  // Mount points for LXC
  mp0?: string
  mp1?: string
  mp2?: string
  mp3?: string
  mp4?: string
  mp5?: string
  // PCI Passthrough
  hostpci0?: string
  hostpci1?: string
  hostpci2?: string
  hostpci3?: string
  hostpci4?: string
  hostpci5?: string
  // USB Devices
  usb0?: string
  usb1?: string
  usb2?: string
  // Serial Devices
  serial0?: string
  serial1?: string
  // Advanced
  vmgenid?: string
  smbios1?: string
  meta?: string
  // CPU
  cpu?: string
  [key: string]: any
}

interface VMDetails extends VMData {
  config?: VMConfig
  node?: string
  vm_type?: string
  os_info?: {
    id?: string
    version_id?: string
    name?: string
    pretty_name?: string
  }
  hardware_info?: {
    privileged?: boolean | null
    gpu_passthrough?: string[]
    devices?: string[]
  }
  lxc_ip_info?: {
    all_ips: string[]
    real_ips: string[]
    docker_ips: string[]
    primary_ip: string
  }
}

interface BackupStorage {
  storage: string
  type: string
  content: string
  total: number
  used: number
  avail: number
  total_human?: string
  used_human?: string
  avail_human?: string
}

interface VMBackup {
  volid: string
  storage: string
  type: string
  size: number
  size_human: string
  timestamp: number
  date: string
  notes?: string
}

// Sprint 13.29: shape returned by /api/lxc/<vmid>/mount-points. Lives
// next to VMBackup since both are LXC-modal data structures.
interface LxcMountPoint {
  mp_index: string  // "mp0", "mp1", "" for ad-hoc
  source: string
  target: string
  type: "pve_volume" | "pve_storage_bind" | "host_bind" | "ad_hoc"
  origin_storage: string
  origin_storage_type: string
  origin_label: string
  config_options: Record<string, string>
  config_flags: string[]
  total_bytes: number | null
  used_bytes: number | null
  available_bytes: number | null
  runtime_mounted?: boolean | null
  runtime_source?: string
  runtime_fstype?: string
  runtime_options?: string
  runtime_readonly?: boolean
  runtime_reachable?: boolean
  runtime_error?: string | null
  // Sprint 14.x: host-side bind source state. Detects the case where the
  // CT still reports a bind as mounted even though the host already
  // umounted the source (Ignacio Seijo 11/05). Null = N/A (PVE volume,
  // not a host path).
  host_source_exists?: boolean | null
  host_source_is_mountpoint?: boolean | null
}

const fetcher = async (url: string) => {
  return fetchApi(url)
}

const formatBytes = (bytes: number | undefined, isNetwork: boolean = false): string => {
  if (!bytes || bytes === 0) return isNetwork ? "0 B/s" : "0 B"
  
  if (isNetwork) {
    const networkUnit = getNetworkUnit()
    return formatNetworkTraffic(bytes, networkUnit, 2)
  }
  
  // For non-network (disk), use standard bytes
  const k = 1024
  const sizes = ["B", "KB", "MB", "GB", "TB"]
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return `${(bytes / Math.pow(k, i)).toFixed(2)} ${sizes[i]}`
}

const formatUptime = (seconds: number, t: (key: string, params?: Record<string, string | number>) => string) => {
  const days = Math.floor(seconds / 86400)
  const hours = Math.floor((seconds % 86400) / 3600)
  const minutes = Math.floor((seconds % 3600) / 60)
  return t("vmLxc.duration.dhm", { days, hours, minutes })
}

const extractIPFromConfig = (config?: VMConfig, lxcIPInfo?: VMDetails["lxc_ip_info"]): string => {
  // Use primary IP from lxc-info if available
  if (lxcIPInfo?.primary_ip) {
    return lxcIPInfo.primary_ip
  }

  if (!config) return "DHCP"

  // Check net0, net1, net2, etc.
  for (let i = 0; i < 10; i++) {
    const netKey = `net${i}`
    const netConfig = config[netKey]

    if (netConfig && typeof netConfig === "string") {
      // Look for ip=x.x.x.x/xx or ip=x.x.x.x pattern
      const ipMatch = netConfig.match(/ip=([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3})/)
      if (ipMatch) {
        return ipMatch[1] // Return just the IP without CIDR
      }

      // Check if it's explicitly DHCP
      if (netConfig.includes("ip=dhcp")) {
        return "DHCP"
      }
    }
  }

  return "DHCP"
}

// const formatStorage = (sizeInGB: number): string => {
//   if (sizeInGB < 1) {
//     // Less than 1 GB, show in MB
//     return `${(sizeInGB * 1024).toFixed(1)} MB`
//   } else if (sizeInGB < 1024) {
//     // Less than 1024 GB, show in GB
//     return `${sizeInGB.toFixed(1)} GB`
//   } else {
//     // 1024 GB or more, show in TB
//     return `${(sizeInGB / 1024).toFixed(1)} TB`
//   }
// }

const getUsageColor = (percent: number): string => {
  if (percent >= 95) return "text-red-500"
  if (percent >= 86) return "text-orange-500"
  if (percent >= 71) return "text-yellow-500"
  return "text-foreground"
}

// Generate consistent color for storage names
const storageColors = [
  { bg: "bg-blue-500/20", text: "text-blue-400", border: "border-blue-500/30" },
  { bg: "bg-emerald-500/20", text: "text-emerald-400", border: "border-emerald-500/30" },
  { bg: "bg-purple-500/20", text: "text-purple-400", border: "border-purple-500/30" },
  { bg: "bg-amber-500/20", text: "text-amber-400", border: "border-amber-500/30" },
  { bg: "bg-pink-500/20", text: "text-pink-400", border: "border-pink-500/30" },
  { bg: "bg-cyan-500/20", text: "text-cyan-400", border: "border-cyan-500/30" },
  { bg: "bg-rose-500/20", text: "text-rose-400", border: "border-rose-500/30" },
  { bg: "bg-indigo-500/20", text: "text-indigo-400", border: "border-indigo-500/30" },
]

const getStorageColor = (storageName: string) => {
  // Generate a consistent hash from storage name
  let hash = 0
  for (let i = 0; i < storageName.length; i++) {
    hash = storageName.charCodeAt(i) + ((hash << 5) - hash)
  }
  const index = Math.abs(hash) % storageColors.length
  return storageColors[index]
}

const getIconColor = (percent: number): string => {
  if (percent >= 95) return "text-red-500"
  if (percent >= 86) return "text-orange-500"
  if (percent >= 71) return "text-yellow-500"
  return "text-green-500"
}

const getProgressColor = (percent: number): string => {
  if (percent >= 95) return "[&>div]:bg-red-500"
  if (percent >= 86) return "[&>div]:bg-orange-500"
  if (percent >= 71) return "[&>div]:bg-yellow-500"
  return "[&>div]:bg-blue-500"
}

const getModalProgressColor = (percent: number): string => {
  if (percent >= 95) return "[&>div]:bg-red-500"
  if (percent >= 86) return "[&>div]:bg-orange-500"
  if (percent >= 71) return "[&>div]:bg-yellow-500"
  return "[&>div]:bg-blue-500"
}

const getOSIcon = (osInfo: VMDetails["os_info"] | undefined, vmType: string): React.ReactNode => {
  if (vmType !== "lxc" || !osInfo?.id) {
    return null
  }

  const osId = osInfo.id.toLowerCase()

  switch (osId) {
    case "debian":
      return <img src="/icons/debian.svg" alt="Debian" className="h-16 w-16" />
    case "ubuntu":
      return <img src="/icons/ubuntu.svg" alt="Ubuntu" className="h-16 w-16" />
    case "alpine":
      return <img src="/icons/alpine.svg" alt="Alpine" className="h-16 w-16" />
    case "arch":
      return <img src="/icons/arch.svg" alt="Arch" className="h-16 w-16" />
    default:
      return null
  }
}

// Sprint 13.29: render a single LXC mount point row.
// Lifted out of the main component so the Mount Points tab renders
// uniformly for both configured mpX entries and ad-hoc inside-CT
// remote mounts. Capacity displays whatever the backend resolved —
// PVE storage stats, `df` of host path, or n/a for ad-hoc.
function MountPointCard({ mp }: { mp: LxcMountPoint }) {
  const t = useT()
  const isStale = mp.runtime_reachable === false
  const isReadonly = !isStale && mp.runtime_readonly === true
  const isDivergent = mp.runtime_mounted === false  // configured but not actually mounted
  // "Zombie bind": the host removed the source (e.g. USB pulled, manual
  // umount) but the CT mount namespace still shows the bind as mounted.
  // Reported by Ignacio Seijo (11/05). Only flag host_bind /
  // pve_storage_bind sources — PVE volume sources have no host path
  // and `host_source_exists` comes back null for them.
  const isHostDetached =
    mp.runtime_mounted === true &&
    (mp.type === "host_bind" || mp.type === "pve_storage_bind") &&
    mp.host_source_exists === false
  const cardClasses = isStale
    ? "border-red-500/50 bg-red-500/5"
    : isDivergent || isHostDetached
      ? "border-amber-500/40 bg-amber-500/5"
      : isReadonly
        ? "border-amber-500/30 bg-amber-500/5"
        : "border border-border bg-card"

  const typeBadgeClass: Record<LxcMountPoint["type"], string> = {
    pve_volume: "bg-cyan-500/10 text-cyan-400 border-cyan-500/20",
    pve_storage_bind: "bg-blue-500/10 text-blue-400 border-blue-500/20",
    host_bind: "bg-purple-500/10 text-purple-400 border-purple-500/20",
    ad_hoc: "bg-amber-500/10 text-amber-400 border-amber-500/20",
  }
  const typeLabel: Record<LxcMountPoint["type"], string> = {
    pve_volume: t("vmLxc.details.mountTypes.pveVolume"),
    pve_storage_bind: t("vmLxc.details.mountTypes.pveStorageBind"),
    host_bind: t("vmLxc.details.mountTypes.hostBind"),
    ad_hoc: t("vmLxc.details.mountTypes.adHoc"),
  }

  const fmtBytes = (b: number | null | undefined) => {
    if (b == null) return "—"
    const gb = b / 1024 ** 3
    if (gb < 1) return `${(gb * 1024).toFixed(1)} MB`
    if (gb >= 1000) return `${(gb / 1024).toFixed(2)} TB`
    return `${gb.toFixed(2)} GB`
  }
  const usedPct =
    mp.total_bytes && mp.used_bytes != null && mp.total_bytes > 0
      ? Math.round((mp.used_bytes / mp.total_bytes) * 100)
      : null

  // Parse mount options (runtime if available, else config flags) into
  // flag chips + key=value pairs. Same UX as the Remote Mounts modal.
  const optsString = mp.runtime_options || (mp.config_flags || []).join(",")
  const optsEntries = (optsString || "")
    .split(",")
    .filter(Boolean)
    .map((o) => {
      const eq = o.indexOf("=")
      return eq === -1
        ? { key: o, value: null as string | null }
        : { key: o.slice(0, eq), value: o.slice(eq + 1) }
    })
  const flags = optsEntries.filter((o) => o.value === null).map((o) => o.key)
  const keyValues = optsEntries.filter((o) => o.value !== null) as Array<{ key: string; value: string }>

  return (
    <div className={`rounded-lg p-4 ${cardClasses}`}>
      <div className="flex items-center justify-between gap-3 flex-wrap mb-2">
        <div className="flex items-center gap-2 min-w-0">
          <div
            className={`w-2 h-2 rounded-full flex-shrink-0 ${
              isStale ? "bg-red-500" : isDivergent ? "bg-amber-500" : "bg-green-500"
            }`}
          />
          <h3 className="font-mono font-semibold truncate">{mp.target}</h3>
          {mp.mp_index && (
            <Badge variant="outline" className="font-mono">
              {mp.mp_index}
            </Badge>
          )}
          <Badge className={typeBadgeClass[mp.type]}>{typeLabel[mp.type]}</Badge>
          {mp.runtime_fstype && (
            <Badge variant="outline" className="font-mono">
              {mp.runtime_fstype}
            </Badge>
          )}
        </div>
        <Badge
          className={
            isStale
              ? "bg-red-500/10 text-red-500 border-red-500/20"
              : isDivergent || isHostDetached
                ? "bg-amber-500/10 text-amber-500 border-amber-500/20"
                : isReadonly
                  ? "bg-amber-500/10 text-amber-500 border-amber-500/20"
                  : mp.runtime_mounted === null
                    ? "bg-gray-500/10 text-gray-400 border-gray-500/20"
                    : "bg-green-500/10 text-green-500 border-green-500/20"
          }
        >
          {isStale
            ? t("vmLxc.details.mountStatus.stale")
            : isDivergent
              ? t("vmLxc.details.mountStatus.notMounted")
              : isHostDetached
                ? t("vmLxc.details.mountStatus.hostDetached")
                : isReadonly
                  ? t("vmLxc.details.mountStatus.readOnly")
                  : mp.runtime_mounted === null
                    ? t("vmLxc.details.mountStatus.stopped")
                    : t("vmLxc.details.mountStatus.mounted")}
        </Badge>
      </div>

      {/* Source / Mounted-at info — what host resource backs the
          mount, and where it shows up inside the CT. The header
          already shows the target but it's worth surfacing the
          source/target relationship explicitly here so the user
          gets the full host→container path at a glance. */}
      <div className="text-sm space-y-1">
        <div>
          <span className="text-muted-foreground">{t("vmLxc.details.sourceHost")}:</span>{" "}
          <span className="font-mono">{mp.origin_label || mp.source}</span>
          {mp.origin_storage && mp.origin_storage_type && (
            <span className="text-muted-foreground ml-2">
              ({t("vmLxc.details.storageType", { type: mp.origin_storage_type })})
            </span>
          )}
        </div>
        <div>
          <span className="text-muted-foreground">{t("vmLxc.details.mountedAtCt")}:</span>{" "}
          <span className="font-mono">{mp.target}</span>
        </div>
      </div>

      {/* Capacity — total/used/available with progress bar. Available
          even when CT is stopped because numbers come from the host. */}
      {mp.total_bytes != null && (
        <div className="mt-3 space-y-2">
          <Progress
            value={usedPct ?? 0}
            className={`h-2 ${
              (usedPct ?? 0) > 90
                ? "[&>div]:bg-red-500"
                : (usedPct ?? 0) > 75
                  ? "[&>div]:bg-yellow-500"
                  : "[&>div]:bg-blue-500"
            }`}
          />
          <div className="grid grid-cols-3 gap-3 text-sm">
            <div>
              <p className="text-xs text-muted-foreground">{t("vmLxc.details.total")}</p>
              <p className="font-medium">{fmtBytes(mp.total_bytes)}</p>
            </div>
            <div>
              <p className="text-xs text-muted-foreground">{t("vmLxc.details.used")}</p>
              <p className="font-medium">
                {fmtBytes(mp.used_bytes)} {usedPct != null && `(${usedPct}%)`}
              </p>
            </div>
            <div>
              <p className="text-xs text-muted-foreground">{t("vmLxc.details.available")}</p>
              <p className="font-medium">{fmtBytes(mp.available_bytes)}</p>
            </div>
          </div>
        </div>
      )}

      {/* Mount attributes — config_options/flags from the mpX line in
          the LXC config (backup=0, shared=1, ro, replicate, etc.).
          Hidden when there's nothing to show. */}
      {(() => {
        const configEntries: Array<{ key: string; value: string | null }> = []
        for (const k of Object.keys(mp.config_options || {})) {
          configEntries.push({ key: k, value: mp.config_options[k] })
        }
        for (const f of mp.config_flags || []) {
          configEntries.push({ key: f, value: null })
        }
        if (configEntries.length === 0) return null
        return (
          <div className="mt-3">
            <p className="text-xs text-muted-foreground mb-1.5">
              {t("vmLxc.details.mountAttributes")}
            </p>
            <div className="flex flex-wrap gap-1.5">
              {configEntries.map((e) => (
                <Badge key={e.key} variant="outline" className="font-mono text-xs">
                  {e.key}{e.value !== null ? `=${e.value}` : ""}
                </Badge>
              ))}
            </div>
          </div>
        )
      })()}

      {/* Runtime mount options — what the kernel actually uses
          (vers, rsize, hard, sec, ...). Only meaningful when the CT
          is running; for stopped CTs we hide this section because
          the values would just repeat the config flags above.

          Sprint 13.29 detail: we already render the runtime fstype
          as a badge in the header, so it's fine to leave this
          unlabelled-for-state — only show "(declared)" suffix in
          the rare case where there's no runtime data but flags do
          exist. */}
      {(mp.runtime_mounted === true) && (keyValues.length > 0 || flags.length > 0) && (
        <div className="mt-3">
          <p className="text-xs text-muted-foreground mb-1.5">
            {t("vmLxc.details.runtimeMountOptions")}
          </p>
          <div className="flex flex-wrap gap-1.5 mb-2">
            {flags.map((f) => (
              <Badge key={f} variant="outline" className="font-mono text-xs">
                {f}
              </Badge>
            ))}
          </div>
          {keyValues.length > 0 && (
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-x-4 gap-y-1 text-sm">
              {keyValues.map((kv) => (
                <div key={kv.key} className="min-w-0">
                  <span className="font-mono text-muted-foreground">{kv.key}</span>
                  <span className="font-mono text-foreground"> = {kv.value}</span>
                </div>
              ))}
            </div>
          )}
        </div>
      )}

      {/* Error / divergence note. */}
      {mp.runtime_error && (
        <p
          className={`mt-3 text-sm ${
            isStale ? "text-red-400" : "text-amber-400"
          }`}
        >
          {mp.runtime_error}
        </p>
      )}
    </div>
  )
}

export function VirtualMachines() {
  const t = useT()
  const {
    data: vmData,
    error,
    isLoading,
    mutate,
  } = useSWR<VMData[]>("/api/vms", fetcher, {
    refreshInterval: 2500,
    revalidateOnFocus: true,
    revalidateOnReconnect: true,
    dedupingInterval: 1000,
    errorRetryCount: 2,
  })

  const [selectedVM, setSelectedVM] = useState<VMData | null>(null)
  const [vmDetails, setVMDetails] = useState<VMDetails | null>(null)
  // Cross-open cache: last-known payloads keyed by vmid, persisted
  // across modal open/close for the lifetime of this component. When
  // a user reopens the same guest, we prime the UI from this ref
  // instantly, so no tab shows "Loading…" between openings. A fresh
  // fetch still runs and refreshes both the state and the ref — the
  // backend's per-vmid TTL cache (see flask_server.py) makes that
  // revalidation cheap.
  const vmModalCacheRef = useRef({
    details: new Map<number, any>(),
    // Backups carry a `fetchedAt` millisecond timestamp alongside the
    // payload so `fetchVmBackups` can decide whether to add `?fresh=1`
    // on the wire. The backend cache is indefinite; the 6-hour gate
    // lives here on the client, matching the operator-facing rule
    // ("scheduled/cron backups can appear anywhere in the day, but a
    // 6-hour visibility lag is acceptable"). If a modal reopens
    // within 6 h of the last fetch, no re-scan on the server.
    backups: new Map<number, { backups: VMBackup[]; fetchedAt: number }>(),
    // NOTE: apps payload lives in the shared module `lxc-apps-cache`
    // (dedup between this parent and LxcAppPanel — see fetchLxcApps).
    schedule: new Map<number, any>(),
    // Only the static half of mount-points goes here. Runtime
    // (capacity/health/ad-hoc) is intentionally NOT cached — see
    // `mountPointsRuntime` state + `fetchMountPoints` for the
    // always-fresh side. `ad_hoc_hint_count` is the cheap remote-fs
    // count from /proc/<pid>/mounts (server-side, no subprocess)
    // that lets us render the Mount Points tab header at open time
    // for CTs that only have NFS/CIFS mounted from inside.
    mountPoints: new Map<number, { mount_points: LxcMountPoint[]; ad_hoc_hint_count?: number }>(),
    // Firewall log is on-demand ONLY — do NOT seed it from the bulk
    // modal-cache endpoint or from any prewarmer. The log is a live
    // stream (new entries flow with every packet the firewall drops)
    // so cached data has no value beyond the current session; most
    // users never open the Firewall tab, so pre-scanning would waste
    // pvesh cycles for nothing. This Map fills only when
    // `fetchFirewallLog` runs (tab click or Refresh button) and
    // survives modal reopens within the same page load.
    firewall: new Map<number, any>(),
  })
  const dockerInventoryRequestedRef = useRef(new Map<number, number>())
  const lifecycleCacheRevisionsRef = useRef(new Map<number, number>())
  const [dockerInventoryRefreshingVmid, setDockerInventoryRefreshingVmid] = useState<number | null>(null)
  const [controlLoading, setControlLoading] = useState(false)
  // Destructive control confirmation. `Force Stop` and `Reboot` skip the OS
  // shutdown sequence and can corrupt running guests; gate them behind a
  // typed-VMID match prompt to prevent misclicks. See audit Tier 2 #17.
  const [confirmDestructive, setConfirmDestructive] = useState<{
    action: "stop" | "reboot"
    vmid: number
    vmName: string
  } | null>(null)
  const [confirmDestructiveTyped, setConfirmDestructiveTyped] = useState("")
  const [detailsLoading, setDetailsLoading] = useState(false)
  // Status tab: inline editor for the "start on boot" toggle.
  //   resourcesEditMode → true when the pencil is open, gates the
  //                       toggle so accidental clicks don't fire.
  //   pendingOnboot     → local edit value; null means "no pending
  //                       change, use whatever vmDetails.config
  //                       says". `qm/pct set --onboot` is hot, so
  //                       the change lands without a reboot.
  //   savingOnboot      → spinner state on Save.
  //   savedOnboot       → 2 s ack pill after successful save.
  const [resourcesEditMode, setResourcesEditMode] = useState(false)
  const [pendingOnboot, setPendingOnboot] = useState<boolean | null>(null)
  const [pendingTags, setPendingTags] = useState<string[] | null>(null)
  const [newTagDraft, setNewTagDraft] = useState<string>("")
  // When set (in edit mode), the pill at this index renders as an
  // inline text input pre-filled with its current text. Enter/blur
  // commits the change; Escape reverts; empty commits removes the tag.
  const [editingTagIndex, setEditingTagIndex] = useState<number | null>(null)
  const [editingTagDraft, setEditingTagDraft] = useState<string>("")
  const [savingOnboot, setSavingOnboot] = useState(false)
  const [savedOnboot, setSavedOnboot] = useState(false)
  // Post-apply state for the Updates tab. When the script terminal
  // closes, the tab enters a "Comprobando resultado…" state until
  // a fresh /api/vms poll delivers the new update_check counts;
  // then it flashes a short success/warning banner. Prevents the
  // confusing window where stale "40 pending" numbers are still on
  // screen right after the user just ran the updater.
  //   updatesRefreshing → shows a discreet spinner in the tab
  //   updatesResult    → { count, applied } drives the banner
  //   updatesBaselineCount → snapshot of `count` at the moment the
  //     apply started; the useEffect below considers the SWR poll
  //     "settled" when the observed count differs from this baseline
  //     (or after a 15 s safety timeout).
  const [updatesRefreshing, setUpdatesRefreshing] = useState(false)
  const [updatesResult, setUpdatesResult] = useState<{ pendingAfter: number; appliedCount: number } | null>(null)
  const [updatesBaselineCount, setUpdatesBaselineCount] = useState<number | null>(null)
  const [terminalOpen, setTerminalOpen] = useState(false)
  const [terminalVmid, setTerminalVmid] = useState<number | null>(null)
  const [terminalVmName, setTerminalVmName] = useState<string>("")
  const [vmConfigs, setVmConfigs] = useState<Record<number, string>>({})
  const [currentView, setCurrentView] = useState<"main" | "metrics">("main")
  const [showAdditionalInfo, setShowAdditionalInfo] = useState(false)
  const [showNotes, setShowNotes] = useState(false)
  const [isEditingNotes, setIsEditingNotes] = useState(false)
  const [editedNotes, setEditedNotes] = useState("")
  const [savingNotes, setSavingNotes] = useState(false)
  const [selectedMetric, setSelectedMetric] = useState<string | null>(null)
  const [ipsLoaded, setIpsLoaded] = useState(false)
  const [loadingIPs, setLoadingIPs] = useState(false)
  const [networkUnit, setNetworkUnit] = useState<"Bytes" | "Bits">("Bytes")
  
  // Backup states
  const [vmBackups, setVmBackups] = useState<VMBackup[]>([])
  const [backupStorages, setBackupStorages] = useState<BackupStorage[]>([])
  const [selectedBackupStorage, setSelectedBackupStorage] = useState<string>("")
  const [loadingBackups, setLoadingBackups] = useState(false)
  const [creatingBackup, setCreatingBackup] = useState(false)
  
  // Backup modal states
  const [showBackupModal, setShowBackupModal] = useState(false)
  const [backupMode, setBackupMode] = useState<string>("snapshot")
  const [backupProtected, setBackupProtected] = useState(false)
  const [backupNotification, setBackupNotification] = useState<string>("auto")
  const [backupNotes, setBackupNotes] = useState<string>("{{guestname}}")
  const [backupPbsChangeMode, setBackupPbsChangeMode] = useState<string>("default")
  
  // Tab state for modal
  const [activeModalTab, setActiveModalTab] = useState<"status" | "mounts" | "backups" | "app" | "updates" | "firewall">("status")

  // Firewall log state — fetched only when the operator opens that tab
  // so a CT/VM without firewall use doesn't pay the pvesh cost on every
  // modal open. Issue #14554 from the helper-scripts discussions.
  interface FirewallLogEntry { n: number; t: string }
  const [firewallLogs, setFirewallLogs] = useState<FirewallLogEntry[]>([])
  const [loadingFirewallLog, setLoadingFirewallLog] = useState(false)
  const [firewallEnabled, setFirewallEnabled] = useState<boolean>(true)
  const [firewallLogError, setFirewallLogError] = useState<string | null>(null)
  // Sprint 13.29: per-LXC mount points lazy-loaded when the user opens
  // the LXC modal. We fetch alongside backups (one-shot) so switching
  // tabs is instantaneous; the cost is small (parses one config file
  // + pvesm status which the kernel already caches).
  const [mountPoints, setMountPoints] = useState<LxcMountPoint[]>([])
  const [adHocMounts, setAdHocMounts] = useState<LxcMountPoint[]>([])
  const [loadingMounts, setLoadingMounts] = useState(false)
  // Runtime enrichment keyed by target — fetched fresh every open
  // (never cached). `mountPoints` cards read this to fill in usage
  // bars, reachability and runtime fstype without blocking their
  // initial render. Null while the runtime fetch is in flight; the
  // static cards still render (paths, types, storage origin) and
  // reveal usage/health when the fetch resolves.
  const [mountPointsRuntime, setMountPointsRuntime] = useState<Record<string, Partial<LxcMountPoint>> | null>(null)
  // Cheap count of remote-fs (nfs/cifs/smb) entries in the CT's
  // /proc/<pid>/mounts, delivered by the static endpoint so the
  // Mount Points tab can render its header IMMEDIATELY for CTs that
  // only have ad-hoc mounts inside the container. The full ad-hoc
  // list still arrives via the runtime fetch (with capacity/health);
  // this is just enough to know "should the tab show at all?".
  const [mountsAdHocHint, setMountsAdHocHint] = useState<number>(0)
  
  // Detect standalone mode (webapp vs browser)
  const [isStandalone, setIsStandalone] = useState(false)
  
  useEffect(() => {
    const checkStandalone = () => {
      const standalone = window.matchMedia('(display-mode: standalone)').matches ||
                        (window.navigator as Navigator & { standalone?: boolean }).standalone === true
      setIsStandalone(standalone)
    }
    checkStandalone()
    
    const mediaQuery = window.matchMedia('(display-mode: standalone)')
    mediaQuery.addEventListener('change', checkStandalone)
    return () => mediaQuery.removeEventListener('change', checkStandalone)
  }, [])

  useEffect(() => {
    // Fetch IPs for LXCs that aren't in `vmConfigs` yet. Previously
    // gated on `ipsLoaded` (single latch) — with `forceMount` on the
    // parent the component never re-mounts, so a new LXC appearing
    // mid-session, or a fetch that failed the first time, stayed
    // without an IP forever. Now we compare `vmData` against
    // `vmConfigs` on every SWR poll and fetch only the delta.
    let cancelled = false

    const fetchLXCIPs = async () => {
      if (!vmData || loadingIPs) return

      const missing = vmData.filter(
        (vm) => vm.type === "lxc" && !(vm.vmid in vmConfigs),
      )
      if (missing.length === 0) return

      setLoadingIPs(true)
      const configs: Record<number, string> = {}

      const batchSize = 5
      for (let i = 0; i < missing.length; i += batchSize) {
        if (cancelled) return
        const batch = missing.slice(i, i + batchSize)

        await Promise.all(
          batch.map(async (lxc) => {
            try {
              const controller = new AbortController()
              const timeoutId = setTimeout(() => controller.abort(), 10000)

              const details = await fetchApi<VMDetails>(`/api/vms/${lxc.vmid}`)

              clearTimeout(timeoutId)

              if (details.lxc_ip_info?.primary_ip) {
                configs[lxc.vmid] = details.lxc_ip_info.primary_ip
              } else if (details.config) {
                configs[lxc.vmid] = extractIPFromConfig(details.config, details.lxc_ip_info)
              } else {
                configs[lxc.vmid] = "N/A"
              }
            } catch (error) {
              console.log(`Could not fetch IP for LXC ${lxc.vmid}`)
              configs[lxc.vmid] = "N/A"
            }
          }),
        )

        if (cancelled) return
        setVmConfigs((prev) => ({ ...prev, ...configs }))
      }

      if (cancelled) return
      setLoadingIPs(false)
    }

    fetchLXCIPs()
    return () => {
      cancelled = true
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [vmData, loadingIPs])

  // Load initial network unit and listen for changes
  useEffect(() => {
    setNetworkUnit(getNetworkUnit())

    const handleNetworkUnitChange = () => {
      setNetworkUnit(getNetworkUnit())
    }

    window.addEventListener("networkUnitChanged", handleNetworkUnitChange)
    window.addEventListener("storage", handleNetworkUnitChange)

    return () => {
      window.removeEventListener("networkUnitChanged", handleNetworkUnitChange)
      window.removeEventListener("storage", handleNetworkUnitChange)
    }
  }, [])

  // Keep the open modal's VM in sync with the /api/vms poll so CPU/RAM/I-O values
  // don't stay frozen at click-time. Single data source (/cluster/resources) shared
  // with the list — no source mismatch, no flicker.
  useEffect(() => {
    if (!selectedVM || !vmData) return
    const updated = vmData.find((v) => v.vmid === selectedVM.vmid)
    if (!updated || updated === selectedVM) return
    setSelectedVM(updated)
  }, [vmData])

  // Backend lifecycle refreshes are asynchronous: a start response returns
  // immediately, then the server waits for the guest (and Docker, for LXCs)
  // before publishing a complete new snapshot. When its revision changes,
  // discard only this guest's browser-side data. The following SWR poll and
  // modal open then consume the warmed server cache without a stale flash.
  useEffect(() => {
    if (!vmData) return
    const revisions = lifecycleCacheRevisionsRef.current
    for (const vm of vmData) {
      const current = vm.modal_cache_revision ?? 0
      const previous = revisions.get(vm.vmid)
      revisions.set(vm.vmid, current)
      if (previous === undefined || previous === current) continue

      const cache = vmModalCacheRef.current
      cache.details.delete(vm.vmid)
      cache.backups.delete(vm.vmid)
      cache.mountPoints.delete(vm.vmid)
      cache.schedule.delete(vm.vmid)
      cache.firewall.delete(vm.vmid)
      dockerInventoryRequestedRef.current.delete(vm.vmid)
      invalidateLxcApps(vm.vmid)
      setVmConfigs((existing) => {
        if (!(vm.vmid in existing)) return existing
        const next = { ...existing }
        delete next[vm.vmid]
        return next
      })
    }
  }, [vmData])

  // Settle the Updates-tab "Comprobando resultado…" state as soon as
  // the /api/vms poll delivers a post-apply count that differs from
  // the baseline captured when the terminal closed. Also drops the
  // spinner after 15 s of no observed change (backend hook already
  // force-refreshed managed_installs, so a still-equal count at that
  // point means either everything was a no-op or the scan hasn't
  // finished — either way the user shouldn't keep staring at a
  // loader). Sets `updatesResult` for the transient banner: green if
  // count is now 0, amber if some packages remain.
  useEffect(() => {
    if (!updatesRefreshing) return
    if (!selectedVM) return
    const currentCount = selectedVM.update_check?.count ?? 0
    // A change from baseline (or landing at 0) means the fresh
    // post-apply snapshot is in.
    if (updatesBaselineCount !== null && currentCount !== updatesBaselineCount) {
      const applied = Math.max(0, updatesBaselineCount - currentCount)
      setUpdatesResult({ pendingAfter: currentCount, appliedCount: applied })
      setUpdatesRefreshing(false)
      setUpdatesBaselineCount(null)
      return
    }
    // Safety timeout — never leave the spinner spinning forever.
    const safety = setTimeout(() => {
      setUpdatesResult({
        pendingAfter: currentCount,
        appliedCount: Math.max(0, (updatesBaselineCount ?? 0) - currentCount),
      })
      setUpdatesRefreshing(false)
      setUpdatesBaselineCount(null)
    }, 15000)
    return () => clearTimeout(safety)
  }, [selectedVM, updatesRefreshing, updatesBaselineCount])

  // Auto-dismiss the post-apply banner after 6 s so it doesn't
  // clutter the tab forever.
  useEffect(() => {
    if (!updatesResult) return
    const t = setTimeout(() => setUpdatesResult(null), 6000)
    return () => clearTimeout(t)
  }, [updatesResult])

  const handleVMClick = async (vm: VMData) => {
    setSelectedVM(vm)
    setBulkLoaded(null)
    setBulkConfigured(false)
    setBulkTargets(["os"])
    setBulkPersistedTargets(["os"])
    setBulkEditMode(false)
    setBulkError(null)
    setCurrentView("main")
    setShowAdditionalInfo(false)
    setShowNotes(false)
    setIsEditingNotes(false)
    setEditedNotes("")
    // Resources edit mode never carries across guests — always
    // start in view mode with no pending change.
    setResourcesEditMode(false)
    setPendingOnboot(null)
    setPendingTags(null)
    setNewTagDraft("")
    setEditingTagIndex(null)
    setEditingTagDraft("")
    setSavedOnboot(false)
    setActiveModalTab("status")
    // Reset firewall log state — fetched lazily when the user opens
    // that tab, since most operators won't visit it on every modal open.
    setFirewallLogs([])
    setFirewallLogError(null)
    setFirewallEnabled(true)

    // Prime UI from last-known payloads so a reopened guest never
    // flashes "Loading…" — the backend and this cache both revalidate
    // in the background right after.
    const cache = vmModalCacheRef.current
    const seedDetails = cache.details.get(vm.vmid) as VMDetails | undefined
    const seedBackups = cache.backups.get(vm.vmid)
    const seedMounts = cache.mountPoints.get(vm.vmid)
    setVMDetails(seedDetails ?? null)
    setVmBackups(seedBackups?.backups ?? [])
    setMountPoints(seedMounts?.mount_points ?? [])
    // Seed the ad-hoc hint from the static payload so the Mount
    // Points tab header renders instantly even when the CT only
    // has NFS/CIFS mounts done from inside (nothing in .conf).
    // The full list arrives via the runtime fetch a moment later.
    setMountsAdHocHint(seedMounts?.ad_hoc_hint_count ?? 0)
    // Ad-hoc mounts only come from the runtime fetch — never seeded.
    // Reset to empty on each modal open; if the CT has any, they
    // appear as soon as the runtime response arrives.
    setAdHocMounts([])
    // Runtime enrichment resets too — we never carry it across opens
    // because usage/reachability go stale within seconds. Fills in
    // when `fetchMountPoints` runtime response resolves.
    setMountPointsRuntime(null)
    setDetailsLoading(!seedDetails)
    setLoadingBackups(!seedBackups)
    if (vm.type === "lxc") setLoadingMounts(!seedMounts)

    // Load backups immediately (independent of config)
    fetchBackupStorages()
    fetchVmBackups(vm.vmid)

    // Fire every LXC-only tab payload in parallel too, so switching to
    // App / Updates never pays a fresh round-trip. Apps and schedule
    // are background: the App tab's own component still owns its fetch
    // (that request hits the backend TTL cache and returns in ~5 ms),
    // and loadSchedule reads the seeded ref cache when the user hits
    // Updates. Sprint 13.29 already did this for mount-points; this
    // extends the same idea to the two tabs still on lazy-fetch.
    if (vm.type === "lxc") {
      fetchMountPoints(vm.vmid)
      // Shared cache dedup: if a hover already fired this, we share
      // the same promise (no duplicate backend work). The App panel
      // reads from the same cache, so switching to that tab either
      // finds the data ready or awaits the SAME in-flight fetch.
      fetchLxcApps(vm.vmid)
      const cache = vmModalCacheRef.current
      fetchApi(`/api/vms/${vm.vmid}/schedule`)
        .then((s: any) => { if (s && typeof s === "object") cache.schedule.set(vm.vmid, s) })
        .catch(() => { /* silent — Updates tab will retry on activation */ })
    }

    try {
      const details = await fetchApi<VMDetails>(`/api/vms/${vm.vmid}`)
      setVMDetails(details)
      cache.details.set(vm.vmid, details)
    } catch (error) {
      console.error("Error fetching VM details:", error)
    } finally {
      setDetailsLoading(false)
    }
  }

  // Hover-prefetch is a no-op now: every modal payload
  // (details / backups / apps / schedule / mount-points) is
  // already in the ref cache from the bulk hydration on page
  // load. Kept as an empty callback so the JSX handler stays
  // stable and the intent is documented — if a new lazy field
  // appears later, warming it on hover goes here.
  const prefetchVM = (_vm: VMData) => { /* no-op */ }

  // Stable identity for the guest list — only changes when a guest is
  // ADDED or REMOVED. Prevents the prefetch effect below from being
  // torn down every SWR poll (2.5 s), which used to cancel every
  // in-flight fetch before it could populate the cache (the cancel
  // flag flipped between the fetch dispatch and its .then, so the
  // Map.set never ran). With this key, running/stopped status changes
  // — the only thing that fluctuates poll-to-poll — no longer disturb
  // the prefetch queue.
  const vmidsKey = useMemo(
    () => (vmData ? vmData.map((v) => `${v.vmid}:${v.type}`).sort().join(",") : ""),
    [vmData],
  )

  // Bulk hydration: one request to `/api/vms/modal-cache-all`
  // seeds the entire ref cache (details + backups + apps + schedule
  // for every guest) so opening any modal is instant. Replaces the
  // previous fan-out of ~4×N per-guest fetches that hit the server
  // on every page load. Fires again if guests are added/removed.
  //
  // Server serves this from its in-memory prewarmer cache (see
  // `_vm_modal_prewarmer_loop` in flask_server.py) — one dict read
  // per guest, entire response <20 ms typical.
  //
  // Fields returned `null` mean "not yet cached on the server"
  // (only happens in the 20-70 s window right after a service
  // restart). Individual modal handlers already fall back to a
  // dirigido fetch when the ref cache miss, so those guests
  // recover transparently.
  useEffect(() => {
    if (!vmData || vmData.length === 0) return
    let cancelled = false
    fetchApi<{
      guests: Array<{
        vmid: number
        type: "qemu" | "lxc"
        details: any | null
        backups: { backups?: VMBackup[] } | null
        apps?: { apps?: any[] } | null
        suggestions?: any | null
        schedule?: any | null
        mount_points?: { ok?: boolean; mount_points?: LxcMountPoint[]; ad_hoc_hint_count?: number } | null
      }>
    }>(`/api/vms/modal-cache-all`)
      .then((payload) => {
        if (cancelled || !payload?.guests) return
        const cache = vmModalCacheRef.current
        for (const g of payload.guests) {
          if (g.details) cache.details.set(g.vmid, g.details)
          if (g.backups?.backups) {
            cache.backups.set(g.vmid, { backups: g.backups.backups, fetchedAt: Date.now() })
          }
          if (g.type === "lxc") {
            if (g.apps) {
              // Route lxc apps through the shared module so
              // LxcAppPanel and this component read the same object.
              seedLxcAppsCache(g.vmid, g.apps, g.suggestions)
            }
            if (g.schedule && typeof g.schedule === "object") {
              cache.schedule.set(g.vmid, g.schedule)
            }
            if (g.mount_points?.ok) {
              // Only the static half now — ad_hoc + runtime come
              // from the always-fresh /mount-points/runtime endpoint
              // and are not seeded from the bulk payload. The
              // ad_hoc_hint_count travels along so the tab header
              // can render at open time even when the CT only has
              // NFS/CIFS mounted from inside.
              cache.mountPoints.set(g.vmid, {
                mount_points: g.mount_points.mount_points || [],
                ad_hoc_hint_count: (g.mount_points as any).ad_hoc_hint_count ?? 0,
              })
            }
          }
        }
      })
      .catch(() => {
        // Silent — modal open handlers fall back to individual
        // fetches if the ref cache is empty.
      })
    return () => { cancelled = true }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [vmidsKey])

  const fetchMountPoints = async (vmid: number) => {
    // Two fetches in parallel:
    //   1) STATIC — configured mp entries + PVE classification. Backed
    //      by the indefinite backend cache; cache-hit returns in ~5 ms
    //      after the first load. Seeds the cards' identity + paths.
    //   2) RUNTIME — `df` capacity, `stat` reachability, ad-hoc
    //      NFS/CIFS mounts done inside the CT. Never cached — always
    //      hits `df`/`stat` fresh so the operator sees the live state
    //      at click time. Takes 1-3s on a CT with many binds, but the
    //      cards are already visible from the static payload so the
    //      user perceives no lag.
    const hasSeed = mountPoints.length > 0
    if (!hasSeed) setLoadingMounts(true)
    try {
      const [staticResp, runtimeResp] = await Promise.all([
        fetchApi<{
          ok: boolean
          mount_points: LxcMountPoint[]
          ad_hoc_hint_count?: number
        }>(`/api/lxc/${vmid}/mount-points`).catch((e) => {
          console.error("Error fetching static mount points:", e)
          return null
        }),
        fetchApi<{
          ok: boolean
          running: boolean
          runtime: Record<string, Partial<LxcMountPoint>>
          ad_hoc: LxcMountPoint[]
        }>(`/api/lxc/${vmid}/mount-points/runtime`).catch((e) => {
          console.error("Error fetching runtime mount points:", e)
          return null
        }),
      ])
      if (staticResp?.ok) {
        const mp = staticResp.mount_points || []
        const hint = staticResp.ad_hoc_hint_count ?? 0
        setMountPoints(mp)
        setMountsAdHocHint(hint)
        vmModalCacheRef.current.mountPoints.set(vmid, { mount_points: mp, ad_hoc_hint_count: hint })
      } else if (!hasSeed) {
        setMountPoints([])
      }
      if (runtimeResp?.ok) {
        setMountPointsRuntime(runtimeResp.runtime || {})
        setAdHocMounts(runtimeResp.ad_hoc || [])
      } else {
        setMountPointsRuntime({})
        setAdHocMounts([])
      }
    } catch (error) {
      console.error("Error fetching LXC mount points:", error)
      if (!hasSeed) setMountPoints([])
      setAdHocMounts([])
    } finally {
      setLoadingMounts(false)
    }
  }

  const handleMetricsClick = () => {
    setCurrentView("metrics")
  }

  const handleBackToMain = () => {
    setCurrentView("main")
  }

  // Backup functions
  const fetchBackupStorages = async () => {
    try {
      const response = await fetchApi("/api/backup-storages")
      if (response.storages) {
        setBackupStorages(response.storages)
        if (response.storages.length > 0 && !selectedBackupStorage) {
          setSelectedBackupStorage(response.storages[0].storage)
        }
      }
    } catch (error) {
      console.error("Error fetching backup storages:", error)
    }
  }

  const fetchVmBackups = async (vmid: number) => {
    // Stale-while-revalidate with a 6-hour freshness gate.
    //
    // 1. If we already have backups (bulk hydration or a previous
    //    open), show them IMMEDIATELY — no spinner. React diffs by
    //    volid so the list never blanks; new backups slide in at
    //    the top when the fresh payload arrives (sorted newest-first
    //    server-side).
    // 2. If the local cache is older than 6 h, add `?fresh=1` on
    //    the wire so the server bypasses its indefinite cache and
    //    re-scans every storage. Otherwise the server hands back
    //    the cached snapshot instantly. This is the operator's
    //    accepted lag for out-of-band backups (cron / scheduled /
    //    PBS retention) that don't invalidate our cache.
    // 3. Loading spinner only on the true first load.
    const GATE_MS = 6 * 60 * 60 * 1000
    const seed = vmModalCacheRef.current.backups.get(vmid)
    const isStale = !seed || (Date.now() - seed.fetchedAt) > GATE_MS
    if (!seed) setLoadingBackups(true)
    try {
      const url = isStale
        ? `/api/vms/${vmid}/backups?fresh=1`
        : `/api/vms/${vmid}/backups`
      const response = await fetchApi<{ backups?: VMBackup[] }>(url)
      if (response.backups) {
        setVmBackups(response.backups)
        vmModalCacheRef.current.backups.set(vmid, { backups: response.backups, fetchedAt: Date.now() })
      }
    } catch (error) {
      console.error("Error fetching VM backups:", error)
      // Only clear the visible list if we had nothing to show
      // in the first place — a transient network hiccup must not
      // wipe the stale-but-useful view the user is looking at.
      if (!seed) setVmBackups([])
    } finally {
      if (!seed) setLoadingBackups(false)
    }
  }

  // Firewall log fetcher — proxies the PVE per-VM/CT firewall log
  // endpoint. The backend returns `firewall_enabled: false` when PVE
  // says the firewall is OFF for that guest; in that case we render
  // a callout instead of an empty viewer.
  const fetchFirewallLog = async (vmid: number) => {
    // Seed from ref cache so tab-switching to Firewall doesn't flash
    // "Loading…" when the payload was already prefetched. Backend
    // revalidates on top so a fresh log line lands on the next poll.
    const seed = vmModalCacheRef.current.firewall.get(vmid)
    if (seed) {
      setFirewallEnabled(seed.firewall_enabled !== false)
      setFirewallLogs(Array.isArray(seed.logs) ? seed.logs : [])
      if (seed.error && seed.firewall_enabled !== false) {
        setFirewallLogError(seed.error)
      } else {
        setFirewallLogError(null)
      }
    }
    setLoadingFirewallLog(!seed)
    if (!seed) setFirewallLogError(null)
    try {
      const response = await fetchApi<{
        logs?: FirewallLogEntry[]
        firewall_enabled?: boolean
        error?: string
      }>(`/api/vms/${vmid}/firewall/log?limit=500`)
      vmModalCacheRef.current.firewall.set(vmid, response)
      setFirewallEnabled(response.firewall_enabled !== false)
      setFirewallLogs(Array.isArray(response.logs) ? response.logs : [])
      if (response.error && response.firewall_enabled !== false) {
        setFirewallLogError(response.error)
      } else {
        setFirewallLogError(null)
      }
    } catch (error) {
      if (!seed) {
        setFirewallEnabled(true)
        setFirewallLogs([])
        setFirewallLogError(error instanceof Error ? error.message : String(error))
      }
    } finally {
      setLoadingFirewallLog(false)
    }
  }

  const openBackupModal = () => {
    // Reset modal to defaults
    setBackupMode("snapshot")
    setBackupProtected(false)
    setBackupNotification("auto")
    setBackupNotes("{{guestname}}")
    setBackupPbsChangeMode("default")
    // Auto-select first storage if none selected
    if (!selectedBackupStorage && backupStorages.length > 0) {
      setSelectedBackupStorage(backupStorages[0].storage)
    }
    setShowBackupModal(true)
  }

  const handleCreateBackup = async () => {
    if (!selectedVM || !selectedBackupStorage) return
    
    setCreatingBackup(true)
    setShowBackupModal(false)
    
    try {
      await fetchApi(`/api/vms/${selectedVM.vmid}/backup`, {
        method: "POST",
        body: JSON.stringify({
          storage: selectedBackupStorage,
          mode: backupMode,
          compress: "zstd",
          protected: backupProtected,
          notification: backupNotification,
          notes: backupNotes,
          pbs_change_detection: backupPbsChangeMode
        }),
      })
      setTimeout(() => fetchVmBackups(selectedVM.vmid), 2000)
    } catch (error) {
      console.error("Error creating backup:", error)
      // Surface the failure to the user. Previous behaviour silently swallowed
      // backend errors so the user thought the backup started fine; in reality
      // the request had 4xx/5xx'd and nothing was scheduled.
      const msg = error instanceof Error ? error.message : t("vmLxc.errors.unknown")
      alert(t("vmLxc.errors.backupStartFailed", { message: msg }))
    } finally {
      setCreatingBackup(false)
    }
  }

  const handleCancelResourcesEdit = () => {
    setPendingOnboot(null)
    setPendingTags(null)
    setNewTagDraft("")
    setEditingTagIndex(null)
    setEditingTagDraft("")
    setResourcesEditMode(false)
  }

  const handleSaveResources = async () => {
    if (!selectedVM) return
    const currentOnboot = !!vmDetails?.config?.onboot
    const currentTags = parseTags(selectedVM.tags)
    // Build the smallest payload that reflects real changes — the
    // backend allow-list accepts onboot + tags together in one call.
    const payload: Record<string, unknown> = {}
    if (pendingOnboot !== null && pendingOnboot !== currentOnboot) {
      payload.onboot = pendingOnboot ? 1 : 0
    }
    if (pendingTags !== null && stringifyTags(pendingTags) !== stringifyTags(currentTags)) {
      payload.tags = pendingTags
    }
    if (Object.keys(payload).length === 0) {
      handleCancelResourcesEdit()
      return
    }
    setSavingOnboot(true)
    try {
      await fetchApi(`/api/vms/${selectedVM.vmid}/config`, {
        method: "POST",
        body: JSON.stringify(payload),
      })
      // Optimistic local reflect so the UI doesn't wait a poll cycle.
      if (payload.onboot !== undefined) {
        setVMDetails((prev) => (prev ? { ...prev, config: { ...prev.config, onboot: payload.onboot as number } } : prev))
      }
      if (payload.tags !== undefined) {
        const nextTagsStr = stringifyTags(payload.tags as string[])
        setSelectedVM((prev) => (prev ? { ...prev, tags: nextTagsStr } : prev))
      }
      vmModalCacheRef.current.details.delete(selectedVM.vmid)
      // Trigger a natural /api/vms revalidation so tags flow into the
      // list card too without waiting up to 2.5 s.
      void mutate()
      setPendingOnboot(null)
      setPendingTags(null)
      setNewTagDraft("")
      setEditingTagIndex(null)
      setEditingTagDraft("")
      setResourcesEditMode(false)
      setSavedOnboot(true)
      setTimeout(() => setSavedOnboot(false), 2000)
    } catch (err) {
      console.error("Failed to update resources:", err)
    } finally {
      setSavingOnboot(false)
    }
  }

  const handleVMControl = async (vmid: number, action: string) => {
    setControlLoading(true)
    try {
      await fetchApi(`/api/vms/${vmid}/control`, {
        method: "POST",
        body: JSON.stringify({ action }),
      })

      // Any control action can change what the guest reports: a stop
      // hides runtime-only fields, a start may bring a new config that
      // the user edited on the Proxmox UI while the guest was down,
      // and a reboot re-runs LXC init which can change installed
      // versions of tracked apps. Drop every local + shared cache for
      // this vmid so the next open pulls a fresh scan across all tabs.
      const cache = vmModalCacheRef.current
      cache.details.delete(vmid)
      cache.backups.delete(vmid)
      cache.mountPoints.delete(vmid)
      cache.schedule.delete(vmid)
      cache.firewall.delete(vmid)
      invalidateLxcApps(vmid)

      mutate()
      setSelectedVM(null)
      setVMDetails(null)
    } catch (error) {
      console.error(`Failed to ${action} VM ${vmid}:`, error)
      // Same UX issue as handleCreateBackup: a silent console.error left the
      // user looking at a "Stop"/"Start" button that just never reacted.
      const msg = error instanceof Error ? error.message : t("vmLxc.errors.unknown")
      alert(t("vmLxc.errors.controlFailed", { action, vmid, message: msg }))
    } finally {
      setControlLoading(false)
    }
  }

  // Open terminal for LXC container
  const openLxcTerminal = (vmid: number, vmName: string) => {
    setTerminalVmid(vmid)
    setTerminalVmName(vmName)
    setTerminalOpen(true)
  }
  
const handleDownloadLogs = async (vmid: number, vmName: string) => {
    try {
      const data = await fetchApi(`/api/vms/${vmid}/logs`)

      // Format logs as plain text
      let logText = `=== ${t("vmLxc.logs.header", { name: vmName, vmid })} ===\n`
      logText += `${t("vmLxc.logs.node")}: ${data.node}\n`
      logText += `${t("vmLxc.logs.type")}: ${data.type}\n`
      logText += `${t("vmLxc.logs.totalLines")}: ${data.log_lines}\n`
      logText += `${t("vmLxc.logs.generated")}: ${new Date().toISOString()}\n`
      logText += `\n${"=".repeat(80)}\n\n`

      if (data.logs && Array.isArray(data.logs)) {
        data.logs.forEach((log: any) => {
          if (typeof log === "object" && log.t) {
            logText += `${log.t}\n`
          } else if (typeof log === "string") {
            logText += `${log}\n`
          }
        })
      }

      const blob = new Blob([logText], { type: "text/plain" })
      const url = URL.createObjectURL(blob)
      const a = document.createElement("a")
      a.href = url
      a.download = `${vmName}-${vmid}-logs.txt`
      a.click()
      URL.revokeObjectURL(url)
    } catch (error) {
      console.error("Error downloading logs:", error)
    }
  }

  const getStatusColor = (status: string) => {
    switch (status) {
      case "running":
        return "bg-green-500/10 text-green-500 border-green-500/20"
      case "stopped":
        return "bg-red-500/10 text-red-500 border-red-500/20"
      default:
        return "bg-yellow-500/10 text-yellow-500 border-yellow-500/20"
    }
  }

  const getStatusIcon = (status: string) => {
    switch (status) {
      case "running":
        return <Play className="h-3 w-3" />
      case "stopped":
        return <Square className="h-3 w-3" />
      default:
        return null
    }
  }

  const getStatusLabel = (status: string, uppercase = true) => {
    const label =
      status === "running"
        ? t("vmLxc.running")
        : status === "stopped"
        ? t("vmLxc.stopped")
        : status
    return uppercase ? label.toUpperCase() : label
  }

  const getTypeBadge = (type: string) => {
    if (type === "lxc") {
      return {
        color: "bg-cyan-500/10 text-cyan-500 border-cyan-500/20",
        label: "LXC",
        icon: <Container className="h-3 w-3 mr-1" />,
      }
    }
    return {
      color: "bg-purple-500/10 text-purple-500 border-purple-500/20",
      label: "VM",
      icon: <Server className="h-3 w-3 mr-1" />,
    }
  }

  // Ensure vmData is always an array (backend may return object on error)
  const safeVMData = Array.isArray(vmData) ? vmData : []

  // Status filter for the "Virtual Machines & Containers" list. Persisted
  // to localStorage so a reload keeps the operator's last view.
  const [statusFilter, setStatusFilter] = useState<"all" | "running" | "stopped">(() => {
    if (typeof window === "undefined") return "all"
    const stored = window.localStorage.getItem("proxmenux.vmListFilter")
    return stored === "running" || stored === "stopped" ? stored : "all"
  })
  useEffect(() => {
    if (typeof window !== "undefined") {
      window.localStorage.setItem("proxmenux.vmListFilter", statusFilter)
    }
  }, [statusFilter])

  const statusCounts = useMemo(() => ({
    all: safeVMData.length,
    running: safeVMData.filter((vm) => vm.status === "running").length,
    stopped: safeVMData.filter((vm) => vm.status === "stopped").length,
  }), [safeVMData])

  const filteredVMs = useMemo(() => {
    if (statusFilter === "all") return safeVMData
    return safeVMData.filter((vm) => vm.status === statusFilter)
  }, [safeVMData, statusFilter])

  // ── LXC update apply flow (Phase 2a/b) ────────────────────────────
  // Users pick a target (OS, App, both) + backup / restart options,
  // click Apply, and the ScriptTerminalModal streams the apply run.
  // The backend owns finalization from the real process exit; the browser
  // callback below is an idempotent compatibility signal and immediate UI
  // revalidation, not the source of truth for notifications.
  const [applyOpen, setApplyOpen] = useState(false)
  const [applyVmid, setApplyVmid] = useState<number | null>(null)
  const [applyTarget, setApplyTarget] = useState<"os" | "app" | "both">("os")
  // Opt-in, not opt-out. Snapshot backups take time and disk, and
  // for most routine apt updates the user doesn't want to trigger
  // a vzdump — should be a deliberate choice. If a persisted schedule
  // has `backup: true` (Options card), that value overrides this
  // default when the modal opens.
  const [applyBackup, setApplyBackup] = useState(false)
  const [applyBackupStorage, setApplyBackupStorage] = useState<string>("")
  const [applyRestart, setApplyRestart] = useState(false)
  const [applyStartedAt, setApplyStartedAt] = useState<number>(0)
  const [applyRunId, setApplyRunId] = useState<string>("")
  const [applyTargetIds, setApplyTargetIds] = useState<string[]>([])
  const [applyTargetLabels, setApplyTargetLabels] = useState<string[]>([])
  // Extra state carried alongside applyTarget when the App branch is
  // driven by a user-defined `update_command` on a specific registered
  // app (not the CT-wide /usr/bin/update). Passed to the terminal
  // script as UPDATE_COMMAND. A custom command always replaces the
  // Helper-Scripts updater for that application.
  const [applyUpdateCommand, setApplyUpdateCommand] = useState<string>("")
  const [applyAppName, setApplyAppName] = useState<string>("")
  const [applyRunHelper, setApplyRunHelper] = useState(false)
  const [applyAllowHelperWithCustom, setApplyAllowHelperWithCustom] = useState(false)
  const [applyDockerStandaloneTargets, setApplyDockerStandaloneTargets] = useState<string>("")
  const [applyDockerEngine, setApplyDockerEngine] = useState(false)
  const [applyDockerRefresh, setApplyDockerRefresh] = useState(false)

  // Updates tab — inline custom-command editor state. Keyed on app.id
  // so the user can open one editor at a time; opening a second closes
  // the first (kept in localState because there's never a need to edit
  // two at once). `showHiddenNotices` opts back into displaying the
  // Case-3a "no method" cards the user previously dismissed.
  const [customCmdEditingApp, setCustomCmdEditingApp] = useState<string | null>(null)
  const [customCmdDraft, setCustomCmdDraft] = useState<string>("")
  const [customCmdSaving, setCustomCmdSaving] = useState(false)
  const [showHiddenNotices, setShowHiddenNotices] = useState(false)

  const canonicalHelperUpdateCommand = (slug?: string | null) => {
    const cleanSlug = (slug || "").trim()
    if (!/^[A-Za-z0-9._-]+$/.test(cleanSlug)) return ""
    return `PHS_SILENT=1 bash -c "$(curl -fsSL https://raw.githubusercontent.com/community-scripts/ProxmoxVE/main/ct/${cleanSlug}.sh)"`
  }

  // Docker Engine is updated by a protected host-side runner rather
  // than by an arbitrary command inside the CT. Surface the exact
  // command in the same editor used by every other app, but recognise
  // this canonical value as the integrated method if it is saved.
  const canonicalDockerEngineUpdateCommand = 'python3 /usr/local/share/proxmenux/monitor-app/usr/bin/update_docker_engine.py --vmid "$VMID"'

  const openCustomCmdEditor = (app: LxcAppWatch, initialCommand = "") => {
    setCustomCmdEditingApp(app.id)
    setCustomCmdDraft(app.update_command || initialCommand)
  }

  // ── Options card unified state ──────────────────────────────────
  // Single source of truth for apply preferences (backup + restart)
  // used by BOTH the manual "Apply update" buttons AND the scheduled
  // runs — persisted per-CT in the sidecar's schedule object. Also
  // holds the schedule config itself and any external host cron
  // detected via the community-scripts pattern. All loaded once when
  // the user opens the Updates tab of a specific LXC.
  const [scheduleLoaded, setScheduleLoaded] = useState<number | null>(null)
  const [scheduleEnabled, setScheduleEnabled] = useState(false)
  const [scheduleCron, setScheduleCron] = useState("0 3 * * *")
  const [schedulePreset, setSchedulePreset] = useState<string>("daily-3am")
  const [scheduleTarget, setScheduleTarget] = useState<"os" | "app" | "both">("both")
  const [scheduleTargets, setScheduleTargets] = useState<string[]>(["os", "apps"])
  const [scheduleReleaseDelayDays, setScheduleReleaseDelayDays] = useState(0)
  const [scheduleLastRunAt, setScheduleLastRunAt] = useState<string | null>(null)
  const [scheduleLastRunStatus, setScheduleLastRunStatus] = useState<string | null>(null)
  const [scheduleLastRunReason, setScheduleLastRunReason] = useState<string | null>(null)
  const [scheduleSaving, setScheduleSaving] = useState(false)
  const [scheduleError, setScheduleError] = useState<string | null>(null)
  const [externalCron, setExternalCron] = useState<{
    source: string
    cron_line: string
    cron: string
    human_schedule: string
    type: string
    variant?: string
    scope?: string
  } | null>(null)
  // True when the server returned a schedule with a non-empty `cron`
  // field — lets the view mode distinguish "configured but disabled"
  // (Switch is off but a schedule exists) from "nothing scheduled".
  const [scheduleConfigured, setScheduleConfigured] = useState(false)
  // Options card edit-mode toggle. View mode shows persisted config
  // read-only; edit mode swaps to the sunken-input pattern per the
  // global card-contrast rule (see project memory).
  const [optionsEditMode, setOptionsEditMode] = useState(false)
  // Snapshot of state at the moment Edit is entered so Cancel can
  // fully restore. Save wipes it after PUTting.
  const [optionsSnapshot, setOptionsSnapshot] = useState<any>(null)

  // Reusable manual bulk update. This intentionally does not share state
  // with scheduled updates: changing a one-click manual selection must never
  // rewrite the cron automation configured in Options.
  const [bulkLoaded, setBulkLoaded] = useState<number | null>(null)
  const [bulkConfigured, setBulkConfigured] = useState(false)
  const [bulkTargets, setBulkTargets] = useState<string[]>(["os"])
  const [bulkPersistedTargets, setBulkPersistedTargets] = useState<string[]>(["os"])
  const [bulkEditMode, setBulkEditMode] = useState(false)
  const [bulkSaving, setBulkSaving] = useState(false)
  const [bulkApplying, setBulkApplying] = useState(false)
  const [bulkError, setBulkError] = useState<string | null>(null)

  // Cron presets — every entry maps a friendly label to a real
  // 5-field cron expression the backend parser accepts. Order + slugs
  // stable so the Select value round-trips a saved schedule.
  const CRON_PRESETS: { value: string; label: string; cron: string }[] = [
    { value: "hourly", label: t("vmLxc.cronPresets.hourly"), cron: "0 * * * *" },
    { value: "daily-3am", label: t("vmLxc.cronPresets.dailyAt3"), cron: "0 3 * * *" },
    { value: "daily-noon", label: t("vmLxc.cronPresets.dailyAtNoon"), cron: "0 12 * * *" },
    { value: "weekly-sun-3am", label: t("vmLxc.cronPresets.weeklySun3"), cron: "0 3 * * 0" },
    { value: "monthly-1st-3am", label: t("vmLxc.cronPresets.monthly1st3"), cron: "0 3 1 * *" },
    { value: "custom", label: t("vmLxc.cronPresets.custom"), cron: "" },
  ]

  const applySchedulePayload = (s: any) => {
    if (!s || typeof s !== "object") return
    setScheduleEnabled(!!s.enabled)
    setScheduleConfigured(!!s.cron)
    const cron = s.cron || "0 3 * * *"
    setScheduleCron(cron)
    const matched = CRON_PRESETS.find((p) => p.value !== "custom" && p.cron === cron)
    setSchedulePreset(matched ? matched.value : "custom")
    const legacyTarget = (s.target || "both") as "os" | "app" | "both"
    setScheduleTarget(legacyTarget)
    setScheduleTargets(Array.isArray(s.targets) && s.targets.length
      ? s.targets.map((value: any) => String(value))
      : ([...(legacyTarget !== "app" ? ["os"] : []), ...(legacyTarget !== "os" ? ["apps"] : [])]))
    setScheduleReleaseDelayDays(Number.isInteger(Number(s.release_delay_days)) ? Number(s.release_delay_days) : 0)
    if (s.backup !== undefined) setApplyBackup(!!s.backup)
    if (s.backup_storage) setApplyBackupStorage(s.backup_storage)
    if (s.restart !== undefined) setApplyRestart(!!s.restart)
    setScheduleLastRunAt(s.last_run_at || null)
    setScheduleLastRunStatus(s.last_run_status || null)
    setScheduleLastRunReason(s.last_run_reason || null)
    setExternalCron(s.external_cron || null)
  }

  const loadSchedule = async (vmid: number) => {
    setScheduleError(null)
    // Seed from ref cache so tab-switching to Updates isn't a "Loading…"
    // moment when the payload was already fetched this session.
    const cachedSched = vmModalCacheRef.current.schedule.get(vmid)
    if (cachedSched) applySchedulePayload(cachedSched)
    try {
      const s: any = await fetchApi(`/api/vms/${vmid}/schedule`)
      if (s && typeof s === "object") {
        vmModalCacheRef.current.schedule.set(vmid, s)
        applySchedulePayload(s)
      }
    } catch (e: any) {
      setScheduleError(e?.message || "Could not load schedule")
    } finally {
      setScheduleLoaded(vmid)
    }
  }

  const loadBulkUpdate = async (vmid: number) => {
    setBulkError(null)
    setBulkLoaded(null)
    setBulkEditMode(false)
    try {
      const config: any = await fetchApi(`/api/vms/${vmid}/bulk-update`)
      const targets = Array.isArray(config?.targets)
        ? Array.from(new Set(config.targets.map((value: any) => String(value)))) as string[]
        : []
      const configured = targets.includes("os") && targets.some((value) => value !== "os")
      const next = configured ? targets : ["os"]
      setBulkConfigured(configured)
      setBulkTargets(next)
      setBulkPersistedTargets(next)
    } catch (e: any) {
      setBulkConfigured(false)
      setBulkTargets(["os"])
      setBulkPersistedTargets(["os"])
      setBulkError(e?.message || "Could not load bulk update")
    } finally {
      setBulkLoaded(vmid)
    }
  }

  const saveBulkUpdate = async (vmid: number) => {
    setBulkSaving(true)
    setBulkError(null)
    try {
      const config: any = await fetchApi(`/api/vms/${vmid}/bulk-update`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ targets: bulkTargets }),
      })
      const targets = Array.isArray(config?.targets)
        ? config.targets.map((value: any) => String(value))
        : bulkTargets
      setBulkTargets(targets)
      setBulkPersistedTargets(targets)
      setBulkConfigured(true)
      setBulkEditMode(false)
    } catch (e: any) {
      setBulkError(e?.message || t("vmLxc.bulkUpdate.saveFailed"))
    } finally {
      setBulkSaving(false)
    }
  }

  const deleteBulkUpdate = async (vmid: number) => {
    if (!confirm(t("vmLxc.bulkUpdate.deleteConfirm"))) return
    setBulkSaving(true)
    setBulkError(null)
    try {
      await fetchApi(`/api/vms/${vmid}/bulk-update`, { method: "DELETE" })
      setBulkTargets(["os"])
      setBulkPersistedTargets(["os"])
      setBulkConfigured(false)
      setBulkEditMode(false)
    } catch (e: any) {
      setBulkError(e?.message || t("vmLxc.bulkUpdate.deleteFailed"))
    } finally {
      setBulkSaving(false)
    }
  }

  const applyBulkUpdate = async (vmid: number) => {
    setBulkApplying(true)
    setBulkError(null)
    try {
      const plan: any = await fetchApi(`/api/vms/${vmid}/bulk-update/plan`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: "{}",
      })
      openApplyTerminal(vmid, "both", {
        updateCommand: plan.update_command || "",
        appName: plan.app_name || "",
        runHelper: plan.run_helper === true,
        allowHelperWithCustom: plan.allow_helper_with_custom === true,
        dockerStandaloneTargets: Array.isArray(plan.docker_standalone_targets)
          ? plan.docker_standalone_targets
          : [],
        dockerEngine: plan.update_docker_engine === true,
        dockerRefresh: plan.refresh_docker_inventory === true,
        targetIds: Array.isArray(plan.targets) ? plan.targets : [],
        targetLabels: Array.isArray(plan.labels) ? plan.labels : [],
      })
    } catch (e: any) {
      setBulkError(e?.message || t("vmLxc.bulkUpdate.planFailed"))
    } finally {
      setBulkApplying(false)
    }
  }

  const saveSchedule = async (vmid: number) => {
    setScheduleSaving(true)
    setScheduleError(null)
    // Only persist a cron when the user actually wants a schedule.
    // Prevents the delete-then-save recreation bug: after Delete we
    // leave scheduleConfigured=false and Save PUTs cron="" so the
    // backend doesn't resurrect the schedule.
    const cronToSave = scheduleEnabled || scheduleConfigured ? scheduleCron : ""
    const hasOsTarget = scheduleTargets.includes("os")
    const hasAppTarget = scheduleTargets.some((value) => value !== "os")
    const derivedTarget: "os" | "app" | "both" = hasOsTarget && hasAppTarget ? "both" : hasOsTarget ? "os" : "app"
    try {
      await fetchApi(`/api/vms/${vmid}/schedule`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          enabled: scheduleEnabled,
          cron: cronToSave,
          target: derivedTarget,
          targets: scheduleTargets,
          release_delay_days: scheduleReleaseDelayDays,
          backup: applyBackup,
          backup_storage: applyBackupStorage || selectedBackupStorage || "",
          restart: applyRestart,
        }),
      })
      if (cronToSave.trim()) setScheduleConfigured(true)
    } catch (e: any) {
      setScheduleError(e?.message || "Save failed")
    } finally {
      setScheduleSaving(false)
    }
  }

  const enterOptionsEdit = () => {
    setOptionsSnapshot({
      backup: applyBackup,
      backup_storage: applyBackupStorage,
      restart: applyRestart,
      scheduleEnabled: scheduleEnabled,
      scheduleCron: scheduleCron,
      schedulePreset: schedulePreset,
      scheduleTarget: scheduleTarget,
      scheduleTargets: [...scheduleTargets],
      scheduleReleaseDelayDays: scheduleReleaseDelayDays,
    })
    setOptionsEditMode(true)
  }
  const cancelOptionsEdit = () => {
    if (optionsSnapshot) {
      setApplyBackup(optionsSnapshot.backup)
      setApplyBackupStorage(optionsSnapshot.backup_storage)
      setApplyRestart(optionsSnapshot.restart)
      setScheduleEnabled(optionsSnapshot.scheduleEnabled)
      setScheduleCron(optionsSnapshot.scheduleCron)
      setSchedulePreset(optionsSnapshot.schedulePreset)
      setScheduleTarget(optionsSnapshot.scheduleTarget)
      setScheduleTargets(optionsSnapshot.scheduleTargets || ["os", "apps"])
      setScheduleReleaseDelayDays(optionsSnapshot.scheduleReleaseDelayDays)
    }
    setOptionsSnapshot(null)
    setOptionsEditMode(false)
  }
  const saveOptionsEdit = async () => {
    if (!selectedVM) return
    await saveSchedule(selectedVM.vmid)
    setOptionsSnapshot(null)
    setOptionsEditMode(false)
  }
  const deleteScheduleFromOptions = async () => {
    if (!selectedVM) return
    if (!confirm(t("vmLxc.scheduled.deleteConfirm"))) return
    setScheduleSaving(true)
    try {
      await fetchApi(`/api/vms/${selectedVM.vmid}/schedule`, { method: "DELETE" })
      setScheduleEnabled(false)
      setScheduleConfigured(false)
      setScheduleCron("0 3 * * *")
      setSchedulePreset("daily-3am")
      setScheduleLastRunAt(null)
      setScheduleLastRunStatus(null)
      setScheduleLastRunReason(null)
      setScheduleReleaseDelayDays(0)
    } catch (e: any) {
      setScheduleError(e?.message || "Delete failed")
    } finally {
      setScheduleSaving(false)
    }
  }

  // Turn a 5-field cron into a plain-English label — mirrors the
  // backend's _humanise_cron so view mode matches the picker's
  // preset labels.
  const humanCron = (expr: string): string => {
    if (!expr) return ""
    const parts = expr.trim().split(/\s+/)
    if (parts.length !== 5) return expr
    const [m, h, d, mo, w] = parts
    const hhmm = () => {
      const hn = parseInt(h, 10), mn = parseInt(m, 10)
      if (isNaN(hn) || isNaN(mn)) return `${h}:${m}`
      return `${String(hn).padStart(2, "0")}:${String(mn).padStart(2, "0")}`
    }
    if (d === "*" && mo === "*" && w === "*" && /^\d+$/.test(m) && /^\d+$/.test(h)) return `Daily at ${hhmm()}`
    if (d === "*" && mo === "*" && /^\d+$/.test(w) && /^\d+$/.test(m) && /^\d+$/.test(h)) {
      const wdays = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
      const wn = parseInt(w, 10)
      const wname = (wn >= 0 && wn <= 6) ? wdays[wn] : w
      return `Weekly (${wname} ${hhmm()})`
    }
    if (mo === "*" && w === "*" && /^\d+$/.test(d) && /^\d+$/.test(m) && /^\d+$/.test(h)) return `Monthly (day ${parseInt(d, 10)} at ${hhmm()})`
    if (h === "*" && d === "*" && mo === "*" && w === "*" && m === "0") return "Hourly"
    return expr
  }

  // Load the schedule once whenever the user opens the Updates tab
  // of a specific LXC. Keying on vmid keeps us from re-fetching on
  // every render but also refetches after switching CTs.
  useEffect(() => {
    if (activeModalTab !== "updates") return
    if (!selectedVM || selectedVM.type !== "lxc") return
    if (scheduleLoaded !== selectedVM.vmid) loadSchedule(selectedVM.vmid)
    if (bulkLoaded !== selectedVM.vmid) loadBulkUpdate(selectedVM.vmid)
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [activeModalTab, selectedVM?.vmid])

  // Docker drift is opt-in: read it only after Docker has been registered and
  // only when the user opens Updates. This request deliberately DOES NOT use
  // force=1: the process-memory inventory belongs to the startup/lifecycle and
  // daily rolling collectors. A normal open consumes that value; if a backend
  // restart briefly leaves the browser ahead of the new process cache, allow a
  // bounded retry instead of permanently marking this CT as already requested.
  useEffect(() => {
    if (activeModalTab !== "updates" || !selectedVM || selectedVM.type !== "lxc") return
    const registered = (selectedVM.app_watches || []).some((app) => app.helper_slug === "docker")
    if (!registered || selectedVM.docker_inventory?.available) return
    const lastRequest = dockerInventoryRequestedRef.current.get(selectedVM.vmid) || 0
    if (Date.now() - lastRequest < 30_000) return
    dockerInventoryRequestedRef.current.set(selectedVM.vmid, Date.now())
    fetchApi(`/api/vms/${selectedVM.vmid}/docker/inventory`)
      .then(() => mutate())
      .catch(() => dockerInventoryRequestedRef.current.delete(selectedVM.vmid))
  }, [activeModalTab, selectedVM?.vmid, selectedVM?.app_watches, selectedVM?.docker_inventory, mutate])
  const refreshDockerInventory = async (vmid: number) => {
    setDockerInventoryRefreshingVmid(vmid)
    try {
      const inventory = await fetchApi<LxcDockerInventory>(
        `/api/vms/${vmid}/docker/inventory?force=1`,
      )
      // The force endpoint already returns the complete authoritative Docker
      // snapshot. Publish it directly into SWR and the open modal instead of
      // waiting for an unrelated full /api/vms revalidation. Lifecycle app
      // discovery can still be running after a restore; it must never keep
      // this button spinning once the Docker comparison itself has finished.
      await mutate(
        (current) => Array.isArray(current)
          ? current.map((vm) => vm.vmid === vmid
            ? { ...vm, docker_inventory: inventory }
            : vm)
          : current,
        { revalidate: false },
      )
      setSelectedVM((current) => current?.vmid === vmid
        ? { ...current, docker_inventory: inventory }
        : current)
    } catch (error) {
      console.error(`Failed to refresh Docker inventory for CT ${vmid}:`, error)
    } finally {
      setDockerInventoryRefreshingVmid(null)
    }
  }
  const closeCustomCmdEditor = () => {
    setCustomCmdEditingApp(null)
    setCustomCmdDraft("")
  }
  // Persists a partial update to /api/vms/<vmid>/apps/<app_id>. The
  // update_app validator on the backend performs a full-config
  // replace, so we hydrate the current app payload with the patch
  // before PUTting to preserve every other field the user set.
  const patchAppWatch = async (
    vmid: number,
    app: LxcAppWatch,
    patch: Record<string, any>,
  ) => {
    // Fetch the full current config for this app so we can echo it
    // back with the patch applied — the backend replaces the whole
    // record and would drop any field we omitted.
    const full: any = await fetchApi(`/api/vms/${vmid}/apps`)
    const current = (full?.apps || []).find((a: any) => a.id === app.id)
    if (!current) throw new Error("app not found in sidecar")
    const { id: _id, state: _state, created_at: _created, ...rest } = current
    const payload = { ...rest, ...patch }
    const updated: any = await fetchApi(`/api/vms/${vmid}/apps/${app.id}`, {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(payload),
    })
    // The PUT response is the complete sidecar.  Publish it directly
    // instead of evicting newer data and forcing the App tab through a
    // cold-loading state when the user switches tabs.
    setLxcAppsCached(vmid, updated)
    mutate()
  }
  const saveCustomCommand = async (vmid: number, app: LxcAppWatch) => {
    setCustomCmdSaving(true)
    try {
      await patchAppWatch(vmid, app, {
        update_command: customCmdDraft.trim(),
        // Saving a command implicitly re-enables the notice (moot —
        // the notice only shows when there is no command).
        hide_no_updater_notice: false,
      })
      closeCustomCmdEditor()
    } catch (e) {
      alert(`Could not save custom command: ${(e as any)?.message || e}`)
    } finally {
      setCustomCmdSaving(false)
    }
  }
  const removeCustomCommand = async (vmid: number, app: LxcAppWatch) => {
    if (!confirm(`Remove the custom update command for "${app.name}"?`)) return
    setCustomCmdSaving(true)
    try {
      await patchAppWatch(vmid, app, { update_command: "" })
      closeCustomCmdEditor()
    } catch (e) {
      alert(`Could not remove custom command: ${(e as any)?.message || e}`)
    } finally {
      setCustomCmdSaving(false)
    }
  }
  const hideNoUpdaterNotice = async (vmid: number, app: LxcAppWatch) => {
    try {
      await patchAppWatch(vmid, app, { hide_no_updater_notice: true })
    } catch (e) {
      alert(`Could not hide notice: ${(e as any)?.message || e}`)
    }
  }

  const openApplyTerminal = (
    vmid: number,
    target: "os" | "app" | "both",
    opts?: { updateCommand?: string; appName?: string; runHelper?: boolean; allowHelperWithCustom?: boolean; dockerStandaloneTargets?: string[]; dockerEngine?: boolean; dockerRefresh?: boolean; targetIds?: string[]; targetLabels?: string[] },
  ) => {
    const fallbackTargets = target === "os"
      ? ["os"]
      : target === "both"
        ? ["os", "apps"]
        : opts?.dockerEngine
          ? ["docker-engine"]
          : opts?.dockerStandaloneTargets?.length
            ? opts.dockerStandaloneTargets.map((name) => `docker-container:${name}`)
            : opts?.dockerRefresh
              ? ["docker-images"]
              : ["apps"]
    const fallbackLabels = target === "os"
      ? ["OS"]
      : target === "both"
        ? ["OS", "Applications"]
        : [opts?.appName || (opts?.dockerEngine ? "Docker Engine" : "Application")]
    const runId = typeof window !== "undefined" && typeof window.crypto?.randomUUID === "function"
      ? window.crypto.randomUUID()
      : `manual-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`
    setApplyVmid(vmid)
    setApplyTarget(target)
    setApplyRunId(runId)
    setApplyTargetIds(opts?.targetIds?.length ? opts.targetIds : fallbackTargets)
    setApplyTargetLabels(opts?.targetLabels?.length ? opts.targetLabels : fallbackLabels)
    setApplyUpdateCommand(opts?.updateCommand || "")
    setApplyAppName(opts?.appName || "")
    setApplyRunHelper(opts?.runHelper === true)
    setApplyAllowHelperWithCustom(opts?.allowHelperWithCustom === true)
    setApplyDockerStandaloneTargets((opts?.dockerStandaloneTargets || []).join(","))
    setApplyDockerEngine(opts?.dockerEngine === true)
    setApplyDockerRefresh(opts?.dockerRefresh === true || opts?.dockerEngine === true || !!opts?.dockerStandaloneTargets?.length)
    // Default storage to the same one the manual backup modal picked
    // (already resolved to the first vzdump-capable storage).
    if (!applyBackupStorage && selectedBackupStorage) {
      setApplyBackupStorage(selectedBackupStorage)
    } else if (!applyBackupStorage && backupStorages.length > 0) {
      setApplyBackupStorage(backupStorages[0].storage)
    }
    setApplyStartedAt(Date.now())
    setApplyOpen(true)
  }
  const handleApplyComplete = async (exitCode = 0) => {
    if (applyVmid == null) return
    const duration = Math.max(0, Math.round((Date.now() - applyStartedAt) / 1000))
    // The modal fires onComplete on any WS close (success or user cancel).
    // Report the same run ID so the backend can collapse this compatibility
    // callback with its authoritative process-completion hook.
    try {
      await fetchApi(`/api/lxc-updates/${applyVmid}/applied`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          success: exitCode === 0,
          run_id: applyRunId,
          target: applyTarget,
          requested_targets: applyTargetIds,
          target_labels: applyTargetLabels,
          duration_seconds: duration,
          ct_name: selectedVM?.name || `CT-${applyVmid}`,
          refresh_docker_inventory: applyDockerRefresh,
        }),
      })
    } catch {
      // Non-fatal — the backend process hook owns finalization.
    }
    // The apply ran an updater inside the CT which likely changed the
    // installed_version of tracked apps AND the OS-package snapshot.
    // Drop the host-derived caches so the next poll re-scans and the
    // "Update available" badge doesn't linger with stale data.
    // Without this, users had to close and reopen the whole Monitor
    // for the modal to reflect the post-update state.
    const c = vmModalCacheRef.current
    c.details.delete(applyVmid)
    c.schedule.delete(applyVmid)
    // Keep the last complete App bundle visible while a forced network
    // revalidation replaces it in the shared cache.  fetchLxcApps always
    // performs the requests (the data map is only a render seed), so no
    // invalidation is needed and there is no "Loading applications" flash.
    void fetchLxcApps(applyVmid)
    // Enter the "Comprobando resultado…" state on the Updates tab.
    // Baseline snapshot lets a downstream useEffect detect when the
    // SWR poll actually delivers the post-apply counts (as opposed
    // to seeing the same stale count still in flight). Was safe
    // before to skip this because the parent modal closed with the
    // terminal; now that we keep it open on purpose, the user would
    // otherwise be staring at "40 pending" right after applying.
    setUpdatesBaselineCount(selectedVM?.update_check?.count ?? 0)
    setUpdatesResult(null)
    setUpdatesRefreshing(true)
    // Force an immediate SWR revalidation instead of waiting up to
    // 2.5 s for the natural poll — the sooner the new counts land,
    // the sooner the banner appears. mutate() is safe now: the
    // parent Dialog's onOpenChange guard swallows any spurious close
    // events triggered by re-render cascades (see the Dialog guard
    // in the JSX below).
    void mutate()
  }

  // Render the "📦 N updates / 🛡 N security" badge next to an LXC in
  // the dashboard list. Used ONLY in the card row alongside Uptime —
  // the modal surfaces the same info via a dedicated tab instead of
  // duplicating a badge in its header.
  //
  // Sizing matches the sibling "Uptime: …" text (text-sm + h-4 icon)
  // so the row reads as a single visual unit. Colour is violet, the
  // shared accent for "managed updates" across notifications and UI
  // (mirrors the Secure Gateway visual treatment). Security count
  // stays red because it's still an urgency cue independent of the
  // update theme.
  // Aggregate updates counter (OS packages + registered apps that
  // aren't opted out of the badge). Returns an update_check-shaped
  // object so `renderLxcUpdateBadge` and the tab count can consume it
  // without knowing about app entries. The underlying `update_check`
  // stays strictly OS-only on the backend — the Updates tab's "OS
  // packages" section needs a clean `available`/`count` to avoid a
  // false "N package pending" every time a registered app has an
  // upstream bump.
  const getAggregateUpdateCheck = (vm: VMData): LxcUpdateCheck | undefined => {
    const uc = vm.update_check
    const appCount = (vm.app_watches || []).filter(
      (a) => a.update_available === true && !a.exclude_from_badge,
    ).length
    const dockerRegistered = (vm.app_watches || []).some((a) => a.helper_slug === "docker")
    const dockerCount = dockerRegistered ? (vm.docker_inventory?.update_count ?? 0) : 0
    const osCount = uc?.count ?? 0
    const total = osCount + appCount + dockerCount
    if (!uc && appCount === 0 && dockerCount === 0) return undefined
    if (total === 0) return uc
    return {
      ...(uc || {}),
      count: total,
      available: true,
      last_check: uc?.last_check ?? new Date().toISOString(),
    } as LxcUpdateCheck
  }

  const renderLxcUpdateBadge = (
    uc?: LxcUpdateCheck,
    compact = false,
    onClick?: () => void,
  ) => {
    if (!uc?.available || !uc.count || uc.count <= 0) return null
    const last = uc.last_check
      ? new Date(uc.last_check).toLocaleString()
      : "—"
    const topNames = (uc.packages || [])
      .slice(0, 5)
      .map((p) => p.name)
      .join(", ")
    const secHint =
      uc.security_count > 0 ? ` · ${uc.security_count} ${t("vmLxc.updatesPanel.security")}` : ""
    // Tooltip leads with the action when the badge is clickable so the
    // affordance is explicit on hover — the chevron at the end of the
    // badge reinforces the same signal visually for users who don't
    // hover (mobile).
    const tooltipPrefix = onClick ? `${t("vmLxc.updatesPanel.clickToView")} · ` : ""
    const tooltip = `${tooltipPrefix}${t("vmLxc.updatesPanel.lastChecked")} ${last}${secHint}${topNames ? ` · ${topNames}` : ""}`
    // Compact = mobile card; matches the surrounding 10-12px chrome
    // (ID line, type badge) so the count doesn't visually dominate.
    // Non-compact = desktop card row, sized to match "Uptime: ..." text.
    const sizing = compact
      ? "text-[11px] gap-1 px-1.5 py-0"
      : "text-sm gap-1.5 px-2 py-0.5"
    const iconSize = compact ? "h-3 w-3" : "h-4 w-4"
    // Only soften the bg on hover — no border change, no focus ring.
    // The chevron at the end of the badge carries the "open this"
    // affordance on its own. The Badge component's CVA base adds a
    // `focus:ring-2 focus:ring-ring focus:ring-offset-2` (the white
    // double border we kept seeing on tap/click) — explicitly cancel
    // every piece of it here.
    const clickable = onClick
      ? "cursor-pointer hover:bg-violet-500/20 transition-colors focus:outline-none focus:ring-0 focus:ring-offset-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0"
      : ""
    return (
      <Badge
        variant="outline"
        className={`bg-violet-500/10 text-violet-400 border-violet-500/30 flex items-center flex-shrink-0 ${sizing} ${clickable}`}
        title={tooltip}
        onClick={onClick}
        role={onClick ? "button" : undefined}
        tabIndex={onClick ? 0 : undefined}
      >
        {/* Icon-only badge: `↑` (ArrowUpCircle, same glyph as the
            Apply update buttons) + count. Dropped the "N updates" /
            "N update" text so we don't need to translate the label
            into every locale, and the badge takes less horizontal
            space — matters most on the LXC card row where uptime,
            IP and other chips compete for width. Count alone with
            the up-arrow reads unambiguously as "pending updates". */}
        <ArrowUpCircle className={iconSize} />
        {uc.count}
        {/* Chevron only when the badge is wired up as a clickable
            shortcut — its absence on the dashboard card avoids
            implying interactivity where there isn't any (the whole
            row is the click target there). */}
        {onClick && <ChevronRight className={`${iconSize} -mr-0.5 opacity-80`} />}
      </Badge>
    )
  }

  // App Watch badge (Phase 2c) — shown next to the update badge in
  // the header, and inline on the desktop card row. Three states:
  //   • up-to-date (installed==latest) → green filled
  //   • update available               → orange filled
  //   • no upstream check / no version → neutral outline
  // Clicking always opens the App tab.
  const renderLxcAppBadge = (
    aw?: LxcAppWatch | null,
    compact = false,
    onClick?: () => void,
  ) => {
    if (!aw?.name) return null
    const installed = aw.installed_version
    const hasUpdate = aw.update_available === true
    const upToDate = aw.update_available === false && !!installed
    const color = hasUpdate
      ? "bg-purple-600/15 text-purple-300 border-purple-500/40"
      : upToDate
        ? "bg-emerald-500/10 text-emerald-400 border-emerald-500/30"
        : "bg-muted text-muted-foreground border-border"
    const sizing = compact
      ? "text-[11px] gap-1 px-1.5 py-0"
      : "text-sm gap-1.5 px-2 py-0.5"
    const iconSize = compact ? "h-3 w-3" : "h-4 w-4"
    const clickable = onClick
      ? "cursor-pointer hover:brightness-125 transition-all focus:outline-none focus:ring-0"
      : ""
    const tooltipParts: string[] = []
    if (installed) tooltipParts.push(`Installed: ${installed}`)
    if (aw.latest_version) tooltipParts.push(`Latest: ${aw.latest_version}`)
    if (aw.checked_at) tooltipParts.push(`Checked: ${new Date(aw.checked_at).toLocaleString()}`)
    if (aw.error) tooltipParts.push(`Note: ${aw.error}`)
    const tooltip = (onClick ? "Click to open App tab · " : "") + tooltipParts.join(" · ")
    return (
      <Badge
        variant="outline"
        className={`flex items-center flex-shrink-0 ${sizing} ${color} ${clickable}`}
        title={tooltip}
        onClick={onClick}
        role={onClick ? "button" : undefined}
        tabIndex={onClick ? 0 : undefined}
      >
        <Package className={iconSize} />
        <span className="truncate max-w-[180px]">{aw.name}</span>
        {installed && <span className="font-mono opacity-80">{installed}</span>}
      </Badge>
    )
  }

  // Total allocated RAM for ALL VMs/LXCs (running + stopped)
  const totalAllocatedMemoryGB = useMemo(() => {
    return (safeVMData.reduce((sum, vm) => sum + (vm.maxmem || 0), 0) / 1024 ** 3).toFixed(1)
  }, [safeVMData])

  // Allocated RAM only for RUNNING VMs/LXCs (this is what actually matters for overcommit)
  const runningAllocatedMemoryGB = useMemo(() => {
    return (safeVMData
      .filter((vm) => vm.status === "running")
      .reduce((sum, vm) => sum + (vm.maxmem || 0), 0) / 1024 ** 3).toFixed(1)
  }, [safeVMData])

  const { data: systemData } = useSWR<{ memory_total: number; memory_used: number; memory_usage: number; cpu_cores?: number; cpu_threads?: number }>(
    "/api/system",
    fetcher,
    {
      refreshInterval: 37000,
      revalidateOnFocus: false,
    },
  )

  const physicalMemoryGB = systemData?.memory_total ?? null
  const usedMemoryGB = systemData?.memory_used ?? null
  const memoryUsagePercent = systemData?.memory_usage ?? null
  const allocatedMemoryGB = Number.parseFloat(totalAllocatedMemoryGB)
  const runningAllocatedGB = Number.parseFloat(runningAllocatedMemoryGB)
  // Overcommit warning should be based on RUNNING VMs allocation, not total
  const isMemoryOvercommit = physicalMemoryGB !== null && runningAllocatedGB > physicalMemoryGB

  const getMemoryUsageColor = (percent: number | null) => {
    if (percent === null) return "bg-blue-500"
    if (percent >= 95) return "bg-red-500"
    if (percent >= 86) return "bg-orange-500"
    if (percent >= 71) return "bg-yellow-500"
    return "bg-blue-500"
  }

  const getMemoryPercentTextColor = (percent: number | null) => {
    if (percent === null) return "text-muted-foreground"
    if (percent >= 95) return "text-red-500"
    if (percent >= 86) return "text-orange-500"
    if (percent >= 71) return "text-yellow-500"
    return "text-green-500"
  }

  const formatCoreCount = (count: number) => {
    const key = count === 1 ? "one" : count >= 2 && count <= 4 ? "few" : "many"
    return t(`vmLxc.coreCount.${key}`, { count })
  }

  const displayedFirewallLogs = useMemo(() => {
    return firewallLogs.filter((entry) => {
      const text = (entry.t || "").trim().toLowerCase()
      return text.length > 0 && text !== "no content"
    })
  }, [firewallLogs])

  if (isLoading) {
    return (
      <div className="flex flex-col items-center justify-center min-h-[400px] gap-4">
        <div className="relative">
          <div className="h-12 w-12 rounded-full border-2 border-muted"></div>
          <div className="absolute inset-0 h-12 w-12 rounded-full border-2 border-transparent border-t-primary animate-spin"></div>
        </div>
        <div className="text-sm font-medium text-foreground">{t("vmLxc.loadingTitle")}</div>
        <p className="text-xs text-muted-foreground">{t("vmLxc.loadingDescription")}</p>
      </div>
    )
  }

  if (error) {
    return (
      <div className="space-y-6">
        <div className="text-center py-8 text-red-500">{t("vmLxc.loadingError", { error: error.message })}</div>
      </div>
    )
  }

  // Single-pass decode. Proxmox URL-encodes notes exactly once when storing
  // them in `config.description`, so a single `decodeURIComponent` is the
  // correct round-trip. The previous loop decoded up to 5 times, which made
  // it possible to ship a payload like `%253Cscript%253E` past one-pass
  // filters (`%25` → `%` → second decode produces `<script>`). With the
  // dangerouslySetInnerHTML render path already removed (Sprint 4.1) the
  // immediate XSS is gone, but keeping the loop on the editor path keeps
  // the same evasion vector available for future use sites.
  const decodeRecursively = (str: string): string => {
    try {
      return decodeURIComponent(str.replace(/%0A/g, "\n"))
    } catch {
      return str
    }
  }

  const handleEditNotes = () => {
    if (vmDetails?.config?.description) {
      const decoded = decodeRecursively(vmDetails.config.description)
      setEditedNotes(decoded)
    } else {
      setEditedNotes("") // Ensure editedNotes is empty if no description exists
    }
    setIsEditingNotes(true)
  }

  const handleSaveNotes = async () => {
    if (!selectedVM || !vmDetails) return

    setSavingNotes(true)
    try {
      await fetchApi(`/api/vms/${selectedVM.vmid}/description`, {
        method: "PUT",
        body: JSON.stringify({
          description: editedNotes, // Send as-is, pvesh will handle encoding
        }),
      })

      setVMDetails({
        ...vmDetails,
        config: {
          ...vmDetails.config,
          description: editedNotes, // Store unencoded
        },
      })
      setIsEditingNotes(false)
    } catch (error) {
      console.error("Error saving notes:", error)
      alert(t("vmLxc.errors.saveNotesFailed"))
    } finally {
      setSavingNotes(false)
    }
  }

  const handleCancelEditNotes = () => {
    setIsEditingNotes(false)
    setEditedNotes("")
  }

  return (
    <div className="space-y-6">
      {/*
        styled-jsx is scoped by default — it adds a hash class to
        selectors so they only match elements rendered by this
        component. Content injected via `dangerouslySetInnerHTML`
        does NOT get the hash, so descendant selectors like
        `div[align="center"]` never matched the helper-script HTML
        and notes rendered left-aligned. Wrapping the descendant
        selectors in `:global(...)` keeps the parent class scoped
        but lets the inner rules apply to the injected HTML.
      */}
      <style jsx>{`
        .proxmenux-notes {
          all: revert;
        }
        .proxmenux-notes :global(a) {
          display: inline-block;
          margin-right: 4px;
          text-decoration: none;
        }
        .proxmenux-notes :global(img) {
          display: inline-block;
          vertical-align: middle;
        }
        .proxmenux-notes :global(p) {
          margin: 0.5rem 0;
        }
        .proxmenux-notes :global(table) {
          width: auto !important;
          margin: 0 auto;
        }
        .proxmenux-notes :global(div[align="center"]) {
          text-align: center;
        }
        .proxmenux-notes :global(table td:nth-child(2)) {
          text-align: left;
          padding-left: 16px;
        }
        .proxmenux-notes :global(table td:nth-child(2) h1) {
          text-align: left;
          font-size: 2rem;
          font-weight: bold;
          line-height: 1.2;
        }
        .proxmenux-notes :global(table td:nth-child(2) p) {
          text-align: left;
        }
        .proxmenux-notes :global(table + p) {
          margin-top: 1rem;
          padding-top: 1rem;
          border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        .proxmenux-notes-plaintext {
          white-space: pre-wrap;
          font-family: monospace;
        }
      `}</style>

      <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-6">
        {/* ── Total VMs & LXCs (preview restyle: B-headline + pills, matching Overview) ── */}
        {(() => {
          const running = safeVMData.filter((vm) => vm.status === "running").length
          const stopped = safeVMData.filter((vm) => vm.status === "stopped").length
          const total = safeVMData.length
          const vms = safeVMData.filter((vm) => vm.type === "qemu" || vm.type === "vm").length
          const lxc = safeVMData.filter((vm) => vm.type === "lxc").length
          return (
            <Card className="bg-card border-border">
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium text-muted-foreground">{t("vmLxc.totalVmLxc")}</CardTitle>
                <Server className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="flex items-end justify-between">
                  <div>
                    <span className="text-4xl font-bold leading-none text-foreground">{running}</span>
                    <span className="text-lg font-medium ml-1 text-muted-foreground">/ {total}</span>
                  </div>
                  <Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20">
                    {t("overview.runningCount", { count: running })}
                  </Badge>
                </div>
                <div className="mt-3 flex gap-1 flex-wrap">
                  {vms > 0 && (
                    <Badge variant="outline" className="bg-green-500/10 text-green-500 border-green-500/20">
                      {t("overview.vmsCount", { count: vms })}
                    </Badge>
                  )}
                  {lxc > 0 && (
                    <Badge variant="outline" className="bg-blue-500/10 text-blue-500 border-blue-500/20">{lxc} LXC</Badge>
                  )}
                  {stopped > 0 && (
                    <Badge variant="outline" className="bg-muted text-muted-foreground border-border">
                      {t("overview.stoppedCount", { count: stopped })}
                    </Badge>
                  )}
                </div>
              </CardContent>
            </Card>
          )
        })()}

        {/* ── Total CPU Allocated (preview restyle: donut + Used/Configured/In use) ── */}
        {(() => {
          const allocPct = safeVMData.reduce((sum, vm) => sum + (vm.cpu || 0), 0) * 100
          const configuredVCPU = safeVMData.reduce((sum, vm) => sum + (vm.maxcpu || 0), 0)
          const inUseVCPU = safeVMData
            .filter((vm) => vm.status === "running")
            .reduce((sum, vm) => sum + (vm.maxcpu || 0), 0)
          const hostThreads = systemData?.cpu_threads ?? systemData?.cpu_cores ?? 0
          const stroke = allocPct >= 90 ? '#ef4444' : allocPct >= 75 ? '#f59e0b' : '#3b82f6'
          return (
            <Card className="bg-card border-border">
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium text-muted-foreground">{t("vmLxc.totalCpuAllocated")}</CardTitle>
                <Cpu className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="flex items-center gap-4">
                  <svg viewBox="0 0 36 36" className="w-[72px] h-[72px] flex-shrink-0">
                    <circle cx="18" cy="18" r="15.9155" fill="none" stroke="rgba(99,102,241,0.15)" strokeWidth="3"/>
                    <circle cx="18" cy="18" r="15.9155" fill="none" stroke={stroke} strokeWidth="3"
                            strokeDasharray={`${Math.min(100, allocPct)} 100`} strokeLinecap="round"
                            style={{ transform: 'rotate(-90deg)', transformOrigin: '50% 50%' }}/>
                    <text x="18" y="19.5" textAnchor="middle" fontSize="10" fontWeight="700" fill="currentColor">{Math.round(allocPct)}%</text>
                  </svg>
                  <div className="flex-1 space-y-2">
                    <div>
                      <div className="flex items-center justify-between text-sm">
                        <span className="text-muted-foreground">{t("vmLxc.used")}</span>
                        <span className="font-medium font-mono whitespace-nowrap">{Math.round(allocPct)}%</span>
                      </div>
                      <div className="mt-1 h-1.5 bg-muted rounded-full overflow-hidden">
                        <div className="h-full rounded-full" style={{ width: `${Math.min(100, allocPct)}%`, background: stroke }}/>
                      </div>
                    </div>
                    <div className="flex items-center justify-between text-sm">
                      <span className="text-muted-foreground">{t("vmLxc.configured")}</span>
                      <span className="font-medium font-mono whitespace-nowrap">{configuredVCPU || '—'}{hostThreads ? ` / ${hostThreads}` : ''} vCPU</span>
                    </div>
                    <div className="flex items-center justify-between text-sm">
                      <span className="text-muted-foreground">{t("vmLxc.inUse")}</span>
                      <span className="font-medium font-mono whitespace-nowrap">{inUseVCPU || '—'}{hostThreads ? ` / ${hostThreads}` : ''} vCPU</span>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          )
        })()}

        {/* ── Total Memory (preview restyle: donut + mini-bars Used/Allocated) ── */}
        {(() => {
          const usedPct = memoryUsagePercent ?? 0
          const usedGB = usedMemoryGB ?? 0
          const totalGB = physicalMemoryGB ?? 0
          const allocPct = totalGB > 0 ? (allocatedMemoryGB / totalGB) * 100 : 0
          const stroke = usedPct >= 90 ? '#ef4444' : usedPct >= 75 ? '#f59e0b' : '#3b82f6'
          return (
            <Card className="bg-card border-border">
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium text-muted-foreground">{t("vmLxc.totalMemory")}</CardTitle>
                <MemoryStick className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="flex items-center gap-4">
                  <svg viewBox="0 0 36 36" className="w-[72px] h-[72px] flex-shrink-0">
                    <circle cx="18" cy="18" r="15.9155" fill="none" stroke="rgba(99,102,241,0.15)" strokeWidth="3"/>
                    <circle cx="18" cy="18" r="15.9155" fill="none" stroke={stroke} strokeWidth="3"
                            strokeDasharray={`${usedPct} 100`} strokeLinecap="round"
                            style={{ transform: 'rotate(-90deg)', transformOrigin: '50% 50%' }}/>
                    <text x="18" y="19.5" textAnchor="middle" fontSize="10" fontWeight="700" fill="currentColor">{Math.round(usedPct)}%</text>
                  </svg>
                  <div className="flex-1 space-y-2">
                    <div>
                      <div className="flex items-center justify-between text-sm">
                      <span className="text-muted-foreground">{t("vmLxc.used")}</span>
                      <span className="font-medium font-mono whitespace-nowrap">{usedGB.toFixed(1)}</span>
                      </div>
                      <div className="mt-1 h-1.5 bg-muted rounded-full overflow-hidden">
                        <div className="h-full rounded-full" style={{ width: `${usedPct}%`, background: stroke }}/>
                      </div>
                    </div>
                    <div>
                      <div className="flex items-center justify-between text-sm">
                      <span className="text-muted-foreground">{t("vmLxc.allocated")}</span>
                      <span className="font-medium font-mono whitespace-nowrap">{allocatedMemoryGB.toFixed(1)}</span>
                      </div>
                      <div className="mt-1 h-1.5 bg-muted rounded-full overflow-hidden">
                        <div className="h-full rounded-full" style={{ width: `${Math.min(100, allocPct)}%`, background: isMemoryOvercommit ? '#f59e0b' : 'rgba(99,102,241,0.55)' }}/>
                      </div>
                    </div>
                    <div className="flex items-center justify-between text-sm">
                      <span className="text-muted-foreground">{t("vmLxc.total")}</span>
                      <span className="font-medium font-mono whitespace-nowrap">{totalGB.toFixed(0)} GB</span>
                    </div>
                  </div>
                </div>
              </CardContent>
            </Card>
          )
        })()}

        {/* ── Total Disk (preview restyle: headline + 2-segment stacked bar Used/Alloc-not-Used) ── */}
        {(() => {
          const usedGB = safeVMData.reduce((sum, vm) => sum + (vm.disk || 0), 0) / 1024 ** 3
          const allocGB = safeVMData.reduce((sum, vm) => sum + (vm.maxdisk || 0), 0) / 1024 ** 3
          const utilPct = allocGB > 0 ? (usedGB / allocGB) * 100 : 0
          const idleGB = Math.max(0, allocGB - usedGB)
          const stroke = utilPct >= 90 ? '#ef4444' : utilPct >= 75 ? '#f59e0b' : '#3b82f6'
          const usedSeg = allocGB > 0 ? (usedGB / allocGB) * 100 : 0
          return (
            <Card className="bg-card border-border">
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium text-muted-foreground">{t("vmLxc.totalDisk")}</CardTitle>
                <HardDrive className="h-4 w-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="flex items-end justify-between mb-3">
                  <div>
                    <span className="text-xl lg:text-2xl font-bold leading-none">{formatStorage(usedGB)}</span>
                    <span className="text-sm font-medium ml-1 text-muted-foreground">{t("vmLxc.used").toLowerCase()}</span>
                  </div>
                  <Badge variant="outline" className="bg-muted text-muted-foreground border-border">
                    {Math.round(utilPct)}% {t("vmLxc.utilization")}
                  </Badge>
                </div>
                <div className="flex h-1.5 rounded-full overflow-hidden gap-[2px]">
                  <div style={{ width: `${usedSeg}%`, background: stroke }} title={`${t("vmLxc.used")} ${formatStorage(usedGB)}`}></div>
                  <div style={{ flex: 1, background: 'rgba(168,85,247,0.45)' }} title={`${t("vmLxc.idle")} ${formatStorage(idleGB)}`}></div>
                </div>
                <div className="mt-2 flex justify-between text-sm text-muted-foreground">
                  <span className="flex items-center gap-1"><span className="w-1.5 h-1.5 rounded-full" style={{ background: stroke }}></span>{t("vmLxc.used")} {formatStorage(usedGB)}</span>
                  <span className="flex items-center gap-1"><span className="w-1.5 h-1.5 rounded-full" style={{ background: 'rgba(168,85,247,0.55)' }}></span>{t("vmLxc.allocated")} {formatStorage(allocGB)}</span>
                </div>
              </CardContent>
            </Card>
          )
        })()}
      </div>

      <Card className="bg-card border-border">
        <CardHeader className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
          <CardTitle className="flex items-center gap-2 text-xl lg:text-2xl font-bold text-foreground">
            <Server className="h-6 w-6" />
            {t("vmLxc.listTitle")}
          </CardTitle>
          <div
            role="tablist"
            aria-label="Filter by status"
            className="inline-flex w-full sm:w-auto rounded-lg border border-border bg-muted/40 p-1 gap-1"
          >
            {(["all", "running", "stopped"] as const).map((key) => {
              const active = statusFilter === key
              const label = key === "all" ? "All" : key === "running" ? "Running" : "Stopped"
              // Icon color: white when the tab is active (over the blue fill);
              // green / red on inactive tabs so the state mapping stays legible
              // before selection. The black-text variant was tested and dropped
              // — white reads cleaner alongside the sidebar/nav blue treatment.
              const iconClass = active
                ? "h-3.5 w-3.5 text-white"
                : key === "running"
                  ? "h-3.5 w-3.5 text-green-500 fill-green-500/25"
                  : "h-3.5 w-3.5 text-red-500 fill-red-500/25"
              return (
                <button
                  key={key}
                  type="button"
                  role="tab"
                  aria-selected={active}
                  onClick={() => setStatusFilter(key)}
                  className={`flex-1 sm:flex-none inline-flex items-center justify-center gap-1.5 px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${
                    active
                      ? "bg-blue-500 text-white shadow-sm"
                      : "text-muted-foreground hover:text-foreground hover:bg-background/60"
                  }`}
                >
                  {key === "running" && <Play className={iconClass} />}
                  {key === "stopped" && <Square className={iconClass} />}
                  <span>{label}</span>
                  <span className={`ml-0.5 text-xs tabular-nums ${active ? "text-white/80" : "opacity-70"}`}>
                    {statusCounts[key]}
                  </span>
                </button>
              )
            })}
          </div>
        </CardHeader>
        <CardContent>
          {safeVMData.length === 0 ? (
            <div className="text-center py-8 text-muted-foreground">{t("vmLxc.empty")}</div>
          ) : filteredVMs.length === 0 ? (
            <div className="text-center py-8 text-muted-foreground">
              No {statusFilter === "running" ? "running" : "stopped"} virtual machines
            </div>
          ) : (
            <div className="space-y-3">
              {filteredVMs.map((vm) => {
                const cpuPercent = (vm.cpu * 100).toFixed(1)
                const memPercent = vm.maxmem > 0 ? ((vm.mem / vm.maxmem) * 100).toFixed(1) : "0"
                const memGB = (vm.mem / 1024 ** 3).toFixed(1)
                const maxMemGB = (vm.maxmem / 1024 ** 3).toFixed(1)
                const diskPercent = vm.maxdisk > 0 ? ((vm.disk / vm.maxdisk) * 100).toFixed(1) : "0"
                const diskGB = (vm.disk / 1024 ** 3).toFixed(1)
                const maxDiskGB = (vm.maxdisk / 1024 ** 3).toFixed(1)
                const typeBadge = getTypeBadge(vm.type)
                // IP resolution — try both sources so a card never
                // ends up with an empty slot while one path is still
                // in flight:
                //   1) `vmConfigs` — populated by the dedicated
                //      LXC-IP-fetch effect (batches of 5, gated by
                //      `ipsLoaded` so it only runs once per mount).
                //   2) `vmModalCacheRef.details` — populated by the
                //      background prefetcher that warms every guest's
                //      /api/vms/<vmid> payload. Contains the same
                //      `lxc_ip_info.primary_ip` the effect uses; if
                //      the prefetch landed first, we surface the IP
                //      immediately without waiting for the batch.
                let lxcIP: string | null | undefined = null
                if (vm.type === "lxc") {
                  lxcIP = vmConfigs[vm.vmid]
                  if (!lxcIP) {
                    const cached = vmModalCacheRef.current.details.get(vm.vmid) as any
                    lxcIP = cached?.lxc_ip_info?.primary_ip
                      || (cached?.config ? extractIPFromConfig(cached.config, cached.lxc_ip_info) : null)
                  }
                }

                return (
                  <div key={vm.vmid}>
                    <div
                      className="hidden sm:block p-4 rounded-lg border border-border bg-card hover:bg-black/5 dark:hover:bg-white/5 transition-colors cursor-pointer"
                      onClick={() => handleVMClick(vm)}
                      onMouseEnter={() => prefetchVM(vm)}
                    >
                      {/* Row 1 — identity header. Just badges + name
                          + ID + update badge, no uptime/IP here. On
                          `lg+` (≥1024 px, e.g. iPad landscape and up)
                          uptime + IP show up in the row-2 left column;
                          on smaller viewports (tablet portrait, narrow
                          desktops) they disappear entirely — that
                          width is pre-mobile territory where the
                          metrics grid needs the whole card width and
                          a stray uptime line just competes for space.
                          Users who need uptime/IP on narrow screens
                          still see them inside the modal's Status
                          tab. */}
                      <div className="flex items-center gap-x-2 gap-y-1 flex-wrap mb-3">
                        <Badge variant="outline" className={`flex-shrink-0 ${getStatusColor(vm.status)}`}>
                          {getStatusIcon(vm.status)}
                          {getStatusLabel(vm.status)}
                        </Badge>
                        <Badge variant="outline" className={`flex-shrink-0 ${typeBadge.color}`}>
                          {typeBadge.icon}
                          {typeBadge.label}
                        </Badge>
                        <span className="font-semibold text-foreground truncate min-w-0">{vm.name}</span>
                        <span className="text-sm text-muted-foreground whitespace-nowrap flex-shrink-0">ID: {vm.vmid}</span>
                        {/* PVE tag dots — hash-derived colour so the same
                            tag renders identically across the app and
                            matches PVE's own tag palette. Full pills
                            live inside the modal; here only the dot
                            reads at a glance in a dense card. */}
                        {parseTags(vm.tags).map((tag) => {
                          const { bg } = tagToColor(tag)
                          return (
                            <span
                              key={`tag-dot-${vm.vmid}-${tag}`}
                              title={tag}
                              className="inline-block h-3 w-3 rounded-full flex-shrink-0"
                              style={{ backgroundColor: bg }}
                            />
                          )
                        })}
                        {vm.type === "lxc" && (
                          <div className="ml-auto flex-shrink-0">
                            {renderLxcUpdateBadge(getAggregateUpdateCheck(vm))}
                          </div>
                        )}
                      </div>

                      {/* Row 2 — 2-column layout on wide viewports
                          (`lg+`, ≥1024 px, iPad landscape and up):
                          left slot carries uptime + IP (as originally
                          designed), right slot the 5-column metrics
                          grid. Below `lg` the left slot is hidden
                          and the grid spans the full card width. */}
                      <div className="flex flex-row gap-3 lg:gap-4">
                        {/* Left slot is ALWAYS mounted on lg+ so the
                            metrics grid keeps the same column widths
                            whether the guest is running or stopped —
                            otherwise stopped rows shifted their CPU /
                            RAM / Disk columns leftward and broke the
                            vertical alignment across cards. Content
                            inside is still gated on `running`. */}
                        <div className="hidden lg:block lg:min-w-[180px] lg:flex-shrink-0">
                          {vm.status === "running" && (
                            <div className="flex flex-col gap-1">
                              <span className="text-sm text-muted-foreground whitespace-nowrap">
                                {t("vmLxc.uptime", { uptime: formatUptime(vm.uptime, t) })}
                              </span>
                              {lxcIP && lxcIP !== "DHCP" && lxcIP !== "N/A" && (
                                <span className="text-sm text-foreground flex items-center gap-1">
                                  <Network className="h-3 w-3 text-green-500" />
                                  {lxcIP}
                                </span>
                              )}
                            </div>
                          )}
                        </div>
                        <div className="flex-1 grid grid-cols-5 gap-2 lg:gap-3 min-w-0">
                          <div>
                            <div className="text-xs text-muted-foreground mb-1">{t("vmLxc.cpuUsage")}</div>
                            <div
                              className="cursor-pointer hover:opacity-80 transition-opacity"
                              onClick={() => {
                                setSelectedMetric("cpu")
                              }}
                            >
                              <div
                                className={`text-sm font-semibold mb-1 ${getUsageColor(Number.parseFloat(cpuPercent))}`}
                              >
                                {cpuPercent}%
                              </div>
                              <Progress
                                value={Number.parseFloat(cpuPercent)}
                                className={`h-1.5 ${getProgressColor(Number.parseFloat(cpuPercent))}`}
                              />
                            </div>
                          </div>

                          <div>
                            <div className="text-xs text-muted-foreground mb-1">{t("vmLxc.memory")}</div>
                            <div
                              className="cursor-pointer hover:opacity-80 transition-opacity"
                              onClick={() => {
                                setSelectedMetric("memory")
                              }}
                            >
                              <div
                                className={`text-sm font-semibold mb-1 ${getUsageColor(Number.parseFloat(memPercent))}`}
                              >
                                {memGB} / {maxMemGB} GB
                              </div>
                              <Progress
                                value={Number.parseFloat(memPercent)}
                                className={`h-1.5 ${getProgressColor(Number.parseFloat(memPercent))}`}
                              />
                            </div>
                          </div>

                          <div>
                            <div className="text-xs text-muted-foreground mb-1">{t("vmLxc.diskUsage")}</div>
                            <div
                              className="cursor-pointer hover:opacity-80 transition-opacity"
                              onClick={() => {
                                setSelectedMetric("disk")
                              }}
                            >
                              <div
                                className={`text-sm font-semibold mb-1 ${getUsageColor(Number.parseFloat(diskPercent))}`}
                              >
                                {diskGB} / {maxDiskGB} GB
                              </div>
                              <Progress
                                value={Number.parseFloat(diskPercent)}
                                className={`h-1.5 ${getProgressColor(Number.parseFloat(diskPercent))}`}
                              />
                            </div>
                          </div>

                          <div>
                            <div className="text-xs text-muted-foreground mb-1">{t("vmLxc.diskIo")}</div>
                            <div className="text-sm font-semibold space-y-0.5">
                              <div className="flex items-center gap-1">
                                <HardDrive className="h-3 w-3 text-green-500" />
                                <span className="text-green-500 truncate">↓ {formatBytes(vm.diskread, false)}</span>
                              </div>
                              <div className="flex items-center gap-1">
                                <HardDrive className="h-3 w-3 text-blue-500" />
                                <span className="text-blue-500 truncate">↑ {formatBytes(vm.diskwrite, false)}</span>
                              </div>
                            </div>
                          </div>

                          <div>
                            <div className="text-xs text-muted-foreground mb-1">{t("vmLxc.networkIo")}</div>
                            <div className="text-sm font-semibold space-y-0.5">
                              <div className="flex items-center gap-1">
                                <Network className="h-3 w-3 text-green-500" />
                                <span className="text-green-500">↓ {formatBytes(vm.netin, true)}</span>
                              </div>
                              <div className="flex items-center gap-1">
                                <Network className="h-3 w-3 text-blue-500" />
                                <span className="text-blue-500">↑ {formatBytes(vm.netout, true)}</span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div
                      className="sm:hidden p-4 rounded-lg border border-black/10 dark:border-white/10 bg-black/5 dark:bg-white/5 transition-colors cursor-pointer"
                      onClick={() => handleVMClick(vm)}
                    >
                      <div className="flex items-center gap-3">
                        {vm.status === "running" ? (
                          <Play className="h-5 w-5 text-green-500 fill-current flex-shrink-0" />
                        ) : (
                          <Square className="h-5 w-5 text-red-500 fill-current flex-shrink-0" />
                        )}

                        <Badge variant="outline" className={`${getTypeBadge(vm.type).color} flex-shrink-0`}>
                          {getTypeBadge(vm.type).label}
                        </Badge>

                        {/* Name and ID.
                            Update indicator is icon-only (no count, no
                            badge chrome) sitting next to `ID: N` — the
                            purple up-arrow alone signals "this CT has
                            pending updates" without stealing width from
                            the name, which was getting truncated to 4-5
                            chars before. The full count still shows on
                            the desktop card and inside the modal. */}
                        <div className="flex-1 min-w-0">
                          <div className="font-semibold text-foreground truncate">{vm.name}</div>
                          <div className="text-[10px] text-muted-foreground flex items-center gap-1">
                            <span>ID: {vm.vmid}</span>
                            {parseTags(vm.tags).map((tag) => {
                              const { bg } = tagToColor(tag)
                              return (
                                <span
                                  key={`tag-dot-m-${vm.vmid}-${tag}`}
                                  title={tag}
                                  className="inline-block h-2.5 w-2.5 rounded-full flex-shrink-0"
                                  style={{ backgroundColor: bg }}
                                />
                              )
                            })}
                            {vm.type === "lxc" && (() => {
                              const agg = getAggregateUpdateCheck(vm)
                              return agg?.available && (agg.count ?? 0) > 0 ? (
                                <ArrowUpCircle className="h-3 w-3 text-violet-400 flex-shrink-0" />
                              ) : null
                            })()}
                          </div>
                        </div>

                        <div className="flex items-center gap-3 flex-shrink-0">
                          {/* CPU icon with percentage */}
                          <div className="flex flex-col items-center gap-0.5">
                            {vm.status === "running" && (
                              <span className="text-[10px] font-medium text-muted-foreground">{cpuPercent}%</span>
                            )}
                            <Cpu
                              className={`h-4 w-4 ${
                                vm.status === "stopped" ? "text-gray-500" : getUsageColor(Number.parseFloat(cpuPercent))
                              }`}
                            />
                          </div>

                          {/* Memory icon with percentage */}
                          <div className="flex flex-col items-center gap-0.5">
                            {vm.status === "running" && (
                              <span className="text-[10px] font-medium text-muted-foreground">{memPercent}%</span>
                            )}
                            <MemoryStick
                              className={`h-4 w-4 ${
                                vm.status === "stopped" ? "text-gray-500" : getUsageColor(Number.parseFloat(memPercent))
                              }`}
                            />
                          </div>

                          {/* Disk icon with percentage */}
                          <div className="flex flex-col items-center gap-0.5">
                            {vm.status === "running" && (
                              <span className="text-[10px] font-medium text-muted-foreground">{diskPercent}%</span>
                            )}
                            <HardDrive
                              className={`h-4 w-4 ${
                                vm.status === "stopped"
                                  ? "text-gray-500"
                                  : getUsageColor(Number.parseFloat(diskPercent))
                              }`}
                            />
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                )
              })}
            </div>
          )}
        </CardContent>
      </Card>

      <Dialog
        open={!!selectedVM}
        onOpenChange={(open) => {
          // Radix fires `onOpenChange(false)` for backdrop clicks,
          // ESC keys AND — critically on mobile — pointer events
          // that bubbled from a nested Dialog (script terminal,
          // LXC terminal). When any of those children is on top
          // we swallow the parent-close request; closing the child
          // must not chain-close the LXC/VM modal underneath.
          // Reported after applying an update from a phone: the
          // user tapped the terminal's Close button and got kicked
          // all the way back to the guest list.
          if (open) return
          if (applyOpen || terminalOpen) return
          setSelectedVM(null)
          setVMDetails(null)
          setCurrentView("main")
          setSelectedMetric(null)
          setShowAdditionalInfo(false)
          setShowNotes(false)
          setIsEditingNotes(false)
          setEditedNotes("")
          setActiveModalTab("status")
        }}
      >
        <DialogContent
          className={`max-w-4xl flex flex-col p-0 overflow-hidden ${
            isStandalone
              ? "h-[95vh] sm:h-[90vh]"
              : "h-[85vh] sm:h-[85vh] max-h-[calc(100dvh-env(safe-area-inset-top)-env(safe-area-inset-bottom)-40px)]"
          }`}
          key={selectedVM?.vmid || "no-vm"}
          // Belt and braces: while a nested terminal Dialog is on
          // top, ignore backdrop clicks and ESC entirely on THIS
          // parent Dialog. onOpenChange above already guards against
          // the child-bubble path; these two guards close the
          // remaining vectors (mobile tap slop reaching the parent's
          // scrim, ESC not consumed by the child) at the DOM level.
          onInteractOutside={(e) => {
            if (applyOpen || terminalOpen) e.preventDefault()
          }}
          onEscapeKeyDown={(e) => {
            if (applyOpen || terminalOpen) e.preventDefault()
          }}
        >
          {currentView === "main" ? (
            <>
              <DialogHeader className="pb-4 border-b border-border px-6 pt-6">
                <DialogTitle className="flex flex-col gap-3">
                  {/* Desktop layout: Uptime now appears after status badge */}
                  <div className="hidden sm:flex items-center gap-3 flex-wrap">
                    <div className="flex items-center gap-2">
                      <Server className="h-5 w-5 flex-shrink-0" />
                      <span className="text-lg truncate">{selectedVM?.name}</span>
                      {selectedVM && <span className="text-sm text-muted-foreground">ID: {selectedVM.vmid}</span>}
                    </div>
                    {selectedVM && (
                      <>
                        <div className="flex items-center gap-2 flex-wrap">
                          <Badge variant="outline" className={`${getTypeBadge(selectedVM.type).color} flex-shrink-0`}>
                            {getTypeBadge(selectedVM.type).icon}
                            {getTypeBadge(selectedVM.type).label}
                          </Badge>
                          <Badge variant="outline" className={`${getStatusColor(selectedVM.status)} flex-shrink-0`}>
                            {getStatusLabel(selectedVM.status)}
                          </Badge>
                          {selectedVM.status === "running" && (
                            <span className="text-sm text-muted-foreground">
                              {t("vmLxc.uptime", { uptime: formatUptime(selectedVM.uptime, t) })}
                            </span>
                          )}
                          {/* Clickable badge — the sole entry point to
                              the Updates panel now that the tab is no
                              longer in the nav. Full-size so it reads
                              at the same weight as the surrounding
                              Uptime / Type / Status chips. */}
                          {selectedVM.type === "lxc" &&
                            renderLxcUpdateBadge(
                              getAggregateUpdateCheck(selectedVM),
                              false,
                              () => setActiveModalTab("updates"),
                            )}
                          {/* Header badges — one per user-registered
                              app (skip managed entries; those surface
                              from Security → Secure Gateway). Docker
                              apps have no version to show but still
                              render as a name chip so users see them
                              at a glance. Capped at 3 to keep the
                              row honest on narrow viewports. */}
                          {selectedVM.type === "lxc" &&
                            (selectedVM.app_watches || [])
                              .filter((a) => !a.managed_oci_app_id)
                              .slice(0, 3)
                              .map((a) => (
                                <span key={a.id}>
                                  {renderLxcAppBadge(a, false, () => setActiveModalTab("app"))}
                                </span>
                              ))}
                        </div>
                      </>
                    )}
                  </div>
                  {/* Mobile layout unchanged */}
                  <div className="sm:hidden flex flex-col gap-2">
                    <div className="flex items-center gap-2">
                      <Server className="h-5 w-5 flex-shrink-0" />
                      <span className="text-lg truncate">{selectedVM?.name}</span>
                      {selectedVM && <span className="text-sm text-muted-foreground">ID: {selectedVM.vmid}</span>}
                    </div>
                    {selectedVM && (
                      <div className="flex items-center gap-2 flex-wrap">
                        <Badge variant="outline" className={`${getTypeBadge(selectedVM.type).color} flex-shrink-0`}>
                          {getTypeBadge(selectedVM.type).icon}
                          {getTypeBadge(selectedVM.type).label}
                        </Badge>
                        <Badge variant="outline" className={`${getStatusColor(selectedVM.status)} flex-shrink-0`}>
                          {getStatusLabel(selectedVM.status)}
                        </Badge>
                        {selectedVM.status === "running" && (
                          <span className="text-sm text-muted-foreground">
                            {t("vmLxc.uptime", { uptime: formatUptime(selectedVM.uptime, t) })}
                          </span>
                        )}
                        {selectedVM.type === "lxc" &&
                          renderLxcUpdateBadge(
                            getAggregateUpdateCheck(selectedVM),
                            false,
                            () => setActiveModalTab("updates"),
                          )}
                      </div>
                    )}
                  </div>
                </DialogTitle>
              </DialogHeader>

              {/* Tab Navigation.
                  Mobile UX:
                   • Only the active tab shows its label; the rest
                     collapse to icon-only so 4-5 tabs fit on a phone.
                   • Per-tab padding + gap shrink on narrow viewports
                     (`px-2.5 sm:px-4`, `gap-1.5 sm:gap-2`) so even with
                     two badges showing counts the row doesn't overflow.
                   • Container has `overflow-x-auto` as a safety net —
                     a CT with all tabs active (Mounts + Backups +
                     Updates + Firewall) on a very narrow phone can
                     still horizontally scroll the row instead of
                     clipping the last tab off-screen.
                   • Badges stay visible in both states so the user
                     still sees "9 backups" at a glance even when that
                     tab isn't active. */}
              <div className="flex border-b border-border px-3 sm:px-6 shrink-0 overflow-x-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]">
                <button
                  onClick={() => setActiveModalTab("status")}
                  className={`flex items-center gap-1.5 sm:gap-2 px-2.5 sm:px-4 py-2.5 text-sm font-medium transition-colors border-b-2 -mb-px whitespace-nowrap shrink-0 ${
                    activeModalTab === "status"
                      ? "border-cyan-500 text-cyan-500"
                      : "border-transparent text-muted-foreground hover:text-foreground"
                  }`}
                >
                  <Activity className="h-4 w-4" />
                  <span className={activeModalTab === "status" ? "" : "hidden sm:inline"}>
                    {t("vmLxc.tabs.status")}
                  </span>
                </button>
                {/* App tab — user-registered application metadata +
                    upstream version watch. Placed right after Status so
                    the operator's mental flow is "state → what's inside
                    → what needs updating → mounts/backups/firewall". */}
                {selectedVM?.type === "lxc" && (
                  <button
                    onClick={() => setActiveModalTab("app")}
                    className={`flex items-center gap-1.5 sm:gap-2 px-2.5 sm:px-4 py-2.5 text-sm font-medium transition-colors border-b-2 -mb-px whitespace-nowrap shrink-0 ${
                      activeModalTab === "app"
                        ? "border-emerald-500 text-emerald-500"
                        : "border-transparent text-muted-foreground hover:text-foreground"
                    }`}
                  >
                    <Package className="h-4 w-4" />
                    <span className={activeModalTab === "app" ? "" : "hidden sm:inline"}>
                      {t("vmLxc.tabs.app")}
                    </span>
                  </button>
                )}
                {/* Updates tab — LXC only, always visible so users can
                    trigger a check-now anytime; empty state renders
                    inside. Mobile UX collapses inactive tabs to
                    icon-only so the row doesn't overflow. */}
                {selectedVM?.type === "lxc" && (
                  <button
                    onClick={() => setActiveModalTab("updates")}
                    className={`flex items-center gap-1.5 sm:gap-2 px-2.5 sm:px-4 py-2.5 text-sm font-medium transition-colors border-b-2 -mb-px whitespace-nowrap shrink-0 ${
                      activeModalTab === "updates"
                        ? "border-purple-500 text-purple-500"
                        : "border-transparent text-muted-foreground hover:text-foreground"
                    }`}
                  >
                    <RefreshCw className="h-4 w-4" />
                    <span className={activeModalTab === "updates" ? "" : "hidden sm:inline"}>
                      {t("vmLxc.tabs.updates")}
                    </span>
                    {(() => {
                      const agg = getAggregateUpdateCheck(selectedVM)
                      return typeof agg?.count === "number" && agg.count > 0 ? (
                        <Badge variant="secondary" className="text-xs h-5 ml-0.5 sm:ml-1">
                          {agg.count}
                        </Badge>
                      ) : null
                    })()}
                  </button>
                )}
                {/* Mount Points tab — LXC only, and only when at least
                    one mp / ad-hoc remote mount exists. The ad-hoc
                    hint (from the static endpoint, counts remote-fs
                    entries in /proc/<pid>/mounts) lets the tab render
                    at open time even before the runtime fetch has
                    delivered the real ad_hoc list. Badge count adds
                    that hint so it never reads "0" while data is on
                    the wire. */}
                {selectedVM?.type === "lxc" && (mountPoints.length > 0 || adHocMounts.length > 0 || mountsAdHocHint > 0) && (
                  <button
                    onClick={() => setActiveModalTab("mounts")}
                    className={`flex items-center gap-1.5 sm:gap-2 px-2.5 sm:px-4 py-2.5 text-sm font-medium transition-colors border-b-2 -mb-px whitespace-nowrap shrink-0 ${
                      activeModalTab === "mounts"
                        ? "border-blue-500 text-blue-500"
                        : "border-transparent text-muted-foreground hover:text-foreground"
                    }`}
                  >
                    <HardDrive className="h-4 w-4" />
                    <span className={activeModalTab === "mounts" ? "" : "hidden sm:inline"}>
                      {t("vmLxc.tabs.mounts")}
                    </span>
                    <Badge variant="secondary" className="text-xs h-5 ml-0.5 sm:ml-1">
                      {mountPoints.length + Math.max(adHocMounts.length, mountsAdHocHint)}
                    </Badge>
                  </button>
                )}
                <button
                  onClick={() => setActiveModalTab("backups")}
                  className={`flex items-center gap-1.5 sm:gap-2 px-2.5 sm:px-4 py-2.5 text-sm font-medium transition-colors border-b-2 -mb-px whitespace-nowrap shrink-0 ${
                    activeModalTab === "backups"
                      ? "border-amber-500 text-amber-500"
                      : "border-transparent text-muted-foreground hover:text-foreground"
                  }`}
                >
                  <Archive className="h-4 w-4" />
                  <span className={activeModalTab === "backups" ? "" : "hidden sm:inline"}>
                    {t("vmLxc.tabs.backups")}
                  </span>
                  {vmBackups.length > 0 && (
                    <Badge variant="secondary" className="text-xs h-5 ml-0.5 sm:ml-1">{vmBackups.length}</Badge>
                  )}
                </button>
                {/* Firewall tab — issue #14554 from the helper-scripts
                    discussions ("view individual VM/CT firewall logs").
                    Always rendered for VMs and CTs; if the guest doesn't
                    have firewall enabled in PVE, the panel shows a
                    callout explaining how to turn it on. Log fetched
                    lazily on first click to avoid hitting pvesh on
                    every modal open. */}
                {selectedVM && (
                  <button
                    onClick={() => {
                      setActiveModalTab("firewall")
                      fetchFirewallLog(selectedVM.vmid)
                    }}
                    className={`flex items-center gap-1.5 sm:gap-2 px-2.5 sm:px-4 py-2.5 text-sm font-medium transition-colors border-b-2 -mb-px whitespace-nowrap shrink-0 ${
                      activeModalTab === "firewall"
                        ? "border-orange-500 text-orange-500"
                        : "border-transparent text-muted-foreground hover:text-foreground"
                    }`}
                  >
                    <Shield className="h-4 w-4" />
                    <span className={activeModalTab === "firewall" ? "" : "hidden sm:inline"}>
                      {t("vmLxc.tabs.firewall")}
                    </span>
                  </button>
                )}
              </div>

              <div className="flex-1 overflow-y-auto px-6 py-4 min-h-0">
                {/* Status Tab */}
                {activeModalTab === "status" && (
                <div className="space-y-4">
                  {selectedVM && (
                    <>
                      <div key={`metrics-${selectedVM.vmid}`}>
                        <Card
                          className="cursor-pointer rounded-lg border border-black/10 dark:border-white/10 sm:border-border max-sm:bg-black/5 max-sm:dark:bg-white/5 sm:bg-card sm:hover:bg-black/5 sm:dark:hover:bg-white/5 transition-colors group"
                          onClick={handleMetricsClick}
                        >
                          <CardContent className="p-4">
                            <div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
                              {/* CPU Usage */}
                              <div>
                                <div className="flex items-center gap-1.5 text-xs text-muted-foreground mb-2">
                                  <Cpu className="h-3.5 w-3.5" />
                                  <span>{t("vmLxc.cpuUsage")}</span>
                                  {vmDetails?.config?.cores && (
                                    <span className="text-muted-foreground/60">
                                      ({formatCoreCount(Number(vmDetails.config.cores))})
                                    </span>
                                  )}
                                </div>
                                <div className={`text-base font-semibold mb-2 ${getUsageColor(selectedVM.cpu * 100)}`}>
                                  {(selectedVM.cpu * 100).toFixed(1)}%
                                </div>
                                <Progress
                                  value={selectedVM.cpu * 100}
                                  className={`h-2 max-sm:bg-background sm:group-hover:bg-background/50 transition-colors ${getModalProgressColor(selectedVM.cpu * 100)}`}
                                />
                              </div>

                              {/* Memory */}
                              <div>
                                <div className="flex items-center gap-1.5 text-xs text-muted-foreground mb-2">
                                  <MemoryStick className="h-3.5 w-3.5" />
                                  <span>{t("vmLxc.memory")}</span>
                                </div>
                                <div
                                  className={`text-base font-semibold mb-2 ${getUsageColor((selectedVM.mem / selectedVM.maxmem) * 100)}`}
                                >
                                  {(selectedVM.mem / 1024 ** 3).toFixed(1)} /{" "}
                                  {(selectedVM.maxmem / 1024 ** 3).toFixed(1)} GB
                                </div>
                                <Progress
                                  value={(selectedVM.mem / selectedVM.maxmem) * 100}
                                  className={`h-2 max-sm:bg-background sm:group-hover:bg-background/50 transition-colors ${getModalProgressColor((selectedVM.mem / selectedVM.maxmem) * 100)}`}
                                />
                              </div>

                              {/* Disk */}
                              <div>
                                <div className="flex items-center gap-1.5 text-xs text-muted-foreground mb-2">
                                  <HardDrive className="h-3.5 w-3.5" />
                                  <span>{t("vmLxc.disk")}</span>
                                </div>
                                <div
                                  className={`text-base font-semibold mb-2 ${getUsageColor((selectedVM.disk / selectedVM.maxdisk) * 100)}`}
                                >
                                  {(selectedVM.disk / 1024 ** 3).toFixed(1)} /{" "}
                                  {(selectedVM.maxdisk / 1024 ** 3).toFixed(1)} GB
                                </div>
                                <Progress
                                  value={(selectedVM.disk / selectedVM.maxdisk) * 100}
                                  className={`h-2 max-sm:bg-background sm:group-hover:bg-background/50 transition-colors ${getModalProgressColor((selectedVM.disk / selectedVM.maxdisk) * 100)}`}
                                />
                              </div>

                              {/* Disk I/O — cumulative counters from Proxmox
                                  API: bytes read/written since the VM/LXC
                                  was last started, not a per-period rate. */}
                              <div>
                                <div className="flex items-center gap-1.5 text-xs text-muted-foreground mb-2">
                                  <HardDrive className="h-3.5 w-3.5" />
                                  <span>{t("vmLxc.diskIo")} <span className="text-[10px] opacity-70">({t("vmLxc.sinceBoot")})</span></span>
                                </div>
                                <div className="space-y-1">
                                  <div className="text-sm text-green-500 flex items-center gap-1">
                                    <span>↓</span>
                                    <span>{((selectedVM.diskread || 0) / 1024 ** 2).toFixed(2)} MB</span>
                                  </div>
                                  <div className="text-sm text-blue-500 flex items-center gap-1">
                                    <span>↑</span>
                                    <span>{((selectedVM.diskwrite || 0) / 1024 ** 2).toFixed(2)} MB</span>
                                  </div>
                                </div>
                              </div>

                              {/* Network I/O — cumulative counters from
                                  Proxmox API: bytes in/out since the VM/LXC
                                  was last started. */}
                              <div>
                                <div className="flex items-center gap-1.5 text-xs text-muted-foreground mb-2">
                                  <Network className="h-3.5 w-3.5" />
                                  <span>{t("vmLxc.networkIo")} <span className="text-[10px] opacity-70">({t("vmLxc.sinceBoot")})</span></span>
                                </div>
                                <div className="space-y-1">
                                  <div className="text-sm text-green-500 flex items-center gap-1">
                                    <span>↓</span>
                                    <span>{formatNetworkTraffic(selectedVM.netin || 0, networkUnit)}</span>
                                  </div>
                                  <div className="text-sm text-blue-500 flex items-center gap-1">
                                    <span>↑</span>
                                    <span>{formatNetworkTraffic(selectedVM.netout || 0, networkUnit)}</span>
                                  </div>
                                </div>
                              </div>

                              <div className="flex items-center justify-center">
                                {getOSIcon(vmDetails?.os_info, selectedVM.type)}
                              </div>
                            </div>
                          </CardContent>
                        </Card>
                      </div>

                      {detailsLoading ? (
                        <div className="text-center py-8 text-muted-foreground">{t("vmLxc.loadingConfiguration")}</div>
                      ) : vmDetails?.config ? (
                        <>
                          <Card className="border border-border bg-card/50" key={`config-${selectedVM.vmid}`}>
                            <CardContent className="p-4">
                              <div className="flex items-center justify-between mb-4">
                                <div className="flex items-center gap-2">
                                  <div className="p-1.5 rounded-md bg-blue-500/10">
                                    <Cpu className="h-4 w-4 text-blue-500" />
                                  </div>
                                  <h3 className="text-sm font-semibold text-foreground">{t("vmLxc.resources")}</h3>
                                </div>
                                {/* Editar / Guardar / Cancelar collapse to
                                    icon-only squares on mobile so 3 of them
                                    plus Notas don't overflow the row. Notas
                                    keeps its label because "Notes" is
                                    non-obvious as an icon. Pattern is
                                    consistent with tab strips elsewhere. */}
                                <div className="flex gap-2">
                                  <Button
                                    variant="outline"
                                    size="sm"
                                    onClick={() => setShowNotes(!showNotes)}
                                    className="text-xs max-sm:bg-black/5 max-sm:dark:bg-white/5 sm:bg-transparent sm:hover:bg-black/5 sm:dark:hover:bg-white/5"
                                  >
                                    {showNotes ? (
                                      <>
                                        <ChevronUp className="h-3 w-3 mr-1" />
                                        {t("vmLxc.hideNotes")}
                                      </>
                                    ) : (
                                      <>
                                        <ChevronDown className="h-3 w-3 mr-1" />
                                        {t("vmLxc.notes")}
                                      </>
                                    )}
                                  </Button>
                                  {/* Editar — reveals the autostart toggle
                                      as editable. Only one field for now
                                      (`onboot`); the endpoint accepts a
                                      whitelist so growing this to boot
                                      order, protection etc. is additive.
                                      Feedback pattern mirrors the Settings
                                      cards: Saved pill for 2s, Cancel/Save
                                      pair while editing. */}
                                  {savedOnboot && (
                                    <span className="flex items-center gap-1 text-xs text-green-500 mr-1">
                                      <Check className="h-3.5 w-3.5" />
                                      {t("status.saved")}
                                    </span>
                                  )}
                                  {resourcesEditMode ? (
                                    <>
                                      <Button
                                        variant="outline"
                                        size="sm"
                                        onClick={handleCancelResourcesEdit}
                                        disabled={savingOnboot}
                                        aria-label={t("actions.cancel")}
                                        className="text-xs h-9 w-9 sm:w-auto sm:px-3 p-0 sm:p-2"
                                      >
                                        <X className="h-3.5 w-3.5 sm:mr-1" />
                                        <span className="hidden sm:inline">{t("actions.cancel")}</span>
                                      </Button>
                                      <Button
                                        size="sm"
                                        onClick={handleSaveResources}
                                        disabled={
                                          savingOnboot ||
                                          (
                                            (pendingOnboot === null || pendingOnboot === !!vmDetails.config.onboot) &&
                                            (pendingTags === null || stringifyTags(pendingTags) === stringifyTags(parseTags(selectedVM?.tags)))
                                          )
                                        }
                                        aria-label={t("actions.save")}
                                        className="text-xs h-9 w-9 sm:w-auto sm:px-3 p-0 sm:p-2 bg-blue-600 hover:bg-blue-700 text-white"
                                      >
                                        {savingOnboot ? (
                                          <Loader2 className="h-3 w-3 animate-spin sm:mr-1" />
                                        ) : (
                                          <Check className="h-3.5 w-3.5 sm:mr-1" />
                                        )}
                                        <span className="hidden sm:inline">{t("actions.save")}</span>
                                      </Button>
                                    </>
                                  ) : (
                                    <Button
                                      variant="outline"
                                      size="sm"
                                      onClick={() => {
                                        setPendingOnboot(!!vmDetails.config.onboot)
                                        setPendingTags(parseTags(selectedVM?.tags))
                                        setResourcesEditMode(true)
                                      }}
                                      aria-label={t("actions.edit")}
                                      className="text-xs h-9 w-9 sm:w-auto sm:px-3 p-0 sm:p-2 max-sm:bg-black/5 max-sm:dark:bg-white/5 sm:bg-transparent sm:hover:bg-black/5 sm:dark:hover:bg-white/5"
                                    >
                                      <Settings2 className="h-3.5 w-3.5 sm:mr-1" />
                                      <span className="hidden sm:inline">{t("actions.edit")}</span>
                                    </Button>
                                  )}
                                </div>
                              </div>

                              <div className="grid grid-cols-3 lg:grid-cols-4 gap-3 lg:gap-4">
                                {vmDetails.config.cores && (
                                  <div>
                                    <div className="flex items-center gap-1.5 text-xs text-muted-foreground mb-1">
                                      <Cpu className="h-3.5 w-3.5" />
                                      <span>{t("vmLxc.cpuCores")}</span>
                                    </div>
                                    <div className="font-semibold text-blue-500">{vmDetails.config.cores}</div>
                                  </div>
                                )}
                                {vmDetails.config.memory && (
                                  <div>
                                    <div className="flex items-center gap-1.5 text-xs text-muted-foreground mb-1">
                                      <MemoryStick className="h-3.5 w-3.5" />
                                      <span>{t("vmLxc.memory")}</span>
                                    </div>
                                    <div className="font-semibold text-blue-500">{vmDetails.config.memory} MB</div>
                                  </div>
                                )}
                                {vmDetails.config.swap !== undefined && (
                                  <div>
                                    <div className="flex items-center gap-1.5 text-xs text-muted-foreground mb-1">
                                      <RotateCcw className="h-3.5 w-3.5" />
                                      <span>{t("vmLxc.details.swap")}</span>
                                    </div>
                                    <div className="font-semibold text-foreground">{vmDetails.config.swap} MB</div>
                                  </div>
                                )}
                              </div>

                              {/* PVE tags block. Same edit-gate as the
                                  autostart toggle below — the Editar
                                  button on this card unlocks both. In
                                  view mode we render each tag as a
                                  sharp pill (colors from the 1:1 port
                                  of PVE's stringToRGB + SAPC text
                                  picker, so the palette matches the
                                  PVE UI exactly). In edit mode:
                                  clicking a pill turns it into an
                                  inline input for renaming; the ×
                                  removes it; an input at the tail
                                  adds new tags (Enter/,/; commits).
                                  Validation mirrors the Flask
                                  allow-list regex. */}
                              {(() => {
                                const viewTags = parseTags(selectedVM?.tags)
                                const editTags = pendingTags ?? viewTags
                                const shownTags = resourcesEditMode ? editTags : viewTags
                                if (!resourcesEditMode && shownTags.length === 0) return null
                                const commitEdit = (index: number) => {
                                  const raw = editingTagDraft.trim()
                                  const next = [...editTags]
                                  if (!raw) {
                                    next.splice(index, 1)
                                  } else if (!/^[a-zA-Z0-9._\-+]+$/.test(raw)) {
                                    setEditingTagIndex(null)
                                    setEditingTagDraft("")
                                    return
                                  } else if (next.includes(raw) && next[index] !== raw) {
                                    setEditingTagIndex(null)
                                    setEditingTagDraft("")
                                    return
                                  } else {
                                    next[index] = raw
                                  }
                                  setPendingTags(next)
                                  setEditingTagIndex(null)
                                  setEditingTagDraft("")
                                }
                                return (
                                  <div
                                    className={`mt-4 rounded-md p-3 ${
                                      resourcesEditMode ? "bg-accent" : ""
                                    }`}
                                  >
                                    <div className="flex items-center gap-2 mb-2">
                                      <TagIcon className="h-4 w-4 text-blue-500 shrink-0" />
                                      <div className="text-sm font-medium text-foreground">
                                        {t("vmLxc.details.tags")}
                                      </div>
                                    </div>
                                    <div className="flex flex-wrap items-center gap-1.5">
                                      {shownTags.map((tag, index) => {
                                        const { bg, fg } = tagToColor(tag)
                                        const isEditingThis = resourcesEditMode && editingTagIndex === index
                                        if (isEditingThis) {
                                          return (
                                            <input
                                              key={`vm-tag-edit-${selectedVM?.vmid}-${index}`}
                                              type="text"
                                              autoFocus
                                              value={editingTagDraft}
                                              onChange={(e) => setEditingTagDraft(e.target.value)}
                                              onKeyDown={(e) => {
                                                if (e.key === "Enter" || e.key === "," || e.key === ";") {
                                                  e.preventDefault()
                                                  commitEdit(index)
                                                } else if (e.key === "Escape") {
                                                  e.preventDefault()
                                                  setEditingTagIndex(null)
                                                  setEditingTagDraft("")
                                                }
                                              }}
                                              onBlur={() => commitEdit(index)}
                                              className="h-7 text-sm px-2 rounded-sm bg-background border border-border focus:outline-none focus:ring-1 focus:ring-blue-500 min-w-[80px]"
                                              style={{ width: `${Math.max(8, editingTagDraft.length + 2)}ch` }}
                                            />
                                          )
                                        }
                                        return (
                                          <span
                                            key={`vm-tag-${selectedVM?.vmid}-${tag}-${index}`}
                                            className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-sm text-sm font-medium leading-none ${
                                              resourcesEditMode ? "cursor-text" : ""
                                            }`}
                                            style={{ backgroundColor: bg, color: fg }}
                                            onClick={() => {
                                              if (!resourcesEditMode) return
                                              setEditingTagIndex(index)
                                              setEditingTagDraft(tag)
                                            }}
                                          >
                                            <span>{tag}</span>
                                            {resourcesEditMode && (
                                              <button
                                                type="button"
                                                aria-label={`${t("actions.remove")} ${tag}`}
                                                onClick={(e) => {
                                                  e.stopPropagation()
                                                  const next = editTags.filter((_, i) => i !== index)
                                                  setPendingTags(next)
                                                }}
                                                className="inline-flex items-center justify-center h-4 w-4 rounded-sm hover:bg-black/20"
                                              >
                                                <X className="h-3.5 w-3.5" />
                                              </button>
                                            )}
                                          </span>
                                        )
                                      })}
                                      {resourcesEditMode && (
                                        <input
                                          type="text"
                                          value={newTagDraft}
                                          onChange={(e) => setNewTagDraft(e.target.value)}
                                          onKeyDown={(e) => {
                                            if (e.key === "Enter" || e.key === "," || e.key === ";") {
                                              e.preventDefault()
                                              const raw = newTagDraft.trim()
                                              if (!raw) return
                                              if (!/^[a-zA-Z0-9._\-+]+$/.test(raw)) return
                                              if (editTags.includes(raw)) {
                                                setNewTagDraft("")
                                                return
                                              }
                                              setPendingTags([...editTags, raw])
                                              setNewTagDraft("")
                                            }
                                          }}
                                          placeholder={t("vmLxc.details.tagsPlaceholder")}
                                          className="h-7 text-sm px-2 rounded-sm bg-background border border-border focus:outline-none focus:ring-1 focus:ring-blue-500 min-w-[100px] flex-1"
                                        />
                                      )}
                                      {!resourcesEditMode && shownTags.length === 0 && (
                                        <span className="text-xs text-muted-foreground italic">
                                          {t("vmLxc.details.tagsNone")}
                                        </span>
                                      )}
                                    </div>
                                  </div>
                                )
                              })()}

                              {/* Start-on-host toggle. Tight `mt-1` because
                                  the tags block above is a companion of
                                  this row — same edit-gate, both flip
                                  together when Editar is pressed. Big
                                  margin here made the whole guest
                                  detail scroll further down for no
                                  reason. */}
                              <div
                                className={`mt-1 rounded-md p-3 flex items-center justify-between gap-3 ${
                                  resourcesEditMode ? "bg-accent" : ""
                                }`}
                              >
                                <div className="flex items-center gap-2 min-w-0">
                                  <Power className="h-4 w-4 text-blue-500 shrink-0" />
                                  <div className="text-sm font-medium text-foreground">
                                    {t("vmLxc.details.startOnBoot")}
                                  </div>
                                </div>
                                <Switch
                                  checked={pendingOnboot ?? !!vmDetails.config.onboot}
                                  disabled={!resourcesEditMode || savingOnboot}
                                  onCheckedChange={(v) => setPendingOnboot(v)}
                                  className={`data-[state=checked]:bg-blue-600 data-[state=unchecked]:bg-input border border-border ${!resourcesEditMode ? "opacity-60" : ""}`}
                                />
                              </div>

                              {/* IP Addresses with proper keys */}
                              {selectedVM?.type === "lxc" && vmDetails?.lxc_ip_info && (
                                <div className="mt-4 lg:mt-6">
                                  <h4 className="flex items-center gap-2 text-sm font-semibold text-foreground mb-3 uppercase tracking-wide">
                                    <Network className="h-4 w-4 text-blue-500" />
                                    {t("vmLxc.ipAddresses")}
                                  </h4>
                                  <div className="flex flex-wrap gap-2">
                                    {vmDetails.lxc_ip_info.real_ips.map((ip, index) => (
                                      <Badge
                                        key={`real-ip-${selectedVM.vmid}-${ip.replace(/[.:/]/g, "-")}-${index}`}
                                        variant="outline"
                                        className="bg-green-500/10 text-green-500 border-green-500/20"
                                      >
                                        {ip}
                                      </Badge>
                                    ))}
                                    {vmDetails.lxc_ip_info.docker_ips.map((ip, index) => (
                                      <Badge
                                        key={`docker-ip-${selectedVM.vmid}-${ip.replace(/[.:/]/g, "-")}-${index}`}
                                        variant="outline"
                                        className="bg-yellow-500/10 text-yellow-500 border-yellow-500/20"
                                      >
                                        {ip} ({t("vmLxc.details.bridge")})
                                      </Badge>
                                    ))}
                                  </div>
                                </div>
                              )}

                              {showNotes && (
                                <div className="mt-6 pt-6 border-t border-border">
                                  <div className="flex items-center justify-between mb-3">
                                    <h4 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">
                                      {t("vmLxc.notes")}
                                    </h4>
                                    {!isEditingNotes && (
                                      <Button
                                        variant="outline"
                                        size="sm"
                                        onClick={handleEditNotes}
                                        className="text-xs h-9 w-9 sm:w-auto sm:px-3 p-0 sm:p-2 bg-transparent"
                                        aria-label={t("vmLxc.editNotes")}
                                      >
                                        <Settings2 className="h-3.5 w-3.5 sm:mr-1" />
                                        <span className="hidden sm:inline">{t("vmLxc.editNotes")}</span>
                                      </Button>
                                    )}
                                  </div>
                                  <div className="bg-muted/50 p-4 rounded-lg">
                                    {isEditingNotes ? (
                                      <div className="space-y-3">
                                        <textarea
                                          value={editedNotes}
                                          onChange={(e) => setEditedNotes(e.target.value)}
                                          className="w-full min-h-[200px] p-3 text-sm bg-background border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 font-mono"
                                          placeholder={t("vmLxc.enterNotes")}
                                        />
                                        <div className="flex gap-2 justify-end">
                                          <Button
                                            variant="outline"
                                            size="sm"
                                            onClick={handleCancelEditNotes}
                                            disabled={savingNotes}
                                            className="h-9 w-9 sm:w-auto sm:px-3 p-0 sm:p-2"
                                            aria-label={t("actions.cancel")}
                                          >
                                            <X className="h-3.5 w-3.5 sm:mr-1" />
                                            <span className="hidden sm:inline">{t("actions.cancel")}</span>
                                          </Button>
                                          <Button
                                            size="sm"
                                            onClick={handleSaveNotes}
                                            disabled={savingNotes}
                                            className="h-9 w-9 sm:w-auto sm:px-3 p-0 sm:p-2 bg-blue-600 hover:bg-blue-700 text-white"
                                            aria-label={savingNotes ? t("vmLxc.savingNotes") : t("actions.save")}
                                          >
                                            {savingNotes ? (
                                              <Loader2 className="h-3.5 w-3.5 sm:mr-1 animate-spin" />
                                            ) : (
                                              <Check className="h-3.5 w-3.5 sm:mr-1" />
                                            )}
                                            <span className="hidden sm:inline">
                                              {savingNotes ? t("vmLxc.savingNotes") : t("actions.save")}
                                            </span>
                                          </Button>
                                        </div>
                                      </div>
                                    ) : vmDetails.config.description ? (
                                      <>
                                        {(() => {
                                          // VM/CT notes come in two flavours and we mirror the way
                                          // the PVE web UI handles each:
                                          //   • HTML (ProxMenux/community-script helper output with
                                          //     <div align='center'>, tables, logos) → render the
                                          //     HTML verbatim. The stable `main` branch did exactly
                                          //     this with dangerouslySetInnerHTML — we keep that
                                          //     behaviour but pipe through DOMPurify so the audit
                                          //     Tier 2 #13 XSS sink stays closed.
                                          //   • Plain text / markdown (e.g. qBittorrent's
                                          //     `## qBittorrent LXC`) → marked turns it into
                                          //     headings + autolinks + line breaks, matching PVE.
                                          // Mixing the two paths breaks the HTML one because marked
                                          // collapses indentation / wraps inline runs and the
                                          // browser then ignores `align="center"`.
                                          let decoded: string
                                          try {
                                            decoded = decodeRecursively(vmDetails.config.description)
                                          } catch {
                                            return (
                                              <div className="text-sm text-red-500">
                                                {t("vmLxc.notesDecodeError")}
                                              </div>
                                            )
                                          }
                                          const looksLikeHtml = /<\/?[a-z][\s\S]*?>/i.test(decoded)
                                          let html: string
                                          if (looksLikeHtml) {
                                            html = decoded
                                          } else {
                                            try {
                                              html = marked.parse(decoded, {
                                                breaks: true,
                                                gfm: true,
                                                async: false,
                                              }) as string
                                            } catch {
                                              html = decoded.replace(/\n/g, "<br>")
                                            }
                                          }
                                          // Promote legacy `align` HTML attribute to a real inline
                                          // `style="text-align: …"` rule. Tailwind / parent CSS,
                                          // styled-jsx scoping quirks and Safari's UA stylesheet
                                          // can all swallow the bare `align` attribute on `<div>`
                                          // (it's HTML4 obsolete syntax). An inline style is
                                          // bullet-proof: highest specificity, no scope hash needed.
                                          DOMPurify.removeHook("afterSanitizeAttributes")
                                          DOMPurify.addHook("afterSanitizeAttributes", (node: Element) => {
                                            const a = node.getAttribute?.("align")
                                            if (a && /^(center|left|right)$/i.test(a)) {
                                              const cur = node.getAttribute("style") || ""
                                              const sep = cur && !cur.trim().endsWith(";") ? "; " : ""
                                              node.setAttribute(
                                                "style",
                                                `${cur}${sep}text-align: ${a.toLowerCase()}`,
                                              )
                                            }
                                            // Force `target=_blank` links to open in a new tab
                                            // safely (noopener prevents reverse-tabnabbing).
                                            if (node.tagName === "A" && node.getAttribute("target") === "_blank") {
                                              node.setAttribute("rel", "noopener noreferrer")
                                            }
                                          })
                                          const cleanHtml = DOMPurify.sanitize(html, {
                                            ALLOWED_TAGS: [
                                              "a", "p", "br", "div", "span",
                                              "h1", "h2", "h3", "h4", "h5", "h6",
                                              "img",
                                              "table", "thead", "tbody", "tr", "th", "td",
                                              "ul", "ol", "li",
                                              "strong", "em", "b", "i", "u", "code", "pre",
                                              "blockquote", "hr",
                                              "small", "sub", "sup",
                                            ],
                                            ALLOWED_ATTR: [
                                              "href", "src", "alt", "title", "target",
                                              "rel", "style", "class",
                                              "align", "width", "height",
                                              "colspan", "rowspan",
                                            ],
                                            ALLOWED_URI_REGEXP:
                                              /^(?:(?:https?|mailto|data:image\/(?:png|jpeg|jpg|gif|svg\+xml|webp)):|\/|#)/i,
                                            ADD_ATTR: ["target"],
                                          })
                                          return (
                                            <div
                                              className="text-sm text-foreground proxmenux-notes break-words"
                                              // eslint-disable-next-line react/no-danger
                                              dangerouslySetInnerHTML={{ __html: cleanHtml }}
                                            />
                                          )
                                        })()}
                                      </>
                                    ) : (
                                      <div className="text-sm text-muted-foreground italic">
                                        {t("vmLxc.noNotes")}
                                      </div>
                                    )}
                                  </div>
                                </div>
                              )}

                              {/* Extended info — always shown now. Used to be
                                  gated behind a "+ Info" button; the button
                                  was removed and this block is fully expanded
                                  so the user sees hardware/storage/network
                                  without extra clicks. The former border-t
                                  divider that separated the collapsed block
                                  from the resources grid was dropped too;
                                  the plain `mt-6` gives enough visual air. */}
                              <div className="mt-6 space-y-6">
                                  {selectedVM?.type === "lxc" && vmDetails?.hardware_info && (
                                    <div>
                                      <h4 className="flex items-center gap-2 text-sm font-semibold text-foreground mb-3 uppercase tracking-wide">
                                        <Container className="h-4 w-4 text-blue-500" />
                                        {t("vmLxc.containerConfiguration")}
                                      </h4>
                                      <div className="space-y-4">
                                        {/* Privileged Status */}
                                        {vmDetails.hardware_info.privileged !== null &&
                                          vmDetails.hardware_info.privileged !== undefined && (
                                            <div>
                                              <div className="flex items-center gap-1.5 text-xs text-muted-foreground mb-2">
                                                <Shield className="h-3.5 w-3.5" />
                                                <span>{t("vmLxc.details.privilegeLevel")}</span>
                                              </div>
                                              <Badge
                                                variant="outline"
                                                className={
                                                  vmDetails.hardware_info.privileged
                                                    ? "bg-yellow-500/10 text-yellow-500 border-yellow-500/20"
                                                    : "bg-green-500/10 text-green-500 border-green-500/20"
                                                }
                                              >
                                                {vmDetails.hardware_info.privileged ? t("vmLxc.details.privileged") : t("vmLxc.details.unprivileged")}
                                              </Badge>
                                            </div>
                                          )}

                                        {/* GPU Passthrough with proper keys */}
                                        {vmDetails.hardware_info.gpu_passthrough &&
                                          vmDetails.hardware_info.gpu_passthrough.length > 0 && (
                                            <div>
                                              <div className="flex items-center gap-1.5 text-xs text-muted-foreground mb-2">
                                                <Cpu className="h-3.5 w-3.5" />
                                                <span>{t("vmLxc.details.gpuPassthrough")}</span>
                                              </div>
                                              <div className="flex flex-wrap gap-2">
                                                {vmDetails.hardware_info.gpu_passthrough.map((gpu, index) => (
                                                  <Badge
                                                    key={`gpu-${selectedVM.vmid}-${index}-${gpu.replace(/[^a-zA-Z0-9]/g, "-").substring(0, 30)}`}
                                                    variant="outline"
                                                    className={
                                                      gpu.includes("NVIDIA")
                                                        ? "bg-green-500/10 text-green-500 border-green-500/20"
                                                        : "bg-purple-500/10 text-purple-500 border-purple-500/20"
                                                    }
                                                  >
                                                    {gpu}
                                                  </Badge>
                                                ))}
                                              </div>
                                            </div>
                                          )}

                                        {/* Hardware Devices with proper keys */}
                                        {vmDetails.hardware_info.devices &&
                                          vmDetails.hardware_info.devices.length > 0 && (
                                            <div>
                                              <div className="flex items-center gap-1.5 text-xs text-muted-foreground mb-2">
                                                <Server className="h-3.5 w-3.5" />
                                                <span>{t("vmLxc.details.hardwareDevices")}</span>
                                              </div>
                                              <div className="flex flex-wrap gap-2">
                                                {vmDetails.hardware_info.devices.map((device, index) => (
                                                  <Badge
                                                    key={`device-${selectedVM.vmid}-${index}-${device.replace(/[^a-zA-Z0-9]/g, "-").substring(0, 30)}`}
                                                    variant="outline"
                                                    className="bg-blue-500/10 text-blue-500 border-blue-500/20"
                                                  >
                                                    {device}
                                                  </Badge>
                                                ))}
                                              </div>
                                            </div>
                                          )}
                                      </div>
                                    </div>
                                  )}

                                  {/* Hardware Section */}
                                  <div>
                                    <h4 className="flex items-center gap-2 text-sm font-semibold text-foreground mb-3 uppercase tracking-wide">
                                      <Settings2 className="h-4 w-4 text-blue-500" />
                                      {t("vmLxc.details.hardware")}
                                    </h4>
                                    <div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
                                      {vmDetails.config.sockets && (
                                        <div>
                                          <div className="text-xs text-muted-foreground mb-1">{t("vmLxc.details.cpuSockets")}</div>
                                          <div className="font-medium text-foreground">{vmDetails.config.sockets}</div>
                                        </div>
                                      )}
                                      {vmDetails.config.cpu && (
                                        <div className="col-span-2">
                                          <div className="text-xs text-muted-foreground mb-1">{t("vmLxc.details.cpuType")}</div>
                                          <div className="font-medium text-foreground text-sm font-mono">
                                            {vmDetails.config.cpu}
                                          </div>
                                        </div>
                                      )}
                                      {vmDetails.config.numa !== undefined && (
                                        <div>
                                          <div className="text-xs text-muted-foreground mb-1">{t("vmLxc.details.numa")}</div>
                                          <Badge
                                            variant="outline"
                                            className={
                                              vmDetails.config.numa
                                                ? "bg-green-500/10 text-green-500 border-green-500/20"
                                                : "bg-gray-500/10 text-gray-500 border-gray-500/20"
                                            }
                                          >
                                            {vmDetails.config.numa ? t("vmLxc.details.enabled") : t("vmLxc.details.disabled")}
                                          </Badge>
                                        </div>
                                      )}
                                      {vmDetails.config.bios && (
                                        <div>
                                          <div className="text-xs text-muted-foreground mb-1">{t("vmLxc.details.bios")}</div>
                                          <div className="font-medium text-foreground">{vmDetails.config.bios}</div>
                                        </div>
                                      )}
                                      {vmDetails.config.machine && (
                                        <div>
                                          <div className="text-xs text-muted-foreground mb-1">{t("vmLxc.details.machineType")}</div>
                                          <div className="font-medium text-foreground">{vmDetails.config.machine}</div>
                                        </div>
                                      )}
                                      {vmDetails.config.vga && (
                                        <div>
                                          <div className="text-xs text-muted-foreground mb-1">{t("vmLxc.details.vga")}</div>
                                          <div className="font-medium text-foreground">{vmDetails.config.vga}</div>
                                        </div>
                                      )}
                                      {vmDetails.config.agent !== undefined && (
                                        <div>
                                          <div className="text-xs text-muted-foreground mb-1">{t("vmLxc.details.qemuAgent")}</div>
                                          <Badge
                                            variant="outline"
                                            className={
                                              vmDetails.config.agent
                                                ? "bg-green-500/10 text-green-500 border-green-500/20"
                                                : "bg-gray-500/10 text-gray-500 border-gray-500/20"
                                            }
                                          >
                                            {vmDetails.config.agent ? t("vmLxc.details.enabled") : t("vmLxc.details.disabled")}
                                          </Badge>
                                        </div>
                                      )}
                                      {vmDetails.config.tablet !== undefined && (
                                        <div>
                                          <div className="text-xs text-muted-foreground mb-1">{t("vmLxc.details.tabletPointer")}</div>
                                          <Badge
                                            variant="outline"
                                            className={
                                              vmDetails.config.tablet
                                                ? "bg-green-500/10 text-green-500 border-green-500/20"
                                                : "bg-gray-500/10 text-gray-500 border-gray-500/20"
                                            }
                                          >
                                            {vmDetails.config.tablet ? t("vmLxc.details.enabled") : t("vmLxc.details.disabled")}
                                          </Badge>
                                        </div>
                                      )}
                                      {vmDetails.config.localtime !== undefined && (
                                        <div>
                                          <div className="text-xs text-muted-foreground mb-1">{t("vmLxc.details.localTime")}</div>
                                          <Badge
                                            variant="outline"
                                            className={
                                              vmDetails.config.localtime
                                                ? "bg-green-500/10 text-green-500 border-green-500/20"
                                                : "bg-gray-500/10 text-gray-500 border-gray-500/20"
                                            }
                                          >
                                            {vmDetails.config.localtime ? t("vmLxc.details.enabled") : t("vmLxc.details.disabled")}
                                          </Badge>
                                        </div>
                                      )}
                                    </div>
                                  </div>

                                  {/* Storage Section — human-readable breakdown
                                      per disk plus the raw config string in a
                                      collapsible details block, mirroring the
                                      Network section. */}
                                  {(() => {
                                    // Parse a Proxmox disk config string into
                                    //   { storage, volume, path, options }
                                    // Handles both LVM-style volumes
                                    // "local-lvm:vm-101-disk-0,size=6G" and
                                    // passthrough paths "/dev/disk/by-id/...".
                                    const parseDisk = (raw: string) => {
                                      const parts = raw.split(",")
                                      const first = parts[0] || ""
                                      const options: Record<string, string> = {}
                                      parts.slice(1).forEach((p) => {
                                        const eq = p.indexOf("=")
                                        if (eq > 0) {
                                          options[p.slice(0, eq).trim()] = p.slice(eq + 1).trim()
                                        }
                                      })
                                      let storage = "", volume = "", path = ""
                                      if (first.startsWith("/")) {
                                        path = first
                                      } else if (first.includes(":")) {
                                        const [s, v] = first.split(":")
                                        storage = s
                                        volume = v
                                      } else {
                                        volume = first
                                      }
                                      return { storage, volume, path, options }
                                    }
                                    // Convert Proxmox size strings ("6G",
                                    // "3907018584K", "40G", "4M") to a
                                    // consistent GB/TB display.
                                    const humanSize = (s: string): string => {
                                      if (!s) return ""
                                      const m = s.match(/^(\d+(?:\.\d+)?)([KMGT])?$/i)
                                      if (!m) return s
                                      const n = parseFloat(m[1])
                                      const unit = (m[2] || "").toUpperCase()
                                      const bytes =
                                        unit === "K" ? n * 1024 :
                                        unit === "M" ? n * 1024 ** 2 :
                                        unit === "G" ? n * 1024 ** 3 :
                                        unit === "T" ? n * 1024 ** 4 : n
                                      if (bytes >= 1024 ** 4) return `${(bytes / 1024 ** 4).toFixed(2)} TB`
                                      if (bytes >= 1024 ** 3) return `${(bytes / 1024 ** 3).toFixed(bytes < 10 * 1024 ** 3 ? 1 : 0)} GB`
                                      if (bytes >= 1024 ** 2) return `${(bytes / 1024 ** 2).toFixed(0)} MB`
                                      return s
                                    }
                                    const DField = ({ label, value, mono, className }:
                                      { label: string; value: string; mono?: boolean; className?: string }) => (
                                      <div className="flex flex-col gap-0.5">
                                        <span className="text-[10px] uppercase tracking-wide text-muted-foreground">{label}</span>
                                        <span className={`text-foreground ${mono ? "font-mono text-xs" : "text-sm"} ${className || ""}`}>{value}</span>
                                      </div>
                                    )
                                    const renderDisk = (label: string, raw: string, keyId: string) => {
                                      const d = parseDisk(raw)
                                      return (
                                        <div key={keyId} className="bg-muted/30 rounded-md p-3 space-y-3">
                                          <div className="flex items-center gap-2 flex-wrap">
                                            <HardDrive className="h-4 w-4 text-purple-500 flex-shrink-0" />
                                            <span className="text-sm font-semibold text-foreground">{label}</span>
                                            {d.storage && (
                                              <span className="text-xs text-orange-500 font-mono">
                                                {d.storage}
                                              </span>
                                            )}
                                            {d.options.size && (
                                              <span className="text-xs text-cyan-500 font-mono">
                                                {humanSize(d.options.size)}
                                              </span>
                                            )}
                                          </div>
                                          <div className="grid grid-cols-2 sm:grid-cols-3 gap-x-4 gap-y-2">
                                            {d.volume && <DField label={t("vmLxc.details.volume")} value={d.volume} mono />}
                                            {d.path && <DField label={t("vmLxc.details.path")} value={d.path} mono className="break-all" />}
                                            {d.options.ssd === "1" && <DField label={t("vmLxc.details.media")} value="SSD" />}
                                            {d.options.discard && <DField label={t("vmLxc.details.discard")} value={d.options.discard} />}
                                            {d.options.iothread === "1" && <DField label="IOThread" value={t("vmLxc.details.on")} />}
                                            {d.options.cache && <DField label={t("vmLxc.details.cache")} value={d.options.cache} />}
                                            {d.options.aio && <DField label="AIO" value={d.options.aio} />}
                                            {d.options.backup === "0" && <DField label={t("vmLxc.details.backup")} value={t("vmLxc.details.excluded")} className="text-red-500" />}
                                            {d.options.backup === "1" && <DField label={t("vmLxc.details.backup")} value={t("vmLxc.details.included")} />}
                                            {d.options.replicate === "0" && <DField label={t("vmLxc.details.replicate")} value={t("vmLxc.details.off")} />}
                                            {d.options.efitype && <DField label={t("vmLxc.details.efiType")} value={d.options.efitype} />}
                                            {d.options.pre_enrolled_keys && <DField label={t("vmLxc.details.preEnrolledKeys")} value={d.options.pre_enrolled_keys} />}
                                            {d.options.serial && <DField label={t("vmLxc.details.serial")} value={d.options.serial} mono />}
                                            {d.options.mp && <DField label={t("vmLxc.details.mountPoint")} value={d.options.mp} mono />}
                                            {d.options.acl && <DField label="ACL" value={d.options.acl} />}
                                          </div>
                                          <details className="text-xs">
                                            <summary className="cursor-pointer text-muted-foreground hover:text-foreground">{t("vmLxc.details.rawConfig")}</summary>
                                            <div className="mt-1 font-mono text-foreground break-all bg-background/50 p-2 rounded">
                                              {raw}
                                            </div>
                                          </details>
                                        </div>
                                      )
                                    }
                                    return (
                                      <div>
                                        <h4 className="flex items-center gap-2 text-sm font-semibold text-foreground mb-3 uppercase tracking-wide">
                                          <HardDrive className="h-4 w-4 text-blue-500" />
                                          {t("vmLxc.details.storage")}
                                        </h4>
                                        <div className="space-y-3">
                                          {vmDetails.config.scsihw && (
                                            <div className="flex items-center gap-2 text-sm">
                                              <span className="text-xs uppercase tracking-wide text-muted-foreground">{t("vmLxc.details.scsiController")}:</span>
                                              <span className="font-mono text-foreground">{vmDetails.config.scsihw}</span>
                                            </div>
                                          )}
                                          {vmDetails.config.rootfs && renderDisk(t("vmLxc.details.rootFilesystem"), vmDetails.config.rootfs as string, "rootfs")}
                                          {Object.keys(vmDetails.config)
                                            .filter((key) => key.match(/^(scsi|sata|ide|virtio)\d+$/))
                                            .sort()
                                            .map((diskKey) => renderDisk(
                                              diskKey.toUpperCase().replace(/(\d+)/, " $1"),
                                              vmDetails.config[diskKey] as string,
                                              `disk-${selectedVM.vmid}-${diskKey}`,
                                            ))}
                                          {vmDetails.config.efidisk0 && renderDisk(t("vmLxc.details.efiDisk"), vmDetails.config.efidisk0 as string, "efidisk0")}
                                          {vmDetails.config.tpmstate0 && renderDisk(t("vmLxc.details.tpmState"), vmDetails.config.tpmstate0 as string, "tpmstate0")}
                                          {Object.keys(vmDetails.config)
                                            .filter((key) => key.match(/^mp\d+$/))
                                            .sort()
                                            .map((mpKey) => renderDisk(
                                              t("vmLxc.details.mountPointIndexed", { index: mpKey.replace("mp", "") }),
                                              vmDetails.config[mpKey] as string,
                                              `mp-${selectedVM.vmid}-${mpKey}`,
                                            ))}
                                        </div>
                                      </div>
                                    )
                                  })()}

                                  {/* Network Section */}
                                  <div>
                                    <h4 className="flex items-center gap-2 text-sm font-semibold text-foreground mb-3 uppercase tracking-wide">
                                      <Network className="h-4 w-4 text-blue-500" />
                                      {t("vmLxc.details.network")}
                                    </h4>
                                    <div className="space-y-3">
                                      {/* Network Interfaces with proper keys.
                                          Renders BOTH a human-readable
                                          breakdown (bridge, IP, gw, MAC,
                                          host iface) AND the raw config
                                          string so power users still see
                                          the underlying Proxmox config. */}
                                      {Object.keys(vmDetails.config)
                                        .filter((key) => key.match(/^net\d+$/))
                                        .map((netKey) => {
                                          const raw = vmDetails.config[netKey] as string
                                          // Parse "name=eth0,bridge=vmbr0,gw=1.2.3.4,..."
                                          const parsed: Record<string, string> = {}
                                          raw.split(",").forEach((pair) => {
                                            const eq = pair.indexOf("=")
                                            if (eq > 0) {
                                              parsed[pair.slice(0, eq).trim()] =
                                                pair.slice(eq + 1).trim()
                                            } else if (pair && !parsed.model) {
                                              // bare "virtio" / "e1000" → NIC model
                                              parsed.model = pair.trim()
                                            }
                                          })
                                          const idx = netKey.replace("net", "")
                                          // For VMs, the host-side iface is
                                          // tap<vmid>i<idx>; for LXC it's
                                          // veth<vmid>i<idx>. Surface it so
                                          // users can correlate with the
                                          // "VM & LXC Network Interfaces"
                                          // card on the network page.
                                          const hostIface = selectedVM.type === "lxc"
                                            ? `veth${selectedVM.vmid}i${idx}`
                                            : `tap${selectedVM.vmid}i${idx}`
                                          const Field = ({ label, value, mono }:
                                            { label: string; value: string; mono?: boolean }) => (
                                            <div className="flex flex-col gap-0.5">
                                              <span className="text-[10px] uppercase tracking-wide text-muted-foreground">{label}</span>
                                              <span className={`text-foreground ${mono ? "font-mono text-xs" : "text-sm"}`}>{value}</span>
                                            </div>
                                          )
                                          return (
                                            <div key={`net-${selectedVM.vmid}-${netKey}`}
                                                 className="bg-muted/30 rounded-md p-3 space-y-3">
                                              <div className="flex items-center gap-2 flex-wrap">
                                                <EthernetPort className="h-4 w-4 text-green-500 flex-shrink-0" />
                                                <span className="text-sm font-semibold text-foreground">
                                                  {t("vmLxc.details.networkInterface", { index: idx })}
                                                </span>
                                                {parsed.name && (
                                                  <span className="text-xs text-muted-foreground font-mono">
                                                    ({parsed.name})
                                                  </span>
                                                )}
                                                <span className="text-xs text-orange-500 font-mono">
                                                  {t("vmLxc.details.hostInterface", { interface: hostIface })}
                                                </span>
                                              </div>
                                              <div className="grid grid-cols-2 sm:grid-cols-3 gap-x-4 gap-y-2">
                                                {parsed.bridge && <Field label={t("vmLxc.details.bridge")} value={parsed.bridge} mono />}
                                                {parsed.ip && <Field label="IP" value={parsed.ip} mono />}
                                                {parsed.ip6 && <Field label="IPv6" value={parsed.ip6} mono />}
                                                {parsed.gw && <Field label={t("vmLxc.details.gateway")} value={parsed.gw} mono />}
                                                {parsed.gw6 && <Field label={t("vmLxc.details.gatewayV6")} value={parsed.gw6} mono />}
                                                {parsed.hwaddr && <Field label="MAC" value={parsed.hwaddr.toUpperCase()} mono />}
                                                {parsed.virtio && <Field label="MAC" value={parsed.virtio.toUpperCase()} mono />}
                                                {parsed.e1000 && <Field label="MAC" value={parsed.e1000.toUpperCase()} mono />}
                                                {parsed.type && <Field label={t("vmLxc.details.type")} value={parsed.type} mono />}
                                                {parsed.tag && <Field label="VLAN" value={parsed.tag} mono />}
                                                {parsed.mtu && <Field label="MTU" value={parsed.mtu} mono />}
                                                {parsed.rate && <Field label={t("vmLxc.details.rateLimit")} value={`${parsed.rate} MB/s`} mono />}
                                                {parsed.firewall === "1" && <Field label={t("vmLxc.details.firewall")} value={t("vmLxc.details.enabled")} />}
                                              </div>
                                              <details className="text-xs">
                                                <summary className="cursor-pointer text-muted-foreground hover:text-foreground">{t("vmLxc.details.rawConfig")}</summary>
                                                <div className="mt-1 font-mono text-green-500 break-all bg-background/50 p-2 rounded">
                                                  {raw}
                                                </div>
                                              </details>
                                            </div>
                                          )
                                        })}
                                      <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
                                        {vmDetails.config.nameserver && (
                                          <div>
                                            <div className="text-xs text-muted-foreground mb-1">{t("vmLxc.details.dnsNameserver")}</div>
                                            <div className="font-medium text-foreground font-mono">
                                              {vmDetails.config.nameserver}
                                            </div>
                                          </div>
                                        )}
                                        {vmDetails.config.searchdomain && (
                                          <div>
                                            <div className="text-xs text-muted-foreground mb-1">{t("vmLxc.details.searchDomain")}</div>
                                            <div className="font-medium text-foreground">
                                              {vmDetails.config.searchdomain}
                                            </div>
                                          </div>
                                        )}
                                        {vmDetails.config.hostname && (
                                          <div>
                                            <div className="text-xs text-muted-foreground mb-1">{t("vmLxc.details.hostname")}</div>
                                            <div className="font-medium text-foreground">
                                              {vmDetails.config.hostname}
                                            </div>
                                          </div>
                                        )}
                                      </div>
                                    </div>
                                  </div>

                                  {/* PCI Devices with proper keys */}
                                  {Object.keys(vmDetails.config).some((key) => key.match(/^hostpci\d+$/)) && (
                                    <div>
                                      <h4 className="flex items-center gap-2 text-sm font-semibold text-foreground mb-3 uppercase tracking-wide">
                                        <Cpu className="h-4 w-4 text-blue-500" />
                                        {t("vmLxc.details.pciPassthrough")}
                                      </h4>
                                      <div className="space-y-3">
                                        {Object.keys(vmDetails.config)
                                          .filter((key) => key.match(/^hostpci\d+$/))
                                          .map((pciKey) => (
                                            <div key={`pci-${selectedVM.vmid}-${pciKey}`}>
                                              <div className="text-xs text-muted-foreground mb-1">
                                                {pciKey.toUpperCase().replace(/(\d+)/, " $1")}
                                              </div>
                                              <div className="font-medium text-purple-500 text-sm break-all font-mono bg-muted/50 p-2 rounded">
                                                {vmDetails.config[pciKey]}
                                              </div>
                                            </div>
                                          ))}
                                      </div>
                                    </div>
                                  )}

                                  {/* USB Devices with proper keys */}
                                  {Object.keys(vmDetails.config).some((key) => key.match(/^usb\d+$/)) && (
                                    <div>
                                      <h4 className="flex items-center gap-2 text-sm font-semibold text-foreground mb-3 uppercase tracking-wide">
                                        <Server className="h-4 w-4 text-blue-500" />
                                        {t("vmLxc.details.usbDevices")}
                                      </h4>
                                      <div className="space-y-3">
                                        {Object.keys(vmDetails.config)
                                          .filter((key) => key.match(/^usb\d+$/))
                                          .map((usbKey) => (
                                            <div key={`usb-${selectedVM.vmid}-${usbKey}`}>
                                              <div className="text-xs text-muted-foreground mb-1">
                                                {usbKey.toUpperCase().replace(/(\d+)/, " $1")}
                                              </div>
                                              <div className="font-medium text-blue-500 text-sm break-all font-mono bg-muted/50 p-2 rounded">
                                                {vmDetails.config[usbKey]}
                                              </div>
                                            </div>
                                          ))}
                                      </div>
                                    </div>
                                  )}

                                  {/* Serial Ports with proper keys */}
                                  {Object.keys(vmDetails.config).some((key) => key.match(/^serial\d+$/)) && (
                                    <div>
                                      <h4 className="flex items-center gap-2 text-sm font-semibold text-foreground mb-3 uppercase tracking-wide">
                                        <Terminal className="h-4 w-4 text-blue-500" />
                                        {t("vmLxc.details.serialPorts")}
                                      </h4>
                                      <div className="space-y-3">
                                        {Object.keys(vmDetails.config)
                                          .filter((key) => key.match(/^serial\d+$/))
                                          .map((serialKey) => (
                                            <div key={`serial-${selectedVM.vmid}-${serialKey}`}>
                                              <div className="text-xs text-muted-foreground mb-1">
                                                {serialKey.toUpperCase().replace(/(\d+)/, " $1")}
                                              </div>
                                              <div className="font-medium text-foreground font-mono">
                                                {vmDetails.config[serialKey]}
                                              </div>
                                            </div>
                                          ))}
                                      </div>
                                    </div>
                                  )}
                              </div>
                            </CardContent>
                          </Card>
                        </>
                      ) : null}
                    </>
                  )}
                </div>
                )}

                {/* Updates Tab — LXC only. Three render branches:
                     (1) OCI-image CT      → immutable-image info panel
                     (2) OS packages       → pending list + Apply
                     (3) Helper-scripts app → Apply /usr/bin/update
                    Options row (backup + restart + storage) sits at the
                    bottom and gates both Apply buttons. */}
                {/* App Tab — user-registered application watch. Its own
                    self-contained component so this file stays sane;
                    calls the parent's mutate() on save/delete so the
                    header badge + Updates tab pick up the new state. */}
                {activeModalTab === "app" && selectedVM?.type === "lxc" && (() => {
                  const managedEntry = (selectedVM.app_watches || []).find(
                    (a) => a.managed_oci_app_id,
                  )
                  // Prefer vmDetails.lxc_ip_info (loaded per-modal, always
                  // up to date) over the bulk-fetched vmConfigs which may
                  // still be pending on first open. Fallback chain
                  // guarantees the panel gets an IP whenever the modal
                  // itself can display one in the header.
                  const ctIp =
                    (vmDetails as any)?.lxc_ip_info?.primary_ip ||
                    (vmDetails as any)?.lxc_ip_info?.real_ips?.[0] ||
                    vmConfigs[selectedVM.vmid] ||
                    null
                  return (
                    <LxcAppPanel
                      key={`${selectedVM.vmid}-${selectedVM.modal_cache_revision ?? 0}`}
                      vmid={selectedVM.vmid}
                      ctIp={ctIp}
                      onChange={() => mutate()}
                      initialData={getLxcAppsCached(selectedVM.vmid) ?? null}
                      managed={
                        managedEntry
                          ? {
                              managed_oci_app_id: managedEntry.managed_oci_app_id!,
                              name: managedEntry.name || t("vmLxc.appEditor.managedApp"),
                              installed_version: managedEntry.installed_version,
                              latest_version: managedEntry.latest_version,
                              update_available: managedEntry.update_available,
                              checked_at: managedEntry.checked_at,
                              error: managedEntry.error,
                            }
                          : null
                      }
                    />
                  )
                })()}

                {activeModalTab === "updates" && selectedVM?.type === "lxc" && (
                  <div className="space-y-4" key={`updates-${selectedVM.vmid}`}>
                    {/* Post-apply feedback strip.
                          Refreshing: transient loader while the /api/vms
                            poll delivers the new update_check counts.
                          Result: green banner if 0 pending, amber if any
                            packages didn't apply. Auto-dismisses after 6s
                            so the tab returns to its normal look.
                        The rest of the tab (branches 0/1/2 below) still
                        renders during both states so the user retains the
                        context — the strip sits on top as a header, it
                        doesn't replace the content. */}
                    {updatesRefreshing && (
                      <Card className="border-blue-500/30 bg-blue-500/5">
                        <CardContent className="p-3 flex items-center gap-2 text-sm">
                          <Loader2 className="h-4 w-4 animate-spin text-blue-400" />
                          <span className="text-blue-300">{t("vmLxc.updates.postApplyChecking")}</span>
                        </CardContent>
                      </Card>
                    )}
                    {!updatesRefreshing && updatesResult && updatesResult.pendingAfter === 0 && (
                      <Card className="border-emerald-500/30 bg-emerald-500/5">
                        <CardContent className="p-3 flex items-center gap-2 text-sm">
                          <CheckCircle2 className="h-4 w-4 text-emerald-400" />
                          <span className="text-emerald-300">
                            {updatesResult.appliedCount > 0
                              ? t("vmLxc.updates.postApplyAllOk", { count: updatesResult.appliedCount })
                              : t("vmLxc.updates.postApplyNothingPending")}
                          </span>
                        </CardContent>
                      </Card>
                    )}
                    {!updatesRefreshing && updatesResult && updatesResult.pendingAfter > 0 && (
                      <Card className="border-amber-500/30 bg-amber-500/5">
                        <CardContent className="p-3 flex items-start gap-2 text-sm">
                          <AlertCircle className="h-4 w-4 text-amber-400 mt-0.5 shrink-0" />
                          <div className="space-y-0.5">
                            <div className="text-amber-300 font-medium">
                              {t("vmLxc.updates.postApplyPartial", { pending: updatesResult.pendingAfter })}
                            </div>
                            {updatesResult.appliedCount > 0 && (
                              <div className="text-amber-300/80 text-xs">
                                {t("vmLxc.updates.postApplyPartialSubline", { applied: updatesResult.appliedCount })}
                              </div>
                            )}
                          </div>
                        </CardContent>
                      </Card>
                    )}

                    {/* Branch 0 — ProxMenux-managed OCI app (Secure Gateway).
                        Same state + Update button as the App tab so
                        the two panels never disagree, and either
                        origin (this tab / the App tab / Security →
                        Secure Gateway) triggers the same underlying
                        oci_manager action. */}
                    {/* Managed OCI-app updates — matches the Security →
                        Secure Gateway panel exactly (same layout, same
                        translucent purple button, same version
                        strings). Update triggered from either place
                        calls /api/oci/installed/<app_id>/update. Uses
                        `latest_version` (anchored to Tailscale by
                        oci_manager) so the button text agrees with
                        Security instead of drifting to alpine-base or
                        any other package that happens to be first
                        alphabetically. */}
                    {selectedVM.update_check?.managed_oci_app && (() => {
                      const aw = (selectedVM.app_watches || []).find(
                        (a) => a.managed_oci_app_id,
                      )
                      const appId = selectedVM.update_check.managed_oci_app
                      const hasUpdate = aw?.update_available === true
                      const upToDate = aw?.update_available === false && !!aw?.installed_version
                      const pkgCount = aw?.packages?.length || 0
                      const others = pkgCount > 1 ? pkgCount - 1 : 0
                      const lastChecked = aw?.checked_at
                        ? new Date(aw.checked_at).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
                        : "—"
                      return (
                        <Card className="border border-border bg-card/50">
                          <CardContent className="p-4 space-y-3">
                            <div className="flex items-center justify-between flex-wrap gap-2">
                              <div className="flex items-center gap-2">
                                <div className="p-1.5 rounded-md bg-emerald-500/10">
                                  <Shield className="h-4 w-4 text-emerald-400" />
                                </div>
                                <h3 className="text-sm font-semibold text-foreground">
                                  {aw?.name || t("vmLxc.updates.managedApp")}
                                </h3>
                              </div>
                              <Badge variant="outline" className="text-xs bg-emerald-500/10 text-emerald-400 border-emerald-500/30">
                                {t("vmLxc.updates.managedBadge")}
                              </Badge>
                            </div>
                            {hasUpdate ? (
                              <>
                                <div className="text-xs text-muted-foreground">
                                  {t("vmLxc.updates.lastCheckedAt", { date: lastChecked })} ·{" "}
                                  <span className="text-purple-400 font-medium">
                                    {t("vmLxc.updates.tailscaleAvailable", { version: aw?.latest_version || "" })}
                                  </span>
                                </div>
                                <div>
                                  <Button
                                    size="sm"
                                    onClick={async () => {
                                      try {
                                        await fetchApi(`/api/oci/installed/${appId}/update`, { method: "POST" })
                                        mutate()
                                      } catch { /* opening the App tab surfaces the error */ }
                                    }}
                                    className="bg-purple-600/15 hover:bg-purple-600/25 border border-purple-500/40 text-purple-300 hover:text-purple-200"
                                  >
                                    <ArrowUpCircle className="h-4 w-4 mr-1.5" />
                                    {t("vmLxc.updates.updateToVersion", { version: aw?.latest_version || "" })}
                                  </Button>
                                </div>
                                {others > 0 && (
                                  <div className="text-[11px] text-muted-foreground">
                                    {t(others === 1 ? "vmLxc.updates.otherPackagePending" : "vmLxc.updates.otherPackagesPending", { count: others })}
                                  </div>
                                )}
                              </>
                            ) : upToDate ? (
                              <div className="text-xs text-muted-foreground">
                                {t("vmLxc.updates.lastCheckedAt", { date: lastChecked })}
                                {aw?.installed_version && <> · Tailscale v{aw.installed_version}</>}
                                {" · "}<span className="text-emerald-400/90">{t("vmLxc.updates.noUpdatesAvailableChip")}</span>
                              </div>
                            ) : (
                              <div className="text-xs text-muted-foreground">
                                {t("vmLxc.updates.noManagedUpdateInfo")}
                              </div>
                            )}
                          </CardContent>
                        </Card>
                      )
                    })()}

                    {/* Branch 1 — OCI-image container */}
                    {!selectedVM.update_check?.managed_oci_app &&
                      selectedVM.update_check?.is_oci_lxc && (
                      <Card className="border border-border bg-card/50">
                        <CardContent className="p-4 space-y-2">
                          <div className="flex items-center gap-2 mb-1">
                            <div className="p-1.5 rounded-md bg-blue-500/10">
                              <Container className="h-4 w-4 text-blue-400" />
                            </div>
                            <h3 className="text-sm font-semibold text-foreground">
                              {t("vmLxc.updates.ociTitle")}
                            </h3>
                          </div>
                          <p className="text-sm text-muted-foreground leading-relaxed">
                            {t("vmLxc.updates.ociBody")}
                          </p>
                        </CardContent>
                      </Card>
                    )}

                    {/* Unified Updates card + Options card. When the CT
                        is a regular (non-OCI, non-managed-OCI) LXC, ALL
                        update paths live inside a single card so section
                        styling and the button footer stay uniform. The
                        Options card below carries manual toggles
                        (backup, restart) + a placeholder for the
                        upcoming scheduled-updates (cron) feature.

                        Button state → color:
                          • Purple  = updates pending  (Apply X, arrow icon)
                          • Green   = up to date       (X, no icon, no "Apply")
                        Individual actions stay with their section. The
                        optional reusable bulk action is configured in its
                        own card immediately before Options. */}
                    {!selectedVM.update_check?.managed_oci_app &&
                      !selectedVM.update_check?.is_oci_lxc && (() => {
                        const uc = selectedVM.update_check
                        const hasOsUpdates = !!uc?.available
                        const dockerAppWatch = (selectedVM.app_watches || []).find((a) => a.helper_slug === "docker")
                        const dockerRegistered = !!dockerAppWatch
                        const dockerEngineInstalledVersion = selectedVM.docker_inventory?.engine_version
                          || dockerAppWatch?.installed_version
                          || ""
                        const dockerEngineHasUpdate = dockerAppWatch?.update_available === true
                        const dockerEngineUpToDate = dockerAppWatch?.update_available === false
                          && !!dockerEngineInstalledVersion
                        const dockerEditing = !!dockerAppWatch && customCmdEditingApp === dockerAppWatch.id
                        const dockerSavedUpdateCommand = dockerAppWatch?.update_command?.trim() || ""
                        const dockerHasSavedCommand = !!dockerSavedUpdateCommand
                        const dockerUsesIntegratedUpdater = !dockerSavedUpdateCommand
                          || dockerSavedUpdateCommand === canonicalDockerEngineUpdateCommand
                        const dockerHasCustomCommand = !dockerUsesIntegratedUpdater
                        const dockerEffectiveUpdateCommand = dockerSavedUpdateCommand
                          || canonicalDockerEngineUpdateCommand
                        const dockerInventoryRefreshing = selectedVM.docker_inventory?.refreshing === true
                        const dockerInventoryAvailable = selectedVM.docker_inventory?.available === true
                        const dockerImages = dockerRegistered ? (selectedVM.docker_inventory?.images || []) : []
                        const dockerPending = dockerImages.filter((image) => image.update_available === true)
                        const helperExists = !!uc?.app_updater_present && uc?.helper_slug_source === "update_wrapper"
                        const helperName = uc?.helper_app_name || null
                        const helperUsesWebUpdater = uc?.helper_slug === "adguard"
                        const helperInferred = !helperExists && !!uc?.helper_slug && uc?.helper_slug !== "docker" && uc?.helper_slug_source === "tag_hostname"
                        const helperKnownNotUpdateable = !helperExists && !!uc?.helper_slug && uc?.helper_slug_source === "update_wrapper" && !!uc?.helper_updateable_known
                        const helperUnlisted = !helperExists && !!uc?.helper_slug && uc?.helper_slug_source === "update_wrapper" && !uc?.helper_updateable_known
                        // Registration, version tracking and update execution
                        // are independent capabilities. Every saved app belongs
                        // in Updates; installed_via only controls whether a
                        // version state can be shown.
                        const registeredApps = (selectedVM.app_watches || []).filter(
                          (a) => !a.managed_oci_app_id,
                        )
                        const helperSectionDetected = uc?.helper_slug !== "docker"
                          && (helperExists || helperKnownNotUpdateable || helperUnlisted || helperInferred)
                        const helperMatchingApps = registeredApps.filter(
                          (a) => !!a.helper_slug && a.helper_slug === uc?.helper_slug,
                        )
                        const helperOnlyApps = helperMatchingApps.filter(
                          (a) => !a.update_command,
                        )
                        // Every registered app gets exactly one Updates
                        // section. Docker and the CT-wide helper identity use
                        // their specialised sections; all other registrations
                        // use the generic section even when installed_via is
                        // empty (Web Link only) or dpkg/apk is OS-managed.
                        const appSections = registeredApps.filter((a) => {
                          // Docker owns a dedicated section containing
                          // Engine and image lifecycles. Its command editor
                          // is rendered there so Docker never appears twice.
                          if (a.helper_slug === "docker") return false
                          const hasCmd = !!(a.update_command && a.update_command.trim())
                          const isEditing = customCmdEditingApp === a.id
                          if (hasCmd || isEditing) return true
                          const isHelperOwnedApp = helperSectionDetected
                            && !!a.helper_slug
                            && a.helper_slug === uc?.helper_slug
                          if (isHelperOwnedApp) return false
                          return true
                        })
                        const scheduledAppChoices = registeredApps.filter((app) => {
                          if (app.helper_slug === "docker" || app.helper_slug === "adguard") return false
                          if (app.update_command?.trim()) return true
                          return helperExists && app.helper_slug === uc?.helper_slug
                        }).map((app) => ({ id: `app:${app.id}`, label: app.name }))
                        const versionTrackedScheduleAppIds = new Set(
                          registeredApps
                            .filter((app) => !!app.installed_via && app.helper_slug !== "docker")
                            .map((app) => `app:${app.id}`),
                        )
                        const scheduleHasVersionTrackedApps = scheduleTargets.includes("apps")
                          ? versionTrackedScheduleAppIds.size > 0
                          : scheduleTargets.some((target) => versionTrackedScheduleAppIds.has(target))
                        const composeProjects = new Map<string, LxcDockerComposeTarget>()
                        for (const target of selectedVM.docker_inventory?.compose_projects || []) {
                          composeProjects.set(`docker-compose:${target.project}`, target)
                        }
                        const standaloneContainers = new Set<string>()
                        for (const image of dockerImages) {
                          for (const target of image.update_targets || []) {
                            const id = `docker-compose:${target.project}`
                            if (!composeProjects.has(id)) composeProjects.set(id, target)
                          }
                          for (const container of image.standalone_containers || []) {
                            standaloneContainers.add(container)
                          }
                        }
                        const scheduleChoices = [
                          { id: "os", label: t("vmLxc.scheduled.targetOptionOs") },
                          ...scheduledAppChoices,
                          ...(dockerRegistered && selectedVM.docker_inventory?.available
                            ? [{ id: "docker-engine", label: t("vmLxc.scheduled.dockerEngineTarget") }]
                            : []),
                          ...Array.from(composeProjects, ([id, target]) => ({
                            id,
                            label: t("vmLxc.scheduled.dockerComposeTarget", { project: target.project }),
                          })),
                          ...Array.from(standaloneContainers, (container) => ({
                            id: `docker-container:${container}`,
                            label: t("vmLxc.scheduled.dockerContainerTarget", { container }),
                          })),
                        ]
                        const scheduleChoiceChecked = (id: string) =>
                          scheduleTargets.includes(id) || (id.startsWith("app:") && scheduleTargets.includes("apps"))
                        const toggleScheduleChoice = (id: string, checked: boolean) => {
                          let next = scheduleTargets.includes("apps")
                            ? [
                                ...scheduleTargets.filter((value) => value !== "apps"),
                                ...scheduledAppChoices.map((choice) => choice.id),
                              ]
                            : [...scheduleTargets]
                          next = checked
                            ? Array.from(new Set([...next, id]))
                            : next.filter((value) => value !== id)
                          setScheduleTargets(next)
                          const hasOs = next.includes("os")
                          const hasApp = next.some((value) => value !== "os")
                          setScheduleTarget(hasOs && hasApp ? "both" : hasOs ? "os" : "app")
                        }
                        const selectedScheduleLabels = scheduleChoices
                          .filter((choice) => scheduleChoiceChecked(choice.id))
                          .map((choice) => choice.label)
                        const bulkAppChoices = registeredApps.filter((app) => {
                          if (app.helper_slug === "docker") return false
                          if (app.update_command?.trim()) return true
                          return helperExists
                            && app.helper_slug === uc?.helper_slug
                            && app.helper_slug !== "adguard"
                        }).map((app) => {
                          const webLinkLogo = (app.ports || [])
                            .find((port) => Boolean(port.logo_url?.trim()))
                            ?.logo_url?.trim()
                          return {
                            id: `app:${app.id}`,
                            label: app.name || t("vmLxc.updates.applicationDefaultName"),
                            detail: "",
                            logoUrl: webLinkLogo || app.logo_url?.trim() || "",
                          }
                        })
                        const dockerUpdateUnits = dockerRegistered
                          ? (selectedVM.docker_inventory?.update_units || [])
                          : []
                        const bulkActionChoices = [
                          ...bulkAppChoices,
                          ...(dockerRegistered
                            ? [{
                                id: "docker-engine",
                                label: "Docker Engine",
                                detail: "",
                                logoUrl: "",
                              }]
                            : []),
                          ...dockerUpdateUnits.map((unit) => ({
                            id: unit.id,
                            label: unit.display_name || unit.primary_reference || unit.primary_service || unit.id,
                            detail: (unit.dependent_services || []).length
                              ? t("vmLxc.bulkUpdate.includesDependencies", {
                                  names: (unit.dependent_services || []).join(", "),
                                })
                              : "",
                            logoUrl: unit.logo_url || "",
                          })),
                        ]
                        const bulkChoices = [{
                          id: "os",
                          label: t("vmLxc.bulkUpdate.osTarget"),
                          detail: t("vmLxc.bulkUpdate.osRequired"),
                          logoUrl: "",
                        }, ...bulkActionChoices]
                        const bulkChoiceIds = new Set(bulkChoices.map((choice) => choice.id))
                        const bulkActionAppIds = new Set(bulkAppChoices.map((choice) => choice.id))
                        const bulkUnavailableApps = registeredApps.filter((app) => (
                          app.helper_slug !== "docker"
                          && !bulkActionAppIds.has(`app:${app.id}`)
                        ))
                        const pendingDockerBulkTargets = bulkTargets.filter((target) => (
                          target.startsWith("docker-unit:")
                          && !bulkChoiceIds.has(target)
                          && !dockerInventoryAvailable
                        ))
                        const staleBulkTargets = bulkTargets.filter((target) => (
                          target !== "os"
                          && !bulkChoiceIds.has(target)
                          && !pendingDockerBulkTargets.includes(target)
                        ))
                        const selectedBulkLabels = Array.from(new Set([
                          ...bulkChoices
                            .filter((choice) => bulkTargets.includes(choice.id))
                            .map((choice) => choice.label),
                          ...(pendingDockerBulkTargets.length
                            ? [t("vmLxc.bulkUpdate.dockerInventoryPending")]
                            : []),
                          ...staleBulkTargets.map((target) => target.startsWith("docker-unit:")
                            ? t("vmLxc.bulkUpdate.missingDockerTarget")
                            : target),
                        ]))
                        // A configured bulk action inherits the same
                        // three-state contract as each individual updater:
                        // pending when at least one selected target has a
                        // confirmed update, up to date only when every target
                        // has been checked and is current, otherwise unknown.
                        const selectedBulkUpdateStates = bulkTargets.map((target) => {
                          if (target === "os") {
                            if (!uc || uc.error) return null
                            return hasOsUpdates
                          }
                          if (target === "docker-engine") {
                            if (dockerEngineHasUpdate) return true
                            if (dockerEngineUpToDate) return false
                            return null
                          }
                          if (target.startsWith("app:")) {
                            const app = registeredApps.find((entry) => `app:${entry.id}` === target)
                            if (!app || !app.installed_via) return null
                            if (app.update_available === true) return true
                            if (app.update_available === false && app.installed_version) return false
                            return null
                          }
                          if (target.startsWith("docker-unit:")) {
                            if (dockerInventoryRefreshing || !dockerInventoryAvailable) return null
                            const unit = dockerUpdateUnits.find((entry) => entry.id === target)
                            if (unit?.update_available === true) return true
                            if (unit?.update_available === false) return false
                            return null
                          }
                          return null
                        })
                        const bulkHasPendingUpdates = selectedBulkUpdateStates.some((state) => state === true)
                        const bulkAllTargetsUpToDate = selectedBulkUpdateStates.length > 0
                          && selectedBulkUpdateStates.every((state) => state === false)
                        const toggleBulkChoice = (id: string, checked: boolean) => {
                          if (id === "os") return
                          setBulkTargets((current) => checked
                            ? Array.from(new Set(["os", ...current.filter((value) => value !== "os"), id]))
                            : current.filter((value) => value !== id))
                        }
                        const pendingBtnCls = "bg-purple-600/15 hover:bg-purple-600/25 border border-purple-500/40 text-purple-300 hover:text-purple-200"
                        const upToDateBtnCls = "bg-green-500/10 hover:bg-green-500/20 border border-green-500/30 text-green-400 hover:text-green-300"
                        const neutralBtnCls = "border border-input bg-background text-foreground/80 hover:bg-accent hover:text-accent-foreground"
                        return (
                          <>
                            <Card className="border border-border bg-card/50">
                              <CardContent className="p-4 divide-y divide-border/50">
                                {/* OS section */}
                                <div className="pb-4">
                                  <div className="flex items-center gap-2 mb-3">
                                    <Package className="h-4 w-4 text-muted-foreground" />
                                    <h3 className="text-sm font-semibold text-foreground">{t("vmLxc.updates.osPackagesTitle")}</h3>
                                  </div>
                                  <div className="text-xs text-muted-foreground mb-3 leading-relaxed">
                                    {t("vmLxc.updates.lastCheckedPrefix")}{" "}
                                    {uc?.last_check ? new Date(uc.last_check).toLocaleString() : "—"}
                                    {uc?.os_family && (
                                      <> · {t("vmLxc.updates.familyLabel")} <code className="text-foreground/80">{uc.os_family}</code></>
                                    )}
                                  </div>
                                  {hasOsUpdates ? (() => {
                                    const stored = uc!.packages?.length || 0
                                    const total = uc!.count || 0
                                    const sec = uc!.security_count || 0
                                    const truncated = total > stored
                                    if (!truncated && stored > 0) {
                                      return (
                                        <div className="divide-y divide-border/50">
                                          {uc!.packages.map((p) => (
                                            <div key={p.name} className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-0.5 sm:gap-2 py-2 text-sm">
                                              <span className="font-mono text-foreground/90 flex items-center gap-2 min-w-0">
                                                {p.security && (
                                                  <Shield className="h-4 w-4 text-green-500 flex-shrink-0" aria-label={t("vmLxc.updates.securityUpdateAria")} />
                                                )}
                                                <span className="truncate">{p.name}</span>
                                              </span>
                                              <span className="flex items-center gap-1.5 text-muted-foreground flex-shrink-0 font-mono text-xs sm:text-sm">
                                                <span>{p.current || "—"}</span>
                                                <span>→</span>
                                                <span className="text-foreground">{p.latest}</span>
                                              </span>
                                            </div>
                                          ))}
                                        </div>
                                      )
                                    }
                                    return (
                                      <div className="space-y-2 text-sm">
                                        <div className="flex items-center gap-2">
                                          <Package className="h-4 w-4 text-purple-300 flex-shrink-0" />
                                          <span><span className="font-semibold">{total}</span> {t(total === 1 ? "vmLxc.updates.packagePendingLabel" : "vmLxc.updates.packagesPendingLabel")}</span>
                                        </div>
                                        {sec > 0 && (
                                          <div className="flex items-center gap-2">
                                            <Shield className="h-4 w-4 text-green-500 flex-shrink-0" />
                                            <span><span className="font-semibold">{sec}</span> {t(sec === 1 ? "vmLxc.updates.securityUpdateLabel" : "vmLxc.updates.securityUpdatesLabel")}</span>
                                          </div>
                                        )}
                                      </div>
                                    )
                                  })() : (
                                    <div className="text-sm text-muted-foreground flex items-center gap-2">
                                      <CheckCircle2 className="h-4 w-4 text-green-500 flex-shrink-0" />
                                      {t("vmLxc.updates.noOsUpdatesPending")}
                                    </div>
                                  )}
                                  <div className="mt-3 flex justify-end">
                                    <Button
                                      size="sm"
                                      onClick={() => openApplyTerminal(selectedVM.vmid, "os")}
                                      className={hasOsUpdates ? pendingBtnCls : upToDateBtnCls}
                                    >
                                      {hasOsUpdates && <ArrowUpCircle className="h-4 w-4 mr-1.5" />}
                                      {hasOsUpdates ? t("vmLxc.updates.applyOsUpdate") : t("vmLxc.updates.osUpToDate")}
                                    </Button>
                                  </div>
                                </div>

                                {/* Docker has three independent lifecycles:
                                    Engine packages, Compose services and
                                    standalone containers. Keep all three in
                                    one registered-app section while exposing
                                    a concrete action for each target. */}
                                {dockerRegistered && dockerAppWatch && (
                                  <div className={dockerEditing ? "py-4 -mx-4 px-4 bg-accent [&_textarea]:bg-background" : "py-4"}>
                                    <div className="flex items-center justify-between gap-3 mb-3 min-w-0">
                                      <div className="flex items-center gap-2 min-w-0">
                                        <Container className="h-4 w-4 text-muted-foreground flex-shrink-0" />
                                        <h3 className="text-sm font-semibold text-foreground truncate">
                                          {t("vmLxc.updates.dockerAppTitle")}
                                        </h3>
                                      </div>
                                      {!dockerEditing && (
                                        <button
                                          type="button"
                                          onClick={() => openCustomCmdEditor(
                                            dockerAppWatch,
                                            canonicalDockerEngineUpdateCommand,
                                          )}
                                          className="h-8 px-3 text-xs rounded-md border border-border bg-background hover:bg-muted transition-colors inline-flex items-center gap-1.5 flex-shrink-0"
                                        >
                                          <Settings2 className="h-3.5 w-3.5" />
                                          {t("vmLxc.updates.editApp")}
                                        </button>
                                      )}
                                    </div>
                                    {dockerAppWatch.checked_at && !dockerEditing && (
                                      <div className="text-xs text-muted-foreground mb-3 leading-relaxed">
                                        {t("vmLxc.updates.lastCheckedPrefix")} {new Date(dockerAppWatch.checked_at).toLocaleString()}
                                      </div>
                                    )}
                                    {dockerEditing ? (
                                      <div className="space-y-3 mb-4">
                                        <div>
                                          <Label className="text-xs uppercase tracking-wider text-muted-foreground">
                                            {t("vmLxc.updates.customCommandLabel")}
                                          </Label>
                                          <Textarea
                                            value={customCmdDraft}
                                            onChange={(e) => setCustomCmdDraft(e.target.value)}
                                            placeholder={t("vmLxc.updates.customCommandPlaceholder")}
                                            className="font-mono text-xs mt-2 min-h-[100px]"
                                            maxLength={4096}
                                          />
                                        </div>
                                        <div className="flex items-center justify-between gap-2">
                                          <div>
                                            {dockerHasSavedCommand && (
                                              <button
                                                type="button"
                                                onClick={() => removeCustomCommand(selectedVM.vmid, dockerAppWatch)}
                                                disabled={customCmdSaving}
                                                className="h-8 px-3 text-xs rounded-md border border-red-500/30 bg-red-500/10 hover:bg-red-500/20 text-red-400 transition-colors inline-flex items-center gap-1.5 disabled:opacity-60"
                                              >
                                                <Trash2 className="h-3.5 w-3.5" />
                                                {t("vmLxc.updates.removeButton")}
                                              </button>
                                            )}
                                          </div>
                                          <div className="flex items-center gap-2">
                                            <button
                                              type="button"
                                              onClick={closeCustomCmdEditor}
                                              disabled={customCmdSaving}
                                              className="h-8 px-3 text-xs rounded-md border border-border bg-background hover:bg-muted transition-colors inline-flex items-center gap-1.5 disabled:opacity-60"
                                            >
                                              {t("vmLxc.updates.cancelButton")}
                                            </button>
                                            <button
                                              type="button"
                                              onClick={() => saveCustomCommand(selectedVM.vmid, dockerAppWatch)}
                                              disabled={customCmdSaving || !customCmdDraft.trim() || (
                                                customCmdDraft.trim() === dockerEffectiveUpdateCommand
                                              )}
                                              className="h-8 px-3 text-xs rounded-md bg-blue-600 hover:bg-blue-700 text-white transition-colors disabled:opacity-40 disabled:cursor-not-allowed inline-flex items-center gap-1.5"
                                            >
                                              {customCmdSaving ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Check className="h-3.5 w-3.5" />}
                                              {t("vmLxc.updates.saveButton")}
                                            </button>
                                          </div>
                                        </div>
                                      </div>
                                    ) : dockerEngineInstalledVersion && (
                                      <div className="mb-4">
                                        <div className="space-y-2 text-sm">
                                          {dockerEngineUpToDate ? (
                                            <div className="text-muted-foreground flex items-center gap-2">
                                              <CheckCircle2 className="h-4 w-4 text-green-500 flex-shrink-0" />
                                              <span>{t("vmLxc.updates.versionLabel", { version: dockerEngineInstalledVersion })}</span>
                                            </div>
                                          ) : (
                                            <div className="text-foreground flex items-center gap-2">
                                              <Package className="h-4 w-4 text-muted-foreground flex-shrink-0" />
                                              <span>
                                                {t("vmLxc.updates.installedLabel")}{" "}
                                                <code className="text-foreground/80">{dockerEngineInstalledVersion}</code>
                                              </span>
                                            </div>
                                          )}
                                          {dockerEngineHasUpdate && dockerAppWatch.latest_version && (
                                            <div className="flex items-center gap-2">
                                              <ArrowUpCircle className="h-4 w-4 text-purple-400 flex-shrink-0" />
                                              <span>{t("vmLxc.updates.upstreamAvailable", { version: dockerAppWatch.latest_version })}</span>
                                            </div>
                                          )}
                                        </div>
                                        <div className="mt-3 flex justify-end">
                                          <Button
                                            size="sm"
                                            onClick={() => openApplyTerminal(
                                              selectedVM.vmid,
                                              "app",
                                              dockerHasCustomCommand
                                                ? {
                                                    updateCommand: dockerAppWatch.update_command!,
                                                    appName: "Docker Engine",
                                                    dockerRefresh: true,
                                                  }
                                                : {
                                                    appName: "Docker Engine",
                                                    dockerEngine: true,
                                                    dockerRefresh: true,
                                                  },
                                            )}
                                            className={`${dockerEngineHasUpdate
                                              ? pendingBtnCls
                                              : dockerEngineUpToDate
                                                ? upToDateBtnCls
                                                : neutralBtnCls} flex-shrink-0`}
                                          >
                                            {dockerEngineHasUpdate && <ArrowUpCircle className="h-4 w-4 mr-1.5" />}
                                            {!dockerEngineHasUpdate && !dockerEngineUpToDate && <RefreshCw className="h-4 w-4 mr-1.5" />}
                                            {dockerEngineUpToDate
                                              ? t("vmLxc.updates.upToDate")
                                              : t("vmLxc.updates.updateDockerEngineOnly")}
                                          </Button>
                                        </div>
                                      </div>
                                    )}
                                    {selectedVM.docker_inventory && (<>
                                    <div className="border-t border-border/50 pt-4 mb-1 flex items-center justify-between gap-3">
                                      <div className="text-[10px] uppercase tracking-wider text-muted-foreground">
                                        {t("vmLxc.updates.dockerImagesSubheading")}
                                      </div>
                                      <button
                                        type="button"
                                        onClick={() => refreshDockerInventory(selectedVM.vmid)}
                                        disabled={dockerInventoryRefreshingVmid === selectedVM.vmid}
                                        className="h-8 px-3 text-xs rounded-md border border-border bg-background hover:bg-muted transition-colors inline-flex items-center gap-1.5 flex-shrink-0 disabled:opacity-60 disabled:cursor-not-allowed"
                                      >
                                        <RefreshCw className={`h-3.5 w-3.5 ${dockerInventoryRefreshingVmid === selectedVM.vmid ? "animate-spin" : ""}`} />
                                        {t("vmLxc.appEditor.refreshDockerImages")}
                                      </button>
                                    </div>
                                    <div className="text-xs text-muted-foreground mb-3 leading-relaxed">
                                      {t("vmLxc.updates.lastCheckedPrefix")} {selectedVM.docker_inventory.checked_at
                                        ? new Date(selectedVM.docker_inventory.checked_at).toLocaleString()
                                        : "—"}
                                    </div>
                                    {dockerInventoryRefreshing ? (
                                      <div className="text-sm text-muted-foreground flex items-center gap-2">
                                        <Loader2 className="h-4 w-4 animate-spin flex-shrink-0" />
                                        {t("vmLxc.updates.dockerInventoryStarting")}
                                      </div>
                                    ) : !dockerInventoryAvailable ? (
                                      <div className="text-sm text-muted-foreground flex items-center gap-2">
                                        <AlertTriangle className="h-4 w-4 text-amber-400 flex-shrink-0" />
                                        {t("vmLxc.updates.dockerInventoryUnavailable")}
                                      </div>
                                    ) : dockerImages.length === 0 ? (
                                      <div className="text-sm text-muted-foreground flex items-center gap-2">
                                        <CheckCircle2 className="h-4 w-4 text-green-500 flex-shrink-0" />
                                        {t("vmLxc.updates.noDockerImages")}
                                      </div>
                                    ) : (
                                      <div className="divide-y divide-border/50">
                                        {dockerImages.map((image) => (
                                          <div key={image.reference} className="py-3 text-sm">
                                            <div className="grid grid-cols-1 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center gap-2 sm:gap-4">
                                              <div className="flex items-start gap-3 min-w-0">
                                                <div className="relative h-9 w-9 flex-shrink-0 rounded-md bg-muted/40 flex items-center justify-center overflow-hidden">
                                                  <Container className="h-5 w-5 text-muted-foreground" />
                                                  {image.logo_url && (
                                                    <ThemeAwareLogo
                                                      src={image.logo_url}
                                                      className="absolute inset-0 h-9 w-9 rounded-md object-contain bg-card"
                                                    />
                                                  )}
                                                </div>
                                                <div className="min-w-0">
                                                  <span className="font-mono text-foreground/90 block truncate" title={image.reference}>
                                                    {image.reference}
                                                  </span>
                                                  <div className="mt-1 text-xs text-muted-foreground flex items-center gap-1.5">
                                                    <Package className="h-3.5 w-3.5 flex-shrink-0" />
                                                    {image.installed_version ? (
                                                      <span>
                                                        {t("vmLxc.updates.installedLabel")} {" "}
                                                        <code className="text-foreground/80">{image.installed_version}</code>
                                                      </span>
                                                    ) : (
                                                      <span>
                                                        {t("vmLxc.updates.imageInstalledTag")} {" "}
                                                        <code className="text-foreground/80">{image.tag}</code>
                                                      </span>
                                                    )}
                                                  </div>
                                                  {image.update_available === true && (
                                                    <div className="mt-1 text-purple-400 inline-flex items-center gap-1.5">
                                                      <ArrowUpCircle className="h-4 w-4 flex-shrink-0" />
                                                      {image.available_version
                                                        ? t("vmLxc.updates.upstreamAvailable", { version: image.available_version })
                                                        : t("vmLxc.updates.imageUpdateAvailable")}
                                                    </div>
                                                  )}
                                                  {image.update_available === false && (
                                                    <span className="sm:hidden mt-1 text-green-500 inline-flex items-center gap-1.5">
                                                      <CheckCircle2 className="h-4 w-4" />
                                                      {t("vmLxc.updates.imageUpToDate")}
                                                    </span>
                                                  )}
                                                  {image.update_available === null && (
                                                    <span className="sm:hidden mt-1 text-xs text-muted-foreground inline-flex" title={image.error || undefined}>
                                                      {t("vmLxc.updates.imageDigestUnknown")}
                                                    </span>
                                                  )}
                                                </div>
                                              </div>
                                              <div className="flex flex-wrap items-center justify-end gap-2">
                                                {image.update_available === false && (
                                                  <span className="hidden sm:inline-flex text-green-500 items-center gap-1.5 flex-shrink-0">
                                                    <CheckCircle2 className="h-4 w-4" />
                                                    {t("vmLxc.updates.imageUpToDate")}
                                                  </span>
                                                )}
                                                {image.update_available === null && (
                                                  <span className="hidden sm:inline-flex text-xs text-muted-foreground flex-shrink-0" title={image.error || undefined}>
                                                    {t("vmLxc.updates.imageDigestUnknown")}
                                                  </span>
                                                )}
                                                {image.update_available === true && (image.update_targets || []).map((target) => (
                                                  <Button
                                                    key={`${image.reference}-${target.project}`}
                                                    size="sm"
                                                    onClick={() => openApplyTerminal(selectedVM.vmid, "app", {
                                                      updateCommand: target.update_command,
                                                      appName: target.project,
                                                      dockerRefresh: true,
                                                    })}
                                                    className={pendingBtnCls}
                                                  >
                                                    <ArrowUpCircle className="h-4 w-4 mr-1.5" />
                                                    {t("vmLxc.updates.updateDockerImage")}
                                                  </Button>
                                                ))}
                                                {image.update_available === true && (image.standalone_containers || []).map((container) => (
                                                  <Button
                                                    key={`${image.reference}-${container}`}
                                                    size="sm"
                                                    onClick={() => openApplyTerminal(selectedVM.vmid, "app", {
                                                      appName: container,
                                                      dockerStandaloneTargets: [container],
                                                    })}
                                                    className={pendingBtnCls}
                                                  >
                                                    <ArrowUpCircle className="h-4 w-4 mr-1.5" />
                                                    {t("vmLxc.updates.recreateStandaloneContainer", { container })}
                                                  </Button>
                                                ))}
                                              </div>
                                            </div>
                                          </div>
                                        ))}
                                      </div>
                                    )}
                                    {dockerPending.length > 0 && (
                                      <div className="mt-3 text-xs text-purple-300">
                                        {t("vmLxc.updates.dockerPendingSummary", { count: dockerPending.length })}
                                      </div>
                                    )}
                                    </>)}
                                  </div>
                                )}

                                {/* Helper-scripts section — reuses the
                                    same header + body pattern as the
                                    custom-command app sections below so
                                    the two look homogeneous. Gated on
                                    the presence of a REGISTERED App
                                    Watch entry with matching helper_slug
                                    — we don't surface helper info for
                                    apps the user hasn't explicitly
                                    opted into. This keeps Updates tab
                                    honest: an unregistered auto-detected
                                    app has zero action here. When the
                                    matching entry exists, we render
                                    installed/upstream versions and the
                                    Apply button. Non-updateable and
                                    unlisted variants are also gated on
                                    registration so they don't nag about
                                    apps the user chose not to manage. */}
                                {helperSectionDetected && (() => {
                                  const matchApp = helperOnlyApps[0] || null
                                  if (!matchApp || customCmdEditingApp === matchApp.id) return null
                                  const helperEditorCommand = helperExists && !helperUsesWebUpdater
                                    ? canonicalHelperUpdateCommand(uc?.helper_slug)
                                    : ""
                                  const appWebUrl = helperUsesWebUpdater
                                    ? buildRegisteredAppUrl(selectedVM, matchApp.ports?.[0])
                                    : null
                                  const helperTracksVersion = !!matchApp.installed_via
                                  const hasUpd = helperTracksVersion && matchApp.update_available === true
                                  const upToD = helperTracksVersion && matchApp.update_available === false && !!matchApp.installed_version
                                  return (
                                    <div className="py-4">
                                      <div className="flex items-center justify-between gap-3 mb-3 min-w-0">
                                        <div className="flex items-center gap-2 min-w-0">
                                          <Package className="h-4 w-4 text-muted-foreground flex-shrink-0" />
                                          <h3 className="text-sm font-semibold text-foreground truncate">
                                            {helperName || t("vmLxc.updates.applicationDefaultName")}
                                          </h3>
                                        </div>
                                        <button
                                          type="button"
                                          onClick={() => openCustomCmdEditor(
                                            matchApp,
                                            helperEditorCommand,
                                          )}
                                          className="h-8 px-3 text-xs rounded-md border border-border bg-background hover:bg-muted transition-colors inline-flex items-center gap-1.5 flex-shrink-0"
                                        >
                                          <Settings2 className="h-3.5 w-3.5" />
                                          {helperEditorCommand
                                            ? t("vmLxc.updates.editApp")
                                            : t("vmLxc.updates.configureUpdater")}
                                        </button>
                                      </div>
                                      {helperTracksVersion && matchApp.checked_at && (
                                        <div className="text-xs text-muted-foreground mb-3 leading-relaxed">
                                          {t("vmLxc.updates.lastCheckedPrefix")} {new Date(matchApp.checked_at).toLocaleString()}
                                        </div>
                                      )}
                                      {/* Educational note — apps installed via
                                          Proxmox community-scripts (helper
                                          scripts) update through the built-in
                                          `/usr/bin/update` script that each
                                          helper drops on install. Surface the
                                          origin so the user knows why the
                                          Apply button here doesn't invoke
                                          apt/apk/custom_command flows. Only in
                                          the Updates tab — the App tab is
                                          about registration, not update
                                          plumbing. */}
                                      {helperExists && (
                                        <div className="mb-3 flex items-start gap-2.5">
                                          <img
                                            src="https://cdn.jsdelivr.net/gh/selfhst/icons@main/webp/proxmox-helper-scripts.webp"
                                            alt=""
                                            className="h-7 w-7 rounded-sm object-contain flex-shrink-0"
                                            onError={(e) => { (e.currentTarget as HTMLImageElement).style.display = "none" }}
                                          />
                                          <span className="text-xs text-muted-foreground leading-relaxed">
                                            {t("vmLxc.updates.installedByHelperPrefix")} <span className="text-foreground/80">{t("vmLxc.updates.helperScriptsName")}</span>
                                          </span>
                                        </div>
                                      )}
                                      {hasUpd ? (
                                        <div className="space-y-2 text-sm">
                                          <div className="flex items-center gap-2">
                                            <Package className="h-4 w-4 text-muted-foreground flex-shrink-0" />
                                            <span>{t("vmLxc.updates.installedLabel")} <code className="text-foreground/80">{matchApp!.installed_version}</code></span>
                                          </div>
                                          <div className="flex items-center gap-2">
                                            <ArrowUpCircle className="h-4 w-4 text-purple-400 flex-shrink-0" />
                                            <span>{t("vmLxc.updates.upstreamAvailable", { version: matchApp!.latest_version || "" })}</span>
                                          </div>
                                        </div>
                                      ) : upToD ? (
                                        <div className="text-sm text-muted-foreground flex items-center gap-2">
                                          <CheckCircle2 className="h-4 w-4 text-green-500 flex-shrink-0" />
                                          <span>{t("vmLxc.updates.upToDateAtLabel")} <code className="text-foreground/80">{matchApp!.installed_version}</code></span>
                                        </div>
                                      ) : helperTracksVersion ? (
                                        <p className="text-xs text-muted-foreground leading-relaxed">
                                          {t("vmLxc.updates.versionTrackingPending")}
                                        </p>
                                      ) : helperExists ? (
                                        <p className="text-xs text-muted-foreground leading-relaxed">
                                          {t("vmLxc.updates.versionTrackingNotConfigured")}
                                        </p>
                                      ) : null}
                                      {helperExists && !helperUsesWebUpdater && (() => {
                                        // Button state uses the matched
                                        // App Watch entry when present.
                                        // Without it we DON'T know the
                                        // version delta — showing "Up to
                                        // date" would be a false claim,
                                        // and "Apply update" implies a
                                        // pending upgrade we can't
                                        // confirm. Fall back to a neutral
                                        // "Run updater" so the user can
                                        // still force the helper's own
                                        // update script.
                                        const noState = !hasUpd && !upToD
                                        const cls = hasUpd ? pendingBtnCls : upToD ? upToDateBtnCls : neutralBtnCls
                                        const label = hasUpd ? t("vmLxc.updates.applyUpdate") : upToD ? t("vmLxc.updates.upToDate") : t("vmLxc.updates.runUpdater")
                                        return (
                                          <div className="mt-3 flex justify-end">
                                            <Button size="sm" onClick={() => openApplyTerminal(selectedVM.vmid, "app", { runHelper: true, appName: helperName || "" })} className={cls}>
                                              {hasUpd && <ArrowUpCircle className="h-4 w-4 mr-1.5" />}
                                              {noState && <RefreshCw className="h-4 w-4 mr-1.5" />}
                                              {label}
                                            </Button>
                                          </div>
                                        )
                                      })()}
                                      {helperUsesWebUpdater && (
                                        <div className="mt-3 space-y-3">
                                          <p className="text-xs text-muted-foreground leading-relaxed">
                                            {t("vmLxc.updates.adguardWebUpdateOnly")}
                                          </p>
                                          {appWebUrl && (
                                            <div className="flex justify-end">
                                              <Button size="sm" variant="outline" asChild>
                                                <a href={appWebUrl} target="_blank" rel="noopener noreferrer">
                                                  <ExternalLink className="h-4 w-4 mr-1.5" />
                                                  {t("vmLxc.updates.openAdguard")}
                                                </a>
                                              </Button>
                                            </div>
                                          )}
                                        </div>
                                      )}
                                      {!helperExists && !helperUsesWebUpdater && (
                                        <p className="text-xs text-muted-foreground leading-relaxed">
                                          {t("vmLxc.updates.noUpdateMethodBody")}
                                        </p>
                                      )}
                                    </div>
                                  )
                                })()}

                                {/* Generic registered-app sections. Version
                                    tracking and update execution are rendered
                                    independently so Web-Link-only apps can add
                                    an updater without configuring a detector. */}
                                {appSections.map((aw) => {
                                  const hasCmd = !!(aw.update_command && aw.update_command.trim())
                                  const editing = customCmdEditingApp === aw.id
                                  const tracksVersion = !!aw.installed_via
                                  const hasUpdate = tracksVersion && aw.update_available === true
                                  const upToDate = tracksVersion && aw.update_available === false && !!aw.installed_version
                                  const managedByOs = !hasCmd && (aw.installed_via === "dpkg" || aw.installed_via === "apk")
                                  return (
                                    <div key={`app-${aw.id}`} className={editing ? "py-4 -mx-4 px-4 bg-accent [&_input]:bg-background [&_textarea]:bg-background [&_[role=combobox]]:bg-background" : "py-4"}>
                                      <div className="flex items-center justify-between gap-3 mb-3 min-w-0">
                                        <div className="flex items-center gap-2 min-w-0">
                                          <Package className="h-4 w-4 text-muted-foreground flex-shrink-0" />
                                          <h3 className="text-sm font-semibold text-foreground truncate">
                                            {aw.name}
                                          </h3>
                                        </div>
                                        {!editing && (
                                          <button
                                            type="button"
                                            onClick={() => openCustomCmdEditor(aw)}
                                            className="h-8 px-3 text-xs rounded-md border border-border bg-background hover:bg-muted transition-colors inline-flex items-center gap-1.5 flex-shrink-0"
                                          >
                                            <Settings2 className="h-3.5 w-3.5" />
                                            {hasCmd
                                              ? t("vmLxc.updates.editApp")
                                              : t("vmLxc.updates.configureUpdater")}
                                          </button>
                                        )}
                                      </div>
                                      {tracksVersion && aw.checked_at && !editing && (
                                        <div className="text-xs text-muted-foreground mb-3 leading-relaxed">
                                          {t("vmLxc.updates.lastCheckedPrefix")} {new Date(aw.checked_at).toLocaleString()}
                                        </div>
                                      )}
                                      {editing ? (
                                        <div className="space-y-3">
                                          <div>
                                            <Label className="text-xs uppercase tracking-wider text-muted-foreground">
                                              {t("vmLxc.updates.customCommandLabel")}
                                            </Label>
                                            <Textarea
                                              value={customCmdDraft}
                                              onChange={(e) => setCustomCmdDraft(e.target.value)}
                                              placeholder={t("vmLxc.updates.customCommandPlaceholder")}
                                              className="font-mono text-xs mt-2 min-h-[100px]"
                                              maxLength={4096}
                                            />
                                          </div>
                                          <div className="flex items-center justify-between gap-2">
                                            <div>
                                              {hasCmd && (
                                                <button
                                                  type="button"
                                                  onClick={() => removeCustomCommand(selectedVM.vmid, aw)}
                                                  disabled={customCmdSaving}
                                                  className="h-8 px-3 text-xs rounded-md border border-red-500/30 bg-red-500/10 hover:bg-red-500/20 text-red-400 transition-colors inline-flex items-center gap-1.5 disabled:opacity-60"
                                                >
                                                  <Trash2 className="h-3.5 w-3.5" />
                                                  {t("vmLxc.updates.removeButton")}
                                                </button>
                                              )}
                                            </div>
                                            <div className="flex items-center gap-2">
                                              <button
                                                type="button"
                                                onClick={closeCustomCmdEditor}
                                                disabled={customCmdSaving}
                                                className="h-8 px-3 text-xs rounded-md border border-border bg-background hover:bg-muted transition-colors inline-flex items-center gap-1.5 disabled:opacity-60"
                                              >
                                                {t("vmLxc.updates.cancelButton")}
                                              </button>
                                              <button
                                                type="button"
                                                onClick={() => saveCustomCommand(selectedVM.vmid, aw)}
                                                disabled={customCmdSaving || !customCmdDraft.trim() || (
                                                  customCmdDraft.trim() === (aw.update_command || "").trim()
                                                )}
                                                className="h-8 px-3 text-xs rounded-md bg-blue-600 hover:bg-blue-700 text-white transition-colors disabled:opacity-40 disabled:cursor-not-allowed inline-flex items-center gap-1.5"
                                              >
                                                {customCmdSaving ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Check className="h-3.5 w-3.5" />}
                                                {t("vmLxc.updates.saveButton")}
                                              </button>
                                            </div>
                                          </div>
                                        </div>
                                      ) : (
                                        <>
                                          {hasUpdate ? (
                                            <div className="space-y-2 text-sm">
                                              <div className="flex items-center gap-2">
                                                <Package className="h-4 w-4 text-muted-foreground flex-shrink-0" />
                                                <span>{t("vmLxc.updates.installedLabel")} <code className="text-foreground/80">{aw.installed_version}</code></span>
                                              </div>
                                              <div className="flex items-center gap-2">
                                                <ArrowUpCircle className="h-4 w-4 text-purple-400 flex-shrink-0" />
                                                <span>{t("vmLxc.updates.upstreamAvailable", { version: aw.latest_version || "" })}</span>
                                              </div>
                                            </div>
                                          ) : upToDate ? (
                                            <div className="text-sm text-muted-foreground flex items-center gap-2">
                                              <CheckCircle2 className="h-4 w-4 text-green-500 flex-shrink-0" />
                                              <span>{t("vmLxc.updates.upToDateAtLabel")} <code className="text-foreground/80">{aw.installed_version}</code></span>
                                            </div>
                                          ) : tracksVersion && aw.installed_version ? (
                                            <div className="space-y-2 text-sm text-muted-foreground">
                                              <div className="flex items-center gap-2">
                                                <Package className="h-4 w-4 flex-shrink-0" />
                                                <span>{t("vmLxc.updates.installedLabel")} <code className="text-foreground/80">{aw.installed_version}</code></span>
                                              </div>
                                              <div>{t("vmLxc.updates.versionTrackingPendingShort")}</div>
                                            </div>
                                          ) : tracksVersion ? (
                                            <div className="text-sm text-muted-foreground">
                                              {t("vmLxc.updates.versionTrackingPendingShort")}
                                            </div>
                                          ) : hasCmd ? (
                                            <div className="text-sm text-muted-foreground">
                                              {t("vmLxc.updates.versionTrackingNotConfigured")}
                                            </div>
                                          ) : null}

                                          {hasCmd ? (
                                            <div className="mt-3 flex justify-end">
                                              <Button
                                                size="sm"
                                                onClick={() => openApplyTerminal(
                                                  selectedVM.vmid,
                                                  "app",
                                                  {
                                                    updateCommand: aw.update_command!,
                                                    appName: aw.name || "",
                                                  },
                                                )}
                                                className={hasUpdate ? pendingBtnCls : upToDate ? upToDateBtnCls : neutralBtnCls}
                                              >
                                                {hasUpdate && <ArrowUpCircle className="h-4 w-4 mr-1.5" />}
                                                {!hasUpdate && !upToDate && <RefreshCw className="h-4 w-4 mr-1.5" />}
                                                {hasUpdate
                                                  ? t("vmLxc.updates.applyUpdate")
                                                  : upToDate
                                                    ? t("vmLxc.updates.upToDate")
                                                    : t("vmLxc.updates.runUpdater")}
                                              </Button>
                                            </div>
                                          ) : (
                                            <p className={`text-xs text-muted-foreground leading-relaxed min-w-0 ${tracksVersion ? "mt-3" : ""}`}>
                                              {managedByOs
                                                ? t("vmLxc.updates.managedByOsPackages")
                                                : t("vmLxc.updates.noUpdateMethodBody")}
                                            </p>
                                          )}
                                        </>
                                      )}
                                    </div>
                                  )
                                })}

                              </CardContent>
                            </Card>

                            {/* Manual bulk update — deliberately separate from
                                both the per-method buttons above and the cron
                                automation in Options below. */}
                            {(bulkActionChoices.length > 0 || bulkConfigured) && (
                              <Card className={bulkEditMode ? "border border-border bg-card" : "border border-border bg-card/50"}>
                                <CardContent className="p-4 space-y-4">
                                  <div className="flex items-start justify-between gap-3">
                                    <div className="min-w-0">
                                      <div className="flex items-center gap-2">
                                        <RefreshCw className="h-4 w-4 text-muted-foreground flex-shrink-0" />
                                        <h3 className="text-sm font-semibold text-foreground">
                                          {t("vmLxc.bulkUpdate.title")}
                                        </h3>
                                      </div>
                                      <p className="text-xs text-muted-foreground mt-2 leading-relaxed">
                                        {t("vmLxc.bulkUpdate.description")}
                                      </p>
                                    </div>
                                    {!bulkEditMode && (
                                      <button
                                        type="button"
                                        onClick={() => {
                                          if (!bulkConfigured) {
                                            setBulkTargets(["os"])
                                            setBulkError(null)
                                          }
                                          setBulkEditMode(true)
                                        }}
                                        className="h-8 px-3 text-xs rounded-md border border-border bg-background hover:bg-muted transition-colors inline-flex items-center gap-1.5 flex-shrink-0"
                                      >
                                        <Settings2 className="h-3.5 w-3.5" />
                                        {bulkConfigured
                                          ? t("vmLxc.bulkUpdate.edit")
                                          : t("vmLxc.bulkUpdate.configure")}
                                      </button>
                                    )}
                                  </div>

                                  {bulkLoaded !== selectedVM.vmid ? (
                                    <div className="text-sm text-muted-foreground flex items-center gap-2">
                                      <Loader2 className="h-4 w-4 animate-spin" />
                                      {t("vmLxc.bulkUpdate.loading")}
                                    </div>
                                  ) : bulkEditMode ? (
                                    <div className="space-y-3">
                                      <div className="rounded-md border border-border bg-background/50 divide-y divide-border/60 max-w-xl">
                                        {bulkChoices.map((choice) => (
                                          <label
                                            key={choice.id}
                                            className={`flex items-start gap-3 px-3 py-2.5 text-sm ${choice.id === "os" ? "cursor-default" : "cursor-pointer hover:bg-muted/30"}`}
                                          >
                                            <Checkbox
                                              checked={bulkTargets.includes(choice.id)}
                                              onCheckedChange={(value) => toggleBulkChoice(choice.id, value === true)}
                                              disabled={choice.id === "os" || bulkSaving}
                                            />
                                            {choice.logoUrl ? (
                                              <ThemeAwareLogo
                                                src={choice.logoUrl}
                                                className="h-6 w-6 rounded object-contain flex-shrink-0"
                                              />
                                            ) : choice.id === "os" ? (
                                              <Package className="h-4 w-4 text-muted-foreground flex-shrink-0 mt-0.5" />
                                            ) : choice.id === "docker-engine" ? (
                                              <Container className="h-4 w-4 text-muted-foreground flex-shrink-0 mt-0.5" />
                                            ) : null}
                                            <span className="min-w-0">
                                              <span className="block text-foreground truncate">{choice.label}</span>
                                              {choice.detail && (
                                                <span className="block text-xs text-muted-foreground mt-0.5">
                                                  {choice.detail}
                                                </span>
                                              )}
                                            </span>
                                          </label>
                                        ))}
                                        {bulkUnavailableApps.map((app) => (
                                          <div key={`unavailable-${app.id}`} className="flex items-start gap-3 px-3 py-2.5 text-sm opacity-60">
                                            <Checkbox checked={false} disabled />
                                            <span className="min-w-0">
                                              <span className="block text-foreground truncate">
                                                {app.name || t("vmLxc.updates.applicationDefaultName")}
                                              </span>
                                              <span className="block text-xs text-muted-foreground mt-0.5">
                                                {t("vmLxc.bulkUpdate.noMethod")}
                                              </span>
                                            </span>
                                          </div>
                                        ))}
                                        {staleBulkTargets.map((target) => (
                                          <label key={`stale-${target}`} className="flex items-start gap-3 px-3 py-2.5 text-sm text-amber-400/80 cursor-pointer hover:bg-muted/30">
                                            <Checkbox
                                              checked
                                              onCheckedChange={(value) => toggleBulkChoice(target, value === true)}
                                              disabled={bulkSaving}
                                            />
                                            <span className="min-w-0 break-all">
                                              {target.startsWith("docker-unit:")
                                                ? t("vmLxc.bulkUpdate.missingDockerTarget")
                                                : target}
                                              <span className="block text-xs text-muted-foreground mt-0.5">
                                                {t("vmLxc.bulkUpdate.staleTarget")}
                                              </span>
                                            </span>
                                          </label>
                                        ))}
                                        {pendingDockerBulkTargets.length > 0 && (
                                          <div className="flex items-start gap-3 px-3 py-2.5 text-sm opacity-70">
                                            <Loader2 className="h-4 w-4 animate-spin flex-shrink-0 mt-0.5" />
                                            <span className="min-w-0 text-muted-foreground">
                                              {t("vmLxc.bulkUpdate.dockerInventoryPending")}
                                            </span>
                                          </div>
                                        )}
                                      </div>
                                      {bulkTargets.length < 2 && (
                                        <div className="text-xs text-red-400">
                                          {t("vmLxc.bulkUpdate.selectAtLeastOne")}
                                        </div>
                                      )}
                                      <div className="flex items-center justify-between gap-2 pt-1">
                                        <div>
                                          {bulkConfigured && (
                                            <button
                                              type="button"
                                              onClick={() => deleteBulkUpdate(selectedVM.vmid)}
                                              disabled={bulkSaving}
                                              className="h-8 px-3 text-xs rounded-md border border-red-500/30 bg-red-500/10 hover:bg-red-500/20 text-red-400 transition-colors inline-flex items-center gap-1.5 disabled:opacity-60"
                                            >
                                              <Trash2 className="h-3.5 w-3.5" />
                                              {t("vmLxc.bulkUpdate.delete")}
                                            </button>
                                          )}
                                        </div>
                                        <div className="flex items-center gap-2">
                                          <button
                                            type="button"
                                            onClick={() => {
                                              setBulkTargets(bulkPersistedTargets)
                                              setBulkEditMode(false)
                                              setBulkError(null)
                                            }}
                                            disabled={bulkSaving}
                                            className="h-8 px-3 text-xs rounded-md border border-border bg-background hover:bg-muted transition-colors inline-flex items-center gap-1.5 disabled:opacity-60"
                                          >
                                            {t("vmLxc.bulkUpdate.cancel")}
                                          </button>
                                          <button
                                            type="button"
                                            onClick={() => saveBulkUpdate(selectedVM.vmid)}
                                            disabled={bulkSaving || bulkTargets.length < 2 || staleBulkTargets.length > 0 || pendingDockerBulkTargets.length > 0}
                                            className="h-8 px-3 text-xs rounded-md bg-blue-600 hover:bg-blue-700 text-white transition-colors disabled:opacity-40 inline-flex items-center gap-1.5"
                                          >
                                            {bulkSaving
                                              ? <Loader2 className="h-3.5 w-3.5 animate-spin" />
                                              : <Check className="h-3.5 w-3.5" />}
                                            {t("vmLxc.bulkUpdate.save")}
                                          </button>
                                        </div>
                                      </div>
                                    </div>
                                  ) : bulkConfigured ? (
                                    <div className="space-y-3">
                                      <div className="text-sm text-muted-foreground break-words">
                                        {selectedBulkLabels.join(" · ")}
                                      </div>
                                      <div className="flex justify-end">
                                        <Button
                                          size="sm"
                                          onClick={() => applyBulkUpdate(selectedVM.vmid)}
                                          disabled={bulkApplying || (
                                            bulkTargets.some((target) => target.startsWith("docker-unit:"))
                                            && (dockerInventoryRefreshing || !dockerInventoryAvailable)
                                          )}
                                          className={bulkHasPendingUpdates
                                            ? pendingBtnCls
                                            : bulkAllTargetsUpToDate
                                              ? upToDateBtnCls
                                              : neutralBtnCls}
                                        >
                                          {bulkApplying
                                            ? <Loader2 className="h-4 w-4 mr-1.5 animate-spin" />
                                            : bulkHasPendingUpdates
                                              ? <ArrowUpCircle className="h-4 w-4 mr-1.5" />
                                              : !bulkAllTargetsUpToDate
                                                ? <RefreshCw className="h-4 w-4 mr-1.5" />
                                                : null}
                                          {bulkAllTargetsUpToDate
                                            ? t("vmLxc.updates.upToDate")
                                            : t("vmLxc.bulkUpdate.apply")}
                                        </Button>
                                      </div>
                                    </div>
                                  ) : (
                                    <div className="text-sm text-muted-foreground">
                                      {t("vmLxc.bulkUpdate.notConfigured")}
                                    </div>
                                  )}

                                  {bulkError && (
                                    <div className="text-xs text-red-400 flex items-start gap-1.5">
                                      <AlertTriangle className="h-3.5 w-3.5 flex-shrink-0 mt-0.5" />
                                      <span>{bulkError}</span>
                                    </div>
                                  )}
                                </CardContent>
                              </Card>
                            )}

                            {/* Options card — unified apply preferences
                                + scheduled updates. Backup/restart live
                                in ONE place and drive both manual clicks
                                and scheduled cron runs (no duplicated
                                config).
                                View mode: read-only summary + Edit btn.
                                Edit mode: card opaque `bg-card` + inputs
                                sunken (project-wide card-contrast rule
                                per feedback_card_contrast_edit_mode.md).
                                Scheduled section shows one of four
                                states: not scheduled, external-only
                                (community-scripts host cron), ProxMenux
                                only, or both (external + ProxMenux). */}
                            <Card className={optionsEditMode ? "border border-border bg-card" : "border border-border bg-card/50"}>
                              <CardContent className="p-4 space-y-4">
                                <h3 className="text-sm font-semibold text-foreground">
                                  {t("vmLxc.options.title")}
                                </h3>

                                {/* Two-mode rendering — VIEW mode is a
                                    compact scannable summary (green ✓
                                    for enabled, hollow ○ for disabled +
                                    a plain-English label). EDIT mode
                                    shows the actual checkboxes and
                                    inputs so the user can change values.
                                    Users saw both variants and preferred
                                    the icon+text view: it reads faster,
                                    doesn't look like "broken" disabled
                                    checkboxes, and clearly differentiates
                                    "reading current state" from "editing
                                    the form". */}
                                {!optionsEditMode ? (
                                  <div className="text-sm space-y-2">
                                    <div className="flex items-center gap-2">
                                      {applyBackup ? (
                                        <CheckCircle2 className="h-4 w-4 text-green-500 flex-shrink-0" />
                                      ) : (
                                        <div className="h-4 w-4 rounded-full border border-muted-foreground/40 flex-shrink-0" />
                                      )}
                                      <span>
                                        {applyBackup
                                          ? <>{t("vmLxc.options.snapshotBefore")} <span className="text-muted-foreground">{t("vmLxc.options.snapshotOn", { storage: applyBackupStorage || selectedBackupStorage || t("vmLxc.options.storageAuto") })}</span></>
                                          : <span className="text-muted-foreground">{t("vmLxc.options.noSnapshot")}</span>}
                                      </span>
                                    </div>
                                    <div className="flex items-center gap-2">
                                      {applyRestart ? (
                                        <CheckCircle2 className="h-4 w-4 text-green-500 flex-shrink-0" />
                                      ) : (
                                        <div className="h-4 w-4 rounded-full border border-muted-foreground/40 flex-shrink-0" />
                                      )}
                                      <span>
                                        {applyRestart
                                          ? t("vmLxc.options.restartAfter")
                                          : <span className="text-muted-foreground">{t("vmLxc.options.noRestart")}</span>}
                                      </span>
                                    </div>
                                  </div>
                                ) : (
                                  <div className="space-y-3">
                                    <div className="flex items-start gap-2 text-sm">
                                      <Checkbox
                                        id="apply-backup"
                                        checked={applyBackup}
                                        onCheckedChange={(v) => setApplyBackup(Boolean(v))}
                                        className="mt-0.5"
                                      />
                                      <Label htmlFor="apply-backup" className="leading-tight cursor-pointer">
                                        <span>{t("vmLxc.options.snapshotLabel")}</span>
                                        <div className="text-xs text-muted-foreground mt-0.5">
                                          {t("vmLxc.options.appliesToBoth")}
                                        </div>
                                      </Label>
                                    </div>
                                    {applyBackup && backupStorages.length > 0 && (
                                      <div className="pl-6">
                                        <Label className="text-xs text-muted-foreground">{t("vmLxc.options.backupStorage")}</Label>
                                        <Select
                                          value={applyBackupStorage || selectedBackupStorage}
                                          onValueChange={setApplyBackupStorage}
                                        >
                                          <SelectTrigger className="h-8 text-sm mt-1 max-w-xs">
                                            <SelectValue placeholder={t("vmLxc.options.pickStorage")} />
                                          </SelectTrigger>
                                          <SelectContent>
                                            {backupStorages.map((s) => (
                                              <SelectItem key={s.storage} value={s.storage}>
                                                {s.storage}
                                              </SelectItem>
                                            ))}
                                          </SelectContent>
                                        </Select>
                                      </div>
                                    )}
                                    <div className="flex items-start gap-2 text-sm">
                                      <Checkbox
                                        id="apply-restart"
                                        checked={applyRestart}
                                        onCheckedChange={(v) => setApplyRestart(Boolean(v))}
                                        className="mt-0.5"
                                      />
                                      <Label htmlFor="apply-restart" className="leading-tight cursor-pointer">
                                        <span>{t("vmLxc.options.restartAfter")}</span>
                                        <div className="text-xs text-muted-foreground mt-0.5">
                                          {t("vmLxc.options.appliesToBoth")}
                                        </div>
                                      </Label>
                                    </div>
                                  </div>
                                )}

                                <div className="pt-4 border-t border-border/50 space-y-3">
                                  {/* Scheduled updates header. Switch
                                      is visible ANY time a cron config
                                      exists (view or edit mode) so the
                                      user always sees whether it's on
                                      or off; interactive only in edit
                                      mode. Trash lives next to it in
                                      edit mode when a cron exists.
                                      In edit mode with NO cron yet we
                                      still show the Switch (it flips
                                      the form open so the user can fill
                                      in the cron + save). */}
                                  <div className="flex items-start justify-between gap-3">
                                    <div className="min-w-0">
                                      <div className="text-sm font-medium text-foreground">
                                        {t("vmLxc.scheduled.title")}
                                      </div>
                                      {optionsEditMode && (
                                        <div className="text-xs text-muted-foreground mt-0.5">
                                          {scheduleEnabled
                                            ? t("vmLxc.scheduled.enabledHelper")
                                            : t("vmLxc.scheduled.disabledHelper")}
                                        </div>
                                      )}
                                    </div>
                                    <Switch
                                      checked={scheduleEnabled}
                                      onCheckedChange={(v) => { if (optionsEditMode) setScheduleEnabled(v) }}
                                      disabled={!optionsEditMode}
                                      className="data-[state=checked]:bg-blue-600 data-[state=unchecked]:bg-input border border-border"
                                    />
                                  </div>

                                  {/* View mode — compact chip line only.
                                      NO form fields, NO raw cron string:
                                      user sees the human label + target +
                                      last run and stops there. Three
                                      chip states based on config +
                                      enabled: active / disabled-but-
                                      configured / nothing (falls through
                                      to external chip or "Not scheduled"
                                      below). */}
                                  {!optionsEditMode && scheduleConfigured && (
                                    <div className="text-sm space-y-1.5">
                                      <div className="flex items-center gap-2 flex-wrap">
                                        <span className={"h-2 w-2 rounded-full flex-shrink-0 " + (scheduleEnabled ? "bg-green-500" : "bg-muted-foreground/40")} />
                                        <span className={scheduleEnabled ? "" : "text-muted-foreground"}>
                                          <span className="text-foreground/80">{t("vmLxc.scheduled.chipLabel")}</span> — {humanCron(scheduleCron)}
                                          {!scheduleEnabled && <span className="text-muted-foreground"> {t("vmLxc.scheduled.disabledSuffix")}</span>}
                                        </span>
                                      </div>
                                      <div className="text-xs text-muted-foreground pl-4">
                                        {t("vmLxc.scheduled.whatLabel")} {selectedScheduleLabels.join(", ") || t("vmLxc.scheduled.noTargets")}
                                        {scheduleReleaseDelayDays > 0 && scheduleHasVersionTrackedApps && (
                                          <> · {t("vmLxc.scheduled.releaseDelaySummary", { days: scheduleReleaseDelayDays })}</>
                                        )}
                                      </div>
                                      {scheduleLastRunAt && (
                                        <div className="text-xs text-muted-foreground pl-4">
                                          {t("vmLxc.scheduled.lastRun", { date: new Date(scheduleLastRunAt).toLocaleString() })}
                                          {scheduleLastRunStatus && (
                                            <> · <span className={scheduleLastRunStatus === "success" ? "text-green-400" : scheduleLastRunStatus === "partial" || scheduleLastRunStatus === "deferred" || scheduleLastRunStatus === "skipped" ? "text-amber-400" : "text-red-400"}>
                                              {scheduleLastRunStatus === "success"
                                                ? t("vmLxc.scheduled.runSuccess")
                                                : scheduleLastRunStatus === "partial"
                                                  ? t("vmLxc.scheduled.runPartial")
                                                  : scheduleLastRunStatus === "deferred"
                                                    ? t("vmLxc.scheduled.runDeferred")
                                                    : scheduleLastRunStatus === "skipped"
                                                      ? t("vmLxc.scheduled.runSkipped")
                                                      : t("vmLxc.scheduled.runFailed")}
                                            </span></>
                                          )}
                                        </div>
                                      )}
                                      {scheduleLastRunReason && (
                                        <div className="text-xs text-muted-foreground pl-4 break-words">
                                          {scheduleLastRunReason}
                                        </div>
                                      )}
                                    </div>
                                  )}
                                  {!optionsEditMode && !scheduleConfigured && !externalCron && (
                                    <div className="text-sm flex items-center gap-2 text-muted-foreground">
                                      <div className="h-4 w-4 rounded-full border border-muted-foreground/40 flex-shrink-0" />
                                      <span>{t("vmLxc.scheduled.notScheduled")}</span>
                                    </div>
                                  )}

                                  {/* External helper cron chip — shown
                                      in BOTH view + edit modes when
                                      detected. Includes the helper-
                                      scripts logo per the user's ask. */}
                                  {externalCron && optionsEditMode && (() => {
                                    const variantLabel = externalCron.variant === "tteck-legacy"
                                      ? t("vmLxc.cronChip.variantTteck")
                                      : externalCron.variant === "unknown"
                                        ? t("vmLxc.cronChip.variantCustom")
                                        : t("vmLxc.cronChip.variantCommunityScripts")
                                    const scopeText = externalCron.scope === "os"
                                      ? t("vmLxc.cronChip.scopeAptApk")
                                      : t("vmLxc.cronChip.scopeUnknown")
                                    return (
                                      <div className="flex items-start gap-2 text-xs text-muted-foreground p-2 rounded-md bg-muted/40 border border-border/50">
                                        <img
                                          src="https://cdn.jsdelivr.net/gh/selfhst/icons@main/webp/proxmox-helper-scripts.webp"
                                          alt=""
                                          className="h-5 w-5 rounded-sm object-contain flex-shrink-0 mt-0.5"
                                          onError={(e) => { (e.currentTarget as HTMLImageElement).style.display = "none" }}
                                        />
                                        <div className="flex-1 min-w-0">
                                          <div className="text-foreground">
                                            <span className="text-foreground/80">{variantLabel}</span> {t("vmLxc.cronChip.detected")}
                                          </div>
                                          <div className="mt-0.5">
                                            {externalCron.human_schedule} — {scopeText}
                                          </div>
                                        </div>
                                      </div>
                                    )
                                  })()}

                                  {/* Form fields — edit mode only.
                                      In view mode the compact chip
                                      above already summarises the
                                      config; the raw dropdowns / cron
                                      input would just be noise. */}
                                  {optionsEditMode && scheduleEnabled && (
                                    <div className="space-y-3">
                                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                                        <div>
                                          <Label className="text-xs text-muted-foreground">{t("vmLxc.scheduled.frequency")}</Label>
                                          <Select
                                            value={schedulePreset}
                                            onValueChange={(v) => {
                                              setSchedulePreset(v)
                                              const preset = CRON_PRESETS.find((p) => p.value === v)
                                              if (preset && preset.cron) setScheduleCron(preset.cron)
                                            }}
                                            disabled={!optionsEditMode}
                                          >
                                            <SelectTrigger className="h-8 text-sm mt-1">
                                              <SelectValue />
                                            </SelectTrigger>
                                            <SelectContent>
                                              {CRON_PRESETS.map((p) => (
                                                <SelectItem key={p.value} value={p.value}>
                                                  {p.label}
                                                </SelectItem>
                                              ))}
                                            </SelectContent>
                                          </Select>
                                        </div>
                                        <div>
                                          <Label className="text-xs text-muted-foreground">{t("vmLxc.scheduled.cronExpression")}</Label>
                                          <Input
                                            value={scheduleCron}
                                            onChange={(e) => {
                                              setScheduleCron(e.target.value)
                                              setSchedulePreset("custom")
                                            }}
                                            disabled={!optionsEditMode}
                                            placeholder={t("vmLxc.scheduled.cronPlaceholder")}
                                            className="h-8 text-sm mt-1 font-mono"
                                          />
                                        </div>
                                      </div>
                                      <div>
                                        <Label className="text-xs text-muted-foreground">{t("vmLxc.scheduled.whatToUpdate")}</Label>
                                        <div className="mt-2 rounded-md border border-border bg-background/50 divide-y divide-border/60 max-w-xl">
                                          {scheduleChoices.map((choice) => (
                                            <label key={choice.id} className="flex items-center gap-3 px-3 py-2.5 text-sm cursor-pointer hover:bg-muted/30">
                                              <Checkbox
                                                checked={scheduleChoiceChecked(choice.id)}
                                                onCheckedChange={(value) => toggleScheduleChoice(choice.id, value === true)}
                                                disabled={!optionsEditMode}
                                              />
                                              <span className="min-w-0 truncate">{choice.label}</span>
                                            </label>
                                          ))}
                                        </div>
                                        {scheduleTargets.length === 0 && (
                                          <div className="text-xs text-red-400 mt-1">{t("vmLxc.scheduled.selectAtLeastOne")}</div>
                                        )}
                                      </div>
                                      {scheduleHasVersionTrackedApps && (
                                        <div>
                                          <Label className="text-xs text-muted-foreground">{t("vmLxc.scheduled.releaseDelayLabel")}</Label>
                                          <Select
                                            value={String(scheduleReleaseDelayDays)}
                                            onValueChange={(v) => setScheduleReleaseDelayDays(Number(v))}
                                            disabled={!optionsEditMode}
                                          >
                                            <SelectTrigger className="h-8 text-sm mt-1 max-w-xs">
                                              <SelectValue />
                                            </SelectTrigger>
                                            <SelectContent>
                                              <SelectItem value="0">{t("vmLxc.scheduled.releaseDelayNone")}</SelectItem>
                                              {[1, 3, 7, 14].map((days) => (
                                                <SelectItem key={days} value={String(days)}>
                                                  {t("vmLxc.scheduled.releaseDelayDays", { days })}
                                                </SelectItem>
                                              ))}
                                            </SelectContent>
                                          </Select>
                                          <div className="text-[10px] text-muted-foreground mt-1 max-w-xl">
                                            {t("vmLxc.scheduled.releaseDelayHelp")}
                                          </div>
                                        </div>
                                      )}
                                      {scheduleLastRunAt && (
                                        <div className="text-xs text-muted-foreground">
                                          {t("vmLxc.scheduled.lastRun", { date: new Date(scheduleLastRunAt).toLocaleString() })}
                                          {scheduleLastRunStatus && (
                                            <> · <span className={scheduleLastRunStatus === "success" ? "text-green-400" : scheduleLastRunStatus === "partial" || scheduleLastRunStatus === "deferred" || scheduleLastRunStatus === "skipped" ? "text-amber-400" : "text-red-400"}>
                                              {scheduleLastRunStatus === "success"
                                                ? t("vmLxc.scheduled.runSuccess")
                                                : scheduleLastRunStatus === "partial"
                                                  ? t("vmLxc.scheduled.runPartial")
                                                  : scheduleLastRunStatus === "deferred"
                                                    ? t("vmLxc.scheduled.runDeferred")
                                                    : scheduleLastRunStatus === "skipped"
                                                      ? t("vmLxc.scheduled.runSkipped")
                                                      : t("vmLxc.scheduled.runFailed")}
                                            </span></>
                                          )}
                                          {scheduleLastRunReason && <div className="mt-1 break-words">{scheduleLastRunReason}</div>}
                                        </div>
                                      )}
                                    </div>
                                  )}

                                  {optionsEditMode && scheduleConfigured && (
                                    <div className="flex justify-end">
                                      <button
                                        type="button"
                                        onClick={deleteScheduleFromOptions}
                                        disabled={scheduleSaving}
                                        className="h-8 px-3 text-xs rounded-md border border-red-500/30 bg-red-500/10 hover:bg-red-500/20 text-red-400 transition-colors inline-flex items-center gap-1.5 disabled:opacity-60"
                                      >
                                        <Trash2 className="h-3.5 w-3.5" />
                                        {t("vmLxc.scheduled.deleteButton")}
                                      </button>
                                    </div>
                                  )}


                                  {scheduleError && (
                                    <div className="text-xs text-red-400">{scheduleError}</div>
                                  )}
                                </div>

                                {/* Footer — Edit (view) or Cancel + Save
                                    (edit). Delete schedule lives next
                                    to the Switch above, not here. */}
                                <div className="pt-4 border-t border-border/50 flex items-center justify-end gap-2">
                                  {!optionsEditMode ? (
                                    <button
                                      type="button"
                                      onClick={enterOptionsEdit}
                                      className="h-8 px-3 text-xs rounded-md border border-border bg-background hover:bg-muted transition-colors inline-flex items-center gap-1.5"
                                    >
                                      <Settings2 className="h-3.5 w-3.5" />
                                      {t("vmLxc.options.editButton")}
                                    </button>
                                  ) : (
                                    <>
                                      <button
                                        type="button"
                                        onClick={cancelOptionsEdit}
                                        disabled={scheduleSaving}
                                        className="h-8 px-3 text-xs rounded-md border border-border bg-background hover:bg-muted transition-colors inline-flex items-center gap-1.5 disabled:opacity-60"
                                      >
                                        {t("vmLxc.options.cancelButton")}
                                      </button>
                                      <button
                                        type="button"
                                        onClick={saveOptionsEdit}
                                        disabled={scheduleSaving || (scheduleEnabled && scheduleTargets.length === 0)}
                                        className="h-8 px-3 text-xs rounded-md bg-blue-600 hover:bg-blue-700 text-white transition-colors disabled:opacity-40 inline-flex items-center gap-1.5"
                                      >
                                        {scheduleSaving
                                          ? <Loader2 className="h-3.5 w-3.5 animate-spin" />
                                          : <Check className="h-3.5 w-3.5" />}
                                        {t("vmLxc.options.saveButton")}
                                      </button>
                                    </>
                                  )}
                                </div>
                              </CardContent>
                            </Card>
                          </>
                        )
                      })()}
                  </div>
                )}

                {/* Sprint 13.29: Mount Points Tab — LXC only.
                    Renders configured mpX entries first, then any
                    ad-hoc NFS/CIFS/SMB mounts found inside the
                    container. Capacity comes from the host-side
                    source (PVE storage or `df`) so it's available
                    even when the CT is stopped. */}
                {activeModalTab === "mounts" && selectedVM?.type === "lxc" && (
                  <div className="space-y-4">
                    {loadingMounts ? (
                      <div className="flex items-center justify-center py-12 text-muted-foreground">
                        <Loader2 className="h-5 w-5 animate-spin mr-2" />
                        {t("vmLxc.updatesPanel.loadingMountPoints")}
                      </div>
                    ) : (
                      <>
                        {/* Merge the fresh runtime enrichment onto
                            each static card. If runtime isn't in yet
                            (fetch still in flight), the card renders
                            with paths/type/classification only and
                            the usage/health fields appear when the
                            runtime response resolves — no flash, no
                            re-mount because the key is stable. */}
                        {mountPoints.map((mp) => {
                          const rt = mountPointsRuntime?.[mp.target] as Partial<LxcMountPoint> | undefined
                          const merged = rt ? { ...mp, ...rt } : mp
                          return <MountPointCard key={mp.mp_index || mp.target} mp={merged} />
                        })}
                        {adHocMounts.length > 0 && adHocMounts.map((mp) => (
                          // No divider heading here — each MountPointCard
                          // already carries a coloured "ad-hoc inside CT"
                          // badge next to its target, so a separate row
                          // saying the same thing was pure vertical noise.
                          <MountPointCard key={`adhoc-${mp.target}`} mp={mp} />
                        ))}
                      </>
                    )}
                  </div>
                )}

                {/* Backups Tab */}
                {activeModalTab === "backups" && (
                  /* Backups tab layout: the Card fills the whole tab
                     body so the backup list can scroll inside its
                     bordered card instead of leaving empty space
                     under a short list. Same pattern as the disk
                     modal tabs: header + summary pinned, list grows
                     and scrolls in the middle. */
                  <div className="h-full flex flex-col min-h-0">
                    <Card className="border border-border bg-card/50 flex flex-col flex-1 min-h-0">
                      <CardContent className="p-4 flex flex-col flex-1 min-h-0">
                        <div className="flex items-center justify-between mb-4 shrink-0">
                          <div className="flex items-center gap-2">
                            <div className="p-1.5 rounded-md bg-amber-500/10">
                              <Archive className="h-4 w-4 text-amber-500" />
                            </div>
                            <h3 className="text-sm font-semibold text-foreground">{t("vmLxc.backups.title")}</h3>
                          </div>
                          <Button
                            size="sm"
                            className="h-7 text-xs bg-amber-600/20 border border-amber-600/50 text-amber-400 hover:bg-amber-600/30 gap-1"
                            onClick={openBackupModal}
                            disabled={creatingBackup}
                          >
                            {creatingBackup ? (
                              <Loader2 className="h-3 w-3 animate-spin" />
                            ) : (
                              <Plus className="h-3 w-3" />
                            )}
                            <span>{t("vmLxc.backups.create")}</span>
                          </Button>
                        </div>

                        {/* Divider */}
                        <div className="border-t border-border/50 mb-4 shrink-0" />

                        {/* Backup List */}
                        <div className="flex items-center justify-between mb-3 shrink-0">
                          <span className="text-xs text-muted-foreground">{t("vmLxc.backups.available")}</span>
                          <Badge variant="secondary" className="text-xs h-5">{vmBackups.length}</Badge>
                        </div>

                        {loadingBackups ? (
                          <div className="flex-1 flex items-center justify-center text-muted-foreground min-h-0">
                            <Loader2 className="h-4 w-4 animate-spin mr-2" />
                            <span className="text-sm">{t("vmLxc.backups.loading")}</span>
                          </div>
                        ) : vmBackups.length === 0 ? (
                          <div className="flex-1 flex flex-col items-center justify-center text-muted-foreground min-h-0">
                            <Archive className="h-12 w-12 mb-3 opacity-30" />
                            <span className="text-sm">{t("vmLxc.backups.empty")}</span>
                            <span className="text-xs mt-1">{t("vmLxc.backups.emptyHint")}</span>
                          </div>
                        ) : (
                          <div className="space-y-2 flex-1 overflow-y-auto min-h-0 pr-1 -mr-1">
                            {vmBackups.map((backup, index) => (
                              <div 
                                key={`backup-${backup.volid}-${index}`}
                                className="flex items-center justify-between p-3 rounded-lg bg-muted/30 hover:bg-muted/50 transition-colors"
                              >
                                <div className="flex items-center gap-2 flex-1 min-w-0">
                                  <div className="w-2 h-2 rounded-full bg-green-500 flex-shrink-0" />
                                  <Clock className="h-4 w-4 text-muted-foreground flex-shrink-0" />
                                  <span className="text-sm text-foreground">{backup.date}</span>
                                  <Badge 
                                    variant="outline" 
                                    className={`text-xs ml-auto flex-shrink-0 ${getStorageColor(backup.storage).bg} ${getStorageColor(backup.storage).text} ${getStorageColor(backup.storage).border}`}
                                  >
                                    {backup.storage}
                                  </Badge>
                                </div>
                                <Badge variant="outline" className="font-mono ml-2 flex-shrink-0">
                                  {backup.size_human}
                                </Badge>
                              </div>
                            ))}
                          </div>
                        )}
                      </CardContent>
                    </Card>
                  </div>
                )}

                {/* Firewall Logs Tab — issue #14554. Reads the per-VM/CT
                    log filtered by PVE directly (no host-wide log
                    grep). Loading is lazy and triggered by the tab
                    button's onClick. */}
                {activeModalTab === "firewall" && (
                  /* Firewall tab: Card fills the whole tab body so
                     the log pre-block can grow with the modal
                     instead of being capped at 480 px. Header stays
                     pinned, log block scrolls in the middle. */
                  <div className="h-full flex flex-col min-h-0">
                    <Card className="border border-border bg-card/50 flex flex-col flex-1 min-h-0">
                      <CardContent className="p-4 flex flex-col flex-1 min-h-0">
                        <div className="flex items-center justify-between mb-4 gap-2 flex-wrap shrink-0">
                          <div className="flex items-center gap-2">
                            <div className="p-1.5 rounded-md bg-orange-500/10">
                              <Shield className="h-4 w-4 text-orange-500" />
                            </div>
                            <h3 className="text-sm font-semibold text-foreground">{t("vmLxc.firewall.title")}</h3>
                            {firewallEnabled && displayedFirewallLogs.length > 0 && (
                              <Badge variant="secondary" className="text-xs h-5 ml-1">
                                {displayedFirewallLogs.length}
                              </Badge>
                            )}
                          </div>
                          <Button
                            size="sm"
                            variant="outline"
                            className="h-7 text-xs gap-1"
                            onClick={() => selectedVM && fetchFirewallLog(selectedVM.vmid)}
                            disabled={loadingFirewallLog}
                          >
                            {loadingFirewallLog ? (
                              <Loader2 className="h-3 w-3 animate-spin" />
                            ) : (
                              <RefreshCw className="h-3 w-3" />
                            )}
                            <span>{t("vmLxc.firewall.refresh")}</span>
                          </Button>
                        </div>

                        <div className="border-t border-border/50 mb-4 shrink-0" />

                        {loadingFirewallLog ? (
                          <div className="flex-1 flex items-center justify-center text-muted-foreground min-h-0">
                            <Loader2 className="h-4 w-4 animate-spin mr-2" />
                            <span className="text-sm">{t("vmLxc.firewall.loading")}</span>
                          </div>
                        ) : !firewallEnabled ? (
                          <div className="rounded-md border border-amber-500/30 bg-amber-500/5 p-4 text-sm shrink-0">
                            <div className="flex items-start gap-2">
                              <Shield className="h-4 w-4 text-amber-500 shrink-0 mt-0.5" />
                              <div className="space-y-2">
                                <p className="font-medium text-amber-500">
                                  {t("vmLxc.firewall.disabledTitle", {
                                    type: selectedVM?.type === "lxc" ? t("vmLxc.guestTypes.container") : t("vmLxc.guestTypes.vm"),
                                  })}
                                </p>
                                <p className="text-xs text-muted-foreground leading-relaxed">
                                  {t("vmLxc.firewall.disabledHint", {
                                    type: selectedVM?.type === "lxc" ? t("vmLxc.guestTypes.containerUi") : t("vmLxc.guestTypes.vm"),
                                  })}
                                </p>
                              </div>
                            </div>
                          </div>
                        ) : firewallLogError ? (
                          <div className="rounded-md border border-red-500/30 bg-red-500/5 p-4 text-sm shrink-0">
                            <div className="flex items-start gap-2">
                              <Shield className="h-4 w-4 text-red-500 shrink-0 mt-0.5" />
                              <div>
                                <p className="font-medium text-red-500 mb-1">{t("vmLxc.firewall.readFailed")}</p>
                                <p className="text-xs text-muted-foreground break-all">{firewallLogError}</p>
                              </div>
                            </div>
                          </div>
                        ) : displayedFirewallLogs.length === 0 ? (
                          <div className="flex-1 flex flex-col items-center justify-center text-sm text-muted-foreground min-h-0">
                            {t("vmLxc.firewall.empty")}
                            <div className="text-xs mt-1">
                              {t("vmLxc.firewall.emptyHint")}
                            </div>
                          </div>
                        ) : (
                          <div className="rounded-md border border-border bg-background/50 flex-1 overflow-y-auto min-h-0">
                            <pre className="text-[11px] font-mono leading-snug whitespace-pre-wrap break-all p-3">
                              {displayedFirewallLogs.map((entry, idx) => {
                                const text = entry.t || ""
                                // Light colour-coding by the action keyword
                                // PVE emits in the line itself — purely
                                // visual, parsing stays line-by-line so
                                // a malformed entry still renders fine.
                                let actionClass = "text-foreground/90"
                                if (/\bDROP\b/i.test(text)) actionClass = "text-red-400"
                                else if (/\bREJECT\b/i.test(text)) actionClass = "text-orange-400"
                                else if (/\bACCEPT\b/i.test(text)) actionClass = "text-green-400"
                                return (
                                  <div key={`${entry.n}-${idx}`} className={actionClass}>
                                    {text}
                                  </div>
                                )
                              })}
                            </pre>
                          </div>
                        )}
                      </CardContent>
                    </Card>
                  </div>
                )}
              </div>

              <div className="border-t border-border bg-background px-6 py-4 mt-auto shrink-0">
                {/* Footer controls — responsive layout:
                    • Mobile (<sm): 4-col grid. Terminal spans all 4
                      in row 1; the 4 control buttons show as icon-only
                      in row 2 (labels re-appear at sm+). Two rows max.
                    • Tablet portrait (sm..lg): 4-col grid with labels
                      back. Terminal still full-width row → 2 rows.
                    • Desktop / tablet landscape (lg+): everything sits
                      on a single 5-col row when Terminal is present,
                      or a 4-col row when it isn't.
                    Previously this stacked as 3 rows on mobile and 2
                    rows on desktop, eating scroll space with each new
                    tab we added. */}
                {(() => {
                  const hasTerminal = selectedVM?.type === "lxc" && selectedVM?.status === "running"
                  return (
                    <div className={`grid gap-2 sm:gap-3 ${hasTerminal ? "grid-cols-4 lg:grid-cols-5" : "grid-cols-4"}`}>
                      {hasTerminal && (
                        <Button
                          className="w-full bg-zinc-600/20 border border-zinc-600/50 text-zinc-300 hover:bg-zinc-600/30 col-span-4 lg:col-span-1"
                          onClick={() => selectedVM && openLxcTerminal(selectedVM.vmid, selectedVM.name)}
                        >
                          <Terminal className="h-4 w-4 mr-2" />
                          {t("vmLxc.openTerminal")}
                        </Button>
                      )}
                      <Button
                        className="w-full bg-green-600/20 border border-green-600/50 text-green-400 hover:bg-green-600/30"
                        disabled={selectedVM?.status === "running" || controlLoading}
                        onClick={() => selectedVM && handleVMControl(selectedVM.vmid, "start")}
                        title={t("vmLxc.actions.start")}
                      >
                        <Play className="h-4 w-4 sm:mr-2" />
                        <span className="hidden sm:inline">{t("vmLxc.actions.start")}</span>
                      </Button>
                      <Button
                        className="w-full bg-blue-600/20 border border-blue-600/50 text-blue-400 hover:bg-blue-600/30"
                        disabled={selectedVM?.status !== "running" || controlLoading}
                        onClick={() => selectedVM && handleVMControl(selectedVM.vmid, "shutdown")}
                        title={t("vmLxc.actions.shutdown")}
                      >
                        <Power className="h-4 w-4 sm:mr-2" />
                        <span className="hidden sm:inline">{t("vmLxc.actions.shutdown")}</span>
                      </Button>
                      <Button
                        className="w-full bg-blue-600/20 border border-blue-600/50 text-blue-400 hover:bg-blue-600/30"
                        disabled={selectedVM?.status !== "running" || controlLoading}
                        onClick={() => selectedVM && setConfirmDestructive({
                          action: "reboot",
                          vmid: selectedVM.vmid,
                          vmName: selectedVM.name,
                        })}
                        title={t("vmLxc.actions.reboot")}
                      >
                        <RotateCcw className="h-4 w-4 sm:mr-2" />
                        <span className="hidden sm:inline">{t("vmLxc.actions.reboot")}</span>
                      </Button>
                      <Button
                        className="w-full bg-red-600/20 border border-red-600/50 text-red-400 hover:bg-red-600/30"
                        disabled={selectedVM?.status !== "running" || controlLoading}
                        onClick={() => selectedVM && setConfirmDestructive({
                          action: "stop",
                          vmid: selectedVM.vmid,
                          vmName: selectedVM.name,
                        })}
                        title={t("vmLxc.actions.forceStop")}
                      >
                        <StopCircle className="h-4 w-4 sm:mr-2" />
                        <span className="hidden sm:inline">{t("vmLxc.actions.forceStop")}</span>
                      </Button>
                    </div>
                  )
                })()}
              </div>
            </>
          ) : (
            selectedVM && (
              <MetricsView
                vmid={selectedVM.vmid}
                vmName={selectedVM.name}
                vmType={selectedVM.type as "qemu" | "lxc"}
                onBack={handleBackToMain}
              />
            )
          )}
        </DialogContent>
      </Dialog>

      {/* Destructive control confirmation (Force Stop / Reboot) */}
      <Dialog
        open={confirmDestructive !== null}
        onOpenChange={(open) => {
          if (!open) {
            setConfirmDestructive(null)
            setConfirmDestructiveTyped("")
          }
        }}
      >
        <DialogContent className="sm:max-w-[480px]">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2 text-red-500">
              <StopCircle className="h-5 w-5" />
              {confirmDestructive?.action === "stop" ? t("vmLxc.confirm.forceStopTitle") : t("vmLxc.confirm.rebootTitle")}{" "}
              VMID {confirmDestructive?.vmid}
            </DialogTitle>
            <DialogDescription>
              {confirmDestructive?.action === "stop"
                ? t("vmLxc.confirm.forceStopDescription")
                : t("vmLxc.confirm.rebootDescription")}
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-3 py-2">
            <p className="text-sm">
              {t("vmLxc.confirm.typeToConfirm", { vmid: confirmDestructive?.vmid ?? "" })}
            </p>
            <input
              type="text"
              autoFocus
              autoComplete="off"
              inputMode="numeric"
              value={confirmDestructiveTyped}
              onChange={(e) => setConfirmDestructiveTyped(e.target.value)}
              placeholder={String(confirmDestructive?.vmid ?? "")}
              className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-red-500"
            />
            <p className="text-xs text-muted-foreground">
              {t("vmLxc.confirm.guest")} <span className="font-medium">{confirmDestructive?.vmName}</span>
            </p>
          </div>
          <DialogFooter className="gap-2">
            <Button
              variant="outline"
              onClick={() => {
                setConfirmDestructive(null)
                setConfirmDestructiveTyped("")
              }}
              disabled={controlLoading}
            >
              {t("actions.cancel")}
            </Button>
            <Button
              variant="destructive"
              disabled={
                controlLoading ||
                !confirmDestructive ||
                confirmDestructiveTyped.trim() !== String(confirmDestructive.vmid)
              }
              onClick={async () => {
                if (!confirmDestructive) return
                const { vmid, action } = confirmDestructive
                setConfirmDestructive(null)
                setConfirmDestructiveTyped("")
                await handleVMControl(vmid, action)
              }}
            >
              {controlLoading
                ? t("vmLxc.actions.working")
                : confirmDestructive?.action === "stop"
                ? t("vmLxc.actions.forceStop")
                : t("vmLxc.actions.reboot")}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* Backup Configuration Modal */}
      <Dialog open={showBackupModal} onOpenChange={setShowBackupModal}>
        <DialogContent className="sm:max-w-[640px] bg-accent">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2 text-amber-500">
              <Archive className="h-5 w-5" />
              {t("vmLxc.backupModal.title", {
                type: selectedVM?.type?.toUpperCase() ?? "",
                vmid: selectedVM?.vmid ?? "",
                name: selectedVM?.name ?? "",
              })}
            </DialogTitle>
            <DialogDescription>
              {t("vmLxc.backupModal.description", {
                type: selectedVM?.type === "lxc"
                  ? t("vmLxc.backupModal.typeContainer")
                  : t("vmLxc.backupModal.typeVirtualMachine"),
              })}
            </DialogDescription>
          </DialogHeader>
          
          <div className="grid gap-4 py-4">
            {/* Storage & Mode Row */}
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label className="text-sm flex items-center gap-1.5">
                  <Database className="h-3.5 w-3.5" />
                  {t("vmLxc.backupModal.storage")}
                </Label>
                <Select value={selectedBackupStorage} onValueChange={setSelectedBackupStorage}>
                  <SelectTrigger className="bg-background">
                    <SelectValue placeholder={t("vmLxc.backupModal.selectStorage")} />
                  </SelectTrigger>
                  <SelectContent>
                    {backupStorages.map((storage) => (
                      <SelectItem key={`modal-storage-${storage.storage}`} value={storage.storage}>
                        {storage.storage} ({storage.avail_human} {t("vmLxc.backupModal.free")})
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>
              
              <div className="space-y-2">
                <Label className="text-sm flex items-center gap-1.5">
                  <Settings2 className="h-3.5 w-3.5" />
                  {t("vmLxc.backupModal.mode")}
                </Label>
                <Select value={backupMode} onValueChange={setBackupMode}>
                  <SelectTrigger className="bg-background">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="snapshot">{t("vmLxc.backupModal.modes.snapshot")}</SelectItem>
                    <SelectItem value="suspend">{t("vmLxc.backupModal.modes.suspend")}</SelectItem>
                    <SelectItem value="stop">{t("vmLxc.backupModal.modes.stop")}</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
            
            {/* Notification Row */}
            <div className="space-y-2">
                <Label className="text-sm flex items-center gap-1.5">
                  <Bell className="h-3.5 w-3.5" />
                  {t("vmLxc.backupModal.notification")}
                </Label>
              <Select value={backupNotification} onValueChange={setBackupNotification}>
                <SelectTrigger className="bg-background">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="auto">{t("vmLxc.backupModal.useGlobalSettings")}</SelectItem>
                  <SelectItem value="always">{t("vmLxc.backupModal.alwaysNotify")}</SelectItem>
                  <SelectItem value="failure">{t("vmLxc.backupModal.notifyOnFailure")}</SelectItem>
                  <SelectItem value="never">{t("vmLxc.backupModal.neverNotify")}</SelectItem>
                </SelectContent>
              </Select>
            </div>
            
            {/* Protected Checkbox */}
            <div className="flex items-center space-x-2">
              <Checkbox 
                id="backup-protected" 
                checked={backupProtected}
                onCheckedChange={(checked) => setBackupProtected(checked === true)}
              />
              <Label htmlFor="backup-protected" className="text-sm flex items-center gap-1.5 cursor-pointer">
                <Shield className="h-3.5 w-3.5" />
                {t("vmLxc.backupModal.protected")}
              </Label>
            </div>
            
            {/* PBS Change Detection Mode (only for LXC) */}
            {selectedVM?.type === 'lxc' && (
              <div className="space-y-2">
                <Label className="text-sm flex items-center gap-1.5">
                  <Settings2 className="h-3.5 w-3.5" />
                  {t("vmLxc.backupModal.pbsChangeMode")}
                  <span className="text-xs text-muted-foreground ml-1">({t("vmLxc.backupModal.forPbsStorage")})</span>
                </Label>
                <Select value={backupPbsChangeMode} onValueChange={setBackupPbsChangeMode}>
                  <SelectTrigger className="bg-background">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="default">{t("vmLxc.backupModal.changeModes.default")}</SelectItem>
                    <SelectItem value="legacy">{t("vmLxc.backupModal.changeModes.legacy")}</SelectItem>
                    <SelectItem value="data">{t("vmLxc.backupModal.changeModes.data")}</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            )}
            
            {/* Notes */}
            <div className="space-y-2">
              <Label className="text-sm flex items-center gap-1.5">
                <FileText className="h-3.5 w-3.5" />
                {t("vmLxc.backupModal.notes")}
              </Label>
              <Textarea
                value={backupNotes}
                onChange={(e) => setBackupNotes(e.target.value)}
                placeholder="{{guestname}}"
                className="min-h-[80px] resize-none bg-background"
              />
              <p className="text-xs text-muted-foreground">
                {t("vmLxc.backupModal.variables")}
              </p>
            </div>
          </div>
          
          <div className="flex items-center gap-3 pt-4">
            <Button 
              variant="outline" 
              onClick={() => setShowBackupModal(false)}
              className="flex-1 bg-zinc-800/50 border-zinc-700 text-zinc-300 hover:bg-zinc-700/50"
            >
              {t("actions.cancel")}
            </Button>
            <Button 
              onClick={handleCreateBackup}
              disabled={creatingBackup || !selectedBackupStorage}
              className="flex-1 bg-amber-600/20 border border-amber-600/50 text-amber-400 hover:bg-amber-600/30"
            >
              {creatingBackup ? (
                <>
                  <Loader2 className="h-4 w-4 animate-spin mr-2" />
                  {t("vmLxc.backupModal.creating")}
                </>
              ) : (
                <>
                  <Archive className="h-4 w-4 mr-2" />
                  {t("vmLxc.backupModal.submit")}
                </>
              )}
            </Button>
          </div>
        </DialogContent>
      </Dialog>

      {/* LXC Terminal Modal */}
      {terminalVmid !== null && (
        <LxcTerminalModal
          open={terminalOpen}
          onClose={() => {
            setTerminalOpen(false)
            setTerminalVmid(null)
            setTerminalVmName("")
          }}
          vmid={terminalVmid}
          vmName={terminalVmName}
        />
      )}

      {/* LXC Update Apply Terminal — streams the apply_updates.sh
          script over WS/PTY (same wiring as the hardware installers).
          The backend finalizes on process exit; the close callback only
          accelerates the already-idempotent UI revalidation. */}
      {applyVmid !== null && (
        <ScriptTerminalModal
          open={applyOpen}
          onClose={() => {
            setApplyOpen(false)
            setApplyVmid(null)
          }}
          onComplete={handleApplyComplete}
          scriptPath="/usr/local/share/proxmenux/scripts/lxc/apply_updates.sh"
          scriptName="lxc_apply_updates"
          title={t("vmLxc.updates.terminalTitle", { vmid: applyVmid })}
          completedSuccessfullyMessage={t("vmLxc.updates.terminalCompletedSuccessfully")}
          completedWithErrorMessage={(exitCode) =>
            t("vmLxc.updates.terminalCompletedWithError", { code: exitCode })
          }
          description={
            applyTarget === "os"
              ? t("vmLxc.updates.terminalDescriptionOs")
              : applyTarget === "app"
                ? t("vmLxc.updates.terminalDescriptionApp")
                : t("vmLxc.updates.terminalDescriptionBoth")
          }
          params={{
            VMID: String(applyVmid),
            RUN_ID: applyRunId,
            CT_NAME: selectedVM?.name || `CT-${applyVmid}`,
            TARGET: applyTarget,
            REQUESTED_TARGETS_JSON: JSON.stringify(applyTargetIds),
            TARGET_LABELS_JSON: JSON.stringify(applyTargetLabels),
            BACKUP: applyBackup ? "1" : "0",
            BACKUP_STORAGE: applyBackupStorage || selectedBackupStorage || "",
            RESTART: applyRestart ? "1" : "0",
            UPDATE_COMMAND: applyUpdateCommand || "",
            APP_NAME: applyAppName || "",
            RUN_HELPER: applyRunHelper ? "1" : "0",
            ALLOW_HELPER_WITH_CUSTOM: applyAllowHelperWithCustom ? "1" : "0",
            DOCKER_STANDALONE_TARGETS: applyDockerStandaloneTargets,
            UPDATE_DOCKER_ENGINE: applyDockerEngine ? "1" : "0",
            REFRESH_DOCKER_INVENTORY: applyDockerRefresh ? "1" : "0",
          }}
        />
      )}
    </div>
  )
}