feat: add grouping toolbar items and traffic flow toggle

DeviceToolbar gets Subnet/VLAN/Site/DMZ grouping section with
drag-drop. PropertiesPanel gets Show Traffic toggle that switches
edges between connection and animated types. DiagramEditor handles
both device and group node drops.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/src/components/network/panels/DeviceToolbar.tsx

@@ -1,5 +1,5 @@
 import { useState, useMemo, useCallback } from 'react'
-import { Search, Plus, ChevronDown, ChevronRight, X } from 'lucide-react'
+import { Search, Plus, ChevronDown, ChevronRight, X, LayoutGrid } from 'lucide-react'
 import { getDeviceRenderConfig, CATEGORY_LABELS, CATEGORY_ORDER } from '../nodes/deviceRegistry'
 import type { DeviceTypeResponse, DeviceTypeCreate } from '@/types'
 import { deviceTypesApi } from '@/api'
@@ -121,6 +121,34 @@ export function DeviceToolbar({ deviceTypes, onDeviceTypesChange }: DeviceToolba
         })}
       </div>
 
+      {/* Grouping section */}
+      <div className="mb-1 mt-2 border-t border-default pt-2">
+        <div className="flex items-center gap-1 px-1 py-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
+          Grouping
+        </div>
+        <div className="flex flex-col gap-0.5">
+          {[
+            { slug: 'subnet', label: 'Subnet' },
+            { slug: 'vlan', label: 'VLAN' },
+            { slug: 'site', label: 'Site' },
+            { slug: 'dmz', label: 'DMZ' },
+          ].map(item => (
+            <div
+              key={item.slug}
+              draggable
+              onDragStart={e => {
+                e.dataTransfer.setData('application/reactflow-group', JSON.stringify(item))
+                e.dataTransfer.effectAllowed = 'move'
+              }}
+              className="flex cursor-grab items-center gap-2 rounded px-2 py-1.5 text-xs text-primary hover:bg-elevated active:cursor-grabbing"
+            >
+              <LayoutGrid size={14} className="text-muted-foreground" />
+              <span>{item.label}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+
       <div className="border-t border-default p-2">
         {!showAddForm ? (
           <button

frontend/src/components/network/panels/PropertiesPanel.tsx

@@ -10,6 +10,7 @@ interface PropertiesPanelProps {
   selectedEdge: Edge | null
   onNodeUpdate: (nodeId: string, data: Partial<DeviceNodeData>) => void
   onEdgeUpdate: (edgeId: string, data: Partial<DiagramEdge>) => void
+  onEdgeTypeChange: (edgeId: string, edgeType: string) => void
   onDeleteNode: (nodeId: string) => void
   onDeleteEdge: (edgeId: string) => void
 }
@@ -50,6 +51,7 @@ export function PropertiesPanel({
   selectedEdge,
   onNodeUpdate,
   onEdgeUpdate,
+  onEdgeTypeChange,
   onDeleteNode,
   onDeleteEdge,
 }: PropertiesPanelProps) {
@@ -137,6 +139,26 @@ export function PropertiesPanel({
               mono
             />
           </div>
+          <div className="flex items-center justify-between">
+            <FieldLabel>Show Traffic</FieldLabel>
+            <button
+              onClick={() => {
+                const newType = selectedEdge.type === 'animated' ? 'connection' : 'animated'
+                onEdgeTypeChange(selectedEdge.id, newType)
+              }}
+              className={cn(
+                'relative h-5 w-9 rounded-full transition-colors',
+                selectedEdge.type === 'animated' ? 'bg-accent' : 'bg-elevated',
+              )}
+            >
+              <span
+                className={cn(
+                  'absolute top-0.5 left-0.5 h-4 w-4 rounded-full bg-white transition-transform',
+                  selectedEdge.type === 'animated' && 'translate-x-4',
+                )}
+              />
+            </button>
+          </div>
         </div>
         <div className="border-t border-default p-3">
           <button