Boltix frontend architecture map

Inbox data flow

A phone-friendly map of how inbox data enters the dashboard, becomes local state, renders into the five-zone UI, and flows back through optimistic commands.

UI and runtime API sync Local store User writes
Boltix inbox frontend data flow graph Dashboard inbox screen creates a runtime, hydrates Inbox Core from RxDB, syncs from API and WebSocket events, renders selectors, and sends user mutations through a command outbox. React inbox UI Dashboard runtime Local-first core Backend / realtime InboxScreen mounts five-zone UI Selectors useDashboardInbox Selector(...) Rendered zones Navigator counts ConversationList Thread messages Details panel User actions send / read / assign Runtime provider creates one runtime for organization + account Sync orchestrator bootstrap, replay, catch-up, maintenance WebSocket adapter applies sync_event or triggers gap catch-up Command outbox durable retries for mutating commands RxDB offline cache + cursors Inbox Core conversations messages metadata + drafts commands + selectors Bootstrap API projected inbox rows metadata snapshot Sync events API durable ordered replay after stored cursor Realtime socket sync_event frames for live updates Conversation API send, mark read, assign, tag, history mount open + hydrate restore start / continue replay pages sync_event persist snapshot subscribe derive click / type enqueue flush command optimistic stage server emits catch-up covers gaps history pages
1. Runtime is the boundary

InboxScreen mounts a DashboardInboxRuntime for the active organization and account. Components read runtime state through selectors.

2. Core is the authority

Inbox Core owns conversations, messages, counters, metadata, drafts, command state, and subscriptions. React state only holds UI filters.

3. Sync is ordered

RxDB hydrates first. Bootstrap and sync-event replay catch up from a durable cursor. WebSocket events keep the screen live after that.

4. Writes are optimistic

Sends, read marks, assignments, and tags stage local changes, enter the command outbox, flush to the API, then reconcile through sync events.

Source map: apps/dashboard/src/components/inbox, apps/dashboard/src/inbox-core, and packages/inbox-core.