Opens authenticated SSE over fetch, parsing streamed frames into EventSourceLike events.
AuthService
frontend/src/app/core/services/auth.service.ts
Stores the access token used by the authenticated SSE transport.
UserStore
frontend/src/app/core/services/user.store.ts
Hydrates the signed-in user and rank data.
Authenticated SSE wiring
HomeComponent.ngOnInit() calls EventStatusStore.start() with a factory for
AuthenticatedEventSourceService.open('/api/v1/events/status'). The transport:
Reads the access token from AuthService.
Sends Accept: text/event-stream, optional Authorization: Bearer <token>,
credentials: 'include', and an AbortSignal.
Reads the response body with a stream reader and decodes UTF-8 chunks.
Splits complete SSE records on blank lines, joins repeated data: lines, and
dispatches MessageEvent objects.
Buffers records received before the message listener is attached.
Aborts and clears listeners when close() is called.
EventStatusStore parses each message as EventStatePayload, updates its signals,
and runs a one-second local timer. HomeComponent stops the store on destruction.
Defines the event payload and transport interface.
tests/frontend/authenticated-event-source.spec.ts
Regression coverage for authenticated SSE transport behavior.
Event-status pure helpers
frontend/src/app/core/services/event-status.pure.ts owns the small,
no-Angular types and pure functions consumed by the event status pipeline.
EventStatusStore re-exports them so application code can import from a
single path.
Export
Purpose
EventState
Union 'running' | 'countdown' | 'stopped' | 'unconfigured'.
EventStatePayload
Server-pushed event window payload shape.
EventSourceLike
Minimal interface for any SSE transport the store can drive.
formatDdHhMm(seconds)
Pure DD:HH:mm formatter.
deriveCountdownText(state, start, end)
Pure mapping from event window state to countdown label.
LED_COLOR_BY_STATE
Readonly<Record<EventState, string>> mapping each state to its theme CSS variable (var(--color-success), --color-warning, --color-danger, --color-secondary).
ledBackgroundColor(state)
Pure accessor returning the background-color value for the LED element.
ShellHeaderComponent exposes a computed signal ledColor() that calls
ledBackgroundColor(this.eventState()) and binds it to the LED via
[style.background-color]. The component's .led base rule is therefore
shape-only (size, radius, inline-block, vertical alignment); the visible
color always comes from LED_COLOR_BY_STATE and is guaranteed to be a
non-transparent theme token. The four led-<state> classes remain on the
element as selectors/test hooks but no longer own the color.
OpenVelo Agent