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/panels/DetailPanel.tsx

@@ -1,10 +1,11 @@
-import { useState } from 'react'
+import { createElement, useState } from 'react'
 import { X, Edit, Trash2, ExternalLink, Plus, Pencil, Layers, Ungroup, Eye, EyeOff } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { useCanvasStore } from '@/stores/canvasStore'
-import { NODE_TYPE_LABELS, STATUS_COLORS, type ServiceInfo, type NodeData } from '@/types'
+import { NODE_TYPE_LABELS, STATUS_COLORS, type ServiceInfo, type NodeData, type NodeProperty } from '@/types'
 import { getServiceUrl } from '@/utils/serviceUrl'
+import { PROPERTY_ICONS, PROPERTY_ICON_NAMES, resolvePropertyIcon } from '@/utils/propertyIcons'
 import type { Node } from '@xyflow/react'
 
 interface DetailPanelProps {
@@ -14,6 +15,9 @@ interface DetailPanelProps {
 type SvcForm = { port: string; protocol: 'tcp' | 'udp'; service_name: string }
 const EMPTY_FORM: SvcForm = { port: '', protocol: 'tcp', service_name: '' }
 
+type PropForm = { key: string; value: string; icon: string | null; visible: boolean }
+const EMPTY_PROP: PropForm = { key: '', value: '', icon: null, visible: true }
+
 export function DetailPanel({ onEdit }: DetailPanelProps) {
   const { nodes, selectedNodeId, selectedNodeIds, setSelectedNode, deleteNode, updateNode, snapshotHistory, createGroup, ungroup } = useCanvasStore()
 
@@ -24,6 +28,12 @@ export function DetailPanel({ onEdit }: DetailPanelProps) {
   const [groupName, setGroupName] = useState('')
   const [creatingGroup, setCreatingGroup] = useState(false)
 
+  // Properties state
+  const [addingProp, setAddingProp] = useState(false)
+  const [newProp, setNewProp] = useState<PropForm>(EMPTY_PROP)
+  const [editingPropIndex, setEditingPropIndex] = useState<number | null>(null)
+  const [editProp, setEditProp] = useState<PropForm>(EMPTY_PROP)
+
   // Multi-select panel
   const multiSelected = (selectedNodeIds ?? []).filter((id) => nodes.some((n) => n.id === id))
 
@@ -119,6 +129,52 @@ export function DetailPanel({ onEdit }: DetailPanelProps) {
     setEditingFor(null)
   }
 
+  // --- Property handlers ---
+  const properties: NodeProperty[] = data.properties ?? []
+
+  const handleAddProp = () => {
+    if (!newProp.key.trim() || !newProp.value.trim()) return
+    snapshotHistory()
+    const prop: NodeProperty = { key: newProp.key.trim(), value: newProp.value.trim(), icon: newProp.icon, visible: newProp.visible }
+    updateNode(node.id, { properties: [...properties, prop] })
+    setNewProp(EMPTY_PROP)
+    setAddingProp(false)
+  }
+
+  const handleRemoveProp = (index: number) => {
+    snapshotHistory()
+    updateNode(node.id, { properties: properties.filter((_, i) => i !== index) })
+    if (editingPropIndex === index) setEditingPropIndex(null)
+  }
+
+  const handleTogglePropVisible = (index: number) => {
+    snapshotHistory()
+    updateNode(node.id, {
+      properties: properties.map((p, i) => i === index ? { ...p, visible: !p.visible } : p),
+    })
+  }
+
+  const handleStartEditProp = (index: number) => {
+    const p = properties[index]
+    if (!p) return
+    setEditProp({ key: p.key, value: p.value, icon: p.icon, visible: p.visible })
+    setEditingPropIndex(index)
+    setAddingProp(false)
+  }
+
+  const handleSaveEditProp = () => {
+    if (editingPropIndex === null || !editProp.key.trim() || !editProp.value.trim()) return
+    snapshotHistory()
+    updateNode(node.id, {
+      properties: properties.map((p, i) =>
+        i === editingPropIndex
+          ? { key: editProp.key.trim(), value: editProp.value.trim(), icon: editProp.icon, visible: editProp.visible }
+          : p
+      ),
+    })
+    setEditingPropIndex(null)
+  }
+
   return (
     <aside className="w-72 shrink-0 flex flex-col border-l border-border bg-[#161b22] overflow-y-auto">
       <div className="flex items-center justify-between px-4 py-3 border-b border-border">
@@ -153,15 +209,54 @@ export function DetailPanel({ onEdit }: DetailPanelProps) {
         {data.last_seen && <DetailRow label="Last Seen" value={new Date(data.last_seen.endsWith('Z') ? data.last_seen : data.last_seen + 'Z').toLocaleString()} />}
       </div>
 
-      {(data.cpu_count != null || data.cpu_model || data.ram_gb != null || data.disk_gb != null) && (
-        <div className="flex flex-col gap-3 px-4 py-3 text-sm border-t border-border">
-          <span className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/50">Hardware</span>
-          {data.cpu_model && <DetailRow label="CPU" value={data.cpu_model} />}
-          {data.cpu_count != null && <DetailRow label="Cores" value={String(data.cpu_count)} mono />}
-          {data.ram_gb != null && <DetailRow label="RAM" value={formatStorage(data.ram_gb)} mono />}
-          {data.disk_gb != null && <DetailRow label="Disk" value={formatStorage(data.disk_gb)} mono />}
+      {/* Properties section */}
+      <div className="px-4 py-3 border-t border-border">
+        <div className="flex items-center justify-between mb-2">
+          <span className="text-xs text-muted-foreground">Properties{properties.length > 0 ? ` (${properties.length})` : ''}</span>
+          <button
+            onClick={() => { setAddingProp((v) => !v); setEditingPropIndex(null) }}
+            className="flex items-center gap-1 text-[10px] text-[#00d4ff] hover:text-[#00d4ff]/80 transition-colors"
+          >
+            <Plus size={10} /> Add
+          </button>
         </div>
-      )}
+        {addingProp && (
+          <PropertyForm
+            form={newProp}
+            onChange={setNewProp}
+            onConfirm={handleAddProp}
+            onCancel={() => { setAddingProp(false); setNewProp(EMPTY_PROP) }}
+            confirmLabel="Add"
+          />
+        )}
+        {properties.length > 0 && (
+          <div className="flex flex-col gap-1.5">
+            {properties.map((prop, i) =>
+              editingPropIndex === i ? (
+                <PropertyForm
+                  key={`edit-${i}`}
+                  form={editProp}
+                  onChange={setEditProp}
+                  onConfirm={handleSaveEditProp}
+                  onCancel={() => setEditingPropIndex(null)}
+                  confirmLabel="Save"
+                />
+              ) : (
+                <PropertyBadge
+                  key={`${prop.key}-${i}`}
+                  prop={prop}
+                  onToggleVisible={() => handleTogglePropVisible(i)}
+                  onEdit={() => handleStartEditProp(i)}
+                  onRemove={() => handleRemoveProp(i)}
+                />
+              )
+            )}
+          </div>
+        )}
+        {properties.length === 0 && !addingProp && (
+          <p className="text-[10px] text-muted-foreground/50">No properties — click Add to define one.</p>
+        )}
+      </div>
 
       <div className="px-4 py-3 border-t border-border">
         <div className="flex items-center justify-between mb-2">
@@ -365,11 +460,6 @@ function GroupDetailPanel({ node, nodes, onUngroup, onToggleBorder, onClose, onS
 
 // --- Helpers ---
 
-function formatStorage(gb: number): string {
-  if (gb >= 1024) return `${(gb / 1024).toFixed(1).replace(/\.0$/, '')} TB`
-  return `${gb} GB`
-}
-
 function DetailRow({ label, value, mono }: { label: string; value: string; mono?: boolean }) {
   return (
     <div className="flex justify-between gap-2 items-baseline">
@@ -407,6 +497,113 @@ function ServiceForm({ form, onChange, onConfirm, onCancel, confirmLabel, autoFo
   )
 }
 
+// --- Property components ---
+
+function PropertyForm({ form, onChange, onConfirm, onCancel, confirmLabel }: {
+  form: PropForm
+  onChange: (f: PropForm) => void
+  onConfirm: () => void
+  onCancel: () => void
+  confirmLabel: string
+}) {
+  return (
+    <div className="flex flex-col gap-1.5 mb-1 p-2 rounded-md bg-[#0d1117] border border-[#30363d]">
+      <Input
+        value={form.key}
+        onChange={(e) => onChange({ ...form, key: e.target.value })}
+        placeholder="Label (e.g. CPU Model)"
+        className="bg-[#21262d] border-[#30363d] text-xs h-7"
+        autoFocus
+        onKeyDown={(e) => e.key === 'Enter' && onConfirm()}
+      />
+      <Input
+        value={form.value}
+        onChange={(e) => onChange({ ...form, value: e.target.value })}
+        placeholder="Value (e.g. i7-12700K)"
+        className="bg-[#21262d] border-[#30363d] text-xs h-7"
+        onKeyDown={(e) => e.key === 'Enter' && onConfirm()}
+      />
+      {/* Icon picker */}
+      <div className="flex flex-wrap gap-1 pt-0.5">
+        <button
+          onClick={() => onChange({ ...form, icon: null })}
+          title="No icon"
+          className={`w-6 h-6 rounded flex items-center justify-center text-[10px] border transition-colors ${
+            form.icon === null ? 'border-[#00d4ff] bg-[#00d4ff]/10 text-[#00d4ff]' : 'border-[#30363d] text-muted-foreground hover:border-[#8b949e]'
+          }`}
+        >
+          –
+        </button>
+        {PROPERTY_ICON_NAMES.map((name) => {
+          const Icon = PROPERTY_ICONS[name]
+          const active = form.icon === name
+          return (
+            <button
+              key={name}
+              onClick={() => onChange({ ...form, icon: name })}
+              title={name}
+              className={`w-6 h-6 rounded flex items-center justify-center border transition-colors ${
+                active ? 'border-[#00d4ff] bg-[#00d4ff]/10 text-[#00d4ff]' : 'border-[#30363d] text-muted-foreground hover:border-[#8b949e]'
+              }`}
+            >
+              {createElement(Icon, { size: 11 })}
+            </button>
+          )
+        })}
+      </div>
+      {/* Visible toggle */}
+      <label className="flex items-center gap-2 cursor-pointer pt-0.5">
+        <input
+          type="checkbox"
+          checked={form.visible}
+          onChange={(e) => onChange({ ...form, visible: e.target.checked })}
+          className="accent-[#00d4ff] w-3 h-3"
+        />
+        <span className="text-[10px] text-muted-foreground">Show on node</span>
+      </label>
+      <div className="flex gap-1.5">
+        <Button size="sm" className="flex-1 h-6 text-[10px] bg-[#00d4ff] text-[#0d1117] hover:bg-[#00d4ff]/90" onClick={onConfirm}>
+          {confirmLabel}
+        </Button>
+        <Button size="sm" variant="ghost" className="h-6 text-[10px]" onClick={onCancel}>Cancel</Button>
+      </div>
+    </div>
+  )
+}
+
+function PropertyBadge({ prop, onToggleVisible, onEdit, onRemove }: {
+  prop: NodeProperty
+  onToggleVisible: () => void
+  onEdit: () => void
+  onRemove: () => void
+}) {
+  const Icon = resolvePropertyIcon(prop.icon)
+  return (
+    <div className="group flex items-center justify-between gap-2 px-2 py-1.5 rounded-md border text-xs transition-colors" style={{ background: '#21262d', borderColor: '#30363d' }}>
+      <div className="flex items-center gap-1.5 min-w-0">
+        {Icon && createElement(Icon, { size: 11, className: 'shrink-0 text-muted-foreground' })}
+        <span className="font-medium truncate text-foreground" title={prop.key}>{prop.key}</span>
+        <span className="text-muted-foreground truncate" title={prop.value}>· {prop.value}</span>
+      </div>
+      <div className="flex items-center gap-1 shrink-0">
+        <button
+          onClick={onToggleVisible}
+          title={prop.visible ? 'Hide on node' : 'Show on node'}
+          className="text-[#8b949e] hover:text-[#00d4ff] transition-colors"
+        >
+          {prop.visible ? <Eye size={10} /> : <EyeOff size={10} />}
+        </button>
+        <button onClick={onEdit} className="opacity-0 group-hover:opacity-100 transition-opacity text-[#8b949e] hover:text-[#00d4ff]" title="Edit property">
+          <Pencil size={10} />
+        </button>
+        <button onClick={onRemove} className="opacity-0 group-hover:opacity-100 transition-opacity text-[#8b949e] hover:text-[#f85149]" title="Remove property">
+          <X size={10} />
+        </button>
+      </div>
+    </div>
+  )
+}
+
 const CATEGORY_COLORS: Record<string, string> = {
   web: '#00d4ff', database: '#a855f7', monitoring: '#39d353', storage: '#e3b341', security: '#f85149', remote: '#8b949e',
 }