feat(ground-suite): redesign observability console

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

@@ -3,7 +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 '../../../shared/widgets/surfaces.dart';
 import '../../observability/presentation/observability_controller.dart';
 
 enum _DiagnosticFilter { all, logs, errors, shutdowns }
@@ -22,45 +22,55 @@ class _DiagnosticsPageState extends ConsumerState<DiagnosticsPage> {
   @override
   Widget build(BuildContext context) {
     final state = ref.watch(observabilityControllerProvider);
-    final events = state.events.where(_matches).toList(growable: false);
+    final diagnostics = state.events
+        .where(_isDiagnostic)
+        .toList(growable: false);
+    final events = diagnostics.where(_matches).toList(growable: false);
 
     return CustomScrollView(
       slivers: [
         SliverPadding(
-          padding: const EdgeInsets.fromLTRB(24, 24, 24, 16),
+          padding: const EdgeInsets.fromLTRB(28, 28, 28, 16),
           sliver: SliverToBoxAdapter(
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
+                const ConsoleLabel('Event stream'),
+                const SizedBox(height: 8),
                 Text(
-                  'Diagnostics',
+                  'Event timeline',
                   style: Theme.of(context).textTheme.headlineMedium,
                 ),
-                const SizedBox(height: 8),
-                const Text(
-                  'Messages remain distinct by protocol class. A configuration '
-                  'result will remain authoritative when configuration support '
-                  'is added.',
+                const SizedBox(height: 6),
+                Text(
+                  'Read-only decoded observations. Diagnostic delivery can be bounded and lossy.',
+                  style: Theme.of(context).textTheme.bodyMedium,
                 ),
-                const SizedBox(height: 16),
+                const SizedBox(height: 8),
+                Text(
+                  'Retained diagnostics ${state.events.length} · local records not retained ${state.localTimelineEvictionCount}',
+                  style: Theme.of(
+                    context,
+                  ).textTheme.bodySmall?.copyWith(fontFamily: 'monospace'),
+                ),
+                const SizedBox(height: 20),
                 Wrap(
                   spacing: 8,
                   runSpacing: 8,
-                  children: _DiagnosticFilter.values
-                      .map(
-                        (filter) => ChoiceChip(
-                          label: Text(_labelFor(filter)),
-                          selected: _filter == filter,
-                          onSelected: (_) => setState(() => _filter = filter),
-                        ),
-                      )
-                      .toList(growable: false),
+                  children: [
+                    for (final filter in _DiagnosticFilter.values)
+                      ChoiceChip(
+                        label: Text(_filterLabel(filter, diagnostics)),
+                        selected: _filter == filter,
+                        onSelected: (_) => setState(() => _filter = filter),
+                      ),
+                  ],
                 ),
                 const SizedBox(height: 12),
                 TextField(
                   decoration: const InputDecoration(
                     border: OutlineInputBorder(),
-                    labelText: 'Filter diagnostics',
+                    labelText: 'Search message, error path, or detail',
                     prefixIcon: Icon(Icons.search),
                   ),
                   onChanged: (value) {
@@ -73,23 +83,23 @@ class _DiagnosticsPageState extends ConsumerState<DiagnosticsPage> {
         ),
         if (events.isEmpty)
           const SliverPadding(
-            padding: EdgeInsets.fromLTRB(24, 0, 24, 24),
+            padding: EdgeInsets.fromLTRB(28, 0, 28, 28),
             sliver: SliverToBoxAdapter(
-              child: GlassPanel(
+              child: InstrumentPanel(
                 child: Padding(
                   padding: EdgeInsets.all(20),
-                  child: Text('No diagnostic observations match this filter.'),
+                  child: Text('No events match this view.'),
                 ),
               ),
             ),
           )
         else
           SliverPadding(
-            padding: const EdgeInsets.fromLTRB(24, 0, 24, 24),
+            padding: const EdgeInsets.fromLTRB(28, 0, 28, 28),
             sliver: SliverList.builder(
               itemCount: events.length,
               itemBuilder: (context, index) =>
-                  _DiagnosticCard(event: events[index]),
+                  _DiagnosticRow(event: events[index]),
             ),
           ),
       ],
@@ -98,79 +108,85 @@ class _DiagnosticsPageState extends ConsumerState<DiagnosticsPage> {
 
   bool _matches(ObservedEvent event) {
     final typeMatches = switch (_filter) {
-      _DiagnosticFilter.all =>
-        event is LogEvent || event is ErrorEvent || event is ShutdownEvent,
+      _DiagnosticFilter.all => true,
       _DiagnosticFilter.logs => event is LogEvent,
       _DiagnosticFilter.errors => event is ErrorEvent,
       _DiagnosticFilter.shutdowns => event is ShutdownEvent,
     };
-    if (!typeMatches) {
-      return false;
-    }
-    if (_query.isEmpty) {
-      return true;
-    }
-    return _searchableText(event).toLowerCase().contains(_query);
+    return typeMatches &&
+        (_query.isEmpty ||
+            _searchableText(event).toLowerCase().contains(_query));
   }
 }
 
-class _DiagnosticCard extends StatelessWidget {
-  const _DiagnosticCard({required this.event});
+class _DiagnosticRow extends StatelessWidget {
+  const _DiagnosticRow({required this.event});
 
   final ObservedEvent event;
 
   @override
   Widget build(BuildContext context) {
-    final theme = Theme.of(context);
-    final content = switch (event) {
-      LogEvent(:final level, :final message, :final flags) => _LogContent(
-        level: level,
-        message: message,
-        flags: flags,
-      ),
-      ErrorEvent(:final path, :final additionalInformation, :final flags) =>
-        _ErrorContent(
-          path: path,
-          additionalInformation: additionalInformation,
-          flags: flags,
-        ),
-      ShutdownEvent(:final reason) => _ShutdownContent(reason: reason),
-      _ => null,
-    };
-    if (content == null) {
-      return const SizedBox.shrink();
-    }
+    final content = _contentFor(
+      event,
+      Theme.of(context).brightness == Brightness.dark,
+    );
 
     return Semantics(
       container: true,
       label: content.semanticLabel,
       child: Padding(
-        padding: const EdgeInsets.only(bottom: 12),
-        child: GlassListItem(
+        padding: const EdgeInsets.only(bottom: 8),
+        child: InstrumentPanel(
           child: Padding(
-            padding: const EdgeInsets.all(16),
+            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
             child: Row(
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
-                content.leading,
+                Container(width: 3, height: 56, color: content.tone),
                 const SizedBox(width: 12),
+                SizedBox(
+                  width: 92,
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      ConsoleLabel(content.kind, color: content.tone),
+                      const SizedBox(height: 6),
+                      Text(
+                        _timelineTimestamp(event.receivedAt),
+                        style: Theme.of(context).textTheme.bodySmall?.copyWith(
+                          fontFamily: 'monospace',
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+                const SizedBox(width: 8),
+                content.icon,
+                const SizedBox(width: 10),
                 Expanded(
                   child: SelectionArea(
                     child: Column(
                       crossAxisAlignment: CrossAxisAlignment.start,
                       children: [
-                        Text(content.title, style: theme.textTheme.titleMedium),
+                        Text(
+                          content.title,
+                          style: Theme.of(context).textTheme.titleMedium,
+                        ),
                         const SizedBox(height: 4),
-                        Text(content.detail),
+                        Text(
+                          content.detail,
+                          style: content.monoDetail
+                              ? Theme.of(context).textTheme.bodyMedium
+                                    ?.copyWith(fontFamily: 'monospace')
+                              : null,
+                        ),
                         if (content.additionalDetail case final detail?) ...[
                           const SizedBox(height: 8),
-                          Text(detail),
+                          Text(
+                            detail,
+                            style: Theme.of(context).textTheme.bodySmall,
+                          ),
                         ],
-                        const SizedBox(height: 8),
-                        Text(
-                          event.receivedAt.toIso8601String(),
-                          style: theme.textTheme.bodySmall,
-                        ),
                       ],
                     ),
                   ),
@@ -186,65 +202,88 @@ class _DiagnosticCard extends StatelessWidget {
 
 class _DiagnosticContent {
   const _DiagnosticContent({
-    required this.leading,
+    required this.kind,
+    required this.tone,
+    required this.icon,
     required this.title,
     required this.detail,
     required this.semanticLabel,
     this.additionalDetail,
+    this.monoDetail = false,
   });
 
-  final Widget leading;
+  final String kind;
+  final Color tone;
+  final Widget icon;
   final String title;
   final String detail;
   final String? additionalDetail;
   final String semanticLabel;
+  final bool monoDetail;
 }
 
-class _LogContent extends _DiagnosticContent {
-  _LogContent({
-    required MavSeverity level,
-    required String message,
-    required int flags,
-  }) : super(
-         leading: SeverityBadge(level: level),
-         title: 'Log — ${level.label}',
-         detail: message,
-         additionalDetail: _formatLogFlags(flags),
-         semanticLabel: _semanticLogLabel(level, message, flags),
-       );
-}
-
-class _ErrorContent extends _DiagnosticContent {
-  _ErrorContent({
-    required String path,
-    required String additionalInformation,
-    required int flags,
-  }) : super(
-         leading: const SeverityBadge(level: MavSeverity.error),
-         title: 'Error',
-         detail: path,
-         additionalDetail: _formatErrorDetail(additionalInformation, flags),
-         semanticLabel: _semanticErrorLabel(path, additionalInformation, flags),
-       );
-}
-
-class _ShutdownContent extends _DiagnosticContent {
-  _ShutdownContent({required KaptanShutdownReason reason})
-    : super(
-        leading: const Icon(Icons.power_settings_new_outlined),
-        title: 'Orderly shutdown observed',
-        detail: 'Reason: ${reason.label}',
-        semanticLabel: 'Orderly shutdown observed: ${reason.label}',
-      );
-}
-
-String _labelFor(_DiagnosticFilter filter) => switch (filter) {
-  _DiagnosticFilter.all => 'All',
-  _DiagnosticFilter.logs => 'Logs',
-  _DiagnosticFilter.errors => 'Errors',
-  _DiagnosticFilter.shutdowns => 'Shutdowns',
+_DiagnosticContent _contentFor(
+  ObservedEvent event,
+  bool dark,
+) => switch (event) {
+  LogEvent(:final level, :final message, :final flags) => _DiagnosticContent(
+    kind: 'Log',
+    tone: _toneForSeverity(level, dark),
+    icon: SeverityBadge(level: level),
+    title: level.label,
+    detail: message,
+    additionalDetail: _formatLogFlags(flags),
+    semanticLabel: _semanticLogLabel(level, message, flags),
+  ),
+  ErrorEvent(:final path, :final additionalInformation, :final flags) =>
+    _DiagnosticContent(
+      kind: 'Error',
+      tone: dark ? const Color(0xffff6b63) : const Color(0xffd92d20),
+      icon: Icon(
+        Icons.error_outline,
+        color: dark ? const Color(0xffff6b63) : const Color(0xffd92d20),
+      ),
+      title: 'Runtime error observed',
+      detail: path,
+      additionalDetail: _formatErrorDetail(additionalInformation, flags),
+      semanticLabel: _semanticErrorLabel(path, additionalInformation, flags),
+      monoDetail: true,
+    ),
+  ShutdownEvent(:final reason) => _DiagnosticContent(
+    kind: 'Shutdown',
+    tone: dark ? const Color(0xfff7b955) : const Color(0xffb54708),
+    icon: Icon(
+      Icons.power_settings_new_outlined,
+      color: dark ? const Color(0xfff7b955) : const Color(0xffb54708),
+    ),
+    title: 'Orderly shutdown report',
+    detail: 'Reason: ${reason.label}',
+    additionalDetail:
+        'Completed orderly, output-inhibited report; not a command, panic, hard-fault, or reset.',
+    semanticLabel: 'Orderly shutdown report: ${reason.label}',
+  ),
+  _ => throw StateError('only diagnostic events reach the timeline'),
 };
 
+bool _isDiagnostic(ObservedEvent event) =>
+    event is LogEvent || event is ErrorEvent || event is ShutdownEvent;
+
+String _filterLabel(_DiagnosticFilter filter, List<ObservedEvent> events) {
+  final count = switch (filter) {
+    _DiagnosticFilter.all => events.length,
+    _DiagnosticFilter.logs => events.whereType<LogEvent>().length,
+    _DiagnosticFilter.errors => events.whereType<ErrorEvent>().length,
+    _DiagnosticFilter.shutdowns => events.whereType<ShutdownEvent>().length,
+  };
+  final label = switch (filter) {
+    _DiagnosticFilter.all => 'All events',
+    _DiagnosticFilter.logs => 'Logs',
+    _DiagnosticFilter.errors => 'Errors',
+    _DiagnosticFilter.shutdowns => 'Shutdown reports',
+  };
+  return '$label $count';
+}
+
 String _searchableText(ObservedEvent event) => switch (event) {
   LogEvent(:final level, :final message) => '${level.label} $message',
   ErrorEvent(:final path, :final additionalInformation) =>
@@ -253,6 +292,18 @@ String _searchableText(ObservedEvent event) => switch (event) {
   _ => '',
 };
 
+Color _toneForSeverity(MavSeverity level, bool dark) =>
+    switch (level.wireValue) {
+      0 ||
+      1 ||
+      2 ||
+      3 => dark ? const Color(0xffff6b63) : const Color(0xffd92d20),
+      4 => dark ? const Color(0xfff7b955) : const Color(0xffb54708),
+      5 || 6 => dark ? const Color(0xff70b8ff) : const Color(0xff175cd3),
+      7 => dark ? const Color(0xffa8b5ac) : const Color(0xff546258),
+      _ => dark ? const Color(0xffa8b5ac) : const Color(0xff546258),
+    };
+
 String? _formatLogFlags(int flags) {
   final labels = <String>[
     if (flags & LogEvent.traceFlag != 0) 'Trace',
@@ -261,7 +312,7 @@ String? _formatLogFlags(int flags) {
     if (flags & ~LogEvent.knownFlags != 0)
       'Unknown bits 0x${(flags & ~LogEvent.knownFlags).toRadixString(16)}',
   ];
-  return labels.isEmpty ? null : 'Flags: ${labels.join(', ')}';
+  return labels.isEmpty ? null : 'Flags: ${labels.join(' · ')}';
 }
 
 String? _formatErrorDetail(String additionalInformation, int flags) {
@@ -280,7 +331,7 @@ String? _formatErrorFlags(int flags) {
     if (flags & ~ErrorEvent.knownFlags != 0)
       'Unknown bits 0x${(flags & ~ErrorEvent.knownFlags).toRadixString(16)}',
   ];
-  return labels.isEmpty ? null : 'Flags: ${labels.join(', ')}';
+  return labels.isEmpty ? null : 'Flags: ${labels.join(' · ')}';
 }
 
 String _semanticLogLabel(MavSeverity level, String message, int flags) {
@@ -298,3 +349,8 @@ String _semanticErrorLabel(
   final detail = _formatErrorDetail(additionalInformation, flags);
   return detail == null ? 'Error: $path' : 'Error: $path. $detail';
 }
+
+String _timelineTimestamp(DateTime value) =>
+    '${value.hour.toString().padLeft(2, '0')}:'
+    '${value.minute.toString().padLeft(2, '0')}:'
+    '${value.second.toString().padLeft(2, '0')}Z';