Dashboard and sdk processor improvements.

ui/src/composables/useStats.ts

@@ -3,15 +3,18 @@ import type { Stats } from '@/types'
 import { fetchStats } from '@/utils/api'
 import { useSSE } from './useSSE'
 
-export function useStats(pollInterval: number = 5000) {
+// Fallback poll interval when SSE is disconnected
+const FALLBACK_POLL_INTERVAL = 10000 // 10 seconds
+
+export function useStats() {
   const stats = ref<Stats | null>(null)
   const loading = ref(false)
   const error = ref<string | null>(null)
 
   // SSE for real-time session updates
-  const { lastEvent } = useSSE()
+  const { lastEvent, isConnected } = useSSE()
 
-  let intervalId: number | null = null
+  let fallbackIntervalId: number | null = null
 
   const refresh = async () => {
     loading.value = true
@@ -27,33 +30,50 @@ export function useStats(pollInterval: number = 5000) {
     }
   }
 
-  const startPolling = () => {
-    if (intervalId) return
-    intervalId = window.setInterval(refresh, pollInterval)
+  const startFallbackPolling = () => {
+    if (fallbackIntervalId) return
+    console.log('[Stats] SSE disconnected, starting fallback polling')
+    fallbackIntervalId = window.setInterval(refresh, FALLBACK_POLL_INTERVAL)
   }
 
-  const stopPolling = () => {
-    if (intervalId) {
-      clearInterval(intervalId)
-      intervalId = null
+  const stopFallbackPolling = () => {
+    if (fallbackIntervalId) {
+      console.log('[Stats] SSE connected, stopping fallback polling')
+      clearInterval(fallbackIntervalId)
+      fallbackIntervalId = null
     }
   }
 
-  // Watch for SSE session events and refresh immediately
+  // Watch for SSE events that affect stats
   watch(lastEvent, (event) => {
-    if (event && event.type === 'session') {
-      console.log('[Stats] SSE session event triggered refresh:', event.action)
+    if (event && (event.type === 'session' || event.type === 'processing_status')) {
+      if (event.type === 'session') {
+        console.log('[Stats] SSE session event triggered refresh:', event.action)
+      }
       refresh()
     }
   })
 
+  // Switch between SSE-driven and fallback polling based on connection status
+  watch(isConnected, (connected) => {
+    if (connected) {
+      stopFallbackPolling()
+      refresh() // Refresh immediately on reconnect
+    } else {
+      startFallbackPolling()
+    }
+  })
+
   onMounted(() => {
     refresh()
-    startPolling()
+    // Start fallback polling only if SSE is not connected
+    if (!isConnected.value) {
+      startFallbackPolling()
+    }
   })
 
   onUnmounted(() => {
-    stopPolling()
+    stopFallbackPolling()
   })
 
   return {