Fix artist hero animation grey image during transition

The artist image was turning grey during the hero animation because
ArtistDetailsScreen was deferring image loading until after the 350ms
transition completed. This caused the destination hero widget to show
an empty container instead of the image.

Fix: Pass initialImageUrl from source screens to ArtistDetailsScreen
so the hero has the same image content from the start of the animation.
The higher-res image and color extraction still happen after transition.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

AUDIT_PROGRESS.md

@@ -0,0 +1,154 @@
+# Ensemble App - Audit Progress Tracker
+
+**Audit Date:** 2025-12-08
+**Branch:** `refactor/audit-cleanup`
+**Overall Health Score:** 6.5/10 (before fixes)
+
+---
+
+## Phase 1: Quick Wins (1-2 days)
+*Low effort, immediate impact*
+
+- [x] Remove unused `cupertino_icons` dependency from `pubspec.yaml`
+- [x] Remove 12 debug `print()` statements from `main.dart` (replaced with `_logger.log()`)
+- [x] Fix empty `setState(() {})` in progress timer (`expandable_player.dart`) - converted to `ValueNotifier`
+- [x] Fix empty `setState(() {})` on text input (`search_screen.dart`) - removed unnecessary setState
+- [x] Complete or remove TODO comments:
+  - [x] `queue_screen.dart` - enhanced comment with API requirements
+  - [x] `library_screen.dart` - **IMPLEMENTED** play track functionality
+  - [x] `expandable_player.dart` - enhanced comment with API limitations
+
+---
+
+## Phase 2: Performance Fixes (2-3 days)
+*Medium effort, significant performance gains*
+
+- [x] Fix slider setState spam - use ValueNotifier pattern (`expandable_player.dart`)
+- [x] Replace volume polling with events (`volume_control.dart`) - removed polling loop
+- [x] Cache `Theme.of(context)` lookups - removed unused lookup in `search_screen.dart`
+- [x] Move `SystemChrome` out of build() (`main.dart`) - created SystemUIWrapper widget
+- [x] Replace `Image.network` with `CachedNetworkImage` (`expandable_player.dart`)
+- [x] Use `ListView.builder` instead of spread operators (`search_screen.dart`)
+
+---
+
+## Phase 3: Dead Code Cleanup (1 day)
+*Consolidate and remove unused files*
+
+- [x] Delete unused `library_screen.dart` (old version, `new_library_screen.dart` is active)
+- [x] Remove unused `PlayerStateService` (`player_state_service.dart`)
+- [x] Remove unused `Player` import from `debug_log_screen.dart`
+
+Note: `new_home_screen.dart` and `new_library_screen.dart` are NOT dead code - they are
+the active screens used in `home_screen.dart`. The naming suggests they replaced older
+versions during a refactor.
+
+---
+
+## Phase 4: State Management Refactor (3-4 days)
+*Split monolithic provider (2,106 lines)*
+
+- [x] Extract cache logic → `CacheService` (lib/services/cache_service.dart)
+- [x] Update `MusicAssistantProvider` to delegate caching to `CacheService`
+- [x] Delete unused `library_service.dart`
+- [ ] Extract connection logic → `ConnectionProvider` (skeleton created)
+- [ ] Extract library data → `LibraryProvider` (skeleton created)
+- [ ] Extract player state → `PlayerProvider` (skeleton created)
+- [ ] Remove global singleton (`navigation_provider.dart:40`)
+- [ ] Add stream filtering (`.distinct()`, `.where()`)
+
+**Note:** Phase 4 partial completion - extracted CacheService and reduced
+`music_assistant_provider.dart` from 2,106 to ~1,650 lines. Full provider
+split deferred as lower priority.
+
+---
+
+## Phase 5: Widget Decomposition (3-4 days)
+*Split mega-widgets into focused components*
+
+### expandable_player.dart (1,365 → 1,150 lines) - DONE
+- [x] Extract `DeviceSelectorBar` → `lib/widgets/player/device_selector_bar.dart`
+- [x] Extract `QueuePanel` → `lib/widgets/player/queue_panel.dart`
+- [x] Create `PlayerControls` → `lib/widgets/player/player_controls.dart` (available for future use)
+
+### login_screen.dart (968 → 843 lines) - DONE
+- [x] Extract `DebugConsole` → `lib/widgets/debug/debug_console.dart`
+- [x] Extract `DebugToggleButton` → included in debug_console.dart
+
+### album_details_screen.dart (818 lines)
+- [ ] Extract `TrackListSection`
+- [ ] Extract `PlayOnBottomSheet` (shared)
+
+### search_screen.dart (516 lines)
+- [ ] Extract `MediaItemTile`
+- [ ] Extract `SearchFilters`
+
+---
+
+## Phase 6: Code Deduplication (2-3 days)
+*Extract reusable widgets*
+
+- [ ] Create `MediaItemTile` (consolidate 3 list tile builders)
+- [ ] Create `PlayOnBottomSheet` (consolidate 4 implementations)
+- [x] Create `EmptyState` (consolidate 6+ implementations) → `lib/widgets/common/empty_state.dart`
+- [ ] Create `FilterChipRow` (consolidate 3 implementations)
+- [x] Create `DisconnectedState` (consolidate 3 implementations) → `lib/widgets/common/disconnected_state.dart`
+
+**Note:** Phase 6 partial completion - extracted EmptyState (8 usages, ~227 lines removed)
+and DisconnectedState (3 usages, ~140 lines removed). Total ~367 lines of duplicate code removed.
+
+---
+
+## Phase 7: Design System (2 days)
+*Centralize hardcoded values*
+
+- [x] Create `lib/theme/design_tokens.dart`:
+  - [x] Spacing constants (Spacing class with xxs-xxxl scale)
+  - [x] Border radius constants (Radii class)
+  - [x] Icon size constants (IconSizes class)
+  - [x] Dimension constants (Dimensions class)
+  - [x] Animation duration constants (Durations class)
+- [x] Apply tokens to extracted widgets:
+  - [x] `empty_state.dart` - Spacing tokens
+  - [x] `disconnected_state.dart` - Spacing, IconSizes, Radii tokens
+  - [x] `queue_panel.dart` - Spacing, Radii, IconSizes tokens
+  - [x] `player_controls.dart` - Spacing tokens
+  - [x] `device_selector_bar.dart` - Spacing, IconSizes tokens
+  - [x] `debug_console.dart` - Spacing, Radii, IconSizes tokens
+- [ ] Continue replacing remaining hardcoded values (~223 remaining)
+- [ ] Create `lib/constants/strings.dart` (40+ strings)
+
+---
+
+## Phase 8: Polish (Backlog)
+*Nice-to-have improvements*
+
+- [ ] Add Semantics labels for accessibility
+- [ ] Implement localization (i18n)
+- [ ] Add test coverage
+- [x] Implement WebSocket heartbeat (`music_assistant_api.dart` - ping every 30s)
+- [ ] Add responsive grid layouts for tablets
+- [x] Add completer guards to prevent double-completion (`music_assistant_api.dart`, `music_assistant_provider.dart`, `player_provider.dart`)
+
+---
+
+## Completed Summary
+
+| Phase | Status | Completed Date |
+|-------|--------|----------------|
+| Phase 1 | **COMPLETED** | 2025-12-08 |
+| Phase 2 | **COMPLETED** | 2025-12-08 |
+| Phase 3 | **COMPLETED** | 2025-12-08 |
+| Phase 4 | **PARTIAL** | 2025-12-08 |
+| Phase 5 | **PARTIAL** | 2025-12-08 |
+| Phase 6 | **PARTIAL** | 2025-12-08 |
+| Phase 7 | **PARTIAL** | 2025-12-08 |
+| Phase 8 | **PARTIAL** | 2025-12-08 |
+
+---
+
+## Notes
+
+- Original audit performed by 7 parallel sub-agents analyzing different aspects
+- Total LOC: 17,454 across 57 Dart files
+- Largest files: `music_assistant_provider.dart` (2,106), `music_assistant_api.dart` (1,948), `expandable_player.dart` (1,335)

README.md

@@ -87,6 +87,8 @@ Ensemble supports multiple authentication methods:
 - Network connectivity to your Music Assistant server
 - Android device (Android 5.0+)
 
+> **Note:** Local device playback (streaming to your phone) is not currently supported on Music Assistant beta 20+. This is due to MA replacing the built-in player with Sendspin. Support will be added once Sendspin is more stable. Remote control of other players works fine.
+
 ## About Music Assistant
 
 Ensemble is a mobile client for [Music Assistant](https://music-assistant.io/), an open-source music library manager that integrates with various music sources and streaming providers.

lib/constants/timings.dart

@@ -2,6 +2,9 @@
 class Timings {
   Timings._();
 
+  /// WebSocket heartbeat/ping interval to keep connection alive
+  static const Duration heartbeatInterval = Duration(seconds: 30);
+
   /// Player state polling interval (for selected player updates)
   static const Duration playerPollingInterval = Duration(seconds: 5);
 

lib/main.dart

@@ -3,11 +3,14 @@ import 'package:flutter/services.dart';
 import 'package:provider/provider.dart';
 import 'package:audio_service/audio_service.dart';
 import 'providers/music_assistant_provider.dart';
+import 'providers/navigation_provider.dart';
 import 'screens/home_screen.dart';
 import 'screens/login_screen.dart';
 import 'services/settings_service.dart';
 import 'services/audio/massiv_audio_handler.dart';
 import 'services/auth/auth_manager.dart';
+import 'services/debug_logger.dart';
+import 'services/music_assistant_api.dart' show MAConnectionState;
 import 'theme/theme_provider.dart';
 import 'theme/app_theme.dart';
 import 'theme/system_theme_helper.dart';
@@ -16,6 +19,9 @@ import 'widgets/global_player_overlay.dart';
 // Global audio handler instance
 late MassivAudioHandler audioHandler;
 
+// Global debug logger instance
+final _logger = DebugLogger();
+
 Future<void> main() async {
   WidgetsFlutterBinding.ensureInitialized();
 
@@ -34,7 +40,7 @@ Future<void> main() async {
       androidStopForegroundOnPause: false,  // Keep service alive when paused for background playback
     ),
   );
-  print('🎵 AudioService initialized - background playback and media notifications ENABLED');
+  _logger.log('🎵 AudioService initialized - background playback and media notifications ENABLED');
 
   // Set preferred orientations
   SystemChrome.setPreferredOrientations([
@@ -80,18 +86,30 @@ class _MusicAssistantAppState extends State<MusicAssistantApp> with WidgetsBindi
     super.dispose();
   }
 
+  @override
+  Future<bool> didPopRoute() async {
+    // Intercept back button at app level - runs BEFORE Navigator processes it
+    // If player is expanded, collapse it and consume the back gesture
+    if (GlobalPlayerOverlay.isPlayerExpanded) {
+      GlobalPlayerOverlay.collapsePlayer();
+      return true; // We handled it, don't let Navigator process it
+    }
+    // Let Navigator handle the back gesture normally
+    return super.didPopRoute();
+  }
+
   @override
   void didChangeAppLifecycleState(AppLifecycleState state) {
     super.didChangeAppLifecycleState(state);
 
     if (state == AppLifecycleState.resumed) {
       // App came back to foreground - check connection and reconnect if needed
-      print('📱 App resumed - checking WebSocket connection...');
+      _logger.log('📱 App resumed - checking WebSocket connection...');
       _musicProvider.checkAndReconnect();
     } else if (state == AppLifecycleState.paused) {
-      print('📱 App paused (backgrounded)');
+      _logger.log('📱 App paused (backgrounded)');
     } else if (state == AppLifecycleState.detached) {
-      print('📱 App detached (being destroyed)');
+      _logger.log('📱 App detached (being destroyed)');
     }
   }
 
@@ -124,33 +142,23 @@ class _MusicAssistantAppState extends State<MusicAssistantApp> with WidgetsBindi
                 darkColorScheme = brandDarkColorScheme;
               }
 
-              // Update system UI overlay style based on theme mode
+              return SystemUIWrapper(
-              final isDark = themeProvider.themeMode == ThemeMode.dark ||
-                  (themeProvider.themeMode == ThemeMode.system &&
-                      MediaQuery.platformBrightnessOf(context) == Brightness.dark);
-
-              SystemChrome.setSystemUIOverlayStyle(
-                SystemUiOverlayStyle(
-                  statusBarColor: Colors.transparent,
-                  statusBarIconBrightness: isDark ? Brightness.light : Brightness.dark,
-                  systemNavigationBarColor: isDark
-                      ? darkColorScheme.background
-                      : lightColorScheme.background,
-                  systemNavigationBarIconBrightness: isDark ? Brightness.light : Brightness.dark,
-                ),
-              );
-
-              return MaterialApp(
-                title: 'Ensemble',
-                debugShowCheckedModeBanner: false,
                 themeMode: themeProvider.themeMode,
-                theme: AppTheme.lightTheme(colorScheme: lightColorScheme),
+                lightColorScheme: lightColorScheme,
-                darkTheme: AppTheme.darkTheme(colorScheme: darkColorScheme),
+                darkColorScheme: darkColorScheme,
-                builder: (context, child) {
+                child: MaterialApp(
-                  // Wrap entire app with global player overlay
+                  navigatorKey: navigationProvider.navigatorKey,
-                  return GlobalPlayerOverlay(child: child ?? const SizedBox.shrink());
+                  title: 'Ensemble',
-                },
+                  debugShowCheckedModeBanner: false,
-                home: const AppStartup(),
+                  themeMode: themeProvider.themeMode,
+                  theme: AppTheme.lightTheme(colorScheme: lightColorScheme),
+                  darkTheme: AppTheme.darkTheme(colorScheme: darkColorScheme),
+                  builder: (context, child) {
+                    // Wrap entire app with global player overlay
+                    return GlobalPlayerOverlay(child: child ?? const SizedBox.shrink());
+                  },
+                  home: const AppStartup(),
+                ),
               );
             },
           );
@@ -160,6 +168,84 @@ class _MusicAssistantAppState extends State<MusicAssistantApp> with WidgetsBindi
   }
 }
 
+/// Widget that manages system UI overlay style updates efficiently
+/// Only updates when theme properties actually change
+class SystemUIWrapper extends StatefulWidget {
+  final Widget child;
+  final ThemeMode themeMode;
+  final ColorScheme lightColorScheme;
+  final ColorScheme darkColorScheme;
+
+  const SystemUIWrapper({
+    super.key,
+    required this.child,
+    required this.themeMode,
+    required this.lightColorScheme,
+    required this.darkColorScheme,
+  });
+
+  @override
+  State<SystemUIWrapper> createState() => _SystemUIWrapperState();
+}
+
+class _SystemUIWrapperState extends State<SystemUIWrapper> {
+  ThemeMode? _previousThemeMode;
+  Brightness? _previousPlatformBrightness;
+  ColorScheme? _previousLightColorScheme;
+  ColorScheme? _previousDarkColorScheme;
+
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+    _updateSystemUIIfNeeded();
+  }
+
+  @override
+  void didUpdateWidget(SystemUIWrapper oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    _updateSystemUIIfNeeded();
+  }
+
+  void _updateSystemUIIfNeeded() {
+    final platformBrightness = MediaQuery.platformBrightnessOf(context);
+
+    // Check if any relevant properties have changed
+    final themeChanged = _previousThemeMode != widget.themeMode;
+    final platformBrightnessChanged = _previousPlatformBrightness != platformBrightness;
+    final lightColorSchemeChanged = _previousLightColorScheme != widget.lightColorScheme;
+    final darkColorSchemeChanged = _previousDarkColorScheme != widget.darkColorScheme;
+
+    if (themeChanged || platformBrightnessChanged || lightColorSchemeChanged || darkColorSchemeChanged) {
+      // Determine if we should use dark theme
+      final isDark = widget.themeMode == ThemeMode.dark ||
+          (widget.themeMode == ThemeMode.system && platformBrightness == Brightness.dark);
+
+      // Update system UI overlay style
+      SystemChrome.setSystemUIOverlayStyle(
+        SystemUiOverlayStyle(
+          statusBarColor: Colors.transparent,
+          statusBarIconBrightness: isDark ? Brightness.light : Brightness.dark,
+          systemNavigationBarColor: isDark
+              ? widget.darkColorScheme.background
+              : widget.lightColorScheme.background,
+          systemNavigationBarIconBrightness: isDark ? Brightness.light : Brightness.dark,
+        ),
+      );
+
+      // Update cached values
+      _previousThemeMode = widget.themeMode;
+      _previousPlatformBrightness = platformBrightness;
+      _previousLightColorScheme = widget.lightColorScheme;
+      _previousDarkColorScheme = widget.darkColorScheme;
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return widget.child;
+  }
+}
+
 /// Startup widget that checks if user is logged in and auto-connects
 class AppStartup extends StatefulWidget {
   const AppStartup({super.key});
@@ -196,26 +282,26 @@ class _AppStartupState extends State<AppStartup> {
 
       final provider = context.read<MusicAssistantProvider>();
 
-      // Only attempt connection if not already connected
+      // Connection is handled by MusicAssistantProvider._initialize()
-      if (!provider.isConnected) {
+      // Just wait for it to complete or timeout
-        print('🚀 AppStartup: Auto-connecting to saved server: $serverUrl');
+      _logger.log('🚀 AppStartup: Waiting for provider auto-connection to $serverUrl');
-        try {
-          // Restore auth credentials before connecting (critical for Authelia)
-          final savedCredentials = await SettingsService.getAuthCredentials();
-          if (savedCredentials != null) {
-            print('🚀 AppStartup: Restoring saved auth credentials');
-            provider.authManager.deserializeCredentials(savedCredentials);
-          }
 
-          await provider.connectToServer(serverUrl);
+      // Give the provider time to connect (it restores credentials and connects in _initialize)
-          print('🚀 AppStartup: Auto-connection successful');
+      // Check connection state periodically
-        } catch (e) {
+      for (var i = 0; i < 20; i++) {
-          print('🚀 AppStartup: Auto-connection failed: $e');
+        await Future.delayed(const Duration(milliseconds: 250));
-          // Connection failed, but still show home screen
+        if (provider.isConnected) {
-          // User can manually reconnect from there
+          _logger.log('🚀 AppStartup: Connection established');
+          break;
         }
-      } else {
+        if (provider.connectionState == MAConnectionState.error) {
-        print('🚀 AppStartup: Already connected');
+          _logger.log('🚀 AppStartup: Connection failed with error');
+          break;
+        }
+      }
+
+      if (!provider.isConnected) {
+        _logger.log('🚀 AppStartup: Connection still pending or failed');
       }
 
       if (mounted) {

lib/models/player.dart

@@ -60,11 +60,12 @@ class Player {
     double? elapsedTime;
     double? elapsedTimeLastUpdated;
 
-    // IMPORTANT: Check top-level fields FIRST - they have the most current data
+    // Get top-level elapsed time values
-    elapsedTime = (json['elapsed_time'] as num?)?.toDouble();
+    final topLevelElapsedTime = (json['elapsed_time'] as num?)?.toDouble();
-    elapsedTimeLastUpdated = (json['elapsed_time_last_updated'] as num?)?.toDouble();
+    final topLevelLastUpdated = (json['elapsed_time_last_updated'] as num?)?.toDouble();
 
-    // Extract current_item_id from current_media
+    // Extract current_item_id and elapsed time from current_media
+    // current_media often has the more accurate position after seeks
     if (json.containsKey('current_media')) {
       final currentMedia = json['current_media'] as Map<String, dynamic>?;
       if (currentMedia != null) {
@@ -73,23 +74,26 @@ class Player {
         final currentMediaElapsedTime = (currentMedia['elapsed_time'] as num?)?.toDouble();
         final currentMediaLastUpdated = (currentMedia['elapsed_time_last_updated'] as num?)?.toDouble();
 
-        // Use current_media elapsed_time if:
+        // Prefer current_media elapsed_time when available - it reflects actual playback position
-        // 1. We don't have top-level elapsed_time, OR
+        // after seek operations, while top-level elapsed_time may lag behind
-        // 2. Top-level is 0 but current_media has a real value
+        if (currentMediaElapsedTime != null) {
-        if (elapsedTime == null || (elapsedTime == 0 && currentMediaElapsedTime != null && currentMediaElapsedTime > 0)) {
           elapsedTime = currentMediaElapsedTime;
-          elapsedTimeLastUpdated = currentMediaLastUpdated;
+          elapsedTimeLastUpdated = currentMediaLastUpdated ?? topLevelLastUpdated;
         }
       }
     }
 
+    // Fall back to top-level values if current_media didn't have elapsed time
+    elapsedTime ??= topLevelElapsedTime;
+    elapsedTimeLastUpdated ??= topLevelLastUpdated;
+
     return Player(
       playerId: json['player_id'] as String,
       name: json['name'] as String,
       provider: json['provider'] as String?,
       available: json['available'] as bool? ?? false,
       powered: json['powered'] as bool? ?? false,
-      state: json['state'] as String? ?? 'idle',
+      state: json['playback_state'] as String? ?? json['state'] as String? ?? 'idle',
       currentItemId: currentItemId,
       volumeLevel: json['volume_level'] as int?,
       volumeMuted: json['volume_muted'] as bool?,

lib/providers/connection_provider.dart

@@ -0,0 +1,239 @@
+import 'dart:async';
+import 'package:flutter/foundation.dart';
+import '../services/music_assistant_api.dart';
+import '../services/settings_service.dart';
+import '../services/debug_logger.dart';
+import '../services/error_handler.dart';
+import '../services/auth/auth_manager.dart';
+import '../services/cache_service.dart';
+
+/// Provider for managing connection state to Music Assistant server
+/// Handles WebSocket connection, authentication, and reconnection
+class ConnectionProvider with ChangeNotifier {
+  MusicAssistantAPI? _api;
+  final AuthManager _authManager = AuthManager();
+  final DebugLogger _logger = DebugLogger();
+  final CacheService _cacheService = CacheService();
+
+  MAConnectionState _connectionState = MAConnectionState.disconnected;
+  String? _serverUrl;
+  String? _error;
+
+  // Callbacks for post-connection initialization
+  VoidCallback? onConnected;
+  VoidCallback? onAuthenticated;
+  VoidCallback? onDisconnected;
+
+  MAConnectionState get connectionState => _connectionState;
+  String? get serverUrl => _serverUrl;
+  String? get error => _error;
+  bool get isConnected => _connectionState == MAConnectionState.connected ||
+                          _connectionState == MAConnectionState.authenticated;
+
+  MusicAssistantAPI? get api => _api;
+  AuthManager get authManager => _authManager;
+  CacheService get cacheService => _cacheService;
+
+  ConnectionProvider() {
+    _initialize();
+  }
+
+  Future<void> _initialize() async {
+    _serverUrl = await SettingsService.getServerUrl();
+    if (_serverUrl != null && _serverUrl!.isNotEmpty) {
+      await _restoreAuthCredentials();
+      await connectToServer(_serverUrl!);
+    }
+  }
+
+  /// Restore auth credentials from persistent storage
+  Future<void> _restoreAuthCredentials() async {
+    final savedCredentials = await SettingsService.getAuthCredentials();
+    if (savedCredentials != null) {
+      _logger.log('🔐 Restoring saved auth credentials...');
+      _authManager.deserializeCredentials(savedCredentials);
+      _logger.log('🔐 Auth credentials restored: ${_authManager.currentStrategy?.name ?? "none"}');
+    } else {
+      _logger.log('🔐 No saved auth credentials found');
+    }
+  }
+
+  /// Handle Music Assistant native authentication after WebSocket connection
+  Future<bool> handleMaAuthentication() async {
+    if (_api == null) return false;
+
+    try {
+      // First, try stored MA token
+      final storedToken = await SettingsService.getMaAuthToken();
+      if (storedToken != null) {
+        _logger.log('🔐 Trying stored MA token...');
+        final success = await _api!.authenticateWithToken(storedToken);
+        if (success) {
+          _logger.log('✅ MA authentication with stored token successful');
+          await _fetchAndSetUserProfileName();
+          return true;
+        }
+        _logger.log('⚠️ Stored MA token invalid, clearing...');
+        await SettingsService.clearMaAuthToken();
+      }
+
+      // No valid token - try stored credentials
+      final username = await SettingsService.getUsername();
+      final password = await SettingsService.getPassword();
+
+      if (username != null && password != null && username.isNotEmpty && password.isNotEmpty) {
+        _logger.log('🔐 Trying stored credentials...');
+        final accessToken = await _api!.loginWithCredentials(username, password);
+
+        if (accessToken != null) {
+          _logger.log('✅ MA login with stored credentials successful');
+
+          final longLivedToken = await _api!.createLongLivedToken();
+          if (longLivedToken != null) {
+            await SettingsService.setMaAuthToken(longLivedToken);
+            _logger.log('✅ Saved new long-lived MA token');
+          } else {
+            await SettingsService.setMaAuthToken(accessToken);
+          }
+
+          await _fetchAndSetUserProfileName();
+          return true;
+        }
+      }
+
+      _logger.log('❌ MA authentication failed - no valid token or credentials');
+      return false;
+    } catch (e) {
+      _logger.log('❌ MA authentication error: $e');
+      return false;
+    }
+  }
+
+  /// Fetch user profile from MA and set owner name
+  Future<void> _fetchAndSetUserProfileName() async {
+    if (_api == null) return;
+
+    try {
+      final userInfo = await _api!.getCurrentUserInfo();
+      if (userInfo == null) {
+        _logger.log('⚠️ Could not fetch user profile');
+        return;
+      }
+
+      final displayName = userInfo['display_name'] as String?;
+      final username = userInfo['username'] as String?;
+
+      _logger.log('🔍 Profile data: display_name="$displayName", username="$username"');
+
+      final profileName = (displayName != null && displayName.isNotEmpty)
+          ? displayName
+          : username;
+
+      if (profileName != null && profileName.isNotEmpty) {
+        await SettingsService.setOwnerName(profileName);
+        _logger.log('✅ Set owner name from MA profile: $profileName');
+      } else {
+        _logger.log('⚠️ No valid name in profile');
+      }
+    } catch (e) {
+      _logger.log('⚠️ Could not fetch user profile (non-fatal): $e');
+    }
+  }
+
+  Future<void> connectToServer(String serverUrl) async {
+    try {
+      _error = null;
+      _serverUrl = serverUrl;
+      await SettingsService.setServerUrl(serverUrl);
+
+      // Disconnect existing connection
+      await _api?.disconnect();
+
+      _api = MusicAssistantAPI(serverUrl, _authManager);
+
+      // Listen to connection state changes
+      _api!.connectionState.listen(
+        (state) async {
+          _connectionState = state;
+          notifyListeners();
+
+          if (state == MAConnectionState.connected) {
+            _logger.log('🔗 WebSocket connected to MA server');
+
+            if (_api!.authRequired && !_api!.isAuthenticated) {
+              _logger.log('🔐 MA auth required, attempting authentication...');
+              final authenticated = await handleMaAuthentication();
+              if (!authenticated) {
+                _logger.log('❌ MA authentication failed - stopping connection flow');
+                _error = 'Authentication required. Please log in again.';
+                notifyListeners();
+                return;
+              }
+              return;
+            }
+
+            // No auth required - notify connected
+            onConnected?.call();
+          } else if (state == MAConnectionState.authenticated) {
+            _logger.log('✅ MA authentication successful');
+            onAuthenticated?.call();
+          } else if (state == MAConnectionState.disconnected) {
+            _cacheService.clearAll();
+            onDisconnected?.call();
+          }
+        },
+        onError: (error) {
+          _logger.log('Connection state stream error: $error');
+          _connectionState = MAConnectionState.error;
+          notifyListeners();
+        },
+      );
+
+      await _api!.connect();
+      notifyListeners();
+    } catch (e) {
+      final errorInfo = ErrorHandler.handleError(e, context: 'Connect to server');
+      _error = errorInfo.userMessage;
+      _connectionState = MAConnectionState.error;
+      _logger.log('Connection error: ${errorInfo.technicalMessage}');
+      notifyListeners();
+      rethrow;
+    }
+  }
+
+  Future<void> disconnect() async {
+    await _api?.disconnect();
+    _connectionState = MAConnectionState.disconnected;
+    _cacheService.clearAll();
+    notifyListeners();
+  }
+
+  /// Check connection and reconnect if needed (called when app resumes)
+  Future<void> checkAndReconnect() async {
+    _logger.log('🔄 checkAndReconnect called - state: $_connectionState');
+
+    if (_serverUrl == null) {
+      _logger.log('🔄 No server URL saved, skipping reconnect');
+      return;
+    }
+
+    if (_connectionState != MAConnectionState.connected &&
+        _connectionState != MAConnectionState.authenticated) {
+      _logger.log('🔄 Not connected, attempting reconnect to $_serverUrl');
+      try {
+        await connectToServer(_serverUrl!);
+        _logger.log('🔄 Reconnection successful');
+      } catch (e) {
+        _logger.log('🔄 Reconnection failed: $e');
+      }
+    } else {
+      _logger.log('🔄 Already connected, connection verified');
+    }
+  }
+
+  @override
+  void dispose() {
+    _api?.dispose();
+    super.dispose();
+  }
+}

lib/providers/library_provider.dart

@@ -0,0 +1,383 @@
+import 'package:flutter/foundation.dart';
+import '../models/media_item.dart';
+import '../services/music_assistant_api.dart';
+import '../services/debug_logger.dart';
+import '../services/error_handler.dart';
+import '../services/cache_service.dart';
+import '../constants/timings.dart';
+
+/// Provider for managing library data (artists, albums, tracks, playlists)
+class LibraryProvider with ChangeNotifier {
+  final DebugLogger _logger = DebugLogger();
+  final CacheService _cacheService;
+
+  MusicAssistantAPI? _api;
+
+  List<Artist> _artists = [];
+  List<Album> _albums = [];
+  List<Track> _tracks = [];
+  bool _isLoading = false;
+  String? _error;
+
+  // Search state persistence
+  String _lastSearchQuery = '';
+  Map<String, List<MediaItem>> _lastSearchResults = {
+    'artists': [],
+    'albums': [],
+    'tracks': [],
+  };
+
+  // Getters
+  List<Artist> get artists => _artists;
+  List<Album> get albums => _albums;
+  List<Track> get tracks => _tracks;
+  bool get isLoading => _isLoading;
+  String? get error => _error;
+  String get lastSearchQuery => _lastSearchQuery;
+  Map<String, List<MediaItem>> get lastSearchResults => _lastSearchResults;
+
+  LibraryProvider(this._cacheService);
+
+  /// Initialize with API reference after connection
+  void initialize(MusicAssistantAPI api) {
+    _api = api;
+  }
+
+  void saveSearchState(String query, Map<String, List<MediaItem>> results) {
+    _lastSearchQuery = query;
+    _lastSearchResults = results;
+  }
+
+  void clearSearchState() {
+    _lastSearchQuery = '';
+    _lastSearchResults = {
+      'artists': [],
+      'albums': [],
+      'tracks': [],
+    };
+  }
+
+  // ============================================================================
+  // HOME SCREEN DATA
+  // ============================================================================
+
+  /// Get recently played albums with caching
+  Future<List<Album>> getRecentAlbumsWithCache({bool forceRefresh = false}) async {
+    if (_cacheService.isRecentAlbumsCacheValid(forceRefresh: forceRefresh)) {
+      _logger.log('📦 Using cached recent albums');
+      return _cacheService.getCachedRecentAlbums()!;
+    }
+
+    if (_api == null) return _cacheService.getCachedRecentAlbums() ?? [];
+
+    try {
+      _logger.log('🔄 Fetching fresh recent albums...');
+      final albums = await _api!.getRecentAlbums(limit: LibraryConstants.defaultRecentLimit);
+      _cacheService.setCachedRecentAlbums(albums);
+      return albums;
+    } catch (e) {
+      _logger.log('❌ Failed to fetch recent albums: $e');
+      return _cacheService.getCachedRecentAlbums() ?? [];
+    }
+  }
+
+  /// Get discover artists (random) with caching
+  Future<List<Artist>> getDiscoverArtistsWithCache({bool forceRefresh = false}) async {
+    if (_cacheService.isDiscoverArtistsCacheValid(forceRefresh: forceRefresh)) {
+      _logger.log('📦 Using cached discover artists');
+      return _cacheService.getCachedDiscoverArtists()!;
+    }
+
+    if (_api == null) return _cacheService.getCachedDiscoverArtists() ?? [];
+
+    try {
+      _logger.log('🔄 Fetching fresh discover artists...');
+      final artists = await _api!.getRandomArtists(limit: LibraryConstants.defaultRecentLimit);
+      _cacheService.setCachedDiscoverArtists(artists);
+      return artists;
+    } catch (e) {
+      _logger.log('❌ Failed to fetch discover artists: $e');
+      return _cacheService.getCachedDiscoverArtists() ?? [];
+    }
+  }
+
+  /// Get discover albums (random) with caching
+  Future<List<Album>> getDiscoverAlbumsWithCache({bool forceRefresh = false}) async {
+    if (_cacheService.isDiscoverAlbumsCacheValid(forceRefresh: forceRefresh)) {
+      _logger.log('📦 Using cached discover albums');
+      return _cacheService.getCachedDiscoverAlbums()!;
+    }
+
+    if (_api == null) return _cacheService.getCachedDiscoverAlbums() ?? [];
+
+    try {
+      _logger.log('🔄 Fetching fresh discover albums...');
+      final albums = await _api!.getRandomAlbums(limit: LibraryConstants.defaultRecentLimit);
+      _cacheService.setCachedDiscoverAlbums(albums);
+      return albums;
+    } catch (e) {
+      _logger.log('❌ Failed to fetch discover albums: $e');
+      return _cacheService.getCachedDiscoverAlbums() ?? [];
+    }
+  }
+
+  /// Invalidate home screen cache (call on pull-to-refresh)
+  void invalidateHomeCache() {
+    _cacheService.invalidateHomeCache();
+  }
+
+  // ============================================================================
+  // LIBRARY DATA
+  // ============================================================================
+
+  Future<void> loadLibrary() async {
+    if (_api == null) return;
+
+    try {
+      _isLoading = true;
+      _error = null;
+      notifyListeners();
+
+      final results = await Future.wait([
+        _api!.getArtists(limit: LibraryConstants.maxLibraryItems),
+        _api!.getAlbums(limit: LibraryConstants.maxLibraryItems),
+        _api!.getTracks(limit: LibraryConstants.maxLibraryItems),
+      ]);
+
+      _artists = results[0] as List<Artist>;
+      _albums = results[1] as List<Album>;
+      _tracks = results[2] as List<Track>;
+
+      _isLoading = false;
+      notifyListeners();
+    } catch (e) {
+      final errorInfo = ErrorHandler.handleError(e, context: 'Load library');
+      _error = errorInfo.userMessage;
+      _isLoading = false;
+      notifyListeners();
+    }
+  }
+
+  Future<void> loadArtists({int? limit, int? offset, String? search}) async {
+    if (_api == null) return;
+
+    try {
+      _isLoading = true;
+      _error = null;
+      notifyListeners();
+
+      _artists = await _api!.getArtists(
+        limit: limit ?? LibraryConstants.maxLibraryItems,
+        offset: offset,
+        search: search,
+      );
+
+      _isLoading = false;
+      notifyListeners();
+    } catch (e) {
+      final errorInfo = ErrorHandler.handleError(e, context: 'Load artists');
+      _error = errorInfo.userMessage;
+      _isLoading = false;
+      notifyListeners();
+    }
+  }
+
+  Future<void> loadAlbums({int? limit, int? offset, String? search, String? artistId}) async {
+    if (_api == null) return;
+
+    try {
+      _isLoading = true;
+      _error = null;
+      notifyListeners();
+
+      _albums = await _api!.getAlbums(
+        limit: limit ?? LibraryConstants.maxLibraryItems,
+        offset: offset,
+        search: search,
+        artistId: artistId,
+      );
+
+      _isLoading = false;
+      notifyListeners();
+    } catch (e) {
+      final errorInfo = ErrorHandler.handleError(e, context: 'Load albums');
+      _error = errorInfo.userMessage;
+      _isLoading = false;
+      notifyListeners();
+    }
+  }
+
+  // ============================================================================
+  // DETAIL SCREEN DATA
+  // ============================================================================
+
+  /// Get album tracks with caching
+  Future<List<Track>> getAlbumTracksWithCache(String provider, String itemId, {bool forceRefresh = false}) async {
+    final cacheKey = '${provider}_$itemId';
+
+    if (_cacheService.isAlbumTracksCacheValid(cacheKey, forceRefresh: forceRefresh)) {
+      _logger.log('📦 Using cached album tracks for $cacheKey');
+      return _cacheService.getCachedAlbumTracks(cacheKey)!;
+    }
+
+    if (_api == null) return _cacheService.getCachedAlbumTracks(cacheKey) ?? [];
+
+    try {
+      _logger.log('🔄 Fetching fresh album tracks for $cacheKey...');
+      final tracks = await _api!.getAlbumTracks(provider, itemId);
+      _cacheService.setCachedAlbumTracks(cacheKey, tracks);
+      return tracks;
+    } catch (e) {
+      _logger.log('❌ Failed to fetch album tracks: $e');
+      return _cacheService.getCachedAlbumTracks(cacheKey) ?? [];
+    }
+  }
+
+  /// Get playlist tracks with caching
+  Future<List<Track>> getPlaylistTracksWithCache(String provider, String itemId, {bool forceRefresh = false}) async {
+    final cacheKey = '${provider}_$itemId';
+
+    if (_cacheService.isPlaylistTracksCacheValid(cacheKey, forceRefresh: forceRefresh)) {
+      _logger.log('📦 Using cached playlist tracks for $cacheKey');
+      return _cacheService.getCachedPlaylistTracks(cacheKey)!;
+    }
+
+    if (_api == null) return _cacheService.getCachedPlaylistTracks(cacheKey) ?? [];
+
+    try {
+      _logger.log('🔄 Fetching fresh playlist tracks for $cacheKey...');
+      final tracks = await _api!.getPlaylistTracks(provider, itemId);
+      _cacheService.setCachedPlaylistTracks(cacheKey, tracks);
+      return tracks;
+    } catch (e) {
+      _logger.log('❌ Failed to fetch playlist tracks: $e');
+      return _cacheService.getCachedPlaylistTracks(cacheKey) ?? [];
+    }
+  }
+
+  /// Get artist albums with caching
+  Future<List<Album>> getArtistAlbumsWithCache(String artistName, {bool forceRefresh = false}) async {
+    final cacheKey = artistName.toLowerCase();
+
+    if (_cacheService.isArtistAlbumsCacheValid(cacheKey, forceRefresh: forceRefresh)) {
+      _logger.log('📦 Using cached artist albums for "$artistName"');
+      return _cacheService.getCachedArtistAlbums(cacheKey)!;
+    }
+
+    if (_api == null) return _cacheService.getCachedArtistAlbums(cacheKey) ?? [];
+
+    try {
+      _logger.log('🔄 Fetching albums for artist "$artistName"...');
+
+      final libraryAlbums = await _api!.getAlbums();
+      final artistAlbums = libraryAlbums.where((album) {
+        final albumArtists = album.artists;
+        if (albumArtists == null || albumArtists.isEmpty) return false;
+        return albumArtists.any((a) => a.name.toLowerCase() == artistName.toLowerCase());
+      }).toList();
+
+      final searchResults = await _api!.search(artistName);
+      final searchAlbums = searchResults['albums'] as List<MediaItem>? ?? [];
+      final providerAlbums = searchAlbums.whereType<Album>().where((album) {
+        final albumArtists = album.artists;
+        if (albumArtists == null || albumArtists.isEmpty) return false;
+        return albumArtists.any((a) => a.name.toLowerCase() == artistName.toLowerCase());
+      }).toList();
+
+      final allAlbums = <Album>[];
+      final seenNames = <String>{};
+
+      for (final album in [...artistAlbums, ...providerAlbums]) {
+        final key = album.name.toLowerCase();
+        if (!seenNames.contains(key)) {
+          seenNames.add(key);
+          allAlbums.add(album);
+        }
+      }
+
+      _cacheService.setCachedArtistAlbums(cacheKey, allAlbums);
+      return allAlbums;
+    } catch (e) {
+      _logger.log('❌ Failed to fetch artist albums: $e');
+      return _cacheService.getCachedArtistAlbums(cacheKey) ?? [];
+    }
+  }
+
+  /// Invalidate album tracks cache
+  void invalidateAlbumTracksCache(String albumId) {
+    _cacheService.invalidateAlbumTracksCache(albumId);
+  }
+
+  /// Invalidate playlist tracks cache
+  void invalidatePlaylistTracksCache(String playlistId) {
+    _cacheService.invalidatePlaylistTracksCache(playlistId);
+  }
+
+  // ============================================================================
+  // SEARCH
+  // ============================================================================
+
+  /// Search with caching
+  Future<Map<String, List<MediaItem>>> searchWithCache(String query, {bool forceRefresh = false}) async {
+    final cacheKey = query.toLowerCase().trim();
+    if (cacheKey.isEmpty) return {'artists': [], 'albums': [], 'tracks': []};
+
+    if (_cacheService.isSearchCacheValid(cacheKey, forceRefresh: forceRefresh)) {
+      _logger.log('📦 Using cached search results for "$query"');
+      return _cacheService.getCachedSearchResults(cacheKey)!;
+    }
+
+    if (_api == null) {
+      return _cacheService.getCachedSearchResults(cacheKey) ?? {'artists': [], 'albums': [], 'tracks': []};
+    }
+
+    try {
+      _logger.log('🔄 Searching for "$query"...');
+      final results = await _api!.search(query);
+
+      final cachedResults = <String, List<MediaItem>>{
+        'artists': results['artists'] ?? [],
+        'albums': results['albums'] ?? [],
+        'tracks': results['tracks'] ?? [],
+      };
+
+      _cacheService.setCachedSearchResults(cacheKey, cachedResults);
+      return cachedResults;
+    } catch (e) {
+      _logger.log('❌ Search failed: $e');
+      return _cacheService.getCachedSearchResults(cacheKey) ?? {'artists': [], 'albums': [], 'tracks': []};
+    }
+  }
+
+  Future<Map<String, List<MediaItem>>> search(String query, {bool libraryOnly = false}) async {
+    if (_api == null) return {'artists': [], 'albums': [], 'tracks': []};
+
+    try {
+      return await _api!.search(query, libraryOnly: libraryOnly);
+    } catch (e) {
+      ErrorHandler.logError('Search', e);
+      return {'artists': [], 'albums': [], 'tracks': []};
+    }
+  }
+
+  Future<List<Track>> getAlbumTracks(String provider, String itemId) async {
+    if (_api == null) return [];
+
+    try {
+      return await _api!.getAlbumTracks(provider, itemId);
+    } catch (e) {
+      ErrorHandler.logError('Get album tracks', e);
+      return [];
+    }
+  }
+
+  void clearState() {
+    _artists = [];
+    _albums = [];
+    _tracks = [];
+    _isLoading = false;
+    _error = null;
+    clearSearchState();
+    notifyListeners();
+  }
+}

lib/providers/player_provider.dart

@@ -0,0 +1,953 @@
+import 'dart:async';
+import 'package:flutter/foundation.dart';
+import 'package:flutter/painting.dart';
+import '../models/media_item.dart';
+import '../models/player.dart';
+import '../services/music_assistant_api.dart';
+import '../services/settings_service.dart';
+import '../services/debug_logger.dart';
+import '../services/error_handler.dart';
+import '../services/local_player_service.dart';
+import '../services/auth/auth_manager.dart';
+import '../services/device_id_service.dart';
+import '../services/cache_service.dart';
+import '../constants/timings.dart';
+import '../main.dart' show audioHandler;
+
+/// Provider for managing player state, selection, and controls
+class PlayerProvider with ChangeNotifier {
+  final DebugLogger _logger = DebugLogger();
+  late final LocalPlayerService _localPlayer;
+  final CacheService _cacheService;
+
+  // Dependencies injected from parent provider
+  MusicAssistantAPI? _api;
+  AuthManager? _authManager;
+  String? _serverUrl;
+
+  // Player selection
+  Player? _selectedPlayer;
+  List<Player> _availablePlayers = [];
+  Track? _currentTrack;
+  Timer? _playerStateTimer;
+  Timer? _adjacentPlayerCacheTimer;
+
+  // Local Playback
+  bool _isLocalPlayerPowered = true;
+  StreamSubscription? _localPlayerEventSubscription;
+  StreamSubscription? _playerUpdatedEventSubscription;
+  Timer? _localPlayerStateReportTimer;
+
+  // Pending metadata from player_updated events
+  TrackMetadata? _pendingTrackMetadata;
+  TrackMetadata? _currentNotificationMetadata;
+
+  // Registration guard
+  Completer<void>? _registrationInProgress;
+
+  // Getters
+  Player? get selectedPlayer => _selectedPlayer;
+  List<Player> get availablePlayers => _availablePlayers;
+  Track? get currentTrack => _currentTrack;
+  bool get isLocalPlayerPowered => _isLocalPlayerPowered;
+
+  /// Get cached track for a player (used for smooth swipe transitions)
+  Track? getCachedTrackForPlayer(String playerId) => _cacheService.getCachedTrackForPlayer(playerId);
+
+  PlayerProvider(this._cacheService, AuthManager authManager) {
+    _authManager = authManager;
+    _localPlayer = LocalPlayerService(authManager);
+  }
+
+  /// Initialize with API reference after connection
+  void initialize(MusicAssistantAPI api, String serverUrl) {
+    _api = api;
+    _serverUrl = serverUrl;
+  }
+
+  /// Set up event listeners after connection
+  Future<void> setupEventListeners() async {
+    if (_api == null) return;
+
+    // Listen to built-in player events
+    _localPlayerEventSubscription?.cancel();
+    _localPlayerEventSubscription = _api!.builtinPlayerEvents.listen(
+      _handleLocalPlayerEvent,
+      onError: (error) {
+        _logger.log('Builtin player event stream error: $error');
+      },
+    );
+
+    // Listen to player_updated events
+    _playerUpdatedEventSubscription?.cancel();
+    _playerUpdatedEventSubscription = _api!.playerUpdatedEvents.listen(
+      _handlePlayerUpdatedEvent,
+      onError: (error) {
+        _logger.log('Player updated event stream error: $error');
+      },
+    );
+  }
+
+  /// Initialize local playback
+  Future<void> initializeLocalPlayback() async {
+    await _localPlayer.initialize();
+    _isLocalPlayerPowered = true;
+
+    // Wire up skip button callbacks
+    audioHandler.onSkipToNext = () {
+      _logger.log('🎵 Notification: Skip to next pressed');
+      nextTrackSelectedPlayer();
+    };
+    audioHandler.onSkipToPrevious = () {
+      _logger.log('🎵 Notification: Skip to previous pressed');
+      previousTrackSelectedPlayer();
+    };
+
+    if (_api != null) {
+      await registerLocalPlayer();
+    }
+  }
+
+  /// Try to adopt an existing ghost player
+  Future<bool> tryAdoptGhostPlayer() async {
+    if (_api == null) return false;
+
+    try {
+      final isFresh = await DeviceIdService.isFreshInstallation();
+      if (!isFresh) {
+        _logger.log('👻 Not a fresh install, skipping ghost adoption');
+        return false;
+      }
+
+      final ownerName = await SettingsService.getOwnerName();
+      if (ownerName == null || ownerName.isEmpty) {
+        _logger.log('👻 No owner name set, cannot adopt ghost player');
+        return false;
+      }
+
+      _logger.log('👻 Fresh install detected, searching for adoptable ghost for "$ownerName"...');
+      final adoptableId = await _api!.findAdoptableGhostPlayer(ownerName);
+      if (adoptableId == null) {
+        _logger.log('👻 No matching ghost player found - will generate new ID');
+        return false;
+      }
+
+      _logger.log('👻 Found adoptable ghost: $adoptableId');
+      await DeviceIdService.adoptPlayerId(adoptableId);
+
+      _logger.log('✅ Successfully adopted ghost player');
+      return true;
+    } catch (e) {
+      _logger.log('⚠️ Ghost adoption failed (non-fatal): $e');
+      return false;
+    }
+  }
+
+  /// Register local player with MA server
+  Future<void> registerLocalPlayer() async {
+    if (_api == null) return;
+
+    if (_registrationInProgress != null) {
+      _logger.log('⏳ Registration already in progress, waiting...');
+      return _registrationInProgress!.future;
+    }
+
+    _registrationInProgress = Completer<void>();
+
+    try {
+      final playerId = await DeviceIdService.getOrCreateDevicePlayerId();
+      _logger.log('🆔 Using player ID: $playerId');
+
+      await SettingsService.setBuiltinPlayerId(playerId);
+      final name = await SettingsService.getLocalPlayerName();
+
+      final existingPlayers = await _api!.getPlayers();
+      final existingPlayer = existingPlayers.where((p) => p.playerId == playerId).firstOrNull;
+
+      if (existingPlayer != null && existingPlayer.available) {
+        _logger.log('✅ Player already registered and available: $playerId');
+        _startReportingLocalPlayerState();
+        if (_registrationInProgress != null && !_registrationInProgress!.isCompleted) {
+          _registrationInProgress!.complete();
+        }
+        _registrationInProgress = null;
+        return;
+      } else if (existingPlayer != null && !existingPlayer.available) {
+        _logger.log('⚠️ Player exists but unavailable (stale), re-registering: $playerId');
+      } else {
+        _logger.log('🆔 Player not found in MA, registering as new');
+      }
+
+      _logger.log('🎵 Registering player with MA: id=$playerId, name=$name');
+      await _api!.registerBuiltinPlayer(playerId, name);
+
+      _logger.log('✅ Player registration complete');
+      _startReportingLocalPlayerState();
+
+      if (_registrationInProgress != null && !_registrationInProgress!.isCompleted) {
+        _registrationInProgress!.complete();
+      }
+      _registrationInProgress = null;
+    } catch (e) {
+      _logger.log('❌ CRITICAL: Player registration failed: $e');
+      if (_registrationInProgress != null && !_registrationInProgress!.isCompleted) {
+        _registrationInProgress!.completeError(e);
+      }
+      _registrationInProgress = null;
+      rethrow;
+    }
+  }
+
+  void _startReportingLocalPlayerState() {
+    _localPlayerStateReportTimer?.cancel();
+    _localPlayerStateReportTimer = Timer.periodic(Timings.localPlayerReportInterval, (_) async {
+      try {
+        await _reportLocalPlayerState();
+      } catch (e) {
+        _logger.log('Error reporting local player state (will retry): $e');
+      }
+    });
+  }
+
+  Future<void> _reportLocalPlayerState() async {
+    if (_api == null) return;
+
+    final playerId = await SettingsService.getBuiltinPlayerId();
+    if (playerId == null) return;
+
+    final isPlaying = _localPlayer.isPlaying;
+    final position = _localPlayer.position.inSeconds;
+    final volume = (_localPlayer.volume * 100).round();
+    final isPaused = !isPlaying && position > 0;
+
+    await _api!.updateBuiltinPlayerState(
+      playerId,
+      powered: _isLocalPlayerPowered,
+      playing: isPlaying,
+      paused: isPaused,
+      position: position,
+      volume: volume,
+      muted: _localPlayer.volume == 0.0,
+    );
+  }
+
+  Future<void> _handleLocalPlayerEvent(Map<String, dynamic> event) async {
+    _logger.log('📥 Local player event received: ${event['type'] ?? event['command']}');
+
+    try {
+      final eventPlayerId = event['player_id'] as String?;
+      final myPlayerId = await SettingsService.getBuiltinPlayerId();
+
+      if (eventPlayerId != null && myPlayerId != null && eventPlayerId != myPlayerId) {
+        _logger.log('🚫 Ignoring event for different player: $eventPlayerId');
+        return;
+      }
+
+      final command = (event['type'] as String?) ?? (event['command'] as String?);
+
+      switch (command) {
+        case 'play_media':
+          final urlPath = event['media_url'] as String? ?? event['url'] as String?;
+
+          if (urlPath != null && _serverUrl != null) {
+            String fullUrl;
+            if (urlPath.startsWith('http')) {
+              fullUrl = urlPath;
+            } else {
+              var baseUrl = _serverUrl!;
+              if (!baseUrl.startsWith('http://') && !baseUrl.startsWith('https://')) {
+                baseUrl = 'https://$baseUrl';
+              }
+              baseUrl = baseUrl.endsWith('/') ? baseUrl.substring(0, baseUrl.length - 1) : baseUrl;
+              final path = urlPath.startsWith('/') ? urlPath : '/$urlPath';
+              fullUrl = '$baseUrl$path';
+            }
+
+            TrackMetadata metadata;
+            if (_pendingTrackMetadata != null) {
+              metadata = _pendingTrackMetadata!;
+            } else {
+              final trackName = event['track_name'] as String? ?? event['name'] as String? ?? 'Unknown Track';
+              final artistName = event['artist_name'] as String? ?? event['artist'] as String? ?? 'Unknown Artist';
+              final albumName = event['album_name'] as String? ?? event['album'] as String?;
+              var artworkUrl = event['image_url'] as String? ?? event['artwork_url'] as String?;
+              final durationSecs = event['duration'] as int?;
+
+              if (artworkUrl != null && artworkUrl.startsWith('http://')) {
+                artworkUrl = artworkUrl.replaceFirst('http://', 'https://');
+              }
+
+              metadata = TrackMetadata(
+                title: trackName,
+                artist: artistName,
+                album: albumName,
+                artworkUrl: artworkUrl,
+                duration: durationSecs != null ? Duration(seconds: durationSecs) : null,
+              );
+            }
+
+            _localPlayer.setCurrentTrackMetadata(metadata);
+            _currentNotificationMetadata = metadata;
+            await _localPlayer.playUrl(fullUrl);
+          }
+          break;
+
+        case 'stop':
+          await _localPlayer.stop();
+          break;
+
+        case 'pause':
+          await _localPlayer.pause();
+          break;
+
+        case 'play':
+          await _localPlayer.play();
+          break;
+
+        case 'seek':
+          final position = event['position'] as int?;
+          if (position != null) {
+            await _localPlayer.seek(Duration(seconds: position));
+          }
+          break;
+
+        case 'volume_set':
+          final volume = event['volume_level'] as int?;
+          if (volume != null) {
+            await _localPlayer.setVolume(volume / 100.0);
+          }
+          break;
+
+        case 'power_on':
+        case 'power_off':
+        case 'power':
+          bool? newPowerState;
+          if (command == 'power_on') {
+            newPowerState = true;
+          } else if (command == 'power_off') {
+            newPowerState = false;
+          } else {
+            newPowerState = event['powered'] as bool?;
+          }
+
+          if (newPowerState != null) {
+            _isLocalPlayerPowered = newPowerState;
+            if (!_isLocalPlayerPowered) {
+              await _localPlayer.stop();
+            }
+          }
+          break;
+      }
+
+      await _reportLocalPlayerState();
+    } catch (e) {
+      _logger.log('Error handling local player event: $e');
+    }
+  }
+
+  Future<void> _handlePlayerUpdatedEvent(Map<String, dynamic> event) async {
+    try {
+      final playerId = event['player_id'] as String?;
+      if (playerId == null) return;
+
+      if (_selectedPlayer != null && playerId == _selectedPlayer!.playerId) {
+        _updatePlayerState();
+      }
+
+      final currentMedia = event['current_media'] as Map<String, dynamic>?;
+      final playerName = event['name'] as String? ?? playerId;
+
+      if (currentMedia != null) {
+        final mediaType = currentMedia['media_type'] as String?;
+        if (mediaType != 'flow_stream') {
+          final durationSecs = (currentMedia['duration'] as num?)?.toInt();
+          final albumName = currentMedia['album'] as String?;
+          final imageUrl = currentMedia['image_url'] as String?;
+
+          Map<String, dynamic>? metadata;
+          if (imageUrl != null && _serverUrl != null) {
+            var finalImageUrl = imageUrl;
+            try {
+              final imgUri = Uri.parse(imageUrl);
+              final queryString = imgUri.query;
+              var baseUrl = _serverUrl!;
+              if (!baseUrl.startsWith('http://') && !baseUrl.startsWith('https://')) {
+                baseUrl = 'https://$baseUrl';
+              }
+              if (baseUrl.endsWith('/')) {
+                baseUrl = baseUrl.substring(0, baseUrl.length - 1);
+              }
+              finalImageUrl = '$baseUrl/imageproxy?$queryString';
+            } catch (e) {
+              // Use original URL
+            }
+            metadata = {
+              'images': [{'path': finalImageUrl, 'provider': 'direct'}]
+            };
+          }
+
+          final trackFromEvent = Track(
+            itemId: currentMedia['queue_item_id'] as String? ?? '',
+            provider: 'library',
+            name: currentMedia['title'] as String? ?? 'Unknown Track',
+            uri: currentMedia['uri'] as String?,
+            duration: durationSecs != null ? Duration(seconds: durationSecs) : null,
+            artists: [Artist(itemId: '', provider: 'library', name: currentMedia['artist'] as String? ?? 'Unknown Artist')],
+            album: albumName != null ? Album(itemId: '', provider: 'library', name: albumName) : null,
+            metadata: metadata,
+          );
+
+          _cacheService.setCachedTrackForPlayer(playerId, trackFromEvent);
+
+          if (_selectedPlayer != null && playerId == _selectedPlayer!.playerId) {
+            _currentTrack = trackFromEvent;
+          }
+
+          _logger.log('📋 Cached track for $playerName: ${trackFromEvent.name}');
+
+          if (imageUrl != null) {
+            final images = metadata?['images'] as List?;
+            if (images != null && images.isNotEmpty) {
+              final imagePath = images[0]['path'] as String?;
+              if (imagePath != null) {
+                _precacheImage(imagePath);
+              }
+            }
+          }
+
+          notifyListeners();
+        }
+      }
+
+      // Handle notification metadata for local player
+      final builtinPlayerId = await SettingsService.getBuiltinPlayerId();
+      if (builtinPlayerId == null || playerId != builtinPlayerId) return;
+
+      if (currentMedia == null) return;
+
+      final title = currentMedia['title'] as String? ?? 'Unknown Track';
+      final artist = currentMedia['artist'] as String? ?? 'Unknown Artist';
+      final album = currentMedia['album'] as String?;
+      var imageUrl = currentMedia['image_url'] as String?;
+      final durationSecs = (currentMedia['duration'] as num?)?.toInt();
+
+      if (imageUrl != null && _serverUrl != null) {
+        try {
+          final imgUri = Uri.parse(imageUrl);
+          final queryString = imgUri.query;
+          var baseUrl = _serverUrl!;
+          if (!baseUrl.startsWith('http://') && !baseUrl.startsWith('https://')) {
+            baseUrl = 'https://$baseUrl';
+          }
+          if (baseUrl.endsWith('/')) {
+            baseUrl = baseUrl.substring(0, baseUrl.length - 1);
+          }
+          imageUrl = '$baseUrl/imageproxy?$queryString';
+        } catch (e) {
+          if (imageUrl != null && imageUrl.startsWith('http://')) {
+            imageUrl = imageUrl.replaceFirst('http://', 'https://');
+          }
+        }
+      }
+
+      final newMetadata = TrackMetadata(
+        title: title,
+        artist: artist,
+        album: album,
+        artworkUrl: imageUrl,
+        duration: durationSecs != null ? Duration(seconds: durationSecs) : null,
+      );
+
+      final mediaType = currentMedia['media_type'] as String?;
+      if (mediaType == 'flow_stream') return;
+
+      _pendingTrackMetadata = newMetadata;
+
+      final notificationNeedsUpdate = _currentNotificationMetadata != null &&
+          (_currentNotificationMetadata!.title != title ||
+           _currentNotificationMetadata!.artist != artist);
+
+      if (_localPlayer.isPlaying && notificationNeedsUpdate) {
+        await _localPlayer.updateNotificationWhilePlaying(newMetadata);
+        _currentNotificationMetadata = newMetadata;
+      }
+    } catch (e) {
+      _logger.log('Error handling player_updated event: $e');
+    }
+  }
+
+  // ============================================================================
+  // PLAYER SELECTION
+  // ============================================================================
+
+  Future<void> loadAndSelectPlayers({bool forceRefresh = false}) async {
+    if (_api == null) return;
+
+    try {
+      if (!forceRefresh && _cacheService.isPlayersCacheValid() && _availablePlayers.isNotEmpty) {
+        return;
+      }
+
+      final allPlayers = await _api!.getPlayers();
+      final builtinPlayerId = await SettingsService.getBuiltinPlayerId();
+
+      _logger.log('🎛️ getPlayers returned ${allPlayers.length} players');
+
+      int filteredCount = 0;
+
+      _availablePlayers = allPlayers.where((player) {
+        final nameLower = player.name.toLowerCase();
+
+        if (nameLower.contains('music assistant mobile')) {
+          filteredCount++;
+          return false;
+        }
+
+        if (nameLower == 'this device' || player.playerId.startsWith('ma_')) {
+          filteredCount++;
+          return false;
+        }
+
+        if (player.playerId.startsWith('ensemble_')) {
+          if (builtinPlayerId == null || player.playerId != builtinPlayerId) {
+            filteredCount++;
+            return false;
+          }
+        }
+
+        if (!player.available) {
+          if (builtinPlayerId != null && player.playerId == builtinPlayerId) {
+            return true;
+          }
+          filteredCount++;
+          return false;
+        }
+
+        return true;
+      }).toList();
+
+      _availablePlayers.sort((a, b) => a.name.toLowerCase().compareTo(b.name.toLowerCase()));
+      _cacheService.updatePlayersLastFetched();
+
+      _logger.log('🎛️ After filtering: ${_availablePlayers.length} players available');
+
+      if (_availablePlayers.isNotEmpty) {
+        Player? playerToSelect;
+
+        if (_selectedPlayer != null) {
+          final stillAvailable = _availablePlayers.any(
+            (p) => p.playerId == _selectedPlayer!.playerId && p.available,
+          );
+          if (stillAvailable) {
+            playerToSelect = _availablePlayers.firstWhere(
+              (p) => p.playerId == _selectedPlayer!.playerId,
+            );
+          }
+        }
+
+        if (playerToSelect == null) {
+          final lastSelectedPlayerId = await SettingsService.getLastSelectedPlayerId();
+
+          if (lastSelectedPlayerId != null) {
+            try {
+              playerToSelect = _availablePlayers.firstWhere(
+                (p) => p.playerId == lastSelectedPlayerId && p.available,
+              );
+            } catch (e) {}
+          }
+
+          if (playerToSelect == null && builtinPlayerId != null) {
+            try {
+              playerToSelect = _availablePlayers.firstWhere(
+                (p) => p.playerId == builtinPlayerId && p.available,
+              );
+            } catch (e) {}
+          }
+
+          if (playerToSelect == null) {
+            try {
+              playerToSelect = _availablePlayers.firstWhere(
+                (p) => p.state == 'playing' && p.available,
+              );
+            } catch (e) {}
+          }
+
+          if (playerToSelect == null) {
+            playerToSelect = _availablePlayers.firstWhere(
+              (p) => p.available,
+              orElse: () => _availablePlayers.first,
+            );
+          }
+        }
+
+        selectPlayer(playerToSelect);
+      }
+
+      _preloadAdjacentPlayers(preloadAll: true);
+    } catch (e) {
+      ErrorHandler.logError('Load and select players', e);
+    }
+  }
+
+  void selectPlayer(Player player, {bool skipNotify = false}) {
+    _selectedPlayer = player;
+    SettingsService.setLastSelectedPlayerId(player.playerId);
+    _startPlayerStatePolling();
+    _preloadAdjacentPlayers();
+
+    if (!skipNotify) {
+      notifyListeners();
+    }
+  }
+
+  Future<void> _preloadAdjacentPlayers({bool preloadAll = false}) async {
+    if (_api == null) return;
+
+    final players = _availablePlayers.where((p) => p.available).toList();
+    if (players.isEmpty) return;
+
+    if (preloadAll) {
+      _logger.log('🖼️ Preloading track info for all ${players.length} players...');
+      await Future.wait(players.map((player) => _preloadPlayerTrack(player)));
+      _logger.log('🖼️ Preloading complete');
+      return;
+    }
+
+    if (_selectedPlayer == null || players.length <= 1) return;
+
+    final currentIndex = players.indexWhere((p) => p.playerId == _selectedPlayer!.playerId);
+    if (currentIndex == -1) return;
+
+    final prevIndex = currentIndex <= 0 ? players.length - 1 : currentIndex - 1;
+    final nextIndex = currentIndex >= players.length - 1 ? 0 : currentIndex + 1;
+
+    final playersToPreload = <Player>{};
+    if (prevIndex != currentIndex) playersToPreload.add(players[prevIndex]);
+    if (nextIndex != currentIndex) playersToPreload.add(players[nextIndex]);
+
+    for (final player in playersToPreload) {
+      _preloadPlayerTrack(player);
+    }
+  }
+
+  Future<void> _preloadPlayerTrack(Player player) async {
+    if (_api == null) return;
+
+    try {
+      if (!player.available || !player.powered) {
+        _cacheService.setCachedTrackForPlayer(player.playerId, null);
+        return;
+      }
+
+      final queue = await _api!.getQueue(player.playerId);
+
+      if (queue != null && queue.currentItem != null) {
+        final track = queue.currentItem!.track;
+        final existingTrack = _cacheService.getCachedTrackForPlayer(player.playerId);
+        final existingHasImage = existingTrack?.metadata?['images'] != null;
+        final newHasImage = track.metadata?['images'] != null;
+
+        if (!existingHasImage || newHasImage) {
+          _cacheService.setCachedTrackForPlayer(player.playerId, track);
+        }
+
+        final artworkUrl512 = _api!.getImageUrl(existingHasImage ? existingTrack! : track, size: 512);
+        if (artworkUrl512 != null) {
+          await _precacheImage(artworkUrl512);
+        }
+      } else {
+        final existingTrack = _cacheService.getCachedTrackForPlayer(player.playerId);
+        if (existingTrack?.metadata?['images'] == null) {
+          _cacheService.setCachedTrackForPlayer(player.playerId, null);
+        }
+      }
+    } catch (e) {
+      _logger.log('Error preloading player track for ${player.name}: $e');
+    }
+  }
+
+  Future<void> _precacheImage(String url) async {
+    try {
+      final imageProvider = NetworkImage(url);
+      final imageStream = imageProvider.resolve(const ImageConfiguration());
+      final completer = Completer<void>();
+      late ImageStreamListener listener;
+
+      listener = ImageStreamListener(
+        (ImageInfo info, bool synchronousCall) {
+          if (!completer.isCompleted) completer.complete();
+          imageStream.removeListener(listener);
+        },
+        onError: (exception, stackTrace) {
+          if (!completer.isCompleted) completer.completeError(exception);
+          imageStream.removeListener(listener);
+        },
+      );
+
+      imageStream.addListener(listener);
+      await completer.future.timeout(const Duration(seconds: 10), onTimeout: () {
+        imageStream.removeListener(listener);
+      });
+    } catch (e) {
+      _logger.log('Image precache failed for $url: $e');
+    }
+  }
+
+  Future<void> preloadAllPlayerTracks() async {
+    if (_api == null) return;
+    final players = _availablePlayers.where((p) => p.available).toList();
+    await Future.wait(players.map((player) => _preloadPlayerTrack(player)));
+  }
+
+  void _startPlayerStatePolling() {
+    _playerStateTimer?.cancel();
+    if (_selectedPlayer == null) return;
+
+    _playerStateTimer = Timer.periodic(Timings.playerPollingInterval, (_) async {
+      try {
+        await _updatePlayerState();
+      } catch (e) {
+        _logger.log('Error updating player state (will retry): $e');
+      }
+    });
+
+    _updatePlayerState();
+  }
+
+  Future<void> _updatePlayerState() async {
+    if (_selectedPlayer == null || _api == null) return;
+
+    try {
+      bool stateChanged = false;
+
+      final allPlayers = await _api!.getPlayers();
+      final updatedPlayer = allPlayers.firstWhere(
+        (p) => p.playerId == _selectedPlayer!.playerId,
+        orElse: () => _selectedPlayer!,
+      );
+
+      _selectedPlayer = updatedPlayer;
+      stateChanged = true;
+
+      final isPlayingOrPaused = _selectedPlayer!.state == 'playing' || _selectedPlayer!.state == 'paused';
+      final isIdleWithContent = _selectedPlayer!.state == 'idle' && _selectedPlayer!.powered;
+      final shouldShowTrack = _selectedPlayer!.available && (isPlayingOrPaused || isIdleWithContent);
+
+      if (!shouldShowTrack) {
+        if (_currentTrack != null) {
+          _currentTrack = null;
+          stateChanged = true;
+        }
+        if (stateChanged) notifyListeners();
+        return;
+      }
+
+      final queue = await _api!.getQueue(_selectedPlayer!.playerId);
+
+      if (queue != null && queue.currentItem != null) {
+        if (_currentTrack == null ||
+            _currentTrack!.uri != queue.currentItem!.track.uri ||
+            _currentTrack!.name != queue.currentItem!.track.name) {
+          _currentTrack = queue.currentItem!.track;
+          stateChanged = true;
+
+          final builtinPlayerId = await SettingsService.getBuiltinPlayerId();
+          if (builtinPlayerId != null && _selectedPlayer!.playerId == builtinPlayerId) {
+            final track = _currentTrack!;
+            final artworkUrl = _api?.getImageUrl(track, size: 512);
+            _localPlayer.updateNotification(
+              id: track.uri ?? track.itemId,
+              title: track.name,
+              artist: track.artistsString,
+              album: track.album?.name,
+              artworkUrl: artworkUrl,
+              duration: track.duration,
+            );
+          }
+        }
+      } else {
+        if (_currentTrack != null) {
+          _currentTrack = null;
+          stateChanged = true;
+        }
+      }
+
+      if (stateChanged) notifyListeners();
+    } catch (e) {
+      _logger.log('❌ Error updating player state: $e');
+    }
+  }
+
+  // ============================================================================
+  // PLAYER CONTROLS
+  // ============================================================================
+
+  Future<void> playPauseSelectedPlayer() async {
+    if (_selectedPlayer == null || _api == null) return;
+
+    if (_selectedPlayer!.isPlaying) {
+      await _api!.pausePlayer(_selectedPlayer!.playerId);
+    } else {
+      await _api!.resumePlayer(_selectedPlayer!.playerId);
+    }
+
+    await refreshPlayers();
+  }
+
+  Future<void> nextTrackSelectedPlayer() async {
+    if (_selectedPlayer == null || _api == null) return;
+    await _api!.nextTrack(_selectedPlayer!.playerId);
+    await Future.delayed(Timings.trackChangeDelay);
+    await _updatePlayerState();
+  }
+
+  Future<void> previousTrackSelectedPlayer() async {
+    if (_selectedPlayer == null || _api == null) return;
+    await _api!.previousTrack(_selectedPlayer!.playerId);
+    await Future.delayed(Timings.trackChangeDelay);
+    await _updatePlayerState();
+  }
+
+  Future<void> refreshPlayers() async {
+    final previousState = _selectedPlayer?.state;
+    final previousVolume = _selectedPlayer?.volumeLevel;
+
+    await loadAndSelectPlayers(forceRefresh: true);
+
+    bool stateChanged = false;
+    if (_selectedPlayer != null && _availablePlayers.isNotEmpty) {
+      try {
+        final updatedPlayer = _availablePlayers.firstWhere(
+          (p) => p.playerId == _selectedPlayer!.playerId,
+        );
+
+        if (updatedPlayer.state != previousState || updatedPlayer.volumeLevel != previousVolume) {
+          stateChanged = true;
+        }
+
+        _selectedPlayer = updatedPlayer;
+      } catch (e) {
+        stateChanged = true;
+      }
+    }
+
+    if (stateChanged) notifyListeners();
+  }
+
+  Future<void> togglePower(String playerId) async {
+    if (_api == null) return;
+
+    try {
+      final localPlayerId = await SettingsService.getBuiltinPlayerId();
+      final isLocalPlayer = localPlayerId != null && playerId == localPlayerId;
+
+      if (isLocalPlayer) {
+        _isLocalPlayerPowered = !_isLocalPlayerPowered;
+        if (!_isLocalPlayerPowered) {
+          await _localPlayer.stop();
+        }
+        await _reportLocalPlayerState();
+        await refreshPlayers();
+      } else {
+        final player = _availablePlayers.firstWhere(
+          (p) => p.playerId == playerId,
+          orElse: () => _selectedPlayer != null && _selectedPlayer!.playerId == playerId
+              ? _selectedPlayer!
+              : throw Exception("Player not found"),
+        );
+
+        await _api!.setPower(playerId, !player.powered);
+        await refreshPlayers();
+      }
+    } catch (e) {
+      ErrorHandler.logError('Toggle power', e);
+    }
+  }
+
+  Future<void> setVolume(String playerId, int volumeLevel) async {
+    if (_api == null) return;
+    try {
+      await _api!.setVolume(playerId, volumeLevel);
+    } catch (e) {
+      ErrorHandler.logError('Set volume', e);
+      rethrow;
+    }
+  }
+
+  Future<void> setMute(String playerId, bool muted) async {
+    if (_api == null) return;
+    try {
+      await _api!.setMute(playerId, muted);
+      await refreshPlayers();
+    } catch (e) {
+      ErrorHandler.logError('Set mute', e);
+      rethrow;
+    }
+  }
+
+  Future<void> seek(String playerId, int position) async {
+    if (_api == null) return;
+    try {
+      await _api!.seek(playerId, position);
+    } catch (e) {
+      ErrorHandler.logError('Seek', e);
+      rethrow;
+    }
+  }
+
+  Future<void> toggleShuffle(String queueId) async {
+    if (_api == null) return;
+    try {
+      await _api!.toggleShuffle(queueId);
+    } catch (e) {
+      ErrorHandler.logError('Toggle shuffle', e);
+      rethrow;
+    }
+  }
+
+  Future<void> setRepeatMode(String queueId, String mode) async {
+    if (_api == null) return;
+    try {
+      await _api!.setRepeatMode(queueId, mode);
+    } catch (e) {
+      ErrorHandler.logError('Set repeat mode', e);
+      rethrow;
+    }
+  }
+
+  Future<void> cycleRepeatMode(String queueId, String? currentMode) async {
+    String nextMode;
+    switch (currentMode) {
+      case 'off':
+      case null:
+        nextMode = 'all';
+        break;
+      case 'all':
+        nextMode = 'one';
+        break;
+      case 'one':
+        nextMode = 'off';
+        break;
+      default:
+        nextMode = 'off';
+    }
+    await setRepeatMode(queueId, nextMode);
+  }
+
+  void clearState() {
+    _playerStateTimer?.cancel();
+    _playerStateTimer = null;
+    _localPlayerStateReportTimer?.cancel();
+    _localPlayerEventSubscription?.cancel();
+    _playerUpdatedEventSubscription?.cancel();
+    _availablePlayers = [];
+    _selectedPlayer = null;
+    _currentTrack = null;
+  }
+
+  @override
+  void dispose() {
+    clearState();
+    super.dispose();
+  }
+}

lib/screens/album_details_screen.dart

@@ -43,8 +43,43 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
     super.initState();
     _isFavorite = widget.album.favorite ?? false;
     _loadTracks();
-    _extractColors();
     _loadAlbumDescription();
+    _refreshFavoriteStatus();
+
+    // CRITICAL FIX: Defer color extraction until after the transition completes
+    // This prevents expensive palette extraction during hero animation
+    // Wait for the first frame to be painted, then extract colors
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      // Add small delay to ensure transition is complete
+      Future.delayed(const Duration(milliseconds: 350), () {
+        if (mounted) {
+          _extractColors();
+        }
+      });
+    });
+  }
+
+  Future<void> _refreshFavoriteStatus() async {
+    final maProvider = context.read<MusicAssistantProvider>();
+    if (maProvider.api == null) return;
+
+    // Need a URI to fetch fresh album data
+    final albumUri = widget.album.uri;
+    if (albumUri == null || albumUri.isEmpty) {
+      _logger.log('Cannot refresh favorite status: album has no URI');
+      return;
+    }
+
+    try {
+      final freshAlbum = await maProvider.api!.getAlbumByUri(albumUri);
+      if (freshAlbum != null && mounted) {
+        setState(() {
+          _isFavorite = freshAlbum.favorite ?? false;
+        });
+      }
+    } catch (e) {
+      _logger.log('Error refreshing favorite status: $e');
+    }
   }
 
   Future<void> _extractColors() async {
@@ -74,19 +109,63 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
     if (maProvider.api == null) return;
 
     try {
-      // Toggle the state locally first
       final newState = !_isFavorite;
 
-      await maProvider.api!.toggleFavorite(
+      if (newState) {
-        'album',
+        // For adding: use the actual provider and itemId from provider_mappings
-        widget.album.itemId,
+        String actualProvider = widget.album.provider;
-        widget.album.provider,
+        String actualItemId = widget.album.itemId;
-      );
+
+        if (widget.album.providerMappings != null && widget.album.providerMappings!.isNotEmpty) {
+          // Find a non-library provider mapping (e.g., spotify, qobuz, etc.)
+          final mapping = widget.album.providerMappings!.firstWhere(
+            (m) => m.available && m.providerInstance != 'library',
+            orElse: () => widget.album.providerMappings!.firstWhere(
+              (m) => m.available,
+              orElse: () => widget.album.providerMappings!.first,
+            ),
+          );
+          actualProvider = mapping.providerInstance;
+          actualItemId = mapping.itemId;
+        }
+
+        _logger.log('Adding to favorites: provider=$actualProvider, itemId=$actualItemId');
+        await maProvider.api!.addToFavorites('album', actualItemId, actualProvider);
+      } else {
+        // For removing: need the library_item_id (numeric)
+        // When provider is "library", itemId is the library ID as a string
+        // Otherwise, we need to find it from provider_mappings
+        int? libraryItemId;
+
+        if (widget.album.provider == 'library') {
+          libraryItemId = int.tryParse(widget.album.itemId);
+        } else if (widget.album.providerMappings != null) {
+          // Find the library mapping
+          final libraryMapping = widget.album.providerMappings!.firstWhere(
+            (m) => m.providerInstance == 'library',
+            orElse: () => widget.album.providerMappings!.first,
+          );
+          if (libraryMapping.providerInstance == 'library') {
+            libraryItemId = int.tryParse(libraryMapping.itemId);
+          }
+        }
+
+        if (libraryItemId == null) {
+          _logger.log('Error: Could not determine library_item_id for removal');
+          throw Exception('Could not determine library ID for this album');
+        }
+
+        _logger.log('Removing from favorites: libraryItemId=$libraryItemId');
+        await maProvider.api!.removeFromFavorites('album', libraryItemId);
+      }
 
       setState(() {
         _isFavorite = newState;
       });
 
+      // Invalidate home cache so the home screen shows updated favorite status
+      maProvider.invalidateHomeCache();
+
       if (mounted) {
         ScaffoldMessenger.of(context).showSnackBar(
           SnackBar(
@@ -99,6 +178,100 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
       }
     } catch (e) {
       _logger.log('Error toggling favorite: $e');
+      if (mounted) {
+        ScaffoldMessenger.of(context).showSnackBar(
+          SnackBar(
+            content: Text('Failed to update favorite: $e'),
+            duration: const Duration(seconds: 2),
+          ),
+        );
+      }
+    }
+  }
+
+  Future<void> _toggleTrackFavorite(int trackIndex) async {
+    if (trackIndex < 0 || trackIndex >= _tracks.length) return;
+
+    final track = _tracks[trackIndex];
+    final maProvider = context.read<MusicAssistantProvider>();
+    if (maProvider.api == null) return;
+
+    final currentFavorite = track.favorite ?? false;
+
+    try {
+      if (currentFavorite) {
+        // Remove from favorites - need library_item_id
+        int? libraryItemId;
+        if (track.provider == 'library') {
+          libraryItemId = int.tryParse(track.itemId);
+        } else if (track.providerMappings != null) {
+          final libraryMapping = track.providerMappings!.firstWhere(
+            (m) => m.providerInstance == 'library',
+            orElse: () => track.providerMappings!.first,
+          );
+          if (libraryMapping.providerInstance == 'library') {
+            libraryItemId = int.tryParse(libraryMapping.itemId);
+          }
+        }
+
+        if (libraryItemId != null) {
+          await maProvider.api!.removeFromFavorites('track', libraryItemId);
+        }
+      } else {
+        // Add to favorites
+        String actualProvider = track.provider;
+        String actualItemId = track.itemId;
+
+        if (track.providerMappings != null && track.providerMappings!.isNotEmpty) {
+          final mapping = track.providerMappings!.firstWhere(
+            (m) => m.available && m.providerInstance != 'library',
+            orElse: () => track.providerMappings!.firstWhere(
+              (m) => m.available,
+              orElse: () => track.providerMappings!.first,
+            ),
+          );
+          actualProvider = mapping.providerInstance;
+          actualItemId = mapping.itemId;
+        }
+
+        await maProvider.api!.addToFavorites('track', actualItemId, actualProvider);
+      }
+
+      // Update local state - create new track with toggled favorite
+      setState(() {
+        _tracks[trackIndex] = Track(
+          itemId: track.itemId,
+          provider: track.provider,
+          name: track.name,
+          uri: track.uri,
+          favorite: !currentFavorite,
+          artists: track.artists,
+          album: track.album,
+          duration: track.duration,
+          providerMappings: track.providerMappings,
+        );
+      });
+
+      if (mounted) {
+        ScaffoldMessenger.of(context).showSnackBar(
+          SnackBar(
+            content: Text(
+              !currentFavorite ? 'Added to favorites' : 'Removed from favorites',
+            ),
+            duration: const Duration(seconds: 1),
+          ),
+        );
+      }
+    } catch (e) {
+      _logger.log('Error toggling track favorite: $e');
+      if (mounted) {
+        ScaffoldMessenger.of(context).showSnackBar(
+          SnackBar(
+            content: Text('Failed to update favorite: $e'),
+            duration: const Duration(seconds: 2),
+          ),
+        );
+      }
     }
   }
 
@@ -165,34 +338,84 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
     }
   }
 
-  Future<void> _addAlbumToQueue() async {
+  void _addAlbumToQueue() {
     final maProvider = context.read<MusicAssistantProvider>();
+    final players = maProvider.availablePlayers;
 
-    try {
+    // Slide mini player down out of the way
-      final player = maProvider.selectedPlayer;
+    GlobalPlayerOverlay.hidePlayer();
-      if (player == null) {
-        _showError('No player selected');
-        return;
-      }
 
-      _logger.log('Adding album to queue on ${player.name}');
+    showModalBottomSheet(
-
+      context: context,
-      // Add all tracks to queue without clearing
+      backgroundColor: Colors.transparent,
-      await maProvider.playTracks(player.playerId, _tracks, startIndex: 0, clearQueue: false);
+      builder: (context) => Container(
-      _logger.log('Album added to queue on ${player.name}');
+        decoration: BoxDecoration(
-
+          color: Theme.of(context).colorScheme.surface,
-      if (mounted) {
+          borderRadius: const BorderRadius.vertical(top: Radius.circular(20)),
-        ScaffoldMessenger.of(context).showSnackBar(
+        ),
-          const SnackBar(
+        child: Column(
-            content: Text('Album added to queue'),
+          mainAxisSize: MainAxisSize.min,
-            duration: Duration(seconds: 1),
+          children: [
-          ),
+            const SizedBox(height: 16),
-        );
+            Text(
-      }
+              'Add album to queue on...',
-    } catch (e) {
+              style: Theme.of(context).textTheme.titleLarge,
-      _logger.log('Error adding album to queue: $e');
+            ),
-      _showError('Failed to add album to queue: $e');
+            const SizedBox(height: 16),
-    }
+            if (players.isEmpty)
+              const Padding(
+                padding: EdgeInsets.all(32.0),
+                child: Text('No players available'),
+              )
+            else
+              Flexible(
+                child: ListView.builder(
+                  shrinkWrap: true,
+                  itemCount: players.length,
+                  itemBuilder: (context, playerIndex) {
+                    final player = players[playerIndex];
+                    return ListTile(
+                      leading: Icon(
+                        Icons.speaker,
+                        color: Theme.of(context).colorScheme.onSurface,
+                      ),
+                      title: Text(player.name),
+                      onTap: () async {
+                        Navigator.pop(context);
+                        try {
+                          _logger.log('Adding album to queue on ${player.name}');
+                          await maProvider.playTracks(
+                            player.playerId,
+                            _tracks,
+                            startIndex: 0,
+                            clearQueue: false,
+                          );
+                          _logger.log('Album added to queue on ${player.name}');
+                          if (mounted) {
+                            ScaffoldMessenger.of(context).showSnackBar(
+                              const SnackBar(
+                                content: Text('Album added to queue'),
+                                duration: Duration(seconds: 1),
+                              ),
+                            );
+                          }
+                        } catch (e) {
+                          _logger.log('Error adding album to queue: $e');
+                          _showError('Failed to add album to queue: $e');
+                        }
+                      },
+                    );
+                  },
+                ),
+              ),
+            SizedBox(height: MediaQuery.of(context).padding.bottom + 16),
+          ],
+        ),
+      ),
+    ).whenComplete(() {
+      // Show mini player again when sheet closes
+      GlobalPlayerOverlay.showPlayer();
+    });
   }
 
   void _addTrackToQueue(BuildContext context, int index) {
@@ -277,10 +500,16 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
   void _navigateToArtist() {
     // Navigate to the first artist if available
     if (widget.album.artists != null && widget.album.artists!.isNotEmpty) {
+      final artist = widget.album.artists!.first;
+      final maProvider = context.read<MusicAssistantProvider>();
+      final imageUrl = maProvider.getImageUrl(artist, size: 256);
       Navigator.push(
         context,
         MaterialPageRoute(
-          builder: (context) => ArtistDetailsScreen(artist: widget.album.artists!.first),
+          builder: (context) => ArtistDetailsScreen(
+            artist: artist,
+            initialImageUrl: imageUrl,
+          ),
         ),
       );
     }
@@ -318,18 +547,32 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
 
   @override
   Widget build(BuildContext context) {
-    final maProvider = context.watch<MusicAssistantProvider>();
+    // CRITICAL FIX: Use select() instead of watch() to reduce rebuilds
-    final themeProvider = context.watch<ThemeProvider>();
+    // Only rebuild when specific properties change, not on every provider update
-    final imageUrl = maProvider.getImageUrl(widget.album, size: 512);
+    final imageUrl = context.select<MusicAssistantProvider, String?>(
-    
+      (provider) => provider.getImageUrl(widget.album, size: 512),
+    );
+    final adaptiveTheme = context.select<ThemeProvider, bool>(
+      (provider) => provider.adaptiveTheme,
+    );
+    final adaptiveLightScheme = context.select<ThemeProvider, ColorScheme?>(
+      (provider) => provider.adaptiveLightScheme,
+    );
+    final adaptiveDarkScheme = context.select<ThemeProvider, ColorScheme?>(
+      (provider) => provider.adaptiveDarkScheme,
+    );
+
     // Determine if we should use adaptive theme colors
-    final useAdaptiveTheme = themeProvider.adaptiveTheme;
     final isDark = Theme.of(context).brightness == Brightness.dark;
 
-    // Get the color scheme to use
+    // Get the color scheme to use - prefer local state over provider
+    // Local state (_darkColorScheme/_lightColorScheme) is set by _extractColors()
     ColorScheme? adaptiveScheme;
-    if (useAdaptiveTheme) {
+    if (adaptiveTheme) {
-      adaptiveScheme = isDark ? _darkColorScheme : _lightColorScheme;
+      // Use local state first (from _extractColors), fallback to provider
+      adaptiveScheme = isDark
+        ? (_darkColorScheme ?? adaptiveDarkScheme)
+        : (_lightColorScheme ?? adaptiveLightScheme);
     }
 
     // Use adaptive scheme if available, otherwise use global theme
@@ -523,18 +766,22 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
                       const SizedBox(width: 12),
 
                       // Favorite Button
-                      Container(
+                      SizedBox(
                         height: 50,
                         width: 50,
-                        decoration: BoxDecoration(
+                        child: FilledButton.tonal(
-                          color: _isFavorite ? colorScheme.errorContainer : colorScheme.surfaceVariant,
-                          shape: BoxShape.circle,
-                        ),
-                        child: IconButton(
                           onPressed: _toggleFavorite,
-                          icon: Icon(
+                          style: FilledButton.styleFrom(
+                            padding: EdgeInsets.zero,
+                            shape: RoundedRectangleBorder(
+                              borderRadius: BorderRadius.circular(25), // Circular
+                            ),
+                          ),
+                          child: Icon(
                             _isFavorite ? Icons.favorite : Icons.favorite_border,
-                            color: _isFavorite ? colorScheme.error : colorScheme.onSurfaceVariant,
+                            color: _isFavorite
+                                ? colorScheme.error
+                                : colorScheme.onSurfaceVariant,
                           ),
                         ),
                       ),
@@ -645,39 +892,60 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
                         curve: Curves.easeInOut,
                         child: isExpanded
                             ? Padding(
-                                padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
+                                padding: const EdgeInsets.only(right: 16.0, bottom: 12.0, top: 4.0),
                                 child: Row(
+                                  mainAxisAlignment: MainAxisAlignment.end,
                                   children: [
-                                    Expanded(
+                                    // Radio button
-                                      child: SizedBox(
+                                    SizedBox(
-                                        height: 48,
+                                      height: 44,
-                                        child: FilledButton.tonal(
+                                      width: 44,
-                                          onPressed: () => _showPlayRadioMenu(context, index),
+                                      child: FilledButton.tonal(
-                                          style: FilledButton.styleFrom(
+                                        onPressed: () => _showPlayRadioMenu(context, index),
-                                            backgroundColor: colorScheme.tertiaryContainer,
+                                        style: FilledButton.styleFrom(
-                                            foregroundColor: colorScheme.onTertiaryContainer,
+                                          padding: EdgeInsets.zero,
-                                            shape: RoundedRectangleBorder(
+                                          shape: RoundedRectangleBorder(
-                                              borderRadius: BorderRadius.circular(12),
+                                            borderRadius: BorderRadius.circular(12),
-                                            ),
                                           ),
-                                          child: const Text('Start radio'),
                                         ),
+                                        child: const Icon(Icons.radio, size: 20),
                                       ),
                                     ),
-                                    const SizedBox(width: 12),
+                                    const SizedBox(width: 10),
-                                    Expanded(
+                                    // Add to queue button
-                                      child: SizedBox(
+                                    SizedBox(
-                                        height: 48,
+                                      height: 44,
-                                        child: FilledButton.tonal(
+                                      width: 44,
-                                          onPressed: () => _addTrackToQueue(context, index),
+                                      child: FilledButton.tonal(
-                                          style: FilledButton.styleFrom(
+                                        onPressed: () => _addTrackToQueue(context, index),
-                                            backgroundColor: colorScheme.secondaryContainer,
+                                        style: FilledButton.styleFrom(
-                                            foregroundColor: colorScheme.onSecondaryContainer,
+                                          padding: EdgeInsets.zero,
-                                            shape: RoundedRectangleBorder(
+                                          shape: RoundedRectangleBorder(
-                                              borderRadius: BorderRadius.circular(12),
+                                            borderRadius: BorderRadius.circular(12),
-                                            ),
                                           ),
-                                          child: const Text('Add to queue'),
+                                        ),
+                                        child: const Icon(Icons.playlist_add, size: 20),
+                                      ),
+                                    ),
+                                    const SizedBox(width: 10),
+                                    // Favorite button
+                                    SizedBox(
+                                      height: 44,
+                                      width: 44,
+                                      child: FilledButton.tonal(
+                                        onPressed: () => _toggleTrackFavorite(index),
+                                        style: FilledButton.styleFrom(
+                                          padding: EdgeInsets.zero,
+                                          shape: RoundedRectangleBorder(
+                                            borderRadius: BorderRadius.circular(22),
+                                          ),
+                                        ),
+                                        child: Icon(
+                                          track.favorite == true ? Icons.favorite : Icons.favorite_border,
+                                          size: 20,
+                                          color: track.favorite == true
+                                              ? colorScheme.error
+                                              : colorScheme.onSurfaceVariant,
                                         ),
                                       ),
                                     ),
@@ -703,67 +971,18 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
     final maProvider = context.read<MusicAssistantProvider>();
     final players = maProvider.availablePlayers;
 
-    // Slide mini player down out of the way
+    _showPlayOnSheet(
-    GlobalPlayerOverlay.hidePlayer();
+      context,
-
+      players,
-    showModalBottomSheet(
+      onPlayerSelected: (player) {
-      context: context,
+        maProvider.selectPlayer(player);
-      backgroundColor: Colors.transparent,
+        maProvider.playTracks(
-      builder: (context) => Container(
+          player.playerId,
-        decoration: BoxDecoration(
+          _tracks,
-          color: Theme.of(context).colorScheme.surface,
+          startIndex: startIndex,
-          borderRadius: const BorderRadius.vertical(top: Radius.circular(20)),
+        );
-        ),
+      },
-        child: Column(
+    );
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            const SizedBox(height: 16),
-            Text(
-              'Play on...',
-              style: Theme.of(context).textTheme.titleLarge,
-            ),
-            const SizedBox(height: 16),
-            if (players.isEmpty)
-              const Padding(
-                padding: EdgeInsets.all(32.0),
-                child: Text('No players available'),
-              )
-            else
-              Flexible(
-                child: ListView.builder(
-                  shrinkWrap: true,
-                  itemCount: players.length,
-                  itemBuilder: (context, index) {
-                    final player = players[index];
-                    return ListTile(
-                      leading: Icon(
-                        Icons.speaker,
-                        color: Theme.of(context).colorScheme.onSurface,
-                      ),
-                      title: Text(player.name),
-                      onTap: () {
-                        Navigator.pop(context);
-                        // Set this as the active player
-                        maProvider.selectPlayer(player);
-                        // Play album from this track onwards
-                        maProvider.playTracks(
-                          player.playerId,
-                          _tracks,
-                          startIndex: startIndex,
-                        );
-                      },
-                    );
-                  },
-                ),
-              ),
-            const SizedBox(height: 16),
-          ],
-        ),
-      ),
-    ).whenComplete(() {
-      // Slide mini player back up when sheet is dismissed
-      GlobalPlayerOverlay.showPlayer();
-    });
   }
 
   void _showPlayRadioMenu(BuildContext context, int trackIndex) {
@@ -771,85 +990,54 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
     final players = maProvider.availablePlayers;
     final track = _tracks[trackIndex];
 
-    // Slide mini player down out of the way
+    _showPlayOnSheet(
-    GlobalPlayerOverlay.hidePlayer();
+      context,
-
+      players,
-    showModalBottomSheet(
+      onPlayerSelected: (player) {
-      context: context,
+        maProvider.selectPlayer(player);
-      backgroundColor: Colors.transparent,
+        maProvider.playRadio(player.playerId, track);
-      builder: (context) => Container(
+      },
-        decoration: BoxDecoration(
+    );
-          color: Theme.of(context).colorScheme.surface,
-          borderRadius: const BorderRadius.vertical(top: Radius.circular(20)),
-        ),
-        child: Column(
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            const SizedBox(height: 16),
-            Text(
-              'Play on...',
-              style: Theme.of(context).textTheme.titleLarge,
-            ),
-            const SizedBox(height: 16),
-            if (players.isEmpty)
-              const Padding(
-                padding: EdgeInsets.all(32.0),
-                child: Text('No players available'),
-              )
-            else
-              Flexible(
-                child: ListView.builder(
-                  shrinkWrap: true,
-                  itemCount: players.length,
-                  itemBuilder: (context, index) {
-                    final player = players[index];
-                    return ListTile(
-                      leading: Icon(
-                        Icons.speaker,
-                        color: Theme.of(context).colorScheme.onSurface,
-                      ),
-                      title: Text(player.name),
-                      onTap: () {
-                        Navigator.pop(context);
-                        // Set this as the active player
-                        maProvider.selectPlayer(player);
-                        // Play radio based on this track
-                        maProvider.playRadio(
-                          player.playerId,
-                          track,
-                        );
-                      },
-                    );
-                  },
-                ),
-              ),
-            const SizedBox(height: 16),
-          ],
-        ),
-      ),
-    ).whenComplete(() {
-      // Slide mini player back up when sheet is dismissed
-      GlobalPlayerOverlay.showPlayer();
-    });
   }
 
   void _showPlayOnMenu(BuildContext context) {
     final maProvider = context.read<MusicAssistantProvider>();
     final players = maProvider.availablePlayers;
 
+    _showPlayOnSheet(
+      context,
+      players,
+      onPlayerSelected: (player) {
+        maProvider.selectPlayer(player);
+        maProvider.playTracks(player.playerId, _tracks);
+      },
+    );
+  }
+
+  /// Shared "Play on..." bottom sheet with fixed height and scrollable list
+  void _showPlayOnSheet(
+    BuildContext context,
+    List players, {
+    required void Function(dynamic player) onPlayerSelected,
+  }) {
     // Slide mini player down out of the way
     GlobalPlayerOverlay.hidePlayer();
 
+    final screenHeight = MediaQuery.of(context).size.height;
+    final bottomPadding = MediaQuery.of(context).padding.bottom;
+    final sheetHeight = (screenHeight * 0.45) + bottomPadding; // Fixed 45% + safe area
+
     showModalBottomSheet(
       context: context,
       backgroundColor: Colors.transparent,
+      isScrollControlled: true,
       builder: (context) => Container(
+        height: sheetHeight,
         decoration: BoxDecoration(
           color: Theme.of(context).colorScheme.surface,
           borderRadius: const BorderRadius.vertical(top: Radius.circular(20)),
         ),
         child: Column(
-          mainAxisSize: MainAxisSize.min,
           children: [
             const SizedBox(height: 16),
             Text(
@@ -857,36 +1045,30 @@ class _AlbumDetailsScreenState extends State<AlbumDetailsScreen> with SingleTick
               style: Theme.of(context).textTheme.titleLarge,
             ),
             const SizedBox(height: 16),
-            if (players.isEmpty)
+            Expanded(
-              const Padding(
+              child: players.isEmpty
-                padding: EdgeInsets.all(32.0),
+                  ? const Center(
-                child: Text('No players available'),
+                      child: Text('No players available'),
-              )
+                    )
-            else
+                  : ListView.builder(
-              Flexible(
+                      padding: EdgeInsets.only(bottom: bottomPadding + 16),
-                child: ListView.builder(
+                      itemCount: players.length,
-                  shrinkWrap: true,
+                      itemBuilder: (context, index) {
-                  itemCount: players.length,
+                        final player = players[index];
-                  itemBuilder: (context, index) {
+                        return ListTile(
-                    final player = players[index];
+                          leading: Icon(
-                    return ListTile(
+                            Icons.speaker,
-                      leading: Icon(
+                            color: Theme.of(context).colorScheme.onSurface,
-                        Icons.speaker,
+                          ),
-                        color: Theme.of(context).colorScheme.onSurface,
+                          title: Text(player.name),
-                      ),
+                          onTap: () {
-                      title: Text(player.name),
+                            Navigator.pop(context);
-                      onTap: () {
+                            onPlayerSelected(player);
-                        Navigator.pop(context);
+                          },
-                        // Set this as the active player
+                        );
-                        maProvider.selectPlayer(player);
-                        // Play on this specific player
-                        maProvider.playTracks(player.playerId, _tracks);
                       },
-                    );
+                    ),
-                  },
+            ),
-                ),
-              ),
-            const SizedBox(height: 16),
           ],
         ),
       ),

lib/screens/artist_details_screen.dart

@@ -15,11 +15,13 @@ import '../utils/page_transitions.dart';
 class ArtistDetailsScreen extends StatefulWidget {
   final Artist artist;
   final String? heroTagSuffix;
+  final String? initialImageUrl;
 
   const ArtistDetailsScreen({
-    super.key, 
+    super.key,
     required this.artist,
     this.heroTagSuffix,
+    this.initialImageUrl,
   });
 
   @override
@@ -31,27 +33,297 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
   List<Album> _albums = [];
   List<Album> _providerAlbums = [];
   bool _isLoading = true;
+  bool _isFavorite = false;
   ColorScheme? _lightColorScheme;
   ColorScheme? _darkColorScheme;
   bool _isDescriptionExpanded = false;
   String? _artistDescription;
+  String? _artistImageUrl;
 
   String get _heroTagSuffix => widget.heroTagSuffix != null ? '_${widget.heroTagSuffix}' : '';
 
   @override
   void initState() {
     super.initState();
+    _isFavorite = widget.artist.favorite ?? false;
+    // Use initial image URL immediately for smooth hero animation
+    _artistImageUrl = widget.initialImageUrl;
     _loadArtistAlbums();
-    _extractColors();
     _loadArtistDescription();
+    _refreshFavoriteStatus();
+
+    // Defer higher-res image loading and color extraction until after transition
+    // But hero animation now works because we have initialImageUrl
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      Future.delayed(const Duration(milliseconds: 350), () {
+        if (mounted) {
+          _loadArtistImage();
+          // Note: _extractColors is called by _loadArtistImage after image loads
+        }
+      });
+    });
   }
 
-  Future<void> _extractColors() async {
+  Future<void> _refreshFavoriteStatus() async {
     final maProvider = context.read<MusicAssistantProvider>();
-    final imageUrl = maProvider.getImageUrl(widget.artist, size: 512);
+    if (maProvider.api == null) return;
 
-    if (imageUrl == null) return;
+    final artistUri = widget.artist.uri;
+    if (artistUri == null || artistUri.isEmpty) {
+      _logger.log('Cannot refresh favorite status: artist has no URI');
+      return;
+    }
 
+    try {
+      final freshArtist = await maProvider.api!.getArtistByUri(artistUri);
+      if (freshArtist != null && mounted) {
+        setState(() {
+          _isFavorite = freshArtist.favorite ?? false;
+        });
+      }
+    } catch (e) {
+      _logger.log('Error refreshing artist favorite status: $e');
+    }
+  }
+
+  Future<void> _toggleFavorite() async {
+    final maProvider = context.read<MusicAssistantProvider>();
+    if (maProvider.api == null) return;
+
+    try {
+      final newState = !_isFavorite;
+
+      if (newState) {
+        String actualProvider = widget.artist.provider;
+        String actualItemId = widget.artist.itemId;
+
+        if (widget.artist.providerMappings != null && widget.artist.providerMappings!.isNotEmpty) {
+          final mapping = widget.artist.providerMappings!.firstWhere(
+            (m) => m.available && m.providerInstance != 'library',
+            orElse: () => widget.artist.providerMappings!.firstWhere(
+              (m) => m.available,
+              orElse: () => widget.artist.providerMappings!.first,
+            ),
+          );
+          actualProvider = mapping.providerInstance;
+          actualItemId = mapping.itemId;
+        }
+
+        _logger.log('Adding artist to favorites: provider=$actualProvider, itemId=$actualItemId');
+        await maProvider.api!.addToFavorites('artist', actualItemId, actualProvider);
+      } else {
+        int? libraryItemId;
+
+        if (widget.artist.provider == 'library') {
+          libraryItemId = int.tryParse(widget.artist.itemId);
+        } else if (widget.artist.providerMappings != null) {
+          final libraryMapping = widget.artist.providerMappings!.firstWhere(
+            (m) => m.providerInstance == 'library',
+            orElse: () => widget.artist.providerMappings!.first,
+          );
+          if (libraryMapping.providerInstance == 'library') {
+            libraryItemId = int.tryParse(libraryMapping.itemId);
+          }
+        }
+
+        if (libraryItemId == null) {
+          _logger.log('Error: Could not determine library_item_id for removal');
+          throw Exception('Could not determine library ID for this artist');
+        }
+
+        _logger.log('Removing artist from favorites: libraryItemId=$libraryItemId');
+        await maProvider.api!.removeFromFavorites('artist', libraryItemId);
+      }
+
+      setState(() {
+        _isFavorite = newState;
+      });
+
+      maProvider.invalidateHomeCache();
+
+      if (mounted) {
+        ScaffoldMessenger.of(context).showSnackBar(
+          SnackBar(
+            content: Text(
+              _isFavorite ? 'Added to favorites' : 'Removed from favorites',
+            ),
+            duration: const Duration(seconds: 1),
+          ),
+        );
+      }
+    } catch (e) {
+      _logger.log('Error toggling artist favorite: $e');
+      if (mounted) {
+        ScaffoldMessenger.of(context).showSnackBar(
+          SnackBar(
+            content: Text('Failed to update favorite: $e'),
+            duration: const Duration(seconds: 2),
+          ),
+        );
+      }
+    }
+  }
+
+  Future<void> _startArtistRadio() async {
+    final maProvider = context.read<MusicAssistantProvider>();
+    final selectedPlayer = maProvider.selectedPlayer;
+
+    if (selectedPlayer == null) {
+      ScaffoldMessenger.of(context).showSnackBar(
+        const SnackBar(content: Text('No player selected')),
+      );
+      return;
+    }
+
+    try {
+      await maProvider.playArtistRadio(selectedPlayer.playerId, widget.artist);
+      if (mounted) {
+        ScaffoldMessenger.of(context).showSnackBar(
+          SnackBar(
+            content: Text('Starting ${widget.artist.name} radio'),
+            duration: const Duration(seconds: 1),
+          ),
+        );
+      }
+    } catch (e) {
+      _logger.log('Error starting artist radio: $e');
+      if (mounted) {
+        ScaffoldMessenger.of(context).showSnackBar(
+          SnackBar(
+            content: Text('Failed to start radio: $e'),
+            backgroundColor: Colors.red,
+          ),
+        );
+      }
+    }
+  }
+
+  void _showPlayOnMenu(BuildContext context) {
+    final maProvider = context.read<MusicAssistantProvider>();
+    final players = maProvider.availablePlayers;
+    final colorScheme = Theme.of(context).colorScheme;
+
+    showModalBottomSheet(
+      context: context,
+      backgroundColor: colorScheme.surface,
+      shape: const RoundedRectangleBorder(
+        borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
+      ),
+      builder: (context) => Padding(
+        padding: const EdgeInsets.all(16.0),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Text(
+              'Start ${widget.artist.name} radio on...',
+              style: Theme.of(context).textTheme.titleLarge,
+            ),
+            const SizedBox(height: 16),
+            if (players.isEmpty)
+              const Padding(
+                padding: EdgeInsets.all(32.0),
+                child: Text('No players available'),
+              )
+            else
+              Flexible(
+                child: ListView.builder(
+                  shrinkWrap: true,
+                  itemCount: players.length,
+                  itemBuilder: (context, index) {
+                    final player = players[index];
+                    return ListTile(
+                      leading: Icon(
+                        Icons.speaker,
+                        color: colorScheme.onSurface,
+                      ),
+                      title: Text(player.name),
+                      onTap: () async {
+                        Navigator.pop(context);
+                        try {
+                          await maProvider.playArtistRadio(player.playerId, widget.artist);
+                          if (mounted) {
+                            ScaffoldMessenger.of(context).showSnackBar(
+                              SnackBar(
+                                content: Text('Starting ${widget.artist.name} radio on ${player.name}'),
+                                duration: const Duration(seconds: 1),
+                              ),
+                            );
+                          }
+                        } catch (e) {
+                          _logger.log('Error starting artist radio on player: $e');
+                          if (mounted) {
+                            ScaffoldMessenger.of(context).showSnackBar(
+                              SnackBar(
+                                content: Text('Failed to start radio: $e'),
+                                backgroundColor: Colors.red,
+                              ),
+                            );
+                          }
+                        }
+                      },
+                    );
+                  },
+                ),
+              ),
+            const SizedBox(height: 16),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Future<void> _addArtistRadioToQueue() async {
+    final maProvider = context.read<MusicAssistantProvider>();
+    final selectedPlayer = maProvider.selectedPlayer;
+
+    if (selectedPlayer == null) {
+      ScaffoldMessenger.of(context).showSnackBar(
+        const SnackBar(content: Text('No player selected')),
+      );
+      return;
+    }
+
+    try {
+      // For adding to queue with radio mode, we use radio_mode but with 'add' option
+      await maProvider.api?.playArtistRadioToQueue(selectedPlayer.playerId, widget.artist);
+      if (mounted) {
+        ScaffoldMessenger.of(context).showSnackBar(
+          SnackBar(
+            content: Text('Added ${widget.artist.name} radio to queue'),
+            duration: const Duration(seconds: 1),
+          ),
+        );
+      }
+    } catch (e) {
+      _logger.log('Error adding artist radio to queue: $e');
+      if (mounted) {
+        ScaffoldMessenger.of(context).showSnackBar(
+          SnackBar(
+            content: Text('Failed to add to queue: $e'),
+            backgroundColor: Colors.red,
+          ),
+        );
+      }
+    }
+  }
+
+  Future<void> _loadArtistImage() async {
+    final maProvider = context.read<MusicAssistantProvider>();
+
+    // Get image URL with fallback to Deezer/Fanart.tv
+    final imageUrl = await maProvider.getArtistImageUrlWithFallback(widget.artist, size: 512);
+
+    if (mounted && imageUrl != null) {
+      setState(() {
+        _artistImageUrl = imageUrl;
+      });
+      // Extract colors after we have the image
+      _extractColors(imageUrl);
+    }
+  }
+
+  Future<void> _extractColors(String imageUrl) async {
     try {
       final colorSchemes = await PaletteHelper.extractColorSchemes(
         CachedNetworkImageProvider(imageUrl),
@@ -102,15 +374,30 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
   
   @override
   Widget build(BuildContext context) {
-    final maProvider = context.watch<MusicAssistantProvider>();
+    // CRITICAL FIX: Use select() instead of watch() to reduce rebuilds
-    final themeProvider = context.watch<ThemeProvider>();
+    // Only rebuild when specific properties change, not on every provider update
-    final imageUrl = maProvider.getImageUrl(widget.artist, size: 512);
+    final adaptiveTheme = context.select<ThemeProvider, bool>(
+      (provider) => provider.adaptiveTheme,
+    );
+    final adaptiveLightScheme = context.select<ThemeProvider, ColorScheme?>(
+      (provider) => provider.adaptiveLightScheme,
+    );
+    final adaptiveDarkScheme = context.select<ThemeProvider, ColorScheme?>(
+      (provider) => provider.adaptiveDarkScheme,
+    );
+
+    // Use the loaded image URL (with fallback) instead of directly from MA
+    final imageUrl = _artistImageUrl;
 
-    final useAdaptiveTheme = themeProvider.adaptiveTheme;
     final isDark = Theme.of(context).brightness == Brightness.dark;
+
+    // Get the color scheme to use - prefer local state over provider
     ColorScheme? adaptiveScheme;
-    if (useAdaptiveTheme) {
+    if (adaptiveTheme) {
-      adaptiveScheme = isDark ? _darkColorScheme : _lightColorScheme;
+      // Use local state first (from _extractColors), fallback to provider
+      adaptiveScheme = isDark
+        ? (_darkColorScheme ?? adaptiveDarkScheme)
+        : (_lightColorScheme ?? adaptiveLightScheme);
     }
     final colorScheme = adaptiveScheme ?? Theme.of(context).colorScheme;
     final textTheme = Theme.of(context).textTheme;
@@ -214,6 +501,89 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
                     ),
                     const SizedBox(height: 8),
                   ],
+                  // Action Buttons Row
+                  Row(
+                    children: [
+                      // Main Radio Button
+                      Expanded(
+                        flex: 2,
+                        child: SizedBox(
+                          height: 50,
+                          child: ElevatedButton.icon(
+                            onPressed: _startArtistRadio,
+                            icon: const Icon(Icons.radio),
+                            label: const Text('Radio'),
+                            style: ElevatedButton.styleFrom(
+                              backgroundColor: colorScheme.primary,
+                              foregroundColor: colorScheme.onPrimary,
+                              shape: RoundedRectangleBorder(
+                                borderRadius: BorderRadius.circular(12),
+                              ),
+                            ),
+                          ),
+                        ),
+                      ),
+                      const SizedBox(width: 12),
+
+                      // "Play on..." Button (Square)
+                      SizedBox(
+                        height: 50,
+                        width: 50,
+                        child: FilledButton.tonal(
+                          onPressed: () => _showPlayOnMenu(context),
+                          style: FilledButton.styleFrom(
+                            padding: EdgeInsets.zero,
+                            shape: RoundedRectangleBorder(
+                              borderRadius: BorderRadius.circular(12),
+                            ),
+                          ),
+                          child: const Icon(Icons.speaker_group_outlined),
+                        ),
+                      ),
+
+                      const SizedBox(width: 12),
+
+                      // "Add to Queue" Button (Square)
+                      SizedBox(
+                        height: 50,
+                        width: 50,
+                        child: FilledButton.tonal(
+                          onPressed: _addArtistRadioToQueue,
+                          style: FilledButton.styleFrom(
+                            padding: EdgeInsets.zero,
+                            shape: RoundedRectangleBorder(
+                              borderRadius: BorderRadius.circular(12),
+                            ),
+                          ),
+                          child: const Icon(Icons.playlist_add),
+                        ),
+                      ),
+
+                      const SizedBox(width: 12),
+
+                      // Favorite Button
+                      SizedBox(
+                        height: 50,
+                        width: 50,
+                        child: FilledButton.tonal(
+                          onPressed: _toggleFavorite,
+                          style: FilledButton.styleFrom(
+                            padding: EdgeInsets.zero,
+                            shape: RoundedRectangleBorder(
+                              borderRadius: BorderRadius.circular(25),
+                            ),
+                          ),
+                          child: Icon(
+                            _isFavorite ? Icons.favorite : Icons.favorite_border,
+                            color: _isFavorite
+                                ? colorScheme.error
+                                : colorScheme.onSurfaceVariant,
+                          ),
+                        ),
+                      ),
+                    ],
+                  ),
+                  const SizedBox(height: 16),
                 ],
               ),
             ),
@@ -263,7 +633,7 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
                   delegate: SliverChildBuilderDelegate(
                     (context, index) {
                       final album = _albums[index];
-                      return _buildAlbumCard(album, maProvider);
+                      return _buildAlbumCard(album);
                     },
                     childCount: _albums.length,
                   ),
@@ -297,7 +667,7 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
                   delegate: SliverChildBuilderDelegate(
                     (context, index) {
                       final album = _providerAlbums[index];
-                      return _buildAlbumCard(album, maProvider);
+                      return _buildAlbumCard(album);
                     },
                     childCount: _providerAlbums.length,
                   ),
@@ -312,8 +682,10 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
     );
   }
 
-  Widget _buildAlbumCard(Album album, MusicAssistantProvider provider) {
+  Widget _buildAlbumCard(Album album) {
-    final imageUrl = provider.getImageUrl(album, size: 256);
+    // Use read instead of passing provider to avoid rebuild dependencies
+    final maProvider = context.read<MusicAssistantProvider>();
+    final imageUrl = maProvider.getImageUrl(album, size: 256);
     final colorScheme = Theme.of(context).colorScheme;
     final textTheme = Theme.of(context).textTheme;
     const String heroSuffix = 'artist_albums';

lib/screens/debug_log_screen.dart

@@ -1,9 +1,9 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:provider/provider.dart';
+import 'package:share_plus/share_plus.dart';
 import '../services/debug_logger.dart';
 import '../providers/music_assistant_provider.dart';
-import '../models/player.dart';
 import '../widgets/global_player_overlay.dart';
 
 class DebugLogScreen extends StatefulWidget {
@@ -16,6 +16,8 @@ class DebugLogScreen extends StatefulWidget {
 class _DebugLogScreenState extends State<DebugLogScreen> {
   final _logger = DebugLogger();
   final _scrollController = ScrollController();
+  LogLevel _filterLevel = LogLevel.debug; // Show all by default
+  bool _isGeneratingReport = false;
 
   @override
   void initState() {
@@ -34,17 +36,37 @@ class _DebugLogScreenState extends State<DebugLogScreen> {
     super.dispose();
   }
 
+  List<LogEntry> get _filteredEntries =>
+      _logger.entries.where((e) => e.level.index >= _filterLevel.index).toList();
+
   void _copyLogs() {
     Clipboard.setData(ClipboardData(text: _logger.getAllLogs()));
     ScaffoldMessenger.of(context).showSnackBar(
       const SnackBar(
-        content: Text('Logs copied to clipboard!'),
+        content: Text('Logs copied to clipboard'),
         backgroundColor: Colors.green,
         duration: Duration(seconds: 2),
       ),
     );
   }
 
+  Future<void> _shareBugReport() async {
+    setState(() => _isGeneratingReport = true);
+
+    try {
+      final report = await _logger.generateBugReport();
+
+      await Share.share(
+        report,
+        subject: 'Ensemble Bug Report',
+      );
+    } finally {
+      if (mounted) {
+        setState(() => _isGeneratingReport = false);
+      }
+    }
+  }
+
   void _clearLogs() {
     setState(() {
       _logger.clear();
@@ -217,16 +239,39 @@ class _DebugLogScreenState extends State<DebugLogScreen> {
         ),
         centerTitle: true,
         actions: [
+          // Share bug report button
+          _isGeneratingReport
+              ? const Padding(
+                  padding: EdgeInsets.all(12),
+                  child: SizedBox(
+                    width: 24,
+                    height: 24,
+                    child: CircularProgressIndicator(
+                      strokeWidth: 2,
+                      color: Colors.white,
+                    ),
+                  ),
+                )
+              : IconButton(
+                  icon: const Icon(Icons.share_rounded),
+                  onPressed: _shareBugReport,
+                  color: Colors.white,
+                  tooltip: 'Share bug report',
+                ),
           PopupMenuButton<String>(
             icon: const Icon(Icons.more_vert, color: Colors.white),
-            tooltip: 'Player tools',
+            tooltip: 'More options',
             onSelected: (value) async {
               switch (value) {
                 case 'show_players':
                   _showAllPlayers();
                   break;
-                // NOTE: Ghost cleanup and repair options removed - MA APIs don't work
+                case 'copy_logs':
-                // reliably and caused corrupt entries. See PLAYER_LIFECYCLE_GUIDE.md
+                  _copyLogs();
+                  break;
+                case 'clear_logs':
+                  _clearLogs();
+                  break;
               }
             },
             itemBuilder: (context) => [
@@ -238,49 +283,61 @@ class _DebugLogScreenState extends State<DebugLogScreen> {
                   dense: true,
                 ),
               ),
+              const PopupMenuItem(
+                value: 'copy_logs',
+                child: ListTile(
+                  leading: Icon(Icons.copy_rounded),
+                  title: Text('Copy Logs'),
+                  dense: true,
+                ),
+              ),
+              const PopupMenuItem(
+                value: 'clear_logs',
+                child: ListTile(
+                  leading: Icon(Icons.delete_rounded),
+                  title: Text('Clear Logs'),
+                  dense: true,
+                ),
+              ),
             ],
           ),
-          IconButton(
-            icon: const Icon(Icons.copy_rounded),
-            onPressed: _copyLogs,
-            color: Colors.white,
-            tooltip: 'Copy logs',
-          ),
-          IconButton(
-            icon: const Icon(Icons.delete_rounded),
-            onPressed: _clearLogs,
-            color: Colors.white,
-            tooltip: 'Clear logs',
-          ),
         ],
       ),
       body: Column(
         children: [
+          // Filter chips and stats
           Container(
-            padding: const EdgeInsets.all(16),
+            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
             color: Colors.white.withOpacity(0.05),
-            child: Row(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
               children: [
-                const Icon(
+                // Level filter chips
-                  Icons.info_outline_rounded,
+                SingleChildScrollView(
-                  color: Colors.white70,
+                  scrollDirection: Axis.horizontal,
-                  size: 16,
+                  child: Row(
-                ),
+                    children: [
-                const SizedBox(width: 8),
+                      _buildFilterChip('All', LogLevel.debug),
-                Expanded(
+                      const SizedBox(width: 8),
-                  child: Text(
+                      _buildFilterChip('Info+', LogLevel.info),
-                    'Last ${_logger.logs.length} log entries',
+                      const SizedBox(width: 8),
-                    style: const TextStyle(
+                      _buildFilterChip('Warnings', LogLevel.warning),
-                      color: Colors.white70,
+                      const SizedBox(width: 8),
-                      fontSize: 12,
+                      _buildFilterChip('Errors', LogLevel.error),
-                    ),
+                    ],
                   ),
                 ),
+                const SizedBox(height: 8),
+                // Stats
+                Text(
+                  'Showing ${_filteredEntries.length} of ${_logger.entries.length} entries',
+                  style: const TextStyle(color: Colors.white54, fontSize: 11),
+                ),
               ],
             ),
           ),
           Expanded(
-            child: _logger.logs.isEmpty
+            child: _filteredEntries.isEmpty
                 ? const Center(
                     child: Text(
                       'No logs yet',
@@ -292,43 +349,11 @@ class _DebugLogScreenState extends State<DebugLogScreen> {
                   )
                 : ListView.builder(
                     controller: _scrollController,
-                    padding: EdgeInsets.fromLTRB(8, 8, 8, BottomSpacing.navBarOnly + 56), // Extra space for FAB
+                    padding: EdgeInsets.fromLTRB(8, 8, 8, BottomSpacing.navBarOnly + 56),
-                    itemCount: _logger.logs.length,
+                    itemCount: _filteredEntries.length,
                     itemBuilder: (context, index) {
-                      final log = _logger.logs[index];
+                      final entry = _filteredEntries[index];
-                      final isError = log.contains('Error') ||
+                      return _buildLogEntry(entry);
-                          log.contains('error') ||
-                          log.contains('ERROR') ||
-                          log.contains('failed') ||
-                          log.contains('Failed');
-
-                      return Container(
-                        margin: const EdgeInsets.only(bottom: 4),
-                        padding: const EdgeInsets.symmetric(
-                          horizontal: 12,
-                          vertical: 8,
-                        ),
-                        decoration: BoxDecoration(
-                          color: isError
-                              ? Colors.red.withOpacity(0.1)
-                              : Colors.white.withOpacity(0.03),
-                          borderRadius: BorderRadius.circular(4),
-                          border: Border.all(
-                            color: isError
-                                ? Colors.red.withOpacity(0.3)
-                                : Colors.white.withOpacity(0.1),
-                          ),
-                        ),
-                        child: Text(
-                          log,
-                          style: TextStyle(
-                            color: isError ? Colors.red[300] : Colors.white70,
-                            fontSize: 11,
-                            fontFamily: 'monospace',
-                            height: 1.4,
-                          ),
-                        ),
-                      );
                     },
                   ),
           ),
@@ -354,4 +379,68 @@ class _DebugLogScreenState extends State<DebugLogScreen> {
       ),
     );
   }
+
+  Widget _buildFilterChip(String label, LogLevel level) {
+    final isSelected = _filterLevel == level;
+    return FilterChip(
+      label: Text(label),
+      selected: isSelected,
+      showCheckmark: false,
+      onSelected: (_) {
+        setState(() {
+          _filterLevel = level;
+        });
+      },
+      backgroundColor: Colors.white.withOpacity(0.1),
+      selectedColor: _getLevelColor(level).withOpacity(0.3),
+      labelStyle: TextStyle(
+        color: isSelected ? _getLevelColor(level) : Colors.white70,
+        fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
+        fontSize: 12,
+      ),
+      side: BorderSide(
+        color: isSelected ? _getLevelColor(level) : Colors.transparent,
+      ),
+    );
+  }
+
+  Widget _buildLogEntry(LogEntry entry) {
+    final color = _getLevelColor(entry.level);
+
+    return Container(
+      margin: const EdgeInsets.only(bottom: 4),
+      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+      decoration: BoxDecoration(
+        color: color.withOpacity(0.1),
+        borderRadius: BorderRadius.circular(4),
+        border: Border.all(color: color.withOpacity(0.3)),
+      ),
+      child: Text(
+        entry.formatted,
+        style: TextStyle(
+          color: entry.level == LogLevel.error
+              ? Colors.red[300]
+              : entry.level == LogLevel.warning
+                  ? Colors.orange[300]
+                  : Colors.white70,
+          fontSize: 11,
+          fontFamily: 'monospace',
+          height: 1.4,
+        ),
+      ),
+    );
+  }
+
+  Color _getLevelColor(LogLevel level) {
+    switch (level) {
+      case LogLevel.debug:
+        return Colors.grey;
+      case LogLevel.info:
+        return Colors.blue;
+      case LogLevel.warning:
+        return Colors.orange;
+      case LogLevel.error:
+        return Colors.red;
+    }
+  }
 }

lib/screens/library_albums_screen.dart

@@ -3,6 +3,7 @@ import 'package:provider/provider.dart';
 import '../providers/music_assistant_provider.dart';
 import '../models/media_item.dart';
 import '../widgets/album_card.dart';
+import '../widgets/common/empty_state.dart';
 
 class LibraryAlbumsScreen extends StatelessWidget {
   const LibraryAlbumsScreen({super.key});
@@ -52,37 +53,8 @@ class LibraryAlbumsScreen extends StatelessWidget {
     }
 
     if (albums.isEmpty) {
-      return Center(
+      return EmptyState.albums(
-        child: Column(
+        onRefresh: () => context.read<MusicAssistantProvider>().loadLibrary(),
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: [
-            Icon(
-              Icons.album_outlined,
-              size: 64,
-              color: colorScheme.onSurface.withOpacity(0.54),
-            ),
-            const SizedBox(height: 16),
-            Text(
-              'No albums found',
-              style: TextStyle(
-                color: colorScheme.onSurface.withOpacity(0.7),
-                fontSize: 16,
-              ),
-            ),
-            const SizedBox(height: 24),
-            ElevatedButton.icon(
-              onPressed: () {
-                context.read<MusicAssistantProvider>().loadLibrary();
-              },
-              icon: const Icon(Icons.refresh_rounded),
-              label: const Text('Refresh'),
-              style: ElevatedButton.styleFrom(
-                backgroundColor: colorScheme.surfaceVariant,
-                foregroundColor: colorScheme.onSurfaceVariant,
-              ),
-            ),
-          ],
-        ),
       );
     }
 

lib/screens/library_artists_screen.dart

@@ -1,9 +1,10 @@
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
-import 'package:cached_network_image/cached_network_image.dart';
 import '../providers/music_assistant_provider.dart';
 import '../models/media_item.dart';
 import '../utils/page_transitions.dart';
+import '../widgets/common/empty_state.dart';
+import '../widgets/artist_avatar.dart';
 import 'artist_details_screen.dart';
 
 class LibraryArtistsScreen extends StatelessWidget {
@@ -54,37 +55,8 @@ class LibraryArtistsScreen extends StatelessWidget {
     }
 
     if (artists.isEmpty) {
-      return Center(
+      return EmptyState.artists(
-        child: Column(
+        onRefresh: () => context.read<MusicAssistantProvider>().loadLibrary(),
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: [
-            Icon(
-              Icons.person_outline_rounded,
-              size: 64,
-              color: colorScheme.onSurface.withOpacity(0.54),
-            ),
-            const SizedBox(height: 16),
-            Text(
-              'No artists found',
-              style: TextStyle(
-                color: colorScheme.onSurface.withOpacity(0.7),
-                fontSize: 16,
-              ),
-            ),
-            const SizedBox(height: 24),
-            ElevatedButton.icon(
-              onPressed: () {
-                context.read<MusicAssistantProvider>().loadLibrary();
-              },
-              icon: const Icon(Icons.refresh_rounded),
-              label: const Text('Refresh'),
-              style: ElevatedButton.styleFrom(
-                backgroundColor: colorScheme.surfaceVariant,
-                foregroundColor: colorScheme.onSurfaceVariant,
-              ),
-            ),
-          ],
-        ),
       );
     }
 
@@ -116,23 +88,21 @@ class LibraryArtistsScreen extends StatelessWidget {
     Artist artist, {
     Key? key,
   }) {
-    final provider = context.read<MusicAssistantProvider>();
-    final imageUrl = provider.getImageUrl(artist, size: 128);
     final colorScheme = Theme.of(context).colorScheme;
     final textTheme = Theme.of(context).textTheme;
+    final maProvider = context.read<MusicAssistantProvider>();
+    // Get image URL for hero animation
+    final imageUrl = maProvider.getImageUrl(artist, size: 256);
 
     // RepaintBoundary isolates repaints to individual tiles
     return RepaintBoundary(
       child: ListTile(
         key: key,
-        leading: CircleAvatar(
+        leading: ArtistAvatar(
-        radius: 24,
+          artist: artist,
-        backgroundColor: colorScheme.surfaceVariant,
+          radius: 24,
-        backgroundImage: imageUrl != null ? CachedNetworkImageProvider(imageUrl) : null,
+          imageSize: 128,
-        child: imageUrl == null
+        ),
-            ? Icon(Icons.person_rounded, color: colorScheme.onSurfaceVariant)
-            : null,
-      ),
       title: Text(
         artist.name,
         style: textTheme.titleMedium?.copyWith(
@@ -149,6 +119,7 @@ class LibraryArtistsScreen extends StatelessWidget {
               child: ArtistDetailsScreen(
                 artist: artist,
                 heroTagSuffix: 'library',
+                initialImageUrl: imageUrl,
               ),
             ),
           );

lib/screens/library_playlists_screen.dart

@@ -3,6 +3,7 @@ import 'package:provider/provider.dart';
 import 'package:cached_network_image/cached_network_image.dart';
 import '../providers/music_assistant_provider.dart';
 import '../models/media_item.dart';
+import '../widgets/common/empty_state.dart';
 import 'playlist_details_screen.dart';
 
 class LibraryPlaylistsScreen extends StatefulWidget {
@@ -80,36 +81,7 @@ class _LibraryPlaylistsScreenState extends State<LibraryPlaylistsScreen> {
     }
 
     if (_playlists.isEmpty) {
-      return Center(
+      return EmptyState.playlists(onRefresh: _loadPlaylists);
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: [
-            Icon(
-              Icons.playlist_play_outlined,
-              size: 64,
-              color: colorScheme.onSurface.withOpacity(0.54),
-            ),
-            const SizedBox(height: 16),
-            Text(
-              'No playlists found',
-              style: TextStyle(
-                color: colorScheme.onSurface.withOpacity(0.7),
-                fontSize: 16,
-              ),
-            ),
-            const SizedBox(height: 24),
-            ElevatedButton.icon(
-              onPressed: _loadPlaylists,
-              icon: const Icon(Icons.refresh_rounded),
-              label: const Text('Refresh'),
-              style: ElevatedButton.styleFrom(
-                backgroundColor: colorScheme.surfaceVariant,
-                foregroundColor: colorScheme.onSurfaceVariant,
-              ),
-            ),
-          ],
-        ),
-      );
     }
 
     return RefreshIndicator(

lib/screens/library_screen.dart

@@ -1,456 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:provider/provider.dart';
-import 'package:cached_network_image/cached_network_image.dart';
-import '../providers/music_assistant_provider.dart';
-import '../models/media_item.dart';
-import 'album_details_screen.dart';
-import 'settings_screen.dart';
-
-class LibraryScreen extends StatefulWidget {
-  const LibraryScreen({super.key});
-
-  @override
-  State<LibraryScreen> createState() => _LibraryScreenState();
-}
-
-class _LibraryScreenState extends State<LibraryScreen>
-    with SingleTickerProviderStateMixin {
-  late TabController _tabController;
-  final _searchController = TextEditingController();
-
-  @override
-  void initState() {
-    super.initState();
-    _tabController = TabController(length: 3, vsync: this);
-  }
-
-  @override
-  void dispose() {
-    _tabController.dispose();
-    _searchController.dispose();
-    super.dispose();
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    final provider = context.watch<MusicAssistantProvider>();
-    final colorScheme = Theme.of(context).colorScheme;
-    final textTheme = Theme.of(context).textTheme;
-
-    return Scaffold(
-      backgroundColor: colorScheme.background,
-      appBar: AppBar(
-        backgroundColor: Colors.transparent,
-        elevation: 0,
-        title: Text(
-          'Library',
-          style: textTheme.titleLarge?.copyWith(
-            color: colorScheme.onBackground,
-            fontWeight: FontWeight.w300,
-          ),
-        ),
-        centerTitle: true,
-        actions: [
-          IconButton(
-            icon: const Icon(Icons.settings_rounded),
-            onPressed: () {
-              Navigator.push(
-                context,
-                MaterialPageRoute(
-                  builder: (context) => const SettingsScreen(),
-                ),
-              );
-            },
-            color: colorScheme.onBackground,
-          ),
-        ],
-        bottom: TabBar(
-          controller: _tabController,
-          indicatorColor: colorScheme.primary,
-          labelColor: colorScheme.primary,
-          unselectedLabelColor: colorScheme.onSurfaceVariant,
-          tabs: const [
-            Tab(text: 'Artists'),
-            Tab(text: 'Albums'),
-            Tab(text: 'Tracks'),
-          ],
-        ),
-      ),
-      body: !provider.isConnected
-          ? _buildDisconnectedView(provider)
-          : TabBarView(
-              controller: _tabController,
-              children: [
-                _buildArtistsList(provider),
-                _buildAlbumsList(provider),
-                _buildTracksList(provider),
-              ],
-            ),
-    );
-  }
-
-  Widget _buildDisconnectedView(MusicAssistantProvider provider) {
-    final colorScheme = Theme.of(context).colorScheme;
-    
-    return Center(
-      child: Padding(
-        padding: const EdgeInsets.all(32.0),
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: [
-            Icon(
-              Icons.cloud_off_rounded,
-              size: 64,
-              color: colorScheme.onSurface.withOpacity(0.54),
-            ),
-            const SizedBox(height: 16),
-            Text(
-              'Not connected to Music Assistant',
-              style: TextStyle(
-                color: colorScheme.onSurface.withOpacity(0.7),
-                fontSize: 16,
-              ),
-              textAlign: TextAlign.center,
-            ),
-            const SizedBox(height: 24),
-            ElevatedButton.icon(
-              onPressed: () {
-                Navigator.push(
-                  context,
-                  MaterialPageRoute(
-                    builder: (context) => const SettingsScreen(),
-                  ),
-                );
-              },
-              icon: const Icon(Icons.settings_rounded),
-              label: const Text('Configure Server'),
-              style: ElevatedButton.styleFrom(
-                backgroundColor: colorScheme.primary,
-                foregroundColor: colorScheme.onPrimary,
-                padding: const EdgeInsets.symmetric(
-                  horizontal: 24,
-                  vertical: 12,
-                ),
-                shape: RoundedRectangleBorder(
-                  borderRadius: BorderRadius.circular(24),
-                ),
-              ),
-            ),
-          ],
-        ),
-      ),
-    );
-  }
-
-  Widget _buildArtistsList(MusicAssistantProvider provider) {
-    final colorScheme = Theme.of(context).colorScheme;
-
-    if (provider.isLoading) {
-      return Center(
-        child: CircularProgressIndicator(color: colorScheme.primary),
-      );
-    }
-
-    if (provider.artists.isEmpty) {
-      return Center(
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: [
-            Icon(
-              Icons.person_outline_rounded,
-              size: 64,
-              color: colorScheme.onSurface.withOpacity(0.54),
-            ),
-            const SizedBox(height: 16),
-            Text(
-              'No artists found',
-              style: TextStyle(
-                color: colorScheme.onSurface.withOpacity(0.7),
-                fontSize: 16,
-              ),
-            ),
-            const SizedBox(height: 24),
-            ElevatedButton.icon(
-              onPressed: provider.loadLibrary,
-              icon: const Icon(Icons.refresh_rounded),
-              label: const Text('Refresh'),
-              style: ElevatedButton.styleFrom(
-                backgroundColor: colorScheme.surfaceVariant,
-                foregroundColor: colorScheme.onSurfaceVariant,
-              ),
-            ),
-          ],
-        ),
-      );
-    }
-
-    return ListView.builder(
-      itemCount: provider.artists.length,
-      padding: const EdgeInsets.all(8),
-      itemBuilder: (context, index) {
-        final artist = provider.artists[index];
-        return _buildArtistTile(artist, provider);
-      },
-    );
-  }
-
-  Widget _buildArtistTile(Artist artist, MusicAssistantProvider provider) {
-    final imageUrl = provider.getImageUrl(artist, size: 128);
-    final colorScheme = Theme.of(context).colorScheme;
-
-    return ListTile(
-      leading: CircleAvatar(
-        radius: 24,
-        backgroundColor: colorScheme.surfaceVariant,
-        backgroundImage: imageUrl != null ? CachedNetworkImageProvider(imageUrl) : null,
-        child: imageUrl == null
-            ? Icon(Icons.person_rounded, color: colorScheme.onSurfaceVariant)
-            : null,
-      ),
-      title: Text(
-        artist.name,
-        style: TextStyle(
-          color: colorScheme.onSurface,
-          fontWeight: FontWeight.w500,
-        ),
-        maxLines: 1,
-        overflow: TextOverflow.ellipsis,
-      ),
-      onTap: () async {
-        // Load albums for this artist
-        await provider.loadAlbums(artistId: '${artist.provider}/${artist.itemId}');
-        if (context.mounted) {
-          _tabController.animateTo(1);
-        }
-      },
-    );
-  }
-
-  Widget _buildAlbumsList(MusicAssistantProvider provider) {
-    final colorScheme = Theme.of(context).colorScheme;
-
-    if (provider.isLoading) {
-      return Center(
-        child: CircularProgressIndicator(color: colorScheme.primary),
-      );
-    }
-
-    if (provider.albums.isEmpty) {
-      return Center(
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: [
-            Icon(
-              Icons.album_outlined,
-              size: 64,
-              color: colorScheme.onSurface.withOpacity(0.54),
-            ),
-            const SizedBox(height: 16),
-            Text(
-              'No albums found',
-              style: TextStyle(
-                color: colorScheme.onSurface.withOpacity(0.7),
-                fontSize: 16,
-              ),
-            ),
-            const SizedBox(height: 24),
-            ElevatedButton.icon(
-              onPressed: provider.loadLibrary,
-              icon: const Icon(Icons.refresh_rounded),
-              label: const Text('Refresh'),
-              style: ElevatedButton.styleFrom(
-                backgroundColor: colorScheme.surfaceVariant,
-                foregroundColor: colorScheme.onSurfaceVariant,
-              ),
-            ),
-          ],
-        ),
-      );
-    }
-
-    return GridView.builder(
-      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
-        crossAxisCount: 2,
-        childAspectRatio: 0.75,
-        crossAxisSpacing: 12,
-        mainAxisSpacing: 12,
-      ),
-      padding: const EdgeInsets.all(12),
-      itemCount: provider.albums.length,
-      itemBuilder: (context, index) {
-        final album = provider.albums[index];
-        return _buildAlbumCard(album, provider);
-      },
-    );
-  }
-
-  Widget _buildAlbumCard(Album album, MusicAssistantProvider provider) {
-    final imageUrl = provider.getImageUrl(album, size: 256);
-    final colorScheme = Theme.of(context).colorScheme;
-
-    return InkWell(
-      onTap: () {
-        Navigator.push(
-          context,
-          MaterialPageRoute(
-            builder: (context) => AlbumDetailsScreen(album: album),
-          ),
-        );
-      },
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          Expanded(
-            child: Container(
-              decoration: BoxDecoration(
-                color: colorScheme.surfaceVariant,
-                borderRadius: BorderRadius.circular(12),
-                image: imageUrl != null
-                    ? DecorationImage(
-                        image: CachedNetworkImageProvider(imageUrl),
-                        fit: BoxFit.cover,
-                      )
-                    : null,
-              ),
-              child: imageUrl == null
-                  ? Center(
-                      child: Icon(
-                        Icons.album_rounded,
-                        size: 64,
-                        color: colorScheme.onSurfaceVariant,
-                      ),
-                    )
-                  : null,
-            ),
-          ),
-          const SizedBox(height: 8),
-          Text(
-            album.name,
-            style: TextStyle(
-              color: colorScheme.onSurface,
-              fontSize: 14,
-              fontWeight: FontWeight.w500,
-            ),
-            maxLines: 1,
-            overflow: TextOverflow.ellipsis,
-          ),
-          Text(
-            album.artistsString,
-            style: TextStyle(
-              color: colorScheme.onSurface.withOpacity(0.7),
-              fontSize: 12,
-            ),
-            maxLines: 1,
-            overflow: TextOverflow.ellipsis,
-          ),
-        ],
-      ),
-    );
-  }
-
-  Widget _buildTracksList(MusicAssistantProvider provider) {
-    final colorScheme = Theme.of(context).colorScheme;
-
-    if (provider.isLoading) {
-      return Center(
-        child: CircularProgressIndicator(color: colorScheme.primary),
-      );
-    }
-
-    if (provider.tracks.isEmpty) {
-      return Center(
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: [
-            Icon(
-              Icons.music_note_outlined,
-              size: 64,
-              color: colorScheme.onSurface.withOpacity(0.54),
-            ),
-            const SizedBox(height: 16),
-            Text(
-              'No tracks found',
-              style: TextStyle(
-                color: colorScheme.onSurface.withOpacity(0.7),
-                fontSize: 16,
-              ),
-            ),
-            const SizedBox(height: 24),
-            ElevatedButton.icon(
-              onPressed: provider.loadLibrary,
-              icon: const Icon(Icons.refresh_rounded),
-              label: const Text('Refresh'),
-              style: ElevatedButton.styleFrom(
-                backgroundColor: colorScheme.surfaceVariant,
-                foregroundColor: colorScheme.onSurfaceVariant,
-              ),
-            ),
-          ],
-        ),
-      );
-    }
-
-    return ListView.builder(
-      itemCount: provider.tracks.length,
-      padding: const EdgeInsets.all(8),
-      itemBuilder: (context, index) {
-        final track = provider.tracks[index];
-        return _buildTrackTile(track, provider);
-      },
-    );
-  }
-
-  Widget _buildTrackTile(Track track, MusicAssistantProvider provider) {
-    final imageUrl = track.album != null
-        ? provider.getImageUrl(track.album!, size: 128)
-        : null;
-    final colorScheme = Theme.of(context).colorScheme;
-
-    return ListTile(
-      leading: Container(
-        width: 48,
-        height: 48,
-        decoration: BoxDecoration(
-          color: colorScheme.surfaceVariant,
-          borderRadius: BorderRadius.circular(8),
-          image: imageUrl != null
-              ? DecorationImage(
-                  image: CachedNetworkImageProvider(imageUrl),
-                  fit: BoxFit.cover,
-                )
-              : null,
-        ),
-        child: imageUrl == null
-            ? Icon(Icons.music_note_rounded, color: colorScheme.onSurfaceVariant)
-            : null,
-      ),
-      title: Text(
-        track.name,
-        style: TextStyle(color: colorScheme.onSurface),
-        maxLines: 1,
-        overflow: TextOverflow.ellipsis,
-      ),
-      subtitle: Text(
-        track.artistsString,
-        style: TextStyle(color: colorScheme.onSurface.withOpacity(0.7), fontSize: 12),
-        maxLines: 1,
-        overflow: TextOverflow.ellipsis,
-      ),
-      trailing: track.duration != null
-          ? Text(
-              _formatDuration(track.duration!),
-              style: TextStyle(color: colorScheme.onSurface.withOpacity(0.54), fontSize: 12),
-            )
-          : null,
-      onTap: () {
-        // TODO: Play track
-      },
-    );
-  }
-
-  String _formatDuration(Duration duration) {
-    final minutes = duration.inMinutes;
-    final seconds = duration.inSeconds % 60;
-    return '$minutes:${seconds.toString().padLeft(2, '0')}';
-  }
-}

lib/screens/library_tracks_screen.dart

@@ -3,6 +3,7 @@ import 'package:provider/provider.dart';
 import 'package:cached_network_image/cached_network_image.dart';
 import '../providers/music_assistant_provider.dart';
 import '../models/media_item.dart';
+import '../widgets/common/empty_state.dart';
 
 class LibraryTracksScreen extends StatelessWidget {
   const LibraryTracksScreen({super.key});
@@ -47,36 +48,7 @@ class LibraryTracksScreen extends StatelessWidget {
     }
 
     if (provider.tracks.isEmpty) {
-      return Center(
+      return EmptyState.tracks(onRefresh: provider.loadLibrary);
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: [
-            Icon(
-              Icons.music_note_outlined,
-              size: 64,
-              color: colorScheme.onSurface.withOpacity(0.54),
-            ),
-            const SizedBox(height: 16),
-            Text(
-              'No tracks found',
-              style: TextStyle(
-                color: colorScheme.onSurface.withOpacity(0.7),
-                fontSize: 16,
-              ),
-            ),
-            const SizedBox(height: 24),
-            ElevatedButton.icon(
-              onPressed: provider.loadLibrary,
-              icon: const Icon(Icons.refresh_rounded),
-              label: const Text('Refresh'),
-              style: ElevatedButton.styleFrom(
-                backgroundColor: colorScheme.surfaceVariant,
-                foregroundColor: colorScheme.onSurfaceVariant,
-              ),
-            ),
-          ],
-        ),
-      );
     }
 
     return ListView.builder(

lib/screens/login_screen.dart

@@ -1,10 +1,10 @@
 import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
 import 'package:provider/provider.dart';
 import '../providers/music_assistant_provider.dart';
 import '../services/settings_service.dart';
 import '../services/auth/auth_strategy.dart';
 import '../services/debug_logger.dart';
+import '../widgets/debug/debug_console.dart';
 import 'home_screen.dart';
 
 class LoginScreen extends StatefulWidget {
@@ -767,141 +767,16 @@ class _LoginScreenState extends State<LoginScreen> {
                 ),
 
               // Debug toggle button
-              TextButton.icon(
+              DebugToggleButton(
-                onPressed: () {
+                isVisible: _showDebug,
-                  setState(() {
+                onToggle: () => setState(() => _showDebug = !_showDebug),
-                    _showDebug = !_showDebug;
-                  });
-                },
-                icon: Icon(
-                  _showDebug ? Icons.bug_report : Icons.bug_report_outlined,
-                  size: 16,
-                ),
-                label: Text(
-                  _showDebug ? 'Hide Debug' : 'Show Debug',
-                  style: const TextStyle(fontSize: 12),
-                ),
               ),
 
               // Debug panel
               if (_showDebug) ...[
                 const SizedBox(height: 16),
-                Container(
+                DebugConsole(
-                  padding: const EdgeInsets.all(12),
+                  onClear: () => setState(() => _debugLogs.clear()),
-                  decoration: BoxDecoration(
-                    color: Colors.black.withOpacity(0.8),
-                    borderRadius: BorderRadius.circular(8),
-                    border: Border.all(color: Colors.green.withOpacity(0.3)),
-                  ),
-                  constraints: const BoxConstraints(maxHeight: 200),
-                  child: Column(
-                    crossAxisAlignment: CrossAxisAlignment.stretch,
-                    children: [
-                      Row(
-                        children: [
-                          const Icon(Icons.terminal, color: Colors.green, size: 16),
-                          const SizedBox(width: 8),
-                          const Text(
-                            'Debug Console',
-                            style: TextStyle(
-                              color: Colors.green,
-                              fontSize: 12,
-                              fontWeight: FontWeight.bold,
-                            ),
-                          ),
-                          const Spacer(),
-                          TextButton.icon(
-                            onPressed: () {
-                              final logs = DebugLogger().getAllLogs();
-                              if (logs.isNotEmpty) {
-                                Clipboard.setData(ClipboardData(text: logs));
-                                ScaffoldMessenger.of(context).showSnackBar(
-                                  const SnackBar(
-                                    content: Text('Logs copied to clipboard'),
-                                    backgroundColor: Colors.green,
-                                    duration: Duration(seconds: 2),
-                                  ),
-                                );
-                              } else {
-                                ScaffoldMessenger.of(context).showSnackBar(
-                                  const SnackBar(
-                                    content: Text('No logs to copy'),
-                                    duration: Duration(seconds: 2),
-                                  ),
-                                );
-                              }
-                            },
-                            style: TextButton.styleFrom(
-                              padding: EdgeInsets.zero,
-                              minimumSize: const Size(50, 20),
-                            ),
-                            icon: const Icon(Icons.copy, size: 10, color: Colors.green),
-                            label: const Text(
-                              'Copy',
-                              style: TextStyle(fontSize: 10, color: Colors.green),
-                            ),
-                          ),
-                          TextButton(
-                            onPressed: () {
-                              DebugLogger().clear();
-                              setState(() {
-                                _debugLogs.clear();
-                              });
-                            },
-                            style: TextButton.styleFrom(
-                              padding: EdgeInsets.zero,
-                              minimumSize: const Size(40, 20),
-                            ),
-                            child: const Text(
-                              'Clear',
-                              style: TextStyle(fontSize: 10, color: Colors.green),
-                            ),
-                          ),
-                        ],
-                      ),
-                      const Divider(color: Colors.green, height: 8),
-                      Expanded(
-                        child: SingleChildScrollView(
-                          reverse: true,
-                          child: Builder(
-                            builder: (context) {
-                              // Get all logs from DebugLogger singleton
-                              final allLogs = DebugLogger().logs;
-                              final recentLogs = allLogs.length > 50
-                                  ? allLogs.sublist(allLogs.length - 50)
-                                  : allLogs;
-
-                              return recentLogs.isEmpty
-                                  ? const Text(
-                                      'No debug logs yet. Try detecting auth.',
-                                      style: TextStyle(
-                                        color: Colors.green,
-                                        fontSize: 10,
-                                        fontStyle: FontStyle.italic,
-                                      ),
-                                    )
-                                  : Column(
-                                      crossAxisAlignment: CrossAxisAlignment.start,
-                                      children: recentLogs
-                                          .map((log) => Padding(
-                                                padding: const EdgeInsets.only(bottom: 2),
-                                                child: Text(
-                                                  log,
-                                                  style: const TextStyle(
-                                                    color: Colors.green,
-                                                    fontSize: 10,
-                                                    fontFamily: 'monospace',
-                                                  ),
-                                                ),
-                                              ))
-                                          .toList(),
-                                    );
-                            },
-                          ),
-                        ),
-                      ),
-                    ],
-                  ),
                 ),
                 const SizedBox(height: 16),
               ],

lib/screens/new_home_screen.dart

@@ -5,6 +5,7 @@ import '../widgets/global_player_overlay.dart';
 import '../widgets/player_selector.dart';
 import '../widgets/album_row.dart';
 import '../widgets/artist_row.dart';
+import '../widgets/common/disconnected_state.dart';
 import 'settings_screen.dart';
 import 'search_screen.dart';
 
@@ -74,7 +75,12 @@ class _NewHomeScreenState extends State<NewHomeScreen> with AutomaticKeepAliveCl
           builder: (context, isConnected, child) {
             final maProvider = context.read<MusicAssistantProvider>();
             return !isConnected
-                ? _buildDisconnectedView(context, maProvider)
+                ? DisconnectedState.full(
+                    onSettings: () => Navigator.push(
+                      context,
+                      MaterialPageRoute(builder: (context) => const SettingsScreen()),
+                    ),
+                  )
                 : RefreshIndicator(
                     onRefresh: _onRefresh,
                     color: colorScheme.primary,
@@ -87,68 +93,6 @@ class _NewHomeScreenState extends State<NewHomeScreen> with AutomaticKeepAliveCl
     );
   }
 
-  Widget _buildDisconnectedView(
-      BuildContext context, MusicAssistantProvider provider) {
-    final colorScheme = Theme.of(context).colorScheme;
-
-    return Center(
-      child: Padding(
-        padding: const EdgeInsets.all(32.0),
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: [
-            Icon(
-              Icons.cloud_off_rounded,
-              size: 80,
-              color: colorScheme.onSurface.withOpacity(0.54),
-            ),
-            const SizedBox(height: 24),
-            Text(
-              'Not Connected',
-              style: TextStyle(
-                color: colorScheme.onSurface,
-                fontSize: 24,
-                fontWeight: FontWeight.w300,
-              ),
-            ),
-            const SizedBox(height: 12),
-            Text(
-              'Connect to your Music Assistant server to start listening',
-              style: TextStyle(
-                color: colorScheme.onSurface.withOpacity(0.7),
-                fontSize: 14,
-              ),
-              textAlign: TextAlign.center,
-            ),
-            const SizedBox(height: 32),
-            ElevatedButton.icon(
-              onPressed: () {
-                Navigator.push(
-                  context,
-                  MaterialPageRoute(
-                    builder: (context) => const SettingsScreen(),
-                  ),
-                );
-              },
-              icon: const Icon(Icons.settings_rounded),
-              label: const Text('Configure Server'),
-              style: ElevatedButton.styleFrom(
-                backgroundColor: colorScheme.primary,
-                foregroundColor: colorScheme.onPrimary,
-                padding: const EdgeInsets.symmetric(
-                  horizontal: 32,
-                  vertical: 16,
-                ),
-                shape: RoundedRectangleBorder(
-                  borderRadius: BorderRadius.circular(24),
-                ),
-              ),
-            ),
-          ],
-        ),
-      ),
-    );
-  }
 
   Widget _buildConnectedView(
       BuildContext context, MusicAssistantProvider provider) {
@@ -162,7 +106,9 @@ class _NewHomeScreenState extends State<NewHomeScreen> with AutomaticKeepAliveCl
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           // Recently played albums (with caching)
+          // Stable keys prevent widget recreation on parent rebuilds
           AlbumRow(
+            key: const ValueKey('recent-albums'),
             title: 'Recently Played',
             loadAlbums: () => provider.getRecentAlbumsWithCache(),
           ),
@@ -170,6 +116,7 @@ class _NewHomeScreenState extends State<NewHomeScreen> with AutomaticKeepAliveCl
 
           // Discover Artists (with caching)
           ArtistRow(
+            key: const ValueKey('discover-artists'),
             title: 'Discover Artists',
             loadArtists: () => provider.getDiscoverArtistsWithCache(),
           ),
@@ -177,6 +124,7 @@ class _NewHomeScreenState extends State<NewHomeScreen> with AutomaticKeepAliveCl
 
           // Discover Albums (with caching)
           AlbumRow(
+            key: const ValueKey('discover-albums'),
             title: 'Discover Albums',
             loadAlbums: () => provider.getDiscoverAlbumsWithCache(),
           ),

lib/screens/new_library_screen.dart

@@ -6,9 +6,12 @@ import '../models/media_item.dart';
 import '../widgets/global_player_overlay.dart';
 import '../widgets/player_selector.dart';
 import '../widgets/album_card.dart';
+import '../widgets/artist_avatar.dart';
 import '../utils/page_transitions.dart';
 import '../constants/hero_tags.dart';
 import '../theme/theme_provider.dart';
+import '../widgets/common/empty_state.dart';
+import '../widgets/common/disconnected_state.dart';
 import 'artist_details_screen.dart';
 import 'playlist_details_screen.dart';
 import 'settings_screen.dart';
@@ -24,11 +27,16 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
     with SingleTickerProviderStateMixin, RestorationMixin {
   late TabController _tabController;
   List<Playlist> _playlists = [];
+  List<Track> _favoriteTracks = [];
   bool _isLoadingPlaylists = true;
+  bool _isLoadingTracks = false;
+  bool _showFavoritesOnly = false;
 
   // Restoration: Remember selected tab across app restarts
   final RestorableInt _selectedTabIndex = RestorableInt(0);
 
+  int get _tabCount => _showFavoritesOnly ? 4 : 3;
+
   @override
   String? get restorationId => 'new_library_screen';
 
@@ -36,7 +44,8 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
   void restoreState(RestorationBucket? oldBucket, bool initialRestore) {
     registerForRestoration(_selectedTabIndex, 'selected_tab_index');
     // Apply restored tab index after TabController is created
-    if (_tabController.index != _selectedTabIndex.value) {
+    if (_tabController.index != _selectedTabIndex.value &&
+        _selectedTabIndex.value < _tabController.length) {
       _tabController.index = _selectedTabIndex.value;
     }
   }
@@ -44,12 +53,24 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
   @override
   void initState() {
     super.initState();
-    _tabController = TabController(length: 3, vsync: this);
+    _tabController = TabController(length: _tabCount, vsync: this);
     // Listen to tab changes to persist selection
     _tabController.addListener(_onTabChanged);
     _loadPlaylists();
   }
 
+  void _recreateTabController() {
+    final oldIndex = _tabController.index;
+    _tabController.removeListener(_onTabChanged);
+    _tabController.dispose();
+    _tabController = TabController(length: _tabCount, vsync: this);
+    _tabController.addListener(_onTabChanged);
+    // Restore to previous index if valid, otherwise default to 0
+    if (oldIndex < _tabCount) {
+      _tabController.index = oldIndex;
+    }
+  }
+
   void _onTabChanged() {
     if (!_tabController.indexIsChanging) {
       _selectedTabIndex.value = _tabController.index;
@@ -64,10 +85,13 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
     super.dispose();
   }
 
-  Future<void> _loadPlaylists() async {
+  Future<void> _loadPlaylists({bool? favoriteOnly}) async {
     final maProvider = context.read<MusicAssistantProvider>();
     if (maProvider.api != null) {
-      final playlists = await maProvider.api!.getPlaylists(limit: 100);
+      final playlists = await maProvider.api!.getPlaylists(
+        limit: 100,
+        favoriteOnly: favoriteOnly,
+      );
       if (mounted) {
         setState(() {
           _playlists = playlists;
@@ -83,6 +107,47 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
     }
   }
 
+  Future<void> _loadFavoriteTracks() async {
+    if (_isLoadingTracks) return;
+
+    setState(() {
+      _isLoadingTracks = true;
+    });
+
+    final maProvider = context.read<MusicAssistantProvider>();
+    if (maProvider.api != null) {
+      final tracks = await maProvider.api!.getTracks(
+        limit: 500,
+        favoriteOnly: true,
+      );
+      if (mounted) {
+        setState(() {
+          _favoriteTracks = tracks;
+          _isLoadingTracks = false;
+        });
+      }
+    } else {
+      if (mounted) {
+        setState(() {
+          _isLoadingTracks = false;
+        });
+      }
+    }
+  }
+
+  void _toggleFavoritesMode(bool value) {
+    setState(() {
+      _showFavoritesOnly = value;
+      _recreateTabController();
+    });
+    if (value) {
+      _loadPlaylists(favoriteOnly: true);
+      _loadFavoriteTracks();
+    } else {
+      _loadPlaylists();
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
     // Use Selector for targeted rebuilds - only rebuild when connection state changes
@@ -108,7 +173,12 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
               centerTitle: true,
               actions: const [PlayerSelector()],
             ),
-            body: _buildDisconnectedView(context),
+            body: DisconnectedState.withSettingsAction(
+              onSettings: () => Navigator.push(
+                context,
+                MaterialPageRoute(builder: (context) => const SettingsScreen()),
+              ),
+            ),
           );
         }
 
@@ -117,15 +187,40 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
           appBar: AppBar(
             backgroundColor: Colors.transparent,
             elevation: 0,
-            title: Text(
+            titleSpacing: 16,
-              'Library',
+            title: Row(
-              style: textTheme.titleLarge?.copyWith(
+              children: [
-                color: colorScheme.onBackground,
+                // Favorites toggle with label
-                fontWeight: FontWeight.w300,
+                GestureDetector(
-              ),
+                  onTap: () => _toggleFavoritesMode(!_showFavoritesOnly),
+                  child: Row(
+                    mainAxisSize: MainAxisSize.min,
+                    children: [
+                      Switch(
+                        value: _showFavoritesOnly,
+                        onChanged: _toggleFavoritesMode,
+                        activeColor: colorScheme.primary,
+                        materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
+                      ),
+                      const SizedBox(width: 4),
+                      Text(
+                        'Favourites',
+                        style: textTheme.titleMedium?.copyWith(
+                          color: _showFavoritesOnly
+                              ? colorScheme.primary
+                              : colorScheme.onSurface.withOpacity(0.7),
+                          fontWeight: _showFavoritesOnly ? FontWeight.w500 : FontWeight.w400,
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+              ],
             ),
-            centerTitle: true,
+            centerTitle: false,
-            actions: const [PlayerSelector()],
+            actions: const [
+              PlayerSelector(),
+            ],
             bottom: TabBar(
               controller: _tabController,
               labelColor: colorScheme.primary,
@@ -134,10 +229,11 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
               indicatorWeight: 3,
               labelStyle: const TextStyle(fontWeight: FontWeight.w600, fontSize: 14),
               unselectedLabelStyle: const TextStyle(fontWeight: FontWeight.w400, fontSize: 14),
-              tabs: const [
+              tabs: [
-                Tab(text: 'Artists'),
+                const Tab(text: 'Artists'),
-                Tab(text: 'Albums'),
+                const Tab(text: 'Albums'),
-                Tab(text: 'Playlists'),
+                if (_showFavoritesOnly) const Tab(text: 'Tracks'),
+                const Tab(text: 'Playlists'),
               ],
             ),
           ),
@@ -146,6 +242,7 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
             children: [
               _buildArtistsTab(context),
               _buildAlbumsTab(context),
+              if (_showFavoritesOnly) _buildTracksTab(context),
               _buildPlaylistsTab(context),
             ],
           ),
@@ -154,70 +251,33 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
     );
   }
 
-  Widget _buildDisconnectedView(BuildContext context) {
-    final colorScheme = Theme.of(context).colorScheme;
-
-    return Center(
-      child: Padding(
-        padding: const EdgeInsets.all(32.0),
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: [
-            Icon(
-              Icons.cloud_off_rounded,
-              size: 64,
-              color: colorScheme.onSurface.withOpacity(0.54),
-            ),
-            const SizedBox(height: 16),
-            Text(
-              'Not connected to Music Assistant',
-              style: TextStyle(
-                color: colorScheme.onSurface.withOpacity(0.7),
-                fontSize: 16,
-              ),
-              textAlign: TextAlign.center,
-            ),
-            const SizedBox(height: 24),
-            ElevatedButton.icon(
-              onPressed: () {
-                Navigator.push(
-                  context,
-                  MaterialPageRoute(builder: (context) => const SettingsScreen()),
-                );
-              },
-              icon: const Icon(Icons.settings_rounded),
-              label: const Text('Configure Server'),
-              style: ElevatedButton.styleFrom(
-                backgroundColor: colorScheme.primary,
-                foregroundColor: colorScheme.onPrimary,
-                padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
-                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(24)),
-              ),
-            ),
-          ],
-        ),
-      ),
-    );
-  }
-
   // ============ ARTISTS TAB ============
   Widget _buildArtistsTab(BuildContext context) {
     // Use Selector for targeted rebuilds - only rebuild when artists or loading state changes
     return Selector<MusicAssistantProvider, (List<Artist>, bool)>(
       selector: (_, provider) => (provider.artists, provider.isLoading),
       builder: (context, data, _) {
-        final (artists, isLoading) = data;
+        final (allArtists, isLoading) = data;
         final colorScheme = Theme.of(context).colorScheme;
 
         if (isLoading) {
           return Center(child: CircularProgressIndicator(color: colorScheme.primary));
         }
 
+        // Filter by favorites if enabled
+        final artists = _showFavoritesOnly
+            ? allArtists.where((a) => a.favorite == true).toList()
+            : allArtists;
+
         if (artists.isEmpty) {
-          return _buildEmptyState(
+          if (_showFavoritesOnly) {
-            context,
+            return EmptyState.custom(
-            icon: Icons.person_outline_rounded,
+              icon: Icons.favorite_border,
-            message: 'No artists found',
+              title: 'No favorite artists',
+              subtitle: 'Tap the heart on an artist to add them to favorites',
+            );
+          }
+          return EmptyState.artists(
             onRefresh: () => context.read<MusicAssistantProvider>().loadLibrary(),
           );
         }
@@ -227,7 +287,7 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
           backgroundColor: colorScheme.surface,
           onRefresh: () async => context.read<MusicAssistantProvider>().loadLibrary(),
           child: ListView.builder(
-            key: const PageStorageKey<String>('library_artists_list'),
+            key: PageStorageKey<String>('library_artists_list_${_showFavoritesOnly ? 'fav' : 'all'}'),
             cacheExtent: 500, // Prebuild items off-screen for smoother scrolling
             itemCount: artists.length,
             padding: EdgeInsets.only(left: 8, right: 8, top: 8, bottom: BottomSpacing.navBarOnly),
@@ -250,26 +310,22 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
     Artist artist, {
     Key? key,
   }) {
-    final provider = context.read<MusicAssistantProvider>();
-    final imageUrl = provider.getImageUrl(artist, size: 128);
     final colorScheme = Theme.of(context).colorScheme;
     final textTheme = Theme.of(context).textTheme;
+    final maProvider = context.read<MusicAssistantProvider>();
     final suffix = '_library';
+    // Get image URL for hero animation
+    final imageUrl = maProvider.getImageUrl(artist, size: 256);
 
     return RepaintBoundary(
       child: ListTile(
         key: key,
-        leading: Hero(
+        leading: ArtistAvatar(
-        tag: HeroTags.artistImage + (artist.uri ?? artist.itemId) + suffix,
+          artist: artist,
-        child: CircleAvatar(
           radius: 24,
-          backgroundColor: colorScheme.surfaceVariant,
+          imageSize: 128,
-          backgroundImage: imageUrl != null ? CachedNetworkImageProvider(imageUrl) : null,
+          heroTag: HeroTags.artistImage + (artist.uri ?? artist.itemId) + suffix,
-          child: imageUrl == null
-              ? Icon(Icons.person_rounded, color: colorScheme.onSurfaceVariant)
-              : null,
         ),
-      ),
       title: Hero(
         tag: HeroTags.artistName + (artist.uri ?? artist.itemId) + suffix,
         child: Material(
@@ -286,14 +342,13 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
         ),
       ),
         onTap: () {
-          // Update adaptive colors immediately on tap
-          updateAdaptiveColorsFromImage(context, imageUrl);
           Navigator.push(
             context,
             FadeSlidePageRoute(
               child: ArtistDetailsScreen(
                 artist: artist,
                 heroTagSuffix: 'library',
+                initialImageUrl: imageUrl,
               ),
             ),
           );
@@ -308,18 +363,27 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
     return Selector<MusicAssistantProvider, (List<Album>, bool)>(
       selector: (_, provider) => (provider.albums, provider.isLoading),
       builder: (context, data, _) {
-        final (albums, isLoading) = data;
+        final (allAlbums, isLoading) = data;
         final colorScheme = Theme.of(context).colorScheme;
 
         if (isLoading) {
           return Center(child: CircularProgressIndicator(color: colorScheme.primary));
         }
 
+        // Filter by favorites if enabled
+        final albums = _showFavoritesOnly
+            ? allAlbums.where((a) => a.favorite == true).toList()
+            : allAlbums;
+
         if (albums.isEmpty) {
-          return _buildEmptyState(
+          if (_showFavoritesOnly) {
-            context,
+            return EmptyState.custom(
-            icon: Icons.album_outlined,
+              icon: Icons.favorite_border,
-            message: 'No albums found',
+              title: 'No favorite albums',
+              subtitle: 'Tap the heart on an album to add it to favorites',
+            );
+          }
+          return EmptyState.albums(
             onRefresh: () => context.read<MusicAssistantProvider>().loadLibrary(),
           );
         }
@@ -329,7 +393,7 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
           backgroundColor: colorScheme.surface,
           onRefresh: () async => context.read<MusicAssistantProvider>().loadLibrary(),
           child: GridView.builder(
-            key: const PageStorageKey<String>('library_albums_grid'),
+            key: PageStorageKey<String>('library_albums_grid_${_showFavoritesOnly ? 'fav' : 'all'}'),
             cacheExtent: 500, // Prebuild items off-screen for smoother scrolling
             padding: EdgeInsets.only(left: 16, right: 16, top: 16, bottom: BottomSpacing.navBarOnly),
             gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
@@ -362,20 +426,22 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
     }
 
     if (_playlists.isEmpty) {
-      return _buildEmptyState(
+      if (_showFavoritesOnly) {
-        context,
+        return EmptyState.custom(
-        icon: Icons.playlist_play_outlined,
+          icon: Icons.favorite_border,
-        message: 'No playlists found',
+          title: 'No favorite playlists',
-        onRefresh: _loadPlaylists,
+          subtitle: 'Tap the heart on a playlist to add it to favorites',
-      );
+        );
+      }
+      return EmptyState.playlists(onRefresh: () => _loadPlaylists());
     }
 
     return RefreshIndicator(
       color: colorScheme.primary,
       backgroundColor: colorScheme.surface,
-      onRefresh: _loadPlaylists,
+      onRefresh: () => _loadPlaylists(favoriteOnly: _showFavoritesOnly ? true : null),
       child: ListView.builder(
-        key: const PageStorageKey<String>('library_playlists_list'),
+        key: PageStorageKey<String>('library_playlists_list_${_showFavoritesOnly ? 'fav' : 'all'}'),
         cacheExtent: 500, // Prebuild items off-screen for smoother scrolling
         itemCount: _playlists.length,
         padding: EdgeInsets.only(left: 8, right: 8, top: 8, bottom: BottomSpacing.navBarOnly),
@@ -443,37 +509,116 @@ class _NewLibraryScreenState extends State<NewLibraryScreen>
     );
   }
 
-  // ============ SHARED WIDGETS ============
+  // ============ TRACKS TAB (favorites only) ============
-  Widget _buildEmptyState(
+  Widget _buildTracksTab(BuildContext context) {
-    BuildContext context, {
-    required IconData icon,
-    required String message,
-    required VoidCallback onRefresh,
-  }) {
     final colorScheme = Theme.of(context).colorScheme;
 
-    return Center(
+    if (_isLoadingTracks) {
-      child: Column(
+      return Center(child: CircularProgressIndicator(color: colorScheme.primary));
-        mainAxisAlignment: MainAxisAlignment.center,
+    }
-        children: [
+
-          Icon(icon, size: 64, color: colorScheme.onSurface.withOpacity(0.54)),
+    if (_favoriteTracks.isEmpty) {
-          const SizedBox(height: 16),
+      return EmptyState.custom(
-          Text(
+        icon: Icons.favorite_border,
-            message,
+        title: 'No favorite tracks',
-            style: TextStyle(color: colorScheme.onSurface.withOpacity(0.7), fontSize: 16),
+        subtitle: 'Long-press a track and tap the heart to add it to favorites',
-          ),
+      );
-          const SizedBox(height: 24),
+    }
-          ElevatedButton.icon(
+
-            onPressed: onRefresh,
+    // Sort tracks by artist name, then track name
-            icon: const Icon(Icons.refresh_rounded),
+    final sortedTracks = List<Track>.from(_favoriteTracks)
-            label: const Text('Refresh'),
+      ..sort((a, b) {
-            style: ElevatedButton.styleFrom(
+        final artistCompare = a.artistsString.compareTo(b.artistsString);
-              backgroundColor: colorScheme.surfaceVariant,
+        if (artistCompare != 0) return artistCompare;
-              foregroundColor: colorScheme.onSurfaceVariant,
+        return a.name.compareTo(b.name);
-            ),
+      });
-          ),
+
-        ],
+    return RefreshIndicator(
+      color: colorScheme.primary,
+      backgroundColor: colorScheme.surface,
+      onRefresh: _loadFavoriteTracks,
+      child: ListView.builder(
+        key: const PageStorageKey<String>('library_tracks_list'),
+        cacheExtent: 500,
+        padding: EdgeInsets.only(left: 8, right: 8, top: 8, bottom: BottomSpacing.navBarOnly),
+        itemCount: sortedTracks.length,
+        itemBuilder: (context, index) {
+          final track = sortedTracks[index];
+          return _buildTrackTile(context, track);
+        },
       ),
     );
   }
+
+  Widget _buildTrackTile(BuildContext context, Track track) {
+    final maProvider = context.read<MusicAssistantProvider>();
+    final colorScheme = Theme.of(context).colorScheme;
+    final textTheme = Theme.of(context).textTheme;
+
+    // Get image URL from track itself
+    final imageUrl = maProvider.api?.getImageUrl(track, size: 128);
+
+    return ListTile(
+      contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
+      leading: Container(
+        width: 48,
+        height: 48,
+        decoration: BoxDecoration(
+          color: colorScheme.surfaceVariant,
+          borderRadius: BorderRadius.circular(6),
+          image: imageUrl != null
+              ? DecorationImage(
+                  image: CachedNetworkImageProvider(imageUrl),
+                  fit: BoxFit.cover,
+                )
+              : null,
+        ),
+        child: imageUrl == null
+            ? Icon(Icons.music_note, color: colorScheme.onSurfaceVariant, size: 24)
+            : null,
+      ),
+      title: Text(
+        track.artistsString,
+        style: textTheme.bodyMedium?.copyWith(
+          color: colorScheme.onSurface,
+          fontWeight: FontWeight.w500,
+        ),
+        maxLines: 1,
+        overflow: TextOverflow.ellipsis,
+      ),
+      subtitle: Text(
+        track.name,
+        style: textTheme.bodySmall?.copyWith(
+          color: colorScheme.onSurface.withOpacity(0.7),
+        ),
+        maxLines: 1,
+        overflow: TextOverflow.ellipsis,
+      ),
+      trailing: const Icon(
+        Icons.favorite,
+        color: Colors.red,
+        size: 20,
+      ),
+      onTap: () async {
+        final player = maProvider.selectedPlayer;
+        if (player == null) {
+          ScaffoldMessenger.of(context).showSnackBar(
+            const SnackBar(content: Text('No player selected')),
+          );
+          return;
+        }
+
+        try {
+          // Start radio from this track
+          await maProvider.api?.playRadio(player.playerId, track);
+        } catch (e) {
+          if (mounted) {
+            ScaffoldMessenger.of(context).showSnackBar(
+              SnackBar(content: Text('Failed to start radio: $e')),
+            );
+          }
+        }
+      },
+    );
+  }
 }

lib/screens/playlist_details_screen.dart

@@ -2,6 +2,9 @@ import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import '../models/media_item.dart';
 import '../providers/music_assistant_provider.dart';
+import '../services/debug_logger.dart';
+
+final _playlistLogger = DebugLogger();
 
 class PlaylistDetailsScreen extends StatefulWidget {
   final Playlist playlist;
@@ -61,11 +64,11 @@ class _PlaylistDetailsScreenState extends State<PlaylistDetailsScreen> {
         return;
       }
 
-      print('🎵 Queueing playlist on ${player.name}: ${player.playerId}');
+      _playlistLogger.info('Queueing playlist on ${player.name}', context: 'Playlist');
 
       // Queue all tracks via Music Assistant
       await maProvider.playTracks(player.playerId, _tracks, startIndex: 0);
-      print('✓ Playlist queued on ${player.name}');
+      _playlistLogger.info('Playlist queued successfully', context: 'Playlist');
 
       if (mounted) {
         ScaffoldMessenger.of(context).showSnackBar(
@@ -76,7 +79,7 @@ class _PlaylistDetailsScreenState extends State<PlaylistDetailsScreen> {
         );
       }
     } catch (e) {
-      print('Error playing playlist: $e');
+      _playlistLogger.error('Error playing playlist', context: 'Playlist', error: e);
       _showError('Error playing playlist: $e');
     }
   }

lib/screens/queue_screen.dart

@@ -3,6 +3,7 @@ import 'package:provider/provider.dart';
 import '../providers/music_assistant_provider.dart';
 import '../models/player.dart';
 import '../services/debug_logger.dart';
+import '../widgets/common/empty_state.dart';
 
 class QueueScreen extends StatefulWidget {
   const QueueScreen({super.key});
@@ -139,19 +140,7 @@ class _QueueScreenState extends State<QueueScreen> {
     }
 
     if (_queue == null || _queue!.items.isEmpty) {
-      return Center(
+      return EmptyState.queue();
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: [
-            Icon(Icons.queue_music, size: 64, color: Colors.grey[700]),
-            const SizedBox(height: 16),
-            Text(
-              'Queue is empty',
-              style: TextStyle(color: Colors.grey[600], fontSize: 18),
-            ),
-          ],
-        ),
-      );
     }
 
     // Filter to show only current and upcoming items (not history)
@@ -159,18 +148,9 @@ class _QueueScreenState extends State<QueueScreen> {
     final upcomingItems = _queue!.items.sublist(currentIndex);
 
     if (upcomingItems.isEmpty) {
-      return Center(
+      return const EmptyState(
-        child: Column(
+        icon: Icons.queue_music,
-          mainAxisAlignment: MainAxisAlignment.center,
+        message: 'No upcoming tracks',
-          children: [
-            Icon(Icons.queue_music, size: 64, color: Colors.grey[700]),
-            const SizedBox(height: 16),
-            Text(
-              'No upcoming tracks',
-              style: TextStyle(color: Colors.grey[600], fontSize: 18),
-            ),
-          ],
-        ),
       );
     }
 
@@ -231,6 +211,9 @@ class _QueueScreenState extends State<QueueScreen> {
       ),
       onDismissed: (direction) {
         // TODO: Implement queue item removal via API
+        // Currently only removes locally from UI state, not from actual Music Assistant queue
+        // Need to investigate if Music Assistant API supports player_queues/remove_item or similar endpoint
+        // Requires: API method like removeQueueItem(queueId, queueItemId) that calls player_queues/remove_item
         setState(() {
           _queue!.items.removeAt(index);
         });

lib/screens/search_screen.dart

@@ -7,6 +7,9 @@ import '../providers/music_assistant_provider.dart';
 import '../models/media_item.dart';
 import '../services/debug_logger.dart';
 import '../widgets/global_player_overlay.dart';
+import '../widgets/common/empty_state.dart';
+import '../widgets/common/disconnected_state.dart';
+import '../widgets/artist_avatar.dart';
 import 'album_details_screen.dart';
 import 'artist_details_screen.dart';
 
@@ -17,6 +20,41 @@ class SearchScreen extends StatefulWidget {
   State<SearchScreen> createState() => SearchScreenState();
 }
 
+// Helper enum and class for ListView.builder item types
+enum _ListItemType { header, artist, album, track, spacer }
+
+class _ListItem {
+  final _ListItemType type;
+  final MediaItem? mediaItem;
+  final String? headerTitle;
+  final int? headerCount;
+
+  _ListItem.header(this.headerTitle, this.headerCount)
+      : type = _ListItemType.header,
+        mediaItem = null;
+
+  _ListItem.artist(this.mediaItem)
+      : type = _ListItemType.artist,
+        headerTitle = null,
+        headerCount = null;
+
+  _ListItem.album(this.mediaItem)
+      : type = _ListItemType.album,
+        headerTitle = null,
+        headerCount = null;
+
+  _ListItem.track(this.mediaItem)
+      : type = _ListItemType.track,
+        headerTitle = null,
+        headerCount = null;
+
+  _ListItem.spacer()
+      : type = _ListItemType.spacer,
+        mediaItem = null,
+        headerTitle = null,
+        headerCount = null;
+}
+
 class SearchScreenState extends State<SearchScreen> {
   final _logger = DebugLogger();
   final TextEditingController _searchController = TextEditingController();
@@ -62,11 +100,11 @@ class SearchScreenState extends State<SearchScreen> {
   void _onSearchChanged(String query) {
     _debounceTimer?.cancel();
     _debounceTimer = Timer(Timings.searchDebounce, () {
-      _performSearch(query);
+      _performSearch(query, keepFocus: true);
     });
   }
 
-  Future<void> _performSearch(String query) async {
+  Future<void> _performSearch(String query, {bool keepFocus = false}) async {
     if (query.isEmpty) {
       setState(() {
         _searchResults = {'artists': [], 'albums': [], 'tracks': []};
@@ -91,6 +129,10 @@ class SearchScreenState extends State<SearchScreen> {
           _isSearching = false;
           _hasSearched = true;
         });
+        // Keep keyboard open if user is still typing
+        if (keepFocus && _focusNode.hasFocus) {
+          _focusNode.requestFocus();
+        }
       }
     } catch (e) {
       _logger.log('Search error: $e');
@@ -100,6 +142,9 @@ class SearchScreenState extends State<SearchScreen> {
           _hasSearched = true;
           _searchError = 'Search failed. Please check your connection.';
         });
+        if (keepFocus && _focusNode.hasFocus) {
+          _focusNode.requestFocus();
+        }
       }
     }
   }
@@ -108,7 +153,6 @@ class SearchScreenState extends State<SearchScreen> {
   Widget build(BuildContext context) {
     final maProvider = context.watch<MusicAssistantProvider>();
     final colorScheme = Theme.of(context).colorScheme;
-    final textTheme = Theme.of(context).textTheme;
 
     return Scaffold(
       backgroundColor: colorScheme.background,
@@ -120,6 +164,7 @@ class SearchScreenState extends State<SearchScreen> {
           focusNode: _focusNode,
           style: TextStyle(color: colorScheme.onSurface),
           cursorColor: colorScheme.primary,
+          textInputAction: TextInputAction.search,
           decoration: InputDecoration(
             hintText: 'Search music...',
             hintStyle: TextStyle(color: colorScheme.onSurface.withOpacity(0.5)),
@@ -129,53 +174,28 @@ class SearchScreenState extends State<SearchScreen> {
                     icon: Icon(Icons.clear_rounded, color: colorScheme.onSurface.withOpacity(0.5)),
                     onPressed: () {
                       _searchController.clear();
-                      _performSearch('');
+                      setState(() {
+                        _searchResults = {'artists': [], 'albums': [], 'tracks': []};
+                        _hasSearched = false;
+                        _searchError = null;
+                      });
                     },
                   )
                 : null,
           ),
           onChanged: (value) {
-            setState(() {});
+            setState(() {}); // Update clear button visibility
             _onSearchChanged(value);
           },
-          onSubmitted: _performSearch,
+          onSubmitted: (query) => _performSearch(query),
         ),
       ),
       body: !maProvider.isConnected
-          ? _buildDisconnectedView()
+          ? DisconnectedState.simple()
           : _buildSearchContent(),
     );
   }
 
-  Widget _buildDisconnectedView() {
-    final colorScheme = Theme.of(context).colorScheme;
-    
-    return Center(
-      child: Padding(
-        padding: const EdgeInsets.all(32.0),
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: [
-            Icon(
-              Icons.cloud_off_rounded,
-              size: 64,
-              color: colorScheme.onBackground.withOpacity(0.54),
-            ),
-            const SizedBox(height: 16),
-            Text(
-              'Not connected to Music Assistant',
-              style: TextStyle(
-                color: colorScheme.onBackground.withOpacity(0.7),
-                fontSize: 16,
-              ),
-              textAlign: TextAlign.center,
-            ),
-          ],
-        ),
-      ),
-    );
-  }
-
   Widget _buildSearchContent() {
     final colorScheme = Theme.of(context).colorScheme;
 
@@ -244,26 +264,7 @@ class SearchScreenState extends State<SearchScreen> {
     final hasResults = artists.isNotEmpty || albums.isNotEmpty || tracks.isNotEmpty;
 
     if (!hasResults) {
-      return Center(
+      return EmptyState.search();
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: [
-            Icon(
-              Icons.search_off_rounded,
-              size: 64,
-              color: colorScheme.onBackground.withOpacity(0.3),
-            ),
-            const SizedBox(height: 16),
-            Text(
-              'No results found',
-              style: TextStyle(
-                color: colorScheme.onBackground.withOpacity(0.5),
-                fontSize: 16,
-              ),
-            ),
-          ],
-        ),
-      );
     }
 
     return Column(
@@ -293,30 +294,77 @@ class SearchScreenState extends State<SearchScreen> {
         
         // Results
         Expanded(
-          child: ListView(
+          child: Builder(
-            padding: EdgeInsets.fromLTRB(16, 8, 16, BottomSpacing.navBarOnly),
+            builder: (context) {
-            children: [
+              final listItems = _buildListItems(artists, albums, tracks);
-              if ((_activeFilter == 'all' || _activeFilter == 'artists') && artists.isNotEmpty) ...[
+              return ListView.builder(
-                if (_activeFilter == 'all') _buildSectionHeader('Artists', artists.length),
+                padding: EdgeInsets.fromLTRB(16, 8, 16, BottomSpacing.navBarOnly),
-                ...artists.map((item) => _buildArtistTile(item as Artist)),
+                itemCount: listItems.length,
-                const SizedBox(height: 24),
+                itemBuilder: (context, index) {
-              ],
+                  final item = listItems[index];
-              if ((_activeFilter == 'all' || _activeFilter == 'albums') && albums.isNotEmpty) ...[
+                  switch (item.type) {
-                if (_activeFilter == 'all') _buildSectionHeader('Albums', albums.length),
+                    case _ListItemType.header:
-                ...albums.map((item) => _buildAlbumTile(item as Album)),
+                      return _buildSectionHeader(item.headerTitle!, item.headerCount!);
-                const SizedBox(height: 24),
+                    case _ListItemType.artist:
-              ],
+                      return _buildArtistTile(item.mediaItem! as Artist);
-              if ((_activeFilter == 'all' || _activeFilter == 'tracks') && tracks.isNotEmpty) ...[
+                    case _ListItemType.album:
-                if (_activeFilter == 'all') _buildSectionHeader('Tracks', tracks.length),
+                      return _buildAlbumTile(item.mediaItem! as Album);
-                ...tracks.map((item) => _buildTrackTile(item as Track)),
+                    case _ListItemType.track:
-              ],
+                      return _buildTrackTile(item.mediaItem! as Track);
-            ],
+                    case _ListItemType.spacer:
+                      return const SizedBox(height: 24);
+                  }
+                },
+              );
+            },
           ),
         ),
       ],
     );
   }
 
+  List<_ListItem> _buildListItems(
+    List<MediaItem> artists,
+    List<MediaItem> albums,
+    List<MediaItem> tracks,
+  ) {
+    final items = <_ListItem>[];
+
+    // Add artists section
+    if ((_activeFilter == 'all' || _activeFilter == 'artists') && artists.isNotEmpty) {
+      if (_activeFilter == 'all') {
+        items.add(_ListItem.header('Artists', artists.length));
+      }
+      for (final artist in artists) {
+        items.add(_ListItem.artist(artist));
+      }
+      items.add(_ListItem.spacer());
+    }
+
+    // Add albums section
+    if ((_activeFilter == 'all' || _activeFilter == 'albums') && albums.isNotEmpty) {
+      if (_activeFilter == 'all') {
+        items.add(_ListItem.header('Albums', albums.length));
+      }
+      for (final album in albums) {
+        items.add(_ListItem.album(album));
+      }
+      items.add(_ListItem.spacer());
+    }
+
+    // Add tracks section
+    if ((_activeFilter == 'all' || _activeFilter == 'tracks') && tracks.isNotEmpty) {
+      if (_activeFilter == 'all') {
+        items.add(_ListItem.header('Tracks', tracks.length));
+      }
+      for (final track in tracks) {
+        items.add(_ListItem.track(track));
+      }
+    }
+
+    return items;
+  }
+
   Widget _buildFilterChip(String label, String value) {
     final isSelected = _activeFilter == value;
     final colorScheme = Theme.of(context).colorScheme;
@@ -355,18 +403,15 @@ class SearchScreenState extends State<SearchScreen> {
   }
 
   Widget _buildArtistTile(Artist artist) {
-    final maProvider = context.read<MusicAssistantProvider>();
-    final imageUrl = maProvider.getImageUrl(artist, size: 128);
     final colorScheme = Theme.of(context).colorScheme;
+    final maProvider = context.read<MusicAssistantProvider>();
+    final imageUrl = maProvider.getImageUrl(artist, size: 256);
 
     return ListTile(
-      leading: CircleAvatar(
+      leading: ArtistAvatar(
+        artist: artist,
         radius: 24,
-        backgroundColor: colorScheme.surfaceVariant,
+        imageSize: 128,
-        backgroundImage: imageUrl != null ? CachedNetworkImageProvider(imageUrl) : null,
-        child: imageUrl == null
-            ? Icon(Icons.person_rounded, color: colorScheme.onSurfaceVariant)
-            : null,
       ),
       title: Text(
         artist.name,
@@ -385,7 +430,10 @@ class SearchScreenState extends State<SearchScreen> {
         Navigator.push(
           context,
           MaterialPageRoute(
-            builder: (context) => ArtistDetailsScreen(artist: artist),
+            builder: (context) => ArtistDetailsScreen(
+              artist: artist,
+              initialImageUrl: imageUrl,
+            ),
           ),
         );
       },

lib/screens/settings_screen.dart

@@ -317,7 +317,7 @@ class _SettingsScreenState extends State<SettingsScreen> {
             ),
             const SizedBox(height: 8),
             Text(
-              'Add API keys to fetch artist biographies and album descriptions when Music Assistant doesn\'t have them',
+              'Artist images are automatically fetched from Deezer. Add API keys below for artist biographies and album descriptions.',
               style: textTheme.bodySmall?.copyWith(
                 color: colorScheme.onBackground.withOpacity(0.6),
               ),
@@ -365,7 +365,7 @@ class _SettingsScreenState extends State<SettingsScreen> {
               controller: _audioDbApiKeyController,
               style: TextStyle(color: colorScheme.onSurface),
               decoration: InputDecoration(
-                labelText: 'TheAudioDB API Key (Premium)',
+                labelText: 'TheAudioDB API Key',
                 hintText: 'Use "2" for free tier or premium key',
                 hintStyle: TextStyle(color: colorScheme.onSurface.withOpacity(0.38)),
                 filled: true,

lib/services/animation_debugger.dart

@@ -0,0 +1,236 @@
+import 'dart:collection';
+import 'package:flutter/material.dart';
+import 'package:flutter/scheduler.dart';
+import 'debug_logger.dart';
+
+/// Comprehensive animation debugging utility for diagnosing jank and performance issues.
+///
+/// Usage:
+/// 1. Call AnimationDebugger.startSession('playerExpand') at animation start
+/// 2. Call AnimationDebugger.recordFrame() in animation listener (every frame)
+/// 3. Call AnimationDebugger.endSession() when animation completes
+/// 4. Logs will show frame timing, jank detection, and summary stats
+class AnimationDebugger {
+  static final _logger = DebugLogger();
+  static bool _enabled = true;
+
+  // Session tracking
+  static String? _currentSession;
+  static int _frameCount = 0;
+  static final List<_FrameData> _frames = [];
+  static DateTime? _sessionStart;
+  static double? _lastAnimationValue;
+
+  // Scheduler binding for frame timing
+  static Duration? _lastFrameTime;
+
+  /// Enable or disable animation debugging
+  static void setEnabled(bool enabled) {
+    _enabled = enabled;
+  }
+
+  /// Start a new animation debugging session
+  static void startSession(String name) {
+    if (!_enabled) return;
+
+    _currentSession = name;
+    _frameCount = 0;
+    _frames.clear();
+    _sessionStart = DateTime.now();
+    _lastFrameTime = null;
+    _lastAnimationValue = null;
+
+    // Listen to frame timing
+    SchedulerBinding.instance.addPostFrameCallback(_onFirstFrame);
+
+    _logger.log('🎬 ANIM[$name] START');
+  }
+
+  static void _onFirstFrame(Duration timestamp) {
+    _lastFrameTime = timestamp;
+  }
+
+  /// Record a frame during animation
+  /// [animationValue] - current animation progress (0.0 to 1.0)
+  /// [context] - optional context string for this frame
+  static void recordFrame(double animationValue, {String? context}) {
+    if (!_enabled || _currentSession == null) return;
+
+    final now = DateTime.now();
+    final frameTime = SchedulerBinding.instance.currentFrameTimeStamp;
+
+    Duration? frameDuration;
+    if (_lastFrameTime != null) {
+      frameDuration = frameTime - _lastFrameTime!;
+    }
+    _lastFrameTime = frameTime;
+
+    // Calculate animation delta
+    double? animationDelta;
+    if (_lastAnimationValue != null) {
+      animationDelta = (animationValue - _lastAnimationValue!).abs();
+    }
+    _lastAnimationValue = animationValue;
+
+    final frame = _FrameData(
+      frameNumber: _frameCount,
+      timestamp: now,
+      frameDuration: frameDuration,
+      animationValue: animationValue,
+      animationDelta: animationDelta,
+      context: context,
+    );
+
+    _frames.add(frame);
+    _frameCount++;
+
+    // Log jank immediately (frames > 16.67ms for 60fps)
+    if (frameDuration != null && frameDuration.inMicroseconds > 16667) {
+      final ms = frameDuration.inMicroseconds / 1000;
+      _logger.log('🔴 ANIM[$_currentSession] JANK frame $_frameCount: ${ms.toStringAsFixed(2)}ms (>${(ms/16.67).toStringAsFixed(1)}x target)');
+    }
+  }
+
+  /// Record a build/layout event during animation
+  static void recordBuild(String widgetName) {
+    if (!_enabled || _currentSession == null) return;
+    _logger.log('🔨 ANIM[$_currentSession] BUILD: $widgetName at frame $_frameCount');
+  }
+
+  /// End the current session and log summary
+  static void endSession() {
+    if (!_enabled || _currentSession == null) return;
+
+    final sessionName = _currentSession!;
+    final totalDuration = DateTime.now().difference(_sessionStart!);
+
+    // Calculate statistics
+    int jankFrames = 0;
+    int severeJankFrames = 0;
+    double maxFrameMs = 0;
+    double totalFrameMs = 0;
+    int measuredFrames = 0;
+
+    for (final frame in _frames) {
+      if (frame.frameDuration != null) {
+        final ms = frame.frameDuration!.inMicroseconds / 1000;
+        totalFrameMs += ms;
+        measuredFrames++;
+
+        if (ms > maxFrameMs) maxFrameMs = ms;
+        if (ms > 16.67) jankFrames++;
+        if (ms > 33.33) severeJankFrames++; // Dropped more than 1 frame
+      }
+    }
+
+    final avgFrameMs = measuredFrames > 0 ? totalFrameMs / measuredFrames : 0;
+    final effectiveFps = avgFrameMs > 0 ? 1000 / avgFrameMs : 0;
+
+    // Build summary
+    final buffer = StringBuffer();
+    buffer.writeln('');
+    buffer.writeln('═══════════════════════════════════════');
+    buffer.writeln('🎬 ANIMATION SUMMARY: $sessionName');
+    buffer.writeln('═══════════════════════════════════════');
+    buffer.writeln('Duration: ${totalDuration.inMilliseconds}ms');
+    buffer.writeln('Total frames: $_frameCount');
+    buffer.writeln('Measured frames: $measuredFrames');
+    buffer.writeln('Average frame: ${avgFrameMs.toStringAsFixed(2)}ms');
+    buffer.writeln('Max frame: ${maxFrameMs.toStringAsFixed(2)}ms');
+    buffer.writeln('Effective FPS: ${effectiveFps.toStringAsFixed(1)}');
+    buffer.writeln('Jank frames (>16.67ms): $jankFrames (${measuredFrames > 0 ? (jankFrames * 100 / measuredFrames).toStringAsFixed(1) : 0}%)');
+    buffer.writeln('Severe jank (>33.33ms): $severeJankFrames');
+
+    // List worst frames
+    if (_frames.isNotEmpty) {
+      final sortedFrames = List<_FrameData>.from(_frames)
+        ..sort((a, b) {
+          final aMs = a.frameDuration?.inMicroseconds ?? 0;
+          final bMs = b.frameDuration?.inMicroseconds ?? 0;
+          return bMs.compareTo(aMs);
+        });
+
+      final worstFrames = sortedFrames.take(5).where((f) => f.frameDuration != null && f.frameDuration!.inMicroseconds > 16667).toList();
+
+      if (worstFrames.isNotEmpty) {
+        buffer.writeln('');
+        buffer.writeln('Worst frames:');
+        for (final frame in worstFrames) {
+          final ms = frame.frameDuration!.inMicroseconds / 1000;
+          buffer.writeln('  Frame ${frame.frameNumber}: ${ms.toStringAsFixed(2)}ms (anim=${frame.animationValue.toStringAsFixed(3)})');
+        }
+      }
+    }
+
+    buffer.writeln('═══════════════════════════════════════');
+
+    _logger.log(buffer.toString());
+
+    // Reset
+    _currentSession = null;
+    _frames.clear();
+    _sessionStart = null;
+    _lastAnimationValue = null;
+  }
+
+  /// Log a one-off animation event (for Hero transitions, page transitions, etc.)
+  static void logEvent(String event, {String? details}) {
+    if (!_enabled) return;
+    final detailStr = details != null ? ' - $details' : '';
+    _logger.log('🎬 ANIM_EVENT: $event$detailStr');
+  }
+
+  /// Log frame callback timing (call this from addPostFrameCallback)
+  static void logPostFrame(String context) {
+    if (!_enabled) return;
+    final frameTime = SchedulerBinding.instance.currentFrameTimeStamp;
+    _logger.log('📐 POST_FRAME[$context]: ${frameTime.inMilliseconds}ms');
+  }
+
+  /// Create a HeroFlightShuttleBuilder that logs Hero animation progress
+  static HeroFlightShuttleBuilder createHeroDebugShuttle(String heroTag) {
+    return (
+      BuildContext flightContext,
+      Animation<double> animation,
+      HeroFlightDirection flightDirection,
+      BuildContext fromHeroContext,
+      BuildContext toHeroContext,
+    ) {
+      // Log Hero flight start
+      if (animation.value < 0.1) {
+        logEvent('Hero flight START', details: 'tag=$heroTag, direction=${flightDirection.name}');
+      }
+
+      // Add listener for completion (one-shot)
+      void onComplete(AnimationStatus status) {
+        if (status == AnimationStatus.completed || status == AnimationStatus.dismissed) {
+          logEvent('Hero flight END', details: 'tag=$heroTag, status=${status.name}');
+          animation.removeStatusListener(onComplete);
+        }
+      }
+      animation.addStatusListener(onComplete);
+
+      // Return default shuttle (the toHero's child)
+      final Hero toHero = toHeroContext.widget as Hero;
+      return toHero.child;
+    };
+  }
+}
+
+class _FrameData {
+  final int frameNumber;
+  final DateTime timestamp;
+  final Duration? frameDuration;
+  final double animationValue;
+  final double? animationDelta;
+  final String? context;
+
+  _FrameData({
+    required this.frameNumber,
+    required this.timestamp,
+    this.frameDuration,
+    required this.animationValue,
+    this.animationDelta,
+    this.context,
+  });
+}

lib/services/cache_service.dart

@@ -0,0 +1,254 @@
+import '../models/media_item.dart';
+import '../services/debug_logger.dart';
+import '../constants/timings.dart';
+
+/// Centralized cache service for all app data caching
+/// This is a non-notifying service - it just stores and retrieves cached data
+class CacheService {
+  final DebugLogger _logger = DebugLogger();
+
+  // Home screen row caching
+  List<Album>? _cachedRecentAlbums;
+  List<Artist>? _cachedDiscoverArtists;
+  List<Album>? _cachedDiscoverAlbums;
+  DateTime? _recentAlbumsLastFetched;
+  DateTime? _discoverArtistsLastFetched;
+  DateTime? _discoverAlbumsLastFetched;
+
+  // Detail screen caching
+  final Map<String, List<Track>> _albumTracksCache = {};
+  final Map<String, DateTime> _albumTracksCacheTime = {};
+  final Map<String, List<Track>> _playlistTracksCache = {};
+  final Map<String, DateTime> _playlistTracksCacheTime = {};
+  final Map<String, List<Album>> _artistAlbumsCache = {};
+  final Map<String, DateTime> _artistAlbumsCacheTime = {};
+
+  // Search results caching
+  final Map<String, Map<String, List<MediaItem>>> _searchCache = {};
+  final Map<String, DateTime> _searchCacheTime = {};
+
+  // Player list caching
+  DateTime? _playersLastFetched;
+
+  // Player track cache (for smooth swipe transitions)
+  final Map<String, Track?> _playerTrackCache = {};
+
+  // ============================================================================
+  // HOME SCREEN ROW CACHING
+  // ============================================================================
+
+  /// Check if recent albums cache is valid
+  bool isRecentAlbumsCacheValid({bool forceRefresh = false}) {
+    if (forceRefresh) return false;
+    final now = DateTime.now();
+    return _cachedRecentAlbums != null &&
+        _recentAlbumsLastFetched != null &&
+        now.difference(_recentAlbumsLastFetched!) < Timings.homeRowCacheDuration;
+  }
+
+  /// Get cached recent albums
+  List<Album>? getCachedRecentAlbums() => _cachedRecentAlbums;
+
+  /// Set cached recent albums
+  void setCachedRecentAlbums(List<Album> albums) {
+    _cachedRecentAlbums = albums;
+    _recentAlbumsLastFetched = DateTime.now();
+    _logger.log('✅ Cached ${albums.length} recent albums');
+  }
+
+  /// Check if discover artists cache is valid
+  bool isDiscoverArtistsCacheValid({bool forceRefresh = false}) {
+    if (forceRefresh) return false;
+    final now = DateTime.now();
+    return _cachedDiscoverArtists != null &&
+        _discoverArtistsLastFetched != null &&
+        now.difference(_discoverArtistsLastFetched!) < Timings.homeRowCacheDuration;
+  }
+
+  /// Get cached discover artists
+  List<Artist>? getCachedDiscoverArtists() => _cachedDiscoverArtists;
+
+  /// Set cached discover artists
+  void setCachedDiscoverArtists(List<Artist> artists) {
+    _cachedDiscoverArtists = artists;
+    _discoverArtistsLastFetched = DateTime.now();
+    _logger.log('✅ Cached ${artists.length} discover artists');
+  }
+
+  /// Check if discover albums cache is valid
+  bool isDiscoverAlbumsCacheValid({bool forceRefresh = false}) {
+    if (forceRefresh) return false;
+    final now = DateTime.now();
+    return _cachedDiscoverAlbums != null &&
+        _discoverAlbumsLastFetched != null &&
+        now.difference(_discoverAlbumsLastFetched!) < Timings.homeRowCacheDuration;
+  }
+
+  /// Get cached discover albums
+  List<Album>? getCachedDiscoverAlbums() => _cachedDiscoverAlbums;
+
+  /// Set cached discover albums
+  void setCachedDiscoverAlbums(List<Album> albums) {
+    _cachedDiscoverAlbums = albums;
+    _discoverAlbumsLastFetched = DateTime.now();
+    _logger.log('✅ Cached ${albums.length} discover albums');
+  }
+
+  /// Invalidate home screen cache (call on pull-to-refresh)
+  void invalidateHomeCache() {
+    _recentAlbumsLastFetched = null;
+    _discoverArtistsLastFetched = null;
+    _discoverAlbumsLastFetched = null;
+    _logger.log('🗑️ Home screen cache invalidated');
+  }
+
+  // ============================================================================
+  // DETAIL SCREEN CACHING
+  // ============================================================================
+
+  /// Check if album tracks cache is valid
+  bool isAlbumTracksCacheValid(String cacheKey, {bool forceRefresh = false}) {
+    if (forceRefresh) return false;
+    final now = DateTime.now();
+    final cacheTime = _albumTracksCacheTime[cacheKey];
+    return _albumTracksCache.containsKey(cacheKey) &&
+        cacheTime != null &&
+        now.difference(cacheTime) < const Duration(minutes: 5);
+  }
+
+  /// Get cached album tracks
+  List<Track>? getCachedAlbumTracks(String cacheKey) => _albumTracksCache[cacheKey];
+
+  /// Set cached album tracks
+  void setCachedAlbumTracks(String cacheKey, List<Track> tracks) {
+    _albumTracksCache[cacheKey] = tracks;
+    _albumTracksCacheTime[cacheKey] = DateTime.now();
+    _logger.log('✅ Cached ${tracks.length} tracks for album $cacheKey');
+  }
+
+  /// Invalidate album tracks cache
+  void invalidateAlbumTracksCache(String albumId) {
+    _albumTracksCache.remove(albumId);
+    _albumTracksCacheTime.remove(albumId);
+  }
+
+  /// Check if playlist tracks cache is valid
+  bool isPlaylistTracksCacheValid(String cacheKey, {bool forceRefresh = false}) {
+    if (forceRefresh) return false;
+    final now = DateTime.now();
+    final cacheTime = _playlistTracksCacheTime[cacheKey];
+    return _playlistTracksCache.containsKey(cacheKey) &&
+        cacheTime != null &&
+        now.difference(cacheTime) < const Duration(minutes: 5);
+  }
+
+  /// Get cached playlist tracks
+  List<Track>? getCachedPlaylistTracks(String cacheKey) => _playlistTracksCache[cacheKey];
+
+  /// Set cached playlist tracks
+  void setCachedPlaylistTracks(String cacheKey, List<Track> tracks) {
+    _playlistTracksCache[cacheKey] = tracks;
+    _playlistTracksCacheTime[cacheKey] = DateTime.now();
+    _logger.log('✅ Cached ${tracks.length} tracks for playlist $cacheKey');
+  }
+
+  /// Invalidate playlist tracks cache
+  void invalidatePlaylistTracksCache(String playlistId) {
+    _playlistTracksCache.remove(playlistId);
+    _playlistTracksCacheTime.remove(playlistId);
+  }
+
+  /// Check if artist albums cache is valid
+  bool isArtistAlbumsCacheValid(String cacheKey, {bool forceRefresh = false}) {
+    if (forceRefresh) return false;
+    final now = DateTime.now();
+    final cacheTime = _artistAlbumsCacheTime[cacheKey];
+    return _artistAlbumsCache.containsKey(cacheKey) &&
+        cacheTime != null &&
+        now.difference(cacheTime) < Timings.homeRowCacheDuration;
+  }
+
+  /// Get cached artist albums
+  List<Album>? getCachedArtistAlbums(String cacheKey) => _artistAlbumsCache[cacheKey];
+
+  /// Set cached artist albums
+  void setCachedArtistAlbums(String cacheKey, List<Album> albums) {
+    _artistAlbumsCache[cacheKey] = albums;
+    _artistAlbumsCacheTime[cacheKey] = DateTime.now();
+    _logger.log('✅ Cached ${albums.length} albums for artist $cacheKey');
+  }
+
+  // ============================================================================
+  // SEARCH CACHING
+  // ============================================================================
+
+  /// Check if search cache is valid
+  bool isSearchCacheValid(String cacheKey, {bool forceRefresh = false}) {
+    if (forceRefresh) return false;
+    final now = DateTime.now();
+    final cacheTime = _searchCacheTime[cacheKey];
+    return _searchCache.containsKey(cacheKey) &&
+        cacheTime != null &&
+        now.difference(cacheTime) < Timings.homeRowCacheDuration;
+  }
+
+  /// Get cached search results
+  Map<String, List<MediaItem>>? getCachedSearchResults(String cacheKey) => _searchCache[cacheKey];
+
+  /// Set cached search results
+  void setCachedSearchResults(String cacheKey, Map<String, List<MediaItem>> results) {
+    _searchCache[cacheKey] = results;
+    _searchCacheTime[cacheKey] = DateTime.now();
+    _logger.log('✅ Cached search results for "$cacheKey"');
+  }
+
+  // ============================================================================
+  // PLAYER CACHING
+  // ============================================================================
+
+  /// Check if players cache is valid
+  bool isPlayersCacheValid({bool forceRefresh = false}) {
+    if (forceRefresh) return false;
+    final now = DateTime.now();
+    return _playersLastFetched != null &&
+        now.difference(_playersLastFetched!) < Timings.playersCacheDuration;
+  }
+
+  /// Update players cache timestamp
+  void updatePlayersLastFetched() {
+    _playersLastFetched = DateTime.now();
+  }
+
+  /// Get cached track for a player (used for smooth swipe transitions)
+  Track? getCachedTrackForPlayer(String playerId) => _playerTrackCache[playerId];
+
+  /// Set cached track for a player
+  void setCachedTrackForPlayer(String playerId, Track? track) {
+    _playerTrackCache[playerId] = track;
+  }
+
+  // ============================================================================
+  // CLEAR ALL
+  // ============================================================================
+
+  /// Clear all detail caches (call on disconnect/reconnect)
+  void clearAllDetailCaches() {
+    _albumTracksCache.clear();
+    _albumTracksCacheTime.clear();
+    _playlistTracksCache.clear();
+    _playlistTracksCacheTime.clear();
+    _artistAlbumsCache.clear();
+    _artistAlbumsCacheTime.clear();
+    _searchCache.clear();
+    _searchCacheTime.clear();
+    _playerTrackCache.clear();
+    _logger.log('🗑️ All detail caches cleared');
+  }
+
+  /// Clear all caches
+  void clearAll() {
+    invalidateHomeCache();
+    clearAllDetailCaches();
+    _playersLastFetched = null;
+  }
+}

lib/services/debug_logger.dart

@@ -1,32 +1,185 @@
+import 'dart:io';
 import 'package:flutter/foundation.dart';
+import 'package:package_info_plus/package_info_plus.dart';
+import 'package:device_info_plus/device_info_plus.dart';
+
+/// Log levels for filtering and display
+enum LogLevel {
+  debug,  // Verbose debugging info (hidden by default)
+  info,   // General information
+  warning, // Potential issues
+  error,  // Errors and failures
+}
+
+class LogEntry {
+  final DateTime timestamp;
+  final LogLevel level;
+  final String message;
+  final String? context;
+
+  LogEntry({
+    required this.timestamp,
+    required this.level,
+    required this.message,
+    this.context,
+  });
+
+  String get formatted {
+    final time = timestamp.toIso8601String().substring(11, 23);
+    final levelStr = level.name.toUpperCase().padRight(5);
+    final contextStr = context != null ? '[$context] ' : '';
+    return '[$time] $levelStr $contextStr$message';
+  }
+}
 
 class DebugLogger {
   static final DebugLogger _instance = DebugLogger._internal();
   factory DebugLogger() => _instance;
   DebugLogger._internal();
 
-  final List<String> _logs = [];
+  final List<LogEntry> _entries = [];
-  final _maxLogs = 500;
+  final _maxLogs = 1000;
 
-  List<String> get logs => List.unmodifiable(_logs);
+  // Minimum level to display in debug console (debug builds show all)
+  LogLevel _minConsoleLevel = kDebugMode ? LogLevel.debug : LogLevel.info;
 
-  void log(String message) {
+  List<LogEntry> get entries => List.unmodifiable(_entries);
-    final timestamp = DateTime.now().toIso8601String().substring(11, 23);
-    final logMessage = '[$timestamp] $message';
 
-    debugPrint(logMessage);
+  /// Legacy getter for backward compatibility
+  List<String> get logs => _entries.map((e) => e.formatted).toList();
 
-    _logs.add(logMessage);
+  void _addEntry(LogLevel level, String message, {String? context}) {
-    if (_logs.length > _maxLogs) {
+    final entry = LogEntry(
-      _logs.removeAt(0);
+      timestamp: DateTime.now(),
+      level: level,
+      message: message,
+      context: context,
+    );
+
+    // Always store in memory
+    _entries.add(entry);
+    if (_entries.length > _maxLogs) {
+      _entries.removeAt(0);
+    }
+
+    // Only print to console if above minimum level
+    if (level.index >= _minConsoleLevel.index) {
+      debugPrint(entry.formatted);
     }
   }
 
+  /// Debug level - verbose info for development
+  void debug(String message, {String? context}) {
+    _addEntry(LogLevel.debug, message, context: context);
+  }
+
+  /// Info level - general operational info
+  void info(String message, {String? context}) {
+    _addEntry(LogLevel.info, message, context: context);
+  }
+
+  /// Warning level - potential issues
+  void warning(String message, {String? context}) {
+    _addEntry(LogLevel.warning, message, context: context);
+  }
+
+  /// Error level - failures and errors
+  void error(String message, {String? context, Object? error, StackTrace? stackTrace}) {
+    var fullMessage = message;
+    if (error != null) {
+      fullMessage += ': $error';
+    }
+    _addEntry(LogLevel.error, fullMessage, context: context);
+    if (stackTrace != null && kDebugMode) {
+      debugPrint('Stack trace: $stackTrace');
+    }
+  }
+
+  /// Legacy method for backward compatibility
+  void log(String message) {
+    _addEntry(LogLevel.info, message);
+  }
+
   void clear() {
-    _logs.clear();
+    _entries.clear();
   }
 
   String getAllLogs() {
-    return _logs.join('\n');
+    return _entries.map((e) => e.formatted).join('\n');
+  }
+
+  /// Get logs filtered by minimum level
+  String getLogsFiltered({LogLevel minLevel = LogLevel.info}) {
+    return _entries
+        .where((e) => e.level.index >= minLevel.index)
+        .map((e) => e.formatted)
+        .join('\n');
+  }
+
+  /// Generate a formatted bug report with device info
+  Future<String> generateBugReport() async {
+    final buffer = StringBuffer();
+
+    buffer.writeln('═══════════════════════════════════════');
+    buffer.writeln('ENSEMBLE BUG REPORT');
+    buffer.writeln('Generated: ${DateTime.now().toIso8601String()}');
+    buffer.writeln('═══════════════════════════════════════');
+    buffer.writeln();
+
+    // App info
+    try {
+      final packageInfo = await PackageInfo.fromPlatform();
+      buffer.writeln('APP INFO:');
+      buffer.writeln('  Version: ${packageInfo.version} (${packageInfo.buildNumber})');
+      buffer.writeln('  Package: ${packageInfo.packageName}');
+      buffer.writeln();
+    } catch (e) {
+      buffer.writeln('APP INFO: Unable to retrieve');
+      buffer.writeln();
+    }
+
+    // Device info
+    try {
+      final deviceInfo = DeviceInfoPlugin();
+      if (Platform.isAndroid) {
+        final android = await deviceInfo.androidInfo;
+        buffer.writeln('DEVICE INFO:');
+        buffer.writeln('  Model: ${android.manufacturer} ${android.model}');
+        buffer.writeln('  Android: ${android.version.release} (SDK ${android.version.sdkInt})');
+        buffer.writeln('  Device: ${android.device}');
+        buffer.writeln();
+      } else if (Platform.isIOS) {
+        final ios = await deviceInfo.iosInfo;
+        buffer.writeln('DEVICE INFO:');
+        buffer.writeln('  Model: ${ios.model}');
+        buffer.writeln('  iOS: ${ios.systemVersion}');
+        buffer.writeln('  Name: ${ios.name}');
+        buffer.writeln();
+      }
+    } catch (e) {
+      buffer.writeln('DEVICE INFO: Unable to retrieve');
+      buffer.writeln();
+    }
+
+    // Log statistics
+    final errorCount = _entries.where((e) => e.level == LogLevel.error).length;
+    final warningCount = _entries.where((e) => e.level == LogLevel.warning).length;
+    buffer.writeln('LOG SUMMARY:');
+    buffer.writeln('  Total entries: ${_entries.length}');
+    buffer.writeln('  Errors: $errorCount');
+    buffer.writeln('  Warnings: $warningCount');
+    buffer.writeln();
+
+    buffer.writeln('═══════════════════════════════════════');
+    buffer.writeln('LOGS (newest first):');
+    buffer.writeln('═══════════════════════════════════════');
+    buffer.writeln();
+
+    // Add logs in reverse order (newest first) for easier reading
+    for (final entry in _entries.reversed) {
+      buffer.writeln(entry.formatted);
+    }
+
+    return buffer.toString();
   }
 }

lib/services/library_service.dart

@@ -1,221 +0,0 @@
-import '../constants/timings.dart' show LibraryConstants;
-import '../models/media_item.dart';
-import 'music_assistant_api.dart';
-import 'debug_logger.dart';
-import 'error_handler.dart';
-
-/// Service responsible for library data management.
-/// Handles loading and caching of artists, albums, tracks, and search.
-class LibraryService {
-  final DebugLogger _logger = DebugLogger();
-
-  MusicAssistantAPI? _api;
-
-  List<Artist> _artists = [];
-  List<Album> _albums = [];
-  List<Track> _tracks = [];
-  bool _isLoading = false;
-  String? _error;
-
-  // Search state persistence
-  String _lastSearchQuery = '';
-  Map<String, List<MediaItem>> _lastSearchResults = {
-    'artists': [],
-    'albums': [],
-    'tracks': [],
-  };
-
-  // Getters
-  List<Artist> get artists => _artists;
-  List<Album> get albums => _albums;
-  List<Track> get tracks => _tracks;
-  bool get isLoading => _isLoading;
-  String? get error => _error;
-  String get lastSearchQuery => _lastSearchQuery;
-  Map<String, List<MediaItem>> get lastSearchResults => _lastSearchResults;
-
-  /// Set the API instance (called when connection established)
-  void setApi(MusicAssistantAPI? api) {
-    _api = api;
-  }
-
-  /// Clear all library data (called on disconnect)
-  void clear() {
-    _artists = [];
-    _albums = [];
-    _tracks = [];
-    _error = null;
-    _isLoading = false;
-  }
-
-  /// Save search state for persistence across screen changes
-  void saveSearchState(String query, Map<String, List<MediaItem>> results) {
-    _lastSearchQuery = query;
-    _lastSearchResults = results;
-  }
-
-  /// Clear search state
-  void clearSearchState() {
-    _lastSearchQuery = '';
-    _lastSearchResults = {
-      'artists': [],
-      'albums': [],
-      'tracks': [],
-    };
-  }
-
-  /// Load all library data (artists, albums, tracks) in parallel
-  /// Returns true if successful
-  Future<bool> loadLibrary() async {
-    if (_api == null) return false;
-
-    try {
-      _isLoading = true;
-      _error = null;
-
-      final results = await Future.wait([
-        _api!.getArtists(limit: LibraryConstants.maxLibraryItems),
-        _api!.getAlbums(limit: LibraryConstants.maxLibraryItems),
-        _api!.getTracks(limit: LibraryConstants.maxLibraryItems),
-      ]);
-
-      _artists = results[0] as List<Artist>;
-      _albums = results[1] as List<Album>;
-      _tracks = results[2] as List<Track>;
-
-      _isLoading = false;
-      return true;
-    } catch (e) {
-      final errorInfo = ErrorHandler.handleError(e, context: 'Load library');
-      _error = errorInfo.userMessage;
-      _isLoading = false;
-      return false;
-    }
-  }
-
-  /// Load artists with optional pagination and search
-  Future<bool> loadArtists({int? limit, int? offset, String? search}) async {
-    if (_api == null) return false;
-
-    try {
-      _isLoading = true;
-      _error = null;
-
-      _artists = await _api!.getArtists(
-        limit: limit ?? LibraryConstants.maxLibraryItems,
-        offset: offset,
-        search: search,
-      );
-
-      _isLoading = false;
-      return true;
-    } catch (e) {
-      final errorInfo = ErrorHandler.handleError(e, context: 'Load artists');
-      _error = errorInfo.userMessage;
-      _isLoading = false;
-      return false;
-    }
-  }
-
-  /// Load albums with optional pagination, search, and artist filter
-  Future<bool> loadAlbums({
-    int? limit,
-    int? offset,
-    String? search,
-    String? artistId,
-  }) async {
-    if (_api == null) return false;
-
-    try {
-      _isLoading = true;
-      _error = null;
-
-      _albums = await _api!.getAlbums(
-        limit: limit ?? LibraryConstants.maxLibraryItems,
-        offset: offset,
-        search: search,
-        artistId: artistId,
-      );
-
-      _isLoading = false;
-      return true;
-    } catch (e) {
-      final errorInfo = ErrorHandler.handleError(e, context: 'Load albums');
-      _error = errorInfo.userMessage;
-      _isLoading = false;
-      return false;
-    }
-  }
-
-  /// Get tracks for a specific album
-  Future<List<Track>> getAlbumTracks(String provider, String itemId) async {
-    if (_api == null) return [];
-
-    try {
-      return await _api!.getAlbumTracks(provider, itemId);
-    } catch (e) {
-      ErrorHandler.logError('Get album tracks', e);
-      return [];
-    }
-  }
-
-  /// Search for artists, albums, and tracks
-  Future<Map<String, List<MediaItem>>> search(String query, {bool libraryOnly = false}) async {
-    if (_api == null) {
-      return {'artists': [], 'albums': [], 'tracks': []};
-    }
-
-    try {
-      return await _api!.search(query, libraryOnly: libraryOnly);
-    } catch (e) {
-      ErrorHandler.logError('Search', e);
-      return {'artists': [], 'albums': [], 'tracks': []};
-    }
-  }
-
-  /// Get recent albums
-  Future<List<Album>> getRecentAlbums({int limit = 10}) async {
-    if (_api == null) return [];
-
-    try {
-      return await _api!.getRecentAlbums(limit: limit);
-    } catch (e) {
-      ErrorHandler.logError('Get recent albums', e);
-      return [];
-    }
-  }
-
-  /// Get random albums for discovery
-  Future<List<Album>> getRandomAlbums({int limit = 10}) async {
-    if (_api == null) return [];
-
-    try {
-      return await _api!.getRandomAlbums(limit: limit);
-    } catch (e) {
-      ErrorHandler.logError('Get random albums', e);
-      return [];
-    }
-  }
-
-  /// Toggle favorite status for a media item
-  Future<void> toggleFavorite(String itemId, String mediaType, bool favorite) async {
-    if (_api == null) return;
-
-    try {
-      await _api!.setFavorite(itemId, mediaType, favorite);
-    } catch (e) {
-      ErrorHandler.logError('Toggle favorite', e);
-      rethrow;
-    }
-  }
-
-  /// Get image URL for a media item
-  String getImageUrl(dynamic item, {int? size}) {
-    return _api?.getImageUrl(item, size: size) ?? '';
-  }
-
-  /// Get stream URL for a track
-  String getStreamUrl(String provider, String itemId, {String? uri, List<ProviderMapping>? providerMappings}) {
-    return _api?.getStreamUrl(provider, itemId, uri: uri, providerMappings: providerMappings) ?? '';
-  }
-}

lib/services/metadata_service.dart

@@ -1,11 +1,16 @@
 import 'dart:convert';
 import 'package:http/http.dart' as http;
+import 'debug_logger.dart';
 import 'settings_service.dart';
 
 class MetadataService {
+  static final _logger = DebugLogger();
   // Cache to avoid repeated API calls for the same artist/album
   static final Map<String, String> _cache = {};
 
+  // Cache for artist images
+  static final Map<String, String?> _artistImageCache = {};
+
   /// Fetches artist biography/description with fallback chain:
   /// 1. Music Assistant metadata (passed in)
   /// 2. Last.fm API (if key configured)
@@ -149,7 +154,7 @@ class MetadataService {
         }
       }
     } catch (e) {
-      print('⚠️ Last.fm API error: $e');
+      _logger.warning('Last.fm API error: $e', context: 'Metadata');
     }
     return null;
   }
@@ -182,7 +187,7 @@ class MetadataService {
         }
       }
     } catch (e) {
-      print('⚠️ TheAudioDB API error: $e');
+      _logger.warning('TheAudioDB API error: $e', context: 'Metadata');
     }
     return null;
   }
@@ -204,8 +209,51 @@ class MetadataService {
     return text.trim();
   }
 
+  /// Fetches artist image URL from Deezer (free, no API key required)
+  /// Returns the image URL if found, null otherwise
+  static Future<String?> getArtistImageUrl(String artistName) async {
+    // Check cache first
+    final cacheKey = 'artistImage:$artistName';
+    if (_artistImageCache.containsKey(cacheKey)) {
+      return _artistImageCache[cacheKey];
+    }
+
+    // Use Deezer API (free, no key, excellent coverage)
+    try {
+      final uri = Uri.https(
+        'api.deezer.com',
+        '/search/artist',
+        {
+          'q': artistName,
+          'limit': '1',
+        },
+      );
+
+      final response = await http.get(uri).timeout(const Duration(seconds: 5));
+
+      if (response.statusCode == 200) {
+        final data = json.decode(response.body);
+        final artists = data['data'] as List?;
+        if (artists != null && artists.isNotEmpty) {
+          final artist = artists[0];
+          // Use picture_xl for high quality, fall back to picture_medium
+          final imageUrl = artist['picture_xl'] ?? artist['picture_medium'] ?? artist['picture'];
+          _artistImageCache[cacheKey] = imageUrl;
+          return imageUrl;
+        }
+      }
+    } catch (e) {
+      _logger.warning('Deezer artist image error: $e', context: 'Metadata');
+    }
+
+    // Cache the null result to avoid repeated failed lookups
+    _artistImageCache[cacheKey] = null;
+    return null;
+  }
+
   /// Clears the metadata cache
   static void clearCache() {
     _cache.clear();
+    _artistImageCache.clear();
   }
 }

lib/services/music_assistant_api.dart

@@ -41,6 +41,9 @@ class MusicAssistantAPI {
 
   Completer<void>? _connectionCompleter;
 
+  // Heartbeat timer to keep WebSocket connection alive
+  Timer? _heartbeatTimer;
+
   // Cached custom port setting
   int? _cachedCustomPort;
 
@@ -60,15 +63,24 @@ class MusicAssistantAPI {
 
   // Guard to prevent multiple simultaneous connection attempts
   Completer<void>? _connectionInProgress;
+  bool _isDisposed = false;
 
   Future<void> connect() async {
-    // If already connected, nothing to do
+    // If disposed, don't try to connect
-    if (_currentState == MAConnectionState.connected) {
+    if (_isDisposed) {
+      _logger.log('Connection: API disposed, skipping connect');
+      return;
+    }
+
+    // If already connected or authenticated, nothing to do
+    if (_currentState == MAConnectionState.connected ||
+        _currentState == MAConnectionState.authenticated) {
+      _logger.log('Connection: Already connected, skipping');
       return;
     }
 
     // If connection is in progress, wait for it instead of starting another
-    if (_connectionInProgress != null) {
+    if (_connectionInProgress != null && !_connectionInProgress!.isCompleted) {
       _logger.log('Connection already in progress, waiting...');
       return _connectionInProgress!.future;
     }
@@ -195,7 +207,9 @@ class MusicAssistantAPI {
         onDone: () {
           _logger.log('WebSocket connection closed');
           _updateConnectionState(MAConnectionState.disconnected);
-          _connectionCompleter?.completeError(Exception('Connection closed'));
+          if (_connectionCompleter != null && !_connectionCompleter!.isCompleted) {
+            _connectionCompleter!.completeError(Exception('Connection closed'));
+          }
           _reconnect();
         },
       );
@@ -209,12 +223,16 @@ class MusicAssistantAPI {
       );
 
       _logger.log('Connection: Connected to server');
-      _connectionInProgress?.complete();
+      if (_connectionInProgress != null && !_connectionInProgress!.isCompleted) {
+        _connectionInProgress!.complete();
+      }
       _connectionInProgress = null;
     } catch (e) {
       _logger.log('Connection: Failed - $e');
       _updateConnectionState(MAConnectionState.error);
-      _connectionInProgress?.completeError(e);
+      if (_connectionInProgress != null && !_connectionInProgress!.isCompleted) {
+        _connectionInProgress!.completeError(e);
+      }
       _connectionInProgress = null;
       rethrow;
     }
@@ -247,7 +265,10 @@ class MusicAssistantAPI {
         }
 
         _updateConnectionState(MAConnectionState.connected);
-        _connectionCompleter?.complete();
+        if (_connectionCompleter != null && !_connectionCompleter!.isCompleted) {
+          _connectionCompleter!.complete();
+        }
+        _startHeartbeat();
 
         return;
       }
@@ -300,14 +321,33 @@ class MusicAssistantAPI {
     String command, {
     Map<String, dynamic>? args,
   }) async {
-    // Allow commands when connected, authenticating, or authenticated
+    // Allow auth commands when connected or authenticating
-    final allowedStates = [
+    // For all other commands, require authenticated state if auth is required
-      MAConnectionState.connected,
+    final isAuthCommand = command == 'auth' || command == 'auth/login';
-      MAConnectionState.authenticating,
+
-      MAConnectionState.authenticated,
+    if (isAuthCommand) {
-    ];
+      // Auth commands can be sent when connected or authenticating
-    if (!allowedStates.contains(_currentState)) {
+      final allowedStates = [
-      throw Exception('Not connected to Music Assistant server');
+        MAConnectionState.connected,
+        MAConnectionState.authenticating,
+      ];
+      if (!allowedStates.contains(_currentState)) {
+        throw Exception('Not connected to Music Assistant server');
+      }
+    } else {
+      // Non-auth commands require proper authentication state
+      if (_authRequired && !_isAuthenticated) {
+        throw Exception('Not authenticated to Music Assistant server');
+      }
+
+      final allowedStates = [
+        MAConnectionState.connected,
+        MAConnectionState.authenticating,
+        MAConnectionState.authenticated,
+      ];
+      if (!allowedStates.contains(_currentState)) {
+        throw Exception('Not connected to Music Assistant server');
+      }
     }
 
     final messageId = _uuid.v4();
@@ -580,13 +620,14 @@ class MusicAssistantAPI {
     }
   }
 
-  Future<Album?> getAlbumDetails(String provider, String itemId) async {
+  /// Get album details by URI
+  /// Use the album's uri field (e.g., "library://album/123" or "spotify://album/xyz")
+  Future<Album?> getAlbumByUri(String uri) async {
     try {
       final response = await _sendCommand(
-        'music/album',
+        'music/item_by_uri',
         args: {
-          'provider': provider,
+          'uri': uri,
-          'item_id': itemId,
         },
       );
 
@@ -595,7 +636,27 @@ class MusicAssistantAPI {
 
       return Album.fromJson(result as Map<String, dynamic>);
     } catch (e) {
-      _logger.log('Error getting album details: $e');
+      _logger.log('Error getting album by URI: $e');
+      return null;
+    }
+  }
+
+  /// Get artist details by URI
+  Future<Artist?> getArtistByUri(String uri) async {
+    try {
+      final response = await _sendCommand(
+        'music/item_by_uri',
+        args: {
+          'uri': uri,
+        },
+      );
+
+      final result = response['result'];
+      if (result == null) return null;
+
+      return Artist.fromJson(result as Map<String, dynamic>);
+    } catch (e) {
+      _logger.log('Error getting artist by URI: $e');
       return null;
     }
   }
@@ -718,35 +779,18 @@ class MusicAssistantAPI {
   }
 
   // Favorites
-  /// Toggle favorite status for any media item
+  /// Mark item as favorite using URI format
-  Future<bool> toggleFavorite(String mediaType, String itemId, String provider) async {
+  /// The item parameter should be a URI like "spotify://album/6XyFhbFtcRRR9peJ16em4h"
-    try {
-      final response = await _sendCommand(
-        'music/favorites/toggle',
-        args: {
-          'media_type': mediaType,
-          'item_id': itemId,
-          'provider': provider,
-        },
-      );
-
-      final isFavorite = response['result'] as bool? ?? false;
-      return isFavorite;
-    } catch (e) {
-      _logger.log('Error toggling favorite: $e');
-      return false;
-    }
-  }
-
-  /// Mark item as favorite
   Future<void> addToFavorites(String mediaType, String itemId, String provider) async {
     try {
+      // Build the URI for the item
+      final uri = '$provider://$mediaType/$itemId';
+      _logger.log('Adding to favorites: $uri');
+
       await _sendCommand(
-        'music/favorites/add',
+        'music/favorites/add_item',
         args: {
-          'media_type': mediaType,
+          'item': uri,
-          'item_id': itemId,
-          'provider': provider,
         },
       );
     } catch (e) {
@@ -756,14 +800,16 @@ class MusicAssistantAPI {
   }
 
   /// Remove item from favorites
-  Future<void> removeFromFavorites(String mediaType, String itemId, String provider) async {
+  /// Requires the library_item_id (the numeric ID in the MA library)
+  Future<void> removeFromFavorites(String mediaType, int libraryItemId) async {
     try {
+      _logger.log('Removing from favorites: mediaType=$mediaType, libraryItemId=$libraryItemId');
+
       await _sendCommand(
-        'music/favorites/remove',
+        'music/favorites/remove_item',
         args: {
           'media_type': mediaType,
-          'item_id': itemId,
+          'library_item_id': libraryItemId,
-          'provider': provider,
         },
       );
     } catch (e) {
@@ -1029,12 +1075,14 @@ class MusicAssistantAPI {
   }
 
   /// Play radio based on a track (generates similar tracks)
+  /// Prefers streaming provider URIs (Spotify, Tidal, etc.) for better recommendations
   Future<void> playRadio(String playerId, Track track) async {
     return await RetryHelper.retryCritical(
       operation: () async {
-        // Try using library URI if available, otherwise use provider URI
+        // For radio mode, prefer streaming providers (Spotify, Tidal, etc.)
-        final libraryUri = track.uri;
+        // as they provide better dynamic track recommendations
-        final trackUri = libraryUri ?? _buildTrackUri(track);
+        final trackUri = _buildRadioUri(track);
+        _logger.log('Radio: Starting with URI $trackUri');
 
         final args = {
           'queue_id': playerId,
@@ -1043,7 +1091,6 @@ class MusicAssistantAPI {
           'radio_mode': true, // Enable radio mode for similar tracks
         };
 
-
         await _sendCommand(
           'player_queues/play_media',
           args: args,
@@ -1053,6 +1100,114 @@ class MusicAssistantAPI {
     );
   }
 
+  /// Build URI for radio mode, preferring streaming providers for better recommendations
+  /// Priority: Spotify > Tidal > Deezer > Apple > YTM > Subsonic > any available > library
+  /// Note: Qobuz does NOT support radio mode (no dynamic_tracks API)
+  String _buildRadioUri(Track track) {
+    if (track.providerMappings != null && track.providerMappings!.isNotEmpty) {
+      // Providers that support dynamic radio recommendations (in priority order)
+      // Qobuz is excluded - it doesn't support similar tracks API
+      const radioProviders = ['spotify', 'tidal', 'deezer', 'apple', 'ytmusic', 'subsonic', 'opensubsonic'];
+
+      // Try to find a streaming provider first
+      for (final providerPrefix in radioProviders) {
+        final mapping = track.providerMappings!.firstWhere(
+          (m) => m.available && m.providerInstance.toLowerCase().startsWith(providerPrefix),
+          orElse: () => ProviderMapping(providerInstance: '', providerDomain: '', itemId: '', available: false),
+        );
+        if (mapping.providerInstance.isNotEmpty) {
+          return '${mapping.providerInstance}://track/${mapping.itemId}';
+        }
+      }
+
+      // Fall back to any available provider (but not library)
+      final nonLibraryMapping = track.providerMappings!.firstWhere(
+        (m) => m.available && m.providerInstance != 'library',
+        orElse: () => ProviderMapping(providerInstance: '', providerDomain: '', itemId: '', available: false),
+      );
+      if (nonLibraryMapping.providerInstance.isNotEmpty) {
+        return '${nonLibraryMapping.providerInstance}://track/${nonLibraryMapping.itemId}';
+      }
+    }
+
+    // Last resort: use library URI or build from top-level provider
+    return track.uri ?? _buildTrackUri(track);
+  }
+
+  /// Play radio based on an artist (generates tracks from and similar to the artist)
+  /// Prefers streaming provider URIs (Spotify, Tidal, etc.) for better recommendations
+  Future<void> playArtistRadio(String playerId, Artist artist) async {
+    return await RetryHelper.retryCritical(
+      operation: () async {
+        final artistUri = _buildArtistRadioUri(artist);
+        _logger.log('Radio: Starting artist radio with URI $artistUri');
+
+        final args = {
+          'queue_id': playerId,
+          'media': [artistUri],
+          'option': 'replace',
+          'radio_mode': true,
+        };
+
+        await _sendCommand(
+          'player_queues/play_media',
+          args: args,
+        );
+      },
+    );
+  }
+
+  /// Add artist radio to queue (instead of replacing)
+  Future<void> playArtistRadioToQueue(String playerId, Artist artist) async {
+    return await RetryHelper.retryCritical(
+      operation: () async {
+        final artistUri = _buildArtistRadioUri(artist);
+        _logger.log('Radio: Adding artist radio to queue with URI $artistUri');
+
+        final args = {
+          'queue_id': playerId,
+          'media': [artistUri],
+          'option': 'add',  // Add to queue instead of replace
+          'radio_mode': true,
+        };
+
+        await _sendCommand(
+          'player_queues/play_media',
+          args: args,
+        );
+      },
+    );
+  }
+
+  /// Build URI for artist radio mode, preferring streaming providers
+  /// Note: Qobuz does NOT support radio mode (no dynamic_tracks API)
+  String _buildArtistRadioUri(Artist artist) {
+    if (artist.providerMappings != null && artist.providerMappings!.isNotEmpty) {
+      // Qobuz is excluded - it doesn't support similar tracks API
+      const radioProviders = ['spotify', 'tidal', 'deezer', 'apple', 'ytmusic', 'subsonic', 'opensubsonic'];
+
+      for (final providerPrefix in radioProviders) {
+        final mapping = artist.providerMappings!.firstWhere(
+          (m) => m.available && m.providerInstance.toLowerCase().startsWith(providerPrefix),
+          orElse: () => ProviderMapping(providerInstance: '', providerDomain: '', itemId: '', available: false),
+        );
+        if (mapping.providerInstance.isNotEmpty) {
+          return '${mapping.providerInstance}://artist/${mapping.itemId}';
+        }
+      }
+
+      final nonLibraryMapping = artist.providerMappings!.firstWhere(
+        (m) => m.available && m.providerInstance != 'library',
+        orElse: () => ProviderMapping(providerInstance: '', providerDomain: '', itemId: '', available: false),
+      );
+      if (nonLibraryMapping.providerInstance.isNotEmpty) {
+        return '${nonLibraryMapping.providerInstance}://artist/${nonLibraryMapping.itemId}';
+      }
+    }
+
+    return artist.uri ?? '${artist.provider}://artist/${artist.itemId}';
+  }
+
   /// Build track URI from provider mappings
   String _buildTrackUri(Track track) {
     // Use provider mappings to get the actual provider instance
@@ -1667,6 +1822,11 @@ class MusicAssistantAPI {
     final imagePath = selectedImage['path'] as String?;
     if (imagePath == null) return null;
 
+    // If path is already a full URL (from player_updated event), return it directly
+    if (imagePath.startsWith('http://') || imagePath.startsWith('https://')) {
+      return imagePath;
+    }
+
     // Always use imageproxy endpoint to ensure images route through our server
     // This fixes images not loading when connecting via external domain
     // (direct URLs may contain internal IPs not reachable from outside the network)
@@ -1914,18 +2074,84 @@ class MusicAssistantAPI {
     _connectionStateController.add(state);
   }
 
+  /// Start heartbeat timer to keep WebSocket connection alive
+  void _startHeartbeat() {
+    _stopHeartbeat();
+    _heartbeatTimer = Timer.periodic(Timings.heartbeatInterval, (_) {
+      _sendHeartbeat();
+    });
+  }
+
+  /// Stop heartbeat timer
+  void _stopHeartbeat() {
+    _heartbeatTimer?.cancel();
+    _heartbeatTimer = null;
+  }
+
+  /// Send a ping message to keep the connection alive
+  Future<void> _sendHeartbeat() async {
+    if (_currentState != MAConnectionState.connected &&
+        _currentState != MAConnectionState.authenticated) {
+      return;
+    }
+
+    try {
+      // Send a lightweight command to check connection is alive
+      // Using 'info' as it's a valid MA command
+      await _sendCommand('info').timeout(
+        const Duration(seconds: 10),
+        onTimeout: () {
+          _logger.log('Heartbeat timeout - connection may be stale');
+          return <String, dynamic>{};
+        },
+      );
+    } catch (e) {
+      _logger.log('Heartbeat failed: $e');
+      // Connection may be dead, trigger reconnect
+      _updateConnectionState(MAConnectionState.error);
+      _reconnect();
+    }
+  }
+
   Future<void> _reconnect() async {
+    // Don't reconnect if disposed
+    if (_isDisposed) {
+      _logger.log('Reconnect: API disposed, skipping');
+      return;
+    }
+
+    // Don't reconnect if already connected or connecting
+    if (_currentState == MAConnectionState.connected ||
+        _currentState == MAConnectionState.authenticated ||
+        _currentState == MAConnectionState.connecting) {
+      _logger.log('Reconnect: Already connected/connecting, skipping');
+      return;
+    }
+
+    // Don't reconnect if another connection is in progress
+    if (_connectionInProgress != null && !_connectionInProgress!.isCompleted) {
+      _logger.log('Reconnect: Connection already in progress, skipping');
+      return;
+    }
+
     await Future.delayed(Timings.reconnectDelay);
-    if (_currentState != MAConnectionState.connected) {
+
-      try {
+    // Check again after delay
-        await connect();
+    if (_isDisposed ||
-      } catch (e) {
+        _currentState == MAConnectionState.connected ||
-        _logger.log('Reconnection failed: $e');
+        _currentState == MAConnectionState.authenticated) {
-      }
+      return;
+    }
+
+    try {
+      await connect();
+    } catch (e) {
+      _logger.log('Reconnection failed: $e');
     }
   }
 
   Future<void> disconnect() async {
+    _stopHeartbeat();
     _updateConnectionState(MAConnectionState.disconnected);
     await _channel?.sink.close();
     _channel = null;
@@ -1933,6 +2159,13 @@ class MusicAssistantAPI {
   }
 
   void dispose() {
+    _isDisposed = true;
+    _stopHeartbeat();
+    // Complete any pending connection to prevent hanging futures
+    if (_connectionInProgress != null && !_connectionInProgress!.isCompleted) {
+      _connectionInProgress!.completeError(Exception('API disposed'));
+    }
+    _connectionInProgress = null;
     disconnect();
     _connectionStateController.close();
     for (final stream in _eventStreams.values) {

lib/services/player_state_service.dart

@@ -1,391 +0,0 @@
-import 'dart:async';
-import '../constants/timings.dart' show Timings;
-import '../models/player.dart';
-import '../models/media_item.dart';
-import 'music_assistant_api.dart';
-import 'settings_service.dart';
-import 'debug_logger.dart';
-import 'error_handler.dart';
-
-/// Callback type for notifying state changes
-typedef StateChangeCallback = void Function();
-
-/// Service responsible for player state management.
-/// Handles player selection, playback controls, and state polling.
-class PlayerStateService {
-  final DebugLogger _logger = DebugLogger();
-  final StateChangeCallback? onStateChanged;
-
-  MusicAssistantAPI? _api;
-
-  // Player selection
-  Player? _selectedPlayer;
-  List<Player> _availablePlayers = [];
-  Track? _currentTrack;
-  Timer? _playerStateTimer;
-
-  // Player list caching
-  DateTime? _playersLastFetched;
-
-  PlayerStateService({this.onStateChanged});
-
-  // Getters
-  Player? get selectedPlayer => _selectedPlayer;
-  List<Player> get availablePlayers => _availablePlayers;
-  Track? get currentTrack => _currentTrack;
-  MusicAssistantAPI? get api => _api;
-
-  /// Set the API instance (called when connection established)
-  void setApi(MusicAssistantAPI? api) {
-    _api = api;
-  }
-
-  /// Clear all player state (called on disconnect)
-  void clear() {
-    _playerStateTimer?.cancel();
-    _playerStateTimer = null;
-    _selectedPlayer = null;
-    _availablePlayers = [];
-    _currentTrack = null;
-    _playersLastFetched = null;
-  }
-
-  /// Get all players from the API
-  Future<List<Player>> getPlayers() async {
-    if (_api == null) return [];
-
-    try {
-      return await _api!.getPlayers();
-    } catch (e) {
-      ErrorHandler.logError('Get players', e);
-      return [];
-    }
-  }
-
-  /// Load available players and auto-select one
-  Future<void> loadAndSelectPlayers({bool forceRefresh = false}) async {
-    try {
-      // Check cache first
-      final now = DateTime.now();
-      if (!forceRefresh &&
-          _playersLastFetched != null &&
-          _availablePlayers.isNotEmpty &&
-          now.difference(_playersLastFetched!) < Timings.playersCacheDuration) {
-        return;
-      }
-
-      final allPlayers = await getPlayers();
-      final builtinPlayerId = await SettingsService.getBuiltinPlayerId();
-
-      _logger.log('🎛️ getPlayers returned ${allPlayers.length} players');
-
-      // Filter out unavailable players and legacy ghosts
-      int filteredCount = 0;
-
-      _availablePlayers = allPlayers.where((player) {
-        final nameLower = player.name.toLowerCase();
-
-        // Filter out legacy "Music Assistant Mobile" ghosts
-        if (nameLower.contains('music assistant mobile')) {
-          filteredCount++;
-          return false;
-        }
-
-        // Filter out unavailable players (ghost players from old installations)
-        // Exception: Keep our own player even if temporarily unavailable
-        if (!player.available) {
-          if (builtinPlayerId != null && player.playerId == builtinPlayerId) {
-            return true;
-          }
-          filteredCount++;
-          return false;
-        }
-
-        return true;
-      }).toList();
-
-      _playersLastFetched = DateTime.now();
-
-      _logger.log('🎛️ After filtering: ${_availablePlayers.length} players available');
-
-      if (_availablePlayers.isNotEmpty) {
-        Player? playerToSelect;
-
-        // Keep current selection if still valid
-        if (_selectedPlayer != null) {
-          final stillAvailable = _availablePlayers.any(
-            (p) => p.playerId == _selectedPlayer!.playerId && p.available,
-          );
-          if (stillAvailable) {
-            playerToSelect = _availablePlayers.firstWhere(
-              (p) => p.playerId == _selectedPlayer!.playerId,
-            );
-          }
-        }
-
-        // Only auto-select if NO player is currently selected
-        if (playerToSelect == null) {
-          // Priority 1: Local player (this device)
-          if (builtinPlayerId != null) {
-            try {
-              playerToSelect = _availablePlayers.firstWhere(
-                (p) => p.playerId == builtinPlayerId && p.available,
-              );
-              _logger.log('📱 Auto-selected local player: ${playerToSelect?.name}');
-            } catch (e) {
-              // Local player not found
-            }
-          }
-
-          // Priority 2: A currently playing player
-          if (playerToSelect == null) {
-            try {
-              playerToSelect = _availablePlayers.firstWhere(
-                (p) => p.state == 'playing' && p.available,
-              );
-            } catch (e) {
-              // No playing player
-            }
-          }
-
-          // Priority 3: First available player
-          if (playerToSelect == null) {
-            playerToSelect = _availablePlayers.firstWhere(
-              (p) => p.available,
-              orElse: () => _availablePlayers.first,
-            );
-          }
-        }
-
-        selectPlayer(playerToSelect);
-      }
-
-      onStateChanged?.call();
-    } catch (e) {
-      ErrorHandler.logError('Load players', e);
-    }
-  }
-
-  /// Select a player and start polling its state
-  void selectPlayer(Player player) {
-    _selectedPlayer = player;
-    _startPlayerPolling();
-    onStateChanged?.call();
-  }
-
-  /// Start polling player state at configured interval
-  void _startPlayerPolling() {
-    _playerStateTimer?.cancel();
-
-    if (_selectedPlayer == null) return;
-
-    _playerStateTimer = Timer.periodic(Timings.playerPollingInterval, (_) async {
-      try {
-        await updatePlayerState();
-      } catch (e) {
-        _logger.log('Error updating player state (will retry): $e');
-      }
-    });
-
-    // Also update immediately
-    updatePlayerState();
-  }
-
-  /// Update the selected player's state from the server
-  Future<void> updatePlayerState() async {
-    if (_selectedPlayer == null || _api == null) return;
-
-    try {
-      final updatedPlayer = await _api!.getPlayer(_selectedPlayer!.playerId);
-      if (updatedPlayer != null) {
-        _selectedPlayer = updatedPlayer;
-
-        // Get current track info if playing
-        if (updatedPlayer.currentMedia != null) {
-          _currentTrack = updatedPlayer.currentMedia;
-        }
-
-        onStateChanged?.call();
-      }
-    } catch (e) {
-      _logger.log('Error updating player state: $e');
-    }
-  }
-
-  /// Refresh the list of available players
-  Future<void> refreshPlayers() async {
-    final previousState = _selectedPlayer?.state;
-
-    await loadAndSelectPlayers(forceRefresh: true);
-
-    // If selected player changed state, notify listeners
-    if (_selectedPlayer?.state != previousState) {
-      onStateChanged?.call();
-    }
-  }
-
-  // ============================================================================
-  // PLAYBACK CONTROLS
-  // ============================================================================
-
-  Future<void> pausePlayer(String playerId) async {
-    try {
-      await _api?.pausePlayer(playerId);
-    } catch (e) {
-      ErrorHandler.logError('Pause player', e);
-      rethrow;
-    }
-  }
-
-  Future<void> resumePlayer(String playerId) async {
-    try {
-      await _api?.playPlayer(playerId);
-    } catch (e) {
-      ErrorHandler.logError('Resume player', e);
-      rethrow;
-    }
-  }
-
-  Future<void> stopPlayer(String playerId) async {
-    try {
-      await _api?.stopPlayer(playerId);
-    } catch (e) {
-      ErrorHandler.logError('Stop player', e);
-      rethrow;
-    }
-  }
-
-  Future<void> nextTrack(String playerId) async {
-    try {
-      await _api?.nextTrack(playerId);
-    } catch (e) {
-      ErrorHandler.logError('Next track', e);
-      rethrow;
-    }
-  }
-
-  Future<void> previousTrack(String playerId) async {
-    try {
-      await _api?.previousTrack(playerId);
-    } catch (e) {
-      ErrorHandler.logError('Previous track', e);
-      rethrow;
-    }
-  }
-
-  Future<void> togglePower(String playerId) async {
-    try {
-      final player = _availablePlayers.firstWhere(
-        (p) => p.playerId == playerId,
-        orElse: () => throw Exception('Player not found'),
-      );
-
-      if (player.powered) {
-        await _api?.powerOffPlayer(playerId);
-      } else {
-        await _api?.powerOnPlayer(playerId);
-      }
-
-      await refreshPlayers();
-    } catch (e) {
-      _logger.log('ERROR in togglePower: $e');
-      ErrorHandler.logError('Toggle power', e);
-    }
-  }
-
-  Future<void> setVolume(String playerId, int volumeLevel) async {
-    try {
-      await _api?.setVolume(playerId, volumeLevel);
-    } catch (e) {
-      ErrorHandler.logError('Set volume', e);
-      rethrow;
-    }
-  }
-
-  Future<void> setMute(String playerId, bool muted) async {
-    try {
-      await _api?.setMute(playerId, muted);
-      await refreshPlayers();
-    } catch (e) {
-      ErrorHandler.logError('Set mute', e);
-      rethrow;
-    }
-  }
-
-  Future<void> seek(String playerId, int position) async {
-    try {
-      await _api?.seek(playerId, position);
-    } catch (e) {
-      ErrorHandler.logError('Seek', e);
-      rethrow;
-    }
-  }
-
-  Future<void> toggleShuffle(String queueId) async {
-    try {
-      await _api?.toggleShuffle(queueId);
-    } catch (e) {
-      ErrorHandler.logError('Toggle shuffle', e);
-      rethrow;
-    }
-  }
-
-  Future<void> setRepeatMode(String queueId, String mode) async {
-    try {
-      await _api?.setRepeatMode(queueId, mode);
-    } catch (e) {
-      ErrorHandler.logError('Set repeat mode', e);
-      rethrow;
-    }
-  }
-
-  /// Cycle through repeat modes: off -> all -> one -> off
-  Future<void> cycleRepeatMode(String queueId, String? currentMode) async {
-    String nextMode;
-    switch (currentMode) {
-      case 'off':
-      case null:
-        nextMode = 'all';
-        break;
-      case 'all':
-        nextMode = 'one';
-        break;
-      case 'one':
-        nextMode = 'off';
-        break;
-      default:
-        nextMode = 'off';
-    }
-    await setRepeatMode(queueId, nextMode);
-  }
-
-  // ============================================================================
-  // CONVENIENCE METHODS (for selected player)
-  // ============================================================================
-
-  Future<void> playPauseSelectedPlayer() async {
-    if (_selectedPlayer == null) return;
-
-    if (_selectedPlayer!.state == 'playing') {
-      await pausePlayer(_selectedPlayer!.playerId);
-    } else {
-      await resumePlayer(_selectedPlayer!.playerId);
-    }
-    await Future.delayed(Timings.trackChangeDelay);
-    await updatePlayerState();
-  }
-
-  Future<void> nextTrackSelectedPlayer() async {
-    if (_selectedPlayer == null) return;
-    await nextTrack(_selectedPlayer!.playerId);
-    await Future.delayed(Timings.trackChangeDelay);
-    await updatePlayerState();
-  }
-
-  Future<void> previousTrackSelectedPlayer() async {
-    if (_selectedPlayer == null) return;
-    await previousTrack(_selectedPlayer!.playerId);
-    await Future.delayed(Timings.trackChangeDelay);
-    await updatePlayerState();
-  }
-}

lib/services/settings_service.dart

@@ -20,6 +20,7 @@ class SettingsService {
   static const String _keyEnableLocalPlayback = 'enable_local_playback';
   static const String _keyLocalPlayerName = 'local_player_name';
   static const String _keyOwnerName = 'owner_name';
+  static const String _keyLastSelectedPlayerId = 'last_selected_player_id';
 
   static Future<String?> getServerUrl() async {
     final prefs = await SharedPreferences.getInstance();
@@ -283,6 +284,21 @@ class SettingsService {
     await prefs.setString(_keyOwnerName, name.trim());
   }
 
+  // Last selected player ID - persists user's player selection across sessions
+  static Future<String?> getLastSelectedPlayerId() async {
+    final prefs = await SharedPreferences.getInstance();
+    return prefs.getString(_keyLastSelectedPlayerId);
+  }
+
+  static Future<void> setLastSelectedPlayerId(String? playerId) async {
+    final prefs = await SharedPreferences.getInstance();
+    if (playerId == null || playerId.isEmpty) {
+      await prefs.remove(_keyLastSelectedPlayerId);
+    } else {
+      await prefs.setString(_keyLastSelectedPlayerId, playerId);
+    }
+  }
+
   // Helper to create player name with possessive apostrophe
   static String _makePlayerName(String ownerName) {
     // Handle possessive: "Chris" -> "Chris' Phone", "Mom" -> "Mom's Phone"

lib/theme/design_tokens.dart

@@ -0,0 +1,126 @@
+import 'package:flutter/material.dart';
+
+/// Design tokens for consistent spacing, dimensions, and styling throughout the app.
+///
+/// Usage:
+/// ```dart
+/// Padding(padding: Spacing.paddingAll16)
+/// SizedBox(height: Spacing.md)
+/// BorderRadius.circular(Radii.md)
+/// ```
+class Spacing {
+  Spacing._();
+
+  // Base spacing scale (follows 4px grid)
+  static const double xxs = 2.0;
+  static const double xs = 4.0;
+  static const double sm = 8.0;
+  static const double md = 12.0;
+  static const double lg = 16.0;
+  static const double xl = 24.0;
+  static const double xxl = 32.0;
+  static const double xxxl = 48.0;
+
+  // Pre-built EdgeInsets for common padding patterns
+  static const EdgeInsets paddingAll4 = EdgeInsets.all(xs);
+  static const EdgeInsets paddingAll8 = EdgeInsets.all(sm);
+  static const EdgeInsets paddingAll12 = EdgeInsets.all(md);
+  static const EdgeInsets paddingAll16 = EdgeInsets.all(lg);
+  static const EdgeInsets paddingAll24 = EdgeInsets.all(xl);
+  static const EdgeInsets paddingAll32 = EdgeInsets.all(xxl);
+
+  // Horizontal padding
+  static const EdgeInsets paddingH8 = EdgeInsets.symmetric(horizontal: sm);
+  static const EdgeInsets paddingH12 = EdgeInsets.symmetric(horizontal: md);
+  static const EdgeInsets paddingH16 = EdgeInsets.symmetric(horizontal: lg);
+  static const EdgeInsets paddingH24 = EdgeInsets.symmetric(horizontal: xl);
+
+  // Vertical padding
+  static const EdgeInsets paddingV8 = EdgeInsets.symmetric(vertical: sm);
+  static const EdgeInsets paddingV12 = EdgeInsets.symmetric(vertical: md);
+  static const EdgeInsets paddingV16 = EdgeInsets.symmetric(vertical: lg);
+  static const EdgeInsets paddingV24 = EdgeInsets.symmetric(vertical: xl);
+
+  // Pre-built SizedBox widgets for gaps
+  static const SizedBox vGap4 = SizedBox(height: xs);
+  static const SizedBox vGap8 = SizedBox(height: sm);
+  static const SizedBox vGap12 = SizedBox(height: md);
+  static const SizedBox vGap16 = SizedBox(height: lg);
+  static const SizedBox vGap24 = SizedBox(height: xl);
+  static const SizedBox vGap32 = SizedBox(height: xxl);
+
+  static const SizedBox hGap4 = SizedBox(width: xs);
+  static const SizedBox hGap8 = SizedBox(width: sm);
+  static const SizedBox hGap12 = SizedBox(width: md);
+  static const SizedBox hGap16 = SizedBox(width: lg);
+}
+
+/// Border radius tokens
+class Radii {
+  Radii._();
+
+  static const double xs = 2.0;
+  static const double sm = 4.0;
+  static const double md = 8.0;
+  static const double lg = 12.0;
+  static const double xl = 16.0;
+  static const double xxl = 24.0;
+  static const double pill = 999.0;
+
+  // Pre-built BorderRadius for common patterns
+  static final BorderRadius borderRadiusSm = BorderRadius.circular(sm);
+  static final BorderRadius borderRadiusMd = BorderRadius.circular(md);
+  static final BorderRadius borderRadiusLg = BorderRadius.circular(lg);
+  static final BorderRadius borderRadiusXl = BorderRadius.circular(xl);
+  static final BorderRadius borderRadiusXxl = BorderRadius.circular(xxl);
+}
+
+/// Icon size tokens
+class IconSizes {
+  IconSizes._();
+
+  static const double xs = 16.0;
+  static const double sm = 20.0;
+  static const double md = 24.0;
+  static const double lg = 32.0;
+  static const double xl = 48.0;
+  static const double xxl = 64.0;
+  static const double xxxl = 80.0;
+}
+
+/// Common dimension tokens
+class Dimensions {
+  Dimensions._();
+
+  // Album art / thumbnail sizes
+  static const double thumbnailSm = 48.0;
+  static const double thumbnailMd = 80.0;
+  static const double thumbnailLg = 128.0;
+  static const double thumbnailXl = 200.0;
+
+  // Avatar sizes
+  static const double avatarSm = 32.0;
+  static const double avatarMd = 48.0;
+  static const double avatarLg = 64.0;
+
+  // List tile heights
+  static const double listTileHeight = 56.0;
+  static const double listTileHeightDense = 48.0;
+
+  // Mini player height
+  static const double miniPlayerHeight = 64.0;
+
+  // App bar heights
+  static const double appBarHeight = 56.0;
+  static const double expandedAppBarHeight = 200.0;
+}
+
+/// Duration tokens for animations
+class Durations {
+  Durations._();
+
+  static const Duration instant = Duration(milliseconds: 100);
+  static const Duration fast = Duration(milliseconds: 200);
+  static const Duration normal = Duration(milliseconds: 300);
+  static const Duration slow = Duration(milliseconds: 500);
+}

lib/theme/palette_helper.dart

@@ -1,5 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:palette_generator/palette_generator.dart';
+import '../services/debug_logger.dart';
+
+final _logger = DebugLogger();
 
 /// Extracted adaptive colors from album art
 class AdaptiveColors {
@@ -40,7 +43,7 @@ class PaletteHelper {
       );
       return palette;
     } catch (e) {
-      print('⚠️ Failed to extract palette: $e');
+      _logger.warning('Failed to extract palette: $e', context: 'Palette');
       return null;
     }
   }
@@ -56,10 +59,21 @@ class PaletteHelper {
                          const Color(0xFF604CEC);
 
     // Ensure primary has enough saturation to be visually distinct
+    // AND enough lightness for white text to be readable on it
     final HSLColor hslPrimary = HSLColor.fromColor(primary);
-    final Color adjustedPrimary = hslPrimary.saturation < 0.3
+    Color adjustedPrimary = primary;
-        ? hslPrimary.withSaturation(0.5).toColor()
+
-        : primary;
+    // Adjust saturation if too low
+    if (hslPrimary.saturation < 0.3) {
+      adjustedPrimary = hslPrimary.withSaturation(0.5).toColor();
+    }
+
+    // Ensure minimum lightness for contrast with white text
+    // If primary is too dark (luminance < 0.15), lighten it
+    if (adjustedPrimary.computeLuminance() < 0.15) {
+      final hsl = HSLColor.fromColor(adjustedPrimary);
+      adjustedPrimary = hsl.withLightness((hsl.lightness + 0.25).clamp(0.3, 0.6)).toColor();
+    }
 
     if (isDark) {
       // Dark mode: use dark muted colors for background

lib/theme/system_theme_helper.dart

@@ -1,5 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:dynamic_color/dynamic_color.dart';
+import '../services/debug_logger.dart';
+
+final _systemThemeLogger = DebugLogger();
 
 class SystemThemeHelper {
   /// Attempts to get system color schemes from the device (Android 12+)
@@ -35,7 +38,7 @@ class SystemThemeHelper {
         }
       }
     } catch (e) {
-      print('⚠️ Failed to get system colors: $e');
+      _systemThemeLogger.warning('Failed to get system colors: $e', context: 'Theme');
     }
 
     return null;

lib/theme/theme_provider.dart

@@ -2,8 +2,11 @@ import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import 'package:cached_network_image/cached_network_image.dart';
 import '../services/settings_service.dart';
+import '../services/debug_logger.dart';
 import 'palette_helper.dart';
 
+final _themeLogger = DebugLogger();
+
 /// Global function to update adaptive colors from an image URL
 /// This can be called from anywhere in the app (e.g., when tapping an album/artist)
 Future<void> updateAdaptiveColorsFromImage(BuildContext context, String? imageUrl) async {
@@ -17,7 +20,7 @@ Future<void> updateAdaptiveColorsFromImage(BuildContext context, String? imageUr
     }
   } catch (e) {
     // Silently fail - colors will update when track plays
-    print('Failed to extract colors on tap: $e');
+    _themeLogger.debug('Failed to extract colors on tap: $e', context: 'Theme');
   }
 }
 

lib/widgets/artist_avatar.dart

@@ -0,0 +1,89 @@
+import 'package:flutter/material.dart';
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:provider/provider.dart';
+import '../models/media_item.dart';
+import '../providers/music_assistant_provider.dart';
+import '../services/metadata_service.dart';
+
+/// A CircleAvatar that shows artist image with automatic fallback to Deezer/Fanart.tv
+class ArtistAvatar extends StatefulWidget {
+  final Artist artist;
+  final double radius;
+  final int imageSize;
+  final String? heroTag;
+  final ValueChanged<String?>? onImageLoaded;
+
+  const ArtistAvatar({
+    super.key,
+    required this.artist,
+    this.radius = 24,
+    this.imageSize = 128,
+    this.heroTag,
+    this.onImageLoaded,
+  });
+
+  @override
+  State<ArtistAvatar> createState() => _ArtistAvatarState();
+}
+
+class _ArtistAvatarState extends State<ArtistAvatar> {
+  String? _imageUrl;
+  bool _triedFallback = false;
+
+  @override
+  void initState() {
+    super.initState();
+    _loadImage();
+  }
+
+  Future<void> _loadImage() async {
+    final provider = context.read<MusicAssistantProvider>();
+
+    // Try MA first
+    final maUrl = provider.getImageUrl(widget.artist, size: widget.imageSize);
+    if (maUrl != null) {
+      if (mounted) {
+        setState(() {
+          _imageUrl = maUrl;
+        });
+        widget.onImageLoaded?.call(maUrl);
+      }
+      return;
+    }
+
+    // Fallback to external sources
+    if (!_triedFallback) {
+      _triedFallback = true;
+      final fallbackUrl = await MetadataService.getArtistImageUrl(widget.artist.name);
+      if (fallbackUrl != null && mounted) {
+        setState(() {
+          _imageUrl = fallbackUrl;
+        });
+        widget.onImageLoaded?.call(fallbackUrl);
+      }
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    final avatar = CircleAvatar(
+      radius: widget.radius,
+      backgroundColor: colorScheme.surfaceVariant,
+      backgroundImage: _imageUrl != null ? CachedNetworkImageProvider(_imageUrl!) : null,
+      child: _imageUrl == null
+          ? Icon(Icons.person_rounded, color: colorScheme.onSurfaceVariant)
+          : null,
+    );
+
+    if (widget.heroTag != null) {
+      return Hero(
+        tag: widget.heroTag!,
+        child: avatar,
+      );
+    }
+
+    return avatar;
+  }
+}

lib/widgets/artist_card.dart

@@ -6,8 +6,10 @@ import '../screens/artist_details_screen.dart';
 import '../constants/hero_tags.dart';
 import '../theme/theme_provider.dart';
 import '../utils/page_transitions.dart';
+import '../services/metadata_service.dart';
+import '../services/debug_logger.dart';
 
-class ArtistCard extends StatelessWidget {
+class ArtistCard extends StatefulWidget {
   final Artist artist;
   final VoidCallback? onTap;
   final String? heroTagSuffix;
@@ -19,26 +21,46 @@ class ArtistCard extends StatelessWidget {
     this.heroTagSuffix,
   });
 
+  @override
+  State<ArtistCard> createState() => _ArtistCardState();
+}
+
+class _ArtistCardState extends State<ArtistCard> {
+  static final _logger = DebugLogger();
+  String? _fallbackImageUrl;
+  bool _triedFallback = false;
+
   @override
   Widget build(BuildContext context) {
     final maProvider = context.read<MusicAssistantProvider>();
-    final imageUrl = maProvider.api?.getImageUrl(artist, size: 256);
+    final maImageUrl = maProvider.api?.getImageUrl(widget.artist, size: 256);
     final colorScheme = Theme.of(context).colorScheme;
     final textTheme = Theme.of(context).textTheme;
 
-    final suffix = heroTagSuffix != null ? '_$heroTagSuffix' : '';
+    final suffix = widget.heroTagSuffix != null ? '_${widget.heroTagSuffix}' : '';
+
+    // Use MA image if available, otherwise try fallback
+    final imageUrl = maImageUrl ?? _fallbackImageUrl;
+
+    // Try to fetch fallback image if MA doesn't have one and we haven't tried yet
+    if (maImageUrl == null && !_triedFallback) {
+      _triedFallback = true;
+      _logger.debug('No MA image for "${widget.artist.name}", trying fallback', context: 'ArtistCard');
+      _fetchFallbackImage();
+    }
 
     return RepaintBoundary(
       child: GestureDetector(
-        onTap: onTap ?? () {
+        onTap: widget.onTap ?? () {
           // Update adaptive colors immediately on tap
           updateAdaptiveColorsFromImage(context, imageUrl);
           Navigator.push(
             context,
             FadeSlidePageRoute(
               child: ArtistDetailsScreen(
-                artist: artist,
+                artist: widget.artist,
-                heroTagSuffix: heroTagSuffix,
+                heroTagSuffix: widget.heroTagSuffix,
+                initialImageUrl: imageUrl,
               ),
             ),
           );
@@ -48,7 +70,7 @@ class ArtistCard extends StatelessWidget {
           children: [
             // Artist image - circular
             Hero(
-              tag: HeroTags.artistImage + (artist.uri ?? artist.itemId) + suffix,
+              tag: HeroTags.artistImage + (widget.artist.uri ?? widget.artist.itemId) + suffix,
               child: ClipOval(
                 child: Container(
                   width: 110,
@@ -73,11 +95,11 @@ class ArtistCard extends StatelessWidget {
           const SizedBox(height: 12),
           // Artist name
           Hero(
-            tag: HeroTags.artistName + (artist.uri ?? artist.itemId) + suffix,
+            tag: HeroTags.artistName + (widget.artist.uri ?? widget.artist.itemId) + suffix,
             child: Material(
               color: Colors.transparent,
               child: Text(
-                artist.name,
+                widget.artist.name,
                 maxLines: 2,
                 overflow: TextOverflow.ellipsis,
                 textAlign: TextAlign.center,
@@ -93,4 +115,14 @@ class ArtistCard extends StatelessWidget {
       ),
     );
   }
+
+  Future<void> _fetchFallbackImage() async {
+    final fallbackUrl = await MetadataService.getArtistImageUrl(widget.artist.name);
+    if (fallbackUrl != null && mounted) {
+      _logger.debug('Found fallback image for "${widget.artist.name}"', context: 'ArtistCard');
+      setState(() {
+        _fallbackImageUrl = fallbackUrl;
+      });
+    }
+  }
 }

lib/widgets/common/disconnected_state.dart

@@ -0,0 +1,112 @@
+import 'package:flutter/material.dart';
+import '../../theme/design_tokens.dart';
+
+/// A reusable widget for displaying disconnected/offline state.
+class DisconnectedState extends StatelessWidget {
+  final String title;
+  final String? subtitle;
+  final String? actionLabel;
+  final VoidCallback? onAction;
+  final IconData? actionIcon;
+  final double iconSize;
+
+  const DisconnectedState({
+    super.key,
+    required this.title,
+    this.subtitle,
+    this.actionLabel,
+    this.onAction,
+    this.actionIcon,
+    this.iconSize = 64,
+  });
+
+  /// Simple disconnected state without action button
+  factory DisconnectedState.simple() => const DisconnectedState(
+        title: 'Not connected to Music Assistant',
+      );
+
+  /// Disconnected state with settings button for navigation
+  factory DisconnectedState.withSettingsAction({
+    required VoidCallback onSettings,
+  }) =>
+      DisconnectedState(
+        title: 'Not connected to Music Assistant',
+        actionLabel: 'Configure Server',
+        actionIcon: Icons.settings_rounded,
+        onAction: onSettings,
+      );
+
+  /// Full disconnected state with title, subtitle, and action (for home screen)
+  factory DisconnectedState.full({
+    required VoidCallback onSettings,
+  }) =>
+      DisconnectedState(
+        title: 'Not Connected',
+        subtitle: 'Connect to your Music Assistant server to start listening',
+        actionLabel: 'Configure Server',
+        actionIcon: Icons.settings_rounded,
+        onAction: onSettings,
+        iconSize: 80,
+      );
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return Center(
+      child: Padding(
+        padding: Spacing.paddingAll32,
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Icon(
+              Icons.cloud_off_rounded,
+              size: iconSize,
+              color: colorScheme.onSurface.withOpacity(0.54),
+            ),
+            SizedBox(height: iconSize > IconSizes.xxl ? Spacing.xl : Spacing.lg),
+            Text(
+              title,
+              style: TextStyle(
+                color: colorScheme.onSurface.withOpacity(subtitle != null ? 1.0 : 0.7),
+                fontSize: subtitle != null ? 24 : 16,
+                fontWeight: subtitle != null ? FontWeight.w300 : FontWeight.normal,
+              ),
+              textAlign: TextAlign.center,
+            ),
+            if (subtitle != null) ...[
+              Spacing.vGap12,
+              Text(
+                subtitle!,
+                style: TextStyle(
+                  color: colorScheme.onSurface.withOpacity(0.7),
+                  fontSize: 14,
+                ),
+                textAlign: TextAlign.center,
+              ),
+            ],
+            if (actionLabel != null && onAction != null) ...[
+              SizedBox(height: subtitle != null ? Spacing.xxl : Spacing.xl),
+              ElevatedButton.icon(
+                onPressed: onAction,
+                icon: actionIcon != null ? Icon(actionIcon) : const SizedBox.shrink(),
+                label: Text(actionLabel!),
+                style: ElevatedButton.styleFrom(
+                  backgroundColor: colorScheme.primary,
+                  foregroundColor: colorScheme.onPrimary,
+                  padding: EdgeInsets.symmetric(
+                    horizontal: subtitle != null ? Spacing.xxl : Spacing.xl,
+                    vertical: subtitle != null ? Spacing.lg : Spacing.md,
+                  ),
+                  shape: RoundedRectangleBorder(
+                    borderRadius: BorderRadius.circular(Radii.xxl),
+                  ),
+                ),
+              ),
+            ],
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/widgets/common/empty_state.dart

@@ -0,0 +1,190 @@
+import 'package:flutter/material.dart';
+import '../../theme/design_tokens.dart';
+
+/// A reusable empty state widget for displaying when no data is available.
+///
+/// Shows an icon, message, and optional action button.
+class EmptyState extends StatelessWidget {
+  final IconData icon;
+  final String message;
+  final String? actionLabel;
+  final VoidCallback? onAction;
+  final double iconSize;
+
+  const EmptyState({
+    super.key,
+    required this.icon,
+    required this.message,
+    this.actionLabel,
+    this.onAction,
+    this.iconSize = 64,
+  });
+
+  /// Creates an empty state for artists
+  factory EmptyState.artists({VoidCallback? onRefresh}) => EmptyState(
+        icon: Icons.person_outline_rounded,
+        message: 'No artists found',
+        actionLabel: onRefresh != null ? 'Refresh' : null,
+        onAction: onRefresh,
+      );
+
+  /// Creates an empty state for albums
+  factory EmptyState.albums({VoidCallback? onRefresh}) => EmptyState(
+        icon: Icons.album_outlined,
+        message: 'No albums found',
+        actionLabel: onRefresh != null ? 'Refresh' : null,
+        onAction: onRefresh,
+      );
+
+  /// Creates an empty state for tracks
+  factory EmptyState.tracks({VoidCallback? onRefresh}) => EmptyState(
+        icon: Icons.music_note_outlined,
+        message: 'No tracks found',
+        actionLabel: onRefresh != null ? 'Refresh' : null,
+        onAction: onRefresh,
+      );
+
+  /// Creates an empty state for playlists
+  factory EmptyState.playlists({VoidCallback? onRefresh}) => EmptyState(
+        icon: Icons.playlist_play_rounded,
+        message: 'No playlists found',
+        actionLabel: onRefresh != null ? 'Refresh' : null,
+        onAction: onRefresh,
+      );
+
+  /// Creates an empty state for queue
+  factory EmptyState.queue() => const EmptyState(
+        icon: Icons.queue_music,
+        message: 'Queue is empty',
+      );
+
+  /// Creates an empty state for search results
+  factory EmptyState.search() => const EmptyState(
+        icon: Icons.search_off_rounded,
+        message: 'No results found',
+      );
+
+  /// Creates a custom empty state with title and subtitle
+  factory EmptyState.custom({
+    required IconData icon,
+    required String title,
+    String? subtitle,
+    VoidCallback? onRefresh,
+  }) =>
+      _CustomEmptyState(
+        icon: icon,
+        title: title,
+        subtitle: subtitle,
+        onRefresh: onRefresh,
+      );
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return Center(
+      child: Padding(
+        padding: Spacing.paddingAll24,
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Icon(
+              icon,
+              size: iconSize,
+              color: colorScheme.onSurface.withOpacity(0.38),
+            ),
+            Spacing.vGap16,
+            Text(
+              message,
+              style: TextStyle(
+                color: colorScheme.onSurface.withOpacity(0.6),
+                fontSize: 16,
+              ),
+              textAlign: TextAlign.center,
+            ),
+            if (actionLabel != null && onAction != null) ...[
+              Spacing.vGap24,
+              ElevatedButton.icon(
+                onPressed: onAction,
+                icon: const Icon(Icons.refresh_rounded),
+                label: Text(actionLabel!),
+                style: ElevatedButton.styleFrom(
+                  backgroundColor: colorScheme.surfaceVariant,
+                  foregroundColor: colorScheme.onSurfaceVariant,
+                ),
+              ),
+            ],
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+/// A custom empty state with title and optional subtitle
+class _CustomEmptyState extends EmptyState {
+  final String title;
+  final String? subtitle;
+  final VoidCallback? onRefresh;
+
+  const _CustomEmptyState({
+    required super.icon,
+    required this.title,
+    this.subtitle,
+    this.onRefresh,
+  }) : super(message: title);
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return Center(
+      child: Padding(
+        padding: Spacing.paddingAll24,
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Icon(
+              icon,
+              size: iconSize,
+              color: colorScheme.onSurface.withOpacity(0.38),
+            ),
+            Spacing.vGap16,
+            Text(
+              title,
+              style: TextStyle(
+                color: colorScheme.onSurface.withOpacity(0.6),
+                fontSize: 16,
+                fontWeight: FontWeight.w500,
+              ),
+              textAlign: TextAlign.center,
+            ),
+            if (subtitle != null) ...[
+              Spacing.vGap8,
+              Text(
+                subtitle!,
+                style: TextStyle(
+                  color: colorScheme.onSurface.withOpacity(0.4),
+                  fontSize: 14,
+                ),
+                textAlign: TextAlign.center,
+              ),
+            ],
+            if (onRefresh != null) ...[
+              Spacing.vGap24,
+              ElevatedButton.icon(
+                onPressed: onRefresh,
+                icon: const Icon(Icons.refresh_rounded),
+                label: const Text('Refresh'),
+                style: ElevatedButton.styleFrom(
+                  backgroundColor: colorScheme.surfaceVariant,
+                  foregroundColor: colorScheme.onSurfaceVariant,
+                ),
+              ),
+            ],
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/widgets/debug/debug_console.dart

@@ -0,0 +1,173 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import '../../services/debug_logger.dart';
+import '../../theme/design_tokens.dart';
+
+/// A collapsible debug console for viewing application logs
+class DebugConsole extends StatelessWidget {
+  final VoidCallback onClear;
+  final int maxLogs;
+
+  const DebugConsole({
+    super.key,
+    required this.onClear,
+    this.maxLogs = 50,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: Spacing.paddingAll12,
+      decoration: BoxDecoration(
+        color: Colors.black.withOpacity(0.8),
+        borderRadius: BorderRadius.circular(Radii.md),
+        border: Border.all(color: Colors.green.withOpacity(0.3)),
+      ),
+      constraints: const BoxConstraints(maxHeight: 200),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: [
+          _buildHeader(context),
+          const Divider(color: Colors.green, height: 8),
+          Expanded(
+            child: _buildLogsList(),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildHeader(BuildContext context) {
+    return Row(
+      children: [
+        const Icon(Icons.terminal, color: Colors.green, size: IconSizes.xs),
+        Spacing.hGap8,
+        const Text(
+          'Debug Console',
+          style: TextStyle(
+            color: Colors.green,
+            fontSize: 12,
+            fontWeight: FontWeight.bold,
+          ),
+        ),
+        const Spacer(),
+        TextButton.icon(
+          onPressed: () => _copyLogs(context),
+          style: TextButton.styleFrom(
+            padding: EdgeInsets.zero,
+            minimumSize: const Size(50, 20),
+          ),
+          icon: const Icon(Icons.copy, size: 10, color: Colors.green),
+          label: const Text(
+            'Copy',
+            style: TextStyle(fontSize: 10, color: Colors.green),
+          ),
+        ),
+        TextButton(
+          onPressed: () {
+            DebugLogger().clear();
+            onClear();
+          },
+          style: TextButton.styleFrom(
+            padding: EdgeInsets.zero,
+            minimumSize: const Size(40, 20),
+          ),
+          child: const Text(
+            'Clear',
+            style: TextStyle(fontSize: 10, color: Colors.green),
+          ),
+        ),
+      ],
+    );
+  }
+
+  void _copyLogs(BuildContext context) {
+    final logs = DebugLogger().getAllLogs();
+    if (logs.isNotEmpty) {
+      Clipboard.setData(ClipboardData(text: logs));
+      ScaffoldMessenger.of(context).showSnackBar(
+        const SnackBar(
+          content: Text('Logs copied to clipboard'),
+          backgroundColor: Colors.green,
+          duration: Duration(seconds: 2),
+        ),
+      );
+    } else {
+      ScaffoldMessenger.of(context).showSnackBar(
+        const SnackBar(
+          content: Text('No logs to copy'),
+          duration: Duration(seconds: 2),
+        ),
+      );
+    }
+  }
+
+  Widget _buildLogsList() {
+    return SingleChildScrollView(
+      reverse: true,
+      child: Builder(
+        builder: (context) {
+          final allLogs = DebugLogger().logs;
+          final recentLogs = allLogs.length > maxLogs
+              ? allLogs.sublist(allLogs.length - maxLogs)
+              : allLogs;
+
+          if (recentLogs.isEmpty) {
+            return const Text(
+              'No debug logs yet. Try detecting auth.',
+              style: TextStyle(
+                color: Colors.green,
+                fontSize: 10,
+                fontStyle: FontStyle.italic,
+              ),
+            );
+          }
+
+          return Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: recentLogs
+                .map((log) => Padding(
+                      padding: EdgeInsets.only(bottom: Spacing.xxs),
+                      child: Text(
+                        log,
+                        style: const TextStyle(
+                          color: Colors.green,
+                          fontSize: 10,
+                          fontFamily: 'monospace',
+                        ),
+                      ),
+                    ))
+                .toList(),
+          );
+        },
+      ),
+    );
+  }
+}
+
+/// A toggle button for showing/hiding the debug console
+class DebugToggleButton extends StatelessWidget {
+  final bool isVisible;
+  final VoidCallback onToggle;
+
+  const DebugToggleButton({
+    super.key,
+    required this.isVisible,
+    required this.onToggle,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return TextButton.icon(
+      onPressed: onToggle,
+      icon: Icon(
+        isVisible ? Icons.bug_report : Icons.bug_report_outlined,
+        size: 16,
+      ),
+      label: Text(
+        isVisible ? 'Hide Debug' : 'Show Debug',
+        style: const TextStyle(fontSize: 12),
+      ),
+    );
+  }
+}

lib/widgets/global_player_overlay.dart

@@ -149,19 +149,65 @@ class _GlobalPlayerOverlayState extends State<GlobalPlayerOverlay>
                     navSelectedColor = hsl.withLightness((hsl.lightness - 0.3).clamp(0.2, 1.0)).toColor();
                   }
 
+                  // Base background: use adaptive surface color if available, otherwise default surface
+                  final baseBgColor = (themeProvider.adaptiveTheme && themeProvider.adaptiveSurfaceColor != null)
+                      ? themeProvider.adaptiveSurfaceColor!
+                      : colorScheme.surface;
+
                   return ValueListenableBuilder<PlayerExpansionState>(
                     valueListenable: playerExpansionNotifier,
-                    builder: (context, expansionState, child) {
+                    // Pass BottomNavigationBar as child to avoid rebuilding it every frame
-                      // Base background: use adaptive surface color if available, otherwise default surface
+                    child: BottomNavigationBar(
-                      final baseBgColor = (themeProvider.adaptiveTheme && themeProvider.adaptiveSurfaceColor != null)
+                      currentIndex: navigationProvider.selectedIndex,
-                          ? themeProvider.adaptiveSurfaceColor!
+                      onTap: (index) {
-                          : colorScheme.surface;
+                        if (GlobalPlayerOverlay.isPlayerExpanded) {
-
+                          GlobalPlayerOverlay.collapsePlayer();
-                      // Lerp between base color and player background when expanded
+                        }
+                        navigationProvider.navigatorKey.currentState?.popUntil((route) => route.isFirst);
+                        if (index == 3) {
+                          GlobalPlayerOverlay.hidePlayer();
+                        } else if (navigationProvider.selectedIndex == 3) {
+                          GlobalPlayerOverlay.showPlayer();
+                        }
+                        navigationProvider.setSelectedIndex(index);
+                      },
+                      backgroundColor: Colors.transparent,
+                      selectedItemColor: navSelectedColor,
+                      unselectedItemColor: colorScheme.onSurface.withOpacity(0.54),
+                      elevation: 0,
+                      type: BottomNavigationBarType.fixed,
+                      selectedFontSize: 12,
+                      unselectedFontSize: 12,
+                      items: const [
+                        BottomNavigationBarItem(
+                          icon: Icon(Icons.home_outlined),
+                          activeIcon: Icon(Icons.home_rounded),
+                          label: 'Home',
+                        ),
+                        BottomNavigationBarItem(
+                          icon: Icon(Icons.library_music_outlined),
+                          activeIcon: Icon(Icons.library_music_rounded),
+                          label: 'Library',
+                        ),
+                        BottomNavigationBarItem(
+                          icon: Icon(Icons.search_rounded),
+                          activeIcon: Icon(Icons.search_rounded),
+                          label: 'Search',
+                        ),
+                        BottomNavigationBarItem(
+                          icon: Icon(Icons.settings_outlined),
+                          activeIcon: Icon(Icons.settings_rounded),
+                          label: 'Settings',
+                        ),
+                      ],
+                    ),
+                    builder: (context, expansionState, navBar) {
+                      // Only compute colors during animation - this is the hot path
                       final navBgColor = expansionState.progress > 0 && expansionState.backgroundColor != null
                           ? Color.lerp(baseBgColor, expansionState.backgroundColor, expansionState.progress)!
                           : baseBgColor;
 
+                      // Use AnimatedContainer for smoother transitions instead of rebuilding
                       return Container(
                         decoration: BoxDecoration(
                           color: navBgColor,
@@ -175,56 +221,7 @@ class _GlobalPlayerOverlayState extends State<GlobalPlayerOverlay>
                                 ]
                               : null,
                         ),
-                        child: BottomNavigationBar(
+                        child: navBar, // Reuse pre-built navigation bar
-                          currentIndex: navigationProvider.selectedIndex,
-                          onTap: (index) {
-                            // Collapse player if expanded
-                            if (GlobalPlayerOverlay.isPlayerExpanded) {
-                              GlobalPlayerOverlay.collapsePlayer();
-                            }
-
-                            // Pop any pushed routes (album/artist details) first
-                            navigationProvider.navigatorKey.currentState?.popUntil((route) => route.isFirst);
-
-                            // Hide mini player on Settings screen, show on other screens
-                            if (index == 3) {
-                              GlobalPlayerOverlay.hidePlayer();
-                            } else if (navigationProvider.selectedIndex == 3) {
-                              GlobalPlayerOverlay.showPlayer();
-                            }
-
-                            navigationProvider.setSelectedIndex(index);
-                          },
-                          backgroundColor: Colors.transparent,
-                          selectedItemColor: navSelectedColor,
-                          unselectedItemColor: colorScheme.onSurface.withOpacity(0.54),
-                          elevation: 0,
-                          type: BottomNavigationBarType.fixed,
-                          selectedFontSize: 12,
-                          unselectedFontSize: 12,
-                          items: const [
-                            BottomNavigationBarItem(
-                              icon: Icon(Icons.home_outlined),
-                              activeIcon: Icon(Icons.home_rounded),
-                              label: 'Home',
-                            ),
-                            BottomNavigationBarItem(
-                              icon: Icon(Icons.library_music_outlined),
-                              activeIcon: Icon(Icons.library_music_rounded),
-                              label: 'Library',
-                            ),
-                            BottomNavigationBarItem(
-                              icon: Icon(Icons.search_rounded),
-                              activeIcon: Icon(Icons.search_rounded),
-                              label: 'Search',
-                            ),
-                            BottomNavigationBarItem(
-                              icon: Icon(Icons.settings_outlined),
-                              activeIcon: Icon(Icons.settings_rounded),
-                              label: 'Settings',
-                            ),
-                          ],
-                        ),
                       );
                     },
                   );
@@ -234,17 +231,22 @@ class _GlobalPlayerOverlayState extends State<GlobalPlayerOverlay>
           ),
         ),
         // Global player overlay - slides down when hidden, renders ON TOP of bottom nav
-        AnimatedBuilder(
+        // Use Selector instead of Consumer to avoid rebuilds during animation
-          animation: _slideAnimation,
+        Selector<MusicAssistantProvider, ({bool isConnected, bool hasPlayer})>(
-          builder: (context, child) {
+          selector: (_, provider) => (
-            return Consumer<MusicAssistantProvider>(
+            isConnected: provider.isConnected,
-              builder: (context, maProvider, _) {
+            hasPlayer: provider.selectedPlayer != null,
-                // Only show player if connected and has a track
+          ),
-                if (!maProvider.isConnected ||
+          builder: (context, state, child) {
-                    maProvider.currentTrack == null ||
+            // Only show player if connected and has a selected player
-                    maProvider.selectedPlayer == null) {
+            if (!state.isConnected || !state.hasPlayer) {
-                  return const SizedBox.shrink();
+              return const SizedBox.shrink();
-                }
+            }
+            return AnimatedBuilder(
+              animation: _slideAnimation,
+              child: ExpandablePlayer(key: globalPlayerKey, slideOffset: 0),
+              builder: (context, staticChild) {
+                // Only slideOffset changes during animation, player widget stays same
                 return ExpandablePlayer(
                   key: globalPlayerKey,
                   slideOffset: _slideAnimation.value,

lib/widgets/player/device_selector_bar.dart

@@ -0,0 +1,177 @@
+import 'package:flutter/material.dart';
+import '../../theme/design_tokens.dart';
+
+/// A compact device selector bar shown when no track is playing
+class DeviceSelectorBar extends StatelessWidget {
+  final dynamic selectedPlayer;
+  final dynamic peekPlayer;
+  final bool hasMultiplePlayers;
+  final Color backgroundColor;
+  final Color textColor;
+  final double width;
+  final double height;
+  final double borderRadius;
+  final double slideOffset;
+  final GestureDragStartCallback? onHorizontalDragStart;
+  final GestureDragUpdateCallback? onHorizontalDragUpdate;
+  final GestureDragEndCallback? onHorizontalDragEnd;
+
+  const DeviceSelectorBar({
+    super.key,
+    required this.selectedPlayer,
+    this.peekPlayer,
+    required this.hasMultiplePlayers,
+    required this.backgroundColor,
+    required this.textColor,
+    required this.width,
+    required this.height,
+    required this.borderRadius,
+    required this.slideOffset,
+    this.onHorizontalDragStart,
+    this.onHorizontalDragUpdate,
+    this.onHorizontalDragEnd,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onHorizontalDragStart: hasMultiplePlayers ? onHorizontalDragStart : null,
+      onHorizontalDragUpdate: hasMultiplePlayers ? onHorizontalDragUpdate : null,
+      onHorizontalDragEnd: hasMultiplePlayers ? onHorizontalDragEnd : null,
+      child: Material(
+        color: backgroundColor,
+        borderRadius: BorderRadius.circular(borderRadius),
+        elevation: 4,
+        shadowColor: Colors.black.withOpacity(0.3),
+        clipBehavior: Clip.antiAlias,
+        child: SizedBox(
+          width: width,
+          height: height,
+          child: ClipRect(
+            child: Stack(
+              children: [
+                // Peek player content (shows when dragging)
+                if (slideOffset.abs() > 0.01 && peekPlayer != null)
+                  _buildPeekContent(),
+
+                // Current player content
+                Transform.translate(
+                  offset: Offset(slideOffset * width, 0),
+                  child: Padding(
+                    padding: Spacing.paddingH16,
+                    child: Row(
+                      children: [
+                        Icon(
+                          _getPlayerIcon(selectedPlayer.name),
+                          color: textColor,
+                          size: IconSizes.md,
+                        ),
+                        Spacing.hGap12,
+                        Expanded(
+                          child: Column(
+                            mainAxisAlignment: MainAxisAlignment.center,
+                            crossAxisAlignment: CrossAxisAlignment.start,
+                            children: [
+                              Text(
+                                selectedPlayer.name,
+                                style: TextStyle(
+                                  color: textColor,
+                                  fontSize: 16,
+                                  fontWeight: FontWeight.w500,
+                                ),
+                                maxLines: 1,
+                                overflow: TextOverflow.ellipsis,
+                              ),
+                              if (hasMultiplePlayers)
+                                Text(
+                                  'Swipe to switch device',
+                                  style: TextStyle(
+                                    color: textColor.withOpacity(0.6),
+                                    fontSize: 12,
+                                  ),
+                                ),
+                            ],
+                          ),
+                        ),
+                      ],
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+
+  /// Build peek player content that slides in from the edge
+  Widget _buildPeekContent() {
+    final isFromRight = slideOffset < 0;
+    final peekProgress = slideOffset.abs();
+
+    // Calculate peek position - slides in as main content slides out
+    final peekBaseOffset = isFromRight
+        ? width * (1 - peekProgress)
+        : -width * (1 - peekProgress);
+
+    return Transform.translate(
+      offset: Offset(peekBaseOffset, 0),
+      child: Padding(
+        padding: Spacing.paddingH16,
+        child: Row(
+          children: [
+            Icon(
+              _getPlayerIcon(peekPlayer.name),
+              color: textColor,
+              size: IconSizes.md,
+            ),
+            Spacing.hGap12,
+            Expanded(
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.center,
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(
+                    peekPlayer.name,
+                    style: TextStyle(
+                      color: textColor,
+                      fontSize: 16,
+                      fontWeight: FontWeight.w500,
+                    ),
+                    maxLines: 1,
+                    overflow: TextOverflow.ellipsis,
+                  ),
+                  if (hasMultiplePlayers)
+                    Text(
+                      'Swipe to switch device',
+                      style: TextStyle(
+                        color: textColor.withOpacity(0.6),
+                        fontSize: 12,
+                      ),
+                    ),
+                ],
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  /// Get appropriate icon for player based on name
+  IconData _getPlayerIcon(String playerName) {
+    final nameLower = playerName.toLowerCase();
+    if (nameLower.contains('phone') || nameLower.contains('ensemble')) {
+      return Icons.phone_android_rounded;
+    } else if (nameLower.contains('group')) {
+      return Icons.speaker_group_rounded;
+    } else if (nameLower.contains('tv') || nameLower.contains('television')) {
+      return Icons.tv_rounded;
+    } else if (nameLower.contains('cast') || nameLower.contains('chromecast')) {
+      return Icons.cast_rounded;
+    } else {
+      return Icons.speaker_rounded;
+    }
+  }
+}

lib/widgets/player/player_controls.dart

@@ -0,0 +1,179 @@
+import 'package:flutter/material.dart';
+import '../animated_icon_button.dart';
+import '../../theme/design_tokens.dart';
+
+/// Playback control buttons (shuffle, previous, play/pause, next, repeat)
+class PlayerControls extends StatelessWidget {
+  final bool isPlaying;
+  final bool? shuffle;
+  final String? repeatMode;
+  final Color textColor;
+  final Color primaryColor;
+  final Color backgroundColor;
+  final double skipButtonSize;
+  final double playButtonSize;
+  final double playButtonContainerSize;
+  final double progress; // Animation progress 0-1
+  final double expandedElementsOpacity;
+  final bool isLoadingQueue;
+  final VoidCallback onPrevious;
+  final VoidCallback onPlayPause;
+  final VoidCallback onNext;
+  final VoidCallback? onStop;
+  final VoidCallback? onToggleShuffle;
+  final VoidCallback? onCycleRepeat;
+
+  const PlayerControls({
+    super.key,
+    required this.isPlaying,
+    this.shuffle,
+    this.repeatMode,
+    required this.textColor,
+    required this.primaryColor,
+    required this.backgroundColor,
+    required this.skipButtonSize,
+    required this.playButtonSize,
+    required this.playButtonContainerSize,
+    required this.progress,
+    required this.expandedElementsOpacity,
+    required this.isLoadingQueue,
+    required this.onPrevious,
+    required this.onPlayPause,
+    required this.onNext,
+    this.onStop,
+    this.onToggleShuffle,
+    this.onCycleRepeat,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final t = progress;
+    final isExpanded = t > 0.5;
+
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      mainAxisAlignment: isExpanded ? MainAxisAlignment.center : MainAxisAlignment.end,
+      children: [
+        // Shuffle (expanded only)
+        if (isExpanded)
+          Opacity(
+            opacity: expandedElementsOpacity,
+            child: _buildSecondaryButton(
+              icon: Icons.shuffle_rounded,
+              color: shuffle == true ? primaryColor : textColor.withOpacity(0.5),
+              onPressed: isLoadingQueue ? null : onToggleShuffle,
+            ),
+          ),
+        if (isExpanded) SizedBox(width: _lerpDouble(0, 20, t)),
+
+        // Previous
+        _buildControlButton(
+          icon: Icons.skip_previous_rounded,
+          color: textColor,
+          size: skipButtonSize,
+          onPressed: onPrevious,
+          useAnimation: isExpanded,
+        ),
+        SizedBox(width: _lerpDouble(0, 20, t)),
+
+        // Play/Pause
+        _buildPlayButton(),
+        SizedBox(width: _lerpDouble(0, 20, t)),
+
+        // Next
+        _buildControlButton(
+          icon: Icons.skip_next_rounded,
+          color: textColor,
+          size: skipButtonSize,
+          onPressed: onNext,
+          useAnimation: isExpanded,
+        ),
+
+        // Repeat (expanded only)
+        if (isExpanded) SizedBox(width: _lerpDouble(0, 20, t)),
+        if (isExpanded)
+          Opacity(
+            opacity: expandedElementsOpacity,
+            child: _buildSecondaryButton(
+              icon: repeatMode == 'one' ? Icons.repeat_one_rounded : Icons.repeat_rounded,
+              color: repeatMode != null && repeatMode != 'off'
+                  ? primaryColor
+                  : textColor.withOpacity(0.5),
+              onPressed: isLoadingQueue ? null : onCycleRepeat,
+            ),
+          ),
+      ],
+    );
+  }
+
+  Widget _buildControlButton({
+    required IconData icon,
+    required Color color,
+    required double size,
+    required VoidCallback onPressed,
+    required bool useAnimation,
+  }) {
+    if (useAnimation) {
+      return AnimatedIconButton(
+        icon: icon,
+        color: color,
+        iconSize: size,
+        onPressed: onPressed,
+      );
+    }
+    return IconButton(
+      icon: Icon(icon),
+      color: color,
+      iconSize: size,
+      onPressed: onPressed,
+      padding: Spacing.paddingAll4,
+      constraints: const BoxConstraints(),
+    );
+  }
+
+  Widget _buildSecondaryButton({
+    required IconData icon,
+    required Color color,
+    VoidCallback? onPressed,
+  }) {
+    return SizedBox(
+      width: 44,
+      height: 44,
+      child: IconButton(
+        icon: Icon(icon),
+        color: color,
+        iconSize: 22,
+        onPressed: onPressed,
+        padding: EdgeInsets.zero,
+      ),
+    );
+  }
+
+  Widget _buildPlayButton() {
+    final bgColor = Color.lerp(Colors.transparent, primaryColor, progress);
+    final iconColor = Color.lerp(textColor, backgroundColor, progress);
+
+    return GestureDetector(
+      onLongPress: onStop,
+      child: Container(
+        width: playButtonContainerSize,
+        height: playButtonContainerSize,
+        decoration: BoxDecoration(
+          color: bgColor,
+          shape: BoxShape.circle,
+        ),
+        child: IconButton(
+          icon: Icon(isPlaying ? Icons.pause_rounded : Icons.play_arrow_rounded),
+          color: iconColor,
+          iconSize: playButtonSize,
+          onPressed: onPlayPause,
+          padding: EdgeInsets.zero,
+        ),
+      ),
+    );
+  }
+
+  double _lerpDouble(double a, double b, double t) {
+    return a + (b - a) * t;
+  }
+}

lib/widgets/player/player_widgets.dart

@@ -0,0 +1,6 @@
+/// Player widget components extracted from expandable_player.dart
+library player_widgets;
+
+export 'device_selector_bar.dart';
+export 'player_controls.dart';
+export 'queue_panel.dart';

lib/widgets/player/queue_panel.dart

@@ -0,0 +1,169 @@
+import 'package:flutter/material.dart';
+import 'package:cached_network_image/cached_network_image.dart';
+import '../../providers/music_assistant_provider.dart';
+import '../../models/player.dart';
+import '../../theme/design_tokens.dart';
+import '../common/empty_state.dart';
+
+/// Panel that displays the current playback queue
+class QueuePanel extends StatelessWidget {
+  final MusicAssistantProvider maProvider;
+  final PlayerQueue? queue;
+  final bool isLoading;
+  final Color textColor;
+  final Color primaryColor;
+  final Color backgroundColor;
+  final double topPadding;
+  final VoidCallback onClose;
+  final VoidCallback onRefresh;
+
+  const QueuePanel({
+    super.key,
+    required this.maProvider,
+    required this.queue,
+    required this.isLoading,
+    required this.textColor,
+    required this.primaryColor,
+    required this.backgroundColor,
+    required this.topPadding,
+    required this.onClose,
+    required this.onRefresh,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: backgroundColor,
+      child: Column(
+        children: [
+          // Header
+          Container(
+            padding: EdgeInsets.only(top: topPadding + 4, left: 4, right: 16),
+            child: Row(
+              children: [
+                IconButton(
+                  icon: Icon(Icons.arrow_back_rounded, color: textColor, size: IconSizes.md),
+                  onPressed: onClose,
+                  padding: Spacing.paddingAll12,
+                ),
+                const Spacer(),
+                Text(
+                  'Queue',
+                  style: TextStyle(
+                    color: textColor,
+                    fontSize: 18,
+                    fontWeight: FontWeight.w600,
+                  ),
+                ),
+                const Spacer(),
+                IconButton(
+                  icon: Icon(Icons.refresh_rounded, color: textColor.withOpacity(0.7), size: IconSizes.sm),
+                  onPressed: onRefresh,
+                  padding: Spacing.paddingAll12,
+                ),
+              ],
+            ),
+          ),
+
+          // Queue content
+          Expanded(
+            child: isLoading
+                ? Center(child: CircularProgressIndicator(color: primaryColor))
+                : queue == null || queue!.items.isEmpty
+                    ? _buildEmptyState()
+                    : _buildQueueList(),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildEmptyState() {
+    return EmptyState.queue();
+  }
+
+  Widget _buildQueueList() {
+    final currentIndex = queue!.currentIndex ?? 0;
+    final items = queue!.items;
+
+    return ListView.builder(
+      padding: Spacing.paddingH8,
+      cacheExtent: 500,
+      itemCount: items.length,
+      itemBuilder: (context, index) {
+        final item = items[index];
+        final isCurrentItem = index == currentIndex;
+        final isPastItem = index < currentIndex;
+        final imageUrl = maProvider.api?.getImageUrl(item.track, size: 80);
+
+        return Opacity(
+          opacity: isPastItem ? 0.5 : 1.0,
+          child: Container(
+            margin: EdgeInsets.symmetric(vertical: Spacing.xxs),
+            decoration: BoxDecoration(
+              color: isCurrentItem ? primaryColor.withOpacity(0.15) : Colors.transparent,
+              borderRadius: BorderRadius.circular(Radii.md),
+            ),
+            child: ListTile(
+              dense: true,
+              leading: ClipRRect(
+                borderRadius: BorderRadius.circular(Radii.sm),
+                child: SizedBox(
+                  width: 44,
+                  height: 44,
+                  child: imageUrl != null
+                      ? CachedNetworkImage(
+                          imageUrl: imageUrl,
+                          fit: BoxFit.cover,
+                          placeholder: (context, url) => Container(
+                            color: textColor.withOpacity(0.1),
+                            child: Icon(Icons.music_note, color: textColor.withOpacity(0.3), size: 20),
+                          ),
+                          errorWidget: (context, url, error) => Container(
+                            color: textColor.withOpacity(0.1),
+                            child: Icon(Icons.music_note, color: textColor.withOpacity(0.3), size: 20),
+                          ),
+                        )
+                      : Container(
+                          color: textColor.withOpacity(0.1),
+                          child: Icon(Icons.music_note, color: textColor.withOpacity(0.3), size: 20),
+                        ),
+                ),
+              ),
+              title: Text(
+                item.track.name,
+                style: TextStyle(
+                  color: isCurrentItem ? primaryColor : textColor,
+                  fontSize: 14,
+                  fontWeight: isCurrentItem ? FontWeight.w600 : FontWeight.normal,
+                ),
+                maxLines: 1,
+                overflow: TextOverflow.ellipsis,
+              ),
+              subtitle: item.track.artists != null && item.track.artists!.isNotEmpty
+                  ? Text(
+                      item.track.artists!.first.name,
+                      style: TextStyle(
+                        color: textColor.withOpacity(0.6),
+                        fontSize: 12,
+                      ),
+                      maxLines: 1,
+                      overflow: TextOverflow.ellipsis,
+                    )
+                  : null,
+              trailing: isCurrentItem
+                  ? Icon(Icons.play_arrow_rounded, color: primaryColor, size: 20)
+                  : null,
+              onTap: () {
+                // TODO: Jump to this track in queue
+                // Music Assistant API doesn't currently expose a skip_to_index or play_queue_item endpoint
+                // Would need to add API method like skipToQueueIndex(queueId, index) if MA supports it
+                // Alternative: Could use multiple next() calls but that's inefficient and unreliable
+              },
+            ),
+          ),
+        );
+      },
+    );
+  }
+}

lib/widgets/player_selector.dart

@@ -98,10 +98,15 @@ class _PlayerSelectorSheetState extends State<_PlayerSelectorSheet> {
   @override
   void initState() {
     super.initState();
+    // Preload all player track info for display
+    context.read<MusicAssistantProvider>().preloadAllPlayerTracks();
+
     // Auto-refresh at configured polling interval
     _refreshTimer = Timer.periodic(Timings.playerPollingInterval, (_) {
       if (mounted) {
-        context.read<MusicAssistantProvider>().refreshPlayers();
+        final provider = context.read<MusicAssistantProvider>();
+        provider.refreshPlayers();
+        provider.preloadAllPlayerTracks();
       }
     });
   }
@@ -121,81 +126,92 @@ class _PlayerSelectorSheetState extends State<_PlayerSelectorSheet> {
         final textTheme = Theme.of(context).textTheme;
         final currentTrack = maProvider.currentTrack;
 
+        final screenHeight = MediaQuery.of(context).size.height;
+        final sheetHeight = screenHeight * 0.7; // Fixed 70% height
+
         return GestureDetector(
           onTap: () => Navigator.pop(context), // Tap outside to dismiss
           behavior: HitTestBehavior.opaque,
-          child: DraggableScrollableSheet(
+          child: Align(
-            initialChildSize: 0.6,
+            alignment: Alignment.bottomCenter,
-            minChildSize: 0.3,
+            child: GestureDetector(
-            maxChildSize: 0.85,
+              onTap: () {}, // Prevent taps on sheet from dismissing
-            builder: (context, scrollController) {
+              child: Container(
-              return GestureDetector(
+                height: sheetHeight,
-                onTap: () {}, // Prevent taps on sheet from dismissing
+                decoration: BoxDecoration(
-                child: Container(
+                  color: colorScheme.surface,
-              decoration: BoxDecoration(
+                  borderRadius: const BorderRadius.vertical(top: Radius.circular(20)),
-                color: colorScheme.surface,
+                ),
-                borderRadius: const BorderRadius.vertical(top: Radius.circular(20)),
+                child: Column(
-              ),
+                  children: [
-              child: Column(
+                    const SizedBox(height: 12),
-                children: [
+                    Container(
-                  const SizedBox(height: 12),
+                      width: 40,
-                  Container(
+                      height: 4,
-                    width: 40,
+                      decoration: BoxDecoration(
-                    height: 4,
+                        color: colorScheme.onSurface.withOpacity(0.2),
-                    decoration: BoxDecoration(
+                        borderRadius: BorderRadius.circular(2),
-                      color: colorScheme.onSurface.withOpacity(0.2),
+                      ),
-                      borderRadius: BorderRadius.circular(2),
                     ),
-                  ),
+                    const SizedBox(height: 20),
-                  const SizedBox(height: 20),
+                    Padding(
-                  Padding(
+                      padding: const EdgeInsets.symmetric(horizontal: 20),
-                    padding: const EdgeInsets.symmetric(horizontal: 20),
+                      child: Row(
-                    child: Row(
+                        children: [
-                      children: [
+                          Icon(Icons.speaker_group_rounded, color: colorScheme.onSurface),
-                        Icon(Icons.speaker_group_rounded, color: colorScheme.onSurface),
+                          const SizedBox(width: 12),
-                        const SizedBox(width: 12),
+                          Text(
-                        Text(
+                            'Select Player',
-                          'Select Player',
+                            style: textTheme.titleLarge?.copyWith(
-                          style: textTheme.titleLarge?.copyWith(
+                              color: colorScheme.onSurface,
-                            color: colorScheme.onSurface,
+                              fontWeight: FontWeight.bold,
-                            fontWeight: FontWeight.bold,
-                          ),
-                        ),
-                        const Spacer(),
-                        // Show last refresh indicator
-                        Icon(
-                          Icons.sync,
-                          color: colorScheme.onSurfaceVariant.withOpacity(0.5),
-                          size: 16,
-                        ),
-                      ],
-                    ),
-                  ),
-                  const SizedBox(height: 12),
-                  Expanded(
-                    child: currentPlayers.isEmpty
-                        ? Center(
-                            child: Text(
-                              'No players available',
-                              style: TextStyle(color: colorScheme.onSurface.withOpacity(0.54)),
                             ),
-                          )
+                          ),
-                        : ListView.builder(
+                          const Spacer(),
-                            controller: scrollController,
+                          // Show last refresh indicator
-                            padding: EdgeInsets.fromLTRB(12, 8, 12, BottomSpacing.navBarOnly),
+                          Icon(
-                            itemCount: currentPlayers.length,
+                            Icons.sync,
+                            color: colorScheme.onSurfaceVariant.withOpacity(0.5),
+                            size: 16,
+                          ),
+                        ],
+                      ),
+                    ),
+                    const SizedBox(height: 12),
+                    Expanded(
+                      child: currentPlayers.isEmpty
+                          ? Center(
+                              child: Text(
+                                'No players available',
+                                style: TextStyle(color: colorScheme.onSurface.withOpacity(0.54)),
+                              ),
+                            )
+                          : ListView.builder(
+                              padding: EdgeInsets.fromLTRB(12, 8, 12, BottomSpacing.navBarOnly),
+                              itemCount: currentPlayers.length,
                             itemBuilder: (context, index) {
                               final player = currentPlayers[index];
                               final isSelected = player.playerId == maProvider.selectedPlayer?.playerId;
                               final isOn = player.available && player.powered;
                               final isPlaying = player.state == 'playing';
                               final isPaused = player.state == 'paused';
+                              // MA uses 'idle' for players that were paused (especially cast-based)
+                              // but still have track info - treat as "has content" for display
+                              final isIdle = player.state == 'idle';
 
-                              // Get album art for selected player if playing
+                              // Get track info - use current track for selected player, cache for others
+                              final playerTrack = isSelected
+                                  ? currentTrack
+                                  : maProvider.getCachedTrackForPlayer(player.playerId);
+
+                              // Player has content if playing, paused, or idle with cached track
+                              final hasContent = isPlaying || isPaused || (isIdle && playerTrack != null);
+
+                              // Get album art for any player with content
                               String? albumArtUrl;
-                              if (isSelected && currentTrack != null && isOn) {
+                              if (playerTrack != null && isOn && hasContent) {
                                 albumArtUrl = maProvider.getImageUrl(
-                                  currentTrack.album ?? currentTrack,
+                                  playerTrack.album ?? playerTrack,
                                   size: 128,
                                 );
                               }
@@ -279,27 +295,29 @@ class _PlayerSelectorSheetState extends State<_PlayerSelectorSheet> {
                                                               ? colorScheme.onSurface.withOpacity(0.3)
                                                               : isPlaying
                                                                   ? Colors.green
-                                                                  : isPaused
+                                                                  : hasContent
-                                                                      ? Colors.orange
+                                                                      ? Colors.orange // paused or idle with content
                                                                       : colorScheme.onSurfaceVariant.withOpacity(0.5),
                                                     ),
                                                   ),
                                                   const SizedBox(width: 6),
-                                                  Text(
+                                                  Expanded(
-                                                    !player.available
+                                                    child: Text(
-                                                        ? 'Unavailable'
+                                                      !player.available
-                                                        : !isOn
+                                                          ? 'Unavailable'
-                                                            ? 'Off'
+                                                          : !isOn
-                                                            : isPlaying
+                                                              ? 'Off'
-                                                                ? 'Playing'
+                                                              : hasContent && playerTrack != null
-                                                                : isPaused
+                                                                  ? playerTrack.name
-                                                                    ? 'Paused'
+                                                                  : 'Idle',
-                                                                    : 'Idle',
+                                                      style: TextStyle(
-                                                    style: TextStyle(
+                                                        color: player.available
-                                                      color: player.available
+                                                            ? colorScheme.onSurfaceVariant
-                                                          ? colorScheme.onSurfaceVariant
+                                                            : colorScheme.onSurface.withOpacity(0.24),
-                                                          : colorScheme.onSurface.withOpacity(0.24),
+                                                        fontSize: 13,
-                                                      fontSize: 13,
+                                                      ),
+                                                      maxLines: 1,
+                                                      overflow: TextOverflow.ellipsis,
                                                     ),
                                                   ),
                                                   if (isSelected) ...[
@@ -362,12 +380,11 @@ class _PlayerSelectorSheetState extends State<_PlayerSelectorSheet> {
                               );
                             },
                           ),
-                  ),
+                    ),
-                ],
+                  ],
+                ),
               ),
             ),
-            );
-          },
           ),
         );
       },

lib/widgets/volume_control.dart

@@ -1,9 +1,14 @@
+import 'dart:async';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
+import 'package:flutter_volume_controller/flutter_volume_controller.dart';
 import '../providers/music_assistant_provider.dart';
 import '../services/debug_logger.dart';
+import '../services/settings_service.dart';
 
 /// Volume control widget for Music Assistant players
+/// For local device: controls system media volume
+/// For MA players: controls player volume via API
 class VolumeControl extends StatefulWidget {
   final bool compact;
 
@@ -15,7 +20,42 @@ class VolumeControl extends StatefulWidget {
 
 class _VolumeControlState extends State<VolumeControl> {
   final _logger = DebugLogger();
-  double? _pendingVolume; // Track pending volume changes
+  double? _pendingVolume;
+  double? _systemVolume;
+  StreamSubscription? _volumeListener;
+  String? _localPlayerId;
+  bool _isLocalPlayer = false;
+
+  @override
+  void initState() {
+    super.initState();
+    _initLocalPlayer();
+  }
+
+  Future<void> _initLocalPlayer() async {
+    _localPlayerId = await SettingsService.getBuiltinPlayerId();
+
+    final volume = await FlutterVolumeController.getVolume();
+    if (mounted) {
+      setState(() {
+        _systemVolume = volume;
+      });
+    }
+
+    _volumeListener = FlutterVolumeController.addListener((volume) {
+      if (mounted && _isLocalPlayer) {
+        setState(() {
+          _systemVolume = volume;
+        });
+      }
+    });
+  }
+
+  @override
+  void dispose() {
+    _volumeListener?.cancel();
+    super.dispose();
+  }
 
   @override
   Widget build(BuildContext context) {
@@ -26,11 +66,14 @@ class _VolumeControlState extends State<VolumeControl> {
       return const SizedBox.shrink();
     }
 
-    final currentVolume = (_pendingVolume ?? player.volume.toDouble()) / 100.0;
+    _isLocalPlayer = _localPlayerId != null && player.playerId == _localPlayerId;
-    final isMuted = player.isMuted;
+
+    final currentVolume = _isLocalPlayer
+        ? (_pendingVolume ?? (_systemVolume ?? 0.5))
+        : (_pendingVolume ?? player.volume.toDouble()) / 100.0;
+    final isMuted = _isLocalPlayer ? false : player.isMuted;
 
     if (widget.compact) {
-      // Compact version - just mute button
       return IconButton(
         icon: Icon(
           isMuted ? Icons.volume_off : Icons.volume_up,
@@ -46,10 +89,8 @@ class _VolumeControlState extends State<VolumeControl> {
       );
     }
 
-    // Full volume control with slider
     return Row(
       children: [
-        // Mute button
         IconButton(
           icon: Icon(
             isMuted
@@ -67,65 +108,66 @@ class _VolumeControlState extends State<VolumeControl> {
             }
           },
         ),
-        // Volume slider
         Expanded(
-          child: SliderTheme(
+          child: SizedBox(
-            data: SliderThemeData(
+            height: 48, // Increase touch target height
-              trackHeight: 2,
+            child: SliderTheme(
-              thumbShape: const RoundSliderThumbShape(
+              data: SliderThemeData(
-                enabledThumbRadius: 6,
+                trackHeight: 2,
+                thumbShape: const RoundSliderThumbShape(enabledThumbRadius: 6),
+                overlayShape: const RoundSliderOverlayShape(overlayRadius: 20),
+                activeTrackColor: Colors.white,
+                inactiveTrackColor: Colors.white.withOpacity(0.3),
+                thumbColor: Colors.white,
+                overlayColor: Colors.white.withOpacity(0.2),
               ),
-              overlayShape: const RoundSliderOverlayShape(
+              child: Slider(
-                overlayRadius: 14,
-              ),
-              activeTrackColor: Colors.white,
-              inactiveTrackColor: Colors.white.withOpacity(0.3),
-              thumbColor: Colors.white,
-              overlayColor: Colors.white.withOpacity(0.2),
-            ),
-            child: Slider(
               value: currentVolume.clamp(0.0, 1.0),
               onChanged: (value) {
                 setState(() {
-                  _pendingVolume = value * 100;
+                  _pendingVolume = _isLocalPlayer ? value : value * 100;
                 });
               },
               onChangeEnd: (value) async {
-                final volumeLevel = (value * 100).round();
+                if (_isLocalPlayer) {
-                _logger.log('Volume: Setting to $volumeLevel%');
+                  _logger.log('Volume: Setting system volume to ${(value * 100).round()}%');
-                try {
+                  try {
-                  // Unmute if changing volume while muted
+                    await FlutterVolumeController.setVolume(value);
-                  if (isMuted) {
+                    _systemVolume = value;
-                    _logger.log('Volume: Unmuting player first');
+                  } catch (e) {
-                    await maProvider.setMute(player.playerId, false);
+                    _logger.log('Volume: Error setting system volume - $e');
-                  }
+                  } finally {
-                  await maProvider.setVolume(player.playerId, volumeLevel);
-
-                  // Wait for the player state to update by polling
-                  for (int i = 0; i < 10; i++) {
-                    await Future.delayed(const Duration(milliseconds: 100));
                     if (mounted) {
-                      final updatedPlayer = maProvider.selectedPlayer;
+                      setState(() {
-                      if (updatedPlayer != null && (updatedPlayer.volume - volumeLevel).abs() <= 2) {
+                        _pendingVolume = null;
-                        _logger.log('Volume: Updated to $volumeLevel%');
+                      });
-                        break;
-                      }
                     }
                   }
-                } catch (e) {
+                } else {
-                  _logger.log('Volume: Error - $e');
+                  final volumeLevel = (value * 100).round();
-                } finally {
+                  _logger.log('Volume: Setting to $volumeLevel%');
-                  if (mounted) {
+                  try {
-                    setState(() {
+                    if (isMuted) {
-                      _pendingVolume = null;
+                      _logger.log('Volume: Unmuting player first');
-                    });
+                      await maProvider.setMute(player.playerId, false);
+                    }
+                    await maProvider.setVolume(player.playerId, volumeLevel);
+                    _logger.log('Volume: Set to $volumeLevel%');
+                  } catch (e) {
+                    _logger.log('Volume: Error - $e');
+                  } finally {
+                    if (mounted) {
+                      setState(() {
+                        _pendingVolume = null;
+                      });
+                    }
                   }
                 }
               },
             ),
+            ),
           ),
         ),
-        // Volume percentage
         SizedBox(
           width: 40,
           child: Text(

pubspec.yaml

@@ -1,7 +1,7 @@
 name: ensemble
 description: A minimalistic Music Assistant client built with Flutter
 publish_to: 'none'
-version: 1.4.0+4
+version: 1.8.0+9
 
 environment:
   sdk: '>=3.0.0 <4.0.0'
@@ -11,7 +11,6 @@ dependencies:
     sdk: flutter
 
   # UI
-  cupertino_icons: ^1.0.6
   material_design_icons_flutter: ^7.0.7296
   dynamic_color: 1.6.8
   palette_generator: ^0.3.3+3
@@ -29,11 +28,15 @@ dependencies:
 
   # Utilities
   uuid: ^4.2.1
+  package_info_plus: ^8.0.0
+  device_info_plus: ^10.1.0
+  share_plus: ^9.0.0
 
   # Audio - Local Playback
   just_audio: ^0.9.36
   audio_service: ^0.18.12
   audio_session: ^0.1.18
+  flutter_volume_controller: ^1.3.2
 
 dev_dependencies:
   flutter_test: