Build 2602262241: live request page updates

frontend/app/requests/[id]/page.tsx

@@ -3,7 +3,7 @@
 import Image from 'next/image'
 import { useEffect, useState } from 'react'
 import { useRouter } from 'next/navigation'
-import { authFetch, clearToken, getApiBase, getToken } from '../../lib/auth'
+import { authFetch, clearToken, getApiBase, getEventStreamToken, getToken } from '../../lib/auth'
 
 type TimelineHop = {
   service: string
@@ -254,6 +254,64 @@ export default function RequestTimelinePage({ params }: { params: { id: string }
     load()
   }, [params.id, router])
 
+  useEffect(() => {
+    if (!getToken()) {
+      return
+    }
+    const baseUrl = getApiBase()
+    let closed = false
+    let source: EventSource | null = null
+
+    const connect = async () => {
+      try {
+        const streamToken = await getEventStreamToken()
+        if (closed) return
+        const streamUrl = `${baseUrl}/events/requests/${encodeURIComponent(
+          params.id
+        )}/stream?stream_token=${encodeURIComponent(streamToken)}`
+        source = new EventSource(streamUrl)
+
+        source.onmessage = (event) => {
+          if (closed) return
+          try {
+            const payload = JSON.parse(event.data)
+            if (!payload || typeof payload !== 'object' || payload.type !== 'request_live') {
+              return
+            }
+            if (String(payload.request_id ?? '') !== String(params.id)) {
+              return
+            }
+            if (payload.snapshot && typeof payload.snapshot === 'object') {
+              setSnapshot(payload.snapshot as Snapshot)
+            }
+            if (Array.isArray(payload.history)) {
+              setHistorySnapshots(payload.history as SnapshotHistory[])
+            }
+            if (Array.isArray(payload.actions)) {
+              setHistoryActions(payload.actions as ActionHistory[])
+            }
+          } catch (error) {
+            console.error(error)
+          }
+        }
+
+        source.onerror = () => {
+          if (closed) return
+        }
+      } catch (error) {
+        if (closed) return
+        console.error(error)
+      }
+    }
+
+    void connect()
+
+    return () => {
+      closed = true
+      source?.close()
+    }
+  }, [params.id])
+
   if (loading) {
     return (
       <main className="card">