mobile: show active waypoint distance + ETA (and fix route sensor keys)

The route sensor readings use spaced/capitalised keys ("Destination
Latitude", …), but the mobile poll read camelCase, so the destination flag
never appeared. Fix the keys and also read "Distance to Waypoint" and
"Waypoint Closing Velocity".

- boat_state: carry wpDistanceM / wpClosingMs; derive nm, ETA minutes, and
  wall-clock arrival (distance / closing velocity, matching the web app).
- drawer: Navigation section gains Next WP + ETA rows while navigating.
- map: top-center pill with distance + minutes to the next waypoint.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016m9NjsSfBSx1RgN3fpnx7e

Author: claude

mobile/lib/boat_state.dart

@@ -27,6 +27,8 @@ class BoatState extends ChangeNotifier {
   List<AisBoat> aisBoats = const [];
   List<String> cameraNames = const [];
   LatLng? destination; // active route destination (from the `route` sensor)
+  double? wpDistanceM; // distance to next waypoint, metres
+  double? wpClosingMs; // closing velocity toward the waypoint, m/s
   // Which component each reading came from (for the drawer's Sources section).
   Map<String, String?> sources = const {};
   String windInfo = 'off'; // wind-overlay fetch state, shown in Debug
@@ -40,6 +42,28 @@ class BoatState extends ChangeNotifier {
 
   bool get connected => status.startsWith('Connected');
 
+  /// True when there's an active waypoint to navigate to.
+  bool get navigating => (wpDistanceM ?? 0) > 0;
+
+  /// Distance to the next waypoint in nautical miles.
+  double? get wpDistanceNm =>
+      wpDistanceM == null ? null : wpDistanceM! * 0.000539957;
+
+  /// Minutes to the next waypoint at the current closing velocity, or null when
+  /// not closing (stationary / opening). Mirrors the web app's calc.
+  double? get wpEtaMinutes =>
+      (wpDistanceM != null && wpClosingMs != null && wpClosingMs! > 0)
+          ? wpDistanceM! / wpClosingMs! / 60
+          : null;
+
+  /// Wall-clock arrival time, or null when ETA is unknown.
+  DateTime? get wpEta {
+    final m = wpEtaMinutes;
+    return m == null
+        ? null
+        : DateTime.now().add(Duration(seconds: (m * 60).round()));
+  }
+
   /// Last ~60 values for the inline sparkline glance.
   List<double> spark(String key) {
     final l = history[key];
@@ -63,8 +87,14 @@ class BoatState extends ChangeNotifier {
     notifyListeners();
   }
 
-  void setDestination(LatLng? d) {
-    destination = d;
+  void setRoute({
+    LatLng? destination,
+    double? wpDistanceM,
+    double? wpClosingMs,
+  }) {
+    this.destination = destination;
+    this.wpDistanceM = wpDistanceM;
+    this.wpClosingMs = wpClosingMs;
     notifyListeners();
   }
 

mobile/lib/data_drawer.dart

@@ -26,6 +26,15 @@ class DataDrawer extends StatelessWidget {
     return _GraphSpec(metric, label, unit, digits);
   }
 
+  String _eta(BoatState s) {
+    final m = s.wpEtaMinutes;
+    if (m == null) return '—';
+    final t = s.wpEta!;
+    final hh = t.hour.toString().padLeft(2, '0');
+    final mm = t.minute.toString().padLeft(2, '0');
+    return '${m.toStringAsFixed(0)} min ($hh:$mm)';
+  }
+
   String _seakeeper(BoatState s) {
     if (s.seakeeperStabilizing == true) {
       final p = s.seakeeperProgress;
@@ -81,6 +90,14 @@ class DataDrawer extends StatelessWidget {
                 history: history),
             _Row('COG', _fmt(state.cogDeg, '°', digits: 0)),
             _Row('Heading', _fmt(state.headingDeg, '°', digits: 0)),
+            if (state.navigating) ...[
+              _Row(
+                  'Next WP',
+                  state.wpDistanceNm == null
+                      ? '—'
+                      : '${state.wpDistanceNm!.toStringAsFixed(2)} nm'),
+              _Row('ETA', _eta(state)),
+            ],
             const SizedBox(height: 16),
             const _Section('Environment'),
             _Row('Depth', _fmt(state.depthFt, 'ft'),

mobile/lib/map_screen.dart

@@ -369,6 +369,17 @@ class _MapScreenState extends State<MapScreen> {
               ),
             ),
           ),
+          // Top-center: glanceable next-waypoint distance + ETA while navigating.
+          if (s.navigating)
+            SafeArea(
+              child: Align(
+                alignment: Alignment.topCenter,
+                child: Padding(
+                  padding: const EdgeInsets.only(top: 12),
+                  child: _EtaPill(state: s),
+                ),
+              ),
+            ),
           // Top-right: map controls (layer switcher + dashboard opener).
           SafeArea(
             child: Align(
@@ -524,6 +535,45 @@ class _BoatMarker extends StatelessWidget {
   }
 }
 
+/// Top-center pill shown while a route is active: distance to the next
+/// waypoint and estimated time, from the `route` sensor.
+class _EtaPill extends StatelessWidget {
+  const _EtaPill({required this.state});
+  final BoatState state;
+
+  @override
+  Widget build(BuildContext context) {
+    final nm = state.wpDistanceNm;
+    final mins = state.wpEtaMinutes;
+    final parts = <String>[
+      if (nm != null) '${nm.toStringAsFixed(2)} nm',
+      if (mins != null) '${mins.toStringAsFixed(0)} min',
+    ];
+    if (parts.isEmpty) return const SizedBox.shrink();
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
+      decoration: BoxDecoration(
+        color: Colors.black.withValues(alpha: 0.6),
+        borderRadius: BorderRadius.circular(20),
+      ),
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          const Icon(Icons.flag, size: 14, color: Colors.purpleAccent),
+          const SizedBox(width: 6),
+          Text(
+            parts.join('  ·  '),
+            style: const TextStyle(
+                color: Colors.white,
+                fontSize: 14,
+                fontWeight: FontWeight.w600),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
 /// Small pill in the top-left: a colour-coded dot plus the connection status.
 class _StatusChip extends StatelessWidget {
   const _StatusChip({required this.state});

mobile/lib/viam_connection.dart

@@ -343,11 +343,18 @@ class ViamConnection {
       if (routeName != null && _tickN % 5 == 0) {
         try {
           final r = await Sensor.fromRobot(robot, routeName).readings();
-          final lat = r['destinationLatitude'];
-          final lon = r['destinationLongitude'];
-          state.setDestination((lat is num && lon is num)
-              ? LatLng(lat.toDouble(), lon.toDouble())
-              : null);
+          // Keys match the web app's route sensor (spaced/capitalised).
+          final lat = r['Destination Latitude'];
+          final lon = r['Destination Longitude'];
+          final dist = r['Distance to Waypoint']; // metres
+          final closing = r['Waypoint Closing Velocity']; // m/s
+          state.setRoute(
+            destination: (lat is num && lon is num)
+                ? LatLng(lat.toDouble(), lon.toDouble())
+                : null,
+            wpDistanceM: dist is num ? dist.toDouble() : null,
+            wpClosingMs: closing is num ? closing.toDouble() : null,
+          );
         } catch (_) {}
       }