Improvements to the queue processing.

ui/src/composables/useSSE.ts

@@ -1,18 +1,22 @@
 import { ref, onMounted, onUnmounted } from 'vue'
 import type { SSEEvent } from '@/types'
 
-export function useSSE() {
-  const isConnected = ref(false)
-  const isProcessing = ref(false)
-  const queueDepth = ref(0)
-  const lastEvent = ref<SSEEvent | null>(null)
+// Singleton state - shared across all useSSE() calls
+const isConnected = ref(false)
+const isProcessing = ref(false)
+const queueDepth = ref(0)
+const lastEvent = ref<SSEEvent | null>(null)
 
-  let eventSource: EventSource | null = null
-  let reconnectTimeout: number | null = null
+let eventSource: EventSource | null = null
+let reconnectTimeout: number | null = null
+let connectionCount = 0
+
+export function useSSE() {
 
   const connect = () => {
+    // Only create connection if not already connected
     if (eventSource) {
-      eventSource.close()
+      return
     }
 
     eventSource = new EventSource('/api/events')
@@ -25,6 +29,12 @@ export function useSSE() {
     eventSource.onmessage = (event) => {
       try {
         const data: SSEEvent = JSON.parse(event.data)
+
+        // Debug: log all SSE events
+        if (data.type !== 'processing_status') {
+          console.log('[SSE] Event received:', data.type, data)
+        }
+
         lastEvent.value = data
 
         if (data.type === 'processing_status') {
@@ -82,18 +92,25 @@ export function useSSE() {
   }
 
   onMounted(() => {
-    // Add listeners to close SSE on page refresh/navigation
-    window.addEventListener('beforeunload', handleBeforeUnload)
-    window.addEventListener('pagehide', handlePageHide)
-    window.addEventListener('pageshow', handlePageShow)
-    connect()
+    connectionCount++
+    if (connectionCount === 1) {
+      // First consumer - add listeners and connect
+      window.addEventListener('beforeunload', handleBeforeUnload)
+      window.addEventListener('pagehide', handlePageHide)
+      window.addEventListener('pageshow', handlePageShow)
+      connect()
+    }
   })
 
   onUnmounted(() => {
-    window.removeEventListener('beforeunload', handleBeforeUnload)
-    window.removeEventListener('pagehide', handlePageHide)
-    window.removeEventListener('pageshow', handlePageShow)
-    disconnect()
+    connectionCount--
+    if (connectionCount === 0) {
+      // Last consumer - remove listeners and disconnect
+      window.removeEventListener('beforeunload', handleBeforeUnload)
+      window.removeEventListener('pagehide', handlePageHide)
+      window.removeEventListener('pageshow', handlePageShow)
+      disconnect()
+    }
   })
 
   return {

ui/src/composables/useStats.ts

@@ -1,12 +1,16 @@
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, onMounted, onUnmounted, watch } from 'vue'
 import type { Stats } from '@/types'
 import { fetchStats } from '@/utils/api'
+import { useSSE } from './useSSE'
 
 export function useStats(pollInterval: number = 5000) {
   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()
+
   let intervalId: number | null = null
 
   const refresh = async () => {
@@ -35,6 +39,14 @@ export function useStats(pollInterval: number = 5000) {
     }
   }
 
+  // Watch for SSE session events and refresh immediately
+  watch(lastEvent, (event) => {
+    if (event && event.type === 'session') {
+      console.log('[Stats] SSE session event triggered refresh:', event.action)
+      refresh()
+    }
+  })
+
   onMounted(() => {
     refresh()
     startPolling()

ui/src/composables/useTimeline.ts

@@ -112,6 +112,7 @@ export function useTimeline() {
   // Watch for SSE events and refresh
   watch(lastEvent, (event) => {
     if (event && (event.type === 'observation' || event.type === 'prompt' || event.type === 'summary')) {
+      console.log('[Timeline] SSE event triggered refresh:', event.type)
       refresh()
     }
   })