From 2c8759bf88a0c24542dfe0863510994735e021ea Mon Sep 17 00:00:00 2001
From: aarbit <aarbit@gmail.com>
Date: Tue, 1 Sep 2026 14:56:50 -0500
Subject: [PATCH] Adds connection status color to ports

---
 src/components/canvas/DeviceNode.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/canvas/DeviceNode.tsx b/src/components/canvas/DeviceNode.tsx
index eb68a5d..4b55c08 100644
--- a/src/components/canvas/DeviceNode.tsx
+++ b/src/components/canvas/DeviceNode.tsx
@@ -19,8 +19,18 @@ export type DeviceNodeData = {
 
 export type DeviceFlowNode = Node<DeviceNodeData, 'device'>
 
+// Port availability palette: emerald for open/available, terracotta for
+// already connected. Terracotta over a saturated red/rose specifically
+// because a fully-wired rig is the common end state — with most ports
+// connected, a hot red reads as an alert; a warmer, muted clay tone stays
+// legible and pleasant even when it's the dominant color on screen.
+// Alternates worth trying: dusty rose '#c17b8a' (more muted/pink), coral
+// '#f4785d' (brighter/warmer than terracotta, still softer than rose-500).
+const PORT_COLOR_AVAILABLE = '#10b981' // emerald-500
+const PORT_COLOR_CONNECTED = '#d97757' // terracotta
+
 function PortHandle({ portInfo, position }: { portInfo: PortInfo; position: Position }) {
-  const { port, isFull } = portInfo
+  const { port, isFull, connectionCount } = portInfo
   const edgeStyle =
     position === Position.Left
       ? { left: -13 }
@@ -40,7 +50,7 @@ function PortHandle({ portInfo, position }: { portInfo: PortInfo; position: Posi
         ...edgeStyle,
         width: 10,
         height: 10,
-        background: isFull ? '#cbd5e1' : '#6366f1',
+        background: connectionCount > 0 ? PORT_COLOR_CONNECTED : PORT_COLOR_AVAILABLE,
       }}
     />
   )
@@ -48,7 +58,7 @@ function PortHandle({ portInfo, position }: { portInfo: PortInfo; position: Posi
 
 function CountBadge({ count }: { count: number }) {
   if (count === 0) return null
-  return <span className="shrink-0 rounded bg-slate-100 px-1 text-[10px] text-slate-500">{count}</span>
+  return <span className="shrink-0 rounded bg-orange-50 px-1 text-[10px] text-orange-800">{count}</span>
 }
 
 export default function DeviceNode({ data, selected }: NodeProps<DeviceFlowNode>) {