feat: icon size picker (S/M/L) on device nodes

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/components/network/nodes/DeviceNode.tsx

@@ -7,10 +7,14 @@ import { NodeTooltip, NodeTooltipTrigger, NodeTooltipContent } from '../ui/node-
 import { getDeviceRenderConfig } from './deviceRegistry'
 import type { DeviceProperties } from '@/types'
 
+export type IconSize = 'sm' | 'md' | 'lg'
+export const ICON_SIZE_PX: Record<IconSize, number> = { sm: 18, md: 28, lg: 42 }
+
 export interface DeviceNodeData {
   label: string
   deviceType: string
   category?: string
+  iconSize?: IconSize
   properties: DeviceProperties
   [key: string]: unknown
 }
@@ -31,6 +35,7 @@ function DeviceNodeComponent({ data }: NodeProps) {
   const status = (nodeData.properties?.status || 'unknown') as NodeStatus
   const ip = nodeData.properties?.ip
   const props = nodeData.properties || {}
+  const iconPx = ICON_SIZE_PX[nodeData.iconSize ?? 'md']
 
   const hasTooltipContent = props.hostname || props.ip || props.vendor || props.model || props.role || props.notes
 
@@ -40,7 +45,7 @@ function DeviceNodeComponent({ data }: NodeProps) {
         <NodeTooltipTrigger>
           <BaseNode className="min-w-[120px] group">
             <BaseNodeHeader className="flex-col gap-1 items-center py-3 px-4">
-              <Icon size={28} style={{ color }} />
+              <Icon size={iconPx} style={{ color }} />
               <BaseNodeHeaderTitle className="text-center text-xs">
                 {nodeData.label}
               </BaseNodeHeaderTitle>