feat: Copy VLANs wizard + CPU display fix for hardware switches (v0.11.0 Beta)

Add 'Copy VLANs from Another Switch' — a 3-step modal available on the
VLANs tab of any switch device. Step 1 selects a source switch and which
VLAN IDs to copy (VLAN 1 deselected by default with a management risk
warning). Step 2 lets the user assign interfaces on the target device
per VLAN: clicking a port chip cycles it through None → Tagged → Untagged
→ None, with a live summary and bridge picker per VLAN. Conflict detection
identifies VLANs already present on the target and offers per-VLAN
Skip/Overwrite with the port grid disabling itself when Skip is active.
Step 3 shows the full plan before a single apply call executes all
operations over one device connection and reports per-VLAN results.

Also fix CPU load display on the Devices page for hardware switches that
report 0% CPU via ASIC offloading — the previous filter (v > 0) silently
dropped all valid zero readings; now filters on field presence instead.

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mikrotik-manager-frontend",
-  "version": "0.10.9-beta",
+  "version": "0.11.0-beta",
   "private": true,
   "type": "module",
   "scripts": {

frontend/src/components/device-detail/CopyVlanModal.tsx

@@ -0,0 +1,911 @@
+import { useState, useMemo, useEffect } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { X, ChevronRight, Copy, AlertTriangle, Check, RefreshCw, Info } from 'lucide-react';
+import { devicesApi } from '../../services/api';
+import type { Device, Vlan, SwitchPort } from '../../types';
+import clsx from 'clsx';
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+type Step = 1 | 2 | 3;
+type PortAssignment = 'none' | 'tagged' | 'untagged';
+type ConflictChoice = 'skip' | 'overwrite';
+type OpStatus = 'add' | 'identical' | 'conflict';
+
+interface AnalyzedOp {
+  sourceVlan: Vlan;
+  status: OpStatus;
+  targetBridge: string;
+  bridgeExistsOnTarget: boolean;
+  effectiveTagged: string[];
+  effectiveUntagged: string[];
+  existingVlan?: Vlan;
+  conflictChoice: ConflictChoice;
+}
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function arraysEqualAsSet(a: string[], b: string[]): boolean {
+  if (a.length !== b.length) return false;
+  const sa = new Set(a);
+  return b.every((x) => sa.has(x));
+}
+
+function naturalSort(a: string, b: string): number {
+  return a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' });
+}
+
+// ─── Sub-components ───────────────────────────────────────────────────────────
+
+function StepIndicator({ step }: { step: Step }) {
+  const labels = ['Select VLANs', 'Assign Ports', 'Confirm'];
+  return (
+    <div className="flex items-center gap-0 px-5 py-3 border-b border-gray-200 dark:border-slate-700 shrink-0">
+      {labels.map((label, i) => (
+        <div key={i} className="flex items-center">
+          <span className={clsx(
+            'flex items-center gap-1.5 text-xs font-medium',
+            step === i + 1 ? 'text-blue-600 dark:text-blue-400' : 'text-gray-400 dark:text-slate-500'
+          )}>
+            <span className={clsx(
+              'w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-bold shrink-0',
+              step > i + 1
+                ? 'bg-blue-500 text-white'
+                : step === i + 1
+                  ? 'bg-blue-100 text-blue-600 dark:bg-blue-900/40 dark:text-blue-400'
+                  : 'bg-gray-100 text-gray-400 dark:bg-slate-700 dark:text-slate-500'
+            )}>
+              {step > i + 1 ? '✓' : i + 1}
+            </span>
+            {label}
+          </span>
+          {i < 2 && (
+            <ChevronRight className="w-3 h-3 mx-2 text-gray-300 dark:text-slate-600 shrink-0" />
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function StatusBadge({ op }: { op: AnalyzedOp }) {
+  if (op.status === 'add') {
+    return (
+      <span className="px-2 py-0.5 rounded text-xs font-semibold bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400">
+        NEW
+      </span>
+    );
+  }
+  if (op.status === 'identical') {
+    return (
+      <span className="px-2 py-0.5 rounded text-xs font-semibold bg-gray-100 text-gray-500 dark:bg-slate-700 dark:text-slate-400">
+        IDENTICAL
+      </span>
+    );
+  }
+  return op.conflictChoice === 'overwrite' ? (
+    <span className="px-2 py-0.5 rounded text-xs font-semibold bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400">
+      OVERWRITE
+    </span>
+  ) : (
+    <span className="px-2 py-0.5 rounded text-xs font-semibold bg-gray-100 text-gray-500 dark:bg-slate-700 dark:text-slate-400">
+      SKIP
+    </span>
+  );
+}
+
+// Interactive port chip — cycles None → Tagged → Untagged → None on click
+function PortChip({
+  name,
+  assignment,
+  onClick,
+}: {
+  name: string;
+  assignment: PortAssignment;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      title={
+        assignment === 'none'
+          ? 'Click to set Tagged'
+          : assignment === 'tagged'
+          ? 'Click to set Untagged'
+          : 'Click to remove'
+      }
+      className={clsx(
+        'inline-flex items-center gap-1 px-2 py-1 rounded font-mono text-xs transition-all select-none',
+        assignment === 'none' &&
+          'bg-gray-100 text-gray-400 dark:bg-slate-800 dark:text-slate-500 hover:bg-gray-200 dark:hover:bg-slate-700',
+        assignment === 'tagged' &&
+          'bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300 ring-1 ring-blue-400 dark:ring-blue-500',
+        assignment === 'untagged' &&
+          'bg-slate-200 text-slate-700 dark:bg-slate-600 dark:text-slate-200 ring-1 ring-slate-400 dark:ring-slate-500'
+      )}
+    >
+      {name}
+      {assignment === 'tagged' && (
+        <span className="text-[9px] font-bold leading-none bg-blue-500 text-white rounded px-0.5">T</span>
+      )}
+      {assignment === 'untagged' && (
+        <span className="text-[9px] font-bold leading-none bg-slate-500 text-white rounded px-0.5">U</span>
+      )}
+    </button>
+  );
+}
+
+// ─── Main component ───────────────────────────────────────────────────────────
+
+export default function CopyVlanModal({
+  deviceId,
+  deviceName,
+  onClose,
+}: {
+  deviceId: number;
+  deviceName: string;
+  onClose: () => void;
+}) {
+  const queryClient = useQueryClient();
+
+  // ── Step state ──
+  const [step, setStep] = useState<Step>(1);
+
+  // ── Step 1 state ──
+  const [sourceDeviceId, setSourceDeviceId] = useState<number | null>(null);
+  const [selectedVlanIds, setSelectedVlanIds] = useState<Set<number>>(new Set());
+
+  // ── Step 2 user assignments ──
+  // portAssignments[vlan_id][portName] = 'tagged' | 'untagged' | 'none'
+  const [portAssignments, setPortAssignments] = useState<Record<number, Record<string, PortAssignment>>>({});
+  const [bridgeOverrides, setBridgeOverrides] = useState<Record<number, string>>({});
+  const [conflictChoices, setConflictChoices] = useState<Record<number, ConflictChoice>>({});
+
+  // ── Step 3 results ──
+  const [applyResults, setApplyResults] = useState<
+    { vlan_id: number; action: string; success: boolean; error?: string }[] | null
+  >(null);
+
+  // ── Data fetching ──────────────────────────────────────────────────────────
+
+  const { data: allDevices = [] } = useQuery({
+    queryKey: ['devices'],
+    queryFn: () => devicesApi.list().then((r) => r.data),
+  });
+  const switchDevices = (allDevices as Device[]).filter(
+    (d) => d.device_type === 'switch' && d.id !== deviceId
+  );
+
+  const { data: sourceVlans = [], isLoading: loadingSource } = useQuery({
+    queryKey: ['vlans', sourceDeviceId],
+    queryFn: () => devicesApi.getVlans(sourceDeviceId!).then((r) => r.data),
+    enabled: sourceDeviceId != null,
+  });
+
+  const { data: targetVlans = [] } = useQuery({
+    queryKey: ['vlans', deviceId],
+    queryFn: () => devicesApi.getVlans(deviceId).then((r) => r.data),
+  });
+
+  const { data: targetPortsData } = useQuery({
+    queryKey: ['ports', deviceId],
+    queryFn: () => devicesApi.getPorts(deviceId).then((r) => r.data),
+  });
+  const targetPorts: SwitchPort[] = targetPortsData?.ports ?? [];
+
+  const targetBridgeNames = useMemo(
+    () => targetPorts.filter((p) => p.type === 'bridge').map((p) => p.name).sort(naturalSort),
+    [targetPorts]
+  );
+
+  // Ports available for assignment: everything except VLAN-type interfaces
+  const assignablePorts = useMemo(
+    () =>
+      targetPorts
+        .filter((p) => p.type !== 'vlan')
+        .map((p) => p.name)
+        .sort(naturalSort),
+    [targetPorts]
+  );
+
+  // ── Side-effects ───────────────────────────────────────────────────────────
+
+  useEffect(() => {
+    setSelectedVlanIds(new Set());
+    setBridgeOverrides({});
+    setConflictChoices({});
+    setPortAssignments({});
+  }, [sourceDeviceId]);
+
+  // Auto-select all except VLAN 1 when source VLANs load
+  useEffect(() => {
+    if ((sourceVlans as Vlan[]).length > 0) {
+      setSelectedVlanIds(
+        new Set((sourceVlans as Vlan[]).filter((v) => v.vlan_id !== 1).map((v) => v.vlan_id))
+      );
+    }
+  }, [sourceVlans]);
+
+  // ── Port assignment helpers ────────────────────────────────────────────────
+
+  const cyclePort = (vlanId: number, portName: string) => {
+    setPortAssignments((prev) => {
+      const current: PortAssignment = prev[vlanId]?.[portName] ?? 'none';
+      const next: PortAssignment =
+        current === 'none' ? 'tagged' : current === 'tagged' ? 'untagged' : 'none';
+      return { ...prev, [vlanId]: { ...(prev[vlanId] ?? {}), [portName]: next } };
+    });
+  };
+
+  const setPortDirect = (vlanId: number, portName: string, value: PortAssignment) => {
+    setPortAssignments((prev) => ({
+      ...prev,
+      [vlanId]: { ...(prev[vlanId] ?? {}), [portName]: value },
+    }));
+  };
+
+  const getAssignment = (vlanId: number, portName: string): PortAssignment =>
+    portAssignments[vlanId]?.[portName] ?? 'none';
+
+  const getEffective = (vlanId: number) => {
+    const entries = Object.entries(portAssignments[vlanId] ?? {});
+    return {
+      tagged: entries.filter(([, v]) => v === 'tagged').map(([k]) => k).sort(naturalSort),
+      untagged: entries.filter(([, v]) => v === 'untagged').map(([k]) => k).sort(naturalSort),
+    };
+  };
+
+  // ── Analysis (memoized) ────────────────────────────────────────────────────
+
+  const analyzedOps = useMemo((): AnalyzedOp[] => {
+    return (sourceVlans as Vlan[])
+      .filter((sv) => selectedVlanIds.has(sv.vlan_id))
+      .map((sv) => {
+        const sourceBridge = sv.bridge ?? '';
+        const targetBridge =
+          bridgeOverrides[sv.vlan_id] ??
+          (targetBridgeNames.includes(sourceBridge)
+            ? sourceBridge
+            : targetBridgeNames[0] ?? sourceBridge);
+        const bridgeExistsOnTarget = targetBridgeNames.includes(targetBridge);
+
+        const { tagged: effectiveTagged, untagged: effectiveUntagged } = getEffective(sv.vlan_id);
+
+        const existingVlan = (targetVlans as Vlan[]).find((v) => v.vlan_id === sv.vlan_id);
+        let status: OpStatus;
+        if (!existingVlan) {
+          status = 'add';
+        } else {
+          const isIdentical =
+            existingVlan.bridge === targetBridge &&
+            arraysEqualAsSet(existingVlan.tagged_ports ?? [], effectiveTagged) &&
+            arraysEqualAsSet(existingVlan.untagged_ports ?? [], effectiveUntagged);
+          status = isIdentical ? 'identical' : 'conflict';
+        }
+
+        return {
+          sourceVlan: sv,
+          status,
+          targetBridge,
+          bridgeExistsOnTarget,
+          effectiveTagged,
+          effectiveUntagged,
+          existingVlan,
+          conflictChoice: conflictChoices[sv.vlan_id] ?? 'skip',
+        };
+      });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sourceVlans, selectedVlanIds, targetVlans, targetBridgeNames, bridgeOverrides, conflictChoices, portAssignments]);
+
+  const toApply = analyzedOps.filter(
+    (op) => op.status === 'add' || (op.status === 'conflict' && op.conflictChoice === 'overwrite')
+  );
+
+  const hasVlan1Selected = selectedVlanIds.has(1);
+
+  // ── Mutation ───────────────────────────────────────────────────────────────
+
+  const applyMutation = useMutation({
+    mutationFn: () =>
+      devicesApi.copyVlans(
+        deviceId,
+        toApply.map((op) => ({
+          action: op.status === 'add' ? 'add' : 'update',
+          vlan_id: op.sourceVlan.vlan_id,
+          bridge: op.targetBridge,
+          tagged_ports: op.effectiveTagged,
+          untagged_ports: op.effectiveUntagged,
+        }))
+      ),
+    onSuccess: (res) => {
+      setApplyResults(res.data.results);
+      queryClient.invalidateQueries({ queryKey: ['vlans', deviceId] });
+    },
+  });
+
+  // ── Toggle helpers ─────────────────────────────────────────────────────────
+
+  const toggleVlan = (vlanId: number) =>
+    setSelectedVlanIds((prev) => {
+      const next = new Set(prev);
+      next.has(vlanId) ? next.delete(vlanId) : next.add(vlanId);
+      return next;
+    });
+
+  const selectAll = () =>
+    setSelectedVlanIds(new Set((sourceVlans as Vlan[]).map((v) => v.vlan_id)));
+
+  const selectNone = () => setSelectedVlanIds(new Set());
+
+  // ── Step 1 ─────────────────────────────────────────────────────────────────
+
+  const renderStep1 = () => (
+    <div className="space-y-4">
+      <div>
+        <label className="label">Source switch</label>
+        <select
+          className="input"
+          value={sourceDeviceId ?? ''}
+          onChange={(e) => setSourceDeviceId(e.target.value ? Number(e.target.value) : null)}
+        >
+          <option value="">Select a switch…</option>
+          {switchDevices.map((d) => (
+            <option key={d.id} value={d.id}>
+              {d.name} ({d.ip_address}){d.status !== 'online' ? ' — offline' : ''}
+            </option>
+          ))}
+        </select>
+        {switchDevices.length === 0 && (
+          <p className="text-xs text-gray-400 mt-1.5">
+            No other switches found. Add another switch device first.
+          </p>
+        )}
+      </div>
+
+      {sourceDeviceId != null && (
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <span className="text-sm font-medium text-gray-700 dark:text-slate-300">
+              {loadingSource
+                ? 'Loading VLANs…'
+                : `VLANs on ${switchDevices.find((d) => d.id === sourceDeviceId)?.name ?? 'source'}`}
+            </span>
+            {!loadingSource && (sourceVlans as Vlan[]).length > 0 && (
+              <div className="flex gap-2">
+                <button onClick={selectAll} className="text-xs text-blue-500 hover:text-blue-700 dark:hover:text-blue-300">
+                  Select all
+                </button>
+                <span className="text-gray-300 dark:text-slate-600">·</span>
+                <button onClick={selectNone} className="text-xs text-blue-500 hover:text-blue-700 dark:hover:text-blue-300">
+                  Deselect all
+                </button>
+              </div>
+            )}
+          </div>
+
+          {loadingSource && (
+            <div className="flex items-center gap-2 text-sm text-gray-400 py-4">
+              <RefreshCw className="w-4 h-4 animate-spin" /> Loading…
+            </div>
+          )}
+
+          {!loadingSource && (sourceVlans as Vlan[]).length === 0 && (
+            <p className="text-sm text-gray-400 py-3">No VLANs found on this device.</p>
+          )}
+
+          {!loadingSource && (sourceVlans as Vlan[]).length > 0 && (
+            <div className="rounded-lg border border-gray-200 dark:border-slate-700 divide-y divide-gray-100 dark:divide-slate-700 overflow-hidden">
+              {(sourceVlans as Vlan[]).map((vlan) => {
+                const isVlan1 = vlan.vlan_id === 1;
+                const checked = selectedVlanIds.has(vlan.vlan_id);
+                return (
+                  <label
+                    key={vlan.vlan_id}
+                    className={clsx(
+                      'flex items-start gap-3 px-3 py-2.5 cursor-pointer transition-colors select-none',
+                      checked
+                        ? 'bg-blue-50 dark:bg-blue-900/10'
+                        : 'hover:bg-gray-50 dark:hover:bg-slate-700/30'
+                    )}
+                  >
+                    <input
+                      type="checkbox"
+                      className="mt-0.5 shrink-0"
+                      checked={checked}
+                      onChange={() => toggleVlan(vlan.vlan_id)}
+                    />
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2 flex-wrap">
+                        <span className="font-mono font-bold text-sm text-blue-600 dark:text-blue-400">
+                          VLAN {vlan.vlan_id}
+                        </span>
+                        {vlan.name && (
+                          <span className="text-sm text-gray-700 dark:text-slate-300">{vlan.name}</span>
+                        )}
+                        {vlan.bridge && (
+                          <span className="text-xs text-gray-400 font-mono">{vlan.bridge}</span>
+                        )}
+                        {isVlan1 && (
+                          <span className="flex items-center gap-1 text-xs text-amber-600 dark:text-amber-400">
+                            <AlertTriangle className="w-3 h-3" /> management risk
+                          </span>
+                        )}
+                      </div>
+                      <p className="text-xs text-gray-400 dark:text-slate-500 mt-0.5">
+                        Port assignments will be configured in the next step
+                      </p>
+                    </div>
+                  </label>
+                );
+              })}
+            </div>
+          )}
+
+          {hasVlan1Selected && (
+            <div className="flex items-start gap-2 rounded-lg border border-amber-300 dark:border-amber-600 bg-amber-50 dark:bg-amber-900/20 px-3 py-2.5 text-xs text-amber-700 dark:text-amber-400">
+              <AlertTriangle className="w-4 h-4 shrink-0 mt-0.5" />
+              <span>
+                <strong>VLAN 1 is selected.</strong> This is often the default management VLAN.
+                Take care when assigning ports to avoid losing device reachability.
+              </span>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+
+  // ── Step 2 ─────────────────────────────────────────────────────────────────
+
+  const renderStep2 = () => (
+    <div className="space-y-4">
+      <div className="flex items-start gap-2 text-sm text-gray-500 dark:text-slate-400">
+        <Info className="w-4 h-4 shrink-0 mt-0.5 text-blue-400" />
+        <span>
+          For each VLAN, choose which interfaces on <strong>{deviceName}</strong> should participate and how.
+          Click a port to cycle: <span className="font-medium text-gray-600 dark:text-slate-300">None</span>
+          {' → '}
+          <span className="font-medium text-blue-600 dark:text-blue-400">Tagged</span>
+          {' → '}
+          <span className="font-medium text-slate-600 dark:text-slate-300">Untagged</span>
+          {' → '}
+          <span className="font-medium text-gray-400">None</span>.
+          You can also leave all ports unassigned and configure them later.
+        </span>
+      </div>
+
+      {assignablePorts.length === 0 && (
+        <div className="flex items-start gap-2 rounded-lg border border-amber-300 dark:border-amber-600 bg-amber-50 dark:bg-amber-900/20 px-3 py-2.5 text-xs text-amber-700 dark:text-amber-400">
+          <AlertTriangle className="w-4 h-4 shrink-0 mt-0.5" />
+          <span>
+            No interfaces detected on this device yet. Run a sync first so ports can be listed here.
+            You can still proceed and configure ports manually in the VLAN editor afterward.
+          </span>
+        </div>
+      )}
+
+      {analyzedOps.map((op) => {
+        const { tagged: effTagged, untagged: effUntagged } = getEffective(op.sourceVlan.vlan_id);
+        const isSkipped = op.status === 'identical' || (op.status === 'conflict' && op.conflictChoice === 'skip');
+
+        return (
+          <div
+            key={op.sourceVlan.vlan_id}
+            className={clsx(
+              'rounded-lg border p-4 space-y-3',
+              op.status === 'add' && 'border-green-200 dark:border-green-800/60',
+              op.status === 'conflict' && 'border-amber-200 dark:border-amber-700/50',
+              op.status === 'identical' && 'border-gray-200 dark:border-slate-700 opacity-60'
+            )}
+          >
+            {/* Header */}
+            <div className="flex items-center justify-between gap-2">
+              <div className="flex items-center gap-2 flex-wrap min-w-0">
+                <span className="font-mono font-bold text-blue-600 dark:text-blue-400">
+                  VLAN {op.sourceVlan.vlan_id}
+                </span>
+                {op.sourceVlan.name && (
+                  <span className="text-sm text-gray-700 dark:text-slate-300">{op.sourceVlan.name}</span>
+                )}
+              </div>
+              <StatusBadge op={op} />
+            </div>
+
+            {op.status === 'identical' && (
+              <p className="text-xs text-gray-400 dark:text-slate-500">
+                Your port assignment matches what's already on this device — nothing to change.
+              </p>
+            )}
+
+            {/* Conflict notice + resolution */}
+            {op.status === 'conflict' && (
+              <div className="rounded-md border border-amber-200 dark:border-amber-700/40 bg-amber-50/50 dark:bg-amber-900/10 px-3 py-2.5 space-y-2">
+                <div className="text-xs text-amber-700 dark:text-amber-400">
+                  <span className="font-medium">Already on this device</span>
+                  {' — '}
+                  tagged: {op.existingVlan?.tagged_ports?.join(', ') || '—'}
+                  {' · '}
+                  untagged: {op.existingVlan?.untagged_ports?.join(', ') || '—'}
+                  {op.existingVlan?.bridge && ` · ${op.existingVlan.bridge}`}
+                </div>
+                <div className="flex items-center gap-4">
+                  <span className="text-xs text-gray-500 dark:text-slate-400">Resolution:</span>
+                  <label className="flex items-center gap-1.5 cursor-pointer text-sm">
+                    <input
+                      type="radio"
+                      name={`conflict-${op.sourceVlan.vlan_id}`}
+                      checked={op.conflictChoice === 'skip'}
+                      onChange={() =>
+                        setConflictChoices((prev) => ({ ...prev, [op.sourceVlan.vlan_id]: 'skip' }))
+                      }
+                    />
+                    Skip
+                  </label>
+                  <label className="flex items-center gap-1.5 cursor-pointer text-sm">
+                    <input
+                      type="radio"
+                      name={`conflict-${op.sourceVlan.vlan_id}`}
+                      checked={op.conflictChoice === 'overwrite'}
+                      onChange={() =>
+                        setConflictChoices((prev) => ({ ...prev, [op.sourceVlan.vlan_id]: 'overwrite' }))
+                      }
+                    />
+                    Overwrite with my assignments below
+                  </label>
+                </div>
+              </div>
+            )}
+
+            {/* Bridge picker */}
+            <div className="flex items-center gap-2 text-sm">
+              <span className="text-gray-500 dark:text-slate-400 text-xs w-12 shrink-0">Bridge</span>
+              {targetBridgeNames.length > 0 ? (
+                <select
+                  className="input py-1 text-xs font-mono max-w-[180px]"
+                  value={op.targetBridge}
+                  disabled={isSkipped}
+                  onChange={(e) =>
+                    setBridgeOverrides((prev) => ({
+                      ...prev,
+                      [op.sourceVlan.vlan_id]: e.target.value,
+                    }))
+                  }
+                >
+                  {targetBridgeNames.map((b) => (
+                    <option key={b} value={b}>{b}</option>
+                  ))}
+                </select>
+              ) : (
+                <input
+                  className="input py-1 text-xs font-mono max-w-[180px]"
+                  value={op.targetBridge}
+                  placeholder="bridge1"
+                  disabled={isSkipped}
+                  onChange={(e) =>
+                    setBridgeOverrides((prev) => ({
+                      ...prev,
+                      [op.sourceVlan.vlan_id]: e.target.value,
+                    }))
+                  }
+                />
+              )}
+              {op.bridgeExistsOnTarget ? (
+                <Check className="w-3.5 h-3.5 text-green-500 shrink-0" />
+              ) : (
+                <span className="text-xs text-amber-500 flex items-center gap-1">
+                  <AlertTriangle className="w-3.5 h-3.5" /> not found on target
+                </span>
+              )}
+            </div>
+
+            {/* Port assignment */}
+            <div className={clsx('space-y-2', isSkipped && 'opacity-40 pointer-events-none')}>
+              <div className="flex items-center justify-between">
+                <span className="text-xs text-gray-500 dark:text-slate-400">Interfaces</span>
+                {assignablePorts.length > 0 && (
+                  <button
+                    type="button"
+                    onClick={() => {
+                      // Reset all ports for this VLAN to none
+                      setPortAssignments((prev) => ({ ...prev, [op.sourceVlan.vlan_id]: {} }));
+                    }}
+                    className="text-xs text-gray-400 hover:text-gray-600 dark:hover:text-slate-300"
+                  >
+                    Clear all
+                  </button>
+                )}
+              </div>
+
+              {assignablePorts.length === 0 ? (
+                <p className="text-xs text-gray-400 italic">
+                  No interfaces detected — sync the device first.
+                </p>
+              ) : (
+                <div className="flex flex-wrap gap-1.5">
+                  {assignablePorts.map((portName) => (
+                    <PortChip
+                      key={portName}
+                      name={portName}
+                      assignment={getAssignment(op.sourceVlan.vlan_id, portName)}
+                      onClick={() => cyclePort(op.sourceVlan.vlan_id, portName)}
+                    />
+                  ))}
+                </div>
+              )}
+
+              {/* Live summary of current assignment */}
+              {(effTagged.length > 0 || effUntagged.length > 0) && (
+                <div className="flex flex-wrap gap-x-4 gap-y-1 text-xs pt-1 border-t border-gray-100 dark:border-slate-700/50">
+                  {effTagged.length > 0 && (
+                    <span className="text-gray-500 dark:text-slate-400">
+                      <span className="font-medium text-blue-600 dark:text-blue-400">Tagged:</span>{' '}
+                      {effTagged.join(', ')}
+                    </span>
+                  )}
+                  {effUntagged.length > 0 && (
+                    <span className="text-gray-500 dark:text-slate-400">
+                      <span className="font-medium text-slate-600 dark:text-slate-300">Untagged:</span>{' '}
+                      {effUntagged.join(', ')}
+                    </span>
+                  )}
+                </div>
+              )}
+              {effTagged.length === 0 && effUntagged.length === 0 && assignablePorts.length > 0 && (
+                <p className="text-xs text-gray-400 dark:text-slate-500 italic pt-1">
+                  No ports assigned — VLAN will be created with no port memberships.
+                </p>
+              )}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+
+  // ── Step 3 ─────────────────────────────────────────────────────────────────
+
+  const renderStep3 = () => {
+    if (applyResults) {
+      const succeeded = applyResults.filter((r) => r.success);
+      const failed = applyResults.filter((r) => !r.success);
+      return (
+        <div className="space-y-3">
+          {succeeded.length > 0 && (
+            <div className="rounded-lg border border-green-200 dark:border-green-800 bg-green-50 dark:bg-green-900/10 px-4 py-3 space-y-1">
+              <p className="text-sm font-medium text-green-700 dark:text-green-400">
+                {succeeded.length} VLAN{succeeded.length !== 1 ? 's' : ''} applied successfully
+              </p>
+              {succeeded.map((r) => (
+                <div key={r.vlan_id} className="flex items-center gap-2 text-sm text-green-600 dark:text-green-500">
+                  <Check className="w-3.5 h-3.5 shrink-0" />
+                  <span>VLAN {r.vlan_id} — {r.action === 'add' ? 'added' : 'updated'}</span>
+                </div>
+              ))}
+            </div>
+          )}
+          {failed.length > 0 && (
+            <div className="rounded-lg border border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/10 px-4 py-3 space-y-1">
+              <p className="text-sm font-medium text-red-700 dark:text-red-400">
+                {failed.length} VLAN{failed.length !== 1 ? 's' : ''} failed
+              </p>
+              {failed.map((r) => (
+                <div key={r.vlan_id} className="text-sm text-red-600 dark:text-red-400">
+                  <span className="font-mono">VLAN {r.vlan_id}</span>
+                  {r.error && <span className="ml-2 text-xs opacity-75">{r.error}</span>}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      );
+    }
+
+    const skipped = analyzedOps.filter(
+      (op) =>
+        op.status === 'identical' ||
+        (op.status === 'conflict' && op.conflictChoice === 'skip')
+    );
+
+    return (
+      <div className="space-y-4">
+        <p className="text-sm text-gray-600 dark:text-slate-400">
+          {toApply.length > 0 ? (
+            <>
+              <strong>{toApply.length}</strong> VLAN{toApply.length !== 1 ? 's' : ''} will be applied to{' '}
+              <strong>{deviceName}</strong>.
+              {skipped.length > 0 && (
+                <> <strong>{skipped.length}</strong> will be skipped.</>
+              )}
+            </>
+          ) : (
+            <>No VLANs will be applied — all selected VLANs are either identical or set to skip.</>
+          )}
+        </p>
+
+        <div className="rounded-lg border border-gray-200 dark:border-slate-700 divide-y divide-gray-100 dark:divide-slate-700 overflow-hidden">
+          {analyzedOps.map((op) => {
+            const willApply =
+              op.status === 'add' ||
+              (op.status === 'conflict' && op.conflictChoice === 'overwrite');
+            return (
+              <div key={op.sourceVlan.vlan_id} className="px-4 py-3 flex items-start gap-3">
+                <div
+                  className={clsx(
+                    'mt-1 w-2 h-2 rounded-full shrink-0',
+                    willApply ? 'bg-green-500' : 'bg-gray-300 dark:bg-slate-600'
+                  )}
+                />
+                <div className="flex-1 min-w-0 space-y-1">
+                  <div className="flex items-center gap-2 flex-wrap">
+                    <span className="font-mono font-bold text-sm text-blue-600 dark:text-blue-400">
+                      VLAN {op.sourceVlan.vlan_id}
+                    </span>
+                    {op.sourceVlan.name && (
+                      <span className="text-sm text-gray-600 dark:text-slate-400">
+                        {op.sourceVlan.name}
+                      </span>
+                    )}
+                    <StatusBadge op={op} />
+                    <span className="text-xs text-gray-400 font-mono">{op.targetBridge}</span>
+                  </div>
+
+                  {willApply && (
+                    <div className="flex flex-wrap gap-1">
+                      {op.effectiveTagged.map((p) => (
+                        <span
+                          key={p}
+                          className="px-1.5 py-0.5 bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-400 text-xs rounded font-mono"
+                        >
+                          {p} T
+                        </span>
+                      ))}
+                      {op.effectiveUntagged.map((p) => (
+                        <span
+                          key={p}
+                          className="px-1.5 py-0.5 bg-gray-100 dark:bg-slate-700 text-gray-600 dark:text-slate-300 text-xs rounded font-mono"
+                        >
+                          {p} U
+                        </span>
+                      ))}
+                      {op.effectiveTagged.length === 0 && op.effectiveUntagged.length === 0 && (
+                        <span className="text-xs text-gray-400 italic">no port assignments</span>
+                      )}
+                    </div>
+                  )}
+
+                  {op.status === 'conflict' && op.conflictChoice === 'skip' && (
+                    <p className="text-xs text-gray-400">Conflict — you chose to skip</p>
+                  )}
+                  {op.status === 'identical' && (
+                    <p className="text-xs text-gray-400">Already configured identically — skipped</p>
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+
+        {applyMutation.isError && (
+          <div className="text-sm text-red-500">
+            Failed to apply:{' '}
+            {(applyMutation.error as { message?: string })?.message ?? 'Unknown error'}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  // ── Footer ─────────────────────────────────────────────────────────────────
+
+  const renderFooter = () => {
+    if (step === 1) {
+      return (
+        <>
+          <button onClick={onClose} className="btn-secondary text-sm">
+            Cancel
+          </button>
+          <button
+            className="btn-primary flex items-center gap-2 text-sm"
+            disabled={selectedVlanIds.size === 0 || sourceDeviceId == null}
+            onClick={() => setStep(2)}
+          >
+            Assign Ports <ChevronRight className="w-4 h-4" />
+          </button>
+        </>
+      );
+    }
+    if (step === 2) {
+      return (
+        <>
+          <button
+            onClick={() => setStep(1)}
+            className="btn-secondary flex items-center gap-2 text-sm"
+          >
+            <ChevronRight className="w-4 h-4 rotate-180" /> Back
+          </button>
+          <button
+            className="btn-primary flex items-center gap-2 text-sm"
+            onClick={() => setStep(3)}
+          >
+            Review plan <ChevronRight className="w-4 h-4" />
+          </button>
+        </>
+      );
+    }
+    // step === 3
+    if (applyResults) {
+      return (
+        <div className="w-full flex justify-end">
+          <button onClick={onClose} className="btn-primary text-sm">
+            Close
+          </button>
+        </div>
+      );
+    }
+    return (
+      <>
+        <button
+          onClick={() => setStep(2)}
+          className="btn-secondary flex items-center gap-2 text-sm"
+          disabled={applyMutation.isPending}
+        >
+          <ChevronRight className="w-4 h-4 rotate-180" /> Back
+        </button>
+        <button
+          className="btn-primary flex items-center gap-2 text-sm"
+          disabled={toApply.length === 0 || applyMutation.isPending}
+          onClick={() => applyMutation.mutate()}
+        >
+          {applyMutation.isPending && <RefreshCw className="w-3.5 h-3.5 animate-spin" />}
+          {applyMutation.isPending
+            ? 'Applying…'
+            : `Apply ${toApply.length} VLAN${toApply.length !== 1 ? 's' : ''}`}
+        </button>
+      </>
+    );
+  };
+
+  // ── Render ─────────────────────────────────────────────────────────────────
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm"
+      onClick={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div className="card w-full max-w-2xl mx-4 max-h-[90vh] flex flex-col overflow-hidden">
+        {/* Header */}
+        <div className="flex items-center justify-between px-5 py-4 border-b border-gray-200 dark:border-slate-700 shrink-0">
+          <div className="flex items-center gap-2">
+            <Copy className="w-4 h-4 text-blue-500" />
+            <h2 className="text-base font-semibold text-gray-900 dark:text-white">
+              Copy VLANs from Another Switch
+            </h2>
+          </div>
+          <button
+            onClick={onClose}
+            className="text-gray-400 hover:text-gray-600 dark:hover:text-slate-300 transition-colors"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        <StepIndicator step={step} />
+
+        {/* Scrollable body */}
+        <div className="overflow-y-auto flex-1 p-5">
+          {step === 1 && renderStep1()}
+          {step === 2 && renderStep2()}
+          {step === 3 && renderStep3()}
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-between px-5 py-4 border-t border-gray-200 dark:border-slate-700 shrink-0 bg-gray-50 dark:bg-slate-800/50">
+          {renderFooter()}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/components/device-detail/VlansTab.tsx

@@ -1,17 +1,23 @@
 import { useState } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { Plus, Trash2, AlertCircle, RefreshCw, Pencil, Check, X, Network } from 'lucide-react';
+import { Plus, Trash2, AlertCircle, RefreshCw, Pencil, Check, X, Network, Copy } from 'lucide-react';
 import { devicesApi } from '../../services/api';
 import type { Vlan, SwitchPort } from '../../types';
 import clsx from 'clsx';
 import { useCanWrite } from '../../hooks/useCanWrite';
+import CopyVlanModal from './CopyVlanModal';
 
 interface PortForm {
   tagged_ports: string;
   untagged_ports: string;
 }
 
-export default function VlansTab({ deviceId, onGoToPorts }: { deviceId: number; onGoToPorts?: (bridgeName: string) => void }) {
+export default function VlansTab({ deviceId, deviceName, deviceType, onGoToPorts }: {
+  deviceId: number;
+  deviceName?: string;
+  deviceType?: string;
+  onGoToPorts?: (bridgeName: string) => void;
+}) {
   const queryClient = useQueryClient();
   const canWrite = useCanWrite();
 
@@ -32,6 +38,9 @@ export default function VlansTab({ deviceId, onGoToPorts }: { deviceId: number;
     (p) => p.type === 'bridge' && p.config_json?.['vlan-filtering'] !== 'yes' && p.config_json?.['vlan-filtering'] !== 'true'
   );
 
+  // ── Copy VLAN modal ──
+  const [showCopyModal, setShowCopyModal] = useState(false);
+
   // ── Add form ──
   const [showAdd, setShowAdd] = useState(false);
   const [addForm, setAddForm] = useState({ vlan_id: '', bridge: '', tagged_ports: '', untagged_ports: '' });
@@ -158,6 +167,16 @@ export default function VlansTab({ deviceId, onGoToPorts }: { deviceId: number;
             <RefreshCw className={clsx('w-3.5 h-3.5', isFetching && 'animate-spin')} />
             Refresh
           </button>
+          {canWrite && deviceType === 'switch' && (
+            <button
+              onClick={() => setShowCopyModal(true)}
+              className="btn-secondary flex items-center gap-2 text-sm"
+              title="Copy VLANs from another switch"
+            >
+              <Copy className="w-4 h-4" />
+              Copy from Switch
+            </button>
+          )}
           {canWrite && (
             <button
               onClick={() => {
@@ -312,6 +331,17 @@ export default function VlansTab({ deviceId, onGoToPorts }: { deviceId: number;
         </div>
       )}
 
+      {showCopyModal && (
+        <CopyVlanModal
+          deviceId={deviceId}
+          deviceName={deviceName ?? `Device ${deviceId}`}
+          onClose={() => {
+            setShowCopyModal(false);
+            queryClient.invalidateQueries({ queryKey: ['vlans', deviceId] });
+          }}
+        />
+      )}
+
       {/* VLANs table */}
       <div className="card overflow-hidden">
         {(vlans as Vlan[]).length === 0 ? (

frontend/src/pages/DeviceDetailPage.tsx

@@ -306,6 +306,8 @@ export default function DeviceDetailPage() {
       {activeTab === 'vlans' && (
         <VlansTab
           deviceId={deviceId}
+          deviceName={device?.name}
+          deviceType={device?.device_type}
           onGoToPorts={(bridgeName) => { setAutoOpenBridge(bridgeName); setActiveTab('ports'); }}
         />
       )}

frontend/src/pages/DevicesPage.tsx

@@ -165,7 +165,7 @@ export default function DevicesPage() {
     () => Object.fromEntries(
       devices.map((d, i) => {
         const pts = cpuHistoryResults[i]?.data ?? [];
-        return [d.id, pts.map((p: { cpu_load?: number }) => p.cpu_load ?? 0).filter((v: number) => v > 0)];
+        return [d.id, pts.filter((p: { cpu_load?: number }) => p.cpu_load != null).map((p: { cpu_load?: number }) => p.cpu_load as number)];
       })
     ) as Record<number, number[]>,
     [devices, cpuHistoryResults],

frontend/src/services/api.ts

@@ -197,6 +197,8 @@ export const devicesApi = {
   updateVlan: (id: number, vlanDbId: number, data: { tagged_ports: string[]; untagged_ports: string[] }) =>
     api.put(`/devices/${id}/vlans/${vlanDbId}`, data),
   deleteVlan: (id: number, vlanDbId: number) => api.delete(`/devices/${id}/vlans/${vlanDbId}`),
+  copyVlans: (id: number, operations: Array<{ action: 'add' | 'update'; vlan_id: number; bridge: string; tagged_ports: string[]; untagged_ports: string[] }>) =>
+    api.post<{ results: Array<{ vlan_id: number; action: string; success: boolean; error?: string }>; vlans: Vlan[] }>(`/devices/${id}/vlans/copy`, { operations }),
   reboot: (id: number) => api.post<{ message: string }>(`/devices/${id}/reboot`),
   getPortMonitor: (id: number, name: string) =>
     api.get<PortMonitorData>(`/devices/${id}/ports/${encodeURIComponent(name)}/monitor`),

frontend/src/version.ts

@@ -1 +1 @@
-export const APP_VERSION = 'v0.10.9 Beta';
+export const APP_VERSION = 'v0.11.0 Beta';