chore: Bump version to 2.0.0-beta for release

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

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

.github/workflows/build-apk.yml

@@ -42,19 +42,16 @@ jobs:
         run: flutter analyze
         continue-on-error: true
 
-      - name: Create signing keystore
+      - name: Setup signing keystore
         run: |
-          # Create a keystore for signing (valid for 10000 days)
-          keytool -genkey -v -keystore android/app/upload-keystore.jks \
-            -storetype JKS -keyalg RSA -keysize 2048 -validity 10000 \
-            -storepass android -keypass android \
-            -alias upload -dname "CN=AssistantToTheMusic, OU=HomeServer, O=Personal, L=Home, S=Home, C=US"
+          # Decode keystore from secret (persistent key for consistent signatures)
+          echo "${{ secrets.KEYSTORE_BASE64 }}" | base64 -d > android/app/upload-keystore.jks
 
           # Create key.properties file
           cat > android/key.properties << EOF
-          storePassword=android
-          keyPassword=android
-          keyAlias=upload
+          storePassword=${{ secrets.KEYSTORE_PASSWORD }}
+          keyPassword=${{ secrets.KEY_PASSWORD }}
+          keyAlias=${{ secrets.KEY_ALIAS }}
           storeFile=upload-keystore.jks
           EOF
 
@@ -64,7 +61,7 @@ jobs:
       - name: Upload APK artifact
         uses: actions/upload-artifact@v4
         with:
-          name: amass-apk
+          name: ensemble-apk
           path: build/app/outputs/flutter-apk/app-release.apk
           retention-days: 30
 

ARCHITECTURE.md

@@ -1,429 +0,0 @@
-# Music Assistant Mobile - Architecture Documentation
-
-## Overview
-
-Music Assistant Mobile is a Flutter application that connects to a [Music Assistant](https://music-assistant.io/) server to browse and control music playback across various devices and players.
-
-## Architecture Pattern
-
-The app follows the **Provider pattern** for state management with a **layered architecture**:
-
-```
-┌─────────────────────────────────────┐
-│         Presentation Layer          │
-│    (Screens, Widgets, UI Logic)     │
-└──────────────┬──────────────────────┘
-               │
-┌──────────────┴──────────────────────┐
-│         State Management            │
-│    (Providers - Business Logic)     │
-└──────────────┬──────────────────────┘
-               │
-┌──────────────┴──────────────────────┐
-│         Service Layer               │
-│  (API, Auth, Audio, Settings, etc)  │
-└──────────────┬──────────────────────┘
-               │
-┌──────────────┴──────────────────────┐
-│         Data Layer                  │
-│      (Models, DTOs)                 │
-└─────────────────────────────────────┘
-```
-
-## Key Components
-
-### 1. Providers (`lib/providers/`)
-
-**MusicAssistantProvider** - Central state manager
-- Manages WebSocket connection to Music Assistant server
-- Handles authentication and auto-login
-- Maintains library state (artists, albums, tracks)
-- Manages player selection and playback state
-- Implements player list caching (5-minute cache)
-- Polls selected player state every 2 seconds
-
-**MusicPlayerProvider** - Local audio playback (deprecated)
-- Legacy local playback using just_audio
-- Being phased out in favor of server-side playback control
-
-### 2. Services (`lib/services/`)
-
-**MusicAssistantAPI** - WebSocket API client
-- Connects to Music Assistant server via WebSocket
-- Implements JSON-RPC message protocol
-- Handles server info, events, and command responses
-- Provides methods for:
-  - Library browsing (artists, albums, tracks, playlists)
-  - Search functionality
-  - Player control and queue management
-  - Built-in player registration
-  - Stream URL generation
-
-**AuthService** - Authentication management
-- Handles Authelia authentication (separate auth domain)
-- Stores and retrieves session cookies
-- Auto-login with saved credentials
-
-**SettingsService** - Persistent settings
-- Uses `shared_preferences` for local storage
-- Stores:
-  - Server URL and WebSocket port
-  - Username and password (encrypted)
-  - Built-in player ID
-  - Authentication token
-
-**AudioPlayerService** - Local audio playback
-- Wraps `just_audio` for audio playback
-- Handles play, pause, stop, seek operations
-- Currently used for built-in player mode
-
-**BuiltinPlayerService** - Server push events
-- Listens to built-in player events from server
-- Handles QUEUE_ITEMS, PLAY_MEDIA, STOP, etc.
-- Coordinates with AudioPlayerService
-
-**DebugLogger** - Logging utility
-- Prints timestamped debug logs
-- Helps troubleshooting and development
-
-### 3. Models (`lib/models/`)
-
-**MediaItem** - Base class for media entities
-- `Artist` - Artist metadata
-- `Album` - Album metadata with artists
-- `Track` - Track metadata with artists and album
-- All include provider mappings and metadata
-
-**Player** - Music Assistant player
-- Player ID, name, state (idle/playing/paused)
-- Availability and power status
-- Derived `isPlaying` getter
-
-**PlayerQueue** - Player queue state
-- List of `QueueItem`
-- Current index/item
-- Player ID
-
-**QueueItem** - Item in player queue
-- Queue item ID
-- Track metadata
-- Stream details (sample rate, bit depth, content type)
-
-**BuiltinPlayerEvent** - Server push events
-- Event type (QUEUE_ITEMS, PLAY_MEDIA, etc.)
-- Event data payload
-
-### 4. Screens (`lib/screens/`)
-
-**Navigation Flow:**
-```
-MainLayout (Bottom Navigation)
-├── NewHomeScreen
-│   ├── LibraryStats
-│   ├── AlbumRow (Recent, Random, All)
-│   └── SearchScreen (via app bar)
-├── NewLibraryScreen
-│   ├── LibraryArtistsScreen (with pull-to-refresh)
-│   ├── LibraryAlbumsScreen (with pull-to-refresh)
-│   └── LibraryTracksScreen
-└── SettingsScreen
-```
-
-**Detail Screens:**
-- `ArtistDetailsScreen` - Artist albums
-- `AlbumDetailsScreen` - Album tracks with play button
-- `PlayerScreen` - Full player view
-- `QueueScreen` - Queue management (reorder, remove)
-- `SearchScreen` - Global search (artists, albums, tracks)
-
-### 5. Widgets (`lib/widgets/`)
-
-**Reusable Components:**
-- `MiniPlayer` - Bottom now playing bar
-- `PlayerSelector` - Device/player picker
-- `AlbumRow` - Horizontal scrolling album list
-- `LibraryStats` - Library statistics card
-- `PlayerControls` - Playback controls (deprecated)
-
-## Data Flow
-
-### Player Selection & Control
-
-```
-User selects player → PlayerSelector widget
-                    ↓
-        MusicAssistantProvider.selectPlayer()
-                    ↓
-        Starts player state polling (every 2s)
-                    ↓
-        Fetches queue via getQueue()
-                    ↓
-        Updates currentTrack
-                    ↓
-        MiniPlayer displays track info
-```
-
-### Music Playback
-
-```
-User plays album → AlbumDetailsScreen._playAlbum()
-                ↓
-        MusicAssistantProvider.playTracks()
-                ↓
-        API: player_queues/play_media
-                ↓
-        Server queues tracks on selected player
-                ↓
-        Player state polling updates UI
-```
-
-### Library Loading
-
-```
-App connects → MusicAssistantProvider._initialize()
-             ↓
-         connectToServer()
-             ↓
-         WebSocket connection established
-             ↓
-         loadLibrary() (auto-triggered)
-             ↓
-         Fetches artists, albums, tracks (limit: 100 each)
-             ↓
-         notifyListeners() → UI updates
-```
-
-## API Integration
-
-### WebSocket Commands
-
-The app uses Music Assistant's WebSocket JSON-RPC API:
-
-**Library:**
-- `music/artists/library_items` - Get artists
-- `music/albums/library_items` - Get albums
-- `music/tracks/library_items` - Get tracks
-- `music/search` - Search all media types
-
-**Playback Control:**
-- `player_queues/play_media` - Queue and play tracks
-- `player_command/play` - Resume playback
-- `player_command/pause` - Pause playback
-- `player_command/next` - Next track
-- `player_command/previous` - Previous track
-
-**Queue Management:**
-- `player_queues/items` - Get queue items (returns List, not object)
-
-**Players:**
-- `players/all` - Get all available players
-
-**Built-in Player:**
-- `builtin_player/register` - Register device as player
-- `builtin_player/update_state` - Update player state
-
-### Event Subscriptions
-
-The WebSocket connection receives real-time events:
-- `player_updated` - Player state changed
-- `queue_updated` - Queue modified
-- `queue_items_updated` - Queue items changed
-- `media_item_played` - Track started playing
-- `builtin_player` - Built-in player event (QUEUE_ITEMS, PLAY_MEDIA, etc.)
-
-## Performance Optimizations
-
-### 1. Player List Caching
-- Cache player list for 5 minutes
-- Reduces API calls on player selector opens
-- Force refresh available via `refreshPlayers()`
-
-### 2. Debounced Search
-- 500ms debounce on search input
-- Prevents excessive API calls while typing
-
-### 3. Pagination
-- Library loads with limit (default: 100)
-- Can be extended for infinite scroll
-
-### 4. Image Loading
-- NetworkImage with error handling
-- Fallback to icon on load failure
-- Size parameter for different image resolutions
-
-## State Management Pattern
-
-```dart
-// Provider pattern example
-class MusicAssistantProvider with ChangeNotifier {
-  List<Album> _albums = [];
-
-  List<Album> get albums => _albums;
-
-  Future<void> loadAlbums() async {
-    _albums = await _api.getAlbums();
-    notifyListeners(); // Triggers UI rebuild
-  }
-}
-
-// Widget consumption
-class AlbumList extends StatelessWidget {
-  @override
-  Widget build(BuildContext context) {
-    final provider = context.watch<MusicAssistantProvider>();
-    return ListView(
-      children: provider.albums.map((album) => AlbumTile(album)).toList(),
-    );
-  }
-}
-```
-
-## Authentication Flow
-
-### Authelia Integration
-
-Music Assistant Mobile supports Authelia authentication on separate domains:
-
-```
-1. User enters credentials in SettingsScreen
-           ↓
-2. AuthService.login(serverUrl, username, password)
-           ↓
-3. POST to auth.serverscloud.org
-           ↓
-4. Extract authelia_session cookie
-           ↓
-5. Store cookie in SettingsService
-           ↓
-6. Include cookie in WebSocket handshake
-           ↓
-7. WebSocket: headers['Cookie'] = 'authelia_session=...'
-```
-
-### Auto-Login
-
-On app startup:
-1. Check for saved credentials
-2. If found, attempt silent login
-3. On success, connect to Music Assistant server
-4. On failure, user can re-enter credentials
-
-## Error Handling
-
-### API Errors
-- Try-catch blocks around all API calls
-- Errors logged via DebugLogger
-- UI shows error states (empty states, snackbars)
-
-### WebSocket Reconnection
-- Auto-reconnect on disconnect (3-second delay)
-- Connection state tracked via Stream
-- UI reflects connection status
-
-### Queue Parsing Errors
-- Defensive parsing with try-catch per item
-- Failed items skipped, parsing continues
-- Debug logging for troubleshooting
-
-## Testing Strategy
-
-### Unit Tests (TODO)
-- API service methods
-- Model parsing (fromJson/toJson)
-- State management logic
-
-### Widget Tests (TODO)
-- Screen rendering
-- User interactions
-- Navigation flows
-
-### Integration Tests (TODO)
-- End-to-end user flows
-- WebSocket communication
-- Authentication
-
-## Future Enhancements
-
-### Planned Features
-1. **Playlists** - Browse and play playlists
-2. **Favorites** - Mark/unmark favorites, filter by favorites
-3. **Lyrics** - Display lyrics for current track
-4. **Sleep Timer** - Auto-stop playback
-5. **Crossfade** - Smooth transitions between tracks
-6. **Equalizer** - Audio customization
-7. **Offline Mode** - Cached playback
-8. **Android Auto / CarPlay** - In-car integration
-
-### Technical Improvements
-1. **Retry Logic** - Exponential backoff for failed requests
-2. **Better Error Messages** - User-friendly error descriptions
-3. **Loading States** - Skeleton screens, shimmer effects
-4. **Infinite Scroll** - Lazy load library items
-5. **Image Caching** - Reduce network usage
-6. **WebSocket Reconnection** - Smarter reconnection strategy
-
-## Development Guidelines
-
-### Code Style
-- Follow [Effective Dart](https://dart.dev/guides/language/effective-dart)
-- Use meaningful variable names
-- Add comments for complex logic
-- Keep functions small and focused
-
-### File Organization
-```
-lib/
-├── main.dart                 # App entry point
-├── models/                   # Data models
-├── providers/                # State management
-├── screens/                  # Full-screen views
-├── widgets/                  # Reusable components
-└── services/                 # Business logic, API, utilities
-```
-
-### Adding New Features
-
-1. **Define Model** (if needed) - Add to `lib/models/`
-2. **Create API Method** - Add to `MusicAssistantAPI`
-3. **Update Provider** - Add state and methods to relevant provider
-4. **Build UI** - Create screen/widget in `lib/screens/` or `lib/widgets/`
-5. **Wire Navigation** - Update navigation logic
-6. **Test** - Write unit/widget tests
-7. **Document** - Update this file and add code comments
-
-### Debugging Tips
-
-1. **Enable Debug Logging** - DebugLogger prints to console
-2. **Check WebSocket Messages** - Logs show all WS traffic
-3. **Inspect Provider State** - Use Flutter DevTools
-4. **Network Debugging** - Check API responses
-5. **Test Authentication** - Verify session cookies
-
-## Dependencies
-
-### Core
-- `flutter` - UI framework
-- `provider` - State management
-- `web_socket_channel` - WebSocket client
-
-### Audio
-- `just_audio` - Audio playback
-- `audio_service` - Background playback
-
-### Networking
-- `http` - HTTP requests
-- `uuid` - Unique ID generation
-
-### Storage
-- `shared_preferences` - Local key-value storage
-
-### UI
-- `flutter_launcher_icons` - App icons
-
-## Resources
-
-- **Music Assistant**: https://music-assistant.io/
-- **Music Assistant API Docs**: https://music-assistant.io/integration/websocket/
-- **Flutter Docs**: https://docs.flutter.dev/
-- **Provider Package**: https://pub.dev/packages/provider
-- **just_audio Package**: https://pub.dev/packages/just_audio

CLEANUP_GHOST_PLAYERS.md

@@ -1,153 +0,0 @@
-# Cleaning Up Ghost "Music Assistant Mobile" Players
-
-## The Problem
-
-Early versions of Amass registered the mobile device as a local playback player with Music Assistant. This created "Music Assistant Mobile" player entities on your server. Multiple app restarts/logins created multiple ghost players that persist on the server.
-
-## Current Status
-
-The Amass app now:
-- ✅ No longer registers as a player (acts as remote control only)
-- ✅ Filters out these ghost players automatically
-- ✅ Won't create new ghost players
-
-However, the old players still exist on your Music Assistant server.
-
-## Finding Ghost Players
-
-### Using Amass Player Diagnostics Tool
-
-1. Open Amass app
-2. Go to **Settings** → **Debug Logs**
-3. Tap the **speaker icon** (🔊) in the top right
-4. See all players including hidden ghost players (highlighted in red)
-5. Tap **Copy List** to copy player IDs for manual removal
-
-This shows you:
-- All player names and IDs
-- Whether they're available or unavailable
-- Their current state (idle/playing/paused)
-
-**Note**: Ghost players are marked as `available: true` but are builtin_player type with default_name "Music Assistant Mobile". They exist in your `settings.json` but don't show in the web UI because they're orphaned mobile players.
-
-## Findings from Your Server
-
-Your Music Assistant logs show:
-- **26 ghost "Music Assistant Mobile" players** found in `settings.json`
-- Created between Nov 22-23, 2025 (during app development/testing)
-- All are `provider: builtin_player` with `available: true`
-- Player IDs are UUIDs like `202f4c01-abbf-4a46-83f8-9954570e7e50`
-
-These players are in your settings but not visible in the UI, which is why manual cleanup is needed.
-
-## Automated Cleanup (Recommended)
-
-A cleanup script has been created for your server:
-
-```bash
-# Run the cleanup script
-cd /home/home-server/Amass
-./cleanup_ghost_players.sh
-
-# It will:
-# 1. Show you all 26 ghost players
-# 2. Ask for confirmation
-# 3. Backup settings.json
-# 4. Remove ghost players
-# 5. Tell you to restart Music Assistant
-```
-
-After running the script, restart Music Assistant:
-```bash
-docker restart music_assistant
-# Or if using docker-compose:
-cd /home/home-server/docker/music-assistant
-docker compose restart
-```
-
-## Manual Cleanup (Advanced)
-
-If you prefer manual cleanup:
-
-### Option 1: Via Web UI Settings
-
-1. Open your Music Assistant web UI (e.g., `http://ma.serverscloud.org:8097`)
-2. Navigate to **Settings** → **Players**
-3. Look for players named "Music Assistant Mobile" or similar
-4. For each ghost player:
-   - Click the **⋮** (three dots) menu
-   - Select **Remove Player** or **Delete**
-5. Confirm deletion for each one
-
-### Option 2: Via Players Tab
-
-1. Open Music Assistant web UI
-2. Click the **Players** tab
-3. Find all "Music Assistant Mobile" entries
-4. Right-click or use the context menu to remove each one
-
-## How to Clean Up (Home Assistant)
-
-If Music Assistant is integrated with Home Assistant:
-
-1. Open Home Assistant
-2. Go to **Settings** → **Devices & Services**
-3. Click **Music Assistant**
-4. Look for "Music Assistant Mobile" devices/entities
-5. For each one:
-   - Click on the entity
-   - Click **⋮** → **Delete**
-
-## How to Clean Up (Command Line / SSH)
-
-If you have SSH access to your Music Assistant server:
-
-```bash
-# Connect to your server
-ssh user@ma.serverscloud.org
-
-# Access Music Assistant container (if dockerized)
-docker exec -it music_assistant bash
-
-# Or if running as an add-on, use Home Assistant CLI
-ha addons exec music_assistant
-
-# Navigate to data directory (location varies by installation)
-cd /data  # or wherever your config is stored
-
-# Backup first!
-cp mass.json mass.json.backup
-
-# Edit the config file
-nano mass.json  # or vi, etc.
-
-# Look for player entries with names like "Music Assistant Mobile"
-# Remove those entries (be careful with JSON syntax!)
-# Save and exit
-
-# Restart Music Assistant
-# (from outside container if dockerized)
-docker restart music_assistant
-```
-
-⚠️ **Warning**: Manual JSON editing is risky. Use web UI method if possible.
-
-## Verifying Cleanup
-
-After cleanup, check the Amass app logs. You should see:
-- No more "Filtering out leftover player" messages
-- "Loaded X players" with a reasonable count (not 30+)
-
-## Prevention
-
-The current version of Amass (v1.0.0+) will not create new ghost players. If you see new ones appearing:
-1. Make sure you're using the latest version
-2. Uninstall any old versions of the app
-3. Clear app data before reinstalling
-
-## Questions?
-
-If ghost players keep appearing after cleanup, there may be another app or integration registering them. Check:
-- Other Music Assistant mobile apps
-- Home Assistant automations
-- Music Assistant player announcements

LOCAL_PLAYBACK_FIX.md

@@ -1,440 +0,0 @@
-# Local Playback Fix - Complete Solution
-
-**Date:** 2025-11-28
-**Project:** Assistant To The Music (Flutter Android App)
-**Status:** ✅ FIXED - Audio playback working!
-
----
-
-## Problem Summary
-
-The Music Assistant Android app's local playback feature was completely broken:
-- ❌ No audio playback when playing to built-in player
-- ❌ Server rejected state updates every second with validation errors
-- ❌ Streaming URLs returned 404 errors
-
-## Root Causes Identified
-
-### 1. Protocol Type Mismatch (Primary Issue - 95% Confidence)
-**Problem:** App sent player state as a **string** (`"playing"`, `"paused"`), but Music Assistant server expected a **dataclass object** with boolean fields.
-
-**Evidence:**
-```
-ERROR: Value paused of type <class 'str'> is invalid for state, expected
-value of type <class 'music_assistant_models.builtin_player.BuiltinPlayerState'>
-```
-
-This error repeated every 1 second, breaking bidirectional state sync.
-
-### 2. Missing Traefik Route for Builtin Player
-**Problem:** Server sent media URLs with `/builtin_player/flow/...` prefix, but Traefik had no route configured for this path.
-
-**Evidence:**
-```
-WARNING: Received unhandled GET request to /flow/87e98e85...mp3
-```
-
-Server received requests but couldn't handle them (404 errors).
-
----
-
-## Solutions Applied
-
-### Fix #1: Correct State Update Protocol
-
-**File:** `lib/services/music_assistant_api.dart` (lines 1212-1246)
-
-**Before (Incorrect):**
-```dart
-Future<void> updateBuiltinPlayerState(String playerId, {
-  String? state,  // ❌ WRONG: String type
-  int? volumeLevel,
-  double? elapsedTime,
-  // ... other flat parameters
-}) async {
-  await _sendCommand('builtin_player/update_state', args: {
-    'player_id': playerId,
-    if (state != null) 'state': state,  // ❌ Sends string
-    if (volumeLevel != null) 'volume_level': volumeLevel,
-    // ...
-  });
-}
-```
-
-**After (Correct):**
-```dart
-Future<void> updateBuiltinPlayerState(
-  String playerId, {
-  required bool powered,
-  required bool playing,
-  required bool paused,
-  required int position,
-  required int volume,
-  required bool muted,
-}) async {
-  await _sendCommand('builtin_player/update_state', args: {
-    'player_id': playerId,
-    'state': {  // ✅ Sends object
-      'powered': powered,
-      'playing': playing,
-      'paused': paused,
-      'position': position,
-      'volume': volume,
-      'muted': muted,
-    },
-  });
-}
-```
-
-**File:** `lib/providers/music_assistant_provider.dart` (lines 150-175)
-
-**Before (Incorrect):**
-```dart
-const state = 'playing';  // ❌ Hardcoded workaround
-
-await _api!.updateBuiltinPlayerState(
-  playerId,
-  state: state,  // ❌ String
-  elapsedTime: position,
-  totalTime: duration,
-  powered: _isLocalPlayerPowered,
-  volumeLevel: volume,
-  available: true,
-);
-```
-
-**After (Correct):**
-```dart
-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,  // ✅ Boolean
-  paused: isPaused,    // ✅ Boolean
-  position: position,
-  volume: volume,
-  muted: _localPlayer.volume == 0.0,
-);
-```
-
-**Result:** ✅ State updates now accepted by server, no more validation errors!
-
----
-
-### Fix #2: Add Traefik Route for Builtin Player Streams
-
-**File:** `/home/home-server/docker/music-assistant/docker-compose.yml`
-
-**Added:**
-```yaml
-# Builtin player router without Authelia (port 8095 - builtin player streams)
-- "traefik.http.routers.musicassistant-builtin.rule=(Host(`musicassistant.serverscloud.org`) || Host(`ma.serverscloud.org`)) && PathPrefix(`/builtin_player`)"
-- "traefik.http.routers.musicassistant-builtin.entrypoints=websecure"
-- "traefik.http.routers.musicassistant-builtin.tls.certresolver=letsencrypt"
-- "traefik.http.routers.musicassistant-builtin.service=musicassistant"
-```
-
-**Updated main router to exclude builtin_player:**
-```yaml
-# Main web UI router with Authelia (excludes builtin_player and other public endpoints)
-- "traefik.http.routers.musicassistant.rule=... && !PathPrefix(`/builtin_player`) ..."
-```
-
-**Configuration Details:**
-- **Route:** `/builtin_player/*` → Music Assistant port 8095
-- **Authentication:** Bypasses Authelia (no auth required for streams)
-- **TLS:** HTTPS with Let's Encrypt certificate
-- **Hosts:** `musicassistant.serverscloud.org` and `ma.serverscloud.org`
-
-**Result:** ✅ Builtin player streaming URLs now accessible!
-
----
-
-### Fix #3: URL Construction Logic
-
-**File:** `lib/providers/music_assistant_provider.dart` (lines 236-269)
-
-**Implementation:**
-```dart
-case 'play_media':
-  final urlPath = event['media_url'] as String?;
-
-  if (urlPath != null && _serverUrl != null) {
-    String fullUrl;
-    if (urlPath.startsWith('http')) {
-      fullUrl = urlPath;  // Use absolute URL as-is
-    } else {
-      // Add https:// if not present
-      var baseUrl = _serverUrl!;
-      if (!baseUrl.startsWith('http://') && !baseUrl.startsWith('https://')) {
-        baseUrl = 'https://$baseUrl';
-      }
-
-      // Construct full URL
-      baseUrl = baseUrl.endsWith('/')
-          ? baseUrl.substring(0, baseUrl.length - 1)
-          : baseUrl;
-      final path = urlPath.startsWith('/') ? urlPath : '/$urlPath';
-      fullUrl = '$baseUrl$path';
-    }
-
-    await _localPlayer.playUrl(fullUrl);
-  }
-  break;
-```
-
-**URL Transformation Example:**
-```
-Server sends:    builtin_player/flow/87e98e85-f8e3-4966-a32b-ed585e50ffb3.mp3
-_serverUrl:      https://ma.serverscloud.org
-Final URL:       https://ma.serverscloud.org/builtin_player/flow/87e98e85-f8e3-4966-a32b-ed585e50ffb3.mp3
-
-Traefik routes:  → musicassistant:8095 (builtin player endpoint)
-```
-
-**Result:** ✅ Audio streams load and play correctly!
-
----
-
-## Additional Improvements
-
-### Enhanced Debug Logging
-
-**File:** `lib/providers/music_assistant_provider.dart`
-
-Added comprehensive logging for troubleshooting:
-```dart
-_logger.log('🎵 play_media: urlPath=$urlPath, _serverUrl=$_serverUrl');
-_logger.log('🎵 Added https:// protocol to baseUrl: $baseUrl');
-_logger.log('🎵 Constructed URL: baseUrl=$baseUrl + path=$path = $fullUrl');
-```
-
-**File:** `lib/services/local_player_service.dart`
-
-Added volume getter and playback error logging:
-```dart
-double get volume => _player.volume;
-
-_player.playbackEventStream.listen((event) {}, onError: (Object e, StackTrace st) {
-  _logger.log('LocalPlayerService: Playback error: $e');
-});
-```
-
----
-
-## Server Protocol Specification
-
-### BuiltinPlayerState Dataclass
-
-Based on Music Assistant server code (`music_assistant_models.builtin_player`):
-
-```python
-@dataclass
-class BuiltinPlayerState(DataClassDictMixin):
-    """Model for state updates from the builtin (web) player."""
-
-    powered: bool
-    playing: bool
-    paused: bool
-    position: int
-    volume: int
-    muted: bool
-```
-
-### Expected API Call Format
-
-```json
-{
-  "command": "builtin_player/update_state",
-  "args": {
-    "player_id": "87e98e85-f8e3-4966-a32b-ed585e50ffb3",
-    "state": {
-      "powered": true,
-      "playing": true,
-      "paused": false,
-      "position": 42,
-      "volume": 75,
-      "muted": false
-    }
-  }
-}
-```
-
----
-
-## Testing Results
-
-### Before Fixes
-```
-[ERROR] Value paused of type <class 'str'> is invalid for state
-[ERROR] (repeats every second)
-LocalPlayerService: Playback error: (0) Source error
-WARNING: Received unhandled GET request to /flow/...
-```
-
-### After Fixes
-```
-✅ [17:43:38.615] 📊 Updating builtin player state: powered=true, playing=true, ...
-✅ [17:43:38.615] Received message: (message_id, result, partial)
-✅ [17:43:38.615] 🎵 Constructed URL: https://ma.serverscloud.org/builtin_player/flow/...
-✅ [17:43:38.615] LocalPlayerService: Loading URL: https://...
-✅ Audio plays successfully!
-```
-
-**Results:**
-- ✅ No validation errors
-- ✅ State sync working perfectly
-- ✅ Streaming URLs accessible
-- ✅ Audio playback working
-- ✅ Playback controls responsive
-- ✅ Volume control working
-
----
-
-## Git Commits
-
-### App Repository
-```bash
-# Main protocol fix
-git commit -m "Fix: Send player state as dataclass object instead of string"
-# SHA: 17cfc32
-
-# Debug logging
-git commit -m "Debug: Add logging for media URL construction"
-# SHA: b20fcca
-
-# Final URL fix
-git commit -m "Fix: Keep builtin_player prefix in URL for proper routing"
-# SHA: 365455d
-```
-
-### Infrastructure Repository
-```bash
-# Traefik routing
-git commit -m "Add Traefik route for builtin player streams"
-# SHA: d20d90a
-```
-
-**Branch:** `claude/fix-local-playback`
-**Build:** https://github.com/CollotsSpot/Assistant-To-The-Music/actions/runs/19770759319
-
----
-
-## Architecture Overview
-
-### Network Flow
-```
-Android App
-    ↓ WebSocket (wss://)
-    ↓ HTTPS (builtin_player streams)
-Traefik Reverse Proxy
-    ↓ Route: /builtin_player/* → port 8095
-    ↓ Route: /ws → port 8095
-    ↓ No Authelia for both routes
-Music Assistant (Docker)
-    ↓ Port 8095: Main service + builtin player
-    ↓ Port 8097: Standard streaming
-Music Assistant Server
-```
-
-### State Sync Flow
-```
-1. App → Server: builtin_player/update_state with state object
-2. Server accepts and updates player state
-3. Server → App: player_updated events
-4. Server → App: builtin_player events (play_media, pause, etc.)
-5. App executes commands and reports new state
-```
-
----
-
-## Lessons Learned
-
-### 1. Protocol Documentation Gaps
-The builtin player feature is relatively new (added March 2025) and lacks detailed API documentation. The investigation required:
-- Reverse-engineering the server's Python code
-- Examining Docker container internals
-- Trial and error with state formats
-
-**Key Insight:** When official docs are missing, inspect the server source code directly.
-
-### 2. Traefik Routing Complexity
-The builtin player uses a different URL scheme (`/builtin_player/flow/*`) than standard streaming (`/flow/*`). This required a dedicated Traefik route.
-
-**Key Insight:** Always verify Traefik routing configuration when adding new features.
-
-### 3. Type Mismatches in Cross-Language APIs
-The app developer assumed `state` was a string enum (logical for Dart), but the Python server expected a complex dataclass.
-
-**Key Insight:** Cross-language API integrations require careful validation of expected data structures.
-
----
-
-## Future Improvements
-
-### 1. Better Error Handling
-Currently, playback errors are logged but not surfaced to the user. Consider:
-- Toast notifications for playback failures
-- Retry logic for transient network errors
-- Fallback to different audio formats
-
-### 2. Stream Quality Options
-Add ability to select stream quality:
-- FLAC (current default)
-- MP3 (better compatibility)
-- AAC (mobile-optimized)
-
-### 3. Proper State Machine
-Implement formal state machine for player states:
-- Idle → Loading → Buffering → Playing
-- Handle edge cases (completed, error states)
-- Better paused vs stopped distinction
-
-### 4. Official Dart Client Library
-Consider contributing a Dart/Flutter client library to the Music Assistant project to prevent future protocol mismatches.
-
----
-
-## References
-
-### Investigation Report
-- Full analysis: `/home/home-server/investigation/001-local-playback-failure-analysis.md`
-- Root cause confidence: 95%
-- Success probability: 90%+ (confirmed!)
-
-### Music Assistant Documentation
-- [Builtin Player Support](https://www.music-assistant.io/player-support/builtin/)
-- [Builtin Player PR #2009](https://github.com/music-assistant/server/pull/2009)
-- [Stream To FAQ](https://www.music-assistant.io/faq/stream-to/)
-- [Technical Info](https://www.music-assistant.io/faq/tech-info/)
-
-### Code Repositories
-- App: https://github.com/CollotsSpot/Assistant-To-The-Music
-- Infrastructure: https://github.com/CollotsSpot/home-lab-infrastructure
-
----
-
-## Summary
-
-**Total Issues Fixed:** 2 critical bugs
-**Files Modified:** 4 (3 app files + 1 infrastructure file)
-**Commits:** 4 total
-**Time to Fix:** ~1 hour (after investigation)
-**Success Rate:** 100% ✅
-
-The local playback feature is now **fully functional** thanks to:
-1. ✅ Correct state update protocol (dataclass object)
-2. ✅ Proper Traefik routing for builtin player
-3. ✅ Correct URL construction logic
-
-**Status:** Production-ready! 🎉
-
----
-
-*Generated: 2025-11-28*
-*Fixed by: Claude Code*
-*Report ID: LOCAL_PLAYBACK_FIX*

OVERNIGHT_WORK_SUMMARY.md

@@ -1,472 +0,0 @@
-# Overnight Work Session Summary
-
-## Session Overview
-
-This document summarizes all improvements and features added to the Music Assistant Mobile app during the comprehensive overnight development session.
-
-**Session Date:** 2025-01-22
-**Total Commits:** 9
-**Files Changed:** 20+
-**Lines Added:** 1,500+
-
----
-
-## ✅ Completed Tasks
-
-### 1. Now Playing Bar Debugging & Fixes
-
-**Problem:** Now playing bar wasn't showing even when music was playing
-
-**Solution:**
-- Fixed queue endpoint from `players/queue/items` to `player_queues/items`
-- Changed parameter from `player_id` to `queue_id` to match API format
-- Added defensive parsing for queue items with try-catch per item
-- Added debug logging to inspect raw queue data structure
-- Fixed QueueItem parsing to handle missing `queue_item_id` field (fallback to `item_id`)
-
-**Files Modified:**
-- `lib/services/music_assistant_api.dart`
-- `lib/models/player.dart`
-
-**Impact:** Now playing bar now correctly shows current track when music is playing on any selected player.
-
----
-
-### 2. Home Page Enhancements
-
-**Added Features:**
-- **Recent Albums Row** - Shows recently played albums
-- **Random Albums Row** ("Discover") - Displays random albums for music discovery
-- **Library Statistics** - Visual card showing artists/albums/tracks counts
-- **Improved Layout** - Better spacing and visual hierarchy
-
-**New API Methods:**
-```dart
-Future<List<Album>> getRecentAlbums({int limit = 10})
-Future<List<Album>> getRandomAlbums({int limit = 10})
-Future<Map<String, int>> getLibraryStats()
-```
-
-**New Widgets:**
-- `lib/widgets/album_row.dart` - Horizontal scrolling album list
-- `lib/widgets/library_stats.dart` - Statistics display card
-
-**Files Modified:**
-- `lib/screens/new_home_screen.dart`
-- `lib/services/music_assistant_api.dart`
-
-**Impact:** Home screen is now much more engaging with personalized content and discovery features.
-
----
-
-### 3. Global Search Functionality
-
-**Added:**
-- Search button in home and library screen app bars
-- Navigation to existing SearchScreen
-- Quick access to search from main navigation
-
-**Files Modified:**
-- `lib/screens/new_home_screen.dart`
-- `lib/screens/new_library_screen.dart`
-
-**Impact:** Users can now easily search their entire music library from any main screen.
-
----
-
-### 4. Queue Viewer Screen
-
-**Features:**
-- Full-screen queue management
-- Display all queued tracks with album art
-- Reorder tracks via drag and drop
-- Remove tracks via swipe to dismiss
-- Visual indicator for currently playing track
-- Refresh button to reload queue
-- Queue button in mini-player for easy access
-
-**New Files:**
-- `lib/screens/queue_screen.dart`
-
-**Files Modified:**
-- `lib/widgets/mini_player.dart`
-
-**Impact:** Users can now see and manage their playback queue with intuitive gestures.
-
-**Note:** Reordering and removing are currently local-only (server sync not yet implemented).
-
----
-
-### 5. Pull-to-Refresh on Library Screens
-
-**Added:**
-- RefreshIndicator on artists list
-- RefreshIndicator on albums grid
-- Triggers library reload on pull-down gesture
-
-**Files Modified:**
-- `lib/screens/library_artists_screen.dart`
-- `lib/screens/library_albums_screen.dart`
-
-**Impact:** Better UX for refreshing library data without navigating away.
-
----
-
-### 6. Player List Caching
-
-**Optimization:**
-- Cache player list for 5 minutes
-- Reduce API calls when opening player selector
-- Force refresh available via explicit refresh
-- Automatic cache invalidation after timeout
-
-**Implementation:**
-```dart
-DateTime? _playersLastFetched;
-static const Duration _playersCacheDuration = Duration(minutes: 5);
-
-Future<void> _loadAndSelectPlayers({bool forceRefresh = false}) {
-  // Check cache first
-  if (!forceRefresh && cache_valid) {
-    return cached_players;
-  }
-  // Fetch fresh data
-}
-```
-
-**Files Modified:**
-- `lib/providers/music_assistant_provider.dart`
-
-**Impact:** Reduced network traffic and improved app responsiveness when switching players.
-
----
-
-### 7. Comprehensive Documentation
-
-**Created:**
-
-#### ARCHITECTURE.md (600+ lines)
-- Complete architecture overview
-- Component descriptions and responsibilities
-- Data flow diagrams
-- API integration details
-- Performance optimizations
-- Development guidelines
-- Future enhancement roadmap
-
-**Sections:**
-- Architecture Pattern
-- Key Components (Providers, Services, Models, Screens, Widgets)
-- Data Flow (Player Selection, Music Playback, Library Loading)
-- API Integration (WebSocket Commands, Event Subscriptions)
-- Performance Optimizations
-- State Management Pattern
-- Authentication Flow
-- Error Handling
-- Testing Strategy
-- Development Guidelines
-
-#### TROUBLESHOOTING.md (500+ lines)
-- Common issues and solutions
-- Debug logging instructions
-- Performance troubleshooting
-- Bug reporting templates
-- FAQ section
-
-**Sections:**
-- Connection Issues
-- Authentication Issues
-- Playback Issues
-- Library Issues
-- Queue Issues
-- Performance Issues
-- UI Issues
-- Debug Logging
-- Known Limitations
-- Advanced Troubleshooting
-- Getting Help
-- FAQ
-
-**Impact:** Future development and debugging will be much easier with comprehensive documentation.
-
----
-
-## 📊 Statistics
-
-### Commits Summary
-
-1. `965bf9d` - Add defensive parsing and debug logging for queue items
-2. `38b29cb` - Add home page enhancements (albums, stats)
-3. `6c291f7` - Add search functionality to main screens
-4. `ad4136f` - Add queue viewer screen
-5. `4f7856e` - Add pull-to-refresh to library screens
-6. `e24b542` - Add player list caching
-7. `0422752` - Add comprehensive documentation
-
-### Files Created
-
-**Screens:**
-- (queue_screen.dart already existed, enhanced it)
-
-**Widgets:**
-- `lib/widgets/album_row.dart`
-- `lib/widgets/library_stats.dart`
-
-**Documentation:**
-- `ARCHITECTURE.md`
-- `TROUBLESHOOTING.md`
-
-### Files Modified
-
-**Screens:**
-- `lib/screens/new_home_screen.dart`
-- `lib/screens/new_library_screen.dart`
-- `lib/screens/library_artists_screen.dart`
-- `lib/screens/library_albums_screen.dart`
-
-**Widgets:**
-- `lib/widgets/mini_player.dart`
-
-**Services:**
-- `lib/services/music_assistant_api.dart`
-
-**Providers:**
-- `lib/providers/music_assistant_provider.dart`
-
-**Models:**
-- `lib/models/player.dart`
-
----
-
-## 🎯 Key Improvements
-
-### User Experience
-- ✅ Now playing bar actually works
-- ✅ Engaging home screen with discovery features
-- ✅ Easy search access from anywhere
-- ✅ Full queue management capabilities
-- ✅ Pull-to-refresh for better control
-- ✅ Faster player selection with caching
-
-### Developer Experience
-- ✅ Comprehensive architecture documentation
-- ✅ Detailed troubleshooting guide
-- ✅ Better error handling
-- ✅ Debug logging throughout
-- ✅ Clear code structure
-- ✅ Development guidelines
-
-### Performance
-- ✅ Player list caching (5-minute cache)
-- ✅ Defensive parsing (continues on errors)
-- ✅ Reduced API calls
-- ✅ Better state management
-
----
-
-## 🔄 Features NOT Implemented
-
-Due to time constraints, the following planned features were not implemented:
-
-### High Priority (Should do next)
-1. **Retry Logic** - Exponential backoff for failed API calls
-2. **Playlist Support** - Browse and play playlists
-3. **Favorites System** - Mark/filter favorites
-
-### Medium Priority
-4. **Loading States** - Skeleton screens, shimmer effects
-5. **Better Error Messages** - User-friendly error descriptions
-6. **Unit Tests** - API layer testing
-
-### Why Not Done
-- Focus was on getting core features working (now playing bar, home page, queue)
-- Documentation was prioritized for long-term value
-- User-facing features were chosen over technical improvements
-- Time better spent on visible improvements
-
----
-
-## 🐛 Known Issues
-
-### Minor Issues
-1. **Queue Reordering** - Changes are local-only, don't sync to server
-   - **Workaround:** Use Music Assistant web interface for persistent changes
-   - **Fix Required:** Implement server API calls for queue manipulation
-
-2. **Library Pagination** - Only loads 100 items per category
-   - **Workaround:** Use search to find specific items
-   - **Fix Required:** Implement infinite scroll
-
-3. **Player State Polling** - Polls every 2 seconds
-   - **Impact:** Slight battery drain
-   - **Fix Required:** Switch to event-based updates
-
-### Fixed Issues
-- ✅ Now playing bar not showing - FIXED
-- ✅ Queue endpoint errors - FIXED
-- ✅ Queue item parsing failures - FIXED
-- ✅ Player list fetching on every open - FIXED (caching)
-
----
-
-## 💡 Recommendations for Next Session
-
-### Immediate Next Steps
-
-1. **Test Everything**
-   - Thoroughly test all new features
-   - Verify now playing bar works reliably
-   - Test queue viewer on different players
-   - Validate home page album rows
-
-2. **Fix Any Bugs Found**
-   - Monitor debug logs for errors
-   - Address any parsing issues
-   - Fix UI glitches
-
-3. **Implement Retry Logic**
-   - Add exponential backoff for failed requests
-   - Improve error handling
-   - Better user feedback on failures
-
-4. **Add Playlist Support**
-   - List playlists from server
-   - Play playlists
-   - Add to queue
-
-5. **Implement Favorites**
-   - Mark items as favorites
-   - Filter by favorites
-   - Sync with server
-
-### Code Quality Improvements
-
-1. **Add Unit Tests**
-   - Test API parsing
-   - Test state management
-   - Test model serialization
-
-2. **Improve Loading States**
-   - Add skeleton screens
-   - Better loading indicators
-   - Smooth transitions
-
-3. **Better Error Handling**
-   - User-friendly error messages
-   - Retry buttons
-   - Offline state handling
-
-### User Experience Enhancements
-
-1. **Infinite Scroll**
-   - Load more items as user scrolls
-   - Better for large libraries
-
-2. **Image Caching**
-   - Cache album artwork
-   - Reduce network usage
-   - Faster loading
-
-3. **Search Improvements**
-   - Search history
-   - Search suggestions
-   - Filter by category
-
----
-
-## 📝 Code Examples
-
-### Home Page Album Rows
-```dart
-AlbumRow(
-  title: 'Recently Played',
-  loadAlbums: () async {
-    if (provider.api == null) return [];
-    return await provider.api!.getRecentAlbums(limit: 10);
-  },
-)
-```
-
-### Player List Caching
-```dart
-// Check cache first
-if (!forceRefresh &&
-    _playersLastFetched != null &&
-    _availablePlayers.isNotEmpty &&
-    now.difference(_playersLastFetched!) < _playersCacheDuration) {
-  _logger.log('Using cached player list');
-  return;
-}
-```
-
-### Queue Defensive Parsing
-```dart
-final items = <QueueItem>[];
-for (var i in (result as List<dynamic>)) {
-  try {
-    items.add(QueueItem.fromJson(i as Map<String, dynamic>));
-  } catch (e) {
-    _logger.log('⚠️ Failed to parse queue item: $e');
-    // Continue parsing other items
-  }
-}
-```
-
----
-
-## 🎉 Achievements
-
-### Features Delivered
-- ✅ 7 major features implemented
-- ✅ 9 commits pushed
-- ✅ 20+ files modified
-- ✅ 1,500+ lines of code added
-
-### Quality Improvements
-- ✅ Comprehensive documentation (1,100+ lines)
-- ✅ Better error handling
-- ✅ Performance optimizations
-- ✅ Code organization
-
-### User Impact
-- ✅ Working now playing bar
-- ✅ Much better home screen
-- ✅ Queue management
-- ✅ Faster performance
-
----
-
-## 🔗 Related Files
-
-**Main Implementation:**
-- `lib/services/music_assistant_api.dart` - API layer with new methods
-- `lib/providers/music_assistant_provider.dart` - State management with caching
-- `lib/screens/new_home_screen.dart` - Enhanced home screen
-- `lib/screens/queue_screen.dart` - Queue viewer
-- `lib/widgets/album_row.dart` - Album carousel
-- `lib/widgets/library_stats.dart` - Statistics display
-
-**Documentation:**
-- `ARCHITECTURE.md` - Technical architecture
-- `TROUBLESHOOTING.md` - Troubleshooting guide
-- `OVERNIGHT_WORK_SUMMARY.md` - This file
-
----
-
-## 🙏 Final Notes
-
-This overnight session delivered significant improvements to the Music Assistant Mobile app:
-
-1. **Now playing bar works** - Core functionality that was broken is now fixed
-2. **Engaging home screen** - Users now have discovery features
-3. **Queue management** - Full control over playback queue
-4. **Better performance** - Caching reduces unnecessary API calls
-5. **Excellent documentation** - Future development will be much easier
-
-The app is now in a much better state for continued development. The most critical issues have been addressed, and new features have been added to enhance the user experience.
-
-**Branch:** `claude/implement-features-01YRy2D4tHYs2gKkxrP9nqVC`
-**Status:** All changes committed and pushed
-**Next Step:** Test everything and fix any issues found
-
-Thank you for the opportunity to work on this project! 🎵

README.md

@@ -1,44 +1,58 @@
 <div align="center">
-  <img src="assets/images/attm_long_logo.png" alt="Assistant To The Music Logo" height="200">
+  <img src="assets/images/ensemble_logo.png" alt="Ensemble Logo" height="200">
 
 ---
 
-  <p>A minimalistic mobile client for <a href="https://music-assistant.io/">Music Assistant</a></p>
-  <p>Control your Music Assistant server and manage your entire music library from your mobile device.</p>
+  <p><strong>An unofficial mobile client for Music Assistant</strong></p>
+  <p>Stream your music library directly to your phone, or control playback on any connected speaker.</p>
 </div>
 
 ---
 
 ## Disclaimer
 
-I am not a developer. This application was created using **Claude Code** and **Gemini CLI**.
+**Ensemble is an unofficial, community-built mobile client for Music Assistant. It is not affiliated with, endorsed by, or supported by the Music Assistant project or its developers.**
+
+This application was built with AI-assisted development using **Claude Code** and **Gemini CLI**.
 
 ---
 
 ## Features
 
-### Music Assistant Integration
-- **Server Connection** - Connect to your Music Assistant server via WebSocket
-- **Library Browsing** - Browse artists, albums, and tracks from your server
-- **Album Details** - View album information and track listings
-- **Playback Control** - Control playback on your Music Assistant server players
-- **Auto-Reconnect** - Automatic reconnection with connection status monitoring
-- **Settings Management** - Configure server URL with persistent storage
+### Local Playback
+- **Stream to Your Phone** - Play music from your Music Assistant library directly on your mobile device
+- **Background Playback** - Music continues playing when the app is minimized
+- **Media Notifications** - Control playback from your notification shade with album art display
 
-### Control Features
-- Full playback controls (play/pause/skip/seek) for server players
-- Progress bar with time display
-- Volume control for server players
-- Now playing display with track information
-- Queue management and viewing
-- Multi-player support with device selector
-- Play on... button for quick device selection
+### Remote Control
+- **Multi-Player Support** - Control any speaker or device connected to Music Assistant
+- **Device Selector** - Quickly switch between your phone and other players
+- **Full Playback Controls** - Play, pause, skip, seek, and adjust volume
+- **Queue Management** - View and manage the playback queue
 
-### Theming Options
+### Home Screen
+- **Customizable Rows** - Toggle Recently Played, Discover Artists, and Discover Albums
+- **Favorites Rows** - Optional rows for Favorite Albums, Artists, and Tracks
+- **Adaptive Layout** - Rows scale properly for different screen sizes and aspect ratios
+- **Pull to Refresh** - Refresh content with a simple pull gesture
+
+### Library Browsing
+- **Browse Your Collection** - Artists, albums, playlists, and tracks from all your music sources
+- **Favorites Filter** - Toggle to show only your favorite items
+- **Album Details** - View track listings with artwork
+- **Artist Details** - View artist albums and top tracks
+- **Playlist Support** - Browse and play your playlists
+- **Search** - Find music across your entire library
+
+### Smart Features
+- **Auto-Reconnect** - Automatically reconnects when connection is lost
+- **Caching** - Fast navigation with cached content
+- **Hero Animations** - Smooth transitions between screens
+
+### Theming
 - **Material You** - Dynamic theming based on your device's wallpaper
-- **Adaptive Theming** - Album artwork-based color schemes
+- **Adaptive Colors** - Album artwork-based color schemes
 - **Light/Dark Mode** - System-aware or manual theme selection
-- Clean, minimalistic UI design
 
 ## Screenshots
 
@@ -56,16 +70,27 @@ I am not a developer. This application was created using **Claude Code** and **G
 
 ## Download
 
-Download the latest release from the [Releases page](https://github.com/CollotsSpot/Assistant-To-The-Music/releases).
+Download the latest release from the [Releases page](https://github.com/CollotsSpot/Ensemble/releases).
 
 ## Setup
 
 1. Launch the app
-2. Navigate to the **Library** tab
-3. Tap **Configure Server** or go to **Settings**
-4. Enter your Music Assistant server URL (e.g., `music.example.com` or `192.168.1.100`)
-5. Tap **Connect**
-6. Browse your library and control playback on your Music Assistant players!
+2. Enter your Music Assistant server URL (e.g., `music.example.com` or `192.168.1.100`)
+3. Connect to your server
+4. Start playing! Music plays on your phone by default, or tap the device icon to choose a different player.
+
+## Authentication
+
+Ensemble supports multiple authentication methods:
+
+| Method | Status |
+|--------|--------|
+| Music Assistant native auth | Tested |
+| No authentication | Tested |
+| Authelia | Implemented, not recently tested |
+| HTTP Basic Auth | Implemented, not recently tested |
+
+**Note:** Development and testing is done against Music Assistant beta with native authentication enabled.
 
 ## Requirements
 
@@ -73,11 +98,7 @@ Download the latest release from the [Releases page](https://github.com/CollotsS
 - Network connectivity to your Music Assistant server
 - Android device (Android 5.0+)
 
-## About Music Assistant
-
-Amass Your Music is a remote control client for [Music Assistant](https://music-assistant.io/), an open-source music library manager and player that integrates with various music sources and streaming providers. You'll need a running Music Assistant server to use this app. Music playback happens on your Music Assistant server's configured players (speakers, smart devices, etc.), not on your mobile device.
-
-Learn more: [music-assistant.io](https://music-assistant.io/)
+> **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.
 
 ## License
 
@@ -98,8 +119,8 @@ MIT License
 
 1. Clone the repository
 ```bash
-git clone https://github.com/CollotsSpot/AssistantToTheMusic.git
-cd AssistantToTheMusic
+git clone https://github.com/CollotsSpot/Ensemble.git
+cd Ensemble
 ```
 
 2. Install dependencies
@@ -125,9 +146,10 @@ The APK will be available at `build/app/outputs/flutter-apk/app-release.apk`
 <summary>Technologies Used</summary>
 
 - **Flutter** - Cross-platform mobile framework
-- **web_socket_channel** - WebSocket communication with Music Assistant server
+- **audio_service** - Background playback and media notifications
+- **web_socket_channel** - WebSocket communication with Music Assistant
 - **provider** - State management
+- **cached_network_image** - Image caching
 - **shared_preferences** - Local settings storage
-- **http** - HTTP requests for API communication
 
 </details>

TROUBLESHOOTING.md

@@ -1,642 +0,0 @@
-# Music Assistant Mobile - Troubleshooting Guide
-
-## Common Issues and Solutions
-
-### Connection Issues
-
-#### Problem: "Not Connected to Music Assistant"
-
-**Symptoms:**
-- App shows disconnected state
-- Cannot browse library
-- No players available
-
-**Solutions:**
-
-1. **Verify Server URL**
-   - Go to Settings
-   - Check server URL format: `https://ma.serverscloud.org` or `http://192.168.1.100:8095`
-   - Ensure no trailing slash
-   - Try both HTTP and HTTPS if unsure
-
-2. **Check Network Connectivity**
-   - Ensure device has internet/network access
-   - Try opening server URL in mobile browser
-   - Check if on same network (for local servers)
-
-3. **Verify Music Assistant Server**
-   - Ensure Music Assistant server is running
-   - Check server is accessible from your device
-   - Verify port 8095 (default) or custom port is open
-
-4. **Check Authentication**
-   - If using Authelia, verify credentials
-   - Try re-entering username/password
-   - Check Authelia is accessible
-
-5. **Clear App Data**
-   - Go to Settings → Clear all settings
-   - Re-enter server URL and credentials
-   - Restart app
-
-#### Problem: "WebSocket Connection Failed"
-
-**Symptoms:**
-- Connection drops frequently
-- "Connection timeout" errors in logs
-
-**Solutions:**
-
-1. **Check WebSocket Port**
-   - Default: 8095 for local, 443 for HTTPS
-   - Go to Settings → Custom WebSocket Port
-   - Try entering port explicitly
-
-2. **Verify Firewall Rules**
-   - Ensure WebSocket traffic is allowed
-   - Check reverse proxy configuration (if using)
-   - Cloudflare users: Ensure WebSocket support enabled
-
-3. **Test WebSocket Connection**
-   - Use browser dev tools to test WebSocket
-   - URL format: `wss://ma.serverscloud.org/ws`
-   - Look for successful upgrade to WebSocket
-
----
-
-### Authentication Issues
-
-#### Problem: "Login Failed" or "401 Unauthorized"
-
-**Symptoms:**
-- Cannot login with correct credentials
-- Session expires immediately
-- WebSocket authentication fails
-
-**Solutions:**
-
-1. **Verify Authelia Credentials**
-   - Double-check username and password
-   - Check Authelia domain is correct
-   - Try logging in via web browser first
-
-2. **Check Session Cookie**
-   - Cookie name should be `authelia_session`
-   - Check cookie is being set by Authelia
-   - Verify cookie domain matches
-
-3. **Clear Saved Credentials**
-   - Settings → Clear all settings
-   - Re-enter credentials
-   - Test login
-
-4. **Check Authelia Configuration**
-   - Ensure Authelia is properly configured
-   - Verify session timeout settings
-   - Check Authelia logs for errors
-
-#### Problem: "Auto-login Fails"
-
-**Symptoms:**
-- Must re-login every app start
-- "Auto-login failed" in logs
-
-**Solutions:**
-
-1. **Check Saved Credentials**
-   - Settings → Verify username is saved
-   - Password should be saved (not visible)
-   - Re-save credentials if needed
-
-2. **Session Timeout**
-   - Authelia session may have expired
-   - Check Authelia session duration
-   - Re-login to refresh session
-
----
-
-### Playback Issues
-
-#### Problem: "No Players Available"
-
-**Symptoms:**
-- Player selector shows empty list
-- Cannot select any player
-- Music won't play
-
-**Solutions:**
-
-1. **Refresh Player List**
-   - Open player selector (top right icon)
-   - Tap refresh icon
-   - Wait for players to load
-
-2. **Check Music Assistant Server**
-   - Verify players are configured in MA server
-   - Check players are powered on
-   - Ensure players are available
-
-3. **Wait for Initial Load**
-   - Players load on connection
-   - May take a few seconds
-   - Check debug logs for "Loaded X players"
-
-#### Problem: "Now Playing Bar Not Showing"
-
-**Symptoms:**
-- Music is playing but no mini-player appears
-- Cannot see current track
-
-**Solutions:**
-
-1. **Check Player Selection**
-   - Ensure a player is selected (green dot in player selector)
-   - Select player explicitly if needed
-
-2. **Verify Queue Has Items**
-   - Some players may not support queue state
-   - Try playing an album/track
-   - Check queue screen for items
-
-3. **Check Debug Logs**
-   - Look for "Error getting queue" messages
-   - Check for parsing errors
-   - Report specific error in GitHub issues
-
-4. **Force Refresh**
-   - Stop and restart playback
-   - Select different player, then select back
-   - Restart app
-
-#### Problem: "Cannot Control Playback"
-
-**Symptoms:**
-- Play/pause buttons don't work
-- Skip track buttons unresponsive
-
-**Solutions:**
-
-1. **Check Player State**
-   - Some players may not support all controls
-   - Verify player is powered on
-   - Check Music Assistant server logs
-
-2. **Network Latency**
-   - Commands may take 1-2 seconds
-   - Wait before clicking again
-   - Check network connection
-
-3. **Player Availability**
-   - Player may have disconnected
-   - Refresh player list
-   - Re-select player
-
----
-
-### Library Issues
-
-#### Problem: "No Artists/Albums/Tracks Found"
-
-**Symptoms:**
-- Empty library screens
-- "No items found" messages
-
-**Solutions:**
-
-1. **Check Music Assistant Library**
-   - Verify library is populated in MA server
-   - Scan library in MA web interface
-   - Ensure provider is configured
-
-2. **Force Library Reload**
-   - Pull down to refresh on library screens
-   - Go to home screen and back
-   - Restart app
-
-3. **Check API Limits**
-   - Default limit is 100 items
-   - May not show all items if library > 100
-   - Pagination planned for future release
-
-4. **Verify Connection**
-   - Ensure WebSocket is connected
-   - Check connection status on home screen
-   - Look for green dot indicator
-
-#### Problem: "Search Returns No Results"
-
-**Symptoms:**
-- Search finds nothing
-- Known items don't appear
-
-**Solutions:**
-
-1. **Check Search Query**
-   - Try partial matches
-   - Search is case-insensitive
-   - Wait for debounce (500ms)
-
-2. **Verify Library Content**
-   - Ensure items exist in MA library
-   - Test search in MA web interface
-   - Re-scan library if needed
-
-3. **Check Network**
-   - Search requires active connection
-   - Verify WebSocket is connected
-   - Try again with better connection
-
----
-
-### Queue Issues
-
-#### Problem: "Queue Screen Shows Empty"
-
-**Symptoms:**
-- Queue screen has no items
-- Music is playing but queue empty
-
-**Solutions:**
-
-1. **Check Player Type**
-   - Some players may not support queue viewing
-   - Try different player
-   - Check MA server capabilities
-
-2. **Refresh Queue**
-   - Tap refresh icon in queue screen
-   - Play a new album/track
-   - Restart playback
-
-3. **API Issues**
-   - Check logs for "Error getting queue"
-   - May be API parsing issue
-   - Report bug with logs
-
-#### Problem: "Cannot Reorder/Remove Queue Items"
-
-**Symptoms:**
-- Drag and drop doesn't work
-- Swipe to dismiss fails
-
-**Solutions:**
-
-1. **API Support**
-   - Reordering/removing is local only (currently)
-   - Server sync not yet implemented
-   - Changes won't persist on server
-
-2. **UI Issues**
-   - Ensure you're dragging from handle icon
-   - Swipe fully to left to dismiss
-   - Try on different queue items
-
----
-
-### Performance Issues
-
-#### Problem: "App is Slow/Laggy"
-
-**Symptoms:**
-- UI stutters
-- Slow navigation
-- Delayed responses
-
-**Solutions:**
-
-1. **Clear App Cache**
-   - Settings → Clear all settings
-   - Restart app
-   - May improve performance
-
-2. **Reduce Polling**
-   - Player state polls every 2 seconds
-   - Expected behavior for now
-   - Future: Event-based updates
-
-3. **Check Device Performance**
-   - Close other apps
-   - Restart device
-   - Check available storage
-
-4. **Network Latency**
-   - Test network speed
-   - Move closer to WiFi
-   - Try different network
-
-#### Problem: "High Battery Drain"
-
-**Symptoms:**
-- Battery drains quickly
-- App using lots of background power
-
-**Solutions:**
-
-1. **Polling Frequency**
-   - Player state polling uses power
-   - Will be optimized in future
-   - Close app when not in use
-
-2. **Background Activity**
-   - App doesn't support background playback yet
-   - Ensure app is closed when done
-   - Check battery settings
-
----
-
-### UI Issues
-
-#### Problem: "Images Not Loading"
-
-**Symptoms:**
-- Album/artist artwork missing
-- Broken image icons
-
-**Solutions:**
-
-1. **Check Network**
-   - Images load from server
-   - Requires active connection
-   - Try refreshing
-
-2. **Verify Image URLs**
-   - Check MA server has artwork
-   - Test image URL in browser
-   - May be missing for some items
-
-3. **Server Configuration**
-   - Check image proxy settings
-   - Verify image API endpoint
-   - Check CORS configuration
-
-#### Problem: "Screen Layout Broken"
-
-**Symptoms:**
-- Overlapping elements
-- Text cut off
-- Weird spacing
-
-**Solutions:**
-
-1. **Restart App**
-   - Force close and reopen
-   - May fix temporary layout issues
-
-2. **Check Device**
-   - Test on different screen size
-   - May be device-specific issue
-   - Report with device model
-
----
-
-## Debug Logging
-
-### Enabling Logs
-
-Logs are always enabled and print to console. To view:
-
-**Android Studio / VS Code:**
-1. Run app in debug mode
-2. Open Debug Console
-3. Look for timestamped logs: `[HH:MM:SS.mmm] Message`
-
-**Physical Device:**
-1. Connect via USB
-2. Run `flutter logs`
-3. Filter for app logs
-
-### Important Log Messages
-
-**Connection:**
-- `Connected to Music Assistant successfully` - Connection established
-- `WebSocket error: ...` - Connection problem
-- `Connection timeout` - Server not responding
-
-**Authentication:**
-- `🔑 Adding session cookie to WebSocket handshake` - Auth in progress
-- `✓ Authenticated` - Auth successful
-- `⚠️ Auto-login failed` - Credentials issue
-
-**Players:**
-- `Loaded X players` - Player list fetched
-- `Selected player: Name (ID)` - Player selected
-- `Using cached player list` - Cache hit
-
-**Queue:**
-- `🔍 DEBUG: First queue item raw data` - Queue structure
-- `Error getting queue: ...` - Queue fetch failed
-- `⚠️ Failed to parse queue item` - Parsing error
-
-**Playback:**
-- `Playing X tracks via queue on player Y` - Playback started
-- `✓ X tracks queued successfully` - Queue successful
-
-### Reporting Bugs
-
-When reporting issues, include:
-
-1. **Steps to Reproduce**
-   - Exact actions taken
-   - Expected vs actual behavior
-
-2. **Debug Logs**
-   - Copy relevant log section
-   - Include timestamps
-   - Show 10-20 lines before/after error
-
-3. **Environment**
-   - Device model and OS version
-   - App version
-   - Music Assistant server version
-   - Network type (WiFi, cellular, etc.)
-
-4. **Screenshots**
-   - Error messages
-   - UI issues
-   - Settings screen
-
----
-
-## Known Limitations
-
-### Current Constraints
-
-1. **Library Pagination**
-   - Loads max 100 items per category
-   - Infinite scroll coming soon
-
-2. **Queue Management**
-   - Reorder/remove only local
-   - Server sync not implemented
-   - Changes don't persist
-
-3. **Player State**
-   - Polls every 2 seconds
-   - Event-based updates coming
-   - May have slight delay
-
-4. **Search**
-   - Searches entire library only
-   - No category-specific search
-   - No search history
-
-5. **Offline Mode**
-   - No offline playback
-   - Requires active connection
-   - Planned for future
-
-### Planned Improvements
-
-See ARCHITECTURE.md → Future Enhancements for roadmap.
-
----
-
-## Advanced Troubleshooting
-
-### WebSocket Debugging
-
-1. **Chrome DevTools Method**
-   ```
-   1. Open ma.serverscloud.org in Chrome
-   2. F12 → Network tab
-   3. Filter: WS (WebSocket)
-   4. Look for /ws connection
-   5. Inspect frames (messages)
-   ```
-
-2. **Test WebSocket Manually**
-   ```javascript
-   const ws = new WebSocket('wss://ma.serverscloud.org/ws');
-   ws.onopen = () => console.log('Connected');
-   ws.onmessage = (e) => console.log('Message:', e.data);
-   ws.onerror = (e) => console.error('Error:', e);
-   ```
-
-### API Testing
-
-Use Music Assistant's web interface to test API:
-1. Open developer tools
-2. Go to Network tab
-3. Perform action (search, play, etc.)
-4. Inspect WebSocket messages
-5. Compare with app behavior
-
-### Flutter Debugging
-
-**DevTools:**
-```bash
-flutter pub global activate devtools
-flutter pub global run devtools
-```
-
-**Widget Inspector:**
-- Shows widget tree
-- Inspect layout issues
-- Debug rendering
-
-**Performance:**
-- Profile mode: `flutter run --profile`
-- Check frame rendering times
-- Monitor memory usage
-
----
-
-## Getting Help
-
-### Support Channels
-
-1. **GitHub Issues**
-   - Bug reports
-   - Feature requests
-   - Technical discussions
-   - URL: https://github.com/CollotsSpot/music-assistant-mobile/issues
-
-2. **Music Assistant Community**
-   - Discord server
-   - Forum discussions
-   - General questions
-   - URL: https://music-assistant.io/
-
-3. **Documentation**
-   - ARCHITECTURE.md - Technical details
-   - README.md - Getting started
-   - Code comments - Implementation details
-
-### Before Asking
-
-1. Check this troubleshooting guide
-2. Search existing GitHub issues
-3. Check Music Assistant docs
-4. Test with Music Assistant web interface
-5. Gather debug logs
-
-### Providing Feedback
-
-**Bug Report Template:**
-```
-**Description**
-[Clear description of the issue]
-
-**Steps to Reproduce**
-1. Step one
-2. Step two
-3. ...
-
-**Expected Behavior**
-[What should happen]
-
-**Actual Behavior**
-[What actually happens]
-
-**Logs**
-[Relevant log excerpt]
-
-**Environment**
-- Device: [e.g. Samsung Galaxy S21]
-- OS: [e.g. Android 13]
-- App Version: [e.g. 1.0.0]
-- MA Server Version: [e.g. 2.7.0]
-
-**Screenshots**
-[If applicable]
-```
-
----
-
-## FAQ
-
-### Q: Does the app support offline playback?
-**A:** Not currently. All playback requires connection to Music Assistant server.
-
-### Q: Can I use this with multiple Music Assistant servers?
-**A:** Not simultaneously, but you can change servers in Settings.
-
-### Q: Why isn't my local file library showing?
-**A:** Check Music Assistant server has scanned your local files and the provider is enabled.
-
-### Q: Does it support Android Auto / CarPlay?
-**A:** Not yet, but planned for future releases.
-
-### Q: Can I download music for offline listening?
-**A:** Not currently supported.
-
-### Q: How do I update the app?
-**A:** Updates will be distributed via app stores once released. Currently, build from source.
-
-### Q: Is my password stored securely?
-**A:** Yes, credentials are stored using Flutter's secure storage mechanisms.
-
-### Q: Can I control playback when screen is off?
-**A:** Background playback is limited. The app is designed for active use currently.
-
-### Q: Why can't I see all my albums?
-**A:** Current limit is 100 items per category. Pagination coming soon.
-
-### Q: Does it work with Spotify/YouTube/etc?
-**A:** Yes, if configured as providers in Music Assistant server.
-
----
-
-**Last Updated:** 2025-01-22
-**App Version:** Development Build
-**Music Assistant Version:** 2.7.0+

WORK_SUMMARY.md

@@ -1,299 +0,0 @@
-# Music Assistant Mobile - Implementation Summary
-
-This document summarizes all the features and improvements implemented during the overnight development session.
-
-## 🎯 Overview
-
-This was an intensive development session focused on transforming the Music Assistant mobile app from a basic prototype into a feature-rich, production-ready music player with comprehensive functionality, robust error handling, and extensive test coverage.
-
-## ✨ Major Features Implemented
-
-### 1. Playlist Support
-**Files Added:**
-- `lib/screens/playlist_details_screen.dart`
-- `lib/widgets/playlist_row.dart`
-
-**Features:**
-- Browse playlists from all providers (Spotify, local library, etc.)
-- View playlist details with track listings
-- Play entire playlists with queue management
-- Play individual tracks from playlists
-- Beautiful UI with album artwork and metadata
-- Provider-specific playlist support
-
-### 2. Favorites System
-**Files Modified:**
-- `lib/providers/music_assistant_provider.dart`
-- `lib/services/music_assistant_api.dart`
-- `lib/screens/*_details_screen.dart`
-
-**Features:**
-- Mark/unmark tracks, albums, and artists as favorites
-- Persistent favorites sync with Music Assistant server
-- Visual indicators for favorited items (filled heart icons)
-- Real-time UI updates when toggling favorites
-- Error handling for favorite operations
-
-### 3. Volume Control
-**Files Added:**
-- `lib/widgets/volume_control.dart`
-
-**Features:**
-- Full volume slider with live adjustment
-- Mute/unmute toggle
-- Visual volume percentage display
-- Compact mode for mini player (mute button only)
-- Smooth UI with pending volume tracking
-- Dynamic volume icons (off/down/up)
-
-### 4. Shuffle & Repeat Modes
-**Files Modified:**
-- `lib/models/player.dart` (added shuffle/repeat to PlayerQueue)
-- `lib/providers/music_assistant_provider.dart` (added control methods)
-- `lib/screens/now_playing_screen.dart` (added UI controls)
-
-**Features:**
-- Shuffle toggle with visual state indication
-- Repeat modes: Off, One, All
-- Persistent state across sessions
-- Visual feedback with icon states
-- Integration with Music Assistant queue
-
-### 5. Retry Logic with Exponential Backoff
-**Files Added:**
-- `lib/services/retry_helper.dart`
-
-**Features:**
-- Generic retry mechanism for any async operation
-- Exponential backoff (2s → 4s → 8s → 16s)
-- Network-specific retry logic
-- Critical operation retry mode
-- Configurable max attempts and delays
-- Smart error detection for retryable errors
-- Comprehensive logging
-
-### 6. Error Handling System
-**Files Added:**
-- `lib/services/error_handler.dart`
-
-**Features:**
-- User-friendly error messages
-- Error type classification (connection, network, auth, playback, library)
-- Technical vs. user-facing messages
-- Retryability detection
-- Comprehensive error logging
-- Context-aware error handling
-
-### 7. Search Functionality
-**Files Added:**
-- `lib/screens/search_screen.dart`
-- `lib/services/search_service.dart`
-
-**Features:**
-- Global search across tracks, albums, artists, playlists
-- Real-time search results
-- Debounced search input
-- Category filtering
-- Direct playback from search results
-- Navigation to detail screens
-
-### 8. Home Page Enhancements
-**Files Modified:**
-- `lib/screens/home_screen.dart`
-- `lib/widgets/album_row.dart`
-
-**Features:**
-- Recent albums section
-- Random albums discovery
-- Library statistics display
-- Horizontal scrolling album rows
-- Beautiful album artwork display
-- Quick navigation to album details
-
-### 9. Queue Management
-**Files Added:**
-- `lib/screens/queue_screen.dart`
-
-**Features:**
-- View current playback queue
-- Visual indicator for currently playing track
-- Track numbers and metadata
-- Album artwork for each track
-- Shuffle and repeat controls
-- Clear queue functionality
-- Jump to any track in queue
-
-### 10. Pull-to-Refresh
-**Files Modified:**
-- All library screens (albums, artists, tracks, playlists)
-
-**Features:**
-- Swipe down to refresh library content
-- Visual refresh indicator
-- Background data reload
-- Smooth animations
-- Maintained scroll position
-
-### 11. Player List Caching
-**Files Modified:**
-- `lib/providers/music_assistant_provider.dart`
-
-**Features:**
-- Cache player list for 30 seconds
-- Reduced API calls
-- Faster UI updates
-- Background refresh
-- Cache invalidation on manual refresh
-
-### 12. Comprehensive Unit Tests
-**Files Added:**
-- `test/models/media_item_test.dart`
-- `test/models/player_test.dart`
-- `test/services/retry_helper_test.dart`
-- `test/services/error_handler_test.dart`
-
-**Coverage:**
-- 130+ test cases
-- MediaItem model tests (Track, Album, Artist, Playlist, Radio)
-- Player model tests (Player, QueueItem, PlayerQueue, StreamDetails)
-- RetryHelper service tests
-- ErrorHandler service tests
-- JSON parsing validation
-- Null safety verification
-- Edge case handling
-- Default value testing
-
-### 13. Playback Quality Settings
-**Files Added:**
-- `lib/models/settings.dart`
-- `lib/providers/settings_provider.dart`
-- `lib/screens/playback_settings_screen.dart`
-
-**Files Modified:**
-- `lib/main.dart` (added SettingsProvider)
-- `lib/screens/settings_screen.dart` (added navigation)
-
-**Features:**
-- Audio quality preferences (Lossless/Lossy)
-- Quality levels: Low (96 kbps), Normal (128 kbps), High (256 kbps), Very High (320 kbps)
-- Configurable max bitrate
-- Prefer lossless (FLAC) option
-- Network settings (cellular streaming, downloads)
-- Appearance settings (album art, animations)
-- Settings persistence with SharedPreferences
-- Reset to defaults functionality
-- Beautiful settings UI with sliders and toggles
-
-## 🐛 Bug Fixes
-
-### 1. Build Errors
-**Fixed:**
-- Missing `api` getter in MusicAssistantProvider
-- Null safety issues in multiple screens
-- Constructor parameter mismatches in AlbumDetailsScreen
-- Missing imports and dependencies
-
-### 2. Queue Item Parsing Failures
-**Fixed:**
-- Nested `media_item` structure handling
-- Null safety in MediaItem.fromJson
-- ProviderMapping null field defaults
-- QueueItem queue_item_id fallback logic
-- Comprehensive null checks throughout parsing
-
-### 3. Player Selection Issues
-**Fixed:**
-- Smart player selection based on playback state
-- Prioritize actually playing player over builtin
-- Maintain player selection when still available
-- Auto-select playing player on app launch
-- Refresh selected player state
-
-### 4. Now Playing Display
-**Fixed:**
-- Stale queue data from parsing failures
-- Wrong track information display
-- Player-queue mismatch
-- Current item detection
-
-## 📊 Statistics
-
-### Code Added
-- **New Files:** 20+
-- **Modified Files:** 30+
-- **Lines of Code:** ~5,000+
-- **Test Cases:** 130+
-- **Commits:** 20
-
-### Features Breakdown
-- **UI Screens:** 6 new screens
-- **Widgets:** 8 new reusable widgets
-- **Services:** 4 new service classes
-- **Models:** 3 new model classes
-- **Providers:** 2 new state management providers
-
-## 🏗️ Architecture Improvements
-
-### State Management
-- Proper use of Provider pattern
-- ChangeNotifier for reactive UI
-- Separation of concerns
-- Clean data flow
-
-### Error Handling
-- Centralized error handling service
-- User-friendly error messages
-- Comprehensive logging
-- Retry mechanisms
-
-### Code Quality
-- Null safety throughout
-- Defensive programming
-- Comprehensive tests
-- Clear documentation
-
-### Performance
-- Caching strategies
-- Debounced operations
-- Optimized API calls
-- Smooth animations
-
-## 🚀 Ready for Production
-
-The app now includes:
-- ✅ Comprehensive feature set
-- ✅ Robust error handling
-- ✅ Extensive test coverage
-- ✅ User-configurable settings
-- ✅ Smooth, polished UI
-- ✅ Performance optimizations
-- ✅ Production-ready code quality
-
-## 📝 Commit History
-
-```
-f6c0c88 Add comprehensive unit tests and playback quality settings
-56cd6ef Fix player selection to show correct now playing information
-18d74e9 Improve null safety in JSON parsing for queue items and media items
-f3c5c66 Fix QueueItem parsing - track data is nested in media_item field
-ace810a Fix AlbumDetailsScreen constructor call - remove extra parameters
-649583e Fix build errors - null safety and API access issues
-3bce979 Implement shuffle and repeat modes for queue control
-7f4730a Add volume control for Music Assistant players
-fcb038a Improve error handling with user-friendly messages
-db0cefe Add retry logic with exponential backoff for network resilience
-d0ab37e Add favorites system
-d7949a3 Add comprehensive playlist support
-e24b542 Add player list caching to reduce API calls
-4f7856e Add pull-to-refresh to library screens
-ad4136f Add queue viewer screen with management capabilities
-6c291f7 Add search functionality to home and library screens
-38b29cb Add home page enhancements - recent albums, random albums, and stats
-965bf9d Add defensive parsing and debug logging for queue items
-```
-
-## 🎉 Conclusion
-
-This intensive development session successfully transformed the Music Assistant mobile app into a feature-complete, production-ready application. The app now provides a rich music listening experience with comprehensive playback controls, library management, search, playlists, favorites, quality settings, and robust error handling - all backed by extensive test coverage.
-
-The codebase is clean, well-structured, and ready for deployment. All major features are implemented, tested, and committed to the repository.

android/app/src/main/AndroidManifest.xml

@@ -4,9 +4,11 @@
     <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
     <uses-permission android:name="android.permission.WAKE_LOCK"/>
     <uses-permission android:name="android.permission.FOREGROUND_SERVICE"/>
+    <uses-permission android:name="android.permission.FOREGROUND_SERVICE_MEDIA_PLAYBACK"/>
+    <uses-permission android:name="android.permission.POST_NOTIFICATIONS"/>
 
     <application
-        android:label="ATTM"
+        android:label="Ensemble"
         android:name="${applicationName}"
         android:icon="@mipmap/ic_launcher"
         android:usesCleartextTraffic="true"

android/app/src/main/kotlin/com/musicassistant/music_assistant/MainActivity.kt

@@ -1,6 +1,87 @@
 package com.musicassistant.music_assistant
 
-import io.flutter.embedding.android.FlutterActivity
+import android.util.Log
+import android.view.KeyEvent
+import com.ryanheise.audioservice.AudioServiceActivity
+import io.flutter.embedding.engine.FlutterEngine
+import io.flutter.plugin.common.MethodChannel
 
-class MainActivity: FlutterActivity() {
+// Extend AudioServiceActivity instead of FlutterActivity to support audio_service package
+// while also intercepting volume button events
+class MainActivity: AudioServiceActivity() {
+    private val TAG = "EnsembleVolume"
+    private val CHANNEL = "com.musicassistant.music_assistant/volume_buttons"
+    private var methodChannel: MethodChannel? = null
+    private var isListening = false
+
+    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
+        super.configureFlutterEngine(flutterEngine)
+        Log.d(TAG, "Configuring Flutter engine, setting up MethodChannel")
+
+        methodChannel = MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL)
+        methodChannel?.setMethodCallHandler { call, result ->
+            Log.d(TAG, "Received method call: ${call.method}")
+            when (call.method) {
+                "startListening" -> {
+                    isListening = true
+                    Log.d(TAG, "Volume listening ENABLED")
+                    result.success(null)
+                }
+                "stopListening" -> {
+                    isListening = false
+                    Log.d(TAG, "Volume listening DISABLED")
+                    result.success(null)
+                }
+                else -> {
+                    Log.d(TAG, "Unknown method: ${call.method}")
+                    result.notImplemented()
+                }
+            }
+        }
+    }
+
+    // Use dispatchKeyEvent instead of onKeyDown - Flutter's engine uses dispatchKeyEvent
+    // and may consume events before they reach onKeyDown
+    override fun dispatchKeyEvent(event: KeyEvent?): Boolean {
+        if (event == null) {
+            return super.dispatchKeyEvent(event)
+        }
+
+        val keyCode = event.keyCode
+        val action = event.action
+
+        Log.d(TAG, "dispatchKeyEvent: keyCode=$keyCode, action=$action, isListening=$isListening")
+
+        // Only handle KEY_DOWN events to avoid double-triggering (down + up)
+        if (action != KeyEvent.ACTION_DOWN) {
+            // For volume keys when listening, also consume ACTION_UP to fully block system volume
+            if (isListening && (keyCode == KeyEvent.KEYCODE_VOLUME_UP || keyCode == KeyEvent.KEYCODE_VOLUME_DOWN)) {
+                Log.d(TAG, "Consuming ACTION_UP for volume key")
+                return true
+            }
+            return super.dispatchKeyEvent(event)
+        }
+
+        if (!isListening) {
+            Log.d(TAG, "Not listening, passing to super")
+            return super.dispatchKeyEvent(event)
+        }
+
+        return when (keyCode) {
+            KeyEvent.KEYCODE_VOLUME_UP -> {
+                Log.d(TAG, "VOLUME UP pressed - sending to Flutter")
+                methodChannel?.invokeMethod("volumeUp", null)
+                true // Consume the event to prevent system volume change
+            }
+            KeyEvent.KEYCODE_VOLUME_DOWN -> {
+                Log.d(TAG, "VOLUME DOWN pressed - sending to Flutter")
+                methodChannel?.invokeMethod("volumeDown", null)
+                true // Consume the event to prevent system volume change
+            }
+            else -> {
+                Log.d(TAG, "Other key, passing to super")
+                super.dispatchKeyEvent(event)
+            }
+        }
+    }
 }

android/app/src/main/res/drawable/ic_switch_player.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+    <!-- Swap/cycle arrows icon -->
+    <path
+        android:fillColor="#FFFFFF"
+        android:pathData="M12,6v3l4,-4 -4,-4v3c-4.42,0 -8,3.58 -8,8 0,1.57 0.46,3.03 1.24,4.26L6.7,14.8c-0.45,-0.83 -0.7,-1.79 -0.7,-2.8 0,-3.31 2.69,-6 6,-6zM18.76,7.74L17.3,9.2c0.44,0.84 0.7,1.79 0.7,2.8 0,3.31 -2.69,6 -6,6v-3l-4,4 4,4v-3c4.42,0 8,-3.58 8,-8 0,-1.57 -0.46,-3.03 -1.24,-4.26z"/>
+</vector>

android/app/src/main/res/raw/keep.xml

@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources xmlns:tools="http://schemas.android.com/tools"
+    tools:keep="@drawable/*,@drawable/audio_service_*" />

cleanup_ghost_players.sh

@@ -1,93 +0,0 @@
-#!/bin/bash
-# Script to remove ghost "Music Assistant Mobile" players from Music Assistant
-
-set -e
-
-SETTINGS_FILE="/home/home-server/docker/music-assistant/data/settings.json"
-BACKUP_FILE="/home/home-server/docker/music-assistant/data/settings.json.pre-cleanup-backup"
-
-# Colors for output
-RED='\033[0;31m'
-GREEN='\033[0;32m'
-YELLOW='\033[1;33m'
-NC='\033[0m' # No Color
-
-echo -e "${YELLOW}=== Music Assistant Ghost Player Cleanup ===${NC}"
-echo ""
-
-# Check if settings file exists
-if [ ! -f "$SETTINGS_FILE" ]; then
-    echo -e "${RED}Error: Settings file not found at $SETTINGS_FILE${NC}"
-    exit 1
-fi
-
-# Check if jq is installed
-if ! command -v jq &> /dev/null; then
-    echo -e "${RED}Error: jq is not installed. Install with: sudo apt install jq${NC}"
-    exit 1
-fi
-
-# Count ghost players before cleanup
-GHOST_COUNT=$(cat "$SETTINGS_FILE" | jq '[.players | to_entries[] | select(.value.default_name == "Music Assistant Mobile")] | length')
-
-echo -e "Found ${RED}$GHOST_COUNT${NC} ghost \"Music Assistant Mobile\" players"
-echo ""
-
-if [ "$GHOST_COUNT" -eq 0 ]; then
-    echo -e "${GREEN}No ghost players to remove!${NC}"
-    exit 0
-fi
-
-# List the ghost players
-echo "Ghost players to be removed:"
-cat "$SETTINGS_FILE" | jq -r '.players | to_entries[] | select(.value.default_name == "Music Assistant Mobile") | "  - " + .key'
-echo ""
-
-# Ask for confirmation
-read -p "Do you want to remove these players? (yes/no): " CONFIRM
-
-if [ "$CONFIRM" != "yes" ]; then
-    echo -e "${YELLOW}Cleanup cancelled.${NC}"
-    exit 0
-fi
-
-# Create backup
-echo ""
-echo -e "${YELLOW}Creating backup...${NC}"
-cp "$SETTINGS_FILE" "$BACKUP_FILE"
-echo -e "${GREEN}Backup created at: $BACKUP_FILE${NC}"
-
-# Remove ghost players
-echo ""
-echo -e "${YELLOW}Removing ghost players...${NC}"
-
-# Get list of ghost player IDs
-GHOST_IDS=$(cat "$SETTINGS_FILE" | jq -r '.players | to_entries[] | select(.value.default_name == "Music Assistant Mobile") | .key')
-
-# Remove each ghost player from settings
-for player_id in $GHOST_IDS; do
-    echo "  Removing: $player_id"
-done
-
-# Use jq to filter out ghost players
-cat "$SETTINGS_FILE" | jq '.players |= with_entries(select(.value.default_name != "Music Assistant Mobile"))' > "${SETTINGS_FILE}.tmp"
-mv "${SETTINGS_FILE}.tmp" "$SETTINGS_FILE"
-
-# Verify cleanup
-REMAINING=$(cat "$SETTINGS_FILE" | jq '[.players | to_entries[] | select(.value.default_name == "Music Assistant Mobile")] | length')
-
-echo ""
-if [ "$REMAINING" -eq 0 ]; then
-    echo -e "${GREEN}✓ Successfully removed all $GHOST_COUNT ghost players!${NC}"
-else
-    echo -e "${RED}Warning: $REMAINING ghost players still remain${NC}"
-fi
-
-echo ""
-echo -e "${YELLOW}Next steps:${NC}"
-echo "1. Restart Music Assistant: docker restart music_assistant"
-echo "2. Or: cd /home/home-server/docker/music-assistant && docker compose restart"
-echo ""
-echo -e "${YELLOW}To restore backup if needed:${NC}"
-echo "cp $BACKUP_FILE $SETTINGS_FILE"
-echo "Then restart Music Assistant"

lib/constants/hero_tags.dart

@@ -1,21 +1,16 @@
-/// Hero tag prefixes for shared element transitions
+/// Hero animation tag constants for consistent cross-screen animations
 class HeroTags {
-  /// Hero tag for album cover images
+  HeroTags._();
+
+  /// Album cover art hero tag prefix
   static const String albumCover = 'album_cover_';
 
-  /// Hero tag for album title text
+  /// Album title hero tag prefix
   static const String albumTitle = 'album_title_';
 
-  /// Hero tag for artist name text
+  /// Artist name hero tag prefix
   static const String artistName = 'artist_name_';
 
-  /// Hero tag for artist image
+  /// Artist image hero tag prefix
   static const String artistImage = 'artist_image_';
-
-  /// Hero tags for now playing screen
-  static const String nowPlayingArt = 'now_playing_art';
-  static const String nowPlayingBackground = 'now_playing_background';
-  static const String nowPlayingPreviousButton = 'now_playing_previous_button';
-  static const String nowPlayingPlayButton = 'now_playing_play_button';
-  static const String nowPlayingNextButton = 'now_playing_next_button';
 }

lib/constants/network.dart

@@ -0,0 +1,13 @@
+/// Network constants for ports and URLs
+class NetworkConstants {
+  NetworkConstants._();
+
+  /// Default Music Assistant WebSocket port (used for non-proxied connections)
+  static const int defaultWsPort = 8095;
+
+  /// Default HTTPS port (implicit, not usually specified in URLs)
+  static const int defaultHttpsPort = 443;
+
+  /// Default HTTP port
+  static const int defaultHttpPort = 80;
+}

lib/constants/timings.dart

@@ -0,0 +1,53 @@
+/// Timing constants for polling intervals, cache durations, and delays
+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);
+
+  /// Local player state report interval
+  /// Note: Sendspin protocol only requires state on changes, not periodic reports.
+  /// This is mainly for local UI position tracking. Set to 5s to reduce server traffic.
+  static const Duration localPlayerReportInterval = Duration(seconds: 5);
+
+  /// Player list cache duration before refresh
+  static const Duration playersCacheDuration = Duration(minutes: 5);
+
+  /// Home screen row cache duration (recently played, discover sections)
+  static const Duration homeRowCacheDuration = Duration(minutes: 10);
+
+  /// WebSocket reconnection delay
+  static const Duration reconnectDelay = Duration(seconds: 3);
+
+  /// Command timeout for API requests
+  static const Duration commandTimeout = Duration(seconds: 30);
+
+  /// Connection timeout for initial WebSocket handshake
+  static const Duration connectionTimeout = Duration(seconds: 10);
+
+  /// Search debounce delay
+  static const Duration searchDebounce = Duration(milliseconds: 500);
+
+  /// Delay after track change before updating state
+  static const Duration trackChangeDelay = Duration(milliseconds: 500);
+}
+
+/// Library and pagination constants
+class LibraryConstants {
+  LibraryConstants._();
+
+  /// Default page size for library items
+  static const int defaultPageSize = 100;
+
+  /// Maximum items to load for "all" library requests
+  static const int maxLibraryItems = 5000;
+
+  /// Number of items per batch for recent albums
+  static const int recentAlbumsBatchSize = 5;
+
+  /// Default limit for recent/random items
+  static const int defaultRecentLimit = 10;
+}

lib/main.dart

@@ -1,17 +1,49 @@
+import 'dart:async';
 import 'package:flutter/material.dart';
 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/hardware_volume_service.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';
+import 'widgets/global_player_overlay.dart';
 
-void main() {
+// Global audio handler instance
+late MassivAudioHandler audioHandler;
+
+// Global debug logger instance
+final _logger = DebugLogger();
+
+Future<void> main() async {
   WidgetsFlutterBinding.ensureInitialized();
 
+  // Create auth manager for streaming headers
+  final authManager = AuthManager();
+
+  // Initialize audio_service with our custom handler
+  audioHandler = await AudioService.init(
+    builder: () => MassivAudioHandler(authManager: authManager),
+    config: const AudioServiceConfig(
+      androidNotificationChannelId: 'io.github.collotsspot.massiv.audio',
+      androidNotificationChannelName: 'Ensemble Audio',
+      androidNotificationOngoing: false,  // Must be false when androidStopForegroundOnPause is false
+      androidNotificationIcon: 'drawable/ic_notification',
+      androidShowNotificationBadge: false,
+      androidStopForegroundOnPause: false,  // Keep service alive when paused for background playback
+    ),
+  );
+  _logger.log('🎵 AudioService initialized - background playback and media notifications ENABLED');
+
   // Set preferred orientations
   SystemChrome.setPreferredOrientations([
     DeviceOrientation.portraitUp,
@@ -41,6 +73,14 @@ class MusicAssistantApp extends StatefulWidget {
 class _MusicAssistantAppState extends State<MusicAssistantApp> with WidgetsBindingObserver {
   late MusicAssistantProvider _musicProvider;
   late ThemeProvider _themeProvider;
+  final _hardwareVolumeService = HardwareVolumeService();
+  StreamSubscription? _volumeUpSub;
+  StreamSubscription? _volumeDownSub;
+  String? _lastSelectedPlayerId;
+  String? _builtinPlayerId;
+
+  // Volume step size (percentage points per button press)
+  static const int _volumeStep = 5;
 
   @override
   void initState() {
@@ -48,26 +88,92 @@ class _MusicAssistantAppState extends State<MusicAssistantApp> with WidgetsBindi
     _musicProvider = MusicAssistantProvider();
     _themeProvider = ThemeProvider();
     WidgetsBinding.instance.addObserver(this);
+    _initHardwareVolumeControl();
+    // Listen to player selection changes to toggle volume interception
+    _musicProvider.addListener(_onProviderChanged);
+  }
+
+  Future<void> _initHardwareVolumeControl() async {
+    try {
+      _builtinPlayerId = await SettingsService.getBuiltinPlayerId();
+      await _hardwareVolumeService.init();
+
+      _volumeUpSub = _hardwareVolumeService.onVolumeUp.listen((_) {
+        _adjustVolume(_volumeStep);
+      });
+
+      _volumeDownSub = _hardwareVolumeService.onVolumeDown.listen((_) {
+        _adjustVolume(-_volumeStep);
+      });
+    } catch (e, stack) {
+      _logger.error('Hardware volume init failed', context: 'VolumeInit', error: e, stackTrace: stack);
+    }
+  }
+
+  /// Called when provider state changes - check if selected player changed
+  void _onProviderChanged() {
+    final currentPlayerId = _musicProvider.selectedPlayer?.playerId;
+    if (currentPlayerId != _lastSelectedPlayerId) {
+      _lastSelectedPlayerId = currentPlayerId;
+      _updateVolumeInterception();
+    }
+  }
+
+  /// Enable/disable volume button interception based on selected player.
+  Future<void> _updateVolumeInterception() async {
+    final isBuiltinPlayer = _builtinPlayerId != null &&
+        _musicProvider.selectedPlayer?.playerId == _builtinPlayerId;
+    await _hardwareVolumeService.setIntercepting(!isBuiltinPlayer);
+  }
+
+  Future<void> _adjustVolume(int delta) async {
+    final player = _musicProvider.selectedPlayer;
+    if (player == null) return;
+
+    final newVolume = (player.volume + delta).clamp(0, 100);
+    if (newVolume != player.volume) {
+      try {
+        await _musicProvider.setVolume(player.playerId, newVolume);
+      } catch (e) {
+        _logger.error('Hardware volume adjustment failed', context: 'VolumeControl', error: e);
+      }
+    }
   }
 
   @override
   void dispose() {
+    _musicProvider.removeListener(_onProviderChanged);
+    _volumeUpSub?.cancel();
+    _volumeDownSub?.cancel();
+    _hardwareVolumeService.dispose();
     WidgetsBinding.instance.removeObserver(this);
     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)');
     }
   }
 
@@ -100,29 +206,23 @@ class _MusicAssistantAppState extends State<MusicAssistantApp> with WidgetsBindi
                 darkColorScheme = brandDarkColorScheme;
               }
 
-              // Update system UI overlay style based on theme mode
-              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: 'ATTM', // Updated title
-                debugShowCheckedModeBanner: false,
+              return SystemUIWrapper(
                 themeMode: themeProvider.themeMode,
-                theme: AppTheme.lightTheme(colorScheme: lightColorScheme),
-                darkTheme: AppTheme.darkTheme(colorScheme: darkColorScheme),
-                home: const AppStartup(),
+                lightColorScheme: lightColorScheme,
+                darkColorScheme: darkColorScheme,
+                child: MaterialApp(
+                  navigatorKey: navigationProvider.navigatorKey,
+                  title: 'Ensemble',
+                  debugShowCheckedModeBanner: false,
+                  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(),
+                ),
               );
             },
           );
@@ -132,30 +232,185 @@ class _MusicAssistantAppState extends State<MusicAssistantApp> with WidgetsBindi
   }
 }
 
-/// Startup widget that checks if user is logged in and shows appropriate screen
-class AppStartup extends StatelessWidget {
-  const AppStartup({super.key});
+/// 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 FutureBuilder<String?>(
-      future: SettingsService.getServerUrl(),
-      builder: (context, snapshot) {
-        // Show loading while checking settings
-        if (snapshot.connectionState == ConnectionState.waiting) {
-          return const Scaffold(
-            backgroundColor: Color(0xFF1a1a1a),
-            body: Center(
-              child: CircularProgressIndicator(color: Colors.white),
-            ),
-          );
-        }
-
-        // If server URL is saved, go to home screen
-        // Otherwise, show login screen
-        final hasServerUrl = snapshot.data != null && snapshot.data!.isNotEmpty;
-        return hasServerUrl ? const HomeScreen() : const LoginScreen();
-      },
-    );
+    return widget.child;
+  }
+}
+
+/// Startup widget that checks if user is logged in and auto-connects
+class AppStartup extends StatefulWidget {
+  const AppStartup({super.key});
+
+  @override
+  State<AppStartup> createState() => _AppStartupState();
+}
+
+class _AppStartupState extends State<AppStartup> {
+  bool _isConnecting = false;
+  String? _savedServerUrl;
+  bool _connectionAttempted = false;
+
+  @override
+  void initState() {
+    super.initState();
+    _checkAndConnect();
+  }
+
+  Future<void> _checkAndConnect() async {
+    final serverUrl = await SettingsService.getServerUrl();
+
+    if (!mounted) return;
+
+    setState(() {
+      _savedServerUrl = serverUrl;
+    });
+
+    // If we have a saved server URL, attempt auto-connection
+    if (serverUrl != null && serverUrl.isNotEmpty) {
+      setState(() {
+        _isConnecting = true;
+      });
+
+      final provider = context.read<MusicAssistantProvider>();
+
+      // Connection is handled by MusicAssistantProvider._initialize()
+      // Just wait for it to complete or timeout
+      _logger.log('🚀 AppStartup: Waiting for provider auto-connection to $serverUrl');
+
+      // Give the provider time to connect (it restores credentials and connects in _initialize)
+      // Check connection state periodically
+      for (var i = 0; i < 20; i++) {
+        await Future.delayed(const Duration(milliseconds: 250));
+        if (provider.isConnected) {
+          _logger.log('🚀 AppStartup: Connection established');
+          break;
+        }
+        if (provider.connectionState == MAConnectionState.error) {
+          _logger.log('🚀 AppStartup: Connection failed with error');
+          break;
+        }
+      }
+
+      if (!provider.isConnected) {
+        _logger.log('🚀 AppStartup: Connection still pending or failed');
+      }
+
+      if (mounted) {
+        setState(() {
+          _isConnecting = false;
+          _connectionAttempted = true;
+        });
+      }
+    } else {
+      setState(() {
+        _connectionAttempted = true;
+      });
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    // Show loading while checking settings or connecting
+    if (!_connectionAttempted || _isConnecting) {
+      return Scaffold(
+        backgroundColor: const Color(0xFF1a1a1a),
+        body: Center(
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              const CircularProgressIndicator(color: Colors.white),
+              if (_isConnecting) ...[
+                const SizedBox(height: 16),
+                Text(
+                  'Connecting...',
+                  style: TextStyle(
+                    color: Colors.white.withOpacity(0.7),
+                    fontSize: 14,
+                  ),
+                ),
+              ],
+            ],
+          ),
+        ),
+      );
+    }
+
+    // If server URL is saved, go to home screen
+    // Otherwise, show login screen
+    final hasServerUrl = _savedServerUrl != null && _savedServerUrl!.isNotEmpty;
+    return hasServerUrl ? const HomeScreen() : const LoginScreen();
   }
 }

lib/models/player.dart

@@ -3,6 +3,7 @@ import 'media_item.dart';
 class Player {
   final String playerId;
   final String name;
+  final String? provider; // e.g., 'builtin_player', 'chromecast', etc.
   final bool available;
   final bool powered;
   final String state; // 'idle', 'playing', 'paused'
@@ -15,6 +16,7 @@ class Player {
   Player({
     required this.playerId,
     required this.name,
+    this.provider,
     required this.available,
     required this.powered,
     required this.state,
@@ -25,31 +27,99 @@ class Player {
     this.elapsedTimeLastUpdated,
   });
 
+  /// Create a copy of this Player with some fields replaced
+  Player copyWith({
+    String? playerId,
+    String? name,
+    String? provider,
+    bool? available,
+    bool? powered,
+    String? state,
+    String? currentItemId,
+    int? volumeLevel,
+    bool? volumeMuted,
+    double? elapsedTime,
+    double? elapsedTimeLastUpdated,
+  }) {
+    return Player(
+      playerId: playerId ?? this.playerId,
+      name: name ?? this.name,
+      provider: provider ?? this.provider,
+      available: available ?? this.available,
+      powered: powered ?? this.powered,
+      state: state ?? this.state,
+      currentItemId: currentItemId ?? this.currentItemId,
+      volumeLevel: volumeLevel ?? this.volumeLevel,
+      volumeMuted: volumeMuted ?? this.volumeMuted,
+      elapsedTime: elapsedTime ?? this.elapsedTime,
+      elapsedTimeLastUpdated: elapsedTimeLastUpdated ?? this.elapsedTimeLastUpdated,
+    );
+  }
+
   // Derived properties
   bool get isPlaying => state == 'playing';
   bool get isMuted => volumeMuted ?? false;
   int get volume => volumeLevel ?? 0;
 
+  // Track when this Player object was created (for local interpolation fallback)
+  static final Map<String, double> _playerCreationTimes = {};
+
   // Calculate current elapsed time (interpolated if playing)
   double get currentElapsedTime {
     if (elapsedTime == null) {
       return 0;
     }
 
-    if (!isPlaying || elapsedTimeLastUpdated == null) {
+    if (!isPlaying) {
       return elapsedTime!;
     }
 
-    // If playing, interpolate based on time since last update
     final now = DateTime.now().millisecondsSinceEpoch / 1000.0;
-    final timeSinceUpdate = now - elapsedTimeLastUpdated!;
 
-    // Safety check: if time since update is negative or too large, just return elapsed time
-    if (timeSinceUpdate < 0 || timeSinceUpdate > 30) {
-      return elapsedTime!;
+    // Try server-provided timestamp first, but only if it's recent
+    if (elapsedTimeLastUpdated != null) {
+      final timeSinceUpdate = now - elapsedTimeLastUpdated!;
+
+      // Only use server timestamp if it's within valid range (0-10 seconds)
+      // - Negative means clock skew (client ahead of server)
+      // - > 10 seconds means stale data (e.g., after player switch)
+      // If outside this range, fall through to local fallback for smooth interpolation
+      if (timeSinceUpdate >= 0 && timeSinceUpdate <= 10.0) {
+        return elapsedTime! + timeSinceUpdate;
+      }
+      // Server timestamp is stale or invalid - fall through to local fallback
     }
 
-    return elapsedTime! + timeSinceUpdate;
+    // Fallback: use local creation time for interpolation
+    // This handles:
+    // 1. Server doesn't send elapsed_time_last_updated
+    // 2. Server timestamp is stale (e.g., after switching to a remote player)
+    // 3. Clock skew between client and server
+    //
+    // Key insight: when server sends a NEW elapsed_time, we get a NEW key,
+    // so interpolation naturally starts fresh. We should NEVER reset an existing
+    // key's creation time, as that causes progress to jump backward.
+    final creationKey = '$playerId:$elapsedTime';
+
+    if (!_playerCreationTimes.containsKey(creationKey)) {
+      // First time seeing this elapsed_time - record when we saw it
+      _playerCreationTimes[creationKey] = now;
+      // Clean up old entries to prevent memory leak
+      if (_playerCreationTimes.length > 100) {
+        final keysToRemove = _playerCreationTimes.keys.take(50).toList();
+        for (final key in keysToRemove) {
+          _playerCreationTimes.remove(key);
+        }
+      }
+    }
+
+    final creationTime = _playerCreationTimes[creationKey]!;
+    final timeSinceCreation = now - creationTime;
+
+    // Server sends updates every ~5 seconds with new elapsed_time values,
+    // which creates new keys and corrects any drift. Allow unlimited
+    // interpolation since new server data will naturally correct it.
+    return elapsedTime! + timeSinceCreation;
   }
 
   factory Player.fromJson(Map<String, dynamic> json) {
@@ -58,35 +128,49 @@ class Player {
     double? elapsedTime;
     double? elapsedTimeLastUpdated;
 
-    // IMPORTANT: Check top-level fields FIRST - they have the most current data
-    elapsedTime = (json['elapsed_time'] as num?)?.toDouble();
-    elapsedTimeLastUpdated = (json['elapsed_time_last_updated'] as num?)?.toDouble();
+    // Get top-level elapsed time values
+    // Try multiple field names as different player types may report position differently
+    final topLevelElapsedTime = (json['elapsed_time'] as num?)?.toDouble()
+        ?? (json['position'] as num?)?.toDouble()
+        ?? (json['media_position'] as num?)?.toDouble()
+        ?? (json['current_position'] as num?)?.toDouble();
+    final topLevelLastUpdated = (json['elapsed_time_last_updated'] as num?)?.toDouble()
+        ?? (json['position_updated_at'] 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) {
         currentItemId ??= currentMedia['queue_item_id'] as String?;
 
-        final currentMediaElapsedTime = (currentMedia['elapsed_time'] as num?)?.toDouble();
-        final currentMediaLastUpdated = (currentMedia['elapsed_time_last_updated'] as num?)?.toDouble();
+        // Try multiple field names for position
+        final currentMediaElapsedTime = (currentMedia['elapsed_time'] as num?)?.toDouble()
+            ?? (currentMedia['position'] as num?)?.toDouble()
+            ?? (currentMedia['media_position'] as num?)?.toDouble();
+        final currentMediaLastUpdated = (currentMedia['elapsed_time_last_updated'] as num?)?.toDouble()
+            ?? (currentMedia['position_updated_at'] as num?)?.toDouble();
 
-        // Use current_media elapsed_time if:
-        // 1. We don't have top-level elapsed_time, OR
-        // 2. Top-level is 0 but current_media has a real value
-        if (elapsedTime == null || (elapsedTime == 0 && currentMediaElapsedTime != null && currentMediaElapsedTime > 0)) {
+        // Prefer current_media elapsed_time when available - it reflects actual playback position
+        // after seek operations, while top-level elapsed_time may lag behind
+        if (currentMediaElapsedTime != null) {
           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?,
@@ -99,6 +183,7 @@ class Player {
     return {
       'player_id': playerId,
       'name': name,
+      if (provider != null) 'provider': provider,
       'available': available,
       'powered': powered,
       'state': state,

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/navigation_provider.dart

@@ -0,0 +1,40 @@
+import 'package:flutter/material.dart';
+
+/// Global navigation state for bottom navigation bar
+class NavigationProvider extends ChangeNotifier {
+  int _selectedIndex = 0;
+
+  /// Global navigator key for pushing routes from anywhere
+  final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();
+
+  /// Callback to focus search when search tab is selected
+  VoidCallback? onSearchTabSelected;
+
+  int get selectedIndex => _selectedIndex;
+
+  void setSelectedIndex(int index) {
+    final previousIndex = _selectedIndex;
+    if (previousIndex != index) {
+      _selectedIndex = index;
+      notifyListeners();
+
+      // Trigger search focus callback when switching to search tab
+      if (index == 2 && onSearchTabSelected != null) {
+        // Use post-frame callback to ensure SearchScreen is built first
+        WidgetsBinding.instance.addPostFrameCallback((_) {
+          onSearchTabSelected?.call();
+        });
+      }
+    }
+  }
+
+  /// Pop all routes and return to the home tab
+  void popToHome() {
+    // Pop all routes above the root
+    navigatorKey.currentState?.popUntil((route) => route.isFirst);
+    setSelectedIndex(0);
+  }
+}
+
+/// Global instance for easy access
+final navigationProvider = NavigationProvider();

lib/providers/player_provider.dart

@@ -0,0 +1,956 @@
+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;
+
+    // Don't try to report state if not authenticated - avoids spamming errors
+    if (_api!.currentConnectionState != MAConnectionState.authenticated) 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/artist_details_screen.dart

@@ -1,22 +1,27 @@
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
+import 'package:cached_network_image/cached_network_image.dart';
 import '../models/media_item.dart';
 import '../providers/music_assistant_provider.dart';
+import '../widgets/global_player_overlay.dart';
 import 'album_details_screen.dart';
 import '../constants/hero_tags.dart';
 import '../theme/palette_helper.dart';
 import '../theme/theme_provider.dart';
 import '../services/metadata_service.dart';
-import '../widgets/mini_player.dart';
+import '../services/debug_logger.dart';
+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
@@ -24,33 +29,304 @@ class ArtistDetailsScreen extends StatefulWidget {
 }
 
 class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
+  final _logger = DebugLogger();
   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(
-        NetworkImage(imageUrl),
+        CachedNetworkImageProvider(imageUrl),
       );
 
       if (colorSchemes != null && mounted) {
@@ -60,7 +336,7 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
         });
       }
     } catch (e) {
-      print('⚠️ Failed to extract colors for artist: $e');
+      _logger.log('Failed to extract colors for artist: $e');
     }
   }
 
@@ -84,93 +360,71 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
   Future<void> _loadArtistAlbums() async {
     final provider = context.read<MusicAssistantProvider>();
 
-    if (provider.api != null) {
-      // 1. Get Library Albums
-      final allAlbums = await provider.api!.getAlbums();
-      
-      var libraryAlbums = allAlbums.where((album) {
-        if (album.artists == null) return false;
-        return album.artists!.any((artist) =>
-          artist.itemId == widget.artist.itemId || 
-          artist.name == widget.artist.name
-        );
-      }).toList();
+    // Use cached artist albums method
+    final allAlbums = await provider.getArtistAlbumsWithCache(widget.artist.name);
 
-      List<Album> providerAlbums = [];
-
-      // 2. Get Provider Albums (via search)
-      if (widget.artist.name.isNotEmpty) {
-        try {
-          final searchResults = await provider.search(widget.artist.name);
-          final searchAlbums = (searchResults['albums'] as List<dynamic>?)
-              ?.map((item) => item as Album)
-              .toList() ?? [];
-          
-          // Filter: Must match artist name
-          providerAlbums = searchAlbums.where((album) {
-             return album.artists?.any((a) => 
-               a.name.toLowerCase() == widget.artist.name.toLowerCase()
-             ) ?? false;
-          }).toList();
-
-          // Filter: Must NOT be in libraryAlbums
-          final libraryAlbumNames = libraryAlbums.map((a) => a.name.toLowerCase()).toSet();
-          
-          providerAlbums = providerAlbums.where((a) => 
-            !libraryAlbumNames.contains(a.name.toLowerCase())
-          ).toList();
-
-        } catch (e) {
-          print('Error searching provider albums: $e');
-        }
-      }
-
-      if (mounted) {
-        setState(() {
-          _albums = libraryAlbums;
-          _providerAlbums = providerAlbums;
-          _isLoading = false;
-        });
-      }
-    } else {
-      if (mounted) {
-        setState(() {
-          _isLoading = false;
-        });
-      }
+    if (mounted) {
+      setState(() {
+        _albums = allAlbums;
+        _providerAlbums = []; // All albums are merged in the cache method
+        _isLoading = false;
+      });
     }
   }
   
   @override
   Widget build(BuildContext context) {
-    final maProvider = context.watch<MusicAssistantProvider>();
-    final themeProvider = context.watch<ThemeProvider>();
-    final imageUrl = maProvider.getImageUrl(widget.artist, size: 512);
+    // CRITICAL FIX: Use select() instead of watch() to reduce rebuilds
+    // Only rebuild when specific properties change, not on every provider update
+    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) {
-      adaptiveScheme = isDark ? _darkColorScheme : _lightColorScheme;
+    if (adaptiveTheme) {
+      // 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;
 
-    return Scaffold(
-      backgroundColor: colorScheme.background,
-      body: Stack(
-        children: [
-          CustomScrollView(
-            slivers: [
-          SliverAppBar(
-            expandedHeight: 300,
-            pinned: true,
-            backgroundColor: colorScheme.background,
-            leading: IconButton(
-              icon: const Icon(Icons.arrow_back_rounded),
-              onPressed: () => Navigator.pop(context),
-              color: colorScheme.onBackground,
-            ),
+    return PopScope(
+      canPop: true,
+      onPopInvokedWithResult: (didPop, result) {
+        if (didPop) {
+          clearAdaptiveColorsOnBack(context);
+        }
+      },
+      child: Scaffold(
+        backgroundColor: colorScheme.background,
+        body: CustomScrollView(
+          slivers: [
+            SliverAppBar(
+              expandedHeight: 300,
+              pinned: true,
+              backgroundColor: colorScheme.background,
+              leading: IconButton(
+                icon: const Icon(Icons.arrow_back_rounded),
+                onPressed: () {
+                  clearAdaptiveColorsOnBack(context);
+                  Navigator.pop(context);
+                },
+                color: colorScheme.onBackground,
+              ),
             flexibleSpace: FlexibleSpaceBar(
               background: Column(
                 mainAxisAlignment: MainAxisAlignment.center,
@@ -178,18 +432,27 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
                   const SizedBox(height: 60),
                   Hero(
                     tag: HeroTags.artistImage + (widget.artist.uri ?? widget.artist.itemId) + _heroTagSuffix,
-                    child: CircleAvatar(
-                      radius: 100,
-                      backgroundColor: colorScheme.surfaceVariant,
-                      backgroundImage:
-                          imageUrl != null ? NetworkImage(imageUrl) : null,
-                      child: imageUrl == null
-                          ? Icon(
-                              Icons.person_rounded,
-                              size: 100,
-                              color: colorScheme.onSurfaceVariant,
-                            )
-                          : null,
+                    child: ClipOval(
+                      child: Container(
+                        width: 200,
+                        height: 200,
+                        color: colorScheme.surfaceVariant,
+                        child: imageUrl != null
+                            ? Image.network(
+                                imageUrl,
+                                fit: BoxFit.cover,
+                                errorBuilder: (_, __, ___) => Icon(
+                                  Icons.person_rounded,
+                                  size: 100,
+                                  color: colorScheme.onSurfaceVariant,
+                                ),
+                              )
+                            : Icon(
+                                Icons.person_rounded,
+                                size: 100,
+                                color: colorScheme.onSurfaceVariant,
+                              ),
+                      ),
                     ),
                   ),
                 ],
@@ -238,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),
                 ],
               ),
             ),
@@ -287,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,
                   ),
@@ -321,40 +667,40 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
                   delegate: SliverChildBuilderDelegate(
                     (context, index) {
                       final album = _providerAlbums[index];
-                      return _buildAlbumCard(album, maProvider);
+                      return _buildAlbumCard(album);
                     },
                     childCount: _providerAlbums.length,
                   ),
                 ),
               ),
-              const SliverToBoxAdapter(child: SizedBox(height: 88)), // Extra space for floating mini player (80px height + 8px bottom margin)
+              const SliverToBoxAdapter(child: SizedBox(height: 140)), // Space for bottom nav + mini player
             ],
           ],
         ],
-      ),
-          // Floating mini player at bottom of screen
-          Positioned(
-            left: 0,
-            right: 0,
-            bottom: 0,
-            child: const MiniPlayer(),
-          ),
-        ],
+        ),
       ),
     );
   }
 
-  Widget _buildAlbumCard(Album album, MusicAssistantProvider provider) {
-    final imageUrl = provider.getImageUrl(album, size: 256);
+  Widget _buildAlbumCard(Album album) {
+    // 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';
 
     return InkWell(
       onTap: () {
+        // Update adaptive colors immediately on tap
+        updateAdaptiveColorsFromImage(context, imageUrl);
         Navigator.push(
           context,
-          MaterialPageRoute(
-            builder: (context) => AlbumDetailsScreen(album: album),
+          FadeSlidePageRoute(
+            child: AlbumDetailsScreen(
+              album: album,
+              heroTagSuffix: heroSuffix,
+            ),
           ),
         );
       },
@@ -362,45 +708,66 @@ class _ArtistDetailsScreenState extends State<ArtistDetailsScreen> {
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           Expanded(
-            child: Container(
-              decoration: BoxDecoration(
-                color: colorScheme.surfaceVariant,
+            child: Hero(
+              tag: HeroTags.albumCover + (album.uri ?? album.itemId) + '_$heroSuffix',
+              child: ClipRRect(
                 borderRadius: BorderRadius.circular(12),
-                image: imageUrl != null
-                    ? DecorationImage(
-                        image: NetworkImage(imageUrl),
-                        fit: BoxFit.cover,
-                      )
-                    : null,
+                child: Container(
+                  color: colorScheme.surfaceVariant,
+                  child: imageUrl != null
+                      ? Image.network(
+                          imageUrl,
+                          fit: BoxFit.cover,
+                          width: double.infinity,
+                          height: double.infinity,
+                          errorBuilder: (_, __, ___) => Center(
+                            child: Icon(
+                              Icons.album_rounded,
+                              size: 64,
+                              color: colorScheme.onSurfaceVariant,
+                            ),
+                          ),
+                        )
+                      : Center(
+                          child: Icon(
+                            Icons.album_rounded,
+                            size: 64,
+                            color: colorScheme.onSurfaceVariant,
+                          ),
+                        ),
+                ),
               ),
-              child: imageUrl == null
-                  ? Center(
-                      child: Icon(
-                        Icons.album_rounded,
-                        size: 64,
-                        color: colorScheme.onSurfaceVariant,
-                      ),
-                    )
-                  : null,
             ),
           ),
           const SizedBox(height: 8),
-          Text(
-            album.name,
-            style: textTheme.titleSmall?.copyWith(
-              color: colorScheme.onSurface,
-              fontWeight: FontWeight.w500,
+          Hero(
+            tag: HeroTags.albumTitle + (album.uri ?? album.itemId) + '_$heroSuffix',
+            child: Material(
+              color: Colors.transparent,
+              child: Text(
+                album.name,
+                style: textTheme.titleSmall?.copyWith(
+                  color: colorScheme.onSurface,
+                  fontWeight: FontWeight.w500,
+                ),
+                maxLines: 1,
+                overflow: TextOverflow.ellipsis,
+              ),
             ),
-            maxLines: 1,
-            overflow: TextOverflow.ellipsis,
           ),
-          Text(
-            album.artistsString,
-            style: textTheme.bodySmall?.copyWith(
-              color: colorScheme.onSurface.withOpacity(0.7),
+          Hero(
+            tag: HeroTags.artistName + (album.uri ?? album.itemId) + '_$heroSuffix',
+            child: Material(
+              color: Colors.transparent,
+              child: Text(
+                album.artistsString,
+                style: textTheme.bodySmall?.copyWith(
+                  color: colorScheme.onSurface.withOpacity(0.7),
+                ),
+                maxLines: 1,
+                overflow: TextOverflow.ellipsis,
+              ),
             ),
-            maxLines: 1,
-            overflow: TextOverflow.ellipsis,
           ),
         ],
       ),

lib/screens/debug_log_screen.dart

@@ -1,9 +1,10 @@
 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 {
   const DebugLogScreen({super.key});
@@ -15,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() {
@@ -33,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();
@@ -61,6 +84,7 @@ class _DebugLogScreenState extends State<DebugLogScreen> {
 
     try {
       final allPlayers = await maProvider.getAllPlayersUnfiltered();
+      final currentPlayerId = await maProvider.getCurrentPlayerId();
 
       if (!mounted) return;
 
@@ -68,9 +92,9 @@ class _DebugLogScreenState extends State<DebugLogScreen> {
         context: context,
         builder: (context) => AlertDialog(
           backgroundColor: const Color(0xFF2a2a2a),
-          title: const Text(
-            'All Players (Including Hidden)',
-            style: TextStyle(color: Colors.white),
+          title: Text(
+            'All Players (${allPlayers.length})',
+            style: const TextStyle(color: Colors.white),
           ),
           content: SizedBox(
             width: double.maxFinite,
@@ -79,17 +103,50 @@ class _DebugLogScreenState extends State<DebugLogScreen> {
               itemCount: allPlayers.length,
               itemBuilder: (context, index) {
                 final player = allPlayers[index];
-                final isGhost = player.name.toLowerCase().contains('music assistant mobile');
+                final id = player.playerId.toLowerCase();
+
+                // Detect ghost players: ensemble_*, massiv_*, ma_* prefixes
+                final isAppPlayer = id.startsWith('ensemble_') ||
+                                    id.startsWith('massiv_') ||
+                                    id.startsWith('ma_');
+                final isCurrentPlayer = player.playerId == currentPlayerId;
+                final isGhost = isAppPlayer && !isCurrentPlayer;
+                final isCorrupt = isAppPlayer && !player.available;
+
+                Color cardColor;
+                Color textColor;
+                IconData? trailingIcon;
+                Color? iconColor;
+
+                if (isCurrentPlayer) {
+                  cardColor = Colors.green.withOpacity(0.2);
+                  textColor = Colors.green[300]!;
+                  trailingIcon = Icons.check_circle;
+                  iconColor = Colors.green;
+                } else if (isCorrupt) {
+                  cardColor = Colors.orange.withOpacity(0.2);
+                  textColor = Colors.orange[300]!;
+                  trailingIcon = Icons.error;
+                  iconColor = Colors.orange;
+                } else if (isGhost) {
+                  cardColor = Colors.red.withOpacity(0.2);
+                  textColor = Colors.red[300]!;
+                  trailingIcon = Icons.warning;
+                  iconColor = Colors.red;
+                } else {
+                  cardColor = Colors.white.withOpacity(0.1);
+                  textColor = Colors.white;
+                }
 
                 return Card(
-                  color: isGhost ? Colors.red.withOpacity(0.2) : Colors.white.withOpacity(0.1),
+                  color: cardColor,
                   margin: const EdgeInsets.only(bottom: 8),
                   child: ListTile(
                     title: Text(
                       player.name,
                       style: TextStyle(
-                        color: isGhost ? Colors.red[300] : Colors.white,
-                        fontWeight: isGhost ? FontWeight.bold : FontWeight.normal,
+                        color: textColor,
+                        fontWeight: (isGhost || isCurrentPlayer) ? FontWeight.bold : FontWeight.normal,
                       ),
                     ),
                     subtitle: Column(
@@ -100,13 +157,28 @@ class _DebugLogScreenState extends State<DebugLogScreen> {
                           style: const TextStyle(color: Colors.white70, fontSize: 11),
                         ),
                         Text(
-                          'Available: ${player.available} | State: ${player.state}',
+                          'Available: ${player.available} | Provider: ${player.provider}',
                           style: const TextStyle(color: Colors.white70, fontSize: 11),
                         ),
+                        if (isCurrentPlayer)
+                          const Text(
+                            '← This device',
+                            style: TextStyle(color: Colors.green, fontSize: 11, fontWeight: FontWeight.bold),
+                          ),
+                        if (isGhost && !isCorrupt)
+                          const Text(
+                            '⚠️ Ghost player (duplicate)',
+                            style: TextStyle(color: Colors.red, fontSize: 11),
+                          ),
+                        if (isCorrupt)
+                          const Text(
+                            '⚠️ Unavailable/Corrupt',
+                            style: TextStyle(color: Colors.orange, fontSize: 11),
+                          ),
                       ],
                     ),
-                    trailing: isGhost
-                        ? const Icon(Icons.warning, color: Colors.red, size: 20)
+                    trailing: trailingIcon != null
+                        ? Icon(trailingIcon, color: iconColor, size: 20)
                         : null,
                   ),
                 );
@@ -117,7 +189,7 @@ class _DebugLogScreenState extends State<DebugLogScreen> {
             TextButton(
               onPressed: () async {
                 final text = allPlayers.map((p) =>
-                  'Name: ${p.name}\nID: ${p.playerId}\nAvailable: ${p.available}\nState: ${p.state}\n---'
+                  'Name: ${p.name}\nID: ${p.playerId}\nAvailable: ${p.available}\nProvider: ${p.provider}\nState: ${p.state}\n---'
                 ).join('\n');
                 await Clipboard.setData(ClipboardData(text: text));
                 if (context.mounted) {
@@ -167,53 +239,105 @@ class _DebugLogScreenState extends State<DebugLogScreen> {
         ),
         centerTitle: true,
         actions: [
-          IconButton(
-            icon: const Icon(Icons.speaker_group_rounded),
-            onPressed: _showAllPlayers,
-            color: Colors.white,
-            tooltip: 'View all players',
-          ),
-          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',
+          // 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: 'More options',
+            onSelected: (value) async {
+              switch (value) {
+                case 'show_players':
+                  _showAllPlayers();
+                  break;
+                case 'copy_logs':
+                  _copyLogs();
+                  break;
+                case 'clear_logs':
+                  _clearLogs();
+                  break;
+              }
+            },
+            itemBuilder: (context) => [
+              const PopupMenuItem(
+                value: 'show_players',
+                child: ListTile(
+                  leading: Icon(Icons.speaker_group_rounded),
+                  title: Text('View All Players'),
+                  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,
+                ),
+              ),
+            ],
           ),
         ],
       ),
       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(
-                  Icons.info_outline_rounded,
-                  color: Colors.white70,
-                  size: 16,
-                ),
-                const SizedBox(width: 8),
-                Expanded(
-                  child: Text(
-                    'Last ${_logger.logs.length} log entries',
-                    style: const TextStyle(
-                      color: Colors.white70,
-                      fontSize: 12,
-                    ),
+                // Level filter chips
+                SingleChildScrollView(
+                  scrollDirection: Axis.horizontal,
+                  child: Row(
+                    children: [
+                      _buildFilterChip('All', LogLevel.debug),
+                      const SizedBox(width: 8),
+                      _buildFilterChip('Info+', LogLevel.info),
+                      const SizedBox(width: 8),
+                      _buildFilterChip('Warnings', LogLevel.warning),
+                      const SizedBox(width: 8),
+                      _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',
@@ -225,63 +349,100 @@ class _DebugLogScreenState extends State<DebugLogScreen> {
                   )
                 : ListView.builder(
                     controller: _scrollController,
-                    padding: const EdgeInsets.all(8),
-                    itemCount: _logger.logs.length,
+                    padding: EdgeInsets.fromLTRB(8, 8, 8, BottomSpacing.navBarOnly + 56),
+                    itemCount: _filteredEntries.length,
                     itemBuilder: (context, index) {
-                      final log = _logger.logs[index];
-                      final isError = log.contains('Error') ||
-                          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,
-                          ),
-                        ),
-                      );
+                      final entry = _filteredEntries[index];
+                      return _buildLogEntry(entry);
                     },
                   ),
           ),
         ],
       ),
-      floatingActionButton: FloatingActionButton(
-        onPressed: () {
-          setState(() {});
-          if (_scrollController.hasClients) {
-            _scrollController.animateTo(
-              _scrollController.position.maxScrollExtent,
-              duration: const Duration(milliseconds: 300),
-              curve: Curves.easeOut,
-            );
-          }
-        },
-        backgroundColor: Colors.white,
-        foregroundColor: const Color(0xFF1a1a1a),
-        child: const Icon(Icons.refresh_rounded),
+      floatingActionButton: Padding(
+        padding: EdgeInsets.only(bottom: BottomSpacing.navBarOnly),
+        child: FloatingActionButton(
+          onPressed: () {
+            setState(() {});
+            if (_scrollController.hasClients) {
+              _scrollController.animateTo(
+                _scrollController.position.maxScrollExtent,
+                duration: const Duration(milliseconds: 300),
+                curve: Curves.easeOut,
+              );
+            }
+          },
+          backgroundColor: Colors.white,
+          foregroundColor: const Color(0xFF1a1a1a),
+          child: const Icon(Icons.refresh_rounded),
+        ),
       ),
     );
   }
+
+  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.perf:
+        return Colors.purple;
+      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/home_screen.dart

@@ -1,5 +1,8 @@
 import 'package:flutter/material.dart';
-import '../widgets/mini_player.dart';
+import 'package:flutter/services.dart';
+import 'package:provider/provider.dart';
+import '../providers/navigation_provider.dart';
+import '../widgets/global_player_overlay.dart';
 import 'new_home_screen.dart';
 import 'new_library_screen.dart';
 import 'search_screen.dart';
@@ -13,110 +16,106 @@ class HomeScreen extends StatefulWidget {
 }
 
 class _HomeScreenState extends State<HomeScreen> {
-  int _selectedIndex = 0;
   final GlobalKey<SearchScreenState> _searchScreenKey = GlobalKey<SearchScreenState>();
+  DateTime? _lastBackPress;
 
   @override
-  Widget build(BuildContext context) {
-    final theme = Theme.of(context);
-    final colorScheme = theme.colorScheme;
+  void initState() {
+    super.initState();
+    // Register search focus callback with navigation provider
+    navigationProvider.onSearchTabSelected = () {
+      _searchScreenKey.currentState?.requestFocus();
+    };
+  }
 
-    return PopScope(
-      canPop: _selectedIndex == 0,
-      onPopInvoked: (didPop) {
-        if (didPop) return;
-        setState(() {
-          _selectedIndex = 0;
-        });
-      },
-      child: Scaffold(
-        backgroundColor: colorScheme.background,
-        body: Stack(
-          children: [
-            // Home and Library use IndexedStack for state preservation
-            Offstage(
-              offstage: _selectedIndex > 1,
-              child: IndexedStack(
-                index: _selectedIndex.clamp(0, 1),
-                children: const [
-                  NewHomeScreen(),
-                  NewLibraryScreen(),
-                ],
-              ),
-            ),
-            // Search and Settings are conditionally rendered (removed from tree when not visible)
-            if (_selectedIndex == 2)
-              SearchScreen(key: _searchScreenKey),
-            if (_selectedIndex == 3)
-              const SettingsScreen(),
-            // Floating mini player - positioned above bottom nav, hidden on settings
-            if (_selectedIndex != 3)
-              Positioned(
-                left: 0,
-                right: 0,
-                bottom: 0,
-                child: const MiniPlayer(),
-              ),
-          ],
-        ),
-        bottomNavigationBar: Container(
-              decoration: BoxDecoration(
-                color: colorScheme.surface,
-                boxShadow: [
-                  BoxShadow(
-                    color: Colors.black.withOpacity(0.1),
-                    blurRadius: 10,
-                    offset: const Offset(0, -2),
-                  ),
-                ],
-              ),
-              child: BottomNavigationBar(
-                currentIndex: _selectedIndex,
-                onTap: (index) {
-                  setState(() {
-                    _selectedIndex = index;
-                  });
+  @override
+  void dispose() {
+    // Clean up callback
+    navigationProvider.onSearchTabSelected = null;
+    super.dispose();
+  }
 
-                  // Auto-focus search field when switching to search tab
-                  if (index == 2) {
-                    // Use post-frame callback to ensure SearchScreen is built first
-                    WidgetsBinding.instance.addPostFrameCallback((_) {
-                      _searchScreenKey.currentState?.requestFocus();
-                    });
-                  }
-                },
-                backgroundColor: Colors.transparent,
-                selectedItemColor: colorScheme.primary,
-                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',
-                  ),
-                ],
-              ),
-            ),
+  void _showExitSnackBar() {
+    ScaffoldMessenger.of(context).clearSnackBars();
+    ScaffoldMessenger.of(context).showSnackBar(
+      SnackBar(
+        content: const Text('Press back again to minimize'),
+        duration: const Duration(seconds: 2),
+        behavior: SnackBarBehavior.floating,
+        margin: const EdgeInsets.only(bottom: 80, left: 16, right: 16),
       ),
     );
   }
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return ListenableBuilder(
+      listenable: navigationProvider,
+      builder: (context, _) {
+        final selectedIndex = navigationProvider.selectedIndex;
+
+        return PopScope(
+          canPop: false,
+          onPopInvokedWithResult: (didPop, result) {
+            if (didPop) return;
+
+            // If global player is expanded, collapse it first
+            if (GlobalPlayerOverlay.isPlayerExpanded) {
+              GlobalPlayerOverlay.collapsePlayer();
+              return;
+            }
+
+            // If not on home tab, navigate to home
+            if (selectedIndex != 0) {
+              // If leaving Settings, show player again
+              if (selectedIndex == 3) {
+                GlobalPlayerOverlay.showPlayer();
+              }
+              navigationProvider.setSelectedIndex(0);
+              return;
+            }
+
+            // On home tab - check for double press to minimize
+            final now = DateTime.now();
+            if (_lastBackPress != null &&
+                now.difference(_lastBackPress!) < const Duration(seconds: 2)) {
+              // Double press detected - minimize app (move to background)
+              // This keeps the app running and connection alive
+              SystemNavigator.pop();
+            } else {
+              // First press, show message
+              _lastBackPress = now;
+              _showExitSnackBar();
+            }
+          },
+          child: Scaffold(
+            backgroundColor: colorScheme.surface,
+            // No bottomNavigationBar here - it's now in GlobalPlayerOverlay
+            body: Stack(
+              children: [
+                // Home and Library use IndexedStack for state preservation
+                Offstage(
+                  offstage: selectedIndex > 1,
+                  child: IndexedStack(
+                    index: selectedIndex.clamp(0, 1),
+                    children: const [
+                      NewHomeScreen(),
+                      NewLibraryScreen(),
+                    ],
+                  ),
+                ),
+                // Search and Settings are conditionally rendered (removed from tree when not visible)
+                if (selectedIndex == 2)
+                  SearchScreen(key: _searchScreenKey),
+                if (selectedIndex == 3)
+                  const SettingsScreen(),
+              ],
+            ),
+          ),
+        );
+      },
+    );
+  }
 }

lib/screens/library_albums_screen.dart

@@ -3,13 +3,14 @@ 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});
 
   @override
   Widget build(BuildContext context) {
-    final provider = context.watch<MusicAssistantProvider>();
+    // Use Selector for targeted rebuilds - only rebuild when albums or loading state changes
     final colorScheme = Theme.of(context).colorScheme;
     final textTheme = Theme.of(context).textTheme;
 
@@ -32,49 +33,28 @@ class LibraryAlbumsScreen extends StatelessWidget {
         ),
         centerTitle: true,
       ),
-      body: _buildAlbumsList(context, provider),
+      body: Selector<MusicAssistantProvider, (List<Album>, bool)>(
+        selector: (_, provider) => (provider.albums, provider.isLoading),
+        builder: (context, data, _) {
+          final (albums, isLoading) = data;
+          return _buildAlbumsList(context, albums, isLoading);
+        },
+      ),
     );
   }
 
-  Widget _buildAlbumsList(BuildContext context, MusicAssistantProvider provider) {
+  Widget _buildAlbumsList(BuildContext context, List<Album> albums, bool isLoading) {
     final colorScheme = Theme.of(context).colorScheme;
 
-    if (provider.isLoading) {
+    if (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,
-              ),
-            ),
-          ],
-        ),
+    if (albums.isEmpty) {
+      return EmptyState.albums(
+        onRefresh: () => context.read<MusicAssistantProvider>().loadLibrary(),
       );
     }
 
@@ -82,9 +62,13 @@ class LibraryAlbumsScreen extends StatelessWidget {
       color: colorScheme.primary,
       backgroundColor: colorScheme.surface,
       onRefresh: () async {
-        await provider.loadLibrary();
+        await context.read<MusicAssistantProvider>().loadLibrary();
       },
       child: GridView.builder(
+        key: const PageStorageKey<String>('library_albums_full_grid'),
+        cacheExtent: 500, // Prebuild items off-screen for smoother scrolling
+        addAutomaticKeepAlives: false, // Cards have their own keep-alive
+        addRepaintBoundaries: false, // Cards have RepaintBoundary
         gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
           crossAxisCount: 2,
           childAspectRatio: 0.75,
@@ -92,10 +76,11 @@ class LibraryAlbumsScreen extends StatelessWidget {
           mainAxisSpacing: 12,
         ),
         padding: const EdgeInsets.all(12),
-        itemCount: provider.albums.length,
+        itemCount: albums.length,
         itemBuilder: (context, index) {
-          final album = provider.albums[index];
+          final album = albums[index];
           return AlbumCard(
+            key: ValueKey(album.uri ?? album.itemId),
             album: album,
             heroTagSuffix: 'library',
           );

lib/screens/library_artists_screen.dart

@@ -2,15 +2,17 @@ import 'package:flutter/material.dart';
 import 'package:provider/provider.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';
-import '../constants/hero_tags.dart';
 
 class LibraryArtistsScreen extends StatelessWidget {
   const LibraryArtistsScreen({super.key});
 
   @override
   Widget build(BuildContext context) {
-    final provider = context.watch<MusicAssistantProvider>();
+    // Use Selector for targeted rebuilds - only rebuild when artists or loading state changes
     final colorScheme = Theme.of(context).colorScheme;
     final textTheme = Theme.of(context).textTheme;
 
@@ -33,49 +35,28 @@ class LibraryArtistsScreen extends StatelessWidget {
         ),
         centerTitle: true,
       ),
-      body: _buildArtistsList(context, provider),
+      body: Selector<MusicAssistantProvider, (List<Artist>, bool)>(
+        selector: (_, provider) => (provider.artists, provider.isLoading),
+        builder: (context, data, _) {
+          final (artists, isLoading) = data;
+          return _buildArtistsList(context, artists, isLoading);
+        },
+      ),
     );
   }
 
-  Widget _buildArtistsList(BuildContext context, MusicAssistantProvider provider) {
+  Widget _buildArtistsList(BuildContext context, List<Artist> artists, bool isLoading) {
     final colorScheme = Theme.of(context).colorScheme;
 
-    if (provider.isLoading) {
+    if (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,
-              ),
-            ),
-          ],
-        ),
+    if (artists.isEmpty) {
+      return EmptyState.artists(
+        onRefresh: () => context.read<MusicAssistantProvider>().loadLibrary(),
       );
     }
 
@@ -83,61 +64,64 @@ class LibraryArtistsScreen extends StatelessWidget {
       color: colorScheme.primary,
       backgroundColor: colorScheme.surface,
       onRefresh: () async {
-        await provider.loadLibrary();
+        await context.read<MusicAssistantProvider>().loadLibrary();
       },
       child: ListView.builder(
-        itemCount: provider.artists.length,
+        key: const PageStorageKey<String>('library_artists_full_list'),
+        cacheExtent: 500, // Prebuild items off-screen for smoother scrolling
+        addAutomaticKeepAlives: false, // Tiles have their own keep-alive
+        addRepaintBoundaries: false, // Tiles have RepaintBoundary
+        itemCount: artists.length,
         padding: const EdgeInsets.all(8),
         itemBuilder: (context, index) {
-          final artist = provider.artists[index];
-          return _buildArtistTile(context, artist, provider);
+          final artist = artists[index];
+          return _buildArtistTile(
+            context,
+            artist,
+            key: ValueKey(artist.uri ?? artist.itemId),
+          );
         },
       ),
     );
   }
 
-  Widget _buildArtistTile(BuildContext context, Artist artist, MusicAssistantProvider provider) {
-    final imageUrl = provider.getImageUrl(artist, size: 128);
+  Widget _buildArtistTile(
+    BuildContext context,
+    Artist artist, {
+    Key? key,
+  }) {
     final colorScheme = Theme.of(context).colorScheme;
     final textTheme = Theme.of(context).textTheme;
-    
-    const suffix = '_library';
+    final maProvider = context.read<MusicAssistantProvider>();
+    // Get image URL for hero animation
+    final imageUrl = maProvider.getImageUrl(artist, size: 256);
 
-    return Builder(
-      builder: (context) => ListTile(
-        leading: Hero(
-          tag: HeroTags.artistImage + (artist.uri ?? artist.itemId) + suffix,
-          child: CircleAvatar(
-            radius: 24,
-            backgroundColor: colorScheme.surfaceVariant,
-            backgroundImage: imageUrl != null ? NetworkImage(imageUrl) : null,
-            child: imageUrl == null
-                ? Icon(Icons.person_rounded, color: colorScheme.onSurfaceVariant)
-                : null,
-          ),
+    // RepaintBoundary isolates repaints to individual tiles
+    return RepaintBoundary(
+      child: ListTile(
+        key: key,
+        leading: ArtistAvatar(
+          artist: artist,
+          radius: 24,
+          imageSize: 128,
         ),
-        title: Hero(
-          tag: HeroTags.artistName + (artist.uri ?? artist.itemId) + suffix,
-          child: Material(
-            color: Colors.transparent,
-            child: Text(
-              artist.name,
-              style: textTheme.titleMedium?.copyWith(
-                color: colorScheme.onSurface,
-                fontWeight: FontWeight.w500,
-              ),
-              maxLines: 1,
-              overflow: TextOverflow.ellipsis,
-            ),
-          ),
+      title: Text(
+        artist.name,
+        style: textTheme.titleMedium?.copyWith(
+          color: colorScheme.onSurface,
+          fontWeight: FontWeight.w500,
         ),
+        maxLines: 1,
+        overflow: TextOverflow.ellipsis,
+      ),
         onTap: () {
           Navigator.push(
             context,
-            MaterialPageRoute(
-              builder: (context) => ArtistDetailsScreen(
+            FadeSlidePageRoute(
+              child: ArtistDetailsScreen(
                 artist: artist,
                 heroTagSuffix: 'library',
+                initialImageUrl: imageUrl,
               ),
             ),
           );

lib/screens/library_playlists_screen.dart

@@ -1,7 +1,9 @@
 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 '../widgets/common/empty_state.dart';
 import 'playlist_details_screen.dart';
 
 class LibraryPlaylistsScreen extends StatefulWidget {
@@ -79,36 +81,7 @@ class _LibraryPlaylistsScreenState extends State<LibraryPlaylistsScreen> {
     }
 
     if (_playlists.isEmpty) {
-      return Center(
-        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 EmptyState.playlists(onRefresh: _loadPlaylists);
     }
 
     return RefreshIndicator(
@@ -118,6 +91,9 @@ class _LibraryPlaylistsScreenState extends State<LibraryPlaylistsScreen> {
       child: ListView.builder(
         itemCount: _playlists.length,
         padding: const EdgeInsets.all(8),
+        cacheExtent: 500, // Prebuild items off-screen for smoother scrolling
+        addAutomaticKeepAlives: false, // Tiles don't need individual keep-alive
+        addRepaintBoundaries: false, // We add RepaintBoundary manually to tiles
         itemBuilder: (context, index) {
           final playlist = _playlists[index];
           return _buildPlaylistTile(context, playlist, provider);
@@ -131,8 +107,9 @@ class _LibraryPlaylistsScreenState extends State<LibraryPlaylistsScreen> {
     final colorScheme = Theme.of(context).colorScheme;
     final textTheme = Theme.of(context).textTheme;
 
-    return Builder(
-      builder: (context) => ListTile(
+    return RepaintBoundary(
+      child: ListTile(
+        key: ValueKey(playlist.itemId),
         leading: Container(
           width: 48,
           height: 48,
@@ -141,7 +118,7 @@ class _LibraryPlaylistsScreenState extends State<LibraryPlaylistsScreen> {
             borderRadius: BorderRadius.circular(8),
             image: imageUrl != null
                 ? DecorationImage(
-                    image: NetworkImage(imageUrl),
+                    image: CachedNetworkImageProvider(imageUrl),
                     fit: BoxFit.cover,
                   )
                 : null,

lib/screens/library_screen.dart

@@ -1,455 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:provider/provider.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 ? NetworkImage(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: NetworkImage(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: NetworkImage(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

@@ -1,7 +1,9 @@
 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 '../widgets/common/empty_state.dart';
 
 class LibraryTracksScreen extends StatelessWidget {
   const LibraryTracksScreen({super.key});
@@ -46,41 +48,15 @@ class LibraryTracksScreen extends StatelessWidget {
     }
 
     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 EmptyState.tracks(onRefresh: provider.loadLibrary);
     }
 
     return ListView.builder(
       itemCount: provider.tracks.length,
       padding: const EdgeInsets.all(8),
+      cacheExtent: 500, // Prebuild items off-screen for smoother scrolling
+      addAutomaticKeepAlives: false, // Tiles don't need individual keep-alive
+      addRepaintBoundaries: false, // We add RepaintBoundary manually to tiles
       itemBuilder: (context, index) {
         final track = provider.tracks[index];
         return _buildTrackTile(context, track, provider, index);
@@ -100,43 +76,46 @@ class LibraryTracksScreen extends StatelessWidget {
     final colorScheme = Theme.of(context).colorScheme;
     final textTheme = Theme.of(context).textTheme;
 
-    return ListTile(
-      leading: Container(
-        width: 48,
-        height: 48,
-        decoration: BoxDecoration(
-          color: colorScheme.surfaceVariant,
-          borderRadius: BorderRadius.circular(8),
-          image: imageUrl != null
-              ? DecorationImage(
-                  image: NetworkImage(imageUrl),
-                  fit: BoxFit.cover,
-                )
+    return RepaintBoundary(
+      child: ListTile(
+        key: ValueKey(track.uri ?? track.itemId),
+        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,
         ),
-        child: imageUrl == null
-            ? Icon(Icons.music_note_rounded, color: colorScheme.onSurfaceVariant)
+        title: Text(
+          track.name,
+          style: textTheme.bodyLarge?.copyWith(color: colorScheme.onSurface),
+          maxLines: 1,
+          overflow: TextOverflow.ellipsis,
+        ),
+        subtitle: Text(
+          track.artistsString,
+          style: textTheme.bodyMedium?.copyWith(color: colorScheme.onSurface.withOpacity(0.7)),
+          maxLines: 1,
+          overflow: TextOverflow.ellipsis,
+        ),
+        trailing: track.duration != null
+            ? Text(
+                _formatDuration(track.duration!),
+                style: textTheme.bodySmall?.copyWith(color: colorScheme.onSurface.withOpacity(0.54)),
+              )
             : null,
+        onTap: () => _playTrack(context, maProvider, index),
       ),
-      title: Text(
-        track.name,
-        style: textTheme.bodyLarge?.copyWith(color: colorScheme.onSurface),
-        maxLines: 1,
-        overflow: TextOverflow.ellipsis,
-      ),
-      subtitle: Text(
-        track.artistsString,
-        style: textTheme.bodyMedium?.copyWith(color: colorScheme.onSurface.withOpacity(0.7)),
-        maxLines: 1,
-        overflow: TextOverflow.ellipsis,
-      ),
-      trailing: track.duration != null
-          ? Text(
-              _formatDuration(track.duration!),
-              style: textTheme.bodySmall?.copyWith(color: colorScheme.onSurface.withOpacity(0.54)),
-            )
-          : null,
-      onTap: () => _playTrack(context, maProvider, index),
     );
   }
 

lib/screens/login_screen.dart

@@ -4,6 +4,7 @@ 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 {
@@ -15,10 +16,12 @@ class LoginScreen extends StatefulWidget {
 
 class _LoginScreenState extends State<LoginScreen> {
   final TextEditingController _serverUrlController = TextEditingController();
-  final TextEditingController _portController = TextEditingController(text: '8095');
+  final TextEditingController _ownerNameController = TextEditingController();
+  final TextEditingController _portController = TextEditingController();
   final TextEditingController _authServerUrlController = TextEditingController(); // For separate auth server (Authelia)
   final TextEditingController _usernameController = TextEditingController();
   final TextEditingController _passwordController = TextEditingController();
+  final FocusNode _usernameFocusNode = FocusNode();
 
   bool _isConnecting = false;
   bool _isDetectingAuth = false;
@@ -37,6 +40,7 @@ class _LoginScreenState extends State<LoginScreen> {
   Future<void> _loadSavedSettings() async {
     final savedPort = await SettingsService.getWebSocketPort();
     final savedAuthServerUrl = await SettingsService.getAuthServerUrl();
+    final savedOwnerName = await SettingsService.getOwnerName();
 
     if (savedPort != null) {
       setState(() {
@@ -49,15 +53,23 @@ class _LoginScreenState extends State<LoginScreen> {
         _authServerUrlController.text = savedAuthServerUrl;
       });
     }
+
+    if (savedOwnerName != null) {
+      setState(() {
+        _ownerNameController.text = savedOwnerName;
+      });
+    }
   }
 
   @override
   void dispose() {
     _serverUrlController.dispose();
+    _ownerNameController.dispose();
     _portController.dispose();
     _authServerUrlController.dispose();
     _usernameController.dispose();
     _passwordController.dispose();
+    _usernameFocusNode.dispose();
     super.dispose();
   }
 
@@ -167,6 +179,14 @@ class _LoginScreenState extends State<LoginScreen> {
       // If no auth required, connect immediately
       if (strategy.name == 'none') {
         await _connect();
+      } else {
+        // Auth required - focus username field after a brief delay
+        // to allow the new fields to build
+        Future.delayed(const Duration(milliseconds: 100), () {
+          if (mounted) {
+            _usernameFocusNode.requestFocus();
+          }
+        });
       }
     } catch (e) {
       setState(() {
@@ -184,6 +204,8 @@ class _LoginScreenState extends State<LoginScreen> {
         return 'HTTP Basic Auth';
       case 'authelia':
         return 'Authelia';
+      case 'music_assistant':
+        return 'Music Assistant Login';
       default:
         return 'Unknown';
     }
@@ -197,6 +219,8 @@ class _LoginScreenState extends State<LoginScreen> {
         return Icons.vpn_key_rounded;
       case 'authelia':
         return Icons.shield_rounded;
+      case 'music_assistant':
+        return Icons.music_note_rounded;
       default:
         return Icons.security_rounded;
     }
@@ -210,6 +234,16 @@ class _LoginScreenState extends State<LoginScreen> {
       return;
     }
 
+    // Validate owner name - only required if NOT using MA auth
+    // (MA auth will get display_name from user profile after login)
+    final isMaAuth = _detectedAuthStrategy?.name == 'music_assistant';
+    if (!isMaAuth && _ownerNameController.text.trim().isEmpty) {
+      setState(() {
+        _error = 'Please enter your name';
+      });
+      return;
+    }
+
     setState(() {
       _isConnecting = true;
       _error = null;
@@ -219,31 +253,33 @@ class _LoginScreenState extends State<LoginScreen> {
       final serverUrl = _buildServerUrl();
       final port = _portController.text.trim();
 
-      // Validate port
-      if (port.isEmpty) {
-        setState(() {
-          _error = 'Please enter a port number';
-          _isConnecting = false;
-        });
-        return;
+      // Validate port (if provided)
+      int? portNum;
+      if (port.isNotEmpty) {
+        portNum = int.tryParse(port);
+        if (portNum == null || portNum < 1 || portNum > 65535) {
+          setState(() {
+            _error = 'Please enter a valid port number (1-65535)';
+            _isConnecting = false;
+          });
+          return;
+        }
       }
 
-      final portNum = int.tryParse(port);
-      if (portNum == null || portNum < 1 || portNum > 65535) {
-        setState(() {
-          _error = 'Please enter a valid port number (1-65535)';
-          _isConnecting = false;
-        });
-        return;
+      // Save owner name (if provided) and port to settings
+      // For MA auth, the owner name will be set from user profile after login
+      if (!isMaAuth && _ownerNameController.text.trim().isNotEmpty) {
+        await SettingsService.setOwnerName(_ownerNameController.text.trim());
       }
-
-      // Save port to settings
       await SettingsService.setWebSocketPort(portNum);
 
       final provider = context.read<MusicAssistantProvider>();
 
       // Handle authentication based on detected strategy
-      if (_detectedAuthStrategy != null && _detectedAuthStrategy!.name != 'none') {
+      // Note: isMaAuth is already defined earlier in this method
+
+      if (_detectedAuthStrategy != null && _detectedAuthStrategy!.name != 'none' && !isMaAuth) {
+        // Pre-connect auth (Authelia, Basic Auth)
         final username = _usernameController.text.trim();
         final password = _passwordController.text.trim();
 
@@ -302,8 +338,69 @@ class _LoginScreenState extends State<LoginScreen> {
       // Connect to server
       await provider.connectToServer(serverUrl);
 
-      // Wait a moment for connection to establish
-      await Future.delayed(const Duration(milliseconds: 500));
+      // Post-connect auth (Music Assistant native auth)
+      if (isMaAuth) {
+        final username = _usernameController.text.trim();
+        final password = _passwordController.text.trim();
+
+        if (username.isEmpty || password.isEmpty) {
+          setState(() {
+            _error = 'Please enter username and password';
+            _isConnecting = false;
+          });
+          return;
+        }
+
+        _addDebugLog('Authenticating with Music Assistant...');
+
+        // Check if we have a stored MA token first
+        final storedToken = await SettingsService.getMaAuthToken();
+        bool authSuccess = false;
+
+        if (storedToken != null && provider.api != null) {
+          _addDebugLog('Trying stored MA token...');
+          authSuccess = await provider.api!.authenticateWithToken(storedToken);
+        }
+
+        if (!authSuccess) {
+          _addDebugLog('Logging in with credentials...');
+          // Login with credentials over WebSocket
+          final accessToken = await provider.api?.loginWithCredentials(username, password);
+
+          if (accessToken == null) {
+            setState(() {
+              _error = 'Music Assistant login failed. Please check your credentials.';
+              _isConnecting = false;
+            });
+            return;
+          }
+
+          // Try to create a long-lived token for future use
+          final longLivedToken = await provider.api?.createLongLivedToken();
+          final tokenToStore = longLivedToken ?? accessToken;
+
+          // Save the token for future auto-login
+          await SettingsService.setMaAuthToken(tokenToStore);
+          _addDebugLog('MA token saved for future logins');
+        }
+
+        // Save credentials for future auto-login
+        await SettingsService.setUsername(username);
+        await SettingsService.setPassword(password);
+
+        // Save auth strategy info
+        await SettingsService.setAuthCredentials({
+          'strategy': 'music_assistant',
+          'data': {'username': username},
+        });
+      }
+
+      // Wait for connection and authentication to complete
+      // MA auth happens asynchronously after connect, so we need to wait longer
+      for (int i = 0; i < 10; i++) {
+        await Future.delayed(const Duration(milliseconds: 500));
+        if (provider.isConnected) break;
+      }
 
       if (provider.isConnected) {
         // Navigate to home screen
@@ -340,20 +437,24 @@ class _LoginScreenState extends State<LoginScreen> {
       backgroundColor: colorScheme.background,
       body: SafeArea(
         child: SingleChildScrollView(
-          padding: const EdgeInsets.all(24.0),
+          padding: const EdgeInsets.fromLTRB(24.0, 24.0, 24.0, 78.0),
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.stretch,
             children: [
               const SizedBox(height: 60),
 
               // Logo
-              Center(
-                child: Image.asset(
-                  'assets/images/attm_long_logo.png',
-                  height: 160,
-                  fit: BoxFit.contain,
-                  color: colorScheme.onBackground,
-                ),
+              Builder(
+                builder: (context) {
+                  final width = MediaQuery.of(context).size.width * 0.5;
+                  return Center(
+                    child: Image.asset(
+                      'assets/images/ensemble_icon_transparent.png',
+                      width: width,
+                      fit: BoxFit.contain,
+                    ),
+                  );
+                },
               ),
 
               const SizedBox(height: 48),
@@ -392,21 +493,69 @@ class _LoginScreenState extends State<LoginScreen> {
 
               const SizedBox(height: 24),
 
+              // Your Name - only show AFTER auth detection AND only for non-MA auth
+              // (MA auth gets display_name from user profile automatically)
+              // Show for: 'none' (no auth), 'authelia', 'basic_auth', etc.
+              // Hide for: 'music_assistant' (gets name from profile)
+              if (_detectedAuthStrategy != null &&
+                  _detectedAuthStrategy!.name != 'music_assistant') ...[
+                Text(
+                  'Your Name',
+                  style: textTheme.titleMedium?.copyWith(
+                    color: colorScheme.onBackground,
+                    fontWeight: FontWeight.w500,
+                  ),
+                ),
+                const SizedBox(height: 12),
+
+                TextField(
+                  controller: _ownerNameController,
+                  style: TextStyle(color: colorScheme.onSurface),
+                  decoration: InputDecoration(
+                    hintText: 'Your first name',
+                    hintStyle: TextStyle(color: colorScheme.onSurface.withOpacity(0.38)),
+                    filled: true,
+                    fillColor: colorScheme.surfaceVariant.withOpacity(0.3),
+                    border: OutlineInputBorder(
+                      borderRadius: BorderRadius.circular(12),
+                      borderSide: BorderSide.none,
+                    ),
+                    prefixIcon: Icon(
+                      Icons.person_rounded,
+                      color: colorScheme.onSurface.withOpacity(0.54),
+                    ),
+                  ),
+                  enabled: !_isConnecting && !_isDetectingAuth,
+                  keyboardType: TextInputType.name,
+                  textInputAction: TextInputAction.next,
+                ),
+
+                const SizedBox(height: 24),
+              ],
+
               // Port
               Text(
-                'Port',
+                'Port (Optional)',
                 style: textTheme.titleMedium?.copyWith(
                   color: colorScheme.onBackground,
                   fontWeight: FontWeight.w500,
                 ),
               ),
+              const SizedBox(height: 8),
+              Text(
+                'Leave blank for reverse proxy or standard ports. Enter 8095 for direct connection.',
+                style: TextStyle(
+                  color: colorScheme.onBackground.withOpacity(0.6),
+                  fontSize: 12,
+                ),
+              ),
               const SizedBox(height: 12),
 
               TextField(
                 controller: _portController,
                 style: TextStyle(color: colorScheme.onSurface),
                 decoration: InputDecoration(
-                  hintText: '8095',
+                  hintText: 'e.g., 8095 or leave blank',
                   hintStyle: TextStyle(color: colorScheme.onSurface.withOpacity(0.38)),
                   filled: true,
                   fillColor: colorScheme.surfaceVariant.withOpacity(0.3),
@@ -437,11 +586,6 @@ class _LoginScreenState extends State<LoginScreen> {
                         ? colorScheme.primaryContainer.withOpacity(0.3)
                         : colorScheme.tertiaryContainer.withOpacity(0.3),
                     borderRadius: BorderRadius.circular(12),
-                    border: Border.all(
-                      color: needsAuth
-                          ? colorScheme.primary.withOpacity(0.3)
-                          : colorScheme.tertiary.withOpacity(0.3),
-                    ),
                   ),
                   child: Row(
                     children: [
@@ -539,6 +683,7 @@ class _LoginScreenState extends State<LoginScreen> {
 
                 TextField(
                   controller: _usernameController,
+                  focusNode: _usernameFocusNode,
                   style: TextStyle(color: colorScheme.onSurface),
                   decoration: InputDecoration(
                     hintText: 'Username',
@@ -622,134 +767,16 @@ class _LoginScreenState extends State<LoginScreen> {
                 ),
 
               // Debug toggle button
-              TextButton.icon(
-                onPressed: () {
-                  setState(() {
-                    _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),
-                ),
+              DebugToggleButton(
+                isVisible: _showDebug,
+                onToggle: () => setState(() => _showDebug = !_showDebug),
               ),
 
               // Debug panel
               if (_showDebug) ...[
                 const SizedBox(height: 16),
-                Container(
-                  padding: const EdgeInsets.all(12),
-                  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();
-                              // Copy to clipboard
-                              if (logs.isNotEmpty) {
-                                // Simple copy - in real app would use Clipboard API
-                                ScaffoldMessenger.of(context).showSnackBar(
-                                  const SnackBar(
-                                    content: Text('Logs copied! (Feature coming soon)'),
-                                    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(),
-                                    );
-                            },
-                          ),
-                        ),
-                      ),
-                    ],
-                  ),
+                DebugConsole(
+                  onClear: () => setState(() => _debugLogs.clear()),
                 ),
                 const SizedBox(height: 16),
               ],

lib/screens/new_home_screen.dart

@@ -1,9 +1,15 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/scheduler.dart';
 import 'package:provider/provider.dart';
 import '../providers/music_assistant_provider.dart';
+import '../services/settings_service.dart';
+import '../services/debug_logger.dart';
+import '../widgets/global_player_overlay.dart';
 import '../widgets/player_selector.dart';
 import '../widgets/album_row.dart';
 import '../widgets/artist_row.dart';
+import '../widgets/track_row.dart';
+import '../widgets/common/disconnected_state.dart';
 import 'settings_screen.dart';
 import 'search_screen.dart';
 
@@ -14,15 +20,73 @@ class NewHomeScreen extends StatefulWidget {
   State<NewHomeScreen> createState() => _NewHomeScreenState();
 }
 
-class _NewHomeScreenState extends State<NewHomeScreen> with AutomaticKeepAliveClientMixin {
+class _NewHomeScreenState extends State<NewHomeScreen> with AutomaticKeepAliveClientMixin, WidgetsBindingObserver {
+  static final _logger = DebugLogger();
   Key _refreshKey = UniqueKey();
+  // Main rows (default on)
+  bool _showRecentAlbums = true;
+  bool _showDiscoverArtists = true;
+  bool _showDiscoverAlbums = true;
+  // Favorites rows (default off)
+  bool _showFavoriteAlbums = false;
+  bool _showFavoriteArtists = false;
+  bool _showFavoriteTracks = false;
+  // Random order for favorites (generated once per session)
+  late List<int> _favoritesOrder;
 
   @override
   bool get wantKeepAlive => true;
 
+  @override
+  void initState() {
+    super.initState();
+    WidgetsBinding.instance.addObserver(this);
+    // Generate random order for favorites rows (0, 1, 2 shuffled)
+    _favoritesOrder = [0, 1, 2]..shuffle();
+    _loadSettings();
+  }
+
+  @override
+  void dispose() {
+    WidgetsBinding.instance.removeObserver(this);
+    super.dispose();
+  }
+
+  @override
+  void didChangeAppLifecycleState(AppLifecycleState state) {
+    // Reload settings when app resumes (coming back from settings)
+    if (state == AppLifecycleState.resumed) {
+      _loadSettings();
+    }
+  }
+
+  Future<void> _loadSettings() async {
+    final showRecent = await SettingsService.getShowRecentAlbums();
+    final showDiscArtists = await SettingsService.getShowDiscoverArtists();
+    final showDiscAlbums = await SettingsService.getShowDiscoverAlbums();
+    final showFavAlbums = await SettingsService.getShowFavoriteAlbums();
+    final showFavArtists = await SettingsService.getShowFavoriteArtists();
+    final showFavTracks = await SettingsService.getShowFavoriteTracks();
+    if (mounted) {
+      setState(() {
+        _showRecentAlbums = showRecent;
+        _showDiscoverArtists = showDiscArtists;
+        _showDiscoverAlbums = showDiscAlbums;
+        _showFavoriteAlbums = showFavAlbums;
+        _showFavoriteArtists = showFavArtists;
+        _showFavoriteTracks = showFavTracks;
+      });
+    }
+  }
+
   Future<void> _onRefresh() async {
-    // Simulate a short delay or verify connection
-    await Future.delayed(const Duration(milliseconds: 500));
+    // Invalidate cache to force fresh data on pull-to-refresh
+    final provider = context.read<MusicAssistantProvider>();
+    provider.invalidateHomeCache();
+
+    // Reload settings in case they changed
+    await _loadSettings();
+
     if (mounted) {
       setState(() {
         _refreshKey = UniqueKey();
@@ -33,6 +97,7 @@ class _NewHomeScreenState extends State<NewHomeScreen> with AutomaticKeepAliveCl
   @override
   Widget build(BuildContext context) {
     super.build(context); // Required for AutomaticKeepAliveClientMixin
+    // Settings are loaded in initState and didChangeAppLifecycleState - no need to reload on every build
     final colorScheme = Theme.of(context).colorScheme;
 
     return Scaffold(
@@ -41,13 +106,22 @@ class _NewHomeScreenState extends State<NewHomeScreen> with AutomaticKeepAliveCl
         backgroundColor: Colors.transparent,
         elevation: 0,
         title: Padding(
-          padding: const EdgeInsets.only(left: 8.0, top: 8.0, bottom: 8.0),
-          child: Image.asset(
-            'assets/images/attm_short_logo.png',
-            height: 32,
-            fit: BoxFit.contain,
-            alignment: Alignment.centerLeft,
-            color: colorScheme.onBackground,
+          padding: const EdgeInsets.only(left: 16.0),
+          child: ColorFiltered(
+            colorFilter: Theme.of(context).brightness == Brightness.light
+                ? const ColorFilter.matrix(<double>[
+                    -1,  0,  0, 0, 255,
+                     0, -1,  0, 0, 255,
+                     0,  0, -1, 0, 255,
+                     0,  0,  0, 1,   0,
+                  ])
+                : const ColorFilter.mode(Colors.transparent, BlendMode.multiply),
+            child: Image.asset(
+              'assets/images/ensemble_logo.png',
+              height: 40,
+              fit: BoxFit.contain,
+              alignment: Alignment.centerLeft,
+            ),
           ),
         ),
         titleSpacing: 0,
@@ -57,10 +131,17 @@ class _NewHomeScreenState extends State<NewHomeScreen> with AutomaticKeepAliveCl
         ],
       ),
       body: SafeArea(
-        child: Consumer<MusicAssistantProvider>(
-          builder: (context, maProvider, child) {
-            return !maProvider.isConnected
-                ? _buildDisconnectedView(context, maProvider)
+        child: Selector<MusicAssistantProvider, bool>(
+          selector: (_, p) => p.isConnected,
+          builder: (context, isConnected, child) {
+            final maProvider = context.read<MusicAssistantProvider>();
+            return !isConnected
+                ? DisconnectedState.full(
+                    onSettings: () => Navigator.push(
+                      context,
+                      MaterialPageRoute(builder: (context) => const SettingsScreen()),
+                    ),
+                  )
                 : RefreshIndicator(
                     onRefresh: _onRefresh,
                     color: colorScheme.primary,
@@ -73,111 +154,141 @@ 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) {
-    // Pass the unique key to force rebuild of children when refreshed
-    return SingleChildScrollView(
-      physics: const AlwaysScrollableScrollPhysics(parent: BouncingScrollPhysics()),
-      child: Column(
-        key: _refreshKey,
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          const SizedBox(height: 16),
+    // Use LayoutBuilder to get available screen height
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        // Simple calculation: available height divided by 3 rows
+        // Each row includes its title, artwork, and info
+        final availableHeight = constraints.maxHeight - BottomSpacing.withMiniPlayer;
+        final rowHeight = availableHeight / 3;
 
-          // Recently played albums (extracted from recently played tracks)
-          AlbumRow(
-            title: 'Recently Played',
-            loadAlbums: () async {
-              if (provider.api == null) return [];
-              return await provider.api!.getRecentAlbums(limit: 10);
-            },
-          ),
-          const SizedBox(height: 16),
+        // Build favorites rows in random order
+        final favoritesWidgets = _buildFavoritesRows(provider, rowHeight);
 
-          // Discover Artists
-          ArtistRow(
-            title: 'Discover Artists',
-            loadArtists: () async {
-              if (provider.api == null) return [];
-              return await provider.api!.getRandomArtists(limit: 10);
-            },
-          ),
-          const SizedBox(height: 16),
+        // Use Android 12+ stretch overscroll effect
+        return NotificationListener<ScrollNotification>(
+          onNotification: (notification) {
+            if (notification is ScrollStartNotification) {
+              _logger.resetFrameStats();
+              _logger.perf('SCROLL START', context: 'HomeScreen');
+            } else if (notification is ScrollUpdateNotification) {
+              _logger.startFrame();
+              SchedulerBinding.instance.addPostFrameCallback((_) {
+                _logger.endFrame();
+              });
+            } else if (notification is ScrollEndNotification) {
+              _logger.perf('SCROLL END', context: 'HomeScreen');
+            }
+            return false;
+          },
+          child: ScrollConfiguration(
+            behavior: const _StretchScrollBehavior(),
+            child: SingleChildScrollView(
+              physics: const AlwaysScrollableScrollPhysics(),
+              padding: EdgeInsets.only(bottom: BottomSpacing.withMiniPlayer),
+              child: Column(
+                key: _refreshKey,
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  // Recently played albums (optional)
+                  if (_showRecentAlbums)
+                    AlbumRow(
+                      key: const ValueKey('recent-albums'),
+                      title: 'Recently Played',
+                      loadAlbums: () => provider.getRecentAlbumsWithCache(),
+                      rowHeight: rowHeight,
+                    ),
 
-          // Discover Albums
-          AlbumRow(
-            title: 'Discover Albums',
-            loadAlbums: () async {
-              if (provider.api == null) return [];
-              return await provider.api!.getRandomAlbums(limit: 10);
-            },
+                  // Discover Artists (optional)
+                  if (_showDiscoverArtists)
+                    ArtistRow(
+                      key: const ValueKey('discover-artists'),
+                      title: 'Discover Artists',
+                      loadArtists: () => provider.getDiscoverArtistsWithCache(),
+                      rowHeight: rowHeight,
+                    ),
+
+                  // Discover Albums (optional)
+                  if (_showDiscoverAlbums)
+                    AlbumRow(
+                      key: const ValueKey('discover-albums'),
+                      title: 'Discover Albums',
+                      loadAlbums: () => provider.getDiscoverAlbumsWithCache(),
+                      rowHeight: rowHeight,
+                    ),
+
+                  // Favorites rows in random order
+                  ...favoritesWidgets,
+                ],
+              ),
+            ),
           ),
-          const SizedBox(height: 80), // Space for mini player
-        ],
-      ),
+        );
+      },
+    );
+  }
+
+  /// Build favorites rows in random order (order set once per session)
+  List<Widget> _buildFavoritesRows(MusicAssistantProvider provider, double rowHeight) {
+    // Create list of enabled favorites with their order index
+    final enabledFavorites = <MapEntry<int, Widget>>[];
+
+    if (_showFavoriteAlbums) {
+      enabledFavorites.add(MapEntry(
+        _favoritesOrder[0],
+        AlbumRow(
+          key: const ValueKey('favorite-albums'),
+          title: 'Favorite Albums',
+          loadAlbums: () => provider.getFavoriteAlbums(),
+          rowHeight: rowHeight,
+        ),
+      ));
+    }
+
+    if (_showFavoriteArtists) {
+      enabledFavorites.add(MapEntry(
+        _favoritesOrder[1],
+        ArtistRow(
+          key: const ValueKey('favorite-artists'),
+          title: 'Favorite Artists',
+          loadArtists: () => provider.getFavoriteArtists(),
+          rowHeight: rowHeight,
+        ),
+      ));
+    }
+
+    if (_showFavoriteTracks) {
+      enabledFavorites.add(MapEntry(
+        _favoritesOrder[2],
+        TrackRow(
+          key: const ValueKey('favorite-tracks'),
+          title: 'Favorite Tracks',
+          loadTracks: () => provider.getFavoriteTracks(),
+          rowHeight: rowHeight,
+        ),
+      ));
+    }
+
+    // Sort by the random order index
+    enabledFavorites.sort((a, b) => a.key.compareTo(b.key));
+
+    return enabledFavorites.map((e) => e.value).toList();
+  }
+}
+
+/// Custom scroll behavior that uses Android 12+ stretch overscroll effect
+class _StretchScrollBehavior extends ScrollBehavior {
+  const _StretchScrollBehavior();
+
+  @override
+  Widget buildOverscrollIndicator(
+      BuildContext context, Widget child, ScrollableDetails details) {
+    return StretchingOverscrollIndicator(
+      axisDirection: details.direction,
+      child: child,
     );
   }
 }

lib/screens/new_library_screen.dart

@@ -1,231 +1,637 @@
 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 '../widgets/global_player_overlay.dart';
 import '../widgets/player_selector.dart';
-import 'library_artists_screen.dart';
-import 'library_albums_screen.dart';
-import 'library_tracks_screen.dart';
-import 'library_playlists_screen.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';
-import 'search_screen.dart';
 
-class NewLibraryScreen extends StatelessWidget {
+class NewLibraryScreen extends StatefulWidget {
   const NewLibraryScreen({super.key});
 
+  @override
+  State<NewLibraryScreen> createState() => _NewLibraryScreenState();
+}
+
+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';
+
+  @override
+  void restoreState(RestorationBucket? oldBucket, bool initialRestore) {
+    registerForRestoration(_selectedTabIndex, 'selected_tab_index');
+    // Apply restored tab index after TabController is created
+    if (_tabController.index != _selectedTabIndex.value &&
+        _selectedTabIndex.value < _tabController.length) {
+      _tabController.index = _selectedTabIndex.value;
+    }
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    _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;
+    }
+  }
+
+  @override
+  void dispose() {
+    _tabController.removeListener(_onTabChanged);
+    _tabController.dispose();
+    _selectedTabIndex.dispose();
+    super.dispose();
+  }
+
+  Future<void> _loadPlaylists({bool? favoriteOnly}) async {
+    final maProvider = context.read<MusicAssistantProvider>();
+    if (maProvider.api != null) {
+      final playlists = await maProvider.api!.getPlaylists(
+        limit: 100,
+        favoriteOnly: favoriteOnly,
+      );
+      if (mounted) {
+        setState(() {
+          _playlists = playlists;
+          _isLoadingPlaylists = false;
+        });
+      }
+    } else {
+      if (mounted) {
+        setState(() {
+          _isLoadingPlaylists = false;
+        });
+      }
+    }
+  }
+
+  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) {
-    final provider = context.watch<MusicAssistantProvider>();
-    final colorScheme = Theme.of(context).colorScheme;
-    final textTheme = Theme.of(context).textTheme;
+    // Use Selector for targeted rebuilds - only rebuild when connection state changes
+    return Selector<MusicAssistantProvider, bool>(
+      selector: (_, provider) => provider.isConnected,
+      builder: (context, isConnected, _) {
+        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: [
-          const PlayerSelector(),
-        ],
-      ),
-      body: !provider.isConnected
-          ? _buildDisconnectedView(context, provider)
-          : _buildLibraryMenu(context, provider),
-    );
-  }
-
-  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: 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,
+        if (!isConnected) {
+          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,
+                ),
               ),
-              textAlign: TextAlign.center,
+              centerTitle: true,
+              actions: const [PlayerSelector()],
             ),
-            const SizedBox(height: 24),
-            ElevatedButton.icon(
-              onPressed: () {
-                Navigator.push(
-                  context,
-                  MaterialPageRoute(
-                    builder: (context) => const SettingsScreen(),
+            body: DisconnectedState.withSettingsAction(
+              onSettings: () => Navigator.push(
+                context,
+                MaterialPageRoute(builder: (context) => const SettingsScreen()),
+              ),
+            ),
+          );
+        }
+
+        return Scaffold(
+          backgroundColor: colorScheme.background,
+          appBar: AppBar(
+            backgroundColor: Colors.transparent,
+            elevation: 0,
+            titleSpacing: 16,
+            title: Row(
+              children: [
+                // Favorites toggle with label
+                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,
+                        ),
+                      ),
+                    ],
                   ),
-                );
-              },
-              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),
-                ),
-              ),
+              ],
             ),
-          ],
-        ),
-      ),
+            centerTitle: false,
+            actions: const [
+              PlayerSelector(),
+            ],
+            bottom: TabBar(
+              controller: _tabController,
+              labelColor: colorScheme.primary,
+              unselectedLabelColor: colorScheme.onSurface.withOpacity(0.6),
+              indicatorColor: colorScheme.primary,
+              indicatorWeight: 3,
+              labelStyle: const TextStyle(fontWeight: FontWeight.w600, fontSize: 14),
+              unselectedLabelStyle: const TextStyle(fontWeight: FontWeight.w400, fontSize: 14),
+              tabs: [
+                const Tab(text: 'Artists'),
+                const Tab(text: 'Albums'),
+                if (_showFavoritesOnly) const Tab(text: 'Tracks'),
+                const Tab(text: 'Playlists'),
+              ],
+            ),
+          ),
+          body: TabBarView(
+            controller: _tabController,
+            children: [
+              _buildArtistsTab(context),
+              _buildAlbumsTab(context),
+              if (_showFavoritesOnly) _buildTracksTab(context),
+              _buildPlaylistsTab(context),
+            ],
+          ),
+        );
+      },
     );
   }
 
-  Widget _buildLibraryMenu(
-      BuildContext context, MusicAssistantProvider provider) {
-    return ListView(
-      padding: const EdgeInsets.all(8.0),
-      children: [
-        _buildMenuTile(
-          context,
-          icon: Icons.person_outline_rounded,
-          title: 'Artists',
-          subtitle: '${provider.artists.length} artists',
-          onTap: () {
-            Navigator.push(
-              context,
-              MaterialPageRoute(
-                builder: (context) => const LibraryArtistsScreen(),
-              ),
+  // ============ 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 (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) {
+          if (_showFavoritesOnly) {
+            return EmptyState.custom(
+              icon: Icons.favorite_border,
+              title: 'No favorite artists',
+              subtitle: 'Tap the heart on an artist to add them to favorites',
             );
-          },
-        ),
-        _buildMenuTile(
-          context,
-          icon: Icons.album_outlined,
-          title: 'Albums',
-          subtitle: '${provider.albums.length} albums',
-          onTap: () {
-            Navigator.push(
-              context,
-              MaterialPageRoute(
-                builder: (context) => const LibraryAlbumsScreen(),
-              ),
-            );
-          },
-        ),
-        _buildMenuTile(
-          context,
-          icon: Icons.music_note_outlined,
-          title: 'Tracks',
-          subtitle: '${provider.tracks.length} tracks',
-          onTap: () {
-            Navigator.push(
-              context,
-              MaterialPageRoute(
-                builder: (context) => const LibraryTracksScreen(),
-              ),
-            );
-          },
-        ),
-        _buildMenuTile(
-          context,
-          icon: Icons.playlist_play_rounded,
-          title: 'Playlists',
-          subtitle: 'Your playlists',
-          onTap: () {
-            Navigator.push(
-              context,
-              MaterialPageRoute(
-                builder: (context) => const LibraryPlaylistsScreen(),
-              ),
-            );
-          },
-        ),
-        _buildMenuTile(
-          context,
-          icon: Icons.category_outlined,
-          title: 'Genres',
-          subtitle: 'Coming soon',
-          onTap: null,
-        ),
-        _buildMenuTile(
-          context,
-          icon: Icons.calendar_today_outlined,
-          title: 'Years',
-          subtitle: 'Coming soon',
-          onTap: null,
-        ),
-      ],
+          }
+          return EmptyState.artists(
+            onRefresh: () => context.read<MusicAssistantProvider>().loadLibrary(),
+          );
+        }
+
+        return RefreshIndicator(
+          color: colorScheme.primary,
+          backgroundColor: colorScheme.surface,
+          onRefresh: () async => context.read<MusicAssistantProvider>().loadLibrary(),
+          child: ListView.builder(
+            key: PageStorageKey<String>('library_artists_list_${_showFavoritesOnly ? 'fav' : 'all'}'),
+            cacheExtent: 500, // Prebuild items off-screen for smoother scrolling
+            addAutomaticKeepAlives: false, // Tiles have their own keep-alive
+            addRepaintBoundaries: false, // Tiles have RepaintBoundary
+            itemCount: artists.length,
+            padding: EdgeInsets.only(left: 8, right: 8, top: 8, bottom: BottomSpacing.navBarOnly),
+            itemBuilder: (context, index) {
+              final artist = artists[index];
+              return _buildArtistTile(
+                context,
+                artist,
+                key: ValueKey(artist.uri ?? artist.itemId),
+              );
+            },
+          ),
+        );
+      },
     );
   }
 
-  Widget _buildMenuTile(
-    BuildContext context, {
-    required IconData icon,
-    required String title,
-    required String subtitle,
-    required VoidCallback? onTap,
+  Widget _buildArtistTile(
+    BuildContext context,
+    Artist artist, {
+    Key? key,
   }) {
     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 Card(
-      elevation: 0, // Remove shadow
-      color: colorScheme.surfaceVariant.withOpacity(0.3),
-      margin: const EdgeInsets.symmetric(vertical: 4, horizontal: 8),
-      shape: RoundedRectangleBorder(
-        borderRadius: BorderRadius.circular(12),
-      ),
+    return RepaintBoundary(
       child: ListTile(
+        key: key,
+        leading: ArtistAvatar(
+          artist: artist,
+          radius: 24,
+          imageSize: 128,
+          heroTag: HeroTags.artistImage + (artist.uri ?? artist.itemId) + suffix,
+        ),
+      title: Hero(
+        tag: HeroTags.artistName + (artist.uri ?? artist.itemId) + suffix,
+        child: Material(
+          color: Colors.transparent,
+          child: Text(
+            artist.name,
+            style: textTheme.titleMedium?.copyWith(
+              color: colorScheme.onSurface,
+              fontWeight: FontWeight.w500,
+            ),
+            maxLines: 1,
+            overflow: TextOverflow.ellipsis,
+          ),
+        ),
+      ),
+        onTap: () {
+          Navigator.push(
+            context,
+            FadeSlidePageRoute(
+              child: ArtistDetailsScreen(
+                artist: artist,
+                heroTagSuffix: 'library',
+                initialImageUrl: imageUrl,
+              ),
+            ),
+          );
+        },
+      ),
+    );
+  }
+
+  // ============ ALBUMS TAB ============
+  Widget _buildAlbumsTab(BuildContext context) {
+    // Use Selector for targeted rebuilds - only rebuild when albums or loading state changes
+    return Selector<MusicAssistantProvider, (List<Album>, bool)>(
+      selector: (_, provider) => (provider.albums, provider.isLoading),
+      builder: (context, 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) {
+          if (_showFavoritesOnly) {
+            return EmptyState.custom(
+              icon: Icons.favorite_border,
+              title: 'No favorite albums',
+              subtitle: 'Tap the heart on an album to add it to favorites',
+            );
+          }
+          return EmptyState.albums(
+            onRefresh: () => context.read<MusicAssistantProvider>().loadLibrary(),
+          );
+        }
+
+        return RefreshIndicator(
+          color: colorScheme.primary,
+          backgroundColor: colorScheme.surface,
+          onRefresh: () async => context.read<MusicAssistantProvider>().loadLibrary(),
+          child: GridView.builder(
+            key: PageStorageKey<String>('library_albums_grid_${_showFavoritesOnly ? 'fav' : 'all'}'),
+            cacheExtent: 500, // Prebuild items off-screen for smoother scrolling
+            addAutomaticKeepAlives: false, // Cards have their own keep-alive
+            addRepaintBoundaries: false, // Cards have RepaintBoundary
+            padding: EdgeInsets.only(left: 16, right: 16, top: 16, bottom: BottomSpacing.navBarOnly),
+            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+              crossAxisCount: 2,
+              childAspectRatio: 0.75,
+              crossAxisSpacing: 16,
+              mainAxisSpacing: 16,
+            ),
+            itemCount: albums.length,
+            itemBuilder: (context, index) {
+              final album = albums[index];
+              return AlbumCard(
+                key: ValueKey(album.uri ?? album.itemId),
+                album: album,
+                heroTagSuffix: 'library_grid',
+              );
+            },
+          ),
+        );
+      },
+    );
+  }
+
+  // ============ PLAYLISTS TAB ============
+  Widget _buildPlaylistsTab(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    if (_isLoadingPlaylists) {
+      return Center(child: CircularProgressIndicator(color: colorScheme.primary));
+    }
+
+    if (_playlists.isEmpty) {
+      if (_showFavoritesOnly) {
+        return EmptyState.custom(
+          icon: Icons.favorite_border,
+          title: 'No favorite playlists',
+          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(favoriteOnly: _showFavoritesOnly ? true : null),
+      child: ListView.builder(
+        key: PageStorageKey<String>('library_playlists_list_${_showFavoritesOnly ? 'fav' : 'all'}'),
+        cacheExtent: 500, // Prebuild items off-screen for smoother scrolling
+        addAutomaticKeepAlives: false, // Tiles don't need individual keep-alive
+        addRepaintBoundaries: false, // We add RepaintBoundary manually to tiles
+        itemCount: _playlists.length,
+        padding: EdgeInsets.only(left: 8, right: 8, top: 8, bottom: BottomSpacing.navBarOnly),
+        itemBuilder: (context, index) {
+          final playlist = _playlists[index];
+          return _buildPlaylistTile(context, playlist);
+        },
+      ),
+    );
+  }
+
+  Widget _buildPlaylistTile(BuildContext context, Playlist playlist) {
+    final provider = context.read<MusicAssistantProvider>();
+    final imageUrl = provider.api?.getImageUrl(playlist, size: 128);
+    final colorScheme = Theme.of(context).colorScheme;
+    final textTheme = Theme.of(context).textTheme;
+
+    return RepaintBoundary(
+      child: ListTile(
+        key: ValueKey(playlist.itemId),
         leading: Container(
-          width: 48,
-          height: 48,
-          decoration: BoxDecoration(
-            color: colorScheme.surfaceVariant,
-            borderRadius: BorderRadius.circular(8),
-          ),
-          child: Icon(
-            icon,
-            color: colorScheme.onSurfaceVariant,
-            size: 24,
-          ),
+        width: 48,
+        height: 48,
+        decoration: BoxDecoration(
+          color: colorScheme.surfaceVariant,
+          borderRadius: BorderRadius.circular(8),
+          image: imageUrl != null
+              ? DecorationImage(image: CachedNetworkImageProvider(imageUrl), fit: BoxFit.cover)
+              : null,
         ),
-        title: Text(
-          title,
-          style: textTheme.titleMedium?.copyWith(
-            color: colorScheme.onSurface,
-            fontWeight: FontWeight.w500,
-          ),
-        ),
-        subtitle: Text(
-          subtitle,
-          style: textTheme.bodySmall?.copyWith(
-            color: colorScheme.onSurface.withOpacity(0.7),
-          ),
-        ),
-        trailing: onTap != null
-            ? Icon(
-                Icons.chevron_right_rounded,
-                color: colorScheme.onSurface.withOpacity(0.5),
-              )
+        child: imageUrl == null
+            ? Icon(Icons.playlist_play_rounded, color: colorScheme.onSurfaceVariant)
             : null,
-        onTap: onTap,
-        enabled: onTap != null,
+      ),
+      title: Text(
+        playlist.name,
+        style: textTheme.titleMedium?.copyWith(
+          color: colorScheme.onSurface,
+          fontWeight: FontWeight.w500,
+        ),
+        maxLines: 1,
+        overflow: TextOverflow.ellipsis,
+      ),
+      subtitle: Text(
+        playlist.trackCount != null
+            ? '${playlist.trackCount} tracks'
+            : playlist.owner ?? 'Playlist',
+        style: textTheme.bodySmall?.copyWith(color: colorScheme.onSurface.withOpacity(0.7)),
+        maxLines: 1,
+        overflow: TextOverflow.ellipsis,
+      ),
+        trailing: playlist.favorite == true
+            ? const Icon(Icons.favorite, color: Colors.red, size: 20)
+            : null,
+        onTap: () {
+          Navigator.push(
+            context,
+            MaterialPageRoute(
+              builder: (context) => PlaylistDetailsScreen(
+                playlist: playlist,
+                provider: playlist.provider,
+                itemId: playlist.itemId,
+              ),
+            ),
+          );
+        },
+      ),
+    );
+  }
+
+  // ============ TRACKS TAB (favorites only) ============
+  Widget _buildTracksTab(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    if (_isLoadingTracks) {
+      return Center(child: CircularProgressIndicator(color: colorScheme.primary));
+    }
+
+    if (_favoriteTracks.isEmpty) {
+      return EmptyState.custom(
+        icon: Icons.favorite_border,
+        title: 'No favorite tracks',
+        subtitle: 'Long-press a track and tap the heart to add it to favorites',
+      );
+    }
+
+    // Sort tracks by artist name, then track name
+    final sortedTracks = List<Track>.from(_favoriteTracks)
+      ..sort((a, b) {
+        final artistCompare = a.artistsString.compareTo(b.artistsString);
+        if (artistCompare != 0) return artistCompare;
+        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,
+        addAutomaticKeepAlives: false, // Tiles don't need individual keep-alive
+        addRepaintBoundaries: false, // We add RepaintBoundary manually to tiles
+        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 RepaintBoundary(
+      child: ListTile(
+        key: ValueKey(track.uri ?? track.itemId),
+        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/now_playing_screen.dart

@@ -1,589 +0,0 @@
-import 'dart:async';
-import 'package:flutter/material.dart';
-import 'package:provider/provider.dart';
-import '../providers/music_assistant_provider.dart';
-import '../models/player.dart';
-import '../widgets/volume_control.dart';
-import 'queue_screen.dart';
-import '../constants/hero_tags.dart';
-import '../widgets/animated_icon_button.dart';
-import '../theme/palette_helper.dart';
-import '../theme/theme_provider.dart';
-
-class NowPlayingScreen extends StatefulWidget {
-  const NowPlayingScreen({super.key});
-
-  @override
-  State<NowPlayingScreen> createState() => _NowPlayingScreenState();
-}
-
-class _NowPlayingScreenState extends State<NowPlayingScreen> {
-  PlayerQueue? _queue;
-  bool _isLoadingQueue = true;
-  Timer? _progressTimer;
-  double? _seekPosition; // Track seek position while dragging
-  ColorScheme? _lightColorScheme;
-  ColorScheme? _darkColorScheme;
-  String? _lastImageUrl; // Track last image URL to avoid re-extracting
-
-  @override
-  void initState() {
-    super.initState();
-    _loadQueue();
-    _startProgressTimer();
-  }
-
-  Future<void> _extractColors(String imageUrl) async {
-    if (_lastImageUrl == imageUrl) return; // Skip if same image
-    _lastImageUrl = imageUrl;
-
-    try {
-      final colorSchemes = await PaletteHelper.extractColorSchemes(
-        NetworkImage(imageUrl),
-      );
-
-      if (colorSchemes != null && mounted) {
-        setState(() {
-          _lightColorScheme = colorSchemes.$1;
-          _darkColorScheme = colorSchemes.$2;
-        });
-      }
-    } catch (e) {
-      print('⚠️ Failed to extract colors for now playing: $e');
-    }
-  }
-
-  @override
-  void dispose() {
-    _progressTimer?.cancel();
-    super.dispose();
-  }
-
-  void _startProgressTimer() {
-    // Update UI every second when playing to show progress
-    _progressTimer?.cancel();
-    _progressTimer = Timer.periodic(const Duration(seconds: 1), (_) {
-      if (mounted) {
-        setState(() {
-          // Just trigger rebuild to update elapsed time
-        });
-      }
-    });
-  }
-
-  Future<void> _loadQueue() async {
-    setState(() {
-      _isLoadingQueue = true;
-    });
-
-    final maProvider = context.read<MusicAssistantProvider>();
-    final player = maProvider.selectedPlayer;
-
-    if (player != null && maProvider.api != null) {
-      final queue = await maProvider.api!.getQueue(player.playerId);
-      if (mounted) {
-        setState(() {
-          _queue = queue;
-          _isLoadingQueue = false;
-        });
-      }
-    } else {
-      if (mounted) {
-        setState(() {
-          _isLoadingQueue = false;
-        });
-      }
-    }
-  }
-
-  Future<void> _toggleShuffle() async {
-    if (_queue == null) return;
-    final maProvider = context.read<MusicAssistantProvider>();
-    await maProvider.toggleShuffle(_queue!.playerId);
-    await _loadQueue();
-  }
-
-  Future<void> _cycleRepeat() async {
-    if (_queue == null) return;
-    final maProvider = context.read<MusicAssistantProvider>();
-    await maProvider.cycleRepeatMode(_queue!.playerId, _queue!.repeatMode);
-    await _loadQueue();
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    final themeProvider = context.watch<ThemeProvider>();
-
-    return Consumer<MusicAssistantProvider>(
-      builder: (context, maProvider, child) {
-        final selectedPlayer = maProvider.selectedPlayer;
-        final currentTrack = maProvider.currentTrack;
-
-        if (currentTrack == null || selectedPlayer == null) {
-      return Scaffold(
-        backgroundColor: const Color(0xFF1a1a1a),
-        appBar: AppBar(
-          backgroundColor: Colors.transparent,
-          elevation: 0,
-        ),
-        body: Center(
-          child: Column(
-            mainAxisAlignment: MainAxisAlignment.center,
-            children: [
-              Icon(Icons.music_note, size: 64, color: Colors.grey[700]),
-              const SizedBox(height: 16),
-              Text(
-                'No track playing',
-                style: TextStyle(color: Colors.grey[600], fontSize: 18),
-              ),
-            ],
-          ),
-        ),
-      );
-    }
-
-    final imageUrl = maProvider.getImageUrl(currentTrack, size: 512);
-
-    // Extract colors if adaptive theme is enabled and we have an image URL
-    if (themeProvider.adaptiveTheme && imageUrl != null) {
-      _extractColors(imageUrl);
-    }
-
-    // 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
-    ColorScheme? adaptiveScheme;
-    if (useAdaptiveTheme) {
-      adaptiveScheme = isDark ? _darkColorScheme : _lightColorScheme;
-    }
-
-    // Determine colors to use
-    final backgroundColor = useAdaptiveTheme && adaptiveScheme != null
-        ? adaptiveScheme.background
-        : const Color(0xFF1a1a1a);
-
-    final surfaceColor = useAdaptiveTheme && adaptiveScheme != null
-        ? adaptiveScheme.surface
-        : const Color(0xFF2a2a2a);
-
-    final primaryColor = useAdaptiveTheme && adaptiveScheme != null
-        ? adaptiveScheme.primary
-        : Colors.white;
-
-    final textColor = useAdaptiveTheme && adaptiveScheme != null
-        ? adaptiveScheme.onSurface
-        : Colors.white;
-
-    return Hero(
-      tag: HeroTags.nowPlayingBackground,
-      transitionOnUserGestures: true,
-      child: Scaffold(
-        backgroundColor: backgroundColor,
-        appBar: AppBar(
-          backgroundColor: Colors.transparent,
-          elevation: 0,
-          title: Text(
-            selectedPlayer.name,
-            style: TextStyle(
-              color: textColor.withOpacity(0.7),
-              fontSize: 14,
-              fontWeight: FontWeight.w300,
-            ),
-          ),
-          centerTitle: true,
-          actions: [
-            IconButton(
-              icon: Icon(Icons.queue_music, color: textColor),
-              onPressed: () {
-                Navigator.push(
-                  context,
-                  MaterialPageRoute(
-                    builder: (context) => const QueueScreen(),
-                  ),
-                );
-              },
-            ),
-          ],
-        ),
-        body: SafeArea(
-          child: Padding(
-            padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 16.0),
-            child: Column(
-            children: [
-              const Spacer(),
-              // Album Art with Hero animation
-              LayoutBuilder(
-                builder: (context, constraints) {
-                  final size = constraints.maxWidth.clamp(200.0, 400.0);
-                  return Center(
-                    child: Hero(
-                      tag: HeroTags.nowPlayingArt,
-                      transitionOnUserGestures: true,
-                      child: Container(
-                        width: size,
-                        height: size,
-                        child: ClipRRect(
-                          borderRadius: BorderRadius.circular(16),
-                          child: imageUrl != null
-                              ? Image.network(
-                                  imageUrl,
-                                  fit: BoxFit.cover,
-                                  cacheWidth: 1024,
-                                  cacheHeight: 1024,
-                                  filterQuality: FilterQuality.medium,
-                                  errorBuilder: (context, error, stackTrace) {
-                                    return Container(
-                                      color: const Color(0xFF2a2a2a),
-                                      child: const Icon(
-                                        Icons.music_note_rounded,
-                                        color: Colors.white24,
-                                        size: 120,
-                                      ),
-                                    );
-                                  },
-                                )
-                              : Container(
-                                  color: const Color(0xFF2a2a2a),
-                                  child: const Icon(
-                                    Icons.music_note_rounded,
-                                    color: Colors.white24,
-                                    size: 120,
-                                  ),
-                                ),
-                        ),
-                      ),
-                    ),
-                  );
-                },
-              ),
-              const SizedBox(height: 40),
-
-              // Track Info
-              Text(
-                currentTrack.name,
-                style: TextStyle(
-                  color: textColor,
-                  fontSize: 24,
-                  fontWeight: FontWeight.bold,
-                ),
-                textAlign: TextAlign.center,
-                maxLines: 2,
-                overflow: TextOverflow.ellipsis,
-              ),
-              const SizedBox(height: 8),
-              Text(
-                currentTrack.artistsString,
-                style: TextStyle(
-                  color: textColor.withOpacity(0.7),
-                  fontSize: 16,
-                ),
-                textAlign: TextAlign.center,
-                maxLines: 1,
-                overflow: TextOverflow.ellipsis,
-              ),
-              if (currentTrack.album != null) ...[
-                const SizedBox(height: 4),
-                Text(
-                  currentTrack.album!.name,
-                  style: TextStyle(
-                    color: textColor.withOpacity(0.54),
-                    fontSize: 14,
-                  ),
-                  textAlign: TextAlign.center,
-                  maxLines: 1,
-                  overflow: TextOverflow.ellipsis,
-                ),
-              ],
-              const SizedBox(height: 32),
-
-              // Progress Bar (showing elapsed time)
-              if (currentTrack.duration != null) ...[
-                SliderTheme(
-                  data: SliderThemeData(
-                    trackHeight: 3,
-                    thumbShape: const RoundSliderThumbShape(
-                      enabledThumbRadius: 6,
-                    ),
-                    overlayShape: const RoundSliderOverlayShape(
-                      overlayRadius: 14,
-                    ),
-                  ),
-                  child: Slider(
-                    value: (_seekPosition ?? selectedPlayer.currentElapsedTime).clamp(0, currentTrack.duration!.inSeconds.toDouble()),
-                    max: currentTrack.duration!.inSeconds.toDouble(),
-                    onChanged: (value) {
-                      setState(() {
-                        _seekPosition = value;
-                      });
-                    },
-                    onChangeStart: (value) {
-                      setState(() {
-                        _seekPosition = value;
-                      });
-                    },
-                    onChangeEnd: (value) async {
-                      final targetPosition = value.round();
-                      print('🎯 Seek slider released at $targetPosition seconds');
-                      try {
-                        await maProvider.seek(selectedPlayer.playerId, targetPosition);
-                        print('✅ Seek command completed');
-
-                        // Wait briefly for server to update position
-                        await Future.delayed(const Duration(milliseconds: 200));
-                      } catch (e) {
-                        print('❌ Error seeking: $e');
-                        if (mounted) {
-                          ScaffoldMessenger.of(context).showSnackBar(
-                            SnackBar(content: Text('Error seeking: $e')),
-                          );
-                        }
-                      } finally {
-                        if (mounted) {
-                          setState(() {
-                            _seekPosition = null;
-                            print('🎯 Cleared seek position');
-                          });
-                        }
-                      }
-                    },
-                    activeColor: primaryColor,
-                    inactiveColor: primaryColor.withOpacity(0.24),
-                  ),
-                ),
-                Padding(
-                  padding: const EdgeInsets.symmetric(horizontal: 8.0),
-                  child: Row(
-                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                    children: [
-                      Text(
-                        _formatDuration((_seekPosition ?? selectedPlayer.currentElapsedTime).toInt()),
-                        style: TextStyle(color: textColor.withOpacity(0.54), fontSize: 12),
-                      ),
-                      Text(
-                        _formatDuration(currentTrack.duration!.inSeconds),
-                        style: TextStyle(color: textColor.withOpacity(0.54), fontSize: 12),
-                      ),
-                    ],
-                  ),
-                ),
-              ] else
-                // Show indeterminate progress if no duration available
-                const LinearProgressIndicator(
-                  backgroundColor: Colors.white24,
-                  valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
-                ),
-              const SizedBox(height: 16),
-
-              // Playback Controls
-              Row(
-                mainAxisAlignment: MainAxisAlignment.center,
-                children: [
-                  // Shuffle
-                  IconButton(
-                    icon: Icon(
-                      Icons.shuffle,
-                      color: _queue?.shuffle == true ? primaryColor : textColor.withOpacity(0.54),
-                    ),
-                    iconSize: 24,
-                    onPressed: _isLoadingQueue ? null : _toggleShuffle,
-                  ),
-                  const SizedBox(width: 12),
-                  // Previous
-                  Hero(
-                    tag: HeroTags.nowPlayingPreviousButton,
-                    transitionOnUserGestures: true,
-                    child: Material(
-                      color: Colors.transparent,
-                      child: AnimatedIconButton(
-                        icon: Icons.skip_previous_rounded,
-                        color: textColor,
-                        iconSize: 42,
-                        onPressed: () async {
-                          try {
-                            await maProvider.previousTrackSelectedPlayer();
-                          } catch (e) {
-                            print('❌ Error in previous track: $e');
-                            if (mounted) {
-                              ScaffoldMessenger.of(context).showSnackBar(
-                                SnackBar(content: Text('Error: $e')),
-                              );
-                            }
-                          }
-                        },
-                      ),
-                    ),
-                  ),
-                  const SizedBox(width: 12),
-                  // Play/Pause
-                  Hero(
-                    tag: HeroTags.nowPlayingPlayButton,
-                    transitionOnUserGestures: true,
-                    child: Material(
-                      color: Colors.transparent,
-                      child: _AnimatedPlayButton(
-                        isPlaying: selectedPlayer.isPlaying,
-                        primaryColor: primaryColor,
-                        backgroundColor: backgroundColor,
-                        onPressed: () async {
-                          try {
-                            await maProvider.playPauseSelectedPlayer();
-                          } catch (e) {
-                            print('❌ Error in play/pause: $e');
-                            if (mounted) {
-                              ScaffoldMessenger.of(context).showSnackBar(
-                                SnackBar(content: Text('Error: $e')),
-                              );
-                            }
-                          }
-                        },
-                      ),
-                    ),
-                  ),
-                  const SizedBox(width: 12),
-                  // Next
-                  Hero(
-                    tag: HeroTags.nowPlayingNextButton,
-                    transitionOnUserGestures: true,
-                    child: Material(
-                      color: Colors.transparent,
-                      child: AnimatedIconButton(
-                        icon: Icons.skip_next_rounded,
-                        color: textColor,
-                        iconSize: 42,
-                        onPressed: () async {
-                          try {
-                            await maProvider.nextTrackSelectedPlayer();
-                          } catch (e) {
-                            print('❌ Error in next track: $e');
-                            if (mounted) {
-                              ScaffoldMessenger.of(context).showSnackBar(
-                                SnackBar(content: Text('Error: $e')),
-                              );
-                            }
-                          }
-                        },
-                      ),
-                    ),
-                  ),
-                  const SizedBox(width: 12),
-                  // Repeat
-                  IconButton(
-                    icon: Icon(
-                      _queue?.repeatMode == 'one'
-                          ? Icons.repeat_one
-                          : Icons.repeat,
-                      color: _queue?.repeatMode != null && _queue!.repeatMode != 'off'
-                          ? primaryColor
-                          : textColor.withOpacity(0.54),
-                    ),
-                    iconSize: 24,
-                    onPressed: _isLoadingQueue ? null : _cycleRepeat,
-                  ),
-                ],
-              ),
-              const SizedBox(height: 32),
-
-              // Volume Control
-              const Padding(
-                padding: EdgeInsets.symmetric(horizontal: 16.0),
-                child: VolumeControl(compact: false),
-              ),
-              const Spacer(),
-            ],
-            ),
-          ),
-        ),
-      ),
-    );
-      },
-    );
-  }
-
-  String _formatDuration(int seconds) {
-    final duration = Duration(seconds: seconds);
-    final minutes = duration.inMinutes;
-    final secs = duration.inSeconds % 60;
-    return '${minutes.toString().padLeft(1, '0')}:${secs.toString().padLeft(2, '0')}';
-  }
-}
-
-/// Animated play/pause button with scale animation
-class _AnimatedPlayButton extends StatefulWidget {
-  final bool isPlaying;
-  final Color primaryColor;
-  final Color backgroundColor;
-  final VoidCallback onPressed;
-
-  const _AnimatedPlayButton({
-    required this.isPlaying,
-    required this.primaryColor,
-    required this.backgroundColor,
-    required this.onPressed,
-  });
-
-  @override
-  State<_AnimatedPlayButton> createState() => _AnimatedPlayButtonState();
-}
-
-class _AnimatedPlayButtonState extends State<_AnimatedPlayButton>
-    with SingleTickerProviderStateMixin {
-  late AnimationController _controller;
-  late Animation<double> _scaleAnimation;
-
-  @override
-  void initState() {
-    super.initState();
-    _controller = AnimationController(
-      duration: const Duration(milliseconds: 100),
-      vsync: this,
-    );
-    _scaleAnimation = Tween<double>(begin: 1.0, end: 0.85).animate(
-      CurvedAnimation(parent: _controller, curve: Curves.easeInOut),
-    );
-  }
-
-  @override
-  void dispose() {
-    _controller.dispose();
-    super.dispose();
-  }
-
-  Future<void> _handleTap() async {
-    // Animate press
-    await _controller.forward();
-    await _controller.reverse();
-
-    // Call the callback
-    widget.onPressed();
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return GestureDetector(
-      onTapDown: (_) => _controller.forward(),
-      onTapUp: (_) => _controller.reverse(),
-      onTapCancel: () => _controller.reverse(),
-      child: ScaleTransition(
-        scale: _scaleAnimation,
-        child: Container(
-          width: 72,
-          height: 72,
-          decoration: BoxDecoration(
-            color: widget.primaryColor,
-            shape: BoxShape.circle,
-          ),
-          child: IconButton(
-            icon: Icon(
-              widget.isPlaying ? Icons.pause_rounded : Icons.play_arrow_rounded,
-            ),
-            color: widget.backgroundColor,
-            iconSize: 42,
-            onPressed: _handleTap,
-          ),
-        ),
-      ),
-    );
-  }
-}

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;
@@ -35,19 +38,16 @@ class _PlaylistDetailsScreenState extends State<PlaylistDetailsScreen> {
     });
 
     final maProvider = context.read<MusicAssistantProvider>();
-    if (maProvider.api != null) {
-      final tracks = await maProvider.api!.getPlaylistTracks(
-        widget.provider,
-        widget.itemId,
-      );
+    final tracks = await maProvider.getPlaylistTracksWithCache(
+      widget.provider,
+      widget.itemId,
+    );
+
+    if (mounted) {
       setState(() {
         _tracks = tracks;
         _isLoading = false;
       });
-    } else {
-      setState(() {
-        _isLoading = false;
-      });
     }
   }
 
@@ -64,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(
@@ -79,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');
     }
   }
@@ -101,8 +101,8 @@ class _PlaylistDetailsScreenState extends State<PlaylistDetailsScreen> {
     final imageUrl = maProvider.api?.getImageUrl(widget.playlist, size: 400);
 
     return Scaffold(
-      backgroundColor: const Color(0xFF1a1a1a),
-      body: CustomScrollView(
+        backgroundColor: const Color(0xFF1a1a1a),
+        body: CustomScrollView(
         slivers: [
           SliverAppBar(
             expandedHeight: 300,

lib/screens/queue_screen.dart

@@ -2,6 +2,8 @@ import 'package:flutter/material.dart';
 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});
@@ -11,33 +13,56 @@ class QueueScreen extends StatefulWidget {
 }
 
 class _QueueScreenState extends State<QueueScreen> {
+  final _logger = DebugLogger();
   PlayerQueue? _queue;
   bool _isLoading = true;
+  String? _error;
 
   @override
   void initState() {
     super.initState();
-    _loadQueue();
+    // Use addPostFrameCallback to safely access context after build
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      _loadQueue();
+    });
   }
 
   Future<void> _loadQueue() async {
+    if (!mounted) return;
+
     setState(() {
       _isLoading = true;
+      _error = null;
     });
 
-    final maProvider = context.read<MusicAssistantProvider>();
-    final player = maProvider.selectedPlayer;
+    try {
+      final maProvider = context.read<MusicAssistantProvider>();
+      final player = maProvider.selectedPlayer;
 
-    if (player != null && maProvider.api != null) {
-      final queue = await maProvider.api!.getQueue(player.playerId);
-      setState(() {
-        _queue = queue;
-        _isLoading = false;
-      });
-    } else {
-      setState(() {
-        _isLoading = false;
-      });
+      if (player != null && maProvider.api != null) {
+        final queue = await maProvider.api!.getQueue(player.playerId);
+        if (mounted) {
+          setState(() {
+            _queue = queue;
+            _isLoading = false;
+          });
+        }
+      } else {
+        if (mounted) {
+          setState(() {
+            _isLoading = false;
+            _error = 'No player selected';
+          });
+        }
+      }
+    } catch (e) {
+      _logger.log('QueueScreen error loading queue: $e');
+      if (mounted) {
+        setState(() {
+          _isLoading = false;
+          _error = 'Failed to load queue: $e';
+        });
+      }
     }
   }
 
@@ -76,6 +101,28 @@ class _QueueScreenState extends State<QueueScreen> {
       return const Center(child: CircularProgressIndicator());
     }
 
+    if (_error != null) {
+      return Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Icon(Icons.error_outline, size: 64, color: Colors.red[400]),
+            const SizedBox(height: 16),
+            Text(
+              _error!,
+              style: TextStyle(color: Colors.red[300], fontSize: 16),
+              textAlign: TextAlign.center,
+            ),
+            const SizedBox(height: 16),
+            ElevatedButton(
+              onPressed: _loadQueue,
+              child: const Text('Retry'),
+            ),
+          ],
+        ),
+      );
+    }
+
     if (maProvider.selectedPlayer == null) {
       return Center(
         child: Column(
@@ -93,19 +140,7 @@ class _QueueScreenState extends State<QueueScreen> {
     }
 
     if (_queue == null || _queue!.items.isEmpty) {
-      return Center(
-        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),
-            ),
-          ],
-        ),
-      );
+      return EmptyState.queue();
     }
 
     // Filter to show only current and upcoming items (not history)
@@ -113,18 +148,9 @@ class _QueueScreenState extends State<QueueScreen> {
     final upcomingItems = _queue!.items.sublist(currentIndex);
 
     if (upcomingItems.isEmpty) {
-      return Center(
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
-          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),
-            ),
-          ],
-        ),
+      return const EmptyState(
+        icon: Icons.queue_music,
+        message: 'No upcoming tracks',
       );
     }
 
@@ -185,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);
         });
@@ -209,13 +238,10 @@ class _QueueScreenState extends State<QueueScreen> {
           leading: Row(
             mainAxisSize: MainAxisSize.min,
             children: [
-              // Drag handle
-              ReorderableDragStartListener(
-                index: index,
-                child: Icon(
-                  Icons.drag_handle,
-                  color: Colors.grey[600],
-                ),
+              // Drag handle (visual only for now - reordering not implemented)
+              Icon(
+                Icons.drag_handle,
+                color: Colors.grey[600],
               ),
               const SizedBox(width: 8),
               // Album art

lib/screens/search_screen.dart

@@ -1,7 +1,15 @@
+import 'dart:async';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
+import 'package:cached_network_image/cached_network_image.dart';
+import '../constants/timings.dart';
 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';
 
@@ -12,9 +20,46 @@ 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();
   final FocusNode _focusNode = FocusNode();
+  Timer? _debounceTimer;
   Map<String, List<MediaItem>> _searchResults = {
     'artists': [],
     'albums': [],
@@ -23,6 +68,7 @@ class SearchScreenState extends State<SearchScreen> {
   bool _isSearching = false;
   bool _hasSearched = false;
   String _activeFilter = 'all'; // 'all', 'artists', 'albums', 'tracks'
+  String? _searchError;
 
   @override
   void initState() {
@@ -45,39 +91,68 @@ class SearchScreenState extends State<SearchScreen> {
 
   @override
   void dispose() {
+    _debounceTimer?.cancel();
     _searchController.dispose();
     _focusNode.dispose();
     super.dispose();
   }
 
-  Future<void> _performSearch(String query) async {
+  void _onSearchChanged(String query) {
+    _debounceTimer?.cancel();
+    _debounceTimer = Timer(Timings.searchDebounce, () {
+      _performSearch(query, keepFocus: true);
+    });
+  }
+
+  Future<void> _performSearch(String query, {bool keepFocus = false}) async {
     if (query.isEmpty) {
       setState(() {
         _searchResults = {'artists': [], 'albums': [], 'tracks': []};
         _hasSearched = false;
+        _searchError = null;
       });
       return;
     }
 
     setState(() {
       _isSearching = true;
+      _searchError = null;
     });
 
-    final provider = context.read<MusicAssistantProvider>();
-    final results = await provider.search(query);
+    try {
+      final provider = context.read<MusicAssistantProvider>();
+      final results = await provider.searchWithCache(query);
 
-    setState(() {
-      _searchResults = results;
-      _isSearching = false;
-      _hasSearched = true;
-    });
+      if (mounted) {
+        setState(() {
+          _searchResults = results;
+          _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');
+      if (mounted) {
+        setState(() {
+          _isSearching = false;
+          _hasSearched = true;
+          _searchError = 'Search failed. Please check your connection.';
+        });
+        if (keepFocus && _focusNode.hasFocus) {
+          _focusNode.requestFocus();
+        }
+      }
+    }
   }
 
   @override
   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,
@@ -89,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)),
@@ -98,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(() {});
-            _performSearch(value);
+            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;
 
@@ -177,6 +228,35 @@ class SearchScreenState extends State<SearchScreen> {
       );
     }
 
+    if (_searchError != null) {
+      return Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Icon(
+              Icons.error_outline_rounded,
+              size: 64,
+              color: colorScheme.error.withOpacity(0.7),
+            ),
+            const SizedBox(height: 16),
+            Text(
+              _searchError!,
+              style: TextStyle(
+                color: colorScheme.error,
+                fontSize: 16,
+              ),
+              textAlign: TextAlign.center,
+            ),
+            const SizedBox(height: 16),
+            FilledButton.tonal(
+              onPressed: () => _performSearch(_searchController.text),
+              child: const Text('Retry'),
+            ),
+          ],
+        ),
+      );
+    }
+
     final artists = _searchResults['artists'] as List<MediaItem>? ?? [];
     final albums = _searchResults['albums'] as List<MediaItem>? ?? [];
     final tracks = _searchResults['tracks'] as List<MediaItem>? ?? [];
@@ -184,26 +264,7 @@ class SearchScreenState extends State<SearchScreen> {
     final hasResults = artists.isNotEmpty || albums.isNotEmpty || tracks.isNotEmpty;
 
     if (!hasResults) {
-      return Center(
-        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 EmptyState.search();
     }
 
     return Column(
@@ -233,47 +294,99 @@ class SearchScreenState extends State<SearchScreen> {
         
         // Results
         Expanded(
-          child: ListView(
-            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
-            children: [
-              if ((_activeFilter == 'all' || _activeFilter == 'artists') && artists.isNotEmpty) ...[
-                if (_activeFilter == 'all') _buildSectionHeader('Artists', artists.length),
-                ...artists.map((item) => _buildArtistTile(item as Artist)),
-                const SizedBox(height: 24),
-              ],
-              if ((_activeFilter == 'all' || _activeFilter == 'albums') && albums.isNotEmpty) ...[
-                if (_activeFilter == 'all') _buildSectionHeader('Albums', albums.length),
-                ...albums.map((item) => _buildAlbumTile(item as Album)),
-                const SizedBox(height: 24),
-              ],
-              if ((_activeFilter == 'all' || _activeFilter == 'tracks') && tracks.isNotEmpty) ...[
-                if (_activeFilter == 'all') _buildSectionHeader('Tracks', tracks.length),
-                ...tracks.map((item) => _buildTrackTile(item as Track)),
-              ],
-            ],
+          child: Builder(
+            builder: (context) {
+              final listItems = _buildListItems(artists, albums, tracks);
+              return ListView.builder(
+                padding: EdgeInsets.fromLTRB(16, 8, 16, BottomSpacing.navBarOnly),
+                cacheExtent: 500, // Prebuild items off-screen for smoother scrolling
+                addAutomaticKeepAlives: false, // Tiles don't need individual keep-alive
+                addRepaintBoundaries: false, // We add RepaintBoundary manually to tiles
+                itemCount: listItems.length,
+                itemBuilder: (context, index) {
+                  final item = listItems[index];
+                  switch (item.type) {
+                    case _ListItemType.header:
+                      return _buildSectionHeader(item.headerTitle!, item.headerCount!);
+                    case _ListItemType.artist:
+                      return _buildArtistTile(item.mediaItem! as Artist);
+                    case _ListItemType.album:
+                      return _buildAlbumTile(item.mediaItem! as Album);
+                    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;
-    
+
     return FilterChip(
       label: Text(label),
       selected: isSelected,
+      showCheckmark: false,
       onSelected: (selected) {
         setState(() {
           _activeFilter = value;
         });
       },
+      backgroundColor: colorScheme.surfaceVariant.withOpacity(0.3),
       selectedColor: colorScheme.primaryContainer,
-      checkmarkColor: colorScheme.onPrimaryContainer,
+      side: BorderSide.none,
       labelStyle: TextStyle(
-        color: isSelected ? colorScheme.onPrimaryContainer : colorScheme.onSurface,
-        fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
+        color: isSelected ? colorScheme.onPrimaryContainer : colorScheme.onSurfaceVariant,
+        fontWeight: isSelected ? FontWeight.w600 : FontWeight.normal,
       ),
     );
   }
@@ -293,18 +406,17 @@ 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(
+    return RepaintBoundary(
+      child: ListTile(
+        key: ValueKey(artist.uri ?? artist.itemId),
+      leading: ArtistAvatar(
+        artist: artist,
         radius: 24,
-        backgroundColor: colorScheme.surfaceVariant,
-        backgroundImage: imageUrl != null ? NetworkImage(imageUrl) : null,
-        child: imageUrl == null
-            ? Icon(Icons.person_rounded, color: colorScheme.onSurfaceVariant)
-            : null,
+        imageSize: 128,
       ),
       title: Text(
         artist.name,
@@ -319,14 +431,18 @@ class SearchScreenState extends State<SearchScreen> {
         'Artist',
         style: TextStyle(color: colorScheme.onSurface.withOpacity(0.6), fontSize: 12),
       ),
-      onTap: () {
-        Navigator.push(
-          context,
-          MaterialPageRoute(
-            builder: (context) => ArtistDetailsScreen(artist: artist),
-          ),
-        );
-      },
+        onTap: () {
+          Navigator.push(
+            context,
+            MaterialPageRoute(
+              builder: (context) => ArtistDetailsScreen(
+                artist: artist,
+                initialImageUrl: imageUrl,
+              ),
+            ),
+          );
+        },
+      ),
     );
   }
 
@@ -335,8 +451,10 @@ class SearchScreenState extends State<SearchScreen> {
     final imageUrl = maProvider.getImageUrl(album, size: 128);
     final colorScheme = Theme.of(context).colorScheme;
 
-    return ListTile(
-      leading: Container(
+    return RepaintBoundary(
+      child: ListTile(
+        key: ValueKey(album.uri ?? album.itemId),
+        leading: Container(
         width: 48,
         height: 48,
         decoration: BoxDecoration(
@@ -344,7 +462,7 @@ class SearchScreenState extends State<SearchScreen> {
           borderRadius: BorderRadius.circular(8),
           image: imageUrl != null
               ? DecorationImage(
-                  image: NetworkImage(imageUrl),
+                  image: CachedNetworkImageProvider(imageUrl),
                   fit: BoxFit.cover,
                 )
               : null,
@@ -368,14 +486,15 @@ class SearchScreenState extends State<SearchScreen> {
         maxLines: 1,
         overflow: TextOverflow.ellipsis,
       ),
-      onTap: () {
-        Navigator.push(
-          context,
-          MaterialPageRoute(
-            builder: (context) => AlbumDetailsScreen(album: album),
-          ),
-        );
-      },
+        onTap: () {
+          Navigator.push(
+            context,
+            MaterialPageRoute(
+              builder: (context) => AlbumDetailsScreen(album: album),
+            ),
+          );
+        },
+      ),
     );
   }
 
@@ -386,8 +505,10 @@ class SearchScreenState extends State<SearchScreen> {
         : null;
     final colorScheme = Theme.of(context).colorScheme;
 
-    return ListTile(
-      leading: Container(
+    return RepaintBoundary(
+      child: ListTile(
+        key: ValueKey(track.uri ?? track.itemId),
+        leading: Container(
         width: 48,
         height: 48,
         decoration: BoxDecoration(
@@ -395,7 +516,7 @@ class SearchScreenState extends State<SearchScreen> {
           borderRadius: BorderRadius.circular(8),
           image: imageUrl != null
               ? DecorationImage(
-                  image: NetworkImage(imageUrl),
+                  image: CachedNetworkImageProvider(imageUrl),
                   fit: BoxFit.cover,
                 )
               : null,
@@ -419,13 +540,14 @@ class SearchScreenState extends State<SearchScreen> {
         maxLines: 1,
         overflow: TextOverflow.ellipsis,
       ),
-      trailing: track.duration != null
-          ? Text(
-              _formatDuration(track.duration!),
-              style: TextStyle(color: colorScheme.onSurface.withOpacity(0.5), fontSize: 12),
-            )
-          : null,
-      onTap: () => _playTrack(track),
+        trailing: track.duration != null
+            ? Text(
+                _formatDuration(track.duration!),
+                style: TextStyle(color: colorScheme.onSurface.withOpacity(0.5), fontSize: 12),
+              )
+            : null,
+        onTap: () => _playTrack(track),
+      ),
     );
   }
 

lib/screens/settings_screen.dart

@@ -3,10 +3,10 @@ import 'package:provider/provider.dart';
 import '../providers/music_assistant_provider.dart';
 import '../services/music_assistant_api.dart';
 import '../services/settings_service.dart';
-import '../services/auth_service.dart';
-import '../services/debug_logger.dart';
 import '../theme/theme_provider.dart';
+import '../widgets/global_player_overlay.dart';
 import 'debug_log_screen.dart';
+import 'login_screen.dart';
 
 class SettingsScreen extends StatefulWidget {
   const SettingsScreen({super.key});
@@ -16,17 +16,16 @@ class SettingsScreen extends StatefulWidget {
 }
 
 class _SettingsScreenState extends State<SettingsScreen> {
-  final _serverUrlController = TextEditingController();
-  final _portController = TextEditingController(text: '8095');
-  final _usernameController = TextEditingController();
-  final _passwordController = TextEditingController();
   final _lastFmApiKeyController = TextEditingController();
   final _audioDbApiKeyController = TextEditingController();
-  final _authService = AuthService();
-  final _logger = DebugLogger();
-  bool _isConnecting = false;
-  bool _enableLocalPlayback = false;
-  final _localPlayerNameController = TextEditingController();
+  // Main rows (default on)
+  bool _showRecentAlbums = true;
+  bool _showDiscoverArtists = true;
+  bool _showDiscoverAlbums = true;
+  // Favorites rows (default off)
+  bool _showFavoriteAlbums = false;
+  bool _showFavoriteArtists = false;
+  bool _showFavoriteTracks = false;
 
   @override
   void initState() {
@@ -35,24 +34,6 @@ class _SettingsScreenState extends State<SettingsScreen> {
   }
 
   Future<void> _loadSettings() async {
-    final provider = context.read<MusicAssistantProvider>();
-    _serverUrlController.text = provider.serverUrl ?? '';
-
-    final port = await SettingsService.getWebSocketPort();
-    if (port != null) {
-      _portController.text = port.toString();
-    }
-
-    final username = await SettingsService.getUsername();
-    if (username != null) {
-      _usernameController.text = username;
-    }
-
-    final password = await SettingsService.getPassword();
-    if (password != null) {
-      _passwordController.text = password;
-    }
-
     final lastFmKey = await SettingsService.getLastFmApiKey();
     if (lastFmKey != null) {
       _lastFmApiKeyController.text = lastFmKey;
@@ -62,109 +43,47 @@ class _SettingsScreenState extends State<SettingsScreen> {
     if (audioDbKey != null) {
       _audioDbApiKeyController.text = audioDbKey;
     }
-    
-    _enableLocalPlayback = await SettingsService.getEnableLocalPlayback();
-    _localPlayerNameController.text = await SettingsService.getLocalPlayerName();
+
+    // Load home screen settings
+    final showRecent = await SettingsService.getShowRecentAlbums();
+    final showDiscArtists = await SettingsService.getShowDiscoverArtists();
+    final showDiscAlbums = await SettingsService.getShowDiscoverAlbums();
+    final showFavAlbums = await SettingsService.getShowFavoriteAlbums();
+    final showFavArtists = await SettingsService.getShowFavoriteArtists();
+    final showFavTracks = await SettingsService.getShowFavoriteTracks();
+    if (mounted) {
+      setState(() {
+        _showRecentAlbums = showRecent;
+        _showDiscoverArtists = showDiscArtists;
+        _showDiscoverAlbums = showDiscAlbums;
+        _showFavoriteAlbums = showFavAlbums;
+        _showFavoriteArtists = showFavArtists;
+        _showFavoriteTracks = showFavTracks;
+      });
+    }
   }
 
   @override
   void dispose() {
-    _serverUrlController.dispose();
-    _portController.dispose();
-    _usernameController.dispose();
-    _passwordController.dispose();
     _lastFmApiKeyController.dispose();
     _audioDbApiKeyController.dispose();
-    _localPlayerNameController.dispose();
     super.dispose();
   }
 
-  Future<void> _connect() async {
-    if (_serverUrlController.text.isEmpty) {
-      _showError('Please enter a server URL');
-      return;
+  Future<void> _disconnect() async {
+    final provider = context.read<MusicAssistantProvider>();
+    await provider.disconnect();
+
+    // Clear saved server URL so login screen shows
+    await SettingsService.clearServerUrl();
+
+    if (mounted) {
+      // Navigate to login screen and clear the navigation stack
+      Navigator.of(context).pushAndRemoveUntil(
+        MaterialPageRoute(builder: (context) => const LoginScreen()),
+        (route) => false,
+      );
     }
-
-    final port = _portController.text.trim();
-    if (port.isEmpty) {
-      _showError('Please enter a port number');
-      return;
-    }
-
-    final portNum = int.tryParse(port);
-    if (portNum == null || portNum < 1 || portNum > 65535) {
-      _showError('Please enter a valid port number (1-65535)');
-      return;
-    }
-
-    await SettingsService.setWebSocketPort(portNum);
-
-    setState(() {
-      _isConnecting = true;
-    });
-
-    try {
-      if (_usernameController.text.trim().isNotEmpty &&
-          _passwordController.text.trim().isNotEmpty) {
-        _logger.log('🔐 Attempting login with credentials...');
-
-        final token = await _authService.login(
-          _serverUrlController.text,
-          _usernameController.text.trim(),
-          _passwordController.text.trim(),
-        );
-
-        if (token != null) {
-          await SettingsService.setUsername(_usernameController.text.trim());
-          await SettingsService.setPassword(_passwordController.text.trim());
-
-          if (mounted) {
-            ScaffoldMessenger.of(context).showSnackBar(
-              const SnackBar(
-                content: Text('✓ Authentication successful!'),
-                backgroundColor: Colors.green,
-              ),
-            );
-          }
-        } else {
-          _showError('Authentication failed. Please check your credentials.');
-          setState(() {
-            _isConnecting = false;
-          });
-          return;
-        }
-      }
-
-      final provider = context.read<MusicAssistantProvider>();
-      await provider.connectToServer(_serverUrlController.text);
-
-      if (mounted) {
-        ScaffoldMessenger.of(context).showSnackBar(
-          const SnackBar(
-            content: Text('Connected successfully!'),
-            backgroundColor: Colors.green,
-          ),
-        );
-        Navigator.pop(context);
-      }
-    } catch (e) {
-      _showError('Connection failed: $e');
-    } finally {
-      if (mounted) {
-        setState(() {
-          _isConnecting = false;
-        });
-      }
-    }
-  }
-
-  void _showError(String message) {
-    ScaffoldMessenger.of(context).showSnackBar(
-      SnackBar(
-        content: Text(message),
-        backgroundColor: Colors.red,
-      ),
-    );
   }
 
   @override
@@ -210,270 +129,75 @@ class _SettingsScreenState extends State<SettingsScreen> {
       body: SingleChildScrollView(
         padding: const EdgeInsets.all(24.0),
         child: Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
+          crossAxisAlignment: CrossAxisAlignment.center,
           children: [
+            // Logo - same size as login screen (50% of screen width)
+            Padding(
+              padding: const EdgeInsets.only(top: 8.0, bottom: 48.0),
+              child: Image.asset(
+                'assets/images/ensemble_icon_transparent.png',
+                width: MediaQuery.of(context).size.width * 0.5,
+                fit: BoxFit.contain,
+              ),
+            ),
+
+            // Connection status box - centered with border radius like theme boxes
             Container(
+              width: double.infinity,
               padding: const EdgeInsets.all(16),
               decoration: BoxDecoration(
                 color: colorScheme.surfaceVariant.withOpacity(0.3),
                 borderRadius: BorderRadius.circular(12),
               ),
               child: Row(
+                mainAxisAlignment: MainAxisAlignment.center,
                 children: [
                   Icon(
                     _getStatusIcon(provider.connectionState),
                     color: _getStatusColor(provider.connectionState, colorScheme),
-                    size: 24,
+                    size: 20,
                   ),
-                  const SizedBox(width: 12),
-                  Expanded(
-                    child: Column(
-                      crossAxisAlignment: CrossAxisAlignment.start,
-                      children: [
-                        Text(
-                          'Connection Status',
-                          style: textTheme.bodySmall?.copyWith(
-                            color: colorScheme.onSurfaceVariant,
-                          ),
-                        ),
-                        const SizedBox(height: 4),
-                        Text(
-                          _getStatusText(provider.connectionState),
-                          style: textTheme.titleMedium?.copyWith(
-                            color: _getStatusColor(provider.connectionState, colorScheme),
-                            fontWeight: FontWeight.bold,
-                          ),
-                        ),
-                      ],
+                  const SizedBox(width: 8),
+                  Text(
+                    _getStatusText(provider.connectionState),
+                    style: textTheme.titleMedium?.copyWith(
+                      color: _getStatusColor(provider.connectionState, colorScheme),
+                      fontWeight: FontWeight.bold,
                     ),
                   ),
                 ],
               ),
             ),
 
-            const SizedBox(height: 32),
-
-            Text(
-              'Music Assistant Server',
-              style: textTheme.titleMedium?.copyWith(
-                color: colorScheme.onBackground,
-                fontWeight: FontWeight.bold,
-              ),
-            ),
-            const SizedBox(height: 8),
-            Text(
-              'Enter your Music Assistant server URL or IP address',
-              style: textTheme.bodySmall?.copyWith(
-                color: colorScheme.onBackground.withOpacity(0.6),
-              ),
-            ),
             const SizedBox(height: 16),
 
-            TextField(
-              controller: _serverUrlController,
-              style: TextStyle(color: colorScheme.onSurface),
-              decoration: InputDecoration(
-                hintText: 'e.g., music.example.com or 192.168.1.100',
-                hintStyle: TextStyle(color: colorScheme.onSurface.withOpacity(0.38)),
-                filled: true,
-                fillColor: colorScheme.surfaceVariant.withOpacity(0.3),
-                border: OutlineInputBorder(
-                  borderRadius: BorderRadius.circular(12),
-                  borderSide: BorderSide.none,
-                ),
-                prefixIcon: Icon(
-                  Icons.dns_rounded,
-                  color: colorScheme.onSurface.withOpacity(0.54),
-                ),
-              ),
-              enabled: !_isConnecting,
-            ),
-
-            const SizedBox(height: 24),
-
-            Text(
-              'Port',
-              style: textTheme.titleMedium?.copyWith(
-                color: colorScheme.onBackground,
-                fontWeight: FontWeight.bold,
-              ),
-            ),
-            const SizedBox(height: 8),
-            Text(
-              'Music Assistant WebSocket port (usually 8095)',
-              style: textTheme.bodySmall?.copyWith(
-                color: colorScheme.onBackground.withOpacity(0.6),
-              ),
-            ),
-            const SizedBox(height: 16),
-
-            TextField(
-              controller: _portController,
-              style: TextStyle(color: colorScheme.onSurface),
-              keyboardType: TextInputType.number,
-              decoration: InputDecoration(
-                hintText: '8095',
-                hintStyle: TextStyle(color: colorScheme.onSurface.withOpacity(0.38)),
-                filled: true,
-                fillColor: colorScheme.surfaceVariant.withOpacity(0.3),
-                border: OutlineInputBorder(
-                  borderRadius: BorderRadius.circular(12),
-                  borderSide: BorderSide.none,
-                ),
-                prefixIcon: Icon(
-                  Icons.settings_ethernet_rounded,
-                  color: colorScheme.onSurface.withOpacity(0.54),
-                ),
-              ),
-              enabled: !_isConnecting,
-            ),
-
-            const SizedBox(height: 32),
-
+            // Disconnect button
             SizedBox(
               width: double.infinity,
               height: 50,
-              child: ElevatedButton(
-                onPressed: _isConnecting ? null : _connect,
-                style: ElevatedButton.styleFrom(
-                  backgroundColor: colorScheme.primary,
-                  foregroundColor: colorScheme.onPrimary,
-                  disabledBackgroundColor: colorScheme.primary.withOpacity(0.38),
+              child: FilledButton.tonalIcon(
+                onPressed: _disconnect,
+                icon: const Icon(Icons.logout_rounded),
+                label: const Text(
+                  'Disconnect',
+                  style: TextStyle(
+                    fontSize: 16,
+                    fontWeight: FontWeight.w500,
+                  ),
+                ),
+                style: FilledButton.styleFrom(
+                  backgroundColor: colorScheme.errorContainer.withOpacity(0.4),
+                  foregroundColor: colorScheme.error,
                   shape: RoundedRectangleBorder(
                     borderRadius: BorderRadius.circular(12),
                   ),
                 ),
-                child: _isConnecting
-                    ? SizedBox(
-                        height: 20,
-                        width: 20,
-                        child: CircularProgressIndicator(
-                          strokeWidth: 2,
-                          color: colorScheme.onPrimary,
-                        ),
-                      )
-                    : const Text(
-                        'Connect',
-                        style: TextStyle(
-                          fontSize: 16,
-                          fontWeight: FontWeight.bold,
-                        ),
-                      ),
               ),
             ),
 
-            if (provider.isConnected) ...[
-              const SizedBox(height: 16),
-              SizedBox(
-                width: double.infinity,
-                height: 50,
-                child: OutlinedButton(
-                  onPressed: () async {
-                    await provider.disconnect();
-                    if (mounted) {
-                      ScaffoldMessenger.of(context).showSnackBar(
-                        const SnackBar(
-                          content: Text('Disconnected from server'),
-                        ),
-                      );
-                    }
-                  },
-                  style: OutlinedButton.styleFrom(
-                    foregroundColor: colorScheme.error,
-                    side: BorderSide(color: colorScheme.error.withOpacity(0.5)),
-                    shape: RoundedRectangleBorder(
-                      borderRadius: BorderRadius.circular(12),
-                    ),
-                  ),
-                  child: const Text(
-                    'Disconnect',
-                    style: TextStyle(
-                      fontSize: 16,
-                      fontWeight: FontWeight.bold,
-                    ),
-                  ),
-                ),
-              ),
-            ],
-
             const SizedBox(height: 32),
 
-            const SizedBox(height: 32),
-
-            Text(
-              'Local Playback',
-              style: textTheme.titleMedium?.copyWith(
-                color: colorScheme.onBackground,
-                fontWeight: FontWeight.bold,
-              ),
-            ),
-            const SizedBox(height: 8),
-            Text(
-              'Turn your device into a Music Assistant player',
-              style: textTheme.bodySmall?.copyWith(
-                color: colorScheme.onBackground.withOpacity(0.6),
-              ),
-            ),
-            const SizedBox(height: 16),
-
-            Container(
-              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
-              decoration: BoxDecoration(
-                color: colorScheme.surfaceVariant.withOpacity(0.3),
-                borderRadius: BorderRadius.circular(12),
-              ),
-              child: SwitchListTile(
-                title: Text(
-                  'Enable Local Playback',
-                  style: TextStyle(color: colorScheme.onSurface),
-                ),
-                value: _enableLocalPlayback,
-                onChanged: (value) async {
-                  setState(() {
-                    _enableLocalPlayback = value;
-                  });
-                  if (value) {
-                    await provider.enableLocalPlayback();
-                  } else {
-                    await provider.disableLocalPlayback();
-                  }
-                  if (mounted) {
-                    // Trigger a refresh of players if the selection might change
-                    await provider.refreshPlayers();
-                  }
-                },
-                activeColor: colorScheme.primary,
-                contentPadding: EdgeInsets.zero,
-              ),
-            ),
-            const SizedBox(height: 16),
-
-            if (_enableLocalPlayback) ...[
-              TextField(
-                controller: _localPlayerNameController,
-                style: TextStyle(color: colorScheme.onSurface),
-                decoration: InputDecoration(
-                  labelText: 'Local Player Name',
-                  hintText: 'e.g., My Phone',
-                  hintStyle: TextStyle(color: colorScheme.onSurface.withOpacity(0.38)),
-                  filled: true,
-                  fillColor: colorScheme.surfaceVariant.withOpacity(0.3),
-                  border: OutlineInputBorder(
-                    borderRadius: BorderRadius.circular(12),
-                    borderSide: BorderSide.none,
-                  ),
-                  prefixIcon: Icon(
-                    Icons.phone_android_rounded,
-                    color: colorScheme.onSurface.withOpacity(0.54),
-                  ),
-                ),
-                onChanged: (value) {
-                  SettingsService.setLocalPlayerName(value);
-                },
-              ),
-              const SizedBox(height: 16),
-            ],
-
+            // Theme section
             Text(
               'Theme',
               style: textTheme.titleMedium?.copyWith(
@@ -501,41 +225,45 @@ class _SettingsScreenState extends State<SettingsScreen> {
                   const SizedBox(height: 12),
                   Consumer<ThemeProvider>(
                     builder: (context, themeProvider, _) {
-                      return SegmentedButton<ThemeMode>(
-                        segments: const [
-                          ButtonSegment<ThemeMode>(
-                            value: ThemeMode.light,
-                            label: Text('Light'),
-                            icon: Icon(Icons.light_mode_rounded),
+                      return SizedBox(
+                        width: double.infinity,
+                        child: SegmentedButton<ThemeMode>(
+                          segments: const [
+                            ButtonSegment<ThemeMode>(
+                              value: ThemeMode.light,
+                              label: Text('Light'),
+                              icon: Icon(Icons.light_mode_rounded),
+                            ),
+                            ButtonSegment<ThemeMode>(
+                              value: ThemeMode.dark,
+                              label: Text('Dark'),
+                              icon: Icon(Icons.dark_mode_rounded),
+                            ),
+                            ButtonSegment<ThemeMode>(
+                              value: ThemeMode.system,
+                              label: Text('System'),
+                              icon: Icon(Icons.auto_mode_rounded),
+                            ),
+                          ],
+                          selected: {themeProvider.themeMode},
+                          onSelectionChanged: (Set<ThemeMode> newSelection) {
+                            themeProvider.setThemeMode(newSelection.first);
+                          },
+                          style: ButtonStyle(
+                            backgroundColor: WidgetStateProperty.resolveWith((states) {
+                              if (states.contains(WidgetState.selected)) {
+                                return colorScheme.primaryContainer;
+                              }
+                              return colorScheme.surfaceVariant.withOpacity(0.3);
+                            }),
+                            foregroundColor: WidgetStateProperty.resolveWith((states) {
+                              if (states.contains(WidgetState.selected)) {
+                                return colorScheme.onPrimaryContainer;
+                              }
+                              return colorScheme.onSurfaceVariant;
+                            }),
+                            side: WidgetStateProperty.all(BorderSide.none),
                           ),
-                          ButtonSegment<ThemeMode>(
-                            value: ThemeMode.dark,
-                            label: Text('Dark'),
-                            icon: Icon(Icons.dark_mode_rounded),
-                          ),
-                          ButtonSegment<ThemeMode>(
-                            value: ThemeMode.system,
-                            label: Text('System'),
-                            icon: Icon(Icons.auto_mode_rounded),
-                          ),
-                        ],
-                        selected: {themeProvider.themeMode},
-                        onSelectionChanged: (Set<ThemeMode> newSelection) {
-                          themeProvider.setThemeMode(newSelection.first);
-                        },
-                        style: ButtonStyle(
-                          backgroundColor: MaterialStateProperty.resolveWith((states) {
-                            if (states.contains(MaterialState.selected)) {
-                              return colorScheme.primaryContainer;
-                            }
-                            return Colors.transparent;
-                          }),
-                          foregroundColor: MaterialStateProperty.resolveWith((states) {
-                            if (states.contains(MaterialState.selected)) {
-                              return colorScheme.onPrimaryContainer;
-                            }
-                            return colorScheme.onSurfaceVariant;
-                          }),
                         ),
                       );
                     },
@@ -606,6 +334,167 @@ class _SettingsScreenState extends State<SettingsScreen> {
 
             const SizedBox(height: 32),
 
+            // Home Screen section
+            Text(
+              'Home Screen',
+              style: textTheme.titleMedium?.copyWith(
+                color: colorScheme.onBackground,
+                fontWeight: FontWeight.bold,
+              ),
+            ),
+            const SizedBox(height: 8),
+            Text(
+              'Choose which rows to display on the home screen',
+              style: textTheme.bodySmall?.copyWith(
+                color: colorScheme.onBackground.withOpacity(0.6),
+              ),
+            ),
+            const SizedBox(height: 16),
+
+            // Main rows section
+            Container(
+              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+              decoration: BoxDecoration(
+                color: colorScheme.surfaceVariant.withOpacity(0.3),
+                borderRadius: BorderRadius.circular(12),
+              ),
+              child: Column(
+                children: [
+                  SwitchListTile(
+                    title: Text(
+                      'Recently Played',
+                      style: TextStyle(color: colorScheme.onSurface),
+                    ),
+                    subtitle: Text(
+                      'Show recently played albums',
+                      style: TextStyle(color: colorScheme.onSurface.withOpacity(0.6), fontSize: 12),
+                    ),
+                    value: _showRecentAlbums,
+                    onChanged: (value) {
+                      setState(() => _showRecentAlbums = value);
+                      SettingsService.setShowRecentAlbums(value);
+                    },
+                    activeColor: colorScheme.primary,
+                    contentPadding: EdgeInsets.zero,
+                  ),
+                  Divider(color: colorScheme.outline.withOpacity(0.2), height: 1),
+                  SwitchListTile(
+                    title: Text(
+                      'Discover Artists',
+                      style: TextStyle(color: colorScheme.onSurface),
+                    ),
+                    subtitle: Text(
+                      'Show random artists to discover',
+                      style: TextStyle(color: colorScheme.onSurface.withOpacity(0.6), fontSize: 12),
+                    ),
+                    value: _showDiscoverArtists,
+                    onChanged: (value) {
+                      setState(() => _showDiscoverArtists = value);
+                      SettingsService.setShowDiscoverArtists(value);
+                    },
+                    activeColor: colorScheme.primary,
+                    contentPadding: EdgeInsets.zero,
+                  ),
+                  Divider(color: colorScheme.outline.withOpacity(0.2), height: 1),
+                  SwitchListTile(
+                    title: Text(
+                      'Discover Albums',
+                      style: TextStyle(color: colorScheme.onSurface),
+                    ),
+                    subtitle: Text(
+                      'Show random albums to discover',
+                      style: TextStyle(color: colorScheme.onSurface.withOpacity(0.6), fontSize: 12),
+                    ),
+                    value: _showDiscoverAlbums,
+                    onChanged: (value) {
+                      setState(() => _showDiscoverAlbums = value);
+                      SettingsService.setShowDiscoverAlbums(value);
+                    },
+                    activeColor: colorScheme.primary,
+                    contentPadding: EdgeInsets.zero,
+                  ),
+                ],
+              ),
+            ),
+
+            const SizedBox(height: 16),
+
+            Text(
+              'Favorites',
+              style: textTheme.bodySmall?.copyWith(
+                color: colorScheme.onBackground.withOpacity(0.6),
+              ),
+            ),
+            const SizedBox(height: 8),
+
+            // Favorites rows section
+            Container(
+              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+              decoration: BoxDecoration(
+                color: colorScheme.surfaceVariant.withOpacity(0.3),
+                borderRadius: BorderRadius.circular(12),
+              ),
+              child: Column(
+                children: [
+                  SwitchListTile(
+                    title: Text(
+                      'Favorite Albums',
+                      style: TextStyle(color: colorScheme.onSurface),
+                    ),
+                    subtitle: Text(
+                      'Show a row of your favorite albums',
+                      style: TextStyle(color: colorScheme.onSurface.withOpacity(0.6), fontSize: 12),
+                    ),
+                    value: _showFavoriteAlbums,
+                    onChanged: (value) {
+                      setState(() => _showFavoriteAlbums = value);
+                      SettingsService.setShowFavoriteAlbums(value);
+                    },
+                    activeColor: colorScheme.primary,
+                    contentPadding: EdgeInsets.zero,
+                  ),
+                  Divider(color: colorScheme.outline.withOpacity(0.2), height: 1),
+                  SwitchListTile(
+                    title: Text(
+                      'Favorite Artists',
+                      style: TextStyle(color: colorScheme.onSurface),
+                    ),
+                    subtitle: Text(
+                      'Show a row of your favorite artists',
+                      style: TextStyle(color: colorScheme.onSurface.withOpacity(0.6), fontSize: 12),
+                    ),
+                    value: _showFavoriteArtists,
+                    onChanged: (value) {
+                      setState(() => _showFavoriteArtists = value);
+                      SettingsService.setShowFavoriteArtists(value);
+                    },
+                    activeColor: colorScheme.primary,
+                    contentPadding: EdgeInsets.zero,
+                  ),
+                  Divider(color: colorScheme.outline.withOpacity(0.2), height: 1),
+                  SwitchListTile(
+                    title: Text(
+                      'Favorite Tracks',
+                      style: TextStyle(color: colorScheme.onSurface),
+                    ),
+                    subtitle: Text(
+                      'Show a row of your favorite tracks',
+                      style: TextStyle(color: colorScheme.onSurface.withOpacity(0.6), fontSize: 12),
+                    ),
+                    value: _showFavoriteTracks,
+                    onChanged: (value) {
+                      setState(() => _showFavoriteTracks = value);
+                      SettingsService.setShowFavoriteTracks(value);
+                    },
+                    activeColor: colorScheme.primary,
+                    contentPadding: EdgeInsets.zero,
+                  ),
+                ],
+              ),
+            ),
+
+            const SizedBox(height: 32),
+
             Text(
               'Metadata APIs (Optional)',
               style: textTheme.titleMedium?.copyWith(
@@ -615,7 +504,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),
               ),
@@ -663,7 +552,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,
@@ -699,7 +588,7 @@ class _SettingsScreenState extends State<SettingsScreen> {
             SizedBox(
               width: double.infinity,
               height: 50,
-              child: OutlinedButton.icon(
+              child: FilledButton.tonalIcon(
                 onPressed: () {
                   Navigator.push(
                     context,
@@ -710,9 +599,9 @@ class _SettingsScreenState extends State<SettingsScreen> {
                 },
                 icon: const Icon(Icons.bug_report_rounded),
                 label: const Text('View Debug Logs'),
-                style: OutlinedButton.styleFrom(
-                  foregroundColor: colorScheme.onBackground,
-                  side: BorderSide(color: colorScheme.outline),
+                style: FilledButton.styleFrom(
+                  backgroundColor: colorScheme.surfaceVariant.withOpacity(0.5),
+                  foregroundColor: colorScheme.onSurfaceVariant,
                   shape: RoundedRectangleBorder(
                     borderRadius: BorderRadius.circular(12),
                   ),
@@ -720,53 +609,7 @@ class _SettingsScreenState extends State<SettingsScreen> {
               ),
             ),
 
-            const SizedBox(height: 32),
-
-            Container(
-              padding: const EdgeInsets.all(16),
-              decoration: BoxDecoration(
-                color: colorScheme.surfaceVariant.withOpacity(0.1),
-                borderRadius: BorderRadius.circular(12),
-                border: Border.all(
-                  color: colorScheme.outline.withOpacity(0.3),
-                ),
-              ),
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  Row(
-                    children: [
-                      Icon(
-                        Icons.info_outline_rounded,
-                        color: colorScheme.onSurfaceVariant,
-                        size: 20,
-                      ),
-                      const SizedBox(width: 8),
-                      Text(
-                        'Connection Info',
-                        style: textTheme.titleSmall?.copyWith(
-                          color: colorScheme.onSurface,
-                          fontWeight: FontWeight.bold,
-                        ),
-                      ),
-                    ],
-                  ),
-                  const SizedBox(height: 12),
-                  Text(
-                    '• Default ports: 443 for HTTPS, 8095 for HTTP\n'
-                    '• You can override the port in the WebSocket Port field\n'
-                    '• Use domain name or IP address for server\n'
-                    '• Make sure your device can reach the server\n'
-                    '• Check debug logs if connection fails',
-                    style: textTheme.bodySmall?.copyWith(
-                      color: colorScheme.onSurfaceVariant,
-                      height: 1.5,
-                    ),
-                  ),
-                ],
-              ),
-            ),
-            const SizedBox(height: 32),
+            SizedBox(height: BottomSpacing.navBarOnly), // Space for bottom nav bar
           ],
         ),
       ),
@@ -776,8 +619,10 @@ class _SettingsScreenState extends State<SettingsScreen> {
   IconData _getStatusIcon(MAConnectionState state) {
     switch (state) {
       case MAConnectionState.connected:
+      case MAConnectionState.authenticated:
         return Icons.check_circle_rounded;
       case MAConnectionState.connecting:
+      case MAConnectionState.authenticating:
         return Icons.sync_rounded;
       case MAConnectionState.error:
         return Icons.error_rounded;
@@ -789,8 +634,10 @@ class _SettingsScreenState extends State<SettingsScreen> {
   Color _getStatusColor(MAConnectionState state, ColorScheme colorScheme) {
     switch (state) {
       case MAConnectionState.connected:
+      case MAConnectionState.authenticated:
         return Colors.green;
       case MAConnectionState.connecting:
+      case MAConnectionState.authenticating:
         return Colors.orange;
       case MAConnectionState.error:
         return colorScheme.error;
@@ -802,8 +649,10 @@ class _SettingsScreenState extends State<SettingsScreen> {
   String _getStatusText(MAConnectionState state) {
     switch (state) {
       case MAConnectionState.connected:
+      case MAConnectionState.authenticated:
         return 'Connected';
       case MAConnectionState.connecting:
+      case MAConnectionState.authenticating:
         return 'Connecting...';
       case MAConnectionState.error:
         return 'Connection Error';

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 = false; // Disabled for release - enable for debugging animation jank
+
+  // 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/audio/massiv_audio_handler.dart

@@ -0,0 +1,296 @@
+import 'package:audio_service/audio_service.dart';
+import 'package:audio_session/audio_session.dart';
+import 'package:just_audio/just_audio.dart';
+import '../debug_logger.dart';
+import '../auth/auth_manager.dart';
+
+/// Custom AudioHandler for Ensemble that provides full control over
+/// notification actions and metadata updates.
+class MassivAudioHandler extends BaseAudioHandler with SeekHandler {
+  final AudioPlayer _player = AudioPlayer();
+  final AuthManager authManager;
+  final _logger = DebugLogger();
+
+  // Track current metadata separately from what's in the notification
+  // This allows us to update the notification when metadata arrives late
+  MediaItem? _currentMediaItem;
+
+  // Callbacks for actions (wired up by MusicAssistantProvider)
+  Function()? onSkipToNext;
+  Function()? onSkipToPrevious;
+  Function()? onPlay;
+  Function()? onPause;
+  Function()? onSwitchPlayer;
+
+  // Track whether we're in remote control mode (controlling MA player, not playing locally)
+  bool _isRemoteMode = false;
+
+  // Custom control for switching players (uses stop action with custom icon)
+  static const _switchPlayerControl = MediaControl(
+    androidIcon: 'drawable/ic_switch_player',
+    label: 'Switch Player',
+    action: MediaAction.stop,
+  );
+
+  MassivAudioHandler({required this.authManager}) {
+    _init();
+  }
+
+  Future<void> _init() async {
+    // Configure audio session
+    final session = await AudioSession.instance;
+    await session.configure(const AudioSessionConfiguration.music());
+
+    // Handle audio interruptions
+    session.interruptionEventStream.listen((event) {
+      if (event.begin) {
+        switch (event.type) {
+          case AudioInterruptionType.duck:
+            _player.setVolume(0.5);
+            break;
+          case AudioInterruptionType.pause:
+          case AudioInterruptionType.unknown:
+            pause();
+            break;
+        }
+      } else {
+        switch (event.type) {
+          case AudioInterruptionType.duck:
+            _player.setVolume(1.0);
+            break;
+          case AudioInterruptionType.pause:
+            play();
+            break;
+          case AudioInterruptionType.unknown:
+            break;
+        }
+      }
+    });
+
+    // Handle becoming noisy (headphones unplugged)
+    session.becomingNoisyEventStream.listen((_) {
+      pause();
+    });
+
+    // Broadcast playback state changes
+    _player.playbackEventStream.listen(_broadcastState);
+
+    // Broadcast current media item changes
+    _player.currentIndexStream.listen((_) {
+      if (_currentMediaItem != null) {
+        mediaItem.add(_currentMediaItem);
+      }
+    });
+  }
+
+  /// Broadcast the current playback state to the system
+  void _broadcastState(PlaybackEvent event) {
+    final playing = _player.playing;
+
+    playbackState.add(playbackState.value.copyWith(
+      // Configure notification action buttons
+      controls: [
+        MediaControl.skipToPrevious,
+        if (playing) MediaControl.pause else MediaControl.play,
+        MediaControl.skipToNext,
+        _switchPlayerControl, // Switch player button
+      ],
+      // System-level actions (for headphones, car stereos, etc.)
+      systemActions: const {
+        MediaAction.seek,
+        MediaAction.seekForward,
+        MediaAction.seekBackward,
+        MediaAction.play,
+        MediaAction.pause,
+        MediaAction.stop,
+        MediaAction.skipToNext,
+        MediaAction.skipToPrevious,
+      },
+      // Which buttons to show in compact notification (max 3)
+      // Show: play/pause (1), skip-next (2), switch-player (3)
+      androidCompactActionIndices: const [1, 2, 3],
+      processingState: {
+        ProcessingState.idle: AudioProcessingState.idle,
+        ProcessingState.loading: AudioProcessingState.loading,
+        ProcessingState.buffering: AudioProcessingState.buffering,
+        ProcessingState.ready: AudioProcessingState.ready,
+        ProcessingState.completed: AudioProcessingState.completed,
+      }[_player.processingState]!,
+      playing: playing,
+      updatePosition: _player.position,
+      bufferedPosition: _player.bufferedPosition,
+      speed: _player.speed,
+    ));
+  }
+
+  // --- Playback control methods ---
+
+  @override
+  Future<void> play() async {
+    if (_isRemoteMode) {
+      onPlay?.call();
+    } else {
+      await _player.play();
+    }
+  }
+
+  @override
+  Future<void> pause() async {
+    if (_isRemoteMode) {
+      onPause?.call();
+    } else {
+      await _player.pause();
+    }
+  }
+
+  @override
+  Future<void> stop() async {
+    // Stop action is used for switching players (both local and remote modes)
+    onSwitchPlayer?.call();
+    // Note: We don't actually stop playback - this button is repurposed for player switching
+  }
+
+  @override
+  Future<void> seek(Duration position) => _player.seek(position);
+
+  @override
+  Future<void> skipToNext() async {
+    onSkipToNext?.call();
+  }
+
+  @override
+  Future<void> skipToPrevious() async {
+    onSkipToPrevious?.call();
+  }
+
+  // --- Custom methods for Ensemble ---
+
+  /// Play a URL with the given metadata
+  Future<void> playUrl(String url, MediaItem item, {Map<String, String>? headers}) async {
+    _currentMediaItem = item;
+    mediaItem.add(item);
+
+    try {
+      final source = AudioSource.uri(
+        Uri.parse(url),
+        headers: headers,
+        tag: item,
+      );
+
+      await _player.setAudioSource(source);
+      await _player.play();
+    } catch (e) {
+      _logger.log('MassivAudioHandler: Error playing URL: $e');
+      rethrow;
+    }
+  }
+
+  /// Update the current media item (for notification display)
+  /// This can be called when metadata arrives after playback starts
+  @override
+  Future<void> updateMediaItem(MediaItem item) async {
+    _currentMediaItem = item;
+    mediaItem.add(item);
+  }
+
+  /// Set volume (0.0 to 1.0)
+  Future<void> setVolume(double volume) async {
+    await _player.setVolume(volume.clamp(0.0, 1.0));
+  }
+
+  /// Set remote playback state (for controlling MA players without local playback)
+  /// This shows the notification and responds to media controls without playing audio locally.
+  void setRemotePlaybackState({
+    required MediaItem item,
+    required bool playing,
+    Duration position = Duration.zero,
+    Duration? duration,
+  }) {
+    _isRemoteMode = true;
+    _currentMediaItem = item;
+    mediaItem.add(item);
+
+    playbackState.add(playbackState.value.copyWith(
+      controls: [
+        MediaControl.skipToPrevious,
+        if (playing) MediaControl.pause else MediaControl.play,
+        MediaControl.skipToNext,
+        _switchPlayerControl,
+      ],
+      systemActions: const {
+        MediaAction.play,
+        MediaAction.pause,
+        MediaAction.skipToNext,
+        MediaAction.skipToPrevious,
+        MediaAction.stop,
+      },
+      // Which buttons to show in compact notification (max 3)
+      // Show: play/pause (1), skip-next (2), switch-player (3)
+      androidCompactActionIndices: const [1, 2, 3],
+      processingState: AudioProcessingState.ready,
+      playing: playing,
+      updatePosition: position,
+      bufferedPosition: duration ?? Duration.zero,
+      speed: 1.0,
+    ));
+  }
+
+  /// Clear remote playback state and hide notification
+  void clearRemotePlaybackState() {
+    _isRemoteMode = false;
+    _currentMediaItem = null;
+
+    playbackState.add(playbackState.value.copyWith(
+      controls: [],
+      processingState: AudioProcessingState.idle,
+      playing: false,
+    ));
+  }
+
+  /// Switch to local playback mode (when builtin player is selected)
+  void setLocalMode() {
+    _isRemoteMode = false;
+  }
+
+  /// Update notification for local mode (builtin player) without switching to remote mode
+  /// This allows the notification to show the correct player/track info while keeping
+  /// pause working for local audio playback.
+  void updateLocalModeNotification({
+    required MediaItem item,
+    required bool playing,
+    Duration? duration,
+  }) {
+    // Keep local mode - DON'T set _isRemoteMode = true
+    // Only update mediaItem if it changed - avoid unnecessary notification refreshes
+    // that cause blinking. The playbackState is managed by _broadcastState which
+    // responds to actual player events.
+    if (_currentMediaItem?.id != item.id ||
+        _currentMediaItem?.title != item.title ||
+        _currentMediaItem?.artist != item.artist) {
+      _currentMediaItem = item;
+      mediaItem.add(item);
+    }
+  }
+
+  bool get isRemoteMode => _isRemoteMode;
+
+  // --- Expose player state for provider ---
+
+  bool get isPlaying => _player.playing;
+
+  Duration get position => _player.position;
+
+  Duration get duration => _player.duration ?? Duration.zero;
+
+  double get volume => _player.volume;
+
+  PlayerState get playerState => _player.playerState;
+
+  Stream<PlayerState> get playerStateStream => _player.playerStateStream;
+
+  Stream<Duration> get positionStream => _player.positionStream;
+
+  Stream<Duration?> get durationStream => _player.durationStream;
+
+  MediaItem? get currentMediaItem => _currentMediaItem;
+}

lib/services/auth/auth_manager.dart

@@ -1,8 +1,10 @@
+import 'dart:convert';
 import 'package:http/http.dart' as http;
 import 'auth_strategy.dart';
 import 'no_auth_strategy.dart';
 import 'basic_auth_strategy.dart';
 import 'authelia_strategy.dart';
+import 'ma_auth_strategy.dart';
 import '../debug_logger.dart';
 
 /// Central authentication manager
@@ -15,6 +17,7 @@ class AuthManager {
     NoAuthStrategy(),
     BasicAuthStrategy(),
     AutheliaStrategy(),
+    MusicAssistantAuthStrategy(),
   ];
 
   AuthStrategy? _currentStrategy;
@@ -34,10 +37,32 @@ class AuthManager {
     // Normalize URL
     var baseUrl = serverUrl;
     if (!baseUrl.startsWith('http://') && !baseUrl.startsWith('https://')) {
-      baseUrl = 'https://$baseUrl';
+      // Use http for local IPs, https for domains
+      if (baseUrl.startsWith('192.') ||
+          baseUrl.startsWith('10.') ||
+          baseUrl.startsWith('172.') ||
+          baseUrl == 'localhost' ||
+          baseUrl.startsWith('127.')) {
+        baseUrl = 'http://$baseUrl';
+      } else {
+        baseUrl = 'https://$baseUrl';
+      }
     }
 
-    // Try no-auth first (fastest and most common for local deployments)
+    // First, check if this is a Music Assistant server with native auth
+    _logger.log('Checking for Music Assistant native auth...');
+    final maAuthResult = await _checkMusicAssistantAuth(baseUrl);
+    if (maAuthResult != null) {
+      if (maAuthResult == 'required') {
+        _logger.log('✓ Detected Music Assistant native authentication');
+        return _strategies.firstWhere((s) => s.name == 'music_assistant');
+      } else if (maAuthResult == 'none') {
+        _logger.log('✓ Music Assistant server - no auth required');
+        return _strategies.firstWhere((s) => s.name == 'none');
+      }
+    }
+
+    // Try no-auth (direct connection without any auth)
     _logger.log('Testing no-auth strategy...');
     final canConnect = await _canConnectWithoutAuth(baseUrl);
     _logger.log('No-auth result: $canConnect');
@@ -47,7 +72,7 @@ class AuthManager {
       return _strategies.firstWhere((s) => s.name == 'none');
     }
 
-    // Probe server for auth requirements
+    // Probe server for auth requirements (reverse proxy scenarios)
     try {
       _logger.log('Probing server for auth headers...');
       // Test root endpoint
@@ -83,10 +108,10 @@ class AuthManager {
           return _strategies.firstWhere((s) => s.name == 'basic');
         }
 
-        // Check for Bearer token (future: Home Assistant or OAuth)
+        // Check for Bearer token - could be MA native auth
         if (wwwAuth != null && wwwAuth.contains('bearer')) {
-          _logger.log('⚠️ Detected Bearer auth (not yet supported)');
-          return null;
+          _logger.log('✓ Detected Bearer auth - likely Music Assistant native');
+          return _strategies.firstWhere((s) => s.name == 'music_assistant');
         }
       }
 
@@ -106,6 +131,85 @@ class AuthManager {
     return null;
   }
 
+  /// Check if server is a Music Assistant server with native auth
+  /// Returns 'required' if auth needed, 'none' if no auth, null if not MA or error
+  Future<String?> _checkMusicAssistantAuth(String baseUrl) async {
+    try {
+      final uri = Uri.parse(baseUrl);
+      final apiUrl = Uri(
+        scheme: uri.scheme,
+        host: uri.host,
+        port: uri.hasPort ? uri.port : (uri.scheme == 'https' ? null : 8095),
+        path: '/api',
+      );
+
+      _logger.log('Checking MA API at: $apiUrl');
+
+      // Try to get server info - this tells us if auth is required
+      // Note: The command is just 'info', not 'server/info'
+      final response = await http.post(
+        apiUrl,
+        headers: {'Content-Type': 'application/json'},
+        body: jsonEncode({
+          'command': 'info',
+        }),
+      ).timeout(const Duration(seconds: 5));
+
+      _logger.log('MA API response: ${response.statusCode}');
+      _logger.log('MA API body: ${response.body}');
+
+      // 401/403 means auth required - check this first
+      if (response.statusCode == 401 || response.statusCode == 403) {
+        _logger.log('MA API returned ${response.statusCode} - auth required');
+        return 'required';
+      }
+
+      // Also check for "Authentication required" text response
+      if (response.body.toLowerCase().contains('authentication required')) {
+        _logger.log('MA API returned auth required message');
+        return 'required';
+      }
+
+      if (response.statusCode == 200) {
+        // Try to parse as JSON
+        try {
+          final data = jsonDecode(response.body) as Map<String, dynamic>;
+
+          // Check if we got server info successfully (no auth required)
+          if (data.containsKey('result')) {
+            final result = data['result'] as Map<String, dynamic>?;
+            final serverVersion = result?['server_version'] as String?;
+            final schemaVersion = result?['schema_version'] as int?;
+
+            if (serverVersion != null) {
+              _logger.log('MA server version: $serverVersion, schema: $schemaVersion');
+
+              // Schema 28+ requires auth, but if we got here without auth, it's not enabled
+              return 'none';
+            }
+          }
+
+          // Check for auth error in JSON
+          if (data.containsKey('error_code')) {
+            final errorCode = data['error_code'] as int?;
+            // Error 50 = AuthenticationRequired
+            if (errorCode == 50) {
+              _logger.log('MA server requires authentication (error 50)');
+              return 'required';
+            }
+          }
+        } catch (jsonError) {
+          _logger.log('MA API response not JSON: $jsonError');
+        }
+      }
+
+      return null;
+    } catch (e) {
+      _logger.log('MA auth check error: $e');
+      return null;
+    }
+  }
+
   /// Test if server is accessible without authentication
   Future<bool> _canConnectWithoutAuth(String serverUrl) async {
     try {

lib/services/auth/ma_auth_strategy.dart

@@ -0,0 +1,254 @@
+import 'dart:convert';
+import 'package:http/http.dart' as http;
+import 'auth_strategy.dart';
+import '../debug_logger.dart';
+
+/// Music Assistant native authentication strategy
+/// Used when MA server has built-in authentication enabled (schema 28+)
+///
+/// Flow:
+/// 1. Connect WebSocket (receives server_info with auth requirements)
+/// 2. If auth required, login with username/password to get access token
+/// 3. Send 'auth' command with token to authenticate the session
+/// 4. Optionally create long-lived token for persistent storage
+class MusicAssistantAuthStrategy implements AuthStrategy {
+  final _logger = DebugLogger();
+
+  @override
+  String get name => 'music_assistant';
+
+  /// Login to Music Assistant and get an access token
+  /// This is called AFTER WebSocket connection is established
+  /// Returns credentials containing the access token
+  @override
+  Future<AuthCredentials?> login(
+    String serverUrl,
+    String username,
+    String password,
+  ) async {
+    try {
+      // Normalize server URL
+      var baseUrl = serverUrl;
+      if (!baseUrl.startsWith('http://') && !baseUrl.startsWith('https://')) {
+        // Determine protocol based on URL pattern
+        if (baseUrl.startsWith('192.') ||
+            baseUrl.startsWith('10.') ||
+            baseUrl.startsWith('172.') ||
+            baseUrl == 'localhost' ||
+            baseUrl.startsWith('127.')) {
+          baseUrl = 'http://$baseUrl';
+        } else {
+          baseUrl = 'https://$baseUrl';
+        }
+      }
+
+      _logger.log('🔐 Attempting Music Assistant login to $baseUrl');
+
+      // MA auth endpoint - POST /api with JSON-RPC style command
+      final uri = Uri.parse(baseUrl);
+      final apiUrl = Uri(
+        scheme: uri.scheme,
+        host: uri.host,
+        port: uri.hasPort ? uri.port : (uri.scheme == 'https' ? null : 8095),
+        path: '/api',
+      );
+
+      _logger.log('Auth API URL: $apiUrl');
+
+      // Login request to get access token
+      final response = await http.post(
+        apiUrl,
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: jsonEncode({
+          'command': 'auth/login',
+          'args': {
+            'username': username,
+            'password': password,
+          },
+        }),
+      ).timeout(const Duration(seconds: 10));
+
+      _logger.log('Auth response status: ${response.statusCode}');
+
+      if (response.statusCode == 200) {
+        final data = jsonDecode(response.body) as Map<String, dynamic>;
+
+        // Check for error in response
+        if (data.containsKey('error_code')) {
+          _logger.log('✗ Login failed: ${data['error_code']} - ${data['details']}');
+          return null;
+        }
+
+        // Extract access token from result
+        final result = data['result'] as Map<String, dynamic>?;
+        final accessToken = result?['access_token'] as String?;
+
+        if (accessToken != null) {
+          _logger.log('✓ Got access token from MA');
+
+          // Now try to create a long-lived token for persistent auth
+          final longLivedToken = await _createLongLivedToken(apiUrl, accessToken);
+
+          return AuthCredentials('music_assistant', {
+            'access_token': accessToken,
+            'long_lived_token': longLivedToken,
+            'username': username,
+            'server_url': baseUrl,
+          });
+        }
+
+        _logger.log('✗ No access token in response');
+        return null;
+      }
+
+      _logger.log('✗ Authentication failed: ${response.statusCode}');
+      _logger.log('Response body: ${response.body}');
+      return null;
+    } catch (e) {
+      _logger.log('✗ Login error: $e');
+      return null;
+    }
+  }
+
+  /// Create a long-lived token for persistent authentication
+  Future<String?> _createLongLivedToken(Uri apiUrl, String accessToken) async {
+    try {
+      _logger.log('Creating long-lived token...');
+
+      final response = await http.post(
+        apiUrl,
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': 'Bearer $accessToken',
+        },
+        body: jsonEncode({
+          'command': 'auth/create_token',
+          'args': {
+            'name': 'Ensemble Mobile App',
+          },
+        }),
+      ).timeout(const Duration(seconds: 10));
+
+      if (response.statusCode == 200) {
+        final data = jsonDecode(response.body) as Map<String, dynamic>;
+
+        if (!data.containsKey('error_code')) {
+          final result = data['result'] as Map<String, dynamic>?;
+          final token = result?['token'] as String?;
+
+          if (token != null) {
+            _logger.log('✓ Created long-lived token');
+            return token;
+          }
+        }
+      }
+
+      _logger.log('⚠️ Could not create long-lived token (non-fatal)');
+      return null;
+    } catch (e) {
+      _logger.log('⚠️ Long-lived token creation failed: $e (non-fatal)');
+      return null;
+    }
+  }
+
+  @override
+  Future<bool> validateCredentials(
+    String serverUrl,
+    AuthCredentials credentials,
+  ) async {
+    // Try long-lived token first, then access token
+    final longLivedToken = credentials.data['long_lived_token'] as String?;
+    final accessToken = credentials.data['access_token'] as String?;
+
+    final token = longLivedToken ?? accessToken;
+    if (token == null) return false;
+
+    try {
+      var baseUrl = serverUrl;
+      if (!baseUrl.startsWith('http://') && !baseUrl.startsWith('https://')) {
+        baseUrl = 'https://$baseUrl';
+      }
+
+      final uri = Uri.parse(baseUrl);
+      final apiUrl = Uri(
+        scheme: uri.scheme,
+        host: uri.host,
+        port: uri.hasPort ? uri.port : (uri.scheme == 'https' ? null : 8095),
+        path: '/api',
+      );
+
+      // Test token by getting server info
+      final response = await http.post(
+        apiUrl,
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': 'Bearer $token',
+        },
+        body: jsonEncode({
+          'command': 'server/info',
+        }),
+      ).timeout(const Duration(seconds: 5));
+
+      if (response.statusCode == 200) {
+        final data = jsonDecode(response.body) as Map<String, dynamic>;
+        return !data.containsKey('error_code');
+      }
+
+      return false;
+    } catch (e) {
+      _logger.log('Token validation failed: $e');
+      return false;
+    }
+  }
+
+  @override
+  Map<String, dynamic> buildWebSocketHeaders(AuthCredentials credentials) {
+    // MA auth happens AFTER WebSocket connection, not via headers
+    // But we can still include token if available for initial handshake
+    final longLivedToken = credentials.data['long_lived_token'] as String?;
+    final accessToken = credentials.data['access_token'] as String?;
+
+    final token = longLivedToken ?? accessToken;
+    if (token != null) {
+      return {
+        'Authorization': 'Bearer $token',
+      };
+    }
+
+    return {};
+  }
+
+  @override
+  Map<String, String> buildStreamingHeaders(AuthCredentials credentials) {
+    final longLivedToken = credentials.data['long_lived_token'] as String?;
+    final accessToken = credentials.data['access_token'] as String?;
+
+    final token = longLivedToken ?? accessToken;
+    if (token != null) {
+      return {
+        'Authorization': 'Bearer $token',
+      };
+    }
+
+    return {};
+  }
+
+  @override
+  Map<String, dynamic> serializeCredentials(AuthCredentials credentials) {
+    return credentials.data;
+  }
+
+  @override
+  AuthCredentials deserializeCredentials(Map<String, dynamic> data) {
+    return AuthCredentials('music_assistant', data);
+  }
+
+  /// Get the best available token (prefer long-lived)
+  String? getToken(AuthCredentials credentials) {
+    final longLivedToken = credentials.data['long_lived_token'] as String?;
+    final accessToken = credentials.data['access_token'] as String?;
+    return longLivedToken ?? accessToken;
+  }
+}

lib/services/auth_service.dart

@@ -1,134 +0,0 @@
-import 'package:http/http.dart' as http;
-import 'dart:convert';
-import 'debug_logger.dart';
-import 'settings_service.dart';
-
-class AuthService {
-  final _logger = DebugLogger();
-
-  /// Authenticate with the server and get session cookie
-  Future<String?> login(String serverUrl, String username, String password) async {
-    try {
-      // Check if there's a separate auth server URL configured
-      final authServerUrl = await SettingsService.getAuthServerUrl();
-      final targetUrl = authServerUrl ?? serverUrl;
-
-      _logger.log('🔐 Attempting login to $targetUrl');
-
-      // Determine base URL
-      var baseUrl = targetUrl;
-      if (!baseUrl.startsWith('http://') && !baseUrl.startsWith('https://')) {
-        baseUrl = 'https://$baseUrl';
-      }
-
-      // Parse URL
-      final uri = Uri.parse(baseUrl);
-      final authUrl = Uri(
-        scheme: uri.scheme,
-        host: uri.host,
-        port: uri.hasPort ? uri.port : null,
-        path: '/api/firstfactor',
-      );
-
-      _logger.log('Auth URL: $authUrl');
-
-      // Use Authelia's firstfactor endpoint with POST
-      final response = await http.post(
-        authUrl,
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: jsonEncode({
-          'username': username,
-          'password': password,
-          'keepMeLoggedIn': true,
-        }),
-      ).timeout(const Duration(seconds: 10));
-
-      _logger.log('Auth response status: ${response.statusCode}');
-
-      // Check response status first - only proceed if successful
-      if (response.statusCode == 200) {
-        _logger.log('✓ Authentication successful');
-
-        // Check for session cookies
-        final cookies = response.headers['set-cookie'];
-        if (cookies != null && cookies.isNotEmpty) {
-          _logger.log('✓ Received session cookie');
-
-          // Extract authelia_session cookie if present
-          final sessionCookie = _extractSessionCookie(cookies);
-          if (sessionCookie != null) {
-            _logger.log('✓ Extracted session cookie');
-            await SettingsService.setAuthToken(sessionCookie);
-            return sessionCookie;
-          }
-        }
-
-        // If 200 but no cookie, might not need auth
-        return 'authenticated';
-      }
-
-      _logger.log('✗ Authentication failed: ${response.statusCode}');
-      _logger.log('Response body: ${response.body}');
-      return null;
-    } catch (e) {
-      _logger.log('✗ Login error: $e');
-      return null;
-    }
-  }
-
-  String? _extractSessionCookie(String setCookieHeader) {
-    // Parse Set-Cookie header to extract authelia_session value
-    final cookies = setCookieHeader.split(',');
-
-    for (final cookie in cookies) {
-      if (cookie.trim().startsWith('authelia_session=')) {
-        final parts = cookie.split(';');
-        if (parts.isNotEmpty) {
-          final value = parts[0].trim();
-          if (value.startsWith('authelia_session=')) {
-            return value.substring('authelia_session='.length);
-          }
-        }
-      }
-    }
-
-    return null;
-  }
-
-  /// Test if current credentials/token work
-  Future<bool> testAuthentication(String serverUrl) async {
-    try {
-      var baseUrl = serverUrl;
-      if (!baseUrl.startsWith('http://') && !baseUrl.startsWith('https://')) {
-        baseUrl = 'https://$baseUrl';
-      }
-
-      final uri = Uri.parse(baseUrl);
-      final testUrl = Uri(
-        scheme: uri.scheme,
-        host: uri.host,
-        port: uri.hasPort ? uri.port : null,
-        path: '/api/verify',
-      );
-
-      final token = await SettingsService.getAuthToken();
-      final headers = <String, String>{};
-
-      if (token != null && token != 'authenticated') {
-        headers['Cookie'] = 'authelia_session=$token';
-      }
-
-      final response = await http.get(
-        testUrl,
-        headers: headers,
-      ).timeout(const Duration(seconds: 5));
-
-      return response.statusCode == 200;
-    } catch (e) {
-      _logger.log('Auth test failed: $e');
-      return false;
-    }
-  }
-}

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,243 @@
+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 {
+  perf,   // Performance timing (for FPS diagnosis)
+  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 _maxLogs = 500;
+  final List<LogEntry> _entries = [];
+  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) {
-    final timestamp = DateTime.now().toIso8601String().substring(11, 23);
-    final logMessage = '[$timestamp] $message';
+  List<LogEntry> get entries => List.unmodifiable(_entries);
 
-    debugPrint(logMessage);
+  /// Legacy getter for backward compatibility
+  List<String> get logs => _entries.map((e) => e.formatted).toList();
 
-    _logs.add(logMessage);
-    if (_logs.length > _maxLogs) {
-      _logs.removeAt(0);
+  // Set to true to only log perf entries (for FPS diagnosis)
+  // Set to false for normal operation with full logging for user bug reports
+  static const bool _perfOnlyMode = false;
+
+  void _addEntry(LogLevel level, String message, {String? context}) {
+    // In perf-only mode, skip all non-perf logs
+    if (_perfOnlyMode && level != LogLevel.perf) {
+      return;
+    }
+
+    final entry = LogEntry(
+      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);
+  }
+
+  /// Performance logging - always prints to console for real-time monitoring
+  void perf(String message, {String? context}) {
+    _addEntry(LogLevel.perf, message, context: context);
+  }
+
+  /// Track build time of a widget
+  final Map<String, Stopwatch> _buildTimers = {};
+
+  void startBuild(String widgetName) {
+    _buildTimers[widgetName] = Stopwatch()..start();
+  }
+
+  void endBuild(String widgetName) {
+    final sw = _buildTimers.remove(widgetName);
+    if (sw != null) {
+      sw.stop();
+      if (sw.elapsedMilliseconds > 4) { // Only log if > 4ms (slow for 60fps)
+        perf('BUILD ${sw.elapsedMilliseconds}ms', context: widgetName);
+      }
+    }
+  }
+
+  /// Track frame times during scroll
+  Stopwatch? _frameTimer;
+  int _slowFrameCount = 0;
+  int _totalFrameCount = 0;
+
+  void startFrame() {
+    _frameTimer = Stopwatch()..start();
+  }
+
+  void endFrame() {
+    if (_frameTimer != null) {
+      _frameTimer!.stop();
+      _totalFrameCount++;
+      final ms = _frameTimer!.elapsedMilliseconds;
+      if (ms > 16) { // > 16ms means dropped frame at 60fps
+        _slowFrameCount++;
+        perf('SLOW FRAME ${ms}ms (${_slowFrameCount}/${_totalFrameCount} slow)', context: 'Scroll');
+      }
+    }
+  }
+
+  void resetFrameStats() {
+    _slowFrameCount = 0;
+    _totalFrameCount = 0;
+  }
+
   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/device_id_service.dart

@@ -0,0 +1,48 @@
+import 'package:shared_preferences/shared_preferences.dart';
+import 'package:uuid/uuid.dart';
+import 'debug_logger.dart';
+
+/// Service to generate unique per-installation player IDs
+/// Simplified to match KMP client pattern: single storage key, lazy generation
+/// This prevents the critical bug where multiple devices of the same model
+/// would share the same player ID and trigger playback on all devices
+class DeviceIdService {
+  static const String _keyLocalPlayerId = 'local_player_id';
+  static final _logger = DebugLogger();
+  static const _uuid = Uuid();
+
+  /// Get or generate a unique player ID for this installation
+  /// ID is generated once and persisted across app restarts
+  /// Format: ensemble_<uuid>
+  ///
+  /// This matches the KMP client pattern: generate on first access, store once
+  static Future<String> getOrCreateDevicePlayerId() async {
+    final prefs = await SharedPreferences.getInstance();
+
+    // Single source of truth - no complex migration logic
+    final existingId = prefs.getString(_keyLocalPlayerId);
+    if (existingId != null && existingId.startsWith('ensemble_')) {
+      _logger.log('Using existing player ID: $existingId');
+      return existingId;
+    }
+
+    // Generate new ID on first access
+    final playerId = 'ensemble_${_uuid.v4()}';
+    await prefs.setString(_keyLocalPlayerId, playerId);
+    _logger.log('Generated new player ID: $playerId');
+    return playerId;
+  }
+
+  /// Adopt an existing player ID (used when claiming a ghost player)
+  static Future<void> adoptPlayerId(String playerId) async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setString(_keyLocalPlayerId, playerId);
+    _logger.log('Adopted player ID: $playerId');
+  }
+
+  /// Check if this is a fresh installation (no player ID stored yet)
+  static Future<bool> isFreshInstallation() async {
+    final prefs = await SharedPreferences.getInstance();
+    return prefs.getString(_keyLocalPlayerId) == null;
+  }
+}

lib/services/error_handler.dart

@@ -71,6 +71,18 @@ class ErrorHandler {
       );
     }
 
+    // Unavailable content errors - these won't resolve with retry
+    if (errorStr.contains('no playable') ||
+        errorStr.contains('lack available providers') ||
+        errorStr.contains('no available providers')) {
+      return ErrorInfo(
+        type: ErrorType.playback,
+        userMessage: 'These tracks are unavailable. The music provider may not have them available for streaming.',
+        technicalMessage: error.toString(),
+        canRetry: false,
+      );
+    }
+
     // Playback errors
     if (errorStr.contains('queue') ||
         errorStr.contains('player') ||

lib/services/hardware_volume_service.dart

@@ -0,0 +1,86 @@
+import 'dart:async';
+import 'package:flutter/services.dart';
+import 'debug_logger.dart';
+
+/// Service to intercept hardware volume button presses
+/// and route them to the selected Music Assistant player.
+///
+/// For MA players: intercept buttons and send volume commands via API
+/// For builtin player: let native volume work (don't intercept)
+class HardwareVolumeService {
+  static final HardwareVolumeService _instance = HardwareVolumeService._internal();
+  factory HardwareVolumeService() => _instance;
+  HardwareVolumeService._internal();
+
+  static const _channel = MethodChannel('com.musicassistant.music_assistant/volume_buttons');
+  final _logger = DebugLogger();
+
+  final _volumeUpController = StreamController<void>.broadcast();
+  final _volumeDownController = StreamController<void>.broadcast();
+
+  Stream<void> get onVolumeUp => _volumeUpController.stream;
+  Stream<void> get onVolumeDown => _volumeDownController.stream;
+
+  bool _isListening = false;
+  bool get isListening => _isListening;
+
+  bool _isIntercepting = false;
+  bool get isIntercepting => _isIntercepting;
+
+  /// Initialize the service and start listening for volume button events
+  Future<void> init() async {
+    if (_isListening) return;
+
+    _channel.setMethodCallHandler((call) async {
+      switch (call.method) {
+        case 'volumeUp':
+          _volumeUpController.add(null);
+          break;
+        case 'volumeDown':
+          _volumeDownController.add(null);
+          break;
+      }
+    });
+
+    try {
+      await _channel.invokeMethod('startListening');
+      _isListening = true;
+      _isIntercepting = true;
+    } catch (e) {
+      _logger.error('Failed to start volume button listening', context: 'VolumeService', error: e);
+    }
+  }
+
+  /// Enable or disable volume button interception.
+  /// When disabled, hardware volume buttons control device volume normally.
+  /// When enabled, volume button events are sent to Flutter for MA player control.
+  Future<void> setIntercepting(bool intercept) async {
+    if (!_isListening || _isIntercepting == intercept) return;
+
+    try {
+      if (intercept) {
+        await _channel.invokeMethod('startListening');
+        _isIntercepting = true;
+      } else {
+        await _channel.invokeMethod('stopListening');
+        _isIntercepting = false;
+      }
+    } catch (e) {
+      _logger.error('Failed to set volume interception', context: 'VolumeService', error: e);
+    }
+  }
+
+  /// Stop listening for volume button events
+  Future<void> dispose() async {
+    if (!_isListening) return;
+
+    try {
+      await _channel.invokeMethod('stopListening');
+      _isListening = false;
+      _isIntercepting = false;
+      _logger.info('Hardware volume button listening stopped', context: 'VolumeService');
+    } catch (e) {
+      _logger.error('Failed to stop volume button listening', context: 'VolumeService', error: e);
+    }
+  }
+}

lib/services/local_player_service.dart

@@ -1,135 +1,181 @@
 import 'dart:async';
-import 'package:audio_session/audio_session.dart';
+import 'package:audio_service/audio_service.dart';
 import 'package:just_audio/just_audio.dart';
-import 'settings_service.dart';
 import 'debug_logger.dart';
 import 'auth/auth_manager.dart';
+import '../main.dart' show audioHandler;
 
+/// Metadata for the currently playing track
+class TrackMetadata {
+  final String title;
+  final String artist;
+  final String? album;
+  final String? artworkUrl;
+  final Duration? duration;
+
+  TrackMetadata({
+    required this.title,
+    required this.artist,
+    this.album,
+    this.artworkUrl,
+    this.duration,
+  });
+
+  /// Convert to MediaItem for audio_service
+  MediaItem toMediaItem(String id) {
+    return MediaItem(
+      id: id,
+      title: title,
+      artist: artist,
+      album: album ?? '',
+      duration: duration,
+      artUri: artworkUrl != null ? Uri.tryParse(artworkUrl!) : null,
+    );
+  }
+}
+
+/// Service that wraps the global MassivAudioHandler for local playback.
+/// This maintains the same interface as before for compatibility with
+/// MusicAssistantProvider.
 class LocalPlayerService {
   final AuthManager authManager;
-  final _player = AudioPlayer();
   final _logger = DebugLogger();
   bool _isInitialized = false;
 
+  // Current track metadata for notifications
+  TrackMetadata? _currentMetadata;
+
   LocalPlayerService(this.authManager);
 
-  // Expose player state streams
-  Stream<PlayerState> get playerStateStream => _player.playerStateStream;
-  Stream<Duration> get positionStream => _player.positionStream;
-  Stream<Duration?> get durationStream => _player.durationStream;
-  
+  // Expose player state streams from the global handler
+  Stream<PlayerState> get playerStateStream {
+    return audioHandler.playerStateStream;
+  }
+
+  Stream<Duration> get positionStream {
+    return audioHandler.positionStream;
+  }
+
+  Stream<Duration?> get durationStream {
+    return audioHandler.durationStream;
+  }
+
   // Current state getters
-  bool get isPlaying => _player.playing;
-  double get volume => _player.volume;
-  PlayerState get playerState => _player.playerState;
-  Duration get position => _player.position;
-  Duration get duration => _player.duration ?? Duration.zero;
+  bool get isPlaying {
+    return audioHandler.isPlaying;
+  }
+
+  double get volume {
+    return audioHandler.volume;
+  }
+
+  PlayerState get playerState {
+    return audioHandler.playerState;
+  }
+
+  Duration get position {
+    return audioHandler.position;
+  }
+
+  Duration get duration {
+    return audioHandler.duration;
+  }
 
   Future<void> initialize() async {
     if (_isInitialized) return;
 
-    try {
-      final session = await AudioSession.instance;
-      await session.configure(const AudioSessionConfiguration.music());
-      
-      // Default to 100% volume
-      await _player.setVolume(1.0);
-      
-      // Log playback errors
-      _player.playerStateStream.listen((state) {
-        if (state.processingState == ProcessingState.completed) {
-          _logger.log('LocalPlayerService: Playback completed');
-        }
-      });
-      
-      _player.playbackEventStream.listen((event) {}, onError: (Object e, StackTrace stackTrace) {
-        _logger.log('LocalPlayerService: Playback error: $e');
-      });
-      
-      // Handle audio interruptions (e.g. phone calls)
-      session.interruptionEventStream.listen((event) {
-        if (event.begin) {
-          switch (event.type) {
-            case AudioInterruptionType.duck:
-              _player.setVolume(0.5);
-              break;
-            case AudioInterruptionType.pause:
-            case AudioInterruptionType.unknown:
-              _player.pause();
-              break;
-          }
-        } else {
-          switch (event.type) {
-            case AudioInterruptionType.duck:
-              _player.setVolume(1.0);
-              break;
-            case AudioInterruptionType.pause:
-              _player.play();
-              break;
-            case AudioInterruptionType.unknown:
-              break;
-          }
-        }
-      });
+    // The audioHandler is already initialized in main.dart
+    // Just mark ourselves as initialized
+    _isInitialized = true;
+  }
 
-      _isInitialized = true;
-      _logger.log('LocalPlayerService initialized');
-    } catch (e) {
-      _logger.log('Error initializing LocalPlayerService: $e');
-    }
+  /// Set metadata for the current track (for notification display)
+  void setCurrentTrackMetadata(TrackMetadata metadata) {
+    _currentMetadata = metadata;
   }
 
   /// Play a stream URL with authentication headers
   Future<void> playUrl(String url) async {
-    try {
-      _logger.log('LocalPlayerService: Loading URL: $url');
+    // Ensure player is initialized before playing
+    if (!_isInitialized) {
+      await initialize();
+    }
 
+    try {
       // Get auth headers from AuthManager
       final headers = authManager.getStreamingHeaders();
 
-      if (headers.isNotEmpty) {
-        _logger.log('LocalPlayerService: Added auth headers to request: ${headers.keys.join(', ')}');
-      } else {
-        _logger.log('LocalPlayerService: No authentication needed for streaming');
-      }
-
-      // Create audio source with headers
-      final source = AudioSource.uri(
-        Uri.parse(url),
-        headers: headers.isNotEmpty ? headers : null,
-        tag: 'Music Assistant Stream',
+      // Create MediaItem from current metadata
+      final mediaItem = _currentMetadata?.toMediaItem(url) ?? MediaItem(
+        id: url,
+        title: 'Unknown Track',
+        artist: 'Unknown Artist',
       );
 
-      await _player.setAudioSource(source);
-      await _player.play();
-    } catch (e) {
+      await audioHandler.playUrl(
+        url,
+        mediaItem,
+        headers: headers.isNotEmpty ? headers : null,
+      );
+    } catch (e, stackTrace) {
       _logger.log('LocalPlayerService: Error playing URL: $e');
       rethrow;
     }
   }
 
+  /// Update the notification with new track info (without reloading audio)
+  void updateNotification({
+    required String id,
+    required String title,
+    String? artist,
+    String? album,
+    String? artworkUrl,
+    Duration? duration,
+  }) {
+    _currentMetadata = TrackMetadata(
+      title: title,
+      artist: artist ?? 'Unknown Artist',
+      album: album,
+      artworkUrl: artworkUrl,
+      duration: duration,
+    );
+  }
+
+  /// Update the notification while audio is already playing.
+  /// With audio_service, we can update the MediaItem directly without
+  /// re-setting the audio source.
+  Future<void> updateNotificationWhilePlaying(TrackMetadata metadata) async {
+    final currentItem = audioHandler.currentMediaItem;
+    final id = currentItem?.id ?? 'unknown';
+
+    final newMediaItem = metadata.toMediaItem(id);
+    audioHandler.updateMediaItem(newMediaItem);
+    _currentMetadata = metadata;
+  }
+
   Future<void> play() async {
-    await _player.play();
+    await audioHandler.play();
   }
 
   Future<void> pause() async {
-    await _player.pause();
+    await audioHandler.pause();
   }
 
   Future<void> stop() async {
-    await _player.stop();
+    await audioHandler.stop();
   }
 
   Future<void> seek(Duration position) async {
-    await _player.seek(position);
+    await audioHandler.seek(position);
   }
 
   /// Set volume (0.0 to 1.0)
   Future<void> setVolume(double volume) async {
-    await _player.setVolume(volume.clamp(0.0, 1.0));
+    await audioHandler.setVolume(volume.clamp(0.0, 1.0));
   }
 
   void dispose() {
-    _player.dispose();
+    // The global audioHandler is managed by audio_service
+    // Don't dispose it here
   }
 }

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,124 @@ 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;
+  }
+
+  // Cache for album images
+  static final Map<String, String?> _albumImageCache = {};
+
+  /// Fetches album cover URL from Deezer (free, no API key required)
+  /// Returns the image URL if found, null otherwise
+  static Future<String?> getAlbumImageUrl(String albumName, String? artistName) async {
+    // Build cache key
+    final cacheKey = 'albumImage:${artistName ?? ""}:$albumName';
+    if (_albumImageCache.containsKey(cacheKey)) {
+      return _albumImageCache[cacheKey];
+    }
+
+    // Use Deezer API (free, no key, excellent coverage)
+    try {
+      // Search with both album and artist if available for better matching
+      final query = artistName != null && artistName.isNotEmpty
+          ? '$artistName $albumName'
+          : albumName;
+
+      final uri = Uri.https(
+        'api.deezer.com',
+        '/search/album',
+        {
+          'q': query,
+          'limit': '5', // Get a few results to find best match
+        },
+      );
+
+      final response = await http.get(uri).timeout(const Duration(seconds: 5));
+
+      if (response.statusCode == 200) {
+        final data = json.decode(response.body);
+        final albums = data['data'] as List?;
+        if (albums != null && albums.isNotEmpty) {
+          // Try to find exact match first
+          Map<String, dynamic>? bestMatch;
+          for (final album in albums) {
+            final deezerAlbumName = (album['title'] as String?)?.toLowerCase();
+            final deezerArtistName = (album['artist']?['name'] as String?)?.toLowerCase();
+
+            if (deezerAlbumName == albumName.toLowerCase()) {
+              // Album name matches
+              if (artistName == null || artistName.isEmpty ||
+                  deezerArtistName == artistName.toLowerCase()) {
+                // And artist matches (or we don't have artist to match)
+                bestMatch = album;
+                break;
+              }
+              // Album matches but artist doesn't - keep as candidate
+              bestMatch ??= album;
+            }
+          }
+
+          // Fall back to first result if no good match
+          final album = bestMatch ?? albums[0] as Map<String, dynamic>;
+
+          // Use cover_xl for high quality, fall back to cover_medium
+          final imageUrl = album['cover_xl'] ?? album['cover_big'] ??
+              album['cover_medium'] ?? album['cover'];
+          _albumImageCache[cacheKey] = imageUrl;
+          return imageUrl;
+        }
+      }
+    } catch (e) {
+      _logger.warning('Deezer album image error: $e', context: 'Metadata');
+    }
+
+    // Cache the null result to avoid repeated failed lookups
+    _albumImageCache[cacheKey] = null;
+    return null;
+  }
+
   /// Clears the metadata cache
   static void clearCache() {
     _cache.clear();
+    _artistImageCache.clear();
+    _albumImageCache.clear();
   }
 }

lib/services/pcm_audio_player.dart

@@ -0,0 +1,591 @@
+import 'dart:async';
+import 'dart:typed_data';
+import 'package:flutter/foundation.dart' show unawaited;
+import 'package:flutter_pcm_sound/flutter_pcm_sound.dart' as pcm;
+import 'debug_logger.dart';
+
+/// Callback type for elapsed time updates
+typedef ElapsedTimeCallback = void Function(Duration elapsed);
+
+/// Audio format configuration matching Sendspin protocol
+class PcmAudioFormat {
+  final int sampleRate;
+  final int channels;
+  final int bitDepth;
+
+  const PcmAudioFormat({
+    this.sampleRate = 48000,
+    this.channels = 2,
+    this.bitDepth = 16,
+  });
+
+  /// Default Sendspin format: 48kHz, stereo, 16-bit PCM
+  static const sendspin = PcmAudioFormat();
+}
+
+/// Player state for PCM audio
+enum PcmPlayerState {
+  idle,
+  initializing,
+  ready,
+  playing,
+  pausing,   // Transitional state: pause requested, waiting for completion
+  paused,
+  resuming,  // Transitional state: resume requested, re-initializing
+  stopping,  // Transitional state: stop requested, cleaning up
+  error,
+}
+
+/// Error types for PCM player operations
+enum PcmPlayerError {
+  initializationFailed,
+  feedFailed,
+  pauseFailed,
+  resumeFailed,
+  streamError,
+  releaseTimeout,
+}
+
+/// Callback type for error events
+typedef PcmErrorCallback = void Function(PcmPlayerError error, String message);
+
+/// Service to play raw PCM audio data from Sendspin WebSocket stream
+/// Uses flutter_pcm_sound plugin for low-level PCM playback
+///
+/// State Machine:
+/// - idle → initializing → ready → playing ↔ paused
+/// - Any state can transition to error
+/// - Transitional states (pausing, resuming, stopping) block operations
+class PcmAudioPlayer {
+  final _logger = DebugLogger();
+
+  PcmPlayerState _state = PcmPlayerState.idle;
+  PcmAudioFormat _format = PcmAudioFormat.sendspin;
+
+  StreamSubscription<Uint8List>? _audioSubscription;
+
+  // Audio buffer for smooth playback
+  final List<Uint8List> _audioBuffer = [];
+  bool _isFeeding = false;
+  bool _isStarted = false;
+  Completer<void>? _feedCompleter;  // Tracks when current feed operation completes
+
+  // Error callback for operation failures
+  PcmErrorCallback? onError;
+
+  // Maximum chunks to feed at once to keep native buffer small (~200ms)
+  // Each chunk is ~25ms of audio, so 8 chunks = ~200ms
+  // Reduced from 12 (300ms) to 8 for faster pause response
+  static const int _maxChunksPerFeed = 8;
+
+  // Feed threshold - lower = faster pause but more risk of underruns
+  // Reduced from 8000 to 5000 frames (~104ms vs ~166ms) for faster response
+  static const int _feedThreshold = 5000;
+
+  // Stats
+  int _framesPlayed = 0;
+  int _bytesPlayed = 0;
+
+  // Elapsed time tracking for notification sync
+  Timer? _elapsedTimeTimer;
+  final _elapsedTimeController = StreamController<Duration>.broadcast();
+  ElapsedTimeCallback? onElapsedTimeUpdate;
+
+  // Track offset for pause/resume (preserves position across pause cycles)
+  int _bytesPlayedAtLastPause = 0;
+  DateTime? _playbackStartTime;
+
+  PcmPlayerState get state => _state;
+  bool get isPlaying => _state == PcmPlayerState.playing;
+  bool get isPaused => _state == PcmPlayerState.paused;
+  bool get isReady => _state == PcmPlayerState.ready || _state == PcmPlayerState.playing || _state == PcmPlayerState.paused;
+  int get framesPlayed => _framesPlayed;
+  int get bytesPlayed => _bytesPlayed;
+
+  /// Check if player is in a transitional state (operation in progress)
+  bool get isTransitioning => _state == PcmPlayerState.pausing ||
+                               _state == PcmPlayerState.resuming ||
+                               _state == PcmPlayerState.stopping;
+
+  /// Check if feeding should be blocked
+  bool get _shouldBlockFeeding => isTransitioning || _state == PcmPlayerState.paused;
+
+  /// Stream of elapsed time updates (emits every 500ms when playing)
+  Stream<Duration> get elapsedTimeStream => _elapsedTimeController.stream;
+
+  /// Calculate elapsed playback time from bytes played
+  /// For 48kHz stereo 16-bit: 4 bytes per frame, 48000 frames per second
+  Duration get elapsedTime {
+    // Bytes per frame = channels * (bitDepth / 8) = 2 * 2 = 4
+    final bytesPerFrame = _format.channels * (_format.bitDepth ~/ 8);
+    final framesFromBytes = _bytesPlayed / bytesPerFrame;
+    final elapsedSeconds = framesFromBytes / _format.sampleRate;
+    return Duration(milliseconds: (elapsedSeconds * 1000).round());
+  }
+
+  /// Get elapsed time in seconds (for convenience)
+  double get elapsedTimeSeconds {
+    final bytesPerFrame = _format.channels * (_format.bitDepth ~/ 8);
+    final framesFromBytes = _bytesPlayed / bytesPerFrame;
+    return framesFromBytes / _format.sampleRate;
+  }
+
+  /// Initialize the PCM player with the given format
+  Future<bool> initialize({PcmAudioFormat? format}) async {
+    if (_state == PcmPlayerState.initializing) return false;
+
+    _format = format ?? PcmAudioFormat.sendspin;
+    _state = PcmPlayerState.initializing;
+
+    try {
+      _logger.log('PcmAudioPlayer: Initializing (${_format.sampleRate}Hz, ${_format.channels}ch, ${_format.bitDepth}bit)');
+
+      // Setup flutter_pcm_sound with Sendspin audio format
+      await pcm.FlutterPcmSound.setup(
+        sampleRate: _format.sampleRate,
+        channelCount: _format.channels,
+      );
+
+      // Set feed threshold - request more data when buffer has fewer frames
+      // Lower threshold = lower latency but more risk of underruns
+      // Using _feedThreshold (5000 frames = ~104ms) for faster pause response
+      await pcm.FlutterPcmSound.setFeedThreshold(_feedThreshold);
+
+      // Set up feed callback for when buffer needs more data
+      pcm.FlutterPcmSound.setFeedCallback(_onFeedRequested);
+
+      // Set log level for debugging
+      await pcm.FlutterPcmSound.setLogLevel(pcm.LogLevel.standard);
+
+      _state = PcmPlayerState.ready;
+      _logger.log('PcmAudioPlayer: Initialized successfully');
+      return true;
+    } catch (e) {
+      _logger.log('PcmAudioPlayer: Initialization failed: $e');
+      _state = PcmPlayerState.error;
+      return false;
+    }
+  }
+
+  /// Callback when flutter_pcm_sound needs more audio data
+  void _onFeedRequested(int remainingFrames) {
+    // This is called from native when buffer is getting low
+    // Block feeding during pause, transitional states, or when not playing
+    if (_state != PcmPlayerState.playing) return;
+    if (_shouldBlockFeeding) return;
+    if (_audioBuffer.isEmpty || _isFeeding) return;
+
+    _feedNextChunk();
+  }
+
+  /// Connect to a Sendspin audio data stream and start playback
+  Future<bool> connectToStream(Stream<Uint8List> audioStream) async {
+    if (_state == PcmPlayerState.error || _state == PcmPlayerState.idle) {
+      _logger.log('PcmAudioPlayer: Cannot connect - player not initialized');
+      return false;
+    }
+
+    // Cancel any existing subscription
+    await _audioSubscription?.cancel();
+
+    _logger.log('PcmAudioPlayer: Connecting to audio stream');
+
+    // Subscribe to the audio stream
+    _audioSubscription = audioStream.listen(
+      _onAudioData,
+      onError: _onStreamError,
+      onDone: _onStreamDone,
+    );
+
+    return true;
+  }
+
+  /// Handle incoming audio data from the stream
+  void _onAudioData(Uint8List audioData) {
+    // Ignore data if in error state or if in transitional/paused state
+    if (_state == PcmPlayerState.error) return;
+    if (_shouldBlockFeeding) {
+      // Silently ignore audio data when paused or transitioning
+      // This prevents buffer accumulation during pause and any race conditions
+      return;
+    }
+
+    // Add to buffer
+    _audioBuffer.add(audioData);
+
+    // Start playback if not already started
+    if (!_isStarted && _state == PcmPlayerState.ready) {
+      _startPlayback();
+    }
+
+    // NOTE: Auto-resume from paused state has been removed to prevent race conditions.
+    // The provider should explicitly call play() when ready to resume.
+
+    // Feed data if not currently feeding
+    if (!_isFeeding && _isStarted) {
+      _feedNextChunk();
+    }
+  }
+
+  /// Start audio playback
+  Future<void> _startPlayback() async {
+    if (_isStarted) return;
+
+    try {
+      await pcm.FlutterPcmSound.start();
+      _isStarted = true;
+      _state = PcmPlayerState.playing;
+      _playbackStartTime = DateTime.now();
+      _startElapsedTimeTimer();
+      _logger.log('PcmAudioPlayer: Started playback');
+    } catch (e) {
+      _logger.log('PcmAudioPlayer: Error starting playback: $e');
+      _state = PcmPlayerState.error;
+    }
+  }
+
+  /// Start the elapsed time update timer
+  void _startElapsedTimeTimer() {
+    _elapsedTimeTimer?.cancel();
+    _elapsedTimeTimer = Timer.periodic(
+      const Duration(milliseconds: 500),
+      (_) => _emitElapsedTime(),
+    );
+    // Emit immediately
+    _emitElapsedTime();
+  }
+
+  /// Stop the elapsed time update timer
+  void _stopElapsedTimeTimer() {
+    _elapsedTimeTimer?.cancel();
+    _elapsedTimeTimer = null;
+  }
+
+  /// Emit the current elapsed time to listeners
+  void _emitElapsedTime() {
+    if (_state != PcmPlayerState.playing) return;
+
+    final elapsed = elapsedTime;
+    if (!_elapsedTimeController.isClosed) {
+      _elapsedTimeController.add(elapsed);
+    }
+    onElapsedTimeUpdate?.call(elapsed);
+  }
+
+  /// Feed the next chunk of audio data to the player
+  /// CRITICAL: Only feeds limited chunks to keep native buffer small (~200ms)
+  /// This enables faster pause response by minimizing buffered audio
+  Future<void> _feedNextChunk() async {
+    if (_isFeeding || _audioBuffer.isEmpty || _shouldBlockFeeding) return;
+
+    _isFeeding = true;
+    _feedCompleter = Completer<void>();
+
+    try {
+      int chunksProcessed = 0;
+
+      // CRITICAL: Only feed limited chunks to keep native buffer small
+      // This is the key to fast pause - we drain ~200ms instead of 5-8 seconds
+      while (_audioBuffer.isNotEmpty &&
+             chunksProcessed < _maxChunksPerFeed &&
+             _state == PcmPlayerState.playing &&
+             !_shouldBlockFeeding) {
+        final chunk = _audioBuffer.removeAt(0);
+
+        // Convert Uint8List (raw bytes) to Int16 samples
+        // Sendspin sends 16-bit little-endian PCM
+        final samples = _bytesToInt16List(chunk);
+
+        // Check state again before the async feed call
+        if (samples.isNotEmpty && !_shouldBlockFeeding) {
+          await pcm.FlutterPcmSound.feed(pcm.PcmArrayInt16.fromList(samples));
+
+          // Don't update stats if we got paused during the feed
+          if (!_shouldBlockFeeding) {
+            _framesPlayed++;
+            _bytesPlayed += chunk.length;
+            chunksProcessed++;
+
+            // Log periodically
+            if (_framesPlayed % 100 == 0) {
+              _logger.log('PcmAudioPlayer: Played $_framesPlayed frames (${(_bytesPlayed / 1024).toStringAsFixed(1)} KB)');
+            }
+          }
+        }
+
+        // Yield to event loop mid-feed to allow UI to respond
+        if (chunksProcessed % 4 == 0) {
+          await Future.delayed(Duration.zero);
+        }
+      }
+    } catch (e) {
+      // Don't log errors during pause/transition - expected when player is released
+      if (!_shouldBlockFeeding) {
+        _logger.log('PcmAudioPlayer: Error feeding audio: $e');
+        _emitError(PcmPlayerError.feedFailed, e.toString());
+      }
+    }
+
+    _isFeeding = false;
+    _feedCompleter?.complete();
+    _feedCompleter = null;
+  }
+
+  /// Emit an error to the callback
+  void _emitError(PcmPlayerError error, String message) {
+    _logger.log('PcmAudioPlayer: Error - $error: $message');
+    onError?.call(error, message);
+  }
+
+  /// Convert raw bytes (Uint8List) to Int16 samples
+  /// Assumes little-endian 16-bit PCM
+  List<int> _bytesToInt16List(Uint8List bytes) {
+    if (bytes.length < 2) return [];
+
+    final byteData = ByteData.sublistView(bytes);
+    final samples = <int>[];
+
+    for (int i = 0; i < bytes.length - 1; i += 2) {
+      samples.add(byteData.getInt16(i, Endian.little));
+    }
+
+    return samples;
+  }
+
+  /// Handle stream errors - notify listeners and pause playback
+  void _onStreamError(dynamic error) {
+    _logger.log('PcmAudioPlayer: Stream error: $error');
+    _emitError(PcmPlayerError.streamError, error.toString());
+
+    // Pause on stream error to prevent playback of corrupted/incomplete audio
+    if (_state == PcmPlayerState.playing) {
+      _logger.log('PcmAudioPlayer: Pausing due to stream error');
+      pause();
+    }
+  }
+
+  /// Handle stream completion
+  void _onStreamDone() {
+    _logger.log('PcmAudioPlayer: Audio stream ended');
+    // Don't stop immediately - let buffered audio finish
+  }
+
+  /// Start playback (if paused or ready)
+  /// Returns true if playback started successfully
+  Future<bool> play() async {
+    if (_state == PcmPlayerState.error) return false;
+    if (isTransitioning) {
+      _logger.log('PcmAudioPlayer: Cannot play - operation in progress (state: $_state)');
+      return false;
+    }
+
+    if (_state == PcmPlayerState.paused) {
+      // Resume from pause - need to re-initialize since we released on pause
+      _logger.log('PcmAudioPlayer: Resuming from pause at ${elapsedTime.inSeconds}s');
+      _state = PcmPlayerState.resuming;
+
+      // Re-initialize the PCM player (it was released on pause)
+      try {
+        await pcm.FlutterPcmSound.setup(
+          sampleRate: _format.sampleRate,
+          channelCount: _format.channels,
+        );
+        await pcm.FlutterPcmSound.setFeedThreshold(_feedThreshold);
+        pcm.FlutterPcmSound.setFeedCallback(_onFeedRequested);
+        await pcm.FlutterPcmSound.start();
+        _isStarted = true;
+      } catch (e) {
+        _logger.log('PcmAudioPlayer: Error re-initializing on resume: $e');
+        _emitError(PcmPlayerError.resumeFailed, e.toString());
+        _state = PcmPlayerState.error;
+        return false;
+      }
+
+      _state = PcmPlayerState.playing;
+      _startElapsedTimeTimer();
+
+      // Resume feeding - new audio will come from stream
+      if (!_isFeeding && _audioBuffer.isNotEmpty) {
+        _feedNextChunk();
+      }
+
+      _logger.log('PcmAudioPlayer: Resumed playback');
+      return true;
+    } else if (_state == PcmPlayerState.ready) {
+      await _startPlayback();
+      _logger.log('PcmAudioPlayer: Started playback');
+
+      // Start feeding
+      if (!_isFeeding && _audioBuffer.isNotEmpty) {
+        _feedNextChunk();
+      }
+      return true;
+    }
+
+    return false;
+  }
+
+  /// Pause playback - stops feeding and releases player for instant stop
+  /// Position is preserved via _bytesPlayed tracking
+  /// Uses release() to clear native buffer for instant audio stop
+  /// Returns true if pause was successful
+  Future<bool> pause() async {
+    if (_state != PcmPlayerState.playing) {
+      _logger.log('PcmAudioPlayer: Cannot pause - not playing (state: $_state)');
+      return false;
+    }
+
+    _logger.log('PcmAudioPlayer: Pause requested');
+
+    // Set pausing state FIRST to stop feed loop from starting new feeds
+    _state = PcmPlayerState.pausing;
+
+    // Clear our buffer - no more data will be fed
+    _audioBuffer.clear();
+
+    // Clear feed callback to prevent native from triggering more feeds
+    pcm.FlutterPcmSound.setFeedCallback(null);
+
+    // Mark as not feeding
+    _isFeeding = false;
+
+    // Save position and stop timer
+    _bytesPlayedAtLastPause = _bytesPlayed;
+    _stopElapsedTimeTimer();
+
+    // Schedule release() to clear native buffer - use Future.delayed to yield control
+    // This allows UI to update before the potentially blocking release() call
+    unawaited(Future.delayed(Duration.zero, () async {
+      try {
+        await pcm.FlutterPcmSound.release().timeout(
+          const Duration(milliseconds: 500),
+          onTimeout: () {
+            _logger.log('PcmAudioPlayer: Release timed out');
+            _emitError(PcmPlayerError.releaseTimeout, 'release() timed out');
+          },
+        );
+        _isStarted = false;
+        _logger.log('PcmAudioPlayer: Player released for instant stop');
+      } catch (e) {
+        _logger.log('PcmAudioPlayer: Release error (expected if already released): $e');
+      }
+    }));
+
+    // Transition to paused state
+    _state = PcmPlayerState.paused;
+    _logger.log('PcmAudioPlayer: Paused playback at ${elapsedTime.inSeconds}s');
+    return true;
+  }
+
+  /// Stop playback (clears buffer and resets position)
+  /// Returns true if stop was successful
+  Future<bool> stop() async {
+    if (_state == PcmPlayerState.idle) return true;
+
+    _logger.log('PcmAudioPlayer: Stop requested');
+
+    // Set stopping state to block any in-flight feed operations
+    _state = PcmPlayerState.stopping;
+    _isStarted = false;
+    _stopElapsedTimeTimer();
+
+    // Clear the feed callback to prevent native code from triggering new feeds
+    pcm.FlutterPcmSound.setFeedCallback(null);
+
+    // Wait for any in-progress feed operation to complete (with timeout)
+    final completer = _feedCompleter;
+    if (completer != null && !completer.isCompleted) {
+      await completer.future.timeout(
+        const Duration(milliseconds: 500),
+        onTimeout: () {
+          _logger.log('PcmAudioPlayer: Feed wait timed out on stop');
+        },
+      );
+    }
+
+    _audioBuffer.clear();
+    _isFeeding = false;
+
+    try {
+      await pcm.FlutterPcmSound.release();
+    } catch (e) {
+      _logger.log('PcmAudioPlayer: Error releasing: $e');
+    }
+
+    _state = PcmPlayerState.ready;
+    _framesPlayed = 0;
+    _bytesPlayed = 0;
+    _bytesPlayedAtLastPause = 0;
+    _playbackStartTime = null;
+    _logger.log('PcmAudioPlayer: Stopped playback');
+
+    // Re-initialize for next playback
+    await initialize(format: _format);
+    return true;
+  }
+
+  /// Reset position to zero (for new track) without stopping playback
+  void resetPosition() {
+    _framesPlayed = 0;
+    _bytesPlayed = 0;
+    _bytesPlayedAtLastPause = 0;
+    _playbackStartTime = DateTime.now();
+    _logger.log('PcmAudioPlayer: Position reset to 0');
+    _emitElapsedTime();
+  }
+
+  /// Disconnect from audio stream
+  Future<void> disconnect() async {
+    await _audioSubscription?.cancel();
+    _audioSubscription = null;
+    await stop();
+    _logger.log('PcmAudioPlayer: Disconnected from stream');
+  }
+
+  /// Release all resources
+  Future<void> dispose() async {
+    _logger.log('PcmAudioPlayer: Disposing...');
+
+    // Set stopping state to block any feed operations
+    _state = PcmPlayerState.stopping;
+    _isStarted = false;
+    _stopElapsedTimeTimer();
+
+    // Clear the feed callback first
+    pcm.FlutterPcmSound.setFeedCallback(null);
+
+    // Wait for any in-progress feed operation
+    final completer = _feedCompleter;
+    if (completer != null && !completer.isCompleted) {
+      await completer.future.timeout(
+        const Duration(milliseconds: 500),
+        onTimeout: () {
+          _logger.log('PcmAudioPlayer: Feed wait timed out on dispose');
+        },
+      );
+    }
+
+    _isFeeding = false;
+    await _audioSubscription?.cancel();
+    _audioSubscription = null;
+    _audioBuffer.clear();
+
+    try {
+      await pcm.FlutterPcmSound.release().timeout(
+        const Duration(milliseconds: 500),
+        onTimeout: () {
+          _logger.log('PcmAudioPlayer: Release timed out on dispose');
+        },
+      );
+    } catch (e) {
+      _logger.log('PcmAudioPlayer: Error releasing: $e');
+    }
+
+    if (!_elapsedTimeController.isClosed) {
+      await _elapsedTimeController.close();
+    }
+
+    _state = PcmPlayerState.idle;
+    _logger.log('PcmAudioPlayer: Disposed');
+  }
+}

lib/services/position_tracker.dart

@@ -0,0 +1,242 @@
+import 'dart:async';
+import 'package:flutter/foundation.dart';
+import 'debug_logger.dart';
+
+/// Single source of truth for playback position tracking.
+///
+/// This service eliminates race conditions by:
+/// 1. Being the ONLY place that calculates interpolated position
+/// 2. Using consistent interpolation (no mode switching mid-stream)
+/// 3. Capping position at track duration
+/// 4. Broadcasting position updates via a single stream
+///
+/// All consumers (UI, notification) should listen to [positionStream]
+/// instead of calculating position themselves.
+class PositionTracker {
+  final DebugLogger _logger = DebugLogger();
+
+  // Current state
+  String? _playerId;
+  bool _isPlaying = false;
+  Duration _duration = Duration.zero;
+
+  // Position tracking - we anchor to a known position and interpolate from there
+  double _anchorPosition = 0.0;  // Position in seconds at anchor time
+  DateTime _anchorTime = DateTime.now();  // When we set the anchor
+
+  // Interpolation timer
+  Timer? _interpolationTimer;
+
+  // Stream controller for position updates
+  final _positionController = StreamController<Duration>.broadcast();
+
+  // Last emitted position (to avoid redundant updates)
+  int _lastEmittedSeconds = -1;
+
+  /// Stream of position updates (emits every second when playing)
+  Stream<Duration> get positionStream => _positionController.stream;
+
+  /// Current position (can be called synchronously)
+  Duration get currentPosition {
+    if (!_isPlaying) {
+      return Duration(seconds: _anchorPosition.round());
+    }
+
+    final now = DateTime.now();
+    final elapsed = now.difference(_anchorTime).inMilliseconds / 1000.0;
+    final interpolated = _anchorPosition + elapsed;
+
+    // Cap at duration to prevent overflow
+    final capped = _duration.inSeconds > 0
+        ? interpolated.clamp(0.0, _duration.inSeconds.toDouble())
+        : interpolated.clamp(0.0, double.infinity);
+
+    return Duration(seconds: capped.round());
+  }
+
+  /// Current position in seconds (for compatibility)
+  double get currentPositionSeconds {
+    if (!_isPlaying) {
+      return _anchorPosition;
+    }
+
+    final now = DateTime.now();
+    final elapsed = now.difference(_anchorTime).inMilliseconds / 1000.0;
+    final interpolated = _anchorPosition + elapsed;
+
+    // Cap at duration
+    if (_duration.inSeconds > 0) {
+      return interpolated.clamp(0.0, _duration.inSeconds.toDouble());
+    }
+    return interpolated.clamp(0.0, double.infinity);
+  }
+
+  /// Update with fresh data from server.
+  ///
+  /// [playerId] - The player this update is for
+  /// [position] - Current position in seconds from server
+  /// [isPlaying] - Whether the player is currently playing
+  /// [duration] - Track duration (null if unknown)
+  /// [serverTimestamp] - Server's timestamp for when position was recorded (optional)
+  void updateFromServer({
+    required String playerId,
+    required double position,
+    required bool isPlaying,
+    Duration? duration,
+    double? serverTimestamp,
+  }) {
+    final bool playerChanged = _playerId != playerId;
+    final bool playStateChanged = _isPlaying != isPlaying;
+    final bool durationChanged = duration != null && _duration != duration;
+
+    _playerId = playerId;
+    _duration = duration ?? _duration;
+
+    // Calculate the best anchor position
+    double anchorPos = position;
+    bool hasStaleTimestamp = false;
+
+    // If server provides timestamp, use it to calculate current position more accurately
+    if (serverTimestamp != null && isPlaying) {
+      final now = DateTime.now().millisecondsSinceEpoch / 1000.0;
+      final serverAge = now - serverTimestamp;
+
+      // Only use server timestamp if it's reasonably fresh (< 30 seconds)
+      // and not in the future (clock skew)
+      if (serverAge >= 0 && serverAge < 30) {
+        anchorPos = position + serverAge;
+      } else {
+        // Timestamp is stale - mark this so we don't blindly trust the position
+        hasStaleTimestamp = true;
+      }
+    }
+
+    // Cap at duration
+    if (_duration.inSeconds > 0) {
+      anchorPos = anchorPos.clamp(0.0, _duration.inSeconds.toDouble());
+    }
+
+    // Detect if position jumped significantly (more than 3 seconds difference)
+    // This helps identify seeks or track changes
+    final currentInterpolated = currentPositionSeconds;
+    final positionDiff = (anchorPos - currentInterpolated).abs();
+    final isBackwardJump = anchorPos < currentInterpolated;
+    final isJumpToNearZero = anchorPos < 3.0;
+
+    // Detect suspicious backward jumps to 0 - likely bad server data
+    // This happens when some player types don't report elapsed_time correctly
+    final isSuspiciousReset = !playerChanged
+        && !playStateChanged
+        && !durationChanged
+        && isPlaying
+        && _isPlaying
+        && isBackwardJump
+        && isJumpToNearZero
+        && currentInterpolated > 3.0;
+
+    // Always update anchor when:
+    // 1. Player changed
+    // 2. Play state changed
+    // 3. Position jumped significantly (seek or track change) - BUT NOT if it's a suspicious reset
+    //    AND NOT if the timestamp is stale (stale data shouldn't override interpolated position)
+    // 4. We're not playing (paused state should reflect server position)
+    //
+    // Key insight: When timestamp is stale, the raw position from server is likely outdated.
+    // Our interpolated position is probably more accurate, so don't let stale data override it.
+    final shouldUpdateAnchor = playerChanged
+        || playStateChanged
+        || (positionDiff > 2 && !isSuspiciousReset && !hasStaleTimestamp)
+        || !isPlaying;
+
+    if (shouldUpdateAnchor) {
+      _anchorPosition = anchorPos;
+      _anchorTime = DateTime.now();
+    }
+
+    _isPlaying = isPlaying;
+
+    // Manage interpolation timer
+    if (isPlaying) {
+      _startInterpolationTimer();
+    } else {
+      _stopInterpolationTimer();
+      // Emit current position for paused state
+      _emitPosition();
+    }
+  }
+
+  /// Handle seek - immediately update position without waiting for server
+  void onSeek(double positionSeconds) {
+    _anchorPosition = positionSeconds;
+    _anchorTime = DateTime.now();
+    _lastEmittedSeconds = -1; // Force emit
+    _emitPosition();
+  }
+
+  /// Handle track change - reset position to 0
+  void onTrackChange(String playerId, Duration? newDuration) {
+    _playerId = playerId;
+    _duration = newDuration ?? Duration.zero;
+    _anchorPosition = 0.0;
+    _anchorTime = DateTime.now();
+    _lastEmittedSeconds = -1;
+    _emitPosition();
+  }
+
+  /// Handle player selection change
+  void onPlayerSelected(String playerId) {
+    if (_playerId != playerId) {
+      _playerId = playerId;
+      // Don't reset position - let updateFromServer handle it with actual data
+      _lastEmittedSeconds = -1;
+    }
+  }
+
+  /// Clear tracker state (e.g., when disconnecting)
+  void clear() {
+    _stopInterpolationTimer();
+    _playerId = null;
+    _isPlaying = false;
+    _anchorPosition = 0.0;
+    _duration = Duration.zero;
+    _lastEmittedSeconds = -1;
+  }
+
+  void _startInterpolationTimer() {
+    if (_interpolationTimer != null) return;
+
+    _interpolationTimer = Timer.periodic(const Duration(milliseconds: 250), (_) {
+      _emitPosition();
+    });
+
+    // Emit immediately
+    _emitPosition();
+  }
+
+  void _stopInterpolationTimer() {
+    _interpolationTimer?.cancel();
+    _interpolationTimer = null;
+  }
+
+  void _emitPosition() {
+    final pos = currentPosition;
+    final seconds = pos.inSeconds;
+
+    // Only emit if second changed (reduces unnecessary updates)
+    if (seconds != _lastEmittedSeconds) {
+      _lastEmittedSeconds = seconds;
+      _positionController.add(pos);
+    }
+  }
+
+  /// Check if position has reached or exceeded duration (track ended)
+  bool get hasReachedEnd {
+    if (_duration.inSeconds <= 0) return false;
+    return currentPositionSeconds >= _duration.inSeconds;
+  }
+
+  void dispose() {
+    _stopInterpolationTimer();
+    _positionController.close();
+  }
+}

lib/services/sendspin_service.dart

@@ -0,0 +1,616 @@
+import 'dart:async';
+import 'dart:convert';
+import 'dart:io';
+import 'dart:typed_data';
+import 'package:web_socket_channel/web_socket_channel.dart';
+import 'package:web_socket_channel/io.dart';
+import 'debug_logger.dart';
+import 'settings_service.dart';
+import 'device_id_service.dart';
+
+/// Connection state for Sendspin player
+enum SendspinConnectionState {
+  disconnected,
+  connecting,
+  connected,
+  error,
+}
+
+/// Callback types for Sendspin events
+typedef SendspinPlayCallback = void Function(String streamUrl, Map<String, dynamic> trackInfo);
+typedef SendspinPauseCallback = void Function();
+typedef SendspinStopCallback = void Function();
+typedef SendspinSeekCallback = void Function(int positionSeconds);
+typedef SendspinVolumeCallback = void Function(int volumeLevel);
+typedef SendspinAudioDataCallback = void Function(Uint8List audioData);
+typedef SendspinStreamStartCallback = void Function(Map<String, dynamic>? trackInfo);
+typedef SendspinStreamEndCallback = void Function();
+
+/// Service to manage Sendspin WebSocket connection for local playback
+/// Sendspin is the replacement for builtin_player in MA 2.7.0b20+
+///
+/// Connection strategy (smart fallback for external access):
+/// 1. If server is HTTPS, try external wss://{server}/sendspin first
+/// 2. Fall back to local_ws_url from API (ws://local-ip:8927/sendspin)
+/// 3. WebRTC fallback as last resort (requires TURN servers)
+class SendspinService {
+  final String serverUrl;
+  final _logger = DebugLogger();
+
+  WebSocketChannel? _channel;
+  Timer? _heartbeatTimer;
+  Timer? _reconnectTimer;
+
+  // Connection state
+  SendspinConnectionState _state = SendspinConnectionState.disconnected;
+  SendspinConnectionState get state => _state;
+
+  final _stateController = StreamController<SendspinConnectionState>.broadcast();
+  Stream<SendspinConnectionState> get stateStream => _stateController.stream;
+
+  // Player info
+  String? _playerId;
+  String? _playerName;
+  String? _connectedUrl;
+
+  String? get playerId => _playerId;
+  String? get playerName => _playerName;
+
+  // Event callbacks
+  SendspinPlayCallback? onPlay;
+  SendspinPauseCallback? onPause;
+  SendspinStopCallback? onStop;
+  SendspinSeekCallback? onSeek;
+  SendspinVolumeCallback? onVolume;
+  SendspinAudioDataCallback? onAudioData;
+  SendspinStreamStartCallback? onStreamStart;
+  SendspinStreamEndCallback? onStreamEnd;
+
+  // Audio data stream for raw PCM frames
+  final _audioDataController = StreamController<Uint8List>.broadcast();
+  Stream<Uint8List> get audioDataStream => _audioDataController.stream;
+
+  // Track audio streaming state
+  bool _isStreamingAudio = false;
+  int _audioFramesReceived = 0;
+
+  // Player state for reporting to server
+  bool _isPowered = true;
+  bool _isPlaying = false;
+  bool _isPaused = false;
+  int _position = 0;
+  int _volume = 100;
+  bool _isMuted = false;
+
+  bool _isDisposed = false;
+
+  SendspinService(this.serverUrl);
+
+  /// Initialize and connect to Sendspin server
+  /// Uses persistent player ID and username-based naming
+  Future<bool> connect() async {
+    if (_isDisposed) return false;
+    if (_state == SendspinConnectionState.connected) return true;
+
+    _updateState(SendspinConnectionState.connecting);
+
+    try {
+      // Get persistent player ID and name
+      _playerId = await DeviceIdService.getOrCreateDevicePlayerId();
+      _playerName = await SettingsService.getLocalPlayerName();
+
+      _logger.log('Sendspin: Connecting as "$_playerName" (ID: $_playerId)');
+
+      // Try connection strategies in order
+      bool connected = false;
+
+      // Strategy 1: If server is HTTPS, try external wss:// first
+      if (_isHttpsServer()) {
+        final externalUrl = _buildExternalSendspinUrl();
+        _logger.log('Sendspin: Trying external URL: $externalUrl');
+        connected = await _tryConnect(externalUrl, timeout: const Duration(seconds: 3));
+      }
+
+      // Strategy 2: If external failed or server is HTTP, try local connection
+      // Note: We would need local_ws_url from getSendspinConnectionInfo API
+      // For now, skip this step and fall back to WebRTC (handled by provider)
+
+      if (!connected) {
+        _logger.log('Sendspin: External connection failed, WebRTC fallback needed');
+        _updateState(SendspinConnectionState.error);
+        return false;
+      }
+
+      return true;
+    } catch (e) {
+      _logger.log('Sendspin: Connection error: $e');
+      _updateState(SendspinConnectionState.error);
+      return false;
+    }
+  }
+
+  /// Connect with a specific WebSocket URL (called by provider with local_ws_url)
+  Future<bool> connectWithUrl(String wsUrl) async {
+    if (_isDisposed) return false;
+    if (_state == SendspinConnectionState.connected) return true;
+
+    _updateState(SendspinConnectionState.connecting);
+
+    try {
+      _playerId = await DeviceIdService.getOrCreateDevicePlayerId();
+      _playerName = await SettingsService.getLocalPlayerName();
+
+      _logger.log('Sendspin: Connecting with URL: $wsUrl');
+
+      final connected = await _tryConnect(wsUrl, timeout: const Duration(seconds: 5));
+
+      if (!connected) {
+        _updateState(SendspinConnectionState.error);
+        return false;
+      }
+
+      return true;
+    } catch (e) {
+      _logger.log('Sendspin: Connection error: $e');
+      _updateState(SendspinConnectionState.error);
+      return false;
+    }
+  }
+
+  /// Attempt to connect to a specific WebSocket URL
+  Future<bool> _tryConnect(String url, {Duration timeout = const Duration(seconds: 5)}) async {
+    try {
+      // Connect to the base URL without query params - we send player info in hello message
+      _logger.log('Sendspin: Connecting to $url');
+
+      // Create WebSocket connection
+      final webSocket = await WebSocket.connect(url).timeout(timeout);
+
+      _channel = IOWebSocketChannel(webSocket);
+      _connectedUrl = url;
+
+      // Set up message listener BEFORE sending hello
+      _channel!.stream.listen(
+        _handleMessage,
+        onError: _handleError,
+        onDone: _handleDone,
+      );
+
+      // Send client/hello message immediately after connecting
+      // This is required by the Sendspin protocol - server waits for this
+      // Message format follows aiosendspin protocol spec
+      _logger.log('Sendspin: Sending client/hello with player_id=$_playerId');
+      _sendMessage({
+        'type': 'client/hello',
+        'payload': {
+          'client_id': _playerId,
+          'name': _playerName,
+          'version': 1,  // Protocol version (integer)
+          'supported_roles': ['player@v1'],
+          'player_support': {
+            'supported_formats': [
+              {
+                'codec': 'pcm',
+                'channels': 2,
+                'sample_rate': 48000,
+                'bit_depth': 16,
+              },
+            ],
+            'buffer_capacity': 1048576,  // 1MB buffer
+            'supported_commands': ['volume', 'mute'],
+          },
+        },
+      }, allowDuringHandshake: true);
+
+      // Wait for server acknowledgment (server sends welcome/registered after hello)
+      final ackReceived = await _waitForAck().timeout(
+        const Duration(seconds: 5),
+        onTimeout: () => false,
+      );
+
+      if (!ackReceived) {
+        _logger.log('Sendspin: No acknowledgment from server after hello');
+        await _channel?.sink.close();
+        _channel = null;
+        return false;
+      }
+
+      _logger.log('Sendspin: Connected and registered successfully');
+      _updateState(SendspinConnectionState.connected);
+      _startHeartbeat();
+
+      return true;
+    } catch (e) {
+      _logger.log('Sendspin: Connection attempt failed: $e');
+      return false;
+    }
+  }
+
+  /// Wait for server acknowledgment after connection
+  Completer<bool>? _ackCompleter;
+
+  Future<bool> _waitForAck() async {
+    _ackCompleter = Completer<bool>();
+    return _ackCompleter!.future;
+  }
+
+  /// Handle incoming WebSocket messages
+  /// WebSocket can send text frames (JSON control messages) or binary frames (PCM audio data)
+  void _handleMessage(dynamic message) {
+    // Check if this is binary audio data (Uint8List) or text (String)
+    if (message is List<int>) {
+      _handleBinaryAudioData(Uint8List.fromList(message));
+      return;
+    }
+
+    // Handle text messages (JSON)
+    if (message is! String) {
+      _logger.log('Sendspin: Unexpected message type: ${message.runtimeType}');
+      return;
+    }
+
+    try {
+      final data = jsonDecode(message) as Map<String, dynamic>;
+      final type = data['type'] as String?;
+
+      _logger.log('Sendspin: Received message type: $type');
+
+      switch (type) {
+        case 'server/hello':
+          // Server acknowledged our client/hello - we're registered!
+          _logger.log('Sendspin: Received server/hello - connection successful');
+          final payload = data['payload'] as Map<String, dynamic>?;
+          if (payload != null) {
+            _logger.log('Sendspin: Server name: ${payload['name']}, version: ${payload['version']}');
+            _logger.log('Sendspin: Active roles: ${payload['active_roles']}');
+          }
+          if (_ackCompleter != null && !_ackCompleter!.isCompleted) {
+            _ackCompleter!.complete(true);
+          }
+          // Send initial client/state immediately after handshake (required by spec)
+          // Note: These must use allowDuringHandshake since state is still 'connecting'
+          _sendInitialState();
+          // Also send initial time sync
+          _sendClientTime(allowDuringHandshake: true);
+          break;
+
+        case 'server/time':
+          // Server responded to our time sync - can be used to calculate clock offset
+          // For now, just log it (proper sync would use Kalman filter)
+          _logger.log('Sendspin: Received server/time response');
+          break;
+
+        case 'group/update':
+          // Group state update - store for reference but no response needed
+          _logger.log('Sendspin: Received group/update');
+          final groupPayload = data['payload'] as Map<String, dynamic>?;
+          if (groupPayload != null) {
+            _logger.log('Sendspin: Group state: ${groupPayload['playback_state']}');
+          }
+          break;
+
+        case 'stream/start':
+          // Server is starting to send audio data
+          _logger.log('Sendspin: Audio stream starting');
+          _isStreamingAudio = true;
+          _audioFramesReceived = 0;
+          _isPlaying = true;
+          _isPaused = false;
+          // Notify provider to start PCM player and foreground service
+          final streamPayload = data['payload'] as Map<String, dynamic>?;
+          onStreamStart?.call(streamPayload);
+          break;
+
+        case 'stream/end':
+          // Server finished sending audio data
+          _logger.log('Sendspin: Audio stream ended (received $_audioFramesReceived frames)');
+          _isStreamingAudio = false;
+          _isPlaying = false;
+          // Notify provider to stop PCM player
+          onStreamEnd?.call();
+          break;
+
+        case 'ack':
+        case 'connected':
+        case 'registered':
+          // Legacy/fallback acknowledgment types
+          if (_ackCompleter != null && !_ackCompleter!.isCompleted) {
+            _ackCompleter!.complete(true);
+          }
+          break;
+
+        case 'play':
+          // Server wants us to play audio (URL-based, not raw PCM)
+          final streamUrl = data['url'] as String?;
+          final trackInfo = data['track'] as Map<String, dynamic>? ?? {};
+          if (streamUrl != null && onPlay != null) {
+            _isPlaying = true;
+            _isPaused = false;
+            onPlay!(streamUrl, trackInfo);
+          }
+          break;
+
+        case 'pause':
+          _isPaused = true;
+          _isPlaying = false;
+          onPause?.call();
+          break;
+
+        case 'stop':
+          _isPlaying = false;
+          _isPaused = false;
+          _isStreamingAudio = false;
+          onStop?.call();
+          break;
+
+        case 'seek':
+          final position = data['position'] as int?;
+          if (position != null) {
+            _position = position;
+            onSeek?.call(position);
+          }
+          break;
+
+        case 'volume':
+          final level = data['level'] as int?;
+          if (level != null) {
+            _volume = level;
+            onVolume?.call(level);
+          }
+          break;
+
+        case 'ping':
+          // Respond to server ping
+          _sendMessage({'type': 'pong'});
+          break;
+
+        case 'error':
+          final errorMsg = data['message'] as String?;
+          _logger.log('Sendspin: Server error: $errorMsg');
+          break;
+
+        default:
+          _logger.log('Sendspin: Unknown message type: $type');
+      }
+    } catch (e) {
+      _logger.log('Sendspin: Error handling JSON message: $e');
+    }
+  }
+
+  /// Handle binary audio data (PCM frames from server)
+  /// Sendspin binary frame format:
+  /// - Byte 0: message type (uint8) - Type 4 = audio data
+  /// - Bytes 1-8: timestamp (int64 microseconds, little-endian) for synchronization
+  /// - Bytes 9+: actual PCM audio data (16-bit stereo 48kHz)
+  void _handleBinaryAudioData(Uint8List frame) {
+    // Minimum frame size: 1 (type) + 8 (timestamp) + 2 (at least one sample)
+    if (frame.length < 11) {
+      _logger.log('Sendspin: Binary frame too short: ${frame.length} bytes');
+      return;
+    }
+
+    // Parse header
+    final messageType = frame[0];
+
+    // Type 4 = audio data, other types may be used for other purposes
+    if (messageType != 4) {
+      _logger.log('Sendspin: Unexpected binary message type: $messageType');
+      return;
+    }
+
+    // Extract timestamp (bytes 1-8, little-endian int64)
+    final timestampBytes = ByteData.sublistView(frame, 1, 9);
+    final timestamp = timestampBytes.getInt64(0, Endian.little);
+
+    // Extract actual PCM audio data (everything after the 9-byte header)
+    final audioData = Uint8List.sublistView(frame, 9);
+
+    _audioFramesReceived++;
+
+    // Log periodically to avoid spam
+    if (_audioFramesReceived == 1) {
+      _logger.log('Sendspin: Receiving audio data (first frame: ${frame.length} bytes, audio: ${audioData.length} bytes, ts: $timestamp)');
+    } else if (_audioFramesReceived % 100 == 0) {
+      _logger.log('Sendspin: Received $_audioFramesReceived audio frames');
+    }
+
+    // Emit only the PCM audio data (without header) to stream for consumers
+    if (!_audioDataController.isClosed) {
+      _audioDataController.add(audioData);
+    }
+
+    // Call callback if registered
+    onAudioData?.call(audioData);
+  }
+
+  /// Handle WebSocket errors
+  void _handleError(dynamic error) {
+    _logger.log('Sendspin: WebSocket error: $error');
+    _updateState(SendspinConnectionState.error);
+    _scheduleReconnect();
+  }
+
+  /// Handle WebSocket close
+  void _handleDone() {
+    _logger.log('Sendspin: WebSocket closed');
+    _updateState(SendspinConnectionState.disconnected);
+    _scheduleReconnect();
+  }
+
+  /// Send a JSON message to the server
+  /// allowDuringHandshake: set to true to send messages before connection is established (e.g., hello)
+  void _sendMessage(Map<String, dynamic> message, {bool allowDuringHandshake = false}) {
+    if (_channel == null) return;
+
+    // During handshake, we need to send hello even though state is still 'connecting'
+    if (!allowDuringHandshake && _state != SendspinConnectionState.connected) return;
+
+    try {
+      final json = jsonEncode(message);
+      _logger.log('Sendspin: Sending message: ${message['type']}');
+      _channel!.sink.add(json);
+    } catch (e) {
+      _logger.log('Sendspin: Error sending message: $e');
+    }
+  }
+
+  /// Report current player state to server
+  /// Uses Sendspin protocol 'client/state' message format
+  void reportState({
+    bool? powered,
+    bool? playing,
+    bool? paused,
+    int? position,
+    int? volume,
+    bool? muted,
+  }) {
+    if (powered != null) _isPowered = powered;
+    if (playing != null) _isPlaying = playing;
+    if (paused != null) _isPaused = paused;
+    if (position != null) _position = position;
+    if (volume != null) _volume = volume;
+    if (muted != null) _isMuted = muted;
+
+    // Determine player state for Sendspin protocol
+    // 'synchronized' = ready/playing, 'idle' = not playing
+    final playerState = _isPlaying || _isPaused ? 'synchronized' : 'idle';
+
+    _sendMessage({
+      'type': 'client/state',
+      'payload': {
+        'player': {
+          'state': playerState,
+          'volume': _volume,
+          'muted': _isMuted,
+        },
+      },
+    });
+  }
+
+  /// Check if server URL is HTTPS
+  bool _isHttpsServer() {
+    return serverUrl.startsWith('https://') ||
+           serverUrl.startsWith('wss://') ||
+           (!serverUrl.contains('://') && !serverUrl.contains(':'));
+  }
+
+  /// Build external Sendspin WebSocket URL from server URL
+  String _buildExternalSendspinUrl() {
+    var url = serverUrl;
+
+    // Convert HTTP(S) to WS(S)
+    if (url.startsWith('https://')) {
+      url = 'wss://${url.substring(8)}';
+    } else if (url.startsWith('http://')) {
+      url = 'ws://${url.substring(7)}';
+    } else if (!url.startsWith('ws://') && !url.startsWith('wss://')) {
+      url = 'wss://$url';
+    }
+
+    // Remove trailing slash and add /sendspin path
+    url = url.replaceAll(RegExp(r'/+$'), '');
+
+    // Remove any existing path and add /sendspin
+    final uri = Uri.parse(url);
+    return Uri(
+      scheme: uri.scheme,
+      host: uri.host,
+      port: uri.hasPort ? uri.port : null,
+      path: '/sendspin',
+    ).toString();
+  }
+
+  /// Start heartbeat timer using Sendspin's client/time for clock synchronization
+  void _startHeartbeat() {
+    _stopHeartbeat();
+    _heartbeatTimer = Timer.periodic(const Duration(seconds: 30), (_) {
+      _sendClientTime();
+    });
+  }
+
+  /// Send client/time message for clock synchronization (Sendspin protocol)
+  void _sendClientTime({bool allowDuringHandshake = false}) {
+    final timestampMicroseconds = DateTime.now().microsecondsSinceEpoch;
+    _sendMessage({
+      'type': 'client/time',
+      'payload': {
+        'timestamp': timestampMicroseconds,
+      },
+    }, allowDuringHandshake: allowDuringHandshake);
+  }
+
+  /// Send initial client/state immediately after handshake (required by Sendspin spec)
+  /// Must use allowDuringHandshake since state is still 'connecting' at this point
+  void _sendInitialState() {
+    _logger.log('Sendspin: Sending initial client/state');
+    _sendMessage({
+      'type': 'client/state',
+      'payload': {
+        'player': {
+          'state': 'synchronized',
+          'volume': _volume,
+          'muted': _isMuted,
+        },
+      },
+    }, allowDuringHandshake: true);
+  }
+
+  /// Stop heartbeat timer
+  void _stopHeartbeat() {
+    _heartbeatTimer?.cancel();
+    _heartbeatTimer = null;
+  }
+
+  /// Schedule reconnection attempt
+  void _scheduleReconnect() {
+    if (_isDisposed) return;
+
+    _reconnectTimer?.cancel();
+    _reconnectTimer = Timer(const Duration(seconds: 5), () {
+      if (!_isDisposed && _state != SendspinConnectionState.connected) {
+        _logger.log('Sendspin: Attempting reconnection...');
+        if (_connectedUrl != null) {
+          connectWithUrl(_connectedUrl!);
+        }
+      }
+    });
+  }
+
+  /// Update connection state
+  void _updateState(SendspinConnectionState newState) {
+    if (_state != newState) {
+      _state = newState;
+      _stateController.add(newState);
+    }
+  }
+
+  /// Disconnect from server using Sendspin's client/goodbye message
+  Future<void> disconnect() async {
+    _stopHeartbeat();
+    _reconnectTimer?.cancel();
+
+    if (_channel != null) {
+      // Send graceful goodbye per Sendspin protocol
+      _sendMessage({
+        'type': 'client/goodbye',
+        'payload': {
+          'reason': 'user_request',
+        },
+      });
+      await _channel!.sink.close();
+      _channel = null;
+    }
+
+    _updateState(SendspinConnectionState.disconnected);
+  }
+
+  /// Dispose the service
+  void dispose() {
+    _isDisposed = true;
+    _stopHeartbeat();
+    _reconnectTimer?.cancel();
+    _channel?.sink.close();
+    _stateController.close();
+    _audioDataController.close();
+  }
+}

lib/services/settings_service.dart

@@ -6,10 +6,11 @@ class SettingsService {
   static const String _keyAuthServerUrl = 'auth_server_url';
   static const String _keyWebSocketPort = 'websocket_port';
   static const String _keyAuthToken = 'auth_token';
+  static const String _keyMaAuthToken = 'ma_auth_token'; // Music Assistant native auth token
   static const String _keyAuthCredentials = 'auth_credentials'; // NEW: Serialized auth strategy credentials
   static const String _keyUsername = 'username';
   static const String _keyPassword = 'password';
-  static const String _keyBuiltinPlayerId = 'builtin_player_id';
+  static const String _keyBuiltinPlayerId = 'local_player_id'; // Unified with DeviceIdService
   static const String _keyThemeMode = 'theme_mode';
   static const String _keyUseMaterialTheme = 'use_material_theme';
   static const String _keyAdaptiveTheme = 'adaptive_theme';
@@ -18,6 +19,14 @@ class SettingsService {
   static const String _keyTheAudioDbApiKey = 'theaudiodb_api_key';
   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 const String _keyShowRecentAlbums = 'show_recent_albums';
+  static const String _keyShowDiscoverArtists = 'show_discover_artists';
+  static const String _keyShowDiscoverAlbums = 'show_discover_albums';
+  static const String _keyShowFavoriteAlbums = 'show_favorite_albums';
+  static const String _keyShowFavoriteArtists = 'show_favorite_artists';
+  static const String _keyShowFavoriteTracks = 'show_favorite_tracks';
 
   static Future<String?> getServerUrl() async {
     final prefs = await SharedPreferences.getInstance();
@@ -29,6 +38,11 @@ class SettingsService {
     await prefs.setString(_keyServerUrl, url);
   }
 
+  static Future<void> clearServerUrl() async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.remove(_keyServerUrl);
+  }
+
   // Get authentication server URL (returns null if not set, meaning use server URL)
   static Future<String?> getAuthServerUrl() async {
     final prefs = await SharedPreferences.getInstance();
@@ -77,6 +91,28 @@ class SettingsService {
     }
   }
 
+  // Get Music Assistant native auth token (long-lived token)
+  static Future<String?> getMaAuthToken() async {
+    final prefs = await SharedPreferences.getInstance();
+    return prefs.getString(_keyMaAuthToken);
+  }
+
+  // Set Music Assistant native auth token (long-lived token)
+  static Future<void> setMaAuthToken(String? token) async {
+    final prefs = await SharedPreferences.getInstance();
+    if (token == null || token.isEmpty) {
+      await prefs.remove(_keyMaAuthToken);
+    } else {
+      await prefs.setString(_keyMaAuthToken, token);
+    }
+  }
+
+  // Clear Music Assistant native auth token
+  static Future<void> clearMaAuthToken() async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.remove(_keyMaAuthToken);
+  }
+
   // Get authentication credentials (serialized auth strategy credentials)
   static Future<Map<String, dynamic>?> getAuthCredentials() async {
     final prefs = await SharedPreferences.getInstance();
@@ -218,7 +254,7 @@ class SettingsService {
   // Local Playback Settings
   static Future<bool> getEnableLocalPlayback() async {
     final prefs = await SharedPreferences.getInstance();
-    return prefs.getBool(_keyEnableLocalPlayback) ?? false;
+    return prefs.getBool(_keyEnableLocalPlayback) ?? true;
   }
 
   static Future<void> setEnableLocalPlayback(bool enabled) async {
@@ -227,8 +263,15 @@ class SettingsService {
   }
 
   static Future<String> getLocalPlayerName() async {
+    // Derive player name from owner name
+    final ownerName = await getOwnerName();
+    if (ownerName != null && ownerName.isNotEmpty) {
+      return _makePlayerName(ownerName);
+    }
+
+    // Fallback to stored local player name or default
     final prefs = await SharedPreferences.getInstance();
-    return prefs.getString(_keyLocalPlayerName) ?? 'Assistant To The Music';
+    return prefs.getString(_keyLocalPlayerName) ?? 'Ensemble';
   }
 
   static Future<void> setLocalPlayerName(String name) async {
@@ -236,8 +279,106 @@ class SettingsService {
     await prefs.setString(_keyLocalPlayerName, name);
   }
 
+  // Owner Name - used to derive player name
+  static Future<String?> getOwnerName() async {
+    final prefs = await SharedPreferences.getInstance();
+    return prefs.getString(_keyOwnerName);
+  }
+
+  static Future<void> setOwnerName(String name) async {
+    final prefs = await SharedPreferences.getInstance();
+    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"
+    if (ownerName.toLowerCase().endsWith('s')) {
+      return "$ownerName' Phone";
+    } else {
+      return "$ownerName's Phone";
+    }
+  }
+
   static Future<void> clearSettings() async {
     final prefs = await SharedPreferences.getInstance();
     await prefs.clear();
   }
+
+  // Home Screen Row Settings (Main rows - default on)
+  static Future<bool> getShowRecentAlbums() async {
+    final prefs = await SharedPreferences.getInstance();
+    return prefs.getBool(_keyShowRecentAlbums) ?? true;
+  }
+
+  static Future<void> setShowRecentAlbums(bool show) async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setBool(_keyShowRecentAlbums, show);
+  }
+
+  static Future<bool> getShowDiscoverArtists() async {
+    final prefs = await SharedPreferences.getInstance();
+    return prefs.getBool(_keyShowDiscoverArtists) ?? true;
+  }
+
+  static Future<void> setShowDiscoverArtists(bool show) async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setBool(_keyShowDiscoverArtists, show);
+  }
+
+  static Future<bool> getShowDiscoverAlbums() async {
+    final prefs = await SharedPreferences.getInstance();
+    return prefs.getBool(_keyShowDiscoverAlbums) ?? true;
+  }
+
+  static Future<void> setShowDiscoverAlbums(bool show) async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setBool(_keyShowDiscoverAlbums, show);
+  }
+
+  // Home Screen Favorites Settings (default off)
+  static Future<bool> getShowFavoriteAlbums() async {
+    final prefs = await SharedPreferences.getInstance();
+    return prefs.getBool(_keyShowFavoriteAlbums) ?? false;
+  }
+
+  static Future<void> setShowFavoriteAlbums(bool show) async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setBool(_keyShowFavoriteAlbums, show);
+  }
+
+  static Future<bool> getShowFavoriteArtists() async {
+    final prefs = await SharedPreferences.getInstance();
+    return prefs.getBool(_keyShowFavoriteArtists) ?? false;
+  }
+
+  static Future<void> setShowFavoriteArtists(bool show) async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setBool(_keyShowFavoriteArtists, show);
+  }
+
+  static Future<bool> getShowFavoriteTracks() async {
+    final prefs = await SharedPreferences.getInstance();
+    return prefs.getBool(_keyShowFavoriteTracks) ?? false;
+  }
+
+  static Future<void> setShowFavoriteTracks(bool show) async {
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setBool(_keyShowFavoriteTracks, show);
+  }
 }

lib/theme/app_theme.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 
-// Brand colors for Amass
+// Brand colors for Ensemble
 const Color brandPrimaryColor = Color(0xFF1a1a1a);
 const Color brandAccentColor = Color(0xFF604CEC);
 

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,43 +1,172 @@
 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 {
+  final Color primary;       // Main accent color (vibrant)
+  final Color surface;       // Background color
+  final Color onSurface;     // Text color on background
+  final Color miniPlayer;    // Darker version for mini player
+
+  const AdaptiveColors({
+    required this.primary,
+    required this.surface,
+    required this.onSurface,
+    required this.miniPlayer,
+  });
+
+  static const fallback = AdaptiveColors(
+    primary: Color(0xFF604CEC),
+    surface: Color(0xFF121212),
+    onSurface: Colors.white,
+    miniPlayer: Color(0xFF1a1a1a),
+  );
+}
+
+/// Helper to get contrasting text color based on background luminance
+Color getContrastingTextColor(Color backgroundColor) {
+  // Use relative luminance to determine if we need light or dark text
+  // Standard threshold is 0.179 based on WCAG guidelines
+  return backgroundColor.computeLuminance() > 0.4 ? Colors.black : Colors.white;
+}
 
 class PaletteHelper {
-  /// Extract a color palette from an image
+  /// Extract a color palette from an image with higher color count for better variety
   static Future<PaletteGenerator?> extractPalette(ImageProvider imageProvider) async {
     try {
       final palette = await PaletteGenerator.fromImageProvider(
         imageProvider,
-        maximumColorCount: 20,
+        maximumColorCount: 32, // Increased from 20 for more color variety
       );
       return palette;
     } catch (e) {
-      print('⚠️ Failed to extract palette: $e');
+      _logger.warning('Failed to extract palette: $e', context: 'Palette');
       return null;
     }
   }
 
-  /// Generate color schemes from a palette
+  /// Extract actual colors from the palette (not seed-based)
+  static AdaptiveColors? extractAdaptiveColors(PaletteGenerator? palette, {required bool isDark}) {
+    if (palette == null) return null;
+
+    // Get primary color - prefer vibrant, then dominant
+    final Color primary = palette.vibrantColor?.color ??
+                         palette.lightVibrantColor?.color ??
+                         palette.dominantColor?.color ??
+                         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);
+    Color adjustedPrimary = 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
+      final Color surfaceBase = palette.darkMutedColor?.color ??
+                                palette.mutedColor?.color ??
+                                const Color(0xFF121212);
+
+      // Darken the surface color significantly for the expanded background
+      final HSLColor hslSurface = HSLColor.fromColor(surfaceBase);
+      final Color surface = hslSurface
+          .withLightness((hslSurface.lightness * 0.3).clamp(0.05, 0.15))
+          .toColor();
+
+      // Mini player should be medium brightness - noticeably tinted but readable
+      // Use the muted color but at medium lightness (0.25-0.35 range)
+      final Color miniPlayer = hslSurface
+          .withLightness(0.3.clamp(0.25, 0.38))
+          .withSaturation((hslSurface.saturation * 1.2).clamp(0.15, 0.5))
+          .toColor();
+
+      return AdaptiveColors(
+        primary: adjustedPrimary,
+        surface: surface,
+        onSurface: Colors.white,
+        miniPlayer: miniPlayer,
+      );
+    } else {
+      // Light mode: use light muted colors
+      final Color surfaceBase = palette.lightMutedColor?.color ??
+                                palette.mutedColor?.color ??
+                                Colors.white;
+
+      final HSLColor hslSurface = HSLColor.fromColor(surfaceBase);
+      final Color surface = hslSurface
+          .withLightness((hslSurface.lightness).clamp(0.92, 0.98))
+          .toColor();
+
+      // Mini player in light mode - medium tinted
+      final Color miniPlayer = hslSurface
+          .withLightness(0.75.clamp(0.65, 0.8))
+          .withSaturation((hslSurface.saturation * 1.2).clamp(0.15, 0.5))
+          .toColor();
+
+      return AdaptiveColors(
+        primary: adjustedPrimary,
+        surface: surface,
+        onSurface: Colors.black87,
+        miniPlayer: miniPlayer,
+      );
+    }
+  }
+
+  /// Generate color schemes from a palette (kept for backward compatibility)
   static (ColorScheme, ColorScheme)? generateColorSchemes(PaletteGenerator? palette) {
     if (palette == null) return null;
 
-    // Get the dominant color as the seed color
-    Color seedColor = palette.dominantColor?.color ??
-                     palette.vibrantColor?.color ??
-                     palette.mutedColor?.color ??
-                     const Color(0xFF604CEC); // Fallback to brand color
+    final lightColors = extractAdaptiveColors(palette, isDark: false);
+    final darkColors = extractAdaptiveColors(palette, isDark: true);
 
-    // Generate light and dark color schemes from the seed color
-    final lightScheme = ColorScheme.fromSeed(
-      seedColor: seedColor,
+    if (lightColors == null || darkColors == null) return null;
+
+    // Determine contrasting text colors based on primary color luminance
+    final lightOnPrimary = getContrastingTextColor(lightColors.primary);
+    final darkOnPrimary = getContrastingTextColor(darkColors.primary);
+    final lightOnMiniPlayer = getContrastingTextColor(lightColors.miniPlayer);
+    final darkOnMiniPlayer = getContrastingTextColor(darkColors.miniPlayer);
+
+    final lightScheme = ColorScheme(
       brightness: Brightness.light,
+      primary: lightColors.primary,
+      onPrimary: lightOnPrimary,
+      secondary: lightColors.primary.withOpacity(0.8),
+      onSecondary: lightOnPrimary,
+      error: Colors.red,
+      onError: Colors.white,
+      surface: lightColors.surface,
+      onSurface: lightColors.onSurface,
+      primaryContainer: lightColors.miniPlayer,
+      onPrimaryContainer: lightOnMiniPlayer,
     );
 
-    final darkScheme = ColorScheme.fromSeed(
-      seedColor: seedColor,
+    final darkScheme = ColorScheme(
       brightness: Brightness.dark,
-      // Use darker background colors for better contrast
-      surface: const Color(0xFF2a2a2a),
-      background: const Color(0xFF1a1a1a),
+      primary: darkColors.primary,
+      onPrimary: darkOnPrimary,
+      secondary: darkColors.primary.withOpacity(0.8),
+      onSecondary: darkOnPrimary,
+      error: Colors.redAccent,
+      onError: Colors.black,
+      surface: darkColors.surface,
+      onSurface: darkColors.onSurface,
+      primaryContainer: darkColors.miniPlayer,
+      onPrimaryContainer: darkOnMiniPlayer,
     );
 
     return (lightScheme, darkScheme);

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

@@ -1,5 +1,35 @@
 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 {
+  if (imageUrl == null || imageUrl.isEmpty) return;
+
+  try {
+    final colorSchemes = await PaletteHelper.extractColorSchemes(CachedNetworkImageProvider(imageUrl));
+    if (colorSchemes != null && context.mounted) {
+      final themeProvider = context.read<ThemeProvider>();
+      themeProvider.updateAdaptiveColors(colorSchemes.$1, colorSchemes.$2);
+    }
+  } catch (e) {
+    // Silently fail - colors will update when track plays
+    _themeLogger.debug('Failed to extract colors on tap: $e', context: 'Theme');
+  }
+}
+
+/// Clear adaptive colors and return to default theme colors
+/// Call this when navigating back from album/artist detail screens
+void clearAdaptiveColorsOnBack(BuildContext context) {
+  final themeProvider = context.read<ThemeProvider>();
+  themeProvider.clearAdaptiveColors();
+}
 
 class ThemeProvider extends ChangeNotifier {
   ThemeMode _themeMode = ThemeMode.system;
@@ -7,6 +37,11 @@ class ThemeProvider extends ChangeNotifier {
   bool _adaptiveTheme = true;
   Color _customColor = const Color(0xFF604CEC);
 
+  // Adaptive colors extracted from current album art
+  AdaptiveColors? _adaptiveColors;
+  ColorScheme? _adaptiveLightScheme;
+  ColorScheme? _adaptiveDarkScheme;
+
   ThemeProvider() {
     _loadSettings();
   }
@@ -16,6 +51,23 @@ class ThemeProvider extends ChangeNotifier {
   bool get adaptiveTheme => _adaptiveTheme;
   Color get customColor => _customColor;
 
+  // Adaptive color getters
+  AdaptiveColors? get adaptiveColors => _adaptiveColors;
+  ColorScheme? get adaptiveLightScheme => _adaptiveLightScheme;
+  ColorScheme? get adaptiveDarkScheme => _adaptiveDarkScheme;
+
+  /// Get the current adaptive primary color (for bottom nav highlight, etc.)
+  Color get adaptivePrimaryColor => _adaptiveColors?.primary ?? _customColor;
+
+  /// Get the current adaptive surface color (for bottom nav background, etc.)
+  /// Returns a subtle tinted surface based on the adaptive colors
+  Color? get adaptiveSurfaceColor {
+    if (_adaptiveColors == null) return null;
+    // Use the miniPlayer color but darkened for a subtle tinted background
+    final hsl = HSLColor.fromColor(_adaptiveColors!.miniPlayer);
+    return hsl.withLightness((hsl.lightness * 0.4).clamp(0.08, 0.15)).toColor();
+  }
+
   Future<void> _loadSettings() async {
     final themeModeString = await SettingsService.getThemeMode();
     _themeMode = _parseThemeMode(themeModeString);
@@ -93,4 +145,32 @@ class ThemeProvider extends ChangeNotifier {
     await SettingsService.saveCustomColor(_colorToString(color));
     notifyListeners();
   }
+
+  /// Update adaptive colors from album art
+  void updateAdaptiveColors(ColorScheme? lightScheme, ColorScheme? darkScheme) {
+    _adaptiveLightScheme = lightScheme;
+    _adaptiveDarkScheme = darkScheme;
+
+    // Extract AdaptiveColors from the schemes
+    if (darkScheme != null) {
+      _adaptiveColors = AdaptiveColors(
+        primary: darkScheme.primary,
+        surface: darkScheme.surface,
+        onSurface: darkScheme.onSurface,
+        miniPlayer: darkScheme.primaryContainer,
+      );
+    } else {
+      _adaptiveColors = null;
+    }
+
+    notifyListeners();
+  }
+
+  /// Clear adaptive colors (when no track is playing)
+  void clearAdaptiveColors() {
+    _adaptiveColors = null;
+    _adaptiveLightScheme = null;
+    _adaptiveDarkScheme = null;
+    notifyListeners();
+  }
 }

lib/utils/page_transitions.dart

@@ -0,0 +1,64 @@
+import 'package:flutter/material.dart';
+
+/// A page route optimized for hero animations.
+///
+/// On forward navigation: fade in + slight slide from right
+/// On back navigation: quick fade out + slide down
+class FadeSlidePageRoute<T> extends PageRouteBuilder<T> {
+  final Widget child;
+
+  FadeSlidePageRoute({
+    required this.child,
+  }) : super(
+          pageBuilder: (context, animation, secondaryAnimation) => child,
+          transitionDuration: const Duration(milliseconds: 300),
+          reverseTransitionDuration: const Duration(milliseconds: 200), // Quick back animation
+          transitionsBuilder: (context, animation, secondaryAnimation, child) {
+            // Fade transition - uses optimized cubic curves for smoother hero animations
+            final fadeAnimation = CurvedAnimation(
+              parent: animation,
+              curve: Curves.easeOutCubic,
+              reverseCurve: Curves.easeInCubic,
+            );
+
+            // Check direction for slide
+            final isReverse = animation.status == AnimationStatus.reverse;
+
+            if (isReverse) {
+              // Back navigation: slide DOWN with easeInCubic for smooth deceleration
+              final slideAnimation = Tween<Offset>(
+                begin: const Offset(0, 0.08), // Slide down 8%
+                end: Offset.zero,
+              ).animate(CurvedAnimation(
+                parent: animation,
+                curve: Curves.easeInCubic,
+              ));
+
+              return FadeTransition(
+                opacity: fadeAnimation,
+                child: SlideTransition(
+                  position: slideAnimation,
+                  child: child,
+                ),
+              );
+            } else {
+              // Forward navigation: slide from RIGHT with easeOutCubic for natural motion
+              final slideAnimation = Tween<Offset>(
+                begin: const Offset(0.05, 0), // Slide from right 5%
+                end: Offset.zero,
+              ).animate(CurvedAnimation(
+                parent: animation,
+                curve: Curves.easeOutCubic,
+              ));
+
+              return FadeTransition(
+                opacity: fadeAnimation,
+                child: SlideTransition(
+                  position: slideAnimation,
+                  child: child,
+                ),
+              );
+            }
+          },
+        );
+}

lib/widgets/album_card.dart

@@ -1,82 +1,159 @@
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
+import 'package:cached_network_image/cached_network_image.dart';
 import '../models/media_item.dart';
 import '../providers/music_assistant_provider.dart';
 import '../screens/album_details_screen.dart';
 import '../constants/hero_tags.dart';
+import '../theme/theme_provider.dart';
+import '../utils/page_transitions.dart';
+import '../services/metadata_service.dart';
 
-class AlbumCard extends StatelessWidget {
+class AlbumCard extends StatefulWidget {
   final Album album;
   final VoidCallback? onTap;
   final String? heroTagSuffix;
 
   const AlbumCard({
-    super.key, 
+    super.key,
     required this.album,
     this.onTap,
     this.heroTagSuffix,
   });
 
+  @override
+  State<AlbumCard> createState() => _AlbumCardState();
+}
+
+class _AlbumCardState extends State<AlbumCard> {
+  String? _fallbackImageUrl;
+  bool _triedFallback = false;
+  bool _maImageFailed = false;
+  String? _cachedMaImageUrl;
+
+  @override
+  void initState() {
+    super.initState();
+    _initFallbackImage();
+  }
+
+  void _initFallbackImage() {
+    // Check if MA has an image after first build, then fetch fallback if needed
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      if (!mounted) return;
+      final maProvider = context.read<MusicAssistantProvider>();
+      final maImageUrl = maProvider.api?.getImageUrl(widget.album, size: 256);
+      _cachedMaImageUrl = maImageUrl;
+
+      if (maImageUrl == null && !_triedFallback) {
+        _triedFallback = true;
+        _fetchFallbackImage();
+      }
+    });
+  }
+
+  Future<void> _fetchFallbackImage() async {
+    final fallbackUrl = await MetadataService.getAlbumImageUrl(
+      widget.album.name,
+      widget.album.artistsString,
+    );
+    if (fallbackUrl != null && mounted) {
+      setState(() {
+        _fallbackImageUrl = fallbackUrl;
+      });
+    }
+  }
+
+  void _onImageError() {
+    // When MA image fails to load, try Deezer fallback
+    if (!_triedFallback && !_maImageFailed) {
+      _maImageFailed = true;
+      _triedFallback = true;
+      _fetchFallbackImage();
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
     final maProvider = context.read<MusicAssistantProvider>();
-    final imageUrl = maProvider.api?.getImageUrl(album, size: 256);
+    // Use cached URL if available, otherwise get fresh
+    final maImageUrl = _cachedMaImageUrl ?? maProvider.api?.getImageUrl(widget.album, size: 256);
     final colorScheme = Theme.of(context).colorScheme;
     final textTheme = Theme.of(context).textTheme;
-    
-    final suffix = heroTagSuffix != null ? '_$heroTagSuffix' : '';
 
-    return GestureDetector(
-      onTap: onTap ?? () {
-        Navigator.push(
-          context,
-          MaterialPageRoute(
-            builder: (context) => AlbumDetailsScreen(
-              album: album,
-              heroTagSuffix: heroTagSuffix,
-            ),
-          ),
-        );
-      },
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          // Album artwork
-          AspectRatio(
-            aspectRatio: 1.0,
-            child: Hero(
-              tag: HeroTags.albumCover + (album.uri ?? album.itemId) + suffix,
-              child: Container(
-                decoration: BoxDecoration(
-                  borderRadius: BorderRadius.circular(12.0),
-                  color: colorScheme.surfaceVariant,
-                  image: imageUrl != null
-                      ? DecorationImage(
-                          image: NetworkImage(imageUrl),
-                          fit: BoxFit.cover,
-                        )
-                      : null,
-                ),
-                child: imageUrl == null
-                    ? Center(
-                        child: Icon(
-                          Icons.album_rounded,
-                          size: 64,
-                          color: colorScheme.onSurfaceVariant,
-                        ),
-                      )
-                    : null,
+    final suffix = widget.heroTagSuffix != null ? '_${widget.heroTagSuffix}' : '';
+
+    // Use fallback if MA image failed or wasn't available
+    final imageUrl = (_maImageFailed || maImageUrl == null) ? _fallbackImageUrl : maImageUrl;
+
+    return RepaintBoundary(
+      child: GestureDetector(
+        onTap: widget.onTap ?? () {
+          // Update adaptive colors immediately on tap
+          updateAdaptiveColorsFromImage(context, imageUrl);
+          Navigator.push(
+            context,
+            FadeSlidePageRoute(
+              child: AlbumDetailsScreen(
+                album: widget.album,
+                heroTagSuffix: widget.heroTagSuffix,
+              ),
+            ),
+          );
+        },
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            // Album artwork
+            AspectRatio(
+              aspectRatio: 1.0,
+              child: Hero(
+                tag: HeroTags.albumCover + (widget.album.uri ?? widget.album.itemId) + suffix,
+                child: ClipRRect(
+                  borderRadius: BorderRadius.circular(12.0),
+                  child: Container(
+                    color: colorScheme.surfaceVariant,
+                    child: imageUrl != null
+                        ? CachedNetworkImage(
+                            imageUrl: imageUrl,
+                            fit: BoxFit.cover,
+                            memCacheWidth: 256,
+                            memCacheHeight: 256,
+                            fadeInDuration: const Duration(milliseconds: 150),
+                            placeholder: (context, url) => const SizedBox(),
+                            errorWidget: (context, url, error) {
+                              // Try fallback on error (only for MA URLs, not fallback URLs)
+                              if (!_maImageFailed && url == maImageUrl) {
+                                WidgetsBinding.instance.addPostFrameCallback((_) {
+                                  _onImageError();
+                                });
+                              }
+                              return Icon(
+                                Icons.album_rounded,
+                                size: 64,
+                                color: colorScheme.onSurfaceVariant,
+                              );
+                            },
+                          )
+                        : Center(
+                            child: Icon(
+                              Icons.album_rounded,
+                              size: 64,
+                              color: colorScheme.onSurfaceVariant,
+                            ),
+                          ),
+                  ),
+                ),
               ),
             ),
-          ),
           const SizedBox(height: 8),
           // Album title
           Hero(
-            tag: HeroTags.albumTitle + (album.uri ?? album.itemId) + suffix,
+            tag: HeroTags.albumTitle + (widget.album.uri ?? widget.album.itemId) + suffix,
             child: Material(
               color: Colors.transparent,
               child: Text(
-                album.name,
+                widget.album.name,
                 maxLines: 1,
                 overflow: TextOverflow.ellipsis,
                 style: textTheme.titleSmall?.copyWith(
@@ -88,11 +165,11 @@ class AlbumCard extends StatelessWidget {
           ),
           // Artist name
           Hero(
-            tag: HeroTags.artistName + (album.uri ?? album.itemId) + suffix,
+            tag: HeroTags.artistName + (widget.album.uri ?? widget.album.itemId) + suffix,
             child: Material(
               color: Colors.transparent,
               child: Text(
-                album.artistsString,
+                widget.album.artistsString,
                 maxLines: 1,
                 overflow: TextOverflow.ellipsis,
                 style: textTheme.bodySmall?.copyWith(
@@ -101,7 +178,8 @@ class AlbumCard extends StatelessWidget {
               ),
             ),
           ),
-        ],
+          ],
+        ),
       ),
     );
   }

lib/widgets/album_row.dart

@@ -2,18 +2,21 @@ 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';
 import 'album_card.dart';
 
 class AlbumRow extends StatefulWidget {
   final String title;
   final Future<List<Album>> Function() loadAlbums;
   final String? heroTagSuffix;
+  final double? rowHeight;
 
   const AlbumRow({
     super.key,
     required this.title,
     required this.loadAlbums,
     this.heroTagSuffix,
+    this.rowHeight,
   });
 
   @override
@@ -22,6 +25,7 @@ class AlbumRow extends StatefulWidget {
 
 class _AlbumRowState extends State<AlbumRow> with AutomaticKeepAliveClientMixin {
   late Future<List<Album>> _albumsFuture;
+  List<Album>? _cachedAlbums; // Keep last loaded data to prevent flash
   bool _hasLoaded = false;
 
   @override
@@ -35,76 +39,124 @@ class _AlbumRowState extends State<AlbumRow> with AutomaticKeepAliveClientMixin
 
   void _loadAlbumsOnce() {
     if (!_hasLoaded) {
-      _albumsFuture = widget.loadAlbums();
+      _albumsFuture = widget.loadAlbums().then((albums) {
+        _cachedAlbums = albums;
+        return albums;
+      });
       _hasLoaded = true;
     }
   }
 
+  static final _logger = DebugLogger();
+
   @override
   Widget build(BuildContext context) {
+    _logger.startBuild('AlbumRow:${widget.title}');
     super.build(context); // Required for AutomaticKeepAliveClientMixin
     final textTheme = Theme.of(context).textTheme;
     final colorScheme = Theme.of(context).colorScheme;
 
-    return Column(
-      crossAxisAlignment: CrossAxisAlignment.start,
-      children: [
-        Padding(
-          padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
-          child: Text(
-            widget.title,
-            style: textTheme.titleLarge?.copyWith(
-              fontWeight: FontWeight.bold,
-              color: colorScheme.onBackground,
+    // Total row height includes title + content
+    final totalHeight = widget.rowHeight ?? 237.0; // Default: 44 title + 193 content
+    const titleHeight = 44.0; // 12 top padding + ~24 text + 8 bottom padding
+    final contentHeight = totalHeight - titleHeight;
+
+    final result = RepaintBoundary(
+      child: SizedBox(
+        height: totalHeight,
+        child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Padding(
+            padding: const EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0),
+            child: Text(
+              widget.title,
+              style: textTheme.titleLarge?.copyWith(
+                fontWeight: FontWeight.bold,
+                color: colorScheme.onBackground,
+              ),
             ),
           ),
-        ),
-        SizedBox(
-          height: 210, // Slightly increased for text
-          child: FutureBuilder<List<Album>>(
-            future: _albumsFuture,
-            builder: (context, snapshot) {
-              if (snapshot.connectionState == ConnectionState.waiting) {
-                return const Center(child: CircularProgressIndicator());
-              }
+          Expanded(
+            child: FutureBuilder<List<Album>>(
+              future: _albumsFuture,
+              builder: (context, snapshot) {
+                // Use cached data immediately if available (prevents flash on rebuild)
+                final albums = snapshot.data ?? _cachedAlbums;
 
-              if (snapshot.hasError) {
-                return Center(
-                  child: Text('Error: ${snapshot.error}'),
-                );
-              }
+                // Only show loading if we have no data at all
+                if (albums == null && snapshot.connectionState == ConnectionState.waiting) {
+                  return const Center(child: CircularProgressIndicator());
+                }
 
-              final albums = snapshot.data ?? [];
-              if (albums.isEmpty) {
-                return Center(
-                  child: Text(
-                    'No albums found',
-                    style: TextStyle(color: colorScheme.onSurface.withOpacity(0.5)),
-                  ),
-                );
-              }
+                if (snapshot.hasError && albums == null) {
+                  return Center(
+                    child: Text('Error: ${snapshot.error}'),
+                  );
+                }
 
-              return ListView.builder(
-                scrollDirection: Axis.horizontal,
-                padding: const EdgeInsets.symmetric(horizontal: 12.0),
-                physics: const BouncingScrollPhysics(),
-                itemCount: albums.length,
-                itemBuilder: (context, index) {
-                  final album = albums[index];
-                  return Container(
-                    width: 150,
-                    margin: const EdgeInsets.symmetric(horizontal: 6.0),
-                    child: AlbumCard(
-                      album: album,
-                      heroTagSuffix: widget.heroTagSuffix,
+                if (albums == null || albums.isEmpty) {
+                  return Center(
+                    child: Text(
+                      'No albums found',
+                      style: TextStyle(color: colorScheme.onSurface.withOpacity(0.5)),
                     ),
                   );
-                },
-              );
-            },
+                }
+
+                // Card layout: square artwork + text below
+                // Text area: 8px gap + ~18px title + ~18px artist = ~44px
+                const textAreaHeight = 44.0;
+                final artworkSize = contentHeight - textAreaHeight;
+                final cardWidth = artworkSize; // Card width = artwork width (square)
+                final itemExtent = cardWidth + 12; // width + horizontal margins
+
+                return ScrollConfiguration(
+                  behavior: const _StretchScrollBehavior(),
+                  child: ListView.builder(
+                    scrollDirection: Axis.horizontal,
+                    padding: const EdgeInsets.symmetric(horizontal: 12.0),
+                    itemCount: albums.length,
+                    itemExtent: itemExtent,
+                    cacheExtent: 500, // Preload ~3 items ahead for smoother scrolling
+                    addAutomaticKeepAlives: false, // Row already uses AutomaticKeepAliveClientMixin
+                    addRepaintBoundaries: false, // Cards already have RepaintBoundary
+                    itemBuilder: (context, index) {
+                      final album = albums[index];
+                      return Container(
+                        key: ValueKey(album.uri ?? album.itemId),
+                        width: cardWidth,
+                        margin: const EdgeInsets.symmetric(horizontal: 6.0),
+                        child: AlbumCard(
+                          album: album,
+                          heroTagSuffix: widget.heroTagSuffix,
+                        ),
+                      );
+                    },
+                  ),
+                );
+              },
+            ),
           ),
+          ],
         ),
-      ],
+      ),
+    );
+    _logger.endBuild('AlbumRow:${widget.title}');
+    return result;
+  }
+}
+
+/// Custom scroll behavior that uses Android 12+ stretch overscroll effect
+class _StretchScrollBehavior extends ScrollBehavior {
+  const _StretchScrollBehavior();
+
+  @override
+  Widget buildOverscrollIndicator(
+      BuildContext context, Widget child, ScrollableDetails details) {
+    return StretchingOverscrollIndicator(
+      axisDirection: details.direction,
+      child: child,
     );
   }
 }

lib/widgets/artist_avatar.dart

@@ -0,0 +1,144 @@
+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;
+  String? _maImageUrl;
+  String? _fallbackImageUrl;
+  bool _triedFallback = false;
+  bool _maImageFailed = 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);
+    _maImageUrl = maUrl;
+
+    if (maUrl != null) {
+      if (mounted) {
+        setState(() {
+          _imageUrl = maUrl;
+        });
+        widget.onImageLoaded?.call(maUrl);
+      }
+      return;
+    }
+
+    // Fallback to external sources (MA returned null)
+    _fetchFallbackImage();
+  }
+
+  Future<void> _fetchFallbackImage() async {
+    if (_triedFallback) return;
+    _triedFallback = true;
+
+    final fallbackUrl = await MetadataService.getArtistImageUrl(widget.artist.name);
+    _fallbackImageUrl = fallbackUrl;
+
+    if (fallbackUrl != null && mounted) {
+      setState(() {
+        _imageUrl = fallbackUrl;
+      });
+      widget.onImageLoaded?.call(fallbackUrl);
+    }
+  }
+
+  void _onImageError() {
+    // When MA image fails to load, try Deezer fallback
+    if (!_maImageFailed) {
+      _maImageFailed = true;
+      _fetchFallbackImage();
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    // Use fallback if MA image failed
+    final displayUrl = (_maImageFailed && _fallbackImageUrl != null)
+        ? _fallbackImageUrl
+        : _imageUrl;
+
+    Widget avatarContent;
+    if (displayUrl != null) {
+      avatarContent = ClipOval(
+        child: CachedNetworkImage(
+          imageUrl: displayUrl,
+          width: widget.radius * 2,
+          height: widget.radius * 2,
+          fit: BoxFit.cover,
+          placeholder: (context, url) => Container(
+            color: colorScheme.surfaceVariant,
+            child: Icon(Icons.person_rounded, color: colorScheme.onSurfaceVariant),
+          ),
+          errorWidget: (context, url, error) {
+            // Try fallback on error (only for MA URLs, not fallback URLs)
+            if (!_maImageFailed && url == _maImageUrl) {
+              WidgetsBinding.instance.addPostFrameCallback((_) {
+                _onImageError();
+              });
+            }
+            return Container(
+              color: colorScheme.surfaceVariant,
+              child: Icon(Icons.person_rounded, color: colorScheme.onSurfaceVariant),
+            );
+          },
+        ),
+      );
+    } else {
+      avatarContent = CircleAvatar(
+        radius: widget.radius,
+        backgroundColor: colorScheme.surfaceVariant,
+        child: Icon(Icons.person_rounded, color: colorScheme.onSurfaceVariant),
+      );
+    }
+
+    final avatar = SizedBox(
+      width: widget.radius * 2,
+      height: widget.radius * 2,
+      child: avatarContent,
+    );
+
+    if (widget.heroTag != null) {
+      return Hero(
+        tag: widget.heroTag!,
+        child: avatar,
+      );
+    }
+
+    return avatar;
+  }
+}

lib/widgets/artist_card.dart

@@ -1,78 +1,185 @@
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
+import 'package:cached_network_image/cached_network_image.dart';
 import '../models/media_item.dart';
 import '../providers/music_assistant_provider.dart';
 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;
+  final double? imageSize;
 
   const ArtistCard({
-    super.key, 
+    super.key,
     required this.artist,
     this.onTap,
     this.heroTagSuffix,
+    this.imageSize,
   });
 
+  @override
+  State<ArtistCard> createState() => _ArtistCardState();
+}
+
+class _ArtistCardState extends State<ArtistCard> {
+  static final _logger = DebugLogger();
+  String? _fallbackImageUrl;
+  bool _triedFallback = false;
+  bool _maImageFailed = false;
+  String? _cachedMaImageUrl;
+
+  @override
+  void initState() {
+    super.initState();
+    // Fetch fallback image once in initState, not during build
+    _initFallbackImage();
+  }
+
+  void _initFallbackImage() {
+    // We'll check if MA has an image after first build, then fetch fallback if needed
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      if (!mounted) return;
+      final maProvider = context.read<MusicAssistantProvider>();
+      final maImageUrl = maProvider.api?.getImageUrl(widget.artist, size: 256);
+      _cachedMaImageUrl = maImageUrl;
+
+      if (maImageUrl == null && !_triedFallback) {
+        _triedFallback = true;
+        _logger.debug('No MA image for "${widget.artist.name}", trying fallback', context: 'ArtistCard');
+        _fetchFallbackImage();
+      }
+    });
+  }
+
+  void _onImageError() {
+    // When MA image fails to load, try Deezer fallback
+    if (!_triedFallback && !_maImageFailed) {
+      _maImageFailed = true;
+      _triedFallback = true;
+      _logger.debug('MA image failed for "${widget.artist.name}", trying fallback', context: 'ArtistCard');
+      _fetchFallbackImage();
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
     final maProvider = context.read<MusicAssistantProvider>();
-    final imageUrl = maProvider.api?.getImageUrl(artist, size: 256);
+    // Use cached URL if available, otherwise get fresh (but don't trigger fetches during build)
+    final maImageUrl = _cachedMaImageUrl ?? maProvider.api?.getImageUrl(widget.artist, size: 256);
     final colorScheme = Theme.of(context).colorScheme;
     final textTheme = Theme.of(context).textTheme;
-    
-    final suffix = heroTagSuffix != null ? '_$heroTagSuffix' : '';
 
-    return GestureDetector(
-      onTap: onTap ?? () {
-        Navigator.push(
-          context,
-          MaterialPageRoute(
-            builder: (context) => ArtistDetailsScreen(
-              artist: artist,
-              heroTagSuffix: heroTagSuffix,
+    final suffix = widget.heroTagSuffix != null ? '_${widget.heroTagSuffix}' : '';
+
+    // Use fallback if MA image failed or wasn't available
+    final imageUrl = (_maImageFailed || maImageUrl == null) ? _fallbackImageUrl : maImageUrl;
+
+    return RepaintBoundary(
+      child: GestureDetector(
+        onTap: widget.onTap ?? () {
+          // Update adaptive colors immediately on tap
+          updateAdaptiveColorsFromImage(context, imageUrl);
+          Navigator.push(
+            context,
+            FadeSlidePageRoute(
+              child: ArtistDetailsScreen(
+                artist: widget.artist,
+                heroTagSuffix: widget.heroTagSuffix,
+                initialImageUrl: imageUrl,
+              ),
             ),
-          ),
-        );
-      },
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.center,
-        children: [
-          // Artist image - circular
-          Hero(
-            tag: HeroTags.artistImage + (artist.uri ?? artist.itemId) + suffix,
-            child: CircleAvatar(
-              radius: 55, 
-              backgroundColor: colorScheme.surfaceVariant,
-              backgroundImage: imageUrl != null ? NetworkImage(imageUrl) : null,
-              child: imageUrl == null
-                  ? Icon(Icons.person_rounded, size: 60, color: colorScheme.onSurfaceVariant)
-                  : null,
+          );
+        },
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: [
+            // Artist image - circular, constrained to be a proper circle
+            Expanded(
+              child: Center(
+                child: LayoutBuilder(
+                  builder: (context, constraints) {
+                    // Use the smaller dimension to ensure a circle
+                    final size = constraints.maxWidth < constraints.maxHeight
+                        ? constraints.maxWidth
+                        : constraints.maxHeight;
+                    return Hero(
+                      tag: HeroTags.artistImage + (widget.artist.uri ?? widget.artist.itemId) + suffix,
+                      child: ClipOval(
+                        child: Container(
+                          width: size,
+                          height: size,
+                          color: colorScheme.surfaceVariant,
+                          child: imageUrl != null
+                              ? CachedNetworkImage(
+                                  imageUrl: imageUrl,
+                                  fit: BoxFit.cover,
+                                  memCacheWidth: 256,
+                                  memCacheHeight: 256,
+                                  fadeInDuration: const Duration(milliseconds: 150),
+                                  placeholder: (context, url) => const SizedBox(),
+                                  errorWidget: (context, url, error) {
+                                    // Try fallback on error (only for MA URLs, not fallback URLs)
+                                    if (!_maImageFailed && url == maImageUrl) {
+                                      WidgetsBinding.instance.addPostFrameCallback((_) {
+                                        _onImageError();
+                                      });
+                                    }
+                                    return Icon(
+                                      Icons.person_rounded,
+                                      size: size * 0.55,
+                                      color: colorScheme.onSurfaceVariant,
+                                    );
+                                  },
+                                )
+                              : Icon(Icons.person_rounded, size: size * 0.55, color: colorScheme.onSurfaceVariant),
+                        ),
+                      ),
+                    );
+                  },
+                ),
+              ),
             ),
-          ),
-          const SizedBox(height: 12),
-          // Artist name
-          Hero(
-            tag: HeroTags.artistName + (artist.uri ?? artist.itemId) + suffix,
-            child: Material(
-              color: Colors.transparent,
-              child: Text(
-                artist.name,
-                maxLines: 2,
-                overflow: TextOverflow.ellipsis,
-                textAlign: TextAlign.center,
-                style: textTheme.titleSmall?.copyWith(
-                  color: colorScheme.onSurface,
-                  fontWeight: FontWeight.w500,
+          const SizedBox(height: 8),
+          // Artist name - fixed height container so image size is consistent
+          SizedBox(
+            height: 36, // Fixed height for 2 lines of text
+            child: Hero(
+              tag: HeroTags.artistName + (widget.artist.uri ?? widget.artist.itemId) + suffix,
+              child: Material(
+                color: Colors.transparent,
+                child: Text(
+                  widget.artist.name,
+                  maxLines: 2,
+                  overflow: TextOverflow.ellipsis,
+                  textAlign: TextAlign.center,
+                  style: textTheme.titleSmall?.copyWith(
+                    color: colorScheme.onSurface,
+                    fontWeight: FontWeight.w500,
+                  ),
                 ),
               ),
             ),
           ),
-        ],
+          ],
+        ),
       ),
     );
   }
+
+  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/artist_row.dart

@@ -2,18 +2,21 @@ 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';
 import 'artist_card.dart';
 
 class ArtistRow extends StatefulWidget {
   final String title;
   final Future<List<Artist>> Function() loadArtists;
   final String? heroTagSuffix;
+  final double? rowHeight;
 
   const ArtistRow({
     super.key,
     required this.title,
     required this.loadArtists,
     this.heroTagSuffix,
+    this.rowHeight,
   });
 
   @override
@@ -22,6 +25,7 @@ class ArtistRow extends StatefulWidget {
 
 class _ArtistRowState extends State<ArtistRow> with AutomaticKeepAliveClientMixin {
   late Future<List<Artist>> _artistsFuture;
+  List<Artist>? _cachedArtists; // Keep last loaded data to prevent flash
   bool _hasLoaded = false;
 
   @override
@@ -35,76 +39,124 @@ class _ArtistRowState extends State<ArtistRow> with AutomaticKeepAliveClientMixi
 
   void _loadArtistsOnce() {
     if (!_hasLoaded) {
-      _artistsFuture = widget.loadArtists();
+      _artistsFuture = widget.loadArtists().then((artists) {
+        _cachedArtists = artists;
+        return artists;
+      });
       _hasLoaded = true;
     }
   }
 
+  static final _logger = DebugLogger();
+
   @override
   Widget build(BuildContext context) {
+    _logger.startBuild('ArtistRow:${widget.title}');
     super.build(context); // Required for AutomaticKeepAliveClientMixin
     final textTheme = Theme.of(context).textTheme;
     final colorScheme = Theme.of(context).colorScheme;
 
-    return Column(
-      crossAxisAlignment: CrossAxisAlignment.start,
-      children: [
-        Padding(
-          padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
-          child: Text(
-            widget.title,
-            style: textTheme.titleLarge?.copyWith(
-              fontWeight: FontWeight.bold,
-              color: colorScheme.onBackground,
+    // Total row height includes title + content
+    final totalHeight = widget.rowHeight ?? 207.0; // Default: 44 title + 163 content
+    const titleHeight = 44.0; // 12 top padding + ~24 text + 8 bottom padding
+    final contentHeight = totalHeight - titleHeight;
+
+    final result = RepaintBoundary(
+      child: SizedBox(
+        height: totalHeight,
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Padding(
+              padding: const EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0),
+              child: Text(
+                widget.title,
+                style: textTheme.titleLarge?.copyWith(
+                fontWeight: FontWeight.bold,
+                color: colorScheme.onBackground,
+              ),
             ),
           ),
-        ),
-        SizedBox(
-          height: 180,
-          child: FutureBuilder<List<Artist>>(
-            future: _artistsFuture,
-            builder: (context, snapshot) {
-              if (snapshot.connectionState == ConnectionState.waiting) {
-                return const Center(child: CircularProgressIndicator());
-              }
+          Expanded(
+            child: FutureBuilder<List<Artist>>(
+              future: _artistsFuture,
+              builder: (context, snapshot) {
+                // Use cached data immediately if available (prevents flash on rebuild)
+                final artists = snapshot.data ?? _cachedArtists;
 
-              if (snapshot.hasError) {
-                return Center(
-                  child: Text('Error: ${snapshot.error}'),
-                );
-              }
+                // Only show loading if we have no data at all
+                if (artists == null && snapshot.connectionState == ConnectionState.waiting) {
+                  return const Center(child: CircularProgressIndicator());
+                }
 
-              final artists = snapshot.data ?? [];
-              if (artists.isEmpty) {
-                return Center(
-                  child: Text(
-                    'No artists found',
-                    style: TextStyle(color: colorScheme.onSurface.withOpacity(0.5)),
-                  ),
-                );
-              }
+                if (snapshot.hasError && artists == null) {
+                  return Center(
+                    child: Text('Error: ${snapshot.error}'),
+                  );
+                }
 
-              return ListView.builder(
-                scrollDirection: Axis.horizontal,
-                padding: const EdgeInsets.symmetric(horizontal: 12.0),
-                physics: const BouncingScrollPhysics(),
-                itemCount: artists.length,
-                itemBuilder: (context, index) {
-                  final artist = artists[index];
-                  return Container(
-                    width: 120,
-                    margin: const EdgeInsets.symmetric(horizontal: 8.0),
-                    child: ArtistCard(
-                      artist: artist,
-                      heroTagSuffix: widget.heroTagSuffix,
+                if (artists == null || artists.isEmpty) {
+                  return Center(
+                    child: Text(
+                      'No artists found',
+                      style: TextStyle(color: colorScheme.onSurface.withOpacity(0.5)),
                     ),
                   );
-                },
-              );
-            },
+                }
+
+                // Card layout: circle image + name below
+                // Text area: 8px gap + ~36px for 2-line name = ~44px
+                const textAreaHeight = 44.0;
+                final imageSize = contentHeight - textAreaHeight;
+                final cardWidth = imageSize; // Card width = image width (circle)
+                final itemExtent = cardWidth + 16; // width + horizontal margins
+
+                return ScrollConfiguration(
+                  behavior: const _StretchScrollBehavior(),
+                  child: ListView.builder(
+                    scrollDirection: Axis.horizontal,
+                    padding: const EdgeInsets.symmetric(horizontal: 12.0),
+                    itemCount: artists.length,
+                    itemExtent: itemExtent,
+                    cacheExtent: 500, // Preload ~3 items ahead for smoother scrolling
+                    addAutomaticKeepAlives: false, // Row already uses AutomaticKeepAliveClientMixin
+                    addRepaintBoundaries: false, // Cards already have RepaintBoundary
+                    itemBuilder: (context, index) {
+                      final artist = artists[index];
+                      return Container(
+                        key: ValueKey(artist.uri ?? artist.itemId),
+                        width: cardWidth,
+                        margin: const EdgeInsets.symmetric(horizontal: 8.0),
+                        child: ArtistCard(
+                          artist: artist,
+                          heroTagSuffix: widget.heroTagSuffix,
+                        ),
+                      );
+                    },
+                  ),
+                );
+              },
+            ),
           ),
+          ],
         ),
-      ],
+      ),
+    );
+    _logger.endBuild('ArtistRow:${widget.title}');
+    return result;
+  }
+}
+
+/// Custom scroll behavior that uses Android 12+ stretch overscroll effect
+class _StretchScrollBehavior extends ScrollBehavior {
+  const _StretchScrollBehavior();
+
+  @override
+  Widget buildOverscrollIndicator(
+      BuildContext context, Widget child, ScrollableDetails details) {
+    return StretchingOverscrollIndicator(
+      axisDirection: details.direction,
+      child: child,
     );
   }
 }

lib/widgets/cached_image.dart

@@ -0,0 +1,150 @@
+import 'package:flutter/material.dart';
+import 'package:cached_network_image/cached_network_image.dart';
+
+/// A wrapper around CachedNetworkImage for consistent image caching throughout the app.
+///
+/// Benefits over NetworkImage:
+/// - Disk caching (persists across app restarts)
+/// - Memory caching with configurable limits
+/// - Placeholder and error widgets
+/// - Fade-in animation
+class CachedImage extends StatelessWidget {
+  final String imageUrl;
+  final double? width;
+  final double? height;
+  final BoxFit fit;
+  final Widget? placeholder;
+  final Widget? errorWidget;
+  final int? cacheWidth;
+  final int? cacheHeight;
+  final BorderRadius? borderRadius;
+
+  const CachedImage({
+    super.key,
+    required this.imageUrl,
+    this.width,
+    this.height,
+    this.fit = BoxFit.cover,
+    this.placeholder,
+    this.errorWidget,
+    this.cacheWidth,
+    this.cacheHeight,
+    this.borderRadius,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    Widget image = CachedNetworkImage(
+      imageUrl: imageUrl,
+      width: width,
+      height: height,
+      fit: fit,
+      memCacheWidth: cacheWidth,
+      memCacheHeight: cacheHeight,
+      fadeInDuration: const Duration(milliseconds: 150),
+      fadeOutDuration: const Duration(milliseconds: 150),
+      placeholder: (context, url) => placeholder ?? Container(
+        color: colorScheme.surfaceVariant,
+        child: Center(
+          child: CircularProgressIndicator(
+            strokeWidth: 2,
+            color: colorScheme.onSurfaceVariant.withOpacity(0.5),
+          ),
+        ),
+      ),
+      errorWidget: (context, url, error) => errorWidget ?? Container(
+        color: colorScheme.surfaceVariant,
+        child: Icon(
+          Icons.broken_image_rounded,
+          color: colorScheme.onSurfaceVariant,
+        ),
+      ),
+    );
+
+    if (borderRadius != null) {
+      image = ClipRRect(
+        borderRadius: borderRadius!,
+        child: image,
+      );
+    }
+
+    return image;
+  }
+}
+
+/// A circular cached image, perfect for artist avatars
+class CachedCircleAvatar extends StatelessWidget {
+  final String? imageUrl;
+  final double radius;
+  final Widget? fallbackIcon;
+  final Color? backgroundColor;
+
+  const CachedCircleAvatar({
+    super.key,
+    this.imageUrl,
+    this.radius = 24,
+    this.fallbackIcon,
+    this.backgroundColor,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+    final bgColor = backgroundColor ?? colorScheme.surfaceVariant;
+
+    if (imageUrl == null || imageUrl!.isEmpty) {
+      return CircleAvatar(
+        radius: radius,
+        backgroundColor: bgColor,
+        child: fallbackIcon ?? Icon(
+          Icons.person_rounded,
+          color: colorScheme.onSurfaceVariant,
+          size: radius,
+        ),
+      );
+    }
+
+    return CachedNetworkImage(
+      imageUrl: imageUrl!,
+      memCacheWidth: (radius * 4).toInt(),
+      memCacheHeight: (radius * 4).toInt(),
+      fadeInDuration: const Duration(milliseconds: 150),
+      fadeOutDuration: const Duration(milliseconds: 150),
+      imageBuilder: (context, imageProvider) => CircleAvatar(
+        radius: radius,
+        backgroundColor: bgColor,
+        backgroundImage: imageProvider,
+      ),
+      placeholder: (context, url) => CircleAvatar(
+        radius: radius,
+        backgroundColor: bgColor,
+        child: SizedBox(
+          width: radius,
+          height: radius,
+          child: CircularProgressIndicator(
+            strokeWidth: 2,
+            color: colorScheme.onSurfaceVariant.withOpacity(0.5),
+          ),
+        ),
+      ),
+      errorWidget: (context, url, error) => CircleAvatar(
+        radius: radius,
+        backgroundColor: bgColor,
+        child: fallbackIcon ?? Icon(
+          Icons.person_rounded,
+          color: colorScheme.onSurfaceVariant,
+          size: radius,
+        ),
+      ),
+    );
+  }
+}
+
+/// Get a CachedNetworkImageProvider for use with DecorationImage, CircleAvatar, etc.
+/// This is useful when you need an ImageProvider rather than a widget.
+CachedNetworkImageProvider? cachedImageProvider(String? imageUrl) {
+  if (imageUrl == null || imageUrl.isEmpty) return null;
+  return CachedNetworkImageProvider(imageUrl);
+}

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

@@ -0,0 +1,289 @@
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+import '../providers/music_assistant_provider.dart';
+import '../providers/navigation_provider.dart';
+import '../theme/theme_provider.dart';
+import 'expandable_player.dart';
+
+/// Cached color with contrast adjustment
+/// Avoids expensive HSL conversions during scroll
+class _CachedNavColor {
+  Color? _sourceColor;
+  bool? _isDark;
+  Color? _adjustedColor;
+
+  Color getAdjustedColor(Color sourceColor, bool isDark) {
+    // Return cached value if inputs haven't changed
+    if (_sourceColor == sourceColor && _isDark == isDark && _adjustedColor != null) {
+      return _adjustedColor!;
+    }
+
+    // Compute new adjusted color
+    var navSelectedColor = sourceColor;
+    if (isDark && navSelectedColor.computeLuminance() < 0.2) {
+      final hsl = HSLColor.fromColor(navSelectedColor);
+      navSelectedColor = hsl.withLightness((hsl.lightness + 0.3).clamp(0.0, 0.8)).toColor();
+    } else if (!isDark && navSelectedColor.computeLuminance() > 0.8) {
+      final hsl = HSLColor.fromColor(navSelectedColor);
+      navSelectedColor = hsl.withLightness((hsl.lightness - 0.3).clamp(0.2, 1.0)).toColor();
+    }
+
+    // Cache the result
+    _sourceColor = sourceColor;
+    _isDark = isDark;
+    _adjustedColor = navSelectedColor;
+
+    return navSelectedColor;
+  }
+}
+
+final _cachedNavColor = _CachedNavColor();
+
+/// A global key to access the player state from anywhere in the app
+final globalPlayerKey = GlobalKey<ExpandablePlayerState>();
+
+/// Key for the overlay state to control visibility
+final _overlayStateKey = GlobalKey<_GlobalPlayerOverlayState>();
+
+/// Constants for bottom UI elements spacing
+class BottomSpacing {
+  /// Height of the bottom navigation bar
+  static const double navBarHeight = 56.0;
+
+  /// Height of mini player when visible (64px height + 12px margin)
+  static const double miniPlayerHeight = 76.0;
+
+  /// Space needed when only nav bar is visible (with some extra padding)
+  static const double navBarOnly = navBarHeight + 16.0;
+
+  /// Space needed when mini player is also visible
+  static const double withMiniPlayer = navBarHeight + miniPlayerHeight + 22.0;
+}
+
+/// ValueNotifier for player expansion progress (0.0 to 1.0) and background color
+class PlayerExpansionState {
+  final double progress;
+  final Color? backgroundColor;
+  PlayerExpansionState(this.progress, this.backgroundColor);
+}
+final playerExpansionNotifier = ValueNotifier<PlayerExpansionState>(PlayerExpansionState(0.0, null));
+
+/// Wrapper widget that provides a global player overlay above all navigation.
+///
+/// This ensures the mini player and expanded player are consistent across
+/// all screens (home, library, album details, artist details, etc.) without
+/// needing separate player instances in each screen.
+class GlobalPlayerOverlay extends StatefulWidget {
+  final Widget child;
+
+  GlobalPlayerOverlay({
+    required this.child,
+  }) : super(key: _overlayStateKey);
+
+  @override
+  State<GlobalPlayerOverlay> createState() => _GlobalPlayerOverlayState();
+
+  /// Collapse the player if it's expanded
+  static void collapsePlayer() {
+    globalPlayerKey.currentState?.collapse();
+  }
+
+  /// Check if the player is currently expanded
+  static bool get isPlayerExpanded =>
+      globalPlayerKey.currentState?.isExpanded ?? false;
+
+  /// Get the current expansion progress (0.0 to 1.0)
+  static double get expansionProgress =>
+      globalPlayerKey.currentState?.expansionProgress ?? 0.0;
+
+  /// Get the current expanded background color
+  static Color? get expandedBackgroundColor =>
+      globalPlayerKey.currentState?.currentExpandedBgColor;
+
+  /// Hide the mini player temporarily (e.g., when showing device selector)
+  /// The player slides down off-screen with animation
+  static void hidePlayer() {
+    _overlayStateKey.currentState?._setHidden(true);
+  }
+
+  /// Show the mini player again (slides back up)
+  static void showPlayer() {
+    _overlayStateKey.currentState?._setHidden(false);
+  }
+}
+
+class _GlobalPlayerOverlayState extends State<GlobalPlayerOverlay>
+    with SingleTickerProviderStateMixin {
+  late AnimationController _slideController;
+  late Animation<double> _slideAnimation;
+
+  @override
+  void initState() {
+    super.initState();
+    _slideController = AnimationController(
+      duration: const Duration(milliseconds: 250),
+      vsync: this,
+    );
+    _slideAnimation = CurvedAnimation(
+      parent: _slideController,
+      curve: Curves.easeOutCubic,
+      reverseCurve: Curves.easeInCubic,
+    );
+  }
+
+  @override
+  void dispose() {
+    _slideController.dispose();
+    super.dispose();
+  }
+
+  void _setHidden(bool hidden) {
+    if (hidden) {
+      _slideController.forward();
+    } else {
+      _slideController.reverse();
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final colorScheme = theme.colorScheme;
+
+    return Stack(
+      children: [
+        // The main app content (Navigator, screens, etc.)
+        // Add bottom padding to account for bottom nav + mini player
+        Padding(
+          padding: const EdgeInsets.only(bottom: 0), // Content manages its own padding
+          child: widget.child,
+        ),
+        // Global persistent bottom navigation bar - positioned at bottom
+        Positioned(
+          left: 0,
+          right: 0,
+          bottom: 0,
+          child: ListenableBuilder(
+            listenable: navigationProvider,
+            builder: (context, _) {
+              return Consumer<ThemeProvider>(
+                builder: (context, themeProvider, _) {
+                  // Use adaptive primary color for bottom nav when adaptive theme is enabled
+                  final sourceColor = themeProvider.adaptiveTheme
+                      ? themeProvider.adaptivePrimaryColor
+                      : colorScheme.primary;
+
+                  // Use cached color computation to avoid expensive HSL operations during scroll
+                  final isDark = Theme.of(context).brightness == Brightness.dark;
+                  final navSelectedColor = _cachedNavColor.getAdjustedColor(sourceColor, isDark);
+
+                  // 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,
+                    // Pass BottomNavigationBar as child to avoid rebuilding it every frame
+                    child: BottomNavigationBar(
+                      currentIndex: navigationProvider.selectedIndex,
+                      onTap: (index) {
+                        if (GlobalPlayerOverlay.isPlayerExpanded) {
+                          GlobalPlayerOverlay.collapsePlayer();
+                        }
+                        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,
+                          boxShadow: expansionState.progress < 0.5
+                              ? [
+                                  BoxShadow(
+                                    color: Colors.black.withOpacity(0.1),
+                                    blurRadius: 10,
+                                    offset: const Offset(0, -2),
+                                  ),
+                                ]
+                              : null,
+                        ),
+                        child: navBar, // Reuse pre-built navigation bar
+                      );
+                    },
+                  );
+                },
+              );
+            },
+          ),
+        ),
+        // Global player overlay - slides down when hidden, renders ON TOP of bottom nav
+        // Use Selector instead of Consumer to avoid rebuilds during animation
+        Selector<MusicAssistantProvider, ({bool isConnected, bool hasPlayer})>(
+          selector: (_, provider) => (
+            isConnected: provider.isConnected,
+            hasPlayer: provider.selectedPlayer != null,
+          ),
+          builder: (context, state, child) {
+            // Only show player if connected and has a selected player
+            if (!state.isConnected || !state.hasPlayer) {
+              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/mini_player.dart

@@ -1,237 +0,0 @@
-import 'package:flutter/material.dart';
-import 'package:provider/provider.dart';
-import '../providers/music_assistant_provider.dart';
-import '../screens/now_playing_screen.dart';
-import '../screens/queue_screen.dart';
-import 'volume_control.dart';
-import '../constants/hero_tags.dart';
-import 'animated_icon_button.dart';
-
-class MiniPlayer extends StatelessWidget {
-  const MiniPlayer({super.key});
-
-  @override
-  Widget build(BuildContext context) {
-    final colorScheme = Theme.of(context).colorScheme;
-
-    return Consumer<MusicAssistantProvider>(
-      builder: (context, maProvider, child) {
-        final selectedPlayer = maProvider.selectedPlayer;
-        final currentTrack = maProvider.currentTrack;
-
-        // Don't show mini player if no track is playing or no player selected
-        if (currentTrack == null || selectedPlayer == null) {
-          return const SizedBox.shrink();
-        }
-
-        final imageUrl = maProvider.getImageUrl(currentTrack, size: 96);
-
-        return GestureDetector(
-          onTap: () {
-            Navigator.push(
-              context,
-              PageRouteBuilder(
-                pageBuilder: (context, animation, secondaryAnimation) => const NowPlayingScreen(),
-                transitionDuration: const Duration(milliseconds: 500),
-                reverseTransitionDuration: const Duration(milliseconds: 350),
-                transitionsBuilder: (context, animation, secondaryAnimation, child) {
-                  return child;
-                },
-              ),
-            );
-          },
-          child: Container(
-            height: 80,
-            margin: const EdgeInsets.only(left: 8, right: 8, bottom: 8),
-            child: Hero(
-              tag: HeroTags.nowPlayingBackground,
-              transitionOnUserGestures: true,
-              child: Material(
-                color: colorScheme.primaryContainer,
-                borderRadius: BorderRadius.circular(20),
-                elevation: 4,
-                shadowColor: Colors.black.withOpacity(0.3),
-                child: ClipRRect(
-                  borderRadius: BorderRadius.circular(20),
-                  child: Row(
-                    children: [
-                      // Album art with Hero animation - full height
-                      Hero(
-                        tag: HeroTags.nowPlayingArt,
-                        transitionOnUserGestures: true,
-                        child: Container(
-                          width: 80,
-                          height: 80,
-                            child: ClipRRect(
-                              borderRadius: BorderRadius.only(
-                                topLeft: Radius.circular(20),
-                                bottomLeft: Radius.circular(20),
-                              ),
-                              child: imageUrl != null
-                                  ? Image.network(
-                                      imageUrl,
-                                      fit: BoxFit.cover,
-                                      cacheWidth: 96,
-                                      cacheHeight: 96,
-                                      filterQuality: FilterQuality.medium,
-                                      errorBuilder: (context, error, stackTrace) {
-                                        return Container(
-                                          color: colorScheme.surfaceVariant,
-                                          child: Icon(
-                                            Icons.music_note_rounded,
-                                            color: colorScheme.onSurfaceVariant,
-                                            size: 24,
-                                          ),
-                                        );
-                                      },
-                                    )
-                                  : Container(
-                                      color: colorScheme.surfaceVariant,
-                                      child: Icon(
-                                        Icons.music_note_rounded,
-                                        color: colorScheme.onSurfaceVariant,
-                                        size: 24,
-                                      ),
-                                    ),
-                            ),
-                          ),
-                        ),
-                        const SizedBox(width: 16),
-                        // Track info
-                        Expanded(
-                          child: Padding(
-                            padding: const EdgeInsets.only(right: 12.0),
-                            child: Column(
-                            mainAxisAlignment: MainAxisAlignment.center,
-                            crossAxisAlignment: CrossAxisAlignment.start,
-                            children: [
-                              Text(
-                                currentTrack.name,
-                                style: TextStyle(
-                                  color: colorScheme.onSurface,
-                                  fontSize: 16,
-                                  fontWeight: FontWeight.w500,
-                                ),
-                                maxLines: 1,
-                                overflow: TextOverflow.ellipsis,
-                              ),
-                              const SizedBox(height: 4),
-                              Text(
-                                currentTrack.artistsString,
-                                style: TextStyle(
-                                  color: colorScheme.onSurface.withOpacity(0.7),
-                                  fontSize: 14,
-                                ),
-                                maxLines: 1,
-                                overflow: TextOverflow.ellipsis,
-                              ),
-                            ],
-                          ),
-                        ),
-                      ),
-                      // Playback controls for selected player
-                        Hero(
-                          tag: HeroTags.nowPlayingPreviousButton,
-                          transitionOnUserGestures: true,
-                          child: Material(
-                            color: Colors.transparent,
-                            child: AnimatedIconButton(
-                              icon: Icons.skip_previous_rounded,
-                              color: colorScheme.onSurface,
-                              iconSize: 30,
-                              onPressed: () async {
-                                try {
-                                  await maProvider.previousTrackSelectedPlayer();
-                                } catch (e) {
-                                  print('❌ Error in previous track: $e');
-                                  if (context.mounted) {
-                                    ScaffoldMessenger.of(context).showSnackBar(
-                                      SnackBar(content: Text('Error: $e')),
-                                    );
-                                  }
-                                }
-                              },
-                            ),
-                          ),
-                        ),
-                        Hero(
-                          tag: HeroTags.nowPlayingPlayButton,
-                          transitionOnUserGestures: true,
-                          child: Material(
-                            color: Colors.transparent,
-                            child: GestureDetector(
-                              onLongPress: () async {
-                                try {
-                                  // Stop player and clear queue on long press
-                                  await maProvider.stopPlayer(selectedPlayer.playerId);
-                                  if (context.mounted) {
-                                    ScaffoldMessenger.of(context).showSnackBar(
-                                      const SnackBar(content: Text('Playback stopped')),
-                                    );
-                                  }
-                                } catch (e) {
-                                  print('❌ Error stopping player: $e');
-                                  if (context.mounted) {
-                                    ScaffoldMessenger.of(context).showSnackBar(
-                                      SnackBar(content: Text('Error: $e')),
-                                    );
-                                  }
-                                }
-                              },
-                              child: AnimatedIconButton(
-                                icon: selectedPlayer.isPlaying
-                                    ? Icons.pause_rounded
-                                    : Icons.play_arrow_rounded,
-                                color: colorScheme.onSurface,
-                                iconSize: 38,
-                                onPressed: () async {
-                                  try {
-                                    await maProvider.playPauseSelectedPlayer();
-                                  } catch (e) {
-                                    print('❌ Error in play/pause: $e');
-                                    if (context.mounted) {
-                                      ScaffoldMessenger.of(context).showSnackBar(
-                                        SnackBar(content: Text('Error: $e')),
-                                      );
-                                    }
-                                  }
-                                },
-                              ),
-                            ),
-                          ),
-                        ),
-                        Hero(
-                          tag: HeroTags.nowPlayingNextButton,
-                          transitionOnUserGestures: true,
-                          child: Material(
-                            color: Colors.transparent,
-                            child: AnimatedIconButton(
-                              icon: Icons.skip_next_rounded,
-                              color: colorScheme.onSurface,
-                              iconSize: 32,
-                              onPressed: () async {
-                                try {
-                                  await maProvider.nextTrackSelectedPlayer();
-                                } catch (e) {
-                                  print('❌ Error in next track: $e');
-                                  if (context.mounted) {
-                                    ScaffoldMessenger.of(context).showSnackBar(
-                                      SnackBar(content: Text('Error: $e')),
-                                    );
-                                  }
-                                }
-                              },
-                            ),
-                          ),
-                        ),
-                      ],
-                    ),
-                  ),
-                ),
-              ),
-            ),
-        );
-      },
-    );
-  }
-}

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,173 @@
+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,
+      addAutomaticKeepAlives: false, // Items don't need individual keep-alive
+      addRepaintBoundaries: false, // We add RepaintBoundary manually
+      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 RepaintBoundary(
+          child: 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
+              },
+            ),
+          ),
+          ),
+        );
+      },
+    );
+  }
+}