feat: cable details panel

[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
• spike: cable path rendering algorithm #262 (Connection path rendering - need clickable paths)

---

Summary

View and edit connection properties in the EditPanel sidebar.

Acceptance Criteria

• Click connection path to select it
• Show connection details in EditPanel
• Display: class, cable type, color, label, length, status
• Edit connection properties
• Show both endpoints (device A/port, device B/port)
• Navigate to endpoint (click to select that device)
• Delete connection with confirmation

UI Design

┌─────────────────────────┐
│ Connection: Patch-001   │
├─────────────────────────┤
│ Class: [Network ▼]      │
│ Cable Type: [CAT6a ▼]   │
│ Color: [■ Blue]         │
│ Label: [___________]    │
│ Length: [2.5] [m ▼]     │
│ Status: [Connected ▼]   │
│ Role: [Primary ▼]       │
├─────────────────────────┤
│ Endpoint A:             │
│ Switch-01 / eth0  [→]   │
├─────────────────────────┤
│ Endpoint B:             │
│ Patch-Panel / 01  [→]   │
├─────────────────────────┤
│ [Delete Connection]     │
└─────────────────────────┘

References

• EditPanel: src/lib/components/EditPanel.svelte