refactor(dashboard): side-by-side graph + cards layout #215

2026-05-12T09:26:38Z

xingyue commented

2026-05-12 09:26:38 +00:00

What

Thread detail 页面从上下布局改为左右分栏：左侧 280px sticky 流程图导航，右侧可滚动 record cards。

Why

流程图作为导航始终可见，点节点跳到对应 card，比折叠面板更直观。

Changes

thread-detail.tsx — 删除可折叠 GraphPanel，改为 flex 左右布局
- 左：280px sticky sidebar，height: calc(100vh - 120px)
- 右：flex-1 min-w-0 可滚动 cards
无 descriptor 时 graceful degradation（右侧独占）
所有现有功能保留：node click scroll、highlight flash、SSE、actions

Note

由 develop workflow 自动完成（planner → coder → reviewer → tester → committer）🐕

## What Thread detail 页面从上下布局改为左右分栏：左侧 280px sticky 流程图导航，右侧可滚动 record cards。 ## Why 流程图作为导航始终可见，点节点跳到对应 card，比折叠面板更直观。 ## Changes - `thread-detail.tsx` — 删除可折叠 GraphPanel，改为 `flex` 左右布局 - 左：280px sticky sidebar，`height: calc(100vh - 120px)` - 右：`flex-1 min-w-0` 可滚动 cards - 无 descriptor 时 graceful degradation（右侧独占） - 所有现有功能保留：node click scroll、highlight flash、SSE、actions ## Note 由 develop workflow 自动完成（planner → coder → reviewer → tester → committer）🐕

xingyue added 3 commits 2026-05-12 09:26:38 +00:00

feat: WebSocket reverse-connection gateway Phase 1 (#210 ) 321b5431f4

- Add AgentSocket Durable Object (holds one WS per agent name)
- Add /ws/connect route with GATEWAY_SECRET auth
- Add ws-client.ts with auto-reconnect (exponential backoff 1s-30s)
- serve defaults to WS mode (no cloudflared needed)
- Keep --tunnel-url and --no-tunnel as fallback options
- Endpoints list merges KV heartbeat + DO WebSocket status

Testing: #211

feat: WS request proxy — Gateway proxies HTTP via WebSocket (#210 Phase 2) e84650ccf5

- Add ws-protocol.ts with WsRequest/WsResponse types + parsers
- AgentSocket DO: proxy POST handler, pending request map, 30s timeout
- /api/agents/:agent/* routes through DO WS when connected, falls back to HTTP
- ws-client handles incoming WsRequest, fetches local serve, returns WsResponse
- startGatewayWsClient accepts localPort for request handling

Testing: #213

refactor(dashboard): replace vertical layout with side-by-side graph+cards 46112d361f

Change thread-detail from vertical (graph on top, cards below) to a
side-by-side layout:
- Left panel (280px, sticky): workflow graph, always visible
- Right panel (flex-1, scrollable): record cards
- Remove collapsible GraphPanel wrapper
- Graph acts as navigation (click node → scroll to card)

Refs: workflow thread 06F1NX4C9ET6HPXJAH7CWWF8MR

xingyue force-pushed refactor/thread-detail-side-by-side-layout from 46112d361f to 1871ef31b4

2026-05-13 03:05:13 +00:00

Compare

xiaomo approved these changes 2026-05-13 03:06:32 +00:00

xiaomo left a comment

LGTM. Clean implementation: type-safe WsRequest/WsResponse parsing with validation, proper exponential backoff reconnection, no console.log (uses createLogger), named exports throughout, null unions instead of optional props. Dashboard layout refactor is straightforward. Agent socket DO with proper cleanup on disconnect. Approved.

xiaomo merged commit ed1f38c7da into main

2026-05-13 03:06:36 +00:00

xiaomo referenced this issue from a commit

2026-05-13 03:06:37 +00:00

Merge pull request 'refactor(dashboard): side-by-side graph + cards layout' (#215) from refactor/thread-detail-side-by-side-layout into main

Sign in to join this conversation.

2 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: uncaged/workflow#215