diff --git a/backlog/tasks/task-042 - 3D-Network-Graph-Visualization-&-Edge-Metadata-Editor.md b/backlog/tasks/task-042 - 3D-Network-Graph-Visualization-&-Edge-Metadata-Editor.md new file mode 100644 index 0000000..4e9cf77 --- /dev/null +++ b/backlog/tasks/task-042 - 3D-Network-Graph-Visualization-&-Edge-Metadata-Editor.md @@ -0,0 +1,52 @@ +--- +id: task-042 +title: 3D Network Graph Visualization & Edge Metadata Editor +status: To Do +assignee: [] +created_date: '2025-12-06 06:46' +labels: + - feature + - visualization + - 3d + - networking +dependencies: + - task-041 +priority: medium +--- + +## Description + + +Build the 3D interactive network visualization at graph.jeffemmett.com and implement the edge metadata editor modal. This extends the 2D minimap created in task-041. + +Key Features: +1. **3D Force Graph** at graph.jeffemmett.com + - Three.js / react-force-graph-3d visualization + - Full-screen, interactive (spin, zoom, pan) + - Click nodes to view user profiles + - Click edges to edit metadata + - Same trust level coloring (grey/yellow/green) + - Real-time presence sync with canvas rooms + +2. **Edge Metadata Editor Modal** + - Opens on edge click in 2D minimap or 3D view + - Edit: label, notes, color, strength (1-10) + - Private to each party on the edge + - Bidirectional - each user has their own metadata view + +3. **Expand Button Integration** + - 2D minimap expand button opens 3D view + - URL sharing for specific graph views + - Optional: embed 3D graph back in canvas as iframe + + +## Acceptance Criteria + +- [ ] #1 3D force graph at graph.jeffemmett.com renders user network +- [ ] #2 Graph is interactive: spin, zoom, pan, click nodes/edges +- [ ] #3 Edge metadata editor modal allows editing label, notes, color, strength +- [ ] #4 Edge metadata persists to D1 and is private per-user +- [ ] #5 Expand button in 2D minimap opens 3D view +- [ ] #6 Real-time updates when connections change +- [ ] #7 Trust level colors match 2D minimap (grey/yellow/green) +