feat(ground-suite): add system glass themes

docs/src/ground-suite.md

@@ -13,6 +13,11 @@ every inbound MAVLink frame, and SITL does not yet expose a MAVLink endpoint.
 Link presence is never presented as proof of safety, authority, arming state,
 or write capability.
 
+Ground Suite provides light and dark themes, selecting the operating system's
+current preference by default. The dark theme uses Orkavian's near-black,
+muted-silver, and restrained green-accent visual language with locally blurred
+translucent panels.
+
 Ground Suite uses a receive-only source/decoder/classifier boundary. The
 replay implementation feeds typed observations today. A future live adapter
 must combine pinned MAVLink Common definitions with `kaptan.xml`, reject

ground-suite/README.md

@@ -45,6 +45,13 @@ nix develop -c sh -c 'cd ground-suite && flutter run -d linux'
 Linux is the first tested desktop runner. Native macOS and Windows runners
 will be added only with their respective CI coverage.
 
+## Appearance
+
+Ground Suite supplies light and dark themes and follows the operating system
+by default. Its dark palette follows Orkavian's near-black, muted-silver, and
+restrained green-accent visual language; translucent, locally blurred panels
+keep operational content legible without turning diagnostics into decoration.
+
 ## Deliberately deferred work
 
 - TODO(gcs-live-mavlink): generated MAVLink Common plus custom-dialect

ground-suite/lib/app/app.dart

@@ -11,7 +11,9 @@ class GroundSuiteApp extends StatelessWidget {
     return MaterialApp(
       title: 'Ground Suite',
       debugShowCheckedModeBanner: false,
-      theme: groundSuiteTheme(),
+      theme: groundSuiteLightTheme(),
+      darkTheme: groundSuiteDarkTheme(),
+      themeMode: ThemeMode.system,
       home: const AppShell(),
     );
   }

ground-suite/lib/app/app_shell.dart

@@ -4,6 +4,7 @@ import 'package:flutter_riverpod/flutter_riverpod.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';
 
 enum _Destination { overview, diagnostics }
 
@@ -23,34 +24,36 @@ class _AppShellState extends ConsumerState<AppShell> {
     const pages = <Widget>[OverviewPage(), DiagnosticsPage()];
 
     return Scaffold(
-      body: SafeArea(
+      body: OrkavianBackdrop(
-        child: Stack(
+        child: SafeArea(
-          children: [
+          child: Stack(
-            LayoutBuilder(
+            children: [
-              builder: (context, constraints) {
+              LayoutBuilder(
-                final compact = constraints.maxWidth < 760;
+                builder: (context, constraints) {
-                final content = _Workspace(
+                  final compact = constraints.maxWidth < 760;
-                  state: state,
+                  final content = _Workspace(
-                  selectedIndex: _destination.index,
+                    state: state,
-                  pages: pages,
+                    selectedIndex: _destination.index,
-                  compact: compact,
+                    pages: pages,
-                );
+                    compact: compact,
-                return compact
+                  );
-                    ? _CompactShell(
+                  return compact
-                        selectedIndex: _destination.index,
+                      ? _CompactShell(
-                        onSelected: _selectDestination,
+                          selectedIndex: _destination.index,
-                        content: content,
+                          onSelected: _selectDestination,
-                      )
+                          content: content,
-                    : _WideShell(
+                        )
-                        selectedIndex: _destination.index,
+                      : _WideShell(
-                        onSelected: _selectDestination,
+                          selectedIndex: _destination.index,
-                        content: content,
+                          onSelected: _selectDestination,
-                      );
+                          content: content,
-              },
+                        );
-            ),
+                },
-            if (state.accessibilityAnnouncement case final announcement?)
+              ),
-              _CriticalAnnouncement(message: announcement),
+              if (state.accessibilityAnnouncement case final announcement?)
-          ],
+                _CriticalAnnouncement(message: announcement),
+            ],
+          ),
         ),
       ),
     );
@@ -76,15 +79,18 @@ class _WideShell extends StatelessWidget {
   Widget build(BuildContext context) {
     return Row(
       children: [
-        NavigationRail(
+        GlassPanel(
-          selectedIndex: selectedIndex,
+          borderRadius: BorderRadius.zero,
-          labelType: NavigationRailLabelType.all,
+          child: NavigationRail(
-          onDestinationSelected: onSelected,
+            selectedIndex: selectedIndex,
-          leading: const Padding(
+            labelType: NavigationRailLabelType.all,
-            padding: EdgeInsets.symmetric(vertical: 16),
+            onDestinationSelected: onSelected,
-            child: Icon(Icons.flight_takeoff_outlined, size: 28),
+            leading: const Padding(
+              padding: EdgeInsets.symmetric(vertical: 16),
+              child: Icon(Icons.flight_takeoff_outlined, size: 28),
+            ),
+            destinations: _destinations,
           ),
-          destinations: _destinations,
         ),
         const VerticalDivider(width: 1),
         Expanded(child: content),
@@ -109,21 +115,24 @@ class _CompactShell extends StatelessWidget {
     return Column(
       children: [
         Expanded(child: content),
-        NavigationBar(
+        GlassPanel(
-          selectedIndex: selectedIndex,
+          borderRadius: const BorderRadius.vertical(top: Radius.circular(16)),
-          onDestinationSelected: onSelected,
+          child: NavigationBar(
-          destinations: const [
+            selectedIndex: selectedIndex,
-            NavigationDestination(
+            onDestinationSelected: onSelected,
-              icon: Icon(Icons.space_dashboard_outlined),
+            destinations: const [
-              selectedIcon: Icon(Icons.space_dashboard),
+              NavigationDestination(
-              label: 'Overview',
+                icon: Icon(Icons.space_dashboard_outlined),
-            ),
+                selectedIcon: Icon(Icons.space_dashboard),
-            NavigationDestination(
+                label: 'Overview',
-              icon: Icon(Icons.receipt_long_outlined),
+              ),
-              selectedIcon: Icon(Icons.receipt_long),
+              NavigationDestination(
-              label: 'Diagnostics',
+                icon: Icon(Icons.receipt_long_outlined),
-            ),
+                selectedIcon: Icon(Icons.receipt_long),
-          ],
+                label: 'Diagnostics',
+              ),
+            ],
+          ),
         ),
       ],
     );
@@ -194,18 +203,26 @@ class _ConnectionBar extends StatelessWidget {
           horizontal: compact ? 16 : 24,
           vertical: 12,
         ),
-        child: Wrap(
+        child: GlassPanel(
-          spacing: 8,
+          child: Padding(
-          runSpacing: 8,
+            padding: const EdgeInsets.all(12),
-          crossAxisAlignment: WrapCrossAlignment.center,
+            child: Wrap(
-          children: [
+              spacing: 8,
-            Icon(Icons.visibility_outlined, color: theme.colorScheme.primary),
+              runSpacing: 8,
-            Text('Observation only', style: theme.textTheme.titleSmall),
+              crossAxisAlignment: WrapCrossAlignment.center,
-            _StatusChip(label: state.sourceLabel),
+              children: [
-            _StatusChip(label: state.status.label),
+                Icon(
-            Text(peer),
+                  Icons.visibility_outlined,
-            Text(frameTime),
+                  color: theme.colorScheme.primary,
-          ],
+                ),
+                Text('Observation only', style: theme.textTheme.titleSmall),
+                _StatusChip(label: state.sourceLabel),
+                _StatusChip(label: state.status.label),
+                Text(peer),
+                Text(frameTime),
+              ],
+            ),
+          ),
         ),
       ),
     );

ground-suite/lib/app/theme.dart

@@ -1,17 +1,100 @@
 import 'package:flutter/material.dart';
 
-ThemeData groundSuiteTheme() {
+/// Orkavian's restrained green accent, used sparingly against neutral surfaces.
-  const seed = Color(0xff006c8f);
+const orkavianGreen = Color(0xff00ff41);
-  final scheme = ColorScheme.fromSeed(seedColor: seed);
+
+ThemeData groundSuiteLightTheme() => _theme(
+  brightness: Brightness.light,
+  seed: const Color(0xff007a2e),
+  surface: const Color(0xfff6f8f5),
+  onSurface: const Color(0xff172019),
+  outline: const Color(0xffbdc7bc),
+);
+
+ThemeData groundSuiteDarkTheme() => _theme(
+  brightness: Brightness.dark,
+  seed: orkavianGreen,
+  surface: const Color(0xff0a0a0a),
+  onSurface: const Color(0xffe7e7e7),
+  outline: const Color(0xff333333),
+);
+
+ThemeData _theme({
+  required Brightness brightness,
+  required Color seed,
+  required Color surface,
+  required Color onSurface,
+  required Color outline,
+}) {
+  final scheme = ColorScheme.fromSeed(seedColor: seed, brightness: brightness)
+      .copyWith(
+        primary: seed,
+        onPrimary: brightness == Brightness.dark
+            ? const Color(0xff031207)
+            : Colors.white,
+        surface: surface,
+        onSurface: onSurface,
+        outline: outline,
+        surfaceContainer: brightness == Brightness.dark
+            ? const Color(0xff111111)
+            : const Color(0xffedf1ec),
+      );
 
   return ThemeData(
     useMaterial3: true,
     colorScheme: scheme,
-    scaffoldBackgroundColor: scheme.surface,
+    scaffoldBackgroundColor: Colors.transparent,
     visualDensity: VisualDensity.standard,
-    cardTheme: CardThemeData(
+    fontFamily: 'monospace',
+    cardTheme: const CardThemeData(
+      color: Colors.transparent,
       elevation: 0,
-      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+      margin: EdgeInsets.zero,
+    ),
+    dividerTheme: DividerThemeData(color: outline.withValues(alpha: 0.72)),
+    navigationRailTheme: NavigationRailThemeData(
+      backgroundColor: Colors.transparent,
+      indicatorColor: seed.withValues(
+        alpha: brightness == Brightness.dark ? 0.2 : 0.13,
+      ),
+      selectedIconTheme: IconThemeData(color: seed),
+      selectedLabelTextStyle: TextStyle(
+        color: seed,
+        fontWeight: FontWeight.w700,
+      ),
+    ),
+    navigationBarTheme: NavigationBarThemeData(
+      backgroundColor: Colors.transparent,
+      indicatorColor: seed.withValues(
+        alpha: brightness == Brightness.dark ? 0.2 : 0.13,
+      ),
+      labelTextStyle: WidgetStatePropertyAll(
+        TextStyle(color: onSurface, fontWeight: FontWeight.w600),
+      ),
+    ),
+    chipTheme: ChipThemeData(
+      backgroundColor: scheme.surfaceContainer.withValues(alpha: 0.72),
+      selectedColor: seed.withValues(
+        alpha: brightness == Brightness.dark ? 0.22 : 0.16,
+      ),
+      side: BorderSide(color: outline.withValues(alpha: 0.75)),
+      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
+    ),
+    inputDecorationTheme: InputDecorationTheme(
+      filled: true,
+      fillColor: scheme.surfaceContainer.withValues(alpha: 0.7),
+      border: OutlineInputBorder(
+        borderRadius: BorderRadius.circular(14),
+        borderSide: BorderSide(color: outline),
+      ),
+      enabledBorder: OutlineInputBorder(
+        borderRadius: BorderRadius.circular(14),
+        borderSide: BorderSide(color: outline.withValues(alpha: 0.8)),
+      ),
+      focusedBorder: OutlineInputBorder(
+        borderRadius: BorderRadius.circular(14),
+        borderSide: BorderSide(color: seed, width: 1.5),
+      ),
     ),
   );
 }

ground-suite/lib/features/diagnostics/presentation/diagnostics_page.dart

@@ -3,6 +3,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 
 import '../../../core/observations/observed_event.dart';
 import '../../../shared/widgets/severity_badge.dart';
+import '../../../shared/widgets/glass_panel.dart';
 import '../../observability/presentation/observability_controller.dart';
 
 enum _DiagnosticFilter { all, logs, errors, shutdowns }
@@ -23,50 +24,74 @@ class _DiagnosticsPageState extends ConsumerState<DiagnosticsPage> {
     final state = ref.watch(observabilityControllerProvider);
     final events = state.events.where(_matches).toList(growable: false);
 
-    return ListView(
+    return CustomScrollView(
-      padding: const EdgeInsets.all(24),
+      slivers: [
-      children: [
+        SliverPadding(
-        Text('Diagnostics', style: Theme.of(context).textTheme.headlineMedium),
+          padding: const EdgeInsets.fromLTRB(24, 24, 24, 16),
-        const SizedBox(height: 8),
+          sliver: SliverToBoxAdapter(
-        const Text(
+            child: Column(
-          'Messages remain distinct by protocol class. A configuration result '
+              crossAxisAlignment: CrossAxisAlignment.start,
-          'will remain authoritative when configuration support is added.',
+              children: [
-        ),
+                Text(
-        const SizedBox(height: 16),
+                  'Diagnostics',
-        Wrap(
+                  style: Theme.of(context).textTheme.headlineMedium,
-          spacing: 8,
-          runSpacing: 8,
-          children: _DiagnosticFilter.values
-              .map(
-                (filter) => ChoiceChip(
-                  label: Text(_labelFor(filter)),
-                  selected: _filter == filter,
-                  onSelected: (_) => setState(() => _filter = filter),
                 ),
-              )
+                const SizedBox(height: 8),
-              .toList(growable: false),
+                const Text(
-        ),
+                  'Messages remain distinct by protocol class. A configuration '
-        const SizedBox(height: 12),
+                  'result will remain authoritative when configuration support '
-        TextField(
+                  'is added.',
-          decoration: const InputDecoration(
+                ),
-            border: OutlineInputBorder(),
+                const SizedBox(height: 16),
-            labelText: 'Filter diagnostics',
+                Wrap(
-            prefixIcon: Icon(Icons.search),
+                  spacing: 8,
+                  runSpacing: 8,
+                  children: _DiagnosticFilter.values
+                      .map(
+                        (filter) => ChoiceChip(
+                          label: Text(_labelFor(filter)),
+                          selected: _filter == filter,
+                          onSelected: (_) => setState(() => _filter = filter),
+                        ),
+                      )
+                      .toList(growable: false),
+                ),
+                const SizedBox(height: 12),
+                TextField(
+                  decoration: const InputDecoration(
+                    border: OutlineInputBorder(),
+                    labelText: 'Filter diagnostics',
+                    prefixIcon: Icon(Icons.search),
+                  ),
+                  onChanged: (value) {
+                    setState(() => _query = value.trim().toLowerCase());
+                  },
+                ),
+              ],
+            ),
           ),
-          onChanged: (value) {
-            setState(() => _query = value.trim().toLowerCase());
-          },
         ),
-        const SizedBox(height: 16),
         if (events.isEmpty)
-          const Card(
+          const SliverPadding(
-            child: Padding(
+            padding: EdgeInsets.fromLTRB(24, 0, 24, 24),
-              padding: EdgeInsets.all(20),
+            sliver: SliverToBoxAdapter(
-              child: Text('No diagnostic observations match this filter.'),
+              child: GlassPanel(
+                child: Padding(
+                  padding: EdgeInsets.all(20),
+                  child: Text('No diagnostic observations match this filter.'),
+                ),
+              ),
             ),
           )
         else
-          ...events.map((event) => _DiagnosticCard(event: event)),
+          SliverPadding(
+            padding: const EdgeInsets.fromLTRB(24, 0, 24, 24),
+            sliver: SliverList.builder(
+              itemCount: events.length,
+              itemBuilder: (context, index) =>
+                  _DiagnosticCard(event: events[index]),
+            ),
+          ),
       ],
     );
   }
@@ -119,37 +144,39 @@ class _DiagnosticCard extends StatelessWidget {
     return Semantics(
       container: true,
       label: content.semanticLabel,
-      child: Card(
+      child: Padding(
-        margin: const EdgeInsets.only(bottom: 12),
+        padding: const EdgeInsets.only(bottom: 12),
-        child: Padding(
+        child: GlassListItem(
-          padding: const EdgeInsets.all(16),
+          child: Padding(
-          child: Row(
+            padding: const EdgeInsets.all(16),
-            crossAxisAlignment: CrossAxisAlignment.start,
+            child: Row(
-            children: [
+              crossAxisAlignment: CrossAxisAlignment.start,
-              content.leading,
+              children: [
-              const SizedBox(width: 12),
+                content.leading,
-              Expanded(
+                const SizedBox(width: 12),
-                child: SelectionArea(
+                Expanded(
-                  child: Column(
+                  child: SelectionArea(
-                    crossAxisAlignment: CrossAxisAlignment.start,
+                    child: Column(
-                    children: [
+                      crossAxisAlignment: CrossAxisAlignment.start,
-                      Text(content.title, style: theme.textTheme.titleMedium),
+                      children: [
-                      const SizedBox(height: 4),
+                        Text(content.title, style: theme.textTheme.titleMedium),
-                      Text(content.detail),
+                        const SizedBox(height: 4),
-                      if (content.additionalDetail case final detail?) ...[
+                        Text(content.detail),
+                        if (content.additionalDetail case final detail?) ...[
+                          const SizedBox(height: 8),
+                          Text(detail),
+                        ],
                         const SizedBox(height: 8),
-                        Text(detail),
+                        Text(
+                          event.receivedAt.toIso8601String(),
+                          style: theme.textTheme.bodySmall,
+                        ),
                       ],
-                      const SizedBox(height: 8),
+                    ),
-                      Text(
-                        event.receivedAt.toIso8601String(),
-                        style: theme.textTheme.bodySmall,
-                      ),
-                    ],
                   ),
                 ),
-              ),
+              ],
-            ],
+            ),
           ),
         ),
       ),

ground-suite/lib/features/overview/presentation/overview_page.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 
 import '../../observability/presentation/observability_controller.dart';
+import '../../../shared/widgets/glass_panel.dart';
 
 class OverviewPage extends ConsumerWidget {
   const OverviewPage({super.key});
@@ -78,7 +79,7 @@ class OverviewPage extends ConsumerWidget {
               ],
             ),
             const SizedBox(height: 24),
-            Card(
+            GlassPanel(
               child: Padding(
                 padding: const EdgeInsets.all(20),
                 child: Column(
@@ -125,7 +126,7 @@ class _SummaryCard extends StatelessWidget {
   Widget build(BuildContext context) {
     return SizedBox(
       width: width,
-      child: Card(
+      child: GlassPanel(
         child: Padding(
           padding: const EdgeInsets.all(20),
           child: Column(

ground-suite/lib/shared/widgets/glass_panel.dart

@@ -0,0 +1,121 @@
+import 'dart:ui';
+
+import 'package:flutter/material.dart';
+
+import '../../app/theme.dart';
+
+/// A bounded, translucent surface used for Ground Suite's data panels.
+///
+/// The blur is applied only inside the clipped panel, keeping the effect local
+/// to the UI rather than turning the whole desktop window into a filter.
+class GlassPanel extends StatelessWidget {
+  const GlassPanel({
+    required this.child,
+    super.key,
+    this.borderRadius = const BorderRadius.all(Radius.circular(16)),
+  });
+
+  final Widget child;
+  final BorderRadius borderRadius;
+
+  @override
+  Widget build(BuildContext context) {
+    return ClipRRect(
+      borderRadius: borderRadius,
+      child: BackdropFilter(
+        filter: ImageFilter.blur(sigmaX: 18, sigmaY: 18),
+        child: _GlassSurface(borderRadius: borderRadius, child: child),
+      ),
+    );
+  }
+}
+
+/// A scroll-friendly translucent panel without a backdrop filter.
+///
+/// Timeline rows use this surface so diagnostic volume does not turn into a
+/// growing set of expensive compositing layers.
+class GlassListItem extends StatelessWidget {
+  const GlassListItem({
+    required this.child,
+    super.key,
+    this.borderRadius = const BorderRadius.all(Radius.circular(16)),
+  });
+
+  final Widget child;
+  final BorderRadius borderRadius;
+
+  @override
+  Widget build(BuildContext context) =>
+      _GlassSurface(borderRadius: borderRadius, child: child);
+}
+
+class _GlassSurface extends StatelessWidget {
+  const _GlassSurface({required this.child, required this.borderRadius});
+
+  final Widget child;
+  final BorderRadius borderRadius;
+
+  @override
+  Widget build(BuildContext context) {
+    final scheme = Theme.of(context).colorScheme;
+    final isDark = scheme.brightness == Brightness.dark;
+    final fill = isDark ? const Color(0xb30a0a0a) : const Color(0xc9ffffff);
+    final border = isDark
+        ? scheme.primary.withValues(alpha: 0.24)
+        : scheme.outline.withValues(alpha: 0.7);
+
+    return DecoratedBox(
+      decoration: BoxDecoration(
+        color: fill,
+        border: Border.all(color: border),
+        borderRadius: borderRadius,
+        boxShadow: [
+          BoxShadow(
+            color: Colors.black.withValues(alpha: isDark ? 0.24 : 0.08),
+            blurRadius: 24,
+            offset: const Offset(0, 10),
+          ),
+        ],
+      ),
+      child: child,
+    );
+  }
+}
+
+class OrkavianBackdrop extends StatelessWidget {
+  const OrkavianBackdrop({required this.child, super.key});
+
+  final Widget child;
+
+  @override
+  Widget build(BuildContext context) {
+    final isDark = Theme.of(context).brightness == Brightness.dark;
+    final base = isDark ? const Color(0xff050505) : const Color(0xffeef3ee);
+    final haze = isDark
+        ? orkavianGreen.withValues(alpha: 0.1)
+        : const Color(0xff007a2e).withValues(alpha: 0.07);
+
+    return ColoredBox(
+      color: base,
+      child: Stack(
+        children: [
+          Positioned(
+            top: -260,
+            right: -220,
+            child: IgnorePointer(
+              child: Container(
+                width: 620,
+                height: 620,
+                decoration: BoxDecoration(
+                  shape: BoxShape.circle,
+                  gradient: RadialGradient(colors: [haze, Colors.transparent]),
+                ),
+              ),
+            ),
+          ),
+          Positioned.fill(child: child),
+        ],
+      ),
+    );
+  }
+}

ground-suite/test/widget_test.dart

@@ -2,6 +2,8 @@ import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:ground_suite/app/app.dart';
+import 'package:ground_suite/app/app_shell.dart';
+import 'package:ground_suite/shared/widgets/glass_panel.dart';
 
 void main() {
   testWidgets('replay workspace keeps diagnostics distinct and read-only', (
@@ -10,6 +12,11 @@ void main() {
     await tester.pumpWidget(const ProviderScope(child: GroundSuiteApp()));
     await tester.pumpAndSettle();
 
+    final app = tester.widget<MaterialApp>(find.byType(MaterialApp));
+    expect(app.themeMode, ThemeMode.system);
+    expect(app.theme?.brightness, Brightness.light);
+    expect(app.darkTheme?.brightness, Brightness.dark);
+    expect(find.byType(GlassPanel), findsAtLeastNWidgets(1));
     expect(find.text('Observation only'), findsOneWidget);
     expect(find.text('Replay fixture'), findsAtLeastNWidgets(1));
     expect(find.text('Vehicle identity'), findsOneWidget);
@@ -18,6 +25,8 @@ void main() {
     await tester.pumpAndSettle();
 
     expect(find.text('Diagnostics'), findsAtLeastNWidgets(1));
+    await tester.tap(find.text('Errors'));
+    await tester.pumpAndSettle();
     expect(
       find.text('kaptan_drivers::lidar_lite_v3::error::Error::TransferFault'),
       findsOneWidget,
@@ -42,4 +51,18 @@ void main() {
       expect(tester.takeException(), isNull);
     },
   );
+
+  testWidgets('follows a dark system preference', (tester) async {
+    tester.binding.platformDispatcher.platformBrightnessTestValue =
+        Brightness.dark;
+    addTearDown(
+      tester.binding.platformDispatcher.clearPlatformBrightnessTestValue,
+    );
+
+    await tester.pumpWidget(const ProviderScope(child: GroundSuiteApp()));
+    await tester.pumpAndSettle();
+
+    final context = tester.element(find.byType(AppShell));
+    expect(Theme.of(context).brightness, Brightness.dark);
+  });
 }