feat(dashboard): connect thread detail to SSE live stream #134

2026-05-08T09:43:23Z

xingyue commented

2026-05-08 09:43:23 +00:00

What

Connect dashboard thread detail to the SSE live endpoint for real-time thread viewing.

Why

Issue #131 — the SSE endpoint existed but the frontend wasn't using it. Now threads update in real-time.

Changes

packages/dashboard/src/use-sse.ts — NEW — useSSE hook
- EventSource connection to /api/threads/:id/live
- Record accumulation from record events
- Auto-reconnect with exponential backoff (1s→8s)
- Completes on workflow-result record
- Cleanup on unmount/threadId change
packages/dashboard/src/components/thread-detail.tsx — UPDATED
- SSE-first rendering with fetch fallback
- Green "Live" badge when connected
- Auto-scroll to bottom on new records

Testing

All steps in #133 verified ✅

useSSE hook exports correct types
No ?: optional properties
Biome check clean
Dashboard build passes
262 tests pass

Ref

Closes #131, testing per #133, part of #118

## What Connect dashboard thread detail to the SSE live endpoint for real-time thread viewing. ## Why Issue #131 — the SSE endpoint existed but the frontend wasn't using it. Now threads update in real-time. ## Changes - **packages/dashboard/src/use-sse.ts** — NEW — `useSSE` hook - EventSource connection to `/api/threads/:id/live` - Record accumulation from `record` events - Auto-reconnect with exponential backoff (1s→8s) - Completes on `workflow-result` record - Cleanup on unmount/threadId change - **packages/dashboard/src/components/thread-detail.tsx** — UPDATED - SSE-first rendering with fetch fallback - Green "Live" badge when connected - Auto-scroll to bottom on new records ## Testing All steps in #133 verified ✅ - useSSE hook exports correct types - No `?:` optional properties - Biome check clean - Dashboard build passes - 262 tests pass ## Ref Closes #131, testing per #133, part of #118

xingyue added 1 commit 2026-05-08 09:43:24 +00:00

feat(dashboard): connect thread detail to SSE live stream ced0d5b15d

Add useSSE hook that connects to /api/threads/:id/live via EventSource.
Thread detail page now shows records in real-time with auto-scroll.

- useSSE hook: EventSource connection, record accumulation, auto-reconnect
  with exponential backoff, cleanup on unmount
- Thread detail: Live badge, SSE-first with fetch fallback, smooth scroll
- Records clear on reconnect (server replays full file)

Closes #131, testing verified per #133
Refs: #118

xiaomo approved these changes 2026-05-08 09:47:54 +00:00

xiaomo left a comment

Review: feat(dashboard) — SSE live stream ✅

2 files, +161 新增 use-sse.ts + thread-detail 改造。Cursor 写的代码质量不错 👍

✅ 做得好的

useSSE hook：reconnect with exponential backoff（上限 8s），completedRef 防止 completed 后继续重连，cancelled flag 防 unmount 后 setState
自动滚动：recordsEndRef + scrollIntoView，biome-ignore 注释规范
SSE ↔ REST 降级：SSE 连上用实时数据，断开/completed 回退到 REST fetch，逻辑清晰
type=button 补全：之前漏的，好习惯

💡 Nit（不阻塞）

key={JSON.stringify(r)}（thread-detail.tsx）— 每次 render 都序列化每条 record，record 多了会有性能开销。建议用 SSE 的 event id 或 records 数组的 index（SSE 模式下 records 只追加不变更，index 稳定）
onopen 时 setRecords([])（use-sse.ts:128）— 重连时清空记录会闪一下，如果 reconnect 是因为网络抖动（thread 还在跑），用户会短暂丢失已有内容。可以考虑保留已有 records，从 lastEventId 续传

两个都是优化项，不阻塞。LGTM 合并。

测试流程验证到位 👏 Issue #133 的 7 步 checklist 是好实践。

## Review: feat(dashboard) — SSE live stream ✅ 2 files, +161 新增 use-sse.ts + thread-detail 改造。Cursor 写的代码质量不错 👍 ### ✅ 做得好的 - **useSSE hook**：reconnect with exponential backoff（上限 8s），completedRef 防止 completed 后继续重连，cancelled flag 防 unmount 后 setState - **自动滚动**：recordsEndRef + scrollIntoView，biome-ignore 注释规范 - **SSE ↔ REST 降级**：SSE 连上用实时数据，断开/completed 回退到 REST fetch，逻辑清晰 - **type=button 补全**：之前漏的，好习惯 ### 💡 Nit（不阻塞） 1. **`key={JSON.stringify(r)}`**（thread-detail.tsx）— 每次 render 都序列化每条 record，record 多了会有性能开销。建议用 SSE 的 event id 或 records 数组的 index（SSE 模式下 records 只追加不变更，index 稳定） 2. **onopen 时 setRecords([])**（use-sse.ts:128）— 重连时清空记录会闪一下，如果 reconnect 是因为网络抖动（thread 还在跑），用户会短暂丢失已有内容。可以考虑保留已有 records，从 lastEventId 续传两个都是优化项，不阻塞。LGTM 合并。测试流程验证到位 👏 Issue #133 的 7 步 checklist 是好实践。

xingyue force-pushed feat/131-dashboard-sse from ced0d5b15d to a44f1f34a8

2026-05-08 09:52:17 +00:00

Compare

xiaomo merged commit dedab62c49 into main

2026-05-08 09:53:10 +00:00

xiaomo referenced this issue from a commit

2026-05-08 09:53:12 +00:00

Merge pull request 'feat(dashboard): connect thread detail to SSE live stream' (#134) from feat/131-dashboard-sse into main

xingyue referenced this pull request

2026-05-08 10:03:51 +00:00

RFC: Workflow Dashboard — HTTP API + Cloudflare Web UI #118

Sign in to join this conversation.