Joshua
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>
24 lines
797 B
TypeScript
24 lines
797 B
TypeScript
/**
|
|
* SSEContext — provides SSE connection status throughout the component tree.
|
|
* Mount <SSEProvider> once inside QueryClientProvider.
|
|
*/
|
|
import { createContext, useContext, type ReactNode } from 'react'
|
|
import { useRealtimeSync } from '../hooks/useRealtimeSync'
|
|
import type { SSEStatus } from '../hooks/useSSE'
|
|
|
|
interface SSEContextValue {
|
|
sseStatus: SSEStatus
|
|
}
|
|
|
|
const SSEContext = createContext<SSEContextValue>({ sseStatus: 'connecting' })
|
|
|
|
export function SSEProvider({ children }: { children: ReactNode }) {
|
|
const { sseStatus } = useRealtimeSync()
|
|
return <SSEContext.Provider value={{ sseStatus }}>{children}</SSEContext.Provider>
|
|
}
|
|
|
|
/** Access the SSE connection status from any component. */
|
|
export function useSSEContext(): SSEContextValue {
|
|
return useContext(SSEContext)
|
|
}
|