feat: add websocket-aware realtime refresh

src/App.jsx

@@ -1,8 +1,10 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import './App.css'
 
 const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://app-01:8080'
+const WS_URL = import.meta.env.VITE_WS_URL || ''
 const POLL_INTERVAL_MS = 10000
+const RECONNECT_DELAY_MS = 5000
 
 const statusColors = {
   queued: 'status-queued',
@@ -70,37 +72,92 @@ function App() {
   const [sort, setSort] = useState({ key: 'created_at', direction: 'desc' })
   const [filters, setFilters] = useState(defaultFilters)
   const [selectedId, setSelectedId] = useState('')
+  const [transport, setTransport] = useState(WS_URL ? 'connecting websocket…' : 'polling')
+
+  const load = useCallback(async () => {
+    try {
+      const response = await fetch(`${API_BASE_URL}/work`)
+      if (!response.ok) throw new Error(`Request failed with ${response.status}`)
+      const data = await response.json()
+      setItems(data)
+      setError('')
+      setSelectedId((current) => {
+        if (current && data.some((item) => item.id === current)) return current
+        return data[0]?.id ?? ''
+      })
+    } catch (err) {
+      setError(err.message || 'Failed to load queue')
+    } finally {
+      setLoading(false)
+    }
+  }, [])
 
   useEffect(() => {
-    let cancelled = false
+    let active = true
+    let socket
+    let pollTimer
+    let reconnectTimer
+
+    const startPolling = () => {
+      setTransport('polling')
+      load()
+      pollTimer = window.setInterval(load, POLL_INTERVAL_MS)
+    }
+
+    const stopPolling = () => {
+      if (pollTimer) window.clearInterval(pollTimer)
+    }
+
+    const connectWebSocket = () => {
+      if (!WS_URL || !active) {
+        startPolling()
+        return
+      }
 
-    async function load() {
       try {
-        const response = await fetch(`${API_BASE_URL}/work`)
+        socket = new WebSocket(WS_URL)
-        if (!response.ok) throw new Error(`Request failed with ${response.status}`)
+      } catch {
-        const data = await response.json()
+        startPolling()
-        if (!cancelled) {
+        return
-          setItems(data)
+      }
-          setError('')
+
-          setSelectedId((current) => {
+      socket.onopen = () => {
-            if (current && data.some((item) => item.id === current)) return current
+        if (!active) return
-            return data[0]?.id ?? ''
+        stopPolling()
-          })
+        setTransport('websocket')
-        }
+        load()
-      } catch (err) {
+      }
-        if (!cancelled) setError(err.message || 'Failed to load queue')
+
-      } finally {
+      socket.onmessage = () => {
-        if (!cancelled) setLoading(false)
+        if (!active) return
+        load()
+      }
+
+      socket.onerror = () => {
+        if (!active) return
+        setTransport('polling')
+      }
+
+      socket.onclose = () => {
+        if (!active) return
+        startPolling()
+        reconnectTimer = window.setTimeout(() => {
+          stopPolling()
+          connectWebSocket()
+        }, RECONNECT_DELAY_MS)
       }
     }
 
     load()
-    const timer = setInterval(load, POLL_INTERVAL_MS)
+    connectWebSocket()
+
     return () => {
-      cancelled = true
+      active = false
-      clearInterval(timer)
+      stopPolling()
+      if (reconnectTimer) window.clearTimeout(reconnectTimer)
+      if (socket && socket.readyState < 2) socket.close()
     }
-  }, [])
+  }, [load])
 
   const filterOptions = useMemo(
     () => ({
@@ -156,7 +213,7 @@ function App() {
         <div className="meta-card">
           <span>{filteredItems.length} visible items</span>
           <span>{items.length} total items</span>
-          <span>Polling every 10s</span>
+          <span>Updates via {transport}</span>
         </div>
       </header>
 
@@ -189,10 +246,7 @@ function App() {
           </label>
           <label>
             <span>Priority</span>
-            <select
+            <select value={filters.priority} onChange={(event) => updateFilter('priority', event.target.value)}>
-              value={filters.priority}
-              onChange={(event) => updateFilter('priority', event.target.value)}
-            >
               <option value="">All</option>
               {filterOptions.priorities.map((value) => (
                 <option key={value} value={String(value)}>
@@ -274,12 +328,7 @@ function App() {
               <DetailRow label="Project ID" value={selectedItem.project_id} mono />
               <DetailRow label="Type" value={selectedItem.type} />
               <DetailRow label="Description" value={selectedItem.description} preserve />
-              <DetailRow
+              <DetailRow label="Payload" value={selectedItem.payload ? JSON.stringify(selectedItem.payload, null, 2) : '—'} mono preserve />
-                label="Payload"
-                value={selectedItem.payload ? JSON.stringify(selectedItem.payload, null, 2) : '—'}
-                mono
-                preserve
-              />
               <DetailRow label="Priority" value={String(selectedItem.priority)} />
               <DetailRow label="Assigned Agent" value={selectedItem.assigned_agent} />
               <DetailRow label="Created By" value={selectedItem.created_by} />
@@ -288,16 +337,7 @@ function App() {
               <DetailRow label="Completed At" value={formatDate(selectedItem.completed_at)} />
               <DetailRow label="Outcome" value={selectedItem.outcome} />
               <DetailRow label="Notes" value={selectedItem.notes} preserve />
-              <DetailRow
+              <DetailRow label="Dispatch Log" value={selectedItem.dispatch_log?.length ? JSON.stringify(selectedItem.dispatch_log, null, 2) : '[]'} mono preserve />
-                label="Dispatch Log"
-                value={
-                  selectedItem.dispatch_log?.length
-                    ? JSON.stringify(selectedItem.dispatch_log, null, 2)
-                    : '[]'
-                }
-                mono
-                preserve
-              />
             </dl>
           ) : (
             <div className="empty-detail">Select a work item to inspect its full details.</div>