HyperCluster/Fara-BrowserUse

1import { CssBaseline, ThemeProvider } from '@mui/material';
2import { useMemo } from 'react';
3import { BrowserRouter, Route, Routes } from "react-router-dom";
4import { getWebSocketUrl } from './config/api';
5import { useAgentWebSocket } from './hooks/useAgentWebSocket';
6import Task from "./pages/Task";
7import Welcome from "./pages/Welcome";
8import { selectIsDarkMode, useAgentStore } from './stores/agentStore';
9import getTheme from './theme';
10
11const App = () => {
12  const isDarkMode = useAgentStore(selectIsDarkMode);
13  const theme = useMemo(() => getTheme(isDarkMode ? 'dark' : 'light'), [isDarkMode]);
14
15  // Initialize WebSocket connection at app level so it persists across route changes
16  const { stopCurrentTask } = useAgentWebSocket({ url: getWebSocketUrl() });
17
18  // Store functions in window for global access
19  (window as Window & { __stopCurrentTask?: () => void }).__stopCurrentTask = stopCurrentTask;
20
21
22  return (
23    <ThemeProvider theme={theme}>
24      <CssBaseline />
25      <BrowserRouter>
26        <Routes>
27          <Route path="/" element={<Welcome />} />
28          <Route path="/task" element={<Task />} />
29        </Routes>
30      </BrowserRouter>
31    </ThemeProvider>
32  );
33};
34
35export default App;
36