The realtime layer has no standalone screens — it manifests as connection state and
live-update behavior on existing screens . This inventory is UI-context only: it
enumerates every surface where realtime is visible, plus the one proposed debug screen.
Authoritative components in 00-shared/03 ; this file names which each surface uses.
Legend — States: idle / connecting / connected / reconnecting / offline(disconnected) /
error(auth) / stale-data. Analytics: {module}.{screen}.{action} (proposed; SDK open —
00-shared/10 §8 ).
Field Detail
Purpose Show whether live updates are flowing; never block work Location Top app bar trailing slot / app-level banner region (below app bar on mobile) Entry auto with app shell; state from socket lifecycle Exit none (persistent); tap → status sheet (§4) on desktop Components AppRealtimeStatusDot, AppConnectionBanner (offline only), AppSnackbarStates connected (dot, tooltip "Live"), connecting, reconnecting (pulsing dot), offline (banner + dot), error-auth (banner: "Session expired — reconnecting") Analytics app.ws.{connect,reconnect,offline,error} (proposed)a11y status announced via live region on state change; dot carries semantic label, never color-only Motion m-fast fade/pulse (00-shared/08 )
Field Detail
Purpose Surface notification.created without navigating Entry app shell Behavior bell badge increments on event; toast (snackbar) shows for high-priority types only Exit tap bell → notifications list (REST); tap toast → target route Components AppBadge, AppSnackbar, AppListTileStates idle, toast-expanded, badge-count overflow (99+) Analytics notif.received.{type}, notif.tap (proposed)
Field Detail
Purpose Refresh list rows / KPI tiles in place when a matching event arrives Host screens Dashboard overview, Fees, Attendance, Homework, Results, CRM (per module design docs) Pattern AppLiveList wrapper (component in 07 ); event → update row by id, else schedule REST refetchStates idle, live-updating (row flash m-fast), stale (offline banner, AppSkeleton for loading) Rule never mutate a list while the user is editing within it (see 10 §2)
Field Detail
Purpose Show user-facing diagnostics: state, server time delta, last event received Entry tap status dot (desktop) / long-press (mobile) Content state chip, "last event: {eventType} {occurredAt}", "reconnect attempt #n", settings shortcut Components AppBottomSheet, AppListTile, AppChipsAnalytics app.ws.status_open (proposed)
Field Detail
Purpose IT/admin verification: see the event stream and connection health for the tenant Route /admin/realtime (admin-gated; rbac perms — none exist yet for ws, see 12 )Content live event log (eventType, occurredAt, payload size), socket count, room list, fan-out errors; clear/pause controls (client-side pause only) Components AppEventLog, AppDataTable, AppSegmentedButtonStates live, paused, empty ("waiting for events…"), filtered by eventType Analytics admin.ws.{open,pause,filter} (proposed)Note Server-side counterpart (per-socket visibility) is forward-looking
AppRealtimeStatusDot, AppConnectionBanner, AppLiveList, AppEventLog,
AppBadge, AppSnackbar, AppBottomSheet, AppListTile, AppSkeleton,
AppEmptyState. Module-specific: AppRealtimeStatusDot and AppLiveList are
defined in 07_Component_Library.md .
Status dot + banner are fixed-position surfaces: safe-area inset aware, never overlap
scroll content; landscape keeps banner ≤ 1 line.
Debug view: tablet/desktop two-column (log + metrics); mobile single column.