feat: connection creation workflow (desktop)

[ggfevans]

Parent Epic

Part of #71 (Network Interface Visualization and Connectivity)

Dependencies

• feat: Connection Graph Model - Phase 1: Port-Based Architecture #362 (Connection Graph Model) - data model must be complete
• feat: MVP Connection model #365 (Connection model) - provides Connection type
• feat: Connection store with validation #369 (Connection store) - provides validation and CRUD
• feat: integrate PortIndicators into RackDevice #250 (PortIndicators with click handlers)

---

Summary

Implement the UX flow for creating connections between ports on desktop.

Workflow Options

1. Click-Click - Click port A, then click port B
2. Drag - Drag from port A to port B
3. Form-based - Select devices and ports from dropdowns

Recommended: Click-Click Workflow

1. User clicks port A → enters "connecting" mode
2. Visual feedback: port A highlighted, cursor changes
3. Other valid ports become highlighted (compatible types)
4. User clicks port B → connection created
5. Escape cancels connecting mode

Acceptance Criteria

• Click port to enter connecting mode
• Visual indicator of connecting mode (port glow, cursor)
• Highlight compatible target ports
• Click target port to create connection
• Escape/click-away cancels
• Connection appears immediately after creation
• Undo support for connection creation
• Keyboard accessible (Tab to next port, Enter to connect)

UI States

State	Port A	Other Ports	Cursor
Normal	Default	Default	Pointer
Connecting	Glow + "source"	Compatible highlighted	Crosshair
Hovering target	Glow	Hover port glows	Pointer

Validation

• Prevent connecting port to itself
• Prevent duplicate connections
• Warn on type mismatch (RJ45 to SFP)

References

• draw.io connector workflow
• Device42 drag-and-drop