cc-dashboard/web/src/composables/useSSE.ts

import { ref, onUnmounted } from 'vue'

export interface SSEEvent {
  type: string
  data: unknown
}

export function useSSE(url: string) {
  const events = ref<SSEEvent[]>([])
  const connected = ref(false)
  const error = ref<string | null>(null)
  let es: EventSource | null = null
  let reconnectTimer: ReturnType<typeof setTimeout> | null = null
  let closed = false

  function connect() {
    if (closed) return
    try {
      es = new EventSource(url)

      es.onopen = () => {
        connected.value = true
        error.value = null
      }

      es.onmessage = (e) => {
        try {
          const parsed = JSON.parse(e.data)
          events.value.push({ type: 'message', data: parsed })
          // Keep last 200 events
          if (events.value.length > 200) events.value.shift()
        } catch {
          events.value.push({ type: 'message', data: e.data })
        }
      }

      es.addEventListener('session_start', (e: MessageEvent) => {
        try {
          events.value.push({ type: 'session_start', data: JSON.parse(e.data) })
        } catch {
          events.value.push({ type: 'session_start', data: e.data })
        }
        if (events.value.length > 200) events.value.shift()
      })

      es.addEventListener('session_end', (e: MessageEvent) => {
        try {
          events.value.push({ type: 'session_end', data: JSON.parse(e.data) })
        } catch {
          events.value.push({ type: 'session_end', data: e.data })
        }
        if (events.value.length > 200) events.value.shift()
      })

      es.addEventListener('activity', (e: MessageEvent) => {
        try {
          events.value.push({ type: 'activity', data: JSON.parse(e.data) })
        } catch {
          events.value.push({ type: 'activity', data: e.data })
        }
        if (events.value.length > 200) events.value.shift()
      })

      es.onerror = () => {
        connected.value = false
        error.value = 'Connection lost, reconnecting...'
        es?.close()
        es = null
        if (!closed) {
          reconnectTimer = setTimeout(() => connect(), 5000)
        }
      }
    } catch (err) {
      error.value = 'Failed to connect to event stream'
      if (!closed) {
        reconnectTimer = setTimeout(() => connect(), 5000)
      }
    }
  }

  function disconnect() {
    closed = true
    if (reconnectTimer) clearTimeout(reconnectTimer)
    es?.close()
    es = null
    connected.value = false
  }

  function clearEvents() {
    events.value = []
  }

  onUnmounted(() => {
    disconnect()
  })

  return {
    events,
    connected,
    error,
    connect,
    disconnect,
    clearEvents,
  }
}