feat(web): real-time dashboard with SSE and optimistic UI updates by AgentWrapper · Pull Request #94 · ComposioHQ/agent-orchestrator

AgentWrapper · 2026-02-18T11:47:36Z

Summary

SSE subscription: Dashboard subscribes to /api/events on mount and patches status/activity/lastActivityAt in real-time — no more page reloads needed when agent state changes externally
Optimistic UI: Kill, merge, and restore actions update local state immediately before the API call resolves, with automatic rollback on failure; SSE reconciles true state within 5s
Session detail page: Replaces unconditional 5s polling with SSE-driven instant status updates + 30s fallback poll for PR/CI data refresh
Live stats: Stats bar recomputes from live session state on every SSE event and every optimistic action

Test plan

Open dashboard — session status badges update without reloading when an agent starts/stops working
Click "terminate session" — row immediately moves to the DONE zone; if the kill API fails, it snaps back
Click "merge PR" — PR row disappears from the PR table immediately; if merge fails, it reappears
Click "restore session" — row immediately moves out of DONE zone
Open a session detail page — activity badge updates when agent state changes without a full page reload
Kill the dev server briefly, verify SSE reconnects after 3s without a page reload
Verify stats bar (sessions / working / open PRs / need review) reflects changes made via optimistic updates

🤖 Generated with Claude Code

packages/web/src/components/Dashboard.tsx

packages/web/src/app/sessions/[id]/page.tsx

packages/web/src/components/Dashboard.tsx

packages/web/src/hooks/useSSE.ts

packages/web/src/components/Dashboard.tsx

packages/web/src/lib/types.ts

.github/workflows/security.yml

packages/web/src/components/Dashboard.tsx

packages/web/src/app/sessions/[id]/page.tsx

- SSE subscription: Dashboard subscribes to /api/events and patches status/activity/lastActivityAt in real-time — no page reloads needed - applySSESnapshot: bail-out optimization (returns original array ref when unchanged), skips sessions with pending optimistic updates - Optimistic UI with ref-counted pending guard (Map<string,number>): kill/merge/restore update local state immediately with rollback on failure - pr.state synced when SSE delivers status:"merged" - Session detail page: useSSE for instant status + polling for full data - computeStats in types.ts (client-safe); deduplicated from serialize.ts - CI: pnpm strict audit now distinguishes registry outages from vulnerabilities Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is OFF. To automatically fix reported issues with Cloud Agents, enable Autofix in the Cursor dashboard.}

cursor · 2026-02-21T13:36:44Z

packages/web/src/app/sessions/[id]/page.tsx

+            status: update.status,
+            activity: update.activity,
+            lastActivityAt: update.lastActivityAt,
+          };


Session detail SSE misses pr.state sync on merge

Medium Severity

The session detail page's SSE handler patches status, activity, and lastActivityAt but doesn't sync pr.state when status becomes "merged". The Dashboard's applySSESnapshot correctly mirrors pr.state to "merged" in this case, but the session detail page omits this. SessionDetail relies on pr.state === "merged" to render the "Merged" badge and to suppress stale "Merge conflicts" warnings — so for up to 30 seconds (until the next poll), the detail page shows contradictory information: session status says "merged" while the PR card still appears open with possible false conflict warnings.

Additional Locations (1)

packages/web/src/components/Dashboard.tsx#L52-L61