feat: integrate TopStatusBar widget into dashboard and update theme color usage for dual-theme support

AsieduDevelopmentHub · AsieduDevelopmentHub · commit 6638578ae4dc · 2026-05-03T13:07:45.000Z
diff --git a/dashboard/lib/screens/dashboard_screen.dart b/dashboard/lib/screens/dashboard_screen.dart
@@ -8,6 +8,7 @@ import 'package:sentracore_dashboard/screens/diagnostics_screen.dart';
 import 'package:sentracore_dashboard/theme/app_theme.dart';
 import 'package:sentracore_dashboard/widgets/connection_banner.dart';
 import 'package:sentracore_dashboard/providers/settings_provider.dart';
+import 'package:sentracore_dashboard/widgets/top_status_bar.dart';
 
 /// Root shell with persistent navigation rail and page switching.
 class DashboardScreen extends StatefulWidget {
@@ -35,6 +36,7 @@ class _DashboardScreenState extends State<DashboardScreen> {
       body: Column(
         children: [
           if (!provider.connected) const ConnectionBanner(),
+          const TopStatusBar(),
           Expanded(
             child: Row(
               children: [
@@ -78,7 +80,7 @@ class _SentraNavRail extends StatelessWidget {
     final stability = provider.stability;
     final stabilityColor = stability != null
         ? AppTheme.stabilityColor(stability.state)
-        : AppTheme.textMuted;
+        : AppTheme.textMutedFor(context);
     final stabilityScore = stability?.score.toStringAsFixed(0) ?? '--';
 
     return Container(
@@ -142,7 +144,6 @@ class _SentraNavRail extends StatelessWidget {
                     color: stabilityColor,
                     fontSize: 16,
                     fontWeight: FontWeight.w800,
-                    fontFamily: 'Outfit',
                   ),
                 ),
                 Text(
@@ -237,7 +238,7 @@ class _SentraNavRail extends StatelessWidget {
           ),
           child: Icon(
             isSelected ? activeIcon : icon,
-            color: isSelected ? AppTheme.primary : AppTheme.textMuted,
+            color: isSelected ? AppTheme.primary : AppTheme.textMutedFor(context),
             size: 22,
           ),
         ),
diff --git a/dashboard/lib/theme/app_theme.dart b/dashboard/lib/theme/app_theme.dart
@@ -152,4 +152,20 @@ class AppTheme {
               ? darkTextSecondary
               : lightTextSecondary)
           .withValues(alpha: 0.85);
+
+  // ---------------------------------------------------------------------------
+  // Backward-compatible getters (legacy)
+  //
+  // Many widgets in this codebase reference `AppTheme.textMuted`, `surfaceLight`,
+  // etc. These were historically "dark defaults". Keep them to avoid churn and
+  // migrate callsites gradually to the `...For(context)` methods for true
+  // dual-theme support.
+  // ---------------------------------------------------------------------------
+  static Color get background => darkBackground;
+  static Color get surface => darkSurface;
+  static Color get surfaceLight => darkSurfaceLight;
+  static Color get border => darkBorder;
+  static Color get textPrimary => darkTextPrimary;
+  static Color get textSecondary => darkTextSecondary;
+  static Color get textMuted => darkTextSecondary;
 }
diff --git a/dashboard/lib/widgets/connection_banner.dart b/dashboard/lib/widgets/connection_banner.dart
@@ -39,7 +39,7 @@ class ConnectionBanner extends StatelessWidget {
           Text(
             'Make sure the engine is running: python -m engine.main',
             style: TextStyle(
-              color: AppTheme.textMuted,
+              color: AppTheme.textMutedFor(context),
               fontSize: 11,
             ),
           ),
diff --git a/dashboard/lib/widgets/metric_chart_card.dart b/dashboard/lib/widgets/metric_chart_card.dart
@@ -36,7 +36,7 @@ class MetricChartCard extends StatelessWidget {
                 Text(
                   title,
                   style: TextStyle(
-                    color: AppTheme.textSecondary,
+                    color: AppTheme.textSecondaryFor(context),
                     fontSize: 12,
                     fontWeight: FontWeight.w500,
                   ),
@@ -61,7 +61,7 @@ class MetricChartCard extends StatelessWidget {
                       child: Text(
                         'Collecting data...',
                         style: TextStyle(
-                          color: AppTheme.textMuted,
+                          color: AppTheme.textMutedFor(context),
                           fontSize: 11,
                         ),
                       ),
@@ -75,7 +75,9 @@ class MetricChartCard extends StatelessWidget {
                           drawVerticalLine: false,
                           horizontalInterval: maxY / 4,
                           getDrawingHorizontalLine: (value) => FlLine(
-                            color: AppTheme.border.withValues(alpha: 0.5),
+                            color: Theme.of(context)
+                                .dividerColor
+                                .withValues(alpha: 0.5),
                             strokeWidth: 0.5,
                           ),
                         ),
diff --git a/dashboard/lib/widgets/prediction_panel.dart b/dashboard/lib/widgets/prediction_panel.dart
@@ -25,7 +25,7 @@ class PredictionPanel extends StatelessWidget {
                 Text(
                   'Prediction & Forecasting',
                   style: TextStyle(
-                    color: AppTheme.textPrimary,
+                    color: AppTheme.textPrimaryFor(context),
                     fontSize: 14,
                     fontWeight: FontWeight.w600,
                   ),
@@ -34,17 +34,19 @@ class PredictionPanel extends StatelessWidget {
             ),
             Divider(height: 24, color: Theme.of(context).dividerColor),
             if (prediction == null)
-              _buildEmptyState()
+              _buildEmptyState(context)
             else ...[
-              _buildRiskScore(prediction.riskScore),
+              _buildRiskScore(context, prediction.riskScore),
               const SizedBox(height: 16),
               _buildEtaRow(
+                context,
                 'Memory Exhaustion',
                 prediction.memoryExhaustionEtaSec,
                 Icons.memory,
               ),
               const SizedBox(height: 8),
               _buildEtaRow(
+                context,
                 'CPU Saturation',
                 prediction.cpuCriticalEtaSec,
                 Icons.speed,
@@ -56,19 +58,19 @@ class PredictionPanel extends StatelessWidget {
     );
   }
 
-  Widget _buildEmptyState() {
+  Widget _buildEmptyState(BuildContext context) {
     return Center(
       child: Padding(
         padding: const EdgeInsets.all(24.0),
         child: Text(
           'Waiting for trend data...',
-          style: TextStyle(color: AppTheme.textMuted),
+          style: TextStyle(color: AppTheme.textMutedFor(context)),
         ),
       ),
     );
   }
 
-  Widget _buildRiskScore(double score) {
+  Widget _buildRiskScore(BuildContext context, double score) {
     Color color = AppTheme.stressLow;
     if (score > 60) {
       color = AppTheme.stressCritical;
@@ -83,7 +85,8 @@ class PredictionPanel extends StatelessWidget {
           mainAxisAlignment: MainAxisAlignment.spaceBetween,
           children: [
             Text('Degradation Risk',
-                style: TextStyle(color: AppTheme.textSecondary, fontSize: 12)),
+                style: TextStyle(
+                    color: AppTheme.textSecondaryFor(context), fontSize: 12)),
             Text('${score.toStringAsFixed(0)}%',
                 style: TextStyle(color: color, fontWeight: FontWeight.bold)),
           ],
@@ -93,7 +96,8 @@ class PredictionPanel extends StatelessWidget {
           borderRadius: BorderRadius.circular(4),
           child: LinearProgressIndicator(
             value: score / 100,
-            backgroundColor: AppTheme.surfaceLight,
+            backgroundColor:
+                Theme.of(context).dividerColor.withValues(alpha: 0.2),
             valueColor: AlwaysStoppedAnimation<Color>(color),
             minHeight: 6,
           ),
@@ -102,9 +106,10 @@ class PredictionPanel extends StatelessWidget {
     );
   }
 
-  Widget _buildEtaRow(String label, double? etaSec, IconData icon) {
+  Widget _buildEtaRow(
+      BuildContext context, String label, double? etaSec, IconData icon) {
     String text = 'Stable';
-    Color color = AppTheme.textMuted;
+    Color color = AppTheme.textMutedFor(context);
 
     if (etaSec != null) {
       if (etaSec < 60) {
@@ -120,15 +125,16 @@ class PredictionPanel extends StatelessWidget {
     return Container(
       padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
       decoration: BoxDecoration(
-        color: AppTheme.surfaceLight,
+        color: AppTheme.surfaceLightFor(context),
         borderRadius: BorderRadius.circular(6),
       ),
       child: Row(
         children: [
-          Icon(icon, size: 14, color: AppTheme.textSecondary),
+          Icon(icon, size: 14, color: AppTheme.textSecondaryFor(context)),
           const SizedBox(width: 8),
           Text(label,
-              style: TextStyle(color: AppTheme.textSecondary, fontSize: 13)),
+              style: TextStyle(
+                  color: AppTheme.textSecondaryFor(context), fontSize: 13)),
           const Spacer(),
           Text(
             text,
diff --git a/dashboard/lib/widgets/rca_panel.dart b/dashboard/lib/widgets/rca_panel.dart
@@ -25,7 +25,7 @@ class RcaPanel extends StatelessWidget {
                 Text(
                   'Root Cause Analysis',
                   style: TextStyle(
-                    color: AppTheme.textPrimary,
+                    color: AppTheme.textPrimaryFor(context),
                     fontSize: 14,
                     fontWeight: FontWeight.w600,
                   ),
@@ -34,21 +34,26 @@ class RcaPanel extends StatelessWidget {
             ),
             Divider(height: 24, color: Theme.of(context).dividerColor),
             if (rca == null)
-              _buildEmptyState()
+              _buildEmptyState(context)
             else ...[
-              _buildAlertBanner(provider.currentState?.alert.lastMessage ?? ''),
+              _buildAlertBanner(
+                  context, provider.currentState?.alert.lastMessage ?? ''),
               const SizedBox(height: 16),
               _buildDataRow(
-                  'Primary Bottleneck:', rca.primaryBottleneck.toUpperCase()),
+                  context,
+                  'Primary Bottleneck:',
+                  rca.primaryBottleneck.toUpperCase()),
               if (rca.suspectProcess != null) ...[
                 const SizedBox(height: 8),
-                _buildDataRow('Suspect Process:',
+                _buildDataRow(
+                    context,
+                    'Suspect Process:',
                     '${rca.suspectProcess!['name']} (PID: ${rca.suspectProcess!['pid']})'),
               ],
               if (rca.triggerEvent != null) ...[
                 const SizedBox(height: 8),
                 _buildDataRow(
-                    'Trigger Event:', rca.triggerEvent!['event_type']),
+                    context, 'Trigger Event:', rca.triggerEvent!['event_type']),
               ],
             ],
           ],
@@ -57,19 +62,19 @@ class RcaPanel extends StatelessWidget {
     );
   }
 
-  Widget _buildEmptyState() {
+  Widget _buildEmptyState(BuildContext context) {
     return Center(
       child: Padding(
         padding: const EdgeInsets.all(24.0),
         child: Text(
           'No recent alerts to analyze.',
-          style: TextStyle(color: AppTheme.textMuted),
+          style: TextStyle(color: AppTheme.textMutedFor(context)),
         ),
       ),
     );
   }
 
-  Widget _buildAlertBanner(String message) {
+  Widget _buildAlertBanner(BuildContext context, String message) {
     if (message.isEmpty) return const SizedBox.shrink();
 
     return Container(
@@ -80,26 +85,29 @@ class RcaPanel extends StatelessWidget {
       ),
       child: Text(
         message,
-        style:
-            TextStyle(color: AppTheme.textSecondary, fontSize: 13, height: 1.4),
+        style: TextStyle(
+          color: AppTheme.textSecondaryFor(context),
+          fontSize: 13,
+          height: 1.4,
+        ),
       ),
     );
   }
 
-  Widget _buildDataRow(String label, String value) {
+  Widget _buildDataRow(BuildContext context, String label, String value) {
     return Row(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
         SizedBox(
           width: 130,
           child: Text(label,
-              style: TextStyle(color: AppTheme.textSecondary, fontSize: 13)),
+              style: const TextStyle(color: Colors.grey, fontSize: 13)),
         ),
         Expanded(
           child: Text(
             value,
             style: TextStyle(
-                color: AppTheme.textPrimary,
+                color: AppTheme.textPrimaryFor(context),
                 fontSize: 13,
                 fontWeight: FontWeight.w500),
           ),
diff --git a/dashboard/lib/widgets/top_status_bar.dart b/dashboard/lib/widgets/top_status_bar.dart
@@ -11,7 +11,7 @@ class TopStatusBar extends StatelessWidget {
     final provider = context.watch<EngineProvider>();
     final state = provider.currentState;
     final stability = provider.stability;
-    final risk = state?.prediction.riskScore;
+    final risk = state?.prediction?.riskScore;
     final trend = state?.trend;
 
     final stabilityState = (stability?.state ?? 'unknown').toLowerCase();
