Atomizer/atomizer-dashboard/frontend/src/App.tsx

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { StudyProvider } from './context/StudyContext';
import { ClaudeTerminalProvider } from './context/ClaudeTerminalContext';
import { MainLayout } from './components/layout/MainLayout';
import { GlobalClaudeTerminal } from './components/GlobalClaudeTerminal';
import Home from './pages/Home';
import Setup from './pages/Setup';
import Dashboard from './pages/Dashboard';
import Analysis from './pages/Analysis';
import Insights from './pages/Insights';
import Results from './pages/Results';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5000,
      refetchOnWindowFocus: false,
    },
  },
});

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <StudyProvider>
        <ClaudeTerminalProvider>
          <BrowserRouter>
            <Routes>
              {/* Home page - no sidebar layout */}
              <Route path="/" element={<Home />} />

              {/* Study pages - with sidebar layout */}
              <Route element={<MainLayout />}>
                <Route path="setup" element={<Setup />} />
                <Route path="dashboard" element={<Dashboard />} />
                <Route path="analysis" element={<Analysis />} />
                <Route path="insights" element={<Insights />} />
                <Route path="results" element={<Results />} />
              </Route>
            </Routes>

            {/* Global Claude Terminal - persists across navigation */}
            <GlobalClaudeTerminal />
          </BrowserRouter>
        </ClaudeTerminalProvider>
      </StudyProvider>
    </QueryClientProvider>
  );
}

export default App;