From 93b1398b5c651cfa8df8250778dd1e1bb42d4d8c Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Sat, 4 Apr 2026 14:24:25 +0000
Subject: [PATCH] refactor: DeviceNode uses BaseNode, BaseHandle,
 StatusIndicator, Tooltip

Replaces hand-rolled node layout with composable React Flow UI
components. Status is now a border effect instead of a dot.
Hover tooltip shows hostname, IP, vendor, role, notes.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../components/network/nodes/DeviceNode.tsx   | 82 +++++++++++++------
 1 file changed, 55 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/network/nodes/DeviceNode.tsx b/frontend/src/components/network/nodes/DeviceNode.tsx
index b0de9f61..4335b38d 100644
--- a/frontend/src/components/network/nodes/DeviceNode.tsx
+++ b/frontend/src/components/network/nodes/DeviceNode.tsx
@@ -1,6 +1,9 @@
 import { memo } from 'react'
-import { Handle, Position, type NodeProps } from '@xyflow/react'
-import { cn } from '@/lib/utils'
+import { Position, type NodeProps } from '@xyflow/react'
+import { BaseNode, BaseNodeHeader, BaseNodeHeaderTitle, BaseNodeContent } from '../ui/base-node'
+import { BaseHandle } from '../ui/base-handle'
+import { NodeStatusIndicator, type NodeStatus } from '../ui/node-status-indicator'
+import { NodeTooltip, NodeTooltipTrigger, NodeTooltipContent } from '../ui/node-tooltip'
 import { getDeviceRenderConfig } from './deviceRegistry'
 import type { DeviceProperties } from '@/types'
 
@@ -12,39 +15,64 @@ export interface DeviceNodeData {
   [key: string]: unknown
 }
 
-const STATUS_COLORS: Record<string, string> = {
-  online: 'bg-emerald-400',
-  offline: 'bg-red-400',
-  degraded: 'bg-yellow-400',
-  unknown: 'bg-gray-500',
+function TooltipRow({ label, value }: { label: string; value: string | null | undefined }) {
+  if (!value) return null
+  return (
+    <div className="flex gap-2">
+      <span className="text-[10px] uppercase tracking-wider text-muted-foreground">{label}</span>
+      <span className="text-xs font-mono text-primary">{value}</span>
+    </div>
+  )
 }
 
 function DeviceNodeComponent({ data, selected }: NodeProps) {
   const nodeData = data as unknown as DeviceNodeData
   const { icon: Icon, color } = getDeviceRenderConfig(nodeData.deviceType, nodeData.category)
-  const status = nodeData.properties?.status || 'unknown'
+  const status = (nodeData.properties?.status || 'unknown') as NodeStatus
   const ip = nodeData.properties?.ip
+  const props = nodeData.properties || {}
+
+  const hasTooltipContent = props.hostname || props.ip || props.vendor || props.model || props.role || props.notes
 
   return (
-    <div
-      className={cn(
-        'relative flex min-w-[120px] flex-col items-center gap-1 rounded-lg border bg-card px-4 py-3',
-        'border-default transition-colors',
-        'group',
-        selected && 'border-accent',
-      )}
-    >
-      <div className={cn('absolute right-2 top-2 h-2 w-2 rounded-full', STATUS_COLORS[status])} />
-      <Icon size={28} style={{ color }} />
-      <span className="text-center text-xs font-medium text-heading">{nodeData.label}</span>
-      {ip && (
-        <span className="font-mono text-[10px] text-muted-foreground">{ip}</span>
-      )}
-      <Handle type="target" position={Position.Top} className="!h-2 !w-2 !border-default !bg-elevated opacity-0 group-hover:opacity-100 transition-opacity" />
-      <Handle type="source" position={Position.Bottom} className="!h-2 !w-2 !border-default !bg-elevated opacity-0 group-hover:opacity-100 transition-opacity" />
-      <Handle type="target" position={Position.Left} id="left" className="!h-2 !w-2 !border-default !bg-elevated opacity-0 group-hover:opacity-100 transition-opacity" />
-      <Handle type="source" position={Position.Right} id="right" className="!h-2 !w-2 !border-default !bg-elevated opacity-0 group-hover:opacity-100 transition-opacity" />
-    </div>
+    <NodeStatusIndicator status={status}>
+      <NodeTooltip>
+        <NodeTooltipTrigger>
+          <BaseNode className={`min-w-[120px] group ${selected ? 'border-accent' : ''}`}>
+            <BaseNodeHeader className="flex-col gap-1 items-center py-3 px-4">
+              <Icon size={28} style={{ color }} />
+              <BaseNodeHeaderTitle className="text-center text-xs">
+                {nodeData.label}
+              </BaseNodeHeaderTitle>
+            </BaseNodeHeader>
+            {ip && (
+              <BaseNodeContent className="items-center pt-0">
+                <span className="font-mono text-[10px] text-muted-foreground">{ip}</span>
+              </BaseNodeContent>
+            )}
+            <BaseHandle type="target" position={Position.Top} />
+            <BaseHandle type="source" position={Position.Bottom} />
+            <BaseHandle type="target" position={Position.Left} id="left" />
+            <BaseHandle type="source" position={Position.Right} id="right" />
+          </BaseNode>
+        </NodeTooltipTrigger>
+        {hasTooltipContent && (
+          <NodeTooltipContent position={Position.Bottom}>
+            <div className="flex flex-col gap-1 min-w-[140px]">
+              <TooltipRow label="Host" value={props.hostname} />
+              <TooltipRow label="IP" value={props.ip} />
+              {(props.vendor || props.model) && (
+                <TooltipRow label="HW" value={[props.vendor, props.model].filter(Boolean).join(' ')} />
+              )}
+              <TooltipRow label="Role" value={props.role} />
+              {props.notes && (
+                <TooltipRow label="Notes" value={props.notes.length > 100 ? props.notes.slice(0, 100) + '...' : props.notes} />
+              )}
+            </div>
+          </NodeTooltipContent>
+        )}
+      </NodeTooltip>
+    </NodeStatusIndicator>
   )
 }