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/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