import { BrowserRouter, Routes, Route } from 'react-router-dom'
import { ErrorBoundary } from './components/ErrorBoundary'
import { Dashboard } from './pages/Dashboard'
import { SessionDetailPage } from './pages/SessionDetailPage'
import { ProjectInsightsPage } from './pages/ProjectInsightsPage'
import { NotFoundPage } from './pages/NotFoundPage'
import { MemoryPanel } from './components/MemorySidebar'
import { SkillPanel } from './components/SkillSidebar'
import { SubagentPanel } from './components/SubagentSidebar'
import './App.css'

function App() {
  return (
    <ErrorBoundary>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Dashboard />} />
          <Route path="/insights/:projectId" element={<ProjectInsightsPage />} />
          <Route path="/session/:sessionId" element={<SessionDetailPage />}>
            <Route path="memory" element={<MemoryPanel />} />
            <Route path="skills/:skillName" element={<SkillPanel />} />
            <Route path="subagents/:subagentName" element={<SubagentPanel />} />
          </Route>
          <Route path="*" element={<NotFoundPage />} />
        </Routes>
      </BrowserRouter>
    </ErrorBoundary>
  )
}

export default App
