feat(telemetry): add live web dashboard by TheLostLeo · Pull Request #3 · InvictusRex/SentinelBlue

TheLostLeo · 2026-09-20T13:16:46Z

Change the Front end to react

Copilot

Copilot review overview

🟡 Changes recommended

Critical deployment, telemetry integration, build, and mission-control issues remain unresolved.

Get a fresh assessment by requesting another Copilot review.

Review effort: Lite
Findings: 4 · 4

Open (8)

Deployed server does not serve the React entrypoint · New
React migration removes existing mission-control functionality · New
Missing React namespace import can break the TypeScript build · New
Default telemetry URL points to a nonexistent endpoint · New
Telemetry chart window and sample-rate labels are incorrect · New
RC RSSI percentage is incorrectly displayed as dBm · New
Disk percentage is incorrectly treated as gigabytes · New
Failed polls continue showing synthetic healthy live telemetry · New

What changed in this PR

Migrates the telemetry dashboard from legacy static HTML/CSS/JavaScript to React, Vite, TypeScript, and Tailwind.

Changes:

Adds typed telemetry polling, mock handling, charts, reusable components, and a 3D attitude view.
Adds frontend build, styling, PostCSS, and Docker configuration.
Replaces the legacy dashboard assets and logic.

File	Description
`telemetry/live-web-dashboard/vite.config.ts`	Vite React configuration
`telemetry/live-web-dashboard/tsconfig.node.json`	Vite TypeScript configuration
`telemetry/live-web-dashboard/tsconfig.json`	Application TypeScript settings
`telemetry/live-web-dashboard/tailwind.config.js`	Tailwind theme configuration
`telemetry/live-web-dashboard/style.css`	Removed legacy stylesheet
`telemetry/live-web-dashboard/src/types/telemetry.ts`	Telemetry type definitions
`telemetry/live-web-dashboard/src/styles.css`	Global Tailwind styles
`telemetry/live-web-dashboard/src/main.tsx`	React entrypoint
`telemetry/live-web-dashboard/src/hooks/useTelemetry.ts`	Telemetry polling and state mapping
`telemetry/live-web-dashboard/src/data/telemetry.ts`	Vehicle and chart metadata
`telemetry/live-web-dashboard/src/components/TopBar.tsx`	Dashboard header
`telemetry/live-web-dashboard/src/components/TelemetryChart.tsx`	Telemetry charts
`telemetry/live-web-dashboard/src/components/SbcStatusCard.tsx`	SBC metrics card
`telemetry/live-web-dashboard/src/components/Panel.tsx`	Shared panel components
`telemetry/live-web-dashboard/src/components/NavSignalBox.tsx`	Navigation and signal card
`telemetry/live-web-dashboard/src/components/LinkCard.tsx`	Link health card
`telemetry/live-web-dashboard/src/components/FlightStatusCard.tsx`	Flight status card
`telemetry/live-web-dashboard/src/components/ChartPanel.tsx`	Chart panel wrapper
`telemetry/live-web-dashboard/src/components/BatteryBox.tsx`	Battery card
`telemetry/live-web-dashboard/src/components/AttitudeScene.tsx`	Three.js attitude visualization
`telemetry/live-web-dashboard/src/components/AttitudeIndicator.tsx`	Attitude panel
`telemetry/live-web-dashboard/src/components/AltitudeCard.tsx`	Altitude card
`telemetry/live-web-dashboard/src/App.tsx`	Main dashboard layout
`telemetry/live-web-dashboard/postcss.config.js`	PostCSS configuration
`telemetry/live-web-dashboard/package.json`	Frontend dependencies and scripts
`telemetry/live-web-dashboard/index.html`	React HTML shell
`telemetry/live-web-dashboard/Dockerfile`	Frontend container setup
`telemetry/live-web-dashboard/app.js`	Removed legacy dashboard logic
`.gitignore`	Ignores generated frontend artifacts

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

+      <main className="flex flex-1 flex-col gap-2 p-2.5">
+        <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 xl:grid-cols-12">
+          <BatteryBox battery={t.battery} className="min-h-[150px] xl:col-span-3 xl:h-[164px]" />
+          <NavSignalBox nav={t.nav} className="min-h-[150px] xl:col-span-4 xl:h-[164px]" />
+          <AltitudeCard altitude={t.altitude} className="min-h-[150px] xl:col-span-2 xl:h-[164px]" />
+          <LinkCard link={t.link} className="min-h-[150px] xl:col-span-3 xl:h-[164px]" />


TheLostLeo · 2026-09-22T08:35:09Z

+
+const SAMPLES = 64;
+const TICK_MS = 260;
+const LIVE_ENDPOINT = "http://192.168.4.1/telemetry.json";


No code change needed for this one. The dashboard no longer defaults to the Pi /api/telemetry server path. It prompts for the ESP32 IP and polls http://<esp-ip>/telemetry.json; the ESP32 firmware registers that route and returns the live JSON snapshot. Mock fallback data has also been removed.

+      heading,
+      sats: clamp(Math.round(num(raw.satellites, prev.nav.sats)), 0, 32),
+      hdop: num(raw.hdop, prev.nav.hdop),
+      rssi: Math.round(num(raw.rc_rssi, prev.nav.rssi)),


+      diskUsed: clamp(num(sbc.disk_percent, prev.sbc.diskUsed), 0, 100),
+      diskTotal: prev.sbc.diskTotal,


Signed-off-by: TheLostLeo <thelostleo224@gmail.com>

TheLostLeo · 2026-09-21T16:55:50Z

@copilot review the new commit 2b93a3a. The dashboard was moved to telemetry/live-web-dashboard, the Pi code now focuses on MAVLink -> NRF, and ESP32 exposes JSON for the web dashboard.

Co-authored-by: TheLostLeo <166975150+TheLostLeo@users.noreply.github.com>

Copilot · 2026-09-21T16:59:41Z

@copilot review the new commit 2b93a3a. The dashboard was moved to telemetry/live-web-dashboard, the Pi code now focuses on MAVLink -> NRF, and ESP32 exposes JSON for the web dashboard.

Reviewed 2b93a3a with the updated ESP32 JSON architecture in mind and pushed follow-up fixes in ce38d9c: TypeScript build compatibility (moduleResolution: "Bundler"), explicit ReactNode typing, corrected PID chart timing labels (64 s / 1 Hz), RSSI healthy-threshold logic for percent units, and SBC uptime formatting from seconds.

Copilot

Copilot review overview

🔵 Needs a closer look

The broad dashboard and runtime migration has unresolved critical, functional, deployment, and telemetry issues requiring human review.

Review effort: Lite
Findings: 4 · 13 · 2

Open (19)

Restore missing sys import for shutdown handling · New
Default telemetry URL points to a nonexistent endpoint
React migration removes existing mission-control functionality
Deployed server does not serve the React entrypoint
Update main.py runtime description · New
Document laptop-based dashboard deployment · New
Replace hardcoded Wi-Fi credentials with secure provisioning · New
Preserve mission API and control functionality · New
Correct chart sample rate and time window labels · New
Compare RSSI using the correct unit · New
Fix RSSI signal strength thresholds · New
Correct RSSI unit label · New
Fix fourfold uptime calculation · New
Fix accelerated displayed clock · New
Prevent stale telemetry responses after endpoint changes · New
Disk percentage is incorrectly treated as gigabytes
RC RSSI percentage is incorrectly displayed as dBm
Replace deleted web dashboard module documentation · New
Fix undefined text-hud-muted utility · New

Resolved since last review (3)

Missing React namespace import can break the TypeScript build
Failed polls continue showing synthetic healthy live telemetry
Telemetry chart window and sample-rate labels are incorrect

+from sbc_monitor import SBCMonitor
+from mavlink_manager import MAVLinkManager
+from radio_tx_module import RadioTXModule


+### `handheld-nrf-monitor/pi-code/main.py`
 Entry point for the Raspberry Pi companion server. It starts the MAVLink manager, SBC monitor, web dashboard server, NRF24L01+ transmitter, and autonomous grid-search module.


+npm run build
+```
+
+Then start the Raspberry Pi companion server. It will serve `telemetry/live-web-dashboard/dist/index.html` and the generated `dist/assets/*` files. For local development, run Vite instead:


+const char* WIFI_STA_SSID = "gamma";
+const char* WIFI_STA_PASSWORD = "gammared";
+const char* WIFI_HOSTNAME = "drone-esp32";
+const char* WIFI_FALLBACK_AP_SSID = "DroneTelemetryESP32";
+const char* WIFI_FALLBACK_AP_PASSWORD = "drone12345";


+from sbc_monitor import SBCMonitor
+from mavlink_manager import MAVLinkManager
+from radio_tx_module import RadioTXModule


+import type { SbcState } from "../types/telemetry";
+
+function formatUptime(ticks: number): string {
+  const seconds = ticks * 4;


+        setState((prev) => fromLive(prev, raw, endpoint, latencyMs));
+      } catch (error) {
+        failures += 1;
+        const detail = errorText(error);
+        setState((prev) =>
+          failures >= OFFLINE_AFTER_FAILURES
+            ? markJsonOffline(prev, endpoint, detail)
+            : markJsonDegraded(prev, endpoint, detail, failures)
+        );


+### `handheld-nrf-monitor/pi-code/modules/web_dashboard_module.py`
+Runs the HTTP/WebSocket server, serves the built dashboard from `live-web-dashboard/dist/`, exposes telemetry APIs, and forwards mission-control requests to the grid-search module. If `dist/` is missing, it returns a build-required error instead of serving Vite source files.


+          dim: "#8b9aab",
+          faint: "#5c6a7a"


InvictusRex · 2026-09-22T08:02:09Z

@copilot i want a review on the latest commit

Copilot · 2026-09-22T08:05:11Z

@copilot i want a review on the latest commit

Reviewed the latest commit (b7b0655). I found one critical issue still open: the Pi mission/control HTTP server is enabled by default, bound to 0.0.0.0, and exposes /api/arm + /api/mode without auth (telemetry/handheld-nrf-monitor/pi-code/main.py:57-67, .../modules/web_dashboard_module.py:61-63, 217-227). Any host on the same network can send flight-control commands. I recommend defaulting web control off (or localhost-only) and requiring authentication before enabling arm/mode endpoints.

TheLostLeo · 2026-09-22T08:40:01Z

fix the issues

InvictusRex · 2026-09-29T16:50:23Z

@copilot Find the issues in the latest commit from @TheLostLeo

Copilot · 2026-09-29T16:53:33Z

@copilot Find the issues in the latest commit from @TheLostLeo

I reviewed @TheLostLeo’s latest commit (2c9e357) and found two high-confidence issues:

telemetry/handheld-nrf-monitor/pi-code/main.py:24-30 — removing --no-web/--web-port is a breaking CLI change; existing service scripts using those flags will now fail at startup with “unrecognized arguments”.
telemetry/handheld-nrf-monitor/pi-code/main.py:49-56 (+ deletion of pi-code/modules/web_dashboard_module.py and pi-code/modules/grid_search_module.py) — runtime mission-control /api/mission/* capability is fully removed, which breaks integrations relying on those endpoints.

If you want, I can push a minimal compatibility fix next (deprecated no-op flags + opt-in legacy API mode).

TheLostLeo requested review from InvictusRex and a lite review from Copilot September 20, 2026 13:16

Copilot started reviewing on behalf of TheLostLeo September 20, 2026 13:17 View session

Copilot AI reviewed Sep 20, 2026

View reviewed changes

feat(telemetry): add live web dashboard

6babc4a

Signed-off-by: TheLostLeo <thelostleo224@gmail.com>

TheLostLeo force-pushed the feature/telemetry branch from e8f185e to 6babc4a Compare September 21, 2026 12:07

Update telemetry relay dashboard

2b93a3a

Copilot started work on behalf of TheLostLeo September 21, 2026 16:56 View session

TheLostLeo requested a lite review from Copilot September 21, 2026 16:56

Copilot started reviewing on behalf of TheLostLeo September 21, 2026 16:57 View session

fix telemetry dashboard build and unit labels

ce38d9c

Co-authored-by: TheLostLeo <166975150+TheLostLeo@users.noreply.github.com>

Copilot finished work on behalf of TheLostLeo September 21, 2026 17:00

Copilot AI reviewed Sep 21, 2026

View reviewed changes

fix(telemetry): address PR review findings

b7b0655

TheLostLeo force-pushed the feature/telemetry branch from b8283fc to b7b0655 Compare September 22, 2026 07:44

Copilot started work on behalf of InvictusRex September 22, 2026 08:02 View session

Copilot finished work on behalf of InvictusRex September 22, 2026 08:05

fix(telemetry): remove unauthenticated Pi control server

2c9e357

Copilot started work on behalf of InvictusRex September 29, 2026 16:50 View session

Copilot finished work on behalf of InvictusRex September 29, 2026 16:53

Navigation Menu

feat(telemetry): add live web dashboard - #3

feat(telemetry): add live web dashboard#3
TheLostLeo wants to merge 5 commits into
mainfrom
feature/telemetry

TheLostLeo commented Sep 20, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

TheLostLeo Sep 22, 2026

Uh oh!

Uh oh!

Uh oh!

TheLostLeo commented Sep 21, 2026

Uh oh!

Copilot AI commented Sep 21, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

InvictusRex commented Sep 22, 2026

Uh oh!

Copilot AI commented Sep 22, 2026

Uh oh!

TheLostLeo commented Sep 22, 2026

Uh oh!

InvictusRex commented Sep 29, 2026

Uh oh!

Copilot AI commented Sep 29, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

		diskUsed: clamp(num(sbc.disk_percent, prev.sbc.diskUsed), 0, 100),
		diskTotal: prev.sbc.diskTotal,

		### `handheld-nrf-monitor/pi-code/main.py`
		Entry point for the Raspberry Pi companion server. It starts the MAVLink manager, SBC monitor, web dashboard server, NRF24L01+ transmitter, and autonomous grid-search module.

		### `handheld-nrf-monitor/pi-code/modules/web_dashboard_module.py`
		Runs the HTTP/WebSocket server, serves the built dashboard from `live-web-dashboard/dist/`, exposes telemetry APIs, and forwards mission-control requests to the grid-search module. If `dist/` is missing, it returns a build-required error instead of serving Vite source files.

Conversation

TheLostLeo commented Sep 20, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Copilot review overview

🟡 Changes recommended

Uh oh!

Uh oh!

Uh oh!

TheLostLeo Sep 22, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

TheLostLeo commented Sep 21, 2026

Uh oh!

Copilot AI commented Sep 21, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Copilot review overview

🔵 Needs a closer look

Uh oh!

Uh oh!

InvictusRex commented Sep 22, 2026

Uh oh!

Copilot AI commented Sep 22, 2026

Uh oh!

TheLostLeo commented Sep 22, 2026

Uh oh!

InvictusRex commented Sep 29, 2026

Uh oh!

Copilot AI commented Sep 29, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants