Add shared UI components for mesh application

- Introduced `mesh_ui.dart` with reusable widgets including SectionHeader, MeshCard, StatusChip, StatTile, AvatarCircle, SignalBars, RouteChip, PulseDot, BottomSheetHeader, ErrorRetryCard, and ListEntrance.
- Implemented `path_map_ui.dart` for path map screens, featuring path distance calculations, playback controls, and a summary list of observed paths.
- Created `themed_map_tile_layer.dart` for shared cached map tiles with automatic dark-mode treatment.

lib/widgets/battery_indicator.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 
 import '../connector/meshcore_connector.dart';
+import '../theme/mesh_theme.dart';
 
 class BatteryUi {
   final IconData icon;
@@ -10,19 +11,19 @@ class BatteryUi {
 
 BatteryUi batteryUiForPercent(int? percent) {
   if (percent == null) {
-    return const BatteryUi(Icons.battery_unknown, Colors.grey);
+    return const BatteryUi(Icons.battery_unknown, null);
   }
 
   final p = percent.clamp(0, 100);
 
   return switch (p) {
-    <= 5 => const BatteryUi(Icons.battery_alert, Colors.redAccent),
-    <= 15 => const BatteryUi(Icons.battery_0_bar, Colors.redAccent),
-    <= 30 => const BatteryUi(Icons.battery_1_bar, Colors.orange),
-    <= 45 => const BatteryUi(Icons.battery_2_bar, Colors.amber),
-    <= 60 => const BatteryUi(Icons.battery_3_bar, Colors.lightGreen),
-    <= 80 => const BatteryUi(Icons.battery_5_bar, Colors.green),
-    _ => const BatteryUi(Icons.battery_full, Colors.green),
+    <= 5 => const BatteryUi(Icons.battery_alert, MeshPalette.alert),
+    <= 15 => const BatteryUi(Icons.battery_0_bar, MeshPalette.alert),
+    <= 30 => const BatteryUi(Icons.battery_1_bar, MeshPalette.warn),
+    <= 45 => const BatteryUi(Icons.battery_2_bar, MeshPalette.warn),
+    <= 60 => const BatteryUi(Icons.battery_3_bar, null),
+    <= 80 => const BatteryUi(Icons.battery_5_bar, null),
+    _ => const BatteryUi(Icons.battery_full, MeshPalette.signal),
   };
 }
 
@@ -76,9 +77,9 @@ class _BatteryIndicatorState extends State<BatteryIndicator> {
                 Flexible(
                   child: Text(
                     displayText,
-                    style: TextStyle(
-                      fontSize: 12,
-                      fontWeight: FontWeight.w500,
+                    style: MeshTheme.mono(
+                      fontSize: 11,
+                      fontWeight: FontWeight.w600,
                       color: batteryUi.color,
                     ),
                     maxLines: 1,

lib/widgets/device_tile.dart

@@ -1,9 +1,16 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_blue_plus/flutter_blue_plus.dart';
+
 import '../l10n/l10n.dart';
+import '../theme/mesh_theme.dart';
+import 'mesh_ui.dart';
 import 'signal_ui.dart';
 
-/// A reusable tile widget for displaying a MeshCore device in a list
+/// A MeshCard-based row for displaying a scanned BLE device.
+/// Shows an AvatarCircle (router icon, deterministic hue from device name),
+/// device name, mono MAC address, mono RSSI dBm, and SignalBars on the right.
+/// While connecting, shows a small progress ring instead of signal bars.
 class DeviceTile extends StatelessWidget {
   final ScanResult scanResult;
   final VoidCallback? onTap;
@@ -23,27 +30,10 @@ class DeviceTile extends StatelessWidget {
     final name = device.platformName.isNotEmpty
         ? device.platformName
         : scanResult.advertisementData.advName;
+    final displayName = name.isNotEmpty ? name : context.l10n.common_unknownDevice;
+    final mac = device.remoteId.toString();
+    final scheme = Theme.of(context).colorScheme;
 
-    return ListTile(
-      enabled: onTap != null || isConnecting,
-      leading: _buildSignalIcon(rssi),
-      title: Text(
-        name.isNotEmpty ? name : context.l10n.common_unknownDevice,
-        style: const TextStyle(fontWeight: FontWeight.w500),
-      ),
-      subtitle: Text(device.remoteId.toString()),
-      trailing: isConnecting
-          ? const SizedBox(
-              width: 20,
-              height: 20,
-              child: CircularProgressIndicator(strokeWidth: 2),
-            )
-          : null,
-      onTap: onTap,
-    );
-  }
-
-  Widget _buildSignalIcon(int rssi) {
     final tier = rssi >= -60
         ? 0
         : rssi >= -70
@@ -55,15 +45,77 @@ class DeviceTile extends StatelessWidget {
         : 4;
     final signalUi = signalUiForStrengthTier(tier);
 
-    return Column(
-      mainAxisAlignment: MainAxisAlignment.center,
-      children: [
-        Icon(signalUi.icon, color: signalUi.color),
-        Text(
-          '$rssi dBm',
-          style: TextStyle(fontSize: 10, color: signalUi.color),
-        ),
-      ],
+    return MeshCard(
+      onTap: onTap == null
+          ? null
+          : () {
+              HapticFeedback.selectionClick();
+              onTap!();
+            },
+      padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
+      child: Row(
+        children: [
+          AvatarCircle(
+            name: displayName,
+            size: 42,
+            icon: Icons.router,
+          ),
+          const SizedBox(width: 12),
+          Expanded(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Text(
+                  displayName,
+                  style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                    fontWeight: FontWeight.w600,
+                    color: scheme.onSurface,
+                  ),
+                  maxLines: 1,
+                  overflow: TextOverflow.ellipsis,
+                ),
+                const SizedBox(height: 3),
+                Text(
+                  mac,
+                  style: MeshTheme.mono(
+                    fontSize: 11,
+                    color: scheme.onSurfaceVariant,
+                  ),
+                  maxLines: 1,
+                  overflow: TextOverflow.ellipsis,
+                ),
+              ],
+            ),
+          ),
+          const SizedBox(width: 12),
+          if (isConnecting)
+            SizedBox(
+              width: 20,
+              height: 20,
+              child: CircularProgressIndicator(
+                strokeWidth: 2,
+                color: scheme.primary,
+              ),
+            )
+          else
+            Column(
+              mainAxisSize: MainAxisSize.min,
+              crossAxisAlignment: CrossAxisAlignment.end,
+              children: [
+                Icon(signalUi.icon, size: 16, color: signalUi.color),
+                const SizedBox(height: 3),
+                Text(
+                  '$rssi dBm',
+                  style: MeshTheme.mono(
+                    fontSize: 10,
+                    color: signalUi.color,
+                  ),
+                ),
+              ],
+            ),
+        ],
+      ),
     );
   }
 }

lib/widgets/elements_ui.dart

@@ -29,31 +29,68 @@ class FeatureToggleRow extends StatefulWidget {
 class _FeatureToggleRow extends State<FeatureToggleRow> {
   @override
   Widget build(BuildContext context) {
-    return Row(
-      children: [
-        Expanded(
-          child: SwitchListTile(
-            title: Text(widget.title),
-            subtitle: Text(widget.subtitle),
-            value: widget.value,
-            onChanged: widget.onChanged,
-            contentPadding: EdgeInsets.zero,
+    final scheme = Theme.of(context).colorScheme;
+    final textTheme = Theme.of(context).textTheme;
+
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
+      child: Row(
+        children: [
+          Expanded(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(
+                  widget.title,
+                  style: textTheme.bodyMedium?.copyWith(
+                    fontWeight: FontWeight.w600,
+                  ),
+                ),
+                const SizedBox(height: 2),
+                Text(
+                  widget.subtitle,
+                  style: textTheme.bodySmall?.copyWith(
+                    color: scheme.onSurfaceVariant,
+                  ),
+                ),
+              ],
+            ),
           ),
-        ),
-        if (widget.hasRefreshing)
-          IconButton(
-            icon: widget.isRefreshing
-                ? const SizedBox(
-                    width: 18,
-                    height: 18,
-                    child: CircularProgressIndicator(strokeWidth: 2),
-                  )
-                : const Icon(Icons.refresh, size: 20),
-            onPressed: widget.isRefreshing ? null : widget.onRefresh,
-            tooltip: widget.refreshTooltip,
-            visualDensity: VisualDensity.compact,
+          const SizedBox(width: 8),
+          Row(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Switch(
+                value: widget.value,
+                onChanged: widget.onChanged,
+              ),
+              if (widget.hasRefreshing) ...[
+                const SizedBox(width: 4),
+                widget.isRefreshing
+                    ? SizedBox(
+                        width: 18,
+                        height: 18,
+                        child: CircularProgressIndicator(
+                          strokeWidth: 1.8,
+                          color: scheme.primary,
+                        ),
+                      )
+                    : IconButton(
+                        icon: const Icon(Icons.refresh, size: 18),
+                        onPressed: widget.onRefresh,
+                        tooltip: widget.refreshTooltip,
+                        visualDensity: VisualDensity.compact,
+                        padding: EdgeInsets.zero,
+                        constraints: const BoxConstraints(
+                          minWidth: 32,
+                          minHeight: 32,
+                        ),
+                      ),
+              ],
+            ],
           ),
-      ],
+        ],
+      ),
     );
   }
 }

lib/widgets/emoji_picker.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import '../l10n/app_localizations.dart';
 import '../l10n/l10n.dart';
+import '../theme/mesh_theme.dart';
 
 class EmojiPicker extends StatelessWidget {
   final Function(String) onEmojiSelected;
@@ -257,7 +258,11 @@ class EmojiPicker extends StatelessWidget {
                         ),
                         child: Text(
                           emoji,
-                          style: const TextStyle(fontSize: 28),
+                          style: MeshTheme.emoji(),
+                          textHeightBehavior: const TextHeightBehavior(
+                            applyHeightToFirstAscent: false,
+                            applyHeightToLastDescent: false,
+                          ),
                         ),
                       ),
                     ),
@@ -298,7 +303,12 @@ class EmojiPicker extends StatelessWidget {
                                 child: Center(
                                   child: Text(
                                     emojis[index],
-                                    style: const TextStyle(fontSize: 28),
+                                    style: MeshTheme.emoji(),
+                                    textHeightBehavior:
+                                        const TextHeightBehavior(
+                                          applyHeightToFirstAscent: false,
+                                          applyHeightToLastDescent: false,
+                                        ),
                                   ),
                                 ),
                               ),

lib/widgets/empty_state.dart

@@ -1,7 +1,9 @@
 import 'package:flutter/material.dart';
 
 /// A centered empty state display with icon, title, and optional subtitle/action.
-class EmptyState extends StatelessWidget {
+/// Features a tinted icon circle, fade+slide entrance animation, and clear
+/// typography hierarchy using the MeshCore design system.
+class EmptyState extends StatefulWidget {
   final IconData icon;
   final String title;
   final String? subtitle;
@@ -15,29 +17,97 @@ class EmptyState extends StatelessWidget {
     this.action,
   });
 
+  @override
+  State<EmptyState> createState() => _EmptyStateState();
+}
+
+class _EmptyStateState extends State<EmptyState>
+    with SingleTickerProviderStateMixin {
+  late final AnimationController _controller = AnimationController(
+    vsync: this,
+    duration: const Duration(milliseconds: 420),
+  );
+  late final CurvedAnimation _curve = CurvedAnimation(
+    parent: _controller,
+    curve: Curves.easeOutCubic,
+  );
+
+  @override
+  void initState() {
+    super.initState();
+    _controller.forward();
+  }
+
+  @override
+  void dispose() {
+    _curve.dispose();
+    _controller.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
-    final onSurfaceVariant = Theme.of(context).colorScheme.onSurfaceVariant;
-    return Center(
-      child: Column(
-        mainAxisAlignment: MainAxisAlignment.center,
-        children: [
-          Icon(icon, size: 64, color: onSurfaceVariant.withValues(alpha: 0.6)),
-          const SizedBox(height: 16),
-          Text(title, style: TextStyle(fontSize: 16, color: onSurfaceVariant)),
-          if (subtitle != null) ...[
-            const SizedBox(height: 8),
-            Text(
-              subtitle!,
-              style: TextStyle(
-                fontSize: 14,
-                color: onSurfaceVariant.withValues(alpha: 0.8),
-              ),
-              textAlign: TextAlign.center,
+    final scheme = Theme.of(context).colorScheme;
+    return FadeTransition(
+      opacity: _curve,
+      child: SlideTransition(
+        position: Tween(
+          begin: const Offset(0, 0.06),
+          end: Offset.zero,
+        ).animate(_curve),
+        child: Center(
+          child: Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 40),
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                Container(
+                  width: 80,
+                  height: 80,
+                  decoration: BoxDecoration(
+                    shape: BoxShape.circle,
+                    color: scheme.primary.withValues(alpha: 0.08),
+                    border: Border.all(
+                      color: scheme.primary.withValues(alpha: 0.18),
+                      width: 1.5,
+                    ),
+                  ),
+                  child: Icon(
+                    widget.icon,
+                    size: 36,
+                    color: scheme.onSurfaceVariant,
+                  ),
+                ),
+                const SizedBox(height: 20),
+                Text(
+                  widget.title,
+                  style: Theme.of(context).textTheme.titleMedium?.copyWith(
+                    fontWeight: FontWeight.w600,
+                    color: scheme.onSurface,
+                    letterSpacing: -0.1,
+                  ),
+                  textAlign: TextAlign.center,
+                ),
+                if (widget.subtitle != null) ...[
+                  const SizedBox(height: 8),
+                  Text(
+                    widget.subtitle!,
+                    style: TextStyle(
+                      fontSize: 13.5,
+                      color: scheme.onSurfaceVariant,
+                      height: 1.45,
+                    ),
+                    textAlign: TextAlign.center,
+                  ),
+                ],
+                if (widget.action != null) ...[
+                  const SizedBox(height: 28),
+                  widget.action!,
+                ],
+              ],
             ),
-          ],
-          if (action != null) ...[const SizedBox(height: 24), action!],
-        ],
+          ),
+        ),
       ),
     );
   }

lib/widgets/jump_to_bottom_button.dart

@@ -1,5 +1,7 @@
 import 'package:flutter/material.dart';
+
 import '../helpers/chat_scroll_controller.dart';
+import '../theme/mesh_theme.dart';
 
 class JumpToBottomButton extends StatelessWidget {
   final ChatScrollController scrollController;
@@ -8,6 +10,7 @@ class JumpToBottomButton extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final scheme = Theme.of(context).colorScheme;
     return ValueListenableBuilder<bool>(
       valueListenable: scrollController.showJumpToBottom,
       builder: (context, show, _) {
@@ -15,9 +18,36 @@ class JumpToBottomButton extends StatelessWidget {
         return Positioned(
           right: 16,
           bottom: 16,
-          child: FloatingActionButton.small(
-            onPressed: scrollController.jumpToBottom,
-            child: const Icon(Icons.keyboard_arrow_down),
+          child: Material(
+            color: Colors.transparent,
+            child: InkWell(
+              onTap: scrollController.jumpToBottom,
+              borderRadius: BorderRadius.circular(MeshRadii.pill),
+              child: Container(
+                width: 40,
+                height: 40,
+                decoration: BoxDecoration(
+                  shape: BoxShape.circle,
+                  color: scheme.surfaceContainerHigh.withValues(alpha: 0.92),
+                  border: Border.all(
+                    color: scheme.outlineVariant,
+                    width: 1,
+                  ),
+                  boxShadow: [
+                    BoxShadow(
+                      color: Colors.black.withValues(alpha: 0.18),
+                      blurRadius: 8,
+                      offset: const Offset(0, 2),
+                    ),
+                  ],
+                ),
+                child: Icon(
+                  Icons.keyboard_arrow_down,
+                  size: 22,
+                  color: scheme.primary,
+                ),
+              ),
+            ),
           ),
         );
       },

lib/widgets/mesh_ui.dart

@@ -0,0 +1,643 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+import '../theme/mesh_theme.dart';
+
+/// MeshCore shared design kit.
+///
+/// Building blocks used across all screens so the app reads as one product:
+/// [SectionHeader], [MeshCard], [StatusChip], [StatTile], [AvatarCircle],
+/// [SignalBars], [RouteChip], [PulseDot], [BottomSheetHeader] +
+/// [showMeshSheet], [ErrorRetryCard], and [ListEntrance].
+
+/// Small-caps mono section label, optionally with a trailing widget.
+class SectionHeader extends StatelessWidget {
+  final String label;
+  final Widget? trailing;
+  final EdgeInsetsGeometry padding;
+
+  const SectionHeader(
+    this.label, {
+    super.key,
+    this.trailing,
+    this.padding = const EdgeInsets.fromLTRB(16, 20, 16, 8),
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final scheme = Theme.of(context).colorScheme;
+    return Padding(
+      padding: padding,
+      child: Row(
+        children: [
+          Expanded(
+            child: Text(
+              label.toUpperCase(),
+              style: MeshTheme.accentLabel(color: scheme.onSurfaceVariant),
+              overflow: TextOverflow.ellipsis,
+            ),
+          ),
+          ?trailing,
+        ],
+      ),
+    );
+  }
+}
+
+/// Bordered surface card with press feedback. The standard container for
+/// grouped content and tappable list entries.
+class MeshCard extends StatelessWidget {
+  final Widget child;
+  final VoidCallback? onTap;
+  final VoidCallback? onLongPress;
+  final EdgeInsetsGeometry padding;
+  final EdgeInsetsGeometry margin;
+  final Color? color;
+  final Color? borderColor;
+  final double radius;
+
+  const MeshCard({
+    super.key,
+    required this.child,
+    this.onTap,
+    this.onLongPress,
+    this.padding = const EdgeInsets.all(14),
+    this.margin = const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
+    this.color,
+    this.borderColor,
+    this.radius = MeshRadii.md,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final scheme = Theme.of(context).colorScheme;
+    final shape = RoundedRectangleBorder(
+      borderRadius: BorderRadius.circular(radius),
+      side: BorderSide(color: borderColor ?? scheme.outlineVariant),
+    );
+    return Padding(
+      padding: margin,
+      child: Material(
+        color: color ?? scheme.surfaceContainerLow,
+        shape: shape,
+        clipBehavior: Clip.antiAlias,
+        child: InkWell(
+          onTap: onTap,
+          onLongPress: onLongPress == null
+              ? null
+              : () {
+                  HapticFeedback.selectionClick();
+                  onLongPress!();
+                },
+          child: Padding(padding: padding, child: child),
+        ),
+      ),
+    );
+  }
+}
+
+/// Tinted pill chip for statuses: a dot or icon plus a short label.
+class StatusChip extends StatelessWidget {
+  final String label;
+  final Color color;
+  final IconData? icon;
+  final bool pulse;
+  final double fontSize;
+
+  const StatusChip({
+    super.key,
+    required this.label,
+    required this.color,
+    this.icon,
+    this.pulse = false,
+    this.fontSize = 11.5,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 9, vertical: 4),
+      decoration: BoxDecoration(
+        color: color.withValues(alpha: 0.12),
+        borderRadius: BorderRadius.circular(MeshRadii.pill),
+        border: Border.all(color: color.withValues(alpha: 0.3)),
+      ),
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          if (icon != null)
+            Icon(icon, size: fontSize + 2, color: color)
+          else
+            PulseDot(color: color, size: 7, animate: pulse),
+          const SizedBox(width: 5),
+          Flexible(
+            child: Text(
+              label,
+              maxLines: 1,
+              overflow: TextOverflow.ellipsis,
+              style: MeshTheme.mono(
+                fontSize: fontSize,
+                fontWeight: FontWeight.w600,
+                color: color,
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+/// Compact metric tile: icon, mono value (+ optional unit), small label.
+class StatTile extends StatelessWidget {
+  final IconData icon;
+  final String label;
+  final String value;
+  final String? unit;
+  final Color? color;
+  final VoidCallback? onTap;
+
+  const StatTile({
+    super.key,
+    required this.icon,
+    required this.label,
+    required this.value,
+    this.unit,
+    this.color,
+    this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final scheme = Theme.of(context).colorScheme;
+    final accent = color ?? scheme.primary;
+    return MeshCard(
+      onTap: onTap,
+      margin: EdgeInsets.zero,
+      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Row(
+            children: [
+              Icon(icon, size: 14, color: accent),
+              const SizedBox(width: 6),
+              Expanded(
+                child: Text(
+                  label.toUpperCase(),
+                  style: MeshTheme.accentLabel(
+                    color: scheme.onSurfaceVariant,
+                    fontSize: 9,
+                  ),
+                  overflow: TextOverflow.ellipsis,
+                ),
+              ),
+            ],
+          ),
+          const SizedBox(height: 6),
+          Text.rich(
+            TextSpan(
+              text: value,
+              style: MeshTheme.mono(
+                fontSize: 17,
+                fontWeight: FontWeight.w600,
+                color: scheme.onSurface,
+              ),
+              children: [
+                if (unit != null)
+                  TextSpan(
+                    text: ' $unit',
+                    style: MeshTheme.mono(
+                      fontSize: 11,
+                      color: scheme.onSurfaceVariant,
+                    ),
+                  ),
+              ],
+            ),
+            maxLines: 1,
+            overflow: TextOverflow.ellipsis,
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+/// Initials avatar with a deterministic per-name hue, or a fixed [color]
+/// for node-type coloring. Optional [icon] replaces initials.
+class AvatarCircle extends StatelessWidget {
+  final String name;
+  final double size;
+  final Color? color;
+  final IconData? icon;
+
+  const AvatarCircle({
+    super.key,
+    required this.name,
+    this.size = 40,
+    this.color,
+    this.icon,
+  });
+
+  static const _hues = [
+    MeshPalette.blue,
+    MeshPalette.magenta,
+    MeshPalette.signal,
+    MeshPalette.warn,
+    Color(0xFF8FA8F0),
+    Color(0xFF6FD9CE),
+  ];
+
+  Color _colorFor(String s) {
+    var h = 0;
+    for (final c in s.codeUnits) {
+      h = (h * 31 + c) & 0x7fffffff;
+    }
+    return _hues[h % _hues.length];
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final accent = color ?? _colorFor(name);
+    final initials = _initials(name);
+    return Container(
+      width: size,
+      height: size,
+      decoration: BoxDecoration(
+        shape: BoxShape.circle,
+        color: accent.withValues(alpha: 0.14),
+        border: Border.all(color: accent.withValues(alpha: 0.4)),
+      ),
+      alignment: Alignment.center,
+      child: icon != null
+          ? Icon(icon, size: size * 0.5, color: accent)
+          : Text(
+              initials,
+              style: MeshTheme.mono(
+                fontSize: size * 0.36,
+                fontWeight: FontWeight.w700,
+                color: accent,
+              ),
+            ),
+    );
+  }
+
+  static String _initials(String name) {
+    final words = name
+        .trim()
+        .split(RegExp(r'\s+'))
+        .where((w) => w.isNotEmpty)
+        .toList();
+    if (words.isEmpty) return '?';
+    if (words.length == 1) {
+      return words.first.characters.take(2).toString().toUpperCase();
+    }
+    return (words.first.characters.take(1).toString() +
+            words[1].characters.take(1).toString())
+        .toUpperCase();
+  }
+}
+
+/// Four-bar signal strength indicator driven by an SNR value (dB), colored
+/// with the shared [MeshTheme.snrColor] ramp.
+class SignalBars extends StatelessWidget {
+  final double? snr;
+  final double height;
+
+  const SignalBars({super.key, required this.snr, this.height = 14});
+
+  @override
+  Widget build(BuildContext context) {
+    final scheme = Theme.of(context).colorScheme;
+    final color = MeshTheme.snrColor(snr, blocked: false);
+    final active = snr == null
+        ? 0
+        : snr! > 0
+        ? 4
+        : snr! > -5
+        ? 3
+        : snr! > -12
+        ? 2
+        : 1;
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.end,
+      children: List.generate(4, (i) {
+        final on = i < active;
+        return Container(
+          width: 3,
+          height: height * (0.4 + i * 0.2),
+          margin: const EdgeInsets.only(right: 2),
+          decoration: BoxDecoration(
+            color: on ? color : scheme.outlineVariant,
+            borderRadius: BorderRadius.circular(1),
+          ),
+        );
+      }),
+    );
+  }
+}
+
+/// Chip describing how a message was routed: direct (with hop count) vs flood.
+class RouteChip extends StatelessWidget {
+  final bool isDirect;
+  final int? hops;
+
+  const RouteChip({super.key, required this.isDirect, this.hops});
+
+  @override
+  Widget build(BuildContext context) {
+    final scheme = Theme.of(context).colorScheme;
+    final label = isDirect
+        ? (hops == null || hops == 0 ? 'DIRECT' : '$hops HOP${hops == 1 ? '' : 'S'}')
+        : 'FLOOD';
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
+      decoration: BoxDecoration(
+        color: scheme.surfaceContainerHigh,
+        borderRadius: BorderRadius.circular(MeshRadii.xs),
+        border: Border.all(color: scheme.outlineVariant),
+      ),
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Icon(
+            isDirect ? Icons.trending_flat : Icons.podcasts,
+            size: 11,
+            color: scheme.onSurfaceVariant,
+          ),
+          const SizedBox(width: 3),
+          Text(
+            label,
+            style: MeshTheme.accentLabel(
+              color: scheme.onSurfaceVariant,
+              fontSize: 8.5,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+/// Small status dot, optionally with a soft breathing animation.
+class PulseDot extends StatefulWidget {
+  final Color color;
+  final double size;
+  final bool animate;
+
+  const PulseDot({
+    super.key,
+    required this.color,
+    this.size = 8,
+    this.animate = false,
+  });
+
+  @override
+  State<PulseDot> createState() => _PulseDotState();
+}
+
+class _PulseDotState extends State<PulseDot>
+    with SingleTickerProviderStateMixin {
+  // Created eagerly: a lazy `late final` initializer would run on first
+  // access — which can be dispose(), where ticker creation throws.
+  late final AnimationController _controller;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(
+      vsync: this,
+      duration: const Duration(milliseconds: 1400),
+    );
+    if (widget.animate) _controller.repeat(reverse: true);
+  }
+
+  @override
+  void didUpdateWidget(PulseDot old) {
+    super.didUpdateWidget(old);
+    if (widget.animate && !_controller.isAnimating) {
+      _controller.repeat(reverse: true);
+    } else if (!widget.animate && _controller.isAnimating) {
+      _controller.stop();
+      _controller.value = 0;
+    }
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return FadeTransition(
+      opacity: widget.animate
+          ? Tween(begin: 0.35, end: 1.0).animate(
+              CurvedAnimation(parent: _controller, curve: Curves.easeInOut),
+            )
+          : const AlwaysStoppedAnimation(1.0),
+      child: Container(
+        width: widget.size,
+        height: widget.size,
+        decoration: BoxDecoration(
+          shape: BoxShape.circle,
+          color: widget.color,
+          boxShadow: [
+            BoxShadow(
+              color: widget.color.withValues(alpha: 0.45),
+              blurRadius: widget.size * 0.7,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+/// Standard modal sheet header: drag handle, title, optional subtitle and
+/// trailing action, and a close button.
+class BottomSheetHeader extends StatelessWidget {
+  final String title;
+  final String? subtitle;
+  final Widget? trailing;
+
+  const BottomSheetHeader({
+    super.key,
+    required this.title,
+    this.subtitle,
+    this.trailing,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final scheme = Theme.of(context).colorScheme;
+    return Padding(
+      padding: const EdgeInsets.fromLTRB(20, 8, 8, 4),
+      child: Column(
+        children: [
+          Container(
+            width: 36,
+            height: 4,
+            margin: const EdgeInsets.only(bottom: 10),
+            decoration: BoxDecoration(
+              color: scheme.outline,
+              borderRadius: BorderRadius.circular(2),
+            ),
+          ),
+          Row(
+            children: [
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Text(
+                      title,
+                      style: Theme.of(context).textTheme.titleMedium?.copyWith(
+                        fontWeight: FontWeight.w700,
+                        letterSpacing: -0.2,
+                      ),
+                    ),
+                    if (subtitle != null)
+                      Text(
+                        subtitle!,
+                        style: Theme.of(context).textTheme.bodySmall?.copyWith(
+                          color: scheme.onSurfaceVariant,
+                        ),
+                      ),
+                  ],
+                ),
+              ),
+              ?trailing,
+              IconButton(
+                icon: const Icon(Icons.close, size: 20),
+                onPressed: () => Navigator.of(context).maybePop(),
+              ),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+/// Shows a modal bottom sheet with the app-standard shape, scroll behavior
+/// and safe-area handling. Pair the content with [BottomSheetHeader].
+Future<T?> showMeshSheet<T>(
+  BuildContext context, {
+  required WidgetBuilder builder,
+  bool isScrollControlled = true,
+}) {
+  return showModalBottomSheet<T>(
+    context: context,
+    isScrollControlled: isScrollControlled,
+    useSafeArea: true,
+    showDragHandle: false,
+    builder: (context) => Padding(
+      padding: EdgeInsets.only(
+        bottom: MediaQuery.viewInsetsOf(context).bottom,
+      ),
+      child: builder(context),
+    ),
+  );
+}
+
+/// Inline error surface with an optional retry action.
+class ErrorRetryCard extends StatelessWidget {
+  final String message;
+  final VoidCallback? onRetry;
+  final String? retryLabel;
+
+  const ErrorRetryCard({
+    super.key,
+    required this.message,
+    this.onRetry,
+    this.retryLabel,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final scheme = Theme.of(context).colorScheme;
+    return MeshCard(
+      color: scheme.error.withValues(alpha: 0.08),
+      borderColor: scheme.error.withValues(alpha: 0.35),
+      child: Row(
+        children: [
+          Icon(Icons.error_outline, color: scheme.error, size: 20),
+          const SizedBox(width: 10),
+          Expanded(
+            child: Text(
+              message,
+              style: TextStyle(color: scheme.error, fontSize: 13),
+            ),
+          ),
+          if (onRetry != null)
+            TextButton(
+              onPressed: onRetry,
+              child: Text(retryLabel ?? 'Retry'),
+            ),
+        ],
+      ),
+    );
+  }
+}
+
+/// Staggered fade + slide entrance for list items. Wrap each item and pass
+/// its [index]; animation only plays once per widget lifecycle.
+class ListEntrance extends StatefulWidget {
+  final int index;
+  final Widget child;
+
+  const ListEntrance({super.key, required this.index, required this.child});
+
+  @override
+  State<ListEntrance> createState() => _ListEntranceState();
+}
+
+class _ListEntranceState extends State<ListEntrance>
+    with SingleTickerProviderStateMixin {
+  // Created eagerly: a lazy `late final` initializer would run on first
+  // access — which can be dispose(), where ticker creation throws.
+  late final AnimationController _controller;
+  late final CurvedAnimation _curve;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(
+      vsync: this,
+      duration: const Duration(milliseconds: 280),
+    );
+    _curve = CurvedAnimation(
+      parent: _controller,
+      curve: Curves.easeOutCubic,
+    );
+    final delay = Duration(milliseconds: 24 * widget.index.clamp(0, 12));
+    Future.delayed(delay, () {
+      if (mounted) _controller.forward();
+    });
+  }
+
+  @override
+  void dispose() {
+    _curve.dispose();
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return FadeTransition(
+      opacity: _curve,
+      child: SlideTransition(
+        position: Tween(
+          begin: const Offset(0, 0.04),
+          end: Offset.zero,
+        ).animate(_curve),
+        child: widget.child,
+      ),
+    );
+  }
+}

lib/widgets/message_status_icon.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 
 import '../l10n/l10n.dart';
+import '../theme/mesh_theme.dart';
 
 class MessageStatusIcon extends StatefulWidget {
   final bool isAcked;
@@ -71,7 +72,11 @@ class _MessageStatusIconState extends State<MessageStatusIcon>
     if (widget.isFailed) {
       return Semantics(
         label: l10n.messageStatus_failed,
-        child: Icon(Icons.cancel, size: size, color: colorScheme.error),
+        child: Icon(
+          Icons.cancel,
+          size: size,
+          color: colorScheme.error,
+        ),
       );
     }
 
@@ -92,7 +97,10 @@ class _MessageStatusIconState extends State<MessageStatusIcon>
         : widget.isAcked
         ? l10n.messageStatus_delivered
         : l10n.messageStatus_sent;
-    final Color color = delivered ? colorScheme.tertiary : baseColor;
+    // Use palette colors: tertiary (warn/amber) for acked/repeated, base for sent.
+    final Color color = delivered
+        ? MeshPalette.signal.withValues(alpha: 0.9)
+        : baseColor;
 
     return Semantics(
       label: label,

lib/widgets/path_map_ui.dart

@@ -0,0 +1,659 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_map/flutter_map.dart';
+import 'package:latlong2/latlong.dart';
+
+import '../l10n/l10n.dart';
+import '../models/display_path.dart';
+import '../models/path_playback.dart';
+import '../theme/mesh_theme.dart';
+
+/// Shared UI for the path map screens (live path trace and received-message
+/// path map): packet-flow animation overlays, single/combined view toggle,
+/// playback controls, and the multi-path summary/legend.
+
+enum PathViewMode { single, combined }
+
+const Color kPrimaryPathColor = Colors.blueAccent;
+const List<Color> kAlternatePathColors = [
+  Color(0xFF8B5CF6), // purple
+  MeshPalette.signal, // green
+  MeshPalette.warn, // amber
+  MeshPalette.magenta,
+];
+
+double getPathDistanceMeters(List<LatLng> points) {
+  if (points.length <= 1) return 0.0;
+
+  double distanceMeters = 0.0;
+  final distanceCalculator = Distance();
+
+  for (int i = 0; i < points.length - 1; i++) {
+    distanceMeters += distanceCalculator(points[i], points[i + 1]);
+  }
+
+  return distanceMeters;
+}
+
+String formatDistance(double distanceMeters, {required bool isImperial}) {
+  if (isImperial) {
+    return '(${(distanceMeters / 1609.34).toStringAsFixed(2)} mi)';
+  }
+  return '(${(distanceMeters / 1000).toStringAsFixed(2)} km)';
+}
+
+String formatLastObserved(BuildContext context, DateTime timestamp) {
+  final l10n = context.l10n;
+  final diff = DateTime.now().difference(timestamp);
+  if (diff.isNegative || diff.inMinutes < 5) return l10n.contacts_lastSeenNow;
+  if (diff.inMinutes < 60) return l10n.contacts_lastSeenMinsAgo(diff.inMinutes);
+  if (diff.inHours < 24) {
+    return diff.inHours == 1
+        ? l10n.contacts_lastSeenHourAgo
+        : l10n.contacts_lastSeenHoursAgo(diff.inHours);
+  }
+  return diff.inDays == 1
+      ? l10n.contacts_lastSeenDayAgo
+      : l10n.contacts_lastSeenDaysAgo(diff.inDays);
+}
+
+/// Polylines for the visible paths: shared-segment halos (combined view),
+/// dashed runs for estimated segments, dimming for unfocused paths and for
+/// the selected path while its packet animation is running.
+List<Polyline> buildMultiPathPolylines({
+  required List<DisplayPath> visible,
+  required DisplayPath? selected,
+  required bool combined,
+  required bool animating,
+}) {
+  final lines = <Polyline>[];
+
+  if (combined && visible.length > 1) {
+    final counts = <String, int>{};
+    for (final path in visible) {
+      for (var i = 0; i < path.points.length - 1; i++) {
+        counts.update(
+          _segmentKey(path.points[i], path.points[i + 1]),
+          (v) => v + 1,
+          ifAbsent: () => 1,
+        );
+      }
+    }
+    final drawn = <String>{};
+    for (final path in visible) {
+      for (var i = 0; i < path.points.length - 1; i++) {
+        final key = _segmentKey(path.points[i], path.points[i + 1]);
+        if ((counts[key] ?? 0) < 2 || !drawn.add(key)) continue;
+        lines.add(
+          Polyline(
+            points: [path.points[i], path.points[i + 1]],
+            strokeWidth: 11,
+            color: Colors.white.withValues(alpha: 0.22),
+          ),
+        );
+      }
+    }
+  }
+
+  void addPath(DisplayPath path, {required bool isSelected}) {
+    final dimmedByFocus = combined && !isSelected;
+    final alpha = dimmedByFocus ? 0.38 : (isSelected && animating ? 0.30 : 1.0);
+    final width = isSelected ? 5.0 : 3.0;
+    var i = 0;
+    while (i < path.segmentEstimated.length) {
+      final dashed = path.segmentEstimated[i];
+      var j = i;
+      while (j < path.segmentEstimated.length &&
+          path.segmentEstimated[j] == dashed) {
+        j++;
+      }
+      lines.add(
+        Polyline(
+          points: path.points.sublist(i, j + 1),
+          strokeWidth: width,
+          color: path.color.withValues(alpha: alpha),
+          pattern: dashed
+              ? StrokePattern.dashed(segments: const [10, 7])
+              : const StrokePattern.solid(),
+        ),
+      );
+      i = j;
+    }
+  }
+
+  for (final path in visible) {
+    if (path.id != selected?.id) addPath(path, isSelected: false);
+  }
+  if (selected != null && visible.any((p) => p.id == selected.id)) {
+    addPath(selected, isSelected: true);
+  }
+
+  return lines;
+}
+
+String _segmentKey(LatLng a, LatLng b) {
+  final ka =
+      '${a.latitude.toStringAsFixed(6)},${a.longitude.toStringAsFixed(6)}';
+  final kb =
+      '${b.latitude.toStringAsFixed(6)},${b.longitude.toStringAsFixed(6)}';
+  return ka.compareTo(kb) <= 0 ? '$ka|$kb' : '$kb|$ka';
+}
+
+/// Bright traversed portion plus the glow on the active segment.
+List<Polyline> buildPacketTrailPolylines(
+  PathPlaybackController playback,
+  Color color,
+) {
+  if (!playback.started || !playback.hasPath) return const [];
+  final seg = playback.currentSegment;
+  final traversed = <LatLng>[
+    ...playback.points.take(seg + 1),
+    playback.position,
+  ];
+  return [
+    Polyline(
+      points: [playback.points[seg], playback.position],
+      strokeWidth: 8,
+      color: Colors.white.withValues(alpha: 0.45),
+    ),
+    Polyline(points: traversed, strokeWidth: 5, color: color),
+  ];
+}
+
+/// The moving packet dot and the pulse ring at the hop it just reached.
+List<Marker> buildPacketMarkers(
+  PathPlaybackController playback,
+  Color color,
+) {
+  if (!playback.started || !playback.hasPath) return const [];
+  final markers = <Marker>[];
+
+  final dwell = playback.dwellProgress;
+  if (dwell != null) {
+    final reached = playback.points[playback.reachedPointIndex];
+    markers.add(
+      Marker(
+        point: reached,
+        width: 56,
+        height: 56,
+        child: IgnorePointer(
+          child: Center(
+            child: Container(
+              width: 24 + 28 * dwell,
+              height: 24 + 28 * dwell,
+              decoration: BoxDecoration(
+                shape: BoxShape.circle,
+                border: Border.all(
+                  color: color.withValues(alpha: 1.0 - dwell),
+                  width: 3,
+                ),
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+
+  markers.add(
+    Marker(
+      point: playback.position,
+      width: 24,
+      height: 24,
+      child: IgnorePointer(
+        child: Container(
+          decoration: BoxDecoration(
+            shape: BoxShape.circle,
+            color: color,
+            border: Border.all(color: Colors.white, width: 2),
+            boxShadow: [
+              BoxShadow(
+                color: color.withValues(alpha: 0.7),
+                blurRadius: 12,
+                spreadRadius: 2,
+              ),
+            ],
+          ),
+        ),
+      ),
+    ),
+  );
+
+  return markers;
+}
+
+/// Bottom sheet listing the paths that pass through a shared node.
+void showSharedNodeSheet(
+  BuildContext context, {
+  required String title,
+  required List<DisplayPath> paths,
+  required ValueChanged<DisplayPath> onSelect,
+}) {
+  final l10n = context.l10n;
+  showModalBottomSheet(
+    context: context,
+    builder: (sheetContext) => SafeArea(
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Padding(
+            padding: const EdgeInsets.fromLTRB(16, 16, 16, 4),
+            child: Text(
+              title,
+              style: MeshTheme.mono(
+                fontSize: 14,
+                fontWeight: FontWeight.w700,
+                color: MeshPalette.ink,
+              ),
+            ),
+          ),
+          Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 16),
+            child: Text(
+              l10n.pathMap_sharedNodeCount(paths.length),
+              style: TextStyle(fontSize: 12, color: MeshPalette.ink3),
+            ),
+          ),
+          const SizedBox(height: 8),
+          for (final path in paths)
+            ListTile(
+              dense: true,
+              leading: _colorDot(path.color),
+              title: Text(
+                path.label,
+                style: MeshTheme.mono(fontSize: 13, color: MeshPalette.ink),
+              ),
+              trailing: Text(
+                l10n.pathMap_hopCount(path.totalTransmissions),
+                style: MeshTheme.mono(fontSize: 11, color: MeshPalette.ink3),
+              ),
+              onTap: () {
+                Navigator.pop(sheetContext);
+                onSelect(path);
+              },
+            ),
+          const SizedBox(height: 8),
+        ],
+      ),
+    ),
+  );
+}
+
+Widget _colorDot(Color color) => Container(
+  width: 10,
+  height: 10,
+  decoration: BoxDecoration(color: color, shape: BoxShape.circle),
+);
+
+/// Floating Single/Combined toggle for the top of a path map Stack.
+class PathViewModeToggle extends StatelessWidget {
+  final PathViewMode mode;
+  final ValueChanged<PathViewMode> onChanged;
+
+  const PathViewModeToggle({
+    super.key,
+    required this.mode,
+    required this.onChanged,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = context.l10n;
+    return Positioned(
+      top: 12,
+      left: 0,
+      right: 0,
+      child: Center(
+        child: DecoratedBox(
+          decoration: BoxDecoration(
+            color: MeshPalette.bg1.withValues(alpha: 0.92),
+            borderRadius: BorderRadius.circular(MeshRadii.pill),
+          ),
+          child: SegmentedButton<PathViewMode>(
+            style: const ButtonStyle(
+              visualDensity: VisualDensity(horizontal: -3, vertical: -3),
+            ),
+            showSelectedIcon: false,
+            segments: [
+              ButtonSegment(
+                value: PathViewMode.single,
+                label: Text(l10n.pathMap_viewSingle),
+              ),
+              ButtonSegment(
+                value: PathViewMode.combined,
+                label: Text(l10n.pathMap_viewCombined),
+              ),
+            ],
+            selected: {mode},
+            onSelectionChanged: (selection) => onChanged(selection.first),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+/// Compact playback control row: animation toggle, step/play/replay buttons,
+/// follow-packet lock, speed chip, and the live "Hop x of y · from → to"
+/// label.
+class PathAnimationControls extends StatelessWidget {
+  final PathPlaybackController playback;
+  final DisplayPath? selected;
+  final bool animationEnabled;
+  final VoidCallback onToggleAnimation;
+  final bool followEnabled;
+  final VoidCallback onToggleFollow;
+
+  const PathAnimationControls({
+    super.key,
+    required this.playback,
+    required this.selected,
+    required this.animationEnabled,
+    required this.onToggleAnimation,
+    required this.followEnabled,
+    required this.onToggleFollow,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return AnimatedBuilder(
+      animation: playback,
+      builder: (context, _) {
+        final l10n = context.l10n;
+        final enabled = animationEnabled && playback.hasPath;
+        final path = selected;
+        String? hopLabel;
+        if (animationEnabled &&
+            playback.started &&
+            playback.hasPath &&
+            path != null) {
+          final seg = playback.currentSegment;
+          final row = seg < path.rowForSegment.length
+              ? path.rowForSegment[seg]
+              : 0;
+          final from = path.pointLabels[seg];
+          final to = path.pointLabels[seg + 1];
+          hopLabel =
+              '${l10n.pathMap_hopOf(row + 1, path.totalTransmissions)} · $from → $to';
+        }
+
+        Widget controlButton({
+          required IconData icon,
+          required String tooltip,
+          VoidCallback? onPressed,
+          Color? color,
+        }) => IconButton(
+          icon: Icon(icon, size: 20, color: color),
+          tooltip: tooltip,
+          onPressed: onPressed,
+          visualDensity: VisualDensity.compact,
+          padding: EdgeInsets.zero,
+          constraints: const BoxConstraints(minWidth: 34, minHeight: 34),
+        );
+
+        return Padding(
+          padding: const EdgeInsets.fromLTRB(4, 0, 12, 2),
+          child: Row(
+            children: [
+              controlButton(
+                icon: Icons.animation,
+                tooltip: animationEnabled
+                    ? l10n.pathMap_animationOff
+                    : l10n.pathMap_animationOn,
+                color: animationEnabled ? MeshPalette.blue : MeshPalette.ink4,
+                onPressed: onToggleAnimation,
+              ),
+              controlButton(
+                icon: Icons.skip_previous,
+                tooltip: l10n.pathMap_stepBack,
+                onPressed: enabled && playback.started
+                    ? playback.stepBack
+                    : null,
+              ),
+              controlButton(
+                icon: playback.playing ? Icons.pause : Icons.play_arrow,
+                tooltip: playback.playing ? l10n.pathMap_pause : l10n.pathMap_play,
+                onPressed: enabled ? playback.togglePlay : null,
+              ),
+              controlButton(
+                icon: Icons.skip_next,
+                tooltip: l10n.pathMap_stepForward,
+                onPressed: enabled ? playback.stepForward : null,
+              ),
+              controlButton(
+                icon: Icons.replay,
+                tooltip: l10n.pathMap_replay,
+                onPressed: enabled ? playback.replay : null,
+              ),
+              controlButton(
+                icon: followEnabled ? Icons.lock : Icons.lock_open,
+                tooltip: followEnabled
+                    ? l10n.pathMap_unfollowPacket
+                    : l10n.pathMap_followPacket,
+                color: followEnabled ? MeshPalette.blue : null,
+                onPressed: enabled ? onToggleFollow : null,
+              ),
+              TextButton(
+                onPressed: enabled ? playback.cycleSpeed : null,
+                style: TextButton.styleFrom(
+                  visualDensity: VisualDensity.compact,
+                  padding: const EdgeInsets.symmetric(horizontal: 6),
+                  minimumSize: const Size(36, 30),
+                ),
+                child: Text(
+                  playback.speed == 0.5 ? '0.5×' : '${playback.speed.toInt()}×',
+                  style: MeshTheme.mono(fontSize: 12),
+                ),
+              ),
+              Expanded(
+                child: Text(
+                  hopLabel ?? '',
+                  maxLines: 1,
+                  overflow: TextOverflow.ellipsis,
+                  textAlign: TextAlign.right,
+                  style: MeshTheme.mono(
+                    fontSize: 10.5,
+                    color: MeshPalette.ink2,
+                  ),
+                ),
+              ),
+            ],
+          ),
+        );
+      },
+    );
+  }
+}
+
+/// Marker/line style legend swatches.
+class PathMiniLegend extends StatelessWidget {
+  final bool combined;
+  final bool showInferred;
+
+  const PathMiniLegend({
+    super.key,
+    required this.combined,
+    this.showInferred = true,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = context.l10n;
+    Widget item(Widget swatch, String text) => Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        swatch,
+        const SizedBox(width: 4),
+        Text(text, style: TextStyle(fontSize: 11, color: MeshPalette.ink3)),
+      ],
+    );
+    Widget dashSample() => Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        for (var i = 0; i < 3; i++)
+          Container(
+            width: 5,
+            height: 3,
+            margin: const EdgeInsets.only(right: 2),
+            color: MeshPalette.ink3,
+          ),
+      ],
+    );
+    return Wrap(
+      spacing: 12,
+      runSpacing: 2,
+      children: [
+        item(_colorDot(MeshPalette.signal), l10n.pathTrace_legendGpsConfirmed),
+        if (showInferred)
+          item(_colorDot(MeshPalette.warn), l10n.pathTrace_legendInferred),
+        if (combined) ...[
+          item(
+            Container(
+              width: 14,
+              height: 6,
+              decoration: BoxDecoration(
+                color: Colors.white.withValues(alpha: 0.35),
+                borderRadius: BorderRadius.circular(3),
+              ),
+            ),
+            l10n.pathMap_legendShared,
+          ),
+          item(dashSample(), l10n.pathMap_legendEstimated),
+        ],
+      ],
+    );
+  }
+}
+
+/// "Observed paths: N" header plus one selectable row per path with hop
+/// count, distance, GPS-confirmed count, last-observed time, and an eye
+/// toggle for visibility.
+class PathSummaryList extends StatelessWidget {
+  final List<DisplayPath> paths;
+  final String selectedId;
+  final Set<String> hiddenIds;
+  final bool isImperial;
+  final ValueChanged<DisplayPath> onSelect;
+  final ValueChanged<DisplayPath> onToggleVisibility;
+  final VoidCallback onShowAll;
+
+  const PathSummaryList({
+    super.key,
+    required this.paths,
+    required this.selectedId,
+    required this.hiddenIds,
+    required this.isImperial,
+    required this.onSelect,
+    required this.onToggleVisibility,
+    required this.onShowAll,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = context.l10n;
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Padding(
+          padding: const EdgeInsets.fromLTRB(12, 2, 12, 0),
+          child: Row(
+            children: [
+              Text(
+                l10n.pathMap_observedPaths(paths.length),
+                style: MeshTheme.accentLabel(color: MeshPalette.ink3),
+              ),
+              const Spacer(),
+              if (hiddenIds.isNotEmpty)
+                TextButton(
+                  onPressed: onShowAll,
+                  style: TextButton.styleFrom(
+                    visualDensity: VisualDensity.compact,
+                    padding: const EdgeInsets.symmetric(horizontal: 8),
+                    minimumSize: const Size(0, 26),
+                  ),
+                  child: Text(
+                    l10n.pathMap_showAllPaths,
+                    style: const TextStyle(fontSize: 11),
+                  ),
+                ),
+            ],
+          ),
+        ),
+        for (final path in paths) _buildRow(context, path),
+        const SizedBox(height: 4),
+      ],
+    );
+  }
+
+  Widget _buildRow(BuildContext context, DisplayPath path) {
+    final l10n = context.l10n;
+    final isSelected = path.id == selectedId;
+    final hidden = hiddenIds.contains(path.id);
+    final timestamp = path.record?.timestamp;
+    final parts = <String>[
+      '${l10n.pathMap_hopCount(path.totalTransmissions)} ${formatDistance(path.distanceMeters, isImperial: isImperial)}',
+      l10n.pathMap_gpsCount(path.gpsConfirmedHops, path.hopBytes.length),
+      if (timestamp != null) formatLastObserved(context, timestamp),
+    ];
+
+    return InkWell(
+      onTap: () => onSelect(path),
+      child: Container(
+        margin: const EdgeInsets.symmetric(horizontal: 8, vertical: 1),
+        padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
+        decoration: BoxDecoration(
+          color: isSelected ? MeshPalette.bg3 : Colors.transparent,
+          borderRadius: BorderRadius.circular(MeshRadii.sm),
+        ),
+        child: Row(
+          children: [
+            Opacity(
+              opacity: hidden ? 0.45 : 1,
+              child: Row(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  _colorDot(path.color),
+                  const SizedBox(width: 8),
+                  Text(
+                    path.label,
+                    style: MeshTheme.mono(
+                      fontSize: 12,
+                      fontWeight: isSelected
+                          ? FontWeight.w700
+                          : FontWeight.w500,
+                      color: MeshPalette.ink,
+                    ),
+                  ),
+                ],
+              ),
+            ),
+            const SizedBox(width: 8),
+            Expanded(
+              child: Opacity(
+                opacity: hidden ? 0.45 : 1,
+                child: Text(
+                  parts.join(' · '),
+                  maxLines: 1,
+                  overflow: TextOverflow.ellipsis,
+                  style: MeshTheme.mono(fontSize: 10.5, color: MeshPalette.ink3),
+                ),
+              ),
+            ),
+            IconButton(
+              icon: Icon(
+                hidden ? Icons.visibility_off : Icons.visibility,
+                size: 16,
+                color: hidden ? MeshPalette.ink4 : MeshPalette.ink3,
+              ),
+              tooltip: hidden ? l10n.pathMap_showPath : l10n.pathMap_hidePath,
+              visualDensity: VisualDensity.compact,
+              padding: EdgeInsets.zero,
+              constraints: const BoxConstraints(minWidth: 30, minHeight: 30),
+              onPressed: () => onToggleVisibility(path),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/widgets/quick_switch_bar.dart

@@ -2,12 +2,14 @@ import 'dart:ui';
 
 import 'package:flutter/material.dart';
 import '../l10n/l10n.dart';
+import '../theme/mesh_theme.dart';
 
 class QuickSwitchBar extends StatelessWidget {
   final int selectedIndex;
   final ValueChanged<int> onDestinationSelected;
   final int contactsUnreadCount;
   final int channelsUnreadCount;
+  final bool highContrast;
 
   const QuickSwitchBar({
     super.key,
@@ -15,6 +17,7 @@ class QuickSwitchBar extends StatelessWidget {
     required this.onDestinationSelected,
     this.contactsUnreadCount = 0,
     this.channelsUnreadCount = 0,
+    this.highContrast = false,
   });
 
   @override
@@ -22,6 +25,14 @@ class QuickSwitchBar extends StatelessWidget {
     final theme = Theme.of(context);
     final colorScheme = theme.colorScheme;
     final labelStyle = theme.textTheme.labelMedium ?? const TextStyle();
+    final background = highContrast ? MapPalette.panelDark : Colors.transparent;
+    final selectedColor = highContrast
+        ? MapPalette.textPrimary
+        : colorScheme.onPrimary;
+    final unselectedColor = highContrast
+        ? MapPalette.textSecondary
+        : colorScheme.onSurfaceVariant;
+    final indicator = highContrast ? MapPalette.selected : colorScheme.primary;
 
     return SizedBox(
       width: double.infinity,
@@ -31,9 +42,11 @@ class QuickSwitchBar extends StatelessWidget {
           filter: ImageFilter.blur(sigmaX: 14, sigmaY: 14),
           child: DecoratedBox(
             decoration: BoxDecoration(
-              color: Colors.transparent,
+              color: background,
               border: Border.all(
-                color: colorScheme.outlineVariant.withValues(alpha: 0.4),
+                color: highContrast
+                    ? MapPalette.border
+                    : colorScheme.outlineVariant.withValues(alpha: 0.4),
               ),
             ),
             child: NavigationBarTheme(
@@ -41,22 +54,18 @@ class QuickSwitchBar extends StatelessWidget {
                 backgroundColor: Colors.transparent,
                 surfaceTintColor: Colors.transparent,
                 shadowColor: Colors.transparent,
-                indicatorColor: colorScheme.primaryContainer,
+                indicatorColor: indicator,
                 labelTextStyle: WidgetStateProperty.resolveWith((states) {
                   final isSelected = states.contains(WidgetState.selected);
                   return labelStyle.copyWith(
                     fontWeight: isSelected ? FontWeight.w700 : FontWeight.w500,
-                    color: isSelected
-                        ? colorScheme.onPrimaryContainer
-                        : colorScheme.onSurfaceVariant,
+                    color: isSelected ? selectedColor : unselectedColor,
                   );
                 }),
                 iconTheme: WidgetStateProperty.resolveWith((states) {
                   final isSelected = states.contains(WidgetState.selected);
                   return IconThemeData(
-                    color: isSelected
-                        ? colorScheme.onPrimaryContainer
-                        : colorScheme.onSurfaceVariant,
+                    color: isSelected ? selectedColor : unselectedColor,
                   );
                 }),
               ),

lib/widgets/radio_stats_entry.dart

@@ -7,6 +7,9 @@ import 'package:meshcore_open/l10n/l10n.dart';
 import 'package:meshcore_open/screens/companion_radio_stats_screen.dart';
 import 'package:provider/provider.dart';
 
+import '../theme/mesh_theme.dart';
+import 'mesh_ui.dart';
+
 void pushCompanionRadioStatsScreen(BuildContext context) {
   Navigator.push(
     context,
@@ -140,12 +143,12 @@ class AirActivityDotState extends State<AirActivityDot> {
 
   @override
   Widget build(BuildContext context) {
-    final scheme = Theme.of(context).colorScheme;
     final on = widget.active && _blink;
-    return Icon(
-      Icons.circle,
-      size: 12,
-      color: on ? scheme.primary : scheme.outline,
+    final scheme = Theme.of(context).colorScheme;
+    return PulseDot(
+      color: on ? MeshPalette.blue : scheme.outline,
+      size: 11,
+      animate: false,
     );
   }
 }

lib/widgets/repeater_login_dialog.dart

@@ -9,6 +9,8 @@ import '../l10n/contact_localization.dart';
 import '../services/storage_service.dart';
 import '../connector/meshcore_connector.dart';
 import '../connector/meshcore_protocol.dart';
+import '../theme/mesh_theme.dart';
+import '../widgets/mesh_ui.dart';
 import '../utils/app_logger.dart';
 import 'routing_sheet.dart';
 
@@ -269,26 +271,40 @@ class _RepeaterLoginDialogState extends State<RepeaterLoginDialog> {
   @override
   Widget build(BuildContext context) {
     final l10n = context.l10n;
+    final scheme = Theme.of(context).colorScheme;
     final connector = context.watch<MeshCoreConnector>();
     final repeater = _resolveRepeater(connector);
     final isFloodMode = repeater.pathOverride == -1;
     return AlertDialog(
       title: Row(
         children: [
-          Icon(Icons.cell_tower, color: Theme.of(context).colorScheme.tertiary),
-          const SizedBox(width: 8),
+          AvatarCircle(
+            name: repeater.name,
+            size: 40,
+            color: MeshPalette.warn,
+            icon: Icons.cell_tower,
+          ),
+          const SizedBox(width: 12),
           Expanded(
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
-                Text(l10n.login_repeaterLogin),
+                Text(
+                  l10n.login_repeaterLogin,
+                  style: const TextStyle(
+                    fontSize: 16,
+                    fontWeight: FontWeight.w700,
+                  ),
+                ),
                 Text(
                   repeater.name,
                   style: TextStyle(
-                    fontSize: 14,
+                    fontSize: 13,
                     fontWeight: FontWeight.normal,
-                    color: Theme.of(context).colorScheme.onSurfaceVariant,
+                    color: scheme.onSurfaceVariant,
                   ),
+                  maxLines: 1,
+                  overflow: TextOverflow.ellipsis,
                 ),
               ],
             ),
@@ -319,14 +335,14 @@ class _RepeaterLoginDialogState extends State<RepeaterLoginDialog> {
                         Icon(
                           Icons.error,
                           size: 18,
-                          color: Theme.of(context).colorScheme.error,
+                          color: scheme.error,
                         ),
                         const SizedBox(width: 8),
                         Expanded(
                           child: Text(
                             _loginError!,
                             style: TextStyle(
-                              color: Theme.of(context).colorScheme.error,
+                              color: scheme.error,
                               fontSize: 13,
                             ),
                           ),
@@ -341,7 +357,6 @@ class _RepeaterLoginDialogState extends State<RepeaterLoginDialog> {
                     decoration: InputDecoration(
                       labelText: l10n.login_password,
                       hintText: l10n.login_enterPassword,
-                      border: const OutlineInputBorder(),
                       prefixIcon: const Icon(Icons.lock),
                       suffixIcon: IconButton(
                         icon: Icon(
@@ -390,9 +405,9 @@ class _RepeaterLoginDialogState extends State<RepeaterLoginDialog> {
                     children: [
                       Text(
                         l10n.login_routing,
-                        style: const TextStyle(
-                          fontSize: 12,
-                          fontWeight: FontWeight.bold,
+                        style: MeshTheme.accentLabel(
+                          color: scheme.onSurfaceVariant,
+                          fontSize: 11,
                         ),
                       ),
                       const Spacer(),
@@ -421,7 +436,7 @@ class _RepeaterLoginDialogState extends State<RepeaterLoginDialog> {
                                   Icons.auto_mode,
                                   size: 20,
                                   color: !isFloodMode
-                                      ? Theme.of(context).primaryColor
+                                      ? scheme.primary
                                       : null,
                                 ),
                                 const SizedBox(width: 8),
@@ -444,7 +459,7 @@ class _RepeaterLoginDialogState extends State<RepeaterLoginDialog> {
                                   Icons.waves,
                                   size: 20,
                                   color: isFloodMode
-                                      ? Theme.of(context).primaryColor
+                                      ? scheme.primary
                                       : null,
                                 ),
                                 const SizedBox(width: 8),
@@ -468,7 +483,7 @@ class _RepeaterLoginDialogState extends State<RepeaterLoginDialog> {
                     repeater.pathLabel(context.l10n),
                     style: TextStyle(
                       fontSize: 11,
-                      color: Theme.of(context).colorScheme.onSurfaceVariant,
+                      color: scheme.onSurfaceVariant,
                     ),
                   ),
                   const SizedBox(height: 8),
@@ -502,7 +517,7 @@ class _RepeaterLoginDialogState extends State<RepeaterLoginDialog> {
                     height: 16,
                     child: CircularProgressIndicator(
                       strokeWidth: 2,
-                      color: Theme.of(context).colorScheme.onPrimary,
+                      color: scheme.onPrimary,
                     ),
                   ),
                   const SizedBox(width: 12),

lib/widgets/room_login_dialog.dart

@@ -10,6 +10,8 @@ import '../l10n/contact_localization.dart';
 import '../services/storage_service.dart';
 import '../connector/meshcore_connector.dart';
 import '../connector/meshcore_protocol.dart';
+import '../theme/mesh_theme.dart';
+import '../widgets/mesh_ui.dart';
 import '../utils/app_logger.dart';
 import '../helpers/snack_bar_builder.dart';
 import 'routing_sheet.dart';
@@ -226,26 +228,40 @@ class _RoomLoginDialogState extends State<RoomLoginDialog> {
   @override
   Widget build(BuildContext context) {
     final l10n = context.l10n;
+    final scheme = Theme.of(context).colorScheme;
     final connector = context.watch<MeshCoreConnector>();
     final repeater = _resolveRepeater(connector);
     final isFloodMode = repeater.pathOverride == -1;
     return AlertDialog(
       title: Row(
         children: [
-          Icon(Icons.group, color: Theme.of(context).colorScheme.secondary),
-          const SizedBox(width: 8),
+          AvatarCircle(
+            name: repeater.name,
+            size: 40,
+            color: MeshPalette.magenta,
+            icon: Icons.group,
+          ),
+          const SizedBox(width: 12),
           Expanded(
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
-                Text(l10n.login_roomLogin),
+                Text(
+                  l10n.login_roomLogin,
+                  style: const TextStyle(
+                    fontSize: 16,
+                    fontWeight: FontWeight.w700,
+                  ),
+                ),
                 Text(
                   repeater.name,
                   style: TextStyle(
-                    fontSize: 14,
+                    fontSize: 13,
                     fontWeight: FontWeight.normal,
-                    color: Theme.of(context).colorScheme.onSurfaceVariant,
+                    color: scheme.onSurfaceVariant,
                   ),
+                  maxLines: 1,
+                  overflow: TextOverflow.ellipsis,
                 ),
               ],
             ),
@@ -275,7 +291,6 @@ class _RoomLoginDialogState extends State<RoomLoginDialog> {
                     decoration: InputDecoration(
                       labelText: l10n.login_password,
                       hintText: l10n.login_enterPassword,
-                      border: const OutlineInputBorder(),
                       prefixIcon: const Icon(Icons.lock),
                       suffixIcon: IconButton(
                         icon: Icon(
@@ -319,9 +334,9 @@ class _RoomLoginDialogState extends State<RoomLoginDialog> {
                     children: [
                       Text(
                         l10n.login_routing,
-                        style: const TextStyle(
-                          fontSize: 12,
-                          fontWeight: FontWeight.bold,
+                        style: MeshTheme.accentLabel(
+                          color: scheme.onSurfaceVariant,
+                          fontSize: 11,
                         ),
                       ),
                       const Spacer(),
@@ -350,7 +365,7 @@ class _RoomLoginDialogState extends State<RoomLoginDialog> {
                                   Icons.auto_mode,
                                   size: 20,
                                   color: !isFloodMode
-                                      ? Theme.of(context).primaryColor
+                                      ? scheme.primary
                                       : null,
                                 ),
                                 const SizedBox(width: 8),
@@ -373,7 +388,7 @@ class _RoomLoginDialogState extends State<RoomLoginDialog> {
                                   Icons.waves,
                                   size: 20,
                                   color: isFloodMode
-                                      ? Theme.of(context).primaryColor
+                                      ? scheme.primary
                                       : null,
                                 ),
                                 const SizedBox(width: 8),
@@ -397,7 +412,7 @@ class _RoomLoginDialogState extends State<RoomLoginDialog> {
                     repeater.pathLabel(context.l10n),
                     style: TextStyle(
                       fontSize: 11,
-                      color: Theme.of(context).colorScheme.onSurfaceVariant,
+                      color: scheme.onSurfaceVariant,
                     ),
                   ),
                   const SizedBox(height: 8),
@@ -431,7 +446,7 @@ class _RoomLoginDialogState extends State<RoomLoginDialog> {
                     height: 16,
                     child: CircularProgressIndicator(
                       strokeWidth: 2,
-                      color: Theme.of(context).colorScheme.onPrimary,
+                      color: scheme.onPrimary,
                     ),
                   ),
                   const SizedBox(width: 12),

lib/widgets/signal_ui.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import '../theme/mesh_theme.dart';
 
 class SignalUi {
   final IconData icon;
@@ -12,27 +13,27 @@ SignalUi signalUiForStrengthTier(int tier) {
     case 0:
       return const SignalUi(
         icon: Icons.signal_cellular_4_bar,
-        color: Colors.green,
+        color: MeshPalette.signal,
       );
     case 1:
       return const SignalUi(
         icon: Icons.signal_cellular_alt,
-        color: Colors.lightGreen,
+        color: MeshPalette.signalDim,
       );
     case 2:
       return const SignalUi(
         icon: Icons.signal_cellular_alt_2_bar,
-        color: Colors.amber,
+        color: MeshPalette.warn,
       );
     case 3:
       return const SignalUi(
         icon: Icons.signal_cellular_alt_1_bar,
-        color: Colors.orange,
+        color: MeshPalette.warnDim,
       );
     default:
       return const SignalUi(
         icon: Icons.signal_cellular_alt_1_bar,
-        color: Colors.red,
+        color: MeshPalette.alert,
       );
   }
 }

lib/widgets/snr_indicator.dart

@@ -5,6 +5,8 @@ import '../connector/meshcore_connector.dart';
 import '../connector/meshcore_protocol.dart';
 import '../l10n/l10n.dart';
 import '../models/contact.dart';
+import '../theme/mesh_theme.dart';
+import 'mesh_ui.dart';
 import 'signal_ui.dart';
 
 Contact? _getRepeaterPrefixMatchNearLocation(
@@ -218,10 +220,6 @@ class _SNRIndicatorState extends State<SNRIndicator> {
               separatorBuilder: (_, _) => const Divider(height: 1),
               itemBuilder: (context, index) {
                 final repeater = directBestRepeaters[index];
-                final snrUi = snrUiFromSNR(
-                  repeater.snr,
-                  widget.connector.currentSf,
-                );
                 final allContacts = widget.connector.allContacts;
 
                 final selfLat = widget.connector.selfLatitude;
@@ -242,22 +240,47 @@ class _SNRIndicatorState extends State<SNRIndicator> {
                 );
 
                 final name = contact?.name;
+                final hex = repeater.pubkeyFirstByte
+                    .toRadixString(16)
+                    .padLeft(2, '0');
+                final snrColor = MeshTheme.snrColor(
+                  repeater.snr,
+                  blocked: false,
+                );
 
-                return Column(
-                  children: [
-                    ListTile(
-                      leading: Icon(snrUi.icon, color: snrUi.color),
-                      title: Text(
-                        name ??
-                            repeater.pubkeyFirstByte
-                                .toRadixString(16)
-                                .padLeft(2, '0'),
+                return Padding(
+                  padding: const EdgeInsets.symmetric(
+                    horizontal: 16,
+                    vertical: 10,
+                  ),
+                  child: Row(
+                    children: [
+                      AvatarCircle(
+                        name: name ?? hex,
+                        size: 36,
+                        color: snrColor,
                       ),
-                      subtitle: Text(
-                        'SNR: ${repeater.snr.toStringAsFixed(1)} dB\n${l10n.snrIndicator_lastSeen}: ${_formatLastUpdated(repeater.lastUpdated)}',
+                      const SizedBox(width: 12),
+                      Expanded(
+                        child: Column(
+                          crossAxisAlignment: CrossAxisAlignment.start,
+                          children: [
+                            Text(
+                              name ?? hex,
+                              style: Theme.of(context).textTheme.bodyMedium,
+                            ),
+                            Text(
+                              '${repeater.snr.toStringAsFixed(1)} dB • ${_formatLastUpdated(repeater.lastUpdated)}',
+                              style: MeshTheme.mono(
+                                fontSize: 11,
+                                color: snrColor,
+                              ),
+                            ),
+                          ],
+                        ),
                       ),
-                    ),
-                  ],
+                    ],
+                  ),
                 );
               },
             ),

lib/widgets/telemetry_location_map.dart

@@ -11,6 +11,7 @@ import '../models/app_settings.dart';
 import '../models/contact.dart';
 import '../services/app_settings_service.dart';
 import '../services/map_tile_cache_service.dart';
+import 'themed_map_tile_layer.dart';
 
 class TelemetryLocationMap extends StatefulWidget {
   final double latitude;
@@ -114,13 +115,7 @@ class _TelemetryLocationMapState extends State<TelemetryLocationMap> {
                       ),
                     ),
                     children: [
-                      TileLayer(
-                        urlTemplate: kMapTileUrlTemplate,
-                        tileProvider: tileCache.tileProvider,
-                        userAgentPackageName:
-                            MapTileCacheService.userAgentPackageName,
-                        maxZoom: 19,
-                      ),
+                      ThemedMapTileLayer(tileCache: tileCache),
                       MarkerLayer(
                         markers: [
                           ...contacts.map(_buildContactMarker),

lib/widgets/themed_map_tile_layer.dart

@@ -0,0 +1,60 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_map/flutter_map.dart';
+
+import '../services/map_tile_cache_service.dart';
+
+/// Shared cached map tiles with an automatic dark-mode treatment.
+///
+/// The dark style transforms the existing OpenStreetMap raster tiles, so light
+/// and dark maps share the same offline cache and network requests.
+class ThemedMapTileLayer extends StatelessWidget {
+  final MapTileCacheService tileCache;
+  final double opacity;
+
+  const ThemedMapTileLayer({
+    super.key,
+    required this.tileCache,
+    this.opacity = 1,
+  });
+
+  static const ColorFilter _darkMapFilter = ColorFilter.matrix([
+    -0.0850,
+    -0.2861,
+    -0.0289,
+    0,
+    120,
+    -0.0957,
+    -0.3218,
+    -0.0325,
+    0,
+    140,
+    -0.1169,
+    -0.3934,
+    -0.0397,
+    0,
+    170,
+    0,
+    0,
+    0,
+    1,
+    0,
+  ]);
+
+  @override
+  Widget build(BuildContext context) {
+    Widget layer = TileLayer(
+      urlTemplate: kMapTileUrlTemplate,
+      tileProvider: tileCache.tileProvider,
+      userAgentPackageName: MapTileCacheService.userAgentPackageName,
+      maxZoom: 19,
+    );
+
+    if (Theme.of(context).brightness == Brightness.dark) {
+      layer = ColorFiltered(colorFilter: _darkMapFilter, child: layer);
+    }
+    if (opacity < 1) {
+      layer = Opacity(opacity: opacity, child: layer);
+    }
+    return layer;
+  }
+}

lib/widgets/unread_badge.dart

@@ -1,5 +1,7 @@
 import 'package:flutter/material.dart';
 
+import '../theme/mesh_theme.dart';
+
 class UnreadBadge extends StatelessWidget {
   final int count;
 
@@ -9,17 +11,18 @@ class UnreadBadge extends StatelessWidget {
   Widget build(BuildContext context) {
     final display = count > 9999 ? '9999+' : count.toString();
     return Container(
-      padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
+      padding: const EdgeInsets.symmetric(horizontal: 7, vertical: 2),
       decoration: BoxDecoration(
-        color: Colors.redAccent,
-        borderRadius: BorderRadius.circular(10),
+        color: MeshPalette.blue.withValues(alpha: 0.18),
+        borderRadius: BorderRadius.circular(MeshRadii.pill),
+        border: Border.all(color: MeshPalette.blue.withValues(alpha: 0.45)),
       ),
       child: Text(
         display,
-        style: const TextStyle(
-          color: Colors.white,
+        style: MeshTheme.mono(
           fontSize: 11,
-          fontWeight: FontWeight.w600,
+          fontWeight: FontWeight.w700,
+          color: MeshPalette.blue,
         ),
       ),
     );

lib/widgets/unread_divider.dart

@@ -1,30 +1,49 @@
 import 'package:flutter/material.dart';
 
 import '../l10n/l10n.dart';
+import '../theme/mesh_theme.dart';
 
 class UnreadDivider extends StatelessWidget {
   const UnreadDivider({super.key});
 
   @override
   Widget build(BuildContext context) {
-    final color = Theme.of(context).colorScheme.primary;
+    final scheme = Theme.of(context).colorScheme;
+    final color = scheme.primary;
     return Padding(
-      padding: const EdgeInsets.symmetric(vertical: 8),
+      padding: const EdgeInsets.symmetric(vertical: 10),
       child: Row(
         children: [
-          Expanded(child: Divider(color: color)),
-          Padding(
-            padding: const EdgeInsets.symmetric(horizontal: 8),
+          Expanded(
+            child: Container(
+              height: 1,
+              color: color.withValues(alpha: 0.25),
+            ),
+          ),
+          const SizedBox(width: 10),
+          Container(
+            padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
+            decoration: BoxDecoration(
+              color: color.withValues(alpha: 0.12),
+              borderRadius: BorderRadius.circular(MeshRadii.pill),
+              border: Border.all(color: color.withValues(alpha: 0.35)),
+            ),
             child: Text(
               context.l10n.chat_newMessages,
-              style: TextStyle(
+              style: MeshTheme.mono(
+                fontSize: 10.5,
+                fontWeight: FontWeight.w600,
                 color: color,
-                fontSize: 12,
-                fontWeight: FontWeight.w500,
               ),
             ),
           ),
-          Expanded(child: Divider(color: color)),
+          const SizedBox(width: 10),
+          Expanded(
+            child: Container(
+              height: 1,
+              color: color.withValues(alpha: 0.25),
+            ),
+          ),
         ],
       ),
     );