public/kaptan
1
Fork 0
Code Issues 24 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ground-suite): add tactical command workspace

Browse Source
This commit is contained in:
Onur Özkan committed 2026-08-13 20:04:33 +03:00
1 parent 00a3a9f908
commit 35e0fd8741
10 files changed
+5430 -869
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

ground-suite/lib/app/app.dart
+7 -9
View File
@@ -3,20 +3,18 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'app_shell.dart';
import 'theme.dart';
import 'theme_mode_controller.dart';
class GroundSuiteApp extends ConsumerWidget {
class GroundSuiteApp extends StatelessWidget {
const GroundSuiteApp({super.key});
@override
Widget build(BuildContext context, WidgetRef ref) {
return MaterialApp(
Widget build(BuildContext context) => ProviderScope(
child: MaterialApp(
title: 'Ground Suite',
debugShowCheckedModeBanner: false,
theme: groundSuiteLightTheme(),
darkTheme: groundSuiteDarkTheme(),
themeMode: ref.watch(themeModeProvider),
theme: groundSuiteDarkTheme(),
themeMode: ThemeMode.dark,
home: const AppShell(),
);
}
),
);
}
ground-suite/lib/app/app_shell.dart
+38 -408
View File
@@ -1,14 +1,14 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../features/command/presentation/tactical_command_page.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/surfaces.dart';
import 'theme_mode_controller.dart';
enum _Destination { vehicle, events }
enum _ApplicationSurface { tactical, eventStream }
/// Owns the two first-class Ground Suite surfaces. Tactical planning never
/// hides decoded diagnostics or critical accessibility announcements.
class AppShell extends ConsumerStatefulWidget {
const AppShell({super.key});
@@ -17,425 +17,55 @@ class AppShell extends ConsumerStatefulWidget {
}
class _AppShellState extends ConsumerState<AppShell> {
_Destination _destination = _Destination.vehicle;
_ApplicationSurface _surface = _ApplicationSurface.tactical;
@override
Widget build(BuildContext context) {
final state = ref.watch(observabilityControllerProvider);
const pages = <Widget>[OverviewPage(), DiagnosticsPage()];
final observation = ref.watch(observabilityControllerProvider);
return Scaffold(
body: AppCanvas(
child: SafeArea(
child: Stack(
children: [
LayoutBuilder(
builder: (context, constraints) {
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,
compact: compact,
);
return compact
? _CompactShell(
selectedIndex: _destination.index,
onSelected: _selectDestination,
workspace: workspace,
)
: _DesktopShell(
selectedIndex: _destination.index,
onSelected: _selectDestination,
workspace: workspace,
);
},
),
if (state.accessibilityAnnouncement case final announcement?)
_CriticalAnnouncement(message: announcement),
],
),
),
),
);
}
void _selectDestination(int index) {
setState(() => _destination = _Destination.values[index]);
}
}
class _DesktopShell extends StatelessWidget {
const _DesktopShell({
required this.selectedIndex,
required this.onSelected,
required this.workspace,
});
final int selectedIndex;
final ValueChanged<int> onSelected;
final Widget workspace;
@override
Widget build(BuildContext context) {
return Row(
children: [
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'),
),
],
),
),
),
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,
body: Stack(
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),
switch (_surface) {
_ApplicationSurface.tactical => TacticalCommandPage(
sourceLabel: observation.sourceLabel,
sourceStatus: observation.status.label,
onOpenEventStream: () =>
setState(() => _surface = _ApplicationSurface.eventStream),
),
_ApplicationSurface.eventStream => _EventStreamWorkspace(
onReturnToTactical: () =>
setState(() => _surface = _ApplicationSurface.tactical),
),
},
Semantics(
liveRegion: true,
label: observation.accessibilityAnnouncement ?? '',
child: const SizedBox.shrink(),
),
],
),
);
}
}
class _CompactShell extends StatelessWidget {
const _CompactShell({
required this.selectedIndex,
required this.onSelected,
required this.workspace,
});
class _EventStreamWorkspace extends StatelessWidget {
const _EventStreamWorkspace({required this.onReturnToTactical});
final int selectedIndex;
final ValueChanged<int> onSelected;
final Widget workspace;
final VoidCallback onReturnToTactical;
@override
Widget build(BuildContext context) {
return Column(
children: [
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),
),
),
Expanded(
child: _CompactDestinationButton(
selected: selectedIndex == _Destination.events.index,
icon: Icons.segment_outlined,
selectedIcon: Icons.segment,
label: 'Events',
onTap: () => onSelected(_Destination.events.index),
),
),
],
),
),
],
);
}
}
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,
),
),
],
),
Widget build(BuildContext context) => Stack(
children: [
const Positioned.fill(child: DiagnosticsPage()),
Positioned(
top: 16,
right: 20,
child: FilledButton.icon(
onPressed: onReturnToTactical,
icon: const Icon(Icons.map_outlined),
label: const Text('Tactical workspace'),
),
),
);
}
}
class _Workspace extends StatelessWidget {
const _Workspace({
required this.state,
required this.selectedIndex,
required this.pages,
required this.compact,
});
final ObservabilityState state;
final int selectedIndex;
final List<Widget> pages;
final bool compact;
@override
Widget build(BuildContext context) {
return Column(
children: [
_OperationalStatusStrip(state: state, compact: compact),
Expanded(child: pages[selectedIndex]),
],
);
}
}
class _OperationalStatusStrip extends StatelessWidget {
const _OperationalStatusStrip({required this.state, required this.compact});
final ObservabilityState state;
final bool compact;
@override
Widget build(BuildContext context) {
final heartbeat = state.lastHeartbeat;
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 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: 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 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 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 {
const _CriticalAnnouncement({required this.message});
final String message;
@override
Widget build(BuildContext context) => Semantics(
container: true,
liveRegion: true,
label: message,
child: const SizedBox.square(dimension: 1),
);
}
String _appearanceLabel(ThemeMode mode) => switch (mode) {
ThemeMode.system => 'System default',
ThemeMode.light => 'Light',
ThemeMode.dark => 'Dark',
};
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';
ground-suite/lib/app/theme.dart
+57 -104
View File
@@ -1,117 +1,70 @@
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
/// A restrained green accent, used sparingly against neutral surfaces.
const accentGreen = Color(0xff36d681);
/// Ground Suite's single visual language: a dark tactical operations deck.
const panelBackground = Color(0xD912141A);
const panelBorder = Color(0x1AFFFFFF);
const textPrimary = Color(0xFFF8FAFC);
const textSecondary = Color(0xFF94A3B8);
const accentOrange = Color(0xFFF97316);
const accentMint = Color(0xFF34D399);
const statusGreen = Color(0xFF10B981);
const statusRed = Color(0xFFEF4444);
ThemeData groundSuiteLightTheme() => _theme(
brightness: Brightness.light,
seed: const Color(0xff087a3b),
surface: const Color(0xfff3f6f3),
onSurface: const Color(0xff142019),
outline: const Color(0xffc2cec4),
);
const tacticalBlack = Color(0xFF000000);
const tacticalTransparent = Color(0x00000000);
ThemeData groundSuiteDarkTheme() => _theme(
brightness: Brightness.dark,
seed: const Color(0xff36d681),
surface: const Color(0xff080b09),
onSurface: const Color(0xffe8f0ea),
outline: const Color(0xff2a382e),
);
ThemeData groundSuiteDarkTheme() {
final base = ThemeData.dark(useMaterial3: true);
final interTextTheme = GoogleFonts.interTextTheme(
base.textTheme,
).apply(bodyColor: textPrimary, displayColor: textPrimary);
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,
onSurfaceVariant: brightness == Brightness.dark
? const Color(0xffa8b5ac)
: const Color(0xff546258),
outline: outline,
surfaceContainer: brightness == Brightness.dark
? const Color(0xff101712)
: const Color(0xffeaf0eb),
);
return ThemeData(
useMaterial3: true,
colorScheme: scheme,
scaffoldBackgroundColor: Colors.transparent,
visualDensity: VisualDensity.standard,
cardTheme: const CardThemeData(
color: Colors.transparent,
elevation: 0,
margin: EdgeInsets.zero,
return base.copyWith(
scaffoldBackgroundColor: tacticalBlack,
cardColor: panelBackground,
colorScheme: const ColorScheme.dark(
primary: accentMint,
onPrimary: tacticalBlack,
secondary: accentOrange,
onSecondary: tacticalBlack,
surface: panelBackground,
onSurface: textPrimary,
error: statusRed,
onError: textPrimary,
outline: panelBorder,
),
textTheme: ThemeData(brightness: brightness).textTheme.copyWith(
headlineMedium: TextStyle(
color: onSurface,
fontWeight: FontWeight.w700,
letterSpacing: -0.6,
),
titleLarge: TextStyle(color: onSurface, fontWeight: FontWeight.w700),
titleMedium: TextStyle(color: onSurface, fontWeight: FontWeight.w600),
bodyMedium: TextStyle(color: onSurface),
bodySmall: TextStyle(
color: brightness == Brightness.dark
? const Color(0xffa8b5ac)
: const Color(0xff546258),
textTheme: interTextTheme.copyWith(
displayLarge: interTextTheme.displayLarge?.copyWith(color: textPrimary),
displayMedium: interTextTheme.displayMedium?.copyWith(color: textPrimary),
headlineLarge: interTextTheme.headlineLarge?.copyWith(color: textPrimary),
headlineMedium: interTextTheme.headlineMedium?.copyWith(
color: textPrimary,
),
headlineSmall: interTextTheme.headlineSmall?.copyWith(color: textPrimary),
titleLarge: interTextTheme.titleLarge?.copyWith(color: textPrimary),
titleMedium: interTextTheme.titleMedium?.copyWith(color: textPrimary),
titleSmall: interTextTheme.titleSmall?.copyWith(color: textPrimary),
bodyLarge: interTextTheme.bodyLarge?.copyWith(color: textPrimary),
bodyMedium: interTextTheme.bodyMedium?.copyWith(color: textPrimary),
bodySmall: interTextTheme.bodySmall?.copyWith(color: textSecondary),
labelLarge: interTextTheme.labelLarge?.copyWith(color: textPrimary),
labelMedium: interTextTheme.labelMedium?.copyWith(color: textSecondary),
labelSmall: interTextTheme.labelSmall?.copyWith(color: textSecondary),
),
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),
),
cardTheme: const CardThemeData(color: panelBackground, elevation: 0),
dividerTheme: const DividerThemeData(color: panelBorder),
progressIndicatorTheme: ProgressIndicatorThemeData(
color: accentMint,
linearTrackColor: textSecondary.withValues(alpha: .2),
),
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),
),
backgroundColor: tacticalTransparent,
selectedColor: accentMint.withValues(alpha: .1),
side: const BorderSide(color: panelBorder),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
labelStyle: GoogleFonts.inter(color: textSecondary),
secondaryLabelStyle: GoogleFonts.inter(color: textPrimary),
),
);
}
ground-suite/lib/app/theme_mode_controller.dart
-17
View File
@@ -1,17 +0,0 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
final themeModeProvider = NotifierProvider<ThemeModeController, ThemeMode>(
ThemeModeController.new,
);
/// Holds the local display preference for the current application session.
///
/// It intentionally starts at the system preference. Persisting an operator's
/// visual preference can be added later without coupling it to vehicle state.
class ThemeModeController extends Notifier<ThemeMode> {
@override
ThemeMode build() => ThemeMode.system;
void select(ThemeMode mode) => state = mode;
}