feat(ground-suite): redesign observability console

2026-08-10 16:46:36 +03:00
1 parent c67d553076
commit 153b0bf262
@@ -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';
@@ -20,6 +20,7 @@ final observabilityControllerProvider =

 class ObservabilityController extends Notifier<ObservabilityState> {
  static const _criticalAnnouncementWindow = Duration(seconds: 2);
+  static const _timelineCapacity = 500;

  StreamSubscription<VehicleDataUpdate>? _subscription;
  DateTime? _lastCriticalAnnouncementAt;
@@ -75,10 +76,22 @@ class ObservabilityController extends Notifier<ObservabilityState> {

  void _record(ObservedEvent event) {
    final announcement = _announcementFor(event);
+    final retention = _isTimelineEvent(event)
+        ? _retainTimelineEvent(state.events, event)
+        : _TimelineRetention(state.events);
+    final heartbeat = event is HeartbeatEvent ? event : state.lastHeartbeat;
+    final observedStreams = switch (event) {
+      TelemetryEvent(:final kind) => {...state.observedTelemetryKinds, kind},
+      _ => state.observedTelemetryKinds,
+    };
    state = state.copyWith(
      status: ObservationStatus.receiving,
      lastFrameAt: event.receivedAt,
-      events: [...state.events, event],
+      events: retention.events,
+      lastHeartbeat: heartbeat,
+      observedTelemetryKinds: Set.unmodifiable(observedStreams),
+      localTimelineEvictionCount:
+          state.localTimelineEvictionCount + retention.evictionCount,
      accessibilityAnnouncement: announcement.message,
      replaceAccessibilityAnnouncement: true,
      coalescedAlertCount:
@@ -110,6 +123,45 @@ class ObservabilityController extends Notifier<ObservabilityState> {
  void _cancelSubscription() {
    _subscription?.cancel();
  }
+
+  _TimelineRetention _retainTimelineEvent(
+    List<ObservedEvent> current,
+    ObservedEvent incoming,
+  ) {
+    if (current.length < _timelineCapacity) {
+      return _TimelineRetention([...current, incoming]);
+    }
+
+    final retained = List<ObservedEvent>.of(current);
+    final optionalIndex = retained.indexWhere((event) => !_isCritical(event));
+    if (optionalIndex >= 0) {
+      retained.removeAt(optionalIndex);
+      retained.add(incoming);
+      return _TimelineRetention(retained, evictionCount: 1);
+    }
+
+    if (_isCritical(incoming)) {
+      retained.removeAt(0);
+      retained.add(incoming);
+      return _TimelineRetention(retained, evictionCount: 1);
+    }
+
+    return _TimelineRetention(retained, evictionCount: 1);
+  }
+}
+
+bool _isCritical(ObservedEvent event) =>
+    event is ErrorEvent || event is ShutdownEvent;
+
+bool _isTimelineEvent(ObservedEvent event) =>
+    event is LogEvent || _isCritical(event);
+
+class _TimelineRetention {
+  _TimelineRetention(Iterable<ObservedEvent> events, {this.evictionCount = 0})
+    : events = List.unmodifiable(events);
+
+  final List<ObservedEvent> events;
+  final int evictionCount;
 }

 enum ObservationStatus {
@@ -129,9 +181,12 @@ class ObservabilityState {
    required this.isReplay,
    required this.status,
    required this.events,
+    required this.lastHeartbeat,
+    required this.observedTelemetryKinds,
    required this.parserDropCount,
    required this.semanticDropCount,
    required this.coalescedAlertCount,
+    required this.localTimelineEvictionCount,
    this.lastFrameAt,
    this.accessibilityAnnouncement,
  });
@@ -142,9 +197,12 @@ class ObservabilityState {
      isReplay: source.isReplay,
      status: ObservationStatus.starting,
      events: const [],
+      lastHeartbeat: null,
+      observedTelemetryKinds: const {},
      parserDropCount: 0,
      semanticDropCount: 0,
      coalescedAlertCount: 0,
+      localTimelineEvictionCount: 0,
    );
  }

@@ -152,32 +210,24 @@ class ObservabilityState {
  final bool isReplay;
  final ObservationStatus status;
  final List<ObservedEvent> events;
+  final HeartbeatEvent? lastHeartbeat;
+  final Set<TelemetryKind> observedTelemetryKinds;
  final int parserDropCount;
  final int semanticDropCount;
  final int coalescedAlertCount;
+  final int localTimelineEvictionCount;
  final DateTime? lastFrameAt;
  final String? accessibilityAnnouncement;

-  HeartbeatEvent? get lastHeartbeat {
-    for (final event in events.reversed) {
-      if (event case HeartbeatEvent()) {
-        return event;
-      }
-    }
-    return null;
-  }
-
-  Set<TelemetryKind> get observedTelemetryKinds => {
-    for (final event in events)
-      if (event case TelemetryEvent(:final kind)) kind,
-  };
-
  ObservabilityState copyWith({
    ObservationStatus? status,
    List<ObservedEvent>? events,
+    HeartbeatEvent? lastHeartbeat,
+    Set<TelemetryKind>? observedTelemetryKinds,
    int? parserDropCount,
    int? semanticDropCount,
    int? coalescedAlertCount,
+    int? localTimelineEvictionCount,
    DateTime? lastFrameAt,
    String? accessibilityAnnouncement,
    bool replaceAccessibilityAnnouncement = false,
@@ -187,9 +237,14 @@ class ObservabilityState {
      isReplay: isReplay,
      status: status ?? this.status,
      events: events ?? this.events,
+      lastHeartbeat: lastHeartbeat ?? this.lastHeartbeat,
+      observedTelemetryKinds:
+          observedTelemetryKinds ?? this.observedTelemetryKinds,
      parserDropCount: parserDropCount ?? this.parserDropCount,
      semanticDropCount: semanticDropCount ?? this.semanticDropCount,
      coalescedAlertCount: coalescedAlertCount ?? this.coalescedAlertCount,
+      localTimelineEvictionCount:
+          localTimelineEvictionCount ?? this.localTimelineEvictionCount,
      lastFrameAt: lastFrameAt ?? this.lastFrameAt,
      accessibilityAnnouncement: replaceAccessibilityAnnouncement
          ? accessibilityAnnouncement
@@ -1,8 +1,9 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';

+import '../../../core/observations/observed_event.dart';
+import '../../../shared/widgets/surfaces.dart';
 import '../../observability/presentation/observability_controller.dart';
-import '../../../shared/widgets/glass_panel.dart';

 class OverviewPage extends ConsumerWidget {
  const OverviewPage({super.key});
@@ -11,95 +12,103 @@ class OverviewPage extends ConsumerWidget {
  Widget build(BuildContext context, WidgetRef ref) {
    final state = ref.watch(observabilityControllerProvider);
    final heartbeat = state.lastHeartbeat;
-    final telemetry = state.observedTelemetryKinds
-        .map((kind) => kind.label)
-        .join(', ');
-    final identity = heartbeat == null
-        ? 'Not observed'
-        : 'System ${heartbeat.systemId} / component ${heartbeat.componentId}';
-    final identityDetail = heartbeat == null
-        ? 'Awaiting HEARTBEAT.'
-        : 'Reported by last HEARTBEAT: '
-              '${heartbeat.armed ? 'Armed' : 'Disarmed'} · ${heartbeat.vehicleState}';
+    final observedStreams = state.observedTelemetryKinds;

    return LayoutBuilder(
      builder: (context, constraints) {
-        final horizontalPadding = constraints.maxWidth < 600 ? 16.0 : 24.0;
-        final cardWidth = constraints.maxWidth < 640
-            ? constraints.maxWidth - (horizontalPadding * 2)
-            : 280.0;
+        final padding = constraints.maxWidth < 600 ? 16.0 : 28.0;
+        final columns = constraints.maxWidth >= 1120
+            ? 3
+            : constraints.maxWidth >= 700
+            ? 2
+            : 1;
+        final panelWidth =
+            (constraints.maxWidth - (padding * 2) - (16 * (columns - 1))) /
+            columns;

        return ListView(
-          padding: EdgeInsets.all(horizontalPadding),
+          padding: EdgeInsets.all(padding),
          children: [
-            Text('Overview', style: Theme.of(context).textTheme.headlineMedium),
+            const ConsoleLabel('Vehicle observation'),
            const SizedBox(height: 8),
-            const Text(
-              'This workspace is receive-only. A link or replay never implies a '
-              'safe, armed, or command-capable vehicle.',
+            Text(
+              'Replay session',
+              style: Theme.of(context).textTheme.headlineMedium,
+            ),
+            const SizedBox(height: 6),
+            Text(
+              'Read-only observations from the selected source.',
+              style: Theme.of(context).textTheme.bodyMedium,
            ),
            const SizedBox(height: 24),
            Wrap(
              spacing: 16,
              runSpacing: 16,
              children: [
-                _SummaryCard(
-                  title: 'Source',
+                _MetricPanel(
+                  width: panelWidth,
+                  label: 'Replay session',
                  value: state.sourceLabel,
-                  width: cardWidth,
-                  detail: state.isReplay
-                      ? 'Deterministic replay; no physical vehicle is connected.'
-                      : 'Receive-only transport.',
-                  icon: Icons.visibility_outlined,
+                  accent: Theme.of(context).colorScheme.secondary,
+                  child: const Text(
+                    'Deterministic fixture. No physical vehicle is connected.',
+                  ),
                ),
-                _SummaryCard(
-                  title: 'Vehicle identity',
-                  value: identity,
-                  detail: identityDetail,
-                  width: cardWidth,
-                  icon: Icons.memory_outlined,
+                _MetricPanel(
+                  width: panelWidth,
+                  label: 'Last reported heartbeat',
+                  value: heartbeat == null
+                      ? 'Awaiting heartbeat'
+                      : 'SYS ${heartbeat.systemId} · COMP ${heartbeat.componentId}',
+                  monoValue: true,
+                  child: _HeartbeatFacts(heartbeat: heartbeat),
                ),
-                _SummaryCard(
-                  title: 'Observed streams',
-                  value: telemetry.isEmpty ? 'None' : telemetry,
-                  detail: state.isReplay
-                      ? '${state.events.length} replayed observation(s).'
-                      : '${state.events.length} observation(s).',
-                  width: cardWidth,
-                  icon: Icons.sensors_outlined,
-                ),
-                _SummaryCard(
-                  title: 'Decoder accounting',
+                _MetricPanel(
+                  width: panelWidth,
+                  label: 'Ingress accounting',
                  value:
-                      '${state.parserDropCount} parser / ${state.semanticDropCount} semantic',
-                  detail: 'Counters are zero in the typed replay fixture.',
-                  width: cardWidth,
-                  icon: Icons.rule_outlined,
+                      '${state.parserDropCount} / ${state.semanticDropCount}',
+                  monoValue: true,
+                  child: Text(
+                    state.isReplay
+                        ? 'Parser / semantic drops. Not evaluated for typed replay.'
+                        : 'Parser / semantic drops from received frames.',
+                  ),
                ),
              ],
            ),
-            const SizedBox(height: 24),
-            GlassPanel(
+            const SizedBox(height: 16),
+            InstrumentPanel(
              child: Padding(
                padding: const EdgeInsets.all(20),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
-                    Text(
-                      'Configuration is unavailable',
-                      style: Theme.of(context).textTheme.titleLarge,
-                    ),
-                    const SizedBox(height: 8),
-                    const Text(
-                      'Kaptan firmware does not yet accept inbound configuration '
-                      'authority. Ground Suite will not show upload, commit, arm, '
-                      'or shutdown controls until the firmware exposes reviewed '
-                      'authenticated ingress and safe activation.',
+                    const ConsoleLabel('Observed data streams'),
+                    const SizedBox(height: 16),
+                    Wrap(
+                      spacing: 10,
+                      runSpacing: 10,
+                      children: [
+                        for (final kind in TelemetryKind.values)
+                          _StreamIndicator(
+                            kind: kind,
+                            observed: observedStreams.contains(kind),
+                          ),
+                      ],
                    ),
                  ],
                ),
              ),
            ),
+            const SizedBox(height: 16),
+            InstrumentPanel(
+              accent: Theme.of(context).colorScheme.outline,
+              child: const Padding(
+                padding: EdgeInsets.all(20),
+                child: _UnavailableSetup(),
+              ),
+            ),
          ],
        );
      },
@@ -107,42 +116,168 @@ class OverviewPage extends ConsumerWidget {
  }
 }

-class _SummaryCard extends StatelessWidget {
-  const _SummaryCard({
-    required this.title,
-    required this.value,
-    required this.detail,
-    required this.icon,
+class _MetricPanel extends StatelessWidget {
+  const _MetricPanel({
    required this.width,
+    required this.label,
+    required this.value,
+    required this.child,
+    this.accent,
+    this.monoValue = false,
  });

-  final String title;
-  final String value;
-  final String detail;
-  final IconData icon;
  final double width;
+  final String label;
+  final String value;
+  final Widget child;
+  final Color? accent;
+  final bool monoValue;
+
+  @override
+  Widget build(BuildContext context) => SizedBox(
+    width: width,
+    child: InstrumentPanel(
+      accent: accent,
+      child: Padding(
+        padding: const EdgeInsets.all(20),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            ConsoleLabel(label),
+            const SizedBox(height: 14),
+            Text(
+              value,
+              style: Theme.of(context).textTheme.titleLarge?.copyWith(
+                fontFamily: monoValue ? 'monospace' : null,
+              ),
+            ),
+            const SizedBox(height: 10),
+            DefaultTextStyle.merge(
+              style: Theme.of(context).textTheme.bodySmall,
+              child: child,
+            ),
+          ],
+        ),
+      ),
+    ),
+  );
+}
+
+class _HeartbeatFacts extends StatelessWidget {
+  const _HeartbeatFacts({required this.heartbeat});
+
+  final HeartbeatEvent? heartbeat;

  @override
  Widget build(BuildContext context) {
-    return SizedBox(
-      width: width,
-      child: GlassPanel(
-        child: Padding(
-          padding: const EdgeInsets.all(20),
-          child: Column(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              Icon(icon),
-              const SizedBox(height: 16),
-              Text(title, style: Theme.of(context).textTheme.labelLarge),
-              const SizedBox(height: 4),
-              Text(value, style: Theme.of(context).textTheme.titleLarge),
-              const SizedBox(height: 8),
-              Text(detail),
-            ],
+    if (heartbeat == null) {
+      return const Text('No heartbeat has been reported by this source.');
+    }
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        _FactLine(
+          label: 'Reported arm state',
+          value: heartbeat!.armed ? 'ARMED' : 'DISARMED',
+        ),
+        const SizedBox(height: 4),
+        _FactLine(
+          label: 'Reported MAV state',
+          value: heartbeat!.vehicleState.toUpperCase(),
+        ),
+      ],
+    );
+  }
+}
+
+class _FactLine extends StatelessWidget {
+  const _FactLine({required this.label, required this.value});
+
+  final String label;
+  final String value;
+
+  @override
+  Widget build(BuildContext context) => RichText(
+    text: TextSpan(
+      style: Theme.of(context).textTheme.bodySmall,
+      children: [
+        TextSpan(text: '$label: '),
+        TextSpan(
+          text: value,
+          style: const TextStyle(
+            fontFamily: 'monospace',
+            fontWeight: FontWeight.w700,
          ),
        ),
+      ],
+    ),
+  );
+}
+
+class _StreamIndicator extends StatelessWidget {
+  const _StreamIndicator({required this.kind, required this.observed});
+
+  final TelemetryKind kind;
+  final bool observed;
+
+  @override
+  Widget build(BuildContext context) {
+    final scheme = Theme.of(context).colorScheme;
+    final tone = observed ? scheme.primary : scheme.onSurfaceVariant;
+    return DecoratedBox(
+      decoration: BoxDecoration(
+        color: tone.withValues(alpha: observed ? 0.12 : 0.06),
+        border: Border.all(
+          color: tone.withValues(alpha: observed ? 0.5 : 0.32),
+        ),
+        borderRadius: BorderRadius.circular(8),
+      ),
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 9),
+        child: Wrap(
+          crossAxisAlignment: WrapCrossAlignment.center,
+          children: [
+            Icon(
+              observed
+                  ? Icons.check_circle_outline
+                  : Icons.remove_circle_outline,
+              size: 17,
+              color: tone,
+            ),
+            const SizedBox(width: 7),
+            Text(kind.label),
+            const SizedBox(width: 7),
+            Text(
+              observed ? 'Observed' : 'Not observed',
+              style: Theme.of(context).textTheme.bodySmall,
+            ),
+          ],
+        ),
      ),
    );
  }
 }
+
+class _UnavailableSetup extends StatelessWidget {
+  const _UnavailableSetup();
+
+  @override
+  Widget build(BuildContext context) => Row(
+    crossAxisAlignment: CrossAxisAlignment.start,
+    children: [
+      const Icon(Icons.lock_outline),
+      const SizedBox(width: 12),
+      Expanded(
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            const ConsoleLabel('Vehicle setup · unavailable'),
+            const SizedBox(height: 8),
+            Text('This firmware accepts no inbound MAVLink authority.'),
+          ],
+        ),
+      ),
+    ],
+  );
+}