fix: show single handle per node, rely on arrow for direction

Hide the target (left) handle on SystemNode and AgentNode so each node
displays only one visible circle. The directional arrow marker on edges
communicates flow direction, halving the visual handle count.

- user-input:  source handle on right (visible)
- user-output: target handle on left  (visible)
- all others:  source handle on right (visible), target on left (hidden)

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
David Kaya
2026-03-24 23:18:55 +01:00
co-authored by Copilot
parent eb2c8450e3
commit b5b4f1b1c6
@@ -66,8 +66,11 @@ const handleStyles = {
hidden: '!size-0 !border-0 !bg-transparent !min-w-0 !min-h-0',
};
/* user-input: source only (no incoming handle)
user-output: target only (no outgoing handle) */
/* Every node shows a single visible handle (circle).
The arrow marker on each edge indicates flow direction.
- user-input: source on right (visible)
- user-output: target on left (visible)
- others: source on right (visible), target on left (hidden but functional) */
export const UserInputNode = memo(function UserInputNode({ data, selected }: NodeProps) {
const nodeData = data as unknown as GraphNodeData;
@@ -95,7 +98,7 @@ export const SystemNode = memo(function SystemNode({ data, selected }: NodeProps
const nodeData = data as unknown as GraphNodeData;
return (
<>
<Handle type="target" position={Position.Left} className={handleStyles.system} />
<Handle type="target" position={Position.Left} className={handleStyles.hidden} />
<GraphNodeContent data={nodeData} selected={selected ?? false} />
<Handle type="source" position={Position.Right} className={handleStyles.system} />
</>
@@ -106,7 +109,7 @@ export const AgentNode = memo(function AgentNode({ data, selected }: NodeProps)
const nodeData = data as unknown as GraphNodeData;
return (
<>
<Handle type="target" position={Position.Left} className={handleStyles.agent} />
<Handle type="target" position={Position.Left} className={handleStyles.hidden} />
<GraphNodeContent data={nodeData} selected={selected ?? false} />
<Handle type="source" position={Position.Right} className={handleStyles.agent} />
</>