Issue #72 — Real-Time Balance & Stream Sync with Optimistic UI & Disconnect Recovery

[Topmatrixmor2014]

Make balance and stream state update in real time with optimistic UI, while recovering gracefully from SSE disconnects and reconciling with the server.

Requirements and Context

frontend/lib/useBalanceStream.ts and backend/src/services/balanceStreamService.js already provide a streaming balance path. The frontend still relies on polling in places, and there is no unified optimistic-update/reconnect story: a dropped SSE connection can leave stale balances on screen, or a slow network can make a payment appear not to have registered.

Objectives

1. Unify balance/stream updates on the SSE feed with automatic reconnect + exponential backoff.
2. Apply optimistic updates on user actions (send/claim) and roll back on server error.
3. Reconcile on reconnect (fetch authoritative state and diff against the UI).
4. Surface connection state (live / reconnecting / stale) in the UI.

Suggested Execution

1. git checkout -b feat/realtime-sync.
2. Extend useBalanceStream.ts with reconnect/backoff and a reconciliation hook.
3. Wire optimistic updates into SendPaymentForm.tsx / StreamingPayments.tsx.
4. Add frontend/__tests__/useBalanceStream.test.ts and run npm run type-check && npm test.

Acceptance Criteria

• SSE reconnects with backoff and reconciles on resume (≥4 tests).
• Optimistic updates roll back cleanly on error (≥3 tests).
• The UI shows a stale/live indicator.
• No duplicated or dropped updates across a simulated disconnect.

Guidelines

• Keep the existing balanceStreamService.js contract; this is primarily a frontend hook/state issue.
• Avoid optimistic updates for irreversible actions (show "processing" instead).

Timeframe: 96 hours

---

[github-actions]

🤖 Greptile AI Context

Greptile has indexed this repository and can provide AI-assisted code review
and context for this issue.

How to use Greptile on this issue:

• Comment @greptileai to ask about relevant code, files, or implementation approaches
• Reference specific files or error messages for targeted analysis
• Use @greptileai explain <file> to get an explanation of any file

Greptile is configured with project-specific rules in .greptile/config.json.