23f9d4a8fb
- Add useSSE hook with exponential back-off reconnect (1s → 30s) - Add useRealtimeSync hook: maps SSE events to React Query invalidation (agent.status → agents; agent.task/agent.progress → tasks+agents; fleet.update → all) - Add SSEContext/SSEProvider so connection status is available app-wide - Mount SSEProvider in main.tsx inside QueryClientProvider (no polling) - Show live/connecting/reconnecting/disconnected badge in sidebar + mobile header - Update SettingsPage: replace polling interval UI with SSE status panel - Disable React Query polling (staleTime 60s); all updates pushed via SSE Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
import { StrictMode } from 'react'
|
|
import { createRoot } from 'react-dom/client'
|
|
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
|
|
import { BrowserRouter } from 'react-router-dom'
|
|
import ErrorBoundary from './components/ErrorBoundary'
|
|
import { ThemeProvider } from './hooks/useTheme'
|
|
import { SSEProvider } from './contexts/SSEContext'
|
|
import './index.css'
|
|
import App from './App'
|
|
|
|
const queryClient = new QueryClient({
|
|
defaultOptions: {
|
|
queries: {
|
|
// No polling — real-time updates come through SSE.
|
|
// staleTime is kept high; data is pushed, not pulled.
|
|
staleTime: 60_000,
|
|
refetchOnWindowFocus: false,
|
|
retry: 1,
|
|
},
|
|
},
|
|
})
|
|
|
|
createRoot(document.getElementById('root')!).render(
|
|
<StrictMode>
|
|
<ErrorBoundary>
|
|
<ThemeProvider>
|
|
<QueryClientProvider client={queryClient}>
|
|
{/* SSEProvider must live inside QueryClientProvider so it can call
|
|
useQueryClient() to invalidate caches on incoming events. */}
|
|
<SSEProvider>
|
|
<BrowserRouter>
|
|
<App />
|
|
</BrowserRouter>
|
|
</SSEProvider>
|
|
</QueryClientProvider>
|
|
</ThemeProvider>
|
|
</ErrorBoundary>
|
|
</StrictMode>,
|
|
)
|