Connect live telemetry SSE stream to the frontend dashboard

[MohamedEBR]

Summary

We have migrated telemetry ingestion from the legacy TCP flow to an HTTP push model from the Jetson, and the backend now broadcasts live telemetry over Server-Sent Events (SSE). The next step is to connect the frontend dashboard to the new live stream so users can view telemetry updates in real time.

Background

• Jetson devices now publish telemetry to POST /api/v1/telemetry using an x-api-key.
• The backend validates incoming telemetry, writes it to InfluxDB, and broadcasts the payload to all connected SSE clients.
• The frontend-facing stream is exposed at GET /api/v1/telemetry/stream.
• The stream requires a valid JWT access token in the Authorization: Bearer <token> header.
• The backend currently supports multiple concurrent stream clients and instructs clients to retry every 10 seconds if disconnected.

Problem

The backend streaming path is implemented and verified, but the frontend is not yet connected to it. We need a reliable, authenticated frontend integration that:

• opens and maintains the telemetry stream
• handles disconnects and reconnects cleanly
• updates the dashboard state from incoming events
• surfaces loading, disconnected, and error states clearly
• works with the new Jetson-to-backend HTTP ingestion flow

Goal

Implement frontend support for live telemetry streaming from the backend SSE endpoint and ensure it works end-to-end with Jetson-published telemetry.

Technical Notes

Backend behavior

• Telemetry ingestion endpoint: POST /api/v1/telemetry
• Telemetry streaming endpoint: GET /api/v1/telemetry/stream
• Ingestion auth: x-api-key
• Stream auth: JWT bearer token
• Broadcast model: one telemetry payload is sent to all connected stream clients
• Retry hint: backend sends retry: 10000

Current backend flow

1. Jetson pushes telemetry to the backend over HTTP.
2. Backend validates the payload and timestamp skew.
3. Backend writes the payload to InfluxDB.
4. Backend broadcasts the payload to all subscribed SSE clients.

Frontend integration considerations

• Native EventSource does not support custom Authorization headers.
• If the frontend needs bearer-token auth in the header, we may need one of these approaches:
  • use a fetch-based SSE client that supports headers
  • proxy the SSE request through a frontend/backend layer that can attach auth
  • adjust auth strategy if the team wants cookie-based SSE instead
• We should align the frontend approach with the current backend requirement before implementation.

Proposed Deliverables

• Frontend streaming client/service for telemetry SSE
• Dashboard state integration for incoming telemetry updates
• UI states for connecting, live, reconnecting, and error conditions
• Short implementation notes or docs for how to test locally with Jetson or curl

Acceptance Criteria

• Frontend can connect to /api/v1/telemetry/stream in local development
• Stream connection is authenticated correctly
• Incoming telemetry events update the dashboard without page refresh
• Multiple telemetry messages are handled continuously without leaking connections
• Disconnections trigger a visible reconnecting/error state
• Expired or invalid auth is handled in a user-understandable way
• Jetson-published telemetry can be observed live in the frontend during local testing