🔨 TASK-015: Performance Optimization for Large Node Sets

[ajacobm]

Task: Performance Optimization for Large Node Sets

Description: Optimize workbench view performance for codebases with 1000+ nodes.

Technical Details:

• Implement virtualized list for list view
• Lazy render cards not in viewport
• Cache child node data
• Debounce search/filter
• Profile and optimize re-renders

Files to Create/Modify:

frontend/src/components/workbench/VirtualizedCardGrid.tsx  (create)
frontend/src/components/workbench/WorkbenchCanvas.tsx      (modify - use virtualization)
frontend/src/hooks/useVirtualization.ts                    (create - custom hook)

Performance Targets:

Metric	Target
Initial render (100 nodes)	< 100ms
Initial render (1000 nodes)	< 500ms
Drill-down transition	< 200ms
Filter response	< 50ms
Memory usage	< 100MB for 1000 nodes

Techniques to Apply:

1. Virtualization: Only render visible cards (react-window or custom)
2. Memoization: Prevent unnecessary re-renders
3. Debouncing: Throttle filter/search updates
4. Caching: Store child data by parent ID
5. Code Splitting: Lazy load heavy components

Acceptance Criteria:

• Virtualized rendering for 100+ children
• Smooth scrolling maintained
• Filter/sort debounced appropriately
• Level data cached for quick back navigation
• No memory leaks on navigation

Effort: L (Large - 8-16 hours)

Parent Story: #40
Parent Epic: #27

Branch: task/polish/performance