PHASE6-006. (feat) Child Experience Polish

Implemented:
1.1 Retry Flow UI - 'Try Again!' badge with amber styling
1.2 Speed Timer Ring - Color gradient (Amber→Yellow→Red)
1.4 Celebration Animations - Confetti on perfect/great sessions

Files:
- dash_session_screen.dart: Retry UI + confetti integration
- countdown_ring.dart: Color gradient based on progress
- celebration_overlay.dart: NEW - Confetti widget
- pubspec.yaml: Added confetti, audioplayers

Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>

Author: xronocode

.DS_Store

@@ -11,6 +11,7 @@ import '../../features/child_loop/presentation/study_tricks_screen.dart';
 import '../../features/child_loop/presentation/table_mastery_screen.dart';
 import '../../features/parent_loop/presentation/parent_dashboard_screen.dart';
 import '../../features/profile/domain/entities/app_role.dart';
+import '../../features/sync/presentation/widgets/connectivity_badge.dart';
 import '../theme/app_theme.dart';
 import 'app_dependencies.dart';
 
@@ -120,7 +121,11 @@ class _AppShellState extends State<AppShell> with WidgetsBindingObserver {
           'MathMagic ✨',
           style: GoogleFonts.fredoka(fontSize: 20, fontWeight: FontWeight.w600),
         ),
-        actions: [_EnvironmentBadge(envName: dependencies.env.name)],
+        actions: [
+          const ConnectivityBadge(),
+          const SizedBox(width: 8),
+          _EnvironmentBadge(envName: dependencies.env.name),
+        ],
       );
     }
 

.kilocode/.DS_Store

@@ -312,12 +312,13 @@ class _DashSessionScreenState extends State<DashSessionScreen>
 
         // Scrollable middle content
         Expanded(
-          child: Align(
-            alignment: const Alignment(0, -0.15),
-            child: SingleChildScrollView(
-              child: Column(
-                mainAxisSize: MainAxisSize.min,
-                children: [
+          child: ClipRect(
+            child: Align(
+              alignment: const Alignment(0, -0.15),
+              child: SingleChildScrollView(
+                child: Column(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
                   // Countdown ring (above question, hidden during retry)
                   if (!_isInRetryMode)
                     Padding(
@@ -394,6 +395,7 @@ class _DashSessionScreenState extends State<DashSessionScreen>
               ),
             ),
           ),
+          ),
         ),
 
         // Keypad

apps/.DS_Store

@@ -0,0 +1,115 @@
+import 'dart:math' as math;
+
+import 'package:confetti/confetti.dart';
+import 'package:flutter/material.dart';
+
+import '../../../../core/theme/app_theme.dart';
+
+/// Celebration overlay with confetti animation for milestones.
+///
+/// Shows confetti explosion when session is completed with good performance.
+class CelebrationOverlay extends StatefulWidget {
+  const CelebrationOverlay({
+    super.key,
+    required this.child,
+    this.celebrate = true,
+  });
+
+  final Widget child;
+  final bool celebrate;
+
+  @override
+  State<CelebrationOverlay> createState() => _CelebrationOverlayState();
+}
+
+class _CelebrationOverlayState extends State<CelebrationOverlay> {
+  late ConfettiController _confettiController;
+
+  @override
+  void initState() {
+    super.initState();
+    _confettiController = ConfettiController(
+      duration: const Duration(seconds: 3),
+    );
+
+    // Start celebration after build
+    if (widget.celebrate) {
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        _confettiController.play();
+      });
+    }
+  }
+
+  @override
+  void dispose() {
+    _confettiController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Stack(
+      children: [
+        widget.child,
+        Positioned(
+          top: 0,
+          left: 0,
+          right: 0,
+          height: 200,
+          child: Align(
+            alignment: Alignment.topCenter,
+            child: ConfettiWidget(
+              confettiController: _confettiController,
+              blastDirectionality: BlastDirectionality.explosive,
+              particleDrag: 0.05,
+              emissionFrequency: 0.05,
+              numberOfParticles: 30,
+              gravity: 0.1,
+              colors: const [
+                AppTheme.indigo,
+                AppTheme.rose,
+                AppTheme.emerald,
+                AppTheme.amber,
+                Colors.purple,
+                Colors.blue,
+              ],
+              shouldLoop: false,
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+/// Particle burst effect for instant celebration.
+class ParticleBurst extends StatelessWidget {
+  const ParticleBurst({
+    super.key,
+    required this.controller,
+  });
+
+  final ConfettiController controller;
+
+  @override
+  Widget build(BuildContext context) {
+    return Align(
+      alignment: Alignment.topCenter,
+      child: ConfettiWidget(
+        confettiController: controller,
+        blastDirectionality: BlastDirectionality.explosive,
+        particleDrag: 0.05,
+        emissionFrequency: 0.05,
+        numberOfParticles: 50,
+        gravity: 0.1,
+        colors: const [
+          AppTheme.indigo,
+          AppTheme.rose,
+          AppTheme.emerald,
+          AppTheme.amber,
+        ],
+        shouldLoop: false,
+      ),
+    );
+  }
+}

apps/mobile_flutter/lib/core/app/app_shell.dart

@@ -1,6 +1,17 @@
 import 'package:flutter/material.dart';
 
 import 'parent_dashboard_controller.dart';
+import '../../../sync/presentation/widgets/sync_queue_status.dart';
+import '../../../sync/data/outbox_sync_manager.dart';
+import '../../../sync/data/outbox_repository_impl.dart';
+import '../../../sync/data/sync_state_repository_impl.dart';
+import '../../../sync/http_remote_sync_client.dart';
+import '../../../progress/data/local_progress_repository_impl.dart';
+import '../../../child_loop/data/fact_progress_repository_impl.dart';
+import '../../../child_loop/data/quest_progress_repository_impl.dart';
+import '../../../child_loop/data/learning_repository_impl.dart';
+import '../../../assignments/data/assignment_repository_impl.dart';
+import '../../../core/data/local/database.dart';
 
 class ParentDashboardScreen extends StatefulWidget {
   const ParentDashboardScreen({
@@ -188,13 +199,51 @@ class _ParentDashboardScreenState extends State<ParentDashboardScreen> {
                 ),
               ),
             ),
+            const SizedBox(height: 16),
+            // Sync Queue Status
+            Row(
+              children: [
+                Expanded(
+                  child: Text(
+                    'Sync Status',
+                    style: Theme.of(context).textTheme.titleMedium,
+                  ),
+                ),
+                SyncQueueStatus(
+                  outboxRepository: OutboxRepositoryImpl(
+                    db: Database.instance,
+                  ),
+                ),
+              ],
+            ),
             const SizedBox(height: 8),
+            // Enhanced Manual Sync Button
             FilledButton.icon(
-              onPressed: () async {
-                await widget.controller.triggerSyncAndReload(widget.profileId);
-              },
-              icon: const Icon(Icons.sync),
-              label: const Text('Sync outbox now'),
+              onPressed: widget.controller.isSyncing
+                  ? null
+                  : () async {
+                      await widget.controller.triggerSyncAndReload(widget.profileId);
+                      if (context.mounted) {
+                        ScaffoldMessenger.of(context).showSnackBar(
+                          const SnackBar(
+                            content: Text('Sync completed!'),
+                            duration: Duration(seconds: 2),
+                          ),
+                        );
+                      }
+                    },
+              icon: widget.controller.isSyncing
+                  ? const SizedBox(
+                      width: 16,
+                      height: 16,
+                      child: CircularProgressIndicator(strokeWidth: 2),
+                    )
+                  : const Icon(Icons.sync),
+              label: Text(
+                widget.controller.isSyncing
+                    ? 'Syncing...'
+                    : 'Sync outbox now',
+              ),
             ),
             const SizedBox(height: 8),
             OutlinedButton.icon(