feat: add Docker node type, group rect border style, and categorized node type selector

- Fix DockerNode default icon: use Anchor instead of Package
- Add border_style option to Group Rectangle (solid/dashed/dotted/double/none)
- Group node type selector by category (Hardware, Virtualization, IoT, Generic)
- Add tests for border style feature

frontend/src/components/modals/GroupRectModal.tsx

@@ -6,22 +6,34 @@ import { Label } from '@/components/ui/label'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
 import type { TextPosition } from '@/types'
 
+export type BorderStyle = 'solid' | 'dashed' | 'dotted' | 'double' | 'none'
+
 export interface GroupRectFormData {
   label: string
   font: string
   text_color: string
   text_position: TextPosition
   border_color: string
+  border_style: BorderStyle
   background_color: string
   z_order: number
 }
 
+const BORDER_STYLES: { value: BorderStyle; label: string; preview: string }[] = [
+  { value: 'solid',  label: 'Solid',  preview: '───' },
+  { value: 'dashed', label: 'Dashed', preview: '╌╌╌' },
+  { value: 'dotted', label: 'Dotted', preview: '···' },
+  { value: 'double', label: 'Double', preview: '═══' },
+  { value: 'none',   label: 'None',   preview: '   ' },
+]
+
 const DEFAULT_FORM: GroupRectFormData = {
   label: '',
   font: 'inter',
   text_color: '#e6edf3',
   text_position: 'top-left',
   border_color: '#00d4ff',
+  border_style: 'solid',
   background_color: '#00d4ff0d',
   z_order: 1,
 }
@@ -157,6 +169,33 @@ export function GroupRectModal({ open, onClose, onSubmit, onDelete, initial, tit
             </div>
           </div>
 
+          {/* Border style */}
+          <div className="flex flex-col gap-1.5">
+            <Label className="text-xs text-muted-foreground">Border Style</Label>
+            <div className="grid grid-cols-5 gap-1">
+              {BORDER_STYLES.map(({ value, label, preview }) => {
+                const isSelected = form.border_style === value
+                return (
+                  <button
+                    key={value}
+                    type="button"
+                    title={label}
+                    onClick={() => set('border_style', value)}
+                    className="flex flex-col items-center justify-center h-10 rounded text-xs gap-0.5 transition-colors"
+                    style={{
+                      background: isSelected ? '#00d4ff22' : '#21262d',
+                      border: `1px solid ${isSelected ? '#00d4ff88' : '#30363d'}`,
+                      color: isSelected ? '#00d4ff' : '#8b949e',
+                    }}
+                  >
+                    <span className="font-mono text-[11px] leading-none">{preview}</span>
+                    <span className="text-[9px]">{label}</span>
+                  </button>
+                )
+              })}
+            </div>
+          </div>
+
           {/* Z-order */}
           <div className="flex flex-col gap-1.5">
             <Label className="text-xs text-muted-foreground">Z-Order (1 = furthest back)</Label>

frontend/src/components/modals/NodeModal.tsx

@@ -4,12 +4,17 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/u
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } from '@/components/ui/select'
 import { NODE_TYPE_LABELS, type NodeData, type NodeType, type CheckMethod } from '@/types'
 import { resolveNodeColors } from '@/utils/nodeColors'
 import { ICON_REGISTRY, ICON_CATEGORIES } from '@/utils/nodeIcons'
 
-const NODE_TYPES = Object.entries(NODE_TYPE_LABELS) as [NodeType, string][]
+const NODE_TYPE_GROUPS: { label: string; types: NodeType[] }[] = [
+  { label: 'Hardware',       types: ['isp', 'router', 'switch', 'server', 'nas', 'ap', 'printer'] },
+  { label: 'Virtualization', types: ['proxmox', 'vm', 'lxc', 'docker'] },
+  { label: 'IoT',            types: ['iot', 'camera', 'cpl'] },
+  { label: 'Generic',        types: ['computer', 'generic', 'groupRect'] },
+]
 
 const CHECK_METHODS: CheckMethod[] = ['none', 'ping', 'http', 'https', 'tcp', 'ssh', 'prometheus', 'health']
 
@@ -76,10 +81,20 @@ export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node'
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent className="bg-[#21262d] border-[#30363d]">
-                  {NODE_TYPES.map(([value, label]) => (
-                    <SelectItem key={value} value={value} className="text-sm">
-                      {label}
-                    </SelectItem>
+                  {NODE_TYPE_GROUPS.map((group, i) => (
+                    <>
+                      {i > 0 && <SelectSeparator key={`sep-${group.label}`} className="bg-[#30363d]" />}
+                      <SelectGroup key={group.label}>
+                        <SelectLabel className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/50 px-2 py-1">
+                          {group.label}
+                        </SelectLabel>
+                        {group.types.map((type) => (
+                          <SelectItem key={type} value={type} className="text-sm pl-4">
+                            {NODE_TYPE_LABELS[type]}
+                          </SelectItem>
+                        ))}
+                      </SelectGroup>
+                    </>
                   ))}
                 </SelectContent>
               </Select>

frontend/src/components/modals/__tests__/GroupRectModal.test.tsx

@@ -80,4 +80,56 @@ describe('GroupRectModal', () => {
     const submitted = onSubmit.mock.calls[0][0] as GroupRectFormData
     expect(submitted.text_position).toBe('bottom-right')
   })
+
+  it('renders Border Style section', () => {
+    render(<GroupRectModal open onClose={vi.fn()} onSubmit={vi.fn()} />)
+    expect(screen.getByText('Border Style')).toBeDefined()
+    expect(screen.getByTitle('Solid')).toBeDefined()
+    expect(screen.getByTitle('Dashed')).toBeDefined()
+    expect(screen.getByTitle('Dotted')).toBeDefined()
+    expect(screen.getByTitle('Double')).toBeDefined()
+    expect(screen.getByTitle('None')).toBeDefined()
+  })
+
+  it('defaults border_style to solid', () => {
+    const onSubmit = vi.fn()
+    render(<GroupRectModal open onClose={vi.fn()} onSubmit={onSubmit} />)
+    fireEvent.click(screen.getByText('Add'))
+    const submitted = onSubmit.mock.calls[0][0] as GroupRectFormData
+    expect(submitted.border_style).toBe('solid')
+  })
+
+  it('selects border style on click', () => {
+    const onSubmit = vi.fn()
+    render(<GroupRectModal open onClose={vi.fn()} onSubmit={onSubmit} />)
+    fireEvent.click(screen.getByTitle('Dashed'))
+    fireEvent.click(screen.getByText('Add'))
+    const submitted = onSubmit.mock.calls[0][0] as GroupRectFormData
+    expect(submitted.border_style).toBe('dashed')
+  })
+
+  it('pre-fills border_style from initial prop', () => {
+    const onSubmit = vi.fn()
+    render(
+      <GroupRectModal
+        open
+        onClose={vi.fn()}
+        onSubmit={onSubmit}
+        initial={{ border_style: 'dotted' }}
+      />
+    )
+    fireEvent.click(screen.getByText('Add'))
+    const submitted = onSubmit.mock.calls[0][0] as GroupRectFormData
+    expect(submitted.border_style).toBe('dotted')
+  })
+
+  it('toggles border style — clicking selected style deselects back to solid', () => {
+    const onSubmit = vi.fn()
+    render(<GroupRectModal open onClose={vi.fn()} onSubmit={onSubmit} />)
+    fireEvent.click(screen.getByTitle('Dotted'))
+    fireEvent.click(screen.getByTitle('Solid'))
+    fireEvent.click(screen.getByText('Add'))
+    const submitted = onSubmit.mock.calls[0][0] as GroupRectFormData
+    expect(submitted.border_style).toBe('solid')
+  })
 })