feat(ground-suite): redesign observability console

ground-suite/lib/app/app_shell.dart

@@ -1,13 +1,13 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 
-import 'theme_mode_controller.dart';
 import '../features/diagnostics/presentation/diagnostics_page.dart';
 import '../features/observability/presentation/observability_controller.dart';
 import '../features/overview/presentation/overview_page.dart';
-import '../shared/widgets/glass_panel.dart';
+import '../shared/widgets/surfaces.dart';
+import 'theme_mode_controller.dart';
 
-enum _Destination { overview, diagnostics }
+enum _Destination { vehicle, events }
 
 class AppShell extends ConsumerStatefulWidget {
   const AppShell({super.key});
@@ -17,7 +17,7 @@ class AppShell extends ConsumerStatefulWidget {
 }
 
 class _AppShellState extends ConsumerState<AppShell> {
-  _Destination _destination = _Destination.overview;
+  _Destination _destination = _Destination.vehicle;
 
   @override
   Widget build(BuildContext context) {
@@ -25,14 +25,17 @@ class _AppShellState extends ConsumerState<AppShell> {
     const pages = <Widget>[OverviewPage(), DiagnosticsPage()];
 
     return Scaffold(
-      body: GroundSuiteBackdrop(
+      body: AppCanvas(
         child: SafeArea(
           child: Stack(
             children: [
               LayoutBuilder(
                 builder: (context, constraints) {
-                  final compact = constraints.maxWidth < 760;
-                  final content = _Workspace(
+                  final textScale =
+                      MediaQuery.textScalerOf(context).scale(14) / 14;
+                  final compact =
+                      constraints.maxWidth < 960 || textScale > 1.25;
+                  final workspace = _Workspace(
                     state: state,
                     selectedIndex: _destination.index,
                     pages: pages,
@@ -42,12 +45,12 @@ class _AppShellState extends ConsumerState<AppShell> {
                       ? _CompactShell(
                           selectedIndex: _destination.index,
                           onSelected: _selectDestination,
-                          content: content,
+                          workspace: workspace,
                         )
-                      : _WideShell(
+                      : _DesktopShell(
                           selectedIndex: _destination.index,
                           onSelected: _selectDestination,
-                          content: content,
+                          workspace: workspace,
                         );
                 },
               ),
@@ -65,72 +68,117 @@ class _AppShellState extends ConsumerState<AppShell> {
   }
 }
 
-class _WideShell extends StatelessWidget {
-  const _WideShell({
+class _DesktopShell extends StatelessWidget {
+  const _DesktopShell({
     required this.selectedIndex,
     required this.onSelected,
-    required this.content,
+    required this.workspace,
   });
 
   final int selectedIndex;
   final ValueChanged<int> onSelected;
-  final Widget content;
+  final Widget workspace;
 
   @override
   Widget build(BuildContext context) {
     return Row(
       children: [
-        GlassPanel(
-          borderRadius: BorderRadius.zero,
-          child: NavigationRail(
-            selectedIndex: selectedIndex,
-            labelType: NavigationRailLabelType.all,
-            onDestinationSelected: onSelected,
-            leading: const Padding(
-              padding: EdgeInsets.symmetric(vertical: 16),
-              child: Icon(Icons.flight_takeoff_outlined, size: 28),
+        FrostedChrome(
+          child: SizedBox(
+            width: 216,
+            child: NavigationRail(
+              extended: true,
+              minExtendedWidth: 216,
+              selectedIndex: selectedIndex,
+              labelType: NavigationRailLabelType.none,
+              onDestinationSelected: onSelected,
+              leading: const _BrandBlock(),
+              trailing: const Padding(
+                padding: EdgeInsets.fromLTRB(12, 0, 12, 16),
+                child: AppearanceMenu(showLabel: true),
+              ),
+              destinations: const [
+                NavigationRailDestination(
+                  icon: Icon(Icons.radar_outlined),
+                  selectedIcon: Icon(Icons.radar),
+                  label: Text('Vehicle observation'),
+                ),
+                NavigationRailDestination(
+                  icon: Icon(Icons.segment_outlined),
+                  selectedIcon: Icon(Icons.segment),
+                  label: Text('Event stream'),
+                ),
+              ],
             ),
-            destinations: _destinations,
           ),
         ),
-        const VerticalDivider(width: 1),
-        Expanded(child: content),
+        Expanded(child: workspace),
       ],
     );
   }
 }
 
+class _BrandBlock extends StatelessWidget {
+  const _BrandBlock();
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    return Padding(
+      padding: const EdgeInsets.fromLTRB(24, 24, 16, 20),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Icon(Icons.flight_takeoff_outlined, color: theme.colorScheme.primary),
+          const SizedBox(height: 16),
+          const ConsoleLabel('Kaptan'),
+          Text('Ground Suite', style: theme.textTheme.titleLarge),
+          const SizedBox(height: 4),
+          Text('Observation console', style: theme.textTheme.bodySmall),
+        ],
+      ),
+    );
+  }
+}
+
 class _CompactShell extends StatelessWidget {
   const _CompactShell({
     required this.selectedIndex,
     required this.onSelected,
-    required this.content,
+    required this.workspace,
   });
 
   final int selectedIndex;
   final ValueChanged<int> onSelected;
-  final Widget content;
+  final Widget workspace;
 
   @override
   Widget build(BuildContext context) {
     return Column(
       children: [
-        Expanded(child: content),
-        GlassPanel(
-          borderRadius: const BorderRadius.vertical(top: Radius.circular(16)),
-          child: NavigationBar(
-            selectedIndex: selectedIndex,
-            onDestinationSelected: onSelected,
-            destinations: const [
-              NavigationDestination(
-                icon: Icon(Icons.space_dashboard_outlined),
-                selectedIcon: Icon(Icons.space_dashboard),
-                label: 'Overview',
+        Expanded(child: workspace),
+        FrostedChrome(
+          borderRadius: BorderRadius.vertical(top: Radius.circular(12)),
+          child: Row(
+            key: const Key('compact-navigation'),
+            children: [
+              Expanded(
+                child: _CompactDestinationButton(
+                  selected: selectedIndex == _Destination.vehicle.index,
+                  icon: Icons.radar_outlined,
+                  selectedIcon: Icons.radar,
+                  label: 'Vehicle',
+                  onTap: () => onSelected(_Destination.vehicle.index),
+                ),
               ),
-              NavigationDestination(
-                icon: Icon(Icons.receipt_long_outlined),
-                selectedIcon: Icon(Icons.receipt_long),
-                label: 'Diagnostics',
+              Expanded(
+                child: _CompactDestinationButton(
+                  selected: selectedIndex == _Destination.events.index,
+                  icon: Icons.segment_outlined,
+                  selectedIcon: Icons.segment,
+                  label: 'Events',
+                  onTap: () => onSelected(_Destination.events.index),
+                ),
               ),
             ],
           ),
@@ -140,18 +188,52 @@ class _CompactShell extends StatelessWidget {
   }
 }
 
-const _destinations = <NavigationRailDestination>[
-  NavigationRailDestination(
-    icon: Icon(Icons.space_dashboard_outlined),
-    selectedIcon: Icon(Icons.space_dashboard),
-    label: Text('Overview'),
-  ),
-  NavigationRailDestination(
-    icon: Icon(Icons.receipt_long_outlined),
-    selectedIcon: Icon(Icons.receipt_long),
-    label: Text('Diagnostics'),
-  ),
-];
+class _CompactDestinationButton extends StatelessWidget {
+  const _CompactDestinationButton({
+    required this.selected,
+    required this.icon,
+    required this.selectedIcon,
+    required this.label,
+    required this.onTap,
+  });
+
+  final bool selected;
+  final IconData icon;
+  final IconData selectedIcon;
+  final String label;
+  final VoidCallback onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    final scheme = Theme.of(context).colorScheme;
+    final tone = selected ? scheme.primary : scheme.onSurfaceVariant;
+    return Semantics(
+      button: true,
+      selected: selected,
+      label: label,
+      child: InkWell(
+        onTap: onTap,
+        child: Padding(
+          padding: const EdgeInsets.symmetric(vertical: 12),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Icon(selected ? selectedIcon : icon, color: tone),
+              const SizedBox(height: 4),
+              Text(
+                label,
+                style: Theme.of(context).textTheme.labelMedium?.copyWith(
+                  color: tone,
+                  fontWeight: selected ? FontWeight.w700 : FontWeight.w500,
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
 
 class _Workspace extends StatelessWidget {
   const _Workspace({
@@ -170,86 +252,161 @@ class _Workspace extends StatelessWidget {
   Widget build(BuildContext context) {
     return Column(
       children: [
-        _ConnectionBar(state: state, compact: compact),
-        const Divider(height: 1),
-        Expanded(
-          child: IndexedStack(index: selectedIndex, children: pages),
-        ),
+        _OperationalStatusStrip(state: state, compact: compact),
+        Expanded(child: pages[selectedIndex]),
       ],
     );
   }
 }
 
-class _ConnectionBar extends StatelessWidget {
-  const _ConnectionBar({required this.state, required this.compact});
+class _OperationalStatusStrip extends StatelessWidget {
+  const _OperationalStatusStrip({required this.state, required this.compact});
 
   final ObservabilityState state;
   final bool compact;
 
   @override
   Widget build(BuildContext context) {
-    final theme = Theme.of(context);
     final heartbeat = state.lastHeartbeat;
-    final peer = heartbeat == null
-        ? 'No vehicle identity observed'
-        : 'System ${heartbeat.systemId} / component ${heartbeat.componentId}';
-    final frameTime = state.lastFrameAt == null
-        ? 'No frames received'
-        : 'Last frame ${_formatTimestamp(state.lastFrameAt!)}';
+    final dark = Theme.of(context).brightness == Brightness.dark;
+    final replayTone = dark ? const Color(0xff70b8ff) : const Color(0xff175cd3);
+    final source = state.isReplay ? 'Replay · fixture' : state.sourceLabel;
 
-    return Semantics(
-      label: '${state.status.label}; ${state.sourceLabel}; $peer; $frameTime',
-      child: Padding(
-        padding: EdgeInsets.symmetric(
-          horizontal: compact ? 16 : 24,
-          vertical: 12,
-        ),
-        child: GlassPanel(
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final textScale = MediaQuery.textScalerOf(context).scale(14) / 14;
+        final showFacts =
+            !compact && constraints.maxWidth >= 900 && textScale <= 1.25;
+        return FrostedChrome(
           child: Padding(
-            padding: const EdgeInsets.all(12),
-            child: Wrap(
-              spacing: 8,
-              runSpacing: 8,
-              crossAxisAlignment: WrapCrossAlignment.center,
-              children: [
-                Icon(
-                  Icons.visibility_outlined,
-                  color: theme.colorScheme.primary,
-                ),
-                Text('Observation only', style: theme.textTheme.titleSmall),
-                _StatusChip(label: state.sourceLabel),
-                _StatusChip(label: state.status.label),
-                Text(peer),
-                Text(frameTime),
-                const _ThemeMenu(),
-              ],
+            padding: EdgeInsets.symmetric(
+              horizontal: compact ? 16 : 20,
+              vertical: 10,
             ),
+            child: showFacts
+                ? Row(
+                    children: [
+                      StatusBadge(label: source, color: replayTone),
+                      const SizedBox(width: 8),
+                      const StatusBadge(label: 'Observation only'),
+                      const SizedBox(width: 12),
+                      Text(
+                        state.status.label,
+                        style: Theme.of(context).textTheme.bodySmall,
+                      ),
+                      const VerticalDivider(indent: 4, endIndent: 4),
+                      Text(
+                        heartbeat == null
+                            ? 'Awaiting reported heartbeat'
+                            : 'SYS ${heartbeat.systemId} · COMP ${heartbeat.componentId}',
+                        style: Theme.of(context).textTheme.bodySmall?.copyWith(
+                          fontFamily: 'monospace',
+                        ),
+                      ),
+                      const SizedBox(width: 12),
+                      Text(
+                        'Ingress ${state.parserDropCount} / ${state.semanticDropCount}',
+                        style: Theme.of(context).textTheme.bodySmall?.copyWith(
+                          fontFamily: 'monospace',
+                        ),
+                      ),
+                      const Spacer(),
+                      Text(
+                        state.lastFrameAt == null
+                            ? 'No observations'
+                            : state.isReplay
+                            ? 'Replay ended ${_shortTimestamp(state.lastFrameAt!)}'
+                            : 'Last ${_shortTimestamp(state.lastFrameAt!)}',
+                        style: Theme.of(context).textTheme.bodySmall,
+                      ),
+                    ],
+                  )
+                : Wrap(
+                    spacing: 8,
+                    runSpacing: 6,
+                    crossAxisAlignment: WrapCrossAlignment.center,
+                    children: [
+                      StatusBadge(label: source, color: replayTone),
+                      const StatusBadge(label: 'Observation only'),
+                      const AppearanceMenu(),
+                    ],
+                  ),
           ),
-        ),
-      ),
+        );
+      },
     );
   }
 }
 
-class _ThemeMenu extends ConsumerWidget {
-  const _ThemeMenu();
+class AppearanceMenu extends ConsumerWidget {
+  const AppearanceMenu({super.key, this.showLabel = false});
+
+  final bool showLabel;
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final mode = ref.watch(themeModeProvider);
+    final label = _appearanceLabel(mode);
 
-    return PopupMenuButton<ThemeMode>(
-      tooltip: 'Choose theme',
-      initialValue: mode,
-      onSelected: ref.read(themeModeProvider.notifier).select,
-      icon: Icon(_iconFor(mode)),
-      itemBuilder: (context) => const [
-        PopupMenuItem(value: ThemeMode.system, child: Text('System default')),
-        PopupMenuItem(value: ThemeMode.light, child: Text('Light')),
-        PopupMenuItem(value: ThemeMode.dark, child: Text('Dark')),
-      ],
+    return Semantics(
+      button: true,
+      label: 'Appearance: $label',
+      child: Tooltip(
+        message: 'Appearance: $label',
+        child: PopupMenuButton<ThemeMode>(
+          initialValue: mode,
+          constraints: const BoxConstraints(minWidth: 300, maxWidth: 360),
+          onSelected: ref.read(themeModeProvider.notifier).select,
+          child: Padding(
+            padding: const EdgeInsets.all(8),
+            child: Row(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Icon(_appearanceIcon(mode), size: 20),
+                if (showLabel) ...[
+                  const SizedBox(width: 8),
+                  Text(
+                    'Appearance',
+                    style: Theme.of(context).textTheme.labelLarge,
+                  ),
+                ],
+              ],
+            ),
+          ),
+          itemBuilder: (context) => [
+            const PopupMenuItem(
+              enabled: false,
+              child: ConsoleLabel('Appearance'),
+            ),
+            _appearanceItem(
+              ThemeMode.system,
+              mode,
+              'System default (recommended)',
+            ),
+            _appearanceItem(ThemeMode.light, mode, 'Light'),
+            _appearanceItem(ThemeMode.dark, mode, 'Dark'),
+          ],
+        ),
+      ),
     );
   }
+
+  PopupMenuItem<ThemeMode> _appearanceItem(
+    ThemeMode value,
+    ThemeMode selected,
+    String label,
+  ) => PopupMenuItem(
+    value: value,
+    child: Row(
+      children: [
+        Icon(value == selected ? Icons.check : Icons.circle_outlined, size: 18),
+        const SizedBox(width: 10),
+        Expanded(
+          child: Text(label, maxLines: 2, overflow: TextOverflow.ellipsis),
+        ),
+      ],
+    ),
+  );
 }
 
 class _CriticalAnnouncement extends StatelessWidget {
@@ -258,31 +415,27 @@ class _CriticalAnnouncement extends StatelessWidget {
   final String message;
 
   @override
-  Widget build(BuildContext context) {
-    return Semantics(
-      container: true,
-      liveRegion: true,
-      label: message,
-      child: const SizedBox.square(dimension: 1),
-    );
-  }
+  Widget build(BuildContext context) => Semantics(
+    container: true,
+    liveRegion: true,
+    label: message,
+    child: const SizedBox.square(dimension: 1),
+  );
 }
 
-class _StatusChip extends StatelessWidget {
-  const _StatusChip({required this.label});
+String _appearanceLabel(ThemeMode mode) => switch (mode) {
+  ThemeMode.system => 'System default',
+  ThemeMode.light => 'Light',
+  ThemeMode.dark => 'Dark',
+};
 
-  final String label;
-
-  @override
-  Widget build(BuildContext context) {
-    return Chip(label: Text(label), visualDensity: VisualDensity.compact);
-  }
-}
-
-String _formatTimestamp(DateTime value) => value.toIso8601String();
-
-IconData _iconFor(ThemeMode mode) => switch (mode) {
+IconData _appearanceIcon(ThemeMode mode) => switch (mode) {
   ThemeMode.system => Icons.brightness_auto_outlined,
   ThemeMode.light => Icons.light_mode_outlined,
   ThemeMode.dark => Icons.dark_mode_outlined,
 };
+
+String _shortTimestamp(DateTime value) =>
+    '${value.hour.toString().padLeft(2, '0')}:'
+    '${value.minute.toString().padLeft(2, '0')}:'
+    '${value.second.toString().padLeft(2, '0')}Z';