diff --git a/frontend/src/pages/AdminPipeline.tsx b/frontend/src/pages/AdminPipeline.tsx index dada332..d51cc3b 100644 --- a/frontend/src/pages/AdminPipeline.tsx +++ b/frontend/src/pages/AdminPipeline.tsx @@ -215,7 +215,7 @@ function DebugPayloadViewer({ event }: { event: PipelineEvent }) { // ── Event Log ──────────────────────────────────────────────────────────────── -function EventLog({ videoId }: { videoId: string }) { +function EventLog({ videoId, status }: { videoId: string; status: string }) { const [events, setEvents] = useState([]); const [total, setTotal] = useState(0); const [loading, setLoading] = useState(true); @@ -223,9 +223,10 @@ function EventLog({ videoId }: { videoId: string }) { const [offset, setOffset] = useState(0); const [viewMode, setViewMode] = useState<"head" | "tail">("tail"); const limit = 50; + const initialLoaded = useRef(false); - const load = useCallback(async () => { - setLoading(true); + const load = useCallback(async (silent = false) => { + if (!silent) setLoading(true); setError(null); try { const res = await fetchPipelineEvents(videoId, { @@ -235,10 +236,11 @@ function EventLog({ videoId }: { videoId: string }) { }); setEvents(res.items); setTotal(res.total); + initialLoaded.current = true; } catch (err) { - setError(err instanceof Error ? err.message : "Failed to load events"); + if (!silent) setError(err instanceof Error ? err.message : "Failed to load events"); } finally { - setLoading(false); + if (!silent) setLoading(false); } }, [videoId, offset, viewMode]); @@ -246,6 +248,13 @@ function EventLog({ videoId }: { videoId: string }) { void load(); }, [load]); + // Auto-refresh when video is actively processing + useEffect(() => { + if (status !== "processing" && status !== "queued") return; + const id = setInterval(() => void load(true), 10_000); + return () => clearInterval(id); + }, [status, load]); + if (loading) return
Loading events…
; if (error) return
Error: {error}
; if (events.length === 0) return
No events recorded.
; @@ -1056,7 +1065,7 @@ export default function AdminPipeline() { Created: {formatDate(video.created_at)} Updated: {formatDate(video.updated_at)} - + )}