From c586f63e8afb43f6d70da922646e7f1bccb16dd4 Mon Sep 17 00:00:00 2001
From: joren <joren@ai-c-s.my.domain>
Date: Mon, 30 Mar 2026 01:14:46 +0200
Subject: [PATCH] fix: merged duplex nodes get blue border instead of confusing
 green/red

- When merge rules combine input+output nodes, mode is set to 'duplex'
- Duplex nodes: blue border (#49a), blue-tinted bg, dark blue header
- Visually distinct from green=output, red=input nodes
---
 frontend/src/components/GraphCanvas.svelte | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/GraphCanvas.svelte b/frontend/src/components/GraphCanvas.svelte
index 94a398b..c0f7ab0 100644
--- a/frontend/src/components/GraphCanvas.svelte
+++ b/frontend/src/components/GraphCanvas.svelte
@@ -144,9 +144,14 @@
       const mergedName = getMergedName(nd.name);
       const existing = merged.get(mergedName);
       if (existing) {
-        // Merge port IDs
         existing.port_ids = [...new Set([...existing.port_ids, ...nd.port_ids])];
         existing.name = mergedName;
+        // If merged node has both input and output ports, mark as duplex
+        const mergedInPorts = existing.port_ids.map(pid => portMap.get(pid)).filter((p): p is Port => !!p && p.mode === 'input');
+        const mergedOutPorts = existing.port_ids.map(pid => portMap.get(pid)).filter((p): p is Port => !!p && p.mode === 'output');
+        if (mergedInPorts.length > 0 && mergedOutPorts.length > 0) {
+          existing.mode = 'duplex';
+        }
       } else {
         merged.set(mergedName, { ...nd, name: mergedName });
       }
@@ -573,9 +578,10 @@
     {#each graphNodes as nd (nd.id)}
       {@const isSource = nd.mode === 'output'}
       {@const isSink = nd.mode === 'input'}
-      {@const bg = isSource ? '#1a2a1a' : isSink ? '#2a1a1a' : '#1e1e2e'}
-      {@const border = isSource ? '#4a9' : isSink ? '#a44' : '#555'}
-      {@const headerBg = isSource ? '#263826' : isSink ? '#382626' : '#262638'}
+      {@const isDuplex = nd.mode === 'duplex'}
+      {@const bg = isSource ? '#1a2a1a' : isSink ? '#2a1a1a' : isDuplex ? '#1a1a2a' : '#1e1e2e'}
+      {@const border = isSource ? '#4a9' : isSink ? '#a44' : isDuplex ? '#49a' : '#555'}
+      {@const headerBg = isSource ? '#263826' : isSink ? '#382626' : isDuplex ? '#262638' : '#262638'}
 
       <g class="node-group" data-node-id={String(nd.id)} filter="url(#shadow)">
         <rect x={nd.x} y={nd.y} width={nd.width} height={nd.height} rx="4" fill={bg} stroke={border} stroke-width="1" />