Design a Notification UI with History and Live Updates

Design a user-facing notification system that loads existing read and unread notifications when a page opens and receives new notifications in real time. ### Constraints & Assumptions The reported design explicitly requires a traditional history API with server-side pagination in addition to WebSocket or Server-Sent Events. State notification ordering, retention, and read-state semantics rather than treating the live channel as durable history. ### Clarifying Questions Are read states per user or per device? Can notifications arrive late? What does mark-all-read mean while new notifications arrive? Must a reconnect recover missed events? ### What a Strong Answer Covers A durable notification/read-state model, stable cursor pagination, initial-load/live-stream coordination, deduplication, reconnect recovery, and a responsive UI. ### Follow-up Questions How do you avoid a gap between the first API response and starting the stream? How do changes on another device update the unread count? Why is client-side pagination insufficient for a long history?