neoagent 2.3.1-beta.57 → 2.3.1-beta.59

package/flutter_app/lib/features/onboarding/onboarding_video_step.dart

@@ -1,8 +1,12 @@
 import 'dart:io' show Platform;
+
 import 'package:flutter/foundation.dart' show kIsWeb;
 import 'package:flutter/material.dart';
+import 'package:flutter_animate/flutter_animate.dart';
 import 'package:video_player/video_player.dart';
 
+import 'onboarding_chrome.dart';
+
 class OnboardingVideoStep extends StatefulWidget {
   const OnboardingVideoStep({super.key, required this.onComplete});
 
@@ -16,7 +20,6 @@ class _OnboardingVideoStepState extends State<OnboardingVideoStep> {
   VideoPlayerController? _controller;
   bool _isInitialized = false;
   bool _hasError = false;
-
   bool _hasCompleted = false;
 
   @override
@@ -26,11 +29,8 @@ class _OnboardingVideoStepState extends State<OnboardingVideoStep> {
   }
 
   Future<void> _initVideo() async {
-    // video_player doesn't support Windows/Linux out of the box
     if (!kIsWeb && (Platform.isWindows || Platform.isLinux)) {
-      setState(() {
-        _hasError = true;
-      });
+      setState(() => _hasError = true);
       return;
     }
 
@@ -40,26 +40,22 @@ class _OnboardingVideoStepState extends State<OnboardingVideoStep> {
       );
       await _controller!.initialize();
       if (!mounted) return;
-      _controller!.addListener(_videoListener);
-      setState(() {
-        _isInitialized = true;
-      });
+      _controller!
+        ..setLooping(false)
+        ..setVolume(1)
+        ..addListener(_videoListener);
+      setState(() => _isInitialized = true);
       await _controller!.play();
-      if (!mounted) return;
-    } catch (e) {
-      if (!mounted) return;
-      // If the asset is missing or invalid (like our dummy file), just show error/skip
-      setState(() {
-        _hasError = true;
-      });
+    } catch (_) {
+      if (mounted) {
+        setState(() => _hasError = true);
+      }
     }
   }
 
   void _videoListener() {
     if (!mounted || _hasCompleted) return;
     if (_controller == null || !_controller!.value.isInitialized) return;
-    
-    // When video reaches the end
     if (_controller!.value.position >= _controller!.value.duration) {
       _hasCompleted = true;
       _controller!.removeListener(_videoListener);
@@ -76,110 +72,147 @@ class _OnboardingVideoStepState extends State<OnboardingVideoStep> {
 
   @override
   Widget build(BuildContext context) {
+    final orientation = MediaQuery.orientationOf(context);
+
     if (_hasError) {
-      return Center(
-        child: Column(
-          mainAxisSize: MainAxisSize.min,
-          children: <Widget>[
-            const Icon(Icons.error_outline, color: Colors.white54, size: 48),
-            const SizedBox(height: 16),
-            const Text(
-              'Video placeholder. Paste real mp4 over assets/branding/onboarding_intro.mp4',
-              style: TextStyle(color: Colors.white54),
-            ),
-            const SizedBox(height: 24),
-            FilledButton(
-              onPressed: widget.onComplete,
-              child: const Text('Skip Video'),
+      return Scaffold(
+        backgroundColor: Colors.black,
+        body: Center(
+          child: Padding(
+            padding: const EdgeInsets.all(32),
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: <Widget>[
+                const Icon(
+                  Icons.play_circle_outline_rounded,
+                  color: Colors.white70,
+                  size: 56,
+                ),
+                const SizedBox(height: 18),
+                const Text(
+                  'Continue to setup',
+                  style: TextStyle(
+                    color: Colors.white,
+                    fontSize: 26,
+                    fontWeight: FontWeight.w800,
+                  ),
+                ),
+                const SizedBox(height: 12),
+                Text(
+                  'The intro is not available on this device.',
+                  textAlign: TextAlign.center,
+                  style: TextStyle(
+                    color: Colors.white.withValues(alpha: 0.68),
+                    fontSize: 15,
+                    height: 1.5,
+                  ),
+                ),
+                const SizedBox(height: 28),
+                OnboardingPrimaryButton(
+                  label: 'Continue',
+                  icon: Icons.arrow_forward_rounded,
+                  onPressed: widget.onComplete,
+                ),
+              ],
             ),
-          ],
+          ),
         ),
       );
     }
 
-    if (!_isInitialized) {
-      return const Center(child: CircularProgressIndicator(color: Colors.white));
+    if (!_isInitialized || _controller == null) {
+      return const Scaffold(
+        backgroundColor: Colors.black,
+        body: Center(child: CircularProgressIndicator(color: Colors.white)),
+      );
     }
 
-    final isPortrait = MediaQuery.of(context).orientation == Orientation.portrait;
+    final portrait = orientation == Orientation.portrait;
+    if (portrait && _controller!.value.isPlaying) {
+      _controller!.pause();
+    } else if (!portrait && !_controller!.value.isPlaying) {
+      _controller!.play();
+    }
 
-    if (isPortrait) {
-      // Pause video while asking to rotate
-      if (_controller!.value.isPlaying) {
-        _controller!.pause();
-      }
-      return Center(
-        child: Padding(
-          padding: const EdgeInsets.all(32.0),
-          child: Column(
-            mainAxisSize: MainAxisSize.min,
-            children: <Widget>[
-              const Icon(Icons.screen_rotation, color: Colors.white, size: 64),
-              const SizedBox(height: 24),
-              const Text(
-                'Please rotate your device',
-                textAlign: TextAlign.center,
-                style: TextStyle(
-                  color: Colors.white,
-                  fontSize: 24,
-                  fontWeight: FontWeight.w700,
+    return Scaffold(
+      backgroundColor: Colors.black,
+      body: portrait
+          ? const _RotatePrompt()
+          : Stack(
+              fit: StackFit.expand,
+              children: <Widget>[
+                FittedBox(
+                  fit: BoxFit.cover,
+                  child: SizedBox(
+                    width: _controller!.value.size.width,
+                    height: _controller!.value.size.height,
+                    child: VideoPlayer(_controller!),
+                  ),
                 ),
-              ),
-              const SizedBox(height: 16),
-              Text(
-                'The intro video is exclusively formatted for landscape viewing.',
-                textAlign: TextAlign.center,
-                style: TextStyle(
-                  color: Colors.white.withValues(alpha: 0.7),
-                  fontSize: 16,
-                  height: 1.4,
+                Positioned.fill(
+                  child: DecoratedBox(
+                    decoration: BoxDecoration(
+                      gradient: LinearGradient(
+                        colors: <Color>[
+                          Colors.transparent,
+                          Colors.transparent,
+                          Colors.black.withValues(alpha: 0.22),
+                        ],
+                        begin: Alignment.topCenter,
+                        end: Alignment.bottomCenter,
+                      ),
+                    ),
+                  ),
                 ),
-              ),
-              const SizedBox(height: 40),
-              FilledButton.tonal(
-                onPressed: () {
-                  // If they really want to proceed without rotating
-                  widget.onComplete();
-                },
-                style: FilledButton.styleFrom(
-                  padding: const EdgeInsets.symmetric(horizontal: 32, vertical: 16),
+                Positioned(
+                  top: 28,
+                  right: 28,
+                  child: OnboardingGhostButton(
+                    label: 'Skip',
+                    onPressed: widget.onComplete,
+                  ).animate().fadeIn(duration: 280.ms, delay: 220.ms),
                 ),
-                child: const Text('Skip Video'),
-              ),
-            ],
-          ),
-        ),
-      );
-    } else {
-      // Ensure it resumes if they rotated back
-      if (!_controller!.value.isPlaying && _isInitialized) {
-        _controller!.play();
-      }
-    }
+              ],
+            ),
+    );
+  }
+}
 
-    return Stack(
-      fit: StackFit.expand,
-      children: <Widget>[
-        FittedBox(
-          fit: BoxFit.cover,
-          child: SizedBox(
-            width: _controller!.value.size.width,
-            height: _controller!.value.size.height,
-            child: VideoPlayer(_controller!),
-          ),
-        ),
-        Positioned(
-          bottom: 40,
-          right: 40,
-          child: TextButton(
-            onPressed: widget.onComplete,
-            style: TextButton.styleFrom(
-              foregroundColor: Colors.white.withValues(alpha: 0.5),
+class _RotatePrompt extends StatelessWidget {
+  const _RotatePrompt();
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Padding(
+        padding: const EdgeInsets.all(32),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: <Widget>[
+            const Icon(Icons.screen_rotation, color: Colors.white, size: 54),
+            const SizedBox(height: 18),
+            const Text(
+              'Rotate to continue',
+              textAlign: TextAlign.center,
+              style: TextStyle(
+                color: Colors.white,
+                fontSize: 24,
+                fontWeight: FontWeight.w800,
+              ),
             ),
-            child: const Text('Skip'),
-          ),
+            const SizedBox(height: 10),
+            Text(
+              'This intro is designed for full-screen landscape playback.',
+              textAlign: TextAlign.center,
+              style: TextStyle(
+                color: Colors.white.withValues(alpha: 0.7),
+                fontSize: 15,
+                height: 1.5,
+              ),
+            ),
+          ],
         ),
-      ],
+      ),
     );
   }
 }

package/flutter_app/lib/features/onboarding/onboarding_welcome_step.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_animate/flutter_animate.dart';
-import 'package:google_fonts/google_fonts.dart';
+
+import 'onboarding_chrome.dart';
 
 class OnboardingWelcomeStep extends StatelessWidget {
   const OnboardingWelcomeStep({super.key, required this.onNext});
@@ -9,156 +10,37 @@ class OnboardingWelcomeStep extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final theme = Theme.of(context);
-    final accent = theme.colorScheme.primary;
-
-    return Stack(
-      children: <Widget>[
-        // Abstract animated background
-        Positioned.fill(
-          child: CustomPaint(
-            painter: _AbstractBackgroundPainter(accentColor: accent),
-          ).animate(onPlay: (controller) => controller.repeat(reverse: true))
-           .scaleXY(begin: 1.0, end: 1.1, curve: Curves.easeInOutSine, duration: 6000.ms)
-           .shimmer(duration: 8000.ms, color: accent.withValues(alpha: 0.1)),
-        ),
-        
-        // Grid pattern overlay
-        Positioned.fill(
-          child: Opacity(
-            opacity: 0.05,
-            child: CustomPaint(
-              painter: _GridPainter(),
-            ),
-          ),
-        ),
-        
-        SafeArea(
-          child: Padding(
-            padding: const EdgeInsets.all(40),
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              mainAxisAlignment: MainAxisAlignment.center,
-              children: <Widget>[
-                const Spacer(flex: 3),
-                
-                // Welcome text
-                Text(
-                  'Welcome to\nNeoOS',
-                  style: GoogleFonts.spaceGrotesk(
-                    fontSize: 72,
-                    fontWeight: FontWeight.w800,
-                    height: 1.05,
-                    letterSpacing: -2.5,
-                    color: Colors.white,
-                  ),
-                ).animate()
-                 .fadeIn(duration: 800.ms, delay: 200.ms)
-                 .slideY(begin: 0.2, end: 0, curve: Curves.easeOutCubic),
-                 
-                const SizedBox(height: 24),
-                
-                Text(
-                  'A new era of intelligent interaction.\nPrivate, powerful, and deeply integrated into your workflow.',
-                  style: TextStyle(
-                    fontSize: 20,
-                    color: Colors.white.withValues(alpha: 0.7),
-                    height: 1.5,
-                  ),
-                ).animate()
-                 .fadeIn(duration: 800.ms, delay: 400.ms)
-                 .slideY(begin: 0.2, end: 0, curve: Curves.easeOutCubic),
-                 
-                const Spacer(flex: 4),
-                
-                // Action Button
-                Align(
-                  alignment: Alignment.bottomRight,
-                  child: Container(
-                    decoration: BoxDecoration(
-                      boxShadow: <BoxShadow>[
-                        BoxShadow(
-                          color: accent.withValues(alpha: 0.4),
-                          blurRadius: 30,
-                          offset: const Offset(0, 10),
-                        ),
-                      ],
-                    ),
-                    child: FilledButton.icon(
-                      onPressed: onNext,
-                      style: FilledButton.styleFrom(
-                        padding: const EdgeInsets.symmetric(horizontal: 32, vertical: 20),
-                        shape: RoundedRectangleBorder(
-                          borderRadius: BorderRadius.circular(24),
-                        ),
-                      ),
-                      icon: const Icon(Icons.arrow_forward_rounded),
-                      label: const Text(
-                        'Get Started',
-                        style: TextStyle(fontSize: 18, fontWeight: FontWeight.w700),
-                      ),
-                    ),
-                  ).animate()
-                   .fadeIn(duration: 800.ms, delay: 800.ms)
-                   .slideX(begin: 0.2, end: 0, curve: Curves.easeOutCubic),
-                ),
-              ],
-            ),
+    return OnboardingScaffold(
+      step: 1,
+      totalSteps: 4,
+      eyebrow: 'WELCOME',
+      title: 'Welcome to\nNeoOS',
+      description: 'Your assistant layer for capture, context, and action.',
+      footer: Row(
+        mainAxisAlignment: MainAxisAlignment.end,
+        children: <Widget>[
+          OnboardingPrimaryButton(
+                label: 'Continue',
+                icon: Icons.arrow_forward_rounded,
+                onPressed: onNext,
+              )
+              .animate()
+              .fadeIn(duration: 600.ms, delay: 600.ms)
+              .slideY(begin: 0.2),
+        ],
+      ),
+      child: Align(
+        alignment: Alignment.topLeft,
+        child: Text(
+          'Set up your workspace in a few steps and start using NeoOS immediately.',
+          style: TextStyle(
+            color: Colors.white.withValues(alpha: 0.72),
+            fontSize: 18,
+            height: 1.55,
+            fontWeight: FontWeight.w500,
           ),
-        ),
-      ],
+        ).animate().fadeIn(duration: 600.ms, delay: 380.ms),
+      ),
     );
   }
 }
-
-class _AbstractBackgroundPainter extends CustomPainter {
-  _AbstractBackgroundPainter({required this.accentColor});
-  final Color accentColor;
-
-  @override
-  void paint(Canvas canvas, Size size) {
-    final paint = Paint()
-      ..color = accentColor.withValues(alpha: 0.15)
-      ..maskFilter = const MaskFilter.blur(BlurStyle.normal, 100);
-
-    canvas.drawCircle(
-      Offset(size.width * 0.8, size.height * 0.2),
-      size.width * 0.4,
-      paint,
-    );
-
-    paint.color = const Color(0xFF6EDBFF).withValues(alpha: 0.1);
-    canvas.drawCircle(
-      Offset(size.width * 0.2, size.height * 0.8),
-      size.width * 0.5,
-      paint,
-    );
-  }
-
-  @override
-  bool shouldRepaint(covariant _AbstractBackgroundPainter oldDelegate) {
-    return oldDelegate.accentColor != accentColor;
-  }
-}
-
-class _GridPainter extends CustomPainter {
-  @override
-  void paint(Canvas canvas, Size size) {
-    final paint = Paint()
-      ..color = Colors.white
-      ..strokeWidth = 1
-      ..style = PaintingStyle.stroke;
-      
-    const double spacing = 40.0;
-    
-    for (double i = 0; i < size.width; i += spacing) {
-      canvas.drawLine(Offset(i, 0), Offset(i, size.height), paint);
-    }
-    for (double i = 0; i < size.height; i += spacing) {
-      canvas.drawLine(Offset(0, i), Offset(size.width, i), paint);
-    }
-  }
-
-  @override
-  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
-}