feat: replace static hardware fields with dynamic node properties

Replaces the 4 fixed hardware columns (cpu_count, cpu_model, ram_gb,
disk_gb) with a flexible properties system. Each property has a key,
value, icon (from a curated Lucide picker), and a visibility toggle
that controls whether it appears on the canvas node card.

- Backend: add `properties` JSON column to Node model; data migration
  converts existing hardware rows to properties with correct icons
  (idempotent, old columns kept for safety)
- Backend: add `properties` to NodeBase, NodeUpdate, NodeSave schemas
  and canvasSerializer so values survive canvas save/load
- Frontend: add NodeProperty type; new propertyIcons.ts registry (20
  icons); BaseNode renders visible properties with legacy hardware
  fallback for unmigrated nodes
- Frontend: DetailPanel gains interactive properties section (add /
  edit / remove / toggle visibility / icon picker) replacing the
  read-only hardware block; hardware section removed from NodeModal
- Tests: 6 migration tests, 7 API tests, 8 DetailPanel property tests,
  6 BaseNode render/fallback tests, 9 propertyIcons util tests

frontend/src/components/canvas/__tests__/BaseNode.test.tsx

@@ -0,0 +1,157 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { Server } from 'lucide-react'
+import { BaseNode } from '../nodes/BaseNode'
+import type { NodeData } from '@/types'
+import type { Node } from '@xyflow/react'
+
+vi.mock('@xyflow/react', () => ({
+  Handle: () => null,
+  Position: { Top: 'top', Bottom: 'bottom' },
+  NodeResizer: () => null,
+  useUpdateNodeInternals: () => vi.fn(),
+}))
+
+vi.mock('@/stores/themeStore', () => ({
+  useThemeStore: () => 'dark',
+}))
+
+vi.mock('@/stores/canvasStore', () => ({
+  useCanvasStore: () => ({ hideIp: false }),
+}))
+
+vi.mock('@/utils/themes', () => ({
+  THEMES: {
+    dark: {
+      colors: {
+        statusColors: { online: '#39d353', offline: '#f85149', pending: '#e3b341', unknown: '#8b949e' },
+        nodeSubtextColor: '#8b949e',
+        nodeLabelColor: '#e6edf3',
+        nodeIconBackground: '#21262d',
+        handleBackground: '#30363d',
+        handleBorder: '#30363d',
+      },
+    },
+  },
+}))
+
+vi.mock('@/utils/nodeColors', () => ({
+  resolveNodeColors: () => ({ background: '#161b22', border: '#30363d', icon: '#00d4ff' }),
+}))
+
+vi.mock('@/utils/nodeIcons', () => ({
+  resolveNodeIcon: (_typeIcon: unknown) => _typeIcon,
+}))
+
+vi.mock('@/utils/maskIp', () => ({
+  maskIp: (ip: string) => ip,
+}))
+
+vi.mock('@/utils/handleUtils', () => ({
+  BOTTOM_HANDLE_IDS: ['bottom'],
+  BOTTOM_HANDLE_POSITIONS: { 1: [50] },
+}))
+
+function makeNode(data: Partial<NodeData>): Node<NodeData> {
+  return {
+    id: 'n1',
+    type: data.type ?? 'server',
+    position: { x: 0, y: 0 },
+    data: {
+      label: 'Test Node',
+      type: 'server',
+      status: 'online',
+      services: [],
+      ...data,
+    },
+  }
+}
+
+function renderBaseNode(data: Partial<NodeData>) {
+  const node = makeNode(data)
+  return render(
+    <BaseNode
+      id={node.id}
+      data={node.data}
+      selected={false}
+      icon={Server}
+      type="server"
+      dragging={false}
+      zIndex={0}
+      isConnectable={true}
+      positionAbsoluteX={0}
+      positionAbsoluteY={0}
+    />
+  )
+}
+
+describe('BaseNode — properties rendering', () => {
+  it('renders visible properties on the node', () => {
+    renderBaseNode({
+      properties: [
+        { key: 'CPU Model', value: 'i7-12700K', icon: 'Cpu', visible: true },
+        { key: 'RAM', value: '32 GB', icon: 'MemoryStick', visible: true },
+      ],
+    })
+    expect(screen.getByText('CPU Model')).toBeDefined()
+    // Value is rendered with a middle-dot prefix: "· 32 GB"
+    expect(screen.getByText(/32 GB/)).toBeDefined()
+  })
+
+  it('does not render properties with visible=false', () => {
+    renderBaseNode({
+      properties: [
+        { key: 'Secret', value: 'hidden', icon: null, visible: false },
+      ],
+    })
+    expect(screen.queryByText('Secret')).toBeNull()
+  })
+
+  it('renders nothing when properties array is empty', () => {
+    const { container } = renderBaseNode({ properties: [] })
+    // No properties section — only the main node card
+    expect(container.querySelectorAll('.flex.flex-col.gap-1').length).toBe(0)
+  })
+
+  it('renders label and ip regardless of properties', () => {
+    renderBaseNode({
+      label: 'My Server',
+      ip: '192.168.1.10',
+      properties: [{ key: 'OS', value: 'Debian 12', icon: 'Server', visible: true }],
+    })
+    expect(screen.getByText('My Server')).toBeDefined()
+    expect(screen.getByText('192.168.1.10')).toBeDefined()
+    expect(screen.getByText('OS')).toBeDefined()
+  })
+})
+
+describe('BaseNode — legacy hardware fallback', () => {
+  it('renders legacy hardware when properties is undefined and show_hardware is true', () => {
+    renderBaseNode({
+      properties: undefined,
+      show_hardware: true,
+      cpu_model: 'Intel Xeon E5-2680',
+      ram_gb: 32,
+    })
+    expect(screen.getByText('Intel Xeon E5-2680')).toBeDefined()
+  })
+
+  it('does not render legacy hardware when properties array is present (even if empty)', () => {
+    renderBaseNode({
+      properties: [],
+      show_hardware: true,
+      cpu_model: 'Intel Xeon E5-2680',
+    })
+    // properties array exists → new system, legacy section skipped
+    expect(screen.queryByText('Intel Xeon E5-2680')).toBeNull()
+  })
+
+  it('does not render legacy hardware when show_hardware is false', () => {
+    renderBaseNode({
+      properties: undefined,
+      show_hardware: false,
+      cpu_model: 'Intel Xeon E5-2680',
+    })
+    expect(screen.queryByText('Intel Xeon E5-2680')).toBeNull()
+  })
+})

frontend/src/components/canvas/nodes/BaseNode.tsx

@@ -4,6 +4,7 @@ import { Cpu, MemoryStick, HardDrive, type LucideIcon } from 'lucide-react'
 import type { NodeData } from '@/types'
 import { resolveNodeColors } from '@/utils/nodeColors'
 import { resolveNodeIcon } from '@/utils/nodeIcons'
+import { resolvePropertyIcon } from '@/utils/propertyIcons'
 import { useThemeStore } from '@/stores/themeStore'
 import { THEMES } from '@/utils/themes'
 import { useCanvasStore } from '@/stores/canvasStore'
@@ -31,7 +32,11 @@ export function BaseNode({ id, data, selected, icon: typeIcon, width, height }:
   const colors = resolveNodeColors(data, activeTheme)
   const statusColor = theme.colors.statusColors[data.status]
   const isOnline = data.status === 'online'
-  const showHardware = data.show_hardware && (data.cpu_count != null || data.cpu_model || data.ram_gb != null || data.disk_gb != null)
+
+  // Properties: prefer new system; fall back to legacy hardware fields for unmigrated nodes
+  const visibleProperties = data.properties?.filter((p) => p.visible) ?? null
+  const showLegacyHardware = !data.properties && data.show_hardware &&
+    (data.cpu_count != null || data.cpu_model || data.ram_gb != null || data.disk_gb != null)
 
   return (
     <div
@@ -102,12 +107,30 @@ export function BaseNode({ id, data, selected, icon: typeIcon, width, height }:
         </div>
       </div>
 
-      {/* Hardware section */}
-      {showHardware && (
+      {/* Properties section (new system) */}
+      {visibleProperties && visibleProperties.length > 0 && (
+        <>
+          <div style={{ height: 1, background: `${colors.border}44`, margin: '0 8px' }} />
+          <div className="flex flex-col gap-1 px-2.5 py-1.5">
+            {visibleProperties.map((prop, i) => {
+              const Icon = resolvePropertyIcon(prop.icon)
+              return (
+                <div key={i} className="flex items-center gap-1 font-mono text-[10px]" style={{ color: theme.colors.nodeSubtextColor }}>
+                  {Icon && <Icon size={9} className="shrink-0" />}
+                  <span className="truncate max-w-[60px] shrink-0" title={prop.key}>{prop.key}</span>
+                  <span className="truncate" title={prop.value}>· {prop.value}</span>
+                </div>
+              )
+            })}
+          </div>
+        </>
+      )}
+
+      {/* Legacy hardware section — fallback for nodes not yet migrated */}
+      {showLegacyHardware && (
         <>
           <div style={{ height: 1, background: `${colors.border}44`, margin: '0 8px' }} />
           <div className="flex flex-col gap-1 px-2.5 py-1.5">
-            {/* Line 1: CPU */}
             {(data.cpu_model || data.cpu_count != null) && (
               <div className="flex items-center gap-1 font-mono text-[10px]" style={{ color: theme.colors.nodeSubtextColor }}>
                 <Cpu size={9} className="shrink-0" />
@@ -119,7 +142,6 @@ export function BaseNode({ id, data, selected, icon: typeIcon, width, height }:
                 )}
               </div>
             )}
-            {/* Line 2: RAM + Disk */}
             {(data.ram_gb != null || data.disk_gb != null) && (
               <div className="flex items-center gap-2 font-mono text-[10px]" style={{ color: theme.colors.nodeSubtextColor }}>
                 {data.ram_gb != null && (