🔨 TASK-006: Implement View Toggle System

[ajacobm]

Task: Implement View Toggle System

Description: Create the ViewToggle component and integrate dual-view system into App.tsx with lazy loading for the force graph.

Technical Details:

• Create frontend/src/components/ViewToggle.tsx
• Modify frontend/src/App.tsx to support view switching
• Implement React.lazy() for ForceGraph component
• Add Suspense with loading spinner
• Persist preference in localStorage under codenav.defaultView
• Add toggle control to header bar

Files to Create/Modify:

frontend/src/components/ViewToggle.tsx  (create)
frontend/src/App.tsx                     (modify)

Implementation Pattern:

// Lazy load the heavy ForceGraph component
const ForceGraph = React.lazy(() => import('@/components/graph/ForceGraph'))

// In the main canvas area
{activeView === 'graph' ? (
  <Suspense fallback={<LoadingSpinner message="Loading graph visualization..." />}>
    <ForceGraph {...graphProps} />
  </Suspense>
) : (
  <WorkbenchCanvas {...workbenchProps} />
)}

Acceptance Criteria:

• Toggle control in header switches views
• ForceGraph lazy loads only when selected
• Loading spinner shown during graph load
• User preference saved to localStorage
• Preference restored on page load

Effort: M (Medium - 4-8 hours)

Parent Story: #34
Parent Epic: #27

Branch: task/integration/view-toggle